tango-app-ui-shared 3.3.1-beta.84 → 3.3.1-beta.86

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

@@ -235,11 +235,11 @@ class HeaderMenuComponent {
         this.unsubscribe.forEach((sb) => sb.unsubscribe());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HeaderMenuComponent, deps: [{ token: i1.PageInfoService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: HeaderMenuComponent, selector: "lib-header-menu", inputs: { appPageTitleDirection: "appPageTitleDirection", appPageTitleDescription: "appPageTitleDescription" }, ngImport: i0, template: "<ng-container *ngIf=\"title$ | async as title\">\r\n  <!-- begin::Title -->\r\n  <h1 class=\"page-heading d-flex text-gray-900 fw-bold fs-3 my-0 flex-column justify-content-center\">\r\n    {{ title }}\r\n    <ng-container *ngIf=\"appPageTitleDescription\">\r\n      <ng-container *ngIf=\"description$ | async as description\">\r\n\r\n\r\n        <!--begin::Description-->\r\n        <span class=\"page-desc text-muted fs-7 fw-semibold mt-2\" [ngClass]=\"{'pt-2': appPageTitleDirection === 'column'}\">\r\n          <ng-container *ngIf=\"appPageTitleDirection === 'row'\">\r\n            <!--begin::Separator-->\r\n            <span class=\"h-20px border-1 border-gray-300 border-start ms-3 mx-2\"></span>\r\n            <!--end::Separator-->\r\n          </ng-container>\r\n\r\n          <!-- {{description}} -->\r\n        </span>\r\n        <!--end::Description-->\r\n      </ng-container>\r\n\r\n    </ng-container>\r\n\r\n  </h1>\r\n  <!-- end::Title -->\r\n\r\n</ng-container>\r\n", styles: [":host{height:inherit;width:inherit}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: HeaderMenuComponent, selector: "lib-header-menu", inputs: { appPageTitleDirection: "appPageTitleDirection", appPageTitleDescription: "appPageTitleDescription" }, ngImport: i0, template: "<ng-container *ngIf=\"title$ | async as title\">\r\n  <!-- begin::Title -->\r\n  <h1 class=\"page-heading d-flex text-gray-900 fw-bold fs-3 mt-7 mb-0 flex-column justify-content-center\">\r\n    {{ title }}\r\n    <ng-container *ngIf=\"appPageTitleDescription\">\r\n      <ng-container *ngIf=\"description$ | async as description\">\r\n\r\n\r\n        <!--begin::Description-->\r\n        <span class=\"page-desc text-muted fs-7 fw-semibold mt-2\" [ngClass]=\"{'pt-2': appPageTitleDirection === 'column'}\">\r\n          <ng-container *ngIf=\"appPageTitleDirection === 'row'\">\r\n            <!--begin::Separator-->\r\n            <span class=\"h-20px border-1 border-gray-300 border-start ms-3 mx-2\"></span>\r\n            <!--end::Separator-->\r\n          </ng-container>\r\n\r\n          <!-- {{description}} -->\r\n        </span>\r\n        <!--end::Description-->\r\n      </ng-container>\r\n\r\n    </ng-container>\r\n\r\n  </h1>\r\n  <!-- end::Title -->\r\n\r\n</ng-container>\r\n", styles: [":host{height:inherit;width:inherit}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HeaderMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-header-menu', template: "<ng-container *ngIf=\"title$ | async as title\">\r\n  <!-- begin::Title -->\r\n  <h1 class=\"page-heading d-flex text-gray-900 fw-bold fs-3 my-0 flex-column justify-content-center\">\r\n    {{ title }}\r\n    <ng-container *ngIf=\"appPageTitleDescription\">\r\n      <ng-container *ngIf=\"description$ | async as description\">\r\n\r\n\r\n        <!--begin::Description-->\r\n        <span class=\"page-desc text-muted fs-7 fw-semibold mt-2\" [ngClass]=\"{'pt-2': appPageTitleDirection === 'column'}\">\r\n          <ng-container *ngIf=\"appPageTitleDirection === 'row'\">\r\n            <!--begin::Separator-->\r\n            <span class=\"h-20px border-1 border-gray-300 border-start ms-3 mx-2\"></span>\r\n            <!--end::Separator-->\r\n          </ng-container>\r\n\r\n          <!-- {{description}} -->\r\n        </span>\r\n        <!--end::Description-->\r\n      </ng-container>\r\n\r\n    </ng-container>\r\n\r\n  </h1>\r\n  <!-- end::Title -->\r\n\r\n</ng-container>\r\n", styles: [":host{height:inherit;width:inherit}\n"] }]
+            args: [{ selector: 'lib-header-menu', template: "<ng-container *ngIf=\"title$ | async as title\">\r\n  <!-- begin::Title -->\r\n  <h1 class=\"page-heading d-flex text-gray-900 fw-bold fs-3 mt-7 mb-0 flex-column justify-content-center\">\r\n    {{ title }}\r\n    <ng-container *ngIf=\"appPageTitleDescription\">\r\n      <ng-container *ngIf=\"description$ | async as description\">\r\n\r\n\r\n        <!--begin::Description-->\r\n        <span class=\"page-desc text-muted fs-7 fw-semibold mt-2\" [ngClass]=\"{'pt-2': appPageTitleDirection === 'column'}\">\r\n          <ng-container *ngIf=\"appPageTitleDirection === 'row'\">\r\n            <!--begin::Separator-->\r\n            <span class=\"h-20px border-1 border-gray-300 border-start ms-3 mx-2\"></span>\r\n            <!--end::Separator-->\r\n          </ng-container>\r\n\r\n          <!-- {{description}} -->\r\n        </span>\r\n        <!--end::Description-->\r\n      </ng-container>\r\n\r\n    </ng-container>\r\n\r\n  </h1>\r\n  <!-- end::Title -->\r\n\r\n</ng-container>\r\n", styles: [":host{height:inherit;width:inherit}\n"] }]
         }], ctorParameters: () => [{ type: i1.PageInfoService }, { type: i0.ChangeDetectorRef }], propDecorators: { appPageTitleDirection: [{
                 type: Input
             }], appPageTitleDescription: [{
@@ -3273,7 +3273,7 @@ class TrafficHeaderComponent {
     }
     onClick(event) {
         const target = event.target;
-        if (!target.closest('.dropdown1')) {
+        if (!target.closest('.dropdown2')) {
             this.Opendropdown = false;
         }
     }
@@ -3665,7 +3665,7 @@ class TrafficHeaderComponent {
             ? ""
             : selectedGroups.length === 1
                 ? selectedGroups[0].groupName
-                : `${selectedGroups.length} groups`;
+                : `${selectedGroups.length} Clusters`;
     }
     removeGroup() {
         this.Reset();
@@ -3978,7 +3978,7 @@ class TrafficHeaderComponent {
     }
     clickOutside(event) {
         const clickedInside = event.target.closest(".dropdown-container");
-        const clickedoutSide = event.target.closest(".dropdown1");
+        const clickedoutSide = event.target.closest(".dropdown2");
         if (!clickedInside) {
             this.closeDropdown();
         }
@@ -3987,11 +3987,11 @@ class TrafficHeaderComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TrafficHeaderComponent, deps: [{ token: AuthService }, { token: i2.Router }, { token: i1.GlobalStateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TrafficHeaderComponent, selector: "lib-traffic-header", host: { listeners: { "document:click": "clickOutside($event)" } }, ngImport: i0, template: "<div class=\"me-3\">\r\n    <label *ngIf=\"selectedLocationsLabel()\" class=\"badge badge-light-default mx-2\">{{selectedLocationsLabel()}} \r\n        <span class=\"cursor-pointer\" (click)=\"removeLocation()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n        <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n        </svg></span>\r\n    </label>\r\n    <label *ngIf=\"selectedGroupsLabel()\"  class=\"badge badge-light-default mx-2\">{{selectedGroupsLabel()}} \r\n        <span class=\"cursor-pointer\" (click)=\"removeGroup()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n        <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n        </svg></span>\r\n    </label>\r\n    <label  class=\"badge badge-light-default\">{{selectedStoresLabel()}}</label>\r\n</div>\r\n\r\n\r\n<div class=\"wrapper me-3\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">\r\n<lib-select [items]=\"clientList\" [multi]=\"false\" [searchField]=\"'clientName'\" [disabled]=\"false\" [idField]=\"'clientId'\"\r\n(selected)=\"onClientSelect($event)\" [selectedValues]=\"[selectedClient]\"></lib-select>\r\n</div>\r\n<div class=\"d-flex align-items-center position-relative my-1\">\r\n    <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n            <path\r\n                d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n                stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n        </svg>\r\n    </span>\r\n    <input class=\"fx-date-range form-control ps-14\" style=\"min-width: 260px !important;\" type=\"text\" matInput\r\n        ngxDaterangepickerMd [drops]=\"'down'\" [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\" [autoApply]=\"true\"\r\n        [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\"\r\n        [(ngModel)]=\"selectedDateRange\" (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\"\r\n        [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n        (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" />\r\n</div>\r\n<div class=\"position-relative\">\r\n    <button type=\"button\" (click)=\"opendropdown($event)\"  class=\"btn btn-default mx-2 rounded-3 text-nowrap border-val\">\r\n        <!-- <span class=\"me-2\">Filter</span> -->\r\n        <svg class=\"pl-3\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <path d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\" />\r\n        </svg>\r\n    </button>\r\n\r\n    <div *ngIf=\"Opendropdown\" class=\"card p-5 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 Locations\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\r\n\r\n\r\n\r\n\r\n    </div>\r\n</div>", styles: [".daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:365px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.wrapper{min-width:200px}.btn-primary{line-height:18px!important}.filter-label{color:var(--Gray-500, #667085)!important;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.position-relative{position:relative}.filter-icon{cursor:pointer}.dropdown-container{position:relative;display:inline-block;width:100%}.dropdown-header{cursor:pointer;width:100%}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize;width:100%;box-sizing:border-box}.dropdown-menu{position:absolute;top:100%;left:0;right:0;border:1px solid #ccc;background-color:#fff;z-index:1000;max-height:230px;overflow-y:auto;display:block;box-sizing:border-box;padding:10px 5px}.dropdown-item{padding:6px 0}.dropdown-item:hover{background-color:#f1f1f1}.dropdown-item input[type=checkbox]{margin-right:10px}.custom-dropdown-menu{border-radius:4px;box-shadow:0 1px 2px #1018280d}.custom-dropdown-item{display:flex;align-items:center}.custom-dropdown-item input{margin-left:10px}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:3px!important}.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:20px}input[type=checkbox]{width:16px!important;height:16px!important;margin:0 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CustomSelectComponent, selector: "lib-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7.DaterangepickerDirective, selector: "input[ngxDaterangepickerMd]", inputs: ["minDate", "maxDate", "autoApply", "alwaysShowCalendars", "showCustomRangeLabel", "linkedCalendars", "dateLimit", "singleDatePicker", "showWeekNumbers", "showISOWeekNumbers", "showDropdowns", "isInvalidDate", "isCustomDate", "isTooltipDate", "showClearButton", "customRangeDirection", "ranges", "opens", "drops", "firstMonthDayClass", "lastMonthDayClass", "emptyWeekRowClass", "emptyWeekColumnClass", "firstDayOfNextMonthClass", "lastDayOfPreviousMonthClass", "keepCalendarOpeningWithRange", "showRangeLabelOnInput", "showCancel", "lockStartDate", "timePicker", "timePicker24Hour", "timePickerIncrement", "timePickerSeconds", "closeOnAutoApply", "endKeyHolder", "startKey", "locale", "endKey"], outputs: ["change", "rangeClicked", "datesUpdated", "startDateChanged", "endDateChanged", "clearClicked"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TrafficHeaderComponent, selector: "lib-traffic-header", host: { listeners: { "document:click": "clickOutside($event)" } }, ngImport: i0, template: "<div class=\"me-3\">\r\n    <label *ngIf=\"selectedLocationsLabel()\" class=\"badge badge-light-default mx-2\">{{selectedLocationsLabel()}} \r\n        <span class=\"cursor-pointer\" (click)=\"removeLocation()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n        <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n        </svg></span>\r\n    </label>\r\n    <label *ngIf=\"selectedGroupsLabel()\"  class=\"badge badge-light-default mx-2\">{{selectedGroupsLabel()}} \r\n        <span class=\"cursor-pointer\" (click)=\"removeGroup()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n        <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n        </svg></span>\r\n    </label>\r\n    <label  class=\"badge badge-light-default\">{{selectedStoresLabel()}}</label>\r\n</div>\r\n\r\n\r\n<div class=\"wrapper me-3\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">\r\n<lib-select [items]=\"clientList\" [multi]=\"false\" [searchField]=\"'clientName'\" [disabled]=\"false\" [idField]=\"'clientId'\"\r\n(selected)=\"onClientSelect($event)\" [selectedValues]=\"[selectedClient]\"></lib-select>\r\n</div>\r\n<div class=\"d-flex align-items-center position-relative my-1\">\r\n    <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n            <path\r\n                d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n                stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n        </svg>\r\n    </span>\r\n    <input class=\"fx-date-range form-control ps-14\" style=\"min-width: 260px !important;\" type=\"text\" matInput\r\n        ngxDaterangepickerMd [drops]=\"'down'\" [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\" [autoApply]=\"true\"\r\n        [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\"\r\n        [(ngModel)]=\"selectedDateRange\" (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\"\r\n        [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n        (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" />\r\n</div>\r\n<div class=\"position-relative\">\r\n    <button type=\"button\" (click)=\"opendropdown($event)\"  class=\"btn btn-default mx-2 rounded-3 text-nowrap border-val\">\r\n        <!-- <span class=\"me-2\">Filter</span> -->\r\n        <svg class=\"pl-3\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <path d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\" />\r\n        </svg>\r\n    </button>\r\n\r\n    <div *ngIf=\"Opendropdown\" class=\"card p-5 dropdown2 position-absolute z-1 end-0\" style=\"z-index: 1 !important;\" (clickOutside)=\"closeDropdown1()\">\r\n        <div class=\"dropdown-title d-flex justify-content-between mb-2\">Filter Options\r\n            <button class=\"btn btn-outline w-25 ms-3 btn-resize\" (click)=\"Reset()\"> Reset </button>\r\n            <button class=\"btn btn-primary w-25  btn-resize\" (click)=\"Apply()\">Apply</button>\r\n        </div>\r\n\r\n     <!-- 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 Locations\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\r\n\r\n\r\n\r\n\r\n    </div>\r\n</div>", styles: [".daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:365px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.wrapper{min-width:200px}.btn-primary{line-height:18px!important}.filter-label{color:var(--Gray-500, #667085)!important;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.position-relative{position:relative}.filter-icon{cursor:pointer}.dropdown-container{position:relative;display:inline-block;width:100%}.dropdown-header{cursor:pointer;width:100%}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize;width:100%;box-sizing:border-box}.dropdown-menu{position:absolute;top:100%;left:0;right:0;border:1px solid #ccc;background-color:#fff;z-index:1000;max-height:230px;overflow-y:auto;display:block;box-sizing:border-box;padding:10px 5px}.dropdown-item{padding:6px 0}.dropdown-item:hover{background-color:#f1f1f1}.dropdown-item input[type=checkbox]{margin-right:10px}.custom-dropdown-menu{border-radius:4px;box-shadow:0 1px 2px #1018280d}.custom-dropdown-item{display:flex;align-items:center}.custom-dropdown-item input{margin-left:10px}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:3px!important}.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:20px}input[type=checkbox]{width:16px!important;height:16px!important;margin:0 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CustomSelectComponent, selector: "lib-select", inputs: ["items", "searchField", "multi", "idField", "selectedValues", "disabled", "label"], outputs: ["selected"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7.DaterangepickerDirective, selector: "input[ngxDaterangepickerMd]", inputs: ["minDate", "maxDate", "autoApply", "alwaysShowCalendars", "showCustomRangeLabel", "linkedCalendars", "dateLimit", "singleDatePicker", "showWeekNumbers", "showISOWeekNumbers", "showDropdowns", "isInvalidDate", "isCustomDate", "isTooltipDate", "showClearButton", "customRangeDirection", "ranges", "opens", "drops", "firstMonthDayClass", "lastMonthDayClass", "emptyWeekRowClass", "emptyWeekColumnClass", "firstDayOfNextMonthClass", "lastDayOfPreviousMonthClass", "keepCalendarOpeningWithRange", "showRangeLabelOnInput", "showCancel", "lockStartDate", "timePicker", "timePicker24Hour", "timePickerIncrement", "timePickerSeconds", "closeOnAutoApply", "endKeyHolder", "startKey", "locale", "endKey"], outputs: ["change", "rangeClicked", "datesUpdated", "startDateChanged", "endDateChanged", "clearClicked"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TrafficHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: "lib-traffic-header", template: "<div class=\"me-3\">\r\n    <label *ngIf=\"selectedLocationsLabel()\" class=\"badge badge-light-default mx-2\">{{selectedLocationsLabel()}} \r\n        <span class=\"cursor-pointer\" (click)=\"removeLocation()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n        <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n        </svg></span>\r\n    </label>\r\n    <label *ngIf=\"selectedGroupsLabel()\"  class=\"badge badge-light-default mx-2\">{{selectedGroupsLabel()}} \r\n        <span class=\"cursor-pointer\" (click)=\"removeGroup()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n        <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n        </svg></span>\r\n    </label>\r\n    <label  class=\"badge badge-light-default\">{{selectedStoresLabel()}}</label>\r\n</div>\r\n\r\n\r\n<div class=\"wrapper me-3\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">\r\n<lib-select [items]=\"clientList\" [multi]=\"false\" [searchField]=\"'clientName'\" [disabled]=\"false\" [idField]=\"'clientId'\"\r\n(selected)=\"onClientSelect($event)\" [selectedValues]=\"[selectedClient]\"></lib-select>\r\n</div>\r\n<div class=\"d-flex align-items-center position-relative my-1\">\r\n    <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n            <path\r\n                d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n                stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n        </svg>\r\n    </span>\r\n    <input class=\"fx-date-range form-control ps-14\" style=\"min-width: 260px !important;\" type=\"text\" matInput\r\n        ngxDaterangepickerMd [drops]=\"'down'\" [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\" [autoApply]=\"true\"\r\n        [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\"\r\n        [(ngModel)]=\"selectedDateRange\" (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\"\r\n        [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n        (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" />\r\n</div>\r\n<div class=\"position-relative\">\r\n    <button type=\"button\" (click)=\"opendropdown($event)\"  class=\"btn btn-default mx-2 rounded-3 text-nowrap border-val\">\r\n        <!-- <span class=\"me-2\">Filter</span> -->\r\n        <svg class=\"pl-3\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <path d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\" />\r\n        </svg>\r\n    </button>\r\n\r\n    <div *ngIf=\"Opendropdown\" class=\"card p-5 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 Locations\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\r\n\r\n\r\n\r\n\r\n    </div>\r\n</div>", styles: [".daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:365px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.wrapper{min-width:200px}.btn-primary{line-height:18px!important}.filter-label{color:var(--Gray-500, #667085)!important;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.position-relative{position:relative}.filter-icon{cursor:pointer}.dropdown-container{position:relative;display:inline-block;width:100%}.dropdown-header{cursor:pointer;width:100%}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize;width:100%;box-sizing:border-box}.dropdown-menu{position:absolute;top:100%;left:0;right:0;border:1px solid #ccc;background-color:#fff;z-index:1000;max-height:230px;overflow-y:auto;display:block;box-sizing:border-box;padding:10px 5px}.dropdown-item{padding:6px 0}.dropdown-item:hover{background-color:#f1f1f1}.dropdown-item input[type=checkbox]{margin-right:10px}.custom-dropdown-menu{border-radius:4px;box-shadow:0 1px 2px #1018280d}.custom-dropdown-item{display:flex;align-items:center}.custom-dropdown-item input{margin-left:10px}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:3px!important}.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:20px}input[type=checkbox]{width:16px!important;height:16px!important;margin:0 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}\n"] }]
+            args: [{ selector: "lib-traffic-header", template: "<div class=\"me-3\">\r\n    <label *ngIf=\"selectedLocationsLabel()\" class=\"badge badge-light-default mx-2\">{{selectedLocationsLabel()}} \r\n        <span class=\"cursor-pointer\" (click)=\"removeLocation()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n        <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n        </svg></span>\r\n    </label>\r\n    <label *ngIf=\"selectedGroupsLabel()\"  class=\"badge badge-light-default mx-2\">{{selectedGroupsLabel()}} \r\n        <span class=\"cursor-pointer\" (click)=\"removeGroup()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n        <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n        </svg></span>\r\n    </label>\r\n    <label  class=\"badge badge-light-default\">{{selectedStoresLabel()}}</label>\r\n</div>\r\n\r\n\r\n<div class=\"wrapper me-3\" *ngIf=\"(gs.userAccess | async)?.userType === 'tango'\">\r\n<lib-select [items]=\"clientList\" [multi]=\"false\" [searchField]=\"'clientName'\" [disabled]=\"false\" [idField]=\"'clientId'\"\r\n(selected)=\"onClientSelect($event)\" [selectedValues]=\"[selectedClient]\"></lib-select>\r\n</div>\r\n<div class=\"d-flex align-items-center position-relative my-1\">\r\n    <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n            <path\r\n                d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n                stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n        </svg>\r\n    </span>\r\n    <input class=\"fx-date-range form-control ps-14\" style=\"min-width: 260px !important;\" type=\"text\" matInput\r\n        ngxDaterangepickerMd [drops]=\"'down'\" [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\" [autoApply]=\"true\"\r\n        [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\"\r\n        [(ngModel)]=\"selectedDateRange\" (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\"\r\n        [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n        (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" />\r\n</div>\r\n<div class=\"position-relative\">\r\n    <button type=\"button\" (click)=\"opendropdown($event)\"  class=\"btn btn-default mx-2 rounded-3 text-nowrap border-val\">\r\n        <!-- <span class=\"me-2\">Filter</span> -->\r\n        <svg class=\"pl-3\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <path d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\" />\r\n        </svg>\r\n    </button>\r\n\r\n    <div *ngIf=\"Opendropdown\" class=\"card p-5 dropdown2 position-absolute z-1 end-0\" style=\"z-index: 1 !important;\" (clickOutside)=\"closeDropdown1()\">\r\n        <div class=\"dropdown-title d-flex justify-content-between mb-2\">Filter Options\r\n            <button class=\"btn btn-outline w-25 ms-3 btn-resize\" (click)=\"Reset()\"> Reset </button>\r\n            <button class=\"btn btn-primary w-25  btn-resize\" (click)=\"Apply()\">Apply</button>\r\n        </div>\r\n\r\n     <!-- 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 Locations\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\r\n\r\n\r\n\r\n\r\n    </div>\r\n</div>", styles: [".daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:365px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.wrapper{min-width:200px}.btn-primary{line-height:18px!important}.filter-label{color:var(--Gray-500, #667085)!important;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.position-relative{position:relative}.filter-icon{cursor:pointer}.dropdown-container{position:relative;display:inline-block;width:100%}.dropdown-header{cursor:pointer;width:100%}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize;width:100%;box-sizing:border-box}.dropdown-menu{position:absolute;top:100%;left:0;right:0;border:1px solid #ccc;background-color:#fff;z-index:1000;max-height:230px;overflow-y:auto;display:block;box-sizing:border-box;padding:10px 5px}.dropdown-item{padding:6px 0}.dropdown-item:hover{background-color:#f1f1f1}.dropdown-item input[type=checkbox]{margin-right:10px}.custom-dropdown-menu{border-radius:4px;box-shadow:0 1px 2px #1018280d}.custom-dropdown-item{display:flex;align-items:center}.custom-dropdown-item input{margin-left:10px}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:3px!important}.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:20px}input[type=checkbox]{width:16px!important;height:16px!important;margin:0 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}\n"] }]
         }], ctorParameters: () => [{ type: AuthService }, { type: i2.Router }, { type: i1.GlobalStateService }, { type: i0.ChangeDetectorRef }], propDecorators: { onClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
@@ -4145,6 +4145,7 @@ class TraxHeaderComponent {
             this.resetFilters();
             // console.log("2")
         }
+        this.ranges = this.getDateRanges(this.selectedFilters.client);
     }
     syncWithLocalStorage(items) {
         return items
@@ -4274,15 +4275,49 @@ class TraxHeaderComponent {
         // Trigger change detection to reflect UI changes
         this.cd.detectChanges();
     }
-    ranges = {
-        Today: [dayjs(), dayjs()],
-        Yesterday: [dayjs().subtract(1, 'days'), dayjs().subtract(1, 'days')],
-        'This Week': [dayjs().subtract(7, 'days'), dayjs().subtract(1, 'days')],
-        'Last Week': [
-            dayjs().subtract(14, 'days').startOf('day'),
-            dayjs().subtract(8, 'days').endOf('day'),
-        ],
-    };
+    getDateRanges(client) {
+        if (client === '11') {
+            return {
+                Today: [dayjs(), dayjs()],
+                Yesterday: [dayjs().subtract(1, 'days'), dayjs().subtract(1, 'days')],
+                'This Week': [dayjs().subtract(7, 'days'), dayjs().subtract(1, 'days')],
+                'Last Week': [
+                    dayjs().subtract(14, 'days').startOf('day'),
+                    dayjs().subtract(8, 'days').endOf('day'),
+                ],
+            };
+        }
+        else {
+            return {
+                Today: [dayjs(), dayjs()],
+                Yesterday: [dayjs().subtract(1, 'days'), dayjs().subtract(1, 'days')],
+                'This Week': [dayjs().subtract(7, 'days'), dayjs().subtract(1, 'days')],
+                'Last Week': [
+                    dayjs().subtract(14, 'days').startOf('day'),
+                    dayjs().subtract(8, 'days').endOf('day'),
+                ],
+                'This Month': [dayjs().subtract(30, 'days'), dayjs().subtract(1, 'days')],
+                'Last Month': [
+                    dayjs().subtract(1, 'month').startOf('month'),
+                    dayjs().subtract(1, 'month').endOf('month'),
+                ],
+            };
+        }
+    }
+    ranges = {};
+    //   Today: [dayjs(), dayjs()],
+    //   Yesterday: [dayjs().subtract(1, 'days'), dayjs().subtract(1, 'days')],
+    //   'This Week': [dayjs().subtract(7, 'days'), dayjs().subtract(1, 'days')],
+    //   'Last Week': [
+    //     dayjs().subtract(14, 'days').startOf('day'),
+    //     dayjs().subtract(8, 'days').endOf('day'),
+    //   ],
+    //    'This Month': [dayjs().subtract(30, 'days'), dayjs().subtract(1, 'days')],
+    //     'Last Month': [
+    //       dayjs().subtract(1, 'month').startOf('month'),
+    //       dayjs().subtract(1, 'month').endOf('month'),
+    //     ],
+    // };
     resetValidation() {
         this.isCustomDate = (m) => {
             // Check if the given date is before yesterday
@@ -4291,18 +4326,18 @@ class TraxHeaderComponent {
     }
     onStartDateChange(event) {
         if (this.dayjs(event.startDate).isValid()) {
-            // if(this.url[2] ==='trax'){
-            this.isCustomDate = (m) => {
-                const isValidDate = m > this.dayjs() || m > this.dayjs(event.startDate.add(6, "days"));
-                return isValidDate ? "invalid-date" : false;
-            };
-            // } else {
-            // this.isCustomDate = (m: dayjs.Dayjs) => {
-            //   const isValidDate =
-            //     m > this.dayjs() || m > this.dayjs(event.startDate.add(90, "days"));
-            //   return isValidDate ? "invalid-date" : false;
-            // };
-            // }
+            if (this.selectedFilters.client === '11') {
+                this.isCustomDate = (m) => {
+                    const isValidDate = m > this.dayjs() || m > this.dayjs(event.startDate.add(6, "days"));
+                    return isValidDate ? "invalid-date" : false;
+                };
+            }
+            else {
+                this.isCustomDate = (m) => {
+                    const isValidDate = m > this.dayjs() || m > this.dayjs(event.startDate.add(30, "days"));
+                    return isValidDate ? "invalid-date" : false;
+                };
+            }
         }
     }
     datechange(event) {
@@ -4460,7 +4495,7 @@ class TraxHeaderComponent {
             ? ""
             : selectedGroups.length === 1
                 ? selectedGroups[0].groupName
-                : `${selectedGroups.length} groups`;
+                : `${selectedGroups.length} Clusters`;
     }
     removeGroup() {
         this.Reset();
@@ -5300,7 +5335,7 @@ class TraxWithoutdateComponent {
             ? ""
             : selectedGroups.length === 1
                 ? selectedGroups[0].groupName
-                : `${selectedGroups.length} groups`;
+                : `${selectedGroups.length} Clusters`;
     }
     removeGroup() {
         this.Reset();
@@ -6085,7 +6120,7 @@ class TrafficNobComponent {
             ? ""
             : selectedGroups.length === 1
                 ? selectedGroups[0].groupName
-                : `${selectedGroups.length} groups`;
+                : `${selectedGroups.length} Clusters`;
     }
     removeGroup() {
         this.Reset();
@@ -6425,11 +6460,11 @@ class TrafficNobComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TrafficNobComponent, deps: [{ token: AuthService }, { token: i2.Router }, { token: i1.GlobalStateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TrafficNobComponent, selector: "lib-traffic-nob", host: { listeners: { "document:click": "clickOutside($event)" } }, ngImport: i0, template: "<div class=\"me-3\">\r\n    <label *ngIf=\"selectedLocationsLabel()\" class=\"badge badge-light-default mx-2\">{{selectedLocationsLabel()}} \r\n        <span class=\"cursor-pointer\" (click)=\"removeLocation()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n        <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n        </svg></span>\r\n    </label>\r\n    <label *ngIf=\"selectedGroupsLabel()\"  class=\"badge badge-light-default mx-2\">{{selectedGroupsLabel()}} \r\n        <span class=\"cursor-pointer\" (click)=\"removeGroup()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n        <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n        </svg></span>\r\n    </label>\r\n    <label  class=\"badge badge-light-default\">{{selectedStoresLabel()}}</label>\r\n</div>\r\n\r\n<div class=\"d-flex align-items-center position-relative my-1\">\r\n    <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n            <path\r\n                d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n                stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n        </svg>\r\n    </span>\r\n    <input class=\"fx-date-range form-control ps-14\" style=\"min-width: 260px !important;\" type=\"text\" matInput\r\n        ngxDaterangepickerMd [drops]=\"'down'\" [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\" [autoApply]=\"true\"\r\n        [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\"\r\n        [(ngModel)]=\"selectedDateRange\" (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\"\r\n        [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n        (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" />\r\n</div>\r\n<div class=\"position-relative\">\r\n    <button type=\"button\" (click)=\"opendropdown($event)\"  class=\"btn btn-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 Locations\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\r\n\r\n\r\n\r\n\r\n    </div>\r\n</div>", styles: [".daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:365px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.wrapper{min-width:200px}.btn-primary{line-height:18px!important}.filter-label{color:var(--Gray-500, #667085)!important;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.position-relative{position:relative}.filter-icon{cursor:pointer}.dropdown-container{position:relative;display:inline-block;width:100%}.dropdown-header{cursor:pointer;width:100%}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize;width:100%;box-sizing:border-box}.dropdown-menu{position:absolute;top:100%;left:0;right:0;border:1px solid #ccc;background-color:#fff;z-index:1000;max-height:230px;overflow-y:auto;display:block;box-sizing:border-box;padding:10px 5px}.dropdown-item{padding:6px 0}.dropdown-item:hover{background-color:#f1f1f1}.dropdown-item input[type=checkbox]{margin-right:10px}.custom-dropdown-menu{border-radius:4px;box-shadow:0 1px 2px #1018280d}.custom-dropdown-item{display:flex;align-items:center}.custom-dropdown-item input{margin-left:10px}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:3px!important}.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:20px}input[type=checkbox]{width:16px!important;height:16px!important;margin:0 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7.DaterangepickerDirective, selector: "input[ngxDaterangepickerMd]", inputs: ["minDate", "maxDate", "autoApply", "alwaysShowCalendars", "showCustomRangeLabel", "linkedCalendars", "dateLimit", "singleDatePicker", "showWeekNumbers", "showISOWeekNumbers", "showDropdowns", "isInvalidDate", "isCustomDate", "isTooltipDate", "showClearButton", "customRangeDirection", "ranges", "opens", "drops", "firstMonthDayClass", "lastMonthDayClass", "emptyWeekRowClass", "emptyWeekColumnClass", "firstDayOfNextMonthClass", "lastDayOfPreviousMonthClass", "keepCalendarOpeningWithRange", "showRangeLabelOnInput", "showCancel", "lockStartDate", "timePicker", "timePicker24Hour", "timePickerIncrement", "timePickerSeconds", "closeOnAutoApply", "endKeyHolder", "startKey", "locale", "endKey"], outputs: ["change", "rangeClicked", "datesUpdated", "startDateChanged", "endDateChanged", "clearClicked"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TrafficNobComponent, selector: "lib-traffic-nob", host: { listeners: { "document:click": "clickOutside($event)" } }, ngImport: i0, template: "<div class=\"me-3\">\r\n    <label *ngIf=\"selectedLocationsLabel()\" class=\"badge badge-light-default mx-2\">{{selectedLocationsLabel()}} \r\n        <span class=\"cursor-pointer\" (click)=\"removeLocation()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n        <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n        </svg></span>\r\n    </label>\r\n    <label *ngIf=\"selectedGroupsLabel()\"  class=\"badge badge-light-default mx-2\">{{selectedGroupsLabel()}} \r\n        <span class=\"cursor-pointer\" (click)=\"removeGroup()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n        <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n        </svg></span>\r\n    </label>\r\n    <label  class=\"badge badge-light-default\">{{selectedStoresLabel()}}</label>\r\n</div>\r\n\r\n<div class=\"d-flex align-items-center position-relative my-1\">\r\n    <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n            <path\r\n                d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n                stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n        </svg>\r\n    </span>\r\n    <input class=\"fx-date-range form-control ps-14\" style=\"min-width: 260px !important;\" type=\"text\" matInput\r\n        ngxDaterangepickerMd [drops]=\"'down'\" [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\" [autoApply]=\"true\"\r\n        [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\"\r\n        [(ngModel)]=\"selectedDateRange\" (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\"\r\n        [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n        (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" />\r\n</div>\r\n<div class=\"position-relative\">\r\n    <button type=\"button\" (click)=\"opendropdown($event)\"  class=\"btn btn-default mx-2 rounded-3 text-nowrap border-val\">\r\n        <!-- <span class=\"me-2\">Filter</span> -->\r\n        <svg class=\"pl-3\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <path d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\" />\r\n        </svg>\r\n    </button>\r\n\r\n    <div *ngIf=\"Opendropdown\" class=\"card p-5 dropdown2 position-absolute z-1 end-0\" style=\"z-index: 1 !important;\" (clickOutside)=\"closeDropdown1()\">\r\n        <div class=\"dropdown-title d-flex justify-content-between mb-2\">Filter Options\r\n            <button class=\"btn btn-outline w-25 ms-3 btn-resize\" (click)=\"Reset()\"> Reset </button>\r\n            <button class=\"btn btn-primary w-25  btn-resize\" (click)=\"Apply()\">Apply</button>\r\n        </div>\r\n\r\n     <!-- 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 Locations\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\r\n\r\n\r\n\r\n\r\n    </div>\r\n</div>", styles: [".daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:365px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.wrapper{min-width:200px}.btn-primary{line-height:18px!important}.filter-label{color:var(--Gray-500, #667085)!important;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.position-relative{position:relative}.filter-icon{cursor:pointer}.dropdown-container{position:relative;display:inline-block;width:100%}.dropdown-header{cursor:pointer;width:100%}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize;width:100%;box-sizing:border-box}.dropdown-menu{position:absolute;top:100%;left:0;right:0;border:1px solid #ccc;background-color:#fff;z-index:1000;max-height:230px;overflow-y:auto;display:block;box-sizing:border-box;padding:10px 5px}.dropdown-item{padding:6px 0}.dropdown-item:hover{background-color:#f1f1f1}.dropdown-item input[type=checkbox]{margin-right:10px}.custom-dropdown-menu{border-radius:4px;box-shadow:0 1px 2px #1018280d}.custom-dropdown-item{display:flex;align-items:center}.custom-dropdown-item input{margin-left:10px}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:3px!important}.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:20px}input[type=checkbox]{width:16px!important;height:16px!important;margin:0 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7.DaterangepickerDirective, selector: "input[ngxDaterangepickerMd]", inputs: ["minDate", "maxDate", "autoApply", "alwaysShowCalendars", "showCustomRangeLabel", "linkedCalendars", "dateLimit", "singleDatePicker", "showWeekNumbers", "showISOWeekNumbers", "showDropdowns", "isInvalidDate", "isCustomDate", "isTooltipDate", "showClearButton", "customRangeDirection", "ranges", "opens", "drops", "firstMonthDayClass", "lastMonthDayClass", "emptyWeekRowClass", "emptyWeekColumnClass", "firstDayOfNextMonthClass", "lastDayOfPreviousMonthClass", "keepCalendarOpeningWithRange", "showRangeLabelOnInput", "showCancel", "lockStartDate", "timePicker", "timePicker24Hour", "timePickerIncrement", "timePickerSeconds", "closeOnAutoApply", "endKeyHolder", "startKey", "locale", "endKey"], outputs: ["change", "rangeClicked", "datesUpdated", "startDateChanged", "endDateChanged", "clearClicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TrafficNobComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-traffic-nob', template: "<div class=\"me-3\">\r\n    <label *ngIf=\"selectedLocationsLabel()\" class=\"badge badge-light-default mx-2\">{{selectedLocationsLabel()}} \r\n        <span class=\"cursor-pointer\" (click)=\"removeLocation()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n        <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n        </svg></span>\r\n    </label>\r\n    <label *ngIf=\"selectedGroupsLabel()\"  class=\"badge badge-light-default mx-2\">{{selectedGroupsLabel()}} \r\n        <span class=\"cursor-pointer\" (click)=\"removeGroup()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n        <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n        </svg></span>\r\n    </label>\r\n    <label  class=\"badge badge-light-default\">{{selectedStoresLabel()}}</label>\r\n</div>\r\n\r\n<div class=\"d-flex align-items-center position-relative my-1\">\r\n    <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n            <path\r\n                d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n                stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n        </svg>\r\n    </span>\r\n    <input class=\"fx-date-range form-control ps-14\" style=\"min-width: 260px !important;\" type=\"text\" matInput\r\n        ngxDaterangepickerMd [drops]=\"'down'\" [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\" [autoApply]=\"true\"\r\n        [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\"\r\n        [(ngModel)]=\"selectedDateRange\" (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\"\r\n        [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n        (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" />\r\n</div>\r\n<div class=\"position-relative\">\r\n    <button type=\"button\" (click)=\"opendropdown($event)\"  class=\"btn btn-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 Locations\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\r\n\r\n\r\n\r\n\r\n    </div>\r\n</div>", styles: [".daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:365px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.wrapper{min-width:200px}.btn-primary{line-height:18px!important}.filter-label{color:var(--Gray-500, #667085)!important;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.position-relative{position:relative}.filter-icon{cursor:pointer}.dropdown-container{position:relative;display:inline-block;width:100%}.dropdown-header{cursor:pointer;width:100%}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize;width:100%;box-sizing:border-box}.dropdown-menu{position:absolute;top:100%;left:0;right:0;border:1px solid #ccc;background-color:#fff;z-index:1000;max-height:230px;overflow-y:auto;display:block;box-sizing:border-box;padding:10px 5px}.dropdown-item{padding:6px 0}.dropdown-item:hover{background-color:#f1f1f1}.dropdown-item input[type=checkbox]{margin-right:10px}.custom-dropdown-menu{border-radius:4px;box-shadow:0 1px 2px #1018280d}.custom-dropdown-item{display:flex;align-items:center}.custom-dropdown-item input{margin-left:10px}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:3px!important}.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:20px}input[type=checkbox]{width:16px!important;height:16px!important;margin:0 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}\n"] }]
+            args: [{ selector: 'lib-traffic-nob', template: "<div class=\"me-3\">\r\n    <label *ngIf=\"selectedLocationsLabel()\" class=\"badge badge-light-default mx-2\">{{selectedLocationsLabel()}} \r\n        <span class=\"cursor-pointer\" (click)=\"removeLocation()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n        <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n        </svg></span>\r\n    </label>\r\n    <label *ngIf=\"selectedGroupsLabel()\"  class=\"badge badge-light-default mx-2\">{{selectedGroupsLabel()}} \r\n        <span class=\"cursor-pointer\" (click)=\"removeGroup()\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n        <path d=\"M9 3L3 9M3 3L9 9\" stroke=\"#667085\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n        </svg></span>\r\n    </label>\r\n    <label  class=\"badge badge-light-default\">{{selectedStoresLabel()}}</label>\r\n</div>\r\n\r\n<div class=\"d-flex align-items-center position-relative my-1\">\r\n    <span class=\"svg-icon svg-icon-1 position-absolute ms-3\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n            <path\r\n                d=\"M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z\"\r\n                stroke=\"#344054\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n        </svg>\r\n    </span>\r\n    <input class=\"fx-date-range form-control ps-14\" style=\"min-width: 260px !important;\" type=\"text\" matInput\r\n        ngxDaterangepickerMd [drops]=\"'down'\" [opens]=\"'right'\" [ranges]=\"ranges\" [showCustomRangeLabel]=\"true\" [autoApply]=\"true\"\r\n        [alwaysShowCalendars]=\"false\" [keepCalendarOpeningWithRange]=\"true\" [showCancel]=\"true\" autocomplete=\"off\"\r\n        [(ngModel)]=\"selectedDateRange\" (startDateChanged)=\"onStartDateChange($event)\" [isCustomDate]=\"isCustomDate\"\r\n        [locale]=\"{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }\"\r\n        (datesUpdated)=\"datechange($event)\" name=\"daterange\" [readonly]=\"true\" />\r\n</div>\r\n<div class=\"position-relative\">\r\n    <button type=\"button\" (click)=\"opendropdown($event)\"  class=\"btn btn-default mx-2 rounded-3 text-nowrap border-val\">\r\n        <!-- <span class=\"me-2\">Filter</span> -->\r\n        <svg class=\"pl-3\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <path d=\"M5 10H15M2.5 5H17.5M7.5 15H12.5\" stroke=\"#344054\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\" />\r\n        </svg>\r\n    </button>\r\n\r\n    <div *ngIf=\"Opendropdown\" class=\"card p-5 dropdown2 position-absolute z-1 end-0\" style=\"z-index: 1 !important;\" (clickOutside)=\"closeDropdown1()\">\r\n        <div class=\"dropdown-title d-flex justify-content-between mb-2\">Filter Options\r\n            <button class=\"btn btn-outline w-25 ms-3 btn-resize\" (click)=\"Reset()\"> Reset </button>\r\n            <button class=\"btn btn-primary w-25  btn-resize\" (click)=\"Apply()\">Apply</button>\r\n        </div>\r\n\r\n     <!-- 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 Locations\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\r\n\r\n\r\n\r\n\r\n    </div>\r\n</div>", styles: [".daterangepicker{display:block!important;top:153.85px!important;left:900px!important;right:0}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize}::ng-deep .applyBtn{display:none!important}:host::ng-deep .md-drppicker .btn{line-height:10px!important}:host::ng-deep .daterangepicker-input+.ngx-daterangepicker-material .applyBtn{display:none}:host::ng-deep .md-drppicker.drops-down-right.ltr.double.show-ranges.shown{top:65px!important;left:-470px!important;height:365px!important}:host::ng-deep .md-drppicker .btn{border-radius:8px!important;border:1px solid var(--Primary-600, #00A3FF)!important;background:var(--Primary-600, #00A3FF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--White, #FFF)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize}:host::ng-deep .md-drppicker .ranges ul li button{padding:12px 16px;width:160px;color:var(--Gray-700, #344054);font-size:14px;font-weight:400;line-height:20px;background:none;border:none;text-align:left;cursor:pointer}:host::ng-deep .md-drppicker td.active,:host::ng-deep .md-drppicker td.active:hover{background-color:#029cf4!important;border-radius:20px!important;color:var(--White, #FFF)!important;text-align:center!important;font-size:14px!important;font-weight:500!important;line-height:20px}:host::ng-deep .md-drppicker.ltr .ranges{float:left;margin-top:10px!important}:host::ng-deep .md-drppicker td.in-range{background:var(--Primary-50, #EAF8FF)}:host::ng-deep .md-drppicker .ranges ul li button.active{background:var(--Primary-50, #EAF8FF)!important;border-radius:8px!important;color:var(--Primary-700, #009BF3);font-size:14px!important;font-weight:500!important;line-height:20px!important}:host::ng-deep table th,:host::ng-deep table td{width:40px!important;height:40px!important;padding:10px 8px!important}:host::ng-deep .md-drppicker td.available.prev,:host::ng-deep .md-drppicker th.available.prev{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep .md-drppicker td.available.next,:host::ng-deep .md-drppicker th.available.next{background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K)!important;background-repeat:no-repeat!important;background-size:.5em!important;background-position:center!important}:host::ng-deep table th{border-bottom:0px solid var(--Gray-200, #EAECF0)!important;background:transparent!important;color:var(--Gray-700, #344054)!important;text-align:center;font-size:16px!important;font-weight:500!important;line-height:24px}:host::ng-deep .md-drppicker .btn.btn-default{border-radius:8px!important;border:1px solid var(--Gray-300, #D0D5DD)!important;background:var(--White, #FFF)!important;box-shadow:0 1px 2px #1018280d!important;color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600!important;line-height:20px;text-transform:capitalize;margin-right:10px!important}:host::ng-deep .md-drppicker td.available.invalid-date{text-decoration:line-through;pointer-events:none;color:#a9a9a9}:host::ng-deep .md-drppicker td.available.today:not(.invalid-date){text-decoration:unset;pointer-events:unset;color:unset}.wrapper{min-width:200px}.btn-primary{line-height:18px!important}.filter-label{color:var(--Gray-500, #667085)!important;font-size:14px;font-style:normal;font-weight:600;line-height:20px;text-transform:capitalize}.position-relative{position:relative}.filter-icon{cursor:pointer}.dropdown-container{position:relative;display:inline-block;width:100%}.dropdown-header{cursor:pointer;width:100%}.form-control{color:var(--Gray-700, #344054)!important;font-size:14px!important;font-weight:600;line-height:20px;text-transform:capitalize;width:100%;box-sizing:border-box}.dropdown-menu{position:absolute;top:100%;left:0;right:0;border:1px solid #ccc;background-color:#fff;z-index:1000;max-height:230px;overflow-y:auto;display:block;box-sizing:border-box;padding:10px 5px}.dropdown-item{padding:6px 0}.dropdown-item:hover{background-color:#f1f1f1}.dropdown-item input[type=checkbox]{margin-right:10px}.custom-dropdown-menu{border-radius:4px;box-shadow:0 1px 2px #1018280d}.custom-dropdown-item{display:flex;align-items:center}.custom-dropdown-item input{margin-left:10px}.btn-resize{font-size:13px!important;height:29px!important;line-height:11px!important;padding:3px!important}.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:20px}input[type=checkbox]{width:16px!important;height:16px!important;margin:0 5px;border-radius:4px!important;-webkit-appearance:none;-moz-appearance:none;-o-appearance:none;appearance:none;outline:1px solid var(--gray-300, #D0D5DD);box-shadow:none;font-size:.8em;text-align:center;line-height:1em;background:#fff}input[type=checkbox]:checked{outline:1px solid var(--primary-600, #00A3FF);background-color:var(--primary-50, #EAF8FF)}input[type=checkbox]:checked:after{content:\"\";transform:rotate(45deg);border-bottom:2px solid #00A3FF;border-right:2px solid #00A3FF;display:inline-block;width:.2em;padding-left:0;padding-top:9px;padding-right:4px}\n"] }]
         }], ctorParameters: () => [{ type: AuthService }, { type: i2.Router }, { type: i1.GlobalStateService }, { type: i0.ChangeDetectorRef }], propDecorators: { onClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
@@ -6751,24 +6786,35 @@ class SidebarMenuComponent {
         });
     }
     destroy$ = new Subject();
+    previousClientId = null;
     ngOnInit() {
         if ("user-info" in localStorage) {
             const userData = JSON.parse(localStorage.getItem("user-info") || "{}");
             this.usersList = userData;
         }
-        this.gs?.dataRangeValue.pipe((takeUntil(this.destroy$)))?.subscribe({
+        this.gs?.dataRangeValue.pipe(takeUntil(this.destroy$)).subscribe({
             next: (data) => {
-                if (data) {
-                    this.headerFilters = data;
-                    if (this.usersList?.clientId || this.headerFilters?.client)
-                        this.getClientData(this.usersList.clientId ? this.usersList.clientId : this.headerFilters.client);
-                }
-                else {
-                    if (this.usersList?.clientId || this.headerFilters?.client)
-                        this.getClientData(this.usersList.clientId ? this.usersList.clientId : this.headerFilters.client);
+                this.headerFilters = data || this.headerFilters;
+                const clientId = this.usersList?.clientId ?? this.headerFilters?.client;
+                if (clientId && clientId !== this.previousClientId) {
+                    this.previousClientId = clientId; // Store last called clientId
+                    this.getClientData(clientId);
                 }
             }
         });
+        // this.gs?.dataRangeValue.pipe((takeUntil(this.destroy$)))?.subscribe({
+        //   next: (data: any) => {
+        //     if(data){
+        //     this.headerFilters = data;
+        //     if(this.usersList?.clientId || this.headerFilters?.client)
+        //       this.getClientData(this.usersList.clientId ? this.usersList.clientId: this.headerFilters.client)
+        //     }
+        //     else {
+        //       if(this.usersList?.clientId || this.headerFilters?.client)
+        //         this.getClientData(this.usersList.clientId ? this.usersList.clientId: this.headerFilters.client)
+        //     }
+        //   }
+        // })
     }
     oldDashborad() {
         let obj = { username: this.usersList?.email }; //this.usersList?.email}; // Assuming this is required for authentication/authorization
@@ -6798,14 +6844,19 @@ class SidebarMenuComponent {
         });
     }
     getClientData(clientID) {
-        this.authService.getBrandDetails(clientID).pipe((takeUntil(this.destroy$)))?.subscribe({
+        if (!clientID)
+            return;
+        this.authService.getBrandDetails(clientID)
+            .pipe(takeUntil(this.destroy$))
+            .subscribe({
             next: (res) => {
-                if (res && res.code === 200) {
-                    this.clientData = res?.data;
+                if (res?.code === 200) {
+                    this.clientData = res.data;
                     localStorage.setItem("client-details", JSON.stringify(this.clientData?.featureConfigs));
                 }
             },
             error: (error) => {
+                console.error("Error fetching client data", error);
             }
         });
     }
@@ -7384,12 +7435,29 @@ class LayoutComponent {
     ngOnDestroy() {
         this.unsubscribe.forEach((sb) => sb.unsubscribe());
     }
+    previousScroll = 0;
+    // appHeaderDisplay = true; // Initially visible
+    isToolbarFixed = false;
+    onScroll() {
+        const currentScroll = window.scrollY;
+        if (currentScroll > this.previousScroll && currentScroll > 100) {
+            // Hide header on scroll down
+            this.appHeaderDisplay = false;
+            this.isToolbarFixed = true; // Fix toolbar
+        }
+        else {
+            // Show header on scroll up
+            this.appHeaderDisplay = true;
+            this.isToolbarFixed = currentScroll > 100; // Keep toolbar fixed if scrolled beyond 100px
+        }
+        this.previousScroll = currentScroll;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LayoutComponent, deps: [{ token: i1.LayoutInitService }, { token: i1.LayoutService }, { token: i2.Router }, { token: i2.ActivatedRoute }, { token: AuthService }, { token: ToastService }, { token: i1.GlobalStateService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: LayoutComponent, selector: "lib-layout", viewQueries: [{ propertyName: "ktSidebar", first: true, predicate: ["ktSidebar"], descendants: true, static: true }, { propertyName: "ktAside", first: true, predicate: ["ktAside"], descendants: true, static: true }, { propertyName: "ktHeaderMobile", first: true, predicate: ["ktHeaderMobile"], descendants: true, static: true }, { propertyName: "ktHeader", first: true, predicate: ["ktHeader"], descendants: true, static: true }], ngImport: i0, template: "<!--begin::App-->\r\n<div class=\"d-flex flex-column flex-root app-root\" id=\"kt_app_root\">\r\n  <!--begin::Page-->\r\n  <div class=\"app-page flex-column flex-column-fluid\" id=\"kt_app_page\">\r\n    <ng-container *ngIf=\"appHeaderDisplay\">\r\n      <!--begin::Header-->\r\n      <lib-header [ngClass]=\"appHeaderDefaultClass\" id=\"kt_app_header\" class=\"app-header\" data-kt-sticky=\"true\" data-kt-sticky-activate=\"{default: true, lg: true}\" data-kt-sticky-name=\"app-header-minimize\" data-kt-sticky-offset=\"{default: '200px', lg: '0'}\" data-kt-sticky-animation=\"false\">\r\n      </lib-header>\r\n      <!--end::Header-->\r\n    </ng-container>\r\n\r\n    <!--begin::Wrapper-->\r\n    <div class=\"app-wrapper flex-column flex-row-fluid\" id=\"kt_app_wrapper\">\r\n\r\n      <ng-container *ngIf=\"appSidebarDisplay\">\r\n        <!--begin::sidebar-->\r\n        <lib-sidebar #ktSidebar id=\"kt_app_sidebar\" class=\"app-sidebar flex-column\" [ngClass]=\"appSidebarDefaultClass\">\r\n        </lib-sidebar>\r\n        <!--end::sidebar-->\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"appSidebarPanelDisplay\">\r\n        <!-- TODO: app sidebar panel -->\r\n      </ng-container>\r\n      <!--begin::Main-->\r\n      <div class=\"app-main content flex-column flex-row-fluid\" id=\"kt_app_main\">\r\n        <!--begin::Content wrapper-->\r\n        <ng-container *ngIf=\"appToolbarDisplay\">\r\n          <lib-toolbar class=\"app-toolbar\" [ngClass]=\"appToolbarCSSClass\" id=\"kt_app_toolbar\"\r\n            [appToolbarLayout]=\"appToolbarLayout\"></lib-toolbar>\r\n        </ng-container>\r\n        <div class=\"d-flex flex-column flex-column-fluid mt-10\">\r\n        \r\n          <lib-content id=\" kt_app_content\" class=\"app-content mt-15\" [ngClass]=\"contentCSSClasses\"\r\n            [contentContainerCSSClass]=\"contentContainerCSSClass\" [appContentContiner]=\"appContentContiner\"\r\n            [appContentContainerClass]=\"appContentContainerClass\">\r\n          </lib-content>\r\n        </div>\r\n        <!--end::Content wrapper-->\r\n        <ng-container *ngIf=\"appFooterDisplay\">\r\n          <lib-footer class=\"app-footer\" [ngClass]=\"appFooterCSSClass\" id=\"kt_app_footer\"\r\n            [appFooterContainerCSSClass]=\"appFooterContainerCSSClass\"></lib-footer>\r\n        </ng-container>\r\n      </div>\r\n      <!--end:::Main-->\r\n    </div>\r\n    <!--end::Wrapper-->\r\n\r\n  </div>\r\n  <!--end::Page-->\r\n</div>\r\n<!--end::App-->\r\n\r\n<lib-scripts-init></lib-scripts-init>\r\n<ng-container>\r\n  <lib-scroll-top id=\"kt_scrolltop\" class=\"scrolltop\" data-kt-scrolltop=\"true\"></lib-scroll-top>\r\n</ng-container>\r\n<!-- begin:: Drawers -->\r\n<!-- <lib-activity-drawer></lib-activity-drawer> -->\r\n<!-- <lib-messenger-drawer></lib-messenger-drawer> -->\r\n<!-- end:: Drawers -->\r\n\r\n<!-- end:: Engage -->\r\n<!-- <lib-engages></lib-engages> -->\r\n<!-- end:: Engage -->\r\n\r\n<!-- begin:: Modals -->\r\n<!-- <lib-main-modal></lib-main-modal> -->\r\n<!-- <lib-invite-users-modal></lib-invite-users-modal> -->\r\n<!-- <lib-upgrade-plan-modal></lib-upgrade-plan-modal> -->\r\n<!-- end:: Modals -->\r\n", styles: [":host{height:100%;margin:0}:host .flex-root{height:100%}.page-loaded app-layout{opacity:1;transition:opacity 1s ease-in-out}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: HeaderComponent, selector: "lib-header" }, { kind: "component", type: ContentComponent, selector: "lib-content", inputs: ["contentContainerCSSClass", "appContentContiner", "appContentContainerClass"] }, { kind: "component", type: FooterComponent, selector: "lib-footer", inputs: ["appFooterContainerCSSClass"] }, { kind: "component", type: ScriptsInitComponent, selector: "lib-scripts-init" }, { kind: "component", type: ToolbarComponent, selector: "lib-toolbar", inputs: ["currentLayoutType", "appToolbarLayout"] }, { kind: "component", type: SidebarComponent, selector: "lib-sidebar" }, { kind: "component", type: LayoutScrollTopComponent, selector: "lib-scroll-top" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: LayoutComponent, selector: "lib-layout", host: { listeners: { "window:scroll": "onScroll()" } }, viewQueries: [{ propertyName: "ktSidebar", first: true, predicate: ["ktSidebar"], descendants: true, static: true }, { propertyName: "ktAside", first: true, predicate: ["ktAside"], descendants: true, static: true }, { propertyName: "ktHeaderMobile", first: true, predicate: ["ktHeaderMobile"], descendants: true, static: true }, { propertyName: "ktHeader", first: true, predicate: ["ktHeader"], descendants: true, static: true }], ngImport: i0, template: "<!--begin::App-->\r\n<div class=\"d-flex flex-column flex-root app-root\" id=\"kt_app_root\">\r\n  <!--begin::Page-->\r\n  <div class=\"app-page flex-column flex-column-fluid\" id=\"kt_app_page\">\r\n    <ng-container *ngIf=\"appHeaderDisplay\">\r\n      <!--begin::Header-->\r\n      <lib-header [ngClass]=\"appHeaderDefaultClass\" id=\"kt_app_header\" class=\"app-header\" data-kt-sticky=\"true\" data-kt-sticky-activate=\"{default: true, lg: true}\" data-kt-sticky-name=\"app-header-minimize\" data-kt-sticky-offset=\"{default: '200px', lg: '0'}\" data-kt-sticky-animation=\"false\">\r\n      </lib-header>\r\n      <!--end::Header-->\r\n    </ng-container>\r\n\r\n    <!--begin::Wrapper-->\r\n    <div class=\"app-wrapper flex-column flex-row-fluid\" id=\"kt_app_wrapper\">\r\n\r\n      <ng-container *ngIf=\"appSidebarDisplay\">\r\n        <!--begin::sidebar-->\r\n        <lib-sidebar #ktSidebar id=\"kt_app_sidebar\" class=\"app-sidebar flex-column\" [ngClass]=\"appSidebarDefaultClass\">\r\n        </lib-sidebar>\r\n        <!--end::sidebar-->\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"appSidebarPanelDisplay\">\r\n        <!-- TODO: app sidebar panel -->\r\n      </ng-container>\r\n      <!--begin::Main-->\r\n      <div class=\"app-main content flex-column flex-row-fluid\" id=\"kt_app_main\">\r\n        <!--begin::Content wrapper-->\r\n        <ng-container *ngIf=\"appToolbarDisplay\">\r\n          <lib-toolbar [ngClass]=\"{'fixed-toolbar': isToolbarFixed}\"  class=\"app-toolbar\" [ngClass]=\"appToolbarCSSClass\" id=\"kt_app_toolbar\"\r\n            [appToolbarLayout]=\"appToolbarLayout\"></lib-toolbar>\r\n        </ng-container>\r\n        <div class=\"d-flex flex-column flex-column-fluid mt-10\">\r\n        \r\n          <lib-content id=\" kt_app_content\" class=\"app-content mt-15\" [ngClass]=\"contentCSSClasses\"\r\n            [contentContainerCSSClass]=\"contentContainerCSSClass\" [appContentContiner]=\"appContentContiner\"\r\n            [appContentContainerClass]=\"appContentContainerClass\">\r\n          </lib-content>\r\n        </div>\r\n        <!--end::Content wrapper-->\r\n        <ng-container *ngIf=\"appFooterDisplay\">\r\n          <lib-footer class=\"app-footer\" [ngClass]=\"appFooterCSSClass\" id=\"kt_app_footer\"\r\n            [appFooterContainerCSSClass]=\"appFooterContainerCSSClass\"></lib-footer>\r\n        </ng-container>\r\n      </div>\r\n      <!--end:::Main-->\r\n    </div>\r\n    <!--end::Wrapper-->\r\n\r\n  </div>\r\n  <!--end::Page-->\r\n</div>\r\n<!--end::App-->\r\n\r\n<lib-scripts-init></lib-scripts-init>\r\n<ng-container>\r\n  <lib-scroll-top id=\"kt_scrolltop\" class=\"scrolltop\" data-kt-scrolltop=\"true\"></lib-scroll-top>\r\n</ng-container>\r\n<!-- begin:: Drawers -->\r\n<!-- <lib-activity-drawer></lib-activity-drawer> -->\r\n<!-- <lib-messenger-drawer></lib-messenger-drawer> -->\r\n<!-- end:: Drawers -->\r\n\r\n<!-- end:: Engage -->\r\n<!-- <lib-engages></lib-engages> -->\r\n<!-- end:: Engage -->\r\n\r\n<!-- begin:: Modals -->\r\n<!-- <lib-main-modal></lib-main-modal> -->\r\n<!-- <lib-invite-users-modal></lib-invite-users-modal> -->\r\n<!-- <lib-upgrade-plan-modal></lib-upgrade-plan-modal> -->\r\n<!-- end:: Modals -->\r\n", styles: [":host{height:100%;margin:0}:host .flex-root{height:100%}.page-loaded app-layout{opacity:1;transition:opacity 1s ease-in-out}.fixed-toolbar{position:fixed;top:0;width:100%;background:#fff;z-index:1000;box-shadow:0 4px 6px #0000001a}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: HeaderComponent, selector: "lib-header" }, { kind: "component", type: ContentComponent, selector: "lib-content", inputs: ["contentContainerCSSClass", "appContentContiner", "appContentContainerClass"] }, { kind: "component", type: FooterComponent, selector: "lib-footer", inputs: ["appFooterContainerCSSClass"] }, { kind: "component", type: ScriptsInitComponent, selector: "lib-scripts-init" }, { kind: "component", type: ToolbarComponent, selector: "lib-toolbar", inputs: ["currentLayoutType", "appToolbarLayout"] }, { kind: "component", type: SidebarComponent, selector: "lib-sidebar" }, { kind: "component", type: LayoutScrollTopComponent, selector: "lib-scroll-top" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LayoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-layout', template: "<!--begin::App-->\r\n<div class=\"d-flex flex-column flex-root app-root\" id=\"kt_app_root\">\r\n  <!--begin::Page-->\r\n  <div class=\"app-page flex-column flex-column-fluid\" id=\"kt_app_page\">\r\n    <ng-container *ngIf=\"appHeaderDisplay\">\r\n      <!--begin::Header-->\r\n      <lib-header [ngClass]=\"appHeaderDefaultClass\" id=\"kt_app_header\" class=\"app-header\" data-kt-sticky=\"true\" data-kt-sticky-activate=\"{default: true, lg: true}\" data-kt-sticky-name=\"app-header-minimize\" data-kt-sticky-offset=\"{default: '200px', lg: '0'}\" data-kt-sticky-animation=\"false\">\r\n      </lib-header>\r\n      <!--end::Header-->\r\n    </ng-container>\r\n\r\n    <!--begin::Wrapper-->\r\n    <div class=\"app-wrapper flex-column flex-row-fluid\" id=\"kt_app_wrapper\">\r\n\r\n      <ng-container *ngIf=\"appSidebarDisplay\">\r\n        <!--begin::sidebar-->\r\n        <lib-sidebar #ktSidebar id=\"kt_app_sidebar\" class=\"app-sidebar flex-column\" [ngClass]=\"appSidebarDefaultClass\">\r\n        </lib-sidebar>\r\n        <!--end::sidebar-->\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"appSidebarPanelDisplay\">\r\n        <!-- TODO: app sidebar panel -->\r\n      </ng-container>\r\n      <!--begin::Main-->\r\n      <div class=\"app-main content flex-column flex-row-fluid\" id=\"kt_app_main\">\r\n        <!--begin::Content wrapper-->\r\n        <ng-container *ngIf=\"appToolbarDisplay\">\r\n          <lib-toolbar class=\"app-toolbar\" [ngClass]=\"appToolbarCSSClass\" id=\"kt_app_toolbar\"\r\n            [appToolbarLayout]=\"appToolbarLayout\"></lib-toolbar>\r\n        </ng-container>\r\n        <div class=\"d-flex flex-column flex-column-fluid mt-10\">\r\n        \r\n          <lib-content id=\" kt_app_content\" class=\"app-content mt-15\" [ngClass]=\"contentCSSClasses\"\r\n            [contentContainerCSSClass]=\"contentContainerCSSClass\" [appContentContiner]=\"appContentContiner\"\r\n            [appContentContainerClass]=\"appContentContainerClass\">\r\n          </lib-content>\r\n        </div>\r\n        <!--end::Content wrapper-->\r\n        <ng-container *ngIf=\"appFooterDisplay\">\r\n          <lib-footer class=\"app-footer\" [ngClass]=\"appFooterCSSClass\" id=\"kt_app_footer\"\r\n            [appFooterContainerCSSClass]=\"appFooterContainerCSSClass\"></lib-footer>\r\n        </ng-container>\r\n      </div>\r\n      <!--end:::Main-->\r\n    </div>\r\n    <!--end::Wrapper-->\r\n\r\n  </div>\r\n  <!--end::Page-->\r\n</div>\r\n<!--end::App-->\r\n\r\n<lib-scripts-init></lib-scripts-init>\r\n<ng-container>\r\n  <lib-scroll-top id=\"kt_scrolltop\" class=\"scrolltop\" data-kt-scrolltop=\"true\"></lib-scroll-top>\r\n</ng-container>\r\n<!-- begin:: Drawers -->\r\n<!-- <lib-activity-drawer></lib-activity-drawer> -->\r\n<!-- <lib-messenger-drawer></lib-messenger-drawer> -->\r\n<!-- end:: Drawers -->\r\n\r\n<!-- end:: Engage -->\r\n<!-- <lib-engages></lib-engages> -->\r\n<!-- end:: Engage -->\r\n\r\n<!-- begin:: Modals -->\r\n<!-- <lib-main-modal></lib-main-modal> -->\r\n<!-- <lib-invite-users-modal></lib-invite-users-modal> -->\r\n<!-- <lib-upgrade-plan-modal></lib-upgrade-plan-modal> -->\r\n<!-- end:: Modals -->\r\n", styles: [":host{height:100%;margin:0}:host .flex-root{height:100%}.page-loaded app-layout{opacity:1;transition:opacity 1s ease-in-out}\n"] }]
+            args: [{ selector: 'lib-layout', template: "<!--begin::App-->\r\n<div class=\"d-flex flex-column flex-root app-root\" id=\"kt_app_root\">\r\n  <!--begin::Page-->\r\n  <div class=\"app-page flex-column flex-column-fluid\" id=\"kt_app_page\">\r\n    <ng-container *ngIf=\"appHeaderDisplay\">\r\n      <!--begin::Header-->\r\n      <lib-header [ngClass]=\"appHeaderDefaultClass\" id=\"kt_app_header\" class=\"app-header\" data-kt-sticky=\"true\" data-kt-sticky-activate=\"{default: true, lg: true}\" data-kt-sticky-name=\"app-header-minimize\" data-kt-sticky-offset=\"{default: '200px', lg: '0'}\" data-kt-sticky-animation=\"false\">\r\n      </lib-header>\r\n      <!--end::Header-->\r\n    </ng-container>\r\n\r\n    <!--begin::Wrapper-->\r\n    <div class=\"app-wrapper flex-column flex-row-fluid\" id=\"kt_app_wrapper\">\r\n\r\n      <ng-container *ngIf=\"appSidebarDisplay\">\r\n        <!--begin::sidebar-->\r\n        <lib-sidebar #ktSidebar id=\"kt_app_sidebar\" class=\"app-sidebar flex-column\" [ngClass]=\"appSidebarDefaultClass\">\r\n        </lib-sidebar>\r\n        <!--end::sidebar-->\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"appSidebarPanelDisplay\">\r\n        <!-- TODO: app sidebar panel -->\r\n      </ng-container>\r\n      <!--begin::Main-->\r\n      <div class=\"app-main content flex-column flex-row-fluid\" id=\"kt_app_main\">\r\n        <!--begin::Content wrapper-->\r\n        <ng-container *ngIf=\"appToolbarDisplay\">\r\n          <lib-toolbar [ngClass]=\"{'fixed-toolbar': isToolbarFixed}\"  class=\"app-toolbar\" [ngClass]=\"appToolbarCSSClass\" id=\"kt_app_toolbar\"\r\n            [appToolbarLayout]=\"appToolbarLayout\"></lib-toolbar>\r\n        </ng-container>\r\n        <div class=\"d-flex flex-column flex-column-fluid mt-10\">\r\n        \r\n          <lib-content id=\" kt_app_content\" class=\"app-content mt-15\" [ngClass]=\"contentCSSClasses\"\r\n            [contentContainerCSSClass]=\"contentContainerCSSClass\" [appContentContiner]=\"appContentContiner\"\r\n            [appContentContainerClass]=\"appContentContainerClass\">\r\n          </lib-content>\r\n        </div>\r\n        <!--end::Content wrapper-->\r\n        <ng-container *ngIf=\"appFooterDisplay\">\r\n          <lib-footer class=\"app-footer\" [ngClass]=\"appFooterCSSClass\" id=\"kt_app_footer\"\r\n            [appFooterContainerCSSClass]=\"appFooterContainerCSSClass\"></lib-footer>\r\n        </ng-container>\r\n      </div>\r\n      <!--end:::Main-->\r\n    </div>\r\n    <!--end::Wrapper-->\r\n\r\n  </div>\r\n  <!--end::Page-->\r\n</div>\r\n<!--end::App-->\r\n\r\n<lib-scripts-init></lib-scripts-init>\r\n<ng-container>\r\n  <lib-scroll-top id=\"kt_scrolltop\" class=\"scrolltop\" data-kt-scrolltop=\"true\"></lib-scroll-top>\r\n</ng-container>\r\n<!-- begin:: Drawers -->\r\n<!-- <lib-activity-drawer></lib-activity-drawer> -->\r\n<!-- <lib-messenger-drawer></lib-messenger-drawer> -->\r\n<!-- end:: Drawers -->\r\n\r\n<!-- end:: Engage -->\r\n<!-- <lib-engages></lib-engages> -->\r\n<!-- end:: Engage -->\r\n\r\n<!-- begin:: Modals -->\r\n<!-- <lib-main-modal></lib-main-modal> -->\r\n<!-- <lib-invite-users-modal></lib-invite-users-modal> -->\r\n<!-- <lib-upgrade-plan-modal></lib-upgrade-plan-modal> -->\r\n<!-- end:: Modals -->\r\n", styles: [":host{height:100%;margin:0}:host .flex-root{height:100%}.page-loaded app-layout{opacity:1;transition:opacity 1s ease-in-out}.fixed-toolbar{position:fixed;top:0;width:100%;background:#fff;z-index:1000;box-shadow:0 4px 6px #0000001a}\n"] }]
         }], ctorParameters: () => [{ type: i1.LayoutInitService }, { type: i1.LayoutService }, { type: i2.Router }, { type: i2.ActivatedRoute }, { type: AuthService }, { type: ToastService }, { type: i1.GlobalStateService }], propDecorators: { ktSidebar: [{
                 type: ViewChild,
                 args: ['ktSidebar', { static: true }]
@@ -7402,6 +7470,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             }], ktHeader: [{
                 type: ViewChild,
                 args: ['ktHeader', { static: true }]
+            }], onScroll: [{
+                type: HostListener,
+                args: ['window:scroll', []]
             }] } });
 
 class AccountingComponent {