kwikid-agent-dashboard 0.0.37 → 0.0.38

package/bundles/kwikid-agent-dashboard.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/google-maps'), require('@taiga-ui/core'), require('kwikid-toolkit'), require('rxjs/operators'), require('rxjs'), require('@angular/common/http'), require('kwikui'), require('leaflet'), require('leaflet-routing-machine'), require('@angular/common'), require('@angular/forms'), require('@taiga-ui/cdk'), require('@angular/cdk/scrolling'), require('kwikid-forms'), require('@taiga-ui/addon-mobile')) :
-  typeof define === 'function' && define.amd ? define('kwikid-agent-dashboard', ['exports', '@angular/core', '@angular/google-maps', '@taiga-ui/core', 'kwikid-toolkit', 'rxjs/operators', 'rxjs', '@angular/common/http', 'kwikui', 'leaflet', 'leaflet-routing-machine', '@angular/common', '@angular/forms', '@taiga-ui/cdk', '@angular/cdk/scrolling', 'kwikid-forms', '@taiga-ui/addon-mobile'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["kwikid-agent-dashboard"] = {}, global.ng.core, global.ng.googleMaps, global["@taiga-ui/core"], global.kwikidToolkit, global.rxjs.operators, global.rxjs, global.ng.common.http, global.i4, global.L, null, global.ng.common, global.ng.forms, global["@taiga-ui/cdk"], global.ng.cdk.scrolling, global.i8, global["@taiga-ui/addon-mobile"]));
-})(this, (function (exports, i0, i2, i11, kwikidToolkit, operators, rxjs, i3, i4, L, leafletRoutingMachine, i6, i7, i10, i5, i8, addonMobile) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('kwikui'), require('@taiga-ui/cdk'), require('@taiga-ui/core'), require('@angular/animations'), require('@taiga-ui/addon-preview'), require('kwikid-toolkit'), require('@taiga-ui/kit'), require('@angular/common'), require('@taiga-ui/core/directives/dropdown'), require('kwikid-forms'), require('@angular/forms'), require('@angular/cdk/scrolling')) :
+  typeof define === 'function' && define.amd ? define('kwikid-agent-dashboard', ['exports', '@angular/core', 'kwikui', '@taiga-ui/cdk', '@taiga-ui/core', '@angular/animations', '@taiga-ui/addon-preview', 'kwikid-toolkit', '@taiga-ui/kit', '@angular/common', '@taiga-ui/core/directives/dropdown', 'kwikid-forms', '@angular/forms', '@angular/cdk/scrolling'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["kwikid-agent-dashboard"] = {}, global.ng.core, global.i1, global["@taiga-ui/cdk"], global["@taiga-ui/core"], global.ng.animations, global["@taiga-ui/addon-preview"], global.kwikidToolkit, global["@taiga-ui/kit"], global.ng.common, global.i6, global.i3$2, global.ng.forms, global.ng.cdk.scrolling));
+})(this, (function (exports, i0, i1, i2, i3, animations, i8, kwikidToolkit, i1$1, i3$1, i6, i3$2, i2$1, scrolling) { 'use strict';
 
   function _interopNamespace(e) {
     if (e && e.__esModule) return e;
@@ -23,16 +23,15 @@
   }
 
   var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
+  var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
   var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
-  var i11__namespace = /*#__PURE__*/_interopNamespace(i11);
   var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
-  var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
-  var L__namespace = /*#__PURE__*/_interopNamespace(L);
-  var i6__namespace = /*#__PURE__*/_interopNamespace(i6);
-  var i7__namespace = /*#__PURE__*/_interopNamespace(i7);
-  var i10__namespace = /*#__PURE__*/_interopNamespace(i10);
-  var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
   var i8__namespace = /*#__PURE__*/_interopNamespace(i8);
+  var i1__namespace$1 = /*#__PURE__*/_interopNamespace(i1$1);
+  var i3__namespace$1 = /*#__PURE__*/_interopNamespace(i3$1);
+  var i6__namespace = /*#__PURE__*/_interopNamespace(i6);
+  var i3__namespace$2 = /*#__PURE__*/_interopNamespace(i3$2);
+  var i2__namespace$1 = /*#__PURE__*/_interopNamespace(i2$1);
 
   /******************************************************************************
   Copyright (c) Microsoft Corporation.
@@ -340,9 +339,13 @@
       if (!Symbol.asyncIterator)
           throw new TypeError("Symbol.asyncIterator is not defined.");
       var g = generator.apply(thisArg, _arguments || []), i, q = [];
-      return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
-      function verb(n) { if (g[n])
-          i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
+      return i = {}, verb("next"), verb("throw"), verb("return", awaitReturn), i[Symbol.asyncIterator] = function () { return this; }, i;
+      function awaitReturn(f) { return function (v) { return Promise.resolve(v).then(f, reject); }; }
+      function verb(n, f) { if (g[n]) {
+          i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); };
+          if (f)
+              i[n] = f(i[n]);
+      } }
       function resume(n, v) { try {
           step(g[n](v));
       }
@@ -422,7 +425,7 @@
       if (value !== null && value !== void 0) {
           if (typeof value !== "object" && typeof value !== "function")
               throw new TypeError("Object expected.");
-          var dispose;
+          var dispose, inner;
           if (async) {
               if (!Symbol.asyncDispose)
                   throw new TypeError("Symbol.asyncDispose is not defined.");
@@ -432,9 +435,18 @@
               if (!Symbol.dispose)
                   throw new TypeError("Symbol.dispose is not defined.");
               dispose = value[Symbol.dispose];
+              if (async)
+                  inner = dispose;
           }
           if (typeof dispose !== "function")
               throw new TypeError("Object not disposable.");
+          if (inner)
+              dispose = function () { try {
+                  inner.call(this);
+              }
+              catch (e) {
+                  return Promise.reject(e);
+              } };
           env.stack.push({ value: value, dispose: dispose, async: async });
       }
       else if (async) {
@@ -498,1360 +510,1193 @@
       __disposeResources: __disposeResources,
   };
 
-  // To Calculate Distance between two markers
-  var calculateDistance = function (point1, point2) {
-      var lat1 = point1.lat;
-      var lng1 = point1.lng;
-      var lat2 = point2.lat;
-      var lng2 = point2.lng;
-      var R = 6371; // Earth radius in kilometers
-      var dLat = (lat2 - lat1) * (Math.PI / 180);
-      var dLng = (lng2 - lng1) * (Math.PI / 180);
-      var 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);
-      var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
-      var distance = R * c;
-      return distance;
-  };
-  // To calculate nearest distance from marker
-  var nearestNeighborAlgorithm = function (startingPoint, unvisitedPoints) {
-      var e_1, _a;
-      var currentPoint = startingPoint;
-      var path = [currentPoint];
-      var visitedPoints = new Set([currentPoint]);
-      while (unvisitedPoints.length > 0) {
-          var nearestPoint = null;
-          var minDistance = Number.POSITIVE_INFINITY;
+  var LayoutHeaderComponent = /** @class */ (function () {
+      function LayoutHeaderComponent() {
+          this.config = {};
+          this.agentInfo = {};
+          this.onGetTaskList = new i0.EventEmitter();
+          this.onClickPerformAction = new i0.EventEmitter();
+          this.open = false;
+      }
+      LayoutHeaderComponent.prototype.ngOnInit = function () {
+          return __awaiter(this, void 0, void 0, function () { return __generator(this, function (_a) {
+              return [2 /*return*/];
+          }); });
+      };
+      LayoutHeaderComponent.prototype.refreshPage = function () {
+          this.handleOnGetTaskList({});
+      };
+      LayoutHeaderComponent.prototype.onClick = function () {
+          this.open = !this.open;
+      };
+      LayoutHeaderComponent.prototype.onObscured = function (obscured) {
+          if (obscured) {
+              this.open = false;
+          }
+      };
+      LayoutHeaderComponent.prototype.onActiveZone = function (active) {
+          this.open = active && this.open;
+      };
+      LayoutHeaderComponent.prototype.logout = function () {
+          this.handleOnClickPerformAction({ type: 'LOGOUT' });
+      };
+      LayoutHeaderComponent.prototype.handleOnGetTaskList = function (event) {
+          this.onGetTaskList.emit(event);
+      };
+      LayoutHeaderComponent.prototype.handleOnClickPerformAction = function (event) {
+          this.onClickPerformAction.emit(event);
+      };
+      return LayoutHeaderComponent;
+  }());
+  /** @nocollapse */ LayoutHeaderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: LayoutHeaderComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+  /** @nocollapse */ LayoutHeaderComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, template: "<div id=\"header-container\">\n  <div id=\"client-information-wrapper\">\n    <img id=\"client-logo\" [src]=\"config?.theme?.clientLogo\" />\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__namespace.KwikUIButtonComponent, selector: "kwikui-button", inputs: ["appearance", "class", "disabled", "icon", "iconRight", "id", "label", "shape", "showLoader", "size", "styles", "type", "pseudoHover"], outputs: ["onClick"] }], directives: [{ type: i2__namespace.TuiActiveZoneDirective, selector: "[tuiActiveZone]:not(ng-container), [tuiActiveZoneChange]:not(ng-container), [tuiActiveZoneParent]:not(ng-container)", inputs: ["tuiActiveZoneParent"], outputs: ["tuiActiveZoneChange"], exportAs: ["tuiActiveZone"] }, { type: i3__namespace.TuiDropdownDirective, selector: "[tuiDropdown]:not(ng-container)", inputs: ["tuiDropdown"], exportAs: ["tuiDropdown"] }, { type: i3__namespace.TuiDropdownDriverDirective, selector: "[tuiDropdown]" }, { type: i3__namespace.TuiDropdownPositionDirective, selector: "[tuiDropdown]" }, { type: i3__namespace.TuiDropdownManualDirective, selector: "[tuiDropdown][tuiDropdownManual]", inputs: ["tuiDropdownManual"] }, { type: i3__namespace.TuiGroupDirective, selector: "[tuiGroup]:not(ng-container)", inputs: ["orientation", "adaptive", "collapsed", "rounded", "size"] }] });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: LayoutHeaderComponent, decorators: [{
+              type: i0.Component,
+              args: [{
+                      selector: 'layout-header',
+                      templateUrl: './layout-header.component.html',
+                      styleUrls: ['./layout-header.component.scss']
+                  }]
+          }], ctorParameters: function () { return []; }, propDecorators: { config: [{
+                  type: i0.Input
+              }], agentInfo: [{
+                  type: i0.Input
+              }], onGetTaskList: [{
+                  type: i0.Output
+              }], onClickPerformAction: [{
+                  type: i0.Output
+              }] } });
+
+  var PrimaryActionsComponent = /** @class */ (function () {
+      function PrimaryActionsComponent() {
+          this.primaryActionsConfig = [];
+          this.onClickPrimaryAction = new i0.EventEmitter();
+      }
+      PrimaryActionsComponent.prototype.ngOnInit = function () {
+          return __awaiter(this, void 0, void 0, function () { return __generator(this, function (_a) {
+              return [2 /*return*/];
+          }); });
+      };
+      PrimaryActionsComponent.prototype.ngOnChanges = function (changes) {
+          var e_1, _a;
+          var verifyChange = function (key) {
+              return changes.hasOwnProperty(key) && !changes[key].firstChange;
+          };
           try {
-              for (var unvisitedPoints_1 = (e_1 = void 0, __values(unvisitedPoints)), unvisitedPoints_1_1 = unvisitedPoints_1.next(); !unvisitedPoints_1_1.done; unvisitedPoints_1_1 = unvisitedPoints_1.next()) {
-                  var point = unvisitedPoints_1_1.value;
-                  var distance = calculateDistance(currentPoint, point);
-                  if (distance < minDistance) {
-                      minDistance = distance;
-                      nearestPoint = point;
-                  }
+              for (var _b = __values(Object.entries(changes)), _c = _b.next(); !_c.done; _c = _b.next()) {
+                  var change = _c.value;
+                  var key = change[0];
+                  var value = change[1].currentValue;
               }
           }
           catch (e_1_1) { e_1 = { error: e_1_1 }; }
           finally {
               try {
-                  if (unvisitedPoints_1_1 && !unvisitedPoints_1_1.done && (_a = unvisitedPoints_1.return)) _a.call(unvisitedPoints_1);
+                  if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
               }
               finally { if (e_1) throw e_1.error; }
           }
-          path.push(nearestPoint);
-          visitedPoints.add(nearestPoint);
-          currentPoint = nearestPoint;
-          unvisitedPoints = unvisitedPoints.filter(function (point) { return !visitedPoints.has(point); });
-      }
-      return path;
-  };
-  var addressConcator = function (data, config) {
-      var address = config.reduce(function (accumulator, currentValue) { return accumulator + ' ' + kwikidToolkit.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 = {}));
-  var 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
-  ];
-
-  var AgentService = /** @class */ (function () {
-      function AgentService() {
-          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
-          ];
-      }
-      AgentService.prototype.ngOnInit = function () { };
-      AgentService.prototype.setAgentConfig = function (config) {
-          this.config = config;
+          if (verifyChange('primaryActionsConfig')) {
+              this.primaryActionsConfig = changes.primaryActionsConfig.currentValue;
+              this.primaryActionsConfig.map(i2.ALWAYS_FALSE_HANDLER);
+          }
       };
-      AgentService.prototype.toggleMapview = function () {
-          this.showMapview = !this.showMapview;
+      PrimaryActionsComponent.prototype.handleOnInitPrimaryActionsConfig = function () {
+          this.primaryActionsConfig = this.primaryActionsConfig;
+          this.primaryActionsConfig.map(i2.ALWAYS_FALSE_HANDLER);
       };
-      AgentService.prototype.canStartJourney = function (status) {
-          var _a, _b;
-          var 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;
-          }
-          else {
-              return true;
-          }
+      PrimaryActionsComponent.prototype.handleOnClickPrimaryAction = function (event) {
+          this.onClickPrimaryAction.emit(event);
       };
-      AgentService.prototype.canPlotMarkers = function (status) {
-          var _a, _b;
-          var 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;
-          }
-          else {
-              return true;
-          }
+      PrimaryActionsComponent.prototype.trackByFn = function (index, item) {
+          return index; // or unique identifier if available
       };
-      return AgentService;
+      return PrimaryActionsComponent;
   }());
-  /** @nocollapse */ AgentService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: AgentService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-  /** @nocollapse */ AgentService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: AgentService, providedIn: 'root' });
-  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: AgentService, decorators: [{
-              type: i0.Injectable,
+  /** @nocollapse */ PrimaryActionsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PrimaryActionsComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+  /** @nocollapse */ PrimaryActionsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PrimaryActionsComponent, selector: "primary-actions", inputs: { primaryActionsConfig: "primaryActionsConfig" }, outputs: { onClickPrimaryAction: "onClickPrimaryAction" }, usesOnChanges: true, ngImport: i0__namespace, template: "<div id=\"primary-actions-container\">\n  <tui-items-with-more tuiGroup [itemsLimit]=\"1\">\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 let-lastIndex tuiMore>\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__namespace$1.TuiItemsWithMoreComponent, selector: "tui-items-with-more" }, { type: i1__namespace.KwikUIButtonComponent, selector: "kwikui-button", inputs: ["appearance", "class", "disabled", "icon", "iconRight", "id", "label", "shape", "showLoader", "size", "styles", "type", "pseudoHover"], outputs: ["onClick"] }, { type: i3__namespace.TuiHostedDropdownComponent, selector: "tui-hosted-dropdown", inputs: ["content", "sided", "canOpen", "open"], outputs: ["openChange", "focusedChange"] }, { type: i3__namespace.TuiDataListComponent, selector: "tui-data-list", inputs: ["role", "emptyContent", "size"] }], directives: [{ type: i1__namespace$1.TuiItemsWithMoreDirective, selector: "tui-items-with-more", inputs: ["itemsLimit", "required"] }, { type: i3__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace.TuiItemDirective, selector: "[tuiItem]" }, { type: i1__namespace$1.TuiMoreDirective, selector: "[tuiMore]" }, { type: i6__namespace.TuiDropdownOptionsDirective, selector: "[tuiDropdownAlign], [tuiDropdownAppearance], [tuiDropdownDirection], [tuiDropdownLimitWidth], [tuiDropdownMinHeight], [tuiDropdownMaxHeight], [tuiDropdownOffset]", inputs: ["tuiDropdownAlign", "tuiDropdownAppearance", "tuiDropdownDirection", "tuiDropdownLimitWidth", "tuiDropdownMinHeight", "tuiDropdownMaxHeight", "tuiDropdownOffset"] }, { type: i3__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+  __decorate([
+      kwikidToolkit.logMethod
+  ], PrimaryActionsComponent.prototype, "handleOnInitPrimaryActionsConfig", null);
+  __decorate([
+      kwikidToolkit.logMethod
+  ], PrimaryActionsComponent.prototype, "handleOnClickPrimaryAction", null);
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PrimaryActionsComponent, decorators: [{
+              type: i0.Component,
               args: [{
-                      providedIn: 'root'
+                      selector: 'primary-actions',
+                      templateUrl: './primary-actions.component.html',
+                      styleUrls: ['./primary-actions.component.scss'],
+                      changeDetection: i0.ChangeDetectionStrategy.OnPush
                   }]
-          }], ctorParameters: function () { return []; } });
+          }], ctorParameters: function () { return []; }, propDecorators: { primaryActionsConfig: [{
+                  type: i0.Input
+              }], onClickPrimaryAction: [{
+                  type: i0.Output
+              }], handleOnInitPrimaryActionsConfig: [], handleOnClickPrimaryAction: [] } });
 
-  var GoogleMapsService = /** @class */ (function () {
-      function GoogleMapsService(agentService, mapDirectionsService, httpClient) {
-          this.agentService = agentService;
-          this.mapDirectionsService = mapDirectionsService;
-          this.httpClient = httpClient;
-          this.allMarkers = [];
+  var MapViewComponent = /** @class */ (function () {
+      function MapViewComponent() {
+          this.mapConfig = {
+              isMapHidden: true
+          };
       }
-      // To get Current Position
-      GoogleMapsService.prototype.getPosition = function () {
-          return new Promise(function (resolve, reject) {
-              navigator.geolocation.watchPosition(function (resp) {
-                  resolve({
-                      lng: resp.coords.longitude,
-                      lat: resp.coords.latitude
-                  });
-              }, function (err) {
-                  reject(err);
-              });
-          });
-      };
-      // To Initialize Google Maps
-      GoogleMapsService.prototype.initializeMap = function () {
-          return __awaiter(this, void 0, void 0, function () {
-              var _o;
-              return __generator(this, function (_p) {
-                  switch (_p.label) {
-                      case 0:
-                          _o = this;
-                          return [4 /*yield*/, this.getPosition()];
-                      case 1:
-                          _o.myPosition = _p.sent();
-                          this.map = {
-                              zoom: 10,
-                              center: this.myPosition,
-                              streetViewControl: false,
-                              mapTypeControl: false,
-                              fullscreenControl: false,
-                              zoomControl: false
-                          };
-                          return [2 /*return*/];
-                  }
-              });
-          });
-      };
-      // To extract Location from the Task Details
-      GoogleMapsService.prototype.getLocation = function (task) {
-          return __awaiter(this, void 0, void 0, function () {
-              var _this = this;
-              return __generator(this, function (_o) {
-                  return [2 /*return*/, new Promise(function (resolve) { return __awaiter(_this, void 0, void 0, function () {
-                          var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, encodedAddres, config, address, config, address, address, url, response, data, isValidLocation, location;
-                          return __generator(this, function (_o) {
-                              switch (_o.label) {
-                                  case 0:
-                                      // If Fetch Address from Multiple Paths
-                                      if (kwikidToolkit.checkObjectPathExists(this.agentService.config, 'dashboard.taskLocationPaths')) {
-                                          config = this.agentService.config.dashboard.taskLocationPaths;
-                                          address = addressConcator(task, config);
-                                          // Encode the Address in URI
-                                          encodedAddres = encodeURI(address);
-                                      }
-                                      // If Fetch Address from Single Path
-                                      else if (kwikidToolkit.checkObjectPathExists(this.agentService.config, 'dashboard.taskLocationPath')) {
-                                          config = this.agentService.config.dashboard.taskLocationPath;
-                                          address = kwikidToolkit.getObjectValueFromPath(task, config);
-                                          // Encode the Address in URI
-                                          encodedAddres = encodeURI(address);
-                                      }
-                                      // Default Address Paths Avaiable
-                                      else {
-                                          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 = "https://maps.googleapis.com/maps/api/geocode/json?key=" + this.apiKey + "&address=" + encodedAddres;
-                                      return [4 /*yield*/, fetch(url)];
-                                  case 1:
-                                      response = _o.sent();
-                                      return [4 /*yield*/, response.json()];
-                                  case 2:
-                                      data = _o.sent();
-                                      isValidLocation = kwikidToolkit.isNotEmptyArray(data === null || data === void 0 ? void 0 : data.results);
-                                      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);
-                                      return [2 /*return*/];
-                              }
-                          });
-                      }); })];
-              });
-          });
-      };
-      // Get Tasks | Markers Location Co Ordinates
-      GoogleMapsService.prototype.getMarkersLocation = function (myMarker, tasks) {
-          return __awaiter(this, void 0, void 0, function () {
-              var _this = this;
-              return __generator(this, function (_o) {
-                  return [2 /*return*/, new Promise(function (resolve) { return __awaiter(_this, void 0, void 0, function () {
-                          var markers, promises;
-                          var _this = this;
-                          return __generator(this, function (_o) {
-                              switch (_o.label) {
-                                  case 0:
-                                      markers = [];
-                                      markers.push(myMarker);
-                                      promises = tasks.map(function (task) { return __awaiter(_this, void 0, void 0, function () {
-                                          var marker;
-                                          return __generator(this, function (_o) {
-                                              switch (_o.label) {
-                                                  case 0: return [4 /*yield*/, this.getLocation(task)];
-                                                  case 1:
-                                                      marker = _o.sent();
-                                                      task = Object.assign(Object.assign({}, task), marker);
-                                                      markers.push(task);
-                                                      return [2 /*return*/];
-                                              }
-                                          });
-                                      }); });
-                                      return [4 /*yield*/, Promise.all(promises)];
-                                  case 1:
-                                      _o.sent();
-                                      resolve(markers);
-                                      return [2 /*return*/];
-                              }
-                          });
-                      }); })];
-              });
-          });
-      };
-      // Plot All Markers
-      GoogleMapsService.prototype.plotAllMarkers = function (tasks) {
-          return __awaiter(this, void 0, void 0, function () {
-              var _this = this;
-              return __generator(this, function (_o) {
-                  return [2 /*return*/, new Promise(function (resolve) { return __awaiter(_this, void 0, void 0, function () {
-                          var path, promises;
-                          var _this = this;
-                          return __generator(this, function (_o) {
-                              switch (_o.label) {
-                                  case 0:
-                                      path = [];
-                                      promises = tasks.map(function (task) {
-                                          if (task === null || task === void 0 ? void 0 : task.isValidLocation) {
-                                              path.push({
-                                                  location: task,
-                                                  stopover: true
-                                              });
-                                              _this.allMarkers.push(task);
-                                          }
-                                      });
-                                      return [4 /*yield*/, Promise.all(promises)];
-                                  case 1:
-                                      _o.sent();
-                                      resolve(path);
-                                      return [2 /*return*/];
-                              }
-                          });
-                      }); })];
-              });
-          });
-      };
-      // To Plot Directions for All Tasks
-      GoogleMapsService.prototype.plotDirectionsForAllTasks = function (tasks) {
-          return __awaiter(this, void 0, void 0, function () {
-              var myMarker, markers, startingPoint, unvisitedWaypoints, optimizedRoute, path, request;
-              return __generator(this, function (_o) {
-                  switch (_o.label) {
-                      case 0:
-                          this.allMarkers = [];
-                          myMarker = {
-                              lat: this.myPosition.lat,
-                              lng: this.myPosition.lng,
-                              title: 0,
-                              color: 'red'
-                          };
-                          return [4 /*yield*/, this.getMarkersLocation(myMarker, tasks)];
-                      case 1:
-                          markers = _o.sent();
-                          startingPoint = markers[0];
-                          unvisitedWaypoints = markers.slice(1);
-                          optimizedRoute = nearestNeighborAlgorithm(startingPoint, unvisitedWaypoints);
-                          // Sort All Tasks as per optimized routes
-                          tasks = optimizedRoute.slice(1);
-                          this.allMarkers = [myMarker];
-                          return [4 /*yield*/, this.plotAllMarkers(tasks)];
-                      case 2:
-                          path = _o.sent();
-                          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(operators.map(function (response) { return response.result; }));
-                          this.directionsResults$.subscribe(function (val) { });
-                          this.allDirectionsResults$ = this.directionsResults$;
-                          return [2 /*return*/, tasks];
-                  }
-              });
-          });
-      };
-      // To Plot Directions for Selected Tasks
-      GoogleMapsService.prototype.plotDirectionsForSelectedTask = function (task) {
-          if (task != null) {
-              var taskMarker = task;
-              // If Location is Available in Task Details
-              if (taskMarker === null || taskMarker === void 0 ? void 0 : taskMarker.isValidLocation) {
-                  var request = {
-                      origin: this.myPosition,
-                      destination: taskMarker,
-                      optimizeWaypoints: true,
-                      travelMode: google.maps.TravelMode.DRIVING
-                  };
-                  this.directionsResults$ = this.mapDirectionsService
-                      .route(request)
-                      .pipe(operators.map(function (response) { return response.result; }));
-                  this.directionsResults$.subscribe();
+      MapViewComponent.prototype.ngOnInit = function () {
+          return __awaiter(this, void 0, void 0, function () { return __generator(this, function (_a) {
+              return [2 /*return*/];
+          }); });
+      };
+      MapViewComponent.prototype.ngOnChanges = function (changes) {
+          var e_1, _a;
+          var verifyChange = function (key) {
+              return changes.hasOwnProperty(key) && !changes[key].firstChange;
+          };
+          try {
+              for (var _b = __values(Object.entries(changes)), _c = _b.next(); !_c.done; _c = _b.next()) {
+                  var change = _c.value;
+                  var key = change[0];
+                  var value = change[1].currentValue;
               }
-              else {
-                  alert('No Location Available');
-                  this.directionsResults$ = this.allDirectionsResults$;
+          }
+          catch (e_1_1) { e_1 = { error: e_1_1 }; }
+          finally {
+              try {
+                  if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
               }
+              finally { if (e_1) throw e_1.error; }
           }
-          else {
-              this.directionsResults$ = this.allDirectionsResults$;
+          if (verifyChange('mapConfig')) {
+              this.mapConfig = changes.mapConfig.currentValue;
           }
       };
-      return GoogleMapsService;
+      return MapViewComponent;
   }());
-  /** @nocollapse */ GoogleMapsService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: GoogleMapsService, deps: [{ token: AgentService }, { token: i2__namespace.MapDirectionsService }, { token: i3__namespace.HttpClient }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-  /** @nocollapse */ GoogleMapsService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: GoogleMapsService, providedIn: 'root' });
-  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: GoogleMapsService, decorators: [{
-              type: i0.Injectable,
+  /** @nocollapse */ MapViewComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MapViewComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+  /** @nocollapse */ MapViewComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MapViewComponent, selector: "map-view", inputs: { mapConfig: "mapConfig" }, usesOnChanges: true, ngImport: i0__namespace, 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: i3__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MapViewComponent, decorators: [{
+              type: i0.Component,
               args: [{
-                      providedIn: 'root'
+                      selector: 'map-view',
+                      templateUrl: './map-view.component.html',
+                      styleUrls: ['./map-view.component.scss']
                   }]
-          }], ctorParameters: function () { return [{ type: AgentService }, { type: i2__namespace.MapDirectionsService }, { type: i3__namespace.HttpClient }]; }, propDecorators: { directionsRenders: [{
-                  type: i0.ViewChildren,
-                  args: ['directionsRender']
+          }], ctorParameters: function () { return []; }, propDecorators: { mapConfig: [{
+                  type: i0.Input
               }] } });
 
-  var OpenStreetMapsService = /** @class */ (function () {
-      function OpenStreetMapsService(agentService, mapDirectionsService, httpClient) {
-          this.agentService = agentService;
-          this.mapDirectionsService = mapDirectionsService;
-          this.httpClient = httpClient;
-          this.allMarkers = [];
+  var TaskItemStatusComponent = /** @class */ (function () {
+      function TaskItemStatusComponent() {
+          this.styles = {};
+          this.value = '';
       }
-      // To get Current Position
-      OpenStreetMapsService.prototype.getPosition = function () {
-          return new Promise(function (resolve, reject) {
-              navigator.geolocation.watchPosition(function (resp) {
-                  resolve({
-                      lng: resp.coords.longitude,
-                      lat: resp.coords.latitude
-                  });
-              }, function (err) {
-                  reject(err);
-              });
-          });
-      };
-      // To extract Location from the Task Details
-      OpenStreetMapsService.prototype.getLocation = function (task) {
+      TaskItemStatusComponent.prototype.ngOnInit = function () {
           return __awaiter(this, void 0, void 0, function () {
-              var _this = this;
-              return __generator(this, function (_q) {
-                  return [2 /*return*/, new Promise(function (resolve) { return __awaiter(_this, void 0, void 0, function () {
-                          var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, encodedAddres, config, address, config, address, address, url, response, data, isValidLocation, location;
-                          return __generator(this, function (_q) {
-                              switch (_q.label) {
-                                  case 0:
-                                      // If Fetch Address from Multiple Paths
-                                      if (kwikidToolkit.checkObjectPathExists(this.agentService.config, 'dashboard.taskLocationPaths')) {
-                                          config = this.agentService.config.dashboard.taskLocationPaths;
-                                          address = addressConcator(task, config);
-                                          // Encode the Address in URI
-                                          encodedAddres = encodeURI(address);
-                                      }
-                                      // If Fetch Address from Single Path
-                                      else if (kwikidToolkit.checkObjectPathExists(this.agentService.config, 'dashboard.taskLocationPath')) {
-                                          config = this.agentService.config.dashboard.taskLocationPath;
-                                          address = kwikidToolkit.getObjectValueFromPath(task, config);
-                                          // Encode the Address in URI
-                                          encodedAddres = encodeURI(address);
-                                      }
-                                      // Default Address Paths Avaiable
-                                      else {
-                                          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 = "https://nominatim.openstreetmap.org/search?q=" + encodedAddres + "&format=json";
-                                      return [4 /*yield*/, fetch(url)];
-                                  case 1:
-                                      response = _q.sent();
-                                      return [4 /*yield*/, response.json()];
-                                  case 2:
-                                      data = _q.sent();
-                                      isValidLocation = kwikidToolkit.isNotEmptyArray(data) && ((_l = data[0]) === null || _l === void 0 ? void 0 : _l.lat) & ((_m = data[0]) === null || _m === void 0 ? void 0 : _m.lon);
-                                      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);
-                                      return [2 /*return*/];
-                              }
-                          });
-                      }); })];
+              return __generator(this, function (_c) {
+                  this.setupStatus();
+                  return [2 /*return*/];
               });
           });
       };
-      // Get Tasks | Markers Location Co Ordinates
-      OpenStreetMapsService.prototype.getMarkersLocation = function (myMarker, tasks) {
-          return __awaiter(this, void 0, void 0, function () {
-              var _this = this;
-              return __generator(this, function (_q) {
-                  return [2 /*return*/, new Promise(function (resolve) { return __awaiter(_this, void 0, void 0, function () {
-                          var markers, promises;
-                          var _this = this;
-                          return __generator(this, function (_q) {
-                              switch (_q.label) {
-                                  case 0:
-                                      markers = [];
-                                      markers.push(myMarker);
-                                      promises = tasks.map(function (task) { return __awaiter(_this, void 0, void 0, function () {
-                                          var marker;
-                                          return __generator(this, function (_q) {
-                                              switch (_q.label) {
-                                                  case 0: return [4 /*yield*/, this.getLocation(task)];
-                                                  case 1:
-                                                      marker = _q.sent();
-                                                      task = Object.assign(Object.assign({}, task), marker);
-                                                      markers.push(task);
-                                                      return [2 /*return*/];
-                                              }
-                                          });
-                                      }); });
-                                      return [4 /*yield*/, Promise.all(promises)];
-                                  case 1:
-                                      _q.sent();
-                                      resolve(markers);
-                                      return [2 /*return*/];
-                              }
-                          });
-                      }); })];
-              });
-          });
+      TaskItemStatusComponent.prototype.ngOnChanges = function (changes) {
+          var verifyChange = function (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 Initialize Open Street Map
-      OpenStreetMapsService.prototype.initializeMap = function () {
-          return __awaiter(this, void 0, void 0, function () {
-              var _q;
-              return __generator(this, function (_r) {
-                  switch (_r.label) {
-                      case 0:
-                          console.log('Running Init Open Street Maps');
-                          _q = this;
-                          return [4 /*yield*/, this.getPosition()];
-                      case 1:
-                          _q.myPosition = _r.sent();
-                          this.map = L__namespace.map('map', {
-                              center: [this.myPosition.lat, this.myPosition.lng],
-                              zoom: 11
-                          });
-                          L__namespace.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(this.map);
-                          return [2 /*return*/];
-                  }
-              });
-          });
+      TaskItemStatusComponent.prototype.setupStatus = function () {
+          var _a, _b;
+          if (kwikidToolkit.checkObjectPathExists(this.config, 'mapping') &&
+              kwikidToolkit.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 : kwikidToolkit.convertSnakeCaseToNormalText(this.status);
+          }
       };
-      // To Add Open Street Marker in Map
-      OpenStreetMapsService.prototype.addMarker = function (_q) {
-          var lat = _q.lat, lng = _q.lng, title = _q.title, color = _q.color;
-          L__namespace.marker([lat, lng], {
-              icon: L__namespace.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
-      OpenStreetMapsService.prototype.plotDirectionsForAllTasks = function (tasks) {
+      return TaskItemStatusComponent;
+  }());
+  /** @nocollapse */ TaskItemStatusComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TaskItemStatusComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+  /** @nocollapse */ TaskItemStatusComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TaskItemStatusComponent, selector: "task-item-status", inputs: { config: "config", status: "status" }, usesOnChanges: true, ngImport: i0__namespace, template: "<div class=\"task-iem-status-container\" [style]=\"styles\">\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__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TaskItemStatusComponent, decorators: [{
+              type: i0.Component,
+              args: [{
+                      selector: 'task-item-status',
+                      templateUrl: './task-item-status.component.html',
+                      styleUrls: ['./task-item-status.component.scss']
+                  }]
+          }], ctorParameters: function () { return []; }, propDecorators: { config: [{
+                  type: i0.Input
+              }], status: [{
+                  type: i0.Input
+              }] } });
+
+  var TaskDetailComponent = /** @class */ (function () {
+      function TaskDetailComponent() {
+          this.config = {};
+          this.taskDetail = {};
+          this.data = [];
+          this.title = undefined;
+          this.taskId = undefined;
+          this.status = undefined;
+          this.labelValuePairConfig = {};
+          this.labelValuePairData = [];
+          this.onClickCloseTaskDetail = new i0.EventEmitter();
+      }
+      TaskDetailComponent.prototype.ngOnInit = function () {
           return __awaiter(this, void 0, void 0, function () {
-              var myMarker, _q, startingPoint, unvisitedWaypoints, optimizedRoute, styles;
-              var _this = this;
-              return __generator(this, function (_r) {
-                  switch (_r.label) {
-                      case 0:
-                          if (!this.map) return [3 /*break*/, 2];
-                          this.allMarkers = [];
-                          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
-                          _q = this;
-                          return [4 /*yield*/, this.getMarkersLocation(myMarker, tasks)];
-                      case 1:
-                          // Create Markers for all Tasks
-                          _q.allMarkers = _r.sent();
-                          startingPoint = this.allMarkers[0];
-                          unvisitedWaypoints = this.allMarkers.slice(1);
-                          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(function (task) {
-                              if (task === null || task === void 0 ? void 0 : task.isValidLocation) {
-                                  var marker = _this.getLocation(task);
-                                  _this.addMarker(marker);
-                              }
-                          });
-                          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();
-                          _r.label = 2;
-                      case 2: return [2 /*return*/, tasks];
-                  }
+              return __generator(this, function (_j) {
+                  this.parseData();
+                  this.parseTaskId();
+                  this.parseSessionStatus();
+                  return [2 /*return*/];
               });
           });
       };
-      // To plot Open Street Direction for selected Task
-      OpenStreetMapsService.prototype.plotDirectionsForSelectedTask = function (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);
-              }
-              var taskMarker = task;
-              // If Location is Available in Task Details
-              if (taskMarker.color != 'red') {
-                  var markers = [this.allMarkers[0], taskMarker];
-                  var 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');
-              }
+      TaskDetailComponent.prototype.ngOnChanges = function (changes) { };
+      TaskDetailComponent.prototype.parseData = function () {
+          var _this = this;
+          var _a, _b, _c, _d, _e, _f, _g, _h;
+          if (kwikidToolkit.checkObjectPathExists(this.config, 'taskUI.details.data') &&
+              kwikidToolkit.isNotEmptyValue(this.config.taskUI.details.data) &&
+              Array.isArray(this.config.taskUI.details.data) &&
+              this.config.taskUI.details.data.length > 0) {
+              var data_1 = [];
+              this.config.taskUI.details.data.map(function (field) {
+                  var value = kwikidToolkit.getObjectValueFromPath(_this.taskDetail.data, field.path);
+                  data_1.push({ label: field.label, value: value });
+              });
+              this.labelValuePairData = data_1;
+              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;
           }
-          // 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;
+      };
+      TaskDetailComponent.prototype.parseSessionStatus = function () {
+          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) &&
+              kwikidToolkit.checkObjectPathExists(this.config, 'taskUI.details.header.taskStatus.path') &&
+              kwikidToolkit.isNotEmptyValue(this.config.taskUI.details.header.taskStatus.path)) {
+              this.status = kwikidToolkit.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);
           }
-          this.fitMapBounds();
-      };
-      // Get Distance & Time of Selected Task
-      OpenStreetMapsService.prototype.getSelectedTaskDistanceAndTime = function () {
-          return this.selectedTaskDistanceAndTime;
-      };
-      // Set Distance & Time of Selected Task
-      OpenStreetMapsService.prototype.setSelectedTaskDistanceAndTime = function () {
-          this.selectedTaskRoutes.on('routesfound', function (e) {
-              var routes = e.routes;
-              var summary = routes[0].summary;
-              var distance = summary.totalDistance / 1000;
-              var time = Math.round((summary.totalTime % 3600) / 60);
-              this.selectedTaskDistanceAndTime = {
-                  distance: distance,
-                  time: time
-              };
-          });
       };
-      // To sort Open Street Maps Task as per nearest distance
-      OpenStreetMapsService.prototype.sortTasksAsPerDistance = function (order, tasks, isMarker) {
-          var sortedTasks = [];
-          for (var i = 0; i < tasks.length; i++) {
-              var title = isMarker ? order[i].title : order[i].title - 1;
-              var task = tasks[title];
-              sortedTasks.push(task);
+      TaskDetailComponent.prototype.parseTaskId = function () {
+          var _a, _b, _c, _d, _e;
+          if (kwikidToolkit.checkObjectPathExists(this.config, 'taskUI.details.header.taskId.path') &&
+              kwikidToolkit.isNotEmptyValue(this.config.taskUI.details.header.taskId.path)) {
+              this.taskId = kwikidToolkit.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);
           }
-          return sortedTasks;
-      };
-      // To set Open Street routes in the maps
-      OpenStreetMapsService.prototype.setRoutes = function (markers, styles) {
-          return L__namespace.Routing.control({
-              waypoints: markers,
-              lineOptions: {
-                  styles: styles
-              },
-              createMarker: function () {
-                  return null;
-              },
-              routeWhileDragging: true
-          }).addTo(this.map);
       };
-      // To set Open Street view point on the map
-      OpenStreetMapsService.prototype.fitMapBounds = function () {
-          var markerLatLngs = this.allMarkers.map(function (marker) { return L__namespace.latLng(marker.lat, marker.lng); });
-          this.map.fitBounds(markerLatLngs);
+      TaskDetailComponent.prototype.handleOnClickClose = function (e) {
+          this.onClickCloseTaskDetail.emit(e);
+      };
+      TaskDetailComponent.prototype.handleOnClickPerformAction = function (e) {
+          alert(e.id + ", Action yet to be added");
       };
-      return OpenStreetMapsService;
+      return TaskDetailComponent;
   }());
-  /** @nocollapse */ OpenStreetMapsService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: OpenStreetMapsService, deps: [{ token: AgentService }, { token: i2__namespace.MapDirectionsService }, { token: i3__namespace.HttpClient }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
-  /** @nocollapse */ OpenStreetMapsService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: OpenStreetMapsService, providedIn: 'root' });
-  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: OpenStreetMapsService, decorators: [{
-              type: i0.Injectable,
+  /** @nocollapse */ TaskDetailComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TaskDetailComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+  /** @nocollapse */ TaskDetailComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.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__namespace.KwikUILabelValuePairComponent, selector: "kwikui-label-value-pair", inputs: ["config", "data", "id"] }], directives: [{ type: i3__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TaskDetailComponent, decorators: [{
+              type: i0.Component,
               args: [{
-                      providedIn: 'root'
+                      selector: 'task-detail',
+                      templateUrl: './task-detail.component.html',
+                      styleUrls: ['./task-detail.component.scss']
                   }]
-          }], ctorParameters: function () { return [{ type: AgentService }, { type: i2__namespace.MapDirectionsService }, { type: i3__namespace.HttpClient }]; }, propDecorators: { directionsRenders: [{
-                  type: i0.ViewChildren,
-                  args: ['directionsRender']
+          }], ctorParameters: function () { return []; }, propDecorators: { config: [{
+                  type: i0.Input
+              }], taskDetail: [{
+                  type: i0.Input
+              }], onClickCloseTaskDetail: [{
+                  type: i0.Output
               }] } });
 
-  var StatusPillComponent = /** @class */ (function () {
-      function StatusPillComponent() {
+  var BottomSheetComponent = /** @class */ (function () {
+      function BottomSheetComponent() {
+          this.isSwipeActive = false;
+          this.swipeDirection = null;
+          this.height = 320; // Initial height of the bottom sheet
+          this.minHeight = 54; // Initial height of the bottom sheet
       }
-      StatusPillComponent.prototype.ngOnInit = function () {
-          if (kwikidToolkit.isEmptyValue(this.status)) {
-              this.status = EStatus.WAITING;
+      BottomSheetComponent.prototype.ngOnInit = function () {
+          return __awaiter(this, void 0, void 0, function () { return __generator(this, function (_a) {
+              return [2 /*return*/];
+          }); });
+      };
+      BottomSheetComponent.prototype.onMouseStart = function (event) {
+          event.preventDefault();
+          this.isSwipeActive = true;
+          this.startY = event.clientY;
+          this.startHeight = this.parentElement.nativeElement.clientHeight;
+      };
+      BottomSheetComponent.prototype.onMouseMove = function (event) {
+          if (this.isSwipeActive) {
+              this.resize(event.clientY);
+          }
+      };
+      BottomSheetComponent.prototype.onMouseEnd = function (event) {
+          this.isSwipeActive = false;
+      };
+      BottomSheetComponent.prototype.onTouchStart = function (event) {
+          event.preventDefault();
+          this.isSwipeActive = true;
+          this.startY = event.touches[0].clientY;
+          this.startHeight = this.parentElement.nativeElement.clientHeight;
+      };
+      BottomSheetComponent.prototype.onTouchMove = function (event) {
+          event.preventDefault(); // Prevent scrolling while dragging
+          if (this.isSwipeActive) {
+              this.resize(event.touches[0].clientY);
           }
       };
-      StatusPillComponent.prototype.getStatusPillClass = function (status) {
-          var newStatus = status.replace('_', '-').replace('_', '-').replace('_', '-');
-          return "status-pill " + newStatus;
+      BottomSheetComponent.prototype.onTouchEnd = function (event) {
+          this.isSwipeActive = false;
       };
-      StatusPillComponent.prototype.getStatusLabel = function (status) {
-          return status.replace('_', ' ').replace('_', ' ').replace('_', ' ');
+      BottomSheetComponent.prototype.resize = function (clientY) {
+          var deltaY = clientY - this.startY;
+          var newHeight = this.startHeight - deltaY;
+          if (newHeight > this.startHeight) {
+              this.swipeDirection = 'UP';
+          }
+          if (newHeight < this.startHeight) {
+              this.swipeDirection = 'DOWN';
+          }
+          var 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";
+          }
+      };
+      BottomSheetComponent.prototype.preventMouseOrTouchEvents = function (event) {
+          event.stopPropagation();
+          return undefined;
       };
-      return StatusPillComponent;
+      BottomSheetComponent.prototype.removeEventListeners = function () {
+          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));
+      };
+      return BottomSheetComponent;
   }());
-  /** @nocollapse */ StatusPillComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: StatusPillComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-  /** @nocollapse */ StatusPillComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: StatusPillComponent, selector: "status-pill", inputs: { status: "status" }, ngImport: i0__namespace, 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__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: StatusPillComponent, decorators: [{
+  /** @nocollapse */ BottomSheetComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: BottomSheetComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+  /** @nocollapse */ BottomSheetComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, template: "<div #parentElement class=\"bottom-sheet\" [style.height.px]=\"height\">\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 *ngIf=\"!isSwipeActive\" src=\"tuiIconHrLarge\"></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__namespace.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }], directives: [{ type: i3__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+  __decorate([
+      kwikidToolkit.logMethod
+  ], BottomSheetComponent.prototype, "onMouseStart", null);
+  __decorate([
+      kwikidToolkit.logMethod
+  ], BottomSheetComponent.prototype, "onMouseEnd", null);
+  __decorate([
+      kwikidToolkit.logMethod
+  ], BottomSheetComponent.prototype, "onTouchStart", null);
+  __decorate([
+      kwikidToolkit.logMethod
+  ], BottomSheetComponent.prototype, "onTouchMove", null);
+  __decorate([
+      kwikidToolkit.logMethod
+  ], BottomSheetComponent.prototype, "onTouchEnd", null);
+  __decorate([
+      kwikidToolkit.logMethod
+  ], BottomSheetComponent.prototype, "preventMouseOrTouchEvents", null);
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: BottomSheetComponent, decorators: [{
               type: i0.Component,
               args: [{
-                      selector: 'status-pill',
-                      templateUrl: './status-pill.component.html',
-                      styleUrls: ['./status-pill.component.css']
+                      selector: 'bottom-sheet',
+                      templateUrl: './bottom-sheet.component.html',
+                      styleUrls: ['./bottom-sheet.component.scss']
                   }]
-          }], propDecorators: { status: [{
-                  type: i0.Input
-              }] } });
+          }], ctorParameters: function () { return []; }, propDecorators: { parentElement: [{
+                  type: i0.ViewChild,
+                  args: ['parentElement', { static: true }]
+              }], onMouseStart: [], onMouseEnd: [], onTouchStart: [], onTouchMove: [], onTouchEnd: [], preventMouseOrTouchEvents: [] } });
+
+  var convertKwikUIDateToStringFormat = function (event) {
+      var year = event.year;
+      var month = padZeroValuesInStart(event.month + 1, 2);
+      var day = padZeroValuesInStart(event.day);
+      return year + "-" + month + "-" + day;
+  };
+  var convertNormalDateToStringFormat = function (value) {
+      var date = value ? new Date(value) : new Date();
+      var year = date.getFullYear();
+      var month = padZeroValuesInStart(date.getMonth() + 1);
+      var day = padZeroValuesInStart(date.getDate());
+      return year + "-" + month + "-" + day;
+  };
+  var padZeroValuesInStart = function (value, digits) {
+      if (digits === void 0) { digits = 2; }
+      return String(value).padStart(digits, '0');
+  };
 
-  var CustomerDetailsComponent = /** @class */ (function () {
-      function CustomerDetailsComponent(agentService, googleMapsService, openStreetMapsService, cdr) {
-          this.agentService = agentService;
-          this.googleMapsService = googleMapsService;
-          this.openStreetMapsService = openStreetMapsService;
-          this.cdr = cdr;
-          this.customer = {};
-          this.viewTaskDetails = [];
-          this.nextStep = new i0.EventEmitter();
-          this.removeTask = new i0.EventEmitter();
+  var sortItems = function (data, key, sortInAscendingOrder) {
+      if (!data || data.length === 0) {
+          return data; // Skip sorting if no items are available
       }
-      CustomerDetailsComponent.prototype.ngOnChanges = function (changes) {
-          this.cdr.detectChanges();
-      };
-      CustomerDetailsComponent.prototype.ngOnInit = function () {
-          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;
+      var sortedData = sortInAscendingOrder
+          ? data.sort(function (a, b) { return (a[key] > b[key] ? 1 : b[key] > a[key] ? -1 : 0); })
+          : data.sort(function (b, a) { return (a[key] > b[key] ? 1 : b[key] > a[key] ? -1 : 0); });
+      return sortedData;
+  };
+
+  var TaskListSearchComponent = /** @class */ (function () {
+      function TaskListSearchComponent() {
+          // Search Text
+          this.searchText = '';
+          this.formGroup = new i2$1.FormGroup({});
+          this.sortInAscendingOrder = true;
+          // Date Range Values
+          this.start_time = undefined;
+          this.end_time = undefined;
+          this.max = new i2.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 i0.EventEmitter();
+          this.onFilterTasksByDate = new i0.EventEmitter();
+          this.onChangeSortFilter = new i0.EventEmitter();
+      }
+      TaskListSearchComponent.prototype.ngOnInit = function () {
+          this.handleSearchAndSortFormControls();
+          this.handleInitialDateRange();
       };
-      CustomerDetailsComponent.prototype.getTaskCreationTime = function (task) {
-          var _a;
-          if (kwikidToolkit.checkObjectPathExists(this.agentService.config, 'dashboard.taskCreationTimePath')) {
-              var time = kwikidToolkit.getObjectValueFromPath(task, this.agentService.config.dashboard.taskCreationTimePath);
-              return this.convertEpochToDate(time);
+      TaskListSearchComponent.prototype.handleOnClickSearchType = function (type) {
+          if (this.activeSearchAction !== type) {
+              this.activeSearchAction = type;
           }
           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);
+              this.activeSearchAction = undefined;
           }
       };
-      CustomerDetailsComponent.prototype.convertEpochToDate = function (epochTime) {
-          if (typeof epochTime == 'string')
-              epochTime = Number(epochTime);
-          var date = new Date(epochTime * 1000); // Convert to milliseconds
-          var day = date.getDate().toString().padStart(2, '0');
-          var month = (date.getMonth() + 1).toString().padStart(2, '0'); // Months are zero-based
-          var year = date.getFullYear().toString();
-          return day + "-" + month + "-" + year;
-      };
-      CustomerDetailsComponent.prototype.getTaskDetails = function (taskData) {
-          return kwikidToolkit.getObjectValueFromPath(this.customer, taskData);
+      TaskListSearchComponent.prototype.handleInitialDateRange = function () {
+          var _a, _b, _c, _d, _e, _f;
+          var 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
+          };
+          var currentDate = new Date();
+          var 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 i2$1.FormControl({
+              value: new i2.TuiDayRange(new i2.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
+          });
       };
-      CustomerDetailsComponent.prototype.goToMaps = function (location) {
-          window.open("" + location, '_blank');
+      TaskListSearchComponent.prototype.handleSearchAndSortFormControls = function () {
+          var _a, _b;
+          this.searchTextFormControl = new i2$1.FormControl('');
+          this.formGroup.addControl('search-text', this.searchTextFormControl);
+          this.sortFilterKeyFormControl = new i2$1.FormControl('');
+          this.formGroup.addControl('sort-filter', this.sortFilterKeyFormControl);
+          this.sortFilterOptions = (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.extendedFlags) === null || _b === void 0 ? void 0 : _b.sortFilterKeys;
+      };
+      TaskListSearchComponent.prototype.handleOnChangeSearchText = function (event) {
+          this.onFilterTasksByText.emit({ text: event.value });
+      };
+      TaskListSearchComponent.prototype.handleOnChangeDateRange = function (event) {
+          this.handleChangeDateRangeFormat(event);
+          this.onFilterTasksByDate.emit({
+              start_time: this.start_time,
+              end_time: this.end_time
+          });
       };
-      CustomerDetailsComponent.prototype.handleOnClickNext = function (e) {
-          this.nextStep.emit(e);
+      TaskListSearchComponent.prototype.handleOnChangeSortFilter = function (event) {
+          this.onChangeSortFilter.emit({
+              sortFilterKey: this.sortFilterKeyFormControl.value,
+              sortFilterOrder: this.sortInAscendingOrder
+          });
       };
-      CustomerDetailsComponent.prototype.close = function () {
-          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);
-          }
+      TaskListSearchComponent.prototype.handleOnClickChangeSortOrder = function () {
+          this.sortInAscendingOrder = !this.sortInAscendingOrder;
+          this.handleOnChangeSortFilter(false);
       };
-      CustomerDetailsComponent.prototype.handleOnClickRemoveTask = function (task) {
-          this.removeTask.emit(task);
+      TaskListSearchComponent.prototype.handleChangeDateRangeFormat = function (event) {
+          this.start_time = convertKwikUIDateToStringFormat(event.value.from);
+          this.end_time = convertKwikUIDateToStringFormat(event.value.to);
       };
-      return CustomerDetailsComponent;
+      return TaskListSearchComponent;
   }());
-  /** @nocollapse */ CustomerDetailsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CustomerDetailsComponent, deps: [{ token: AgentService }, { token: GoogleMapsService }, { token: OpenStreetMapsService }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  /** @nocollapse */ CustomerDetailsComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.KwikUILabelValuePairComponent, selector: "kwikui-label-value-pair", inputs: ["field", "data"] }, { type: StatusPillComponent, selector: "status-pill", inputs: ["status"] }, { type: i4__namespace.KwikUIButtonComponent, selector: "kwikui-button", inputs: ["appearance", "class", "disabled", "icon", "iconRight", "id", "label", "shape", "showLoader", "size", "styles", "type", "pseudoHover"], outputs: ["onClick"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.Default });
-  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CustomerDetailsComponent, decorators: [{
+  /** @nocollapse */ TaskListSearchComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TaskListSearchComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+  /** @nocollapse */ TaskListSearchComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, template: "<div class=\"task-list-search-container\" [formGroup]=\"formGroup\">\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 class=\"task-list-search-action\" *ngIf=\"activeSearchAction\">\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__namespace.KwikUIButtonComponent, selector: "kwikui-button", inputs: ["appearance", "class", "disabled", "icon", "iconRight", "id", "label", "shape", "showLoader", "size", "styles", "type", "pseudoHover"], outputs: ["onClick"] }, { type: i1__namespace.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__namespace.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__namespace.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__namespace$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2__namespace$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2__namespace$1.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i2__namespace$1.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+  __decorate([
+      kwikidToolkit.logMethod
+  ], TaskListSearchComponent.prototype, "handleOnChangeSearchText", null);
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TaskListSearchComponent, decorators: [{
               type: i0.Component,
               args: [{
-                      selector: 'customer-details',
-                      templateUrl: './customer-details.component.html',
-                      styleUrls: ['./customer-details.component.scss'],
-                      changeDetection: i0.ChangeDetectionStrategy.Default
+                      selector: 'task-list-search',
+                      templateUrl: './task-list-search.component.html',
+                      styleUrls: ['./task-list-search.component.scss'],
+                      changeDetection: i0.ChangeDetectionStrategy.OnPush
                   }]
-          }], ctorParameters: function () { return [{ type: AgentService }, { type: GoogleMapsService }, { type: OpenStreetMapsService }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { customer: [{
-                  type: i0.Input
-              }], config: [{
+          }], ctorParameters: function () { return []; }, propDecorators: { config: [{
                   type: i0.Input
-              }], nextStep: [{
+              }], onFilterTasksByText: [{
                   type: i0.Output
-              }], removeTask: [{
+              }], onFilterTasksByDate: [{
                   type: i0.Output
-              }] } });
+              }], onChangeSortFilter: [{
+                  type: i0.Output
+              }], handleOnChangeSearchText: [] } });
 
-  var CustomerTileComponent = /** @class */ (function () {
-      function CustomerTileComponent(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 i0.EventEmitter();
-          this.removeTask = new i0.EventEmitter();
+  var PREVIEW_DATA_DEFAULT_CONFIG = {
+      separator: ':',
+      orientation: 'horizontal',
+      placeholder: '-',
+      customStyles: {
+          label: {},
+          value: {},
+          placeholder: {},
+          container: {}
       }
-      CustomerTileComponent.prototype.windowResizeWatcher = function () {
-          if (this.hostElement.nativeElement.offsetWidth < 600) {
-              this.isMobileView = true;
+  };
+
+  var TaskItemComponent = /** @class */ (function () {
+      function TaskItemComponent() {
+          this.config = {};
+          this.data = {};
+          this.header = '';
+          this.status = '';
+          this.previewConfig = {};
+          this.previewData = [];
+          this.onClickTaskItem = new i0.EventEmitter();
+          this.onClickTaskItemViewDetail = new i0.EventEmitter();
+          this.onClickPerformAction = new i0.EventEmitter();
+      }
+      TaskItemComponent.prototype.ngOnInit = function () {
+          return __awaiter(this, void 0, void 0, function () {
+              return __generator(this, function (_g) {
+                  this.parseHeader();
+                  this.parseSessionStatus();
+                  this.parsePreviewData();
+                  return [2 /*return*/];
+              });
+          });
+      };
+      TaskItemComponent.prototype.parseHeader = function () {
+          var _a, _b, _c, _d;
+          if (kwikidToolkit.checkObjectPathExists(this.config, 'taskUI.header.taskId.path') &&
+              kwikidToolkit.isNotEmptyValue(this.config.taskUI.header.taskId.path)) {
+              this.header = kwikidToolkit.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);
           }
-          else {
-              this.isMobileView = false;
+          if (kwikidToolkit.checkObjectPathExists(this.config, 'taskUI.header.taskId.maxLengthToShow') &&
+              kwikidToolkit.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) +
+                      '...';
           }
       };
-      CustomerTileComponent.prototype.ngOnInit = function () {
-          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;
+      TaskItemComponent.prototype.parseSessionStatus = function () {
+          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) &&
+              kwikidToolkit.checkObjectPathExists(this.config, 'taskUI.header.taskStatus.path') &&
+              kwikidToolkit.isNotEmptyValue(this.config.taskUI.header.taskStatus.path)) {
+              this.status = kwikidToolkit.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);
+          }
       };
-      CustomerTileComponent.prototype.openDetails = function () {
+      TaskItemComponent.prototype.parsePreviewData = function () {
+          var _this = this;
           var _a, _b, _c, _d;
-          var 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);
-              }
+          if (kwikidToolkit.checkObjectPathExists(this.config, 'taskUI.preview.data') &&
+              kwikidToolkit.isNotEmptyValue(this.config.taskUI.preview.data) &&
+              Array.isArray(this.config.taskUI.preview.data) &&
+              this.config.taskUI.preview.data.length > 0) {
+              var previewData_1 = [];
+              this.config.taskUI.preview.data.map(function (field) {
+                  var value = kwikidToolkit.getObjectValueFromPath(_this.data, field.path);
+                  previewData_1.push({ label: field.label, value: value });
+              });
+              this.previewData = previewData_1;
+              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;
           }
       };
-      CustomerTileComponent.prototype.goToMaps = function (location) {
-          window.open("" + location, '_blank');
+      TaskItemComponent.prototype.handleOnClickTaskItem = function (e, taskItemData) {
+          this.onClickTaskItem.emit({
+              data: taskItemData
+          });
       };
-      CustomerTileComponent.prototype.handleOnClickNext = function (e) {
-          this.nextStep.emit(e);
+      TaskItemComponent.prototype.handleOnClickTaskItemViewDetail = function (e, taskItemData) {
+          this.onClickTaskItemViewDetail.emit({
+              data: taskItemData
+          });
       };
-      CustomerTileComponent.prototype.handleOnClickRemoveTask = function (task) {
-          this.removeTask.emit(task);
+      TaskItemComponent.prototype.handleOnClickPerformAction = function (e, action) {
+          this.onClickPerformAction.emit({
+              action: action
+          });
       };
-      return CustomerTileComponent;
+      return TaskItemComponent;
   }());
-  /** @nocollapse */ CustomerTileComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CustomerTileComponent, deps: [{ token: GoogleMapsService }, { token: OpenStreetMapsService }, { token: AgentService }, { token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  /** @nocollapse */ CustomerTileComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.KwikUILabelValuePairComponent, selector: "kwikui-label-value-pair", inputs: ["field", "data"] }, { type: StatusPillComponent, selector: "status-pill", inputs: ["status"] }, { type: i4__namespace.KwikUIButtonComponent, selector: "kwikui-button", inputs: ["appearance", "class", "disabled", "icon", "iconRight", "id", "label", "shape", "showLoader", "size", "styles", "type", "pseudoHover"], outputs: ["onClick"] }], directives: [{ type: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CustomerTileComponent, decorators: [{
+  /** @nocollapse */ TaskItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TaskItemComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+  /** @nocollapse */ TaskItemComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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        \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__namespace$1.TuiAccordionComponent, selector: "tui-accordion", inputs: ["closeOthers", "rounded"] }, { type: i1__namespace$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__namespace.KwikUILabelValuePairComponent, selector: "kwikui-label-value-pair", inputs: ["config", "data", "id"] }, { type: i1__namespace.KwikUIButtonComponent, selector: "kwikui-button", inputs: ["appearance", "class", "disabled", "icon", "iconRight", "id", "label", "shape", "showLoader", "size", "styles", "type", "pseudoHover"], outputs: ["onClick"] }], directives: [{ type: i3__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$1.TuiAccordionItemContentDirective, selector: "ng-template[tuiAccordionItemContent]" }] });
+  __decorate([
+      kwikidToolkit.logMethod
+  ], TaskItemComponent.prototype, "handleOnClickTaskItem", null);
+  __decorate([
+      kwikidToolkit.logMethod
+  ], TaskItemComponent.prototype, "handleOnClickTaskItemViewDetail", null);
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TaskItemComponent, decorators: [{
               type: i0.Component,
               args: [{
-                      selector: 'customer-tile',
-                      templateUrl: './customer-tile.component.html',
-                      styleUrls: ['./customer-tile.component.scss']
+                      selector: 'task-item',
+                      templateUrl: './task-item.component.html',
+                      styleUrls: ['./task-item.component.scss']
                   }]
-          }], ctorParameters: function () { return [{ type: GoogleMapsService }, { type: OpenStreetMapsService }, { type: AgentService }, { type: i0__namespace.ElementRef }]; }, propDecorators: { windowResizeWatcher: [{
-                  type: i0.HostListener,
-                  args: ['window:resize', ['$event']]
-              }], customer: [{
+          }], ctorParameters: function () { return []; }, propDecorators: { config: [{
                   type: i0.Input
-              }], index: [{
+              }], data: [{
                   type: i0.Input
-              }], config: [{
-                  type: i0.Input
-              }], nextStep: [{
+              }], onClickTaskItem: [{
                   type: i0.Output
-              }], removeTask: [{
+              }], onClickTaskItemViewDetail: [{
                   type: i0.Output
-              }] } });
+              }], onClickPerformAction: [{
+                  type: i0.Output
+              }], handleOnClickTaskItem: [], handleOnClickTaskItemViewDetail: [] } });
 
-  var Ng2SearchPipe = /** @class */ (function () {
-      function Ng2SearchPipe() {
+  var TaskListComponent = /** @class */ (function () {
+      function TaskListComponent(loaderService) {
+          this.loaderService = loaderService;
+          this.config = {};
+          this.taskItems = [];
+          this.onClickTaskItemViewDetail = new i0.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 i2.TuiDay(new Date().getFullYear(), new Date().getMonth(), new Date().getDate());
+          this.formGroup = new i2$1.FormGroup({});
+          // Event Emitters
+          this.onGetTaskList = new i0.EventEmitter();
       }
-      /**
-       * @param items object from array
-       * @param term term's search
-       * @param excludes array of strings which will ignored during search
-       */
-      Ng2SearchPipe.prototype.transform = function (items, term, excludes) {
-          if (excludes === void 0) { excludes = []; }
-          if (!term || !items)
-              return items;
-          return Ng2SearchPipe.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
-       *
-       */
-      Ng2SearchPipe.filter = function (items, term, excludes) {
-          var toCompare = term.toLowerCase();
-          function checkInside(item, term) {
-              if (typeof item === 'string' &&
-                  item.toString().toLowerCase().includes(toCompare)) {
-                  return true;
-              }
-              for (var 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(function (item) {
-              return checkInside(item, term);
-          });
-      };
-      return Ng2SearchPipe;
-  }());
-  /** @nocollapse */ Ng2SearchPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: Ng2SearchPipe, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
-  /** @nocollapse */ Ng2SearchPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: Ng2SearchPipe, name: "filter", pure: false });
-  /** @nocollapse */ Ng2SearchPipe.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: Ng2SearchPipe });
-  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: Ng2SearchPipe, decorators: [{
-              type: i0.Pipe,
-              args: [{
-                      name: 'filter',
-                      pure: false
-                  }]
-          }, {
-              type: i0.Injectable
-          }] });
-
-  var CustomerListComponent = /** @class */ (function () {
-      function CustomerListComponent(googleMapsService, openStreetMapsService, agentService) {
-          this.googleMapsService = googleMapsService;
-          this.openStreetMapsService = openStreetMapsService;
-          this.agentService = agentService;
-          this.nextStep = new i0.EventEmitter();
-          this.removeTask = new i0.EventEmitter();
-          this.filterTaskList = new i0.EventEmitter();
-          this.filteredData = [];
-          this.formGroup = new i7.FormGroup({});
-          this.max = new i10.TuiDay(new Date().getFullYear(), new Date().getMonth(), new Date().getDate());
-      }
-      CustomerListComponent.prototype.ngOnInit = function () {
+      TaskListComponent.prototype.ngOnInit = function () {
           return __awaiter(this, void 0, void 0, function () {
-              return __generator(this, function (_f) {
-                  this.setDateRange();
+              return __generator(this, function (_g) {
+                  this.toggleLoader(true);
+                  // this.taskItems = Array.from({ length: 1000 }, (_, i) =>
+                  //   String(`test_${i}`)
+                  // );
+                  this.handleInitialDateRange();
                   return [2 /*return*/];
               });
           });
       };
-      CustomerListComponent.prototype.setDateRange = function () {
-          var _a, _b, _c, _d, _e;
-          var searchDateStart = (_b = (_a = this.config.dashboard) === null || _a === void 0 ? void 0 : _a.searchDateStart) !== null && _b !== void 0 ? _b : {
+      TaskListComponent.prototype.ngOnChanges = function (changes) {
+          var verifyChange = function (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();
+          }
+      };
+      TaskListComponent.prototype.handleOnTaskItemsChange = function () {
+          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);
+      };
+      TaskListComponent.prototype.handleInitialDateRange = function () {
+          var _a, _b, _c, _d, _e, _f;
+          var 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
           };
           var currentDate = new Date();
-          var 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 i7.FormControl({
-              value: new i10.TuiDayRange(new i10.TuiDay(startDate.getFullYear(), startDate.getMonth(), startDate.getDate()), this.max),
+          var 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 i2$1.FormControl({
+              value: new i2.TuiDayRange(new i2.TuiDay(startDate.getFullYear(), startDate.getMonth(), startDate.getDate()), this.max),
               disabled: false
           });
-          this.formGroup.addControl('dateRange', this.dateRangeFormControl);
-          this.searchFormControl = new i7.FormControl('');
-          this.formGroup.addControl('search', this.searchFormControl);
+          this.formGroup.addControl('searchDate', this.searchDataFormControl);
+          this.searchTextFormControl = new i2$1.FormControl('');
+          this.formGroup.addControl('searchText', this.searchTextFormControl);
+          this.handleOnGetTaskItems();
+      };
+      TaskListComponent.prototype.handleOnFilterTasksByText = function (event) {
+          this.searchText = event === null || event === void 0 ? void 0 : event.text;
+          this.handleOnTaskItemsChange();
+      };
+      TaskListComponent.prototype.handleOnFilterTasksByDate = function (event) {
+          this.start_time = event.start_time;
+          this.end_time = event.end_time;
+          this.handleOnGetTaskItems();
+      };
+      TaskListComponent.prototype.handleOnGetTaskItems = function () {
+          this.toggleLoader(true);
+          this.onGetTaskList.emit({
+              from_date: this.start_time,
+              to_date: this.end_time
+          });
       };
-      CustomerListComponent.prototype.setUpMaps = function () {
+      TaskListComponent.prototype.handleOnChangeSortFilter = function (event) {
           var _a;
-          return __awaiter(this, void 0, void 0, function () {
-              return __generator(this, function (_f) {
-                  switch (_f.label) {
-                      case 0:
-                          if (!this.config.dashboard.isShowMaps) return [3 /*break*/, 4];
-                          if (!(((_a = this.config.dashboard) === null || _a === void 0 ? void 0 : _a.mapType) == 'open-street')) return [3 /*break*/, 2];
-                          return [4 /*yield*/, this.openStreetMapsService.initializeMap()];
-                      case 1:
-                          _f.sent();
-                          return [3 /*break*/, 4];
-                      case 2: return [4 /*yield*/, this.googleMapsService.initializeMap()];
-                      case 3:
-                          _f.sent();
-                          _f.label = 4;
-                      case 4: return [2 /*return*/];
-                  }
-              });
-          });
+          if (event && kwikidToolkit.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();
+          }
       };
-      CustomerListComponent.prototype.setCustomersList = function () {
-          return __awaiter(this, void 0, void 0, function () {
-              var _f;
-              return __generator(this, function (_g) {
-                  switch (_g.label) {
-                      case 0:
-                          if (!this.config.dashboard.isShowMaps) return [3 /*break*/, 2];
-                          _f = this;
-                          return [4 /*yield*/, this.plotMarkers(this.customers)];
-                      case 1:
-                          _f.filteredData = _g.sent();
-                          return [3 /*break*/, 3];
-                      case 2:
-                          this.filteredData = this.customers;
-                          _g.label = 3;
-                      case 3: return [2 /*return*/];
-                  }
-              });
-          });
+      TaskListComponent.prototype.handleOnSortTaskItems = function (key, order) {
+          var sortedTaskItems = sortItems(this.taskItems, key, order);
+          this.taskItems = sortedTaskItems;
+          this.handleOnTaskItemsChange();
       };
-      CustomerListComponent.prototype.ngAfterViewInit = function () {
-          var _this = this;
-          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(function () { return __awaiter(_this, void 0, void 0, function () {
-              return __generator(this, function (_f) {
-                  switch (_f.label) {
-                      case 0: return [4 /*yield*/, this.setUpMaps()];
-                      case 1:
-                          _f.sent();
-                          return [4 /*yield*/, this.setCustomersList()];
-                      case 2:
-                          _f.sent();
-                          return [2 /*return*/];
-                  }
-              });
-          }); }, 1000);
+      TaskListComponent.prototype.handleOnClickTaskItemViewDetail = function (e) {
+          this.onClickTaskItemViewDetail.emit(e);
       };
-      CustomerListComponent.prototype.ngOnChanges = function () {
-          return __awaiter(this, void 0, void 0, function () {
-              return __generator(this, function (_f) {
-                  switch (_f.label) {
-                      case 0: return [4 /*yield*/, this.setCustomersList()];
-                      case 1:
-                          _f.sent();
-                          return [2 /*return*/];
-                  }
+      TaskListComponent.prototype.handleOnClickChangePaginationIndex = function (indexOfPage) {
+          if (indexOfPage >= 0) {
+              this.paginationIndex = indexOfPage;
+              this.activePageItems = this.taskItems.slice(this.paginationIndex * this.itemPerPage, this.paginationIndex * this.itemPerPage + this.itemPerPage);
+          }
+      };
+      TaskListComponent.prototype.handleOnFilterTaskItems = function () {
+          var lowerCaseSearchText = this.searchText.toLowerCase();
+          this.filteredItems = this.taskItems.filter(function (item) {
+              return Object.values(item).some(function (value) {
+                  // Ensure the value can be converted to string and check if it includes the search text
+                  return value != null &&
+                      value.toString().toLowerCase().includes(lowerCaseSearchText);
               });
           });
       };
-      CustomerListComponent.prototype.handleOnClickNext = function (e) {
-          this.nextStep.emit(e);
-      };
-      CustomerListComponent.prototype.getDate = function (d) {
-          var date = d ? new Date(d) : new Date();
-          var year = date.getFullYear();
-          var month = date.getMonth() + 1;
-          var day = date.getDate();
-          if (month < 10)
-              month = '0' + month;
-          if (day < 10)
-              day = '0' + day;
-          var today = year + "-" + month + "-" + day;
-          return today;
-      };
-      CustomerListComponent.prototype.plotMarkers = function (customers) {
-          var _a, _b;
+      TaskListComponent.prototype.trackByFn = function (index, item) {
+          return index; // or unique identifier if available
+      };
+      TaskListComponent.prototype.toggleLoader = function (loader, message) {
+          if (message === void 0) { message = undefined; }
           return __awaiter(this, void 0, void 0, function () {
-              var _this = this;
-              return __generator(this, function (_f) {
-                  switch (_f.label) {
-                      case 0:
-                          if (!((_a = this.config.dashboard) === null || _a === void 0 ? void 0 : _a.isPlotCompletedTaskMarkers)) {
-                              customers = customers.filter(function (customer) {
-                                  return _this.agentService.canPlotMarkers(customer.session_status);
-                              });
-                          }
-                          if (!(((_b = this.config.dashboard) === null || _b === void 0 ? void 0 : _b.mapType) == 'open-street')) return [3 /*break*/, 2];
-                          return [4 /*yield*/, this.openStreetMapsService.plotDirectionsForAllTasks(customers)];
-                      case 1:
-                          customers = _f.sent();
-                          return [3 /*break*/, 4];
-                      case 2: return [4 /*yield*/, this.googleMapsService.plotDirectionsForAllTasks(customers)];
-                      case 3:
-                          customers = _f.sent();
-                          _f.label = 4;
-                      case 4: return [2 /*return*/, customers];
+              return __generator(this, function (_g) {
+                  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;
                   }
+                  return [2 /*return*/];
               });
           });
       };
-      CustomerListComponent.prototype.getTuiDate = function (event) {
-          var year = event.year;
-          var month = event.month + 1;
-          var date = event.day;
-          month = month < 10 ? '0' + month : month;
-          date = date < 10 ? '0' + date : date;
-          return year + "-" + month + "-" + date;
-      };
-      CustomerListComponent.prototype.onDateRangeChange = function (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
-          });
-      };
-      CustomerListComponent.prototype.onSearchFilter = function (event) {
-          this.searchText = event.value;
-      };
-      CustomerListComponent.prototype.handleOnClickRemoveTask = function (task) {
-          this.removeTask.emit(task);
-      };
-      CustomerListComponent.prototype.handleOnFilterTaskList = function (filter) {
-          this.filterTaskList.emit(filter);
-      };
-      return CustomerListComponent;
+      return TaskListComponent;
   }());
-  /** @nocollapse */ CustomerListComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CustomerListComponent, deps: [{ token: GoogleMapsService }, { token: OpenStreetMapsService }, { token: AgentService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  /** @nocollapse */ CustomerListComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.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__namespace.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__namespace.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__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i7__namespace.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7__namespace.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i7__namespace.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i5__namespace.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { type: i5__namespace.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }], pipes: { "filter": Ng2SearchPipe } });
-  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: CustomerListComponent, decorators: [{
+  /** @nocollapse */ TaskListComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TaskListComponent, deps: [{ token: i1__namespace.KwikUILoaderService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+  /** @nocollapse */ TaskListComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.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__namespace$1.TuiPaginationComponent, selector: "tui-pagination", inputs: ["length", "size", "disabled", "activePadding", "sidePadding", "content", "index"], outputs: ["indexChange"] }], directives: [{ type: i3__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+  __decorate([
+      kwikidToolkit.logMethod
+  ], TaskListComponent.prototype, "ngOnChanges", null);
+  __decorate([
+      kwikidToolkit.logMethod
+  ], TaskListComponent.prototype, "handleOnTaskItemsChange", null);
+  __decorate([
+      kwikidToolkit.logMethod
+  ], TaskListComponent.prototype, "handleOnClickTaskItemViewDetail", null);
+  __decorate([
+      kwikidToolkit.logMethod
+  ], TaskListComponent.prototype, "handleOnClickChangePaginationIndex", null);
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TaskListComponent, decorators: [{
               type: i0.Component,
               args: [{
-                      selector: 'customer-list',
-                      templateUrl: './customer-list.component.html',
-                      styleUrls: ['./customer-list.component.css']
+                      selector: 'task-list',
+                      templateUrl: './task-list.component.html',
+                      styleUrls: ['./task-list.component.scss'],
+                      changeDetection: i0.ChangeDetectionStrategy.OnPush
                   }]
-          }], ctorParameters: function () { return [{ type: GoogleMapsService }, { type: OpenStreetMapsService }, { type: AgentService }]; }, propDecorators: { customers: [{
+          }], ctorParameters: function () { return [{ type: i1__namespace.KwikUILoaderService }]; }, propDecorators: { config: [{
                   type: i0.Input
-              }], config: [{
+              }], taskItems: [{
                   type: i0.Input
-              }], nextStep: [{
-                  type: i0.Output
-              }], removeTask: [{
+              }], onClickTaskItemViewDetail: [{
                   type: i0.Output
-              }], filterTaskList: [{
+              }], onGetTaskList: [{
                   type: i0.Output
-              }] } });
+              }], ngOnChanges: [], handleOnTaskItemsChange: [], handleOnClickTaskItemViewDetail: [], handleOnClickChangePaginationIndex: [] } });
 
-  var KwikIDAgentDashboardComponent = /** @class */ (function () {
-      function KwikIDAgentDashboardComponent(googleMapsService, agentService, httpClient, hostElement, dialogService) {
-          this.googleMapsService = googleMapsService;
-          this.agentService = agentService;
-          this.httpClient = httpClient;
+  var LayoutBodyComponent = /** @class */ (function () {
+      function LayoutBodyComponent(hostElement, previewDialogService, dialogs) {
           this.hostElement = hostElement;
-          this.dialogService = dialogService;
+          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 i0.EventEmitter();
+          this.onGetTaskList = new i0.EventEmitter();
+          this.apiCallResponse = {};
           this.config = {};
+          this.userConfig = {};
+          this.agentInfo = {};
           this.taskList = [];
-          this.nextStep = new i0.EventEmitter();
-          this.addTask = new i0.EventEmitter();
-          this.removeTask = new i0.EventEmitter();
-          this.filterTaskList = new i0.EventEmitter();
-          this.loading = true;
-          this.console = console;
-          this.open = false;
-          this.allFormsData = {};
-          this.String = String;
+          this.isShowFullTaskDetails = false;
+          this.isActiveSidebar = true;
+          this.activeTaskDetail = null;
       }
-      KwikIDAgentDashboardComponent.prototype.windowResizeWatcher = function () {
-          if (this.hostElement.nativeElement.offsetWidth < 600) {
+      // The final value should be provided to service, so that it can be used in all components
+      LayoutBodyComponent.prototype.windowResizeWatcher = function () {
+          if (this.hostElement.nativeElement.offsetWidth < 720) {
               this.isMobileView = true;
-              this.agentService.isMobileView = true;
           }
           else {
               this.isMobileView = false;
-              this.agentService.isMobileView = false;
           }
       };
-      KwikIDAgentDashboardComponent.prototype.ngOnInit = function () {
-          var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-          return __awaiter(this, void 0, void 0, function () {
-              var _this = this;
-              return __generator(this, function (_o) {
-                  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' &&
-                      kwikidToolkit.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(function (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(function () {
-                      _this.windowResizeWatcher();
-                  }, 1000);
-                  return [2 /*return*/];
-              });
-          });
+      LayoutBodyComponent.prototype.ngOnInit = function () {
+          this.windowResizeWatcher();
       };
-      // Load Google Maps
-      KwikIDAgentDashboardComponent.prototype.loadMaps = function (apiKey) {
-          var 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(operators.map(function () { return true; }), operators.catchError(function () {
-              console.error('Error loading Google Maps JavaScript API.');
-              return rxjs.of(false);
-          }));
+      LayoutBodyComponent.prototype.ngOnChanges = function (changes) {
+          var e_1, _c;
+          var verifyChange = function (key) {
+              return changes.hasOwnProperty(key) && !changes[key].firstChange;
+          };
+          try {
+              for (var _d = __values(Object.entries(changes)), _e = _d.next(); !_e.done; _e = _d.next()) {
+                  var change = _e.value;
+                  var key = change[0];
+                  var value = change[1].currentValue;
+              }
+          }
+          catch (e_1_1) { e_1 = { error: e_1_1 }; }
+          finally {
+              try {
+                  if (_e && !_e.done && (_c = _d.return)) _c.call(_d);
+              }
+              finally { if (e_1) throw e_1.error; }
+          }
+          if (verifyChange('taskList')) {
+              this.taskList = changes.taskList.currentValue;
+          }
       };
-      KwikIDAgentDashboardComponent.prototype.handleOnClickNext = function (e) {
-          this.nextStep.emit(e);
+      LayoutBodyComponent.prototype.handleShowingFullTaskDetails = function () {
+          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;
+          }
       };
-      KwikIDAgentDashboardComponent.prototype.handleOnClickAddTask = function (task) {
-          this.addTask.emit(task);
+      LayoutBodyComponent.prototype.handleOnClickTaskItemViewDetail = function (e) {
+          this.handleShowingFullTaskDetails();
+          this.handleOnClickCloseTaskDetail(e);
+          this.activeTaskDetail = e;
       };
-      KwikIDAgentDashboardComponent.prototype.handleOnClickRemoveTask = function (task) {
-          this.removeTask.emit(task);
+      LayoutBodyComponent.prototype.handleOnClickCloseTaskDetail = function (e) {
+          this.activeTaskDetail = null;
       };
-      KwikIDAgentDashboardComponent.prototype.handleOnFilterTaskList = function (filter) {
-          this.filterTaskList.emit(filter);
+      LayoutBodyComponent.prototype.handleOnClickToggleSidebar = function (e) {
+          this.isActiveSidebar = !this.isActiveSidebar;
       };
-      KwikIDAgentDashboardComponent.prototype.refresh = function () {
-          window.location.reload();
+      LayoutBodyComponent.prototype.handleOnClickApiCall = function (e) {
+          this.onClickApiCall.emit(e);
       };
-      KwikIDAgentDashboardComponent.prototype.onClick = function () {
-          this.open = !this.open;
+      LayoutBodyComponent.prototype.handleOnGetTaskList = function (event) {
+          this.onGetTaskList.emit(event);
       };
-      KwikIDAgentDashboardComponent.prototype.onObscured = function (obscured) {
-          if (obscured) {
-              this.open = false;
-          }
+      LayoutBodyComponent.prototype.handleOnClickPrimaryAction = function (e) {
+          var _a, _b;
+          return __awaiter(this, void 0, void 0, function () {
+              var _c, _d, _e;
+              var _this = this;
+              return __generator(this, function (_f) {
+                  switch (_f.label) {
+                      case 0:
+                          _c = e.type;
+                          switch (_c) {
+                              case 'POPUP_FORM': return [3 /*break*/, 1];
+                              case 'PAGE_FORM': return [3 /*break*/, 4];
+                              case 'action_3': return [3 /*break*/, 7];
+                          }
+                          return [3 /*break*/, 8];
+                      case 1:
+                          _d = this;
+                          return [4 /*yield*/, fetch((_a = e === null || e === void 0 ? void 0 : e.props) === null || _a === void 0 ? void 0 : _a.formUrl)];
+                      case 2: return [4 /*yield*/, (_f.sent()).json()];
+                      case 3:
+                          _d.popupFormConfig = _f.sent();
+                          console.log('popupFormConfig', this.popupFormConfig);
+                          this.previewDialogRef = this.previewDialogService
+                              .open(this.preview || '')
+                              .subscribe({
+                              next: function (data) {
+                                  _this.popupFormCallback = {
+                                      popupFormData: data['data'],
+                                      popupFormConfig: data['formConfig']
+                                  };
+                                  _this.popupFormConfig = {};
+                                  _this.previewDialogRef.complete();
+                              },
+                              error: function () {
+                                  _this.popupFormCallback = {
+                                      popupFormData: {},
+                                      popupFormConfig: _this.popupFormConfig
+                                  };
+                                  _this.popupFormConfig = {};
+                                  console.info('Preview error');
+                              },
+                              complete: function () {
+                                  console.info('Preview closed');
+                              }
+                          });
+                          return [3 /*break*/, 9];
+                      case 4:
+                          _e = this;
+                          return [4 /*yield*/, fetch((_b = e === null || e === void 0 ? void 0 : e.props) === null || _b === void 0 ? void 0 : _b.formUrl)];
+                      case 5: return [4 /*yield*/, (_f.sent()).json()];
+                      case 6:
+                          _e.pageFormConfig = _f.sent();
+                          return [3 /*break*/, 9];
+                      case 7: return [3 /*break*/, 9];
+                      case 8: return [3 /*break*/, 9];
+                      case 9: return [2 /*return*/];
+                  }
+              });
+          });
       };
-      KwikIDAgentDashboardComponent.prototype.onActiveZone = function (active) {
-          this.open = active && this.open;
+      LayoutBodyComponent.prototype.handleOnClickSaveForm = function (e, eventType) {
+          switch (eventType) {
+              case 'POPUP_FORM':
+                  this.previewDialogRef.next(e);
+                  break;
+              case 'PAGE_FORM':
+                  this.pageFormConfig = undefined;
+                  break;
+              default:
+                  break;
+          }
       };
-      KwikIDAgentDashboardComponent.prototype.showDialog = function (content) {
-          this.dialogService
-              .open(content, { closeable: false, dismissible: false })
-              .subscribe();
+      return LayoutBodyComponent;
+  }());
+  /** @nocollapse */ LayoutBodyComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: LayoutBodyComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i8.TuiPreviewDialogService }, { token: i3.TuiDialogService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+  /** @nocollapse */ LayoutBodyComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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 id=\"main-container\" [class.is-desktop]=\"!isMobileView\">\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 id=\"map-view-wrapper\" [class.is-desktop]=\"!isMobileView\">\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 #preview let-preview>\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 #content let-context>\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__namespace.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { type: PrimaryActionsComponent, selector: "primary-actions", inputs: ["primaryActionsConfig"], outputs: ["onClickPrimaryAction"] }, { type: i3__namespace$2.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__namespace.TuiPreviewComponent, selector: "tui-preview", inputs: ["zoomable", "rotatable"] }, { type: i3__namespace.TuiButtonComponent, selector: "button[tuiButton], button[tuiIconButton], a[tuiButton], a[tuiIconButton]", inputs: ["appearance", "disabled", "icon", "iconRight", "shape", "showLoader", "size"] }], directives: [{ type: i3__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i8__namespace.TuiPreviewActionDirective, selector: "[tuiPreviewAction]" }], animations: [
+          animations.trigger('taskDetailInOut', [
+              animations.transition(':enter', [
+                  animations.style({ transform: 'translateY(100%)' }),
+                  animations.animate(150)
+              ]),
+              animations.transition(':leave', [
+                  animations.animate(150, animations.style({ transform: 'translateY(100%)' }))
+              ])
+          ]),
+          animations.trigger('taskDetail2InOut', [
+              animations.transition(':enter', [
+                  animations.style({ transform: 'translateX(100%)' }),
+                  animations.animate(150)
+              ]),
+              animations.transition(':leave', [
+                  animations.animate(150, animations.style({ transform: 'translateX(100%)' }))
+              ])
+          ]),
+          animations.trigger('taskListInOut', [
+              animations.transition(':enter', [
+                  animations.style({ transform: 'translateY(100%)' }),
+                  animations.animate(0)
+              ]),
+              animations.transition(':leave', [
+                  animations.animate(0, animations.style({ transform: 'translateY(100%)' }))
+              ])
+          ])
+      ] });
+  __decorate([
+      kwikidToolkit.logMethod
+  ], LayoutBodyComponent.prototype, "ngOnChanges", null);
+  __decorate([
+      kwikidToolkit.logMethod
+  ], LayoutBodyComponent.prototype, "handleShowingFullTaskDetails", null);
+  __decorate([
+      kwikidToolkit.logMethod
+  ], LayoutBodyComponent.prototype, "handleOnClickTaskItemViewDetail", null);
+  __decorate([
+      kwikidToolkit.logMethod
+  ], LayoutBodyComponent.prototype, "handleOnClickCloseTaskDetail", null);
+  __decorate([
+      kwikidToolkit.logMethod
+  ], LayoutBodyComponent.prototype, "handleOnClickToggleSidebar", null);
+  __decorate([
+      kwikidToolkit.logMethod
+  ], LayoutBodyComponent.prototype, "handleOnClickApiCall", null);
+  __decorate([
+      kwikidToolkit.logMethod
+  ], LayoutBodyComponent.prototype, "handleOnClickPrimaryAction", null);
+  __decorate([
+      kwikidToolkit.logMethod
+  ], LayoutBodyComponent.prototype, "handleOnClickSaveForm", null);
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: LayoutBodyComponent, decorators: [{
+              type: i0.Component,
+              args: [{
+                      selector: 'layout-body',
+                      templateUrl: './layout-body.component.html',
+                      styleUrls: ['./layout-body.component.scss'],
+                      animations: [
+                          animations.trigger('taskDetailInOut', [
+                              animations.transition(':enter', [
+                                  animations.style({ transform: 'translateY(100%)' }),
+                                  animations.animate(150)
+                              ]),
+                              animations.transition(':leave', [
+                                  animations.animate(150, animations.style({ transform: 'translateY(100%)' }))
+                              ])
+                          ]),
+                          animations.trigger('taskDetail2InOut', [
+                              animations.transition(':enter', [
+                                  animations.style({ transform: 'translateX(100%)' }),
+                                  animations.animate(150)
+                              ]),
+                              animations.transition(':leave', [
+                                  animations.animate(150, animations.style({ transform: 'translateX(100%)' }))
+                              ])
+                          ]),
+                          animations.trigger('taskListInOut', [
+                              animations.transition(':enter', [
+                                  animations.style({ transform: 'translateY(100%)' }),
+                                  animations.animate(0)
+                              ]),
+                              animations.transition(':leave', [
+                                  animations.animate(0, animations.style({ transform: 'translateY(100%)' }))
+                              ])
+                          ])
+                      ]
+                  }]
+          }], ctorParameters: function () {
+          return [{ type: i0__namespace.ElementRef }, { type: i8__namespace.TuiPreviewDialogService, decorators: [{
+                          type: i0.Inject,
+                          args: [i8.TuiPreviewDialogService]
+                      }] }, { type: i3__namespace.TuiDialogService, decorators: [{
+                          type: i0.Inject,
+                          args: [i3.TuiDialogService]
+                      }] }];
+      }, propDecorators: { windowResizeWatcher: [{
+                  type: i0.HostListener,
+                  args: ['window:resize', ['$event']]
+              }], preview: [{
+                  type: i0.ViewChild,
+                  args: ['preview']
+              }], onClickApiCall: [{
+                  type: i0.Output
+              }], onGetTaskList: [{
+                  type: i0.Output
+              }], config: [{
+                  type: i0.Input
+              }], userConfig: [{
+                  type: i0.Input
+              }], agentInfo: [{
+                  type: i0.Input
+              }], taskList: [{
+                  type: i0.Input
+              }], ngOnChanges: [], handleShowingFullTaskDetails: [], handleOnClickTaskItemViewDetail: [], handleOnClickCloseTaskDetail: [], handleOnClickToggleSidebar: [], handleOnClickApiCall: [], handleOnClickPrimaryAction: [], handleOnClickSaveForm: [] } });
+
+  var KwikIDAgentDashboardComponent = /** @class */ (function () {
+      function KwikIDAgentDashboardComponent() {
+          this.config = {};
+          this.userConfig = {};
+          this.agentInfo = {};
+          this.taskList = [];
+          this.onGetTaskList = new i0.EventEmitter();
+          this.onClickPerformAction = new i0.EventEmitter();
+      }
+      KwikIDAgentDashboardComponent.prototype.ngOnInit = function () {
+          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);
+      };
+      KwikIDAgentDashboardComponent.prototype.ngOnChanges = function (changes) {
+          var e_1, _a;
+          var verifyChange = function (key) {
+              return changes.hasOwnProperty(key) && !changes[key].firstChange;
+          };
+          try {
+              for (var _b = __values(Object.entries(changes)), _c = _b.next(); !_c.done; _c = _b.next()) {
+                  var change = _c.value;
+                  var key = change[0];
+                  var value = change[1].currentValue;
+              }
+          }
+          catch (e_1_1) { e_1 = { error: e_1_1 }; }
+          finally {
+              try {
+                  if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+              }
+              finally { if (e_1) throw e_1.error; }
+          }
+          if (verifyChange('taskList')) {
+              this.taskList = changes.taskList.currentValue;
+          }
       };
-      KwikIDAgentDashboardComponent.prototype.openInfoWindow = function (marker) {
-          this.infoWindow.open(marker);
+      KwikIDAgentDashboardComponent.prototype.handleOnGetTaskList = function (event) {
+          this.onGetTaskList.emit(event);
       };
-      KwikIDAgentDashboardComponent.prototype.handleOnClickSaveForm = function (e) {
-          this.handleOnClickAddTask(e.data);
+      KwikIDAgentDashboardComponent.prototype.handleOnClickPerformAction = function (event) {
+          this.onClickPerformAction.emit(event);
       };
-      KwikIDAgentDashboardComponent.prototype.handleOnClickViewForms = function (e) { };
       return KwikIDAgentDashboardComponent;
   }());
-  /** @nocollapse */ KwikIDAgentDashboardComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: KwikIDAgentDashboardComponent, deps: [{ token: GoogleMapsService }, { token: AgentService }, { token: i3__namespace.HttpClient }, { token: i0__namespace.ElementRef }, { token: i11.TuiDialogService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-  /** @nocollapse */ KwikIDAgentDashboardComponent.ɵcmp = i0__namespace.ɵɵ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: i2.MapInfoWindow, descendants: true }, { propertyName: "mapElement", first: true, predicate: ["map"], descendants: true, static: true }], ngImport: i0__namespace, 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__namespace.KwikUIButtonComponent, selector: "kwikui-button", inputs: ["appearance", "class", "disabled", "icon", "iconRight", "id", "label", "shape", "showLoader", "size", "styles", "type", "pseudoHover"], outputs: ["onClick"] }, { type: i2__namespace.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__namespace.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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10__namespace.TuiActiveZoneDirective, selector: "[tuiActiveZone]:not(ng-container), [tuiActiveZoneChange]:not(ng-container), [tuiActiveZoneParent]:not(ng-container)", inputs: ["tuiActiveZoneParent"], outputs: ["tuiActiveZoneChange"], exportAs: ["tuiActiveZone"] }, { type: i11__namespace.TuiDropdownDirective, selector: "[tuiDropdown]:not(ng-container)", inputs: ["tuiDropdown"], exportAs: ["tuiDropdown"] }, { type: i11__namespace.TuiDropdownDriverDirective, selector: "[tuiDropdown]" }, { type: i11__namespace.TuiDropdownPositionDirective, selector: "[tuiDropdown]" }, { type: i11__namespace.TuiDropdownManualDirective, selector: "[tuiDropdown][tuiDropdownManual]", inputs: ["tuiDropdownManual"] }, { type: i11__namespace.TuiGroupDirective, selector: "[tuiGroup]:not(ng-container)", inputs: ["orientation", "adaptive", "collapsed", "rounded", "size"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace.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__namespace.MapDirectionsRenderer, selector: "map-directions-renderer", inputs: ["directions", "options"], outputs: ["directionsChanged"], exportAs: ["mapDirectionsRenderer"] }], pipes: { "async": i6__namespace.AsyncPipe } });
+  /** @nocollapse */ KwikIDAgentDashboardComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: KwikIDAgentDashboardComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+  /** @nocollapse */ KwikIDAgentDashboardComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: KwikIDAgentDashboardComponent, selector: "kwikid-agent-dashboard", inputs: { config: "config", userConfig: "userConfig", agentInfo: "agentInfo", taskList: "taskList" }, outputs: { onGetTaskList: "onGetTaskList", onClickPerformAction: "onClickPerformAction" }, usesOnChanges: true, ngImport: i0__namespace, 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__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: KwikIDAgentDashboardComponent, decorators: [{
               type: i0.Component,
               args: [{
@@ -1859,131 +1704,706 @@
                       templateUrl: './kwikid-agent-dashboard.component.html',
                       styleUrls: ['./kwikid-agent-dashboard.component.scss']
                   }]
-          }], ctorParameters: function () {
-          return [{ type: GoogleMapsService }, { type: AgentService }, { type: i3__namespace.HttpClient }, { type: i0__namespace.ElementRef }, { type: i11__namespace.TuiDialogService, decorators: [{
-                          type: i0.Inject,
-                          args: [i11.TuiDialogService]
-                      }] }];
-      }, propDecorators: { windowResizeWatcher: [{
-                  type: i0.HostListener,
-                  args: ['window:resize', ['$event']]
-              }], config: [{
+          }], ctorParameters: function () { return []; }, propDecorators: { config: [{
+                  type: i0.Input
+              }], userConfig: [{
+                  type: i0.Input
+              }], agentInfo: [{
                   type: i0.Input
               }], taskList: [{
                   type: i0.Input
-              }], nextStep: [{
+              }], onGetTaskList: [{
                   type: i0.Output
-              }], addTask: [{
+              }], onClickPerformAction: [{
                   type: i0.Output
-              }], removeTask: [{
-                  type: i0.Output
-              }], filterTaskList: [{
+              }] } });
+
+  var AgentInfoComponent = /** @class */ (function () {
+      function AgentInfoComponent() {
+      }
+      AgentInfoComponent.prototype.ngOnInit = function () {
+          return __awaiter(this, void 0, void 0, function () { return __generator(this, function (_a) {
+              return [2 /*return*/];
+          }); });
+      };
+      return AgentInfoComponent;
+  }());
+  /** @nocollapse */ AgentInfoComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: AgentInfoComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+  /** @nocollapse */ AgentInfoComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: AgentInfoComponent, selector: "agent-info", ngImport: i0__namespace, template: "Agent Info\n", styles: [""] });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: AgentInfoComponent, decorators: [{
+              type: i0.Component,
+              args: [{
+                      selector: 'agent-info',
+                      templateUrl: './agent-info.component.html',
+                      styleUrls: ['./agent-info.component.scss']
+                  }]
+          }], ctorParameters: function () { return []; } });
+
+  var AgentInfoModule = /** @class */ (function () {
+      function AgentInfoModule() {
+      }
+      return AgentInfoModule;
+  }());
+  /** @nocollapse */ AgentInfoModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: AgentInfoModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+  /** @nocollapse */ AgentInfoModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: AgentInfoModule, declarations: [AgentInfoComponent], imports: [i3$1.CommonModule,
+          i2$1.FormsModule,
+          i2$1.ReactiveFormsModule,
+          i1.KwikUIModule,
+          i3$2.KwikIDFormsModule], exports: [AgentInfoComponent] });
+  /** @nocollapse */ AgentInfoModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: AgentInfoModule, imports: [[
+              i3$1.CommonModule,
+              i2$1.FormsModule,
+              i2$1.ReactiveFormsModule,
+              i1.KwikUIModule,
+              i3$2.KwikIDFormsModule
+          ]] });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: AgentInfoModule, decorators: [{
+              type: i0.NgModule,
+              args: [{
+                      declarations: [AgentInfoComponent],
+                      imports: [
+                          i3$1.CommonModule,
+                          i2$1.FormsModule,
+                          i2$1.ReactiveFormsModule,
+                          i1.KwikUIModule,
+                          i3$2.KwikIDFormsModule
+                      ],
+                      exports: [AgentInfoComponent]
+                  }]
+          }] });
+
+  var BottomSheetModule = /** @class */ (function () {
+      function BottomSheetModule() {
+      }
+      return BottomSheetModule;
+  }());
+  /** @nocollapse */ BottomSheetModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: BottomSheetModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+  /** @nocollapse */ BottomSheetModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: BottomSheetModule, declarations: [BottomSheetComponent], imports: [i3$1.CommonModule,
+          i2$1.FormsModule,
+          i2$1.ReactiveFormsModule,
+          i3.TuiSvgModule,
+          i1.KwikUIModule,
+          i3$2.KwikIDFormsModule], exports: [BottomSheetComponent] });
+  /** @nocollapse */ BottomSheetModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: BottomSheetModule, imports: [[
+              i3$1.CommonModule,
+              i2$1.FormsModule,
+              i2$1.ReactiveFormsModule,
+              i3.TuiSvgModule,
+              i1.KwikUIModule,
+              i3$2.KwikIDFormsModule
+          ]] });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: BottomSheetModule, decorators: [{
+              type: i0.NgModule,
+              args: [{
+                      declarations: [BottomSheetComponent],
+                      imports: [
+                          i3$1.CommonModule,
+                          i2$1.FormsModule,
+                          i2$1.ReactiveFormsModule,
+                          i3.TuiSvgModule,
+                          i1.KwikUIModule,
+                          i3$2.KwikIDFormsModule
+                      ],
+                      exports: [BottomSheetComponent]
+                  }]
+          }] });
+
+  var MapViewModule = /** @class */ (function () {
+      function MapViewModule() {
+      }
+      return MapViewModule;
+  }());
+  /** @nocollapse */ MapViewModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MapViewModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+  /** @nocollapse */ MapViewModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MapViewModule, declarations: [MapViewComponent], imports: [i3$1.CommonModule,
+          i2$1.FormsModule,
+          i2$1.ReactiveFormsModule,
+          i1.KwikUIModule,
+          i3$2.KwikIDFormsModule], exports: [MapViewComponent] });
+  /** @nocollapse */ MapViewModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MapViewModule, imports: [[
+              i3$1.CommonModule,
+              i2$1.FormsModule,
+              i2$1.ReactiveFormsModule,
+              i1.KwikUIModule,
+              i3$2.KwikIDFormsModule
+          ]] });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: MapViewModule, decorators: [{
+              type: i0.NgModule,
+              args: [{
+                      declarations: [MapViewComponent],
+                      imports: [
+                          i3$1.CommonModule,
+                          i2$1.FormsModule,
+                          i2$1.ReactiveFormsModule,
+                          i1.KwikUIModule,
+                          i3$2.KwikIDFormsModule
+                      ],
+                      exports: [MapViewComponent]
+                  }]
+          }] });
+
+  var PrimaryActionsModule = /** @class */ (function () {
+      function PrimaryActionsModule() {
+      }
+      return PrimaryActionsModule;
+  }());
+  /** @nocollapse */ PrimaryActionsModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PrimaryActionsModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+  /** @nocollapse */ PrimaryActionsModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PrimaryActionsModule, declarations: [PrimaryActionsComponent], imports: [i3$1.CommonModule,
+          i2$1.FormsModule,
+          i2$1.ReactiveFormsModule,
+          i1$1.TuiItemsWithMoreModule,
+          i3.TuiDropdownModule,
+          i3.TuiHostedDropdownModule,
+          i3.TuiDataListModule,
+          i1$1.TuiBadgeModule,
+          i1.KwikUIModule,
+          i3$2.KwikIDFormsModule], exports: [PrimaryActionsComponent] });
+  /** @nocollapse */ PrimaryActionsModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PrimaryActionsModule, imports: [[
+              i3$1.CommonModule,
+              i2$1.FormsModule,
+              i2$1.ReactiveFormsModule,
+              i1$1.TuiItemsWithMoreModule,
+              i3.TuiDropdownModule,
+              i3.TuiHostedDropdownModule,
+              i3.TuiDataListModule,
+              i1$1.TuiBadgeModule,
+              i1.KwikUIModule,
+              i3$2.KwikIDFormsModule
+          ]] });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: PrimaryActionsModule, decorators: [{
+              type: i0.NgModule,
+              args: [{
+                      declarations: [PrimaryActionsComponent],
+                      imports: [
+                          i3$1.CommonModule,
+                          i2$1.FormsModule,
+                          i2$1.ReactiveFormsModule,
+                          i1$1.TuiItemsWithMoreModule,
+                          i3.TuiDropdownModule,
+                          i3.TuiHostedDropdownModule,
+                          i3.TuiDataListModule,
+                          i1$1.TuiBadgeModule,
+                          i1.KwikUIModule,
+                          i3$2.KwikIDFormsModule
+                      ],
+                      exports: [PrimaryActionsComponent]
+                  }]
+          }] });
+
+  var TaskItemStatusModule = /** @class */ (function () {
+      function TaskItemStatusModule() {
+      }
+      return TaskItemStatusModule;
+  }());
+  /** @nocollapse */ TaskItemStatusModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TaskItemStatusModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+  /** @nocollapse */ TaskItemStatusModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TaskItemStatusModule, declarations: [TaskItemStatusComponent], imports: [i3$1.CommonModule, i2$1.FormsModule, i2$1.ReactiveFormsModule], exports: [TaskItemStatusComponent] });
+  /** @nocollapse */ TaskItemStatusModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TaskItemStatusModule, imports: [[i3$1.CommonModule, i2$1.FormsModule, i2$1.ReactiveFormsModule]] });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TaskItemStatusModule, decorators: [{
+              type: i0.NgModule,
+              args: [{
+                      declarations: [TaskItemStatusComponent],
+                      imports: [i3$1.CommonModule, i2$1.FormsModule, i2$1.ReactiveFormsModule],
+                      exports: [TaskItemStatusComponent]
+                  }]
+          }] });
+
+  var TaskDetailModule = /** @class */ (function () {
+      function TaskDetailModule() {
+      }
+      return TaskDetailModule;
+  }());
+  /** @nocollapse */ TaskDetailModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TaskDetailModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+  /** @nocollapse */ TaskDetailModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TaskDetailModule, declarations: [TaskDetailComponent], imports: [i3$1.CommonModule,
+          i2$1.FormsModule,
+          i2$1.ReactiveFormsModule,
+          i1.KwikUIModule,
+          i3$2.KwikIDFormsModule,
+          TaskItemStatusModule], exports: [TaskDetailComponent] });
+  /** @nocollapse */ TaskDetailModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TaskDetailModule, imports: [[
+              i3$1.CommonModule,
+              i2$1.FormsModule,
+              i2$1.ReactiveFormsModule,
+              i1.KwikUIModule,
+              i3$2.KwikIDFormsModule,
+              TaskItemStatusModule
+          ]] });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TaskDetailModule, decorators: [{
+              type: i0.NgModule,
+              args: [{
+                      declarations: [TaskDetailComponent],
+                      imports: [
+                          i3$1.CommonModule,
+                          i2$1.FormsModule,
+                          i2$1.ReactiveFormsModule,
+                          i1.KwikUIModule,
+                          i3$2.KwikIDFormsModule,
+                          TaskItemStatusModule
+                      ],
+                      exports: [TaskDetailComponent]
+                  }]
+          }] });
+
+  var TaskItemModule = /** @class */ (function () {
+      function TaskItemModule() {
+      }
+      return TaskItemModule;
+  }());
+  /** @nocollapse */ TaskItemModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TaskItemModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+  /** @nocollapse */ TaskItemModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TaskItemModule, declarations: [TaskItemComponent], imports: [i3$1.CommonModule,
+          i2$1.FormsModule,
+          i2$1.ReactiveFormsModule,
+          i1$1.TuiAccordionModule,
+          TaskItemStatusModule,
+          i1.KwikUIModule,
+          i3$2.KwikIDFormsModule], exports: [TaskItemComponent] });
+  /** @nocollapse */ TaskItemModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TaskItemModule, imports: [[
+              i3$1.CommonModule,
+              i2$1.FormsModule,
+              i2$1.ReactiveFormsModule,
+              i1$1.TuiAccordionModule,
+              TaskItemStatusModule,
+              i1.KwikUIModule,
+              i3$2.KwikIDFormsModule
+          ]] });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TaskItemModule, decorators: [{
+              type: i0.NgModule,
+              args: [{
+                      declarations: [TaskItemComponent],
+                      imports: [
+                          i3$1.CommonModule,
+                          i2$1.FormsModule,
+                          i2$1.ReactiveFormsModule,
+                          i1$1.TuiAccordionModule,
+                          TaskItemStatusModule,
+                          i1.KwikUIModule,
+                          i3$2.KwikIDFormsModule
+                      ],
+                      exports: [TaskItemComponent]
+                  }]
+          }] });
+
+  var TaskListSearchModule = /** @class */ (function () {
+      function TaskListSearchModule() {
+      }
+      return TaskListSearchModule;
+  }());
+  /** @nocollapse */ TaskListSearchModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TaskListSearchModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+  /** @nocollapse */ TaskListSearchModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TaskListSearchModule, declarations: [TaskListSearchComponent], imports: [i3$1.CommonModule,
+          scrolling.ScrollingModule,
+          i2$1.FormsModule,
+          i2$1.ReactiveFormsModule,
+          i1.KwikUIModule,
+          i3$2.KwikIDFormsModule], exports: [TaskListSearchComponent] });
+  /** @nocollapse */ TaskListSearchModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TaskListSearchModule, imports: [[
+              i3$1.CommonModule,
+              scrolling.ScrollingModule,
+              i2$1.FormsModule,
+              i2$1.ReactiveFormsModule,
+              i1.KwikUIModule,
+              i3$2.KwikIDFormsModule
+          ]] });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TaskListSearchModule, decorators: [{
+              type: i0.NgModule,
+              args: [{
+                      declarations: [TaskListSearchComponent],
+                      imports: [
+                          i3$1.CommonModule,
+                          scrolling.ScrollingModule,
+                          i2$1.FormsModule,
+                          i2$1.ReactiveFormsModule,
+                          i1.KwikUIModule,
+                          i3$2.KwikIDFormsModule
+                      ],
+                      exports: [TaskListSearchComponent]
+                  }]
+          }] });
+
+  var Ng2SearchPipe = /** @class */ (function () {
+      function Ng2SearchPipe() {
+      }
+      /**
+       * @param items object from array
+       * @param term term's search
+       * @param excludes array of strings which will ignored during search
+       */
+      Ng2SearchPipe.prototype.transform = function (items, term, excludes) {
+          if (excludes === void 0) { excludes = []; }
+          if (!term || !items)
+              return items;
+          return Ng2SearchPipe.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
+       *
+       */
+      Ng2SearchPipe.filter = function (items, term, excludes) {
+          var toCompare = term.toLowerCase();
+          function checkInside(item, term) {
+              if (typeof item === 'string' &&
+                  item.toString().toLowerCase().includes(toCompare)) {
+                  return true;
+              }
+              for (var 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(function (item) {
+              return checkInside(item, term);
+          });
+      };
+      return Ng2SearchPipe;
+  }());
+  /** @nocollapse */ Ng2SearchPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: Ng2SearchPipe, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
+  /** @nocollapse */ Ng2SearchPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: Ng2SearchPipe, name: "filter", pure: false });
+  /** @nocollapse */ Ng2SearchPipe.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: Ng2SearchPipe });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: Ng2SearchPipe, decorators: [{
+              type: i0.Pipe,
+              args: [{
+                      name: 'filter',
+                      pure: false
+                  }]
+          }, {
+              type: i0.Injectable
+          }] });
+
+  var TaskListModule = /** @class */ (function () {
+      function TaskListModule() {
+      }
+      return TaskListModule;
+  }());
+  /** @nocollapse */ TaskListModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TaskListModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+  /** @nocollapse */ TaskListModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TaskListModule, declarations: [TaskListComponent, Ng2SearchPipe], imports: [i3$1.CommonModule,
+          scrolling.ScrollingModule,
+          i2$1.FormsModule,
+          i2$1.ReactiveFormsModule,
+          i1.KwikUIModule,
+          i1.KwikUILoaderModule,
+          i3$2.KwikIDFormsModule,
+          TaskItemModule,
+          TaskListSearchModule,
+          i1$1.TuiPaginationModule], exports: [TaskListComponent] });
+  /** @nocollapse */ TaskListModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TaskListModule, imports: [[
+              i3$1.CommonModule,
+              scrolling.ScrollingModule,
+              i2$1.FormsModule,
+              i2$1.ReactiveFormsModule,
+              i1.KwikUIModule,
+              i1.KwikUILoaderModule,
+              i3$2.KwikIDFormsModule,
+              TaskItemModule,
+              TaskListSearchModule,
+              i1$1.TuiPaginationModule
+          ]] });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TaskListModule, decorators: [{
+              type: i0.NgModule,
+              args: [{
+                      declarations: [TaskListComponent, Ng2SearchPipe],
+                      imports: [
+                          i3$1.CommonModule,
+                          scrolling.ScrollingModule,
+                          i2$1.FormsModule,
+                          i2$1.ReactiveFormsModule,
+                          i1.KwikUIModule,
+                          i1.KwikUILoaderModule,
+                          i3$2.KwikIDFormsModule,
+                          TaskItemModule,
+                          TaskListSearchModule,
+                          i1$1.TuiPaginationModule
+                      ],
+                      exports: [TaskListComponent]
+                  }]
+          }] });
+
+  var TaskPreviewComponent = /** @class */ (function () {
+      function TaskPreviewComponent() {
+          this.config = {};
+          this.data = {};
+          this.onClickTaskItemAction = new i0.EventEmitter();
+      }
+      TaskPreviewComponent.prototype.ngOnInit = function () {
+          return __awaiter(this, void 0, void 0, function () { return __generator(this, function (_a) {
+              return [2 /*return*/];
+          }); });
+      };
+      return TaskPreviewComponent;
+  }());
+  /** @nocollapse */ TaskPreviewComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TaskPreviewComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+  /** @nocollapse */ TaskPreviewComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TaskPreviewComponent, selector: "task-preview", inputs: { config: "config", data: "data" }, outputs: { onClickTaskItemAction: "onClickTaskItemAction" }, ngImport: i0__namespace, template: "<div></div>\n", styles: [""] });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TaskPreviewComponent, decorators: [{
+              type: i0.Component,
+              args: [{
+                      selector: 'task-preview',
+                      templateUrl: './task-preview.component.html',
+                      styleUrls: ['./task-preview.component.scss']
+                  }]
+          }], ctorParameters: function () { return []; }, propDecorators: { config: [{
+                  type: i0.Input
+              }], data: [{
+                  type: i0.Input
+              }], onClickTaskItemAction: [{
                   type: i0.Output
-              }], infoWindow: [{
-                  type: i0.ViewChild,
-                  args: [i2.MapInfoWindow, { static: false }]
-              }], mapElement: [{
-                  type: i0.ViewChild,
-                  args: ['map', { static: true }]
               }] } });
 
+  var TaskPreviewModule = /** @class */ (function () {
+      function TaskPreviewModule() {
+      }
+      return TaskPreviewModule;
+  }());
+  /** @nocollapse */ TaskPreviewModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TaskPreviewModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+  /** @nocollapse */ TaskPreviewModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TaskPreviewModule, declarations: [TaskPreviewComponent], imports: [i3$1.CommonModule,
+          i2$1.FormsModule,
+          i2$1.ReactiveFormsModule,
+          i1.KwikUIModule,
+          i3$2.KwikIDFormsModule], exports: [TaskPreviewComponent] });
+  /** @nocollapse */ TaskPreviewModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TaskPreviewModule, imports: [[
+              i3$1.CommonModule,
+              i2$1.FormsModule,
+              i2$1.ReactiveFormsModule,
+              i1.KwikUIModule,
+              i3$2.KwikIDFormsModule
+          ]] });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TaskPreviewModule, decorators: [{
+              type: i0.NgModule,
+              args: [{
+                      declarations: [TaskPreviewComponent],
+                      imports: [
+                          i3$1.CommonModule,
+                          i2$1.FormsModule,
+                          i2$1.ReactiveFormsModule,
+                          i1.KwikUIModule,
+                          i3$2.KwikIDFormsModule
+                      ],
+                      exports: [TaskPreviewComponent]
+                  }]
+          }] });
+
+  var ComponentModule = /** @class */ (function () {
+      function ComponentModule() {
+      }
+      return ComponentModule;
+  }());
+  /** @nocollapse */ ComponentModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ComponentModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+  /** @nocollapse */ ComponentModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, 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__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ComponentModule, imports: [[
+              AgentInfoModule,
+              BottomSheetModule,
+              MapViewModule,
+              PrimaryActionsModule,
+              TaskDetailModule,
+              TaskItemModule,
+              TaskListModule,
+              TaskListSearchModule,
+              TaskPreviewModule
+          ], AgentInfoModule,
+          BottomSheetModule,
+          MapViewModule,
+          PrimaryActionsModule,
+          TaskDetailModule,
+          TaskItemModule,
+          TaskListModule,
+          TaskListSearchModule,
+          TaskPreviewModule] });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: ComponentModule, decorators: [{
+              type: i0.NgModule,
+              args: [{
+                      declarations: [],
+                      imports: [
+                          AgentInfoModule,
+                          BottomSheetModule,
+                          MapViewModule,
+                          PrimaryActionsModule,
+                          TaskDetailModule,
+                          TaskItemModule,
+                          TaskListModule,
+                          TaskListSearchModule,
+                          TaskPreviewModule
+                      ],
+                      exports: [
+                          AgentInfoModule,
+                          BottomSheetModule,
+                          MapViewModule,
+                          PrimaryActionsModule,
+                          TaskDetailModule,
+                          TaskItemModule,
+                          TaskListModule,
+                          TaskListSearchModule,
+                          TaskPreviewModule
+                      ]
+                  }]
+          }] });
+
+  var LayoutBodyModule = /** @class */ (function () {
+      function LayoutBodyModule() {
+      }
+      return LayoutBodyModule;
+  }());
+  /** @nocollapse */ LayoutBodyModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: LayoutBodyModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+  /** @nocollapse */ LayoutBodyModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: LayoutBodyModule, declarations: [LayoutBodyComponent], imports: [i3$1.CommonModule,
+          i2$1.FormsModule,
+          i2$1.ReactiveFormsModule,
+          i1.KwikUIModule,
+          i3$2.KwikIDFormViewModule,
+          ComponentModule,
+          i3.TuiSvgModule,
+          i8.TuiPreviewActionModule,
+          i8.TuiPreviewModule,
+          i3.TuiButtonModule], exports: [LayoutBodyComponent] });
+  /** @nocollapse */ LayoutBodyModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: LayoutBodyModule, imports: [[
+              i3$1.CommonModule,
+              i2$1.FormsModule,
+              i2$1.ReactiveFormsModule,
+              i1.KwikUIModule,
+              i3$2.KwikIDFormViewModule,
+              ComponentModule,
+              i3.TuiSvgModule,
+              i8.TuiPreviewActionModule,
+              i8.TuiPreviewModule,
+              i3.TuiButtonModule
+          ]] });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: LayoutBodyModule, decorators: [{
+              type: i0.NgModule,
+              args: [{
+                      declarations: [LayoutBodyComponent],
+                      imports: [
+                          i3$1.CommonModule,
+                          i2$1.FormsModule,
+                          i2$1.ReactiveFormsModule,
+                          i1.KwikUIModule,
+                          i3$2.KwikIDFormViewModule,
+                          ComponentModule,
+                          i3.TuiSvgModule,
+                          i8.TuiPreviewActionModule,
+                          i8.TuiPreviewModule,
+                          i3.TuiButtonModule
+                      ],
+                      exports: [LayoutBodyComponent]
+                  }]
+          }] });
+
+  var LayoutHeaderModule = /** @class */ (function () {
+      function LayoutHeaderModule() {
+      }
+      return LayoutHeaderModule;
+  }());
+  /** @nocollapse */ LayoutHeaderModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: LayoutHeaderModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+  /** @nocollapse */ LayoutHeaderModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: LayoutHeaderModule, declarations: [LayoutHeaderComponent], imports: [i3$1.CommonModule,
+          i2$1.FormsModule,
+          i2$1.ReactiveFormsModule,
+          i1.KwikUIModule,
+          i3$2.KwikIDFormsModule,
+          i2.TuiActiveZoneModule,
+          i3.TuiGroupModule,
+          i3.TuiDropdownModule], exports: [LayoutHeaderComponent] });
+  /** @nocollapse */ LayoutHeaderModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: LayoutHeaderModule, imports: [[
+              i3$1.CommonModule,
+              i2$1.FormsModule,
+              i2$1.ReactiveFormsModule,
+              i1.KwikUIModule,
+              i3$2.KwikIDFormsModule,
+              i2.TuiActiveZoneModule,
+              i3.TuiGroupModule,
+              i3.TuiDropdownModule
+          ]] });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: LayoutHeaderModule, decorators: [{
+              type: i0.NgModule,
+              args: [{
+                      declarations: [LayoutHeaderComponent],
+                      imports: [
+                          i3$1.CommonModule,
+                          i2$1.FormsModule,
+                          i2$1.ReactiveFormsModule,
+                          i1.KwikUIModule,
+                          i3$2.KwikIDFormsModule,
+                          i2.TuiActiveZoneModule,
+                          i3.TuiGroupModule,
+                          i3.TuiDropdownModule
+                      ],
+                      exports: [LayoutHeaderComponent]
+                  }]
+          }] });
+
+  var LayoutModule = /** @class */ (function () {
+      function LayoutModule() {
+      }
+      return LayoutModule;
+  }());
+  /** @nocollapse */ LayoutModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: LayoutModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+  /** @nocollapse */ LayoutModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: LayoutModule, imports: [LayoutHeaderModule, LayoutBodyModule], exports: [LayoutHeaderModule, LayoutBodyModule] });
+  /** @nocollapse */ LayoutModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: LayoutModule, imports: [[LayoutHeaderModule, LayoutBodyModule], LayoutHeaderModule, LayoutBodyModule] });
+  i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: LayoutModule, decorators: [{
+              type: i0.NgModule,
+              args: [{
+                      declarations: [],
+                      imports: [LayoutHeaderModule, LayoutBodyModule],
+                      exports: [LayoutHeaderModule, LayoutBodyModule]
+                  }]
+          }] });
+
   var KwikIDAgentDashboardModule = /** @class */ (function () {
       function KwikIDAgentDashboardModule() {
       }
       return KwikIDAgentDashboardModule;
   }());
   /** @nocollapse */ KwikIDAgentDashboardModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: KwikIDAgentDashboardModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-  /** @nocollapse */ KwikIDAgentDashboardModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: KwikIDAgentDashboardModule, declarations: [KwikIDAgentDashboardComponent,
-          CustomerListComponent,
-          CustomerTileComponent,
-          Ng2SearchPipe,
-          StatusPillComponent,
-          CustomerDetailsComponent], imports: [i6.CommonModule,
-          i3.HttpClientModule,
-          i7.FormsModule,
-          i7.ReactiveFormsModule,
-          i4.KwikUIButtonModule,
-          i4.KwikUIInputModule,
-          i4.KwikUIInputDateModule,
-          i4.KwikUIInputDateRangeModule,
-          i4.KwikUIInputSelectModule,
-          i4.KwikUILabelValuePairModule,
-          i4.KwikUITableModule,
-          i4.KwikUITablePaginationModule,
-          i8.KwikIDFormViewModule,
-          i11.TuiRootModule,
-          i11.TuiDialogModule,
-          i11.TuiDropdownModule,
-          addonMobile.TuiSidebarModule,
-          i10.TuiActiveZoneModule,
-          i11.TuiGroupModule,
-          i11.TuiSvgModule,
-          i5.ScrollingModule,
-          i2.GoogleMapsModule,
-          i3.HttpClientModule,
-          i3.HttpClientJsonpModule], exports: [KwikIDAgentDashboardComponent] });
+  /** @nocollapse */ KwikIDAgentDashboardModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: KwikIDAgentDashboardModule, declarations: [KwikIDAgentDashboardComponent], imports: [i3$1.CommonModule,
+          i2$1.FormsModule,
+          i2$1.ReactiveFormsModule,
+          i1.KwikUIModule,
+          i3$2.KwikIDFormsModule,
+          LayoutModule,
+          ComponentModule], exports: [KwikIDAgentDashboardComponent] });
   /** @nocollapse */ KwikIDAgentDashboardModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: KwikIDAgentDashboardModule, imports: [[
-              i6.CommonModule,
-              i3.HttpClientModule,
-              i7.FormsModule,
-              i7.ReactiveFormsModule,
-              i4.KwikUIButtonModule,
-              i4.KwikUIInputModule,
-              i4.KwikUIInputDateModule,
-              i4.KwikUIInputDateRangeModule,
-              i4.KwikUIInputSelectModule,
-              i4.KwikUILabelValuePairModule,
-              i4.KwikUITableModule,
-              i4.KwikUITablePaginationModule,
-              i8.KwikIDFormViewModule,
-              i11.TuiRootModule,
-              i11.TuiDialogModule,
-              i11.TuiDropdownModule,
-              addonMobile.TuiSidebarModule,
-              i10.TuiActiveZoneModule,
-              i11.TuiGroupModule,
-              i11.TuiSvgModule,
-              i5.ScrollingModule,
-              i2.GoogleMapsModule,
-              i3.HttpClientModule,
-              i3.HttpClientJsonpModule
+              i3$1.CommonModule,
+              i2$1.FormsModule,
+              i2$1.ReactiveFormsModule,
+              i1.KwikUIModule,
+              i3$2.KwikIDFormsModule,
+              LayoutModule,
+              ComponentModule
           ]] });
   i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: KwikIDAgentDashboardModule, decorators: [{
               type: i0.NgModule,
               args: [{
-                      declarations: [
-                          KwikIDAgentDashboardComponent,
-                          CustomerListComponent,
-                          CustomerTileComponent,
-                          Ng2SearchPipe,
-                          StatusPillComponent,
-                          CustomerDetailsComponent
-                      ],
+                      declarations: [KwikIDAgentDashboardComponent],
                       imports: [
-                          i6.CommonModule,
-                          i3.HttpClientModule,
-                          i7.FormsModule,
-                          i7.ReactiveFormsModule,
-                          i4.KwikUIButtonModule,
-                          i4.KwikUIInputModule,
-                          i4.KwikUIInputDateModule,
-                          i4.KwikUIInputDateRangeModule,
-                          i4.KwikUIInputSelectModule,
-                          i4.KwikUILabelValuePairModule,
-                          i4.KwikUITableModule,
-                          i4.KwikUITablePaginationModule,
-                          i8.KwikIDFormViewModule,
-                          i11.TuiRootModule,
-                          i11.TuiDialogModule,
-                          i11.TuiDropdownModule,
-                          addonMobile.TuiSidebarModule,
-                          i10.TuiActiveZoneModule,
-                          i11.TuiGroupModule,
-                          i11.TuiSvgModule,
-                          i5.ScrollingModule,
-                          i2.GoogleMapsModule,
-                          i3.HttpClientModule,
-                          i3.HttpClientJsonpModule
+                          i3$1.CommonModule,
+                          i2$1.FormsModule,
+                          i2$1.ReactiveFormsModule,
+                          i1.KwikUIModule,
+                          i3$2.KwikIDFormsModule,
+                          LayoutModule,
+                          ComponentModule
                       ],
                       exports: [KwikIDAgentDashboardComponent]
                   }]