kwikid-agent-dashboard 0.0.0-watch

package/fesm2015/kwikid-agent-dashboard.js

@@ -0,0 +1,995 @@
+import { __awaiter } from 'tslib';
+import * as i0 from '@angular/core';
+import { Injectable, EventEmitter, Component, Output, Input, ViewChild, NgModule } from '@angular/core';
+import * as i5 from 'kwikui';
+import { KwikUIButtonModule, KwikUIButtonIconModule, KwikUIInputModule, KwikUIInputDateModule, KwikUISelectComboboxModule, KwikUITableModule, KwikUITablePaginationModule } from 'kwikui';
+import * as i5$1 from '@angular/forms';
+import { FormGroup, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { TuiDay, TuiActiveZoneModule } from '@taiga-ui/cdk';
+import * as i6 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { HttpClientModule } from '@angular/common/http';
+import { RouterTestingModule } from '@angular/router/testing';
+import { TuiSidebarModule } from '@taiga-ui/addon-mobile';
+
+class AgentService {
+    constructor() {
+        this.agentConfig = {};
+        this.showMenu = false;
+        this.showMapview = true;
+        this.addTask = false;
+    }
+    getAgentConfig() {
+        return this.agentConfig;
+    }
+    setAgentConfig(agentConfig) {
+        this.agentConfig = agentConfig;
+    }
+    setMapview(value) {
+        this.showMapview = value;
+    }
+    getAddTask() {
+        return this.addTask;
+    }
+    setAddTask(value) {
+        this.addTask = value;
+        this.setMenu(false);
+    }
+    toggleMapview() {
+        this.showMapview = !this.showMapview;
+    }
+    getMenu() {
+        return this.showMenu;
+    }
+    setMenu(value) {
+        this.showMenu = value;
+    }
+    toggleMenu() {
+        this.showMenu = !this.showMenu;
+    }
+}
+/** @nocollapse */ AgentService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AgentService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ AgentService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AgentService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AgentService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class MapService {
+    constructor(agentService) {
+        this.agentService = agentService;
+        this.allCustomersMarkers = [];
+    }
+    getMyPosition() {
+        return this.myPosition;
+    }
+    getMap() {
+        return this.map;
+    }
+    setMap(map) {
+        this.map = map;
+    }
+    getMarkers() {
+        return this.allCustomersMarkers;
+    }
+    setMarkers(markers) {
+        this.allCustomersMarkers = markers;
+    }
+    initMap(mapElement) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.myPosition = yield this.getPosition().then((pos) => {
+                return {
+                    lat: pos.lat,
+                    lng: pos.lng
+                };
+            });
+            this.map = new google.maps.Map(mapElement.nativeElement, {
+                zoom: 10,
+                center: this.myPosition,
+                streetViewControl: false,
+                mapTypeControl: false,
+                fullscreenControl: false,
+                zoomControl: false,
+            });
+        });
+    }
+    plotMarkers(customers) {
+        return __awaiter(this, void 0, void 0, function* () {
+            let path = [];
+            const marker = new google.maps.Marker({
+                position: this.myPosition,
+                map: this.map,
+                animation: google.maps.Animation.DROP
+            });
+            let origin = marker.getPosition();
+            customers.map((customer) => {
+                path.push({
+                    location: this.getLatLng(customer.extras.loc),
+                    stopover: true
+                });
+            });
+            customers = yield this.calcRoute(customers, origin, path);
+            customers.map((customer, index) => {
+                const marker = new google.maps.Marker({
+                    position: this.getLatLng(customer.extras.loc),
+                    map: this.map,
+                    animation: google.maps.Animation.DROP,
+                    label: {
+                        text: String(index + 1),
+                        color: '#FFF'
+                    }
+                });
+                this.allCustomersMarkers.push(marker);
+            });
+            return customers;
+        });
+    }
+    calcRoute(customers, origin, waypoints) {
+        return __awaiter(this, void 0, void 0, function* () {
+            let directionsService = new google.maps.DirectionsService();
+            let directionsRenderer = new google.maps.DirectionsRenderer({
+                suppressMarkers: true
+            });
+            const destination = new google.maps.LatLng(19.0996079, 72.9144412);
+            directionsRenderer.setMap(this.map);
+            let request = {
+                origin: origin,
+                destination: destination,
+                waypoints: waypoints,
+                optimizeWaypoints: true,
+                travelMode: 'DRIVING'
+            };
+            let sortList = this.sortList;
+            let customersData = customers;
+            yield directionsService.route(request, function (result, status) {
+                if (status == 'OK') {
+                    directionsRenderer.setDirections(result);
+                    customersData = sortList(result.routes[0].waypoint_order, customersData);
+                }
+            });
+            this.allCustomersDirections = directionsRenderer;
+            return customersData;
+        });
+    }
+    getPosition() {
+        return new Promise((resolve, reject) => {
+            navigator.geolocation.watchPosition((resp) => {
+                resolve({
+                    lng: resp.coords.longitude,
+                    lat: resp.coords.latitude
+                });
+            }, (err) => {
+                reject(err);
+            });
+        });
+    }
+    getLatLng(data) {
+        return new google.maps.LatLng(data[0], data[1]);
+    }
+    sortList(order, customersData) {
+        let c = [];
+        for (let i = 0; i < customersData.length; i++) {
+            let customer = customersData[order[i]];
+            c.push(customer);
+        }
+        return c;
+    }
+    plotHistoryCustomer(customer) {
+        if (this.historyCustomerMarker)
+            this.setMarkersMap(null, null);
+        this.agentService.toggleMenu();
+        const marker = new google.maps.Marker({
+            position: this.getLatLng(customer.loc),
+            map: this.map,
+            animation: google.maps.Animation.DROP,
+            label: {
+                text: 'C',
+                color: '#FFF'
+            }
+        });
+        this.historyCustomerMarker = marker;
+        let directionsService = new google.maps.DirectionsService();
+        let directionsRenderer = new google.maps.DirectionsRenderer({
+            suppressMarkers: true
+        });
+        directionsRenderer.setMap(this.map);
+        let request = {
+            origin: this.myPosition,
+            destination: marker.getPosition(),
+            optimizeWaypoints: true,
+            travelMode: 'DRIVING'
+        };
+        directionsService.route(request, function (result, status) {
+            if (status == 'OK') {
+                directionsRenderer.setDirections(result);
+            }
+        });
+        this.historyCustomerDirections = directionsRenderer;
+        this.setMarkersMap(null, this.map);
+        return marker;
+    }
+    setMarkersMap(all, history) {
+        this.allCustomersMarkers.map((marker) => {
+            marker.setMap(all);
+        });
+        this.allCustomersDirections.setMap(all);
+        this.historyCustomerMarker.setMap(history);
+        this.historyCustomerDirections.setMap(history);
+    }
+}
+/** @nocollapse */ MapService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MapService, deps: [{ token: AgentService }], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ MapService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MapService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MapService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: AgentService }]; } });
+
+class CustomerService {
+    constructor() { }
+    getCustomers() {
+        return this.customersData;
+    }
+    setCustomers(customers) {
+        this.customersData = customers;
+    }
+}
+/** @nocollapse */ CustomerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CustomerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ CustomerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CustomerService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CustomerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class MenuComponent {
+    /**
+     * @description
+     *
+     * @constructor
+     */
+    constructor(agentService) {
+        this.agentService = agentService;
+        this.nextStep = new EventEmitter();
+    }
+    ngOnInit() { }
+    goToNextStep(e) {
+        this.nextStep.emit(e);
+    }
+    refresh() {
+        window.location.reload();
+    }
+}
+/** @nocollapse */ MenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MenuComponent, deps: [{ token: AgentService }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ MenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: MenuComponent, selector: "menu", outputs: { nextStep: "nextStep" }, ngImport: i0, template: "<div class=\"menu-container\">\r\n  <div class=\"menu-option\">\r\n    <div class=\"agent-name\">Agent Name</div>\r\n    <div class=\"agent-id\">1234-5678-9012</div>\r\n  </div>\r\n  <hr />\r\n  <div class=\"menu-option\" (click)=\"agentService.toggleMapview()\">\r\n    {{ agentService.showMapview ? 'Hide Maps' : 'Show Maps' }}\r\n  </div>\r\n  <div class=\"menu-option\" (click)=\"agentService.setAddTask(true)\">\r\n    Add Task\r\n  </div>\r\n  <div class=\"menu-option\" (click)=\"refresh()\">Refresh</div>\r\n  <hr />\r\n  <div class=\"menu-option\" (onClick)=\"goToNextStep('logout')\">Logout</div>\r\n</div>\r\n", styles: [".menu-container{position:absolute;top:8%;right:0;background-color:#fafafa;width:-moz-fit-content;width:fit-content;border-radius:1rem;z-index:1001;box-shadow:0 4px 8px #0000001a;transition:\"0.15s linear 0s\"}.t-wrapper{padding:1.25rem!important}.agent-name{font-size:.9rem;font-weight:600}.agent-id{font-size:.7rem}.menu-option{padding:.25rem 1.5rem;display:flex;flex-direction:column;align-items:center;justify-content:center}hr{border:none!important;background-color:#ddd}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: MenuComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'menu',
+                    templateUrl: './menu.component.html',
+                    styleUrls: ['./menu.component.css']
+                }]
+        }], ctorParameters: function () { return [{ type: AgentService }]; }, propDecorators: { nextStep: [{
+                type: Output
+            }] } });
+
+class InfoWindowService {
+    constructor(mapService) {
+        this.mapService = mapService;
+        this.config = {
+            fields: {
+                name: {
+                    label: 'Name',
+                    value: 'name',
+                    display: 'value',
+                    style: {
+                        fontSize: '1rem',
+                        fontWeight: 600
+                    }
+                },
+                phone: {
+                    label: 'Call',
+                    value: 'phone',
+                    display: 'label',
+                    style: {
+                        fontSize: '0.8rem',
+                        padding: '0.1rem 0',
+                        textAlign: 'justify'
+                    },
+                    icon: 'https://cdn-icons-png.flaticon.com/512/60/60720.png'
+                },
+                address: {
+                    label: 'Directions',
+                    value: 'address',
+                    display: 'label',
+                    style: {
+                        fontSize: '0.8rem',
+                        padding: '0.1rem 0'
+                    },
+                    icon: 'https://cdn-icons-png.flaticon.com/512/62/62516.png'
+                }
+            }
+        };
+        this.mainInfoWindowStyle = {
+            display: 'flex',
+            'flex-direction': 'column',
+            'justify-content': 'center',
+            'align-items': 'stretch',
+            gap: '0.5rem',
+            padding: '0.5rem'
+        };
+        this.fieldDivStyle = {
+            gap: ' 0.5rem',
+            display: 'flex',
+            'flex-direction': 'row'
+        };
+    }
+    getOpenMarker() {
+        return this.openMarker;
+    }
+    setOpenMarker(value) {
+        this.openMarker = value;
+    }
+    /**
+     * @description
+     * Wrapper method to show Customer Info Window
+     *
+     * @function showInfo
+     * @func showInfo
+     * @method showInfo
+     */
+    showCustomerInformation(customer, marker) {
+        let map = this.mapService.getMap();
+        let contentString = this.createInfoContent(customer);
+        let infowindow = new google.maps.InfoWindow({
+            content: contentString
+        });
+        this.addEventListeners(customer, infowindow);
+        this.closeLastOpenedInfoWindow();
+        infowindow.open(map, marker);
+        this.lastInfoWindowOpened = infowindow;
+        map.setCenter(marker.getPosition());
+        return { infowindow: infowindow };
+    }
+    addEventListeners(customer, infowindow) {
+        let addressLink = `http://maps.google.com/?q=${customer.extras.loc[0]}, ${customer.extras.loc[1]}`;
+        google.maps.event.addListener(infowindow, 'domready', function () {
+            document.getElementById('Call').addEventListener('click', function (e) {
+                window.open(`tel:${customer.extras.phone}`, '_self');
+            });
+            document
+                .getElementById('Directions')
+                .addEventListener('click', function (e) {
+                window.open(`${addressLink}`, '_blank');
+            });
+            document
+                .getElementsByClassName('gm-ui-hover-effect')[0]
+                .setAttribute('style', '   background: none;\
+            display: block; \
+            border: 0px; \
+            margin: 0px; \
+            padding: 0px; \
+            text-transform: none; \
+            appearance: none; \
+            position: absolute; \
+            cursor: pointer; \
+            user-select: none; \
+            top: 0px; \
+            right: 0px; \
+            width: 30px; \
+            height: 30px; \
+            ');
+        });
+    }
+    /**
+     * @description
+     * Wrapper method to close Last Info Window
+     *
+     * @function closeLastOpenedInfoWindow
+     * @func closeLastOpenedInfoWindow
+     * @method closeLastOpenedInfoWindow
+     */
+    closeLastOpenedInfoWindow() {
+        if (this.lastInfoWindowOpened) {
+            this.lastInfoWindowOpened.close();
+        }
+    }
+    /**
+     * @description
+     * Closes the previously opened info window.
+     *
+     * @function infoData
+     * @func infoData
+     * @method infoData
+     */
+    createInfoContent(customer) {
+        let content = "<div style='padding:4px; font-family: Manrope;' >";
+        content += this.createFields(customer, this.config.fields);
+        content += '</div>';
+        return content;
+    }
+    /**
+     * @description
+     * Wrapper method to create Fields Container
+     *
+     * @function createFields
+     * @func createFields
+     * @method createFields
+     */
+    createFields(customer, fields) {
+        let _div = document.createElement('div');
+        for (const property in this.mainInfoWindowStyle)
+            _div.style[property] = this.mainInfoWindowStyle[property];
+        for (let key of Object.keys(fields)) {
+            let field = fields[key];
+            let _fieldDiv = document.createElement('div');
+            _fieldDiv.setAttribute('id', field.label);
+            for (const property in this.fieldDivStyle)
+                _fieldDiv.style[property] = this.fieldDivStyle[property];
+            for (const property in field.style)
+                _fieldDiv.style[property] = field.style[property];
+            let string = field.display == 'label' ? field.label : customer.extras[field.value];
+            if (field.icon) {
+                let _icon = document.createElement('img');
+                _icon.src = field.icon;
+                _icon.style.width = field.style.fontSize;
+                _icon.style.height = field.style.fontSize;
+                _fieldDiv.appendChild(_icon);
+            }
+            let _fieldText = document.createElement('div');
+            _fieldText.innerHTML = string;
+            _fieldDiv.appendChild(_fieldText);
+            _div.appendChild(_fieldDiv);
+        }
+        return _div.outerHTML;
+    }
+}
+/** @nocollapse */ InfoWindowService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: InfoWindowService, deps: [{ token: MapService }], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ InfoWindowService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: InfoWindowService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: InfoWindowService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: MapService }]; } });
+
+class KycSuccessComponent {
+    constructor() { }
+    ngOnInit() {
+    }
+}
+/** @nocollapse */ KycSuccessComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KycSuccessComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ KycSuccessComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: KycSuccessComponent, selector: "svg-kyc-success", ngImport: i0, template: "<svg\r\n  class=\"status\"\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  x=\"0px\"\r\n  y=\"0px\"\r\n  width=\"32\"\r\n  height=\"32\"\r\n  viewBox=\"0,0,256,256\"\r\n  style=\"fill: #000000\"\r\n>\r\n  <g transform=\"translate(64,64) scale(0.5,0.5)\">\r\n    <g\r\n      fill=\"#20c997\"\r\n      fill-rule=\"nonzero\"\r\n      stroke=\"none\"\r\n      stroke-width=\"1\"\r\n      stroke-linecap=\"butt\"\r\n      stroke-linejoin=\"miter\"\r\n      stroke-miterlimit=\"10\"\r\n      stroke-dasharray=\"\"\r\n      stroke-dashoffset=\"0\"\r\n      font-family=\"none\"\r\n      font-weight=\"none\"\r\n      font-size=\"none\"\r\n      text-anchor=\"none\"\r\n      style=\"mix-blend-mode: normal\"\r\n    >\r\n      <path d=\"M-128,384v-512h512v512z\" id=\"bgRectangle\"></path>\r\n    </g>\r\n    <g\r\n      fill=\"#ffffff\"\r\n      fill-rule=\"nonzero\"\r\n      stroke=\"none\"\r\n      stroke-width=\"1\"\r\n      stroke-linecap=\"butt\"\r\n      stroke-linejoin=\"miter\"\r\n      stroke-miterlimit=\"10\"\r\n      stroke-dasharray=\"\"\r\n      stroke-dashoffset=\"0\"\r\n      font-family=\"none\"\r\n      font-weight=\"none\"\r\n      font-size=\"none\"\r\n      text-anchor=\"none\"\r\n      style=\"mix-blend-mode: normal\"\r\n    >\r\n      <g transform=\"scale(8,8)\">\r\n        <path\r\n          d=\"M28.28125,6.28125l-17.28125,17.28125l-7.28125,-7.28125l-1.4375,1.4375l8,8l0.71875,0.6875l0.71875,-0.6875l18,-18z\"\r\n        ></path>\r\n      </g>\r\n    </g>\r\n  </g>\r\n</svg>\r\n", styles: [".status{border-radius:1.5rem}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KycSuccessComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'svg-kyc-success',
+                    templateUrl: './kyc-success.component.html',
+                    styleUrls: ['./kyc-success.component.css']
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class KycPendingComponent {
+    constructor() { }
+    ngOnInit() {
+    }
+}
+/** @nocollapse */ KycPendingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KycPendingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ KycPendingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: KycPendingComponent, selector: "svg-kyc-pending", ngImport: i0, template: "<svg\r\n  xmlns=\"http://www.w3.org/2000/svg\"\r\n  class=\"status\"\r\n  x=\"0px\"\r\n  y=\"0px\"\r\n  width=\"32\"\r\n  height=\"32\"\r\n  viewBox=\"0,0,256,256\"\r\n  style=\"fill: #000000\"\r\n>\r\n  <g transform=\"translate(32,32) scale(0.75,0.75)\">\r\n    <g\r\n      fill=\"#fcb919\"\r\n      fill-rule=\"nonzero\"\r\n      stroke=\"none\"\r\n      stroke-width=\"1\"\r\n      stroke-linecap=\"butt\"\r\n      stroke-linejoin=\"miter\"\r\n      stroke-miterlimit=\"10\"\r\n      stroke-dasharray=\"\"\r\n      stroke-dashoffset=\"0\"\r\n      font-family=\"none\"\r\n      font-weight=\"none\"\r\n      font-size=\"none\"\r\n      text-anchor=\"none\"\r\n      style=\"mix-blend-mode: normal\"\r\n    >\r\n      <path\r\n        d=\"M-42.66667,298.66667v-341.33333h341.33333v341.33333z\"\r\n        id=\"bgRectangle\"\r\n      ></path>\r\n    </g>\r\n    <g\r\n      fill=\"#ffffff\"\r\n      fill-rule=\"nonzero\"\r\n      stroke=\"none\"\r\n      stroke-width=\"1\"\r\n      stroke-linecap=\"butt\"\r\n      stroke-linejoin=\"miter\"\r\n      stroke-miterlimit=\"10\"\r\n      stroke-dasharray=\"\"\r\n      stroke-dashoffset=\"0\"\r\n      font-family=\"none\"\r\n      font-weight=\"none\"\r\n      font-size=\"none\"\r\n      text-anchor=\"none\"\r\n      style=\"mix-blend-mode: normal\"\r\n    >\r\n      <g transform=\"scale(8,8)\">\r\n        <path\r\n          d=\"M16,4c-6.61719,0 -12,5.38281 -12,12c0,6.61719 5.38281,12 12,12c6.61719,0 12,-5.38281 12,-12c0,-6.61719 -5.38281,-12 -12,-12zM16,6c5.53516,0 10,4.46484 10,10c0,5.53516 -4.46484,10 -10,10c-5.53516,0 -10,-4.46484 -10,-10c0,-5.53516 4.46484,-10 10,-10zM15,8v9h7v-2h-5v-7z\"\r\n        ></path>\r\n      </g>\r\n    </g>\r\n  </g>\r\n</svg>\r\n", styles: [".status{border-radius:1.5rem}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KycPendingComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'svg-kyc-pending',
+                    templateUrl: './kyc-pending.component.html',
+                    styleUrls: ['./kyc-pending.component.css']
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class CustomerTileComponent {
+    constructor(mapService, infoWindowService) {
+        this.mapService = mapService;
+        this.infoWindowService = infoWindowService;
+        /**
+         * @description
+         * Determines Customer Data
+         *
+         * @default
+         * `{}`
+         */
+        this.customer = {};
+        /**
+         * @description
+         * Determines Index of Customer Data in Customer List
+         *
+         * @default
+         *
+         */
+        this.index = undefined;
+        /**
+         * @description
+         * Emitter to emit next Step
+         *
+         * @emits KwikIDAgentDashboardComponent#nextStep
+         * @fires KwikIDAgentDashboardComponent#nextStep
+         */
+        this.nextStep = new EventEmitter();
+        this.removeTask = new EventEmitter(); /**
+         * @description
+         *
+         * @constructor
+         */
+    }
+    /**
+     * @description
+     * To set Google Maps API on script
+     *
+     * @ngOnInit
+     */
+    ngOnInit() { }
+    tileClick() {
+        console.log("Tile Click", this.index);
+        if (this.index == this.infoWindowService.getOpenMarker()) {
+            this.infoWindowService.setOpenMarker(null);
+            this.infoWindowService.lastInfoWindowOpened.close();
+        }
+        else {
+            this.showDetails(this.customer, this.index);
+        }
+    }
+    /**
+     * @description
+     * Wrapper method to show Customer Info Window
+     *
+     * @function showDetails
+     * @func showDetails
+     * @method showDetails
+     */
+    showDetails(customer, index) {
+        let markers = this.mapService.getMarkers();
+        let marker = markers[index];
+        let { infowindow } = this.infoWindowService.showCustomerInformation(customer, marker);
+        this.infoWindowService.setOpenMarker(index);
+    }
+    /**
+     * @description
+     * Wrapper method to fire click event for next step.
+     *
+     * @function goToNextStep
+     * @func goToNextStep
+     * @method goToNextStep
+     */
+    goToNextStep(e) {
+        this.nextStep.emit(e);
+    }
+    handleOnClickRemoveTask(task) {
+        this.removeTask.emit(task);
+    }
+}
+/** @nocollapse */ CustomerTileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CustomerTileComponent, deps: [{ token: MapService }, { token: InfoWindowService }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ CustomerTileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CustomerTileComponent, selector: "customer-tile", inputs: { customer: "customer", index: "index" }, outputs: { nextStep: "nextStep", removeTask: "removeTask" }, ngImport: i0, template: "<div class=\"customer-tile-wrapper\">\r\n  <div class=\"customer-tile-primary-container\">\r\n    <div class=\"customer-tile-primary-container-data\">\r\n      <ng-container *ngIf=\"customer.kycComplete\">\r\n        <svg-kyc-success></svg-kyc-success>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"!customer.kycComplete\">\r\n        <svg-kyc-pending></svg-kyc-pending>\r\n      </ng-container>\r\n      <div class=\"customer-tile-prtimary-container-name-phone\">\r\n        <div class=\"customer-tile-primary-container-name\">\r\n          {{ customer.extras.name }}\r\n        </div>\r\n        <div class=\"customer-tile-primary-container-phone\">\r\n          {{ customer.extras.phone }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <kwikui-button-icon\r\n      [icon]=\"\r\n        index == infoWindowService.getOpenMarker()\r\n          ? 'tuiIconChevronUpLarge'\r\n          : 'tuiIconChevronDownLarge'\r\n      \"\r\n      [shape]=\"'rounded'\"\r\n      appearance=\"icon\"\r\n      size=\"s\"\r\n      (onClick)=\"tileClick()\"\r\n    ></kwikui-button-icon>\r\n  </div>\r\n  <div\r\n    [ngClass]=\"\r\n      index == infoWindowService.getOpenMarker()\r\n        ? 'customer-tile-secondary-container'\r\n        : 'data-collasped'\r\n    \"\r\n  >\r\n    <div class=\"customer-tile-secondary-container-data\">\r\n      <div class=\"customer-tile-secondary-container-address\">\r\n        {{ customer.extras.address }}\r\n      </div>\r\n    </div>\r\n    <div class=\"customer-tile-secondary-container-actions\">\r\n      <kwikui-button-icon\r\n        [icon]=\"'tuiIconTrash2'\"\r\n        [shape]=\"'rounded'\"\r\n        appearance=\"icon\"\r\n        size=\"s\"\r\n        (onClick)=\"handleOnClickRemoveTask(customer)\"\r\n      ></kwikui-button-icon>\r\n      <div class=\"customer-tile-secondary-container-journey-buttons\">\r\n        <kwikui-button\r\n          label=\"Share Link\"\r\n          appearance=\"flat\"\r\n          size=\"s\"\r\n          styles=\"font-size:0.7rem;\"\r\n          (onClick)=\"goToNextStep({ customer: customer, process: 'share' })\"\r\n        ></kwikui-button>\r\n        <kwikui-button\r\n          *ngIf=\"!customer.kycComplete\"\r\n          label=\"Start Journey\"\r\n          appearance=\"primary\"\r\n          size=\"s\"\r\n          styles=\"font-size:0.7rem;\"\r\n          (onClick)=\"goToNextStep({ customer: customer, process: 'kyc' })\"\r\n        ></kwikui-button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\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:row;flex-wrap:nowrap;align-content:stretch;justify-content:space-evenly;align-items:center}.customer-tile-wrapper .customer-tile-primary-container .customer-tile-primary-container-status{border-radius:1.5rem}.customer-tile-wrapper .customer-tile-primary-container .customer-tile-primary-container-name{font-weight:600;line-height:1rem}.customer-tile-wrapper .customer-tile-primary-container .customer-tile-primary-container-phone{font-size:.7rem}.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:.6rem;grid-gap:.2rem;gap:.2rem}.customer-tile-wrapper .customer-tile-secondary-container .customer-tile-secondary-container-data .customer-tile-secondary-container-session-id{width:100%;height:100%;line-height:.9rem;text-align:justify}.customer-tile-wrapper .customer-tile-secondary-container .customer-tile-secondary-container-data .customer-tile-secondary-container-address{width:100%;height:100%;line-height:.9rem;text-align:justify}.customer-tile-wrapper .customer-tile-secondary-container .customer-tile-secondary-container-actions{display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center}.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:.8rem;gap:.8rem;align-items:center}.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}\n"], components: [{ type: KycSuccessComponent, selector: "svg-kyc-success" }, { type: KycPendingComponent, selector: "svg-kyc-pending" }, { type: i5.KwikUIButtonIconComponent, selector: "kwikui-button-icon", inputs: ["disabled", "id", "showLoader", "styles", "class", "type", "appearance", "icon", "shape", "size"], outputs: ["onClick"] }, { type: i5.KwikUIButtonComponent, selector: "kwikui-button", inputs: ["disabled", "id", "label", "showLoader", "styles", "class", "type", "appearance", "icon", "iconRight", "shape", "size"], outputs: ["onClick"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CustomerTileComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'customer-tile',
+                    templateUrl: './customer-tile.component.html',
+                    styleUrls: ['./customer-tile.component.scss']
+                }]
+        }], ctorParameters: function () { return [{ type: MapService }, { type: InfoWindowService }]; }, propDecorators: { customer: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }], nextStep: [{
+                type: Output
+            }], removeTask: [{
+                type: Output
+            }] } });
+
+class CustomerListComponent {
+    /**
+     * @description
+     *
+     * @constructor
+     */
+    constructor(mapService, infoWindowService) {
+        this.mapService = mapService;
+        this.infoWindowService = infoWindowService;
+        /**
+         * @description
+         * Emitter to emit next Step
+         *
+         * @emits KwikIDAgentDashboardComponent#nextStep
+         * @fires KwikIDAgentDashboardComponent#nextStep
+         */
+        this.nextStep = new EventEmitter();
+        this.removeTask = new EventEmitter();
+        this.filteredData = [];
+        this.formGroup = new FormGroup({});
+        this.fromDate = this.getDate();
+        this.toDate = this.getDate();
+        this.fromDateFormControl = new FormControl({
+            value: new TuiDay(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()),
+            disabled: false
+        });
+        this.formGroup.addControl('fromDate', this.fromDateFormControl);
+        this.toDateFormControl = new FormControl({
+            value: new TuiDay(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()),
+            disabled: false
+        });
+        this.formGroup.addControl('toDate', this.toDateFormControl);
+    }
+    /**
+     * @description
+     * To set Google Maps API on script
+     *
+     * @ngOnInit
+     */
+    ngOnInit() {
+        this.filteredData = this.getCustomers(this.customers);
+    }
+    /**
+     * @description
+     * Wrapper method to fire click event for next step.
+     *
+     * @function goToNextStep
+     * @func goToNextStep
+     * @method goToNextStep
+     */
+    goToNextStep(e) {
+        this.nextStep.emit(e);
+    }
+    getDate() {
+        const date = new Date();
+        const year = date.getFullYear();
+        let month = date.getMonth() + 1;
+        let day = date.getDate();
+        if (month < 10)
+            month = '0' + month;
+        if (day < 10)
+            day = '0' + day;
+        const today = `${year}-${month}-${day}`;
+        return today;
+    }
+    getCustomers(customers) {
+        let filterData = customers.filter((customer) => {
+            let date = customer.date;
+            return date >= this.fromDate && date <= this.toDate;
+        });
+        return filterData;
+    }
+    onFromDateChange(event) {
+        let year = event.value.year;
+        let month = event.value.month + 1;
+        let date = event.value.day;
+        month = month < 10 ? '0' + month : month;
+        date = date < 10 ? '0' + date : date;
+        this.fromDate = `${year}-${month}-${date}`;
+        this.filteredData = this.getCustomers(this.customers);
+    }
+    onToDateChange(event) {
+        let year = event.value.year;
+        let month = event.value.month + 1;
+        let date = event.value.day;
+        month = month < 10 ? '0' + month : month;
+        date = date < 10 ? '0' + date : date;
+        this.toDate = `${year}-${month}-${date}`;
+        this.filteredData = this.getCustomers(this.customers);
+    }
+    handleOnClickRemoveTask(task) {
+        this.removeTask.emit(task);
+    }
+}
+/** @nocollapse */ CustomerListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CustomerListComponent, deps: [{ token: MapService }, { token: InfoWindowService }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ CustomerListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: CustomerListComponent, selector: "customer-list", inputs: { customers: "customers" }, outputs: { nextStep: "nextStep", removeTask: "removeTask" }, ngImport: i0, template: "<div class=\"customer-list-wrapper\">\r\n  <div class=\"customer-list-filter\" [formGroup]=\"formGroup\">\r\n    <kwikui-input-date\r\n      [label]=\"'From Date'\"\r\n      [id]=\"'fromDate'\"\r\n      size=\"m\"\r\n      [formControlName]=\"'fromDate'\"\r\n      [formControl]=\"fromDateFormControl\"\r\n      (getKeyValue)=\"onFromDateChange($event)\"\r\n    ></kwikui-input-date>\r\n    <kwikui-input-date\r\n      [label]=\"'To Date'\"\r\n      [id]=\"'toDate'\"\r\n      size=\"m\"\r\n      [formControlName]=\"'toDate'\"\r\n      [formControl]=\"toDateFormControl\"\r\n      (getKeyValue)=\"onToDateChange($event)\"\r\n    ></kwikui-input-date>\r\n  </div>\r\n  <div class=\"customer-task-list\">\r\n    <div *ngFor=\"let customer of filteredData; let index = index\">\r\n      <customer-tile\r\n        [customer]=\"customer\"\r\n        [index]=\"index\"\r\n        (nextStep)=\"goToNextStep($event)\"\r\n        (removeTask)=\"handleOnClickRemoveTask($event)\"\r\n      ></customer-tile>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"customer-list-empty\" *ngIf=\"customers.length === 0\">\r\n    No Customers Left...\r\n  </div>\r\n</div>\r\n", styles: [".customer-list-wrapper{width:100%;height:100%;display:flex;flex-direction:column;overflow:auto}.customer-list-filter{height:80px;width:100%;display:flex;flex-direction:row;padding:1rem;grid-gap:1rem;gap:1rem;border-bottom:.5px solid #ddd}.customer-list-filter>*{width:100%}.customer-list-empty{height:100%;width:100%;margin-top:.5rem;font-size:1rem;text-align:center}::-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: i5.KwikUIInputDateComponent, selector: "kwikui-input-date", inputs: ["label", "id", "formControlName", "formControl", "focus", "invalid", "disabled", "placeholder", "min", "max", "validators", "properties"], outputs: ["getKeyValue"] }, { type: CustomerTileComponent, selector: "customer-tile", inputs: ["customer", "index"], outputs: ["nextStep", "removeTask"] }], directives: [{ type: i5$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i5$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5$1.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i5$1.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: CustomerListComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'customer-list',
+                    templateUrl: './customer-list.component.html',
+                    styleUrls: ['./customer-list.component.css']
+                }]
+        }], ctorParameters: function () { return [{ type: MapService }, { type: InfoWindowService }]; }, propDecorators: { customers: [{
+                type: Input
+            }], nextStep: [{
+                type: Output
+            }], removeTask: [{
+                type: Output
+            }] } });
+
+class AddCustomerComponent {
+    constructor(agentService) {
+        this.agentService = agentService;
+        this.newCustomerFormGroup = undefined;
+        this.addTask = new EventEmitter();
+        this.newCustomerFormGroup = new FormGroup({
+            name: new FormControl(''),
+            phone: new FormControl(''),
+            address: new FormControl('')
+        });
+    }
+    ngOnInit() { }
+    handleGetKeyValue(e) {
+        this.newCustomerFormGroup.patchValue({
+            [e.key]: e.value
+        }, { emitEvent: false });
+    }
+    handleOnClickAddTask(e) {
+        let newTask = {};
+        newTask = {
+            user_id: String(Math.floor(1000 + Math.random() * 9000)),
+            date: this.getDate(),
+            extras: {
+                name: this.newCustomerFormGroup.controls.name.value,
+                phone: this.newCustomerFormGroup.controls.phone.value,
+                address: this.newCustomerFormGroup.controls.address.value,
+                map: 'https: //www.google.com/maps/place/Westside+-+Borivali,+Mumbai/@19.2288067,72.853972,17z/data=!3m1!5s0x3be7b0d65d0d02dd:0x2bf11ace42a9dad8!4m12!1m6!3m5!1s0x3be7b0d6db21ad03:0xa31af1578987d699!2sBorivali+Station+West!8m2!3d19.2288016!4d72.8561607!3m4!1s0x3be7b12a0f616a41:0x1f4e031b07f5726c!8m2!3d19.2291309!4d72.8523105',
+                loc: ['19.2288067', '72.853972']
+            },
+            kycComplete: false
+        };
+        this.addTask.emit(newTask);
+        this.agentService.setAddTask(false);
+    }
+    getDate() {
+        const date = new Date();
+        const year = date.getFullYear();
+        let month = date.getMonth() + 1;
+        let day = date.getDate();
+        if (month < 10)
+            month = '0' + month;
+        if (day < 10)
+            day = '0' + day;
+        const today = `${year}-${month}-${day}`;
+        return today;
+    }
+}
+/** @nocollapse */ AddCustomerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AddCustomerComponent, deps: [{ token: AgentService }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ AddCustomerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: AddCustomerComponent, selector: "add-customer", outputs: { addTask: "addTask" }, ngImport: i0, template: "<div class=\"add-customer-container\">\r\n  <div class=\"add-customer-form\">\r\n    <div class=\"add-customer-form-content\" [formGroup]=\"newCustomerFormGroup\">\r\n      <div class=\"add-customer-heading\">Add Task</div>\r\n      <kwikui-input\r\n        type=\"text\"\r\n        label=\"Name\"\r\n        id=\"name\"\r\n        size=\"m\"\r\n        [formControlName]=\"'name'\"\r\n        [formControl]=\"newCustomerFormGroup.controls['name']\"\r\n        (getKeyValue)=\"handleGetKeyValue($event)\"\r\n      ></kwikui-input>\r\n      <kwikui-input\r\n        type=\"text\"\r\n        label=\"Phone\"\r\n        id=\"phone\"\r\n        size=\"m\"\r\n        [formControlName]=\"'phone'\"\r\n        [formControl]=\"newCustomerFormGroup.controls['phone']\"\r\n        (getKeyValue)=\"handleGetKeyValue($event)\"\r\n      ></kwikui-input>\r\n      <kwikui-input\r\n        type=\"text\"\r\n        label=\"Address\"\r\n        id=\"address\"\r\n        size=\"m\"\r\n        [formControlName]=\"'address'\"\r\n        [formControl]=\"newCustomerFormGroup.controls['address']\"\r\n        (getKeyValue)=\"handleGetKeyValue($event)\"\r\n      ></kwikui-input>\r\n      <div class=\"add-customer-form-actions\">\r\n        <kwikui-button\r\n          label=\"Cancel\"\r\n          appearance=\"flat\"\r\n          size=\"m\"\r\n          (onClick)=\"agentService.setAddTask(false)\"\r\n        ></kwikui-button>\r\n        <kwikui-button\r\n          label=\"Submit\"\r\n          appearance=\"primary\"\r\n          size=\"m\"\r\n          (onClick)=\"handleOnClickAddTask($event)\"\r\n        ></kwikui-button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".add-customer-container{position:absolute;background-color:#0000004d;width:100%;height:100%;display:flex;top:0;right:0;justify-content:center;align-items:center}.add-customer-form{width:75%;height:75%;margin:auto;background-color:#fff;border:1px solid lightgray;box-shadow:0 2px 10px -6px #000}.add-customer-form-content{display:flex;flex-direction:column;width:100%;height:100%;align-items:stretch;grid-gap:2rem;gap:2rem;padding:2rem}.add-customer-heading{font-size:1.3rem;font-weight:600;padding:1rem 0;border-bottom:1px solid #ddd}.add-customer-form-actions{display:flex;flex-direction:row;align-content:stretch;justify-content:flex-end}\n"], components: [{ type: i5.KwikUIInputComponent, selector: "kwikui-input", inputs: ["label", "id", "type", "formControlName", "formControl", "placeholder", "focus", "invalid", "disabled", "validators", "case", "properties"], outputs: ["getKeyValue"] }, { type: i5.KwikUIButtonComponent, selector: "kwikui-button", inputs: ["disabled", "id", "label", "showLoader", "styles", "class", "type", "appearance", "icon", "iconRight", "shape", "size"], outputs: ["onClick"] }], directives: [{ type: i5$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i5$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5$1.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i5$1.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: AddCustomerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'add-customer',
+                    templateUrl: './add-customer.component.html',
+                    styleUrls: ['./add-customer.component.css']
+                }]
+        }], ctorParameters: function () { return [{ type: AgentService }]; }, propDecorators: { addTask: [{
+                type: Output
+            }] } });
+
+class KwikIDAgentDashboardComponent {
+    /**
+     * @description
+     *
+     * @constructor
+     */
+    constructor(agentService, mapService, customerService) {
+        this.agentService = agentService;
+        this.mapService = mapService;
+        this.customerService = customerService;
+        /**
+         * @description
+         * Stores agent Config
+         *
+         * @default
+         * `{}`
+         */
+        this.agentConfig = {};
+        /**
+         * @description
+         * Stores list of customers
+         *
+         * @default
+         * `[]`
+         */
+        this.customers = [];
+        /**
+         * @description
+         * Stores list of customers
+         *
+         * @default
+         * `[]`
+         */
+        this.todaysCustomers = [];
+        /**
+         * @description
+         * Emitter to emit next Step
+         *
+         * @emits KwikIDAgentDashboardComponent#nextStep
+         * @fires KwikIDAgentDashboardComponent#nextStep
+         */
+        this.nextStep = new EventEmitter();
+        this.addTask = new EventEmitter();
+        this.removeTask = new EventEmitter();
+        /**
+         * @description
+         * Describes whether API Call is in progress or not
+         *
+         * @default
+         * `true`
+         */
+        this.loading = true;
+        /**
+         * @description
+         * Describes styling of Map Container
+         *
+         * @default
+         * `object`
+         */
+        this.mapStyle = { height: '100%', width: '100%', zIindex: -1 };
+    }
+    /**
+     * @description
+     * To set Google Maps API on script
+     *
+     * @ngOnInit
+     */
+    ngOnInit() {
+        const DSLScript = document.createElement('script');
+        DSLScript.src = this.agentConfig.googleMapsAPI;
+        DSLScript.type = 'text/javascript';
+        document.body.appendChild(DSLScript);
+        this.loading = false;
+        this.agentService.setAgentConfig(this.agentConfig);
+        this.customerService.setCustomers(this.customers);
+        this.todaysCustomers = this.customers.filter((customer) => customer.date == this.getDate());
+        this.agentConfig.showMaps == true || this.agentConfig.showMaps == false
+            ? this.agentService.setMapview(this.agentConfig.showMaps)
+            : null;
+    }
+    /**
+     * @description
+     *
+     * @ngAfterViewInit
+     */
+    ngAfterViewInit() {
+        setTimeout(() => __awaiter(this, void 0, void 0, function* () {
+            yield this.mapService.initMap(this.mapElement);
+            this.todaysCustomers = yield this.mapService.plotMarkers(this.todaysCustomers);
+        }), 1000);
+    }
+    /**
+     * @description
+     * Wrapper method to fire click event for next step.
+     *
+     * @function goToNextStep
+     * @func goToNextStep
+     * @method goToNextStep
+     */
+    goToNextStep(e) {
+        this.nextStep.emit(e);
+    }
+    /**
+     * @description
+     * Wrapper method to fire click event for next step.
+     *
+     * @function getDate
+     * @func getDate
+     * @method getDate
+     */
+    getDate() {
+        const date = new Date();
+        const year = date.getFullYear();
+        let month = date.getMonth() + 1;
+        let day = date.getDate();
+        if (month < 10)
+            month = '0' + month;
+        if (day < 10)
+            day = '0' + day;
+        const today = `${year}-${month}-${day}`;
+        return today;
+    }
+    handleOnClickAddTask(task) {
+        this.addTask.emit(task);
+    }
+    handleOnClickRemoveTask(task) {
+        this.removeTask.emit(task);
+    }
+}
+/** @nocollapse */ KwikIDAgentDashboardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikIDAgentDashboardComponent, deps: [{ token: AgentService }, { token: MapService }, { token: CustomerService }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ KwikIDAgentDashboardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: KwikIDAgentDashboardComponent, selector: "kwikid-agent-dashboard", inputs: { agentConfig: "agentConfig", customers: "customers", todaysCustomers: "todaysCustomers" }, outputs: { nextStep: "nextStep", addTask: "addTask", removeTask: "removeTask" }, viewQueries: [{ propertyName: "mapElement", first: true, predicate: ["mapElement"], descendants: true }], ngImport: i0, template: "<div class=\"kwikid-agent-dashboard\">\r\n  <div ngClass=\"page-loader\" *ngIf=\"loading\">\r\n    <span class=\"loader\"></span>\r\n  </div>\r\n  <div class=\"wrapper\">\r\n    <div class=\"dashboard-header\">\r\n      <div class=\"dashboard-header-client-name\">\r\n        <kwikui-button-icon\r\n          [icon]=\"'tuiIconLink'\"\r\n          appearance=\"mono\"\r\n          size=\"m\"\r\n        ></kwikui-button-icon>\r\n\r\n        {{ agentConfig.clientName }}\r\n      </div>\r\n      <div *ngIf=\"agentService.getMenu()\">\r\n        <menu\r\n          (close)=\"agentService.setMenu(false)\"\r\n          (nextStep)=\"goToNextStep($event)\"\r\n        ></menu>\r\n      </div>\r\n      <kwikui-button-icon\r\n        [icon]=\"'tuiIconMoreVertical'\"\r\n        (onClick)=\"agentService.toggleMenu()\"\r\n        appearance=\"mono\"\r\n        size=\"m\"\r\n      ></kwikui-button-icon>\r\n    </div>\r\n\r\n    <div class=\"dashboard-body\">\r\n      <div\r\n        [class]=\"agentService.showMapview ? 'map' : 'map-hidden'\"\r\n        #mapElement\r\n      ></div>\r\n      <div class=\"customer-list\">\r\n        <customer-list\r\n          [customers]=\"customers\"\r\n          (nextStep)=\"goToNextStep($event)\"\r\n          (removeTask)=\"handleOnClickRemoveTask($event)\"\r\n        ></customer-list>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"agentService.getAddTask()\">\r\n    <add-customer (addTask)=\"handleOnClickAddTask($event)\"></add-customer>\r\n  </div>\r\n</div>\r\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 .dashboard-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:max-content;border:1px solid lightgray;box-shadow:0 2px 10px -6px #000}.kwikid-agent-dashboard .wrapper .dashboard-header .dashboard-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: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 .dashboard-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:max-content;border:1px solid lightgray;box-shadow:0 2px 10px -6px #000}.kwikid-agent-dashboard .wrapper .dashboard-header .dashboard-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:center;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 .customer-list{min-width:300px;max-width:300px;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\"}.page-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}.page-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}.page-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)}}.page-loader .t-loader{display:none!important}::-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: i5.KwikUIButtonIconComponent, selector: "kwikui-button-icon", inputs: ["disabled", "id", "showLoader", "styles", "class", "type", "appearance", "icon", "shape", "size"], outputs: ["onClick"] }, { type: MenuComponent, selector: "menu", outputs: ["nextStep"] }, { type: CustomerListComponent, selector: "customer-list", inputs: ["customers"], outputs: ["nextStep", "removeTask"] }, { type: AddCustomerComponent, selector: "add-customer", outputs: ["addTask"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikIDAgentDashboardComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kwikid-agent-dashboard',
+                    templateUrl: './kwikid-agent-dashboard.component.html',
+                    styleUrls: ['./kwikid-agent-dashboard.component.scss']
+                }]
+        }], ctorParameters: function () { return [{ type: AgentService }, { type: MapService }, { type: CustomerService }]; }, propDecorators: { agentConfig: [{
+                type: Input
+            }], customers: [{
+                type: Input
+            }], todaysCustomers: [{
+                type: Input
+            }], nextStep: [{
+                type: Output
+            }], addTask: [{
+                type: Output
+            }], removeTask: [{
+                type: Output
+            }], mapElement: [{
+                type: ViewChild,
+                args: ['mapElement']
+            }] } });
+
+class KwikIDAgentDashboardModule {
+}
+/** @nocollapse */ KwikIDAgentDashboardModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikIDAgentDashboardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ KwikIDAgentDashboardModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikIDAgentDashboardModule, declarations: [KwikIDAgentDashboardComponent,
+        CustomerListComponent,
+        CustomerTileComponent,
+        MenuComponent,
+        KycSuccessComponent,
+        KycPendingComponent,
+        AddCustomerComponent], imports: [CommonModule,
+        HttpClientModule,
+        FormsModule,
+        ReactiveFormsModule,
+        RouterTestingModule,
+        KwikUIButtonModule,
+        KwikUIButtonIconModule,
+        KwikUIInputModule,
+        KwikUIInputDateModule,
+        KwikUISelectComboboxModule,
+        KwikUITableModule,
+        KwikUITablePaginationModule,
+        TuiSidebarModule,
+        TuiActiveZoneModule], exports: [KwikIDAgentDashboardComponent] });
+/** @nocollapse */ KwikIDAgentDashboardModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikIDAgentDashboardModule, imports: [[
+            CommonModule,
+            HttpClientModule,
+            FormsModule,
+            ReactiveFormsModule,
+            RouterTestingModule,
+            KwikUIButtonModule,
+            KwikUIButtonIconModule,
+            KwikUIInputModule,
+            KwikUIInputDateModule,
+            KwikUISelectComboboxModule,
+            KwikUITableModule,
+            KwikUITablePaginationModule,
+            TuiSidebarModule,
+            TuiActiveZoneModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: KwikIDAgentDashboardModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        KwikIDAgentDashboardComponent,
+                        CustomerListComponent,
+                        CustomerTileComponent,
+                        MenuComponent,
+                        KycSuccessComponent,
+                        KycPendingComponent,
+                        AddCustomerComponent,
+                    ],
+                    imports: [
+                        CommonModule,
+                        HttpClientModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        RouterTestingModule,
+                        KwikUIButtonModule,
+                        KwikUIButtonIconModule,
+                        KwikUIInputModule,
+                        KwikUIInputDateModule,
+                        KwikUISelectComboboxModule,
+                        KwikUITableModule,
+                        KwikUITablePaginationModule,
+                        TuiSidebarModule,
+                        TuiActiveZoneModule,
+                    ],
+                    exports: [KwikIDAgentDashboardComponent],
+                }]
+        }] });
+
+/* kwikid-agent-dashboard */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { KwikIDAgentDashboardComponent, KwikIDAgentDashboardModule };
+//# sourceMappingURL=kwikid-agent-dashboard.js.map