kwikid-agent-dashboard 0.0.37 → 0.0.39

package/fesm2015/kwikid-agent-dashboard.js

@@ -1,882 +1,3033 @@
-import { __awaiter } from 'tslib';
 import * as i0 from '@angular/core';
-import { Injectable, ViewChildren, Component, Input, EventEmitter, ChangeDetectionStrategy, Output, HostListener, Pipe, Inject, ViewChild, NgModule } from '@angular/core';
-import * as i2 from '@angular/google-maps';
+import { EventEmitter, Component, Input, Output, ChangeDetectionStrategy, ViewChild, Inject, HostListener, Injectable, ViewChildren, Pipe, NgModule } from '@angular/core';
+import { __awaiter, __decorate } from 'tslib';
+import * as i1 from 'kwikui';
+import { KwikUIButtonModule, KwikUIInputModule, KwikUIInputDateModule, KwikUIInputDateRangeModule, KwikUIInputSelectModule, KwikUILabelValuePairModule, KwikUITableModule, KwikUITablePaginationModule, KwikUIModule, KwikUILoaderModule } from 'kwikui';
+import * as i2 from '@taiga-ui/cdk';
+import { ALWAYS_FALSE_HANDLER, TuiDay, TuiDayRange, TuiActiveZoneModule } from '@taiga-ui/cdk';
+import * as i3 from '@taiga-ui/core';
+import { TuiDialogService, TuiRootModule, TuiDialogModule, TuiDropdownModule, TuiGroupModule, TuiSvgModule, TuiHostedDropdownModule, TuiDataListModule, TuiButtonModule } from '@taiga-ui/core';
+import { trigger, transition, style, animate } from '@angular/animations';
+import * as i8 from '@taiga-ui/addon-preview';
+import { TuiPreviewDialogService, TuiPreviewActionModule, TuiPreviewModule } from '@taiga-ui/addon-preview';
+import { logMethod, checkObjectPathExists, checkObjectKeyExists, convertSnakeCaseToNormalText, isNotEmptyValue, getObjectValueFromPath, isNotEmptyArray, isEmptyValue, RuleEngine, getObjectDeepCopy } from 'kwikid-toolkit';
+import * as i1$1 from '@taiga-ui/kit';
+import { TuiItemsWithMoreModule, TuiBadgeModule, TuiAccordionModule, TuiPaginationModule } from '@taiga-ui/kit';
+import * as i7 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i6 from '@taiga-ui/core/directives/dropdown';
+import * as i3$1 from 'kwikid-forms';
+import { KwikIDFormViewModule, KwikIDFormsModule } from 'kwikid-forms';
+import * as i2$1 from '@angular/forms';
+import { FormGroup, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i2$2 from '@angular/google-maps';
 import { MapInfoWindow, GoogleMapsModule } from '@angular/google-maps';
-import * as i11 from '@taiga-ui/core';
-import { TuiDialogService, TuiRootModule, TuiDialogModule, TuiDropdownModule, TuiGroupModule, TuiSvgModule } from '@taiga-ui/core';
-import { getObjectValueFromPath, checkObjectPathExists, isNotEmptyArray, isEmptyValue, isNotEmptyValue } from 'kwikid-toolkit';
 import { map, catchError } from 'rxjs/operators';
 import { of } from 'rxjs';
-import * as i3 from '@angular/common/http';
+import * as i3$2 from '@angular/common/http';
 import { HttpClientModule, HttpClientJsonpModule } from '@angular/common/http';
-import * as i4 from 'kwikui';
-import { KwikUIButtonModule, KwikUIInputModule, KwikUIInputDateModule, KwikUIInputDateRangeModule, KwikUIInputSelectModule, KwikUILabelValuePairModule, KwikUITableModule, KwikUITablePaginationModule } from 'kwikui';
 import * as L from 'leaflet';
 import 'leaflet-routing-machine';
-import * as i6 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i7 from '@angular/forms';
-import { FormGroup, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import * as i10 from '@taiga-ui/cdk';
-import { TuiDay, TuiDayRange, TuiActiveZoneModule } from '@taiga-ui/cdk';
 import * as i5 from '@angular/cdk/scrolling';
 import { ScrollingModule } from '@angular/cdk/scrolling';
-import * as i8 from 'kwikid-forms';
-import { KwikIDFormViewModule } from 'kwikid-forms';
 import { TuiSidebarModule } from '@taiga-ui/addon-mobile';
 
-// To Calculate Distance between two markers
-const calculateDistance = (point1, point2) => {
-    const lat1 = point1.lat;
-    const lng1 = point1.lng;
-    const lat2 = point2.lat;
-    const lng2 = point2.lng;
-    const R = 6371; // Earth radius in kilometers
-    const dLat = (lat2 - lat1) * (Math.PI / 180);
-    const dLng = (lng2 - lng1) * (Math.PI / 180);
-    const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
-        Math.cos((lat1 * Math.PI) / 180) *
-            Math.cos((lat2 * Math.PI) / 180) *
-            Math.sin(dLng / 2) *
-            Math.sin(dLng / 2);
-    const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
-    const distance = R * c;
-    return distance;
-};
-// To calculate nearest distance from marker
-const nearestNeighborAlgorithm = (startingPoint, unvisitedPoints) => {
-    let currentPoint = startingPoint;
-    const path = [currentPoint];
-    const visitedPoints = new Set([currentPoint]);
-    while (unvisitedPoints.length > 0) {
-        let nearestPoint = null;
-        let minDistance = Number.POSITIVE_INFINITY;
-        for (const point of unvisitedPoints) {
-            const distance = calculateDistance(currentPoint, point);
-            if (distance < minDistance) {
-                minDistance = distance;
-                nearestPoint = point;
-            }
+class LayoutHeaderComponent {
+    constructor() {
+        this.config = {};
+        this.agentInfo = {};
+        this.onGetTaskList = new EventEmitter();
+        this.onClickPerformAction = new EventEmitter();
+        this.open = false;
+    }
+    ngOnInit() {
+        return __awaiter(this, void 0, void 0, function* () { });
+    }
+    refreshPage() {
+        this.handleOnGetTaskList({});
+    }
+    onClick() {
+        this.open = !this.open;
+    }
+    onObscured(obscured) {
+        if (obscured) {
+            this.open = false;
         }
-        path.push(nearestPoint);
-        visitedPoints.add(nearestPoint);
-        currentPoint = nearestPoint;
-        unvisitedPoints = unvisitedPoints.filter((point) => !visitedPoints.has(point));
     }
-    return path;
-};
-const addressConcator = (data, config) => {
-    const address = config.reduce((accumulator, currentValue) => accumulator + ' ' + getObjectValueFromPath(data, currentValue), '');
-    return address;
-};
-
-var EStatus;
-(function (EStatus) {
-    EStatus["NOT_STARTED"] = "not_started";
-    EStatus["ON_GOING"] = "on_going";
-    EStatus["AUDITING"] = "auditing";
-    EStatus["REJECTED"] = "rejected";
-    EStatus["AFTER_AUDIT"] = "after_audit";
-    EStatus["COMPLETE"] = "complete";
-    EStatus["WAITING"] = "waiting";
-    EStatus["SESSION_EXPIRED"] = "session_expired";
-    EStatus["KYC_REJECTED"] = "kyc_rejected";
-    EStatus["KYC_REQUEST_REJECTED"] = "kyc_request_rejected";
-    EStatus["KYC_REQUEST_ACCEPTED"] = "kyc_request_accepted";
-    EStatus["KYC_RESULT_REJECTED"] = "kyc_result_rejected";
-    EStatus["KYC_RESULT_APPROVED"] = "kyc_result_approved";
-    EStatus["KYC_RESULT_PARTIAL_UPDATE"] = "kyc_result_partial_update";
-    EStatus["KYC_RESULT_UNDER_REVIEW"] = "kyc_result_under_review";
-})(EStatus || (EStatus = {}));
-const VStatus = [
-    EStatus.NOT_STARTED,
-    EStatus.ON_GOING,
-    EStatus.AUDITING,
-    EStatus.REJECTED,
-    EStatus.AFTER_AUDIT,
-    EStatus.COMPLETE,
-    EStatus.WAITING,
-    EStatus.SESSION_EXPIRED,
-    EStatus.KYC_REJECTED,
-    EStatus.KYC_REQUEST_REJECTED,
-    EStatus.KYC_REQUEST_ACCEPTED,
-    EStatus.KYC_RESULT_REJECTED,
-    EStatus.KYC_RESULT_APPROVED,
-    EStatus.KYC_RESULT_PARTIAL_UPDATE,
-    EStatus.KYC_RESULT_UNDER_REVIEW
-];
+    onActiveZone(active) {
+        this.open = active && this.open;
+    }
+    logout() {
+        this.handleOnClickPerformAction({ action: { type: "logout" } });
+    }
+    handleOnGetTaskList(event) {
+        this.onGetTaskList.emit(event);
+    }
+    handleOnClickPerformAction(event) {
+        this.onClickPerformAction.emit(event);
+    }
+}
+/** @nocollapse */ LayoutHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LayoutHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ LayoutHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: LayoutHeaderComponent, selector: "layout-header", inputs: { config: "config", agentInfo: "agentInfo" }, outputs: { onGetTaskList: "onGetTaskList", onClickPerformAction: "onClickPerformAction" }, ngImport: i0, template: "<div id=\"header-container\">\n  <div id=\"client-information-wrapper\">\n    <img\n      id=\"client-logo\"\n      [src]=\"config?.theme?.clientLogo\"\n    />\n  </div>\n  <div id=\"actions-wrapper\">\n    <span (tuiActiveZoneChange)=\"onActiveZone($event)\">\n      <kwikui-button\n        [icon]=\"'tuiIconSettingsLarge'\"\n        (onClick)=\"onClick()\"\n        appearance=\"mono\"\n        size=\"l\"\n        [tuiDropdown]=\"dropdownContent\"\n        [tuiDropdownManual]=\"open\"\n        (tuiObscured)=\"onObscured($event)\"\n      ></kwikui-button>\n      <ng-template #dropdownContent>\n        <div class=\"menu-dropdown\">\n          <div class=\"menu-dropdown-header\">\n            <div class=\"menu-dropdown-header-agent-name\">\n              {{ agentInfo?.agent_name ?? \"Welcome\" }}\n            </div>\n            <div class=\"menu-dropdown-header-agent-id\">\n              Agent ID:\n              {{ agentInfo?.agent_id }}\n            </div>\n          </div>\n          <hr />\n          <div\n            class=\"menu-dropdown-body\"\n            tuiGroup\n            [collapsed]=\"true\"\n            [rounded]=\"false\"\n            [orientation]=\"'vertical'\"\n            [size]=\"'m'\"\n          >\n            <kwikui-button\n              appearance=\"mono\"\n              class=\"menu-dropdown-buttons\"\n              label=\"Refresh\"\n              [icon]=\"'tuiIconRefreshCw'\"\n              size=\"m\"\n              type=\"button\"\n              (onClick)=\"refreshPage()\"\n            ></kwikui-button>\n          </div>\n          <hr />\n          <div class=\"menu-dropdown-footer\">\n            <kwikui-button\n              id=\"\"\n              label=\"Logout\"\n              styles=\"\"\n              class=\"menu-dropdown-buttons\"\n              type=\"button\"\n              appearance=\"mono\"\n              [icon]=\"'tuiIconLogOut'\"\n              iconRight=\"\"\n              [shape]=\"null\"\n              size=\"m\"\n              (onClick)=\"logout()\"\n            ></kwikui-button>\n          </div>\n        </div>\n      </ng-template>\n    </span>\n  </div>\n</div>\n", styles: ["#header-container{display:flex;align-items:center;justify-content:space-between;height:100%;width:100%;padding:1rem}#header-container #client-information-wrapper{height:100%;width:100%}#header-container #client-information-wrapper #client-logo{height:100%}#header-container #client-information-wrapper #client-name{height:100%;width:100%;font-size:1.25rem;font-weight:600}#header-container #actions-wrapper{display:flex;flex-direction:row;align-items:center}#header-container #actions-wrapper>*{margin-right:.5rem}.menu-dropdown{display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;grid-gap:.5rem;gap:.5rem;padding:1rem 1.5rem}.menu-dropdown .menu-dropdown-header{display:flex;flex-direction:column;align-content:flex-start;justify-content:space-between;align-items:flex-start;grid-gap:.5rem;gap:.5rem}.menu-dropdown .menu-dropdown-header .menu-dropdown-header-agent-name{font-size:1.2rem;font-weight:600}.menu-dropdown .menu-dropdown-header .menu-dropdown-header-agent-id{font-size:.8rem;font-weight:600}.menu-dropdown .menu-dropdown-buttons ::ng-deep .t-wrapper{padding:0!important}\n"], components: [{ type: i1.KwikUIButtonComponent, selector: "kwikui-button", inputs: ["appearance", "class", "disabled", "icon", "iconRight", "id", "label", "shape", "showLoader", "size", "styles", "type", "pseudoHover"], outputs: ["onClick"] }], directives: [{ type: i2.TuiActiveZoneDirective, selector: "[tuiActiveZone]:not(ng-container), [tuiActiveZoneChange]:not(ng-container), [tuiActiveZoneParent]:not(ng-container)", inputs: ["tuiActiveZoneParent"], outputs: ["tuiActiveZoneChange"], exportAs: ["tuiActiveZone"] }, { type: i3.TuiDropdownDirective, selector: "[tuiDropdown]:not(ng-container)", inputs: ["tuiDropdown"], exportAs: ["tuiDropdown"] }, { type: i3.TuiDropdownDriverDirective, selector: "[tuiDropdown]" }, { type: i3.TuiDropdownPositionDirective, selector: "[tuiDropdown]" }, { type: i3.TuiDropdownManualDirective, selector: "[tuiDropdown][tuiDropdownManual]", inputs: ["tuiDropdownManual"] }, { type: i3.TuiGroupDirective, selector: "[tuiGroup]:not(ng-container)", inputs: ["orientation", "adaptive", "collapsed", "rounded", "size"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LayoutHeaderComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "layout-header",
+                    templateUrl: "./layout-header.component.html",
+                    styleUrls: ["./layout-header.component.scss"]
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { config: [{
+                type: Input
+            }], agentInfo: [{
+                type: Input
+            }], onGetTaskList: [{
+                type: Output
+            }], onClickPerformAction: [{
+                type: Output
+            }] } });
 
-class AgentService {
+class PrimaryActionsComponent {
     constructor() {
-        this.isListOpen = true;
-        this.showMapview = false;
-        this.addTaskForm = {
-            key: 'ADD_TASK',
-            title: 'Add Task',
-            fields: [
-                {
-                    key: 'name',
-                    label: 'Customer Name',
-                    validators: {
-                        required: true
-                    },
-                    properties: {
-                        placeholder: 'Please enter the Customer Name',
-                        readOnly: false,
-                        case: 'default'
-                    },
-                    type: 'text'
-                },
-                {
-                    key: 'phone',
-                    label: 'Phone Number',
-                    validators: {
-                        required: true
-                    },
-                    properties: {
-                        countryCode: '+91',
-                        removeCountryCodeFromValue: true,
-                        phoneMaskAfterCountryCode: '##########',
-                        placeholder: 'Please enter your Mobile Number',
-                        readOnly: false
-                    },
-                    type: 'phone'
-                },
-                {
-                    key: 'address',
-                    label: 'Address',
-                    validators: {
-                        required: true
-                    },
-                    properties: {
-                        placeholder: 'Please enter the Address',
-                        readOnly: false,
-                        case: 'default'
-                    },
-                    type: 'text'
-                },
-                {
-                    key: 'city',
-                    label: 'City',
-                    validators: {
-                        required: true
-                    },
-                    properties: {
-                        placeholder: 'Please enter the City',
-                        readOnly: false,
-                        case: 'default'
-                    },
-                    type: 'text'
-                },
-                {
-                    key: 'location',
-                    label: 'Location URL',
-                    validators: {
-                        required: true
-                    },
-                    properties: {
-                        placeholder: 'Please enter the Location URL',
-                        readOnly: false,
-                        case: 'default'
-                    },
-                    type: 'text'
-                }
-            ],
-            properties: {
-                header: {
-                    title: {
-                        hidden: true,
-                        label: 'Add Task'
-                    },
-                    steps: {
-                        hidden: true
-                    },
-                    logo: {
-                        hidden: true
-                    }
-                },
-                footer: {
-                    viewFormsButton: {
-                        hidden: true,
-                        label: 'View Forms'
-                    },
-                    saveButton: {
-                        hidden: false,
-                        label: 'Submit'
-                    }
-                }
-            }
-        };
-        this.notRequiredStatus = [
-            EStatus.REJECTED,
-            EStatus.AFTER_AUDIT,
-            EStatus.COMPLETE,
-            EStatus.SESSION_EXPIRED,
-            EStatus.KYC_REJECTED,
-            EStatus.KYC_RESULT_APPROVED,
-            EStatus.KYC_RESULT_REJECTED,
-            EStatus.KYC_RESULT_UNDER_REVIEW,
-            EStatus.KYC_REQUEST_REJECTED
-        ];
-    }
-    ngOnInit() { }
-    setAgentConfig(config) {
-        this.config = config;
+        this.primaryActionsConfig = [];
+        this.onClickPrimaryAction = new EventEmitter();
     }
-    toggleMapview() {
-        this.showMapview = !this.showMapview;
+    ngOnInit() {
+        return __awaiter(this, void 0, void 0, function* () { });
     }
-    canStartJourney(status) {
-        var _a, _b;
-        const noneEditableStatus = (_b = (_a = this.config.dashboard) === null || _a === void 0 ? void 0 : _a.cannotStartJourney) !== null && _b !== void 0 ? _b : this.notRequiredStatus;
-        if (noneEditableStatus.includes(status)) {
-            return false;
+    ngOnChanges(changes) {
+        const verifyChange = (key) => {
+            return changes.hasOwnProperty(key) && !changes[key].firstChange;
+        };
+        for (const change of Object.entries(changes)) {
+            const key = change[0];
+            const value = change[1].currentValue;
         }
-        else {
-            return true;
+        if (verifyChange("primaryActionsConfig")) {
+            this.primaryActionsConfig = changes.primaryActionsConfig.currentValue;
+            this.primaryActionsConfig.map(ALWAYS_FALSE_HANDLER);
         }
     }
-    canPlotMarkers(status) {
-        var _a, _b;
-        const nonePlottingSessions = (_b = (_a = this.config.dashboard) === null || _a === void 0 ? void 0 : _a.dontPlotMarkers) !== null && _b !== void 0 ? _b : [];
-        if (nonePlottingSessions.includes(status)) {
-            return false;
+    handleOnInitPrimaryActionsConfig() {
+        this.primaryActionsConfig = this.primaryActionsConfig;
+        this.primaryActionsConfig.map(ALWAYS_FALSE_HANDLER);
+    }
+    handleOnClickPrimaryAction(event) {
+        this.onClickPrimaryAction.emit(event);
+    }
+    trackByFn(index, item) {
+        return index; // or unique identifier if available
+    }
+}
+/** @nocollapse */ PrimaryActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PrimaryActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ PrimaryActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PrimaryActionsComponent, selector: "primary-actions", inputs: { primaryActionsConfig: "primaryActionsConfig" }, outputs: { onClickPrimaryAction: "onClickPrimaryAction" }, usesOnChanges: true, ngImport: i0, template: "<div id=\"primary-actions-container\">\n  <tui-items-with-more\n    tuiGroup\n    [itemsLimit]=\"1\"\n  >\n    <ng-container *ngFor=\"let item of primaryActionsConfig; let index = index\">\n      <kwikui-button\n        *tuiItem\n        [label]=\"item.label\"\n        appearance=\"primary\"\n        shape=\"rounded\"\n        size=\"m\"\n        styles=\"width: max-content; margin-right: 1rem; box-shadow: #32325d40 0 13px 27px -5px, #0000004d 0 8px 16px -8px;\"\n        [icon]=\"item.props.iconLeft || ''\"\n        [iconRight]=\"item.props.iconRight || ''\"\n        (onClick)=\"handleOnClickPrimaryAction(item)\"\n      ></kwikui-button>\n    </ng-container>\n    <ng-template\n      let-lastIndex\n      tuiMore\n    >\n      <tui-hosted-dropdown\n        tuiDropdownAlign=\"right\"\n        class=\"item\"\n        [content]=\"dropdown\"\n      >\n        <kwikui-button\n          appearance=\"primary\"\n          shape=\"rounded\"\n          size=\"m\"\n          icon=\"tuiIconMoreVertical\"\n          styles=\"\n            box-shadow: #32325d40 0 13px 27px -5px, #0000004d 0 8px 16px -8px;\n          \"\n        ></kwikui-button>\n        <ng-template #dropdown>\n          <tui-data-list size=\"l\">\n            <ng-container\n              *ngFor=\"let item of primaryActionsConfig; let index = index\"\n            >\n              <kwikui-button\n                *ngIf=\"index > lastIndex\"\n                tuiOption\n                [label]=\"item.label\"\n                appearance=\"primary\"\n                shape=\"rounded\"\n                size=\"m\"\n                styles=\"width: calc(100% - 1rem); margin: 0.5rem;\"\n                [icon]=\"item.props.iconLeft || ''\"\n                [iconRight]=\"item.props.iconRight || ''\"\n                (onClick)=\"handleOnClickPrimaryAction(item)\"\n              ></kwikui-button>\n            </ng-container>\n          </tui-data-list>\n        </ng-template>\n      </tui-hosted-dropdown>\n    </ng-template>\n  </tui-items-with-more>\n</div>\n", styles: ["::-webkit-scrollbar{width:8px!important}::-webkit-scrollbar-track{border-radius:8px!important}::-webkit-scrollbar-thumb{background:lightgray!important;border-radius:8px!important}::-webkit-scrollbar-thumb:hover{background:gray!important}#primary-actions-container{width:-moz-fit-content;width:fit-content;margin-left:auto}@media only screen and (max-width: 600px){#primary-actions-container{display:flex;flex-direction:row;flex-wrap:nowrap;grid-gap:1.5rem;gap:1.5rem;align-items:flex-start;justify-content:flex-start}}::ng-deep .t-empty{display:none!important}\n"], components: [{ type: i1$1.TuiItemsWithMoreComponent, selector: "tui-items-with-more" }, { type: i1.KwikUIButtonComponent, selector: "kwikui-button", inputs: ["appearance", "class", "disabled", "icon", "iconRight", "id", "label", "shape", "showLoader", "size", "styles", "type", "pseudoHover"], outputs: ["onClick"] }, { type: i3.TuiHostedDropdownComponent, selector: "tui-hosted-dropdown", inputs: ["content", "sided", "canOpen", "open"], outputs: ["openChange", "focusedChange"] }, { type: i3.TuiDataListComponent, selector: "tui-data-list", inputs: ["role", "emptyContent", "size"] }], directives: [{ type: i1$1.TuiItemsWithMoreDirective, selector: "tui-items-with-more", inputs: ["itemsLimit", "required"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.TuiItemDirective, selector: "[tuiItem]" }, { type: i1$1.TuiMoreDirective, selector: "[tuiMore]" }, { type: i6.TuiDropdownOptionsDirective, selector: "[tuiDropdownAlign], [tuiDropdownAppearance], [tuiDropdownDirection], [tuiDropdownLimitWidth], [tuiDropdownMinHeight], [tuiDropdownMaxHeight], [tuiDropdownOffset]", inputs: ["tuiDropdownAlign", "tuiDropdownAppearance", "tuiDropdownDirection", "tuiDropdownLimitWidth", "tuiDropdownMinHeight", "tuiDropdownMaxHeight", "tuiDropdownOffset"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+__decorate([
+    logMethod
+], PrimaryActionsComponent.prototype, "handleOnInitPrimaryActionsConfig", null);
+__decorate([
+    logMethod
+], PrimaryActionsComponent.prototype, "handleOnClickPrimaryAction", null);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PrimaryActionsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "primary-actions",
+                    templateUrl: "./primary-actions.component.html",
+                    styleUrls: ["./primary-actions.component.scss"],
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { primaryActionsConfig: [{
+                type: Input
+            }], onClickPrimaryAction: [{
+                type: Output
+            }], handleOnInitPrimaryActionsConfig: [], handleOnClickPrimaryAction: [] } });
+
+class MapViewComponent {
+    constructor() {
+        this.mapConfig = {
+            isMapHidden: true
+        };
+    }
+    ngOnInit() {
+        return __awaiter(this, void 0, void 0, function* () { });
+    }
+    ngOnChanges(changes) {
+        const verifyChange = (key) => {
+            return changes.hasOwnProperty(key) && !changes[key].firstChange;
+        };
+        for (const change of Object.entries(changes)) {
+            const key = change[0];
+            const value = change[1].currentValue;
         }
-        else {
-            return true;
+        if (verifyChange("mapConfig")) {
+            this.mapConfig = changes.mapConfig.currentValue;
         }
     }
 }
-/** @nocollapse */ AgentService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AgentService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-/** @nocollapse */ AgentService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AgentService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AgentService, decorators: [{
-            type: Injectable,
+/** @nocollapse */ MapViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MapViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ MapViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MapViewComponent, selector: "map-view", inputs: { mapConfig: "mapConfig" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"map-view-container\">\n  <iframe\n    *ngIf=\"!mapConfig?.isMapHidden\"\n    src=\"https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d942.4620332111369!2d72.89243374854026!3d19.114317185214237!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3be7c90062467355%3A0xbc5e9528a3783c2b!2sBoomerang!5e0!3m2!1sen!2sin!4v1708350741641!5m2!1sen!2sin\"\n    width=\"600\"\n    height=\"450\"\n    style=\"border: 0\"\n    allowfullscreen=\"\"\n    loading=\"lazy\"\n    referrerpolicy=\"no-referrer-when-downgrade\"\n  ></iframe>\n</div>\n", styles: [".map-view-container{width:100%;height:100%}.map-view-container iframe{width:100%!important;height:100%!important;position:relative}\n"], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MapViewComponent, decorators: [{
+            type: Component,
             args: [{
-                    providedIn: 'root'
+                    selector: "map-view",
+                    templateUrl: "./map-view.component.html",
+                    styleUrls: ["./map-view.component.scss"]
                 }]
-        }], ctorParameters: function () { return []; } });
+        }], ctorParameters: function () { return []; }, propDecorators: { mapConfig: [{
+                type: Input
+            }] } });
 
-class GoogleMapsService {
-    constructor(agentService, mapDirectionsService, httpClient) {
-        this.agentService = agentService;
-        this.mapDirectionsService = mapDirectionsService;
-        this.httpClient = httpClient;
-        this.allMarkers = [];
+class TaskItemStatusComponent {
+    constructor() {
+        this.styles = {};
+        this.value = "";
     }
-    // To get Current Position
-    getPosition() {
-        return new Promise((resolve, reject) => {
-            navigator.geolocation.watchPosition((resp) => {
-                resolve({
-                    lng: resp.coords.longitude,
-                    lat: resp.coords.latitude
-                });
-            }, (err) => {
-                reject(err);
-            });
+    ngOnInit() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.setupStatus();
         });
     }
-    // To Initialize Google Maps
-    initializeMap() {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.myPosition = yield this.getPosition();
-            this.map = {
-                zoom: 10,
-                center: this.myPosition,
-                streetViewControl: false,
-                mapTypeControl: false,
-                fullscreenControl: false,
-                zoomControl: false
-            };
-        });
+    ngOnChanges(changes) {
+        const verifyChange = (key) => {
+            return changes.hasOwnProperty(key) && !changes[key].firstChange;
+        };
+        if (verifyChange("config")) {
+            this.config = changes.config.currentValue;
+        }
+        if (verifyChange("status")) {
+            this.status = changes.status.currentValue;
+            this.setupStatus();
+        }
     }
-    // To extract Location from the Task Details
-    getLocation(task) {
-        return __awaiter(this, void 0, void 0, function* () {
-            return new Promise((resolve) => __awaiter(this, void 0, void 0, function* () {
-                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-                let encodedAddres;
-                // If Fetch Address from Multiple Paths
-                if (checkObjectPathExists(this.agentService.config, 'dashboard.taskLocationPaths')) {
-                    // Get address string from multiple paths
-                    const config = this.agentService.config.dashboard.taskLocationPaths;
-                    const address = addressConcator(task, config);
-                    // Encode the Address in URI
-                    encodedAddres = encodeURI(address);
-                }
-                // If Fetch Address from Single Path
-                else if (checkObjectPathExists(this.agentService.config, 'dashboard.taskLocationPath')) {
-                    // Get Address from Single Path
-                    const config = this.agentService.config.dashboard.taskLocationPath;
-                    const address = getObjectValueFromPath(task, config);
-                    // Encode the Address in URI
-                    encodedAddres = encodeURI(address);
-                }
-                // Default Address Paths Avaiable
-                else {
-                    const address = (_k = (_j = (_g = (_d = (_c = (_b = (_a = task === null || task === void 0 ? void 0 : task.extras) === null || _a === void 0 ? void 0 : _a.task_details) === null || _b === void 0 ? void 0 : _b.customer_details) === null || _c === void 0 ? void 0 : _c.address) !== null && _d !== void 0 ? _d : (_f = (_e = task === null || task === void 0 ? void 0 : task.task_details) === null || _e === void 0 ? void 0 : _e.customer_details) === null || _f === void 0 ? void 0 : _f.address) !== null && _g !== void 0 ? _g : (_h = task === null || task === void 0 ? void 0 : task.extras) === null || _h === void 0 ? void 0 : _h.address) !== null && _j !== void 0 ? _j : task === null || task === void 0 ? void 0 : task.address) !== null && _k !== void 0 ? _k : '';
-                    // Encode the Address in URI
-                    encodedAddres = encodeURI(address);
-                }
-                // URL to geocode Address String to Latitude & Longitude
-                const url = `https://maps.googleapis.com/maps/api/geocode/json?key=${this.apiKey}&address=${encodedAddres}`;
-                const response = yield fetch(url);
-                const data = yield response.json();
-                // Set Location {lat: LAT, lng: LNG} from address geocoded
-                const isValidLocation = isNotEmptyArray(data === null || data === void 0 ? void 0 : data.results);
-                const location = isValidLocation
-                    ? (_m = (_l = data === null || data === void 0 ? void 0 : data.results[0]) === null || _l === void 0 ? void 0 : _l.geometry) === null || _m === void 0 ? void 0 : _m.location
-                    : { lat: null, lng: null };
-                // Set Location validation & Google Maps URL
-                location['isValidLocation'] = isValidLocation;
-                location['googleMapsUrl'] = `https://www.google.com/maps/place/${location === null || location === void 0 ? void 0 : location.lat},${location === null || location === void 0 ? void 0 : location.lng}`;
-                resolve(location);
-            }));
-        });
+    setupStatus() {
+        var _a, _b;
+        if (checkObjectPathExists(this.config, "mapping") &&
+            checkObjectKeyExists(this.config.mapping, this.status)) {
+            this.styles = this.config.mapping[this.status];
+            this.value =
+                (_b = (_a = this.config.mapping[this.status]) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : convertSnakeCaseToNormalText(this.status);
+        }
     }
-    // Get Tasks | Markers Location Co Ordinates
-    getMarkersLocation(myMarker, tasks) {
-        return __awaiter(this, void 0, void 0, function* () {
-            return new Promise((resolve) => __awaiter(this, void 0, void 0, function* () {
-                let markers = [];
-                markers.push(myMarker);
-                const promises = tasks.map((task) => __awaiter(this, void 0, void 0, function* () {
-                    const marker = yield this.getLocation(task);
-                    task = Object.assign(Object.assign({}, task), marker);
-                    markers.push(task);
-                }));
-                yield Promise.all(promises);
-                resolve(markers);
-            }));
-        });
+}
+/** @nocollapse */ TaskItemStatusComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TaskItemStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ TaskItemStatusComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TaskItemStatusComponent, selector: "task-item-status", inputs: { config: "config", status: "status" }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"task-iem-status-container\"\n  [style]=\"styles\"\n>\n  {{ value }}\n</div>\n", styles: [".task-iem-status-container{width:-moz-fit-content;width:fit-content;padding:0 .4rem;font-size:.7rem;border-radius:1rem}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TaskItemStatusComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "task-item-status",
+                    templateUrl: "./task-item-status.component.html",
+                    styleUrls: ["./task-item-status.component.scss"]
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { config: [{
+                type: Input
+            }], status: [{
+                type: Input
+            }] } });
+
+class TaskDetailComponent {
+    constructor() {
+        this.config = {};
+        this.taskDetail = {};
+        this.data = [];
+        this.title = undefined;
+        this.taskId = undefined;
+        this.status = undefined;
+        this.labelValuePairConfig = {};
+        this.labelValuePairData = [];
+        this.onClickCloseTaskDetail = new EventEmitter();
     }
-    // Plot All Markers
-    plotAllMarkers(tasks) {
+    ngOnInit() {
         return __awaiter(this, void 0, void 0, function* () {
-            return new Promise((resolve) => __awaiter(this, void 0, void 0, function* () {
-                let path = [];
-                const promises = tasks.map((task) => {
-                    if (task === null || task === void 0 ? void 0 : task.isValidLocation) {
-                        path.push({
-                            location: task,
-                            stopover: true
-                        });
-                        this.allMarkers.push(task);
-                    }
-                });
-                yield Promise.all(promises);
-                resolve(path);
-            }));
+            this.parseData();
+            this.parseTaskId();
+            this.parseSessionStatus();
         });
     }
-    // To Plot Directions for All Tasks
-    plotDirectionsForAllTasks(tasks) {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.allMarkers = [];
-            // Create Agent Marker & Plot It.
-            const myMarker = {
-                lat: this.myPosition.lat,
-                lng: this.myPosition.lng,
-                title: 0,
-                color: 'red'
-            };
-            // Get All Markers Location Co Ordinates
-            const markers = yield this.getMarkersLocation(myMarker, tasks);
-            // Run Algorithm to get optimized Routes
-            const startingPoint = markers[0];
-            const unvisitedWaypoints = markers.slice(1);
-            const optimizedRoute = nearestNeighborAlgorithm(startingPoint, unvisitedWaypoints);
-            // Sort All Tasks as per optimized routes
-            tasks = optimizedRoute.slice(1);
-            this.allMarkers = [myMarker];
-            // Plot all markers & get path for directions
-            const path = yield this.plotAllMarkers(tasks);
-            // Set Directions in Google Maps
-            const request = {
-                origin: this.myPosition,
-                destination: this.myPosition,
-                waypoints: path,
-                travelMode: google.maps.TravelMode.DRIVING
-            };
-            this.directionsRenderOption = {
-                suppressMarkers: true
-            };
-            this.directionsResults$ = this.mapDirectionsService
-                .route(request)
-                .pipe(map((response) => response.result));
-            this.directionsResults$.subscribe((val) => { });
-            this.allDirectionsResults$ = this.directionsResults$;
-            return tasks;
-        });
+    ngOnChanges(changes) { }
+    parseData() {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        if (checkObjectPathExists(this.config, "taskUI.details.data") &&
+            isNotEmptyValue(this.config.taskUI.details.data) &&
+            Array.isArray(this.config.taskUI.details.data) &&
+            this.config.taskUI.details.data.length > 0) {
+            const data = [];
+            this.config.taskUI.details.data.map((field) => {
+                const value = getObjectValueFromPath(this.taskDetail.data, field.path);
+                data.push({ label: field.label, value });
+            });
+            this.labelValuePairData = data;
+            this.labelValuePairConfig = (_d = (_c = (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.taskUI) === null || _b === void 0 ? void 0 : _b.details) === null || _c === void 0 ? void 0 : _c.config) !== null && _d !== void 0 ? _d : {};
+            this.title = (_h = (_g = (_f = (_e = this.config) === null || _e === void 0 ? void 0 : _e.taskUI) === null || _f === void 0 ? void 0 : _f.details) === null || _g === void 0 ? void 0 : _g.header) === null || _h === void 0 ? void 0 : _h.title;
+        }
     }
-    // To Plot Directions for Selected Tasks
-    plotDirectionsForSelectedTask(task) {
-        if (task != null) {
-            const taskMarker = task;
-            // If Location is Available in Task Details
-            if (taskMarker === null || taskMarker === void 0 ? void 0 : taskMarker.isValidLocation) {
-                const request = {
-                    origin: this.myPosition,
-                    destination: taskMarker,
-                    optimizeWaypoints: true,
-                    travelMode: google.maps.TravelMode.DRIVING
-                };
-                this.directionsResults$ = this.mapDirectionsService
-                    .route(request)
-                    .pipe(map((response) => response.result));
-                this.directionsResults$.subscribe();
-            }
-            else {
-                alert('No Location Available');
-                this.directionsResults$ = this.allDirectionsResults$;
-            }
+    parseSessionStatus() {
+        var _a, _b, _c, _d, _e, _f, _g;
+        if (((_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.utilityFlags) === null || _b === void 0 ? void 0 : _b.isShowTaskStatus) &&
+            checkObjectPathExists(this.config, "taskUI.details.header.taskStatus.path") &&
+            isNotEmptyValue(this.config.taskUI.details.header.taskStatus.path)) {
+            this.status = getObjectValueFromPath(this.taskDetail.data, (_g = (_f = (_e = (_d = (_c = this.config) === null || _c === void 0 ? void 0 : _c.taskUI) === null || _d === void 0 ? void 0 : _d.details) === null || _e === void 0 ? void 0 : _e.header) === null || _f === void 0 ? void 0 : _f.taskStatus) === null || _g === void 0 ? void 0 : _g.path);
         }
-        else {
-            this.directionsResults$ = this.allDirectionsResults$;
+    }
+    parseTaskId() {
+        var _a, _b, _c, _d, _e;
+        if (checkObjectPathExists(this.config, "taskUI.details.header.taskId.path") &&
+            isNotEmptyValue(this.config.taskUI.details.header.taskId.path)) {
+            this.taskId = getObjectValueFromPath(this.taskDetail.data, (_e = (_d = (_c = (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.taskUI) === null || _b === void 0 ? void 0 : _b.details) === null || _c === void 0 ? void 0 : _c.header) === null || _d === void 0 ? void 0 : _d.taskId) === null || _e === void 0 ? void 0 : _e.path);
         }
     }
+    handleOnClickClose(e) {
+        this.onClickCloseTaskDetail.emit(e);
+    }
+    handleOnClickPerformAction(e) {
+        alert(`${e.id}, Action yet to be added`);
+    }
 }
-/** @nocollapse */ GoogleMapsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GoogleMapsService, deps: [{ token: AgentService }, { token: i2.MapDirectionsService }, { token: i3.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
-/** @nocollapse */ GoogleMapsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GoogleMapsService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GoogleMapsService, decorators: [{
-            type: Injectable,
+/** @nocollapse */ TaskDetailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TaskDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ TaskDetailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TaskDetailComponent, selector: "task-detail", inputs: { config: "config", taskDetail: "taskDetail" }, outputs: { onClickCloseTaskDetail: "onClickCloseTaskDetail" }, usesOnChanges: true, ngImport: i0, template: "<div id=\"task-detail-container\">\n  <kwikui-button\n    appearance=\"primary\"\n    icon=\"tuiIconChevronLeft\"\n    label=\"Back\"\n    size=\"s\"\n    shape=\"rounded\"\n    (onClick)=\"handleOnClickClose($event)\"\n  ></kwikui-button>\n\n  <div id=\"task-details-title\">{{ title }}</div>\n  <div id=\"task-detail-header\">\n    <div>{{ taskId }}</div>\n    <task-item-status\n      *ngIf=\"status\"\n      [config]=\"config?.taskUI?.details?.header?.taskStatus\"\n      [status]=\"status\"\n    ></task-item-status>\n  </div>\n\n  <div id=\"task-details-container\">\n    <kwikui-label-value-pair\n      [config]=\"labelValuePairConfig\"\n      [data]=\"labelValuePairData\"\n    ></kwikui-label-value-pair>\n  </div>\n\n  <div\n    id=\"task-detail-footer\"\n    *ngIf=\"\n      config?.taskUI?.details?.action &&\n      config?.taskUI?.details?.action?.length > 0\n    \"\n  >\n    <ng-container *ngFor=\"let action of config?.taskUI?.details?.action\">\n      <kwikui-button\n        [label]=\"action.label\"\n        appearance=\"primary\"\n        size=\"s\"\n        shape=\"rounded\"\n        (onClick)=\"handleOnClickPerformAction(action)\"\n      ></kwikui-button>\n    </ng-container>\n  </div>\n</div>\n", styles: ["#task-detail-container{padding:1rem;font-size:1rem;display:flex;flex-direction:column;grid-gap:.5rem;gap:.5rem}#task-details-title{font-weight:600;font-size:1.5rem;margin:.5rem 0}#task-detail-header{display:flex;flex-direction:row;grid-gap:.5rem;gap:.5rem}#task-detail-footer{display:flex;flex-direction:row;grid-gap:.5rem;gap:.5rem}\n"], components: [{ type: i1.KwikUIButtonComponent, selector: "kwikui-button", inputs: ["appearance", "class", "disabled", "icon", "iconRight", "id", "label", "shape", "showLoader", "size", "styles", "type", "pseudoHover"], outputs: ["onClick"] }, { type: TaskItemStatusComponent, selector: "task-item-status", inputs: ["config", "status"] }, { type: i1.KwikUILabelValuePairComponent, selector: "kwikui-label-value-pair", inputs: ["config", "data", "id"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TaskDetailComponent, decorators: [{
+            type: Component,
             args: [{
-                    providedIn: 'root'
+                    selector: "task-detail",
+                    templateUrl: "./task-detail.component.html",
+                    styleUrls: ["./task-detail.component.scss"]
                 }]
-        }], ctorParameters: function () { return [{ type: AgentService }, { type: i2.MapDirectionsService }, { type: i3.HttpClient }]; }, propDecorators: { directionsRenders: [{
-                type: ViewChildren,
-                args: ['directionsRender']
+        }], ctorParameters: function () { return []; }, propDecorators: { config: [{
+                type: Input
+            }], taskDetail: [{
+                type: Input
+            }], onClickCloseTaskDetail: [{
+                type: Output
             }] } });
 
-class OpenStreetMapsService {
-    constructor(agentService, mapDirectionsService, httpClient) {
-        this.agentService = agentService;
-        this.mapDirectionsService = mapDirectionsService;
-        this.httpClient = httpClient;
-        this.allMarkers = [];
+class BottomSheetComponent {
+    constructor() {
+        this.isSwipeActive = false;
+        this.swipeDirection = null;
+        this.height = 320; // Initial height of the bottom sheet
+        this.minHeight = 54; // Initial height of the bottom sheet
     }
-    // To get Current Position
-    getPosition() {
-        return new Promise((resolve, reject) => {
-            navigator.geolocation.watchPosition((resp) => {
-                resolve({
-                    lng: resp.coords.longitude,
-                    lat: resp.coords.latitude
-                });
-            }, (err) => {
-                reject(err);
-            });
-        });
+    ngOnInit() {
+        return __awaiter(this, void 0, void 0, function* () { });
     }
-    // To extract Location from the Task Details
-    getLocation(task) {
-        return __awaiter(this, void 0, void 0, function* () {
-            return new Promise((resolve) => __awaiter(this, void 0, void 0, function* () {
-                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
-                let encodedAddres;
-                // If Fetch Address from Multiple Paths
-                if (checkObjectPathExists(this.agentService.config, 'dashboard.taskLocationPaths')) {
-                    // Get address string from multiple paths
-                    const config = this.agentService.config.dashboard.taskLocationPaths;
-                    const address = addressConcator(task, config);
-                    // Encode the Address in URI
-                    encodedAddres = encodeURI(address);
-                }
-                // If Fetch Address from Single Path
-                else if (checkObjectPathExists(this.agentService.config, 'dashboard.taskLocationPath')) {
-                    // Get Address from Single Path
-                    const config = this.agentService.config.dashboard.taskLocationPath;
-                    const address = getObjectValueFromPath(task, config);
-                    // Encode the Address in URI
-                    encodedAddres = encodeURI(address);
-                }
-                // Default Address Paths Avaiable
-                else {
-                    const address = (_k = (_j = (_g = (_d = (_c = (_b = (_a = task === null || task === void 0 ? void 0 : task.extras) === null || _a === void 0 ? void 0 : _a.task_details) === null || _b === void 0 ? void 0 : _b.customer_details) === null || _c === void 0 ? void 0 : _c.address) !== null && _d !== void 0 ? _d : (_f = (_e = task === null || task === void 0 ? void 0 : task.task_details) === null || _e === void 0 ? void 0 : _e.customer_details) === null || _f === void 0 ? void 0 : _f.address) !== null && _g !== void 0 ? _g : (_h = task === null || task === void 0 ? void 0 : task.extras) === null || _h === void 0 ? void 0 : _h.address) !== null && _j !== void 0 ? _j : task === null || task === void 0 ? void 0 : task.address) !== null && _k !== void 0 ? _k : '';
-                    // Encode the Address in URI
-                    encodedAddres = encodeURI(address);
-                }
-                // URL to geocode Address String to Latitude & Longitude
-                const url = `https://nominatim.openstreetmap.org/search?q=${encodedAddres}&format=json`;
-                const response = yield fetch(url);
-                const data = yield response.json();
-                // Set Location {lat: LAT, lng: LNG} from address geocoded
-                const isValidLocation = isNotEmptyArray(data) && ((_l = data[0]) === null || _l === void 0 ? void 0 : _l.lat) & ((_m = data[0]) === null || _m === void 0 ? void 0 : _m.lon);
-                const location = isValidLocation
-                    ? { lat: (_o = data[0]) === null || _o === void 0 ? void 0 : _o.lat, lng: (_p = data[0]) === null || _p === void 0 ? void 0 : _p.lon }
-                    : { lat: null, lng: null };
-                // Set Location validation & Google Maps URL
-                location['isValidLocation'] = isValidLocation;
-                location['color'] = isValidLocation ? 'blue' : 'red';
-                location['googleMapsUrl'] = `https://www.google.com/maps/place/${location === null || location === void 0 ? void 0 : location.lat},${location === null || location === void 0 ? void 0 : location.lng}`;
-                resolve(location);
-            }));
-        });
+    onMouseStart(event) {
+        event.preventDefault();
+        this.isSwipeActive = true;
+        this.startY = event.clientY;
+        this.startHeight = this.parentElement.nativeElement.clientHeight;
     }
-    // Get Tasks | Markers Location Co Ordinates
-    getMarkersLocation(myMarker, tasks) {
-        return __awaiter(this, void 0, void 0, function* () {
-            return new Promise((resolve) => __awaiter(this, void 0, void 0, function* () {
-                let markers = [];
-                markers.push(myMarker);
-                const promises = tasks.map((task) => __awaiter(this, void 0, void 0, function* () {
-                    const marker = yield this.getLocation(task);
-                    task = Object.assign(Object.assign({}, task), marker);
-                    markers.push(task);
-                }));
-                yield Promise.all(promises);
-                resolve(markers);
-            }));
-        });
+    onMouseMove(event) {
+        if (this.isSwipeActive) {
+            this.resize(event.clientY);
+        }
     }
-    // To Initialize Open Street Map
-    initializeMap() {
-        return __awaiter(this, void 0, void 0, function* () {
-            console.log('Running Init Open Street Maps');
-            this.myPosition = yield this.getPosition();
-            this.map = L.map('map', {
-                center: [this.myPosition.lat, this.myPosition.lng],
-                zoom: 11
-            });
-            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(this.map);
-        });
+    onMouseEnd(event) {
+        this.isSwipeActive = false;
     }
-    // To Add Open Street Marker in Map
-    addMarker({ lat, lng, title, color }) {
-        L.marker([lat, lng], {
-            icon: L.icon({
-                iconUrl: color == 'red'
-                    ? 'https://kwikid.s3.ap-south-1.amazonaws.com/CONFIG/USER/assets/map-marker-0.png'
-                    : 'https://kwikid.s3.ap-south-1.amazonaws.com/CONFIG/USER/assets/map-marker-1.png'
-            })
-        })
-            .addTo(this.map)
-            .bindPopup(title);
+    onTouchStart(event) {
+        event.preventDefault();
+        this.isSwipeActive = true;
+        this.startY = event.touches[0].clientY;
+        this.startHeight = this.parentElement.nativeElement.clientHeight;
     }
-    // To Plot Open Street Directions for All Tasks
-    plotDirectionsForAllTasks(tasks) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (this.map) {
-                this.allMarkers = [];
-                // Create Agent Marker & Plot It.
-                const myMarker = {
-                    lat: this.myPosition.lat,
-                    lng: this.myPosition.lng,
-                    title: 0,
-                    color: 'red'
-                };
-                this.addMarker(myMarker);
-                this.allMarkers.push(myMarker);
-                // Create Markers for all Tasks
-                this.allMarkers = yield this.getMarkersLocation(myMarker, tasks);
-                // Run Algorithm to get optimized Routes
-                const startingPoint = this.allMarkers[0];
-                const unvisitedWaypoints = this.allMarkers.slice(1);
-                const optimizedRoute = nearestNeighborAlgorithm(startingPoint, unvisitedWaypoints);
-                // Sort All Markers as per optimized routes
-                this.allMarkers = this.sortTasksAsPerDistance(optimizedRoute, this.allMarkers, true);
-                // Sort All Tasks as per optimized routes
-                tasks = this.sortTasksAsPerDistance(optimizedRoute.slice(1), tasks, false);
-                // Plot Markers for All Tasks
-                tasks.map((task) => {
-                    if (task === null || task === void 0 ? void 0 : task.isValidLocation) {
-                        const marker = this.getLocation(task);
-                        this.addMarker(marker);
-                    }
-                });
-                // Set Styles for all Task Routes
-                const styles = [
-                    { color: 'blue', opacity: 1, weight: 8 },
-                    { color: 'white', opacity: 0.6, weight: 12 }
-                ];
-                // Set Routes for all Tasks
-                this.allTasksRoutes = this.setRoutes(this.allMarkers, styles);
-                this.fitMapBounds();
-            }
-            return tasks;
-        });
+    onTouchMove(event) {
+        event.preventDefault(); // Prevent scrolling while dragging
+        if (this.isSwipeActive) {
+            this.resize(event.touches[0].clientY);
+        }
     }
-    // To plot Open Street Direction for selected Task
-    plotDirectionsForSelectedTask(task) {
-        if (task !== null) {
-            // Remove Previously Selected Task Route
-            if (this.selectedTaskRoutes) {
-                this.map.removeControl(this.selectedTaskRoutes);
-            }
-            // Remove All Tasks Routes
-            if (this.allTasksRoutes) {
-                this.map.removeControl(this.allTasksRoutes);
-            }
-            const taskMarker = task;
-            // If Location is Available in Task Details
-            if (taskMarker.color != 'red') {
-                const markers = [this.allMarkers[0], taskMarker];
-                const styles = [
-                    { color: 'green', opacity: 1, weight: 8 },
-                    { color: 'white', opacity: 0.4, weight: 12 }
-                ];
-                this.selectedTaskRoutes = this.setRoutes(markers, styles);
-                this.setSelectedTaskDistanceAndTime();
-            }
-            else {
-                alert('No Location Available');
-            }
+    onTouchEnd(event) {
+        this.isSwipeActive = false;
+    }
+    resize(clientY) {
+        const deltaY = clientY - this.startY;
+        const newHeight = this.startHeight - deltaY;
+        if (newHeight > this.startHeight) {
+            this.swipeDirection = "UP";
+        }
+        if (newHeight < this.startHeight) {
+            this.swipeDirection = "DOWN";
+        }
+        const maxHeight = window.innerHeight - 180;
+        if (newHeight >= this.minHeight && newHeight <= maxHeight) {
+            // this.height = newHeight;
+            this.parentElement.nativeElement.style.height = `${newHeight}px`;
+        }
+        else if (newHeight < this.minHeight) {
+            this.parentElement.nativeElement.style.height = `${this.minHeight}px`;
+        }
+        else if (newHeight > maxHeight) {
+            this.parentElement.nativeElement.style.height = `${maxHeight}px`;
+        }
+    }
+    preventMouseOrTouchEvents(event) {
+        event.stopPropagation();
+        return undefined;
+    }
+    removeEventListeners() {
+        document.removeEventListener("mousedown", this.onMouseStart.bind(this));
+        document.removeEventListener("mousemove", this.onMouseMove.bind(this));
+        document.removeEventListener("mouseup", this.onMouseEnd.bind(this));
+        document.removeEventListener("touchend", this.onTouchMove.bind(this));
+        document.removeEventListener("touchmove", this.onTouchEnd.bind(this));
+        document.removeEventListener("touchstart", this.onTouchEnd.bind(this));
+    }
+}
+/** @nocollapse */ BottomSheetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: BottomSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ BottomSheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: BottomSheetComponent, selector: "bottom-sheet", viewQueries: [{ propertyName: "parentElement", first: true, predicate: ["parentElement"], descendants: true, static: true }], ngImport: i0, template: "<div\n  #parentElement\n  class=\"bottom-sheet\"\n  [style.height.px]=\"height\"\n>\n  <div\n    class=\"top-holder\"\n    (mousedown)=\"onMouseStart($event)\"\n    (mousemove)=\"onMouseMove($event)\"\n    (mouseup)=\"onMouseEnd($event)\"\n    (touchend)=\"onTouchEnd($event)\"\n    (touchmove)=\"onTouchMove($event)\"\n    (touchstart)=\"onTouchStart($event)\"\n  >\n    <tui-svg\n      *ngIf=\"isSwipeActive && swipeDirection == 'UP'\"\n      src=\"tuiIconChevronUpLarge\"\n    ></tui-svg>\n    <tui-svg\n      *ngIf=\"isSwipeActive && swipeDirection == 'DOWN'\"\n      src=\"tuiIconChevronDownLarge\"\n    ></tui-svg>\n    <tui-svg\n      *ngIf=\"!isSwipeActive\"\n      src=\"tuiIconHrLarge\"\n    ></tui-svg>\n  </div>\n  <!-- Use ng-content to project content into the component -->\n  <div class=\"bottom-sheet-content-container\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".bottom-sheet{position:absolute;bottom:0;left:0;width:100%;background-color:#fff;box-shadow:0 -2px 6px #0000001a;overflow:auto;resize:vertical;border-top-right-radius:1rem;border-top-left-radius:1rem;display:flex;flex-direction:column;z-index:5;padding-top:1rem}.top-holder{width:100%;height:40px;display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center;cursor:grab;z-index:1}.top-holder:focus,.top-holder:focus-within,.top-holder:active{cursor:grabbing}.resize-handle{position:absolute;bottom:0;left:0;width:100%;height:10px;cursor:ns-resize;background-color:transparent}.bottom-sheet-content-container{width:100%;height:100%;position:relative;z-index:1;overflow:auto}\n"], components: [{ type: i3.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+__decorate([
+    logMethod
+], BottomSheetComponent.prototype, "onMouseStart", null);
+__decorate([
+    logMethod
+], BottomSheetComponent.prototype, "onMouseEnd", null);
+__decorate([
+    logMethod
+], BottomSheetComponent.prototype, "onTouchStart", null);
+__decorate([
+    logMethod
+], BottomSheetComponent.prototype, "onTouchMove", null);
+__decorate([
+    logMethod
+], BottomSheetComponent.prototype, "onTouchEnd", null);
+__decorate([
+    logMethod
+], BottomSheetComponent.prototype, "preventMouseOrTouchEvents", null);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: BottomSheetComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "bottom-sheet",
+                    templateUrl: "./bottom-sheet.component.html",
+                    styleUrls: ["./bottom-sheet.component.scss"]
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { parentElement: [{
+                type: ViewChild,
+                args: ["parentElement", { static: true }]
+            }], onMouseStart: [], onMouseEnd: [], onTouchStart: [], onTouchMove: [], onTouchEnd: [], preventMouseOrTouchEvents: [] } });
+
+const padZeroValuesInStart = (value, digits = 2) => {
+    return String(value).padStart(digits, "0");
+};
+const convertKwikUIDateToStringFormat = (event) => {
+    const { year } = event;
+    const month = padZeroValuesInStart(event.month + 1, 2);
+    const day = padZeroValuesInStart(event.day);
+    return `${year}-${month}-${day}`;
+};
+const convertNormalDateToStringFormat = (value) => {
+    const date = value ? new Date(value) : new Date();
+    const year = date.getFullYear();
+    const month = padZeroValuesInStart(date.getMonth() + 1);
+    const day = padZeroValuesInStart(date.getDate());
+    return `${year}-${month}-${day}`;
+};
+
+const sortItems = (data, key, sortInAscendingOrder) => {
+    if (!data || data.length === 0) {
+        return data; // Skip sorting if no items are available
+    }
+    const sortedData = sortInAscendingOrder
+        ? data.sort((a, b) => (a[key] > b[key] ? 1 : b[key] > a[key] ? -1 : 0))
+        : data.sort((b, a) => (a[key] > b[key] ? 1 : b[key] > a[key] ? -1 : 0));
+    return sortedData;
+};
+
+class TaskListSearchComponent {
+    constructor() {
+        // Search Text
+        this.searchText = "";
+        this.formGroup = new FormGroup({});
+        this.sortInAscendingOrder = true;
+        // Date Range Values
+        this.start_time = undefined;
+        this.end_time = undefined;
+        this.max = new TuiDay(new Date().getFullYear(), new Date().getMonth(), new Date().getDate());
+        // Sorting Variables
+        this.sortFilterOptions = ["name", "session_status", "mobile_number"];
+        this.activeSearchAction = undefined;
+        this.onFilterTasksByText = new EventEmitter();
+        this.onFilterTasksByDate = new EventEmitter();
+        this.onChangeSortFilter = new EventEmitter();
+    }
+    ngOnInit() {
+        this.handleSearchAndSortFormControls();
+        this.handleInitialDateRange();
+    }
+    handleOnClickSearchType(type) {
+        if (this.activeSearchAction !== type) {
+            this.activeSearchAction = type;
         }
-        // Set All Tasks Routes Again & Remove Selected Tasks route
         else {
-            if (this.selectedTaskRoutes) {
-                this.map.removeControl(this.selectedTaskRoutes);
-            }
-            this.map.addControl(this.allTasksRoutes);
-            this.selectedTaskRoutes = undefined;
+            this.activeSearchAction = undefined;
         }
-        this.fitMapBounds();
     }
-    // Get Distance & Time of Selected Task
-    getSelectedTaskDistanceAndTime() {
-        return this.selectedTaskDistanceAndTime;
+    handleInitialDateRange() {
+        var _a, _b, _c, _d, _e, _f;
+        const searchFilterStartPoint = (_c = (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.extendedFlags) === null || _b === void 0 ? void 0 : _b.searchFilterStartPoint) !== null && _c !== void 0 ? _c : {
+            day: 0,
+            month: 0,
+            year: 0
+        };
+        const currentDate = new Date();
+        const startDate = new Date((_d = currentDate.getFullYear() - (searchFilterStartPoint === null || searchFilterStartPoint === void 0 ? void 0 : searchFilterStartPoint.year)) !== null && _d !== void 0 ? _d : 0, (_e = currentDate.getMonth() - (searchFilterStartPoint === null || searchFilterStartPoint === void 0 ? void 0 : searchFilterStartPoint.month)) !== null && _e !== void 0 ? _e : 0, (_f = currentDate.getDate() - (searchFilterStartPoint === null || searchFilterStartPoint === void 0 ? void 0 : searchFilterStartPoint.day)) !== null && _f !== void 0 ? _f : 0);
+        this.searchDateFormControl = new FormControl({
+            value: new TuiDayRange(new TuiDay(startDate.getFullYear(), startDate.getMonth(), startDate.getDate()), this.max),
+            disabled: false
+        });
+        this.formGroup.addControl("search-date", this.searchDateFormControl);
+        this.start_time = convertNormalDateToStringFormat(startDate);
+        this.end_time = convertNormalDateToStringFormat(null);
+        // To get Tasks for First Time
+        this.onFilterTasksByDate.emit({
+            start_time: this.start_time,
+            end_time: this.end_time
+        });
     }
-    // Set Distance & Time of Selected Task
-    setSelectedTaskDistanceAndTime() {
-        this.selectedTaskRoutes.on('routesfound', function (e) {
-            let routes = e.routes;
-            let summary = routes[0].summary;
-            const distance = summary.totalDistance / 1000;
-            const time = Math.round((summary.totalTime % 3600) / 60);
-            this.selectedTaskDistanceAndTime = {
-                distance: distance,
-                time: time
-            };
+    handleSearchAndSortFormControls() {
+        var _a, _b, _c;
+        this.searchTextFormControl = new FormControl("");
+        this.formGroup.addControl("search-text", this.searchTextFormControl);
+        this.sortFilterKeyFormControl = new FormControl("");
+        this.formGroup.addControl("sort-filter", this.sortFilterKeyFormControl);
+        this.sortFilterOptions =
+            (_c = (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.extendedFlags) === null || _b === void 0 ? void 0 : _b.sortFilterKeys) !== null && _c !== void 0 ? _c : this.sortFilterOptions;
+    }
+    handleOnChangeSearchText(event) {
+        this.onFilterTasksByText.emit({ text: event.value });
+    }
+    handleOnChangeDateRange(event) {
+        this.handleChangeDateRangeFormat(event);
+        this.onFilterTasksByDate.emit({
+            start_time: this.start_time,
+            end_time: this.end_time
         });
     }
-    // To sort Open Street Maps Task as per nearest distance
-    sortTasksAsPerDistance(order, tasks, isMarker) {
-        let sortedTasks = [];
-        for (let i = 0; i < tasks.length; i++) {
-            const title = isMarker ? order[i].title : order[i].title - 1;
-            let task = tasks[title];
-            sortedTasks.push(task);
+    handleOnChangeSortFilter(event) {
+        this.onChangeSortFilter.emit({
+            sortFilterKey: this.sortFilterKeyFormControl.value,
+            sortFilterOrder: this.sortInAscendingOrder
+        });
+    }
+    handleOnClickChangeSortOrder() {
+        this.sortInAscendingOrder = !this.sortInAscendingOrder;
+        this.handleOnChangeSortFilter(false);
+    }
+    handleChangeDateRangeFormat(event) {
+        this.start_time = convertKwikUIDateToStringFormat(event.value.from);
+        this.end_time = convertKwikUIDateToStringFormat(event.value.to);
+    }
+}
+/** @nocollapse */ TaskListSearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TaskListSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ TaskListSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TaskListSearchComponent, selector: "task-list-search", inputs: { config: "config" }, outputs: { onFilterTasksByText: "onFilterTasksByText", onFilterTasksByDate: "onFilterTasksByDate", onChangeSortFilter: "onChangeSortFilter" }, ngImport: i0, template: "<div\n  class=\"task-list-search-container\"\n  [formGroup]=\"formGroup\"\n>\n  <div class=\"task-list-search-icons\">\n    <kwikui-button\n      appearance=\"mono\"\n      icon=\"tuiIconSearchLarge\"\n      size=\"s\"\n      type=\"button\"\n      (onClick)=\"handleOnClickSearchType('search-text')\"\n    ></kwikui-button>\n    <kwikui-button\n      appearance=\"mono\"\n      icon=\"tuiIconCalendarLarge\"\n      size=\"s\"\n      type=\"button\"\n      (onClick)=\"handleOnClickSearchType('search-date')\"\n    ></kwikui-button>\n    <kwikui-button\n      *ngIf=\"config?.utilityFlags?.isAllowSortTasks\"\n      appearance=\"mono\"\n      icon=\"tuiIconFilterLarge\"\n      size=\"s\"\n      type=\"button\"\n      (onClick)=\"handleOnClickSearchType('sort-filter')\"\n    ></kwikui-button>\n  </div>\n\n  <div\n    class=\"task-list-search-action\"\n    *ngIf=\"activeSearchAction\"\n  >\n    <kwikui-input-date-range\n      *ngIf=\"activeSearchAction == 'search-date'\"\n      class=\"task-list-date-box\"\n      label=\"Search by Date Range\"\n      id=\"dateRange\"\n      size=\"m\"\n      [max]=\"max\"\n      [maxLength]=\"maxLength\"\n      formControlName=\"search-date\"\n      [formControl]=\"searchDateFormControl\"\n      (getKeyValue)=\"handleOnChangeDateRange($event)\"\n    ></kwikui-input-date-range>\n\n    <kwikui-input\n      *ngIf=\"activeSearchAction == 'search-text'\"\n      label=\"Search\"\n      id=\"search\"\n      icon=\"tuiIconSearch\"\n      placeholder=\"Search any task from here\"\n      size=\"m\"\n      [formControl]=\"searchTextFormControl\"\n      formControlName=\"search-text\"\n      (getKeyValue)=\"handleOnChangeSearchText($event)\"\n    ></kwikui-input>\n\n    <div\n      *ngIf=\"activeSearchAction == 'sort-filter'\"\n      class=\"task-list-sort-action\"\n    >\n      <kwikui-button\n        appearance=\"outline\"\n        [icon]=\"\n          sortInAscendingOrder\n            ? 'tuiIconChevronsUpLarge'\n            : 'tuiIconChevronsDownLarge'\n        \"\n        size=\"m\"\n        type=\"button\"\n        (onClick)=\"handleOnClickChangeSortOrder()\"\n      ></kwikui-button>\n      <kwikui-input-select\n        class=\"task-list-sort-key\"\n        formControlName=\"sort-filter\"\n        label=\"Sort By Key\"\n        size=\"m\"\n        [formControl]=\"sortFilterKeyFormControl\"\n        [options]=\"sortFilterOptions\"\n        [searchable]=\"false\"\n        (getKeyValue)=\"handleOnChangeSortFilter($event)\"\n      ></kwikui-input-select>\n    </div>\n  </div>\n</div>\n", styles: [".task-list-search-container{width:100%}.task-list-search-container .task-list-search-icons{display:flex;justify-content:flex-end;align-items:center;flex-direction:row;grid-gap:.5rem;gap:.5rem}.task-list-search-container .task-list-search-action{margin-top:.5rem}.task-list-search-container .task-list-search-action .task-list-sort-action{display:flex;flex-direction:row;grid-gap:.5rem;gap:.5rem}.task-list-search-container .task-list-search-action .task-list-sort-action .task-list-sort-key{flex:1}\n"], components: [{ type: i1.KwikUIButtonComponent, selector: "kwikui-button", inputs: ["appearance", "class", "disabled", "icon", "iconRight", "id", "label", "shape", "showLoader", "size", "styles", "type", "pseudoHover"], outputs: ["onClick"] }, { type: i1.KwikUIInputDateRangeComponent, selector: "kwikui-input-date-range", inputs: ["disabled", "focus", "formControl", "formControlName", "hintContent", "icon", "id", "invalid", "label", "max", "maxLength", "min", "minLength", "placeholder", "postfix", "prefix", "properties", "size", "validators"], outputs: ["getKeyValue"] }, { type: i1.KwikUIInputComponent, selector: "kwikui-input", inputs: ["case", "disabled", "focus", "formControl", "formControlName", "hintContent", "icon", "id", "invalid", "label", "placeholder", "postfix", "prefix", "properties", "size", "type", "validators"], outputs: ["getKeyValue"] }, { type: i1.KwikUIInputSelectComponent, selector: "kwikui-input-select", inputs: ["disabled", "focus", "formControl", "formControlName", "hintContent", "icon", "id", "invalid", "label", "options", "placeholder", "properties", "searchable", "size", "validators"], outputs: ["getKeyValue"] }], directives: [{ type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+__decorate([
+    logMethod
+], TaskListSearchComponent.prototype, "handleOnChangeSearchText", null);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TaskListSearchComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "task-list-search",
+                    templateUrl: "./task-list-search.component.html",
+                    styleUrls: ["./task-list-search.component.scss"],
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { config: [{
+                type: Input
+            }], onFilterTasksByText: [{
+                type: Output
+            }], onFilterTasksByDate: [{
+                type: Output
+            }], onChangeSortFilter: [{
+                type: Output
+            }], handleOnChangeSearchText: [] } });
+
+const PREVIEW_DATA_DEFAULT_CONFIG = {
+    separator: ":",
+    orientation: "horizontal",
+    placeholder: "-",
+    customStyles: {
+        label: {},
+        value: {},
+        placeholder: {},
+        container: {}
+    }
+};
+
+class TaskItemComponent {
+    constructor() {
+        this.config = {};
+        this.data = {};
+        this.header = "";
+        this.status = "";
+        this.previewConfig = {};
+        this.previewData = [];
+        this.onClickTaskItem = new EventEmitter();
+        this.onClickTaskItemViewDetail = new EventEmitter();
+        this.onClickPerformAction = new EventEmitter();
+    }
+    ngOnInit() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.parseHeader();
+            this.parseSessionStatus();
+            this.parsePreviewData();
+        });
+    }
+    parseHeader() {
+        var _a, _b, _c, _d;
+        if (checkObjectPathExists(this.config, "taskUI.header.taskId.path") &&
+            isNotEmptyValue(this.config.taskUI.header.taskId.path)) {
+            this.header = getObjectValueFromPath(this.data, (_d = (_c = (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.taskUI) === null || _b === void 0 ? void 0 : _b.header) === null || _c === void 0 ? void 0 : _c.taskId) === null || _d === void 0 ? void 0 : _d.path);
+        }
+        if (checkObjectPathExists(this.config, "taskUI.header.taskId.maxLengthToShow") &&
+            isNotEmptyValue(this.config.taskUI.header.taskId.maxLengthToShow) &&
+            this.header.length > this.config.taskUI.header.taskId.maxLengthToShow) {
+            this.header = `${this.header.slice(0, this.config.taskUI.header.taskId.maxLengthToShow)}...`;
         }
-        return sortedTasks;
     }
-    // To set Open Street routes in the maps
-    setRoutes(markers, styles) {
-        return L.Routing.control({
-            waypoints: markers,
-            lineOptions: {
-                styles: styles
-            },
-            createMarker: function () {
-                return null;
-            },
-            routeWhileDragging: true
-        }).addTo(this.map);
+    parseSessionStatus() {
+        var _a, _b, _c, _d, _e, _f;
+        if (((_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.utilityFlags) === null || _b === void 0 ? void 0 : _b.isShowTaskStatus) &&
+            checkObjectPathExists(this.config, "taskUI.header.taskStatus.path") &&
+            isNotEmptyValue(this.config.taskUI.header.taskStatus.path)) {
+            this.status = getObjectValueFromPath(this.data, (_f = (_e = (_d = (_c = this.config) === null || _c === void 0 ? void 0 : _c.taskUI) === null || _d === void 0 ? void 0 : _d.header) === null || _e === void 0 ? void 0 : _e.taskStatus) === null || _f === void 0 ? void 0 : _f.path);
+        }
     }
-    // To set Open Street view point on the map
-    fitMapBounds() {
-        const markerLatLngs = this.allMarkers.map((marker) => L.latLng(marker.lat, marker.lng));
-        this.map.fitBounds(markerLatLngs);
+    parsePreviewData() {
+        var _a, _b, _c, _d;
+        if (checkObjectPathExists(this.config, "taskUI.preview.data") &&
+            isNotEmptyValue(this.config.taskUI.preview.data) &&
+            Array.isArray(this.config.taskUI.preview.data) &&
+            this.config.taskUI.preview.data.length > 0) {
+            const previewData = [];
+            this.config.taskUI.preview.data.map((field) => {
+                const value = getObjectValueFromPath(this.data, field.path);
+                previewData.push({ label: field.label, value });
+            });
+            this.previewData = previewData;
+            this.previewConfig =
+                (_d = (_c = (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.taskUI) === null || _b === void 0 ? void 0 : _b.preview) === null || _c === void 0 ? void 0 : _c.config) !== null && _d !== void 0 ? _d : PREVIEW_DATA_DEFAULT_CONFIG;
+        }
+    }
+    handleOnClickTaskItem(e, taskItemData) {
+        this.onClickTaskItem.emit({
+            data: taskItemData
+        });
+    }
+    handleOnClickTaskItemViewDetail(e, taskItemData) {
+        this.onClickTaskItemViewDetail.emit({
+            data: taskItemData
+        });
+    }
+    handleOnClickPerformAction(e, action) {
+        this.onClickPerformAction.emit({
+            action
+        });
     }
 }
-/** @nocollapse */ OpenStreetMapsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: OpenStreetMapsService, deps: [{ token: AgentService }, { token: i2.MapDirectionsService }, { token: i3.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
-/** @nocollapse */ OpenStreetMapsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: OpenStreetMapsService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: OpenStreetMapsService, decorators: [{
-            type: Injectable,
+/** @nocollapse */ TaskItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TaskItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ TaskItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TaskItemComponent, selector: "task-item", inputs: { config: "config", data: "data" }, outputs: { onClickTaskItem: "onClickTaskItem", onClickTaskItemViewDetail: "onClickTaskItemViewDetail", onClickPerformAction: "onClickPerformAction" }, ngImport: i0, template: "<tui-accordion\n  class=\"task-item-container\"\n  (click)=\"handleOnClickTaskItem($event, data)\"\n>\n  <tui-accordion-item>\n    <div class=\"task-item-header\">\n      <div class=\"task-item-id\">{{ header }}</div>\n      <task-item-status\n        *ngIf=\"status\"\n        [config]=\"config?.taskUI?.header?.taskStatus\"\n        [status]=\"status\"\n      ></task-item-status>\n    </div>\n    <ng-template tuiAccordionItemContent>\n      <div class=\"task-item-preview\">\n        <kwikui-label-value-pair\n          [config]=\"previewConfig\"\n          [data]=\"previewData\"\n        ></kwikui-label-value-pair>\n      </div>\n      <div class=\"task-item-footer\">\n        <kwikui-button\n          appearance=\"primary\"\n          label=\"View Detail\"\n          shape=\"rounded\"\n          size=\"s\"\n          (onClick)=\"handleOnClickTaskItemViewDetail($event, data)\"\n        ></kwikui-button>\n      </div>\n    </ng-template>\n  </tui-accordion-item>\n</tui-accordion>\n", styles: [".task-item-header{display:flex;flex-direction:column}.task-item-footer{margin-top:.5rem}\n"], components: [{ type: i1$1.TuiAccordionComponent, selector: "tui-accordion", inputs: ["closeOthers", "rounded"] }, { type: i1$1.TuiAccordionItemComponent, selector: "tui-accordion-item", inputs: ["noPadding", "showArrow", "borders", "size", "disabled", "disableHover", "open", "async"], outputs: ["openChange"] }, { type: TaskItemStatusComponent, selector: "task-item-status", inputs: ["config", "status"] }, { type: i1.KwikUILabelValuePairComponent, selector: "kwikui-label-value-pair", inputs: ["config", "data", "id"] }, { type: i1.KwikUIButtonComponent, selector: "kwikui-button", inputs: ["appearance", "class", "disabled", "icon", "iconRight", "id", "label", "shape", "showLoader", "size", "styles", "type", "pseudoHover"], outputs: ["onClick"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.TuiAccordionItemContentDirective, selector: "ng-template[tuiAccordionItemContent]" }] });
+__decorate([
+    logMethod
+], TaskItemComponent.prototype, "handleOnClickTaskItem", null);
+__decorate([
+    logMethod
+], TaskItemComponent.prototype, "handleOnClickTaskItemViewDetail", null);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TaskItemComponent, decorators: [{
+            type: Component,
             args: [{
-                    providedIn: 'root'
+                    selector: "task-item",
+                    templateUrl: "./task-item.component.html",
+                    styleUrls: ["./task-item.component.scss"]
                 }]
-        }], ctorParameters: function () { return [{ type: AgentService }, { type: i2.MapDirectionsService }, { type: i3.HttpClient }]; }, propDecorators: { directionsRenders: [{
-                type: ViewChildren,
-                args: ['directionsRender']
-            }] } });
+        }], ctorParameters: function () { return []; }, propDecorators: { config: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], onClickTaskItem: [{
+                type: Output
+            }], onClickTaskItemViewDetail: [{
+                type: Output
+            }], onClickPerformAction: [{
+                type: Output
+            }], handleOnClickTaskItem: [], handleOnClickTaskItemViewDetail: [] } });
 
-class StatusPillComponent {
+class TaskListComponent {
+    constructor(loaderService) {
+        this.loaderService = loaderService;
+        this.config = {};
+        this.taskItems = [];
+        this.onClickTaskItemViewDetail = new EventEmitter();
+        // Pagination
+        this.paginationIndex = 0;
+        this.paginationLength = null;
+        this.activePageItems = [];
+        this.filteredItems = [];
+        this.itemPerPage = 50;
+        // Loaders
+        this.loading = false;
+        // Search Text
+        this.searchText = "";
+        // Sort Filter
+        this.sortFilterKey = "";
+        this.sortInAscendingOrder = "ASC";
+        // Date Range Values
+        this.start_time = undefined;
+        this.end_time = undefined;
+        this.max = new TuiDay(new Date().getFullYear(), new Date().getMonth(), new Date().getDate());
+        this.formGroup = new FormGroup({});
+        // Event Emitters
+        this.onGetTaskList = new EventEmitter();
+    }
     ngOnInit() {
-        if (isEmptyValue(this.status)) {
-            this.status = EStatus.WAITING;
+        return __awaiter(this, void 0, void 0, function* () {
+            this.toggleLoader(true);
+            // this.taskItems = Array.from({ length: 1000 }, (_, i) =>
+            //   String(`test_${i}`)
+            // );
+            this.handleInitialDateRange();
+        });
+    }
+    ngOnChanges(changes) {
+        const verifyChange = (key) => {
+            return changes.hasOwnProperty(key) && !changes[key].firstChange;
+        };
+        if (verifyChange("taskItems")) {
+            this.toggleLoader(true);
+            this.taskItems = changes.taskItems.currentValue;
+            this.handleOnSortTaskItems(this.sortFilterKey, this.sortInAscendingOrder);
+            this.handleOnTaskItemsChange();
         }
     }
-    getStatusPillClass(status) {
-        let newStatus = status.replace('_', '-').replace('_', '-').replace('_', '-');
-        return `status-pill ${newStatus}`;
+    handleOnTaskItemsChange() {
+        this.toggleLoader(true);
+        this.handleOnFilterTaskItems();
+        this.paginationLength = Math.ceil(this.filteredItems.length / this.itemPerPage);
+        this.activePageItems = this.filteredItems.slice(this.paginationIndex * this.itemPerPage, this.paginationIndex * this.itemPerPage + this.itemPerPage);
+        this.toggleLoader(false);
     }
-    getStatusLabel(status) {
-        return status.replace('_', ' ').replace('_', ' ').replace('_', ' ');
+    handleInitialDateRange() {
+        var _a, _b, _c, _d, _e, _f;
+        const searchFilterStartPoint = (_c = (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.extendedFlags) === null || _b === void 0 ? void 0 : _b.searchFilterStartPoint) !== null && _c !== void 0 ? _c : {
+            day: 0,
+            month: 0,
+            year: 0
+        };
+        const currentDate = new Date();
+        const startDate = new Date((_d = currentDate.getFullYear() - (searchFilterStartPoint === null || searchFilterStartPoint === void 0 ? void 0 : searchFilterStartPoint.year)) !== null && _d !== void 0 ? _d : 0, (_e = currentDate.getMonth() - (searchFilterStartPoint === null || searchFilterStartPoint === void 0 ? void 0 : searchFilterStartPoint.month)) !== null && _e !== void 0 ? _e : 0, (_f = currentDate.getDate() - (searchFilterStartPoint === null || searchFilterStartPoint === void 0 ? void 0 : searchFilterStartPoint.day)) !== null && _f !== void 0 ? _f : 0);
+        this.start_time = convertNormalDateToStringFormat(startDate);
+        this.end_time = convertNormalDateToStringFormat(null);
+        this.searchDataFormControl = new FormControl({
+            value: new TuiDayRange(new TuiDay(startDate.getFullYear(), startDate.getMonth(), startDate.getDate()), this.max),
+            disabled: false
+        });
+        this.formGroup.addControl("searchDate", this.searchDataFormControl);
+        this.searchTextFormControl = new FormControl("");
+        this.formGroup.addControl("searchText", this.searchTextFormControl);
+        this.handleOnGetTaskItems();
+    }
+    handleOnFilterTasksByText(event) {
+        this.searchText = event === null || event === void 0 ? void 0 : event.text;
+        this.handleOnTaskItemsChange();
+    }
+    handleOnFilterTasksByDate(event) {
+        this.start_time = event.start_time;
+        this.end_time = event.end_time;
+        this.handleOnGetTaskItems();
+    }
+    handleOnGetTaskItems() {
+        this.toggleLoader(true);
+        this.onGetTaskList.emit({
+            from_date: this.start_time,
+            to_date: this.end_time
+        });
+    }
+    handleOnChangeSortFilter(event) {
+        var _a;
+        if (event && isNotEmptyValue(event.sortFilterKey)) {
+            this.sortFilterKey = event.sortFilterKey;
+            this.sortInAscendingOrder = (_a = event.sortFilterOrder) !== null && _a !== void 0 ? _a : true;
+            this.handleOnSortTaskItems(this.sortFilterKey, this.sortInAscendingOrder);
+            this.handleOnTaskItemsChange();
+        }
+    }
+    handleOnSortTaskItems(key, order) {
+        const sortedTaskItems = sortItems(this.taskItems, key, order);
+        this.taskItems = sortedTaskItems;
+        this.handleOnTaskItemsChange();
+    }
+    handleOnClickTaskItemViewDetail(e) {
+        this.onClickTaskItemViewDetail.emit(e);
+    }
+    handleOnClickChangePaginationIndex(indexOfPage) {
+        if (indexOfPage >= 0) {
+            this.paginationIndex = indexOfPage;
+            this.activePageItems = this.taskItems.slice(this.paginationIndex * this.itemPerPage, this.paginationIndex * this.itemPerPage + this.itemPerPage);
+        }
+    }
+    handleOnFilterTaskItems() {
+        const lowerCaseSearchText = this.searchText.toLowerCase();
+        this.filteredItems = this.taskItems.filter((item) => {
+            return Object.values(item).some((value) => 
+            // Ensure the value can be converted to string and check if it includes the search text
+            value != null &&
+                value.toString().toLowerCase().includes(lowerCaseSearchText));
+        });
+    }
+    trackByFn(index, item) {
+        return index; // or unique identifier if available
+    }
+    toggleLoader(loader, message = undefined) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (loader) {
+                this.loaderService.show({
+                    fullscreen: true,
+                    loaderText: message !== null && message !== void 0 ? message : "Please Wait"
+                });
+                this.loading = true;
+            }
+            else {
+                this.loaderService.hide();
+                this.loading = false;
+            }
+        });
     }
 }
-/** @nocollapse */ StatusPillComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: StatusPillComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ StatusPillComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: StatusPillComponent, selector: "status-pill", inputs: { status: "status" }, ngImport: i0, template: "<div [ngClass]=\"getStatusPillClass(status)\">{{ getStatusLabel(status) }}</div>\n", styles: [".status-pill{background-color:#555;padding:.1rem .5rem;border-radius:1rem;font-size:.7rem;color:#fff}.complete,.kyc-request-accepted,.kyc-result-approved{background-color:var(--tui-positive)}.rejected,.kyc-request-rejected,.kyc-result-rejected,.kyc-rejected{background-color:var(--tui-negative)}.auditing,.on-going,.kyc-result-partial-update,.kyc-resut-partial-update{background-color:var(--tui-primary)}.after-audit,.waiting,.kyc-result-under-review{background-color:var(--tui-warning-fill);color:#222}\n"], directives: [{ type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: StatusPillComponent, decorators: [{
+/** @nocollapse */ TaskListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TaskListComponent, deps: [{ token: i1.KwikUILoaderService }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ TaskListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TaskListComponent, selector: "task-list", inputs: { config: "config", taskItems: "taskItems" }, outputs: { onClickTaskItemViewDetail: "onClickTaskItemViewDetail", onGetTaskList: "onGetTaskList" }, usesOnChanges: true, ngImport: i0, template: "<kwikui-loader></kwikui-loader>\n<div id=\"task-list-container\">\n  <div id=\"task-list-search-wrapper\">\n    <task-list-search\n      [config]=\"config\"\n      (onFilterTasksByText)=\"handleOnFilterTasksByText($event)\"\n      (onFilterTasksByDate)=\"handleOnFilterTasksByDate($event)\"\n      (onChangeSortFilter)=\"handleOnChangeSortFilter($event)\"\n    ></task-list-search>\n  </div>\n  <hr />\n  <div\n    itemSize=\"50\"\n    class=\"virtualscroll-container\"\n    *ngIf=\"activePageItems.length > 0 && !loading; else NO_TASKS\"\n  >\n    <div id=\"task-list-items-container\">\n      <div\n        *ngFor=\"let taskItem of activePageItems\"\n        class=\"task-item-container\"\n      >\n        <task-item\n          [config]=\"config\"\n          [data]=\"taskItem\"\n          (onClickTaskItemViewDetail)=\"handleOnClickTaskItemViewDetail($event)\"\n        >\n        </task-item>\n      </div>\n    </div>\n    <div id=\"task-list-items-pagination-container\">\n      <tui-pagination\n        [index]=\"paginationIndex\"\n        [length]=\"paginationLength\"\n        (indexChange)=\"handleOnClickChangePaginationIndex($event)\"\n      ></tui-pagination>\n    </div>\n  </div>\n  <ng-template #NO_TASKS>\n    <div class=\"no-tasks\">No Tasks</div>\n  </ng-template>\n</div>\n", styles: ["#task-list-container{width:100%;height:100%;overflow:hidden;display:flex;flex-direction:column}#task-list-container ::-webkit-scrollbar{width:8px!important}#task-list-container ::-webkit-scrollbar-track{border-radius:10px!important}#task-list-container ::-webkit-scrollbar-thumb{background:lightgray!important;border-radius:10px!important}#task-list-container ::-webkit-scrollbar-thumb:hover{background:gray!important}#task-list-container #task-list-search-wrapper{width:100%;padding:1rem}#task-list-container .virtualscroll-container{width:100%;height:100%;display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;overflow:auto}#task-list-container .no-tasks{width:100%;height:100%;display:flex;flex-direction:row;justify-content:center;align-items:center;font-size:1rem;font-weight:bold}#task-list-container #task-list-items-container{overflow:auto}#task-list-container #task-list-items-container>*:first-child{margin-top:1rem}#task-list-container #task-list-items-container .task-item-container{padding:0 1rem;margin-bottom:1rem}#task-list-container #task-list-items-pagination-container{padding:1rem}\n"], components: [{ type: i1.KwikUILoaderComponent, selector: "kwikui-loader" }, { type: TaskListSearchComponent, selector: "task-list-search", inputs: ["config"], outputs: ["onFilterTasksByText", "onFilterTasksByDate", "onChangeSortFilter"] }, { type: TaskItemComponent, selector: "task-item", inputs: ["config", "data"], outputs: ["onClickTaskItem", "onClickTaskItemViewDetail", "onClickPerformAction"] }, { type: i1$1.TuiPaginationComponent, selector: "tui-pagination", inputs: ["length", "size", "disabled", "activePadding", "sidePadding", "content", "index"], outputs: ["indexChange"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+__decorate([
+    logMethod
+], TaskListComponent.prototype, "ngOnChanges", null);
+__decorate([
+    logMethod
+], TaskListComponent.prototype, "handleOnTaskItemsChange", null);
+__decorate([
+    logMethod
+], TaskListComponent.prototype, "handleOnClickTaskItemViewDetail", null);
+__decorate([
+    logMethod
+], TaskListComponent.prototype, "handleOnClickChangePaginationIndex", null);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TaskListComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'status-pill',
-                    templateUrl: './status-pill.component.html',
-                    styleUrls: ['./status-pill.component.css']
+                    selector: "task-list",
+                    templateUrl: "./task-list.component.html",
+                    styleUrls: ["./task-list.component.scss"],
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }], propDecorators: { status: [{
+        }], ctorParameters: function () { return [{ type: i1.KwikUILoaderService }]; }, propDecorators: { config: [{
                 type: Input
-            }] } });
+            }], taskItems: [{
+                type: Input
+            }], onClickTaskItemViewDetail: [{
+                type: Output
+            }], onGetTaskList: [{
+                type: Output
+            }], ngOnChanges: [], handleOnTaskItemsChange: [], handleOnClickTaskItemViewDetail: [], handleOnClickChangePaginationIndex: [] } });
+
+class LayoutBodyComponent {
+    constructor(hostElement, previewDialogService, dialogs) {
+        this.hostElement = hostElement;
+        this.previewDialogService = previewDialogService;
+        this.dialogs = dialogs;
+        this.isMobileView = false;
+        this.popupFormCallback = {};
+        this.popupFormConfig = {};
+        this.popupFormData = {};
+        this.previewProperties = {
+            html: {
+                before: "",
+                after: ""
+            },
+            iframe: {
+                src: "",
+                title: ""
+            },
+            popupFormKey: "",
+            title: "",
+            unavailable: false
+        };
+        this.pageFormConfig = undefined;
+        this.pageFormData = {};
+        this.onClickApiCall = new EventEmitter();
+        this.onGetTaskList = new EventEmitter();
+        this.apiCallResponse = {};
+        this.config = {};
+        this.userConfig = {};
+        this.agentInfo = {};
+        this.taskList = [];
+        this.isShowFullTaskDetails = false;
+        this.isActiveSidebar = true;
+        this.activeTaskDetail = null;
+    }
+    // The final value should be provided to service, so that it can be used in all components
+    windowResizeWatcher() {
+        if (this.hostElement.nativeElement.offsetWidth < 720) {
+            this.isMobileView = true;
+        }
+        else {
+            this.isMobileView = false;
+        }
+    }
+    ngOnInit() {
+        this.windowResizeWatcher();
+    }
+    ngOnChanges(changes) {
+        const verifyChange = (key) => {
+            return changes.hasOwnProperty(key) && !changes[key].firstChange;
+        };
+        for (const change of Object.entries(changes)) {
+            const key = change[0];
+            const value = change[1].currentValue;
+        }
+        if (verifyChange("taskList")) {
+            this.taskList = changes.taskList.currentValue;
+        }
+    }
+    handleShowingFullTaskDetails() {
+        var _a, _b;
+        if ((_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.maps) === null || _b === void 0 ? void 0 : _b.isShowMaps) {
+            this.isShowFullTaskDetails = false;
+        }
+        else if (this.isMobileView) {
+            this.isShowFullTaskDetails = false;
+        }
+        else {
+            this.isShowFullTaskDetails = true;
+        }
+    }
+    handleOnClickTaskItemViewDetail(e) {
+        this.handleShowingFullTaskDetails();
+        this.handleOnClickCloseTaskDetail(e);
+        this.activeTaskDetail = e;
+    }
+    handleOnClickCloseTaskDetail(e) {
+        this.activeTaskDetail = null;
+    }
+    handleOnClickToggleSidebar(e) {
+        this.isActiveSidebar = !this.isActiveSidebar;
+    }
+    handleOnClickApiCall(e) {
+        this.onClickApiCall.emit(e);
+    }
+    handleOnGetTaskList(event) {
+        this.onGetTaskList.emit(event);
+    }
+    handleOnClickPrimaryAction(e) {
+        var _a, _b;
+        return __awaiter(this, void 0, void 0, function* () {
+            switch (e.type) {
+                case "POPUP_FORM":
+                    this.popupFormConfig = yield (yield fetch((_a = e === null || e === void 0 ? void 0 : e.props) === null || _a === void 0 ? void 0 : _a.formUrl)).json();
+                    console.log("popupFormConfig", this.popupFormConfig);
+                    this.previewDialogRef = this.previewDialogService
+                        .open(this.preview || "")
+                        .subscribe({
+                        next: (data) => {
+                            this.popupFormCallback = {
+                                popupFormData: data.data,
+                                popupFormConfig: data.formConfig
+                            };
+                            this.popupFormConfig = {};
+                            this.previewDialogRef.complete();
+                        },
+                        error: () => {
+                            this.popupFormCallback = {
+                                popupFormData: {},
+                                popupFormConfig: this.popupFormConfig
+                            };
+                            this.popupFormConfig = {};
+                            console.info("Preview error");
+                        },
+                        complete: () => {
+                            console.info("Preview closed");
+                        }
+                    });
+                    break;
+                case "PAGE_FORM":
+                    this.pageFormConfig = yield (yield fetch((_b = e === null || e === void 0 ? void 0 : e.props) === null || _b === void 0 ? void 0 : _b.formUrl)).json();
+                    break;
+                case "action_3":
+                    break;
+                default:
+                    break;
+            }
+        });
+    }
+    handleOnClickSaveForm(e, eventType) {
+        switch (eventType) {
+            case "POPUP_FORM":
+                this.previewDialogRef.next(e);
+                break;
+            case "PAGE_FORM":
+                this.pageFormConfig = undefined;
+                break;
+            default:
+                break;
+        }
+    }
+}
+/** @nocollapse */ LayoutBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LayoutBodyComponent, deps: [{ token: i0.ElementRef }, { token: TuiPreviewDialogService }, { token: TuiDialogService }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ LayoutBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: LayoutBodyComponent, selector: "layout-body", inputs: { config: "config", userConfig: "userConfig", agentInfo: "agentInfo", taskList: "taskList" }, outputs: { onClickApiCall: "onClickApiCall", onGetTaskList: "onGetTaskList" }, host: { listeners: { "window:resize": "windowResizeWatcher($event)" } }, viewQueries: [{ propertyName: "preview", first: true, predicate: ["preview"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div id=\"body-container\">\n  <div\n    id=\"sidebar-container\"\n    *ngIf=\"!isMobileView && !activeTaskDetail\"\n    [class.is-hidden]=\"!isActiveSidebar\"\n  >\n    <div\n      id=\"sidebar-toggle\"\n      *ngIf=\"!isMobileView && !activeTaskDetail && !pageFormConfig\"\n      [class.is-hidden]=\"!isActiveSidebar\"\n      (click)=\"handleOnClickToggleSidebar($event)\"\n    >\n      <tui-svg\n        *ngIf=\"isActiveSidebar\"\n        [src]=\"'tuiIconChevronsLeftLarge'\"\n      ></tui-svg>\n      <tui-svg\n        *ngIf=\"!isActiveSidebar\"\n        [src]=\"'tuiIconChevronsRightLarge'\"\n      ></tui-svg>\n    </div>\n    <ng-container *ngTemplateOutlet=\"TaskList\"></ng-container>\n  </div>\n  <div\n    id=\"main-container\"\n    [class.is-desktop]=\"!isMobileView\"\n  >\n    <div\n      id=\"primary-actions-wrapper\"\n      [class.is-desktop]=\"!isMobileView\"\n      [class.is-nomaps]=\"config.mapConfig?.isHidden\"\n      *ngIf=\"config.primaryActionsConfig\"\n    >\n      <primary-actions\n        [primaryActionsConfig]=\"config.primaryActionsConfig\"\n        (onClickPrimaryAction)=\"handleOnClickPrimaryAction($event)\"\n      ></primary-actions>\n    </div>\n\n    <div\n      class=\"kwikid-form-view-page-container\"\n      *ngIf=\"pageFormConfig && pageFormConfig !== {}\"\n    >\n      <kwikid-form-view\n        [formConfig]=\"pageFormConfig\"\n        [allFormsData]=\"{}\"\n        [apiCallResponse]=\"this.apiCallResponse\"\n        (onClickApiCall)=\"handleOnClickApiCall($event)\"\n        (onClickSaveForm)=\"this.handleOnClickSaveForm($event, 'PAGE_FORM')\"\n      ></kwikid-form-view>\n    </div>\n\n    <div\n      id=\"map-view-wrapper\"\n      [class.is-desktop]=\"!isMobileView\"\n    >\n      <map-view [mapConfig]=\"config.mapConfig\"></map-view>\n    </div>\n\n    <div\n      id=\"task-detail-wrapper\"\n      *ngIf=\"activeTaskDetail && isShowFullTaskDetails\"\n      [@taskDetail2InOut]\n    >\n      <task-detail\n        [config]=\"config\"\n        [taskDetail]=\"activeTaskDetail\"\n        (onClickCloseTaskDetail)=\"handleOnClickCloseTaskDetail($event)\"\n      ></task-detail>\n    </div>\n  </div>\n</div>\n\n<bottom-sheet *ngIf=\"isMobileView\">\n  <!-- Content to be projected into the bottom sheet -->\n  <ng-container *ngTemplateOutlet=\"TaskList\"></ng-container>\n</bottom-sheet>\n\n<ng-template #TaskList>\n  <div\n    id=\"task-detail-wrapper\"\n    *ngIf=\"activeTaskDetail && !isShowFullTaskDetails\"\n    [@taskDetailInOut]\n  >\n    <task-detail\n      [config]=\"config\"\n      [taskDetail]=\"activeTaskDetail\"\n      (onClickCloseTaskDetail)=\"handleOnClickCloseTaskDetail($event)\"\n    ></task-detail>\n  </div>\n  <div id=\"task-list-wrapper\">\n    <task-list\n      [config]=\"config\"\n      [taskItems]=\"taskList\"\n      (onClickTaskItemViewDetail)=\"handleOnClickTaskItemViewDetail($event)\"\n      (onGetTaskList)=\"handleOnGetTaskList($event)\"\n      [@taskListInOut]\n    ></task-list>\n  </div>\n</ng-template>\n\n<ng-template\n  #preview\n  let-preview\n>\n  <tui-preview\n    [rotatable]=\"false\"\n    [zoomable]=\"false\"\n    class=\"preview-container\"\n    *ngIf=\"popupFormConfig\"\n  >\n    <button\n      tuiIconButton\n      tuiPreviewAction\n      icon=\"tuiIconCloseLarge\"\n      title=\"Close\"\n      type=\"button\"\n      (click)=\"preview.complete()\"\n    ></button>\n\n    <div class=\"kwikid-form-view-popup-container\">\n      <kwikid-form-view\n        [formConfig]=\"popupFormConfig\"\n        [allFormsData]=\"{}\"\n        [apiCallResponse]=\"this.apiCallResponse\"\n        (onClickApiCall)=\"handleOnClickApiCall($event)\"\n        (onClickSaveForm)=\"this.handleOnClickSaveForm($event, 'POPUP_FORM')\"\n      ></kwikid-form-view>\n    </div>\n  </tui-preview>\n</ng-template>\n\n<ng-template\n  #content\n  let-context\n>\n  <div class=\"kwikid-form-view-popup-container\">\n    <kwikid-form-view\n      [formConfig]=\"popupFormConfig\"\n      [allFormsData]=\"{}\"\n      [apiCallResponse]=\"this.apiCallResponse\"\n      (onClickApiCall)=\"handleOnClickApiCall($event)\"\n      (onClickSaveForm)=\"this.handleOnClickSaveForm($event, 'POPUP_FORM')\"\n    ></kwikid-form-view>\n  </div>\n</ng-template>\n", styles: [":root,:host{display:block;width:100%;height:100%}::-webkit-scrollbar{width:8px!important}::-webkit-scrollbar-track{border-radius:10px!important}::-webkit-scrollbar-thumb{background:lightgray!important;border-radius:10px!important}::-webkit-scrollbar-thumb:hover{background:gray!important}#body-container{width:100%;height:100%;display:flex;flex-direction:row;align-items:stretch;overflow:auto;position:relative;z-index:1}#body-container #sidebar-container{width:100%;max-width:320px;height:100%;overflow-y:auto;position:relative;z-index:1;box-shadow:#32325d40 0 13px 27px -5px,#0000004d 0 8px 16px -8px;overflow-x:hidden;z-index:5}#body-container #sidebar-container.is-hidden{width:0px!important}#body-container #sidebar-container #sidebar-toggle{flex-direction:row;background:white;width:3.6rem;border-top-right-radius:1rem;border-bottom-right-radius:1rem;height:3.6rem;display:flex;justify-content:center;align-items:center;cursor:pointer;position:fixed;transform:translate(320px,1.6rem);box-shadow:#32325d40 0 13px 27px -5px,#0000004d 0 8px 16px -8px;z-index:-1}#body-container #sidebar-container #sidebar-toggle.is-hidden{transform:translateY(1.6rem)}#body-container #main-container{flex:1;height:100%;position:relative;overflow:auto;z-index:1}#body-container #main-container #primary-actions-wrapper{position:absolute;padding:0;top:1rem;left:calc(100% - 1rem);z-index:3;border-radius:.5rem;transform:translate(-100%)}#body-container #main-container #primary-actions-wrapper.is-nomaps{box-shadow:none}#body-container #main-container #map-view-wrapper{width:100%;height:100%;overflow:hidden;position:relative;z-index:2}@media only screen and (max-width: 600px){#body-container{display:flex;flex-direction:column-reverse;justify-content:space-between;align-items:stretch}#body-container #main-container{flex:1;height:100%;position:relative;overflow:auto}#body-container #main-container #primary-actions-wrapper{position:absolute;width:calc(100% - (2 * 1rem));padding:0;top:1rem;left:calc(1rem);z-index:3;border-radius:.5rem;transform:translate(0)}#body-container #main-container #primary-actions-wrapper.is-nomaps{box-shadow:none}#body-container #main-container #map-view-wrapper{width:100%;height:100%;overflow:hidden}}#task-list-wrapper{width:100%;height:100%;overflow:auto;background-color:#fff;z-index:2}#task-detail-wrapper{position:absolute;top:0px;left:0px;background-color:#fff;width:100%;height:100%;overflow:auto;z-index:3}.kwikid-form-view-popup-container{border-radius:1rem;background:var(--tui-base-01);min-width:320px;max-width:480px;padding:.5rem;height:100%;max-height:90vh;overflow:auto;width:100%}.kwikid-form-view-page-container{min-width:320px;max-width:100%;padding:.5rem;height:100%;max-height:100%;overflow:auto;width:100%}\n"], components: [{ type: i3.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { type: PrimaryActionsComponent, selector: "primary-actions", inputs: ["primaryActionsConfig"], outputs: ["onClickPrimaryAction"] }, { type: i3$1.KwikIDFormViewComponent, selector: "kwikid-form-view", inputs: ["allFormsData", "extraData", "apiCallResponse", "buttonClickResponse", "formConfig", "formData", "isMobileView", "popupFormCallback", "userConfig", "stepConfig"], outputs: ["getLogs", "getUnsavedDataState", "onActionShowPopupForm", "onClickApiCall", "onClickViewFile", "onClickFormFieldButton", "onClickGoBack", "onClickSaveForm", "onClickViewForms"] }, { type: MapViewComponent, selector: "map-view", inputs: ["mapConfig"] }, { type: TaskDetailComponent, selector: "task-detail", inputs: ["config", "taskDetail"], outputs: ["onClickCloseTaskDetail"] }, { type: BottomSheetComponent, selector: "bottom-sheet" }, { type: TaskListComponent, selector: "task-list", inputs: ["config", "taskItems"], outputs: ["onClickTaskItemViewDetail", "onGetTaskList"] }, { type: i8.TuiPreviewComponent, selector: "tui-preview", inputs: ["zoomable", "rotatable"] }, { type: i3.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i8.TuiPreviewActionDirective, selector: "[tuiPreviewAction]" }], animations: [
+        trigger("taskDetailInOut", [
+            transition(":enter", [
+                style({ transform: "translateY(100%)" }),
+                animate(150)
+            ]),
+            transition(":leave", [
+                animate(150, style({ transform: "translateY(100%)" }))
+            ])
+        ]),
+        trigger("taskDetail2InOut", [
+            transition(":enter", [
+                style({ transform: "translateX(100%)" }),
+                animate(150)
+            ]),
+            transition(":leave", [
+                animate(150, style({ transform: "translateX(100%)" }))
+            ])
+        ]),
+        trigger("taskListInOut", [
+            transition(":enter", [
+                style({ transform: "translateY(100%)" }),
+                animate(0)
+            ]),
+            transition(":leave", [
+                animate(0, style({ transform: "translateY(100%)" }))
+            ])
+        ])
+    ] });
+__decorate([
+    logMethod
+], LayoutBodyComponent.prototype, "ngOnChanges", null);
+__decorate([
+    logMethod
+], LayoutBodyComponent.prototype, "handleShowingFullTaskDetails", null);
+__decorate([
+    logMethod
+], LayoutBodyComponent.prototype, "handleOnClickTaskItemViewDetail", null);
+__decorate([
+    logMethod
+], LayoutBodyComponent.prototype, "handleOnClickCloseTaskDetail", null);
+__decorate([
+    logMethod
+], LayoutBodyComponent.prototype, "handleOnClickToggleSidebar", null);
+__decorate([
+    logMethod
+], LayoutBodyComponent.prototype, "handleOnClickApiCall", null);
+__decorate([
+    logMethod
+], LayoutBodyComponent.prototype, "handleOnClickPrimaryAction", null);
+__decorate([
+    logMethod
+], LayoutBodyComponent.prototype, "handleOnClickSaveForm", null);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LayoutBodyComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "layout-body",
+                    templateUrl: "./layout-body.component.html",
+                    styleUrls: ["./layout-body.component.scss"],
+                    animations: [
+                        trigger("taskDetailInOut", [
+                            transition(":enter", [
+                                style({ transform: "translateY(100%)" }),
+                                animate(150)
+                            ]),
+                            transition(":leave", [
+                                animate(150, style({ transform: "translateY(100%)" }))
+                            ])
+                        ]),
+                        trigger("taskDetail2InOut", [
+                            transition(":enter", [
+                                style({ transform: "translateX(100%)" }),
+                                animate(150)
+                            ]),
+                            transition(":leave", [
+                                animate(150, style({ transform: "translateX(100%)" }))
+                            ])
+                        ]),
+                        trigger("taskListInOut", [
+                            transition(":enter", [
+                                style({ transform: "translateY(100%)" }),
+                                animate(0)
+                            ]),
+                            transition(":leave", [
+                                animate(0, style({ transform: "translateY(100%)" }))
+                            ])
+                        ])
+                    ]
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i8.TuiPreviewDialogService, decorators: [{
+                    type: Inject,
+                    args: [TuiPreviewDialogService]
+                }] }, { type: i3.TuiDialogService, decorators: [{
+                    type: Inject,
+                    args: [TuiDialogService]
+                }] }]; }, propDecorators: { windowResizeWatcher: [{
+                type: HostListener,
+                args: ["window:resize", ["$event"]]
+            }], preview: [{
+                type: ViewChild,
+                args: ["preview"]
+            }], onClickApiCall: [{
+                type: Output
+            }], onGetTaskList: [{
+                type: Output
+            }], config: [{
+                type: Input
+            }], userConfig: [{
+                type: Input
+            }], agentInfo: [{
+                type: Input
+            }], taskList: [{
+                type: Input
+            }], ngOnChanges: [], handleShowingFullTaskDetails: [], handleOnClickTaskItemViewDetail: [], handleOnClickCloseTaskDetail: [], handleOnClickToggleSidebar: [], handleOnClickApiCall: [], handleOnClickPrimaryAction: [], handleOnClickSaveForm: [] } });
+
+class KwikIDAgentDashboardComponentV2 {
+    constructor() {
+        this.config = {};
+        this.userConfig = {};
+        this.agentInfo = {};
+        this.taskList = [];
+        this.onGetTaskList = new EventEmitter();
+        this.onClickPerformAction = new EventEmitter();
+    }
+    ngOnInit() {
+        console.log("Agent Dashboard Config", this.config);
+        console.log("User Config", this.userConfig);
+        console.log("Agent Info", this.agentInfo);
+        console.log("Tasks List", this.taskList);
+    }
+    ngOnChanges(changes) {
+        const verifyChange = (key) => {
+            return changes.hasOwnProperty(key) && !changes[key].firstChange;
+        };
+        for (const change of Object.entries(changes)) {
+            const key = change[0];
+            const value = change[1].currentValue;
+        }
+        if (verifyChange("taskList")) {
+            this.taskList = changes.taskList.currentValue;
+        }
+    }
+    handleOnGetTaskList(event) {
+        this.onGetTaskList.emit(event);
+    }
+    handleOnClickPerformAction(event) {
+        this.onClickPerformAction.emit(event);
+    }
+}
+/** @nocollapse */ KwikIDAgentDashboardComponentV2.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikIDAgentDashboardComponentV2, deps: [], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ KwikIDAgentDashboardComponentV2.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: KwikIDAgentDashboardComponentV2, selector: "kwikid-agent-dashboard-v2", inputs: { config: "config", userConfig: "userConfig", agentInfo: "agentInfo", taskList: "taskList" }, outputs: { onGetTaskList: "onGetTaskList", onClickPerformAction: "onClickPerformAction" }, usesOnChanges: true, ngImport: i0, template: "<div id=\"container\">\n  <div id=\"header\">\n    <layout-header\n      [agentInfo]=\"agentInfo\"\n      [config]=\"config\"\n      (onGetTaskList)=\"handleOnGetTaskList($event)\"\n      (onClickPerformAction)=\"handleOnClickPerformAction($event)\"\n    ></layout-header>\n  </div>\n  <div id=\"body\">\n    <layout-body\n      [agentInfo]=\"agentInfo\"\n      [config]=\"config\"\n      [taskList]=\"taskList\"\n      [userConfig]=\"userConfig\"\n      (onGetTaskList)=\"handleOnGetTaskList($event)\"\n      (onClickPerformAction)=\"handleOnClickPerformAction($event)\"\n    ></layout-body>\n  </div>\n</div>\n", styles: [":host{position:relative;display:block;height:100%}::-webkit-scrollbar{width:8px!important}::-webkit-scrollbar-track{border-radius:8px!important}::-webkit-scrollbar-thumb{background:lightgray!important;border-radius:8px!important}::-webkit-scrollbar-thumb:hover{background:gray!important}#container{width:100%;height:100%}#container #header{width:100%;height:80px;border:1px solid red}#container #body{width:100%;height:calc(100% - 60px);border:1px solid blue;overflow:auto}\n"], components: [{ type: LayoutHeaderComponent, selector: "layout-header", inputs: ["config", "agentInfo"], outputs: ["onGetTaskList", "onClickPerformAction"] }, { type: LayoutBodyComponent, selector: "layout-body", inputs: ["config", "userConfig", "agentInfo", "taskList"], outputs: ["onClickApiCall", "onGetTaskList"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikIDAgentDashboardComponentV2, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "kwikid-agent-dashboard-v2",
+                    templateUrl: "./kwikid-agent-dashboard.component.html",
+                    styleUrls: ["./kwikid-agent-dashboard.component.scss"]
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { config: [{
+                type: Input
+            }], userConfig: [{
+                type: Input
+            }], agentInfo: [{
+                type: Input
+            }], taskList: [{
+                type: Input
+            }], onGetTaskList: [{
+                type: Output
+            }], onClickPerformAction: [{
+                type: Output
+            }] } });
+
+// To Calculate Distance between two markers
+const calculateDistance = (point1, point2) => {
+    const lat1 = point1.lat;
+    const lng1 = point1.lng;
+    const lat2 = point2.lat;
+    const lng2 = point2.lng;
+    const R = 6371; // Earth radius in kilometers
+    const dLat = (lat2 - lat1) * (Math.PI / 180);
+    const dLng = (lng2 - lng1) * (Math.PI / 180);
+    const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
+        Math.cos((lat1 * Math.PI) / 180) *
+            Math.cos((lat2 * Math.PI) / 180) *
+            Math.sin(dLng / 2) *
+            Math.sin(dLng / 2);
+    const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+    const distance = R * c;
+    return distance;
+};
+// To calculate nearest distance from marker
+const nearestNeighborAlgorithm = (startingPoint, unvisitedPoints) => {
+    let currentPoint = startingPoint;
+    const path = [currentPoint];
+    const visitedPoints = new Set([currentPoint]);
+    while (unvisitedPoints.length > 0) {
+        let nearestPoint = null;
+        let minDistance = Number.POSITIVE_INFINITY;
+        for (const point of unvisitedPoints) {
+            const distance = calculateDistance(currentPoint, point);
+            if (distance < minDistance) {
+                minDistance = distance;
+                nearestPoint = point;
+            }
+        }
+        path.push(nearestPoint);
+        visitedPoints.add(nearestPoint);
+        currentPoint = nearestPoint;
+        unvisitedPoints = unvisitedPoints.filter((point) => !visitedPoints.has(point));
+    }
+    return path;
+};
+const addressConcator = (data, config) => {
+    const address = config.reduce((accumulator, currentValue) => `${accumulator} ${getObjectValueFromPath(data, currentValue)}`, "");
+    return address;
+};
+
+var EStatus;
+(function (EStatus) {
+    EStatus["NOT_STARTED"] = "not_started";
+    EStatus["ON_GOING"] = "on_going";
+    EStatus["AUDITING"] = "auditing";
+    EStatus["REJECTED"] = "rejected";
+    EStatus["AFTER_AUDIT"] = "after_audit";
+    EStatus["COMPLETE"] = "complete";
+    EStatus["WAITING"] = "waiting";
+    EStatus["SESSION_EXPIRED"] = "session_expired";
+    EStatus["KYC_REJECTED"] = "kyc_rejected";
+    EStatus["KYC_REQUEST_REJECTED"] = "kyc_request_rejected";
+    EStatus["KYC_REQUEST_ACCEPTED"] = "kyc_request_accepted";
+    EStatus["KYC_RESULT_REJECTED"] = "kyc_result_rejected";
+    EStatus["KYC_RESULT_APPROVED"] = "kyc_result_approved";
+    EStatus["KYC_RESULT_PARTIAL_UPDATE"] = "kyc_result_partial_update";
+    EStatus["KYC_RESULT_UNDER_REVIEW"] = "kyc_result_under_review";
+})(EStatus || (EStatus = {}));
+const VStatus = [
+    EStatus.NOT_STARTED,
+    EStatus.ON_GOING,
+    EStatus.AUDITING,
+    EStatus.REJECTED,
+    EStatus.AFTER_AUDIT,
+    EStatus.COMPLETE,
+    EStatus.WAITING,
+    EStatus.SESSION_EXPIRED,
+    EStatus.KYC_REJECTED,
+    EStatus.KYC_REQUEST_REJECTED,
+    EStatus.KYC_REQUEST_ACCEPTED,
+    EStatus.KYC_RESULT_REJECTED,
+    EStatus.KYC_RESULT_APPROVED,
+    EStatus.KYC_RESULT_PARTIAL_UPDATE,
+    EStatus.KYC_RESULT_UNDER_REVIEW
+];
+
+class AgentService {
+    constructor() {
+        this.isListOpen = true;
+        this.showMapview = false;
+        this.addTaskForm = {
+            key: "ADD_TASK",
+            title: "Add Task",
+            fields: [
+                {
+                    key: "name",
+                    label: "Customer Name",
+                    validators: {
+                        required: true
+                    },
+                    properties: {
+                        placeholder: "Please enter the Customer Name",
+                        readOnly: false,
+                        case: "default"
+                    },
+                    type: "text"
+                },
+                {
+                    key: "phone",
+                    label: "Phone Number",
+                    validators: {
+                        required: true
+                    },
+                    properties: {
+                        countryCode: "+91",
+                        removeCountryCodeFromValue: true,
+                        phoneMaskAfterCountryCode: "##########",
+                        placeholder: "Please enter your Mobile Number",
+                        readOnly: false
+                    },
+                    type: "phone"
+                },
+                {
+                    key: "address",
+                    label: "Address",
+                    validators: {
+                        required: true
+                    },
+                    properties: {
+                        placeholder: "Please enter the Address",
+                        readOnly: false,
+                        case: "default"
+                    },
+                    type: "text"
+                },
+                {
+                    key: "city",
+                    label: "City",
+                    validators: {
+                        required: true
+                    },
+                    properties: {
+                        placeholder: "Please enter the City",
+                        readOnly: false,
+                        case: "default"
+                    },
+                    type: "text"
+                },
+                {
+                    key: "location",
+                    label: "Location URL",
+                    validators: {
+                        required: true
+                    },
+                    properties: {
+                        placeholder: "Please enter the Location URL",
+                        readOnly: false,
+                        case: "default"
+                    },
+                    type: "text"
+                }
+            ],
+            properties: {
+                header: {
+                    title: {
+                        hidden: true,
+                        label: "Add Task"
+                    },
+                    steps: {
+                        hidden: true
+                    },
+                    logo: {
+                        hidden: true
+                    }
+                },
+                footer: {
+                    viewFormsButton: {
+                        hidden: true,
+                        label: "View Forms"
+                    },
+                    saveButton: {
+                        hidden: false,
+                        label: "Submit"
+                    }
+                }
+            }
+        };
+        this.notRequiredStatus = [
+            EStatus.REJECTED,
+            EStatus.AFTER_AUDIT,
+            EStatus.COMPLETE,
+            EStatus.SESSION_EXPIRED,
+            EStatus.KYC_REJECTED,
+            EStatus.KYC_RESULT_APPROVED,
+            EStatus.KYC_RESULT_REJECTED,
+            EStatus.KYC_RESULT_UNDER_REVIEW,
+            EStatus.KYC_REQUEST_REJECTED
+        ];
+    }
+    ngOnInit() { }
+    setAgentConfig(config) {
+        this.config = config;
+    }
+    toggleMapview() {
+        this.showMapview = !this.showMapview;
+    }
+    canStartJourney(status) {
+        var _a, _b;
+        const noneEditableStatus = (_b = (_a = this.config.dashboard) === null || _a === void 0 ? void 0 : _a.cannotStartJourney) !== null && _b !== void 0 ? _b : this.notRequiredStatus;
+        if (noneEditableStatus.includes(status)) {
+            return false;
+        }
+        return true;
+    }
+    canPlotMarkers(status) {
+        var _a, _b;
+        const nonePlottingSessions = (_b = (_a = this.config.dashboard) === null || _a === void 0 ? void 0 : _a.dontPlotMarkers) !== null && _b !== void 0 ? _b : [];
+        if (nonePlottingSessions.includes(status)) {
+            return false;
+        }
+        return true;
+    }
+}
+/** @nocollapse */ AgentService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AgentService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ AgentService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AgentService, providedIn: "root" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AgentService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: "root"
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class GoogleMapsService {
+    constructor(agentService, mapDirectionsService, httpClient) {
+        this.agentService = agentService;
+        this.mapDirectionsService = mapDirectionsService;
+        this.httpClient = httpClient;
+        this.allMarkers = [];
+    }
+    // To get Current Position
+    getPosition() {
+        return new Promise((resolve, reject) => {
+            navigator.geolocation.watchPosition((resp) => {
+                resolve({
+                    lng: resp.coords.longitude,
+                    lat: resp.coords.latitude
+                });
+            }, (err) => {
+                reject(err);
+            });
+        });
+    }
+    // To Initialize Google Maps
+    initializeMap() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.myPosition = yield this.getPosition();
+            this.map = {
+                zoom: 10,
+                center: this.myPosition,
+                streetViewControl: false,
+                mapTypeControl: false,
+                fullscreenControl: false,
+                zoomControl: false
+            };
+        });
+    }
+    // To extract Location from the Task Details
+    getLocation(task) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve) => __awaiter(this, void 0, void 0, function* () {
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+                let encodedAddres;
+                // If Fetch Address from Multiple Paths
+                if (checkObjectPathExists(this.agentService.config, "dashboard.taskLocationPaths")) {
+                    // Get address string from multiple paths
+                    const config = this.agentService.config.dashboard.taskLocationPaths;
+                    const address = addressConcator(task, config);
+                    // Encode the Address in URI
+                    encodedAddres = encodeURI(address);
+                }
+                // If Fetch Address from Single Path
+                else if (checkObjectPathExists(this.agentService.config, "dashboard.taskLocationPath")) {
+                    // Get Address from Single Path
+                    const config = this.agentService.config.dashboard.taskLocationPath;
+                    const address = getObjectValueFromPath(task, config);
+                    // Encode the Address in URI
+                    encodedAddres = encodeURI(address);
+                }
+                // Default Address Paths Avaiable
+                else {
+                    const address = (_k = (_j = (_g = (_d = (_c = (_b = (_a = task === null || task === void 0 ? void 0 : task.extras) === null || _a === void 0 ? void 0 : _a.task_details) === null || _b === void 0 ? void 0 : _b.customer_details) === null || _c === void 0 ? void 0 : _c.address) !== null && _d !== void 0 ? _d : (_f = (_e = task === null || task === void 0 ? void 0 : task.task_details) === null || _e === void 0 ? void 0 : _e.customer_details) === null || _f === void 0 ? void 0 : _f.address) !== null && _g !== void 0 ? _g : (_h = task === null || task === void 0 ? void 0 : task.extras) === null || _h === void 0 ? void 0 : _h.address) !== null && _j !== void 0 ? _j : task === null || task === void 0 ? void 0 : task.address) !== null && _k !== void 0 ? _k : "";
+                    // Encode the Address in URI
+                    encodedAddres = encodeURI(address);
+                }
+                // URL to geocode Address String to Latitude & Longitude
+                const url = `https://maps.googleapis.com/maps/api/geocode/json?key=${this.apiKey}&address=${encodedAddres}`;
+                const response = yield fetch(url);
+                const data = yield response.json();
+                // Set Location {lat: LAT, lng: LNG} from address geocoded
+                const isValidLocation = isNotEmptyArray(data === null || data === void 0 ? void 0 : data.results);
+                const location = isValidLocation
+                    ? (_m = (_l = data === null || data === void 0 ? void 0 : data.results[0]) === null || _l === void 0 ? void 0 : _l.geometry) === null || _m === void 0 ? void 0 : _m.location
+                    : { lat: null, lng: null };
+                // Set Location validation & Google Maps URL
+                location.isValidLocation = isValidLocation;
+                location.googleMapsUrl = `https://www.google.com/maps/place/${location === null || location === void 0 ? void 0 : location.lat},${location === null || location === void 0 ? void 0 : location.lng}`;
+                resolve(location);
+            }));
+        });
+    }
+    // Get Tasks | Markers Location Co Ordinates
+    getMarkersLocation(myMarker, tasks) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve) => __awaiter(this, void 0, void 0, function* () {
+                const markers = [];
+                markers.push(myMarker);
+                const promises = tasks.map((task) => __awaiter(this, void 0, void 0, function* () {
+                    const marker = yield this.getLocation(task);
+                    task = Object.assign(Object.assign({}, task), marker);
+                    markers.push(task);
+                }));
+                yield Promise.all(promises);
+                resolve(markers);
+            }));
+        });
+    }
+    // Plot All Markers
+    plotAllMarkers(tasks) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve) => __awaiter(this, void 0, void 0, function* () {
+                const path = [];
+                const promises = tasks.map((task) => {
+                    if (task === null || task === void 0 ? void 0 : task.isValidLocation) {
+                        path.push({
+                            location: task,
+                            stopover: true
+                        });
+                        this.allMarkers.push(task);
+                    }
+                });
+                yield Promise.all(promises);
+                resolve(path);
+            }));
+        });
+    }
+    // To Plot Directions for All Tasks
+    plotDirectionsForAllTasks(tasks) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.allMarkers = [];
+            // Create Agent Marker & Plot It.
+            const myMarker = {
+                lat: this.myPosition.lat,
+                lng: this.myPosition.lng,
+                title: 0,
+                color: "red"
+            };
+            // Get All Markers Location Co Ordinates
+            const markers = yield this.getMarkersLocation(myMarker, tasks);
+            // Run Algorithm to get optimized Routes
+            const startingPoint = markers[0];
+            const unvisitedWaypoints = markers.slice(1);
+            const optimizedRoute = nearestNeighborAlgorithm(startingPoint, unvisitedWaypoints);
+            // Sort All Tasks as per optimized routes
+            tasks = optimizedRoute.slice(1);
+            this.allMarkers = [myMarker];
+            // Plot all markers & get path for directions
+            const path = yield this.plotAllMarkers(tasks);
+            // Set Directions in Google Maps
+            const request = {
+                origin: this.myPosition,
+                destination: this.myPosition,
+                waypoints: path,
+                travelMode: google.maps.TravelMode.DRIVING
+            };
+            this.directionsRenderOption = {
+                suppressMarkers: true
+            };
+            this.directionsResults$ = this.mapDirectionsService
+                .route(request)
+                .pipe(map((response) => response.result));
+            this.directionsResults$.subscribe((val) => { });
+            this.allDirectionsResults$ = this.directionsResults$;
+            return tasks;
+        });
+    }
+    // To Plot Directions for Selected Tasks
+    plotDirectionsForSelectedTask(task) {
+        if (task != null) {
+            const taskMarker = task;
+            // If Location is Available in Task Details
+            if (taskMarker === null || taskMarker === void 0 ? void 0 : taskMarker.isValidLocation) {
+                const request = {
+                    origin: this.myPosition,
+                    destination: taskMarker,
+                    optimizeWaypoints: true,
+                    travelMode: google.maps.TravelMode.DRIVING
+                };
+                this.directionsResults$ = this.mapDirectionsService
+                    .route(request)
+                    .pipe(map((response) => response.result));
+                this.directionsResults$.subscribe();
+            }
+            else {
+                alert("No Location Available");
+                this.directionsResults$ = this.allDirectionsResults$;
+            }
+        }
+        else {
+            this.directionsResults$ = this.allDirectionsResults$;
+        }
+    }
+}
+/** @nocollapse */ GoogleMapsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GoogleMapsService, deps: [{ token: AgentService }, { token: i2$2.MapDirectionsService }, { token: i3$2.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ GoogleMapsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GoogleMapsService, providedIn: "root" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: GoogleMapsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: "root"
+                }]
+        }], ctorParameters: function () { return [{ type: AgentService }, { type: i2$2.MapDirectionsService }, { type: i3$2.HttpClient }]; }, propDecorators: { directionsRenders: [{
+                type: ViewChildren,
+                args: ["directionsRender"]
+            }] } });
+
+class OpenStreetMapsService {
+    constructor(agentService, mapDirectionsService, httpClient) {
+        this.agentService = agentService;
+        this.mapDirectionsService = mapDirectionsService;
+        this.httpClient = httpClient;
+        this.allMarkers = [];
+    }
+    // To get Current Position
+    getPosition() {
+        return new Promise((resolve, reject) => {
+            navigator.geolocation.watchPosition((resp) => {
+                resolve({
+                    lng: resp.coords.longitude,
+                    lat: resp.coords.latitude
+                });
+            }, (err) => {
+                reject(err);
+            });
+        });
+    }
+    // To extract Location from the Task Details
+    getLocation(task) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve) => __awaiter(this, void 0, void 0, function* () {
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+                let encodedAddres;
+                // If Fetch Address from Multiple Paths
+                if (checkObjectPathExists(this.agentService.config, "dashboard.taskLocationPaths")) {
+                    // Get address string from multiple paths
+                    const config = this.agentService.config.dashboard.taskLocationPaths;
+                    const address = addressConcator(task, config);
+                    // Encode the Address in URI
+                    encodedAddres = encodeURI(address);
+                }
+                // If Fetch Address from Single Path
+                else if (checkObjectPathExists(this.agentService.config, "dashboard.taskLocationPath")) {
+                    // Get Address from Single Path
+                    const config = this.agentService.config.dashboard.taskLocationPath;
+                    const address = getObjectValueFromPath(task, config);
+                    // Encode the Address in URI
+                    encodedAddres = encodeURI(address);
+                }
+                // Default Address Paths Avaiable
+                else {
+                    const address = (_k = (_j = (_g = (_d = (_c = (_b = (_a = task === null || task === void 0 ? void 0 : task.extras) === null || _a === void 0 ? void 0 : _a.task_details) === null || _b === void 0 ? void 0 : _b.customer_details) === null || _c === void 0 ? void 0 : _c.address) !== null && _d !== void 0 ? _d : (_f = (_e = task === null || task === void 0 ? void 0 : task.task_details) === null || _e === void 0 ? void 0 : _e.customer_details) === null || _f === void 0 ? void 0 : _f.address) !== null && _g !== void 0 ? _g : (_h = task === null || task === void 0 ? void 0 : task.extras) === null || _h === void 0 ? void 0 : _h.address) !== null && _j !== void 0 ? _j : task === null || task === void 0 ? void 0 : task.address) !== null && _k !== void 0 ? _k : "";
+                    // Encode the Address in URI
+                    encodedAddres = encodeURI(address);
+                }
+                // URL to geocode Address String to Latitude & Longitude
+                const url = `https://nominatim.openstreetmap.org/search?q=${encodedAddres}&format=json`;
+                const response = yield fetch(url);
+                const data = yield response.json();
+                // Set Location {lat: LAT, lng: LNG} from address geocoded
+                const isValidLocation = isNotEmptyArray(data) && ((_l = data[0]) === null || _l === void 0 ? void 0 : _l.lat) & ((_m = data[0]) === null || _m === void 0 ? void 0 : _m.lon);
+                const location = isValidLocation
+                    ? { lat: (_o = data[0]) === null || _o === void 0 ? void 0 : _o.lat, lng: (_p = data[0]) === null || _p === void 0 ? void 0 : _p.lon }
+                    : { lat: null, lng: null };
+                // Set Location validation & Google Maps URL
+                location.isValidLocation = isValidLocation;
+                location.color = isValidLocation ? "blue" : "red";
+                location.googleMapsUrl = `https://www.google.com/maps/place/${location === null || location === void 0 ? void 0 : location.lat},${location === null || location === void 0 ? void 0 : location.lng}`;
+                resolve(location);
+            }));
+        });
+    }
+    // Get Tasks | Markers Location Co Ordinates
+    getMarkersLocation(myMarker, tasks) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve) => __awaiter(this, void 0, void 0, function* () {
+                const markers = [];
+                markers.push(myMarker);
+                const promises = tasks.map((task) => __awaiter(this, void 0, void 0, function* () {
+                    const marker = yield this.getLocation(task);
+                    task = Object.assign(Object.assign({}, task), marker);
+                    markers.push(task);
+                }));
+                yield Promise.all(promises);
+                resolve(markers);
+            }));
+        });
+    }
+    // To Initialize Open Street Map
+    initializeMap() {
+        return __awaiter(this, void 0, void 0, function* () {
+            console.log("Running Init Open Street Maps");
+            this.myPosition = yield this.getPosition();
+            this.map = L.map("map", {
+                center: [this.myPosition.lat, this.myPosition.lng],
+                zoom: 11
+            });
+            L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png").addTo(this.map);
+        });
+    }
+    // To Add Open Street Marker in Map
+    addMarker({ lat, lng, title, color }) {
+        L.marker([lat, lng], {
+            icon: L.icon({
+                iconUrl: color == "red"
+                    ? "https://kwikid.s3.ap-south-1.amazonaws.com/CONFIG/USER/assets/map-marker-0.png"
+                    : "https://kwikid.s3.ap-south-1.amazonaws.com/CONFIG/USER/assets/map-marker-1.png"
+            })
+        })
+            .addTo(this.map)
+            .bindPopup(title);
+    }
+    // To Plot Open Street Directions for All Tasks
+    plotDirectionsForAllTasks(tasks) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.map) {
+                this.allMarkers = [];
+                // Create Agent Marker & Plot It.
+                const myMarker = {
+                    lat: this.myPosition.lat,
+                    lng: this.myPosition.lng,
+                    title: 0,
+                    color: "red"
+                };
+                this.addMarker(myMarker);
+                this.allMarkers.push(myMarker);
+                // Create Markers for all Tasks
+                this.allMarkers = yield this.getMarkersLocation(myMarker, tasks);
+                // Run Algorithm to get optimized Routes
+                const startingPoint = this.allMarkers[0];
+                const unvisitedWaypoints = this.allMarkers.slice(1);
+                const optimizedRoute = nearestNeighborAlgorithm(startingPoint, unvisitedWaypoints);
+                // Sort All Markers as per optimized routes
+                this.allMarkers = this.sortTasksAsPerDistance(optimizedRoute, this.allMarkers, true);
+                // Sort All Tasks as per optimized routes
+                tasks = this.sortTasksAsPerDistance(optimizedRoute.slice(1), tasks, false);
+                // Plot Markers for All Tasks
+                tasks.map((task) => {
+                    if (task === null || task === void 0 ? void 0 : task.isValidLocation) {
+                        const marker = this.getLocation(task);
+                        this.addMarker(marker);
+                    }
+                });
+                // Set Styles for all Task Routes
+                const styles = [
+                    { color: "blue", opacity: 1, weight: 8 },
+                    { color: "white", opacity: 0.6, weight: 12 }
+                ];
+                // Set Routes for all Tasks
+                this.allTasksRoutes = this.setRoutes(this.allMarkers, styles);
+                this.fitMapBounds();
+            }
+            return tasks;
+        });
+    }
+    // To plot Open Street Direction for selected Task
+    plotDirectionsForSelectedTask(task) {
+        if (task !== null) {
+            // Remove Previously Selected Task Route
+            if (this.selectedTaskRoutes) {
+                this.map.removeControl(this.selectedTaskRoutes);
+            }
+            // Remove All Tasks Routes
+            if (this.allTasksRoutes) {
+                this.map.removeControl(this.allTasksRoutes);
+            }
+            const taskMarker = task;
+            // If Location is Available in Task Details
+            if (taskMarker.color != "red") {
+                const markers = [this.allMarkers[0], taskMarker];
+                const styles = [
+                    { color: "green", opacity: 1, weight: 8 },
+                    { color: "white", opacity: 0.4, weight: 12 }
+                ];
+                this.selectedTaskRoutes = this.setRoutes(markers, styles);
+                this.setSelectedTaskDistanceAndTime();
+            }
+            else {
+                alert("No Location Available");
+            }
+        }
+        // Set All Tasks Routes Again & Remove Selected Tasks route
+        else {
+            if (this.selectedTaskRoutes) {
+                this.map.removeControl(this.selectedTaskRoutes);
+            }
+            this.map.addControl(this.allTasksRoutes);
+            this.selectedTaskRoutes = undefined;
+        }
+        this.fitMapBounds();
+    }
+    // Get Distance & Time of Selected Task
+    getSelectedTaskDistanceAndTime() {
+        return this.selectedTaskDistanceAndTime;
+    }
+    // Set Distance & Time of Selected Task
+    setSelectedTaskDistanceAndTime() {
+        this.selectedTaskRoutes.on("routesfound", function (e) {
+            const { routes } = e;
+            const { summary } = routes[0];
+            const distance = summary.totalDistance / 1000;
+            const time = Math.round((summary.totalTime % 3600) / 60);
+            this.selectedTaskDistanceAndTime = {
+                distance,
+                time
+            };
+        });
+    }
+    // To sort Open Street Maps Task as per nearest distance
+    sortTasksAsPerDistance(order, tasks, isMarker) {
+        const sortedTasks = [];
+        for (let i = 0; i < tasks.length; i++) {
+            const title = isMarker ? order[i].title : order[i].title - 1;
+            const task = tasks[title];
+            sortedTasks.push(task);
+        }
+        return sortedTasks;
+    }
+    // To set Open Street routes in the maps
+    setRoutes(markers, styles) {
+        return L.Routing.control({
+            waypoints: markers,
+            lineOptions: {
+                styles
+            },
+            createMarker() {
+                return null;
+            },
+            routeWhileDragging: true
+        }).addTo(this.map);
+    }
+    // To set Open Street view point on the map
+    fitMapBounds() {
+        const markerLatLngs = this.allMarkers.map((marker) => L.latLng(marker.lat, marker.lng));
+        this.map.fitBounds(markerLatLngs);
+    }
+}
+/** @nocollapse */ OpenStreetMapsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: OpenStreetMapsService, deps: [{ token: AgentService }, { token: i2$2.MapDirectionsService }, { token: i3$2.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ OpenStreetMapsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: OpenStreetMapsService, providedIn: "root" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: OpenStreetMapsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: "root"
+                }]
+        }], ctorParameters: function () { return [{ type: AgentService }, { type: i2$2.MapDirectionsService }, { type: i3$2.HttpClient }]; }, propDecorators: { directionsRenders: [{
+                type: ViewChildren,
+                args: ["directionsRender"]
+            }] } });
+
+class StatusPillComponent {
+    constructor() {
+        this.status = EStatus.WAITING;
+        this.statusText = "";
+        this.statusClass = {};
+    }
+    ngOnInit() {
+        this.parseStatus(this.status);
+    }
+    ngOnChanges(changes) {
+        const verifyChange = (key) => {
+            return changes.hasOwnProperty(key) && !changes[key].firstChange;
+        };
+        if (verifyChange("status")) {
+            this.status = changes.status.currentValue;
+            this.parseStatus(this.status);
+        }
+    }
+    parseStatus(status) {
+        if (isEmptyValue(status)) {
+            this.status = EStatus.WAITING;
+        }
+        this.statusText = this.getStatusLabel(status);
+        this.statusClass = this.getStatusPillClass(status);
+    }
+    getStatusPillClass(status) {
+        const newStatus = status
+            .replace("_", "-")
+            .replace("_", "-")
+            .replace("_", "-");
+        return `status-pill ${newStatus}`;
+    }
+    getStatusLabel(status) {
+        return status.replace("_", " ").replace("_", " ").replace("_", " ");
+    }
+}
+/** @nocollapse */ StatusPillComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: StatusPillComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ StatusPillComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: StatusPillComponent, selector: "status-pill", inputs: { status: "status" }, usesOnChanges: true, ngImport: i0, template: "<div [ngClass]=\"getStatusPillClass(status)\">{{ getStatusLabel(status) }}</div>\n", styles: [".status-pill{background-color:#dedede;padding:.1rem .5rem;border-radius:1rem;font-size:.7rem;color:#222}.complete,.kyc-request-accepted,.kyc-result-approved{background-color:#d7faee;color:#01663e}.rejected,.kyc-request-rejected,.kyc-result-rejected,.kyc-rejected{background:#f9dade;color:#eb3434}.auditing,.on-going,.kyc-result-partial-update,.kyc-resut-partial-update{background-color:#c1e3f4;color:#023b57}.after-audit,.waiting,.kyc-result-under-review{background-color:#f5ecb5;color:#000}\n"], directives: [{ type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: StatusPillComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "status-pill",
+                    templateUrl: "./status-pill.component.html",
+                    styleUrls: ["./status-pill.component.css"]
+                }]
+        }], propDecorators: { status: [{
+                type: Input
+            }] } });
+
+class ActionButtonComponent {
+    constructor() {
+        this.action = {};
+        this.config = {};
+        this.customer = {};
+        this.disabled = false;
+        this.hidden = false;
+        this.onClickPerformAction = new EventEmitter();
+        this.takeAction = (action) => {
+            switch (action.key) {
+                case "BUTTON_DISABLE":
+                    this.disabled = true;
+                    break;
+                case "BUTTON_ENABLE":
+                    this.disabled = false;
+                    break;
+                case "BUTTON_HIDE":
+                    this.hidden = true;
+                    break;
+                case "BUTTON_SHOW":
+                    this.hidden = false;
+                    break;
+                default:
+                    break;
+            }
+        };
+    }
+    ngOnInit() { }
+    ngOnChanges(changes) {
+        var _a;
+        const verifyChange = (key) => {
+            // eslint-disable-next-line no-prototype-builtins
+            return changes.hasOwnProperty(key) && !changes[key].firstChange;
+        };
+        if (verifyChange("action")) {
+            this.action = changes.action.currentValue;
+        }
+        if (verifyChange("customer")) {
+            this.customer = changes.customer.currentValue;
+        }
+        if ((_a = this.action) === null || _a === void 0 ? void 0 : _a.default) {
+            this.runValidations();
+        }
+    }
+    runValidations() {
+        var _a, _b, _c, _d, _e, _f;
+        return __awaiter(this, void 0, void 0, function* () {
+            yield new RuleEngine({
+                DATA: this.customer
+            }, this.takeAction).run({
+                triggers: [],
+                rules: (_c = (_b = (_a = this.action) === null || _a === void 0 ? void 0 : _a.default) === null || _b === void 0 ? void 0 : _b.rules) !== null && _c !== void 0 ? _c : [],
+                actions: (_f = (_e = (_d = this.action) === null || _d === void 0 ? void 0 : _d.default) === null || _e === void 0 ? void 0 : _e.actions) !== null && _f !== void 0 ? _f : []
+            });
+        });
+    }
+    handleOnClickPerformAction(action, customer) {
+        this.onClickPerformAction.emit({
+            action,
+            customer
+        });
+    }
+}
+/** @nocollapse */ ActionButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ActionButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ ActionButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: ActionButtonComponent, selector: "kwikid-action-button", inputs: { action: "action", config: "config", customer: "customer" }, outputs: { onClickPerformAction: "onClickPerformAction" }, usesOnChanges: true, ngImport: i0, template: "<kwikui-button\n  *ngIf=\"!hidden\"\n  appearance=\"primary\"\n  [disabled]=\"disabled\"\n  [label]=\"action?.label\"\n  [icon]=\"action?.icon\"\n  [iconRight]=\"action?.iconRight\"\n  size=\"s\"\n  shape=\"rounded\"\n  (onClick)=\"handleOnClickPerformAction(action, customer)\"\n></kwikui-button>\n", styles: [""], components: [{ type: i1.KwikUIButtonComponent, selector: "kwikui-button", inputs: ["appearance", "class", "disabled", "icon", "iconRight", "id", "label", "shape", "showLoader", "size", "styles", "type", "pseudoHover"], outputs: ["onClick"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ActionButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "kwikid-action-button",
+                    templateUrl: "./action-button.component.html",
+                    styleUrls: ["./action-button.component.css"]
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { action: [{
+                type: Input
+            }], config: [{
+                type: Input
+            }], customer: [{
+                type: Input
+            }], onClickPerformAction: [{
+                type: Output
+            }] } });
+
+/* eslint-disable no-empty-function */
+class CustomerDetailsComponent {
+    constructor(agentService, googleMapsService, openStreetMapsService, cdr) {
+        this.agentService = agentService;
+        this.googleMapsService = googleMapsService;
+        this.openStreetMapsService = openStreetMapsService;
+        this.cdr = cdr;
+        this.customer = {};
+        this.title = "Session Details";
+        this.viewTaskDetails = [];
+        this.taskId = "";
+        this.labelValuePairConfig = {};
+        this.labelValuePairData = [];
+        this.nextStep = new EventEmitter();
+        this.removeTask = new EventEmitter();
+        this.onClickPerformAction = new EventEmitter();
+    }
+    ngOnInit() {
+        this.parseData();
+    }
+    ngOnChanges(changes) {
+        const verifyChange = (key) => {
+            return changes.hasOwnProperty(key) && !changes[key].firstChange;
+        };
+        if (verifyChange("customer")) {
+            this.customer = changes.customer.currentValue;
+            this.parseData();
+        }
+    }
+    parseData() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+        const identifier = (_c = (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.dashboard) === null || _b === void 0 ? void 0 : _b.taskIdentifier) !== null && _c !== void 0 ? _c : "user_id";
+        this.taskId = getObjectValueFromPath(this.customer, identifier);
+        let detailsConfig = [];
+        if (checkObjectPathExists(this.config, "dashboard.viewTaskDetails") &&
+            isNotEmptyArray(this.config.dashboard.viewTaskDetails)) {
+            detailsConfig = this.config.dashboard.viewTaskDetails;
+            const data = [];
+            detailsConfig.map((field) => {
+                const value = getObjectValueFromPath(this.customer, field.value);
+                data.push({ label: field.label, value });
+                return true;
+            });
+            this.labelValuePairData = data;
+        }
+        else if (checkObjectPathExists(this.config, "dashboard.taskUI.details.data") &&
+            isNotEmptyArray(this.config.dashboard.taskUI.details.data)) {
+            detailsConfig = this.config.dashboard.taskUI.details.data;
+            const data = [];
+            detailsConfig.map((field) => {
+                const value = getObjectValueFromPath(this.customer, field.path);
+                data.push({ label: field.label, value });
+                return true;
+            });
+            this.labelValuePairData = data;
+        }
+        this.labelValuePairConfig =
+            (_h = (_g = (_f = (_e = (_d = this.config) === null || _d === void 0 ? void 0 : _d.dashboard) === null || _e === void 0 ? void 0 : _e.taskUI) === null || _f === void 0 ? void 0 : _f.details) === null || _g === void 0 ? void 0 : _g.config) !== null && _h !== void 0 ? _h : {};
+        this.title =
+            (_p = (_o = (_m = (_l = (_k = (_j = this.config) === null || _j === void 0 ? void 0 : _j.dashboard) === null || _k === void 0 ? void 0 : _k.taskUI) === null || _l === void 0 ? void 0 : _l.details) === null || _m === void 0 ? void 0 : _m.header) === null || _o === void 0 ? void 0 : _o.title) !== null && _p !== void 0 ? _p : this.title;
+    }
+    getTaskCreationTime(task) {
+        var _a;
+        if (checkObjectPathExists(this.agentService.config, "dashboard.taskCreationTimePath")) {
+            const time = getObjectValueFromPath(task, this.agentService.config.dashboard.taskCreationTimePath);
+            return this.convertEpochToDate(time);
+        }
+        return this.convertEpochToDate((_a = task === null || task === void 0 ? void 0 : task.task_creation_time) !== null && _a !== void 0 ? _a : task === null || task === void 0 ? void 0 : task.start_time);
+    }
+    convertEpochToDate(epochTime) {
+        if (typeof epochTime === "string")
+            epochTime = Number(epochTime);
+        const date = new Date(epochTime * 1000); // Convert to milliseconds
+        const day = date.getDate().toString().padStart(2, "0");
+        const month = (date.getMonth() + 1).toString().padStart(2, "0"); // Months are zero-based
+        const year = date.getFullYear().toString();
+        return `${day}-${month}-${year}`;
+    }
+    getTaskDetails(taskData) {
+        return getObjectValueFromPath(this.customer, taskData);
+    }
+    goToMaps(location) {
+        window.open(`${location}`, "_blank");
+    }
+    handleOnClickNext(e) {
+        this.nextStep.emit(e);
+    }
+    close() {
+        var _a, _b;
+        this.agentService.currentTaskDetails = undefined;
+        if (((_b = (_a = this.agentService.config) === null || _a === void 0 ? void 0 : _a.dashboard) === null || _b === void 0 ? void 0 : _b.mapType) === "google-maps") {
+            this.googleMapsService.plotDirectionsForSelectedTask(null);
+        }
+        else {
+            this.openStreetMapsService.plotDirectionsForSelectedTask(null);
+        }
+    }
+    handleOnClickRemoveTask(task) {
+        this.removeTask.emit(task);
+    }
+    handleOnClickPerformAction(event) {
+        this.onClickPerformAction.emit(event);
+    }
+}
+/** @nocollapse */ CustomerDetailsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CustomerDetailsComponent, deps: [{ token: AgentService }, { token: GoogleMapsService }, { token: OpenStreetMapsService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ CustomerDetailsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CustomerDetailsComponent, selector: "customer-details", inputs: { customer: "customer", config: "config" }, outputs: { nextStep: "nextStep", removeTask: "removeTask", onClickPerformAction: "onClickPerformAction" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"customer-details-wrapper\">\n  <div>\n    <kwikui-button\n      icon=\"tuiIconChevronLeft\"\n      label=\"Back\"\n      shape=\"rounded\"\n      size=\"s\"\n      (onClick)=\"close()\"\n    ></kwikui-button>\n  </div>\n  <div class=\"customer-details-heading\">{{ title }}</div>\n  <div class=\"customer-details-body\">\n    <div class=\"customer-details-user-id\">\n      {{ taskId }}\n\n      <status-pill\n        *ngIf=\"config?.dashboard?.isShowTaskStatus\"\n        [status]=\"customer.session_status\"\n      ></status-pill>\n    </div>\n\n    <div class=\"customer-details-table\">\n      <kwikui-label-value-pair\n        [config]=\"labelValuePairConfig\"\n        [data]=\"labelValuePairData\"\n      ></kwikui-label-value-pair>\n    </div>\n\n    <div\n      class=\"customer-details-actions\"\n      *ngIf=\"\n        config?.dashboard?.taskUI?.details?.action &&\n        config?.dashboard?.taskUI?.details?.action?.length > 0\n      \"\n    >\n      <ng-container\n        *ngFor=\"let action of config?.dashboard?.taskUI?.details?.action\"\n      >\n        <kwikid-action-button\n          [action]=\"action\"\n          [config]=\"config\"\n          [customer]=\"customer\"\n          (onClickPerformAction)=\"handleOnClickPerformAction($event)\"\n        ></kwikid-action-button>\n      </ng-container>\n    </div>\n  </div>\n</div>\n", styles: [".customer-details-wrapper{display:flex;flex-direction:column;align-items:stretch;overflow:auto;grid-gap:.5rem;gap:.5rem;padding:1.5rem;height:100%;width:100%}.customer-details-wrapper .customer-details-heading{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:1rem 0;font-size:1.5rem;font-weight:600}.customer-details-wrapper .customer-details-body{display:flex;flex-direction:column;font-size:1rem}.customer-details-wrapper .customer-details-body .customer-details-user-id{display:flex;flex-direction:row;grid-gap:.6rem;gap:.6rem;align-items:center;font-size:1.25rem;font-weight:500;padding:.5rem 0}.customer-details-wrapper .customer-details-body .customer-details-table{display:flex;grid-gap:.5rem;gap:.5rem;flex-direction:column}.customer-details-wrapper .customer-details-body .customer-details-table .customer-details-table-data .customer-details-table-detail-name{font-weight:500}.customer-details-wrapper .customer-details-body .customer-details-table .customer-details-table-data .customer-details-table-detail-value{word-wrap:break-word}.customer-details-wrapper .customer-details-body .customer-details-date{padding-top:1rem}.customer-details-wrapper .customer-details-body .customer-details-actions{padding:.5rem 0;display:flex;flex-wrap:wrap;align-items:center;flex-direction:row;justify-content:flex-start;grid-gap:.5rem;gap:.5rem}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{border-radius:10px}::-webkit-scrollbar-thumb{background:lightgray;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:gray}\n"], components: [{ type: i1.KwikUIButtonComponent, selector: "kwikui-button", inputs: ["appearance", "class", "disabled", "icon", "iconRight", "id", "label", "shape", "showLoader", "size", "styles", "type", "pseudoHover"], outputs: ["onClick"] }, { type: StatusPillComponent, selector: "status-pill", inputs: ["status"] }, { type: i1.KwikUILabelValuePairComponent, selector: "kwikui-label-value-pair", inputs: ["config", "data", "id"] }, { type: ActionButtonComponent, selector: "kwikid-action-button", inputs: ["action", "config", "customer"], outputs: ["onClickPerformAction"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CustomerDetailsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "customer-details",
+                    templateUrl: "./customer-details.component.html",
+                    styleUrls: ["./customer-details.component.scss"],
+                    changeDetection: ChangeDetectionStrategy.Default
+                }]
+        }], ctorParameters: function () { return [{ type: AgentService }, { type: GoogleMapsService }, { type: OpenStreetMapsService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { customer: [{
+                type: Input
+            }], config: [{
+                type: Input
+            }], nextStep: [{
+                type: Output
+            }], removeTask: [{
+                type: Output
+            }], onClickPerformAction: [{
+                type: Output
+            }] } });
+
+class CustomerTileComponent {
+    constructor(googleMapsService, openStreetMapsService, agentService, hostElement) {
+        this.googleMapsService = googleMapsService;
+        this.openStreetMapsService = openStreetMapsService;
+        this.agentService = agentService;
+        this.hostElement = hostElement;
+        this.customer = {};
+        this.index = undefined;
+        this.isMobileView = false;
+        this.viewTaskDetails = [];
+        this.taskId = "";
+        this.labelValuePairConfig = {};
+        this.labelValuePairData = [];
+        this.onClickPerformAction = new EventEmitter();
+        this.nextStep = new EventEmitter();
+        this.removeTask = new EventEmitter();
+    }
+    windowResizeWatcher() {
+        if (this.hostElement.nativeElement.offsetWidth < 600) {
+            this.isMobileView = true;
+        }
+        else {
+            this.isMobileView = false;
+        }
+    }
+    ngOnInit() {
+        this.parseData();
+    }
+    ngOnChanges(changes) {
+        const verifyChange = (key) => {
+            return changes.hasOwnProperty(key) && !changes[key].firstChange;
+        };
+        if (verifyChange("customer")) {
+            this.customer = changes.customer.currentValue;
+            this.parseData();
+        }
+    }
+    parseData() {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        const identifier = (_c = (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.dashboard) === null || _b === void 0 ? void 0 : _b.taskIdentifier) !== null && _c !== void 0 ? _c : "user_id";
+        this.taskId = getObjectValueFromPath(this.customer, identifier);
+        let detailsConfig = [];
+        if (checkObjectPathExists(this.config, "dashboard.viewTaskDetails") &&
+            isNotEmptyArray(this.config.dashboard.viewTaskDetails)) {
+            detailsConfig = this.config.dashboard.viewTaskDetails;
+            const data = [];
+            detailsConfig.map((field) => {
+                console.log("vvvvv", field);
+                const value = getObjectValueFromPath(this.customer, field.value);
+                data.push({ label: field.label, value });
+                return true;
+            });
+            this.labelValuePairData = data;
+        }
+        else if (checkObjectPathExists(this.config, "dashboard.taskUI.details.data") &&
+            isNotEmptyArray(this.config.dashboard.taskUI.details.data)) {
+            detailsConfig = this.config.dashboard.taskUI.details.data;
+            const data = [];
+            detailsConfig.map((field) => {
+                const value = getObjectValueFromPath(this.customer, field.path);
+                data.push({ label: field.label, value });
+                return true;
+            });
+            this.labelValuePairData = data;
+        }
+        console.log("DATA", this.labelValuePairData);
+        this.labelValuePairConfig =
+            (_h = (_g = (_f = (_e = (_d = this.config) === null || _d === void 0 ? void 0 : _d.dashboard) === null || _e === void 0 ? void 0 : _e.taskUI) === null || _f === void 0 ? void 0 : _f.details) === null || _g === void 0 ? void 0 : _g.config) !== null && _h !== void 0 ? _h : {};
+    }
+    openDetails() {
+        var _a, _b, _c, _d;
+        const isDifferentTaskSelected = ((_a = this.agentService.currentTaskDetails) === null || _a === void 0 ? void 0 : _a.session_id) !==
+            ((_b = this.customer) === null || _b === void 0 ? void 0 : _b.session_id);
+        if (isDifferentTaskSelected) {
+            this.agentService.currentTaskDetails = this.customer;
+        }
+        else {
+            this.agentService.currentTaskDetails = undefined;
+        }
+        if (this.agentService.showMapview) {
+            if (((_d = (_c = this.agentService.config) === null || _c === void 0 ? void 0 : _c.dashboard) === null || _d === void 0 ? void 0 : _d.mapType) === "google-maps") {
+                this.googleMapsService.plotDirectionsForSelectedTask(this.agentService.currentTaskDetails);
+            }
+            else {
+                this.openStreetMapsService.plotDirectionsForSelectedTask(this.agentService.currentTaskDetails);
+            }
+        }
+    }
+    goToMaps(location) {
+        window.open(`${location}`, "_blank");
+    }
+    handleOnClickPerformAction(event) {
+        this.onClickPerformAction.emit(event);
+    }
+    handleOnClickNext(e) {
+        this.nextStep.emit(e);
+    }
+    handleOnClickRemoveTask(task) {
+        this.removeTask.emit(task);
+    }
+}
+/** @nocollapse */ CustomerTileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CustomerTileComponent, deps: [{ token: GoogleMapsService }, { token: OpenStreetMapsService }, { token: AgentService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ CustomerTileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CustomerTileComponent, selector: "customer-tile", inputs: { customer: "customer", index: "index", config: "config" }, outputs: { onClickPerformAction: "onClickPerformAction", nextStep: "nextStep", removeTask: "removeTask" }, host: { listeners: { "window:resize": "windowResizeWatcher($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div\n  [ngClass]=\"\n    customer?.session_id == agentService.currentTaskDetails?.session_id\n      ? 'customer-tile-wrapper customer-tile-active'\n      : 'customer-tile-wrapper'\n  \"\n>\n  <div class=\"customer-tile-primary-container\">\n    <div class=\"customer-tile-primary-container-data\">\n      <div class=\"customer-tile-primary-container-userid\">\n        {{ taskId }}\n      </div>\n      <status-pill\n        *ngIf=\"config?.dashboard?.isShowTaskStatus\"\n        [status]=\"customer.session_status\"\n      ></status-pill>\n    </div>\n    <kwikui-button\n      *ngIf=\"!agentService.isMobileView && !agentService.showMapview\"\n      [icon]=\"\n        agentService.currentTaskDetails?.session_id == customer?.session_id\n          ? 'tuiIconChevronLeftLarge'\n          : 'tuiIconChevronRightLarge'\n      \"\n      [shape]=\"'rounded'\"\n      appearance=\"icon\"\n      size=\"s\"\n      (onClick)=\"openDetails()\"\n    ></kwikui-button>\n    <kwikui-button\n      *ngIf=\"agentService.isMobileView || agentService.showMapview\"\n      [icon]=\"\n        agentService.currentTaskDetails?.session_id == customer?.session_id\n          ? 'tuiIconChevronUpLarge'\n          : 'tuiIconChevronDownLarge'\n      \"\n      [shape]=\"'rounded'\"\n      appearance=\"icon\"\n      size=\"s\"\n      (onClick)=\"openDetails()\"\n    ></kwikui-button>\n  </div>\n  <div\n    *ngIf=\"\n      customer?.session_id == agentService.currentTaskDetails?.session_id &&\n      (agentService.isMobileView || agentService.showMapview)\n    \"\n    [ngClass]=\"\n      customer?.session_id == agentService.currentTaskDetails?.session_id &&\n      (agentService.isMobileView || agentService.showMapview)\n        ? 'customer-tile-secondary-container'\n        : 'data-collasped'\n    \"\n  >\n    <div class=\"customer-tile-secondary-container-data\">\n      <kwikui-label-value-pair\n        [config]=\"labelValuePairConfig\"\n        [data]=\"labelValuePairData\"\n      ></kwikui-label-value-pair>\n      <!-- <div\n        *ngIf=\"\n          agentService.config?.dashboard?.maps?.sho &&\n          agentService.config?.dashboard?.isShowDistanceAndTime &&\n          openStreetMapsService.getSelectedTaskDistanceAndTime()\n        \"\n        class=\"customer-tile-secondary-container-custom-details\"\n      >\n        Distance: {{ openStreetMapsService.getSelectedTaskDistanceAndTime()?.distance }} |\n        Time: {{ openStreetMapsService.getSelectedTaskDistanceAndTime()?.time }}\n      </div> -->\n    </div>\n    <div class=\"customer-tile-secondary-container-actions\">\n      <ng-container\n        *ngFor=\"let action of config?.dashboard?.taskUI?.details?.action\"\n      >\n        <kwikid-action-button\n          [action]=\"action\"\n          [config]=\"config\"\n          [customer]=\"customer\"\n          (onClickPerformAction)=\"handleOnClickPerformAction($event)\"\n        ></kwikid-action-button>\n      </ng-container>\n      <!-- <div class=\"customer-tile-secondary-container-task-buttons\">\n        <kwikui-button\n          *ngIf=\"config.dashboard?.isAllowRemoveTask\"\n          [icon]=\"'tuiIconTrash2'\"\n          [shape]=\"'rounded'\"\n          appearance=\"icon\"\n          size=\"s\"\n          (onClick)=\"handleOnClickRemoveTask(customer)\"\n        ></kwikui-button>\n        <kwikui-button\n          *ngIf=\"config.dashboard?.isShowCopyLink\"\n          icon=\"tuiIconCopy\"\n          [shape]=\"'rounded'\"\n          appearance=\"icon\"\n          size=\"s\"\n          (onClick)=\"\n            handleOnClickNext({\n              customer: customer,\n              stepType: 'SHARE_JOURNEY_LINK'\n            })\n          \"\n        ></kwikui-button>\n      </div>\n      <div class=\"customer-tile-secondary-container-journey-buttons\">\n        <kwikui-button\n          *ngIf=\"config.dashboard?.isShowMaps && customer?.isValidLocation\"\n          label=\"Show Directions\"\n          appearance=\"flat\"\n          size=\"s\"\n          styles=\"font-size:0.7rem;\"\n          (onClick)=\"goToMaps(customer.googleMapsUrl)\"\n        ></kwikui-button>\n        <kwikui-button\n          *ngIf=\"\n            config.dashboard?.isAllowStartJourney &&\n            agentService.canStartJourney(customer.session_status)\n          \"\n          label=\"Start Journey\"\n          appearance=\"primary\"\n          size=\"s\"\n          styles=\"font-size:0.7rem;\"\n          (onClick)=\"\n            handleOnClickNext({ customer: customer, stepType: 'START_JOURNEY' })\n          \"\n        ></kwikui-button>\n      </div> -->\n    </div>\n  </div>\n</div>\n", styles: [".customer-tile-wrapper{display:flex;flex-direction:column;align-content:center;justify-content:center;align-items:stretch;flex:1;overflow:auto;grid-gap:.5rem;gap:.5rem;margin:1rem;padding:1rem .25rem 1rem 1rem;border-radius:1rem;border:.5px solid #ddd}.customer-tile-wrapper .customer-tile-primary-container{display:flex;grid-gap:.5rem;gap:.5rem;flex-direction:row;align-content:center;justify-content:space-between;align-items:center;width:100%;height:100%}.customer-tile-wrapper .customer-tile-primary-container .customer-tile-primary-container-data{padding-left:.2rem;grid-gap:.6rem;gap:.6rem;display:flex;flex-direction:column;flex-wrap:wrap;align-content:stretch;justify-content:flex-start;align-items:flex-start}.customer-tile-wrapper .customer-tile-primary-container .customer-tile-primary-container-data .customer-tile-primary-container-userid{font-weight:500;font-size:1.1rem;line-height:1rem}.customer-tile-wrapper .customer-tile-secondary-container{width:100%;height:100%;display:flex;flex-direction:column;overflow:auto;grid-gap:.5rem;gap:.5rem}.customer-tile-wrapper .customer-tile-secondary-container .customer-tile-secondary-container-data{padding:.4rem .2rem;display:flex;flex-direction:column;font-size:.7rem;grid-gap:.3rem;gap:.3rem}.customer-tile-wrapper .customer-tile-secondary-container .customer-tile-secondary-container-data .customer-tile-secondary-container-custom-details{width:100%;height:100%;line-height:.9rem;word-wrap:break-word}.customer-tile-wrapper .customer-tile-secondary-container .customer-tile-secondary-container-actions{padding:.5rem 0;display:flex;flex-wrap:wrap;align-items:center;flex-direction:row;justify-content:flex-start;grid-gap:.5rem;gap:.5rem}.customer-tile-wrapper .data-collasped{display:none}.customer-tile-active{background-color:#dcedfd}\n"], components: [{ type: StatusPillComponent, selector: "status-pill", inputs: ["status"] }, { type: i1.KwikUIButtonComponent, selector: "kwikui-button", inputs: ["appearance", "class", "disabled", "icon", "iconRight", "id", "label", "shape", "showLoader", "size", "styles", "type", "pseudoHover"], outputs: ["onClick"] }, { type: i1.KwikUILabelValuePairComponent, selector: "kwikui-label-value-pair", inputs: ["config", "data", "id"] }, { type: ActionButtonComponent, selector: "kwikid-action-button", inputs: ["action", "config", "customer"], outputs: ["onClickPerformAction"] }], directives: [{ type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CustomerTileComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "customer-tile",
+                    templateUrl: "./customer-tile.component.html",
+                    styleUrls: ["./customer-tile.component.scss"]
+                }]
+        }], ctorParameters: function () { return [{ type: GoogleMapsService }, { type: OpenStreetMapsService }, { type: AgentService }, { type: i0.ElementRef }]; }, propDecorators: { windowResizeWatcher: [{
+                type: HostListener,
+                args: ["window:resize", ["$event"]]
+            }], customer: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }], config: [{
+                type: Input
+            }], onClickPerformAction: [{
+                type: Output
+            }], nextStep: [{
+                type: Output
+            }], removeTask: [{
+                type: Output
+            }] } });
+
+class Ng2SearchPipe$1 {
+    /**
+     * @param items object from array
+     * @param term term's search
+     * @param excludes array of strings which will ignored during search
+     */
+    transform(items, term, excludes = []) {
+        if (!term || !items)
+            return items;
+        return Ng2SearchPipe$1.filter(items, term, excludes);
+    }
+    /**
+     *
+     * @param items List of items to filter
+     * @param term  a string term to compare with every property of the list
+     * @param excludes List of keys which will be ignored during search
+     *
+     */
+    static filter(items, term, excludes) {
+        const toCompare = term.toLowerCase();
+        function checkInside(item, term) {
+            if (typeof item === "string" &&
+                item.toString().toLowerCase().includes(toCompare)) {
+                return true;
+            }
+            for (const property in item) {
+                if (item[property] === null ||
+                    item[property] == undefined ||
+                    excludes.includes(property)) {
+                    continue;
+                }
+                if (typeof item[property] === "object") {
+                    if (checkInside(item[property], term)) {
+                        return true;
+                    }
+                }
+                else if (item[property].toString().toLowerCase().includes(toCompare)) {
+                    return true;
+                }
+            }
+            return false;
+        }
+        return items.filter((item) => {
+            return checkInside(item, term);
+        });
+    }
+}
+/** @nocollapse */ Ng2SearchPipe$1.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: Ng2SearchPipe$1, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+/** @nocollapse */ Ng2SearchPipe$1.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: Ng2SearchPipe$1, name: "filter", pure: false });
+/** @nocollapse */ Ng2SearchPipe$1.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: Ng2SearchPipe$1 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: Ng2SearchPipe$1, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: "filter",
+                    pure: false
+                }]
+        }, {
+            type: Injectable
+        }] });
+
+class CustomerListComponent {
+    constructor(googleMapsService, openStreetMapsService, agentService
+    // eslint-disable-next-line no-empty-function
+    ) {
+        this.googleMapsService = googleMapsService;
+        this.openStreetMapsService = openStreetMapsService;
+        this.agentService = agentService;
+        this.nextStep = new EventEmitter();
+        this.removeTask = new EventEmitter();
+        this.filterTaskList = new EventEmitter();
+        this.filteredData = [];
+        this.formGroup = new FormGroup({});
+        this.sortInAscendingOrder = true;
+        this.max = new TuiDay(new Date().getFullYear(), new Date().getMonth(), new Date().getDate());
+        // Sorting Variables
+        this.sortFilterKey = "";
+        this.sortFilterOptions = ["user_id", "session_status"];
+        this.activeSearchAction = undefined;
+        this.onClickPerformAction = new EventEmitter();
+    }
+    ngOnInit() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.handleInitialDateRange();
+            this.handleSearchAndSortFormControls();
+        });
+    }
+    handleOnClickSearchType(type) {
+        if (this.activeSearchAction !== type) {
+            this.activeSearchAction = type;
+        }
+        else {
+            this.activeSearchAction = undefined;
+        }
+    }
+    handleInitialDateRange() {
+        var _a, _b, _c, _d, _e;
+        const searchDateStart = (_b = (_a = this.config.dashboard) === null || _a === void 0 ? void 0 : _a.searchDateStart) !== null && _b !== void 0 ? _b : {
+            day: 0,
+            month: 0,
+            year: 0
+        };
+        const currentDate = new Date();
+        const startDate = new Date((_c = currentDate.getFullYear() - (searchDateStart === null || searchDateStart === void 0 ? void 0 : searchDateStart.year)) !== null && _c !== void 0 ? _c : 0, (_d = currentDate.getMonth() - (searchDateStart === null || searchDateStart === void 0 ? void 0 : searchDateStart.month)) !== null && _d !== void 0 ? _d : 0, (_e = currentDate.getDate() - (searchDateStart === null || searchDateStart === void 0 ? void 0 : searchDateStart.day)) !== null && _e !== void 0 ? _e : 0);
+        this.fromDate = convertNormalDateToStringFormat(startDate);
+        this.toDate = convertNormalDateToStringFormat(null);
+        this.searchDateFormControl = new FormControl({
+            value: new TuiDayRange(new TuiDay(startDate.getFullYear(), startDate.getMonth(), startDate.getDate()), this.max),
+            disabled: false
+        });
+        this.formGroup.addControl("search-date", this.searchDateFormControl);
+    }
+    handleSearchAndSortFormControls() {
+        var _a, _b, _c;
+        this.searchTextFormControl = new FormControl("");
+        this.formGroup.addControl("search-text", this.searchTextFormControl);
+        this.sortFilterKeyFormControl = new FormControl("");
+        this.formGroup.addControl("sort-filter", this.sortFilterKeyFormControl);
+        this.sortFilterOptions =
+            (_c = (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.extendedFlags) === null || _b === void 0 ? void 0 : _b.sortFilterKeys) !== null && _c !== void 0 ? _c : this.sortFilterOptions;
+    }
+    setUpMaps() {
+        var _a, _b;
+        return __awaiter(this, void 0, void 0, function* () {
+            if ((_a = this.config.dashboard) === null || _a === void 0 ? void 0 : _a.isShowMaps) {
+                if (((_b = this.config.dashboard) === null || _b === void 0 ? void 0 : _b.mapType) === "open-street") {
+                    yield this.openStreetMapsService.initializeMap();
+                }
+                else {
+                    yield this.googleMapsService.initializeMap();
+                }
+            }
+        });
+    }
+    setCustomersList() {
+        var _a;
+        return __awaiter(this, void 0, void 0, function* () {
+            if ((_a = this.config.dashboard) === null || _a === void 0 ? void 0 : _a.isShowMaps) {
+                this.filteredData = yield this.plotMarkers(this.customers);
+            }
+            else {
+                this.filteredData = this.customers;
+            }
+        });
+    }
+    ngAfterViewInit() {
+        var _a, _b;
+        this.maxLength = (_b = (_a = this.config.dashboard) === null || _a === void 0 ? void 0 : _a.searchDateRange) !== null && _b !== void 0 ? _b : this.maxLength;
+        setTimeout(() => __awaiter(this, void 0, void 0, function* () {
+            yield this.setUpMaps();
+            yield this.setCustomersList();
+        }), 1000);
+    }
+    ngOnChanges() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.setCustomersList();
+        });
+    }
+    handleOnClickNext(e) {
+        this.nextStep.emit(e);
+    }
+    plotMarkers(customers) {
+        var _a, _b;
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!((_a = this.config.dashboard) === null || _a === void 0 ? void 0 : _a.isPlotCompletedTaskMarkers)) {
+                customers = customers.filter((customer) => {
+                    return this.agentService.canPlotMarkers(customer.session_status);
+                });
+            }
+            if (((_b = this.config.dashboard) === null || _b === void 0 ? void 0 : _b.mapType) === "open-street") {
+                customers =
+                    yield this.openStreetMapsService.plotDirectionsForAllTasks(customers);
+            }
+            else {
+                customers =
+                    yield this.googleMapsService.plotDirectionsForAllTasks(customers);
+            }
+            return customers;
+        });
+    }
+    handleOnChangeDateRange(event) {
+        this.handleChangeDateRangeFormat(event);
+        this.handleOnFilterTaskList({
+            from_date: this.fromDate,
+            to_date: this.toDate
+        });
+    }
+    handleOnClickChangeSortOrder() {
+        this.sortInAscendingOrder = !this.sortInAscendingOrder;
+        this.handleOnChangeSortFilter(false);
+    }
+    handleOnChangeSortFilter(event) {
+        if (event && isNotEmptyValue(event.value)) {
+            this.sortFilterKey = event.value;
+            this.handleOnSortTaskItems(this.sortFilterKey, this.sortInAscendingOrder);
+        }
+    }
+    handleOnSortTaskItems(key, order) {
+        const sortedTaskItems = sortItems(this.filteredData, key, order);
+        this.filteredData = getObjectDeepCopy(sortedTaskItems);
+    }
+    handleChangeDateRangeFormat(event) {
+        var _a, _b;
+        if (((_a = event.value) === null || _a === void 0 ? void 0 : _a.from) && ((_b = event.value) === null || _b === void 0 ? void 0 : _b.to)) {
+            this.fromDate = convertKwikUIDateToStringFormat(event.value.from);
+            this.toDate = convertKwikUIDateToStringFormat(event.value.to);
+        }
+    }
+    handleOnChangeSearchText(event) {
+        this.searchText = event.value;
+    }
+    handleOnClickRemoveTask(task) {
+        this.removeTask.emit(task);
+    }
+    handleOnFilterTaskList(filter) {
+        this.filterTaskList.emit(filter);
+    }
+    handleOnClickPerformAction(event) {
+        this.onClickPerformAction.emit(event);
+    }
+}
+/** @nocollapse */ CustomerListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CustomerListComponent, deps: [{ token: GoogleMapsService }, { token: OpenStreetMapsService }, { token: AgentService }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ CustomerListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CustomerListComponent, selector: "customer-list", inputs: { customers: "customers", config: "config" }, outputs: { nextStep: "nextStep", removeTask: "removeTask", filterTaskList: "filterTaskList", onClickPerformAction: "onClickPerformAction" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"customer-list-wrapper\">\n  <div\n    class=\"customer-list-filter\"\n    [formGroup]=\"formGroup\"\n  >\n    <div class=\"task-list-search-icons\">\n      <kwikui-button\n        appearance=\"mono\"\n        icon=\"tuiIconSearchLarge\"\n        size=\"s\"\n        type=\"button\"\n        (onClick)=\"handleOnClickSearchType('search-text')\"\n      ></kwikui-button>\n      <kwikui-button\n        appearance=\"mono\"\n        icon=\"tuiIconCalendarLarge\"\n        size=\"s\"\n        type=\"button\"\n        (onClick)=\"handleOnClickSearchType('search-date')\"\n      ></kwikui-button>\n      <kwikui-button\n        appearance=\"mono\"\n        icon=\"tuiIconFilterLarge\"\n        size=\"s\"\n        type=\"button\"\n        (onClick)=\"handleOnClickSearchType('sort-filter')\"\n      ></kwikui-button>\n    </div>\n\n    <div\n      class=\"task-list-search-action\"\n      *ngIf=\"activeSearchAction\"\n    >\n      <kwikui-input-date-range\n        *ngIf=\"activeSearchAction == 'search-date'\"\n        class=\"task-list-date-box\"\n        label=\"Search by Date Range\"\n        id=\"dateRange\"\n        size=\"m\"\n        [max]=\"max\"\n        [maxLength]=\"maxLength\"\n        formControlName=\"search-date\"\n        [formControl]=\"searchDateFormControl\"\n        (getKeyValue)=\"handleOnChangeDateRange($event)\"\n      ></kwikui-input-date-range>\n\n      <kwikui-input\n        *ngIf=\"activeSearchAction == 'search-text'\"\n        label=\"Search\"\n        id=\"search\"\n        icon=\"tuiIconSearch\"\n        placeholder=\"Search any task from here\"\n        size=\"m\"\n        [formControl]=\"searchTextFormControl\"\n        formControlName=\"search-text\"\n        (getKeyValue)=\"handleOnChangeSearchText($event)\"\n      ></kwikui-input>\n\n      <div\n        *ngIf=\"activeSearchAction == 'sort-filter'\"\n        class=\"task-list-sort-action\"\n      >\n        <kwikui-button\n          appearance=\"outline\"\n          [icon]=\"\n            sortInAscendingOrder\n              ? 'tuiIconChevronsUpLarge'\n              : 'tuiIconChevronsDownLarge'\n          \"\n          size=\"m\"\n          type=\"button\"\n          (onClick)=\"handleOnClickChangeSortOrder()\"\n        ></kwikui-button>\n        <kwikui-input-select\n          class=\"task-list-sort-key\"\n          formControlName=\"sort-filter\"\n          label=\"Sort By Key\"\n          size=\"m\"\n          [formControl]=\"sortFilterKeyFormControl\"\n          [options]=\"sortFilterOptions\"\n          [searchable]=\"false\"\n          (getKeyValue)=\"handleOnChangeSortFilter($event)\"\n        ></kwikui-input-select>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"customer-task-list\">\n    <cdk-virtual-scroll-viewport\n      itemSize=\"1\"\n      class=\"customer-task-list-scroll\"\n    >\n      <div\n        *cdkVirtualFor=\"\n          let customer of filteredData | filter: searchText;\n          index as index\n        \"\n      >\n        <customer-tile\n          class=\"example-item\"\n          [customer]=\"customer\"\n          [config]=\"config\"\n          [index]=\"index\"\n          (nextStep)=\"handleOnClickNext($event)\"\n          (removeTask)=\"handleOnClickRemoveTask($event)\"\n          (onClickPerformAction)=\"handleOnClickPerformAction($event)\"\n        ></customer-tile>\n      </div>\n    </cdk-virtual-scroll-viewport>\n  </div>\n\n  <div\n    class=\"customer-list-empty\"\n    *ngIf=\"filteredData.length === 0\"\n  >\n    {{\n      config?.dashboard?.emptyTaskListMessage ?? \"0 Tasks for the given Date.\"\n    }}\n  </div>\n</div>\n", styles: [".customer-list-wrapper{width:100%;height:100%;display:flex;flex-direction:column}.customer-list-filter{height:-moz-fit-content;height:fit-content;width:100%;display:flex;flex-direction:column;padding:1rem;grid-gap:.8rem;gap:.8rem;border-bottom:.5px solid #ddd}.customer-list-filter .task-list-search-icons{display:flex;justify-content:flex-end;align-items:center;flex-direction:row;grid-gap:.5rem;gap:.5rem}.customer-list-filter .task-list-search-action{margin-top:.5rem}.customer-list-filter .task-list-search-action .task-list-sort-action{display:flex;flex-direction:row;grid-gap:.5rem;gap:.5rem}.customer-list-filter .task-list-search-action .task-list-sort-action .task-list-sort-key{flex:1}.customer-list-empty{height:100%;width:100%;margin-top:.5rem;font-size:1rem;text-align:center}.customer-task-list{height:100%}.customer-task-list-scroll{height:100%;width:100%}.cdk-virtual-scroll-spacer{height:0!important}.example-item{height:50px}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{border-radius:10px}::-webkit-scrollbar-thumb{background:lightgray;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:gray}\n"], components: [{ type: i1.KwikUIButtonComponent, selector: "kwikui-button", inputs: ["appearance", "class", "disabled", "icon", "iconRight", "id", "label", "shape", "showLoader", "size", "styles", "type", "pseudoHover"], outputs: ["onClick"] }, { type: i1.KwikUIInputDateRangeComponent, selector: "kwikui-input-date-range", inputs: ["disabled", "focus", "formControl", "formControlName", "hintContent", "icon", "id", "invalid", "label", "max", "maxLength", "min", "minLength", "placeholder", "postfix", "prefix", "properties", "size", "validators"], outputs: ["getKeyValue"] }, { type: i1.KwikUIInputComponent, selector: "kwikui-input", inputs: ["case", "disabled", "focus", "formControl", "formControlName", "hintContent", "icon", "id", "invalid", "label", "placeholder", "postfix", "prefix", "properties", "size", "type", "validators"], outputs: ["getKeyValue"] }, { type: i1.KwikUIInputSelectComponent, selector: "kwikui-input-select", inputs: ["disabled", "focus", "formControl", "formControlName", "hintContent", "icon", "id", "invalid", "label", "options", "placeholder", "properties", "searchable", "size", "validators"], outputs: ["getKeyValue"] }, { type: i5.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { type: CustomerTileComponent, selector: "customer-tile", inputs: ["customer", "index", "config"], outputs: ["onClickPerformAction", "nextStep", "removeTask"] }], directives: [{ type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i5.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { type: i5.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }], pipes: { "filter": Ng2SearchPipe$1 } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CustomerListComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "customer-list",
+                    templateUrl: "./customer-list.component.html",
+                    styleUrls: ["./customer-list.component.scss"]
+                }]
+        }], ctorParameters: function () { return [{ type: GoogleMapsService }, { type: OpenStreetMapsService }, { type: AgentService }]; }, propDecorators: { customers: [{
+                type: Input
+            }], config: [{
+                type: Input
+            }], nextStep: [{
+                type: Output
+            }], removeTask: [{
+                type: Output
+            }], filterTaskList: [{
+                type: Output
+            }], onClickPerformAction: [{
+                type: Output
+            }] } });
+
+class KwikIDAgentDashboardComponentV1 {
+    constructor(googleMapsService, agentService, httpClient, hostElement, dialogService) {
+        this.googleMapsService = googleMapsService;
+        this.agentService = agentService;
+        this.httpClient = httpClient;
+        this.hostElement = hostElement;
+        this.dialogService = dialogService;
+        this.config = {};
+        this.taskList = [];
+        this.nextStep = new EventEmitter();
+        this.addTask = new EventEmitter();
+        this.removeTask = new EventEmitter();
+        this.filterTaskList = new EventEmitter();
+        this.onClickPerformAction = new EventEmitter();
+        this.loading = true;
+        this.console = console;
+        this.open = false;
+        this.allFormsData = {};
+        this.String = String;
+    }
+    windowResizeWatcher() {
+        if (this.hostElement.nativeElement.offsetWidth < 600) {
+            this.isMobileView = true;
+            this.agentService.isMobileView = true;
+        }
+        else {
+            this.isMobileView = false;
+            this.agentService.isMobileView = false;
+        }
+    }
+    ngOnInit() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+        return __awaiter(this, void 0, void 0, function* () {
+            this.agentService.config = this.config;
+            this.agentService.showMapview = (_c = (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.dashboard) === null || _b === void 0 ? void 0 : _b.isShowMaps) !== null && _c !== void 0 ? _c : false;
+            this.agentService.addTaskForm =
+                (_f = (_e = (_d = this.config) === null || _d === void 0 ? void 0 : _d.dashboard) === null || _e === void 0 ? void 0 : _e.addTaskForm) !== null && _f !== void 0 ? _f : this.agentService.addTaskForm;
+            if (((_h = (_g = this.config) === null || _g === void 0 ? void 0 : _g.dashboard) === null || _h === void 0 ? void 0 : _h.mapType) === "google-maps" &&
+                isNotEmptyValue((_k = (_j = this.config) === null || _j === void 0 ? void 0 : _j.dashboard) === null || _k === void 0 ? void 0 : _k.googleMapsAPIKey)) {
+                this.loadMaps((_m = (_l = this.config) === null || _l === void 0 ? void 0 : _l.dashboard) === null || _m === void 0 ? void 0 : _m.googleMapsAPIKey).subscribe((loaded) => {
+                    this.mapsLoaded = loaded;
+                    if (loaded) {
+                        console.log("Google Maps JavaScript API loaded successfully.");
+                        this.loading = false;
+                        // Initialize and render Google Map here
+                    }
+                    else {
+                        console.error("Google Maps JavaScript API failed to load.");
+                        this.loading = false;
+                    }
+                });
+            }
+            else {
+                this.mapsLoaded = true;
+                this.loading = false;
+            }
+            setTimeout(() => {
+                this.windowResizeWatcher();
+            }, 1000);
+        });
+    }
+    // Load Google Maps
+    loadMaps(apiKey) {
+        const url = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&v=3.exp&libraries=geometry,drawing,places`;
+        this.googleMapsService.apiKey = apiKey;
+        return this.httpClient.jsonp(url, "callback").pipe(map(() => true), catchError(() => {
+            console.error("Error loading Google Maps JavaScript API.");
+            return of(false);
+        }));
+    }
+    handleOnClickNext(e) {
+        this.nextStep.emit(e);
+    }
+    handleOnClickAddTask(task) {
+        this.addTask.emit(task);
+    }
+    handleOnClickRemoveTask(task) {
+        this.removeTask.emit(task);
+    }
+    handleOnFilterTaskList(filter) {
+        this.filterTaskList.emit(filter);
+    }
+    refresh() {
+        this.handleOnFilterTaskList({});
+    }
+    onClick() {
+        this.open = !this.open;
+    }
+    onObscured(obscured) {
+        if (obscured) {
+            this.open = false;
+        }
+    }
+    onActiveZone(active) {
+        this.open = active && this.open;
+    }
+    close() {
+        this.open = false;
+        if (this.dialogSubscription) {
+            this.dialogSubscription.unsubscribe();
+        }
+    }
+    showDialog(content) {
+        this.dialogSubscription = this.dialogService
+            .open(content, { closeable: false, dismissible: false })
+            .subscribe();
+    }
+    openInfoWindow(marker) {
+        this.infoWindow.open(marker);
+    }
+    handleOnClickSaveForm(e) {
+        this.handleOnClickAddTask(e.data);
+        this.close();
+    }
+    handleOnClickLogout() {
+        this.handleOnClickPerformAction({ action: { type: "logout" } });
+    }
+    handleOnClickPerformAction(event) {
+        this.onClickPerformAction.emit(event);
+    }
+}
+/** @nocollapse */ KwikIDAgentDashboardComponentV1.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikIDAgentDashboardComponentV1, deps: [{ token: GoogleMapsService }, { token: AgentService }, { token: i3$2.HttpClient }, { token: i0.ElementRef }, { token: TuiDialogService }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ KwikIDAgentDashboardComponentV1.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: KwikIDAgentDashboardComponentV1, selector: "kwikid-agent-dashboard-v1", inputs: { config: "config", taskList: "taskList" }, outputs: { nextStep: "nextStep", addTask: "addTask", removeTask: "removeTask", filterTaskList: "filterTaskList", onClickPerformAction: "onClickPerformAction" }, host: { listeners: { "window:resize": "windowResizeWatcher($event)" } }, viewQueries: [{ propertyName: "infoWindow", first: true, predicate: MapInfoWindow, descendants: true }, { propertyName: "mapElement", first: true, predicate: ["map"], descendants: true, static: true }], ngImport: i0, template: "<div\n  class=\"kwikid-agent-dashboard\"\n  *ngIf=\"!loading\"\n>\n  <div class=\"wrapper\">\n    <header>\n      <span (tuiActiveZoneChange)=\"onActiveZone($event)\">\n        <kwikui-button\n          [icon]=\"'tuiIconMenuLarge'\"\n          (onClick)=\"onClick()\"\n          appearance=\"mono\"\n          size=\"m\"\n          [tuiDropdown]=\"dropdownContent\"\n          [tuiDropdownManual]=\"open\"\n          (tuiObscured)=\"onObscured($event)\"\n        ></kwikui-button>\n        <ng-template #dropdownContent>\n          <div class=\"menu-dropdown\">\n            <div class=\"menu-dropdown-header\">\n              <!-- <img\n                *ngIf=\"\n                  agentService.config?.clientLogo &&\n                  agentService.config?.dashboard?.isShowClientLogo\n                \"\n                [src]=\"agentService.config.clientLogo\"\n                class=\"client-logo\"\n              />\n              <div\n                *ngIf=\"\n                  !agentService.config.clientLogo ||\n                  !agentService.config?.dashboard?.isShowClientLogo\n                \"\n                class=\"client-name\"\n              >\n                <kwikui-button\n                  [icon]=\"'tuiIconLink'\"\n                  appearance=\"mono\"\n                  size=\"m\"\n                ></kwikui-button>\n\n                {{ agentService.config.clientName }}\n              </div> -->\n              <div class=\"menu-dropdown-header-agent-name\">\n                {{ agentService.config.agentName }}\n              </div>\n              <div class=\"menu-dropdown-header-agent-id\">\n                Agent ID: {{ agentService.config.agentId }}\n              </div>\n            </div>\n            <hr />\n            <div\n              class=\"menu-dropdown-body\"\n              tuiGroup\n              [collapsed]=\"true\"\n              [rounded]=\"false\"\n              [orientation]=\"'vertical'\"\n              [size]=\"'m'\"\n            >\n              <kwikui-button\n                *ngIf=\"agentService.config?.dashboard?.isAllowAddTask\"\n                appearance=\"mono\"\n                class=\"menu-dropdown-buttons\"\n                label=\"Refresh\"\n                [icon]=\"'tuiIconRefreshCw'\"\n                size=\"m\"\n                type=\"button\"\n                (onClick)=\"refresh()\"\n              ></kwikui-button>\n              <kwikui-button\n                *ngIf=\"this.config.dashboard.isShowMaps\"\n                appearance=\"mono\"\n                class=\"menu-dropdown-buttons\"\n                label=\"{{\n                  agentService.showMapview ? 'Hide Maps' : 'Show Maps'\n                }}\"\n                type=\"button\"\n                icon=\"{{\n                  agentService.showMapview ? 'tuiIconEyeOff' : 'tuiIconEye'\n                }}\"\n                iconRight=\"\"\n                [shape]=\"null\"\n                size=\"m\"\n                styles=\"padding: 0rem !important\"\n                (onClick)=\"agentService.toggleMapview()\"\n              ></kwikui-button>\n            </div>\n            <hr />\n            <div class=\"menu-dropdown-footer\">\n              <kwikui-button\n                appearance=\"mono\"\n                class=\"menu-dropdown-buttons\"\n                label=\"Logout\"\n                icon=\"tuiIconLogOut\"\n                size=\"m\"\n                type=\"button\"\n                (onClick)=\"handleOnClickLogout()\"\n              ></kwikui-button>\n            </div>\n          </div>\n        </ng-template>\n      </span>\n      <div class=\"actions\">\n        <kwikui-button\n          *ngIf=\"agentService.config?.dashboard?.isAllowAddTask\"\n          class=\"menu-dropdown-buttons\"\n          type=\"button\"\n          appearance=\"primary\"\n          [label]=\"\n            agentService.config?.dashboard?.addTaskButtonLabel ?? 'Add User'\n          \"\n          icon=\"tuiIconPlus\"\n          shape=\"rounded\"\n          size=\"s\"\n          (onClick)=\"showDialog(template)\"\n        ></kwikui-button>\n      </div>\n    </header>\n\n    <div class=\"dashboard-body\">\n      <div\n        *ngIf=\"mapsLoaded\"\n        [class]=\"agentService.showMapview ? 'map' : 'map-hidden'\"\n      >\n        <google-map\n          *ngIf=\"agentService.config?.dashboard?.mapType == 'google-maps'\"\n          [options]=\"this.googleMapsService.map\"\n          height=\"100%\"\n          width=\"100%\"\n        >\n          <map-marker\n            #marker=\"mapMarker\"\n            *ngFor=\"\n              let markerPosition of this.googleMapsService.allMarkers;\n              let index = index\n            \"\n            [position]=\"markerPosition\"\n            [label]=\"{ text: String(index) }\"\n          ></map-marker>\n          <map-directions-renderer\n            *ngIf=\"\n              this.googleMapsService.directionsResults$\n                | async as directionsResults\n            \"\n            [directions]=\"directionsResults\"\n            [options]=\"this.googleMapsService.directionsRenderOption\"\n          ></map-directions-renderer>\n        </google-map>\n\n        <div\n          *ngIf=\"agentService.config?.dashboard?.mapType == 'open-street'\"\n          id=\"map\"\n          style=\"height: 100%\"\n        ></div>\n      </div>\n\n      <div\n        class=\"task-details\"\n        *ngIf=\"\n          !agentService.isMobileView &&\n          agentService.currentTaskDetails != undefined &&\n          !agentService.showMapview\n        \"\n      >\n        <customer-details\n          [customer]=\"agentService.currentTaskDetails\"\n          [config]=\"config\"\n          (nextStep)=\"handleOnClickNext($event)\"\n          (removeTask)=\"handleOnClickRemoveTask($event)\"\n          (onClickPerformAction)=\"handleOnClickPerformAction($event)\"\n        ></customer-details>\n      </div>\n\n      <div\n        class=\"no-task-details\"\n        *ngIf=\"\n          !agentService.isMobileView &&\n          agentService.currentTaskDetails == undefined &&\n          !agentService.showMapview\n        \"\n      >\n        <img\n          src=\"assets/No-Results.jpg\"\n          class=\"no-task-img\"\n          alt=\"No Task\"\n        />\n        <div class=\"\">Select a Task to view it's details.</div>\n      </div>\n\n      <div class=\"customer-list\">\n        <customer-list\n          [customers]=\"taskList\"\n          [config]=\"config\"\n          (nextStep)=\"handleOnClickNext($event)\"\n          (removeTask)=\"handleOnClickRemoveTask($event)\"\n          (filterTaskList)=\"handleOnFilterTaskList($event)\"\n          (onClickPerformAction)=\"handleOnClickPerformAction($event)\"\n        ></customer-list>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div\n  class=\"kwikid-agent-dashboard-loader\"\n  *ngIf=\"loading\"\n>\n  <span class=\"loader\"></span>\n</div>\n\n<ng-template\n  #template\n  let-observer\n>\n  <div class=\"add-task-header\">\n    <h2>{{ agentService?.addTaskForm?.title ?? \"Create User\" }}</h2>\n    <kwikui-button\n      icon=\"tuiIconX\"\n      id=\"\"\n      styles=\"\"\n      type=\"button\"\n      appearance=\"mono\"\n      [shape]=\"null\"\n      size=\"m\"\n      (onClick)=\"observer.complete()\"\n    ></kwikui-button>\n  </div>\n  <kwikid-form-view\n    [allFormsData]=\"allFormsData\"\n    [formConfig]=\"agentService.addTaskForm\"\n    [isMobileView]=\"true\"\n    (onClickSaveForm)=\"this.handleOnClickSaveForm($event)\"\n  ></kwikid-form-view>\n</ng-template>\n", styles: [".kwikid-agent-dashboard{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;align-content:center;width:100%;height:100%;position:relative}.kwikid-agent-dashboard .wrapper{width:100%;height:100%;display:flex;flex-direction:column;align-content:center;justify-content:space-between;align-items:stretch}.kwikid-agent-dashboard .wrapper header{display:flex;flex-direction:row;align-content:center;justify-content:space-between;align-items:center;grid-column-gap:1rem;column-gap:1rem;padding:1rem;max-height:80px;border:1px solid #cdcdcd}.kwikid-agent-dashboard .wrapper header .actions{display:flex;flex-direction:row;align-items:center}.kwikid-agent-dashboard .wrapper header .actions>*{margin-right:.5rem}.kwikid-agent-dashboard .wrapper .dashboard-body{display:flex;flex-direction:column;align-content:center;justify-content:center;align-items:stretch;flex:1;overflow:auto}.kwikid-agent-dashboard .wrapper .dashboard-body .map{width:100%;height:100%;position:relative;overflow:hidden}.kwikid-agent-dashboard .wrapper .dashboard-body .map-hidden{visibility:collapse}.kwikid-agent-dashboard .wrapper .dashboard-body .customer-list{width:100%;height:100%;overflow:hidden}@media screen and (min-width: 600px){.kwikid-agent-dashboard{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;align-content:center;width:100%;height:100%}.kwikid-agent-dashboard .wrapper{width:100%;height:100%;display:flex;flex-direction:column;align-content:center;justify-content:space-between;align-items:stretch}.kwikid-agent-dashboard .wrapper header{display:flex;flex-direction:row;align-content:center;justify-content:space-between;align-items:center;grid-column-gap:1rem;column-gap:1rem;padding:.75rem;max-height:80px;border:1px solid #cdcdcd}.kwikid-agent-dashboard .wrapper header .client-name{display:flex;flex-direction:row;align-content:center;justify-content:space-between;align-items:center;font-size:1rem;font-weight:600}.kwikid-agent-dashboard .wrapper .dashboard-body{display:flex;flex-direction:row-reverse;align-content:center;justify-content:flex-end;align-items:stretch;overflow:auto}.kwikid-agent-dashboard .wrapper .dashboard-body .map{width:100%;height:100%;position:relative;overflow:hidden;border:1px solid #cdcdcd;border-radius:.5rem}.kwikid-agent-dashboard .wrapper .dashboard-body .map-hidden{visibility:collapse}.kwikid-agent-dashboard .wrapper .dashboard-body .task-details{width:100%;height:100%;position:relative;overflow:hidden;border:1px solid #cdcdcd}.kwikid-agent-dashboard .wrapper .dashboard-body .no-task-details{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;grid-gap:.5rem;gap:.5rem;overflow:hidden;color:#555}.kwikid-agent-dashboard .wrapper .dashboard-body .no-task-details .no-task-img{height:100px;width:100px}.kwikid-agent-dashboard .wrapper .dashboard-body .customer-list{min-width:300px;max-width:320px;width:100%;height:100%;overflow:hidden;border:1px solid #cdcdcd}}.menu{position:absolute;transition:\"0.15s linear 0s\"}.kwikid-agent-dashboard-loader{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.75);display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center;z-index:100}.kwikid-agent-dashboard-loader .loader{width:48px;height:48px;border-radius:50%;display:inline-block;position:relative;border:3px solid;border-color:#fff #fff transparent;box-sizing:border-box;animation:rotation 1s linear infinite}.kwikid-agent-dashboard-loader .loader:after{content:\"\";box-sizing:border-box;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;border:3px solid;border-color:transparent var(--tui-primary) var(--tui-primary);width:24px;height:24px;border-radius:50%;animation:rotationBack .5s linear infinite;transform-origin:center center}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes rotationBack{0%{transform:rotate(0)}to{transform:rotate(-360deg)}}.kwikid-agent-dashboard-loader .t-loader{display:none!important}.add-task-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:.5rem 0 1rem 1rem}:host{width:100%;height:100%}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{border-radius:10px}::-webkit-scrollbar-thumb{background:lightgray;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:gray}.menu-dropdown{display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;grid-gap:.5rem;gap:.5rem;padding:1rem 1.5rem}.menu-dropdown .menu-dropdown-header{display:flex;flex-direction:column;align-content:flex-start;justify-content:space-between;align-items:flex-start;grid-gap:1rem;gap:1rem}.menu-dropdown .menu-dropdown-header .menu-dropdown-header-agent-name{font-size:1.2rem;margin:0 auto;font-weight:600}.menu-dropdown .menu-dropdown-header .menu-dropdown-header-agent-id{font-size:.8rem;margin:0 auto;font-weight:600}.menu-dropdown .menu-dropdown-buttons ::ng-deep .t-wrapper{padding:0!important}.client-logo{height:40px;width:-moz-fit-content;width:fit-content;margin:0 auto;padding-left:1rem}.client-name{display:flex;flex-direction:row;align-content:center;justify-content:space-between;align-items:center;font-size:1rem;margin:0 auto;font-weight:600}\n"], components: [{ type: i1.KwikUIButtonComponent, selector: "kwikui-button", inputs: ["appearance", "class", "disabled", "icon", "iconRight", "id", "label", "shape", "showLoader", "size", "styles", "type", "pseudoHover"], outputs: ["onClick"] }, { type: i2$2.GoogleMap, selector: "google-map", inputs: ["height", "width", "center", "zoom", "options", "mapTypeId"], outputs: ["authFailure", "boundsChanged", "centerChanged", "mapClick", "mapDblclick", "mapDrag", "mapDragend", "mapDragstart", "headingChanged", "idle", "maptypeidChanged", "mapMousemove", "mapMouseout", "mapMouseover", "projectionChanged", "mapRightclick", "tilesloaded", "tiltChanged", "zoomChanged"], exportAs: ["googleMap"] }, { type: CustomerDetailsComponent, selector: "customer-details", inputs: ["customer", "config"], outputs: ["nextStep", "removeTask", "onClickPerformAction"] }, { type: CustomerListComponent, selector: "customer-list", inputs: ["customers", "config"], outputs: ["nextStep", "removeTask", "filterTaskList", "onClickPerformAction"] }, { type: i3$1.KwikIDFormViewComponent, selector: "kwikid-form-view", inputs: ["allFormsData", "extraData", "apiCallResponse", "buttonClickResponse", "formConfig", "formData", "isMobileView", "popupFormCallback", "userConfig", "stepConfig"], outputs: ["getLogs", "getUnsavedDataState", "onActionShowPopupForm", "onClickApiCall", "onClickViewFile", "onClickFormFieldButton", "onClickGoBack", "onClickSaveForm", "onClickViewForms"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.TuiActiveZoneDirective, selector: "[tuiActiveZone]:not(ng-container), [tuiActiveZoneChange]:not(ng-container), [tuiActiveZoneParent]:not(ng-container)", inputs: ["tuiActiveZoneParent"], outputs: ["tuiActiveZoneChange"], exportAs: ["tuiActiveZone"] }, { type: i3.TuiDropdownDirective, selector: "[tuiDropdown]:not(ng-container)", inputs: ["tuiDropdown"], exportAs: ["tuiDropdown"] }, { type: i3.TuiDropdownDriverDirective, selector: "[tuiDropdown]" }, { type: i3.TuiDropdownPositionDirective, selector: "[tuiDropdown]" }, { type: i3.TuiDropdownManualDirective, selector: "[tuiDropdown][tuiDropdownManual]", inputs: ["tuiDropdownManual"] }, { type: i3.TuiGroupDirective, selector: "[tuiGroup]:not(ng-container)", inputs: ["orientation", "adaptive", "collapsed", "rounded", "size"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$2.MapMarker, selector: "map-marker", inputs: ["title", "position", "label", "clickable", "options", "icon", "visible"], outputs: ["animationChanged", "mapClick", "clickableChanged", "cursorChanged", "mapDblclick", "mapDrag", "mapDragend", "draggableChanged", "mapDragstart", "flatChanged", "iconChanged", "mapMousedown", "mapMouseout", "mapMouseover", "mapMouseup", "positionChanged", "mapRightclick", "shapeChanged", "titleChanged", "visibleChanged", "zindexChanged"], exportAs: ["mapMarker"] }, { type: i2$2.MapDirectionsRenderer, selector: "map-directions-renderer", inputs: ["directions", "options"], outputs: ["directionsChanged"], exportAs: ["mapDirectionsRenderer"] }], pipes: { "async": i7.AsyncPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikIDAgentDashboardComponentV1, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "kwikid-agent-dashboard-v1",
+                    templateUrl: "./kwikid-agent-dashboard.component.html",
+                    styleUrls: ["./kwikid-agent-dashboard.component.scss"]
+                }]
+        }], ctorParameters: function () { return [{ type: GoogleMapsService }, { type: AgentService }, { type: i3$2.HttpClient }, { type: i0.ElementRef }, { type: i3.TuiDialogService, decorators: [{
+                    type: Inject,
+                    args: [TuiDialogService]
+                }] }]; }, propDecorators: { windowResizeWatcher: [{
+                type: HostListener,
+                args: ["window:resize", ["$event"]]
+            }], config: [{
+                type: Input
+            }], taskList: [{
+                type: Input
+            }], nextStep: [{
+                type: Output
+            }], addTask: [{
+                type: Output
+            }], removeTask: [{
+                type: Output
+            }], filterTaskList: [{
+                type: Output
+            }], onClickPerformAction: [{
+                type: Output
+            }], infoWindow: [{
+                type: ViewChild,
+                args: [MapInfoWindow, { static: false }]
+            }], mapElement: [{
+                type: ViewChild,
+                args: ["map", { static: true }]
+            }] } });
+
+/* eslint-disable no-empty-function */
+class KwikIDAgentDashboardComponent {
+    // eslint-disable-next-line no-useless-constructor, @typescript-eslint/no-empty-function
+    constructor() {
+        this.agentInfo = {};
+        this.config = {};
+        this.userConfig = {};
+        this.taskList = [];
+        this.nextStep = new EventEmitter();
+        this.addTask = new EventEmitter();
+        this.removeTask = new EventEmitter();
+        this.filterTaskList = new EventEmitter();
+        this.onGetTaskList = new EventEmitter();
+        this.onClickPerformAction = new EventEmitter();
+    }
+    // eslint-disable-next-line class-methods-use-this, @typescript-eslint/no-empty-function
+    ngOnInit() { }
+    ngOnChanges(changes) {
+        const verifyChange = (key) => {
+            // eslint-disable-next-line no-prototype-builtins
+            return changes.hasOwnProperty(key) && !changes[key].firstChange;
+        };
+        if (verifyChange("taskList")) {
+            this.taskList = changes.taskList.currentValue;
+        }
+    }
+    handleOnClickNext(e) {
+        this.nextStep.emit(e);
+    }
+    handleOnClickAddTask(task) {
+        this.addTask.emit(task);
+    }
+    handleOnClickRemoveTask(task) {
+        this.removeTask.emit(task);
+    }
+    handleOnFilterTaskList(filter) {
+        this.onGetTaskList.emit(filter);
+    }
+    handleOnGetTaskList(event) {
+        this.onGetTaskList.emit(event);
+    }
+    handleOnClickPerformAction(event) {
+        this.onClickPerformAction.emit(event);
+    }
+}
+/** @nocollapse */ KwikIDAgentDashboardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikIDAgentDashboardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ KwikIDAgentDashboardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: KwikIDAgentDashboardComponent, selector: "kwikid-agent-dashboard", inputs: { agentInfo: "agentInfo", config: "config", userConfig: "userConfig", taskList: "taskList" }, outputs: { nextStep: "nextStep", addTask: "addTask", removeTask: "removeTask", filterTaskList: "filterTaskList", onGetTaskList: "onGetTaskList", onClickPerformAction: "onClickPerformAction" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"config?.version === 2\">\n  <kwikid-agent-dashboard-v2\n    [agentInfo]=\"agentInfo\"\n    [config]=\"config\"\n    [taskList]=\"taskList\"\n    [userConfig]=\"userConfig\"\n    (onGetTaskList)=\"handleOnGetTaskList($event)\"\n    (onClickPerformAction)=\"handleOnClickPerformAction($event)\"\n  ></kwikid-agent-dashboard-v2>\n</div>\n\n<div *ngIf=\"config?.version !== 2\">\n  <kwikid-agent-dashboard-v1\n    [config]=\"config\"\n    [taskList]=\"taskList\"\n    (nextStep)=\"handleOnClickNext($event)\"\n    (addTask)=\"handleOnClickAddTask($event)\"\n    (removeTask)=\"handleOnClickRemoveTask($event)\"\n    (filterTaskList)=\"handleOnFilterTaskList($event)\"\n    (onClickPerformAction)=\"handleOnClickPerformAction($event)\"\n  ></kwikid-agent-dashboard-v1>\n</div>\n", styles: ["div{height:100%}\n"], components: [{ type: KwikIDAgentDashboardComponentV2, selector: "kwikid-agent-dashboard-v2", inputs: ["config", "userConfig", "agentInfo", "taskList"], outputs: ["onGetTaskList", "onClickPerformAction"] }, { type: KwikIDAgentDashboardComponentV1, selector: "kwikid-agent-dashboard-v1", inputs: ["config", "taskList"], outputs: ["nextStep", "addTask", "removeTask", "filterTaskList", "onClickPerformAction"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikIDAgentDashboardComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "kwikid-agent-dashboard",
+                    templateUrl: "./kwikid-agent-dashboard.component.html",
+                    styleUrls: ["./kwikid-agent-dashboard.component.scss"]
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { agentInfo: [{
+                type: Input
+            }], config: [{
+                type: Input
+            }], userConfig: [{
+                type: Input
+            }], taskList: [{
+                type: Input
+            }], nextStep: [{
+                type: Output
+            }], addTask: [{
+                type: Output
+            }], removeTask: [{
+                type: Output
+            }], filterTaskList: [{
+                type: Output
+            }], onGetTaskList: [{
+                type: Output
+            }], onClickPerformAction: [{
+                type: Output
+            }] } });
+
+class KwikIDAgentDashboardModuleV1 {
+}
+/** @nocollapse */ KwikIDAgentDashboardModuleV1.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikIDAgentDashboardModuleV1, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ KwikIDAgentDashboardModuleV1.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikIDAgentDashboardModuleV1, declarations: [KwikIDAgentDashboardComponentV1,
+        CustomerListComponent,
+        CustomerTileComponent,
+        Ng2SearchPipe$1,
+        StatusPillComponent,
+        CustomerDetailsComponent,
+        ActionButtonComponent], imports: [CommonModule,
+        HttpClientModule,
+        FormsModule,
+        ReactiveFormsModule,
+        KwikUIButtonModule,
+        KwikUIInputModule,
+        KwikUIInputDateModule,
+        KwikUIInputDateRangeModule,
+        KwikUIInputSelectModule,
+        KwikUILabelValuePairModule,
+        KwikUITableModule,
+        KwikUITablePaginationModule,
+        KwikIDFormViewModule,
+        TuiRootModule,
+        TuiDialogModule,
+        TuiDropdownModule,
+        TuiSidebarModule,
+        TuiActiveZoneModule,
+        TuiGroupModule,
+        TuiSvgModule,
+        ScrollingModule,
+        GoogleMapsModule,
+        HttpClientModule,
+        HttpClientJsonpModule], exports: [KwikIDAgentDashboardComponentV1] });
+/** @nocollapse */ KwikIDAgentDashboardModuleV1.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikIDAgentDashboardModuleV1, imports: [[
+            CommonModule,
+            HttpClientModule,
+            FormsModule,
+            ReactiveFormsModule,
+            KwikUIButtonModule,
+            KwikUIInputModule,
+            KwikUIInputDateModule,
+            KwikUIInputDateRangeModule,
+            KwikUIInputSelectModule,
+            KwikUILabelValuePairModule,
+            KwikUITableModule,
+            KwikUITablePaginationModule,
+            KwikIDFormViewModule,
+            TuiRootModule,
+            TuiDialogModule,
+            TuiDropdownModule,
+            TuiSidebarModule,
+            TuiActiveZoneModule,
+            TuiGroupModule,
+            TuiSvgModule,
+            ScrollingModule,
+            GoogleMapsModule,
+            HttpClientModule,
+            HttpClientJsonpModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikIDAgentDashboardModuleV1, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        KwikIDAgentDashboardComponentV1,
+                        CustomerListComponent,
+                        CustomerTileComponent,
+                        Ng2SearchPipe$1,
+                        StatusPillComponent,
+                        CustomerDetailsComponent,
+                        ActionButtonComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        HttpClientModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        KwikUIButtonModule,
+                        KwikUIInputModule,
+                        KwikUIInputDateModule,
+                        KwikUIInputDateRangeModule,
+                        KwikUIInputSelectModule,
+                        KwikUILabelValuePairModule,
+                        KwikUITableModule,
+                        KwikUITablePaginationModule,
+                        KwikIDFormViewModule,
+                        TuiRootModule,
+                        TuiDialogModule,
+                        TuiDropdownModule,
+                        TuiSidebarModule,
+                        TuiActiveZoneModule,
+                        TuiGroupModule,
+                        TuiSvgModule,
+                        ScrollingModule,
+                        GoogleMapsModule,
+                        HttpClientModule,
+                        HttpClientJsonpModule
+                    ],
+                    exports: [KwikIDAgentDashboardComponentV1]
+                }]
+        }] });
+
+class AgentInfoComponent {
+    constructor() { }
+    ngOnInit() {
+        return __awaiter(this, void 0, void 0, function* () { });
+    }
+}
+/** @nocollapse */ AgentInfoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AgentInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ AgentInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: AgentInfoComponent, selector: "agent-info", ngImport: i0, template: "Agent Info\n", styles: [""] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AgentInfoComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "agent-info",
+                    templateUrl: "./agent-info.component.html",
+                    styleUrls: ["./agent-info.component.scss"]
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class AgentInfoModule {
+}
+/** @nocollapse */ AgentInfoModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AgentInfoModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ AgentInfoModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AgentInfoModule, declarations: [AgentInfoComponent], imports: [CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        KwikUIModule,
+        KwikIDFormsModule], exports: [AgentInfoComponent] });
+/** @nocollapse */ AgentInfoModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AgentInfoModule, imports: [[
+            CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            KwikUIModule,
+            KwikIDFormsModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AgentInfoModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [AgentInfoComponent],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        KwikUIModule,
+                        KwikIDFormsModule
+                    ],
+                    exports: [AgentInfoComponent]
+                }]
+        }] });
+
+class BottomSheetModule {
+}
+/** @nocollapse */ BottomSheetModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: BottomSheetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ BottomSheetModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: BottomSheetModule, declarations: [BottomSheetComponent], imports: [CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        TuiSvgModule,
+        KwikUIModule,
+        KwikIDFormsModule], exports: [BottomSheetComponent] });
+/** @nocollapse */ BottomSheetModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: BottomSheetModule, imports: [[
+            CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            TuiSvgModule,
+            KwikUIModule,
+            KwikIDFormsModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: BottomSheetModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [BottomSheetComponent],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        TuiSvgModule,
+                        KwikUIModule,
+                        KwikIDFormsModule
+                    ],
+                    exports: [BottomSheetComponent]
+                }]
+        }] });
+
+class MapViewModule {
+}
+/** @nocollapse */ MapViewModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MapViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ MapViewModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MapViewModule, declarations: [MapViewComponent], imports: [CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        KwikUIModule,
+        KwikIDFormsModule], exports: [MapViewComponent] });
+/** @nocollapse */ MapViewModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MapViewModule, imports: [[
+            CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            KwikUIModule,
+            KwikIDFormsModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MapViewModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [MapViewComponent],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        KwikUIModule,
+                        KwikIDFormsModule
+                    ],
+                    exports: [MapViewComponent]
+                }]
+        }] });
+
+class PrimaryActionsModule {
+}
+/** @nocollapse */ PrimaryActionsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PrimaryActionsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ PrimaryActionsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PrimaryActionsModule, declarations: [PrimaryActionsComponent], imports: [CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        TuiItemsWithMoreModule,
+        TuiDropdownModule,
+        TuiHostedDropdownModule,
+        TuiDataListModule,
+        TuiBadgeModule,
+        KwikUIModule,
+        KwikIDFormsModule], exports: [PrimaryActionsComponent] });
+/** @nocollapse */ PrimaryActionsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PrimaryActionsModule, imports: [[
+            CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            TuiItemsWithMoreModule,
+            TuiDropdownModule,
+            TuiHostedDropdownModule,
+            TuiDataListModule,
+            TuiBadgeModule,
+            KwikUIModule,
+            KwikIDFormsModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PrimaryActionsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [PrimaryActionsComponent],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        TuiItemsWithMoreModule,
+                        TuiDropdownModule,
+                        TuiHostedDropdownModule,
+                        TuiDataListModule,
+                        TuiBadgeModule,
+                        KwikUIModule,
+                        KwikIDFormsModule
+                    ],
+                    exports: [PrimaryActionsComponent]
+                }]
+        }] });
+
+class TaskItemStatusModule {
+}
+/** @nocollapse */ TaskItemStatusModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TaskItemStatusModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ TaskItemStatusModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TaskItemStatusModule, declarations: [TaskItemStatusComponent], imports: [CommonModule, FormsModule, ReactiveFormsModule], exports: [TaskItemStatusComponent] });
+/** @nocollapse */ TaskItemStatusModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TaskItemStatusModule, imports: [[CommonModule, FormsModule, ReactiveFormsModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TaskItemStatusModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [TaskItemStatusComponent],
+                    imports: [CommonModule, FormsModule, ReactiveFormsModule],
+                    exports: [TaskItemStatusComponent]
+                }]
+        }] });
+
+class TaskDetailModule {
+}
+/** @nocollapse */ TaskDetailModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TaskDetailModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ TaskDetailModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TaskDetailModule, declarations: [TaskDetailComponent], imports: [CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        KwikUIModule,
+        KwikIDFormsModule,
+        TaskItemStatusModule], exports: [TaskDetailComponent] });
+/** @nocollapse */ TaskDetailModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TaskDetailModule, imports: [[
+            CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            KwikUIModule,
+            KwikIDFormsModule,
+            TaskItemStatusModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TaskDetailModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [TaskDetailComponent],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        KwikUIModule,
+                        KwikIDFormsModule,
+                        TaskItemStatusModule
+                    ],
+                    exports: [TaskDetailComponent]
+                }]
+        }] });
 
-class CustomerDetailsComponent {
-    constructor(agentService, googleMapsService, openStreetMapsService, cdr) {
-        this.agentService = agentService;
-        this.googleMapsService = googleMapsService;
-        this.openStreetMapsService = openStreetMapsService;
-        this.cdr = cdr;
-        this.customer = {};
-        this.viewTaskDetails = [];
-        this.nextStep = new EventEmitter();
-        this.removeTask = new EventEmitter();
-    }
-    ngOnChanges(changes) {
-        this.cdr.detectChanges();
-    }
-    ngOnInit() {
-        var _a, _b, _c;
-        this.viewTaskDetails =
-            (_c = (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.dashboard) === null || _b === void 0 ? void 0 : _b.viewTaskDetails) !== null && _c !== void 0 ? _c : this.viewTaskDetails;
-    }
-    getTaskCreationTime(task) {
-        var _a;
-        if (checkObjectPathExists(this.agentService.config, 'dashboard.taskCreationTimePath')) {
-            const time = getObjectValueFromPath(task, this.agentService.config.dashboard.taskCreationTimePath);
-            return this.convertEpochToDate(time);
-        }
-        else {
-            return this.convertEpochToDate((_a = task === null || task === void 0 ? void 0 : task.task_creation_time) !== null && _a !== void 0 ? _a : task === null || task === void 0 ? void 0 : task.start_time);
-        }
-    }
-    convertEpochToDate(epochTime) {
-        if (typeof epochTime == 'string')
-            epochTime = Number(epochTime);
-        const date = new Date(epochTime * 1000); // Convert to milliseconds
-        const day = date.getDate().toString().padStart(2, '0');
-        const month = (date.getMonth() + 1).toString().padStart(2, '0'); // Months are zero-based
-        const year = date.getFullYear().toString();
-        return `${day}-${month}-${year}`;
-    }
-    getTaskDetails(taskData) {
-        return getObjectValueFromPath(this.customer, taskData);
-    }
-    goToMaps(location) {
-        window.open(`${location}`, '_blank');
-    }
-    handleOnClickNext(e) {
-        this.nextStep.emit(e);
-    }
-    close() {
-        var _a, _b;
-        this.agentService.currentTaskDetails = undefined;
-        if (((_b = (_a = this.agentService.config) === null || _a === void 0 ? void 0 : _a.dashboard) === null || _b === void 0 ? void 0 : _b.mapType) == 'google-maps') {
-            this.googleMapsService.plotDirectionsForSelectedTask(null);
-        }
-        else {
-            this.openStreetMapsService.plotDirectionsForSelectedTask(null);
-        }
-    }
-    handleOnClickRemoveTask(task) {
-        this.removeTask.emit(task);
-    }
+class TaskItemModule {
 }
-/** @nocollapse */ CustomerDetailsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CustomerDetailsComponent, deps: [{ token: AgentService }, { token: GoogleMapsService }, { token: OpenStreetMapsService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ CustomerDetailsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CustomerDetailsComponent, selector: "customer-details", inputs: { customer: "customer", config: "config" }, outputs: { nextStep: "nextStep", removeTask: "removeTask" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"customer-details-wrapper\">\n  <div class=\"customer-details-heading\">User Details</div>\n  <div class=\"customer-details-body\">\n    <div class=\"customer-details-user-id\">\n      <kwikui-label-value-pair\n        [data]=\"customer\"\n        [field]=\"config?.dashboard?.taskIdentifier ?? {value:'$.user_id', type: 'string'} \"\n      ></kwikui-label-value-pair>\n\n      <status-pill\n        *ngIf=\"config?.dashboard?.isShowTaskStatus\"\n        [status]=\"customer.session_status\"\n      ></status-pill>\n    </div>\n\n    <div class=\"customer-details-table\">\n      <div\n        class=\"customer-details-table-data\"\n        *ngFor=\"let taskData of viewTaskDetails\"\n      >\n        <kwikui-label-value-pair\n          [field]=\"taskData\"\n          [data]=\"customer\"\n        ></kwikui-label-value-pair>\n      </div>\n    </div>\n\n    <div class=\"customer-details-date\">\n      Created at: {{ getTaskCreationTime(customer) }}\n    </div>\n\n    <div class=\"customer-details-actions\">\n      <div class=\"customer-details-task-buttons\">\n        <kwikui-button\n          *ngIf=\"config.dashboard?.isAllowRemoveTask\"\n          [icon]=\"'tuiIconTrash2'\"\n          [shape]=\"'rounded'\"\n          appearance=\"icon\"\n          size=\"s\"\n          (onClick)=\"handleOnClickRemoveTask(customer)\"\n        ></kwikui-button>\n        <kwikui-button\n          *ngIf=\"config.dashboard?.isShowCopyLink\"\n          icon=\"tuiIconCopy\"\n          [shape]=\"'rounded'\"\n          appearance=\"icon\"\n          size=\"s\"\n          (onClick)=\"\n            handleOnClickNext({\n              customer: customer,\n              stepType: 'SHARE_JOURNEY_LINK'\n            })\n          \"\n        ></kwikui-button>\n      </div>\n      <div class=\"customer-details-journey-buttons\">\n        <kwikui-button\n          *ngIf=\"\n            config.dashboard?.isShowMaps &&\n            customer?.isValidLocation\n          \"\n          label=\"Show Directions\"\n          appearance=\"flat\"\n          size=\"s\"\n          styles=\"font-size:0.7rem;\"\n          (onClick)=\"\n            goToMaps(customer?.googleMapsUrl)\n          \"\n        ></kwikui-button>\n        <kwikui-button\n          *ngIf=\"\n            config.dashboard?.isAllowStartJourney &&\n            agentService.canStartJourney(customer.session_status)\n          \"\n          label=\"Start Journey\"\n          appearance=\"primary\"\n          size=\"s\"\n          styles=\"font-size:0.7rem;\"\n          (onClick)=\"\n            handleOnClickNext({ customer: customer, stepType: 'START_JOURNEY' })\n          \"\n        ></kwikui-button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".customer-details-wrapper{display:flex;flex-direction:column;align-items:stretch;overflow:auto;grid-gap:.5rem;gap:.5rem;padding:1.5rem;height:100%;width:100%}.customer-details-wrapper .customer-details-heading{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:1rem 0;font-size:1.5rem;font-weight:600}.customer-details-wrapper .customer-details-body{display:flex;flex-direction:column;grid-gap:1.25rem;gap:1.25rem}.customer-details-wrapper .customer-details-body .customer-details-user-id{display:flex;flex-direction:row;grid-gap:.6rem;gap:.6rem;align-items:center;font-size:1.25rem;font-weight:500;padding:.5rem 0}.customer-details-wrapper .customer-details-body .customer-details-table{display:flex;grid-gap:.5rem;gap:.5rem;flex-direction:column}.customer-details-wrapper .customer-details-body .customer-details-table .customer-details-table-data .customer-details-table-detail-name{font-weight:500}.customer-details-wrapper .customer-details-body .customer-details-table .customer-details-table-data .customer-details-table-detail-value{word-wrap:break-word}.customer-details-wrapper .customer-details-body .customer-details-date{padding-top:1rem}.customer-details-wrapper .customer-details-body .customer-details-actions{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center}.customer-details-wrapper .customer-details-body .customer-details-actions .customer-details-task-buttons{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;padding:1rem 0}.customer-details-wrapper .customer-details-body .customer-details-actions .customer-details-journey-buttons{padding-right:.2rem;display:flex;flex-direction:row;grid-gap:.2rem;gap:.2rem;align-items:center;justify-content:flex-end}.customer-details-wrapper .customer-details-body .customer-details-actions .customer-details-journey-buttons .customer-share-link{font-size:.7rem}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{border-radius:10px}::-webkit-scrollbar-thumb{background:lightgray;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:gray}\n"], components: [{ type: i4.KwikUILabelValuePairComponent, selector: "kwikui-label-value-pair", inputs: ["field", "data"] }, { type: StatusPillComponent, selector: "status-pill", inputs: ["status"] }, { type: i4.KwikUIButtonComponent, selector: "kwikui-button", inputs: ["appearance", "class", "disabled", "icon", "iconRight", "id", "label", "shape", "showLoader", "size", "styles", "type", "pseudoHover"], outputs: ["onClick"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CustomerDetailsComponent, decorators: [{
-            type: Component,
+/** @nocollapse */ TaskItemModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TaskItemModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ TaskItemModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TaskItemModule, declarations: [TaskItemComponent], imports: [CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        TuiAccordionModule,
+        TaskItemStatusModule,
+        KwikUIModule,
+        KwikIDFormsModule], exports: [TaskItemComponent] });
+/** @nocollapse */ TaskItemModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TaskItemModule, imports: [[
+            CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            TuiAccordionModule,
+            TaskItemStatusModule,
+            KwikUIModule,
+            KwikIDFormsModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TaskItemModule, decorators: [{
+            type: NgModule,
             args: [{
-                    selector: 'customer-details',
-                    templateUrl: './customer-details.component.html',
-                    styleUrls: ['./customer-details.component.scss'],
-                    changeDetection: ChangeDetectionStrategy.Default
+                    declarations: [TaskItemComponent],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        TuiAccordionModule,
+                        TaskItemStatusModule,
+                        KwikUIModule,
+                        KwikIDFormsModule
+                    ],
+                    exports: [TaskItemComponent]
                 }]
-        }], ctorParameters: function () { return [{ type: AgentService }, { type: GoogleMapsService }, { type: OpenStreetMapsService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { customer: [{
-                type: Input
-            }], config: [{
-                type: Input
-            }], nextStep: [{
-                type: Output
-            }], removeTask: [{
-                type: Output
-            }] } });
+        }] });
 
-class CustomerTileComponent {
-    constructor(googleMapsService, openStreetMapsService, agentService, hostElement) {
-        this.googleMapsService = googleMapsService;
-        this.openStreetMapsService = openStreetMapsService;
-        this.agentService = agentService;
-        this.hostElement = hostElement;
-        this.customer = {};
-        this.index = undefined;
-        this.isMobileView = false;
-        this.viewTaskDetails = [];
-        this.nextStep = new EventEmitter();
-        this.removeTask = new EventEmitter();
-    }
-    windowResizeWatcher() {
-        if (this.hostElement.nativeElement.offsetWidth < 600) {
-            this.isMobileView = true;
-        }
-        else {
-            this.isMobileView = false;
-        }
-    }
-    ngOnInit() {
-        var _a, _b, _c;
-        this.viewTaskDetails =
-            (_c = (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.dashboard) === null || _b === void 0 ? void 0 : _b.viewTaskDetails) !== null && _c !== void 0 ? _c : this.viewTaskDetails;
-    }
-    openDetails() {
-        var _a, _b, _c, _d;
-        const isDifferentTaskSelected = ((_a = this.agentService.currentTaskDetails) === null || _a === void 0 ? void 0 : _a.session_id) !==
-            ((_b = this.customer) === null || _b === void 0 ? void 0 : _b.session_id);
-        if (isDifferentTaskSelected) {
-            this.agentService.currentTaskDetails = this.customer;
-        }
-        else {
-            this.agentService.currentTaskDetails = undefined;
-        }
-        if (this.agentService.showMapview) {
-            if (((_d = (_c = this.agentService.config) === null || _c === void 0 ? void 0 : _c.dashboard) === null || _d === void 0 ? void 0 : _d.mapType) == 'google-maps') {
-                this.googleMapsService.plotDirectionsForSelectedTask(this.agentService.currentTaskDetails);
-            }
-            else {
-                this.openStreetMapsService.plotDirectionsForSelectedTask(this.agentService.currentTaskDetails);
-            }
-        }
-    }
-    goToMaps(location) {
-        window.open(`${location}`, '_blank');
-    }
-    handleOnClickNext(e) {
-        this.nextStep.emit(e);
-    }
-    handleOnClickRemoveTask(task) {
-        this.removeTask.emit(task);
-    }
+class TaskListSearchModule {
 }
-/** @nocollapse */ CustomerTileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CustomerTileComponent, deps: [{ token: GoogleMapsService }, { token: OpenStreetMapsService }, { token: AgentService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ CustomerTileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CustomerTileComponent, selector: "customer-tile", inputs: { customer: "customer", index: "index", config: "config" }, outputs: { nextStep: "nextStep", removeTask: "removeTask" }, host: { listeners: { "window:resize": "windowResizeWatcher($event)" } }, ngImport: i0, template: "<div\n  [ngClass]=\"\n    customer?.session_id == agentService.currentTaskDetails?.session_id\n      ? 'customer-tile-wrapper customer-tile-active'\n      : 'customer-tile-wrapper'\n  \"\n>\n  <div class=\"customer-tile-primary-container\">\n    <div class=\"customer-tile-primary-container-data\">\n      <div class=\"customer-tile-primary-container-userid\">\n        <kwikui-label-value-pair\n          [data]=\"customer\"\n          [field]=\"config?.dashboard?.taskIdentifier ?? {value:'$.user_id', type: 'string'} \"\n        ></kwikui-label-value-pair>\n      </div>\n      <status-pill\n        *ngIf=\"config?.dashboard?.isShowTaskStatus\"\n        [status]=\"customer.session_status\"\n      ></status-pill>\n    </div>\n    <kwikui-button\n      *ngIf=\"!agentService.isMobileView && !agentService.showMapview\"\n      [icon]=\"\n        agentService.currentTaskDetails?.session_id == customer?.session_id\n          ? 'tuiIconChevronLeftLarge'\n          : 'tuiIconChevronRightLarge'\n      \"\n      [shape]=\"'rounded'\"\n      appearance=\"icon\"\n      size=\"s\"\n      (onClick)=\"openDetails()\"\n    ></kwikui-button>\n    <kwikui-button\n      *ngIf=\"agentService.isMobileView || agentService.showMapview\"\n      [icon]=\"\n        agentService.currentTaskDetails?.session_id == customer?.session_id\n          ? 'tuiIconChevronUpLarge'\n          : 'tuiIconChevronDownLarge'\n      \"\n      [shape]=\"'rounded'\"\n      appearance=\"icon\"\n      size=\"s\"\n      (onClick)=\"openDetails()\"\n    ></kwikui-button>\n  </div>\n  <div\n    *ngIf=\"\n      customer?.session_id == agentService.currentTaskDetails?.session_id &&\n      (agentService.isMobileView || agentService.showMapview)\n    \"\n    [ngClass]=\"\n      customer?.session_id == agentService.currentTaskDetails?.session_id &&\n      (agentService.isMobileView || agentService.showMapview)\n        ? 'customer-tile-secondary-container'\n        : 'data-collasped'\n    \"\n  >\n    <div class=\"customer-tile-secondary-container-data\">\n      <div\n        *ngFor=\"let taskData of viewTaskDetails\"\n        class=\"customer-tile-secondary-container-custom-details\"\n      >\n        <kwikui-label-value-pair\n          [field]=\"taskData\"\n          [data]=\"customer\"\n        ></kwikui-label-value-pair>\n      </div>\n      <!-- <div\n        *ngIf=\"\n          agentService.config?.dashboard?.maps?.sho &&\n          agentService.config?.dashboard?.isShowDistanceAndTime &&\n          openStreetMapsService.getSelectedTaskDistanceAndTime()\n        \"\n        class=\"customer-tile-secondary-container-custom-details\"\n      >\n        Distance: {{ openStreetMapsService.getSelectedTaskDistanceAndTime()?.distance }} |\n        Time: {{ openStreetMapsService.getSelectedTaskDistanceAndTime()?.time }}\n      </div> -->\n    </div>\n    <div class=\"customer-tile-secondary-container-actions\">\n      <div class=\"customer-tile-secondary-container-task-buttons\">\n        <kwikui-button\n          *ngIf=\"config.dashboard?.isAllowRemoveTask\"\n          [icon]=\"'tuiIconTrash2'\"\n          [shape]=\"'rounded'\"\n          appearance=\"icon\"\n          size=\"s\"\n          (onClick)=\"handleOnClickRemoveTask(customer)\"\n        ></kwikui-button>\n        <kwikui-button\n          *ngIf=\"config.dashboard?.isShowCopyLink\"\n          icon=\"tuiIconCopy\"\n          [shape]=\"'rounded'\"\n          appearance=\"icon\"\n          size=\"s\"\n          (onClick)=\"\n            handleOnClickNext({\n              customer: customer,\n              stepType: 'SHARE_JOURNEY_LINK'\n            })\n          \"\n        ></kwikui-button>\n      </div>\n      <div class=\"customer-tile-secondary-container-journey-buttons\">\n        <kwikui-button\n          *ngIf=\"config.dashboard?.isShowMaps && customer?.isValidLocation\"\n          label=\"Show Directions\"\n          appearance=\"flat\"\n          size=\"s\"\n          styles=\"font-size:0.7rem;\"\n          (onClick)=\"goToMaps(customer.googleMapsUrl)\"\n        ></kwikui-button>\n        <kwikui-button\n          *ngIf=\"\n            config.dashboard?.isAllowStartJourney &&\n            agentService.canStartJourney(customer.session_status)\n          \"\n          label=\"Start Journey\"\n          appearance=\"primary\"\n          size=\"s\"\n          styles=\"font-size:0.7rem;\"\n          (onClick)=\"\n            handleOnClickNext({ customer: customer, stepType: 'START_JOURNEY' })\n          \"\n        ></kwikui-button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".customer-tile-wrapper{display:flex;flex-direction:column;align-content:center;justify-content:center;align-items:stretch;flex:1;overflow:auto;grid-gap:.5rem;gap:.5rem;padding:1rem;border-bottom:.5px solid #ddd}.customer-tile-wrapper .customer-tile-primary-container{display:flex;grid-gap:.5rem;gap:.5rem;flex-direction:row;align-content:center;justify-content:space-between;align-items:center;width:100%;height:100%}.customer-tile-wrapper .customer-tile-primary-container .customer-tile-primary-container-data{padding-left:.2rem;grid-gap:.6rem;gap:.6rem;display:flex;flex-direction:column;flex-wrap:wrap;align-content:stretch;justify-content:flex-start;align-items:flex-start}.customer-tile-wrapper .customer-tile-primary-container .customer-tile-primary-container-data .customer-tile-primary-container-userid{font-weight:500;font-size:1.1rem;line-height:1rem}.customer-tile-wrapper .customer-tile-secondary-container{width:100%;height:100%;display:flex;flex-direction:column;overflow:auto;grid-gap:.5rem;gap:.5rem}.customer-tile-wrapper .customer-tile-secondary-container .customer-tile-secondary-container-data{padding:.4rem .2rem;display:flex;flex-direction:column;font-size:.7rem;grid-gap:.3rem;gap:.3rem}.customer-tile-wrapper .customer-tile-secondary-container .customer-tile-secondary-container-data .customer-tile-secondary-container-custom-details{width:100%;height:100%;line-height:.9rem;word-wrap:break-word}.customer-tile-wrapper .customer-tile-secondary-container .customer-tile-secondary-container-actions{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center}.customer-tile-wrapper .customer-tile-secondary-container .customer-tile-secondary-container-actions .customer-tile-secondary-container-task-buttons{display:flex;flex-direction:row;align-items:center;justify-content:flex-start}.customer-tile-wrapper .customer-tile-secondary-container .customer-tile-secondary-container-actions .customer-tile-secondary-container-journey-buttons{padding-right:.2rem;display:flex;flex-direction:row;grid-gap:.2rem;gap:.2rem;align-items:center;justify-content:flex-end}.customer-tile-wrapper .customer-tile-secondary-container .customer-tile-secondary-container-actions .customer-tile-secondary-container-journey-buttons .customer-share-link{font-size:.7rem}.customer-tile-wrapper .data-collasped{display:none}.customer-tile-active{background-color:#dcedfd}\n"], components: [{ type: i4.KwikUILabelValuePairComponent, selector: "kwikui-label-value-pair", inputs: ["field", "data"] }, { type: StatusPillComponent, selector: "status-pill", inputs: ["status"] }, { type: i4.KwikUIButtonComponent, selector: "kwikui-button", inputs: ["appearance", "class", "disabled", "icon", "iconRight", "id", "label", "shape", "showLoader", "size", "styles", "type", "pseudoHover"], outputs: ["onClick"] }], directives: [{ type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CustomerTileComponent, decorators: [{
-            type: Component,
+/** @nocollapse */ TaskListSearchModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TaskListSearchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ TaskListSearchModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TaskListSearchModule, declarations: [TaskListSearchComponent], imports: [CommonModule,
+        ScrollingModule,
+        FormsModule,
+        ReactiveFormsModule,
+        KwikUIModule,
+        KwikIDFormsModule], exports: [TaskListSearchComponent] });
+/** @nocollapse */ TaskListSearchModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TaskListSearchModule, imports: [[
+            CommonModule,
+            ScrollingModule,
+            FormsModule,
+            ReactiveFormsModule,
+            KwikUIModule,
+            KwikIDFormsModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TaskListSearchModule, decorators: [{
+            type: NgModule,
             args: [{
-                    selector: 'customer-tile',
-                    templateUrl: './customer-tile.component.html',
-                    styleUrls: ['./customer-tile.component.scss']
+                    declarations: [TaskListSearchComponent],
+                    imports: [
+                        CommonModule,
+                        ScrollingModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        KwikUIModule,
+                        KwikIDFormsModule
+                    ],
+                    exports: [TaskListSearchComponent]
                 }]
-        }], ctorParameters: function () { return [{ type: GoogleMapsService }, { type: OpenStreetMapsService }, { type: AgentService }, { type: i0.ElementRef }]; }, propDecorators: { windowResizeWatcher: [{
-                type: HostListener,
-                args: ['window:resize', ['$event']]
-            }], customer: [{
-                type: Input
-            }], index: [{
-                type: Input
-            }], config: [{
-                type: Input
-            }], nextStep: [{
-                type: Output
-            }], removeTask: [{
-                type: Output
-            }] } });
+        }] });
 
 class Ng2SearchPipe {
     /**
@@ -899,17 +3050,17 @@ class Ng2SearchPipe {
     static filter(items, term, excludes) {
         const toCompare = term.toLowerCase();
         function checkInside(item, term) {
-            if (typeof item === 'string' &&
+            if (typeof item === "string" &&
                 item.toString().toLowerCase().includes(toCompare)) {
                 return true;
             }
-            for (let property in item) {
+            for (const property in item) {
                 if (item[property] === null ||
                     item[property] == undefined ||
                     excludes.includes(property)) {
                     continue;
                 }
-                if (typeof item[property] === 'object') {
+                if (typeof item[property] === "object") {
                     if (checkInside(item[property], term)) {
                         return true;
                     }
@@ -920,7 +3071,7 @@ class Ng2SearchPipe {
             }
             return false;
         }
-        return items.filter(function (item) {
+        return items.filter((item) => {
             return checkInside(item, term);
         });
     }
@@ -930,317 +3081,322 @@ class Ng2SearchPipe {
 /** @nocollapse */ Ng2SearchPipe.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: Ng2SearchPipe });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: Ng2SearchPipe, decorators: [{
             type: Pipe,
-            args: [{
-                    name: 'filter',
-                    pure: false
-                }]
-        }, {
-            type: Injectable
-        }] });
-
-class CustomerListComponent {
-    constructor(googleMapsService, openStreetMapsService, agentService) {
-        this.googleMapsService = googleMapsService;
-        this.openStreetMapsService = openStreetMapsService;
-        this.agentService = agentService;
-        this.nextStep = new EventEmitter();
-        this.removeTask = new EventEmitter();
-        this.filterTaskList = new EventEmitter();
-        this.filteredData = [];
-        this.formGroup = new FormGroup({});
-        this.max = new TuiDay(new Date().getFullYear(), new Date().getMonth(), new Date().getDate());
-    }
-    ngOnInit() {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.setDateRange();
-        });
-    }
-    setDateRange() {
-        var _a, _b, _c, _d, _e;
-        const searchDateStart = (_b = (_a = this.config.dashboard) === null || _a === void 0 ? void 0 : _a.searchDateStart) !== null && _b !== void 0 ? _b : {
-            day: 0,
-            month: 0,
-            year: 0
-        };
-        const currentDate = new Date();
-        const startDate = new Date((_c = currentDate.getFullYear() - (searchDateStart === null || searchDateStart === void 0 ? void 0 : searchDateStart.year)) !== null && _c !== void 0 ? _c : 0, (_d = currentDate.getMonth() - (searchDateStart === null || searchDateStart === void 0 ? void 0 : searchDateStart.month)) !== null && _d !== void 0 ? _d : 0, (_e = currentDate.getDate() - (searchDateStart === null || searchDateStart === void 0 ? void 0 : searchDateStart.day)) !== null && _e !== void 0 ? _e : 0);
-        this.fromDate = this.getDate(startDate);
-        this.toDate = this.getDate(null);
-        this.dateRangeFormControl = new FormControl({
-            value: new TuiDayRange(new TuiDay(startDate.getFullYear(), startDate.getMonth(), startDate.getDate()), this.max),
-            disabled: false
-        });
-        this.formGroup.addControl('dateRange', this.dateRangeFormControl);
-        this.searchFormControl = new FormControl('');
-        this.formGroup.addControl('search', this.searchFormControl);
-    }
-    setUpMaps() {
-        var _a;
-        return __awaiter(this, void 0, void 0, function* () {
-            if (this.config.dashboard.isShowMaps) {
-                if (((_a = this.config.dashboard) === null || _a === void 0 ? void 0 : _a.mapType) == 'open-street') {
-                    yield this.openStreetMapsService.initializeMap();
-                }
-                else {
-                    yield this.googleMapsService.initializeMap();
-                }
-            }
-        });
-    }
-    setCustomersList() {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (this.config.dashboard.isShowMaps) {
-                this.filteredData = yield this.plotMarkers(this.customers);
-            }
-            else {
-                this.filteredData = this.customers;
-            }
-        });
-    }
-    ngAfterViewInit() {
-        var _a, _b;
-        this.maxLength = (_b = (_a = this.config.dashboard) === null || _a === void 0 ? void 0 : _a.searchDateRange) !== null && _b !== void 0 ? _b : this.maxLength;
-        setTimeout(() => __awaiter(this, void 0, void 0, function* () {
-            yield this.setUpMaps();
-            yield this.setCustomersList();
-        }), 1000);
-    }
-    ngOnChanges() {
-        return __awaiter(this, void 0, void 0, function* () {
-            yield this.setCustomersList();
-        });
-    }
-    handleOnClickNext(e) {
-        this.nextStep.emit(e);
-    }
-    getDate(d) {
-        const date = d ? new Date(d) : new Date();
-        const year = date.getFullYear();
-        let month = date.getMonth() + 1;
-        let day = date.getDate();
-        if (month < 10)
-            month = '0' + month;
-        if (day < 10)
-            day = '0' + day;
-        const today = `${year}-${month}-${day}`;
-        return today;
-    }
-    plotMarkers(customers) {
-        var _a, _b;
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!((_a = this.config.dashboard) === null || _a === void 0 ? void 0 : _a.isPlotCompletedTaskMarkers)) {
-                customers = customers.filter((customer) => {
-                    return this.agentService.canPlotMarkers(customer.session_status);
-                });
-            }
-            if (((_b = this.config.dashboard) === null || _b === void 0 ? void 0 : _b.mapType) == 'open-street') {
-                customers = yield this.openStreetMapsService.plotDirectionsForAllTasks(customers);
-            }
-            else {
-                customers = yield this.googleMapsService.plotDirectionsForAllTasks(customers);
-            }
-            return customers;
-        });
-    }
-    getTuiDate(event) {
-        let year = event.year;
-        let month = event.month + 1;
-        let date = event.day;
-        month = month < 10 ? '0' + month : month;
-        date = date < 10 ? '0' + date : date;
-        return `${year}-${month}-${date}`;
-    }
-    onDateRangeChange(event) {
-        this.fromDate = this.getTuiDate(event.value.from);
-        this.toDate = this.getTuiDate(event.value.to);
-        this.handleOnFilterTaskList({
-            from_date: this.fromDate,
-            to_date: this.toDate
-        });
-    }
-    onSearchFilter(event) {
-        this.searchText = event.value;
-    }
-    handleOnClickRemoveTask(task) {
-        this.removeTask.emit(task);
-    }
-    handleOnFilterTaskList(filter) {
-        this.filterTaskList.emit(filter);
-    }
+            args: [{
+                    name: "filter",
+                    pure: false
+                }]
+        }, {
+            type: Injectable
+        }] });
+
+class TaskListModule {
 }
-/** @nocollapse */ CustomerListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CustomerListComponent, deps: [{ token: GoogleMapsService }, { token: OpenStreetMapsService }, { token: AgentService }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ CustomerListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CustomerListComponent, selector: "customer-list", inputs: { customers: "customers", config: "config" }, outputs: { nextStep: "nextStep", removeTask: "removeTask", filterTaskList: "filterTaskList" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"customer-list-wrapper\">\n  <div class=\"customer-list-filter\" [formGroup]=\"formGroup\">\n    <kwikui-input-date-range\n      *ngIf=\"config?.dashboard?.isAllowDateFilter\"\n      [label]=\"'Date Range'\"\n      [id]=\"'dateRange'\"\n      [size]=\"'m'\"\n      [max]=\"max\"\n      [maxLength]=\"maxLength\"\n      [formControlName]=\"'dateRange'\"\n      [formControl]=\"dateRangeFormControl\"\n      (getKeyValue)=\"onDateRangeChange($event)\"\n    ></kwikui-input-date-range>\n    <kwikui-input\n      *ngIf=\"config?.dashboard?.isAllowSearchFilter\"\n      [label]=\"'Search'\"\n      [id]=\"'search'\"\n      icon=\"tuiIconSearch\"\n      size=\"m\"\n      placeholder=\"Search Any Task\"\n      [formControlName]=\"'search'\"\n      [formControl]=\"searchFormControl\"\n      (getKeyValue)=\"onSearchFilter($event)\"\n    ></kwikui-input>\n  </div>\n\n  <div class=\"customer-task-list\">\n    <cdk-virtual-scroll-viewport itemSize=\"1\" class=\"customer-task-list-scroll\">\n      <div\n        *cdkVirtualFor=\"\n          let customer of filteredData | filter: searchText;\n          index as index\n        \"\n      >\n        <customer-tile\n          class=\"example-item\"\n          [customer]=\"customer\"\n          [config]=\"config\"\n          [index]=\"index\"\n          (nextStep)=\"handleOnClickNext($event)\"\n          (removeTask)=\"handleOnClickRemoveTask($event)\"\n        ></customer-tile>\n      </div>\n    </cdk-virtual-scroll-viewport>\n  </div>\n\n  <div class=\"customer-list-empty\" *ngIf=\"filteredData.length === 0\">\n    {{config?.dashboard?.emptyTaskListMessage ?? '0 Tasks for the given Date.'}}\n  </div>\n</div>\n", styles: [".customer-list-wrapper{width:100%;height:100%;display:flex;flex-direction:column}.customer-list-filter{height:-moz-fit-content;height:fit-content;width:100%;display:flex;flex-direction:column;padding:1rem;grid-gap:.8rem;gap:.8rem;border-bottom:.5px solid #ddd}.customer-list-empty{height:100%;width:100%;margin-top:.5rem;font-size:1rem;text-align:center}.customer-task-list{height:100%}.customer-task-list-scroll{height:100%;width:100%}.cdk-virtual-scroll-spacer{height:0!important}.example-item{height:50px}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{border-radius:10px}::-webkit-scrollbar-thumb{background:lightgray;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:gray}\n"], components: [{ type: i4.KwikUIInputDateRangeComponent, selector: "kwikui-input-date-range", inputs: ["disabled", "focus", "formControl", "formControlName", "hintContent", "icon", "id", "invalid", "label", "max", "maxLength", "min", "minLength", "placeholder", "postfix", "prefix", "properties", "size", "validators"], outputs: ["getKeyValue"] }, { type: i4.KwikUIInputComponent, selector: "kwikui-input", inputs: ["case", "disabled", "focus", "formControl", "formControlName", "hintContent", "icon", "id", "invalid", "label", "placeholder", "postfix", "prefix", "properties", "size", "type", "validators"], outputs: ["getKeyValue"] }, { type: i5.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { type: CustomerTileComponent, selector: "customer-tile", inputs: ["customer", "index", "config"], outputs: ["nextStep", "removeTask"] }], directives: [{ type: i7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i7.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i7.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i5.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { type: i5.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }], pipes: { "filter": Ng2SearchPipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CustomerListComponent, decorators: [{
-            type: Component,
+/** @nocollapse */ TaskListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TaskListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ TaskListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TaskListModule, declarations: [TaskListComponent, Ng2SearchPipe], imports: [CommonModule,
+        ScrollingModule,
+        FormsModule,
+        ReactiveFormsModule,
+        KwikUIModule,
+        KwikUILoaderModule,
+        KwikIDFormsModule,
+        TaskItemModule,
+        TaskListSearchModule,
+        TuiPaginationModule], exports: [TaskListComponent] });
+/** @nocollapse */ TaskListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TaskListModule, imports: [[
+            CommonModule,
+            ScrollingModule,
+            FormsModule,
+            ReactiveFormsModule,
+            KwikUIModule,
+            KwikUILoaderModule,
+            KwikIDFormsModule,
+            TaskItemModule,
+            TaskListSearchModule,
+            TuiPaginationModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TaskListModule, decorators: [{
+            type: NgModule,
             args: [{
-                    selector: 'customer-list',
-                    templateUrl: './customer-list.component.html',
-                    styleUrls: ['./customer-list.component.css']
+                    declarations: [TaskListComponent, Ng2SearchPipe],
+                    imports: [
+                        CommonModule,
+                        ScrollingModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        KwikUIModule,
+                        KwikUILoaderModule,
+                        KwikIDFormsModule,
+                        TaskItemModule,
+                        TaskListSearchModule,
+                        TuiPaginationModule
+                    ],
+                    exports: [TaskListComponent]
                 }]
-        }], ctorParameters: function () { return [{ type: GoogleMapsService }, { type: OpenStreetMapsService }, { type: AgentService }]; }, propDecorators: { customers: [{
-                type: Input
-            }], config: [{
-                type: Input
-            }], nextStep: [{
-                type: Output
-            }], removeTask: [{
-                type: Output
-            }], filterTaskList: [{
-                type: Output
-            }] } });
+        }] });
 
-class KwikIDAgentDashboardComponent {
-    constructor(googleMapsService, agentService, httpClient, hostElement, dialogService) {
-        this.googleMapsService = googleMapsService;
-        this.agentService = agentService;
-        this.httpClient = httpClient;
-        this.hostElement = hostElement;
-        this.dialogService = dialogService;
+class TaskPreviewComponent {
+    constructor() {
         this.config = {};
-        this.taskList = [];
-        this.nextStep = new EventEmitter();
-        this.addTask = new EventEmitter();
-        this.removeTask = new EventEmitter();
-        this.filterTaskList = new EventEmitter();
-        this.loading = true;
-        this.console = console;
-        this.open = false;
-        this.allFormsData = {};
-        this.String = String;
-    }
-    windowResizeWatcher() {
-        if (this.hostElement.nativeElement.offsetWidth < 600) {
-            this.isMobileView = true;
-            this.agentService.isMobileView = true;
-        }
-        else {
-            this.isMobileView = false;
-            this.agentService.isMobileView = false;
-        }
+        this.data = {};
+        this.onClickTaskItemAction = new EventEmitter();
     }
     ngOnInit() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-        return __awaiter(this, void 0, void 0, function* () {
-            this.agentService.config = this.config;
-            this.agentService.showMapview = (_c = (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.dashboard) === null || _b === void 0 ? void 0 : _b.isShowMaps) !== null && _c !== void 0 ? _c : false;
-            this.agentService.addTaskForm =
-                (_f = (_e = (_d = this.config) === null || _d === void 0 ? void 0 : _d.dashboard) === null || _e === void 0 ? void 0 : _e.addTaskForm) !== null && _f !== void 0 ? _f : this.agentService.addTaskForm;
-            if (((_h = (_g = this.config) === null || _g === void 0 ? void 0 : _g.dashboard) === null || _h === void 0 ? void 0 : _h.mapType) == 'google-maps' &&
-                isNotEmptyValue((_k = (_j = this.config) === null || _j === void 0 ? void 0 : _j.dashboard) === null || _k === void 0 ? void 0 : _k.googleMapsAPIKey)) {
-                this.loadMaps((_m = (_l = this.config) === null || _l === void 0 ? void 0 : _l.dashboard) === null || _m === void 0 ? void 0 : _m.googleMapsAPIKey).subscribe((loaded) => {
-                    this.mapsLoaded = loaded;
-                    if (loaded) {
-                        console.log('Google Maps JavaScript API loaded successfully.');
-                        this.loading = false;
-                        // Initialize and render Google Map here
-                    }
-                    else {
-                        console.error('Google Maps JavaScript API failed to load.');
-                        this.loading = false;
-                    }
-                });
-            }
-            else {
-                this.mapsLoaded = true;
-                this.loading = false;
-            }
-            setTimeout(() => {
-                this.windowResizeWatcher();
-            }, 1000);
-        });
-    }
-    // Load Google Maps
-    loadMaps(apiKey) {
-        const url = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&v=3.exp&libraries=geometry,drawing,places`;
-        this.googleMapsService.apiKey = apiKey;
-        return this.httpClient.jsonp(url, 'callback').pipe(map(() => true), catchError(() => {
-            console.error('Error loading Google Maps JavaScript API.');
-            return of(false);
-        }));
-    }
-    handleOnClickNext(e) {
-        this.nextStep.emit(e);
-    }
-    handleOnClickAddTask(task) {
-        this.addTask.emit(task);
-    }
-    handleOnClickRemoveTask(task) {
-        this.removeTask.emit(task);
-    }
-    handleOnFilterTaskList(filter) {
-        this.filterTaskList.emit(filter);
-    }
-    refresh() {
-        window.location.reload();
-    }
-    onClick() {
-        this.open = !this.open;
-    }
-    onObscured(obscured) {
-        if (obscured) {
-            this.open = false;
-        }
-    }
-    onActiveZone(active) {
-        this.open = active && this.open;
-    }
-    showDialog(content) {
-        this.dialogService
-            .open(content, { closeable: false, dismissible: false })
-            .subscribe();
-    }
-    openInfoWindow(marker) {
-        this.infoWindow.open(marker);
-    }
-    handleOnClickSaveForm(e) {
-        this.handleOnClickAddTask(e.data);
+        return __awaiter(this, void 0, void 0, function* () { });
     }
-    handleOnClickViewForms(e) { }
 }
-/** @nocollapse */ KwikIDAgentDashboardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikIDAgentDashboardComponent, deps: [{ token: GoogleMapsService }, { token: AgentService }, { token: i3.HttpClient }, { token: i0.ElementRef }, { token: TuiDialogService }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ KwikIDAgentDashboardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: KwikIDAgentDashboardComponent, selector: "kwikid-agent-dashboard", inputs: { config: "config", taskList: "taskList" }, outputs: { nextStep: "nextStep", addTask: "addTask", removeTask: "removeTask", filterTaskList: "filterTaskList" }, host: { listeners: { "window:resize": "windowResizeWatcher($event)" } }, viewQueries: [{ propertyName: "infoWindow", first: true, predicate: MapInfoWindow, descendants: true }, { propertyName: "mapElement", first: true, predicate: ["map"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"kwikid-agent-dashboard\" *ngIf=\"!loading\">\n  <div class=\"wrapper\">\n    <header>\n      <img\n        *ngIf=\"\n          agentService.config?.clientLogo &&\n          agentService.config?.dashboard?.isShowClientLogo\n        \"\n        [src]=\"agentService.config.clientLogo\"\n        class=\"client-logo\"\n      />\n      <div\n        *ngIf=\"\n          !agentService.config.clientLogo ||\n          !agentService.config?.dashboard?.isShowClientLogo\n        \"\n        class=\"client-name\"\n      >\n        <kwikui-button\n          [icon]=\"'tuiIconLink'\"\n          appearance=\"mono\"\n          size=\"m\"\n        ></kwikui-button>\n\n        {{ agentService.config.clientName }}\n      </div>\n      <div class=\"actions\">\n        <kwikui-button\n          *ngIf=\"agentService.config?.dashboard?.isAllowAddTask\"\n          class=\"menu-dropdown-buttons\"\n          type=\"button\"\n          appearance=\"primary\"\n          [label]=\"agentService.config?.dashboard?.addTaskButtonLabel ?? 'Add User'\"\n          [icon]=\"'tuiIconPlus'\"\n          iconRight=\"\"\n          [shape]=\"null\"\n          size=\"s\"\n          (onClick)=\"showDialog(template)\"\n        ></kwikui-button>\n\n        <kwikui-button\n          *ngIf=\"!agentService.config?.dashboard?.isAllowAddTask\"\n          appearance=\"mono\"\n          class=\"menu-dropdown-buttons\"\n          [icon]=\"'tuiIconRefreshCwLarge'\"\n          size=\"m\"\n          type=\"button\"\n          (onClick)=\"refresh()\"\n        ></kwikui-button>\n        <span (tuiActiveZoneChange)=\"onActiveZone($event)\">\n          <kwikui-button\n            [icon]=\"'tuiIconSettingsLarge'\"\n            (onClick)=\"onClick()\"\n            appearance=\"mono\"\n            size=\"s\"\n            [tuiDropdown]=\"dropdownContent\"\n            [tuiDropdownManual]=\"open\"\n            (tuiObscured)=\"onObscured($event)\"\n          ></kwikui-button>\n          <ng-template #dropdownContent>\n            <div class=\"menu-dropdown\">\n              <div class=\"menu-dropdown-header\">\n                <div class=\"menu-dropdown-header-agent-name\">\n                  {{ agentService.config.agentName }}\n                </div>\n                <div class=\"menu-dropdown-header-agent-id\">\n                  Agent ID: {{ agentService.config.agentId }}\n                </div>\n              </div>\n              <hr />\n              <div\n                class=\"menu-dropdown-body\"\n                tuiGroup\n                [collapsed]=\"true\"\n                [rounded]=\"false\"\n                [orientation]=\"'vertical'\"\n                [size]=\"'m'\"\n              >\n                <kwikui-button\n                  *ngIf=\"agentService.config?.dashboard?.isAllowAddTask\"\n                  appearance=\"mono\"\n                  class=\"menu-dropdown-buttons\"\n                  label=\"Refresh\"\n                  [icon]=\"'tuiIconRefreshCw'\"\n                  size=\"m\"\n                  type=\"button\"\n                  (onClick)=\"refresh()\"\n                ></kwikui-button>\n                <kwikui-button\n                  *ngIf=\"this.config.dashboard.isShowMaps\"\n                  id=\"\"\n                  label=\"{{\n                    agentService.showMapview ? 'Hide Maps' : 'Show Maps'\n                  }}\"\n                  styles=\"\"\n                  class=\"menu-dropdown-buttons\"\n                  type=\"button\"\n                  appearance=\"mono\"\n                  icon=\"{{\n                    agentService.showMapview ? 'tuiIconEyeOff' : 'tuiIconEye'\n                  }}\"\n                  iconRight=\"\"\n                  [shape]=\"null\"\n                  size=\"m\"\n                  styles=\"padding: 0rem !important\"\n                  (onClick)=\"agentService.toggleMapview()\"\n                ></kwikui-button>\n              </div>\n              <hr />\n              <div class=\"menu-dropdown-footer\">\n                <kwikui-button\n                  id=\"\"\n                  label=\"Logout\"\n                  styles=\"\"\n                  class=\"menu-dropdown-buttons\"\n                  type=\"button\"\n                  appearance=\"mono\"\n                  [icon]=\"'tuiIconLogOut'\"\n                  iconRight=\"\"\n                  [shape]=\"null\"\n                  size=\"m\"\n                  (onClick)=\"handleOnClickNext({ stepType: 'LOGOUT' })\"\n                ></kwikui-button>\n              </div>\n            </div>\n          </ng-template>\n        </span>\n      </div>\n    </header>\n\n    <div class=\"dashboard-body\">\n      <div\n        *ngIf=\"mapsLoaded\"\n        [class]=\"agentService.showMapview ? 'map' : 'map-hidden'\"\n      >\n        <google-map\n          *ngIf=\"agentService.config?.dashboard?.mapType == 'google-maps'\"\n          [options]=\"this.googleMapsService.map\"\n          height=\"100%\"\n          width=\"100%\"\n        >\n          <map-marker\n            #marker=\"mapMarker\"\n            *ngFor=\"\n              let markerPosition of this.googleMapsService.allMarkers;\n              let index = index\n            \"\n            [position]=\"markerPosition\"\n            [label]=\"{ text: String(index) }\"\n          ></map-marker>\n          <map-directions-renderer\n            *ngIf=\"\n              this.googleMapsService.directionsResults$\n                | async as directionsResults\n            \"\n            [directions]=\"directionsResults\"\n            [options]=\"this.googleMapsService.directionsRenderOption\"\n          ></map-directions-renderer>\n        </google-map>\n\n        <div\n          *ngIf=\"agentService.config?.dashboard?.mapType == 'open-street'\"\n          id=\"map\"\n          style=\"height: 100%\"\n        ></div>\n      </div>\n\n      <div\n        class=\"task-details\"\n        *ngIf=\"\n          !agentService.isMobileView &&\n          agentService.currentTaskDetails != undefined &&\n          !agentService.showMapview\n        \"\n      >\n        <customer-details\n          [customer]=\"agentService.currentTaskDetails\"\n          [config]=\"config\"\n          (nextStep)=\"handleOnClickNext($event)\"\n          (removeTask)=\"handleOnClickRemoveTask($event)\"\n        ></customer-details>\n      </div>\n\n      <div\n        class=\"no-task-details\"\n        *ngIf=\"\n          !agentService.isMobileView &&\n          agentService.currentTaskDetails == undefined &&\n          !agentService.showMapview\n        \"\n      >\n        <img src=\"assets/No-Results.jpg\" class=\"no-task-img\" alt=\"No Task\" />\n        <div class=\"\">Select a Task to view it's details.</div>\n      </div>\n\n      <div class=\"customer-list\">\n        <customer-list\n          [customers]=\"taskList\"\n          [config]=\"config\"\n          (nextStep)=\"handleOnClickNext($event)\"\n          (removeTask)=\"handleOnClickRemoveTask($event)\"\n          (filterTaskList)=\"handleOnFilterTaskList($event)\"\n        ></customer-list>\n      </div>\n    </div>\n  </div>\n</div>\n\n<div class=\"kwikid-agent-dashboard-loader\" *ngIf=\"loading\">\n  <span class=\"loader\"></span>\n</div>\n\n<ng-template #template let-observer>\n  <div class=\"add-task-header\">\n    <h2>{{agentService?.addTaskForm?.title ?? \"Create User\"}}</h2>\n    <kwikui-button\n      icon=\"tuiIconX\"\n      id=\"\"\n      styles=\"\"\n      type=\"button\"\n      appearance=\"mono\"\n      [shape]=\"null\"\n      size=\"m\"\n      (onClick)=\"observer.complete()\"\n    ></kwikui-button>\n  </div>\n  <kwikid-form-view\n    [allFormsData]=\"allFormsData\"\n    [formConfig]=\"agentService.addTaskForm\"\n    [isMobileView]=\"true\"\n    (onClickViewForms)=\"this.handleOnClickViewForms($event)\"\n    (onClickSaveForm)=\"this.handleOnClickSaveForm($event)\"\n  ></kwikid-form-view>\n</ng-template>\n", styles: [".kwikid-agent-dashboard{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;align-content:center;width:100%;height:100%;position:relative}.kwikid-agent-dashboard .wrapper{width:100%;height:100%;display:flex;flex-direction:column;align-content:center;justify-content:space-between;align-items:stretch}.kwikid-agent-dashboard .wrapper header{display:flex;flex-direction:row;align-content:center;justify-content:space-between;align-items:center;grid-column-gap:1rem;column-gap:1rem;padding:.2rem;max-height:4rem;border:1px solid #fafafa;box-shadow:0 2px 10px -6px #000}.kwikid-agent-dashboard .wrapper header .client-logo{height:100%;padding-left:1rem}.kwikid-agent-dashboard .wrapper header .client-name{display:flex;flex-direction:row;align-content:center;justify-content:space-between;align-items:center;font-size:1rem;font-weight:600}.kwikid-agent-dashboard .wrapper header .actions{display:flex;flex-direction:row;align-items:center}.kwikid-agent-dashboard .wrapper header .actions>*{margin-right:.5rem}.kwikid-agent-dashboard .wrapper .dashboard-body{display:flex;flex-direction:column;align-content:center;justify-content:center;align-items:stretch;flex:1;overflow:auto}.kwikid-agent-dashboard .wrapper .dashboard-body .map{width:100%;height:100%;position:relative;overflow:hidden}.kwikid-agent-dashboard .wrapper .dashboard-body .map-hidden{visibility:collapse}.kwikid-agent-dashboard .wrapper .dashboard-body .customer-list{width:100%;height:100%;background-color:#fafafa;overflow:hidden}@media screen and (min-width: 600px){.kwikid-agent-dashboard{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;align-content:center;width:100%;height:100%}.kwikid-agent-dashboard .wrapper{width:100%;height:100%;display:flex;flex-direction:column;align-content:center;justify-content:space-between;align-items:stretch}.kwikid-agent-dashboard .wrapper header{display:flex;flex-direction:row;align-content:center;justify-content:space-between;align-items:center;grid-column-gap:1rem;column-gap:1rem;padding:.2rem;max-height:4rem;border:1px solid #fafafa;box-shadow:0 2px 10px -6px #000}.kwikid-agent-dashboard .wrapper header .client-name{display:flex;flex-direction:row;align-content:center;justify-content:space-between;align-items:center;font-size:1rem;font-weight:600}.kwikid-agent-dashboard .wrapper .dashboard-body{display:flex;flex-direction:row-reverse;align-content:center;justify-content:flex-end;align-items:stretch;padding:1.5rem;grid-gap:1.5rem;gap:1.5rem;overflow:auto;background-color:#fafafa}.kwikid-agent-dashboard .wrapper .dashboard-body .map{width:100%;height:100%;position:relative;overflow:hidden;box-shadow:#0000001a 0 4px 6px -1px,#0000000f 0 2px 4px -1px;border-radius:.5rem}.kwikid-agent-dashboard .wrapper .dashboard-body .map-hidden{visibility:collapse}.kwikid-agent-dashboard .wrapper .dashboard-body .task-details{width:100%;height:100%;position:relative;overflow:hidden;box-shadow:#0000001a 0 4px 6px -1px,#0000000f 0 2px 4px -1px;border-radius:.5rem}.kwikid-agent-dashboard .wrapper .dashboard-body .no-task-details{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;grid-gap:.5rem;gap:.5rem;overflow:hidden;color:#555}.kwikid-agent-dashboard .wrapper .dashboard-body .no-task-details .no-task-img{height:100px;width:100px}.kwikid-agent-dashboard .wrapper .dashboard-body .customer-list{min-width:300px;max-width:400px;width:100%;height:100%;overflow:hidden;box-shadow:#0000001a 0 4px 6px -1px,#0000000f 0 2px 4px -1px;border-radius:.5rem}}.menu{position:absolute;transition:\"0.15s linear 0s\"}.kwikid-agent-dashboard-loader{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.75);display:flex;flex-direction:row;align-content:center;justify-content:center;align-items:center;z-index:100}.kwikid-agent-dashboard-loader .loader{width:48px;height:48px;border-radius:50%;display:inline-block;position:relative;border:3px solid;border-color:#fff #fff transparent;box-sizing:border-box;animation:rotation 1s linear infinite}.kwikid-agent-dashboard-loader .loader:after{content:\"\";box-sizing:border-box;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;border:3px solid;border-color:transparent var(--tui-primary) var(--tui-primary);width:24px;height:24px;border-radius:50%;animation:rotationBack .5s linear infinite;transform-origin:center center}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes rotationBack{0%{transform:rotate(0)}to{transform:rotate(-360deg)}}.kwikid-agent-dashboard-loader .t-loader{display:none!important}.add-task-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:.5rem 0 1rem 1rem}:host{width:100%;height:100%}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{border-radius:10px}::-webkit-scrollbar-thumb{background:lightgray;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:gray}.menu-dropdown{display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;grid-gap:.5rem;gap:.5rem;padding:1rem 1.5rem}.menu-dropdown .menu-dropdown-header{display:flex;flex-direction:column;align-content:flex-start;justify-content:space-between;align-items:flex-start;grid-gap:1rem;gap:1rem}.menu-dropdown .menu-dropdown-header .menu-dropdown-header-agent-name{font-size:1.2rem;font-weight:600}.menu-dropdown .menu-dropdown-header .menu-dropdown-header-agent-id{font-size:.8rem;font-weight:600}.menu-dropdown .menu-dropdown-buttons ::ng-deep .t-wrapper{padding:0!important}\n"], components: [{ type: i4.KwikUIButtonComponent, selector: "kwikui-button", inputs: ["appearance", "class", "disabled", "icon", "iconRight", "id", "label", "shape", "showLoader", "size", "styles", "type", "pseudoHover"], outputs: ["onClick"] }, { type: i2.GoogleMap, selector: "google-map", inputs: ["height", "width", "center", "zoom", "options", "mapTypeId"], outputs: ["authFailure", "boundsChanged", "centerChanged", "mapClick", "mapDblclick", "mapDrag", "mapDragend", "mapDragstart", "headingChanged", "idle", "maptypeidChanged", "mapMousemove", "mapMouseout", "mapMouseover", "projectionChanged", "mapRightclick", "tilesloaded", "tiltChanged", "zoomChanged"], exportAs: ["googleMap"] }, { type: CustomerDetailsComponent, selector: "customer-details", inputs: ["customer", "config"], outputs: ["nextStep", "removeTask"] }, { type: CustomerListComponent, selector: "customer-list", inputs: ["customers", "config"], outputs: ["nextStep", "removeTask", "filterTaskList"] }, { type: i8.KwikIDFormViewComponent, selector: "kwikid-form-view", inputs: ["allFormsData", "apiCallResponse", "buttonClickResponse", "formConfig", "formData", "isMobileView", "popupFormCallback", "userConfig", "stepConfig"], outputs: ["getLogs", "getUnsavedDataState", "onActionShowPopupForm", "onClickApiCall", "onClickViewFile", "onClickFormFieldButton", "onClickGoBack", "onClickSaveForm", "onClickViewForms"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10.TuiActiveZoneDirective, selector: "[tuiActiveZone]:not(ng-container), [tuiActiveZoneChange]:not(ng-container), [tuiActiveZoneParent]:not(ng-container)", inputs: ["tuiActiveZoneParent"], outputs: ["tuiActiveZoneChange"], exportAs: ["tuiActiveZone"] }, { type: i11.TuiDropdownDirective, selector: "[tuiDropdown]:not(ng-container)", inputs: ["tuiDropdown"], exportAs: ["tuiDropdown"] }, { type: i11.TuiDropdownDriverDirective, selector: "[tuiDropdown]" }, { type: i11.TuiDropdownPositionDirective, selector: "[tuiDropdown]" }, { type: i11.TuiDropdownManualDirective, selector: "[tuiDropdown][tuiDropdownManual]", inputs: ["tuiDropdownManual"] }, { type: i11.TuiGroupDirective, selector: "[tuiGroup]:not(ng-container)", inputs: ["orientation", "adaptive", "collapsed", "rounded", "size"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.MapMarker, selector: "map-marker", inputs: ["title", "position", "label", "clickable", "options", "icon", "visible"], outputs: ["animationChanged", "mapClick", "clickableChanged", "cursorChanged", "mapDblclick", "mapDrag", "mapDragend", "draggableChanged", "mapDragstart", "flatChanged", "iconChanged", "mapMousedown", "mapMouseout", "mapMouseover", "mapMouseup", "positionChanged", "mapRightclick", "shapeChanged", "titleChanged", "visibleChanged", "zindexChanged"], exportAs: ["mapMarker"] }, { type: i2.MapDirectionsRenderer, selector: "map-directions-renderer", inputs: ["directions", "options"], outputs: ["directionsChanged"], exportAs: ["mapDirectionsRenderer"] }], pipes: { "async": i6.AsyncPipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikIDAgentDashboardComponent, decorators: [{
+/** @nocollapse */ TaskPreviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TaskPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ TaskPreviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TaskPreviewComponent, selector: "task-preview", inputs: { config: "config", data: "data" }, outputs: { onClickTaskItemAction: "onClickTaskItemAction" }, ngImport: i0, template: "<div></div>\n", styles: [""] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TaskPreviewComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'kwikid-agent-dashboard',
-                    templateUrl: './kwikid-agent-dashboard.component.html',
-                    styleUrls: ['./kwikid-agent-dashboard.component.scss']
+                    selector: "task-preview",
+                    templateUrl: "./task-preview.component.html",
+                    styleUrls: ["./task-preview.component.scss"]
                 }]
-        }], ctorParameters: function () { return [{ type: GoogleMapsService }, { type: AgentService }, { type: i3.HttpClient }, { type: i0.ElementRef }, { type: i11.TuiDialogService, decorators: [{
-                    type: Inject,
-                    args: [TuiDialogService]
-                }] }]; }, propDecorators: { windowResizeWatcher: [{
-                type: HostListener,
-                args: ['window:resize', ['$event']]
-            }], config: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { config: [{
                 type: Input
-            }], taskList: [{
+            }], data: [{
                 type: Input
-            }], nextStep: [{
-                type: Output
-            }], addTask: [{
-                type: Output
-            }], removeTask: [{
-                type: Output
-            }], filterTaskList: [{
+            }], onClickTaskItemAction: [{
                 type: Output
-            }], infoWindow: [{
-                type: ViewChild,
-                args: [MapInfoWindow, { static: false }]
-            }], mapElement: [{
-                type: ViewChild,
-                args: ['map', { static: true }]
             }] } });
 
+class TaskPreviewModule {
+}
+/** @nocollapse */ TaskPreviewModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TaskPreviewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ TaskPreviewModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TaskPreviewModule, declarations: [TaskPreviewComponent], imports: [CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        KwikUIModule,
+        KwikIDFormsModule], exports: [TaskPreviewComponent] });
+/** @nocollapse */ TaskPreviewModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TaskPreviewModule, imports: [[
+            CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            KwikUIModule,
+            KwikIDFormsModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TaskPreviewModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [TaskPreviewComponent],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        KwikUIModule,
+                        KwikIDFormsModule
+                    ],
+                    exports: [TaskPreviewComponent]
+                }]
+        }] });
+
+class ComponentModule {
+}
+/** @nocollapse */ ComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ ComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ComponentModule, imports: [AgentInfoModule,
+        BottomSheetModule,
+        MapViewModule,
+        PrimaryActionsModule,
+        TaskDetailModule,
+        TaskItemModule,
+        TaskListModule,
+        TaskListSearchModule,
+        TaskPreviewModule], exports: [AgentInfoModule,
+        BottomSheetModule,
+        MapViewModule,
+        PrimaryActionsModule,
+        TaskDetailModule,
+        TaskItemModule,
+        TaskListModule,
+        TaskListSearchModule,
+        TaskPreviewModule] });
+/** @nocollapse */ ComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ComponentModule, imports: [[
+            AgentInfoModule,
+            BottomSheetModule,
+            MapViewModule,
+            PrimaryActionsModule,
+            TaskDetailModule,
+            TaskItemModule,
+            TaskListModule,
+            TaskListSearchModule,
+            TaskPreviewModule
+        ], AgentInfoModule,
+        BottomSheetModule,
+        MapViewModule,
+        PrimaryActionsModule,
+        TaskDetailModule,
+        TaskItemModule,
+        TaskListModule,
+        TaskListSearchModule,
+        TaskPreviewModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: ComponentModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [],
+                    imports: [
+                        AgentInfoModule,
+                        BottomSheetModule,
+                        MapViewModule,
+                        PrimaryActionsModule,
+                        TaskDetailModule,
+                        TaskItemModule,
+                        TaskListModule,
+                        TaskListSearchModule,
+                        TaskPreviewModule
+                    ],
+                    exports: [
+                        AgentInfoModule,
+                        BottomSheetModule,
+                        MapViewModule,
+                        PrimaryActionsModule,
+                        TaskDetailModule,
+                        TaskItemModule,
+                        TaskListModule,
+                        TaskListSearchModule,
+                        TaskPreviewModule
+                    ]
+                }]
+        }] });
+
+class LayoutBodyModule {
+}
+/** @nocollapse */ LayoutBodyModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LayoutBodyModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ LayoutBodyModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LayoutBodyModule, declarations: [LayoutBodyComponent], imports: [CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        KwikUIModule,
+        KwikIDFormViewModule,
+        ComponentModule,
+        TuiSvgModule,
+        TuiPreviewActionModule,
+        TuiPreviewModule,
+        TuiButtonModule], exports: [LayoutBodyComponent] });
+/** @nocollapse */ LayoutBodyModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LayoutBodyModule, imports: [[
+            CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            KwikUIModule,
+            KwikIDFormViewModule,
+            ComponentModule,
+            TuiSvgModule,
+            TuiPreviewActionModule,
+            TuiPreviewModule,
+            TuiButtonModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LayoutBodyModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [LayoutBodyComponent],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        KwikUIModule,
+                        KwikIDFormViewModule,
+                        ComponentModule,
+                        TuiSvgModule,
+                        TuiPreviewActionModule,
+                        TuiPreviewModule,
+                        TuiButtonModule
+                    ],
+                    exports: [LayoutBodyComponent]
+                }]
+        }] });
+
+class LayoutHeaderModule {
+}
+/** @nocollapse */ LayoutHeaderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LayoutHeaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ LayoutHeaderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LayoutHeaderModule, declarations: [LayoutHeaderComponent], imports: [CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        KwikUIModule,
+        KwikIDFormsModule,
+        TuiActiveZoneModule,
+        TuiGroupModule,
+        TuiDropdownModule], exports: [LayoutHeaderComponent] });
+/** @nocollapse */ LayoutHeaderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LayoutHeaderModule, imports: [[
+            CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            KwikUIModule,
+            KwikIDFormsModule,
+            TuiActiveZoneModule,
+            TuiGroupModule,
+            TuiDropdownModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LayoutHeaderModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [LayoutHeaderComponent],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        KwikUIModule,
+                        KwikIDFormsModule,
+                        TuiActiveZoneModule,
+                        TuiGroupModule,
+                        TuiDropdownModule
+                    ],
+                    exports: [LayoutHeaderComponent]
+                }]
+        }] });
+
+class LayoutModule {
+}
+/** @nocollapse */ LayoutModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ LayoutModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LayoutModule, imports: [LayoutHeaderModule, LayoutBodyModule], exports: [LayoutHeaderModule, LayoutBodyModule] });
+/** @nocollapse */ LayoutModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LayoutModule, imports: [[LayoutHeaderModule, LayoutBodyModule], LayoutHeaderModule, LayoutBodyModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: LayoutModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [],
+                    imports: [LayoutHeaderModule, LayoutBodyModule],
+                    exports: [LayoutHeaderModule, LayoutBodyModule]
+                }]
+        }] });
+
+class KwikIDAgentDashboardModuleV2 {
+}
+/** @nocollapse */ KwikIDAgentDashboardModuleV2.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikIDAgentDashboardModuleV2, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ KwikIDAgentDashboardModuleV2.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikIDAgentDashboardModuleV2, declarations: [KwikIDAgentDashboardComponentV2], imports: [CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        KwikUIModule,
+        KwikIDFormsModule,
+        LayoutModule,
+        ComponentModule], exports: [KwikIDAgentDashboardComponentV2] });
+/** @nocollapse */ KwikIDAgentDashboardModuleV2.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikIDAgentDashboardModuleV2, imports: [[
+            CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            KwikUIModule,
+            KwikIDFormsModule,
+            LayoutModule,
+            ComponentModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikIDAgentDashboardModuleV2, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [KwikIDAgentDashboardComponentV2],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        KwikUIModule,
+                        KwikIDFormsModule,
+                        LayoutModule,
+                        ComponentModule
+                    ],
+                    exports: [KwikIDAgentDashboardComponentV2]
+                }]
+        }] });
+
 class KwikIDAgentDashboardModule {
 }
 /** @nocollapse */ KwikIDAgentDashboardModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikIDAgentDashboardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-/** @nocollapse */ KwikIDAgentDashboardModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikIDAgentDashboardModule, declarations: [KwikIDAgentDashboardComponent,
-        CustomerListComponent,
-        CustomerTileComponent,
-        Ng2SearchPipe,
-        StatusPillComponent,
-        CustomerDetailsComponent], imports: [CommonModule,
+/** @nocollapse */ KwikIDAgentDashboardModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikIDAgentDashboardModule, declarations: [KwikIDAgentDashboardComponent], imports: [CommonModule,
         HttpClientModule,
         FormsModule,
         ReactiveFormsModule,
@@ -1263,7 +3419,9 @@ class KwikIDAgentDashboardModule {
         ScrollingModule,
         GoogleMapsModule,
         HttpClientModule,
-        HttpClientJsonpModule], exports: [KwikIDAgentDashboardComponent] });
+        HttpClientJsonpModule,
+        KwikIDAgentDashboardModuleV1,
+        KwikIDAgentDashboardModuleV2], exports: [KwikIDAgentDashboardComponent] });
 /** @nocollapse */ KwikIDAgentDashboardModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikIDAgentDashboardModule, imports: [[
             CommonModule,
             HttpClientModule,
@@ -1288,19 +3446,14 @@ class KwikIDAgentDashboardModule {
             ScrollingModule,
             GoogleMapsModule,
             HttpClientModule,
-            HttpClientJsonpModule
+            HttpClientJsonpModule,
+            KwikIDAgentDashboardModuleV1,
+            KwikIDAgentDashboardModuleV2
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikIDAgentDashboardModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [
-                        KwikIDAgentDashboardComponent,
-                        CustomerListComponent,
-                        CustomerTileComponent,
-                        Ng2SearchPipe,
-                        StatusPillComponent,
-                        CustomerDetailsComponent
-                    ],
+                    declarations: [KwikIDAgentDashboardComponent],
                     imports: [
                         CommonModule,
                         HttpClientModule,
@@ -1325,7 +3478,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                         ScrollingModule,
                         GoogleMapsModule,
                         HttpClientModule,
-                        HttpClientJsonpModule
+                        HttpClientJsonpModule,
+                        KwikIDAgentDashboardModuleV1,
+                        KwikIDAgentDashboardModuleV2
                     ],
                     exports: [KwikIDAgentDashboardComponent]
                 }]