gamma-app-controller 1.1.9 → 1.1.11

package/fesm2020/gamma-app-controller.mjs

@@ -7,14 +7,14 @@ import { CommonModule } from '@angular/common';
 import * as i1 from '@angular/platform-browser';
 import * as i2 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import { DxScrollViewComponent, DevExtremeModule, DxButtonModule, DxCheckBoxModule, DxNumberBoxModule, DxDataGridModule, DxDropDownBoxModule, DxTreeViewModule, DxScrollViewModule, DxFormModule, DxAccordionModule, DxTagBoxModule, DxHtmlEditorModule, DxBulletModule, DxChartModule, DxDateBoxModule, DxLoadPanelModule, DxLookupModule, DxPivotGridModule, DxTemplateModule, DxTextAreaModule, DxValidationSummaryModule, DxValidatorModule, DxCalendarModule, DxTooltipModule, DxContextMenuModule, DxLoadIndicatorModule, DxPopupModule, DxSelectBoxModule, DxTextBoxModule } from 'devextreme-angular';
+import { DxScrollViewComponent, DevExtremeModule, DxButtonModule, DxCheckBoxModule, DxNumberBoxModule, DxDataGridModule, DxDropDownBoxModule, DxTreeViewModule, DxScrollViewModule, DxFormModule, DxAccordionModule, DxTagBoxModule, DxHtmlEditorModule, DxBulletModule, DxChartModule, DxDateBoxModule, DxLoadPanelModule, DxLookupModule, DxPivotGridModule, DxTemplateModule, DxTextAreaModule, DxValidationSummaryModule, DxValidatorModule, DxCalendarModule, DxTooltipModule, DxContextMenuModule, DxLoadIndicatorModule, DxPieChartModule, DxPopupModule, DxSelectBoxModule, DxTextBoxModule } from 'devextreme-angular';
 import * as i8 from '@angular/forms';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { confirm } from 'devextreme/ui/dialog';
 import * as i1$1 from '@angular/common/http';
 import { HttpHeaders } from '@angular/common/http';
 import { throwError, BehaviorSubject, map, catchError } from 'rxjs';
-import momentNamespace from 'moment';
+import moment$1 from 'moment';
 import * as i2$1 from 'ngx-toastr';
 import * as i3 from 'devextreme-angular/core';
 import * as i6 from 'devextreme-angular/ui/nested';
@@ -730,7 +730,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                     args: [APP_ENVIRONMENT]
                 }] }]; } });
 
-const moment = momentNamespace;
+const moment = moment$1;
 
 class CommonService {
     constructor(http, toastr, sanitizer) {
@@ -3372,6 +3372,7 @@ class GoogleGeoMapComponent {
             this.isLoader = true;
             this.page_config = value;
             this.page_parms = value.titleParams;
+            this.sortBy = value.kpiConfig?.dataConfig?.sortBy;
             if (value.kpiConfig.dataSource &&
                 value.kpiConfig.dataSource.length !== 0) {
                 if (value.kpiConfig.formate == "monthly") {
@@ -3404,6 +3405,14 @@ class GoogleGeoMapComponent {
                             this.isLoader = false;
                         }, 200);
                     }
+                    else if (this.mapTYpe == "bubbleMap") {
+                        this.locations = value.kpiConfig.dataSource;
+                        this.chartHeight = `${value.kpiConfig.dataConfig.size}px`;
+                        this.tootTipColumn = value.kpiConfig.dataConfig.chart_config;
+                        this.mapOptionForHeatMap = {
+                            zoom: this.zoomValuForAll
+                        };
+                    }
                     else {
                         this.locations = value.kpiConfig.dataSource;
                         this.chartHeight = `${value.kpiConfig.dataConfig.size}px`;
@@ -3414,6 +3423,27 @@ class GoogleGeoMapComponent {
                         };
                     }
                 }
+                else if (value.kpiConfig.formate == "daily") {
+                    this.mapTYpe = value.kpiConfig.dataConfig.mapType;
+                    const sortedData = value.kpiConfig.dataSource
+                        .filter(record => record[this.sortBy])
+                        .sort((a, b) => moment$1(b[this.sortBy]).diff(moment$1(a[this.sortBy])));
+                    const mostRecentRecord = sortedData[0];
+                    if (value.endDate) {
+                        this.filteredObjects = sortedData.filter(data => data[this.sortBy] === value.endDate);
+                    }
+                    else {
+                        this.filteredObjects = sortedData.filter(data => data[this.sortBy] === mostRecentRecord[this.sortBy]);
+                    }
+                    if (this.mapTYpe == "bubbleMap") {
+                        this.locations = this.filteredObjects;
+                        this.chartHeight = `${value.kpiConfig.dataConfig.size}px`;
+                        this.tootTipColumn = value.kpiConfig.dataConfig.chart_config;
+                        this.mapOptionForHeatMap = {
+                            zoom: this.zoomValuForAll
+                        };
+                    }
+                }
             }
         }
     }
@@ -3438,6 +3468,11 @@ class GoogleGeoMapComponent {
                 this.initializeHeatWithMarkerMap(this.locations);
             }
         }
+        else {
+            this.isLoader = false;
+            this.initializeMap();
+            this.addBubbleMarkers();
+        }
     }
     loadGoogleCharts() {
         google.charts.load("current", {
@@ -3496,6 +3531,43 @@ class GoogleGeoMapComponent {
     }
     initializeMap() {
         const mapOptions = this.mapOptionForHeatMap;
+        if (this.mapTYpe == "bubbleMap") {
+            mapOptions['styles'] = [
+                {
+                    featureType: 'all',
+                    stylers: [
+                        { saturation: -100 },
+                        { lightness: 70 },
+                        { visibility: 'simplified' },
+                    ],
+                },
+                {
+                    featureType: 'administrative.country',
+                    elementType: 'labels',
+                    stylers: [
+                        { lightness: -30 },
+                        { visibility: 'on' },
+                        { fontWeight: 'bold' },
+                        { fontSize: '12px' }
+                    ],
+                },
+                {
+                    featureType: "administrative.country",
+                    elementType: "geometry.stroke",
+                    stylers: [
+                        { lightness: -40 },
+                        { weight: 1.5 },
+                    ],
+                },
+                {
+                    featureType: "administrative.country",
+                    elementType: "geometry.fill",
+                    stylers: [
+                        { lightness: 90 }
+                    ]
+                }
+            ];
+        }
         this.map = new google.maps.Map(this.googlMap.nativeElement, mapOptions);
         this.googlMap.nativeElement.style.height = this.chartHeight;
     }
@@ -3514,7 +3586,13 @@ class GoogleGeoMapComponent {
                         width: 32,
                         height: 32,
                     },
-                } : '',
+                } : {
+                    path: google.maps.SymbolPath.CIRCLE,
+                    scale: 5,
+                    fillColor: 'blue',
+                    fillOpacity: 0.6,
+                    strokeWeight: 0,
+                },
                 map: this.map,
                 title: `${location.city}: $${location.total_sales_amount}`,
             });
@@ -3644,6 +3722,55 @@ class GoogleGeoMapComponent {
             this.markers.forEach((marker) => marker.setMap(this.map));
         }
     }
+    addBubbleMarkers() {
+        this.prepareBubbleData();
+        this.locations.forEach((location) => {
+            const marker = new google.maps.Marker({
+                position: {
+                    lat: parseFloat(location[this.page_config.kpiConfig.dataConfig.markerLatitude]),
+                    lng: parseFloat(location[this.page_config.kpiConfig.dataConfig.markerLongitude]),
+                },
+                icon: {
+                    path: google.maps.SymbolPath.CIRCLE,
+                    scale: Math.round(location.sales_percentage),
+                    fillColor: this.page_config.kpiConfig.dataConfig.bubbleColor,
+                    fillOpacity: 0.6,
+                    strokeWeight: 0,
+                },
+                map: this.map,
+                title: `${location.city}: $${location[this.page_config.kpiConfig.dataConfig.agrumentValue]}`,
+            });
+            this.bounds.extend(marker.getPosition());
+            this.markers.push(marker);
+            let stringWithoutQuotes = this.getInfoWindoData(location);
+            const infoWIndowData = this.getInfoWindoData(location);
+            const infoWindow = new google.maps.InfoWindow({
+                content: `<div style="height: 100%; width: 100%; color: black; font-size: 20px;">
+        ${infoWIndowData}
+      </div>`,
+            });
+            marker.addListener("click", () => {
+                if (this.currentInfoWindow) {
+                    this.currentInfoWindow.close();
+                }
+                infoWindow.open(this.map, marker);
+                this.currentInfoWindow = infoWindow;
+            });
+        });
+        this.map.fitBounds(this.bounds);
+    }
+    prepareBubbleData() {
+        const minSales = Math.min(...this.locations.map(d => d[this.page_config.kpiConfig.dataConfig.agrumentValue]));
+        const maxSales = Math.max(...this.locations.map(d => d[this.page_config.kpiConfig.dataConfig.agrumentValue]));
+        const minPercentage = this.page_config.kpiConfig.dataConfig.bubbleMinimumSize;
+        const maxPercentage = this.page_config.kpiConfig.dataConfig.bubbleMaximumSize;
+        const normalize = (value, min, max) => {
+            return ((value - min) / (max - min)) * (maxPercentage - minPercentage) + minPercentage;
+        };
+        this.locations.forEach(d => {
+            d.sales_percentage = Math.min(Math.max(normalize(d[this.page_config.kpiConfig.dataConfig.agrumentValue], minSales, maxSales), minPercentage), maxPercentage);
+        });
+    }
 }
 GoogleGeoMapComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GoogleGeoMapComponent, deps: [{ token: CommonService }], target: i0.ɵɵFactoryTarget.Component });
 GoogleGeoMapComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: GoogleGeoMapComponent, selector: "app-google-geo-map", inputs: { rightClickEnable: "rightClickEnable", chartDataSource: "chartDataSource" }, outputs: { getTableConfigOutPut: "getTableConfigOutPut", oRowClick: "oRowClick", onrightClickContextSelection: "onrightClickContextSelection" }, viewQueries: [{ propertyName: "googlMap", first: true, predicate: ["googlMap"], descendants: true }], ngImport: i0, template: "\n<div class=\"mx-2 bg-gray-800\">\n    <ng-container *ngIf=\"isLoader\">\n        <div class=\"flex justify-center items-start bg-gray-800 p-2\">\n            <app-loader></app-loader>\n        </div>\n    </ng-container>\n\n    <div class=\"mx-2 pb-2\">\n\n      <ng-container>\n        <!-- <div id=\"regions_div\" style=\"width: 100%\" ></div>   -->\n        <div id=\"regions_div\" #googlMap style=\"width: 100%\" ></div>    \n      </ng-container>\n      \n       \n\n    </div>\n\n\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoaderComponent, selector: "app-loader" }] });
@@ -3686,7 +3813,7 @@ class GeoMapComponent {
                 "value": "heatMapAndMarker"
             }
         ];
-        this.chartViewTypeDataSource = ["geoMap", "heatMap"];
+        this.chartViewTypeDataSource = ["geoMap", "heatMap", "bubbleMap"];
         this.mapIconsDataSource = ["assets/custom-marker..jpeg"];
         this.mapType = '';
         this.regionData = ["country", "city"];
@@ -3722,6 +3849,17 @@ class GeoMapComponent {
             "size": '450',
             "zoom": ""
         };
+        this.bubbleMapConfig = {
+            "chart_config": [],
+            "agrumentValue": "",
+            "bubbleColor": "#285e08",
+            "size": '450',
+            "bubbleMinimumSize": "5",
+            "bubbleMaximumSize": "15",
+            "markerLatitude": "",
+            "markerLongitude": "",
+            "sortBy": ""
+        };
         this.tableDataConfig = {
             "chart_config": [],
             "region": "",
@@ -3756,6 +3894,11 @@ class GeoMapComponent {
                     this.tableDataConfig = value.selectedWidgetConfig.dataConfig;
                     this.tableDataConfig.chart_config = value.selectedWidgetConfig.dataConfig.chart_config;
                 }
+                else if (this.mapType == 'bubbleMap') {
+                    this.bubbleMapConfig = value.selectedWidgetConfig.dataConfig;
+                    this.bubbleMapConfig.chart_config = value.selectedWidgetConfig.dataConfig.chart_config;
+                    this.tableDataConfig.chart_config = value.selectedWidgetConfig.dataConfig.chart_config;
+                }
                 else {
                     this.heatMapConfig = value.selectedWidgetConfig.dataConfig;
                     this.heatMapConfig.chart_config = value.selectedWidgetConfig.dataConfig.chart_config;
@@ -3885,6 +4028,17 @@ class GeoMapComponent {
             this.table_columns_config.kpiConfig['viewProperties'] = this.viewProperties;
             this.createOtherComponentView.emit(this.table_columns_config);
         }
+        else if (this.mapType == 'bubbleMap') {
+            this.table_columns_config.kpiConfig['dataConfig'] = this.bubbleMapConfig;
+            this.table_columns_config.kpiConfig['dataConfig']['chart_config'] = this.tableDataConfig.chart_config;
+            this.table_columns_config.kpiConfig['dataConfig']['mapType'] = this.mapType;
+            if (this.viewProperties.clickEventOptions.eventType == 'optionalDrillDown') {
+                this.viewProperties['clickEventOptions']['associatedViews'] = this.optionalDrilDownDataSource;
+            }
+            this.table_columns_config.kpiConfig['viewProperties'] = this.viewProperties;
+            this.table_columns_config.kpiConfig['dataSource'] = '';
+            this.createOtherComponentView.emit(this.table_columns_config);
+        }
         else {
             this.table_columns_config.kpiConfig['dataConfig'] = this.heatMapConfig;
             this.table_columns_config.kpiConfig['dataConfig']['chart_config'] = this.tableDataConfig.chart_config;
@@ -3937,6 +4091,11 @@ class GeoMapComponent {
             this.table_columns_config.kpiConfig['dataConfig'] = this.tableDataConfig;
             this.table_columns_config.kpiConfig['dataConfig']['mapType'] = this.mapType;
         }
+        else if (this.mapType == 'bubbleMap') {
+            this.table_columns_config.kpiConfig['dataConfig'] = this.bubbleMapConfig;
+            this.table_columns_config.kpiConfig['dataConfig']['chart_config'] = this.tableDataConfig.chart_config;
+            this.table_columns_config.kpiConfig['dataConfig']['mapType'] = this.mapType;
+        }
         else {
             this.table_columns_config.kpiConfig['dataConfig'] = this.heatMapConfig;
             this.table_columns_config.kpiConfig['dataConfig']['chart_config'] = this.tableDataConfig.chart_config;
@@ -3958,10 +4117,10 @@ class GeoMapComponent {
     }
 }
 GeoMapComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GeoMapComponent, deps: [{ token: CommonService }, { token: i0.ChangeDetectorRef }, { token: ApplicationContentService }, { token: i2$1.ToastrService }], target: i0.ɵɵFactoryTarget.Component });
-GeoMapComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: GeoMapComponent, selector: "app-geo-map", inputs: { chartconfigData: ["datasetmodal", "chartconfigData"] }, outputs: { createOtherComponentView: "createOtherComponentView" }, ngImport: i0, template: "<div class=\"flex flex-wrap\">\n    <div class=\"w-full mx-2 border-r\">\n        <ng-container *ngIf=\"!isJsonPreview\">\n            <pre><code>{{jsaonDatasource | json}}</code></pre>\n        </ng-container>\n        <ng-container  *ngIf=\"isJsonPreview\">\n            <!-- <app-gamma-geo-chart [chartDataSource]=\"chartDataSourceForMap\"></app-gamma-geo-chart> -->\n            <app-google-geo-map [chartDataSource]=\"chartDataSourceForMap\"></app-google-geo-map>\n\n            <div #dynamicContainer></div>\n\n        </ng-container>\n    </div>\n    <div class=\"w-full mx-2\">\n\n        <div class=\"mb-4 border-b border-gray-200 dark:border-gray-700\">\n            <ul class=\"flex flex-wrap -mb-px text-sm font-medium text-center\" role=\"tablist\">\n                <li class=\"me-2\" role=\"presentation\">\n                    <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{ \n                                        'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'basic',\n                                        'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'basic' \n                                    }\" (click)=\"setActiveTab('basic')\" type=\"button\" role=\"tab\">\n                        Basic\n                    </button>\n                </li>\n                <li class=\"me-2\" role=\"presentation\">\n                    <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{ \n                                        'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'chart_config',\n                                        'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'chart_config' \n                                    }\" (click)=\"setActiveTab('chart_config')\" type=\"button\" role=\"tab\">\n                        Chart Columns\n                    </button>\n                </li>\n                <li class=\"me-2\" role=\"presentation\">\n                    <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                                        'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'properties',\n                                                        'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'properties'\n                                                    }\" (click)=\"setActiveTab('properties')\" type=\"button\" role=\"tab\">\n                        Properties\n                    </button>\n                </li>\n\n            </ul>\n        </div>\n\n        <div id=\"default-styled-tab-content\">\n            <div *ngIf=\"activeTab === 'basic'\">\n                <div class=\"flex flex-col flex-auto min-w-0 my-2\">\n                    <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Filter Title\n                        Config\n                    </div>\n                    <div class=\"flex pt-2 border-x border-b\">\n                        <div class=\"px-1 mb-1 w-1/3\">\n                            <div class=\"text-md mb-1\"> Select Map type </div>\n                            <dx-select-box [searchEnabled]=\"true\" [items]=\"chartViewTypeDataSource\"\n                                [(ngModel)]=\"mapType\" (onValueChanged)=\"changeMapType($event)\"></dx-select-box>\n                        </div>\n                      \n                        <ng-container *ngIf=\"mapType == 'heatMap'\">\n                            <div class=\"px-1 mb-1 w-1/3\">\n                              \n                                    <div class=\"text-md mb-1\"> Heat Map Category </div>\n                                    <dx-select-box [searchEnabled]=\"true\" [dataSource]=\"heatMapTypeDatasource\"\n                                    displayExpr=\"name\"\n                                    valueExpr=\"value\" [(ngModel)]=\"heatMapConfig.heatMapCategory\" (onValueChanged)=\"heatMapCategory($event)\"></dx-select-box>\n                            </div>\n                        </ng-container>\n                    </div>\n                    <ng-container *ngIf=\"mapType == 'geoMap'\">\n                        <div class=\"flex pt-2 border-x border-b\">\n                            <div class=\"px-1 mb-1 w-1/3\">\n                                <div class=\"text-md mb-1\"> Region </div>\n                                <dx-select-box [searchEnabled]=\"true\" [items]=\"regionData\"\n                                    [(ngModel)]=\"tableDataConfig.region\"></dx-select-box>\n                            </div>\n                            <div class=\"px-1 mb-1 w-1/3\" *ngIf=\"tableDataConfig.region == 'city'\">\n                                <div class=\"text-md mb-1\"> Type Region Code</div>\n                                <dx-text-box [(ngModel)]=\"tableDataConfig.regionCode\"></dx-text-box>\n                            </div>\n                        </div>\n                        <div class=\"pt-2 border-x border-b \">\n                            <div class=\"my-2 flex justify-between\">\n                                <!-- <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Title</div>\n                                    <dx-text-box [(ngModel)]=\"tableDataConfig.title\"></dx-text-box>\n                                </div> -->\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Argument Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"tableDataConfig.argumentField\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Chartvalu Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"tableDataConfig.chartValueField\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> size</div>\n                                    <dx-text-box [(ngModel)]=\"tableDataConfig.size\"></dx-text-box>\n                                </div>\n    \n                                <div class=\"px-1 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\">Background Color</div>\n                                    <dx-color-box [(ngModel)]=\"tableDataConfig.backgroundColor\"></dx-color-box>\n                                </div>\n                                <!-- <div class=\"px-4 mt-6 w-full\">\n                                    <dx-check-box [value]=\"tableDataConfig.commonConfig.isSearchBox\"\n                                        [(ngModel)]=\"tableDataConfig.commonConfig.isSearchBox\"\n                                        text=\"Search Box\"></dx-check-box>\n    \n                                </div> -->\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-2\"> Display Formate </div>\n                                    <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                        [(ngModel)]=\"table_columns_config.kpiConfig.formate\"\n                                        [readOnly]=\"false\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-2\"> Key To Pass </div>\n                                    <dx-tag-box [items]=\"configColume\"\n                                        [(ngModel)]=\"table_columns_config.kpiConfig.keyToPass\"></dx-tag-box>\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\" pt-2 border-x border-b \">\n                            <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Colors\n                            </div>\n                            <div class=\"flex  flex-wrap px-1 mb-2 mt-2\">\n                                <div class=\"flex mr-2 mb-2\" *ngFor=\"let color of tableDataConfig.colors; let i = index\">\n                                   <div class=\"mr-2\">\n                                    <dx-color-box [(ngModel)]=\"tableDataConfig.colors[i]\"\n                                    (onValueChanged)=\"onColorChange($event.value, i)\"></dx-color-box>\n                                   </div>\n                                   <button class=\"{{commonService.btn_danger_sm}} cursor-pointer px-2\"\n                                   (click)=\"removeColor(i)\"><i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                  </button>\n                                   <!-- <div class=\"px-2\"> <button class=\"{{commonService.btn_danger_sm}}\" (click)=\"removeColor(i)\">Remove</button></div> -->\n                                </div>\n                                \n                            </div>\n                            <div class=\"flex flex-row justify-end my-2\">\n                                <button class=\"{{commonService.btn_success_sm}}\" (click)=\"addColor()\">Add Color</button>\n                            </div>\n                        </div>\n                    </ng-container>\n                 \n                    <ng-container  *ngIf=\"heatMapConfig.heatMapCategory == 'heatMapOnly' || heatMapConfig.heatMapCategory == 'heatMapMarker' || heatMapConfig.heatMapCategory == 'heatMapAndMarker'\" >\n                        <div class=\"flex-col\">\n                            <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> \n                                Center Location Config\n                            </div>\n                            <div>\n                                <div class=\"flex pt-2 border-x border-b\">\n                                    <!-- <div class=\"px-1 mb-1 w-1/4\">\n                                        <div class=\"text-md mb-1\"> Latitude  </div>\n                                        <dx-text-box [(ngModel)]=\"heatMapConfig.centerLatitude\"></dx-text-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-1/4\">\n                                        <div class=\"text-md mb-1\"> Longitude </div>\n                                        <dx-text-box [(ngModel)]=\"heatMapConfig.centerLongitude\"></dx-text-box>\n                                    </div> -->\n                                    <div class=\"px-1 mb-1 w-1/4\" *ngIf=\"heatMapConfig.heatMapCategory != 'heatMapAndMarker'\">\n                                        <div class=\"text-md mb-1\"> Zoom Label  </div>\n                                        <dx-text-box [(ngModel)]=\"heatMapConfig.zoom\"></dx-text-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-1/4\">\n                                        <div class=\"text-md mb-1\"> Custom Icons </div>\n                                        <dx-text-box [(ngModel)]=\"heatMapConfig.icon\"></dx-text-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-1/4\">\n                                        <div class=\"text-md mb-1\"> size</div>\n                                        <dx-text-box [(ngModel)]=\"heatMapConfig.size\"></dx-text-box>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"flex-col\">\n                            <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> \n                                 Location Marker  Config\n                            </div>\n                            <div>\n                                <div class=\"flex pt-2 border-x border-b\">\n                                    <div class=\"px-1 mb-1 w-1/3\">\n                                        <div class=\"text-md mb-1\"> Latitude  </div>\n                                        <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"heatMapConfig.markerLatitude\"></dx-select-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-1/3\">\n                                        <div class=\"text-md mb-1\"> Longitude </div>\n                                        <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"heatMapConfig.markerLongitude\"></dx-select-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-full\">\n                                        <div class=\"text-md mb-2\"> Display Formate </div>\n                                        <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                            [(ngModel)]=\"table_columns_config.kpiConfig.formate\"\n                                            [readOnly]=\"false\"></dx-select-box>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                     </ng-container>\n                   \n                </div>\n                <!-- <div class=\"flex flex-col flex-auto min-w-0 my-2\">\n                    <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Table Config\n                    </div>\n                    <div class=\"flex flse-row py-3 border-x border-b \">\n                        <div class=\"px-1 mb-2 mt-8 w-full\">\n                            <dx-check-box [value]=\"tableDataConfig.searchPanel\"\n                                [(ngModel)]=\"tableDataConfig.searchPanel\" text=\"Search Panel\"></dx-check-box>\n                        </div>\n                        <div class=\" px-1 mb-2 w-full\">\n                            <div class=\"text-md mb-2\">File Name</div>\n                            <dx-text-box [(ngModel)]=\"tableDataConfig.file_name\"></dx-text-box>\n                        </div>\n                        <div class=\"px-1 mb-2 w-full\">\n                            <div class=\"text-md mb-2\"> Number Of Row</div>\n                            <dx-number-box [value]=\"tableDataConfig.numberOfRow\"\n                                [(ngModel)]=\"tableDataConfig.numberOfRow\"></dx-number-box>\n                        </div>\n                        <div class=\"px-1 mb-2 mt-8 w-full\">\n                            <dx-check-box [value]=\"tableDataConfig.pageInfo\" [(ngModel)]=\"tableDataConfig.pageInfo\"\n                                text=\"Page Info\"></dx-check-box>\n                        </div>\n\n                    </div>\n\n                </div> -->\n\n\n            </div>\n            <div *ngIf=\"activeTab === 'chart_config'\">\n                <div class=\"h-full overflow-x-auto\">\n                    <div class=\"flex flex-col flex-auto min-w-0\">\n                        <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> \n                            Tooltip Columns\n                        </div>\n                        <div class=\"pt-2 border-x border-b \">\n                            <div class=\"my-2 border-b flex flex-row\"\n                                *ngFor=\"let item of tableDataConfig.chart_config; let i = index;\">\n                                <!-- <div class=\"px-1 mb-2 mt-6 w-full\">\n                                    <dx-check-box [value]=\"item.visible\" [(ngModel)]=\"item.visible\"\n                                        text=\"Visiblity\"></dx-check-box>\n                                </div> -->\n\n                                <div class=\"px-1 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\"> Value Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"item.dataField\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\"> Caption</div>\n                                    <dx-text-box [(ngModel)]=\"item.caption\"></dx-text-box>\n                                </div>\n                                <!-- <div class=\"px-2 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\"> UI Function</div>\n                                    <dx-select-box [items]=\"enrichNameList\" [(ngModel)]=\"item.enrichName\"\n                                        [searchEnabled]=\"true\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-2 mt-6 w-full\">\n                                    <dx-check-box [value]=\"item.isShowBar\" [(ngModel)]=\"item.isShowBar\"\n                                        text=\"Allow Bar\"></dx-check-box>\n                                </div>\n\n                                <div class=\"px-1 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\">Color</div>\n                                    <dx-color-box [(ngModel)]=\"item.color\"></dx-color-box>\n                                </div> -->\n                                <div class=\"text-center mt-8 w-full\">\n                                    <button *ngIf=\"i !== 0\" class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItemForColumns(i, 'up')\">\n                                        <i class=\"fa fa-arrow-up\" aria-hidden=\"true\"></i>\n                                    </button>\n\n                                    <button *ngIf=\"i !== tableDataConfig.chart_config.length - 1\"\n                                        class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItemForColumns(i, 'down')\">\n                                        <i class=\"fa fa-arrow-down\" aria-hidden=\"true\"></i>\n                                    </button>\n                                    <button class=\"{{commonService.btn_danger_sm}} cursor-pointer\"\n                                        (click)=\"deleteColumns(i)\"><i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                    </button>\n                                </div>\n\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"flex flex-row justify-end my-2\">\n                        <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\" (click)=\"addColumns()\">Add\n                            Columns</button>\n                    </div>\n                </div>\n            </div>\n            <div *ngIf=\"activeTab === 'properties'\">\n                <div class=\"h-full overflow-x-auto\">\n                    <app-loader *ngIf=\"isLoader\"></app-loader>\n                    <ng-container *ngIf=\"!isLoader\">\n                        <div class=\"flex flex-row justify-between border-b py-3\">\n                            <div class=\"mx-2\">\n                                <dx-check-box [value]=\"viewProperties.enableClickEvent\"\n                                    [(ngModel)]=\"viewProperties.enableClickEvent\"\n                                    text=\"Enable Click Event\"></dx-check-box>\n                            </div>\n                            <div class=\"mx-2\">\n                                <dx-check-box [value]=\"viewProperties.enableRightClickEvent\"\n                                    [(ngModel)]=\"viewProperties.enableRightClickEvent\"\n                                    text=\"Enable Right Click\"></dx-check-box>\n                            </div>\n                        </div>\n                        <div class=\"w-full p-2\" *ngIf=\"viewProperties.enableClickEvent\">\n\n                            <div class=\"flex flex-col flex-auto min-w-0 my-2\">\n                                <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Event\n                                    Type\n                                    Option\n                                </div>\n                                <div class=\"w-full p-3 border-x border-b \">\n                                    <div class=\"flex flex-row\">\n                                        <div class=\"w-full\">\n                                            <div class=\"text-md mb-2\"> Event Type</div>\n                                        </div>\n                                        <div class=\"w-full\">\n                                            <dx-select-box [items]=\"['drilldown','optionalDrillDown']\"\n                                                (onValueChanged)=\"getSelectedEventType($event)\"\n                                                [(ngModel)]=\"viewProperties.clickEventOptions.eventType\"></dx-select-box>\n                                        </div>\n                                    </div>\n                                    <ng-container *ngIf=\"viewProperties.clickEventOptions.eventType == 'drilldown'\">\n                                        <div class=\"flex flex-row justify-between mt-3\">\n                                            <div class=\"w-full\">\n                                                <div class=\"text-md mb-2\"> Associated Views</div>\n                                                <dx-tag-box [items]=\"allConfiguredViews\"\n                                                    [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                    valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                    [showSelectionControls]=\"true\" [searchEnabled]=\"true\"></dx-tag-box>\n                                            </div>\n                                        </div>\n                                    </ng-container>\n                                    <ng-container\n                                        *ngIf=\"viewProperties.clickEventOptions.eventType == 'optionalDrillDown'\">\n                                        <div class=\"flex flex-row justify-between mt-3\">\n                                            <div class=\"w-full\">\n                                                <ng-container\n                                                    *ngFor=\"let item of optionalDrilDownDataSource;let i = index;\">\n\n                                                    <div class=\"flex flex-row justify-between\">\n                                                        <div class=\"mx-2 w-full\">\n                                                            <div class=\"text-md mb-2\"> Associated Views</div>\n                                                            <dx-tag-box [items]=\"allConfiguredViews\"\n                                                                [(ngModel)]=\"item.viewId\" valueExpr=\"viewId\"\n                                                                displayExpr=\"viewName\" [showSelectionControls]=\"true\"\n                                                                [maxDisplayedTags]=\"2\"\n                                                                [searchEnabled]=\"true\"></dx-tag-box>\n\n                                                        </div>\n                                                        <div class=\"mx-2\">\n                                                            <div class=\"text-md mb-2\"> Associated Params</div>\n                                                            <dx-text-box\n                                                                [(ngModel)]=\"item.filterCondition\"></dx-text-box>\n                                                        </div>\n                                                        <div class=\"mx-2\">\n                                                            <button\n                                                                class=\"{{commonService.btn_danger_sm}} cursor-pointer mt-8\"\n                                                                (click)=\"deleteAssociatedParams(i)\"><i\n                                                                    class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                                            </button>\n                                                        </div>\n                                                    </div>\n                                                </ng-container>\n                                                <div class=\"flex flex-row justify-end mt-4\">\n                                                    <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\"\n                                                        (click)=\"addAssociatedParams()\">Add\n                                                        Params</button>\n                                                </div>\n                                            </div>\n                                        </div>\n                                    </ng-container>\n\n                                </div>\n                            </div>\n\n                        </div>\n                    </ng-container>\n                    <button class=\"{{commonService.btn_light_md}} cursor-pointer mt-2\"\n                        (click)=\"resetViewProprstise()\">Reset All</button>\n                </div>\n            </div>\n\n        </div>\n\n\n    </div>\n</div>\n\n<div class=\"flex flex-row border-t pl-3\">\n    <div class=\"flex justify-start mx-1\">\n        <button class=\"{{commonService.btn_warning_md}} cursor-pointer mt-2\" (click)=\"viewMapForTest()\">\n            Preview</button>\n        <button class=\"{{commonService.btn_primary_md}} cursor-pointer mt-2\" (click)=\"isJsonPreview = false\">Data\n            Preview</button>\n    </div>\n    <div class=\"flex justify-end mx-1 flex-grow\">\n        <button class=\"{{commonService.btn_success_md}} cursor-pointer mt-2\"\n            (click)=\"getSaveChartConfig()\">Submit</button>\n    </div>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.DxCheckBoxComponent, selector: "dx-check-box", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "iconSize", "isValid", "name", "readOnly", "rtlEnabled", "tabIndex", "text", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "visible", "width"], outputs: ["onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconSizeChange", "isValidChange", "nameChange", "readOnlyChange", "rtlEnabledChange", "tabIndexChange", "textChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "component", type: i6$2.DxColorBoxComponent, selector: "dx-color-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "applyButtonText", "applyValueMode", "buttons", "cancelButtonText", "deferRendering", "disabled", "dropDownButtonTemplate", "dropDownOptions", "editAlphaChannel", "elementAttr", "fieldTemplate", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "keyStep", "label", "labelMode", "name", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showDropDownButton", "stylingMode", "tabIndex", "text", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "visible", "width"], outputs: ["onChange", "onClosed", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOpened", "onOptionChanged", "onPaste", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "applyButtonTextChange", "applyValueModeChange", "buttonsChange", "cancelButtonTextChange", "deferRenderingChange", "disabledChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "editAlphaChannelChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "keyStepChange", "labelChange", "labelModeChange", "nameChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showDropDownButtonChange", "stylingModeChange", "tabIndexChange", "textChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "component", type: i6$1.DxSelectBoxComponent, selector: "dx-select-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "buttons", "dataSource", "deferRendering", "disabled", "displayExpr", "displayValue", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "fieldTemplate", "focusStateEnabled", "grouped", "groupTemplate", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "items", "itemTemplate", "label", "labelMode", "maxLength", "minSearchLength", "name", "noDataText", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "searchEnabled", "searchExpr", "searchMode", "searchTimeout", "selectedItem", "showClearButton", "showDataBeforeSearch", "showDropDownButton", "showSelectionControls", "spellcheck", "stylingMode", "tabIndex", "text", "useItemTextAsTitle", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueChangeEvent", "valueExpr", "visible", "width", "wrapItemText"], outputs: ["onChange", "onClosed", "onContentReady", "onCopy", "onCustomItemCreating", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onItemClick", "onKeyDown", "onKeyUp", "onOpened", "onOptionChanged", "onPaste", "onSelectionChanged", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "dataSourceChange", "deferRenderingChange", "disabledChange", "displayExprChange", "displayValueChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "groupedChange", "groupTemplateChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "itemsChange", "itemTemplateChange", "labelChange", "labelModeChange", "maxLengthChange", "minSearchLengthChange", "nameChange", "noDataTextChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "searchEnabledChange", "searchExprChange", "searchModeChange", "searchTimeoutChange", "selectedItemChange", "showClearButtonChange", "showDataBeforeSearchChange", "showDropDownButtonChange", "showSelectionControlsChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useItemTextAsTitleChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "valueExprChange", "visibleChange", "widthChange", "wrapItemTextChange", "onBlur"] }, { kind: "component", type: i8$1.DxTagBoxComponent, selector: "dx-tag-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "applyValueMode", "buttons", "dataSource", "deferRendering", "disabled", "displayExpr", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "fieldTemplate", "focusStateEnabled", "grouped", "groupTemplate", "height", "hideSelectedItems", "hint", "hoverStateEnabled", "inputAttr", "isValid", "items", "itemTemplate", "label", "labelMode", "maxDisplayedTags", "maxFilterQueryLength", "maxLength", "minSearchLength", "multiline", "name", "noDataText", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "searchEnabled", "searchExpr", "searchMode", "searchTimeout", "selectAllMode", "selectAllText", "selectedItems", "showClearButton", "showDataBeforeSearch", "showDropDownButton", "showMultiTagOnly", "showSelectionControls", "stylingMode", "tabIndex", "tagTemplate", "text", "useItemTextAsTitle", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueExpr", "visible", "width", "wrapItemText"], outputs: ["onChange", "onClosed", "onContentReady", "onCustomItemCreating", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onItemClick", "onKeyDown", "onKeyUp", "onMultiTagPreparing", "onOpened", "onOptionChanged", "onSelectAllValueChanged", "onSelectionChanged", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "applyValueModeChange", "buttonsChange", "dataSourceChange", "deferRenderingChange", "disabledChange", "displayExprChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "groupedChange", "groupTemplateChange", "heightChange", "hideSelectedItemsChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "itemsChange", "itemTemplateChange", "labelChange", "labelModeChange", "maxDisplayedTagsChange", "maxFilterQueryLengthChange", "maxLengthChange", "minSearchLengthChange", "multilineChange", "nameChange", "noDataTextChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "searchEnabledChange", "searchExprChange", "searchModeChange", "searchTimeoutChange", "selectAllModeChange", "selectAllTextChange", "selectedItemsChange", "showClearButtonChange", "showDataBeforeSearchChange", "showDropDownButtonChange", "showMultiTagOnlyChange", "showSelectionControlsChange", "stylingModeChange", "tabIndexChange", "tagTemplateChange", "textChange", "useItemTextAsTitleChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueExprChange", "visibleChange", "widthChange", "wrapItemTextChange", "onBlur"] }, { kind: "component", type: i7.DxTextBoxComponent, selector: "dx-text-box", inputs: ["accessKey", "activeStateEnabled", "buttons", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "label", "labelMode", "mask", "maskChar", "maskInvalidMessage", "maskRules", "maxLength", "mode", "name", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showMaskMode", "spellcheck", "stylingMode", "tabIndex", "text", "useMaskedValue", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOptionChanged", "onPaste", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "labelChange", "labelModeChange", "maskChange", "maskCharChange", "maskInvalidMessageChange", "maskRulesChange", "maxLengthChange", "modeChange", "nameChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showMaskModeChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useMaskedValueChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: LoaderComponent, selector: "app-loader" }, { kind: "component", type: GoogleGeoMapComponent, selector: "app-google-geo-map", inputs: ["rightClickEnable", "chartDataSource"], outputs: ["getTableConfigOutPut", "oRowClick", "onrightClickContextSelection"] }, { kind: "pipe", type: i4$1.JsonPipe, name: "json" }] });
+GeoMapComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: GeoMapComponent, selector: "app-geo-map", inputs: { chartconfigData: ["datasetmodal", "chartconfigData"] }, outputs: { createOtherComponentView: "createOtherComponentView" }, ngImport: i0, template: "<div class=\"flex flex-wrap\">\n    <div class=\"w-full mx-2 border-r\">\n        <ng-container *ngIf=\"!isJsonPreview\">\n            <pre><code>{{jsaonDatasource | json}}</code></pre>\n        </ng-container>\n        <ng-container  *ngIf=\"isJsonPreview\">\n            <!-- <app-gamma-geo-chart [chartDataSource]=\"chartDataSourceForMap\"></app-gamma-geo-chart> -->\n            <app-google-geo-map [chartDataSource]=\"chartDataSourceForMap\"></app-google-geo-map>\n\n            <div #dynamicContainer></div>\n\n        </ng-container>\n    </div>\n    <div class=\"w-full mx-2\">\n\n        <div class=\"mb-4 border-b border-gray-200 dark:border-gray-700\">\n            <ul class=\"flex flex-wrap -mb-px text-sm font-medium text-center\" role=\"tablist\">\n                <li class=\"me-2\" role=\"presentation\">\n                    <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{ \n                                        'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'basic',\n                                        'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'basic' \n                                    }\" (click)=\"setActiveTab('basic')\" type=\"button\" role=\"tab\">\n                        Basic\n                    </button>\n                </li>\n                <li class=\"me-2\" role=\"presentation\">\n                    <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{ \n                                        'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'chart_config',\n                                        'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'chart_config' \n                                    }\" (click)=\"setActiveTab('chart_config')\" type=\"button\" role=\"tab\">\n                        Chart Columns\n                    </button>\n                </li>\n                <li class=\"me-2\" role=\"presentation\">\n                    <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                                        'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'properties',\n                                                        'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'properties'\n                                                    }\" (click)=\"setActiveTab('properties')\" type=\"button\" role=\"tab\">\n                        Properties\n                    </button>\n                </li>\n\n            </ul>\n        </div>\n\n        <div id=\"default-styled-tab-content\">\n            <div *ngIf=\"activeTab === 'basic'\">\n                <div class=\"flex flex-col flex-auto min-w-0 my-2\">\n                    <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Filter Title\n                        Config\n                    </div>\n                    <div class=\"flex pt-2 border-x border-b\">\n                        <div class=\"px-1 mb-1 w-1/3\">\n                            <div class=\"text-md mb-1\"> Select Map type </div>\n                            <dx-select-box [searchEnabled]=\"true\" [items]=\"chartViewTypeDataSource\"\n                                [(ngModel)]=\"mapType\" (onValueChanged)=\"changeMapType($event)\"></dx-select-box>\n                        </div>\n                      \n                        <ng-container *ngIf=\"mapType == 'heatMap'\">\n                            <div class=\"px-1 mb-1 w-1/3\">\n                              \n                                    <div class=\"text-md mb-1\"> Heat Map Category </div>\n                                    <dx-select-box [searchEnabled]=\"true\" [dataSource]=\"heatMapTypeDatasource\"\n                                    displayExpr=\"name\"\n                                    valueExpr=\"value\" [(ngModel)]=\"heatMapConfig.heatMapCategory\" (onValueChanged)=\"heatMapCategory($event)\"></dx-select-box>\n                            </div>\n                        </ng-container>\n                    </div>\n                    <ng-container *ngIf=\"mapType == 'geoMap'\">\n                        <div class=\"flex pt-2 border-x border-b\">\n                            <div class=\"px-1 mb-1 w-1/3\">\n                                <div class=\"text-md mb-1\"> Region </div>\n                                <dx-select-box [searchEnabled]=\"true\" [items]=\"regionData\"\n                                    [(ngModel)]=\"tableDataConfig.region\"></dx-select-box>\n                            </div>\n                            <div class=\"px-1 mb-1 w-1/3\" *ngIf=\"tableDataConfig.region == 'city'\">\n                                <div class=\"text-md mb-1\"> Type Region Code</div>\n                                <dx-text-box [(ngModel)]=\"tableDataConfig.regionCode\"></dx-text-box>\n                            </div>\n                        </div>\n                        <div class=\"pt-2 border-x border-b \">\n                            <div class=\"my-2 flex justify-between\">\n                                <!-- <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Title</div>\n                                    <dx-text-box [(ngModel)]=\"tableDataConfig.title\"></dx-text-box>\n                                </div> -->\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Argument Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"tableDataConfig.argumentField\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Chartvalu Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"tableDataConfig.chartValueField\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> size</div>\n                                    <dx-text-box [(ngModel)]=\"tableDataConfig.size\"></dx-text-box>\n                                </div>\n    \n                                <div class=\"px-1 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\">Background Color</div>\n                                    <dx-color-box [(ngModel)]=\"tableDataConfig.backgroundColor\"></dx-color-box>\n                                </div>\n                                <!-- <div class=\"px-4 mt-6 w-full\">\n                                    <dx-check-box [value]=\"tableDataConfig.commonConfig.isSearchBox\"\n                                        [(ngModel)]=\"tableDataConfig.commonConfig.isSearchBox\"\n                                        text=\"Search Box\"></dx-check-box>\n    \n                                </div> -->\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-2\"> Display Formate </div>\n                                    <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                        [(ngModel)]=\"table_columns_config.kpiConfig.formate\"\n                                        [readOnly]=\"false\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-2\"> Key To Pass </div>\n                                    <dx-tag-box [items]=\"configColume\"\n                                        [(ngModel)]=\"table_columns_config.kpiConfig.keyToPass\"></dx-tag-box>\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\" pt-2 border-x border-b \">\n                            <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Colors\n                            </div>\n                            <div class=\"flex  flex-wrap px-1 mb-2 mt-2\">\n                                <div class=\"flex mr-2 mb-2\" *ngFor=\"let color of tableDataConfig.colors; let i = index\">\n                                   <div class=\"mr-2\">\n                                    <dx-color-box [(ngModel)]=\"tableDataConfig.colors[i]\"\n                                    (onValueChanged)=\"onColorChange($event.value, i)\"></dx-color-box>\n                                   </div>\n                                   <button class=\"{{commonService.btn_danger_sm}} cursor-pointer px-2\"\n                                   (click)=\"removeColor(i)\"><i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                  </button>\n                                   <!-- <div class=\"px-2\"> <button class=\"{{commonService.btn_danger_sm}}\" (click)=\"removeColor(i)\">Remove</button></div> -->\n                                </div>\n                                \n                            </div>\n                            <div class=\"flex flex-row justify-end my-2\">\n                                <button class=\"{{commonService.btn_success_sm}}\" (click)=\"addColor()\">Add Color</button>\n                            </div>\n                        </div>\n                    </ng-container>\n                 \n                    <ng-container  *ngIf=\"heatMapConfig.heatMapCategory == 'heatMapOnly' || heatMapConfig.heatMapCategory == 'heatMapMarker' || heatMapConfig.heatMapCategory == 'heatMapAndMarker'\" >\n                        <div class=\"flex-col\">\n                            <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> \n                                Center Location Config\n                            </div>\n                            <div>\n                                <div class=\"flex pt-2 border-x border-b\">\n                                    <!-- <div class=\"px-1 mb-1 w-1/4\">\n                                        <div class=\"text-md mb-1\"> Latitude  </div>\n                                        <dx-text-box [(ngModel)]=\"heatMapConfig.centerLatitude\"></dx-text-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-1/4\">\n                                        <div class=\"text-md mb-1\"> Longitude </div>\n                                        <dx-text-box [(ngModel)]=\"heatMapConfig.centerLongitude\"></dx-text-box>\n                                    </div> -->\n                                    <div class=\"px-1 mb-1 w-1/4\" *ngIf=\"heatMapConfig.heatMapCategory != 'heatMapAndMarker'\">\n                                        <div class=\"text-md mb-1\"> Zoom Label  </div>\n                                        <dx-text-box [(ngModel)]=\"heatMapConfig.zoom\"></dx-text-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-1/4\">\n                                        <div class=\"text-md mb-1\"> Custom Icons </div>\n                                        <dx-text-box [(ngModel)]=\"heatMapConfig.icon\"></dx-text-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-1/4\">\n                                        <div class=\"text-md mb-1\"> size</div>\n                                        <dx-text-box [(ngModel)]=\"heatMapConfig.size\"></dx-text-box>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"flex-col\">\n                            <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> \n                                 Location Marker  Config\n                            </div>\n                            <div>\n                                <div class=\"flex pt-2 border-x border-b\">\n                                    <div class=\"px-1 mb-1 w-1/3\">\n                                        <div class=\"text-md mb-1\"> Latitude  </div>\n                                        <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"heatMapConfig.markerLatitude\"></dx-select-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-1/3\">\n                                        <div class=\"text-md mb-1\"> Longitude </div>\n                                        <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"heatMapConfig.markerLongitude\"></dx-select-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-full\">\n                                        <div class=\"text-md mb-2\"> Display Formate </div>\n                                        <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                            [(ngModel)]=\"table_columns_config.kpiConfig.formate\"\n                                            [readOnly]=\"false\"></dx-select-box>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                     </ng-container>\n                     <ng-container *ngIf=\"mapType == 'bubbleMap'\">\n                        <div class=\"flex-col\">\n                            <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> \n                               Bubble Map Config\n                            </div>\n                            <div>\n                                <div class=\"flex pt-2 border-x border-b\">\n                                    <div class=\"px-1 mb-1 w-1/3\">\n                                        <div class=\"text-md mb-1\"> Argument Value  </div>\n                                        <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"bubbleMapConfig.agrumentValue\"></dx-select-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-1/4\">\n                                        <div class=\"text-md mb-1\"> Bubble Color </div>\n                                        <dx-color-box [(ngModel)]=\"bubbleMapConfig.bubbleColor\"></dx-color-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-1/4\">\n                                        <div class=\"text-md mb-1\">Bubble Minimum size</div>\n                                        <dx-text-box [(ngModel)]=\"bubbleMapConfig.bubbleMinimumSize\"></dx-text-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-1/4\">\n                                        <div class=\"text-md mb-1\">Bubble Maximum size</div>\n                                        <dx-text-box [(ngModel)]=\"bubbleMapConfig.bubbleMaximumSize\"></dx-text-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-1/4\">\n                                        <div class=\"text-md mb-1\"> size</div>\n                                        <dx-text-box [(ngModel)]=\"bubbleMapConfig.size\"></dx-text-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-1/4\">\n                                        <div class=\"text-md mb-1\"> Short By</div>\n                                        <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"bubbleMapConfig.sortBy\"></dx-select-box>\n                                    </div>\n                                    <!-- <div class=\"px-1 mb-1 w-1/4\" *ngIf=\"heatMapConfig.heatMapCategory != 'heatMapAndMarker'\">\n                                        <div class=\"text-md mb-1\"> Zoom Label  </div>\n                                        <dx-text-box [(ngModel)]=\"heatMapConfig.zoom\"></dx-text-box>\n                                    </div> -->\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"flex-col\">\n                            <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> \n                                 Location Marker  Config\n                            </div>\n                            <div>\n                                <div class=\"flex pt-2 border-x border-b\">\n                                    <div class=\"px-1 mb-1 w-1/3\">\n                                        <div class=\"text-md mb-1\"> Latitude  </div>\n                                        <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"bubbleMapConfig.markerLatitude\"></dx-select-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-1/3\">\n                                        <div class=\"text-md mb-1\"> Longitude </div>\n                                        <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"bubbleMapConfig.markerLongitude\"></dx-select-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-full\">\n                                        <div class=\"text-md mb-2\"> Display Formate </div>\n                                        <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                            [(ngModel)]=\"table_columns_config.kpiConfig.formate\"\n                                            [readOnly]=\"false\"></dx-select-box>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                     </ng-container>\n                     \n                   \n                </div>\n                <!-- <div class=\"flex flex-col flex-auto min-w-0 my-2\">\n                    <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Table Config\n                    </div>\n                    <div class=\"flex flse-row py-3 border-x border-b \">\n                        <div class=\"px-1 mb-2 mt-8 w-full\">\n                            <dx-check-box [value]=\"tableDataConfig.searchPanel\"\n                                [(ngModel)]=\"tableDataConfig.searchPanel\" text=\"Search Panel\"></dx-check-box>\n                        </div>\n                        <div class=\" px-1 mb-2 w-full\">\n                            <div class=\"text-md mb-2\">File Name</div>\n                            <dx-text-box [(ngModel)]=\"tableDataConfig.file_name\"></dx-text-box>\n                        </div>\n                        <div class=\"px-1 mb-2 w-full\">\n                            <div class=\"text-md mb-2\"> Number Of Row</div>\n                            <dx-number-box [value]=\"tableDataConfig.numberOfRow\"\n                                [(ngModel)]=\"tableDataConfig.numberOfRow\"></dx-number-box>\n                        </div>\n                        <div class=\"px-1 mb-2 mt-8 w-full\">\n                            <dx-check-box [value]=\"tableDataConfig.pageInfo\" [(ngModel)]=\"tableDataConfig.pageInfo\"\n                                text=\"Page Info\"></dx-check-box>\n                        </div>\n\n                    </div>\n\n                </div> -->\n\n\n            </div>\n            <div *ngIf=\"activeTab === 'chart_config'\">\n                <div class=\"h-full overflow-x-auto\">\n                    <div class=\"flex flex-col flex-auto min-w-0\">\n                        <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> \n                            Tooltip Columns\n                        </div>\n                        <div class=\"pt-2 border-x border-b \">\n                            <div class=\"my-2 border-b flex flex-row\"\n                                *ngFor=\"let item of tableDataConfig.chart_config; let i = index;\">\n                                <!-- <div class=\"px-1 mb-2 mt-6 w-full\">\n                                    <dx-check-box [value]=\"item.visible\" [(ngModel)]=\"item.visible\"\n                                        text=\"Visiblity\"></dx-check-box>\n                                </div> -->\n\n                                <div class=\"px-1 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\"> Value Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"item.dataField\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\"> Caption</div>\n                                    <dx-text-box [(ngModel)]=\"item.caption\"></dx-text-box>\n                                </div>\n                                <!-- <div class=\"px-2 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\"> UI Function</div>\n                                    <dx-select-box [items]=\"enrichNameList\" [(ngModel)]=\"item.enrichName\"\n                                        [searchEnabled]=\"true\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-2 mt-6 w-full\">\n                                    <dx-check-box [value]=\"item.isShowBar\" [(ngModel)]=\"item.isShowBar\"\n                                        text=\"Allow Bar\"></dx-check-box>\n                                </div>\n\n                                <div class=\"px-1 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\">Color</div>\n                                    <dx-color-box [(ngModel)]=\"item.color\"></dx-color-box>\n                                </div> -->\n                                <div class=\"text-center mt-8 w-full\">\n                                    <button *ngIf=\"i !== 0\" class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItemForColumns(i, 'up')\">\n                                        <i class=\"fa fa-arrow-up\" aria-hidden=\"true\"></i>\n                                    </button>\n\n                                    <button *ngIf=\"i !== tableDataConfig.chart_config.length - 1\"\n                                        class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItemForColumns(i, 'down')\">\n                                        <i class=\"fa fa-arrow-down\" aria-hidden=\"true\"></i>\n                                    </button>\n                                    <button class=\"{{commonService.btn_danger_sm}} cursor-pointer\"\n                                        (click)=\"deleteColumns(i)\"><i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                    </button>\n                                </div>\n\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"flex flex-row justify-end my-2\">\n                        <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\" (click)=\"addColumns()\">Add\n                            Columns</button>\n                    </div>\n                </div>\n            </div>\n            <div *ngIf=\"activeTab === 'properties'\">\n                <div class=\"h-full overflow-x-auto\">\n                    <app-loader *ngIf=\"isLoader\"></app-loader>\n                    <ng-container *ngIf=\"!isLoader\">\n                        <div class=\"flex flex-row justify-between border-b py-3\">\n                            <div class=\"mx-2\">\n                                <dx-check-box [value]=\"viewProperties.enableClickEvent\"\n                                    [(ngModel)]=\"viewProperties.enableClickEvent\"\n                                    text=\"Enable Click Event\"></dx-check-box>\n                            </div>\n                            <div class=\"mx-2\">\n                                <dx-check-box [value]=\"viewProperties.enableRightClickEvent\"\n                                    [(ngModel)]=\"viewProperties.enableRightClickEvent\"\n                                    text=\"Enable Right Click\"></dx-check-box>\n                            </div>\n                        </div>\n                        <div class=\"w-full p-2\" *ngIf=\"viewProperties.enableClickEvent\">\n\n                            <div class=\"flex flex-col flex-auto min-w-0 my-2\">\n                                <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Event\n                                    Type\n                                    Option\n                                </div>\n                                <div class=\"w-full p-3 border-x border-b \">\n                                    <div class=\"flex flex-row\">\n                                        <div class=\"w-full\">\n                                            <div class=\"text-md mb-2\"> Event Type</div>\n                                        </div>\n                                        <div class=\"w-full\">\n                                            <dx-select-box [items]=\"['drilldown','optionalDrillDown']\"\n                                                (onValueChanged)=\"getSelectedEventType($event)\"\n                                                [(ngModel)]=\"viewProperties.clickEventOptions.eventType\"></dx-select-box>\n                                        </div>\n                                    </div>\n                                    <ng-container *ngIf=\"viewProperties.clickEventOptions.eventType == 'drilldown'\">\n                                        <div class=\"flex flex-row justify-between mt-3\">\n                                            <div class=\"w-full\">\n                                                <div class=\"text-md mb-2\"> Associated Views</div>\n                                                <dx-tag-box [items]=\"allConfiguredViews\"\n                                                    [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                    valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                    [showSelectionControls]=\"true\" [searchEnabled]=\"true\"></dx-tag-box>\n                                            </div>\n                                        </div>\n                                    </ng-container>\n                                    <ng-container\n                                        *ngIf=\"viewProperties.clickEventOptions.eventType == 'optionalDrillDown'\">\n                                        <div class=\"flex flex-row justify-between mt-3\">\n                                            <div class=\"w-full\">\n                                                <ng-container\n                                                    *ngFor=\"let item of optionalDrilDownDataSource;let i = index;\">\n\n                                                    <div class=\"flex flex-row justify-between\">\n                                                        <div class=\"mx-2 w-full\">\n                                                            <div class=\"text-md mb-2\"> Associated Views</div>\n                                                            <dx-tag-box [items]=\"allConfiguredViews\"\n                                                                [(ngModel)]=\"item.viewId\" valueExpr=\"viewId\"\n                                                                displayExpr=\"viewName\" [showSelectionControls]=\"true\"\n                                                                [maxDisplayedTags]=\"2\"\n                                                                [searchEnabled]=\"true\"></dx-tag-box>\n\n                                                        </div>\n                                                        <div class=\"mx-2\">\n                                                            <div class=\"text-md mb-2\"> Associated Params</div>\n                                                            <dx-text-box\n                                                                [(ngModel)]=\"item.filterCondition\"></dx-text-box>\n                                                        </div>\n                                                        <div class=\"mx-2\">\n                                                            <button\n                                                                class=\"{{commonService.btn_danger_sm}} cursor-pointer mt-8\"\n                                                                (click)=\"deleteAssociatedParams(i)\"><i\n                                                                    class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                                            </button>\n                                                        </div>\n                                                    </div>\n                                                </ng-container>\n                                                <div class=\"flex flex-row justify-end mt-4\">\n                                                    <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\"\n                                                        (click)=\"addAssociatedParams()\">Add\n                                                        Params</button>\n                                                </div>\n                                            </div>\n                                        </div>\n                                    </ng-container>\n\n                                </div>\n                            </div>\n\n                        </div>\n                    </ng-container>\n                    <button class=\"{{commonService.btn_light_md}} cursor-pointer mt-2\"\n                        (click)=\"resetViewProprstise()\">Reset All</button>\n                </div>\n            </div>\n\n        </div>\n\n\n    </div>\n</div>\n\n<div class=\"flex flex-row border-t pl-3\">\n    <div class=\"flex justify-start mx-1\">\n        <button class=\"{{commonService.btn_warning_md}} cursor-pointer mt-2\" (click)=\"viewMapForTest()\">\n            Preview</button>\n        <button class=\"{{commonService.btn_primary_md}} cursor-pointer mt-2\" (click)=\"isJsonPreview = false\">Data\n            Preview</button>\n    </div>\n    <div class=\"flex justify-end mx-1 flex-grow\">\n        <button class=\"{{commonService.btn_success_md}} cursor-pointer mt-2\"\n            (click)=\"getSaveChartConfig()\">Submit</button>\n    </div>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.DxCheckBoxComponent, selector: "dx-check-box", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "iconSize", "isValid", "name", "readOnly", "rtlEnabled", "tabIndex", "text", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "visible", "width"], outputs: ["onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconSizeChange", "isValidChange", "nameChange", "readOnlyChange", "rtlEnabledChange", "tabIndexChange", "textChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "component", type: i6$2.DxColorBoxComponent, selector: "dx-color-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "applyButtonText", "applyValueMode", "buttons", "cancelButtonText", "deferRendering", "disabled", "dropDownButtonTemplate", "dropDownOptions", "editAlphaChannel", "elementAttr", "fieldTemplate", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "keyStep", "label", "labelMode", "name", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showDropDownButton", "stylingMode", "tabIndex", "text", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "visible", "width"], outputs: ["onChange", "onClosed", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOpened", "onOptionChanged", "onPaste", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "applyButtonTextChange", "applyValueModeChange", "buttonsChange", "cancelButtonTextChange", "deferRenderingChange", "disabledChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "editAlphaChannelChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "keyStepChange", "labelChange", "labelModeChange", "nameChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showDropDownButtonChange", "stylingModeChange", "tabIndexChange", "textChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "component", type: i6$1.DxSelectBoxComponent, selector: "dx-select-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "buttons", "dataSource", "deferRendering", "disabled", "displayExpr", "displayValue", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "fieldTemplate", "focusStateEnabled", "grouped", "groupTemplate", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "items", "itemTemplate", "label", "labelMode", "maxLength", "minSearchLength", "name", "noDataText", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "searchEnabled", "searchExpr", "searchMode", "searchTimeout", "selectedItem", "showClearButton", "showDataBeforeSearch", "showDropDownButton", "showSelectionControls", "spellcheck", "stylingMode", "tabIndex", "text", "useItemTextAsTitle", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueChangeEvent", "valueExpr", "visible", "width", "wrapItemText"], outputs: ["onChange", "onClosed", "onContentReady", "onCopy", "onCustomItemCreating", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onItemClick", "onKeyDown", "onKeyUp", "onOpened", "onOptionChanged", "onPaste", "onSelectionChanged", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "dataSourceChange", "deferRenderingChange", "disabledChange", "displayExprChange", "displayValueChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "groupedChange", "groupTemplateChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "itemsChange", "itemTemplateChange", "labelChange", "labelModeChange", "maxLengthChange", "minSearchLengthChange", "nameChange", "noDataTextChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "searchEnabledChange", "searchExprChange", "searchModeChange", "searchTimeoutChange", "selectedItemChange", "showClearButtonChange", "showDataBeforeSearchChange", "showDropDownButtonChange", "showSelectionControlsChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useItemTextAsTitleChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "valueExprChange", "visibleChange", "widthChange", "wrapItemTextChange", "onBlur"] }, { kind: "component", type: i8$1.DxTagBoxComponent, selector: "dx-tag-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "applyValueMode", "buttons", "dataSource", "deferRendering", "disabled", "displayExpr", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "fieldTemplate", "focusStateEnabled", "grouped", "groupTemplate", "height", "hideSelectedItems", "hint", "hoverStateEnabled", "inputAttr", "isValid", "items", "itemTemplate", "label", "labelMode", "maxDisplayedTags", "maxFilterQueryLength", "maxLength", "minSearchLength", "multiline", "name", "noDataText", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "searchEnabled", "searchExpr", "searchMode", "searchTimeout", "selectAllMode", "selectAllText", "selectedItems", "showClearButton", "showDataBeforeSearch", "showDropDownButton", "showMultiTagOnly", "showSelectionControls", "stylingMode", "tabIndex", "tagTemplate", "text", "useItemTextAsTitle", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueExpr", "visible", "width", "wrapItemText"], outputs: ["onChange", "onClosed", "onContentReady", "onCustomItemCreating", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onItemClick", "onKeyDown", "onKeyUp", "onMultiTagPreparing", "onOpened", "onOptionChanged", "onSelectAllValueChanged", "onSelectionChanged", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "applyValueModeChange", "buttonsChange", "dataSourceChange", "deferRenderingChange", "disabledChange", "displayExprChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "groupedChange", "groupTemplateChange", "heightChange", "hideSelectedItemsChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "itemsChange", "itemTemplateChange", "labelChange", "labelModeChange", "maxDisplayedTagsChange", "maxFilterQueryLengthChange", "maxLengthChange", "minSearchLengthChange", "multilineChange", "nameChange", "noDataTextChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "searchEnabledChange", "searchExprChange", "searchModeChange", "searchTimeoutChange", "selectAllModeChange", "selectAllTextChange", "selectedItemsChange", "showClearButtonChange", "showDataBeforeSearchChange", "showDropDownButtonChange", "showMultiTagOnlyChange", "showSelectionControlsChange", "stylingModeChange", "tabIndexChange", "tagTemplateChange", "textChange", "useItemTextAsTitleChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueExprChange", "visibleChange", "widthChange", "wrapItemTextChange", "onBlur"] }, { kind: "component", type: i7.DxTextBoxComponent, selector: "dx-text-box", inputs: ["accessKey", "activeStateEnabled", "buttons", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "label", "labelMode", "mask", "maskChar", "maskInvalidMessage", "maskRules", "maxLength", "mode", "name", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showMaskMode", "spellcheck", "stylingMode", "tabIndex", "text", "useMaskedValue", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOptionChanged", "onPaste", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "labelChange", "labelModeChange", "maskChange", "maskCharChange", "maskInvalidMessageChange", "maskRulesChange", "maxLengthChange", "modeChange", "nameChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showMaskModeChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useMaskedValueChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: LoaderComponent, selector: "app-loader" }, { kind: "component", type: GoogleGeoMapComponent, selector: "app-google-geo-map", inputs: ["rightClickEnable", "chartDataSource"], outputs: ["getTableConfigOutPut", "oRowClick", "onrightClickContextSelection"] }, { kind: "pipe", type: i4$1.JsonPipe, name: "json" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GeoMapComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-geo-map', template: "<div class=\"flex flex-wrap\">\n    <div class=\"w-full mx-2 border-r\">\n        <ng-container *ngIf=\"!isJsonPreview\">\n            <pre><code>{{jsaonDatasource | json}}</code></pre>\n        </ng-container>\n        <ng-container  *ngIf=\"isJsonPreview\">\n            <!-- <app-gamma-geo-chart [chartDataSource]=\"chartDataSourceForMap\"></app-gamma-geo-chart> -->\n            <app-google-geo-map [chartDataSource]=\"chartDataSourceForMap\"></app-google-geo-map>\n\n            <div #dynamicContainer></div>\n\n        </ng-container>\n    </div>\n    <div class=\"w-full mx-2\">\n\n        <div class=\"mb-4 border-b border-gray-200 dark:border-gray-700\">\n            <ul class=\"flex flex-wrap -mb-px text-sm font-medium text-center\" role=\"tablist\">\n                <li class=\"me-2\" role=\"presentation\">\n                    <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{ \n                                        'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'basic',\n                                        'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'basic' \n                                    }\" (click)=\"setActiveTab('basic')\" type=\"button\" role=\"tab\">\n                        Basic\n                    </button>\n                </li>\n                <li class=\"me-2\" role=\"presentation\">\n                    <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{ \n                                        'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'chart_config',\n                                        'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'chart_config' \n                                    }\" (click)=\"setActiveTab('chart_config')\" type=\"button\" role=\"tab\">\n                        Chart Columns\n                    </button>\n                </li>\n                <li class=\"me-2\" role=\"presentation\">\n                    <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                                        'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'properties',\n                                                        'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'properties'\n                                                    }\" (click)=\"setActiveTab('properties')\" type=\"button\" role=\"tab\">\n                        Properties\n                    </button>\n                </li>\n\n            </ul>\n        </div>\n\n        <div id=\"default-styled-tab-content\">\n            <div *ngIf=\"activeTab === 'basic'\">\n                <div class=\"flex flex-col flex-auto min-w-0 my-2\">\n                    <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Filter Title\n                        Config\n                    </div>\n                    <div class=\"flex pt-2 border-x border-b\">\n                        <div class=\"px-1 mb-1 w-1/3\">\n                            <div class=\"text-md mb-1\"> Select Map type </div>\n                            <dx-select-box [searchEnabled]=\"true\" [items]=\"chartViewTypeDataSource\"\n                                [(ngModel)]=\"mapType\" (onValueChanged)=\"changeMapType($event)\"></dx-select-box>\n                        </div>\n                      \n                        <ng-container *ngIf=\"mapType == 'heatMap'\">\n                            <div class=\"px-1 mb-1 w-1/3\">\n                              \n                                    <div class=\"text-md mb-1\"> Heat Map Category </div>\n                                    <dx-select-box [searchEnabled]=\"true\" [dataSource]=\"heatMapTypeDatasource\"\n                                    displayExpr=\"name\"\n                                    valueExpr=\"value\" [(ngModel)]=\"heatMapConfig.heatMapCategory\" (onValueChanged)=\"heatMapCategory($event)\"></dx-select-box>\n                            </div>\n                        </ng-container>\n                    </div>\n                    <ng-container *ngIf=\"mapType == 'geoMap'\">\n                        <div class=\"flex pt-2 border-x border-b\">\n                            <div class=\"px-1 mb-1 w-1/3\">\n                                <div class=\"text-md mb-1\"> Region </div>\n                                <dx-select-box [searchEnabled]=\"true\" [items]=\"regionData\"\n                                    [(ngModel)]=\"tableDataConfig.region\"></dx-select-box>\n                            </div>\n                            <div class=\"px-1 mb-1 w-1/3\" *ngIf=\"tableDataConfig.region == 'city'\">\n                                <div class=\"text-md mb-1\"> Type Region Code</div>\n                                <dx-text-box [(ngModel)]=\"tableDataConfig.regionCode\"></dx-text-box>\n                            </div>\n                        </div>\n                        <div class=\"pt-2 border-x border-b \">\n                            <div class=\"my-2 flex justify-between\">\n                                <!-- <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Title</div>\n                                    <dx-text-box [(ngModel)]=\"tableDataConfig.title\"></dx-text-box>\n                                </div> -->\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Argument Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"tableDataConfig.argumentField\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Chartvalu Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"tableDataConfig.chartValueField\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> size</div>\n                                    <dx-text-box [(ngModel)]=\"tableDataConfig.size\"></dx-text-box>\n                                </div>\n    \n                                <div class=\"px-1 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\">Background Color</div>\n                                    <dx-color-box [(ngModel)]=\"tableDataConfig.backgroundColor\"></dx-color-box>\n                                </div>\n                                <!-- <div class=\"px-4 mt-6 w-full\">\n                                    <dx-check-box [value]=\"tableDataConfig.commonConfig.isSearchBox\"\n                                        [(ngModel)]=\"tableDataConfig.commonConfig.isSearchBox\"\n                                        text=\"Search Box\"></dx-check-box>\n    \n                                </div> -->\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-2\"> Display Formate </div>\n                                    <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                        [(ngModel)]=\"table_columns_config.kpiConfig.formate\"\n                                        [readOnly]=\"false\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-2\"> Key To Pass </div>\n                                    <dx-tag-box [items]=\"configColume\"\n                                        [(ngModel)]=\"table_columns_config.kpiConfig.keyToPass\"></dx-tag-box>\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\" pt-2 border-x border-b \">\n                            <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Colors\n                            </div>\n                            <div class=\"flex  flex-wrap px-1 mb-2 mt-2\">\n                                <div class=\"flex mr-2 mb-2\" *ngFor=\"let color of tableDataConfig.colors; let i = index\">\n                                   <div class=\"mr-2\">\n                                    <dx-color-box [(ngModel)]=\"tableDataConfig.colors[i]\"\n                                    (onValueChanged)=\"onColorChange($event.value, i)\"></dx-color-box>\n                                   </div>\n                                   <button class=\"{{commonService.btn_danger_sm}} cursor-pointer px-2\"\n                                   (click)=\"removeColor(i)\"><i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                  </button>\n                                   <!-- <div class=\"px-2\"> <button class=\"{{commonService.btn_danger_sm}}\" (click)=\"removeColor(i)\">Remove</button></div> -->\n                                </div>\n                                \n                            </div>\n                            <div class=\"flex flex-row justify-end my-2\">\n                                <button class=\"{{commonService.btn_success_sm}}\" (click)=\"addColor()\">Add Color</button>\n                            </div>\n                        </div>\n                    </ng-container>\n                 \n                    <ng-container  *ngIf=\"heatMapConfig.heatMapCategory == 'heatMapOnly' || heatMapConfig.heatMapCategory == 'heatMapMarker' || heatMapConfig.heatMapCategory == 'heatMapAndMarker'\" >\n                        <div class=\"flex-col\">\n                            <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> \n                                Center Location Config\n                            </div>\n                            <div>\n                                <div class=\"flex pt-2 border-x border-b\">\n                                    <!-- <div class=\"px-1 mb-1 w-1/4\">\n                                        <div class=\"text-md mb-1\"> Latitude  </div>\n                                        <dx-text-box [(ngModel)]=\"heatMapConfig.centerLatitude\"></dx-text-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-1/4\">\n                                        <div class=\"text-md mb-1\"> Longitude </div>\n                                        <dx-text-box [(ngModel)]=\"heatMapConfig.centerLongitude\"></dx-text-box>\n                                    </div> -->\n                                    <div class=\"px-1 mb-1 w-1/4\" *ngIf=\"heatMapConfig.heatMapCategory != 'heatMapAndMarker'\">\n                                        <div class=\"text-md mb-1\"> Zoom Label  </div>\n                                        <dx-text-box [(ngModel)]=\"heatMapConfig.zoom\"></dx-text-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-1/4\">\n                                        <div class=\"text-md mb-1\"> Custom Icons </div>\n                                        <dx-text-box [(ngModel)]=\"heatMapConfig.icon\"></dx-text-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-1/4\">\n                                        <div class=\"text-md mb-1\"> size</div>\n                                        <dx-text-box [(ngModel)]=\"heatMapConfig.size\"></dx-text-box>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"flex-col\">\n                            <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> \n                                 Location Marker  Config\n                            </div>\n                            <div>\n                                <div class=\"flex pt-2 border-x border-b\">\n                                    <div class=\"px-1 mb-1 w-1/3\">\n                                        <div class=\"text-md mb-1\"> Latitude  </div>\n                                        <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"heatMapConfig.markerLatitude\"></dx-select-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-1/3\">\n                                        <div class=\"text-md mb-1\"> Longitude </div>\n                                        <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"heatMapConfig.markerLongitude\"></dx-select-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-full\">\n                                        <div class=\"text-md mb-2\"> Display Formate </div>\n                                        <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                            [(ngModel)]=\"table_columns_config.kpiConfig.formate\"\n                                            [readOnly]=\"false\"></dx-select-box>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                     </ng-container>\n                   \n                </div>\n                <!-- <div class=\"flex flex-col flex-auto min-w-0 my-2\">\n                    <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Table Config\n                    </div>\n                    <div class=\"flex flse-row py-3 border-x border-b \">\n                        <div class=\"px-1 mb-2 mt-8 w-full\">\n                            <dx-check-box [value]=\"tableDataConfig.searchPanel\"\n                                [(ngModel)]=\"tableDataConfig.searchPanel\" text=\"Search Panel\"></dx-check-box>\n                        </div>\n                        <div class=\" px-1 mb-2 w-full\">\n                            <div class=\"text-md mb-2\">File Name</div>\n                            <dx-text-box [(ngModel)]=\"tableDataConfig.file_name\"></dx-text-box>\n                        </div>\n                        <div class=\"px-1 mb-2 w-full\">\n                            <div class=\"text-md mb-2\"> Number Of Row</div>\n                            <dx-number-box [value]=\"tableDataConfig.numberOfRow\"\n                                [(ngModel)]=\"tableDataConfig.numberOfRow\"></dx-number-box>\n                        </div>\n                        <div class=\"px-1 mb-2 mt-8 w-full\">\n                            <dx-check-box [value]=\"tableDataConfig.pageInfo\" [(ngModel)]=\"tableDataConfig.pageInfo\"\n                                text=\"Page Info\"></dx-check-box>\n                        </div>\n\n                    </div>\n\n                </div> -->\n\n\n            </div>\n            <div *ngIf=\"activeTab === 'chart_config'\">\n                <div class=\"h-full overflow-x-auto\">\n                    <div class=\"flex flex-col flex-auto min-w-0\">\n                        <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> \n                            Tooltip Columns\n                        </div>\n                        <div class=\"pt-2 border-x border-b \">\n                            <div class=\"my-2 border-b flex flex-row\"\n                                *ngFor=\"let item of tableDataConfig.chart_config; let i = index;\">\n                                <!-- <div class=\"px-1 mb-2 mt-6 w-full\">\n                                    <dx-check-box [value]=\"item.visible\" [(ngModel)]=\"item.visible\"\n                                        text=\"Visiblity\"></dx-check-box>\n                                </div> -->\n\n                                <div class=\"px-1 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\"> Value Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"item.dataField\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\"> Caption</div>\n                                    <dx-text-box [(ngModel)]=\"item.caption\"></dx-text-box>\n                                </div>\n                                <!-- <div class=\"px-2 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\"> UI Function</div>\n                                    <dx-select-box [items]=\"enrichNameList\" [(ngModel)]=\"item.enrichName\"\n                                        [searchEnabled]=\"true\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-2 mt-6 w-full\">\n                                    <dx-check-box [value]=\"item.isShowBar\" [(ngModel)]=\"item.isShowBar\"\n                                        text=\"Allow Bar\"></dx-check-box>\n                                </div>\n\n                                <div class=\"px-1 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\">Color</div>\n                                    <dx-color-box [(ngModel)]=\"item.color\"></dx-color-box>\n                                </div> -->\n                                <div class=\"text-center mt-8 w-full\">\n                                    <button *ngIf=\"i !== 0\" class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItemForColumns(i, 'up')\">\n                                        <i class=\"fa fa-arrow-up\" aria-hidden=\"true\"></i>\n                                    </button>\n\n                                    <button *ngIf=\"i !== tableDataConfig.chart_config.length - 1\"\n                                        class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItemForColumns(i, 'down')\">\n                                        <i class=\"fa fa-arrow-down\" aria-hidden=\"true\"></i>\n                                    </button>\n                                    <button class=\"{{commonService.btn_danger_sm}} cursor-pointer\"\n                                        (click)=\"deleteColumns(i)\"><i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                    </button>\n                                </div>\n\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"flex flex-row justify-end my-2\">\n                        <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\" (click)=\"addColumns()\">Add\n                            Columns</button>\n                    </div>\n                </div>\n            </div>\n            <div *ngIf=\"activeTab === 'properties'\">\n                <div class=\"h-full overflow-x-auto\">\n                    <app-loader *ngIf=\"isLoader\"></app-loader>\n                    <ng-container *ngIf=\"!isLoader\">\n                        <div class=\"flex flex-row justify-between border-b py-3\">\n                            <div class=\"mx-2\">\n                                <dx-check-box [value]=\"viewProperties.enableClickEvent\"\n                                    [(ngModel)]=\"viewProperties.enableClickEvent\"\n                                    text=\"Enable Click Event\"></dx-check-box>\n                            </div>\n                            <div class=\"mx-2\">\n                                <dx-check-box [value]=\"viewProperties.enableRightClickEvent\"\n                                    [(ngModel)]=\"viewProperties.enableRightClickEvent\"\n                                    text=\"Enable Right Click\"></dx-check-box>\n                            </div>\n                        </div>\n                        <div class=\"w-full p-2\" *ngIf=\"viewProperties.enableClickEvent\">\n\n                            <div class=\"flex flex-col flex-auto min-w-0 my-2\">\n                                <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Event\n                                    Type\n                                    Option\n                                </div>\n                                <div class=\"w-full p-3 border-x border-b \">\n                                    <div class=\"flex flex-row\">\n                                        <div class=\"w-full\">\n                                            <div class=\"text-md mb-2\"> Event Type</div>\n                                        </div>\n                                        <div class=\"w-full\">\n                                            <dx-select-box [items]=\"['drilldown','optionalDrillDown']\"\n                                                (onValueChanged)=\"getSelectedEventType($event)\"\n                                                [(ngModel)]=\"viewProperties.clickEventOptions.eventType\"></dx-select-box>\n                                        </div>\n                                    </div>\n                                    <ng-container *ngIf=\"viewProperties.clickEventOptions.eventType == 'drilldown'\">\n                                        <div class=\"flex flex-row justify-between mt-3\">\n                                            <div class=\"w-full\">\n                                                <div class=\"text-md mb-2\"> Associated Views</div>\n                                                <dx-tag-box [items]=\"allConfiguredViews\"\n                                                    [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                    valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                    [showSelectionControls]=\"true\" [searchEnabled]=\"true\"></dx-tag-box>\n                                            </div>\n                                        </div>\n                                    </ng-container>\n                                    <ng-container\n                                        *ngIf=\"viewProperties.clickEventOptions.eventType == 'optionalDrillDown'\">\n                                        <div class=\"flex flex-row justify-between mt-3\">\n                                            <div class=\"w-full\">\n                                                <ng-container\n                                                    *ngFor=\"let item of optionalDrilDownDataSource;let i = index;\">\n\n                                                    <div class=\"flex flex-row justify-between\">\n                                                        <div class=\"mx-2 w-full\">\n                                                            <div class=\"text-md mb-2\"> Associated Views</div>\n                                                            <dx-tag-box [items]=\"allConfiguredViews\"\n                                                                [(ngModel)]=\"item.viewId\" valueExpr=\"viewId\"\n                                                                displayExpr=\"viewName\" [showSelectionControls]=\"true\"\n                                                                [maxDisplayedTags]=\"2\"\n                                                                [searchEnabled]=\"true\"></dx-tag-box>\n\n                                                        </div>\n                                                        <div class=\"mx-2\">\n                                                            <div class=\"text-md mb-2\"> Associated Params</div>\n                                                            <dx-text-box\n                                                                [(ngModel)]=\"item.filterCondition\"></dx-text-box>\n                                                        </div>\n                                                        <div class=\"mx-2\">\n                                                            <button\n                                                                class=\"{{commonService.btn_danger_sm}} cursor-pointer mt-8\"\n                                                                (click)=\"deleteAssociatedParams(i)\"><i\n                                                                    class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                                            </button>\n                                                        </div>\n                                                    </div>\n                                                </ng-container>\n                                                <div class=\"flex flex-row justify-end mt-4\">\n                                                    <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\"\n                                                        (click)=\"addAssociatedParams()\">Add\n                                                        Params</button>\n                                                </div>\n                                            </div>\n                                        </div>\n                                    </ng-container>\n\n                                </div>\n                            </div>\n\n                        </div>\n                    </ng-container>\n                    <button class=\"{{commonService.btn_light_md}} cursor-pointer mt-2\"\n                        (click)=\"resetViewProprstise()\">Reset All</button>\n                </div>\n            </div>\n\n        </div>\n\n\n    </div>\n</div>\n\n<div class=\"flex flex-row border-t pl-3\">\n    <div class=\"flex justify-start mx-1\">\n        <button class=\"{{commonService.btn_warning_md}} cursor-pointer mt-2\" (click)=\"viewMapForTest()\">\n            Preview</button>\n        <button class=\"{{commonService.btn_primary_md}} cursor-pointer mt-2\" (click)=\"isJsonPreview = false\">Data\n            Preview</button>\n    </div>\n    <div class=\"flex justify-end mx-1 flex-grow\">\n        <button class=\"{{commonService.btn_success_md}} cursor-pointer mt-2\"\n            (click)=\"getSaveChartConfig()\">Submit</button>\n    </div>\n</div>" }]
+            args: [{ selector: 'app-geo-map', template: "<div class=\"flex flex-wrap\">\n    <div class=\"w-full mx-2 border-r\">\n        <ng-container *ngIf=\"!isJsonPreview\">\n            <pre><code>{{jsaonDatasource | json}}</code></pre>\n        </ng-container>\n        <ng-container  *ngIf=\"isJsonPreview\">\n            <!-- <app-gamma-geo-chart [chartDataSource]=\"chartDataSourceForMap\"></app-gamma-geo-chart> -->\n            <app-google-geo-map [chartDataSource]=\"chartDataSourceForMap\"></app-google-geo-map>\n\n            <div #dynamicContainer></div>\n\n        </ng-container>\n    </div>\n    <div class=\"w-full mx-2\">\n\n        <div class=\"mb-4 border-b border-gray-200 dark:border-gray-700\">\n            <ul class=\"flex flex-wrap -mb-px text-sm font-medium text-center\" role=\"tablist\">\n                <li class=\"me-2\" role=\"presentation\">\n                    <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{ \n                                        'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'basic',\n                                        'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'basic' \n                                    }\" (click)=\"setActiveTab('basic')\" type=\"button\" role=\"tab\">\n                        Basic\n                    </button>\n                </li>\n                <li class=\"me-2\" role=\"presentation\">\n                    <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{ \n                                        'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'chart_config',\n                                        'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'chart_config' \n                                    }\" (click)=\"setActiveTab('chart_config')\" type=\"button\" role=\"tab\">\n                        Chart Columns\n                    </button>\n                </li>\n                <li class=\"me-2\" role=\"presentation\">\n                    <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                                        'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'properties',\n                                                        'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'properties'\n                                                    }\" (click)=\"setActiveTab('properties')\" type=\"button\" role=\"tab\">\n                        Properties\n                    </button>\n                </li>\n\n            </ul>\n        </div>\n\n        <div id=\"default-styled-tab-content\">\n            <div *ngIf=\"activeTab === 'basic'\">\n                <div class=\"flex flex-col flex-auto min-w-0 my-2\">\n                    <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Filter Title\n                        Config\n                    </div>\n                    <div class=\"flex pt-2 border-x border-b\">\n                        <div class=\"px-1 mb-1 w-1/3\">\n                            <div class=\"text-md mb-1\"> Select Map type </div>\n                            <dx-select-box [searchEnabled]=\"true\" [items]=\"chartViewTypeDataSource\"\n                                [(ngModel)]=\"mapType\" (onValueChanged)=\"changeMapType($event)\"></dx-select-box>\n                        </div>\n                      \n                        <ng-container *ngIf=\"mapType == 'heatMap'\">\n                            <div class=\"px-1 mb-1 w-1/3\">\n                              \n                                    <div class=\"text-md mb-1\"> Heat Map Category </div>\n                                    <dx-select-box [searchEnabled]=\"true\" [dataSource]=\"heatMapTypeDatasource\"\n                                    displayExpr=\"name\"\n                                    valueExpr=\"value\" [(ngModel)]=\"heatMapConfig.heatMapCategory\" (onValueChanged)=\"heatMapCategory($event)\"></dx-select-box>\n                            </div>\n                        </ng-container>\n                    </div>\n                    <ng-container *ngIf=\"mapType == 'geoMap'\">\n                        <div class=\"flex pt-2 border-x border-b\">\n                            <div class=\"px-1 mb-1 w-1/3\">\n                                <div class=\"text-md mb-1\"> Region </div>\n                                <dx-select-box [searchEnabled]=\"true\" [items]=\"regionData\"\n                                    [(ngModel)]=\"tableDataConfig.region\"></dx-select-box>\n                            </div>\n                            <div class=\"px-1 mb-1 w-1/3\" *ngIf=\"tableDataConfig.region == 'city'\">\n                                <div class=\"text-md mb-1\"> Type Region Code</div>\n                                <dx-text-box [(ngModel)]=\"tableDataConfig.regionCode\"></dx-text-box>\n                            </div>\n                        </div>\n                        <div class=\"pt-2 border-x border-b \">\n                            <div class=\"my-2 flex justify-between\">\n                                <!-- <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Title</div>\n                                    <dx-text-box [(ngModel)]=\"tableDataConfig.title\"></dx-text-box>\n                                </div> -->\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Argument Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"tableDataConfig.argumentField\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Chartvalu Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"tableDataConfig.chartValueField\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> size</div>\n                                    <dx-text-box [(ngModel)]=\"tableDataConfig.size\"></dx-text-box>\n                                </div>\n    \n                                <div class=\"px-1 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\">Background Color</div>\n                                    <dx-color-box [(ngModel)]=\"tableDataConfig.backgroundColor\"></dx-color-box>\n                                </div>\n                                <!-- <div class=\"px-4 mt-6 w-full\">\n                                    <dx-check-box [value]=\"tableDataConfig.commonConfig.isSearchBox\"\n                                        [(ngModel)]=\"tableDataConfig.commonConfig.isSearchBox\"\n                                        text=\"Search Box\"></dx-check-box>\n    \n                                </div> -->\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-2\"> Display Formate </div>\n                                    <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                        [(ngModel)]=\"table_columns_config.kpiConfig.formate\"\n                                        [readOnly]=\"false\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-2\"> Key To Pass </div>\n                                    <dx-tag-box [items]=\"configColume\"\n                                        [(ngModel)]=\"table_columns_config.kpiConfig.keyToPass\"></dx-tag-box>\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\" pt-2 border-x border-b \">\n                            <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Colors\n                            </div>\n                            <div class=\"flex  flex-wrap px-1 mb-2 mt-2\">\n                                <div class=\"flex mr-2 mb-2\" *ngFor=\"let color of tableDataConfig.colors; let i = index\">\n                                   <div class=\"mr-2\">\n                                    <dx-color-box [(ngModel)]=\"tableDataConfig.colors[i]\"\n                                    (onValueChanged)=\"onColorChange($event.value, i)\"></dx-color-box>\n                                   </div>\n                                   <button class=\"{{commonService.btn_danger_sm}} cursor-pointer px-2\"\n                                   (click)=\"removeColor(i)\"><i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                  </button>\n                                   <!-- <div class=\"px-2\"> <button class=\"{{commonService.btn_danger_sm}}\" (click)=\"removeColor(i)\">Remove</button></div> -->\n                                </div>\n                                \n                            </div>\n                            <div class=\"flex flex-row justify-end my-2\">\n                                <button class=\"{{commonService.btn_success_sm}}\" (click)=\"addColor()\">Add Color</button>\n                            </div>\n                        </div>\n                    </ng-container>\n                 \n                    <ng-container  *ngIf=\"heatMapConfig.heatMapCategory == 'heatMapOnly' || heatMapConfig.heatMapCategory == 'heatMapMarker' || heatMapConfig.heatMapCategory == 'heatMapAndMarker'\" >\n                        <div class=\"flex-col\">\n                            <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> \n                                Center Location Config\n                            </div>\n                            <div>\n                                <div class=\"flex pt-2 border-x border-b\">\n                                    <!-- <div class=\"px-1 mb-1 w-1/4\">\n                                        <div class=\"text-md mb-1\"> Latitude  </div>\n                                        <dx-text-box [(ngModel)]=\"heatMapConfig.centerLatitude\"></dx-text-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-1/4\">\n                                        <div class=\"text-md mb-1\"> Longitude </div>\n                                        <dx-text-box [(ngModel)]=\"heatMapConfig.centerLongitude\"></dx-text-box>\n                                    </div> -->\n                                    <div class=\"px-1 mb-1 w-1/4\" *ngIf=\"heatMapConfig.heatMapCategory != 'heatMapAndMarker'\">\n                                        <div class=\"text-md mb-1\"> Zoom Label  </div>\n                                        <dx-text-box [(ngModel)]=\"heatMapConfig.zoom\"></dx-text-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-1/4\">\n                                        <div class=\"text-md mb-1\"> Custom Icons </div>\n                                        <dx-text-box [(ngModel)]=\"heatMapConfig.icon\"></dx-text-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-1/4\">\n                                        <div class=\"text-md mb-1\"> size</div>\n                                        <dx-text-box [(ngModel)]=\"heatMapConfig.size\"></dx-text-box>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"flex-col\">\n                            <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> \n                                 Location Marker  Config\n                            </div>\n                            <div>\n                                <div class=\"flex pt-2 border-x border-b\">\n                                    <div class=\"px-1 mb-1 w-1/3\">\n                                        <div class=\"text-md mb-1\"> Latitude  </div>\n                                        <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"heatMapConfig.markerLatitude\"></dx-select-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-1/3\">\n                                        <div class=\"text-md mb-1\"> Longitude </div>\n                                        <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"heatMapConfig.markerLongitude\"></dx-select-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-full\">\n                                        <div class=\"text-md mb-2\"> Display Formate </div>\n                                        <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                            [(ngModel)]=\"table_columns_config.kpiConfig.formate\"\n                                            [readOnly]=\"false\"></dx-select-box>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                     </ng-container>\n                     <ng-container *ngIf=\"mapType == 'bubbleMap'\">\n                        <div class=\"flex-col\">\n                            <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> \n                               Bubble Map Config\n                            </div>\n                            <div>\n                                <div class=\"flex pt-2 border-x border-b\">\n                                    <div class=\"px-1 mb-1 w-1/3\">\n                                        <div class=\"text-md mb-1\"> Argument Value  </div>\n                                        <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"bubbleMapConfig.agrumentValue\"></dx-select-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-1/4\">\n                                        <div class=\"text-md mb-1\"> Bubble Color </div>\n                                        <dx-color-box [(ngModel)]=\"bubbleMapConfig.bubbleColor\"></dx-color-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-1/4\">\n                                        <div class=\"text-md mb-1\">Bubble Minimum size</div>\n                                        <dx-text-box [(ngModel)]=\"bubbleMapConfig.bubbleMinimumSize\"></dx-text-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-1/4\">\n                                        <div class=\"text-md mb-1\">Bubble Maximum size</div>\n                                        <dx-text-box [(ngModel)]=\"bubbleMapConfig.bubbleMaximumSize\"></dx-text-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-1/4\">\n                                        <div class=\"text-md mb-1\"> size</div>\n                                        <dx-text-box [(ngModel)]=\"bubbleMapConfig.size\"></dx-text-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-1/4\">\n                                        <div class=\"text-md mb-1\"> Short By</div>\n                                        <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"bubbleMapConfig.sortBy\"></dx-select-box>\n                                    </div>\n                                    <!-- <div class=\"px-1 mb-1 w-1/4\" *ngIf=\"heatMapConfig.heatMapCategory != 'heatMapAndMarker'\">\n                                        <div class=\"text-md mb-1\"> Zoom Label  </div>\n                                        <dx-text-box [(ngModel)]=\"heatMapConfig.zoom\"></dx-text-box>\n                                    </div> -->\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"flex-col\">\n                            <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> \n                                 Location Marker  Config\n                            </div>\n                            <div>\n                                <div class=\"flex pt-2 border-x border-b\">\n                                    <div class=\"px-1 mb-1 w-1/3\">\n                                        <div class=\"text-md mb-1\"> Latitude  </div>\n                                        <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"bubbleMapConfig.markerLatitude\"></dx-select-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-1/3\">\n                                        <div class=\"text-md mb-1\"> Longitude </div>\n                                        <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"bubbleMapConfig.markerLongitude\"></dx-select-box>\n                                    </div>\n                                    <div class=\"px-1 mb-1 w-full\">\n                                        <div class=\"text-md mb-2\"> Display Formate </div>\n                                        <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                            [(ngModel)]=\"table_columns_config.kpiConfig.formate\"\n                                            [readOnly]=\"false\"></dx-select-box>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                     </ng-container>\n                     \n                   \n                </div>\n                <!-- <div class=\"flex flex-col flex-auto min-w-0 my-2\">\n                    <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Table Config\n                    </div>\n                    <div class=\"flex flse-row py-3 border-x border-b \">\n                        <div class=\"px-1 mb-2 mt-8 w-full\">\n                            <dx-check-box [value]=\"tableDataConfig.searchPanel\"\n                                [(ngModel)]=\"tableDataConfig.searchPanel\" text=\"Search Panel\"></dx-check-box>\n                        </div>\n                        <div class=\" px-1 mb-2 w-full\">\n                            <div class=\"text-md mb-2\">File Name</div>\n                            <dx-text-box [(ngModel)]=\"tableDataConfig.file_name\"></dx-text-box>\n                        </div>\n                        <div class=\"px-1 mb-2 w-full\">\n                            <div class=\"text-md mb-2\"> Number Of Row</div>\n                            <dx-number-box [value]=\"tableDataConfig.numberOfRow\"\n                                [(ngModel)]=\"tableDataConfig.numberOfRow\"></dx-number-box>\n                        </div>\n                        <div class=\"px-1 mb-2 mt-8 w-full\">\n                            <dx-check-box [value]=\"tableDataConfig.pageInfo\" [(ngModel)]=\"tableDataConfig.pageInfo\"\n                                text=\"Page Info\"></dx-check-box>\n                        </div>\n\n                    </div>\n\n                </div> -->\n\n\n            </div>\n            <div *ngIf=\"activeTab === 'chart_config'\">\n                <div class=\"h-full overflow-x-auto\">\n                    <div class=\"flex flex-col flex-auto min-w-0\">\n                        <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> \n                            Tooltip Columns\n                        </div>\n                        <div class=\"pt-2 border-x border-b \">\n                            <div class=\"my-2 border-b flex flex-row\"\n                                *ngFor=\"let item of tableDataConfig.chart_config; let i = index;\">\n                                <!-- <div class=\"px-1 mb-2 mt-6 w-full\">\n                                    <dx-check-box [value]=\"item.visible\" [(ngModel)]=\"item.visible\"\n                                        text=\"Visiblity\"></dx-check-box>\n                                </div> -->\n\n                                <div class=\"px-1 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\"> Value Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"item.dataField\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\"> Caption</div>\n                                    <dx-text-box [(ngModel)]=\"item.caption\"></dx-text-box>\n                                </div>\n                                <!-- <div class=\"px-2 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\"> UI Function</div>\n                                    <dx-select-box [items]=\"enrichNameList\" [(ngModel)]=\"item.enrichName\"\n                                        [searchEnabled]=\"true\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-2 mt-6 w-full\">\n                                    <dx-check-box [value]=\"item.isShowBar\" [(ngModel)]=\"item.isShowBar\"\n                                        text=\"Allow Bar\"></dx-check-box>\n                                </div>\n\n                                <div class=\"px-1 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\">Color</div>\n                                    <dx-color-box [(ngModel)]=\"item.color\"></dx-color-box>\n                                </div> -->\n                                <div class=\"text-center mt-8 w-full\">\n                                    <button *ngIf=\"i !== 0\" class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItemForColumns(i, 'up')\">\n                                        <i class=\"fa fa-arrow-up\" aria-hidden=\"true\"></i>\n                                    </button>\n\n                                    <button *ngIf=\"i !== tableDataConfig.chart_config.length - 1\"\n                                        class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItemForColumns(i, 'down')\">\n                                        <i class=\"fa fa-arrow-down\" aria-hidden=\"true\"></i>\n                                    </button>\n                                    <button class=\"{{commonService.btn_danger_sm}} cursor-pointer\"\n                                        (click)=\"deleteColumns(i)\"><i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                    </button>\n                                </div>\n\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"flex flex-row justify-end my-2\">\n                        <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\" (click)=\"addColumns()\">Add\n                            Columns</button>\n                    </div>\n                </div>\n            </div>\n            <div *ngIf=\"activeTab === 'properties'\">\n                <div class=\"h-full overflow-x-auto\">\n                    <app-loader *ngIf=\"isLoader\"></app-loader>\n                    <ng-container *ngIf=\"!isLoader\">\n                        <div class=\"flex flex-row justify-between border-b py-3\">\n                            <div class=\"mx-2\">\n                                <dx-check-box [value]=\"viewProperties.enableClickEvent\"\n                                    [(ngModel)]=\"viewProperties.enableClickEvent\"\n                                    text=\"Enable Click Event\"></dx-check-box>\n                            </div>\n                            <div class=\"mx-2\">\n                                <dx-check-box [value]=\"viewProperties.enableRightClickEvent\"\n                                    [(ngModel)]=\"viewProperties.enableRightClickEvent\"\n                                    text=\"Enable Right Click\"></dx-check-box>\n                            </div>\n                        </div>\n                        <div class=\"w-full p-2\" *ngIf=\"viewProperties.enableClickEvent\">\n\n                            <div class=\"flex flex-col flex-auto min-w-0 my-2\">\n                                <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Event\n                                    Type\n                                    Option\n                                </div>\n                                <div class=\"w-full p-3 border-x border-b \">\n                                    <div class=\"flex flex-row\">\n                                        <div class=\"w-full\">\n                                            <div class=\"text-md mb-2\"> Event Type</div>\n                                        </div>\n                                        <div class=\"w-full\">\n                                            <dx-select-box [items]=\"['drilldown','optionalDrillDown']\"\n                                                (onValueChanged)=\"getSelectedEventType($event)\"\n                                                [(ngModel)]=\"viewProperties.clickEventOptions.eventType\"></dx-select-box>\n                                        </div>\n                                    </div>\n                                    <ng-container *ngIf=\"viewProperties.clickEventOptions.eventType == 'drilldown'\">\n                                        <div class=\"flex flex-row justify-between mt-3\">\n                                            <div class=\"w-full\">\n                                                <div class=\"text-md mb-2\"> Associated Views</div>\n                                                <dx-tag-box [items]=\"allConfiguredViews\"\n                                                    [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                    valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                    [showSelectionControls]=\"true\" [searchEnabled]=\"true\"></dx-tag-box>\n                                            </div>\n                                        </div>\n                                    </ng-container>\n                                    <ng-container\n                                        *ngIf=\"viewProperties.clickEventOptions.eventType == 'optionalDrillDown'\">\n                                        <div class=\"flex flex-row justify-between mt-3\">\n                                            <div class=\"w-full\">\n                                                <ng-container\n                                                    *ngFor=\"let item of optionalDrilDownDataSource;let i = index;\">\n\n                                                    <div class=\"flex flex-row justify-between\">\n                                                        <div class=\"mx-2 w-full\">\n                                                            <div class=\"text-md mb-2\"> Associated Views</div>\n                                                            <dx-tag-box [items]=\"allConfiguredViews\"\n                                                                [(ngModel)]=\"item.viewId\" valueExpr=\"viewId\"\n                                                                displayExpr=\"viewName\" [showSelectionControls]=\"true\"\n                                                                [maxDisplayedTags]=\"2\"\n                                                                [searchEnabled]=\"true\"></dx-tag-box>\n\n                                                        </div>\n                                                        <div class=\"mx-2\">\n                                                            <div class=\"text-md mb-2\"> Associated Params</div>\n                                                            <dx-text-box\n                                                                [(ngModel)]=\"item.filterCondition\"></dx-text-box>\n                                                        </div>\n                                                        <div class=\"mx-2\">\n                                                            <button\n                                                                class=\"{{commonService.btn_danger_sm}} cursor-pointer mt-8\"\n                                                                (click)=\"deleteAssociatedParams(i)\"><i\n                                                                    class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                                            </button>\n                                                        </div>\n                                                    </div>\n                                                </ng-container>\n                                                <div class=\"flex flex-row justify-end mt-4\">\n                                                    <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\"\n                                                        (click)=\"addAssociatedParams()\">Add\n                                                        Params</button>\n                                                </div>\n                                            </div>\n                                        </div>\n                                    </ng-container>\n\n                                </div>\n                            </div>\n\n                        </div>\n                    </ng-container>\n                    <button class=\"{{commonService.btn_light_md}} cursor-pointer mt-2\"\n                        (click)=\"resetViewProprstise()\">Reset All</button>\n                </div>\n            </div>\n\n        </div>\n\n\n    </div>\n</div>\n\n<div class=\"flex flex-row border-t pl-3\">\n    <div class=\"flex justify-start mx-1\">\n        <button class=\"{{commonService.btn_warning_md}} cursor-pointer mt-2\" (click)=\"viewMapForTest()\">\n            Preview</button>\n        <button class=\"{{commonService.btn_primary_md}} cursor-pointer mt-2\" (click)=\"isJsonPreview = false\">Data\n            Preview</button>\n    </div>\n    <div class=\"flex justify-end mx-1 flex-grow\">\n        <button class=\"{{commonService.btn_success_md}} cursor-pointer mt-2\"\n            (click)=\"getSaveChartConfig()\">Submit</button>\n    </div>\n</div>" }]
         }], ctorParameters: function () { return [{ type: CommonService }, { type: i0.ChangeDetectorRef }, { type: ApplicationContentService }, { type: i2$1.ToastrService }]; }, propDecorators: { createOtherComponentView: [{
                 type: Output
             }], chartconfigData: [{
@@ -4014,7 +4173,7 @@ class DashChartComponent {
             { "compName": "GammaAdvanceChartComponent", "item": "bar" },
             { "compName": "GammaAdvanceChartComponent", "item": "area" },
         ];
-        this.chartTypeSource = ["spline", "bar", "area", "stackedBar", "doughnut", "funnel", "bubble"];
+        this.chartTypeSource = ["spline", "bar", "area", "stackedBar", "doughnut", "pie", "funnel", "bubble"];
         this.doughnut_color_palette = ['Material', 'Soft Pastel', 'Harmony Light', 'Pastel', 'Bright', 'Soft', 'Ocean', 'Office', 'Vintage', 'Violet', 'Carmine', 'Dark Moon', 'Soft Blue', 'Dark Violet', 'Green Mist'];
         this.activeTab = 'basic';
         this.getChartConfigOutPut = new EventEmitter();
@@ -4096,7 +4255,7 @@ class DashChartComponent {
     }
     getChartType(e) {
         this.chartType = e.value;
-        if (e.value == 'doughnut') {
+        if (e.value == 'doughnut' || e.value == 'pie') {
             this.chartConfig['palette'] = "";
         }
         if (e.value == 'bubble') {
@@ -4236,10 +4395,10 @@ class DashChartComponent {
     }
 }
 DashChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DashChartComponent, deps: [{ token: CommonService }], target: i0.ɵɵFactoryTarget.Component });
-DashChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DashChartComponent, selector: "app-dash-chart", inputs: { chartconfigData: ["datasetmodal", "chartconfigData"] }, outputs: { getChartConfigOutPut: "getChartConfigOutPut" }, ngImport: i0, template: "<div class=\"mx-2\">\n    <div class=\"w-full m-2 border\">\n        <ng-container *ngIf=\"!isJsonPreview\">\n            <pre><code>{{jsaonDatasource | json}}</code></pre>\n        </ng-container>\n        <ng-container *ngIf=\"isJsonPreview\">\n            <ng-container *ngIf=\"chartType == 'doughnut'\">\n                <div\n                    class=\"m-3 p-4 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700\">\n                    <!-- <h6 class=\"mb-1 text-md font-bold tracking-tight text-gray-900 dark:text-white border-b pb-3\">\n                        {{widGetConfig.widgetTitle}}\n                    </h6> -->\n                    <dx-pie-chart id=\"pie\" type=\"doughnut\" [title]=\"{ text: chartConfig.caption, font: { size: 14 } }\"\n                        palette=\"Soft Pastel\" [dataSource]=\"dataSourseForChart\" centerTemplate=\"centerTemplate\"\n                        (onPointClick)=\"pointClickHandler($event)\" [palette]=\"chartConfig.palette\">\n\n                        <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n                            <ng-container *ngIf=\"item.color\">\n                                <dxi-series argumentField={{chartConfig.argumentField}} valueField=\"{{item.valueField}}\"\n                                    name=\"{{item.name}}\" color=\"{{item.color}}\">\n                                    <dxo-label [visible]=\"chartConfig.labelDisplay\" format=\"#,##0.##\">\n                                        <dxo-connector [visible]=\"true\"></dxo-connector>\n                                    </dxo-label>\n                                </dxi-series>\n                            </ng-container>\n                            <ng-container *ngIf=\"!item.color\">\n                                <dxi-series argumentField={{chartConfig.argumentField}} valueField=\"{{item.valueField}}\"\n                                    name=\"{{item.name}}\">\n                                    <dxo-label [visible]=\"chartConfig.labelDisplay\" format=\"#,##0.##\">\n                                        <dxo-connector [visible]=\"true\"></dxo-connector>\n                                    </dxo-label>\n                                </dxi-series>\n                            </ng-container>\n                        </ng-container>\n                        <dxo-legend [visible]=\"chartConfig.legendDisplay\"\n                            horizontalAlignment=\"{{chartConfig.horizontalAlignment}}\"\n                            verticalAlignment=\"{{chartConfig.verticalAlignment}}\"></dxo-legend>\n                        <!-- <dxo-export [enabled]=\"true\"></dxo-export> -->\n                        <dxo-tooltip [enabled]=\"true\" [customizeTooltip]=\"customizeTooltip\" format=\"#,##0.##\">\n                        </dxo-tooltip>\n                        <svg *dxTemplate=\"let pieChart of 'centerTemplate'\">\n                            <circle cx=\"100\" cy=\"100\" [attr.r]=\"pieChart.getInnerRadius() - 6\" fill=\"gray\"\n                                opacity=\"0.0001\">\n                            </circle>\n\n                            <text text-anchor=\"middle\" style=\"font-size: 28px\" x=\"100\" y=\"100\" fill=\"#eee\">\n                                <tspan x=\"100\">{{ calculateTotal(pieChart) }}</tspan>\n                                <!-- display: inline -->\n                                <!-- <tspan x=\"100\" dy=\"20px\" style=\"font-weight: 600\"></tspan> -->\n                            </text>\n                        </svg>\n                    </dx-pie-chart>\n                </div>\n            </ng-container>\n            <ng-container *ngIf=\"chartType !== 'doughnut' && chartType !== 'funnel' && chartType !== 'bubble'\">\n                <div\n                    class=\"m-3 p-4 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700\">\n                    <!-- <h6 class=\"mb-1 text-md font-bold tracking-tight text-gray-900 dark:text-white border-b pb-3\">\n                        {{widGetConfig.widgetTitle}}\n                    </h6> -->\n                    <dx-chart id=\"chart\" [dataSource]=\"dataSourseForChart\"\n                        [title]=\"{ text: chartConfig.caption, font: { size: 14 } }\"\n                        [valueAxis]=\"chartConfig.valueAxisConfig\">\n                        <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n                            <ng-container *ngIf=\"item.axis\">\n                                <dxi-value-axis [name]=\"item.axis\" [position]=\"item.position\">\n                                    <dxo-title [text]=\"item.name\"></dxo-title>\n                                </dxi-value-axis>\n                            </ng-container>\n                        </ng-container>\n                        <dxo-argument-axis>\n                            <dxo-label overlappingBehavior=\"rotate\" [rotationAngle]=\"270\"></dxo-label>\n                        </dxo-argument-axis>\n                        <dxo-tooltip [enabled]=\"true\" [shared]=\"true\"></dxo-tooltip>\n                        <dxo-common-series-settings\n                            [argumentField]=\"chartConfig.argumentField\"></dxo-common-series-settings>\n                        <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n                            <ng-container *ngIf=\"item.color\">\n                                <dxi-series type=\"{{item.type}}\" valueField=\"{{item.valueField}}\" axis=\"{{item.axis}}\"\n                                    name=\"{{item.name}}\" color=\"{{item.color}}\">\n                                </dxi-series>\n                            </ng-container>\n                            <ng-container *ngIf=\"!item.color\">\n                                <dxi-series type=\"{{item.type}}\" valueField=\"{{item.valueField}}\" axis=\"{{item.axis}}\"\n                                    name=\"{{item.name}}\">\n                                </dxi-series>\n                            </ng-container>\n\n                        </ng-container>\n                        <dxo-size [height]=\"chartConfig.size\"></dxo-size>\n                        <dxo-legend [visible]=\"chartConfig.legendDisplay\"\n                            [verticalAlignment]=\"chartConfig.verticalAlignment\"\n                            [horizontalAlignment]=\"chartConfig.horizontalAlignment\"></dxo-legend>\n                    </dx-chart>\n                </div>\n            </ng-container>\n\n            <ng-container *ngIf=\"chartType == 'funnel'\">\n\n            </ng-container>\n            <ng-container *ngIf=\"chartType == 'bubble'\">\n                <div class=\"mx-5\">\n                    <ng-container *ngFor=\"let item of heatChartDataSource.dataSet\">\n                        <div class=\"flex flex-row\">\n                            <div class=\"h-10 text-sm items-center min-w-24 max-w-[30%] justify-center flex\">\n                                {{item.datasource}}\n                            </div>\n                            <div class=\"inline-block \">\n                                <div class=\"flex flex-nowrap justify-center \">\n                                    <ng-container *ngFor=\"let box of item.dataset\">\n                                        <div class=\"flex-shrink-0 min-w-10 max-w-[20%] h-10 text-sm cursor-pointer flex items-center justify-center text-gray-800\"\n                                            [matTooltip]=\"'Record Date: ' + box.recordDate + '\\nRecharge Count: ' + box.toolTip\"\n                                            matTooltipClass=\"custom-tooltip\">\n                                            <div class=\"rounded-full\" [ngStyle]=\"{\n                                        'background-color': box.isHovered ? 'rgb(135, 184, 106)' : box.color,\n                                        'width.px': box.size,\n                                        'hover': box.hover,\n                                        'height.px': box.size\n                                      }\" (mouseenter)=\"box.isHovered = true\" (mouseleave)=\"box.isHovered = false\">\n                                            </div>\n                                        </div>\n                                    </ng-container>\n                                </div>\n                            </div>\n                        </div>\n                    </ng-container>\n                    <div class=\"inline-block\">\n                        <div class=\"flex flex-nowrap justify-center\">\n                            <div class=\"flex-shrink-0 w-24 max-w-[20%] h-full flex items-center justify-center\"></div>\n                            <div *ngFor=\"let item of heatChartDataSource.argumentValue\"\n                                class=\"flex-shrink-0 w-10 max-w-[20%] min-h-14 flex text-sm items-center justify-center my-1\"\n                                [ngStyle]=\"{'height': 'auto'}\">\n                                <span class=\"text-rotate\">\n                                    {{item}}\n                                </span>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </ng-container>\n\n        </ng-container>\n\n    </div>\n    <div class=\"w-full m-2 border\">\n        <div class=\"flex flex-row mb-1\">\n            <div class=\"w-1/3 mx-1\">\n                <dx-select-box [dataSource]=\"chartAxisSource\" [(ngModel)]=\"chartAccess\" placeholder=\"Chart Type\"\n                    displayExpr=\"name\" valueExpr=\"value\" (onValueChanged)=\"getChartAccessType($event)\">\n                </dx-select-box>\n            </div>\n            <div class=\"w-1/3 mx-1\">\n                <ng-container *ngIf=\"chartAccess == 'single'\">\n                    <dx-select-box [items]=\"chartTypeSource\" (onValueChanged)=\"getChartType($event)\"\n                        [(ngModel)]=\"chartType\"></dx-select-box>\n                </ng-container>\n                <ng-container *ngIf=\"chartAccess == 'multy'\">\n                    <dx-select-box [items]=\"componentNamesForMultyAccess\" displayExpr=\"item\" valueExpr=\"compName\"\n                        [(ngModel)]=\"componentName\"></dx-select-box>\n                </ng-container>\n            </div>\n        </div>\n        <ng-container *ngIf=\"chartAccess == 'single'\">\n\n            <div class=\"mb-4 border-b border-gray-200 dark:border-gray-700\">\n                <ul class=\"flex flex-wrap -mb-px text-sm font-medium text-center\" role=\"tablist\">\n                    <li class=\"me-2\" role=\"presentation\">\n                        <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'basic',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'basic'\n                            }\" (click)=\"setActiveTab('basic')\" type=\"button\" role=\"tab\">\n                            Basic\n                        </button>\n                    </li>\n                    <li class=\"me-2\" role=\"presentation\">\n                        <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'columns',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'columns'\n                            }\" (click)=\"setActiveTab('columns')\" type=\"button\" role=\"tab\">\n                            Columns\n                        </button>\n                    </li>\n                    <!-- <li class=\"me-2\" role=\"presentation\">\n                        <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'widget',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'widget'\n                            }\" (click)=\"setActiveTab('widget')\" type=\"button\" role=\"tab\">\n                            Widget\n                        </button>\n                    </li> -->\n                </ul>\n            </div>\n\n            <div id=\"default-styled-tab-content\">\n                <div *ngIf=\"activeTab === 'basic'\">\n                    <div class=\"flex flex-wrap justify-between my-2\">\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1 \">Legend Horizontal Alignment</div>\n                            <dx-select-box [searchEnabled]=\"true\" [items]=\"['right','left','center']\"\n                                [(ngModel)]=\"chartConfig.horizontalAlignment\"></dx-select-box>\n\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Legend Vertical Alignment</div>\n                            <dx-select-box [searchEnabled]=\"true\" [items]=\"['top','bottom']\"\n                                [(ngModel)]=\"chartConfig.verticalAlignment\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1 mt-8\"></div>\n                            <dx-check-box [(ngModel)]=\"chartConfig.legendDisplay\" text=\"Legend Display\"></dx-check-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Argument Field</div>\n                            <dx-select-box [items]=\"configColume\"\n                                [(ngModel)]=\"chartConfig.argumentField\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Size</div>\n                            <dx-text-box [(ngModel)]=\"chartConfig.size\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Caption</div>\n                            <dx-text-box [(ngModel)]=\"chartConfig.caption\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2\"> Display Formate </div>\n                            <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                [(ngModel)]=\"mainChartCourceObject.kpiConfig.formate\"\n                                [readOnly]=\"false\"></dx-select-box>\n                        </div>\n                        <div class=\"w-2/3 px-2 mt-2\" *ngIf=\"chartType == 'doughnut'\">\n                            <div class=\" flex flex-row\">\n                                <div class=\"mr-2\">\n                                    <div class=\"text-md mb-1\"> Color Palette</div>\n                                    <dx-select-box [items]=\"doughnut_color_palette\"\n                                        [(ngModel)]=\"chartConfig.palette\"></dx-select-box>\n                                </div>\n                                <div class=\"mt-5\">\n                                    <dx-check-box [value]=\"chartConfig.labelDisplay\"\n                                        [(ngModel)]=\"chartConfig.labelDisplay\" text=\"Label Display\"></dx-check-box>\n                                </div>\n                            </div>\n\n\n                        </div>\n                        <div class=\"w-2/3 px-2 mt-2\" *ngIf=\"chartType == 'bubble'\">\n                            <div class=\" flex flex-row\">\n                                <div class=\"mr-2\">\n                                    <div class=\"text-md mb-1\"> Source Field</div>\n                                    <dx-select-box [items]=\"configColume\"\n                                        [(ngModel)]=\"chartConfig.sourceField\"></dx-select-box>\n                                </div>\n                                <div class=\"mr-2\">\n                                    <div class=\"text-md mb-1\"> Min Bubble Size</div>\n                                    <dx-text-box [(ngModel)]=\"chartConfig.minBubbleSize\"></dx-text-box>\n                                </div>\n                                <div class=\"mr-2\">\n                                    <div class=\"text-md mb-1\"> Max bubble size</div>\n                                    <dx-text-box [(ngModel)]=\"chartConfig.maxBubbleSize\"></dx-text-box>\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\" *ngIf=\"chartType == 'doughnut'\">\n\n                        </div>\n\n                    </div>\n                </div>\n                <div *ngIf=\"activeTab === 'columns'\">\n                    <div class=\"h-60 overflow-x-auto\">\n                        <div class=\" border-x border-b \">\n                            <div class=\"py-1 flex flex-row border-b\"\n                                *ngFor=\"let item of chartConfig.chart_config; let i = index\">\n\n                                <div class=\"px-1 mb-1 w-1/3\">\n                                    <div class=\"text-md mb-1\"> Value Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"item.valueField\"></dx-select-box>\n                                </div>\n\n                                <div class=\"px-1 mb-1 w-1/4\" *ngIf=\"chartType !== 'doughnut'\">\n                                    <div class=\"text-md mb-1\"> Axis</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"item.axis\"></dx-select-box>\n                                </div>\n                                <div class=\" px-2 mb-1 w-1/3\">\n                                    <div class=\"text-md mb-1\"> Position</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"['right','left']\"\n                                        [(ngModel)]=\"item.position\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-1/4\">\n                                    <div class=\"text-md mb-1\"> Name</div>\n                                    <dx-text-box [(ngModel)]=\"item.name\"></dx-text-box>\n                                </div>\n                                <div class=\"text-center mt-6 w-1/6\">\n                                    <button *ngIf=\"i !== 0\" class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItem(i, 'up')\">\n                                        <i class=\"fa fa-arrow-up\" aria-hidden=\"true\"></i>\n                                    </button>\n                                    <button *ngIf=\"i !== chartConfig.chart_config.length - 1\"\n                                        class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItem(i, 'down')\">\n                                        <i class=\"fa fa-arrow-down\" aria-hidden=\"true\"></i>\n                                    </button>\n\n                                    <button class=\"{{commonService.btn_danger_sm}} cursor-pointer\"\n                                        (click)=\"deleteColumns(i)\"><i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                    </button>\n                                </div>\n                            </div>\n                            <div class=\"flex flex-row justify-end my-2\" *ngIf=\"chartType == 'doughnut'\">\n                                <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\"\n                                    (click)=\"addColumns()\">Add\n                                    Series</button>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <!-- <div *ngIf=\"activeTab === 'widget'\">\n                    <div class=\"flex flex-wrap justify-between my-2\">\n                        <div class=\"w-1/3 px-1 mb-1\">\n                            <div class=\"text-md mb-2\"> Widget level</div>\n                            <dx-text-box [value]=\"mainChartCourceObject.widget\"\n                                [(ngModel)]=\"mainChartCourceObject.widget\" [readOnly]=\"isEditWidget\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-1 mb-1\">\n                            <div class=\"text-md mb-2\"> Title</div>\n                            <dx-text-box [value]=\"widGetConfig.widgetTitle\"\n                                [(ngModel)]=\"widGetConfig.widgetTitle\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-1 mb-1\">\n                            <div class=\"text-md mb-2\"> Width </div>\n                            <dx-select-box [value]=\"widGetConfig.width\" [items]=\"widget_width\"\n                                [(ngModel)]=\"widGetConfig.width\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-1 mb-1\">\n                            <div class=\"text-md mb-2\"> Display Formate </div>\n                            <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                [(ngModel)]=\"mainChartCourceObject.kpiConfig.formate\"\n                                [readOnly]=\"false\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-1 pt-6 text-center\">\n                            <dx-check-box [value]=\"widGetConfig.display\" [(ngModel)]=\"widGetConfig.display\"\n                                text=\"Display\"></dx-check-box>\n                        </div>\n                    </div>\n\n                </div> -->\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"chartAccess == 'multy'\">\n            <div class=\"mb-4 border-b border-gray-200 dark:border-gray-700\">\n                <ul class=\"flex flex-wrap -mb-px text-sm font-medium text-center\" role=\"tablist\">\n                    <li class=\"me-2\" role=\"presentation\">\n                        <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'basic',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'basic'\n                            }\" (click)=\"setActiveTab('basic')\" type=\"button\" role=\"tab\">\n                            Basic\n                        </button>\n                    </li>\n                    <li class=\"me-2\" role=\"presentation\">\n                        <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'columns',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'columns'\n                            }\" (click)=\"setActiveTab('columns')\" type=\"button\" role=\"tab\">\n                            Columns\n                        </button>\n                    </li>\n                    <!-- <li class=\"me-2\" role=\"presentation\">\n                        <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'widget',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'widget'\n                            }\" (click)=\"setActiveTab('widget')\" type=\"button\" role=\"tab\">\n                            Widget\n                        </button>\n                    </li> -->\n                </ul>\n            </div>\n\n            <div id=\"default-styled-tab-content\">\n                <div *ngIf=\"activeTab === 'basic'\">\n                    <div class=\"flex flex-wrap justify-between my-2\">\n                        <div class=\"w-1/3 px-2\">\n                            <div class=\"text-md mb-1\">Legend Horizontal Alignment</div>\n                            <dx-select-box [searchEnabled]=\"true\" [items]=\"['right','left','center']\" [value]=\"'center'\"\n                                [(ngModel)]=\"chartConfig.horizontalAlignment\"></dx-select-box>\n\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> legent Vertical Alignment</div>\n                            <dx-select-box [searchEnabled]=\"true\" [items]=\"['top','bottom']\" [value]=\"'bottom'\"\n                                [(ngModel)]=\"chartConfig.verticalAlignment\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1 mt-8\"></div>\n                            <dx-check-box [(ngModel)]=\"chartConfig.legendDisplay\" text=\"Legend Display\"></dx-check-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Argument Field</div>\n                            <dx-select-box [items]=\"configColume\"\n                                [(ngModel)]=\"chartConfig.argumentField\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Size</div>\n                            <dx-text-box [(ngModel)]=\"chartConfig.size\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Caption</div>\n                            <dx-text-box [(ngModel)]=\"chartConfig.caption\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2\"> Display Formate </div>\n                            <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                [(ngModel)]=\"mainChartCourceObject.kpiConfig.formate\"\n                                [readOnly]=\"false\"></dx-select-box>\n                        </div>\n                    </div>\n                </div>\n                <div *ngIf=\"activeTab === 'columns'\">\n                    <dx-scroll-view class=\"h-full\" [width]=\"'100%'\" [height]=\"'100%'\">\n                        <div class=\" border-x border-b \">\n                            <div class=\"py-1 flex flex-wrap border-b\"\n                                *ngFor=\"let item of chartConfig.chart_config; let i = index;\">\n\n                                <div class=\"px-2 mb-1 w-1/3\">\n                                    <div class=\"text-md mb-2\"> Type</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"chartTypeSource\" [value]=\"'spline'\"\n                                        [(ngModel)]=\"item.type\"></dx-select-box>\n                                </div>\n                                <div class=\"px-2 mb-1 w-1/3\">\n                                    <div class=\"text-md mb-1\"> Value Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"item.valueField\"></dx-select-box>\n                                </div>\n\n                                <div class=\"px-2 mb-1 w-1/3\">\n                                    <div class=\"text-md mb-1\"> Axis</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"item.axis\"></dx-select-box>\n                                </div>\n                                <div class=\" px-2 mb-1 w-1/4\">\n                                    <div class=\"text-md mb-1\"> Position</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"['right','left']\"\n                                        [(ngModel)]=\"item.position\"></dx-select-box>\n                                </div>\n                                <div class=\"px-2 mb-1 w-1/4\">\n                                    <div class=\"text-md mb-1\"> Name</div>\n                                    <dx-text-box [(ngModel)]=\"item.name\"></dx-text-box>\n                                </div>\n                                <div class=\"px-2 mb-1 w-1/4\">\n                                    <div class=\"text-md mb-2\"> Color</div>\n                                    <dx-color-box [(ngModel)]=\"item.color\"></dx-color-box>\n                                </div>\n                                <div class=\"text-center my-1 w-1/4\">\n                                    <button *ngIf=\"i !== 0\" class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItem(i, 'up')\">\n                                        <i class=\"fa fa-arrow-up\" aria-hidden=\"true\"></i>\n                                    </button>\n                                    <button *ngIf=\"i !== chartConfig.chart_config.length - 1\"\n                                        class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItem(i, 'down')\">\n                                        <i class=\"fa fa-arrow-down\" aria-hidden=\"true\"></i>\n                                    </button>\n\n                                    <button class=\"{{commonService.btn_danger_sm}} cursor-pointer\"\n                                        (click)=\"deleteColumns(i)\"><i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                    </button>\n                                </div>\n                            </div>\n                            <div class=\"flex flex-row justify-end my-2\">\n                                <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\"\n                                    (click)=\"addColumns()\">Add\n                                    Columns</button>\n                            </div>\n                        </div>\n                    </dx-scroll-view>\n                </div>\n                <!-- <div *ngIf=\"activeTab === 'widget'\">\n                    <div class=\"flex flex-wrap justify-between my-2\">\n                        <div class=\"w-1/3 px-1 mb-1\">\n                            <div class=\"text-md mb-2\"> Widget level</div>\n                            <dx-text-box [value]=\"mainChartCourceObject.widget\"\n                                [(ngModel)]=\"mainChartCourceObject.widget\" [readOnly]=\"isEditWidget\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-1 mb-1\">\n                            <div class=\"text-md mb-2\"> Title</div>\n                            <dx-text-box [value]=\"widGetConfig.widgetTitle\"\n                                [(ngModel)]=\"widGetConfig.widgetTitle\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-1 mb-1\">\n                            <div class=\"text-md mb-2\"> Width </div>\n                            <dx-select-box [value]=\"widGetConfig.width\" [items]=\"widget_width\"\n                                [(ngModel)]=\"widGetConfig.width\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-1 mb-1\">\n                            <div class=\"text-md mb-2\"> Display Formate </div>\n                            <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                [(ngModel)]=\"mainChartCourceObject.kpiConfig.formate\"\n                                [readOnly]=\"false\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-1 pt-6 text-center\">\n                            <dx-check-box [value]=\"widGetConfig.display\" [(ngModel)]=\"widGetConfig.display\"\n                                text=\"Display\"></dx-check-box>\n                        </div>\n                    </div>\n\n                </div> -->\n            </div>\n        </ng-container>\n\n\n    </div>\n\n</div>\n\n<div class=\"flex flex-row border-t pl-3\">\n    <div class=\"flex justify-start mx-1\">\n        <button class=\"{{commonService.btn_warning_md}} cursor-pointer mt-2\" (click)=\"isJsonPreview = true\">\n            Preview</button>\n        <button class=\"{{commonService.btn_primary_md}} cursor-pointer mt-2\" (click)=\"isJsonPreview = false\">Data\n            Preview</button>\n    </div>\n    <div class=\"flex justify-end mx-1 flex-grow\">\n        <button class=\"{{commonService.btn_success_md}} cursor-pointer mt-2\"\n            (click)=\"getSaveChartConfig()\">Submit</button>\n    </div>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i6.DxoLabelComponent, selector: "dxo-label", inputs: ["connectorColor", "connectorWidth", "customizeText", "font", "format", "indent", "visible", "horizontalAlignment", "position", "text", "verticalAlignment", "alignment", "customizeHint", "displayMode", "indentFromAxis", "overlappingBehavior", "rotationAngle", "staggeringSpacing", "template", "textOverflow", "wordWrap", "argumentFormat", "backgroundColor", "border", "connector", "displayFormat", "horizontalOffset", "showForZeroValues", "verticalOffset", "hideFirstOrLast", "indentFromTick", "useRangeColors", "location", "showColon", "radialOffset", "topIndent", "shadow", "useNodeColors", "dataField", "enabled"] }, { kind: "component", type: i6.DxoLegendComponent, selector: "dxo-legend", inputs: ["backgroundColor", "border", "columnCount", "columnItemSpacing", "customizeHint", "customizeItems", "customizeText", "font", "horizontalAlignment", "itemsAlignment", "itemTextFormat", "itemTextPosition", "margin", "markerSize", "markerTemplate", "orientation", "paddingLeftRight", "paddingTopBottom", "rowCount", "rowItemSpacing", "title", "verticalAlignment", "visible", "hoverMode", "position"] }, { kind: "component", type: i6.DxoTitleComponent, selector: "dxo-title", inputs: ["font", "horizontalAlignment", "margin", "placeholderSize", "subtitle", "text", "verticalAlignment", "textOverflow", "wordWrap", "alignment"] }, { kind: "component", type: i6.DxoSizeComponent, selector: "dxo-size", inputs: ["height", "width"] }, { kind: "component", type: i6.DxoTooltipComponent, selector: "dxo-tooltip", inputs: ["arrowLength", "border", "color", "container", "contentTemplate", "cornerRadius", "customizeTooltip", "enabled", "font", "format", "interactive", "opacity", "paddingLeftRight", "paddingTopBottom", "shadow", "zIndex", "argumentFormat", "location", "shared", "isShown", "text", "position", "showMode", "customizeLinkTooltip", "customizeNodeTooltip", "linkTooltipTemplate", "nodeTooltipTemplate"] }, { kind: "component", type: i5$1.DxChartComponent, selector: "dx-chart", inputs: ["adaptiveLayout", "adjustOnZoom", "animation", "annotations", "argumentAxis", "autoHidePointMarkers", "barGroupPadding", "barGroupWidth", "commonAnnotationSettings", "commonAxisSettings", "commonPaneSettings", "commonSeriesSettings", "containerBackgroundColor", "crosshair", "customizeAnnotation", "customizeLabel", "customizePoint", "dataPrepareSettings", "dataSource", "defaultPane", "disabled", "elementAttr", "export", "legend", "loadingIndicator", "margin", "maxBubbleSize", "minBubbleSize", "negativesAsZeroes", "palette", "paletteExtensionMode", "panes", "pathModified", "pointSelectionMode", "redrawOnResize", "resizePanesOnZoom", "resolveLabelOverlapping", "rotated", "rtlEnabled", "scrollBar", "series", "seriesSelectionMode", "seriesTemplate", "size", "stickyHovering", "synchronizeMultiAxes", "theme", "title", "tooltip", "valueAxis", "zoomAndPan"], outputs: ["onArgumentAxisClick", "onDisposing", "onDone", "onDrawn", "onExported", "onExporting", "onFileSaving", "onIncidentOccurred", "onInitialized", "onLegendClick", "onOptionChanged", "onPointClick", "onPointHoverChanged", "onPointSelectionChanged", "onSeriesClick", "onSeriesHoverChanged", "onSeriesSelectionChanged", "onTooltipHidden", "onTooltipShown", "onZoomEnd", "onZoomStart", "adaptiveLayoutChange", "adjustOnZoomChange", "animationChange", "annotationsChange", "argumentAxisChange", "autoHidePointMarkersChange", "barGroupPaddingChange", "barGroupWidthChange", "commonAnnotationSettingsChange", "commonAxisSettingsChange", "commonPaneSettingsChange", "commonSeriesSettingsChange", "containerBackgroundColorChange", "crosshairChange", "customizeAnnotationChange", "customizeLabelChange", "customizePointChange", "dataPrepareSettingsChange", "dataSourceChange", "defaultPaneChange", "disabledChange", "elementAttrChange", "exportChange", "legendChange", "loadingIndicatorChange", "marginChange", "maxBubbleSizeChange", "minBubbleSizeChange", "negativesAsZeroesChange", "paletteChange", "paletteExtensionModeChange", "panesChange", "pathModifiedChange", "pointSelectionModeChange", "redrawOnResizeChange", "resizePanesOnZoomChange", "resolveLabelOverlappingChange", "rotatedChange", "rtlEnabledChange", "scrollBarChange", "seriesChange", "seriesSelectionModeChange", "seriesTemplateChange", "sizeChange", "stickyHoveringChange", "synchronizeMultiAxesChange", "themeChange", "titleChange", "tooltipChange", "valueAxisChange", "zoomAndPanChange"] }, { kind: "component", type: i6.DxoArgumentAxisComponent, selector: "dxo-argument-axis", inputs: ["aggregateByCategory", "aggregatedPointsPosition", "aggregationGroupWidth", "aggregationInterval", "allowDecimals", "argumentType", "axisDivisionFactor", "breaks", "breakStyle", "categories", "color", "constantLines", "constantLineStyle", "customPosition", "customPositionAxis", "discreteAxisDivisionMode", "endOnTick", "grid", "holidays", "hoverMode", "inverted", "label", "linearThreshold", "logarithmBase", "maxValueMargin", "minorGrid", "minorTick", "minorTickCount", "minorTickInterval", "minValueMargin", "minVisualRangeLength", "offset", "opacity", "placeholderSize", "position", "singleWorkdays", "strips", "stripStyle", "tick", "tickInterval", "title", "type", "valueMarginsEnabled", "visible", "visualRange", "visualRangeUpdateMode", "wholeRange", "width", "workdaysOnly", "workWeek", "firstPointOnStartAngle", "originValue", "period", "startAngle"], outputs: ["visualRangeChange"] }, { kind: "component", type: i6.DxoCommonSeriesSettingsComponent, selector: "dxo-common-series-settings", inputs: ["aggregation", "area", "argumentField", "axis", "bar", "barOverlapGroup", "barPadding", "barWidth", "border", "bubble", "candlestick", "closeValueField", "color", "cornerRadius", "dashStyle", "fullstackedarea", "fullstackedbar", "fullstackedline", "fullstackedspline", "fullstackedsplinearea", "highValueField", "hoverMode", "hoverStyle", "ignoreEmptyPoints", "innerColor", "label", "line", "lowValueField", "maxLabelCount", "minBarSize", "opacity", "openValueField", "pane", "point", "rangearea", "rangebar", "rangeValue1Field", "rangeValue2Field", "reduction", "scatter", "selectionMode", "selectionStyle", "showInLegend", "sizeField", "spline", "splinearea", "stack", "stackedarea", "stackedbar", "stackedline", "stackedspline", "stackedsplinearea", "steparea", "stepline", "stock", "tagField", "type", "valueErrorBar", "valueField", "visible", "width", "argumentType", "minSegmentSize", "smallValuesGrouping", "closed"] }, { kind: "component", type: i6.DxoConnectorComponent, selector: "dxo-connector", inputs: ["color", "visible", "width", "opacity"] }, { kind: "component", type: i6.DxiSeriesComponent, selector: "dxi-series", inputs: ["aggregation", "argumentField", "axis", "barOverlapGroup", "barPadding", "barWidth", "border", "closeValueField", "color", "cornerRadius", "dashStyle", "highValueField", "hoverMode", "hoverStyle", "ignoreEmptyPoints", "innerColor", "label", "lowValueField", "maxLabelCount", "minBarSize", "name", "opacity", "openValueField", "pane", "point", "rangeValue1Field", "rangeValue2Field", "reduction", "selectionMode", "selectionStyle", "showInLegend", "sizeField", "stack", "tag", "tagField", "type", "valueErrorBar", "valueField", "visible", "width", "argumentType", "minSegmentSize", "smallValuesGrouping", "closed"] }, { kind: "component", type: i6.DxiValueAxisComponent, selector: "dxi-value-axis", inputs: ["aggregatedPointsPosition", "allowDecimals", "autoBreaksEnabled", "axisDivisionFactor", "breaks", "breakStyle", "categories", "color", "constantLines", "constantLineStyle", "customPosition", "discreteAxisDivisionMode", "endOnTick", "grid", "inverted", "label", "linearThreshold", "logarithmBase", "maxAutoBreakCount", "maxValueMargin", "minorGrid", "minorTick", "minorTickCount", "minorTickInterval", "minValueMargin", "minVisualRangeLength", "multipleAxesSpacing", "name", "offset", "opacity", "pane", "placeholderSize", "position", "showZero", "strips", "stripStyle", "synchronizedValue", "tick", "tickInterval", "title", "type", "valueMarginsEnabled", "valueType", "visible", "visualRange", "visualRangeUpdateMode", "wholeRange", "width"], outputs: ["visualRangeChange"] }, { kind: "component", type: i5.DxCheckBoxComponent, selector: "dx-check-box", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "iconSize", "isValid", "name", "readOnly", "rtlEnabled", "tabIndex", "text", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "visible", "width"], outputs: ["onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconSizeChange", "isValidChange", "nameChange", "readOnlyChange", "rtlEnabledChange", "tabIndexChange", "textChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "component", type: i6$2.DxColorBoxComponent, selector: "dx-color-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "applyButtonText", "applyValueMode", "buttons", "cancelButtonText", "deferRendering", "disabled", "dropDownButtonTemplate", "dropDownOptions", "editAlphaChannel", "elementAttr", "fieldTemplate", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "keyStep", "label", "labelMode", "name", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showDropDownButton", "stylingMode", "tabIndex", "text", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "visible", "width"], outputs: ["onChange", "onClosed", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOpened", "onOptionChanged", "onPaste", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "applyButtonTextChange", "applyValueModeChange", "buttonsChange", "cancelButtonTextChange", "deferRenderingChange", "disabledChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "editAlphaChannelChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "keyStepChange", "labelChange", "labelModeChange", "nameChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showDropDownButtonChange", "stylingModeChange", "tabIndexChange", "textChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "component", type: i8$2.DxPieChartComponent, selector: "dx-pie-chart", inputs: ["adaptiveLayout", "animation", "annotations", "centerTemplate", "commonAnnotationSettings", "commonSeriesSettings", "customizeAnnotation", "customizeLabel", "customizePoint", "dataSource", "diameter", "disabled", "elementAttr", "export", "innerRadius", "legend", "loadingIndicator", "margin", "minDiameter", "palette", "paletteExtensionMode", "pathModified", "pointSelectionMode", "redrawOnResize", "resolveLabelOverlapping", "rtlEnabled", "segmentsDirection", "series", "seriesTemplate", "size", "sizeGroup", "startAngle", "theme", "title", "tooltip", "type"], outputs: ["onDisposing", "onDone", "onDrawn", "onExported", "onExporting", "onFileSaving", "onIncidentOccurred", "onInitialized", "onLegendClick", "onOptionChanged", "onPointClick", "onPointHoverChanged", "onPointSelectionChanged", "onTooltipHidden", "onTooltipShown", "adaptiveLayoutChange", "animationChange", "annotationsChange", "centerTemplateChange", "commonAnnotationSettingsChange", "commonSeriesSettingsChange", "customizeAnnotationChange", "customizeLabelChange", "customizePointChange", "dataSourceChange", "diameterChange", "disabledChange", "elementAttrChange", "exportChange", "innerRadiusChange", "legendChange", "loadingIndicatorChange", "marginChange", "minDiameterChange", "paletteChange", "paletteExtensionModeChange", "pathModifiedChange", "pointSelectionModeChange", "redrawOnResizeChange", "resolveLabelOverlappingChange", "rtlEnabledChange", "segmentsDirectionChange", "seriesChange", "seriesTemplateChange", "sizeChange", "sizeGroupChange", "startAngleChange", "themeChange", "titleChange", "tooltipChange", "typeChange"] }, { kind: "component", type: i10.DxScrollViewComponent, selector: "dx-scroll-view", inputs: ["bounceEnabled", "direction", "disabled", "elementAttr", "height", "pulledDownText", "pullingDownText", "reachBottomText", "refreshingText", "rtlEnabled", "scrollByContent", "scrollByThumb", "showScrollbar", "useNative", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onPullDown", "onReachBottom", "onScroll", "onUpdated", "bounceEnabledChange", "directionChange", "disabledChange", "elementAttrChange", "heightChange", "pulledDownTextChange", "pullingDownTextChange", "reachBottomTextChange", "refreshingTextChange", "rtlEnabledChange", "scrollByContentChange", "scrollByThumbChange", "showScrollbarChange", "useNativeChange", "widthChange"] }, { kind: "component", type: i6$1.DxSelectBoxComponent, selector: "dx-select-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "buttons", "dataSource", "deferRendering", "disabled", "displayExpr", "displayValue", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "fieldTemplate", "focusStateEnabled", "grouped", "groupTemplate", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "items", "itemTemplate", "label", "labelMode", "maxLength", "minSearchLength", "name", "noDataText", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "searchEnabled", "searchExpr", "searchMode", "searchTimeout", "selectedItem", "showClearButton", "showDataBeforeSearch", "showDropDownButton", "showSelectionControls", "spellcheck", "stylingMode", "tabIndex", "text", "useItemTextAsTitle", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueChangeEvent", "valueExpr", "visible", "width", "wrapItemText"], outputs: ["onChange", "onClosed", "onContentReady", "onCopy", "onCustomItemCreating", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onItemClick", "onKeyDown", "onKeyUp", "onOpened", "onOptionChanged", "onPaste", "onSelectionChanged", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "dataSourceChange", "deferRenderingChange", "disabledChange", "displayExprChange", "displayValueChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "groupedChange", "groupTemplateChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "itemsChange", "itemTemplateChange", "labelChange", "labelModeChange", "maxLengthChange", "minSearchLengthChange", "nameChange", "noDataTextChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "searchEnabledChange", "searchExprChange", "searchModeChange", "searchTimeoutChange", "selectedItemChange", "showClearButtonChange", "showDataBeforeSearchChange", "showDropDownButtonChange", "showSelectionControlsChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useItemTextAsTitleChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "valueExprChange", "visibleChange", "widthChange", "wrapItemTextChange", "onBlur"] }, { kind: "component", type: i7.DxTextBoxComponent, selector: "dx-text-box", inputs: ["accessKey", "activeStateEnabled", "buttons", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "label", "labelMode", "mask", "maskChar", "maskInvalidMessage", "maskRules", "maxLength", "mode", "name", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showMaskMode", "spellcheck", "stylingMode", "tabIndex", "text", "useMaskedValue", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOptionChanged", "onPaste", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "labelChange", "labelModeChange", "maskChange", "maskCharChange", "maskInvalidMessageChange", "maskRulesChange", "maxLengthChange", "modeChange", "nameChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showMaskModeChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useMaskedValueChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i13.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i4$1.JsonPipe, name: "json" }] });
+DashChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DashChartComponent, selector: "app-dash-chart", inputs: { chartconfigData: ["datasetmodal", "chartconfigData"] }, outputs: { getChartConfigOutPut: "getChartConfigOutPut" }, ngImport: i0, template: "<div class=\"mx-2\">\n    <div class=\"w-full m-2 border\">\n        <ng-container *ngIf=\"!isJsonPreview\">\n            <pre><code>{{jsaonDatasource | json}}</code></pre>\n        </ng-container>\n        <ng-container *ngIf=\"isJsonPreview\">\n            <ng-container *ngIf=\"chartType == 'doughnut' || chartType == 'pie'\">\n                <div\n                    class=\"m-3 p-4 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700\">\n                    <!-- <h6 class=\"mb-1 text-md font-bold tracking-tight text-gray-900 dark:text-white border-b pb-3\">\n                        {{widGetConfig.widgetTitle}}\n                    </h6> -->\n                    <dx-pie-chart id=\"pie\" [type]=\"chartType\" [title]=\"{ text: chartConfig.caption, font: { size: 14 } }\"\n                        palette=\"Soft Pastel\" [dataSource]=\"dataSourseForChart\" centerTemplate=\"centerTemplate\"\n                        (onPointClick)=\"pointClickHandler($event)\" [palette]=\"chartConfig.palette\">\n\n                        <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n                            <ng-container *ngIf=\"item.color\">\n                                <dxi-series argumentField={{chartConfig.argumentField}} valueField=\"{{item.valueField}}\"\n                                    name=\"{{item.name}}\" color=\"{{item.color}}\">\n                                    <dxo-label [visible]=\"chartConfig.labelDisplay\" format=\"#,##0.##\">\n                                        <dxo-connector [visible]=\"true\"></dxo-connector>\n                                    </dxo-label>\n                                </dxi-series>\n                            </ng-container>\n                            <ng-container *ngIf=\"!item.color\">\n                                <dxi-series argumentField={{chartConfig.argumentField}} valueField=\"{{item.valueField}}\"\n                                    name=\"{{item.name}}\">\n                                    <dxo-label [visible]=\"chartConfig.labelDisplay\" format=\"#,##0.##\">\n                                        <dxo-connector [visible]=\"true\"></dxo-connector>\n                                    </dxo-label>\n                                </dxi-series>\n                            </ng-container>\n                        </ng-container>\n                        <dxo-legend [visible]=\"chartConfig.legendDisplay\"\n                            horizontalAlignment=\"{{chartConfig.horizontalAlignment}}\"\n                            verticalAlignment=\"{{chartConfig.verticalAlignment}}\"></dxo-legend>\n                        <!-- <dxo-export [enabled]=\"true\"></dxo-export> -->\n                        <dxo-tooltip [enabled]=\"true\" [customizeTooltip]=\"customizeTooltip\" format=\"#,##0.##\">\n                        </dxo-tooltip>\n                        <ng-container *ngIf=\"chartType == 'doughnut'\">\n                            <svg *dxTemplate=\"let pieChart of 'centerTemplate'\">\n                                <circle cx=\"100\" cy=\"100\" [attr.r]=\"pieChart.getInnerRadius() - 6\" fill=\"gray\"\n                                    opacity=\"0.0001\">\n                                </circle>\n    \n                                <text text-anchor=\"middle\" style=\"font-size: 28px\" x=\"100\" y=\"100\" fill=\"#eee\">\n                                    <tspan x=\"100\">{{ calculateTotal(pieChart) }}</tspan>\n                                    <!-- display: inline -->\n                                    <!-- <tspan x=\"100\" dy=\"20px\" style=\"font-weight: 600\"></tspan> -->\n                                </text>\n                            </svg>\n                        </ng-container>\n                       \n                    </dx-pie-chart>\n                </div>\n            </ng-container>\n            <ng-container *ngIf=\"chartType !== 'doughnut' && chartType !== 'funnel' && chartType !== 'bubble' && chartType !== 'pie'\">\n                <div\n                    class=\"m-3 p-4 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700\">\n                    <!-- <h6 class=\"mb-1 text-md font-bold tracking-tight text-gray-900 dark:text-white border-b pb-3\">\n                        {{widGetConfig.widgetTitle}}\n                    </h6> -->\n                    <dx-chart id=\"chart\" [dataSource]=\"dataSourseForChart\"\n                        [title]=\"{ text: chartConfig.caption, font: { size: 14 } }\"\n                        [valueAxis]=\"chartConfig.valueAxisConfig\">\n                        <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n                            <ng-container *ngIf=\"item.axis\">\n                                <dxi-value-axis [name]=\"item.axis\" [position]=\"item.position\">\n                                    <dxo-title [text]=\"item.name\"></dxo-title>\n                                </dxi-value-axis>\n                            </ng-container>\n                        </ng-container>\n                        <dxo-argument-axis>\n                            <dxo-label overlappingBehavior=\"rotate\" [rotationAngle]=\"270\"></dxo-label>\n                        </dxo-argument-axis>\n                        <dxo-tooltip [enabled]=\"true\" [shared]=\"true\"></dxo-tooltip>\n                        <dxo-common-series-settings\n                            [argumentField]=\"chartConfig.argumentField\"></dxo-common-series-settings>\n                        <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n                            <ng-container *ngIf=\"item.color\">\n                                <dxi-series type=\"{{item.type}}\" valueField=\"{{item.valueField}}\" axis=\"{{item.axis}}\"\n                                    name=\"{{item.name}}\" color=\"{{item.color}}\">\n                                </dxi-series>\n                            </ng-container>\n                            <ng-container *ngIf=\"!item.color\">\n                                <dxi-series type=\"{{item.type}}\" valueField=\"{{item.valueField}}\" axis=\"{{item.axis}}\"\n                                    name=\"{{item.name}}\">\n                                </dxi-series>\n                            </ng-container>\n\n                        </ng-container>\n                        <dxo-size [height]=\"chartConfig.size\"></dxo-size>\n                        <dxo-legend [visible]=\"chartConfig.legendDisplay\"\n                            [verticalAlignment]=\"chartConfig.verticalAlignment\"\n                            [horizontalAlignment]=\"chartConfig.horizontalAlignment\"></dxo-legend>\n                    </dx-chart>\n                </div>\n            </ng-container>\n\n            <ng-container *ngIf=\"chartType == 'funnel'\">\n\n            </ng-container>\n            <ng-container *ngIf=\"chartType == 'bubble'\">\n                <div class=\"mx-5\">\n                    <ng-container *ngFor=\"let item of heatChartDataSource.dataSet\">\n                        <div class=\"flex flex-row\">\n                            <div class=\"h-10 text-sm items-center min-w-24 max-w-[30%] justify-center flex\">\n                                {{item.datasource}}\n                            </div>\n                            <div class=\"inline-block \">\n                                <div class=\"flex flex-nowrap justify-center \">\n                                    <ng-container *ngFor=\"let box of item.dataset\">\n                                        <div class=\"flex-shrink-0 min-w-10 max-w-[20%] h-10 text-sm cursor-pointer flex items-center justify-center text-gray-800\"\n                                            [matTooltip]=\"'Record Date: ' + box.recordDate + '\\nRecharge Count: ' + box.toolTip\"\n                                            matTooltipClass=\"custom-tooltip\">\n                                            <div class=\"rounded-full\" [ngStyle]=\"{\n                                        'background-color': box.isHovered ? 'rgb(135, 184, 106)' : box.color,\n                                        'width.px': box.size,\n                                        'hover': box.hover,\n                                        'height.px': box.size\n                                      }\" (mouseenter)=\"box.isHovered = true\" (mouseleave)=\"box.isHovered = false\">\n                                            </div>\n                                        </div>\n                                    </ng-container>\n                                </div>\n                            </div>\n                        </div>\n                    </ng-container>\n                    <div class=\"inline-block\">\n                        <div class=\"flex flex-nowrap justify-center\">\n                            <div class=\"flex-shrink-0 w-24 max-w-[20%] h-full flex items-center justify-center\"></div>\n                            <div *ngFor=\"let item of heatChartDataSource.argumentValue\"\n                                class=\"flex-shrink-0 w-10 max-w-[20%] min-h-14 flex text-sm items-center justify-center my-1\"\n                                [ngStyle]=\"{'height': 'auto'}\">\n                                <span class=\"text-rotate\">\n                                    {{item}}\n                                </span>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </ng-container>\n\n        </ng-container>\n\n    </div>\n    <div class=\"w-full m-2 border\">\n        <div class=\"flex flex-row mb-1\">\n            <div class=\"w-1/3 mx-1\">\n                <dx-select-box [dataSource]=\"chartAxisSource\" [(ngModel)]=\"chartAccess\" placeholder=\"Chart Type\"\n                    displayExpr=\"name\" valueExpr=\"value\" (onValueChanged)=\"getChartAccessType($event)\">\n                </dx-select-box>\n            </div>\n            <div class=\"w-1/3 mx-1\">\n                <ng-container *ngIf=\"chartAccess == 'single'\">\n                    <dx-select-box [items]=\"chartTypeSource\" (onValueChanged)=\"getChartType($event)\"\n                        [(ngModel)]=\"chartType\"></dx-select-box>\n                </ng-container>\n                <ng-container *ngIf=\"chartAccess == 'multy'\">\n                    <dx-select-box [items]=\"componentNamesForMultyAccess\" displayExpr=\"item\" valueExpr=\"compName\"\n                        [(ngModel)]=\"componentName\"></dx-select-box>\n                </ng-container>\n            </div>\n        </div>\n        <ng-container *ngIf=\"chartAccess == 'single'\">\n\n            <div class=\"mb-4 border-b border-gray-200 dark:border-gray-700\">\n                <ul class=\"flex flex-wrap -mb-px text-sm font-medium text-center\" role=\"tablist\">\n                    <li class=\"me-2\" role=\"presentation\">\n                        <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'basic',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'basic'\n                            }\" (click)=\"setActiveTab('basic')\" type=\"button\" role=\"tab\">\n                            Basic\n                        </button>\n                    </li>\n                    <li class=\"me-2\" role=\"presentation\">\n                        <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'columns',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'columns'\n                            }\" (click)=\"setActiveTab('columns')\" type=\"button\" role=\"tab\">\n                            Columns\n                        </button>\n                    </li>\n                    <!-- <li class=\"me-2\" role=\"presentation\">\n                        <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'widget',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'widget'\n                            }\" (click)=\"setActiveTab('widget')\" type=\"button\" role=\"tab\">\n                            Widget\n                        </button>\n                    </li> -->\n                </ul>\n            </div>\n\n            <div id=\"default-styled-tab-content\">\n                <div *ngIf=\"activeTab === 'basic'\">\n                    <div class=\"flex flex-wrap justify-between my-2\">\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1 \">Legend Horizontal Alignment</div>\n                            <dx-select-box [searchEnabled]=\"true\" [items]=\"['right','left','center']\"\n                                [(ngModel)]=\"chartConfig.horizontalAlignment\"></dx-select-box>\n\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Legend Vertical Alignment</div>\n                            <dx-select-box [searchEnabled]=\"true\" [items]=\"['top','bottom']\"\n                                [(ngModel)]=\"chartConfig.verticalAlignment\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1 mt-8\"></div>\n                            <dx-check-box [(ngModel)]=\"chartConfig.legendDisplay\" text=\"Legend Display\"></dx-check-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Argument Field</div>\n                            <dx-select-box [items]=\"configColume\"\n                                [(ngModel)]=\"chartConfig.argumentField\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Size</div>\n                            <dx-text-box [(ngModel)]=\"chartConfig.size\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Caption</div>\n                            <dx-text-box [(ngModel)]=\"chartConfig.caption\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2\"> Display Formate </div>\n                            <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                [(ngModel)]=\"mainChartCourceObject.kpiConfig.formate\"\n                                [readOnly]=\"false\"></dx-select-box>\n                        </div>\n                        <div class=\"w-2/3 px-2 mt-2\" *ngIf=\"chartType == 'doughnut' ||  chartType == 'pie'\">\n                            <div class=\" flex flex-row\">\n                                <div class=\"mr-2\">\n                                    <div class=\"text-md mb-1\"> Color Palette</div>\n                                    <dx-select-box [items]=\"doughnut_color_palette\"\n                                        [(ngModel)]=\"chartConfig.palette\"></dx-select-box>\n                                </div>\n                                <div class=\"mt-7\">\n                                    <dx-check-box [value]=\"chartConfig.labelDisplay\"\n                                        [(ngModel)]=\"chartConfig.labelDisplay\" text=\"Label Display\"></dx-check-box>\n                                </div>\n                            </div>\n\n\n                        </div>\n                        <div class=\"w-2/3 px-2 mt-2\" *ngIf=\"chartType == 'bubble'\">\n                            <div class=\" flex flex-row\">\n                                <div class=\"mr-2\">\n                                    <div class=\"text-md mb-1\"> Source Field</div>\n                                    <dx-select-box [items]=\"configColume\"\n                                        [(ngModel)]=\"chartConfig.sourceField\"></dx-select-box>\n                                </div>\n                                <div class=\"mr-2\">\n                                    <div class=\"text-md mb-1\"> Min Bubble Size</div>\n                                    <dx-text-box [(ngModel)]=\"chartConfig.minBubbleSize\"></dx-text-box>\n                                </div>\n                                <div class=\"mr-2\">\n                                    <div class=\"text-md mb-1\"> Max bubble size</div>\n                                    <dx-text-box [(ngModel)]=\"chartConfig.maxBubbleSize\"></dx-text-box>\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\" *ngIf=\"chartType == 'doughnut'\">\n\n                        </div>\n\n                    </div>\n                </div>\n                <div *ngIf=\"activeTab === 'columns'\">\n                    <div class=\"h-60 overflow-x-auto\">\n                        <div class=\" border-x border-b \">\n                            <div class=\"py-1 flex flex-row border-b\"\n                                *ngFor=\"let item of chartConfig.chart_config; let i = index\">\n\n                                <div class=\"px-1 mb-1 w-1/3\">\n                                    <div class=\"text-md mb-1\"> Value Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"item.valueField\"></dx-select-box>\n                                </div>\n\n                                <div class=\"px-1 mb-1 w-1/4\" *ngIf=\"chartType !== 'doughnut' && chartType !== 'pie'\">\n                                    <div class=\"text-md mb-1\"> Axis</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"item.axis\"></dx-select-box>\n                                </div>\n                                <div class=\" px-2 mb-1 w-1/3\">\n                                    <div class=\"text-md mb-1\"> Position</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"['right','left']\"\n                                        [(ngModel)]=\"item.position\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-1/4\">\n                                    <div class=\"text-md mb-1\"> Name</div>\n                                    <dx-text-box [(ngModel)]=\"item.name\"></dx-text-box>\n                                </div>\n                                <div class=\"text-center mt-6 w-1/6\">\n                                    <button *ngIf=\"i !== 0\" class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItem(i, 'up')\">\n                                        <i class=\"fa fa-arrow-up\" aria-hidden=\"true\"></i>\n                                    </button>\n                                    <button *ngIf=\"i !== chartConfig.chart_config.length - 1\"\n                                        class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItem(i, 'down')\">\n                                        <i class=\"fa fa-arrow-down\" aria-hidden=\"true\"></i>\n                                    </button>\n\n                                    <button class=\"{{commonService.btn_danger_sm}} cursor-pointer\"\n                                        (click)=\"deleteColumns(i)\"><i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                    </button>\n                                </div>\n                            </div>\n                            <div class=\"flex flex-row justify-end my-2\" *ngIf=\"chartType == 'doughnut' && chartType == 'pie'\">\n                                <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\"\n                                    (click)=\"addColumns()\">Add\n                                    Series</button>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <!-- <div *ngIf=\"activeTab === 'widget'\">\n                    <div class=\"flex flex-wrap justify-between my-2\">\n                        <div class=\"w-1/3 px-1 mb-1\">\n                            <div class=\"text-md mb-2\"> Widget level</div>\n                            <dx-text-box [value]=\"mainChartCourceObject.widget\"\n                                [(ngModel)]=\"mainChartCourceObject.widget\" [readOnly]=\"isEditWidget\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-1 mb-1\">\n                            <div class=\"text-md mb-2\"> Title</div>\n                            <dx-text-box [value]=\"widGetConfig.widgetTitle\"\n                                [(ngModel)]=\"widGetConfig.widgetTitle\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-1 mb-1\">\n                            <div class=\"text-md mb-2\"> Width </div>\n                            <dx-select-box [value]=\"widGetConfig.width\" [items]=\"widget_width\"\n                                [(ngModel)]=\"widGetConfig.width\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-1 mb-1\">\n                            <div class=\"text-md mb-2\"> Display Formate </div>\n                            <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                [(ngModel)]=\"mainChartCourceObject.kpiConfig.formate\"\n                                [readOnly]=\"false\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-1 pt-6 text-center\">\n                            <dx-check-box [value]=\"widGetConfig.display\" [(ngModel)]=\"widGetConfig.display\"\n                                text=\"Display\"></dx-check-box>\n                        </div>\n                    </div>\n\n                </div> -->\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"chartAccess == 'multy'\">\n            <div class=\"mb-4 border-b border-gray-200 dark:border-gray-700\">\n                <ul class=\"flex flex-wrap -mb-px text-sm font-medium text-center\" role=\"tablist\">\n                    <li class=\"me-2\" role=\"presentation\">\n                        <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'basic',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'basic'\n                            }\" (click)=\"setActiveTab('basic')\" type=\"button\" role=\"tab\">\n                            Basic\n                        </button>\n                    </li>\n                    <li class=\"me-2\" role=\"presentation\">\n                        <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'columns',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'columns'\n                            }\" (click)=\"setActiveTab('columns')\" type=\"button\" role=\"tab\">\n                            Columns\n                        </button>\n                    </li>\n                    <!-- <li class=\"me-2\" role=\"presentation\">\n                        <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'widget',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'widget'\n                            }\" (click)=\"setActiveTab('widget')\" type=\"button\" role=\"tab\">\n                            Widget\n                        </button>\n                    </li> -->\n                </ul>\n            </div>\n\n            <div id=\"default-styled-tab-content\">\n                <div *ngIf=\"activeTab === 'basic'\">\n                    <div class=\"flex flex-wrap justify-between my-2\">\n                        <div class=\"w-1/3 px-2\">\n                            <div class=\"text-md mb-1\">Legend Horizontal Alignment</div>\n                            <dx-select-box [searchEnabled]=\"true\" [items]=\"['right','left','center']\" [value]=\"'center'\"\n                                [(ngModel)]=\"chartConfig.horizontalAlignment\"></dx-select-box>\n\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> legent Vertical Alignment</div>\n                            <dx-select-box [searchEnabled]=\"true\" [items]=\"['top','bottom']\" [value]=\"'bottom'\"\n                                [(ngModel)]=\"chartConfig.verticalAlignment\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1 mt-8\"></div>\n                            <dx-check-box [(ngModel)]=\"chartConfig.legendDisplay\" text=\"Legend Display\"></dx-check-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Argument Field</div>\n                            <dx-select-box [items]=\"configColume\"\n                                [(ngModel)]=\"chartConfig.argumentField\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Size</div>\n                            <dx-text-box [(ngModel)]=\"chartConfig.size\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Caption</div>\n                            <dx-text-box [(ngModel)]=\"chartConfig.caption\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2\"> Display Formate </div>\n                            <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                [(ngModel)]=\"mainChartCourceObject.kpiConfig.formate\"\n                                [readOnly]=\"false\"></dx-select-box>\n                        </div>\n                    </div>\n                </div>\n                <div *ngIf=\"activeTab === 'columns'\">\n                    <dx-scroll-view class=\"h-full\" [width]=\"'100%'\" [height]=\"'100%'\">\n                        <div class=\" border-x border-b \">\n                            <div class=\"py-1 flex flex-wrap border-b\"\n                                *ngFor=\"let item of chartConfig.chart_config; let i = index;\">\n\n                                <div class=\"px-2 mb-1 w-1/3\">\n                                    <div class=\"text-md mb-2\"> Type</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"chartTypeSource\" [value]=\"'spline'\"\n                                        [(ngModel)]=\"item.type\"></dx-select-box>\n                                </div>\n                                <div class=\"px-2 mb-1 w-1/3\">\n                                    <div class=\"text-md mb-1\"> Value Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"item.valueField\"></dx-select-box>\n                                </div>\n\n                                <div class=\"px-2 mb-1 w-1/3\">\n                                    <div class=\"text-md mb-1\"> Axis</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"item.axis\"></dx-select-box>\n                                </div>\n                                <div class=\" px-2 mb-1 w-1/4\">\n                                    <div class=\"text-md mb-1\"> Position</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"['right','left']\"\n                                        [(ngModel)]=\"item.position\"></dx-select-box>\n                                </div>\n                                <div class=\"px-2 mb-1 w-1/4\">\n                                    <div class=\"text-md mb-1\"> Name</div>\n                                    <dx-text-box [(ngModel)]=\"item.name\"></dx-text-box>\n                                </div>\n                                <div class=\"px-2 mb-1 w-1/4\">\n                                    <div class=\"text-md mb-2\"> Color</div>\n                                    <dx-color-box [(ngModel)]=\"item.color\"></dx-color-box>\n                                </div>\n                                <div class=\"text-center my-1 w-1/4\">\n                                    <button *ngIf=\"i !== 0\" class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItem(i, 'up')\">\n                                        <i class=\"fa fa-arrow-up\" aria-hidden=\"true\"></i>\n                                    </button>\n                                    <button *ngIf=\"i !== chartConfig.chart_config.length - 1\"\n                                        class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItem(i, 'down')\">\n                                        <i class=\"fa fa-arrow-down\" aria-hidden=\"true\"></i>\n                                    </button>\n\n                                    <button class=\"{{commonService.btn_danger_sm}} cursor-pointer\"\n                                        (click)=\"deleteColumns(i)\"><i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                    </button>\n                                </div>\n                            </div>\n                            <div class=\"flex flex-row justify-end my-2\">\n                                <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\"\n                                    (click)=\"addColumns()\">Add\n                                    Columns</button>\n                            </div>\n                        </div>\n                    </dx-scroll-view>\n                </div>\n                <!-- <div *ngIf=\"activeTab === 'widget'\">\n                    <div class=\"flex flex-wrap justify-between my-2\">\n                        <div class=\"w-1/3 px-1 mb-1\">\n                            <div class=\"text-md mb-2\"> Widget level</div>\n                            <dx-text-box [value]=\"mainChartCourceObject.widget\"\n                                [(ngModel)]=\"mainChartCourceObject.widget\" [readOnly]=\"isEditWidget\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-1 mb-1\">\n                            <div class=\"text-md mb-2\"> Title</div>\n                            <dx-text-box [value]=\"widGetConfig.widgetTitle\"\n                                [(ngModel)]=\"widGetConfig.widgetTitle\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-1 mb-1\">\n                            <div class=\"text-md mb-2\"> Width </div>\n                            <dx-select-box [value]=\"widGetConfig.width\" [items]=\"widget_width\"\n                                [(ngModel)]=\"widGetConfig.width\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-1 mb-1\">\n                            <div class=\"text-md mb-2\"> Display Formate </div>\n                            <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                [(ngModel)]=\"mainChartCourceObject.kpiConfig.formate\"\n                                [readOnly]=\"false\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-1 pt-6 text-center\">\n                            <dx-check-box [value]=\"widGetConfig.display\" [(ngModel)]=\"widGetConfig.display\"\n                                text=\"Display\"></dx-check-box>\n                        </div>\n                    </div>\n\n                </div> -->\n            </div>\n        </ng-container>\n\n\n    </div>\n\n</div>\n\n<div class=\"flex flex-row border-t pl-3\">\n    <div class=\"flex justify-start mx-1\">\n        <button class=\"{{commonService.btn_warning_md}} cursor-pointer mt-2\" (click)=\"isJsonPreview = true\">\n            Preview</button>\n        <button class=\"{{commonService.btn_primary_md}} cursor-pointer mt-2\" (click)=\"isJsonPreview = false\">Data\n            Preview</button>\n    </div>\n    <div class=\"flex justify-end mx-1 flex-grow\">\n        <button class=\"{{commonService.btn_success_md}} cursor-pointer mt-2\"\n            (click)=\"getSaveChartConfig()\">Submit</button>\n    </div>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i6.DxoLabelComponent, selector: "dxo-label", inputs: ["connectorColor", "connectorWidth", "customizeText", "font", "format", "indent", "visible", "horizontalAlignment", "position", "text", "verticalAlignment", "alignment", "customizeHint", "displayMode", "indentFromAxis", "overlappingBehavior", "rotationAngle", "staggeringSpacing", "template", "textOverflow", "wordWrap", "argumentFormat", "backgroundColor", "border", "connector", "displayFormat", "horizontalOffset", "showForZeroValues", "verticalOffset", "hideFirstOrLast", "indentFromTick", "useRangeColors", "location", "showColon", "radialOffset", "topIndent", "shadow", "useNodeColors", "dataField", "enabled"] }, { kind: "component", type: i6.DxoLegendComponent, selector: "dxo-legend", inputs: ["backgroundColor", "border", "columnCount", "columnItemSpacing", "customizeHint", "customizeItems", "customizeText", "font", "horizontalAlignment", "itemsAlignment", "itemTextFormat", "itemTextPosition", "margin", "markerSize", "markerTemplate", "orientation", "paddingLeftRight", "paddingTopBottom", "rowCount", "rowItemSpacing", "title", "verticalAlignment", "visible", "hoverMode", "position"] }, { kind: "component", type: i6.DxoTitleComponent, selector: "dxo-title", inputs: ["font", "horizontalAlignment", "margin", "placeholderSize", "subtitle", "text", "verticalAlignment", "textOverflow", "wordWrap", "alignment"] }, { kind: "component", type: i6.DxoSizeComponent, selector: "dxo-size", inputs: ["height", "width"] }, { kind: "component", type: i6.DxoTooltipComponent, selector: "dxo-tooltip", inputs: ["arrowLength", "border", "color", "container", "contentTemplate", "cornerRadius", "customizeTooltip", "enabled", "font", "format", "interactive", "opacity", "paddingLeftRight", "paddingTopBottom", "shadow", "zIndex", "argumentFormat", "location", "shared", "isShown", "text", "position", "showMode", "customizeLinkTooltip", "customizeNodeTooltip", "linkTooltipTemplate", "nodeTooltipTemplate"] }, { kind: "component", type: i5$1.DxChartComponent, selector: "dx-chart", inputs: ["adaptiveLayout", "adjustOnZoom", "animation", "annotations", "argumentAxis", "autoHidePointMarkers", "barGroupPadding", "barGroupWidth", "commonAnnotationSettings", "commonAxisSettings", "commonPaneSettings", "commonSeriesSettings", "containerBackgroundColor", "crosshair", "customizeAnnotation", "customizeLabel", "customizePoint", "dataPrepareSettings", "dataSource", "defaultPane", "disabled", "elementAttr", "export", "legend", "loadingIndicator", "margin", "maxBubbleSize", "minBubbleSize", "negativesAsZeroes", "palette", "paletteExtensionMode", "panes", "pathModified", "pointSelectionMode", "redrawOnResize", "resizePanesOnZoom", "resolveLabelOverlapping", "rotated", "rtlEnabled", "scrollBar", "series", "seriesSelectionMode", "seriesTemplate", "size", "stickyHovering", "synchronizeMultiAxes", "theme", "title", "tooltip", "valueAxis", "zoomAndPan"], outputs: ["onArgumentAxisClick", "onDisposing", "onDone", "onDrawn", "onExported", "onExporting", "onFileSaving", "onIncidentOccurred", "onInitialized", "onLegendClick", "onOptionChanged", "onPointClick", "onPointHoverChanged", "onPointSelectionChanged", "onSeriesClick", "onSeriesHoverChanged", "onSeriesSelectionChanged", "onTooltipHidden", "onTooltipShown", "onZoomEnd", "onZoomStart", "adaptiveLayoutChange", "adjustOnZoomChange", "animationChange", "annotationsChange", "argumentAxisChange", "autoHidePointMarkersChange", "barGroupPaddingChange", "barGroupWidthChange", "commonAnnotationSettingsChange", "commonAxisSettingsChange", "commonPaneSettingsChange", "commonSeriesSettingsChange", "containerBackgroundColorChange", "crosshairChange", "customizeAnnotationChange", "customizeLabelChange", "customizePointChange", "dataPrepareSettingsChange", "dataSourceChange", "defaultPaneChange", "disabledChange", "elementAttrChange", "exportChange", "legendChange", "loadingIndicatorChange", "marginChange", "maxBubbleSizeChange", "minBubbleSizeChange", "negativesAsZeroesChange", "paletteChange", "paletteExtensionModeChange", "panesChange", "pathModifiedChange", "pointSelectionModeChange", "redrawOnResizeChange", "resizePanesOnZoomChange", "resolveLabelOverlappingChange", "rotatedChange", "rtlEnabledChange", "scrollBarChange", "seriesChange", "seriesSelectionModeChange", "seriesTemplateChange", "sizeChange", "stickyHoveringChange", "synchronizeMultiAxesChange", "themeChange", "titleChange", "tooltipChange", "valueAxisChange", "zoomAndPanChange"] }, { kind: "component", type: i6.DxoArgumentAxisComponent, selector: "dxo-argument-axis", inputs: ["aggregateByCategory", "aggregatedPointsPosition", "aggregationGroupWidth", "aggregationInterval", "allowDecimals", "argumentType", "axisDivisionFactor", "breaks", "breakStyle", "categories", "color", "constantLines", "constantLineStyle", "customPosition", "customPositionAxis", "discreteAxisDivisionMode", "endOnTick", "grid", "holidays", "hoverMode", "inverted", "label", "linearThreshold", "logarithmBase", "maxValueMargin", "minorGrid", "minorTick", "minorTickCount", "minorTickInterval", "minValueMargin", "minVisualRangeLength", "offset", "opacity", "placeholderSize", "position", "singleWorkdays", "strips", "stripStyle", "tick", "tickInterval", "title", "type", "valueMarginsEnabled", "visible", "visualRange", "visualRangeUpdateMode", "wholeRange", "width", "workdaysOnly", "workWeek", "firstPointOnStartAngle", "originValue", "period", "startAngle"], outputs: ["visualRangeChange"] }, { kind: "component", type: i6.DxoCommonSeriesSettingsComponent, selector: "dxo-common-series-settings", inputs: ["aggregation", "area", "argumentField", "axis", "bar", "barOverlapGroup", "barPadding", "barWidth", "border", "bubble", "candlestick", "closeValueField", "color", "cornerRadius", "dashStyle", "fullstackedarea", "fullstackedbar", "fullstackedline", "fullstackedspline", "fullstackedsplinearea", "highValueField", "hoverMode", "hoverStyle", "ignoreEmptyPoints", "innerColor", "label", "line", "lowValueField", "maxLabelCount", "minBarSize", "opacity", "openValueField", "pane", "point", "rangearea", "rangebar", "rangeValue1Field", "rangeValue2Field", "reduction", "scatter", "selectionMode", "selectionStyle", "showInLegend", "sizeField", "spline", "splinearea", "stack", "stackedarea", "stackedbar", "stackedline", "stackedspline", "stackedsplinearea", "steparea", "stepline", "stock", "tagField", "type", "valueErrorBar", "valueField", "visible", "width", "argumentType", "minSegmentSize", "smallValuesGrouping", "closed"] }, { kind: "component", type: i6.DxoConnectorComponent, selector: "dxo-connector", inputs: ["color", "visible", "width", "opacity"] }, { kind: "component", type: i6.DxiSeriesComponent, selector: "dxi-series", inputs: ["aggregation", "argumentField", "axis", "barOverlapGroup", "barPadding", "barWidth", "border", "closeValueField", "color", "cornerRadius", "dashStyle", "highValueField", "hoverMode", "hoverStyle", "ignoreEmptyPoints", "innerColor", "label", "lowValueField", "maxLabelCount", "minBarSize", "name", "opacity", "openValueField", "pane", "point", "rangeValue1Field", "rangeValue2Field", "reduction", "selectionMode", "selectionStyle", "showInLegend", "sizeField", "stack", "tag", "tagField", "type", "valueErrorBar", "valueField", "visible", "width", "argumentType", "minSegmentSize", "smallValuesGrouping", "closed"] }, { kind: "component", type: i6.DxiValueAxisComponent, selector: "dxi-value-axis", inputs: ["aggregatedPointsPosition", "allowDecimals", "autoBreaksEnabled", "axisDivisionFactor", "breaks", "breakStyle", "categories", "color", "constantLines", "constantLineStyle", "customPosition", "discreteAxisDivisionMode", "endOnTick", "grid", "inverted", "label", "linearThreshold", "logarithmBase", "maxAutoBreakCount", "maxValueMargin", "minorGrid", "minorTick", "minorTickCount", "minorTickInterval", "minValueMargin", "minVisualRangeLength", "multipleAxesSpacing", "name", "offset", "opacity", "pane", "placeholderSize", "position", "showZero", "strips", "stripStyle", "synchronizedValue", "tick", "tickInterval", "title", "type", "valueMarginsEnabled", "valueType", "visible", "visualRange", "visualRangeUpdateMode", "wholeRange", "width"], outputs: ["visualRangeChange"] }, { kind: "component", type: i5.DxCheckBoxComponent, selector: "dx-check-box", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "iconSize", "isValid", "name", "readOnly", "rtlEnabled", "tabIndex", "text", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "visible", "width"], outputs: ["onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconSizeChange", "isValidChange", "nameChange", "readOnlyChange", "rtlEnabledChange", "tabIndexChange", "textChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "component", type: i6$2.DxColorBoxComponent, selector: "dx-color-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "applyButtonText", "applyValueMode", "buttons", "cancelButtonText", "deferRendering", "disabled", "dropDownButtonTemplate", "dropDownOptions", "editAlphaChannel", "elementAttr", "fieldTemplate", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "keyStep", "label", "labelMode", "name", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showDropDownButton", "stylingMode", "tabIndex", "text", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "visible", "width"], outputs: ["onChange", "onClosed", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOpened", "onOptionChanged", "onPaste", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "applyButtonTextChange", "applyValueModeChange", "buttonsChange", "cancelButtonTextChange", "deferRenderingChange", "disabledChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "editAlphaChannelChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "keyStepChange", "labelChange", "labelModeChange", "nameChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showDropDownButtonChange", "stylingModeChange", "tabIndexChange", "textChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "component", type: i8$2.DxPieChartComponent, selector: "dx-pie-chart", inputs: ["adaptiveLayout", "animation", "annotations", "centerTemplate", "commonAnnotationSettings", "commonSeriesSettings", "customizeAnnotation", "customizeLabel", "customizePoint", "dataSource", "diameter", "disabled", "elementAttr", "export", "innerRadius", "legend", "loadingIndicator", "margin", "minDiameter", "palette", "paletteExtensionMode", "pathModified", "pointSelectionMode", "redrawOnResize", "resolveLabelOverlapping", "rtlEnabled", "segmentsDirection", "series", "seriesTemplate", "size", "sizeGroup", "startAngle", "theme", "title", "tooltip", "type"], outputs: ["onDisposing", "onDone", "onDrawn", "onExported", "onExporting", "onFileSaving", "onIncidentOccurred", "onInitialized", "onLegendClick", "onOptionChanged", "onPointClick", "onPointHoverChanged", "onPointSelectionChanged", "onTooltipHidden", "onTooltipShown", "adaptiveLayoutChange", "animationChange", "annotationsChange", "centerTemplateChange", "commonAnnotationSettingsChange", "commonSeriesSettingsChange", "customizeAnnotationChange", "customizeLabelChange", "customizePointChange", "dataSourceChange", "diameterChange", "disabledChange", "elementAttrChange", "exportChange", "innerRadiusChange", "legendChange", "loadingIndicatorChange", "marginChange", "minDiameterChange", "paletteChange", "paletteExtensionModeChange", "pathModifiedChange", "pointSelectionModeChange", "redrawOnResizeChange", "resolveLabelOverlappingChange", "rtlEnabledChange", "segmentsDirectionChange", "seriesChange", "seriesTemplateChange", "sizeChange", "sizeGroupChange", "startAngleChange", "themeChange", "titleChange", "tooltipChange", "typeChange"] }, { kind: "component", type: i10.DxScrollViewComponent, selector: "dx-scroll-view", inputs: ["bounceEnabled", "direction", "disabled", "elementAttr", "height", "pulledDownText", "pullingDownText", "reachBottomText", "refreshingText", "rtlEnabled", "scrollByContent", "scrollByThumb", "showScrollbar", "useNative", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onPullDown", "onReachBottom", "onScroll", "onUpdated", "bounceEnabledChange", "directionChange", "disabledChange", "elementAttrChange", "heightChange", "pulledDownTextChange", "pullingDownTextChange", "reachBottomTextChange", "refreshingTextChange", "rtlEnabledChange", "scrollByContentChange", "scrollByThumbChange", "showScrollbarChange", "useNativeChange", "widthChange"] }, { kind: "component", type: i6$1.DxSelectBoxComponent, selector: "dx-select-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "buttons", "dataSource", "deferRendering", "disabled", "displayExpr", "displayValue", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "fieldTemplate", "focusStateEnabled", "grouped", "groupTemplate", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "items", "itemTemplate", "label", "labelMode", "maxLength", "minSearchLength", "name", "noDataText", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "searchEnabled", "searchExpr", "searchMode", "searchTimeout", "selectedItem", "showClearButton", "showDataBeforeSearch", "showDropDownButton", "showSelectionControls", "spellcheck", "stylingMode", "tabIndex", "text", "useItemTextAsTitle", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueChangeEvent", "valueExpr", "visible", "width", "wrapItemText"], outputs: ["onChange", "onClosed", "onContentReady", "onCopy", "onCustomItemCreating", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onItemClick", "onKeyDown", "onKeyUp", "onOpened", "onOptionChanged", "onPaste", "onSelectionChanged", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "dataSourceChange", "deferRenderingChange", "disabledChange", "displayExprChange", "displayValueChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "groupedChange", "groupTemplateChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "itemsChange", "itemTemplateChange", "labelChange", "labelModeChange", "maxLengthChange", "minSearchLengthChange", "nameChange", "noDataTextChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "searchEnabledChange", "searchExprChange", "searchModeChange", "searchTimeoutChange", "selectedItemChange", "showClearButtonChange", "showDataBeforeSearchChange", "showDropDownButtonChange", "showSelectionControlsChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useItemTextAsTitleChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "valueExprChange", "visibleChange", "widthChange", "wrapItemTextChange", "onBlur"] }, { kind: "component", type: i7.DxTextBoxComponent, selector: "dx-text-box", inputs: ["accessKey", "activeStateEnabled", "buttons", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "label", "labelMode", "mask", "maskChar", "maskInvalidMessage", "maskRules", "maxLength", "mode", "name", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showMaskMode", "spellcheck", "stylingMode", "tabIndex", "text", "useMaskedValue", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOptionChanged", "onPaste", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "labelChange", "labelModeChange", "maskChange", "maskCharChange", "maskInvalidMessageChange", "maskRulesChange", "maxLengthChange", "modeChange", "nameChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showMaskModeChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useMaskedValueChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i13.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i4$1.JsonPipe, name: "json" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DashChartComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-dash-chart', template: "<div class=\"mx-2\">\n    <div class=\"w-full m-2 border\">\n        <ng-container *ngIf=\"!isJsonPreview\">\n            <pre><code>{{jsaonDatasource | json}}</code></pre>\n        </ng-container>\n        <ng-container *ngIf=\"isJsonPreview\">\n            <ng-container *ngIf=\"chartType == 'doughnut'\">\n                <div\n                    class=\"m-3 p-4 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700\">\n                    <!-- <h6 class=\"mb-1 text-md font-bold tracking-tight text-gray-900 dark:text-white border-b pb-3\">\n                        {{widGetConfig.widgetTitle}}\n                    </h6> -->\n                    <dx-pie-chart id=\"pie\" type=\"doughnut\" [title]=\"{ text: chartConfig.caption, font: { size: 14 } }\"\n                        palette=\"Soft Pastel\" [dataSource]=\"dataSourseForChart\" centerTemplate=\"centerTemplate\"\n                        (onPointClick)=\"pointClickHandler($event)\" [palette]=\"chartConfig.palette\">\n\n                        <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n                            <ng-container *ngIf=\"item.color\">\n                                <dxi-series argumentField={{chartConfig.argumentField}} valueField=\"{{item.valueField}}\"\n                                    name=\"{{item.name}}\" color=\"{{item.color}}\">\n                                    <dxo-label [visible]=\"chartConfig.labelDisplay\" format=\"#,##0.##\">\n                                        <dxo-connector [visible]=\"true\"></dxo-connector>\n                                    </dxo-label>\n                                </dxi-series>\n                            </ng-container>\n                            <ng-container *ngIf=\"!item.color\">\n                                <dxi-series argumentField={{chartConfig.argumentField}} valueField=\"{{item.valueField}}\"\n                                    name=\"{{item.name}}\">\n                                    <dxo-label [visible]=\"chartConfig.labelDisplay\" format=\"#,##0.##\">\n                                        <dxo-connector [visible]=\"true\"></dxo-connector>\n                                    </dxo-label>\n                                </dxi-series>\n                            </ng-container>\n                        </ng-container>\n                        <dxo-legend [visible]=\"chartConfig.legendDisplay\"\n                            horizontalAlignment=\"{{chartConfig.horizontalAlignment}}\"\n                            verticalAlignment=\"{{chartConfig.verticalAlignment}}\"></dxo-legend>\n                        <!-- <dxo-export [enabled]=\"true\"></dxo-export> -->\n                        <dxo-tooltip [enabled]=\"true\" [customizeTooltip]=\"customizeTooltip\" format=\"#,##0.##\">\n                        </dxo-tooltip>\n                        <svg *dxTemplate=\"let pieChart of 'centerTemplate'\">\n                            <circle cx=\"100\" cy=\"100\" [attr.r]=\"pieChart.getInnerRadius() - 6\" fill=\"gray\"\n                                opacity=\"0.0001\">\n                            </circle>\n\n                            <text text-anchor=\"middle\" style=\"font-size: 28px\" x=\"100\" y=\"100\" fill=\"#eee\">\n                                <tspan x=\"100\">{{ calculateTotal(pieChart) }}</tspan>\n                                <!-- display: inline -->\n                                <!-- <tspan x=\"100\" dy=\"20px\" style=\"font-weight: 600\"></tspan> -->\n                            </text>\n                        </svg>\n                    </dx-pie-chart>\n                </div>\n            </ng-container>\n            <ng-container *ngIf=\"chartType !== 'doughnut' && chartType !== 'funnel' && chartType !== 'bubble'\">\n                <div\n                    class=\"m-3 p-4 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700\">\n                    <!-- <h6 class=\"mb-1 text-md font-bold tracking-tight text-gray-900 dark:text-white border-b pb-3\">\n                        {{widGetConfig.widgetTitle}}\n                    </h6> -->\n                    <dx-chart id=\"chart\" [dataSource]=\"dataSourseForChart\"\n                        [title]=\"{ text: chartConfig.caption, font: { size: 14 } }\"\n                        [valueAxis]=\"chartConfig.valueAxisConfig\">\n                        <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n                            <ng-container *ngIf=\"item.axis\">\n                                <dxi-value-axis [name]=\"item.axis\" [position]=\"item.position\">\n                                    <dxo-title [text]=\"item.name\"></dxo-title>\n                                </dxi-value-axis>\n                            </ng-container>\n                        </ng-container>\n                        <dxo-argument-axis>\n                            <dxo-label overlappingBehavior=\"rotate\" [rotationAngle]=\"270\"></dxo-label>\n                        </dxo-argument-axis>\n                        <dxo-tooltip [enabled]=\"true\" [shared]=\"true\"></dxo-tooltip>\n                        <dxo-common-series-settings\n                            [argumentField]=\"chartConfig.argumentField\"></dxo-common-series-settings>\n                        <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n                            <ng-container *ngIf=\"item.color\">\n                                <dxi-series type=\"{{item.type}}\" valueField=\"{{item.valueField}}\" axis=\"{{item.axis}}\"\n                                    name=\"{{item.name}}\" color=\"{{item.color}}\">\n                                </dxi-series>\n                            </ng-container>\n                            <ng-container *ngIf=\"!item.color\">\n                                <dxi-series type=\"{{item.type}}\" valueField=\"{{item.valueField}}\" axis=\"{{item.axis}}\"\n                                    name=\"{{item.name}}\">\n                                </dxi-series>\n                            </ng-container>\n\n                        </ng-container>\n                        <dxo-size [height]=\"chartConfig.size\"></dxo-size>\n                        <dxo-legend [visible]=\"chartConfig.legendDisplay\"\n                            [verticalAlignment]=\"chartConfig.verticalAlignment\"\n                            [horizontalAlignment]=\"chartConfig.horizontalAlignment\"></dxo-legend>\n                    </dx-chart>\n                </div>\n            </ng-container>\n\n            <ng-container *ngIf=\"chartType == 'funnel'\">\n\n            </ng-container>\n            <ng-container *ngIf=\"chartType == 'bubble'\">\n                <div class=\"mx-5\">\n                    <ng-container *ngFor=\"let item of heatChartDataSource.dataSet\">\n                        <div class=\"flex flex-row\">\n                            <div class=\"h-10 text-sm items-center min-w-24 max-w-[30%] justify-center flex\">\n                                {{item.datasource}}\n                            </div>\n                            <div class=\"inline-block \">\n                                <div class=\"flex flex-nowrap justify-center \">\n                                    <ng-container *ngFor=\"let box of item.dataset\">\n                                        <div class=\"flex-shrink-0 min-w-10 max-w-[20%] h-10 text-sm cursor-pointer flex items-center justify-center text-gray-800\"\n                                            [matTooltip]=\"'Record Date: ' + box.recordDate + '\\nRecharge Count: ' + box.toolTip\"\n                                            matTooltipClass=\"custom-tooltip\">\n                                            <div class=\"rounded-full\" [ngStyle]=\"{\n                                        'background-color': box.isHovered ? 'rgb(135, 184, 106)' : box.color,\n                                        'width.px': box.size,\n                                        'hover': box.hover,\n                                        'height.px': box.size\n                                      }\" (mouseenter)=\"box.isHovered = true\" (mouseleave)=\"box.isHovered = false\">\n                                            </div>\n                                        </div>\n                                    </ng-container>\n                                </div>\n                            </div>\n                        </div>\n                    </ng-container>\n                    <div class=\"inline-block\">\n                        <div class=\"flex flex-nowrap justify-center\">\n                            <div class=\"flex-shrink-0 w-24 max-w-[20%] h-full flex items-center justify-center\"></div>\n                            <div *ngFor=\"let item of heatChartDataSource.argumentValue\"\n                                class=\"flex-shrink-0 w-10 max-w-[20%] min-h-14 flex text-sm items-center justify-center my-1\"\n                                [ngStyle]=\"{'height': 'auto'}\">\n                                <span class=\"text-rotate\">\n                                    {{item}}\n                                </span>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </ng-container>\n\n        </ng-container>\n\n    </div>\n    <div class=\"w-full m-2 border\">\n        <div class=\"flex flex-row mb-1\">\n            <div class=\"w-1/3 mx-1\">\n                <dx-select-box [dataSource]=\"chartAxisSource\" [(ngModel)]=\"chartAccess\" placeholder=\"Chart Type\"\n                    displayExpr=\"name\" valueExpr=\"value\" (onValueChanged)=\"getChartAccessType($event)\">\n                </dx-select-box>\n            </div>\n            <div class=\"w-1/3 mx-1\">\n                <ng-container *ngIf=\"chartAccess == 'single'\">\n                    <dx-select-box [items]=\"chartTypeSource\" (onValueChanged)=\"getChartType($event)\"\n                        [(ngModel)]=\"chartType\"></dx-select-box>\n                </ng-container>\n                <ng-container *ngIf=\"chartAccess == 'multy'\">\n                    <dx-select-box [items]=\"componentNamesForMultyAccess\" displayExpr=\"item\" valueExpr=\"compName\"\n                        [(ngModel)]=\"componentName\"></dx-select-box>\n                </ng-container>\n            </div>\n        </div>\n        <ng-container *ngIf=\"chartAccess == 'single'\">\n\n            <div class=\"mb-4 border-b border-gray-200 dark:border-gray-700\">\n                <ul class=\"flex flex-wrap -mb-px text-sm font-medium text-center\" role=\"tablist\">\n                    <li class=\"me-2\" role=\"presentation\">\n                        <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'basic',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'basic'\n                            }\" (click)=\"setActiveTab('basic')\" type=\"button\" role=\"tab\">\n                            Basic\n                        </button>\n                    </li>\n                    <li class=\"me-2\" role=\"presentation\">\n                        <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'columns',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'columns'\n                            }\" (click)=\"setActiveTab('columns')\" type=\"button\" role=\"tab\">\n                            Columns\n                        </button>\n                    </li>\n                    <!-- <li class=\"me-2\" role=\"presentation\">\n                        <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'widget',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'widget'\n                            }\" (click)=\"setActiveTab('widget')\" type=\"button\" role=\"tab\">\n                            Widget\n                        </button>\n                    </li> -->\n                </ul>\n            </div>\n\n            <div id=\"default-styled-tab-content\">\n                <div *ngIf=\"activeTab === 'basic'\">\n                    <div class=\"flex flex-wrap justify-between my-2\">\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1 \">Legend Horizontal Alignment</div>\n                            <dx-select-box [searchEnabled]=\"true\" [items]=\"['right','left','center']\"\n                                [(ngModel)]=\"chartConfig.horizontalAlignment\"></dx-select-box>\n\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Legend Vertical Alignment</div>\n                            <dx-select-box [searchEnabled]=\"true\" [items]=\"['top','bottom']\"\n                                [(ngModel)]=\"chartConfig.verticalAlignment\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1 mt-8\"></div>\n                            <dx-check-box [(ngModel)]=\"chartConfig.legendDisplay\" text=\"Legend Display\"></dx-check-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Argument Field</div>\n                            <dx-select-box [items]=\"configColume\"\n                                [(ngModel)]=\"chartConfig.argumentField\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Size</div>\n                            <dx-text-box [(ngModel)]=\"chartConfig.size\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Caption</div>\n                            <dx-text-box [(ngModel)]=\"chartConfig.caption\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2\"> Display Formate </div>\n                            <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                [(ngModel)]=\"mainChartCourceObject.kpiConfig.formate\"\n                                [readOnly]=\"false\"></dx-select-box>\n                        </div>\n                        <div class=\"w-2/3 px-2 mt-2\" *ngIf=\"chartType == 'doughnut'\">\n                            <div class=\" flex flex-row\">\n                                <div class=\"mr-2\">\n                                    <div class=\"text-md mb-1\"> Color Palette</div>\n                                    <dx-select-box [items]=\"doughnut_color_palette\"\n                                        [(ngModel)]=\"chartConfig.palette\"></dx-select-box>\n                                </div>\n                                <div class=\"mt-5\">\n                                    <dx-check-box [value]=\"chartConfig.labelDisplay\"\n                                        [(ngModel)]=\"chartConfig.labelDisplay\" text=\"Label Display\"></dx-check-box>\n                                </div>\n                            </div>\n\n\n                        </div>\n                        <div class=\"w-2/3 px-2 mt-2\" *ngIf=\"chartType == 'bubble'\">\n                            <div class=\" flex flex-row\">\n                                <div class=\"mr-2\">\n                                    <div class=\"text-md mb-1\"> Source Field</div>\n                                    <dx-select-box [items]=\"configColume\"\n                                        [(ngModel)]=\"chartConfig.sourceField\"></dx-select-box>\n                                </div>\n                                <div class=\"mr-2\">\n                                    <div class=\"text-md mb-1\"> Min Bubble Size</div>\n                                    <dx-text-box [(ngModel)]=\"chartConfig.minBubbleSize\"></dx-text-box>\n                                </div>\n                                <div class=\"mr-2\">\n                                    <div class=\"text-md mb-1\"> Max bubble size</div>\n                                    <dx-text-box [(ngModel)]=\"chartConfig.maxBubbleSize\"></dx-text-box>\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\" *ngIf=\"chartType == 'doughnut'\">\n\n                        </div>\n\n                    </div>\n                </div>\n                <div *ngIf=\"activeTab === 'columns'\">\n                    <div class=\"h-60 overflow-x-auto\">\n                        <div class=\" border-x border-b \">\n                            <div class=\"py-1 flex flex-row border-b\"\n                                *ngFor=\"let item of chartConfig.chart_config; let i = index\">\n\n                                <div class=\"px-1 mb-1 w-1/3\">\n                                    <div class=\"text-md mb-1\"> Value Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"item.valueField\"></dx-select-box>\n                                </div>\n\n                                <div class=\"px-1 mb-1 w-1/4\" *ngIf=\"chartType !== 'doughnut'\">\n                                    <div class=\"text-md mb-1\"> Axis</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"item.axis\"></dx-select-box>\n                                </div>\n                                <div class=\" px-2 mb-1 w-1/3\">\n                                    <div class=\"text-md mb-1\"> Position</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"['right','left']\"\n                                        [(ngModel)]=\"item.position\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-1/4\">\n                                    <div class=\"text-md mb-1\"> Name</div>\n                                    <dx-text-box [(ngModel)]=\"item.name\"></dx-text-box>\n                                </div>\n                                <div class=\"text-center mt-6 w-1/6\">\n                                    <button *ngIf=\"i !== 0\" class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItem(i, 'up')\">\n                                        <i class=\"fa fa-arrow-up\" aria-hidden=\"true\"></i>\n                                    </button>\n                                    <button *ngIf=\"i !== chartConfig.chart_config.length - 1\"\n                                        class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItem(i, 'down')\">\n                                        <i class=\"fa fa-arrow-down\" aria-hidden=\"true\"></i>\n                                    </button>\n\n                                    <button class=\"{{commonService.btn_danger_sm}} cursor-pointer\"\n                                        (click)=\"deleteColumns(i)\"><i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                    </button>\n                                </div>\n                            </div>\n                            <div class=\"flex flex-row justify-end my-2\" *ngIf=\"chartType == 'doughnut'\">\n                                <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\"\n                                    (click)=\"addColumns()\">Add\n                                    Series</button>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <!-- <div *ngIf=\"activeTab === 'widget'\">\n                    <div class=\"flex flex-wrap justify-between my-2\">\n                        <div class=\"w-1/3 px-1 mb-1\">\n                            <div class=\"text-md mb-2\"> Widget level</div>\n                            <dx-text-box [value]=\"mainChartCourceObject.widget\"\n                                [(ngModel)]=\"mainChartCourceObject.widget\" [readOnly]=\"isEditWidget\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-1 mb-1\">\n                            <div class=\"text-md mb-2\"> Title</div>\n                            <dx-text-box [value]=\"widGetConfig.widgetTitle\"\n                                [(ngModel)]=\"widGetConfig.widgetTitle\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-1 mb-1\">\n                            <div class=\"text-md mb-2\"> Width </div>\n                            <dx-select-box [value]=\"widGetConfig.width\" [items]=\"widget_width\"\n                                [(ngModel)]=\"widGetConfig.width\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-1 mb-1\">\n                            <div class=\"text-md mb-2\"> Display Formate </div>\n                            <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                [(ngModel)]=\"mainChartCourceObject.kpiConfig.formate\"\n                                [readOnly]=\"false\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-1 pt-6 text-center\">\n                            <dx-check-box [value]=\"widGetConfig.display\" [(ngModel)]=\"widGetConfig.display\"\n                                text=\"Display\"></dx-check-box>\n                        </div>\n                    </div>\n\n                </div> -->\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"chartAccess == 'multy'\">\n            <div class=\"mb-4 border-b border-gray-200 dark:border-gray-700\">\n                <ul class=\"flex flex-wrap -mb-px text-sm font-medium text-center\" role=\"tablist\">\n                    <li class=\"me-2\" role=\"presentation\">\n                        <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'basic',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'basic'\n                            }\" (click)=\"setActiveTab('basic')\" type=\"button\" role=\"tab\">\n                            Basic\n                        </button>\n                    </li>\n                    <li class=\"me-2\" role=\"presentation\">\n                        <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'columns',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'columns'\n                            }\" (click)=\"setActiveTab('columns')\" type=\"button\" role=\"tab\">\n                            Columns\n                        </button>\n                    </li>\n                    <!-- <li class=\"me-2\" role=\"presentation\">\n                        <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'widget',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'widget'\n                            }\" (click)=\"setActiveTab('widget')\" type=\"button\" role=\"tab\">\n                            Widget\n                        </button>\n                    </li> -->\n                </ul>\n            </div>\n\n            <div id=\"default-styled-tab-content\">\n                <div *ngIf=\"activeTab === 'basic'\">\n                    <div class=\"flex flex-wrap justify-between my-2\">\n                        <div class=\"w-1/3 px-2\">\n                            <div class=\"text-md mb-1\">Legend Horizontal Alignment</div>\n                            <dx-select-box [searchEnabled]=\"true\" [items]=\"['right','left','center']\" [value]=\"'center'\"\n                                [(ngModel)]=\"chartConfig.horizontalAlignment\"></dx-select-box>\n\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> legent Vertical Alignment</div>\n                            <dx-select-box [searchEnabled]=\"true\" [items]=\"['top','bottom']\" [value]=\"'bottom'\"\n                                [(ngModel)]=\"chartConfig.verticalAlignment\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1 mt-8\"></div>\n                            <dx-check-box [(ngModel)]=\"chartConfig.legendDisplay\" text=\"Legend Display\"></dx-check-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Argument Field</div>\n                            <dx-select-box [items]=\"configColume\"\n                                [(ngModel)]=\"chartConfig.argumentField\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Size</div>\n                            <dx-text-box [(ngModel)]=\"chartConfig.size\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Caption</div>\n                            <dx-text-box [(ngModel)]=\"chartConfig.caption\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2\"> Display Formate </div>\n                            <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                [(ngModel)]=\"mainChartCourceObject.kpiConfig.formate\"\n                                [readOnly]=\"false\"></dx-select-box>\n                        </div>\n                    </div>\n                </div>\n                <div *ngIf=\"activeTab === 'columns'\">\n                    <dx-scroll-view class=\"h-full\" [width]=\"'100%'\" [height]=\"'100%'\">\n                        <div class=\" border-x border-b \">\n                            <div class=\"py-1 flex flex-wrap border-b\"\n                                *ngFor=\"let item of chartConfig.chart_config; let i = index;\">\n\n                                <div class=\"px-2 mb-1 w-1/3\">\n                                    <div class=\"text-md mb-2\"> Type</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"chartTypeSource\" [value]=\"'spline'\"\n                                        [(ngModel)]=\"item.type\"></dx-select-box>\n                                </div>\n                                <div class=\"px-2 mb-1 w-1/3\">\n                                    <div class=\"text-md mb-1\"> Value Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"item.valueField\"></dx-select-box>\n                                </div>\n\n                                <div class=\"px-2 mb-1 w-1/3\">\n                                    <div class=\"text-md mb-1\"> Axis</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"item.axis\"></dx-select-box>\n                                </div>\n                                <div class=\" px-2 mb-1 w-1/4\">\n                                    <div class=\"text-md mb-1\"> Position</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"['right','left']\"\n                                        [(ngModel)]=\"item.position\"></dx-select-box>\n                                </div>\n                                <div class=\"px-2 mb-1 w-1/4\">\n                                    <div class=\"text-md mb-1\"> Name</div>\n                                    <dx-text-box [(ngModel)]=\"item.name\"></dx-text-box>\n                                </div>\n                                <div class=\"px-2 mb-1 w-1/4\">\n                                    <div class=\"text-md mb-2\"> Color</div>\n                                    <dx-color-box [(ngModel)]=\"item.color\"></dx-color-box>\n                                </div>\n                                <div class=\"text-center my-1 w-1/4\">\n                                    <button *ngIf=\"i !== 0\" class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItem(i, 'up')\">\n                                        <i class=\"fa fa-arrow-up\" aria-hidden=\"true\"></i>\n                                    </button>\n                                    <button *ngIf=\"i !== chartConfig.chart_config.length - 1\"\n                                        class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItem(i, 'down')\">\n                                        <i class=\"fa fa-arrow-down\" aria-hidden=\"true\"></i>\n                                    </button>\n\n                                    <button class=\"{{commonService.btn_danger_sm}} cursor-pointer\"\n                                        (click)=\"deleteColumns(i)\"><i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                    </button>\n                                </div>\n                            </div>\n                            <div class=\"flex flex-row justify-end my-2\">\n                                <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\"\n                                    (click)=\"addColumns()\">Add\n                                    Columns</button>\n                            </div>\n                        </div>\n                    </dx-scroll-view>\n                </div>\n                <!-- <div *ngIf=\"activeTab === 'widget'\">\n                    <div class=\"flex flex-wrap justify-between my-2\">\n                        <div class=\"w-1/3 px-1 mb-1\">\n                            <div class=\"text-md mb-2\"> Widget level</div>\n                            <dx-text-box [value]=\"mainChartCourceObject.widget\"\n                                [(ngModel)]=\"mainChartCourceObject.widget\" [readOnly]=\"isEditWidget\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-1 mb-1\">\n                            <div class=\"text-md mb-2\"> Title</div>\n                            <dx-text-box [value]=\"widGetConfig.widgetTitle\"\n                                [(ngModel)]=\"widGetConfig.widgetTitle\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-1 mb-1\">\n                            <div class=\"text-md mb-2\"> Width </div>\n                            <dx-select-box [value]=\"widGetConfig.width\" [items]=\"widget_width\"\n                                [(ngModel)]=\"widGetConfig.width\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-1 mb-1\">\n                            <div class=\"text-md mb-2\"> Display Formate </div>\n                            <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                [(ngModel)]=\"mainChartCourceObject.kpiConfig.formate\"\n                                [readOnly]=\"false\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-1 pt-6 text-center\">\n                            <dx-check-box [value]=\"widGetConfig.display\" [(ngModel)]=\"widGetConfig.display\"\n                                text=\"Display\"></dx-check-box>\n                        </div>\n                    </div>\n\n                </div> -->\n            </div>\n        </ng-container>\n\n\n    </div>\n\n</div>\n\n<div class=\"flex flex-row border-t pl-3\">\n    <div class=\"flex justify-start mx-1\">\n        <button class=\"{{commonService.btn_warning_md}} cursor-pointer mt-2\" (click)=\"isJsonPreview = true\">\n            Preview</button>\n        <button class=\"{{commonService.btn_primary_md}} cursor-pointer mt-2\" (click)=\"isJsonPreview = false\">Data\n            Preview</button>\n    </div>\n    <div class=\"flex justify-end mx-1 flex-grow\">\n        <button class=\"{{commonService.btn_success_md}} cursor-pointer mt-2\"\n            (click)=\"getSaveChartConfig()\">Submit</button>\n    </div>\n</div>" }]
+            args: [{ selector: 'app-dash-chart', template: "<div class=\"mx-2\">\n    <div class=\"w-full m-2 border\">\n        <ng-container *ngIf=\"!isJsonPreview\">\n            <pre><code>{{jsaonDatasource | json}}</code></pre>\n        </ng-container>\n        <ng-container *ngIf=\"isJsonPreview\">\n            <ng-container *ngIf=\"chartType == 'doughnut' || chartType == 'pie'\">\n                <div\n                    class=\"m-3 p-4 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700\">\n                    <!-- <h6 class=\"mb-1 text-md font-bold tracking-tight text-gray-900 dark:text-white border-b pb-3\">\n                        {{widGetConfig.widgetTitle}}\n                    </h6> -->\n                    <dx-pie-chart id=\"pie\" [type]=\"chartType\" [title]=\"{ text: chartConfig.caption, font: { size: 14 } }\"\n                        palette=\"Soft Pastel\" [dataSource]=\"dataSourseForChart\" centerTemplate=\"centerTemplate\"\n                        (onPointClick)=\"pointClickHandler($event)\" [palette]=\"chartConfig.palette\">\n\n                        <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n                            <ng-container *ngIf=\"item.color\">\n                                <dxi-series argumentField={{chartConfig.argumentField}} valueField=\"{{item.valueField}}\"\n                                    name=\"{{item.name}}\" color=\"{{item.color}}\">\n                                    <dxo-label [visible]=\"chartConfig.labelDisplay\" format=\"#,##0.##\">\n                                        <dxo-connector [visible]=\"true\"></dxo-connector>\n                                    </dxo-label>\n                                </dxi-series>\n                            </ng-container>\n                            <ng-container *ngIf=\"!item.color\">\n                                <dxi-series argumentField={{chartConfig.argumentField}} valueField=\"{{item.valueField}}\"\n                                    name=\"{{item.name}}\">\n                                    <dxo-label [visible]=\"chartConfig.labelDisplay\" format=\"#,##0.##\">\n                                        <dxo-connector [visible]=\"true\"></dxo-connector>\n                                    </dxo-label>\n                                </dxi-series>\n                            </ng-container>\n                        </ng-container>\n                        <dxo-legend [visible]=\"chartConfig.legendDisplay\"\n                            horizontalAlignment=\"{{chartConfig.horizontalAlignment}}\"\n                            verticalAlignment=\"{{chartConfig.verticalAlignment}}\"></dxo-legend>\n                        <!-- <dxo-export [enabled]=\"true\"></dxo-export> -->\n                        <dxo-tooltip [enabled]=\"true\" [customizeTooltip]=\"customizeTooltip\" format=\"#,##0.##\">\n                        </dxo-tooltip>\n                        <ng-container *ngIf=\"chartType == 'doughnut'\">\n                            <svg *dxTemplate=\"let pieChart of 'centerTemplate'\">\n                                <circle cx=\"100\" cy=\"100\" [attr.r]=\"pieChart.getInnerRadius() - 6\" fill=\"gray\"\n                                    opacity=\"0.0001\">\n                                </circle>\n    \n                                <text text-anchor=\"middle\" style=\"font-size: 28px\" x=\"100\" y=\"100\" fill=\"#eee\">\n                                    <tspan x=\"100\">{{ calculateTotal(pieChart) }}</tspan>\n                                    <!-- display: inline -->\n                                    <!-- <tspan x=\"100\" dy=\"20px\" style=\"font-weight: 600\"></tspan> -->\n                                </text>\n                            </svg>\n                        </ng-container>\n                       \n                    </dx-pie-chart>\n                </div>\n            </ng-container>\n            <ng-container *ngIf=\"chartType !== 'doughnut' && chartType !== 'funnel' && chartType !== 'bubble' && chartType !== 'pie'\">\n                <div\n                    class=\"m-3 p-4 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700\">\n                    <!-- <h6 class=\"mb-1 text-md font-bold tracking-tight text-gray-900 dark:text-white border-b pb-3\">\n                        {{widGetConfig.widgetTitle}}\n                    </h6> -->\n                    <dx-chart id=\"chart\" [dataSource]=\"dataSourseForChart\"\n                        [title]=\"{ text: chartConfig.caption, font: { size: 14 } }\"\n                        [valueAxis]=\"chartConfig.valueAxisConfig\">\n                        <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n                            <ng-container *ngIf=\"item.axis\">\n                                <dxi-value-axis [name]=\"item.axis\" [position]=\"item.position\">\n                                    <dxo-title [text]=\"item.name\"></dxo-title>\n                                </dxi-value-axis>\n                            </ng-container>\n                        </ng-container>\n                        <dxo-argument-axis>\n                            <dxo-label overlappingBehavior=\"rotate\" [rotationAngle]=\"270\"></dxo-label>\n                        </dxo-argument-axis>\n                        <dxo-tooltip [enabled]=\"true\" [shared]=\"true\"></dxo-tooltip>\n                        <dxo-common-series-settings\n                            [argumentField]=\"chartConfig.argumentField\"></dxo-common-series-settings>\n                        <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n                            <ng-container *ngIf=\"item.color\">\n                                <dxi-series type=\"{{item.type}}\" valueField=\"{{item.valueField}}\" axis=\"{{item.axis}}\"\n                                    name=\"{{item.name}}\" color=\"{{item.color}}\">\n                                </dxi-series>\n                            </ng-container>\n                            <ng-container *ngIf=\"!item.color\">\n                                <dxi-series type=\"{{item.type}}\" valueField=\"{{item.valueField}}\" axis=\"{{item.axis}}\"\n                                    name=\"{{item.name}}\">\n                                </dxi-series>\n                            </ng-container>\n\n                        </ng-container>\n                        <dxo-size [height]=\"chartConfig.size\"></dxo-size>\n                        <dxo-legend [visible]=\"chartConfig.legendDisplay\"\n                            [verticalAlignment]=\"chartConfig.verticalAlignment\"\n                            [horizontalAlignment]=\"chartConfig.horizontalAlignment\"></dxo-legend>\n                    </dx-chart>\n                </div>\n            </ng-container>\n\n            <ng-container *ngIf=\"chartType == 'funnel'\">\n\n            </ng-container>\n            <ng-container *ngIf=\"chartType == 'bubble'\">\n                <div class=\"mx-5\">\n                    <ng-container *ngFor=\"let item of heatChartDataSource.dataSet\">\n                        <div class=\"flex flex-row\">\n                            <div class=\"h-10 text-sm items-center min-w-24 max-w-[30%] justify-center flex\">\n                                {{item.datasource}}\n                            </div>\n                            <div class=\"inline-block \">\n                                <div class=\"flex flex-nowrap justify-center \">\n                                    <ng-container *ngFor=\"let box of item.dataset\">\n                                        <div class=\"flex-shrink-0 min-w-10 max-w-[20%] h-10 text-sm cursor-pointer flex items-center justify-center text-gray-800\"\n                                            [matTooltip]=\"'Record Date: ' + box.recordDate + '\\nRecharge Count: ' + box.toolTip\"\n                                            matTooltipClass=\"custom-tooltip\">\n                                            <div class=\"rounded-full\" [ngStyle]=\"{\n                                        'background-color': box.isHovered ? 'rgb(135, 184, 106)' : box.color,\n                                        'width.px': box.size,\n                                        'hover': box.hover,\n                                        'height.px': box.size\n                                      }\" (mouseenter)=\"box.isHovered = true\" (mouseleave)=\"box.isHovered = false\">\n                                            </div>\n                                        </div>\n                                    </ng-container>\n                                </div>\n                            </div>\n                        </div>\n                    </ng-container>\n                    <div class=\"inline-block\">\n                        <div class=\"flex flex-nowrap justify-center\">\n                            <div class=\"flex-shrink-0 w-24 max-w-[20%] h-full flex items-center justify-center\"></div>\n                            <div *ngFor=\"let item of heatChartDataSource.argumentValue\"\n                                class=\"flex-shrink-0 w-10 max-w-[20%] min-h-14 flex text-sm items-center justify-center my-1\"\n                                [ngStyle]=\"{'height': 'auto'}\">\n                                <span class=\"text-rotate\">\n                                    {{item}}\n                                </span>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </ng-container>\n\n        </ng-container>\n\n    </div>\n    <div class=\"w-full m-2 border\">\n        <div class=\"flex flex-row mb-1\">\n            <div class=\"w-1/3 mx-1\">\n                <dx-select-box [dataSource]=\"chartAxisSource\" [(ngModel)]=\"chartAccess\" placeholder=\"Chart Type\"\n                    displayExpr=\"name\" valueExpr=\"value\" (onValueChanged)=\"getChartAccessType($event)\">\n                </dx-select-box>\n            </div>\n            <div class=\"w-1/3 mx-1\">\n                <ng-container *ngIf=\"chartAccess == 'single'\">\n                    <dx-select-box [items]=\"chartTypeSource\" (onValueChanged)=\"getChartType($event)\"\n                        [(ngModel)]=\"chartType\"></dx-select-box>\n                </ng-container>\n                <ng-container *ngIf=\"chartAccess == 'multy'\">\n                    <dx-select-box [items]=\"componentNamesForMultyAccess\" displayExpr=\"item\" valueExpr=\"compName\"\n                        [(ngModel)]=\"componentName\"></dx-select-box>\n                </ng-container>\n            </div>\n        </div>\n        <ng-container *ngIf=\"chartAccess == 'single'\">\n\n            <div class=\"mb-4 border-b border-gray-200 dark:border-gray-700\">\n                <ul class=\"flex flex-wrap -mb-px text-sm font-medium text-center\" role=\"tablist\">\n                    <li class=\"me-2\" role=\"presentation\">\n                        <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'basic',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'basic'\n                            }\" (click)=\"setActiveTab('basic')\" type=\"button\" role=\"tab\">\n                            Basic\n                        </button>\n                    </li>\n                    <li class=\"me-2\" role=\"presentation\">\n                        <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'columns',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'columns'\n                            }\" (click)=\"setActiveTab('columns')\" type=\"button\" role=\"tab\">\n                            Columns\n                        </button>\n                    </li>\n                    <!-- <li class=\"me-2\" role=\"presentation\">\n                        <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'widget',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'widget'\n                            }\" (click)=\"setActiveTab('widget')\" type=\"button\" role=\"tab\">\n                            Widget\n                        </button>\n                    </li> -->\n                </ul>\n            </div>\n\n            <div id=\"default-styled-tab-content\">\n                <div *ngIf=\"activeTab === 'basic'\">\n                    <div class=\"flex flex-wrap justify-between my-2\">\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1 \">Legend Horizontal Alignment</div>\n                            <dx-select-box [searchEnabled]=\"true\" [items]=\"['right','left','center']\"\n                                [(ngModel)]=\"chartConfig.horizontalAlignment\"></dx-select-box>\n\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Legend Vertical Alignment</div>\n                            <dx-select-box [searchEnabled]=\"true\" [items]=\"['top','bottom']\"\n                                [(ngModel)]=\"chartConfig.verticalAlignment\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1 mt-8\"></div>\n                            <dx-check-box [(ngModel)]=\"chartConfig.legendDisplay\" text=\"Legend Display\"></dx-check-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Argument Field</div>\n                            <dx-select-box [items]=\"configColume\"\n                                [(ngModel)]=\"chartConfig.argumentField\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Size</div>\n                            <dx-text-box [(ngModel)]=\"chartConfig.size\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Caption</div>\n                            <dx-text-box [(ngModel)]=\"chartConfig.caption\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2\"> Display Formate </div>\n                            <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                [(ngModel)]=\"mainChartCourceObject.kpiConfig.formate\"\n                                [readOnly]=\"false\"></dx-select-box>\n                        </div>\n                        <div class=\"w-2/3 px-2 mt-2\" *ngIf=\"chartType == 'doughnut' ||  chartType == 'pie'\">\n                            <div class=\" flex flex-row\">\n                                <div class=\"mr-2\">\n                                    <div class=\"text-md mb-1\"> Color Palette</div>\n                                    <dx-select-box [items]=\"doughnut_color_palette\"\n                                        [(ngModel)]=\"chartConfig.palette\"></dx-select-box>\n                                </div>\n                                <div class=\"mt-7\">\n                                    <dx-check-box [value]=\"chartConfig.labelDisplay\"\n                                        [(ngModel)]=\"chartConfig.labelDisplay\" text=\"Label Display\"></dx-check-box>\n                                </div>\n                            </div>\n\n\n                        </div>\n                        <div class=\"w-2/3 px-2 mt-2\" *ngIf=\"chartType == 'bubble'\">\n                            <div class=\" flex flex-row\">\n                                <div class=\"mr-2\">\n                                    <div class=\"text-md mb-1\"> Source Field</div>\n                                    <dx-select-box [items]=\"configColume\"\n                                        [(ngModel)]=\"chartConfig.sourceField\"></dx-select-box>\n                                </div>\n                                <div class=\"mr-2\">\n                                    <div class=\"text-md mb-1\"> Min Bubble Size</div>\n                                    <dx-text-box [(ngModel)]=\"chartConfig.minBubbleSize\"></dx-text-box>\n                                </div>\n                                <div class=\"mr-2\">\n                                    <div class=\"text-md mb-1\"> Max bubble size</div>\n                                    <dx-text-box [(ngModel)]=\"chartConfig.maxBubbleSize\"></dx-text-box>\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\" *ngIf=\"chartType == 'doughnut'\">\n\n                        </div>\n\n                    </div>\n                </div>\n                <div *ngIf=\"activeTab === 'columns'\">\n                    <div class=\"h-60 overflow-x-auto\">\n                        <div class=\" border-x border-b \">\n                            <div class=\"py-1 flex flex-row border-b\"\n                                *ngFor=\"let item of chartConfig.chart_config; let i = index\">\n\n                                <div class=\"px-1 mb-1 w-1/3\">\n                                    <div class=\"text-md mb-1\"> Value Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"item.valueField\"></dx-select-box>\n                                </div>\n\n                                <div class=\"px-1 mb-1 w-1/4\" *ngIf=\"chartType !== 'doughnut' && chartType !== 'pie'\">\n                                    <div class=\"text-md mb-1\"> Axis</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"item.axis\"></dx-select-box>\n                                </div>\n                                <div class=\" px-2 mb-1 w-1/3\">\n                                    <div class=\"text-md mb-1\"> Position</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"['right','left']\"\n                                        [(ngModel)]=\"item.position\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-1/4\">\n                                    <div class=\"text-md mb-1\"> Name</div>\n                                    <dx-text-box [(ngModel)]=\"item.name\"></dx-text-box>\n                                </div>\n                                <div class=\"text-center mt-6 w-1/6\">\n                                    <button *ngIf=\"i !== 0\" class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItem(i, 'up')\">\n                                        <i class=\"fa fa-arrow-up\" aria-hidden=\"true\"></i>\n                                    </button>\n                                    <button *ngIf=\"i !== chartConfig.chart_config.length - 1\"\n                                        class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItem(i, 'down')\">\n                                        <i class=\"fa fa-arrow-down\" aria-hidden=\"true\"></i>\n                                    </button>\n\n                                    <button class=\"{{commonService.btn_danger_sm}} cursor-pointer\"\n                                        (click)=\"deleteColumns(i)\"><i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                    </button>\n                                </div>\n                            </div>\n                            <div class=\"flex flex-row justify-end my-2\" *ngIf=\"chartType == 'doughnut' && chartType == 'pie'\">\n                                <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\"\n                                    (click)=\"addColumns()\">Add\n                                    Series</button>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <!-- <div *ngIf=\"activeTab === 'widget'\">\n                    <div class=\"flex flex-wrap justify-between my-2\">\n                        <div class=\"w-1/3 px-1 mb-1\">\n                            <div class=\"text-md mb-2\"> Widget level</div>\n                            <dx-text-box [value]=\"mainChartCourceObject.widget\"\n                                [(ngModel)]=\"mainChartCourceObject.widget\" [readOnly]=\"isEditWidget\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-1 mb-1\">\n                            <div class=\"text-md mb-2\"> Title</div>\n                            <dx-text-box [value]=\"widGetConfig.widgetTitle\"\n                                [(ngModel)]=\"widGetConfig.widgetTitle\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-1 mb-1\">\n                            <div class=\"text-md mb-2\"> Width </div>\n                            <dx-select-box [value]=\"widGetConfig.width\" [items]=\"widget_width\"\n                                [(ngModel)]=\"widGetConfig.width\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-1 mb-1\">\n                            <div class=\"text-md mb-2\"> Display Formate </div>\n                            <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                [(ngModel)]=\"mainChartCourceObject.kpiConfig.formate\"\n                                [readOnly]=\"false\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-1 pt-6 text-center\">\n                            <dx-check-box [value]=\"widGetConfig.display\" [(ngModel)]=\"widGetConfig.display\"\n                                text=\"Display\"></dx-check-box>\n                        </div>\n                    </div>\n\n                </div> -->\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"chartAccess == 'multy'\">\n            <div class=\"mb-4 border-b border-gray-200 dark:border-gray-700\">\n                <ul class=\"flex flex-wrap -mb-px text-sm font-medium text-center\" role=\"tablist\">\n                    <li class=\"me-2\" role=\"presentation\">\n                        <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'basic',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'basic'\n                            }\" (click)=\"setActiveTab('basic')\" type=\"button\" role=\"tab\">\n                            Basic\n                        </button>\n                    </li>\n                    <li class=\"me-2\" role=\"presentation\">\n                        <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'columns',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'columns'\n                            }\" (click)=\"setActiveTab('columns')\" type=\"button\" role=\"tab\">\n                            Columns\n                        </button>\n                    </li>\n                    <!-- <li class=\"me-2\" role=\"presentation\">\n                        <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'widget',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'widget'\n                            }\" (click)=\"setActiveTab('widget')\" type=\"button\" role=\"tab\">\n                            Widget\n                        </button>\n                    </li> -->\n                </ul>\n            </div>\n\n            <div id=\"default-styled-tab-content\">\n                <div *ngIf=\"activeTab === 'basic'\">\n                    <div class=\"flex flex-wrap justify-between my-2\">\n                        <div class=\"w-1/3 px-2\">\n                            <div class=\"text-md mb-1\">Legend Horizontal Alignment</div>\n                            <dx-select-box [searchEnabled]=\"true\" [items]=\"['right','left','center']\" [value]=\"'center'\"\n                                [(ngModel)]=\"chartConfig.horizontalAlignment\"></dx-select-box>\n\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> legent Vertical Alignment</div>\n                            <dx-select-box [searchEnabled]=\"true\" [items]=\"['top','bottom']\" [value]=\"'bottom'\"\n                                [(ngModel)]=\"chartConfig.verticalAlignment\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1 mt-8\"></div>\n                            <dx-check-box [(ngModel)]=\"chartConfig.legendDisplay\" text=\"Legend Display\"></dx-check-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Argument Field</div>\n                            <dx-select-box [items]=\"configColume\"\n                                [(ngModel)]=\"chartConfig.argumentField\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Size</div>\n                            <dx-text-box [(ngModel)]=\"chartConfig.size\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Caption</div>\n                            <dx-text-box [(ngModel)]=\"chartConfig.caption\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2\"> Display Formate </div>\n                            <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                [(ngModel)]=\"mainChartCourceObject.kpiConfig.formate\"\n                                [readOnly]=\"false\"></dx-select-box>\n                        </div>\n                    </div>\n                </div>\n                <div *ngIf=\"activeTab === 'columns'\">\n                    <dx-scroll-view class=\"h-full\" [width]=\"'100%'\" [height]=\"'100%'\">\n                        <div class=\" border-x border-b \">\n                            <div class=\"py-1 flex flex-wrap border-b\"\n                                *ngFor=\"let item of chartConfig.chart_config; let i = index;\">\n\n                                <div class=\"px-2 mb-1 w-1/3\">\n                                    <div class=\"text-md mb-2\"> Type</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"chartTypeSource\" [value]=\"'spline'\"\n                                        [(ngModel)]=\"item.type\"></dx-select-box>\n                                </div>\n                                <div class=\"px-2 mb-1 w-1/3\">\n                                    <div class=\"text-md mb-1\"> Value Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"item.valueField\"></dx-select-box>\n                                </div>\n\n                                <div class=\"px-2 mb-1 w-1/3\">\n                                    <div class=\"text-md mb-1\"> Axis</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"item.axis\"></dx-select-box>\n                                </div>\n                                <div class=\" px-2 mb-1 w-1/4\">\n                                    <div class=\"text-md mb-1\"> Position</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"['right','left']\"\n                                        [(ngModel)]=\"item.position\"></dx-select-box>\n                                </div>\n                                <div class=\"px-2 mb-1 w-1/4\">\n                                    <div class=\"text-md mb-1\"> Name</div>\n                                    <dx-text-box [(ngModel)]=\"item.name\"></dx-text-box>\n                                </div>\n                                <div class=\"px-2 mb-1 w-1/4\">\n                                    <div class=\"text-md mb-2\"> Color</div>\n                                    <dx-color-box [(ngModel)]=\"item.color\"></dx-color-box>\n                                </div>\n                                <div class=\"text-center my-1 w-1/4\">\n                                    <button *ngIf=\"i !== 0\" class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItem(i, 'up')\">\n                                        <i class=\"fa fa-arrow-up\" aria-hidden=\"true\"></i>\n                                    </button>\n                                    <button *ngIf=\"i !== chartConfig.chart_config.length - 1\"\n                                        class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItem(i, 'down')\">\n                                        <i class=\"fa fa-arrow-down\" aria-hidden=\"true\"></i>\n                                    </button>\n\n                                    <button class=\"{{commonService.btn_danger_sm}} cursor-pointer\"\n                                        (click)=\"deleteColumns(i)\"><i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                    </button>\n                                </div>\n                            </div>\n                            <div class=\"flex flex-row justify-end my-2\">\n                                <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\"\n                                    (click)=\"addColumns()\">Add\n                                    Columns</button>\n                            </div>\n                        </div>\n                    </dx-scroll-view>\n                </div>\n                <!-- <div *ngIf=\"activeTab === 'widget'\">\n                    <div class=\"flex flex-wrap justify-between my-2\">\n                        <div class=\"w-1/3 px-1 mb-1\">\n                            <div class=\"text-md mb-2\"> Widget level</div>\n                            <dx-text-box [value]=\"mainChartCourceObject.widget\"\n                                [(ngModel)]=\"mainChartCourceObject.widget\" [readOnly]=\"isEditWidget\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-1 mb-1\">\n                            <div class=\"text-md mb-2\"> Title</div>\n                            <dx-text-box [value]=\"widGetConfig.widgetTitle\"\n                                [(ngModel)]=\"widGetConfig.widgetTitle\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-1 mb-1\">\n                            <div class=\"text-md mb-2\"> Width </div>\n                            <dx-select-box [value]=\"widGetConfig.width\" [items]=\"widget_width\"\n                                [(ngModel)]=\"widGetConfig.width\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-1 mb-1\">\n                            <div class=\"text-md mb-2\"> Display Formate </div>\n                            <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                [(ngModel)]=\"mainChartCourceObject.kpiConfig.formate\"\n                                [readOnly]=\"false\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-1 pt-6 text-center\">\n                            <dx-check-box [value]=\"widGetConfig.display\" [(ngModel)]=\"widGetConfig.display\"\n                                text=\"Display\"></dx-check-box>\n                        </div>\n                    </div>\n\n                </div> -->\n            </div>\n        </ng-container>\n\n\n    </div>\n\n</div>\n\n<div class=\"flex flex-row border-t pl-3\">\n    <div class=\"flex justify-start mx-1\">\n        <button class=\"{{commonService.btn_warning_md}} cursor-pointer mt-2\" (click)=\"isJsonPreview = true\">\n            Preview</button>\n        <button class=\"{{commonService.btn_primary_md}} cursor-pointer mt-2\" (click)=\"isJsonPreview = false\">Data\n            Preview</button>\n    </div>\n    <div class=\"flex justify-end mx-1 flex-grow\">\n        <button class=\"{{commonService.btn_success_md}} cursor-pointer mt-2\"\n            (click)=\"getSaveChartConfig()\">Submit</button>\n    </div>\n</div>" }]
         }], ctorParameters: function () { return [{ type: CommonService }]; }, propDecorators: { getChartConfigOutPut: [{
                 type: Output
             }], chartconfigData: [{
@@ -4573,7 +4732,7 @@ class GammaTableClumnBarChartComponent {
                         const newObj = { ...obj };
                         Object.keys(newObj).forEach(key => {
                             if (key.toLowerCase().includes('date') && newObj[key]) {
-                                newObj[key] = momentNamespace(newObj[key]).format("YYYY-MM-DD");
+                                newObj[key] = moment$1(newObj[key]).format("YYYY-MM-DD");
                             }
                         });
                         return newObj;
@@ -5159,7 +5318,6 @@ class DashTodayPreviousComponent {
         return newColumns;
     }
     getSaveConfig() {
-        debugger;
         if (this.viewProperties.clickEventOptions.eventType == 'optionalDrillDown') {
             this.viewProperties['clickEventOptions']['associatedViews'] = this.optionalDrilDownDataSource;
         }
@@ -5207,6 +5365,267 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 args: ['datasetmodal']
             }] } });
 
+class SingleCardComponent {
+    constructor(commonService, cdr, service, taostr) {
+        this.commonService = commonService;
+        this.cdr = cdr;
+        this.service = service;
+        this.taostr = taostr;
+        this.dataSourseForTable = [];
+        this.allConfiguredViews = [];
+        this.optionalDrilDownDataSource = [];
+        this.table_columns_config = {
+            "kpiConfig": {
+                "serviceId": "",
+                "api": "/kpi/trends/network/get-metric-data",
+                "displayType": "table",
+                "formate": "",
+                "keyToPass": [],
+                "componentName": "GammaAdvanceOperatorTableComponent",
+                "dataConfig": {}
+            },
+        };
+        this.tableDataConfig = {
+            "color": "",
+            "size": "",
+            "sortBy": [],
+            "columns": []
+        };
+        this.enrichNameList = ["abbreviateNumber", "getColorCodeSpan", "ThousandSeparator", "ThousandSeparatorWithTwoDecimals"];
+        this.isLoader = true;
+        this.activeTab = 'basic';
+        this.getSingleCardConfigOutPut = new EventEmitter();
+    }
+    set chartconfigData(value) {
+        if (value === undefined || value.length === 0) {
+            return;
+        }
+        else {
+            this.jsaonDatasource = value.data[0];
+            this.configColume = Object.keys(value.data[0]);
+            this.dataSourseForTable = value.data.slice(0, 10);
+            this.selectedViewConfigs = value;
+            this.selectedTableViewType = value.selectedViewType;
+            if (value.selectedWidgetConfig) {
+                this.table_columns_config['kpiConfig'] = value.selectedWidgetConfig;
+                this.tableDataConfig = value.selectedWidgetConfig.dataConfig;
+                this.tableDataConfig.columns = (value.selectedWidgetConfig.dataConfig.columns) ? value.selectedWidgetConfig.dataConfig.columns : [];
+                if (value.selectedWidgetConfig.viewProperties) {
+                    this.viewProperties = value.selectedWidgetConfig.viewProperties;
+                    this.viewProperties = {
+                        "enableClickEvent": value.selectedWidgetConfig.viewProperties.enableClickEvent,
+                        "enableRightClickEvent": value.selectedWidgetConfig.viewProperties.enableRightClickEvent
+                    };
+                    if (value.selectedWidgetConfig.viewProperties.enableClickEvent) {
+                        if (value.selectedWidgetConfig.viewProperties.clickEventOptions.eventType == 'optionalDrillDown') {
+                            this.optionalDrilDownDataSource = value.selectedWidgetConfig.viewProperties.clickEventOptions.associatedViews;
+                            this.viewProperties['clickEventOptions'] = {
+                                "eventType": value.selectedWidgetConfig.viewProperties.clickEventOptions.eventType,
+                                "associatedViews": []
+                            };
+                        }
+                        else if (value.selectedWidgetConfig.viewProperties.clickEventOptions.eventType == 'drilldown') {
+                            this.viewProperties['clickEventOptions'] = {
+                                "eventType": value.selectedWidgetConfig.viewProperties.clickEventOptions.eventType,
+                                "associatedViews": value.selectedWidgetConfig.viewProperties.clickEventOptions.associatedViews
+                            };
+                        }
+                        else if (value.selectedWidgetConfig.viewProperties.clickEventOptions.eventType == '') {
+                            this.viewProperties['clickEventOptions'] = {
+                                "eventType": "",
+                                "associatedViews": []
+                            };
+                        }
+                        else {
+                            this.viewProperties = {
+                                enableClickEvent: false,
+                                enableRightClickEvent: true,
+                                clickEventOptions: {
+                                    associatedViews: [],
+                                    eventType: ""
+                                }
+                            };
+                        }
+                    }
+                    else {
+                        this.viewProperties['clickEventOptions'] = {};
+                    }
+                }
+                else {
+                    this.viewProperties = {
+                        enableClickEvent: false,
+                        enableRightClickEvent: true,
+                        clickEventOptions: {
+                            associatedViews: [],
+                            eventType: ""
+                        }
+                    };
+                }
+                this.cdr.detectChanges();
+            }
+            else {
+                this.tableDataConfig.columns = value.columnData;
+                this.viewProperties = {
+                    enableClickEvent: false,
+                    enableRightClickEvent: true,
+                    clickEventOptions: {
+                        associatedViews: [],
+                        eventType: ""
+                    }
+                };
+                if (!this.tableDataConfig.columns) {
+                    this.tableDataConfig.columns = [];
+                    this.configColume.forEach(element => {
+                        let obj = {
+                            "visible": true,
+                            "dataField": element,
+                            "caption": this.commonService.convertString(element),
+                            "enrichName": "",
+                        };
+                        this.tableDataConfig.columns.push(obj);
+                    });
+                    console.log(this.configColume);
+                }
+                this.cdr.detectChanges();
+            }
+        }
+    }
+    ngOnInit() {
+        this.isLoader = true;
+        this.service.getAppViewConfigs().subscribe({
+            next: (data) => {
+                this.allConfiguredViews = data;
+                this.isLoader = false;
+            }, error: (err) => {
+                this.taostr.error('Unexpected Server Exception. Please contact System Admin.', 'All Views');
+            }
+        });
+        if (this.optionalDrilDownDataSource.length == 0) {
+            this.optionalDrilDownDataSource = [
+                {
+                    'viewId': "",
+                    'filterCondition': ""
+                }
+            ];
+        }
+        this.cdr.detectChanges();
+    }
+    addColumns() {
+        let obj = {
+            "visible": true,
+            "dataField": "",
+            "caption": "",
+            "enrichName": "",
+        };
+        if (this.selectedTableViewType === 'groupTable') {
+            obj['group'] = '';
+        }
+        this.tableDataConfig.columns.push(obj);
+    }
+    deleteColumns(i) {
+        this.tableDataConfig.columns.splice(i, 1);
+    }
+    getEnrichClassName(e, item) {
+        item.enrichName = e.value;
+    }
+    moveItemForColumns(index, direction) {
+        if (index < 0 || index >= this.tableDataConfig.columns.length)
+            return;
+        const newPosition = direction === 'up' ? index - 1 : index + 1;
+        if (newPosition < 0 || newPosition >= this.tableDataConfig.columns.length)
+            return;
+        const itemToMove = this.tableDataConfig.columns[index];
+        this.tableDataConfig.columns.splice(index, 1);
+        this.tableDataConfig.columns.splice(newPosition, 0, itemToMove);
+    }
+    getObjectKeys(obj) {
+        return Object.keys(obj);
+    }
+    setActiveTab(tab) {
+        this.activeTab = tab;
+    }
+    getGroupColumns(columns) {
+        const groupedColumns = columns.reduce((acc, column) => {
+            let group = acc.find(item => item.caption === column.group);
+            if (!group) {
+                group = {
+                    caption: column.group,
+                    columns: []
+                };
+                acc.push(group);
+            }
+            group.columns.push({
+                dataField: column.dataField,
+                visible: column.visible,
+                caption: column.caption
+            });
+            return acc;
+        }, []);
+        return groupedColumns;
+    }
+    geColumnsFromGroup(columns) {
+        const newColumns = [];
+        columns.forEach(group => {
+            group.columns.forEach(col => {
+                newColumns.push({
+                    dataField: col.dataField,
+                    visible: col.visible,
+                    caption: col.caption,
+                    group: group.caption
+                });
+            });
+        });
+        return newColumns;
+    }
+    getSaveConfig() {
+        debugger;
+        if (this.viewProperties.clickEventOptions.eventType == 'optionalDrillDown') {
+            this.viewProperties['clickEventOptions']['associatedViews'] = this.optionalDrilDownDataSource;
+        }
+        this.table_columns_config.kpiConfig['viewProperties'] = this.viewProperties;
+        this.table_columns_config.kpiConfig.dataConfig = JSON.parse(JSON.stringify(this.tableDataConfig));
+        this.getSingleCardConfigOutPut.emit(this.table_columns_config);
+    }
+    deleteAssociatedParams(index) {
+        this.optionalDrilDownDataSource.splice(index, 1);
+    }
+    addAssociatedParams() {
+        this.optionalDrilDownDataSource.push({
+            'viewId': "",
+            'filterCondition': ""
+        });
+    }
+    getSelectedEventType(e) {
+        if (e.event) {
+            this.optionalDrilDownDataSource = [];
+            if (this.viewProperties.clickEventOptions.eventType == 'drilldown') {
+                this.table_columns_config.kpiConfig['viewProperties']['associatedViews'] = [];
+            }
+        }
+    }
+    resetViewProprstise() {
+        this.viewProperties = {
+            enableClickEvent: false,
+            enableRightClickEvent: true,
+            clickEventOptions: {
+                associatedViews: [],
+                eventType: ""
+            }
+        };
+    }
+}
+SingleCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SingleCardComponent, deps: [{ token: CommonService }, { token: i0.ChangeDetectorRef }, { token: ApplicationContentService }, { token: i2$1.ToastrService }], target: i0.ɵɵFactoryTarget.Component });
+SingleCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SingleCardComponent, selector: "lib-single-card", inputs: { chartconfigData: ["datasetmodal", "chartconfigData"] }, outputs: { getSingleCardConfigOutPut: "getSingleCardConfigOutPut" }, ngImport: i0, template: "\n\n<div class=\"m-2\"></div>\n    <div class=\"w-full m-2 border-r\">\n        <ng-container *ngIf=\"!isJsonPreview\">\n            <pre><code>{{jsaonDatasource | json}}</code></pre>\n        </ng-container>\n        <ng-container *ngIf=\"isJsonPreview\">    \n            <div class=\"flex justify-center items-start bg-gray-800 p-3 mx-2 text-center\">\n        <div class=\"w-full\">\n            <div [style.color]=\"tableDataConfig.color\"\n         [style.font-size.px]=\"tableDataConfig.size || 16\"\n                class=\"font-semibold\">{{jsaonDatasource.revenue}}</div>\n            </div>\n        </div>\n        </ng-container>\n    </div>\n    <div class=\"w-full mx-2 border-r\">\n        <div class=\"mb-4 border-b border-gray-200 dark:border-gray-700\">\n            <ul class=\"flex flex-wrap -mb-px text-sm font-medium text-center\" role=\"tablist\">\n                <li class=\"me-2\" role=\"presentation\">\n                    <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                        'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'basic',\n                                        'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'basic'\n                                    }\" (click)=\"setActiveTab('basic')\" type=\"button\" role=\"tab\">\n                        Basic\n                    </button>\n                </li>\n                <li class=\"me-2\" role=\"presentation\">\n                    <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                        'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'columns',\n                                        'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'columns'\n                                    }\" (click)=\"setActiveTab('columns')\" type=\"button\" role=\"tab\">\n                        Columns\n                    </button>\n                </li>\n                <li class=\"me-2\" role=\"presentation\">\n                    <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                        'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'properties',\n                                        'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'properties'\n                                    }\" (click)=\"setActiveTab('properties')\" type=\"button\" role=\"tab\">\n                        Properties\n                    </button>\n                </li>\n\n            </ul>\n        </div>\n\n        <div id=\"default-styled-tab-content\">   \n            <div *ngIf=\"activeTab === 'basic'\">\n                <div class=\"flex flex-col flex-auto min-w-0\">\n                    <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Filter Title Config\n                    </div>\n                    <div class=\"pt-2 border-x border-b \">\n                        <div class=\"my-2 flex justify-between\">\n                            \n                            <div class=\"px-1 mb-2 w-full\">\n                                <div class=\"text-md mb-2\">Color</div>\n                                <dx-color-box [(ngModel)]=\"tableDataConfig.color\"></dx-color-box>\n\n                            </div>\n                            <div class=\"px-1 mb-1 w-full\">\n                                <div class=\"text-md mb-2\">Size</div>\n                                <dx-text-box placeholder=\"Enter size\"  [(ngModel)]=\"tableDataConfig.size\"></dx-text-box>\n                    \n                            </div>\n                            \n                            <div class=\"px-1 mb-1 w-full\">\n                                <div class=\"text-md mb-2\"> Key To Pass </div>\n                                <dx-tag-box [items]=\"configColume\"\n                                    [(ngModel)]=\"table_columns_config.kpiConfig.keyToPass\"></dx-tag-box>\n                            </div>\n                            <div class=\"px-1 mb-1 w-full\">\n                                <div class=\"text-md mb-2\"> Display Formate </div>\n                                <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                    [(ngModel)]=\"table_columns_config.kpiConfig.formate\"></dx-select-box>\n                            </div>\n\n                            <div class=\"px-1 mb-1 w-full\">\n                                <div class=\"text-md mb-2\"> Sort By </div>\n                                <dx-tag-box [items]=\"configColume\"\n                                    [(ngModel)]=\"tableDataConfig.sortBy\"></dx-tag-box>\n                            </div>\n                            </div>         \n                        </div>\n                    </div>\n\n            </div>\n            <div *ngIf=\"activeTab === 'columns'\">\n                <div class=\"h-full overflow-x-auto\">\n                    <div class=\"flex flex-col flex-auto min-w-0\">\n\n                        <div class=\"pt-2 border-x border-b \">\n                            <div class=\"my-2 border-b flex flex-row\"\n                                *ngFor=\"let item of tableDataConfig.columns; let i = index;\">\n                                <div class=\"px-1 mb-2 mt-6 w-full\">\n                                    <dx-check-box [(ngModel)]=\"item.visible\"\n                                        text=\"Visiblity\"></dx-check-box>\n                                </div>\n                                \n                                <div class=\"px-1 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\"> Value Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"item.dataField\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\"> Caption</div>\n                                    <dx-text-box [(ngModel)]=\"item.caption\"></dx-text-box>\n                                </div>\n                                <div class=\"px-2 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\"> UI Function</div>\n                                    <dx-select-box [items]=\"enrichNameList\" [(ngModel)]=\"item.enrichName\"\n                                        [searchEnabled]=\"true\"></dx-select-box>\n                                </div>\n                                <div class=\"text-center mt-8 w-full\">\n                                    <button *ngIf=\"i !== 0\" class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItemForColumns(i, 'up')\">\n                                        <i class=\"fa fa-arrow-up\" aria-hidden=\"true\"></i>\n                                    </button>\n\n                                    <button *ngIf=\"i !== tableDataConfig.columns.length - 1\"\n                                        class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItemForColumns(i, 'down')\">\n                                        <i class=\"fa fa-arrow-down\" aria-hidden=\"true\"></i>\n                                    </button>\n                                    <button class=\"{{commonService.btn_danger_sm}} cursor-pointer\"\n                                        (click)=\"deleteColumns(i)\"><i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                    </button>\n                                </div>\n\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"flex flex-row justify-end my-2\">\n                        <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\" (click)=\"addColumns()\">Add\n                            Columns</button>\n                    </div>\n                </div>\n            </div>\n            <div *ngIf=\"activeTab === 'properties'\">\n                <div class=\"h-full overflow-x-auto\">\n                    <app-loader *ngIf=\"isLoader\"></app-loader>\n                    <ng-container *ngIf=\"!isLoader\">\n                        <div class=\"flex flex-row justify-between border-b py-3\">\n                            <div class=\"mx-2\">\n                                <dx-check-box [value]=\"viewProperties.enableClickEvent\"\n                                    [(ngModel)]=\"viewProperties.enableClickEvent\"\n                                    text=\"Enable Click Event\"></dx-check-box>\n                            </div>\n                            <div class=\"mx-2\">\n                                <dx-check-box [value]=\"viewProperties.enableRightClickEvent\"\n                                    [(ngModel)]=\"viewProperties.enableRightClickEvent\"\n                                    text=\"Enable Right Click\"></dx-check-box>\n                            </div>\n                        </div>\n                        <div class=\"w-full p-2\" *ngIf=\"viewProperties.enableClickEvent\">\n\n                            <div class=\"flex flex-col flex-auto min-w-0 my-2\">\n                                <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Event\n                                    Type\n                                    Option\n                                </div>\n                                <div class=\"w-full p-3 border-x border-b \">\n                                    <div class=\"flex flex-row\">\n                                        <div class=\"w-full\">\n                                            <div class=\"text-md mb-2\"> Event Type</div>\n                                        </div>\n                                        <div class=\"w-full\">\n                                            <dx-select-box [items]=\"['drilldown','sameViewDrilldown','optionalDrillDown']\"\n                                                (onValueChanged)=\"getSelectedEventType($event)\"\n                                                [(ngModel)]=\"viewProperties.clickEventOptions.eventType\"></dx-select-box>\n                                        </div>\n                                    </div>\n                                    <ng-container *ngIf=\"viewProperties.clickEventOptions.eventType == 'drilldown'\">\n                                        <div class=\"flex flex-row justify-between mt-3\">\n                                            <div class=\"w-full\">\n                                                <div class=\"text-md mb-2\"> Associated Views</div>\n                                                <dx-tag-box [items]=\"allConfiguredViews\"\n                                                    [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                    valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                    [showSelectionControls]=\"true\" [searchEnabled]=\"true\"></dx-tag-box>\n                                            </div>\n                                        </div>\n                                    </ng-container>\n                                    <ng-container *ngIf=\"viewProperties.clickEventOptions.eventType == 'sameViewDrilldown'\">\n                                        <div class=\"flex flex-row justify-between mt-3\">\n                                            <div class=\"w-full\">\n                                                <div class=\"text-md mb-2\"> Associated Views</div>\n                                                <dx-tag-box [items]=\"allConfiguredViews\"\n                                                    [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                    valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                    [showSelectionControls]=\"true\" [searchEnabled]=\"true\"></dx-tag-box>\n                                            </div>\n                                        </div>\n                                    </ng-container>\n                                    <ng-container\n                                        *ngIf=\"viewProperties.clickEventOptions.eventType == 'optionalDrillDown'\">\n                                        <div class=\"flex flex-row justify-between mt-3\">\n                                            <div class=\"w-full\">\n                                                <ng-container\n                                                    *ngFor=\"let item of optionalDrilDownDataSource;let i = index;\">\n\n                                                    <div class=\"flex flex-row justify-between\">\n                                                        <div class=\"mx-2 w-1/2\">\n                                                            <div class=\"text-md mb-2\"> Associated Views</div>\n                                                            <dx-tag-box [items]=\"allConfiguredViews\"\n                                                                [(ngModel)]=\"item.viewId\" valueExpr=\"viewId\"\n                                                                displayExpr=\"viewName\" [showSelectionControls]=\"true\"\n                                                                [maxDisplayedTags]=\"2\"\n                                                                [searchEnabled]=\"true\"></dx-tag-box>\n\n                                                        </div>\n                                                        <div class=\"mx-2 w-1/2\">\n                                                            <div class=\"text-md mb-2\"> Associated Params</div>\n                                                            <dx-text-box\n                                                                [(ngModel)]=\"item.filterCondition\"></dx-text-box>\n                                                        </div>\n                                                        <div class=\"mx-2\">\n                                                            <button\n                                                                class=\"{{commonService.btn_danger_sm}} cursor-pointer mt-8\"\n                                                                (click)=\"deleteAssociatedParams(i)\"><i\n                                                                    class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                                            </button>\n                                                        </div>\n                                                    </div>\n                                                </ng-container>\n                                                <div class=\"flex flex-row justify-end mt-4\">\n                                                    <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\"\n                                                        (click)=\"addAssociatedParams()\">Add\n                                                        Params</button>\n                                                </div>\n                                            </div>\n                                        </div>\n                                    </ng-container>\n                                    <button class=\"{{commonService.btn_light_md}} cursor-pointer mt-4\"\n                                        (click)=\"resetViewProprstise()\">Reset All Event</button>\n                                </div>\n                            </div>\n\n                        </div>\n                    </ng-container>\n                </div>\n            </div>\n\n        </div>\n    </div>\n\n\n<div class=\"flex flex-row border-t pl-3\">\n    <div class=\"flex justify-start mx-1\">\n        <button class=\"{{commonService.btn_warning_md}} cursor-pointer mt-2\" (click)=\"isJsonPreview = true\">\n            Preview</button>\n        <button class=\"{{commonService.btn_primary_md}} cursor-pointer mt-2\" (click)=\"isJsonPreview = false\">Data\n            Preview</button>\n    </div>\n    <div class=\"flex justify-end mx-1 flex-grow\">\n        <button class=\"{{commonService.btn_success_md}} cursor-pointer mt-2\"\n            (click)=\"getSaveConfig()\">Submit</button>\n    </div>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.DxCheckBoxComponent, selector: "dx-check-box", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "iconSize", "isValid", "name", "readOnly", "rtlEnabled", "tabIndex", "text", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "visible", "width"], outputs: ["onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconSizeChange", "isValidChange", "nameChange", "readOnlyChange", "rtlEnabledChange", "tabIndexChange", "textChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "component", type: i6$2.DxColorBoxComponent, selector: "dx-color-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "applyButtonText", "applyValueMode", "buttons", "cancelButtonText", "deferRendering", "disabled", "dropDownButtonTemplate", "dropDownOptions", "editAlphaChannel", "elementAttr", "fieldTemplate", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "keyStep", "label", "labelMode", "name", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showDropDownButton", "stylingMode", "tabIndex", "text", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "visible", "width"], outputs: ["onChange", "onClosed", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOpened", "onOptionChanged", "onPaste", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "applyButtonTextChange", "applyValueModeChange", "buttonsChange", "cancelButtonTextChange", "deferRenderingChange", "disabledChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "editAlphaChannelChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "keyStepChange", "labelChange", "labelModeChange", "nameChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showDropDownButtonChange", "stylingModeChange", "tabIndexChange", "textChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "component", type: i6$1.DxSelectBoxComponent, selector: "dx-select-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "buttons", "dataSource", "deferRendering", "disabled", "displayExpr", "displayValue", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "fieldTemplate", "focusStateEnabled", "grouped", "groupTemplate", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "items", "itemTemplate", "label", "labelMode", "maxLength", "minSearchLength", "name", "noDataText", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "searchEnabled", "searchExpr", "searchMode", "searchTimeout", "selectedItem", "showClearButton", "showDataBeforeSearch", "showDropDownButton", "showSelectionControls", "spellcheck", "stylingMode", "tabIndex", "text", "useItemTextAsTitle", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueChangeEvent", "valueExpr", "visible", "width", "wrapItemText"], outputs: ["onChange", "onClosed", "onContentReady", "onCopy", "onCustomItemCreating", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onItemClick", "onKeyDown", "onKeyUp", "onOpened", "onOptionChanged", "onPaste", "onSelectionChanged", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "dataSourceChange", "deferRenderingChange", "disabledChange", "displayExprChange", "displayValueChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "groupedChange", "groupTemplateChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "itemsChange", "itemTemplateChange", "labelChange", "labelModeChange", "maxLengthChange", "minSearchLengthChange", "nameChange", "noDataTextChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "searchEnabledChange", "searchExprChange", "searchModeChange", "searchTimeoutChange", "selectedItemChange", "showClearButtonChange", "showDataBeforeSearchChange", "showDropDownButtonChange", "showSelectionControlsChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useItemTextAsTitleChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "valueExprChange", "visibleChange", "widthChange", "wrapItemTextChange", "onBlur"] }, { kind: "component", type: i8$1.DxTagBoxComponent, selector: "dx-tag-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "applyValueMode", "buttons", "dataSource", "deferRendering", "disabled", "displayExpr", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "fieldTemplate", "focusStateEnabled", "grouped", "groupTemplate", "height", "hideSelectedItems", "hint", "hoverStateEnabled", "inputAttr", "isValid", "items", "itemTemplate", "label", "labelMode", "maxDisplayedTags", "maxFilterQueryLength", "maxLength", "minSearchLength", "multiline", "name", "noDataText", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "searchEnabled", "searchExpr", "searchMode", "searchTimeout", "selectAllMode", "selectAllText", "selectedItems", "showClearButton", "showDataBeforeSearch", "showDropDownButton", "showMultiTagOnly", "showSelectionControls", "stylingMode", "tabIndex", "tagTemplate", "text", "useItemTextAsTitle", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueExpr", "visible", "width", "wrapItemText"], outputs: ["onChange", "onClosed", "onContentReady", "onCustomItemCreating", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onItemClick", "onKeyDown", "onKeyUp", "onMultiTagPreparing", "onOpened", "onOptionChanged", "onSelectAllValueChanged", "onSelectionChanged", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "applyValueModeChange", "buttonsChange", "dataSourceChange", "deferRenderingChange", "disabledChange", "displayExprChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "groupedChange", "groupTemplateChange", "heightChange", "hideSelectedItemsChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "itemsChange", "itemTemplateChange", "labelChange", "labelModeChange", "maxDisplayedTagsChange", "maxFilterQueryLengthChange", "maxLengthChange", "minSearchLengthChange", "multilineChange", "nameChange", "noDataTextChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "searchEnabledChange", "searchExprChange", "searchModeChange", "searchTimeoutChange", "selectAllModeChange", "selectAllTextChange", "selectedItemsChange", "showClearButtonChange", "showDataBeforeSearchChange", "showDropDownButtonChange", "showMultiTagOnlyChange", "showSelectionControlsChange", "stylingModeChange", "tabIndexChange", "tagTemplateChange", "textChange", "useItemTextAsTitleChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueExprChange", "visibleChange", "widthChange", "wrapItemTextChange", "onBlur"] }, { kind: "component", type: i7.DxTextBoxComponent, selector: "dx-text-box", inputs: ["accessKey", "activeStateEnabled", "buttons", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "label", "labelMode", "mask", "maskChar", "maskInvalidMessage", "maskRules", "maxLength", "mode", "name", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showMaskMode", "spellcheck", "stylingMode", "tabIndex", "text", "useMaskedValue", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOptionChanged", "onPaste", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "labelChange", "labelModeChange", "maskChange", "maskCharChange", "maskInvalidMessageChange", "maskRulesChange", "maxLengthChange", "modeChange", "nameChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showMaskModeChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useMaskedValueChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: LoaderComponent, selector: "app-loader" }, { kind: "pipe", type: i4$1.JsonPipe, name: "json" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SingleCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-single-card', template: "\n\n<div class=\"m-2\"></div>\n    <div class=\"w-full m-2 border-r\">\n        <ng-container *ngIf=\"!isJsonPreview\">\n            <pre><code>{{jsaonDatasource | json}}</code></pre>\n        </ng-container>\n        <ng-container *ngIf=\"isJsonPreview\">    \n            <div class=\"flex justify-center items-start bg-gray-800 p-3 mx-2 text-center\">\n        <div class=\"w-full\">\n            <div [style.color]=\"tableDataConfig.color\"\n         [style.font-size.px]=\"tableDataConfig.size || 16\"\n                class=\"font-semibold\">{{jsaonDatasource.revenue}}</div>\n            </div>\n        </div>\n        </ng-container>\n    </div>\n    <div class=\"w-full mx-2 border-r\">\n        <div class=\"mb-4 border-b border-gray-200 dark:border-gray-700\">\n            <ul class=\"flex flex-wrap -mb-px text-sm font-medium text-center\" role=\"tablist\">\n                <li class=\"me-2\" role=\"presentation\">\n                    <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                        'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'basic',\n                                        'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'basic'\n                                    }\" (click)=\"setActiveTab('basic')\" type=\"button\" role=\"tab\">\n                        Basic\n                    </button>\n                </li>\n                <li class=\"me-2\" role=\"presentation\">\n                    <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                        'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'columns',\n                                        'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'columns'\n                                    }\" (click)=\"setActiveTab('columns')\" type=\"button\" role=\"tab\">\n                        Columns\n                    </button>\n                </li>\n                <li class=\"me-2\" role=\"presentation\">\n                    <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                        'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'properties',\n                                        'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'properties'\n                                    }\" (click)=\"setActiveTab('properties')\" type=\"button\" role=\"tab\">\n                        Properties\n                    </button>\n                </li>\n\n            </ul>\n        </div>\n\n        <div id=\"default-styled-tab-content\">   \n            <div *ngIf=\"activeTab === 'basic'\">\n                <div class=\"flex flex-col flex-auto min-w-0\">\n                    <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Filter Title Config\n                    </div>\n                    <div class=\"pt-2 border-x border-b \">\n                        <div class=\"my-2 flex justify-between\">\n                            \n                            <div class=\"px-1 mb-2 w-full\">\n                                <div class=\"text-md mb-2\">Color</div>\n                                <dx-color-box [(ngModel)]=\"tableDataConfig.color\"></dx-color-box>\n\n                            </div>\n                            <div class=\"px-1 mb-1 w-full\">\n                                <div class=\"text-md mb-2\">Size</div>\n                                <dx-text-box placeholder=\"Enter size\"  [(ngModel)]=\"tableDataConfig.size\"></dx-text-box>\n                    \n                            </div>\n                            \n                            <div class=\"px-1 mb-1 w-full\">\n                                <div class=\"text-md mb-2\"> Key To Pass </div>\n                                <dx-tag-box [items]=\"configColume\"\n                                    [(ngModel)]=\"table_columns_config.kpiConfig.keyToPass\"></dx-tag-box>\n                            </div>\n                            <div class=\"px-1 mb-1 w-full\">\n                                <div class=\"text-md mb-2\"> Display Formate </div>\n                                <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                    [(ngModel)]=\"table_columns_config.kpiConfig.formate\"></dx-select-box>\n                            </div>\n\n                            <div class=\"px-1 mb-1 w-full\">\n                                <div class=\"text-md mb-2\"> Sort By </div>\n                                <dx-tag-box [items]=\"configColume\"\n                                    [(ngModel)]=\"tableDataConfig.sortBy\"></dx-tag-box>\n                            </div>\n                            </div>         \n                        </div>\n                    </div>\n\n            </div>\n            <div *ngIf=\"activeTab === 'columns'\">\n                <div class=\"h-full overflow-x-auto\">\n                    <div class=\"flex flex-col flex-auto min-w-0\">\n\n                        <div class=\"pt-2 border-x border-b \">\n                            <div class=\"my-2 border-b flex flex-row\"\n                                *ngFor=\"let item of tableDataConfig.columns; let i = index;\">\n                                <div class=\"px-1 mb-2 mt-6 w-full\">\n                                    <dx-check-box [(ngModel)]=\"item.visible\"\n                                        text=\"Visiblity\"></dx-check-box>\n                                </div>\n                                \n                                <div class=\"px-1 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\"> Value Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"item.dataField\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\"> Caption</div>\n                                    <dx-text-box [(ngModel)]=\"item.caption\"></dx-text-box>\n                                </div>\n                                <div class=\"px-2 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\"> UI Function</div>\n                                    <dx-select-box [items]=\"enrichNameList\" [(ngModel)]=\"item.enrichName\"\n                                        [searchEnabled]=\"true\"></dx-select-box>\n                                </div>\n                                <div class=\"text-center mt-8 w-full\">\n                                    <button *ngIf=\"i !== 0\" class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItemForColumns(i, 'up')\">\n                                        <i class=\"fa fa-arrow-up\" aria-hidden=\"true\"></i>\n                                    </button>\n\n                                    <button *ngIf=\"i !== tableDataConfig.columns.length - 1\"\n                                        class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItemForColumns(i, 'down')\">\n                                        <i class=\"fa fa-arrow-down\" aria-hidden=\"true\"></i>\n                                    </button>\n                                    <button class=\"{{commonService.btn_danger_sm}} cursor-pointer\"\n                                        (click)=\"deleteColumns(i)\"><i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                    </button>\n                                </div>\n\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"flex flex-row justify-end my-2\">\n                        <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\" (click)=\"addColumns()\">Add\n                            Columns</button>\n                    </div>\n                </div>\n            </div>\n            <div *ngIf=\"activeTab === 'properties'\">\n                <div class=\"h-full overflow-x-auto\">\n                    <app-loader *ngIf=\"isLoader\"></app-loader>\n                    <ng-container *ngIf=\"!isLoader\">\n                        <div class=\"flex flex-row justify-between border-b py-3\">\n                            <div class=\"mx-2\">\n                                <dx-check-box [value]=\"viewProperties.enableClickEvent\"\n                                    [(ngModel)]=\"viewProperties.enableClickEvent\"\n                                    text=\"Enable Click Event\"></dx-check-box>\n                            </div>\n                            <div class=\"mx-2\">\n                                <dx-check-box [value]=\"viewProperties.enableRightClickEvent\"\n                                    [(ngModel)]=\"viewProperties.enableRightClickEvent\"\n                                    text=\"Enable Right Click\"></dx-check-box>\n                            </div>\n                        </div>\n                        <div class=\"w-full p-2\" *ngIf=\"viewProperties.enableClickEvent\">\n\n                            <div class=\"flex flex-col flex-auto min-w-0 my-2\">\n                                <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Event\n                                    Type\n                                    Option\n                                </div>\n                                <div class=\"w-full p-3 border-x border-b \">\n                                    <div class=\"flex flex-row\">\n                                        <div class=\"w-full\">\n                                            <div class=\"text-md mb-2\"> Event Type</div>\n                                        </div>\n                                        <div class=\"w-full\">\n                                            <dx-select-box [items]=\"['drilldown','sameViewDrilldown','optionalDrillDown']\"\n                                                (onValueChanged)=\"getSelectedEventType($event)\"\n                                                [(ngModel)]=\"viewProperties.clickEventOptions.eventType\"></dx-select-box>\n                                        </div>\n                                    </div>\n                                    <ng-container *ngIf=\"viewProperties.clickEventOptions.eventType == 'drilldown'\">\n                                        <div class=\"flex flex-row justify-between mt-3\">\n                                            <div class=\"w-full\">\n                                                <div class=\"text-md mb-2\"> Associated Views</div>\n                                                <dx-tag-box [items]=\"allConfiguredViews\"\n                                                    [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                    valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                    [showSelectionControls]=\"true\" [searchEnabled]=\"true\"></dx-tag-box>\n                                            </div>\n                                        </div>\n                                    </ng-container>\n                                    <ng-container *ngIf=\"viewProperties.clickEventOptions.eventType == 'sameViewDrilldown'\">\n                                        <div class=\"flex flex-row justify-between mt-3\">\n                                            <div class=\"w-full\">\n                                                <div class=\"text-md mb-2\"> Associated Views</div>\n                                                <dx-tag-box [items]=\"allConfiguredViews\"\n                                                    [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                    valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                    [showSelectionControls]=\"true\" [searchEnabled]=\"true\"></dx-tag-box>\n                                            </div>\n                                        </div>\n                                    </ng-container>\n                                    <ng-container\n                                        *ngIf=\"viewProperties.clickEventOptions.eventType == 'optionalDrillDown'\">\n                                        <div class=\"flex flex-row justify-between mt-3\">\n                                            <div class=\"w-full\">\n                                                <ng-container\n                                                    *ngFor=\"let item of optionalDrilDownDataSource;let i = index;\">\n\n                                                    <div class=\"flex flex-row justify-between\">\n                                                        <div class=\"mx-2 w-1/2\">\n                                                            <div class=\"text-md mb-2\"> Associated Views</div>\n                                                            <dx-tag-box [items]=\"allConfiguredViews\"\n                                                                [(ngModel)]=\"item.viewId\" valueExpr=\"viewId\"\n                                                                displayExpr=\"viewName\" [showSelectionControls]=\"true\"\n                                                                [maxDisplayedTags]=\"2\"\n                                                                [searchEnabled]=\"true\"></dx-tag-box>\n\n                                                        </div>\n                                                        <div class=\"mx-2 w-1/2\">\n                                                            <div class=\"text-md mb-2\"> Associated Params</div>\n                                                            <dx-text-box\n                                                                [(ngModel)]=\"item.filterCondition\"></dx-text-box>\n                                                        </div>\n                                                        <div class=\"mx-2\">\n                                                            <button\n                                                                class=\"{{commonService.btn_danger_sm}} cursor-pointer mt-8\"\n                                                                (click)=\"deleteAssociatedParams(i)\"><i\n                                                                    class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                                            </button>\n                                                        </div>\n                                                    </div>\n                                                </ng-container>\n                                                <div class=\"flex flex-row justify-end mt-4\">\n                                                    <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\"\n                                                        (click)=\"addAssociatedParams()\">Add\n                                                        Params</button>\n                                                </div>\n                                            </div>\n                                        </div>\n                                    </ng-container>\n                                    <button class=\"{{commonService.btn_light_md}} cursor-pointer mt-4\"\n                                        (click)=\"resetViewProprstise()\">Reset All Event</button>\n                                </div>\n                            </div>\n\n                        </div>\n                    </ng-container>\n                </div>\n            </div>\n\n        </div>\n    </div>\n\n\n<div class=\"flex flex-row border-t pl-3\">\n    <div class=\"flex justify-start mx-1\">\n        <button class=\"{{commonService.btn_warning_md}} cursor-pointer mt-2\" (click)=\"isJsonPreview = true\">\n            Preview</button>\n        <button class=\"{{commonService.btn_primary_md}} cursor-pointer mt-2\" (click)=\"isJsonPreview = false\">Data\n            Preview</button>\n    </div>\n    <div class=\"flex justify-end mx-1 flex-grow\">\n        <button class=\"{{commonService.btn_success_md}} cursor-pointer mt-2\"\n            (click)=\"getSaveConfig()\">Submit</button>\n    </div>\n</div>" }]
+        }], ctorParameters: function () { return [{ type: CommonService }, { type: i0.ChangeDetectorRef }, { type: ApplicationContentService }, { type: i2$1.ToastrService }]; }, propDecorators: { getSingleCardConfigOutPut: [{
+                type: Output
+            }], chartconfigData: [{
+                type: Input,
+                args: ['datasetmodal']
+            }] } });
+
 class CreateCompViewComponent {
     constructor(toastr, commonService, service, kpiService, router, activatedRoute, environment) {
         this.toastr = toastr;
@@ -5738,10 +6157,10 @@ class CreateCompViewComponent {
     }
 }
 CreateCompViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CreateCompViewComponent, deps: [{ token: i2$1.ToastrService }, { token: CommonService }, { token: ApplicationContentService }, { token: kpicommonService$2 }, { token: i4.Router }, { token: i4.ActivatedRoute }, { token: APP_ENVIRONMENT }], target: i0.ɵɵFactoryTarget.Component });
-CreateCompViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CreateCompViewComponent, selector: "app-create-comp-view", inputs: { kpiTreeData: "kpiTreeData", isHeader: "isHeader", selectedViewId: "selectedViewId" }, ngImport: i0, template: "<div class=\"flex flex-col flex-auto min-w-0\">\n    <lib-common-header [pageTitle]=\"'Views Editor'\" *ngIf=\"isHeader\"></lib-common-header>\n    <div>\n        <div class=\"p-2 w-full\">\n            <div\n                class=\"m-3 p-4 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700\">\n                <div class=\"flex flex-row justify-between\">\n                    <div class=\"mx-2 w-full\">\n                        <div class=\"text-md mb-2\">Dataset List <span *ngIf=\"isFilterInputs\"\n                                class=\"text-blue-500 cursor-pointer\"><i class=\"fa fa-pencil\"\n                                    (click)=\"getEditDataSet()\"></i></span></div>\n                        <dx-select-box [items]=\"dataSettableDataSource\" (onValueChanged)=\"getDataSetDetails($event)\"\n                            displayExpr=\"datasetName\" valueExpr=\"datasetId\" [searchEnabled]=\"true\"\n                            [value]=\"selectedDataSetOnedit.datasetId\"></dx-select-box>\n                    </div>\n                    <div class=\"mx-2 w-full\">\n                        <div class=\"text-md mb-2\">Select View Type</div>\n                        <dx-select-box [items]=\"['chart','table','groupTable','others']\" [(ngModel)]=\"selectedViewType\"\n                            (onValueChanged)=\"getViewType($event)\"></dx-select-box>\n                    </div>\n                    <ng-container *ngIf=\"selectedViewType =='others'\">\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md mb-2\">Select Component</div>\n                            <dx-select-box [items]=\"componentNamesOthers\" displayExpr=\"item\" valueExpr=\"compName\"\n                                [(ngModel)]=\"componentName\"></dx-select-box>\n                        </div>\n                    </ng-container>\n\n                    <div class=\"mx-2 w-full\">\n                        <div class=\"text-md mb-2\">View Name</div>\n                        <dx-text-box [(ngModel)]=\"creatCompViewObject.viewName\"></dx-text-box>\n                    </div>\n                    <div class=\"mx-2 w-full\">\n                        <div class=\"text-md mb-2\">View Label</div>\n                        <dx-text-box [(ngModel)]=\"creatCompViewObject.viewLabel\"></dx-text-box>\n                    </div>\n                </div>\n                <ng-container *ngIf=\"isFilterInputs\">\n                    <div class=\"flex flex-row mt-2\">\n                        <ng-container *ngFor=\"let request of selectedDataSet.config.queryConfig.mapedFilters\">\n                            <div class=\"m-2\">\n                                <div class=\"text-md mb-1\"> {{getCapitalize(request.localColumn)}}</div>\n                                <dx-date-box displayFormat=\"yyyy-MM-dd\" type=\"date\"\n                                    (onValueChanged)=\"startDateChange($event,request)\"\n                                    *ngIf=\"getFilter(request.localColumn)\">\n                                </dx-date-box>\n                                <dx-text-box [(ngModel)]=\"request.defaultValue\"\n                                    *ngIf=\"!getFilter(request.localColumn)\"></dx-text-box>\n                            </div>\n                        </ng-container>\n                    </div>\n                </ng-container>\n\n                <div class=\"flex flex-row mt-5 justify-center items-center\">\n                    <button class=\"{{commonService.btn_success_md}}\" (click)=\"addNewView()\">\n                        Reset View\n                    </button>\n                    <button class=\"{{commonService.btn_primary_md}} cursor-pointer mx-4 my-2\" (click)=\"createNewView()\">\n                        Proceed\n                    </button>\n\n                </div>\n                <div class=\"m-5 border\">\n                    <div class=\"m-2\">\n                        <div class=\"mt-5\">\n                            <app-loader *ngIf=\"isLoader\"></app-loader>\n                            <!-- for chart view -->\n                            <ng-container *ngIf=\"isGenerate\">\n                                <ng-container *ngIf=\"selectedViewType == 'chart'\">\n                                    <app-dash-chart [datasetmodal]=\"dataSourceModal\"\n                                        (getChartConfigOutPut)=\"getEmitNewChartCongig($event)\"></app-dash-chart>\n                                </ng-container>\n                                <!-- for table view -->\n                                <ng-container *ngIf=\"selectedViewType == 'table' || selectedViewType == 'groupTable'\">\n                                    <app-dash-table [datasetmodal]=\"dataSourceModal\"\n                                        (getTableConfigOutPut)=\"getEmitNewTableConfig($event)\"></app-dash-table>\n                                </ng-container>\n                                <!-- for others view  -->\n                                <ng-container *ngIf=\"selectedViewType == 'others'\">\n                                    <ng-container *ngIf=\"componentName == 'GammaTableWithPercentageComponent'\">\n                                        <app-table-with-bar [datasetmodal]=\"dataSourceModal\"\n                                            (createOtherComponentView)=\"getEmitNewOtherSetCongig($event)\"></app-table-with-bar>\n                                    </ng-container>\n                                    <ng-container\n                                        *ngIf=\"componentName == 'GammaGeoChartComponent' &&  componentName != 'GammaTableWithPercentageComponent'\">\n                                        <!-- <app-gamma-geo-chart></app-gamma-geo-chart> -->\n                                        <app-geo-map [datasetmodal]=\"dataSourceModal\"\n                                            (createOtherComponentView)=\"getEmitNewOtherSetCongig($event)\"></app-geo-map>\n                                    </ng-container>\n                                    <ng-container\n                                    *ngIf=\"componentName != 'GammaTableWithPercentageComponent' && componentName != 'GammaGeoChartComponent'\">\n                                        <lib-dash-today-previous [datasetmodal]=\"dataSourceModal\"\n                                        (gettodayPreviousConfigOutPut)=\"getEmitNewOtherSetCongig($event)\"></lib-dash-today-previous>\n                                </ng-container>\n\n                             \n                                </ng-container>\n                            </ng-container>\n                        </div>\n\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i11.DxDateBoxComponent, selector: "dx-date-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "adaptivityEnabled", "applyButtonText", "applyValueMode", "buttons", "calendarOptions", "cancelButtonText", "dateOutOfRangeMessage", "dateSerializationFormat", "deferRendering", "disabled", "disabledDates", "displayFormat", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "interval", "invalidDateMessage", "isValid", "label", "labelMode", "max", "maxLength", "min", "name", "opened", "openOnFieldClick", "pickerType", "placeholder", "readOnly", "rtlEnabled", "showAnalogClock", "showClearButton", "showDropDownButton", "spellcheck", "stylingMode", "tabIndex", "text", "type", "useMaskBehavior", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onClosed", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOpened", "onOptionChanged", "onPaste", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "adaptivityEnabledChange", "applyButtonTextChange", "applyValueModeChange", "buttonsChange", "calendarOptionsChange", "cancelButtonTextChange", "dateOutOfRangeMessageChange", "dateSerializationFormatChange", "deferRenderingChange", "disabledChange", "disabledDatesChange", "displayFormatChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "intervalChange", "invalidDateMessageChange", "isValidChange", "labelChange", "labelModeChange", "maxChange", "maxLengthChange", "minChange", "nameChange", "openedChange", "openOnFieldClickChange", "pickerTypeChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showAnalogClockChange", "showClearButtonChange", "showDropDownButtonChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "typeChange", "useMaskBehaviorChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "component", type: i6$1.DxSelectBoxComponent, selector: "dx-select-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "buttons", "dataSource", "deferRendering", "disabled", "displayExpr", "displayValue", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "fieldTemplate", "focusStateEnabled", "grouped", "groupTemplate", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "items", "itemTemplate", "label", "labelMode", "maxLength", "minSearchLength", "name", "noDataText", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "searchEnabled", "searchExpr", "searchMode", "searchTimeout", "selectedItem", "showClearButton", "showDataBeforeSearch", "showDropDownButton", "showSelectionControls", "spellcheck", "stylingMode", "tabIndex", "text", "useItemTextAsTitle", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueChangeEvent", "valueExpr", "visible", "width", "wrapItemText"], outputs: ["onChange", "onClosed", "onContentReady", "onCopy", "onCustomItemCreating", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onItemClick", "onKeyDown", "onKeyUp", "onOpened", "onOptionChanged", "onPaste", "onSelectionChanged", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "dataSourceChange", "deferRenderingChange", "disabledChange", "displayExprChange", "displayValueChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "groupedChange", "groupTemplateChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "itemsChange", "itemTemplateChange", "labelChange", "labelModeChange", "maxLengthChange", "minSearchLengthChange", "nameChange", "noDataTextChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "searchEnabledChange", "searchExprChange", "searchModeChange", "searchTimeoutChange", "selectedItemChange", "showClearButtonChange", "showDataBeforeSearchChange", "showDropDownButtonChange", "showSelectionControlsChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useItemTextAsTitleChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "valueExprChange", "visibleChange", "widthChange", "wrapItemTextChange", "onBlur"] }, { kind: "component", type: i7.DxTextBoxComponent, selector: "dx-text-box", inputs: ["accessKey", "activeStateEnabled", "buttons", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "label", "labelMode", "mask", "maskChar", "maskInvalidMessage", "maskRules", "maxLength", "mode", "name", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showMaskMode", "spellcheck", "stylingMode", "tabIndex", "text", "useMaskedValue", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOptionChanged", "onPaste", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "labelChange", "labelModeChange", "maskChange", "maskCharChange", "maskInvalidMessageChange", "maskRulesChange", "maxLengthChange", "modeChange", "nameChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showMaskModeChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useMaskedValueChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: GeoMapComponent, selector: "app-geo-map", inputs: ["datasetmodal"], outputs: ["createOtherComponentView"] }, { kind: "component", type: DashChartComponent, selector: "app-dash-chart", inputs: ["datasetmodal"], outputs: ["getChartConfigOutPut"] }, { kind: "component", type: DashTableComponent, selector: "app-dash-table", inputs: ["datasetmodal"], outputs: ["getTableConfigOutPut"] }, { kind: "component", type: TableWithBarComponent, selector: "app-table-with-bar", inputs: ["datasetmodal"], outputs: ["createOtherComponentView"] }, { kind: "component", type: LoaderComponent, selector: "app-loader" }, { kind: "component", type: CommonHeaderComponent, selector: "lib-common-header", inputs: ["pageTitle"] }, { kind: "component", type: DashTodayPreviousComponent, selector: "lib-dash-today-previous", inputs: ["datasetmodal"], outputs: ["gettodayPreviousConfigOutPut"] }] });
+CreateCompViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CreateCompViewComponent, selector: "app-create-comp-view", inputs: { kpiTreeData: "kpiTreeData", isHeader: "isHeader", selectedViewId: "selectedViewId" }, ngImport: i0, template: "<div class=\"flex flex-col flex-auto min-w-0\">\n    <lib-common-header [pageTitle]=\"'Views Editor'\" *ngIf=\"isHeader\"></lib-common-header>\n    <div>\n        <div class=\"p-2 w-full\">\n            <div\n                class=\"m-3 p-4 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700\">\n                <div class=\"flex flex-row justify-between\">\n                    <div class=\"mx-2 w-full\">\n                        <div class=\"text-md mb-2\">Dataset List <span *ngIf=\"isFilterInputs\"\n                                class=\"text-blue-500 cursor-pointer\"><i class=\"fa fa-pencil\"\n                                    (click)=\"getEditDataSet()\"></i></span></div>\n                        <dx-select-box [items]=\"dataSettableDataSource\" (onValueChanged)=\"getDataSetDetails($event)\"\n                            displayExpr=\"datasetName\" valueExpr=\"datasetId\" [searchEnabled]=\"true\"\n                            [value]=\"selectedDataSetOnedit.datasetId\"></dx-select-box>\n                    </div>\n                    <div class=\"mx-2 w-full\">\n                        <div class=\"text-md mb-2\">Select View Type</div>\n                        <dx-select-box [items]=\"['chart','table','groupTable','others']\" [(ngModel)]=\"selectedViewType\"\n                            (onValueChanged)=\"getViewType($event)\"></dx-select-box>\n                    </div>\n                    <ng-container *ngIf=\"selectedViewType =='others'\">\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md mb-2\">Select Component</div>\n                            <dx-select-box [items]=\"componentNamesOthers\" displayExpr=\"item\" valueExpr=\"compName\"\n                                [(ngModel)]=\"componentName\"></dx-select-box>\n                        </div>\n                    </ng-container>\n\n                    <div class=\"mx-2 w-full\">\n                        <div class=\"text-md mb-2\">View Name</div>\n                        <dx-text-box [(ngModel)]=\"creatCompViewObject.viewName\"></dx-text-box>\n                    </div>\n                    <div class=\"mx-2 w-full\">\n                        <div class=\"text-md mb-2\">View Label</div>\n                        <dx-text-box [(ngModel)]=\"creatCompViewObject.viewLabel\"></dx-text-box>\n                    </div>\n                </div>\n                <ng-container *ngIf=\"isFilterInputs\">\n                    <div class=\"flex flex-row mt-2\">\n                        <ng-container *ngFor=\"let request of selectedDataSet.config.queryConfig.mapedFilters\">\n                            <div class=\"m-2\">\n                                <div class=\"text-md mb-1\"> {{getCapitalize(request.localColumn)}}</div>\n                                <dx-date-box displayFormat=\"yyyy-MM-dd\" type=\"date\"\n                                    (onValueChanged)=\"startDateChange($event,request)\"\n                                    *ngIf=\"getFilter(request.localColumn)\">\n                                </dx-date-box>\n                                <dx-text-box [(ngModel)]=\"request.defaultValue\"\n                                    *ngIf=\"!getFilter(request.localColumn)\"></dx-text-box>\n                            </div>\n                        </ng-container>\n                    </div>\n                </ng-container>\n\n                <div class=\"flex flex-row mt-5 justify-center items-center\">\n                    <button class=\"{{commonService.btn_success_md}}\" (click)=\"addNewView()\">\n                        Reset View\n                    </button>\n                    <button class=\"{{commonService.btn_primary_md}} cursor-pointer mx-4 my-2\" (click)=\"createNewView()\">\n                        Proceed\n                    </button>\n\n\n                </div>\n                <div class=\"m-5 border\">\n                    <div class=\"m-2\">\n                        <div class=\"mt-5\">\n                            <app-loader *ngIf=\"isLoader\"></app-loader>\n                            <!-- for chart view -->\n                            <ng-container *ngIf=\"isGenerate\">\n                                <ng-container *ngIf=\"selectedViewType == 'chart'\">\n                                    <app-dash-chart [datasetmodal]=\"dataSourceModal\"\n                                        (getChartConfigOutPut)=\"getEmitNewChartCongig($event)\"></app-dash-chart>\n                                </ng-container>\n                                <!-- for table view -->\n                                <ng-container *ngIf=\"selectedViewType == 'table' || selectedViewType == 'groupTable'\">\n                                    <app-dash-table [datasetmodal]=\"dataSourceModal\"\n                                        (getTableConfigOutPut)=\"getEmitNewTableConfig($event)\"></app-dash-table>\n                                </ng-container>\n                                <!-- for others view  -->\n                                <ng-container *ngIf=\"selectedViewType == 'others'\">\n                                    <ng-container *ngIf=\"componentName == 'GammaTableWithPercentageComponent'\">\n                                        <app-table-with-bar [datasetmodal]=\"dataSourceModal\"\n                                            (createOtherComponentView)=\"getEmitNewOtherSetCongig($event)\"></app-table-with-bar>\n                                    </ng-container>\n                                    <ng-container\n                                        *ngIf=\"componentName == 'GammaGeoChartComponent' &&  componentName != 'GammaTableWithPercentageComponent'\">\n                                        <!-- <app-gamma-geo-chart></app-gamma-geo-chart> -->\n                                        <app-geo-map [datasetmodal]=\"dataSourceModal\"\n                                            (createOtherComponentView)=\"getEmitNewOtherSetCongig($event)\"></app-geo-map>\n                                    </ng-container>\n                                    <ng-container\n                                    *ngIf=\"componentName != 'GammaTableWithPercentageComponent' && componentName != 'GammaGeoChartComponent' &&  componentName != 'GammSingleNumberCardComponent'\">\n                                        <lib-dash-today-previous [datasetmodal]=\"dataSourceModal\"\n                                        (gettodayPreviousConfigOutPut)=\"getEmitNewOtherSetCongig($event)\"></lib-dash-today-previous>\n                                    </ng-container>\n\n                                    <ng-container\n                                     *ngIf=\"componentName != 'GammaTableWithPercentageComponent' && componentName != 'GammaGeoChartComponent' && componentName != 'GammaTodayPreviousComponent'\">\n                                        <lib-single-card [datasetmodal]=\"dataSourceModal\"\n                                        (getSingleCardConfigOutPut)=\"getEmitNewOtherSetCongig($event)\">\n                                        </lib-single-card>\n                                     </ng-container>\n\n                                     \n                                </ng-container>\n                            </ng-container>\n                        </div>\n\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i11.DxDateBoxComponent, selector: "dx-date-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "adaptivityEnabled", "applyButtonText", "applyValueMode", "buttons", "calendarOptions", "cancelButtonText", "dateOutOfRangeMessage", "dateSerializationFormat", "deferRendering", "disabled", "disabledDates", "displayFormat", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "interval", "invalidDateMessage", "isValid", "label", "labelMode", "max", "maxLength", "min", "name", "opened", "openOnFieldClick", "pickerType", "placeholder", "readOnly", "rtlEnabled", "showAnalogClock", "showClearButton", "showDropDownButton", "spellcheck", "stylingMode", "tabIndex", "text", "type", "useMaskBehavior", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onClosed", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOpened", "onOptionChanged", "onPaste", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "adaptivityEnabledChange", "applyButtonTextChange", "applyValueModeChange", "buttonsChange", "calendarOptionsChange", "cancelButtonTextChange", "dateOutOfRangeMessageChange", "dateSerializationFormatChange", "deferRenderingChange", "disabledChange", "disabledDatesChange", "displayFormatChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "intervalChange", "invalidDateMessageChange", "isValidChange", "labelChange", "labelModeChange", "maxChange", "maxLengthChange", "minChange", "nameChange", "openedChange", "openOnFieldClickChange", "pickerTypeChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showAnalogClockChange", "showClearButtonChange", "showDropDownButtonChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "typeChange", "useMaskBehaviorChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "component", type: i6$1.DxSelectBoxComponent, selector: "dx-select-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "buttons", "dataSource", "deferRendering", "disabled", "displayExpr", "displayValue", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "fieldTemplate", "focusStateEnabled", "grouped", "groupTemplate", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "items", "itemTemplate", "label", "labelMode", "maxLength", "minSearchLength", "name", "noDataText", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "searchEnabled", "searchExpr", "searchMode", "searchTimeout", "selectedItem", "showClearButton", "showDataBeforeSearch", "showDropDownButton", "showSelectionControls", "spellcheck", "stylingMode", "tabIndex", "text", "useItemTextAsTitle", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueChangeEvent", "valueExpr", "visible", "width", "wrapItemText"], outputs: ["onChange", "onClosed", "onContentReady", "onCopy", "onCustomItemCreating", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onItemClick", "onKeyDown", "onKeyUp", "onOpened", "onOptionChanged", "onPaste", "onSelectionChanged", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "dataSourceChange", "deferRenderingChange", "disabledChange", "displayExprChange", "displayValueChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "groupedChange", "groupTemplateChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "itemsChange", "itemTemplateChange", "labelChange", "labelModeChange", "maxLengthChange", "minSearchLengthChange", "nameChange", "noDataTextChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "searchEnabledChange", "searchExprChange", "searchModeChange", "searchTimeoutChange", "selectedItemChange", "showClearButtonChange", "showDataBeforeSearchChange", "showDropDownButtonChange", "showSelectionControlsChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useItemTextAsTitleChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "valueExprChange", "visibleChange", "widthChange", "wrapItemTextChange", "onBlur"] }, { kind: "component", type: i7.DxTextBoxComponent, selector: "dx-text-box", inputs: ["accessKey", "activeStateEnabled", "buttons", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "label", "labelMode", "mask", "maskChar", "maskInvalidMessage", "maskRules", "maxLength", "mode", "name", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showMaskMode", "spellcheck", "stylingMode", "tabIndex", "text", "useMaskedValue", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOptionChanged", "onPaste", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "labelChange", "labelModeChange", "maskChange", "maskCharChange", "maskInvalidMessageChange", "maskRulesChange", "maxLengthChange", "modeChange", "nameChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showMaskModeChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useMaskedValueChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: GeoMapComponent, selector: "app-geo-map", inputs: ["datasetmodal"], outputs: ["createOtherComponentView"] }, { kind: "component", type: DashChartComponent, selector: "app-dash-chart", inputs: ["datasetmodal"], outputs: ["getChartConfigOutPut"] }, { kind: "component", type: DashTableComponent, selector: "app-dash-table", inputs: ["datasetmodal"], outputs: ["getTableConfigOutPut"] }, { kind: "component", type: TableWithBarComponent, selector: "app-table-with-bar", inputs: ["datasetmodal"], outputs: ["createOtherComponentView"] }, { kind: "component", type: LoaderComponent, selector: "app-loader" }, { kind: "component", type: CommonHeaderComponent, selector: "lib-common-header", inputs: ["pageTitle"] }, { kind: "component", type: DashTodayPreviousComponent, selector: "lib-dash-today-previous", inputs: ["datasetmodal"], outputs: ["gettodayPreviousConfigOutPut"] }, { kind: "component", type: SingleCardComponent, selector: "lib-single-card", inputs: ["datasetmodal"], outputs: ["getSingleCardConfigOutPut"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CreateCompViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-create-comp-view', template: "<div class=\"flex flex-col flex-auto min-w-0\">\n    <lib-common-header [pageTitle]=\"'Views Editor'\" *ngIf=\"isHeader\"></lib-common-header>\n    <div>\n        <div class=\"p-2 w-full\">\n            <div\n                class=\"m-3 p-4 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700\">\n                <div class=\"flex flex-row justify-between\">\n                    <div class=\"mx-2 w-full\">\n                        <div class=\"text-md mb-2\">Dataset List <span *ngIf=\"isFilterInputs\"\n                                class=\"text-blue-500 cursor-pointer\"><i class=\"fa fa-pencil\"\n                                    (click)=\"getEditDataSet()\"></i></span></div>\n                        <dx-select-box [items]=\"dataSettableDataSource\" (onValueChanged)=\"getDataSetDetails($event)\"\n                            displayExpr=\"datasetName\" valueExpr=\"datasetId\" [searchEnabled]=\"true\"\n                            [value]=\"selectedDataSetOnedit.datasetId\"></dx-select-box>\n                    </div>\n                    <div class=\"mx-2 w-full\">\n                        <div class=\"text-md mb-2\">Select View Type</div>\n                        <dx-select-box [items]=\"['chart','table','groupTable','others']\" [(ngModel)]=\"selectedViewType\"\n                            (onValueChanged)=\"getViewType($event)\"></dx-select-box>\n                    </div>\n                    <ng-container *ngIf=\"selectedViewType =='others'\">\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md mb-2\">Select Component</div>\n                            <dx-select-box [items]=\"componentNamesOthers\" displayExpr=\"item\" valueExpr=\"compName\"\n                                [(ngModel)]=\"componentName\"></dx-select-box>\n                        </div>\n                    </ng-container>\n\n                    <div class=\"mx-2 w-full\">\n                        <div class=\"text-md mb-2\">View Name</div>\n                        <dx-text-box [(ngModel)]=\"creatCompViewObject.viewName\"></dx-text-box>\n                    </div>\n                    <div class=\"mx-2 w-full\">\n                        <div class=\"text-md mb-2\">View Label</div>\n                        <dx-text-box [(ngModel)]=\"creatCompViewObject.viewLabel\"></dx-text-box>\n                    </div>\n                </div>\n                <ng-container *ngIf=\"isFilterInputs\">\n                    <div class=\"flex flex-row mt-2\">\n                        <ng-container *ngFor=\"let request of selectedDataSet.config.queryConfig.mapedFilters\">\n                            <div class=\"m-2\">\n                                <div class=\"text-md mb-1\"> {{getCapitalize(request.localColumn)}}</div>\n                                <dx-date-box displayFormat=\"yyyy-MM-dd\" type=\"date\"\n                                    (onValueChanged)=\"startDateChange($event,request)\"\n                                    *ngIf=\"getFilter(request.localColumn)\">\n                                </dx-date-box>\n                                <dx-text-box [(ngModel)]=\"request.defaultValue\"\n                                    *ngIf=\"!getFilter(request.localColumn)\"></dx-text-box>\n                            </div>\n                        </ng-container>\n                    </div>\n                </ng-container>\n\n                <div class=\"flex flex-row mt-5 justify-center items-center\">\n                    <button class=\"{{commonService.btn_success_md}}\" (click)=\"addNewView()\">\n                        Reset View\n                    </button>\n                    <button class=\"{{commonService.btn_primary_md}} cursor-pointer mx-4 my-2\" (click)=\"createNewView()\">\n                        Proceed\n                    </button>\n\n                </div>\n                <div class=\"m-5 border\">\n                    <div class=\"m-2\">\n                        <div class=\"mt-5\">\n                            <app-loader *ngIf=\"isLoader\"></app-loader>\n                            <!-- for chart view -->\n                            <ng-container *ngIf=\"isGenerate\">\n                                <ng-container *ngIf=\"selectedViewType == 'chart'\">\n                                    <app-dash-chart [datasetmodal]=\"dataSourceModal\"\n                                        (getChartConfigOutPut)=\"getEmitNewChartCongig($event)\"></app-dash-chart>\n                                </ng-container>\n                                <!-- for table view -->\n                                <ng-container *ngIf=\"selectedViewType == 'table' || selectedViewType == 'groupTable'\">\n                                    <app-dash-table [datasetmodal]=\"dataSourceModal\"\n                                        (getTableConfigOutPut)=\"getEmitNewTableConfig($event)\"></app-dash-table>\n                                </ng-container>\n                                <!-- for others view  -->\n                                <ng-container *ngIf=\"selectedViewType == 'others'\">\n                                    <ng-container *ngIf=\"componentName == 'GammaTableWithPercentageComponent'\">\n                                        <app-table-with-bar [datasetmodal]=\"dataSourceModal\"\n                                            (createOtherComponentView)=\"getEmitNewOtherSetCongig($event)\"></app-table-with-bar>\n                                    </ng-container>\n                                    <ng-container\n                                        *ngIf=\"componentName == 'GammaGeoChartComponent' &&  componentName != 'GammaTableWithPercentageComponent'\">\n                                        <!-- <app-gamma-geo-chart></app-gamma-geo-chart> -->\n                                        <app-geo-map [datasetmodal]=\"dataSourceModal\"\n                                            (createOtherComponentView)=\"getEmitNewOtherSetCongig($event)\"></app-geo-map>\n                                    </ng-container>\n                                    <ng-container\n                                    *ngIf=\"componentName != 'GammaTableWithPercentageComponent' && componentName != 'GammaGeoChartComponent'\">\n                                        <lib-dash-today-previous [datasetmodal]=\"dataSourceModal\"\n                                        (gettodayPreviousConfigOutPut)=\"getEmitNewOtherSetCongig($event)\"></lib-dash-today-previous>\n                                </ng-container>\n\n                             \n                                </ng-container>\n                            </ng-container>\n                        </div>\n\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n" }]
+            args: [{ selector: 'app-create-comp-view', template: "<div class=\"flex flex-col flex-auto min-w-0\">\n    <lib-common-header [pageTitle]=\"'Views Editor'\" *ngIf=\"isHeader\"></lib-common-header>\n    <div>\n        <div class=\"p-2 w-full\">\n            <div\n                class=\"m-3 p-4 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700\">\n                <div class=\"flex flex-row justify-between\">\n                    <div class=\"mx-2 w-full\">\n                        <div class=\"text-md mb-2\">Dataset List <span *ngIf=\"isFilterInputs\"\n                                class=\"text-blue-500 cursor-pointer\"><i class=\"fa fa-pencil\"\n                                    (click)=\"getEditDataSet()\"></i></span></div>\n                        <dx-select-box [items]=\"dataSettableDataSource\" (onValueChanged)=\"getDataSetDetails($event)\"\n                            displayExpr=\"datasetName\" valueExpr=\"datasetId\" [searchEnabled]=\"true\"\n                            [value]=\"selectedDataSetOnedit.datasetId\"></dx-select-box>\n                    </div>\n                    <div class=\"mx-2 w-full\">\n                        <div class=\"text-md mb-2\">Select View Type</div>\n                        <dx-select-box [items]=\"['chart','table','groupTable','others']\" [(ngModel)]=\"selectedViewType\"\n                            (onValueChanged)=\"getViewType($event)\"></dx-select-box>\n                    </div>\n                    <ng-container *ngIf=\"selectedViewType =='others'\">\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md mb-2\">Select Component</div>\n                            <dx-select-box [items]=\"componentNamesOthers\" displayExpr=\"item\" valueExpr=\"compName\"\n                                [(ngModel)]=\"componentName\"></dx-select-box>\n                        </div>\n                    </ng-container>\n\n                    <div class=\"mx-2 w-full\">\n                        <div class=\"text-md mb-2\">View Name</div>\n                        <dx-text-box [(ngModel)]=\"creatCompViewObject.viewName\"></dx-text-box>\n                    </div>\n                    <div class=\"mx-2 w-full\">\n                        <div class=\"text-md mb-2\">View Label</div>\n                        <dx-text-box [(ngModel)]=\"creatCompViewObject.viewLabel\"></dx-text-box>\n                    </div>\n                </div>\n                <ng-container *ngIf=\"isFilterInputs\">\n                    <div class=\"flex flex-row mt-2\">\n                        <ng-container *ngFor=\"let request of selectedDataSet.config.queryConfig.mapedFilters\">\n                            <div class=\"m-2\">\n                                <div class=\"text-md mb-1\"> {{getCapitalize(request.localColumn)}}</div>\n                                <dx-date-box displayFormat=\"yyyy-MM-dd\" type=\"date\"\n                                    (onValueChanged)=\"startDateChange($event,request)\"\n                                    *ngIf=\"getFilter(request.localColumn)\">\n                                </dx-date-box>\n                                <dx-text-box [(ngModel)]=\"request.defaultValue\"\n                                    *ngIf=\"!getFilter(request.localColumn)\"></dx-text-box>\n                            </div>\n                        </ng-container>\n                    </div>\n                </ng-container>\n\n                <div class=\"flex flex-row mt-5 justify-center items-center\">\n                    <button class=\"{{commonService.btn_success_md}}\" (click)=\"addNewView()\">\n                        Reset View\n                    </button>\n                    <button class=\"{{commonService.btn_primary_md}} cursor-pointer mx-4 my-2\" (click)=\"createNewView()\">\n                        Proceed\n                    </button>\n\n\n                </div>\n                <div class=\"m-5 border\">\n                    <div class=\"m-2\">\n                        <div class=\"mt-5\">\n                            <app-loader *ngIf=\"isLoader\"></app-loader>\n                            <!-- for chart view -->\n                            <ng-container *ngIf=\"isGenerate\">\n                                <ng-container *ngIf=\"selectedViewType == 'chart'\">\n                                    <app-dash-chart [datasetmodal]=\"dataSourceModal\"\n                                        (getChartConfigOutPut)=\"getEmitNewChartCongig($event)\"></app-dash-chart>\n                                </ng-container>\n                                <!-- for table view -->\n                                <ng-container *ngIf=\"selectedViewType == 'table' || selectedViewType == 'groupTable'\">\n                                    <app-dash-table [datasetmodal]=\"dataSourceModal\"\n                                        (getTableConfigOutPut)=\"getEmitNewTableConfig($event)\"></app-dash-table>\n                                </ng-container>\n                                <!-- for others view  -->\n                                <ng-container *ngIf=\"selectedViewType == 'others'\">\n                                    <ng-container *ngIf=\"componentName == 'GammaTableWithPercentageComponent'\">\n                                        <app-table-with-bar [datasetmodal]=\"dataSourceModal\"\n                                            (createOtherComponentView)=\"getEmitNewOtherSetCongig($event)\"></app-table-with-bar>\n                                    </ng-container>\n                                    <ng-container\n                                        *ngIf=\"componentName == 'GammaGeoChartComponent' &&  componentName != 'GammaTableWithPercentageComponent'\">\n                                        <!-- <app-gamma-geo-chart></app-gamma-geo-chart> -->\n                                        <app-geo-map [datasetmodal]=\"dataSourceModal\"\n                                            (createOtherComponentView)=\"getEmitNewOtherSetCongig($event)\"></app-geo-map>\n                                    </ng-container>\n                                    <ng-container\n                                    *ngIf=\"componentName != 'GammaTableWithPercentageComponent' && componentName != 'GammaGeoChartComponent' &&  componentName != 'GammSingleNumberCardComponent'\">\n                                        <lib-dash-today-previous [datasetmodal]=\"dataSourceModal\"\n                                        (gettodayPreviousConfigOutPut)=\"getEmitNewOtherSetCongig($event)\"></lib-dash-today-previous>\n                                    </ng-container>\n\n                                    <ng-container\n                                     *ngIf=\"componentName != 'GammaTableWithPercentageComponent' && componentName != 'GammaGeoChartComponent' && componentName != 'GammaTodayPreviousComponent'\">\n                                        <lib-single-card [datasetmodal]=\"dataSourceModal\"\n                                        (getSingleCardConfigOutPut)=\"getEmitNewOtherSetCongig($event)\">\n                                        </lib-single-card>\n                                     </ng-container>\n\n                                     \n                                </ng-container>\n                            </ng-container>\n                        </div>\n\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i2$1.ToastrService }, { type: CommonService }, { type: ApplicationContentService }, { type: kpicommonService$2 }, { type: i4.Router }, { type: i4.ActivatedRoute }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [APP_ENVIRONMENT]
@@ -7082,9 +7501,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             }] } });
 
 class GammSingleNumberCardComponent {
-    constructor(commonService, toastr) {
+    constructor(commonService, toastr, cdr) {
         this.commonService = commonService;
         this.toastr = toastr;
+        this.cdr = cdr;
         this.isLoader = true;
         this.colors = [
             "text-green-500",
@@ -7095,37 +7515,46 @@ class GammSingleNumberCardComponent {
         ];
     }
     set chartDataSource(value) {
-        if (value === undefined || value.length === 0) {
+        this.objectdataSource = value;
+        if (!this.objectdataSource || this.objectdataSource.length === 0) {
+            this.isChartvisible = false;
             return;
         }
         else {
-            if (value.kpiConfig.dataSource && value.kpiConfig.dataSource.length !== 0) {
-                if (value.kpiConfig.formate == "daily") {
-                    const sortedData = value.kpiConfig.dataSource
-                        .filter(record => record.recordDate)
-                        .sort((a, b) => moment(b.recordDate).diff(moment(a.recordDate)));
-                    this.page_config = sortedData[0];
+            this.isLoader = true;
+            this.selectedColumn = value.kpiConfig?.dataConfig?.columns?.[0]?.dataField || "";
+            this.sortBy = value.kpiConfig?.dataConfig?.sortBy;
+            if (value.kpiConfig.dataSource?.length) {
+                this.page_config = value;
+                let sortedData = value.kpiConfig.dataSource;
+                if (this.sortBy?.length) {
+                    let sortKey = this.sortBy[0];
+                    sortedData = sortedData.sort((a, b) => moment(b[sortKey], "YYYY-MM-DD").diff(moment(a[sortKey], "YYYY-MM-DD")));
                 }
-                else if (value.kpiConfig.formate == "monthly") {
+                if (value.kpiConfig.formate === "daily") {
+                    this.currentDateData = sortedData.length ? this.commonService.abbreviateNumber(sortedData[0][this.selectedColumn] || 0) : "0";
+                }
+                else if (value.kpiConfig.formate === "monthly") {
+                    let total = sortedData.reduce((sum, item) => {
+                        let value = Number(item[this.selectedColumn]) || 0;
+                        return sum + value;
+                    }, 0);
+                    this.currentDateData = this.commonService.abbreviateNumber(total);
                 }
                 this.isLoader = false;
             }
-            else {
-            }
         }
     }
     getDynamicValue(data) {
-        const keys = Object.keys(data);
-        const dynamicKey = keys.find(key => !key.toLowerCase().includes('date'));
-        if (dynamicKey) {
-            let value = data[dynamicKey];
-            const numericValue = Number(value);
-            if (!isNaN(numericValue)) {
-                return this.commonService.abbreviateNumber(numericValue);
-            }
-            return value;
+        if (!this.selectedColumn || !data.hasOwnProperty(this.selectedColumn)) {
+            return null;
         }
-        return null;
+        let value = data[this.selectedColumn];
+        const numericValue = Number(value);
+        if (!isNaN(numericValue)) {
+            return this.commonService.abbreviateNumber(numericValue);
+        }
+        return value;
     }
     ngOnInit() {
         this.randomColorClass = this.getRandomColor();
@@ -7134,13 +7563,27 @@ class GammSingleNumberCardComponent {
         const randomIndex = Math.floor(Math.random() * this.colors.length);
         return this.colors[randomIndex];
     }
+    formatNumber(value) {
+        if (value >= 1e9) {
+            return (value / 1e9).toFixed(1) + 'B';
+        }
+        else if (value >= 1e6) {
+            return (value / 1e6).toFixed(1) + 'M';
+        }
+        else if (value >= 1e3) {
+            return (value / 1e3).toFixed(1) + 'K';
+        }
+        else {
+            return value.toString();
+        }
+    }
 }
-GammSingleNumberCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GammSingleNumberCardComponent, deps: [{ token: CommonService }, { token: i2$1.ToastrService }], target: i0.ɵɵFactoryTarget.Component });
-GammSingleNumberCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: GammSingleNumberCardComponent, selector: "app-gamm-single-number-card", inputs: { chartDataSource: "chartDataSource" }, ngImport: i0, template: "<div class=\"flex flex-row justify-center items-start bg-gray-800 p-4 mx-2 text-center\">\n    <ng-container *ngIf=\"isLoader\">\n        <app-loader></app-loader>\n    </ng-container>\n    <ng-container *ngIf=\"!isLoader\">\n        <div class=\"flex justify-center items-center text-4xl font-bold p-2 {{randomColorClass}}\">\n            {{ getDynamicValue(page_config) }}\n        </div>\n    </ng-container>\n\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoaderComponent, selector: "app-loader" }] });
+GammSingleNumberCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GammSingleNumberCardComponent, deps: [{ token: CommonService }, { token: i2$1.ToastrService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+GammSingleNumberCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: GammSingleNumberCardComponent, selector: "app-gamm-single-number-card", inputs: { chartDataSource: "chartDataSource" }, ngImport: i0, template: "<div class=\"flex flex-row justify-center items-start bg-gray-800 p-4 mx-2 text-center\">\n    <ng-container *ngIf=\"isLoader\">\n        <app-loader></app-loader>\n    </ng-container>\n    <ng-container *ngIf=\"!isLoader\">\n        <div class=\"flex justify-center items-center text-4xl font-bold p-2 {{randomColorClass}}\">\n            {{ currentDateData }}\n        </div>\n    </ng-container>\n\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoaderComponent, selector: "app-loader" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GammSingleNumberCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-gamm-single-number-card', template: "<div class=\"flex flex-row justify-center items-start bg-gray-800 p-4 mx-2 text-center\">\n    <ng-container *ngIf=\"isLoader\">\n        <app-loader></app-loader>\n    </ng-container>\n    <ng-container *ngIf=\"!isLoader\">\n        <div class=\"flex justify-center items-center text-4xl font-bold p-2 {{randomColorClass}}\">\n            {{ getDynamicValue(page_config) }}\n        </div>\n    </ng-container>\n\n</div>" }]
-        }], ctorParameters: function () { return [{ type: CommonService }, { type: i2$1.ToastrService }]; }, propDecorators: { chartDataSource: [{
+            args: [{ selector: 'app-gamm-single-number-card', template: "<div class=\"flex flex-row justify-center items-start bg-gray-800 p-4 mx-2 text-center\">\n    <ng-container *ngIf=\"isLoader\">\n        <app-loader></app-loader>\n    </ng-container>\n    <ng-container *ngIf=\"!isLoader\">\n        <div class=\"flex justify-center items-center text-4xl font-bold p-2 {{randomColorClass}}\">\n            {{ currentDateData }}\n        </div>\n    </ng-container>\n\n</div>" }]
+        }], ctorParameters: function () { return [{ type: CommonService }, { type: i2$1.ToastrService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { chartDataSource: [{
                 type: Input,
                 args: ['chartDataSource']
             }] } });
@@ -7596,11 +8039,6 @@ class GammaAdvanceChartComponent {
             if (content.includes('date')) {
                 const dataSource = data.map(obj => {
                     const newObj = { ...obj };
-                    Object.keys(newObj).forEach(key => {
-                        if (key !== this.chartConfig.argumentField && !isNaN(newObj[key])) {
-                            newObj[key] = Number(newObj[key]);
-                        }
-                    });
                     if (newObj.hasOwnProperty(this.chartConfig.argumentField)) {
                         newObj[this.chartConfig.argumentField] = moment(newObj[this.chartConfig.argumentField]).format("MM-DD");
                     }
@@ -7824,10 +8262,10 @@ class GammaAdvanceChartComponent {
     }
 }
 GammaAdvanceChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GammaAdvanceChartComponent, deps: [{ token: CommonService }, { token: i2$1.ToastrService }, { token: kpicommonService$1 }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-GammaAdvanceChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: GammaAdvanceChartComponent, selector: "app-gamma-advance-chart", inputs: { componentId: "componentId", kpi_name: "kpi_name", chartDataSource: "chartDataSource" }, ngImport: i0, template: "<div class=\"not-full-screen\" (dblclick)=\"toggleFullScreen()\">\n    <ng-container *ngIf=\"page_config?.widGetConfig?.display\">\n        <app-title [title]=\"page_config.widGetConfig.widgetTitle\" [operators]=\"page_config.operations\"\n            [displayType]=\"'chart'\"></app-title>\n    </ng-container>\n    <div class=\"mx-2 p-2 bg-gray-800\">\n        <app-loader *ngIf=\"isLoader\"></app-loader>\n        <ng-container *ngIf=\"chartConfig.chartType !== 'doughnut' && chartConfig.chartType !== 'funnel'\">\n            <dx-chart id=\"chart\" [dataSource]=\"finalChartDataSource\"\n                [title]=\"{ text: chartConfig.caption, font: { size: 14 } }\" *ngIf=\"!isLoader\"\n                [valueAxis]=\"chartConfig.valueAxisConfig\">\n                <ng-container *ngIf=\"chartConfig.size\">\n                    <dxo-size [height]=\"chartConfig.size\">\n                    </dxo-size>\n                </ng-container>\n\n                <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n                    <ng-container *ngIf=\"item && item.axis\">\n                        <dxi-value-axis name=\"{{item.axis}}\" position=\"{{item.position}}\">\n                            <dxo-title text=\"{{item.name}}\"></dxo-title>\n                        </dxi-value-axis>\n                    </ng-container>\n\n                </ng-container>\n                <dxo-argument-axis>\n                    <dxo-label overlappingBehavior=\"rotate\" [rotationAngle]=\"270\"></dxo-label>\n                </dxo-argument-axis>\n                <dxo-tooltip [enabled]=\"true\" [shared]=\"true\" [customizeTooltip]=\"customizeTooltip\">\n                </dxo-tooltip>\n                <dxo-common-series-settings argumentField=\"{{chartConfig.argumentField}}\">\n                </dxo-common-series-settings>\n                <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n                    <ng-container *ngIf=\"item && item.color\">\n                        <dxi-series type=\"{{item.type}}\" valueField=\"{{item.valueField}}\" axis=\"{{item.axis}}\"\n                            name=\"{{item.name}}\" color=\"{{item.color}}\">\n                        </dxi-series>\n                    </ng-container>\n                    <ng-container *ngIf=\"item && !item.color\">\n                        <dxi-series type=\"{{item.type}}\" valueField=\"{{item.valueField}}\" axis=\"{{item.axis}}\"\n                            name=\"{{item.name}}\">\n                        </dxi-series>\n                    </ng-container>\n\n                </ng-container>\n                <dxo-size [height]=\"chartHeight\">\n                </dxo-size>\n                <dxo-legend [visible]=\"chartConfig.legendDisplay\" verticalAlignment=\"{{chartConfig.verticalAlignment}}\"\n                    horizontalAlignment=\"{{chartConfig.horizontalAlignment}}\">\n                </dxo-legend>\n            </dx-chart>\n        </ng-container>\n        <ng-container *ngIf=\"chartConfig.chartType == 'doughnut'\">\n\n            <dx-pie-chart id=\"pie\" type=\"doughnut\" [title]=\"{ text: chartConfig.caption, font: { size: 14 } }\"\n                palette=\"Soft Pastel\" [dataSource]=\"finalChartDataSource\" centerTemplate=\"centerTemplate\"\n                (onPointClick)=\"pointClickHandler($event)\" [palette]=\"chartConfig.palette\">\n\n                <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n                    <ng-container *ngIf=\"item.color\">\n                        <dxi-series argumentField={{chartConfig.argumentField}} valueField=\"{{item.valueField}}\"\n                            name=\"{{item.name}}\" color=\"{{item.color}}\">\n                            <dxo-label [visible]=\"chartConfig.labelDisplay\" format=\"currency\">\n                                <dxo-connector [visible]=\"true\"></dxo-connector>\n                            </dxo-label>\n                        </dxi-series>\n                    </ng-container>\n                    <ng-container *ngIf=\"!item.color\">\n                        <dxi-series argumentField={{chartConfig.argumentField}} valueField=\"{{item.valueField}}\"\n                            name=\"{{item.name}}\">\n                            <dxo-label [visible]=\"chartConfig.labelDisplay\" format=\"currency\">\n                                <dxo-connector [visible]=\"true\"></dxo-connector>\n                            </dxo-label>\n                        </dxi-series>\n                    </ng-container>\n                </ng-container>\n                <ng-container *ngIf=\"chartConfig.size\">\n                    <dxo-size [height]=\"chartConfig.size\">\n                    </dxo-size>\n                </ng-container>\n                <dxo-legend [visible]=\"chartConfig.legendDisplay\"\n                    horizontalAlignment=\"{{chartConfig.horizontalAlignment}}\"\n                    verticalAlignment=\"{{chartConfig.verticalAlignment}}\"></dxo-legend>\n                <!-- <dxo-export [enabled]=\"true\"></dxo-export> -->\n                <dxo-tooltip [enabled]=\"true\" [customizeTooltip]=\"customizeTooltip\" format=\"currency\">\n                </dxo-tooltip>\n                <svg *dxTemplate=\"let pieChart of 'centerTemplate'\">\n                    <circle cx=\"100\" cy=\"100\" [attr.r]=\"pieChart.getInnerRadius() - 6\" fill=\"gray\" opacity=\"0.0001\">\n                    </circle>\n\n                    <text text-anchor=\"middle\" style=\"font-size: 15px\" x=\"100\" y=\"100\" fill=\"#eee\">\n                        <tspan x=\"100\">{{ calculateTotal(pieChart) }}</tspan>\n                        <!-- display: inline -->\n                        <!-- <tspan x=\"100\" dy=\"20px\" style=\"font-weight: 600\"></tspan> -->\n                    </text>\n                </svg>\n            </dx-pie-chart>\n        </ng-container>\n\n        <ng-container *ngIf=\"chartConfig.chartType == 'funnel'\">\n            <dx-funnel id=\"funnel\" [dataSource]=\"finalChartDataSource\" argumentField=\"argument\" valueField=\"value\"\n                palette=\"Soft Pastel\">\n                <ng-container *ngIf=\"chartConfig.size\">\n                    <dxo-size [height]=\"chartConfig.size\">\n                    </dxo-size>\n                </ng-container>\n                <dxo-export [enabled]=\"false\"></dxo-export>\n                <dxo-tooltip [enabled]=\"true\"> </dxo-tooltip>\n                <dxo-item>\n                    <dxo-border [visible]=\"true\"> </dxo-border>\n                </dxo-item>\n                <dxo-label [visible]=\"true\" position=\"inside\" backgroundColor=\"none\"\n                    [customizeText]=\"customizeText\"></dxo-label>\n            </dx-funnel>\n\n        </ng-container>\n\n        <ng-container *ngIf=\"chartConfig.chartType == 'bubble'\">\n            <div class=\"mx-5 overflow-x-auto\">\n                <ng-container *ngFor=\"let item of heatChartDataSource.dataSet\">\n                    <div class=\"flex flex-row\">\n                        <div class=\"h-10 text-sm items-center min-w-12 max-w-[30%] justify-center flex\">\n                            {{item.datasource}}\n                        </div>\n                        <div class=\"inline-block \">\n                            <div class=\"flex flex-nowrap justify-center \">\n                                <ng-container *ngFor=\"let box of item.dataset\">\n                                    <div class=\"flex-shrink-0 min-w-10 max-w-[20%] h-10 text-sm cursor-pointer flex items-center justify-center text-gray-800\"\n                                        [matTooltip]=\"'Record Date: ' + box.recordDate + '\\nRecharge Count: ' + box.toolTip\"\n                                        matTooltipClass=\"custom-tooltip\">\n                                        <div class=\"rounded-full\" [ngStyle]=\"{\n                                                'background-color': box.isHovered ? 'rgb(135, 184, 106)' : box.color,\n                                                'width.px': box.size,\n                                                'hover': box.hover,\n                                                'height.px': box.size\n                                              }\" (mouseenter)=\"box.isHovered = true\"\n                                            (mouseleave)=\"box.isHovered = false\">\n                                        </div>\n                                    </div>\n                                </ng-container>\n                            </div>\n                        </div>\n                    </div>\n                </ng-container>\n                <div class=\"inline-block\">\n                    <div class=\"flex flex-nowrap justify-center\">\n                        <div class=\"flex-shrink-0 w-12 max-w-[20%] h-full flex items-center justify-center\"></div>\n                        <div *ngFor=\"let item of heatChartDataSource.argumentValue\"\n                            class=\"flex-shrink-0 w-10 max-w-[20%] min-h-14 flex text-sm items-center justify-center my-1\"\n                            [ngStyle]=\"{'height': 'auto'}\">\n                            <span class=\"text-rotate\">\n                                {{item}}\n                            </span>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </ng-container>\n    </div>\n\n    <button *ngIf=\"isFullScreen\" class=\"close-button\" (click)=\"toggleFullScreen()\">Close</button>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i6.DxoExportComponent, selector: "dxo-export", inputs: ["backgroundColor", "enabled", "fileName", "formats", "margin", "printingEnabled", "proxyUrl", "svgToCanvas", "allowExportSelectedData", "customizeExcelCell", "excelFilterEnabled", "excelWrapTextEnabled", "ignoreExcelErrors", "texts"] }, { kind: "component", type: i6.DxoLabelComponent, selector: "dxo-label", inputs: ["connectorColor", "connectorWidth", "customizeText", "font", "format", "indent", "visible", "horizontalAlignment", "position", "text", "verticalAlignment", "alignment", "customizeHint", "displayMode", "indentFromAxis", "overlappingBehavior", "rotationAngle", "staggeringSpacing", "template", "textOverflow", "wordWrap", "argumentFormat", "backgroundColor", "border", "connector", "displayFormat", "horizontalOffset", "showForZeroValues", "verticalOffset", "hideFirstOrLast", "indentFromTick", "useRangeColors", "location", "showColon", "radialOffset", "topIndent", "shadow", "useNodeColors", "dataField", "enabled"] }, { kind: "component", type: i6.DxoLegendComponent, selector: "dxo-legend", inputs: ["backgroundColor", "border", "columnCount", "columnItemSpacing", "customizeHint", "customizeItems", "customizeText", "font", "horizontalAlignment", "itemsAlignment", "itemTextFormat", "itemTextPosition", "margin", "markerSize", "markerTemplate", "orientation", "paddingLeftRight", "paddingTopBottom", "rowCount", "rowItemSpacing", "title", "verticalAlignment", "visible", "hoverMode", "position"] }, { kind: "component", type: i6.DxoBorderComponent, selector: "dxo-border", inputs: ["color", "cornerRadius", "dashStyle", "opacity", "visible", "width", "bottom", "left", "right", "top"] }, { kind: "component", type: i6.DxoTitleComponent, selector: "dxo-title", inputs: ["font", "horizontalAlignment", "margin", "placeholderSize", "subtitle", "text", "verticalAlignment", "textOverflow", "wordWrap", "alignment"] }, { kind: "component", type: i6.DxoSizeComponent, selector: "dxo-size", inputs: ["height", "width"] }, { kind: "component", type: i6.DxoTooltipComponent, selector: "dxo-tooltip", inputs: ["arrowLength", "border", "color", "container", "contentTemplate", "cornerRadius", "customizeTooltip", "enabled", "font", "format", "interactive", "opacity", "paddingLeftRight", "paddingTopBottom", "shadow", "zIndex", "argumentFormat", "location", "shared", "isShown", "text", "position", "showMode", "customizeLinkTooltip", "customizeNodeTooltip", "linkTooltipTemplate", "nodeTooltipTemplate"] }, { kind: "component", type: i5$1.DxChartComponent, selector: "dx-chart", inputs: ["adaptiveLayout", "adjustOnZoom", "animation", "annotations", "argumentAxis", "autoHidePointMarkers", "barGroupPadding", "barGroupWidth", "commonAnnotationSettings", "commonAxisSettings", "commonPaneSettings", "commonSeriesSettings", "containerBackgroundColor", "crosshair", "customizeAnnotation", "customizeLabel", "customizePoint", "dataPrepareSettings", "dataSource", "defaultPane", "disabled", "elementAttr", "export", "legend", "loadingIndicator", "margin", "maxBubbleSize", "minBubbleSize", "negativesAsZeroes", "palette", "paletteExtensionMode", "panes", "pathModified", "pointSelectionMode", "redrawOnResize", "resizePanesOnZoom", "resolveLabelOverlapping", "rotated", "rtlEnabled", "scrollBar", "series", "seriesSelectionMode", "seriesTemplate", "size", "stickyHovering", "synchronizeMultiAxes", "theme", "title", "tooltip", "valueAxis", "zoomAndPan"], outputs: ["onArgumentAxisClick", "onDisposing", "onDone", "onDrawn", "onExported", "onExporting", "onFileSaving", "onIncidentOccurred", "onInitialized", "onLegendClick", "onOptionChanged", "onPointClick", "onPointHoverChanged", "onPointSelectionChanged", "onSeriesClick", "onSeriesHoverChanged", "onSeriesSelectionChanged", "onTooltipHidden", "onTooltipShown", "onZoomEnd", "onZoomStart", "adaptiveLayoutChange", "adjustOnZoomChange", "animationChange", "annotationsChange", "argumentAxisChange", "autoHidePointMarkersChange", "barGroupPaddingChange", "barGroupWidthChange", "commonAnnotationSettingsChange", "commonAxisSettingsChange", "commonPaneSettingsChange", "commonSeriesSettingsChange", "containerBackgroundColorChange", "crosshairChange", "customizeAnnotationChange", "customizeLabelChange", "customizePointChange", "dataPrepareSettingsChange", "dataSourceChange", "defaultPaneChange", "disabledChange", "elementAttrChange", "exportChange", "legendChange", "loadingIndicatorChange", "marginChange", "maxBubbleSizeChange", "minBubbleSizeChange", "negativesAsZeroesChange", "paletteChange", "paletteExtensionModeChange", "panesChange", "pathModifiedChange", "pointSelectionModeChange", "redrawOnResizeChange", "resizePanesOnZoomChange", "resolveLabelOverlappingChange", "rotatedChange", "rtlEnabledChange", "scrollBarChange", "seriesChange", "seriesSelectionModeChange", "seriesTemplateChange", "sizeChange", "stickyHoveringChange", "synchronizeMultiAxesChange", "themeChange", "titleChange", "tooltipChange", "valueAxisChange", "zoomAndPanChange"] }, { kind: "component", type: i6.DxoArgumentAxisComponent, selector: "dxo-argument-axis", inputs: ["aggregateByCategory", "aggregatedPointsPosition", "aggregationGroupWidth", "aggregationInterval", "allowDecimals", "argumentType", "axisDivisionFactor", "breaks", "breakStyle", "categories", "color", "constantLines", "constantLineStyle", "customPosition", "customPositionAxis", "discreteAxisDivisionMode", "endOnTick", "grid", "holidays", "hoverMode", "inverted", "label", "linearThreshold", "logarithmBase", "maxValueMargin", "minorGrid", "minorTick", "minorTickCount", "minorTickInterval", "minValueMargin", "minVisualRangeLength", "offset", "opacity", "placeholderSize", "position", "singleWorkdays", "strips", "stripStyle", "tick", "tickInterval", "title", "type", "valueMarginsEnabled", "visible", "visualRange", "visualRangeUpdateMode", "wholeRange", "width", "workdaysOnly", "workWeek", "firstPointOnStartAngle", "originValue", "period", "startAngle"], outputs: ["visualRangeChange"] }, { kind: "component", type: i6.DxoCommonSeriesSettingsComponent, selector: "dxo-common-series-settings", inputs: ["aggregation", "area", "argumentField", "axis", "bar", "barOverlapGroup", "barPadding", "barWidth", "border", "bubble", "candlestick", "closeValueField", "color", "cornerRadius", "dashStyle", "fullstackedarea", "fullstackedbar", "fullstackedline", "fullstackedspline", "fullstackedsplinearea", "highValueField", "hoverMode", "hoverStyle", "ignoreEmptyPoints", "innerColor", "label", "line", "lowValueField", "maxLabelCount", "minBarSize", "opacity", "openValueField", "pane", "point", "rangearea", "rangebar", "rangeValue1Field", "rangeValue2Field", "reduction", "scatter", "selectionMode", "selectionStyle", "showInLegend", "sizeField", "spline", "splinearea", "stack", "stackedarea", "stackedbar", "stackedline", "stackedspline", "stackedsplinearea", "steparea", "stepline", "stock", "tagField", "type", "valueErrorBar", "valueField", "visible", "width", "argumentType", "minSegmentSize", "smallValuesGrouping", "closed"] }, { kind: "component", type: i6.DxoConnectorComponent, selector: "dxo-connector", inputs: ["color", "visible", "width", "opacity"] }, { kind: "component", type: i6.DxiSeriesComponent, selector: "dxi-series", inputs: ["aggregation", "argumentField", "axis", "barOverlapGroup", "barPadding", "barWidth", "border", "closeValueField", "color", "cornerRadius", "dashStyle", "highValueField", "hoverMode", "hoverStyle", "ignoreEmptyPoints", "innerColor", "label", "lowValueField", "maxLabelCount", "minBarSize", "name", "opacity", "openValueField", "pane", "point", "rangeValue1Field", "rangeValue2Field", "reduction", "selectionMode", "selectionStyle", "showInLegend", "sizeField", "stack", "tag", "tagField", "type", "valueErrorBar", "valueField", "visible", "width", "argumentType", "minSegmentSize", "smallValuesGrouping", "closed"] }, { kind: "component", type: i6.DxiValueAxisComponent, selector: "dxi-value-axis", inputs: ["aggregatedPointsPosition", "allowDecimals", "autoBreaksEnabled", "axisDivisionFactor", "breaks", "breakStyle", "categories", "color", "constantLines", "constantLineStyle", "customPosition", "discreteAxisDivisionMode", "endOnTick", "grid", "inverted", "label", "linearThreshold", "logarithmBase", "maxAutoBreakCount", "maxValueMargin", "minorGrid", "minorTick", "minorTickCount", "minorTickInterval", "minValueMargin", "minVisualRangeLength", "multipleAxesSpacing", "name", "offset", "opacity", "pane", "placeholderSize", "position", "showZero", "strips", "stripStyle", "synchronizedValue", "tick", "tickInterval", "title", "type", "valueMarginsEnabled", "valueType", "visible", "visualRange", "visualRangeUpdateMode", "wholeRange", "width"], outputs: ["visualRangeChange"] }, { kind: "component", type: i8$4.DxFunnelComponent, selector: "dx-funnel", inputs: ["adaptiveLayout", "algorithm", "argumentField", "colorField", "dataSource", "disabled", "elementAttr", "export", "hoverEnabled", "inverted", "item", "label", "legend", "loadingIndicator", "margin", "neckHeight", "neckWidth", "palette", "paletteExtensionMode", "pathModified", "redrawOnResize", "resolveLabelOverlapping", "rtlEnabled", "selectionMode", "size", "sortData", "theme", "title", "tooltip", "valueField"], outputs: ["onDisposing", "onDrawn", "onExported", "onExporting", "onFileSaving", "onHoverChanged", "onIncidentOccurred", "onInitialized", "onItemClick", "onLegendClick", "onOptionChanged", "onSelectionChanged", "adaptiveLayoutChange", "algorithmChange", "argumentFieldChange", "colorFieldChange", "dataSourceChange", "disabledChange", "elementAttrChange", "exportChange", "hoverEnabledChange", "invertedChange", "itemChange", "labelChange", "legendChange", "loadingIndicatorChange", "marginChange", "neckHeightChange", "neckWidthChange", "paletteChange", "paletteExtensionModeChange", "pathModifiedChange", "redrawOnResizeChange", "resolveLabelOverlappingChange", "rtlEnabledChange", "selectionModeChange", "sizeChange", "sortDataChange", "themeChange", "titleChange", "tooltipChange", "valueFieldChange"] }, { kind: "component", type: i6.DxoItemComponent, selector: "dxo-item", inputs: ["border", "hoverStyle", "selectionStyle"] }, { kind: "component", type: i8$2.DxPieChartComponent, selector: "dx-pie-chart", inputs: ["adaptiveLayout", "animation", "annotations", "centerTemplate", "commonAnnotationSettings", "commonSeriesSettings", "customizeAnnotation", "customizeLabel", "customizePoint", "dataSource", "diameter", "disabled", "elementAttr", "export", "innerRadius", "legend", "loadingIndicator", "margin", "minDiameter", "palette", "paletteExtensionMode", "pathModified", "pointSelectionMode", "redrawOnResize", "resolveLabelOverlapping", "rtlEnabled", "segmentsDirection", "series", "seriesTemplate", "size", "sizeGroup", "startAngle", "theme", "title", "tooltip", "type"], outputs: ["onDisposing", "onDone", "onDrawn", "onExported", "onExporting", "onFileSaving", "onIncidentOccurred", "onInitialized", "onLegendClick", "onOptionChanged", "onPointClick", "onPointHoverChanged", "onPointSelectionChanged", "onTooltipHidden", "onTooltipShown", "adaptiveLayoutChange", "animationChange", "annotationsChange", "centerTemplateChange", "commonAnnotationSettingsChange", "commonSeriesSettingsChange", "customizeAnnotationChange", "customizeLabelChange", "customizePointChange", "dataSourceChange", "diameterChange", "disabledChange", "elementAttrChange", "exportChange", "innerRadiusChange", "legendChange", "loadingIndicatorChange", "marginChange", "minDiameterChange", "paletteChange", "paletteExtensionModeChange", "pathModifiedChange", "pointSelectionModeChange", "redrawOnResizeChange", "resolveLabelOverlappingChange", "rtlEnabledChange", "segmentsDirectionChange", "seriesChange", "seriesTemplateChange", "sizeChange", "sizeGroupChange", "startAngleChange", "themeChange", "titleChange", "tooltipChange", "typeChange"] }, { kind: "directive", type: i13.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: AppTitleComponent, selector: "app-title", inputs: ["title", "multiple", "isFilterDisplay", "icon", "iconName", "displayType", "keyToPass", "fixOperationLevles", "operators"], outputs: ["onOperatorClick"] }, { kind: "component", type: LoaderComponent, selector: "app-loader" }] });
+GammaAdvanceChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: GammaAdvanceChartComponent, selector: "app-gamma-advance-chart", inputs: { componentId: "componentId", kpi_name: "kpi_name", chartDataSource: "chartDataSource" }, ngImport: i0, template: "<div class=\"not-full-screen\" (dblclick)=\"toggleFullScreen()\">\n    <ng-container *ngIf=\"page_config?.widGetConfig?.display\">\n        <app-title [title]=\"page_config.widGetConfig.widgetTitle\" [operators]=\"page_config.operations\"\n            [displayType]=\"'chart'\"></app-title>\n    </ng-container>\n    <div class=\"mx-2 p-2 bg-gray-800\">\n        <app-loader *ngIf=\"isLoader\"></app-loader>\n        \n        <ng-container *ngIf=\"chartConfig.chartType !== 'doughnut' && chartConfig.chartType !== 'funnel' && chartConfig.chartType !== 'pie'\" >\n            <dx-chart id=\"chart\" [dataSource]=\"finalChartDataSource\"\n                [title]=\"{ text: chartConfig.caption, font: { size: 14 } }\" *ngIf=\"!isLoader\"\n                [valueAxis]=\"chartConfig.valueAxisConfig\">\n                <ng-container *ngIf=\"chartConfig.size\">\n                    <dxo-size [height]=\"chartConfig.size\">\n                    </dxo-size>\n                </ng-container>\n\n                <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n                    <ng-container *ngIf=\"item && item.axis\">\n                        <dxi-value-axis name=\"{{item.axis}}\" position=\"{{item.position}}\">\n                            <dxo-title text=\"{{item.name}}\"></dxo-title>\n                        </dxi-value-axis>\n                    </ng-container>\n\n                </ng-container>\n                <dxo-argument-axis>\n                    <dxo-label overlappingBehavior=\"rotate\" [rotationAngle]=\"270\"></dxo-label>\n                </dxo-argument-axis>\n                <dxo-tooltip [enabled]=\"true\" [shared]=\"true\" [customizeTooltip]=\"customizeTooltip\">\n                </dxo-tooltip>\n                <dxo-common-series-settings argumentField=\"{{chartConfig.argumentField}}\">\n                </dxo-common-series-settings>\n                <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n                    <ng-container *ngIf=\"item && item.color\">\n                        <dxi-series type=\"{{item.type}}\" valueField=\"{{item.valueField}}\" axis=\"{{item.axis}}\"\n                            name=\"{{item.name}}\" color=\"{{item.color}}\">\n                        </dxi-series>\n                    </ng-container>\n                    <ng-container *ngIf=\"item && !item.color\">\n                        <dxi-series type=\"{{item.type}}\" valueField=\"{{item.valueField}}\" axis=\"{{item.axis}}\"\n                            name=\"{{item.name}}\">\n                        </dxi-series>\n                    </ng-container>\n\n                </ng-container>\n                <dxo-size [height]=\"chartHeight\">\n                </dxo-size>\n                <dxo-legend [visible]=\"chartConfig.legendDisplay\" verticalAlignment=\"{{chartConfig.verticalAlignment}}\"\n                    horizontalAlignment=\"{{chartConfig.horizontalAlignment}}\">\n                </dxo-legend>\n            </dx-chart>\n        </ng-container>\n\n        <ng-container *ngIf=\"chartConfig.chartType == 'doughnut' || chartConfig.chartType == 'pie'\">\n\n            <dx-pie-chart id=\"pie\" [type]=\"chartConfig.chartType\" [title]=\"{ text: chartConfig.caption, font: { size: 14 } }\"\n                palette=\"Soft Pastel\" [dataSource]=\"finalChartDataSource\" centerTemplate=\"centerTemplate\"\n                (onPointClick)=\"pointClickHandler($event)\" [palette]=\"chartConfig.palette\">\n\n                <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n                    <ng-container *ngIf=\"item.color\">\n                        <dxi-series argumentField={{chartConfig.argumentField}} valueField=\"{{item.valueField}}\"\n                            name=\"{{item.name}}\" color=\"{{item.color}}\">\n                            <dxo-label [visible]=\"chartConfig.labelDisplay\" format=\"currency\">\n                                <dxo-connector [visible]=\"true\"></dxo-connector>\n                            </dxo-label>\n                        </dxi-series>\n                    </ng-container>\n                    <ng-container *ngIf=\"!item.color\">\n                        <dxi-series argumentField={{chartConfig.argumentField}} valueField=\"{{item.valueField}}\"\n                            name=\"{{item.name}}\">\n                            <dxo-label [visible]=\"chartConfig.labelDisplay\" format=\"currency\">\n                                <dxo-connector [visible]=\"true\"></dxo-connector>\n                            </dxo-label>\n                        </dxi-series>\n                    </ng-container>\n                </ng-container>\n                <ng-container *ngIf=\"chartConfig.size\">\n                    <dxo-size [height]=\"chartConfig.size\">\n                    </dxo-size>\n                </ng-container>\n                <dxo-legend [visible]=\"chartConfig.legendDisplay\"\n                    horizontalAlignment=\"{{chartConfig.horizontalAlignment}}\"\n                    verticalAlignment=\"{{chartConfig.verticalAlignment}}\"></dxo-legend>\n                <!-- <dxo-export [enabled]=\"true\"></dxo-export> -->\n                <dxo-tooltip [enabled]=\"true\" [customizeTooltip]=\"customizeTooltip\" format=\"currency\">\n                </dxo-tooltip>\n                <ng-container *ngIf=\"chartConfig.chartType == 'doughnut'\">\n                    <svg *dxTemplate=\"let pieChart of 'centerTemplate'\">\n                        <circle cx=\"100\" cy=\"100\" [attr.r]=\"pieChart.getInnerRadius() - 6\" fill=\"gray\" opacity=\"0.0001\">\n                        </circle>\n    \n                        <text text-anchor=\"middle\" style=\"font-size: 15px\" x=\"100\" y=\"100\" fill=\"#eee\">\n                            <tspan x=\"100\">{{ calculateTotal(pieChart) }}</tspan>\n                            <!-- display: inline -->\n                            <!-- <tspan x=\"100\" dy=\"20px\" style=\"font-weight: 600\"></tspan> -->\n                        </text>\n                    </svg>\n                </ng-container>\n              \n            </dx-pie-chart>\n        </ng-container>\n\n        <ng-container *ngIf=\"chartConfig.chartType == 'funnel'\">\n            <dx-funnel id=\"funnel\" [dataSource]=\"finalChartDataSource\" argumentField=\"argument\" valueField=\"value\"\n                palette=\"Soft Pastel\">\n                <ng-container *ngIf=\"chartConfig.size\">\n                    <dxo-size [height]=\"chartConfig.size\">\n                    </dxo-size>\n                </ng-container>\n                <dxo-export [enabled]=\"false\"></dxo-export>\n                <dxo-tooltip [enabled]=\"true\"> </dxo-tooltip>\n                <dxo-item>\n                    <dxo-border [visible]=\"true\"> </dxo-border>\n                </dxo-item>\n                <dxo-label [visible]=\"true\" position=\"inside\" backgroundColor=\"none\"\n                    [customizeText]=\"customizeText\"></dxo-label>\n            </dx-funnel>\n\n        </ng-container>\n\n        <ng-container *ngIf=\"chartConfig.chartType == 'bubble'\">\n            <div class=\"mx-5 overflow-x-auto\">\n                <ng-container *ngFor=\"let item of heatChartDataSource.dataSet\">\n                    <div class=\"flex flex-row\">\n                        <div class=\"h-10 text-sm items-center min-w-12 max-w-[30%] justify-center flex\">\n                            {{item.datasource}}\n                        </div>\n                        <div class=\"inline-block \">\n                            <div class=\"flex flex-nowrap justify-center \">\n                                <ng-container *ngFor=\"let box of item.dataset\">\n                                    <div class=\"flex-shrink-0 min-w-10 max-w-[20%] h-10 text-sm cursor-pointer flex items-center justify-center text-gray-800\"\n                                        [matTooltip]=\"'Record Date: ' + box.recordDate + '\\nRecharge Count: ' + box.toolTip\"\n                                        matTooltipClass=\"custom-tooltip\">\n                                        <div class=\"rounded-full\" [ngStyle]=\"{\n                                                'background-color': box.isHovered ? 'rgb(135, 184, 106)' : box.color,\n                                                'width.px': box.size,\n                                                'hover': box.hover,\n                                                'height.px': box.size\n                                              }\" (mouseenter)=\"box.isHovered = true\"\n                                            (mouseleave)=\"box.isHovered = false\">\n                                        </div>\n                                    </div>\n                                </ng-container>\n                            </div>\n                        </div>\n                    </div>\n                </ng-container>\n                <div class=\"inline-block\">\n                    <div class=\"flex flex-nowrap justify-center\">\n                        <div class=\"flex-shrink-0 w-12 max-w-[20%] h-full flex items-center justify-center\"></div>\n                        <div *ngFor=\"let item of heatChartDataSource.argumentValue\"\n                            class=\"flex-shrink-0 w-10 max-w-[20%] min-h-14 flex text-sm items-center justify-center my-1\"\n                            [ngStyle]=\"{'height': 'auto'}\">\n                            <span class=\"text-rotate\">\n                                {{item}}\n                            </span>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </ng-container>\n    </div>\n\n    <button *ngIf=\"isFullScreen\" class=\"close-button\" (click)=\"toggleFullScreen()\">Close</button>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i6.DxoExportComponent, selector: "dxo-export", inputs: ["backgroundColor", "enabled", "fileName", "formats", "margin", "printingEnabled", "proxyUrl", "svgToCanvas", "allowExportSelectedData", "customizeExcelCell", "excelFilterEnabled", "excelWrapTextEnabled", "ignoreExcelErrors", "texts"] }, { kind: "component", type: i6.DxoLabelComponent, selector: "dxo-label", inputs: ["connectorColor", "connectorWidth", "customizeText", "font", "format", "indent", "visible", "horizontalAlignment", "position", "text", "verticalAlignment", "alignment", "customizeHint", "displayMode", "indentFromAxis", "overlappingBehavior", "rotationAngle", "staggeringSpacing", "template", "textOverflow", "wordWrap", "argumentFormat", "backgroundColor", "border", "connector", "displayFormat", "horizontalOffset", "showForZeroValues", "verticalOffset", "hideFirstOrLast", "indentFromTick", "useRangeColors", "location", "showColon", "radialOffset", "topIndent", "shadow", "useNodeColors", "dataField", "enabled"] }, { kind: "component", type: i6.DxoLegendComponent, selector: "dxo-legend", inputs: ["backgroundColor", "border", "columnCount", "columnItemSpacing", "customizeHint", "customizeItems", "customizeText", "font", "horizontalAlignment", "itemsAlignment", "itemTextFormat", "itemTextPosition", "margin", "markerSize", "markerTemplate", "orientation", "paddingLeftRight", "paddingTopBottom", "rowCount", "rowItemSpacing", "title", "verticalAlignment", "visible", "hoverMode", "position"] }, { kind: "component", type: i6.DxoBorderComponent, selector: "dxo-border", inputs: ["color", "cornerRadius", "dashStyle", "opacity", "visible", "width", "bottom", "left", "right", "top"] }, { kind: "component", type: i6.DxoTitleComponent, selector: "dxo-title", inputs: ["font", "horizontalAlignment", "margin", "placeholderSize", "subtitle", "text", "verticalAlignment", "textOverflow", "wordWrap", "alignment"] }, { kind: "component", type: i6.DxoSizeComponent, selector: "dxo-size", inputs: ["height", "width"] }, { kind: "component", type: i6.DxoTooltipComponent, selector: "dxo-tooltip", inputs: ["arrowLength", "border", "color", "container", "contentTemplate", "cornerRadius", "customizeTooltip", "enabled", "font", "format", "interactive", "opacity", "paddingLeftRight", "paddingTopBottom", "shadow", "zIndex", "argumentFormat", "location", "shared", "isShown", "text", "position", "showMode", "customizeLinkTooltip", "customizeNodeTooltip", "linkTooltipTemplate", "nodeTooltipTemplate"] }, { kind: "component", type: i5$1.DxChartComponent, selector: "dx-chart", inputs: ["adaptiveLayout", "adjustOnZoom", "animation", "annotations", "argumentAxis", "autoHidePointMarkers", "barGroupPadding", "barGroupWidth", "commonAnnotationSettings", "commonAxisSettings", "commonPaneSettings", "commonSeriesSettings", "containerBackgroundColor", "crosshair", "customizeAnnotation", "customizeLabel", "customizePoint", "dataPrepareSettings", "dataSource", "defaultPane", "disabled", "elementAttr", "export", "legend", "loadingIndicator", "margin", "maxBubbleSize", "minBubbleSize", "negativesAsZeroes", "palette", "paletteExtensionMode", "panes", "pathModified", "pointSelectionMode", "redrawOnResize", "resizePanesOnZoom", "resolveLabelOverlapping", "rotated", "rtlEnabled", "scrollBar", "series", "seriesSelectionMode", "seriesTemplate", "size", "stickyHovering", "synchronizeMultiAxes", "theme", "title", "tooltip", "valueAxis", "zoomAndPan"], outputs: ["onArgumentAxisClick", "onDisposing", "onDone", "onDrawn", "onExported", "onExporting", "onFileSaving", "onIncidentOccurred", "onInitialized", "onLegendClick", "onOptionChanged", "onPointClick", "onPointHoverChanged", "onPointSelectionChanged", "onSeriesClick", "onSeriesHoverChanged", "onSeriesSelectionChanged", "onTooltipHidden", "onTooltipShown", "onZoomEnd", "onZoomStart", "adaptiveLayoutChange", "adjustOnZoomChange", "animationChange", "annotationsChange", "argumentAxisChange", "autoHidePointMarkersChange", "barGroupPaddingChange", "barGroupWidthChange", "commonAnnotationSettingsChange", "commonAxisSettingsChange", "commonPaneSettingsChange", "commonSeriesSettingsChange", "containerBackgroundColorChange", "crosshairChange", "customizeAnnotationChange", "customizeLabelChange", "customizePointChange", "dataPrepareSettingsChange", "dataSourceChange", "defaultPaneChange", "disabledChange", "elementAttrChange", "exportChange", "legendChange", "loadingIndicatorChange", "marginChange", "maxBubbleSizeChange", "minBubbleSizeChange", "negativesAsZeroesChange", "paletteChange", "paletteExtensionModeChange", "panesChange", "pathModifiedChange", "pointSelectionModeChange", "redrawOnResizeChange", "resizePanesOnZoomChange", "resolveLabelOverlappingChange", "rotatedChange", "rtlEnabledChange", "scrollBarChange", "seriesChange", "seriesSelectionModeChange", "seriesTemplateChange", "sizeChange", "stickyHoveringChange", "synchronizeMultiAxesChange", "themeChange", "titleChange", "tooltipChange", "valueAxisChange", "zoomAndPanChange"] }, { kind: "component", type: i6.DxoArgumentAxisComponent, selector: "dxo-argument-axis", inputs: ["aggregateByCategory", "aggregatedPointsPosition", "aggregationGroupWidth", "aggregationInterval", "allowDecimals", "argumentType", "axisDivisionFactor", "breaks", "breakStyle", "categories", "color", "constantLines", "constantLineStyle", "customPosition", "customPositionAxis", "discreteAxisDivisionMode", "endOnTick", "grid", "holidays", "hoverMode", "inverted", "label", "linearThreshold", "logarithmBase", "maxValueMargin", "minorGrid", "minorTick", "minorTickCount", "minorTickInterval", "minValueMargin", "minVisualRangeLength", "offset", "opacity", "placeholderSize", "position", "singleWorkdays", "strips", "stripStyle", "tick", "tickInterval", "title", "type", "valueMarginsEnabled", "visible", "visualRange", "visualRangeUpdateMode", "wholeRange", "width", "workdaysOnly", "workWeek", "firstPointOnStartAngle", "originValue", "period", "startAngle"], outputs: ["visualRangeChange"] }, { kind: "component", type: i6.DxoCommonSeriesSettingsComponent, selector: "dxo-common-series-settings", inputs: ["aggregation", "area", "argumentField", "axis", "bar", "barOverlapGroup", "barPadding", "barWidth", "border", "bubble", "candlestick", "closeValueField", "color", "cornerRadius", "dashStyle", "fullstackedarea", "fullstackedbar", "fullstackedline", "fullstackedspline", "fullstackedsplinearea", "highValueField", "hoverMode", "hoverStyle", "ignoreEmptyPoints", "innerColor", "label", "line", "lowValueField", "maxLabelCount", "minBarSize", "opacity", "openValueField", "pane", "point", "rangearea", "rangebar", "rangeValue1Field", "rangeValue2Field", "reduction", "scatter", "selectionMode", "selectionStyle", "showInLegend", "sizeField", "spline", "splinearea", "stack", "stackedarea", "stackedbar", "stackedline", "stackedspline", "stackedsplinearea", "steparea", "stepline", "stock", "tagField", "type", "valueErrorBar", "valueField", "visible", "width", "argumentType", "minSegmentSize", "smallValuesGrouping", "closed"] }, { kind: "component", type: i6.DxoConnectorComponent, selector: "dxo-connector", inputs: ["color", "visible", "width", "opacity"] }, { kind: "component", type: i6.DxiSeriesComponent, selector: "dxi-series", inputs: ["aggregation", "argumentField", "axis", "barOverlapGroup", "barPadding", "barWidth", "border", "closeValueField", "color", "cornerRadius", "dashStyle", "highValueField", "hoverMode", "hoverStyle", "ignoreEmptyPoints", "innerColor", "label", "lowValueField", "maxLabelCount", "minBarSize", "name", "opacity", "openValueField", "pane", "point", "rangeValue1Field", "rangeValue2Field", "reduction", "selectionMode", "selectionStyle", "showInLegend", "sizeField", "stack", "tag", "tagField", "type", "valueErrorBar", "valueField", "visible", "width", "argumentType", "minSegmentSize", "smallValuesGrouping", "closed"] }, { kind: "component", type: i6.DxiValueAxisComponent, selector: "dxi-value-axis", inputs: ["aggregatedPointsPosition", "allowDecimals", "autoBreaksEnabled", "axisDivisionFactor", "breaks", "breakStyle", "categories", "color", "constantLines", "constantLineStyle", "customPosition", "discreteAxisDivisionMode", "endOnTick", "grid", "inverted", "label", "linearThreshold", "logarithmBase", "maxAutoBreakCount", "maxValueMargin", "minorGrid", "minorTick", "minorTickCount", "minorTickInterval", "minValueMargin", "minVisualRangeLength", "multipleAxesSpacing", "name", "offset", "opacity", "pane", "placeholderSize", "position", "showZero", "strips", "stripStyle", "synchronizedValue", "tick", "tickInterval", "title", "type", "valueMarginsEnabled", "valueType", "visible", "visualRange", "visualRangeUpdateMode", "wholeRange", "width"], outputs: ["visualRangeChange"] }, { kind: "component", type: i8$4.DxFunnelComponent, selector: "dx-funnel", inputs: ["adaptiveLayout", "algorithm", "argumentField", "colorField", "dataSource", "disabled", "elementAttr", "export", "hoverEnabled", "inverted", "item", "label", "legend", "loadingIndicator", "margin", "neckHeight", "neckWidth", "palette", "paletteExtensionMode", "pathModified", "redrawOnResize", "resolveLabelOverlapping", "rtlEnabled", "selectionMode", "size", "sortData", "theme", "title", "tooltip", "valueField"], outputs: ["onDisposing", "onDrawn", "onExported", "onExporting", "onFileSaving", "onHoverChanged", "onIncidentOccurred", "onInitialized", "onItemClick", "onLegendClick", "onOptionChanged", "onSelectionChanged", "adaptiveLayoutChange", "algorithmChange", "argumentFieldChange", "colorFieldChange", "dataSourceChange", "disabledChange", "elementAttrChange", "exportChange", "hoverEnabledChange", "invertedChange", "itemChange", "labelChange", "legendChange", "loadingIndicatorChange", "marginChange", "neckHeightChange", "neckWidthChange", "paletteChange", "paletteExtensionModeChange", "pathModifiedChange", "redrawOnResizeChange", "resolveLabelOverlappingChange", "rtlEnabledChange", "selectionModeChange", "sizeChange", "sortDataChange", "themeChange", "titleChange", "tooltipChange", "valueFieldChange"] }, { kind: "component", type: i6.DxoItemComponent, selector: "dxo-item", inputs: ["border", "hoverStyle", "selectionStyle"] }, { kind: "component", type: i8$2.DxPieChartComponent, selector: "dx-pie-chart", inputs: ["adaptiveLayout", "animation", "annotations", "centerTemplate", "commonAnnotationSettings", "commonSeriesSettings", "customizeAnnotation", "customizeLabel", "customizePoint", "dataSource", "diameter", "disabled", "elementAttr", "export", "innerRadius", "legend", "loadingIndicator", "margin", "minDiameter", "palette", "paletteExtensionMode", "pathModified", "pointSelectionMode", "redrawOnResize", "resolveLabelOverlapping", "rtlEnabled", "segmentsDirection", "series", "seriesTemplate", "size", "sizeGroup", "startAngle", "theme", "title", "tooltip", "type"], outputs: ["onDisposing", "onDone", "onDrawn", "onExported", "onExporting", "onFileSaving", "onIncidentOccurred", "onInitialized", "onLegendClick", "onOptionChanged", "onPointClick", "onPointHoverChanged", "onPointSelectionChanged", "onTooltipHidden", "onTooltipShown", "adaptiveLayoutChange", "animationChange", "annotationsChange", "centerTemplateChange", "commonAnnotationSettingsChange", "commonSeriesSettingsChange", "customizeAnnotationChange", "customizeLabelChange", "customizePointChange", "dataSourceChange", "diameterChange", "disabledChange", "elementAttrChange", "exportChange", "innerRadiusChange", "legendChange", "loadingIndicatorChange", "marginChange", "minDiameterChange", "paletteChange", "paletteExtensionModeChange", "pathModifiedChange", "pointSelectionModeChange", "redrawOnResizeChange", "resolveLabelOverlappingChange", "rtlEnabledChange", "segmentsDirectionChange", "seriesChange", "seriesTemplateChange", "sizeChange", "sizeGroupChange", "startAngleChange", "themeChange", "titleChange", "tooltipChange", "typeChange"] }, { kind: "directive", type: i13.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: AppTitleComponent, selector: "app-title", inputs: ["title", "multiple", "isFilterDisplay", "icon", "iconName", "displayType", "keyToPass", "fixOperationLevles", "operators"], outputs: ["onOperatorClick"] }, { kind: "component", type: LoaderComponent, selector: "app-loader" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GammaAdvanceChartComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-gamma-advance-chart', template: "<div class=\"not-full-screen\" (dblclick)=\"toggleFullScreen()\">\n    <ng-container *ngIf=\"page_config?.widGetConfig?.display\">\n        <app-title [title]=\"page_config.widGetConfig.widgetTitle\" [operators]=\"page_config.operations\"\n            [displayType]=\"'chart'\"></app-title>\n    </ng-container>\n    <div class=\"mx-2 p-2 bg-gray-800\">\n        <app-loader *ngIf=\"isLoader\"></app-loader>\n        <ng-container *ngIf=\"chartConfig.chartType !== 'doughnut' && chartConfig.chartType !== 'funnel'\">\n            <dx-chart id=\"chart\" [dataSource]=\"finalChartDataSource\"\n                [title]=\"{ text: chartConfig.caption, font: { size: 14 } }\" *ngIf=\"!isLoader\"\n                [valueAxis]=\"chartConfig.valueAxisConfig\">\n                <ng-container *ngIf=\"chartConfig.size\">\n                    <dxo-size [height]=\"chartConfig.size\">\n                    </dxo-size>\n                </ng-container>\n\n                <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n                    <ng-container *ngIf=\"item && item.axis\">\n                        <dxi-value-axis name=\"{{item.axis}}\" position=\"{{item.position}}\">\n                            <dxo-title text=\"{{item.name}}\"></dxo-title>\n                        </dxi-value-axis>\n                    </ng-container>\n\n                </ng-container>\n                <dxo-argument-axis>\n                    <dxo-label overlappingBehavior=\"rotate\" [rotationAngle]=\"270\"></dxo-label>\n                </dxo-argument-axis>\n                <dxo-tooltip [enabled]=\"true\" [shared]=\"true\" [customizeTooltip]=\"customizeTooltip\">\n                </dxo-tooltip>\n                <dxo-common-series-settings argumentField=\"{{chartConfig.argumentField}}\">\n                </dxo-common-series-settings>\n                <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n                    <ng-container *ngIf=\"item && item.color\">\n                        <dxi-series type=\"{{item.type}}\" valueField=\"{{item.valueField}}\" axis=\"{{item.axis}}\"\n                            name=\"{{item.name}}\" color=\"{{item.color}}\">\n                        </dxi-series>\n                    </ng-container>\n                    <ng-container *ngIf=\"item && !item.color\">\n                        <dxi-series type=\"{{item.type}}\" valueField=\"{{item.valueField}}\" axis=\"{{item.axis}}\"\n                            name=\"{{item.name}}\">\n                        </dxi-series>\n                    </ng-container>\n\n                </ng-container>\n                <dxo-size [height]=\"chartHeight\">\n                </dxo-size>\n                <dxo-legend [visible]=\"chartConfig.legendDisplay\" verticalAlignment=\"{{chartConfig.verticalAlignment}}\"\n                    horizontalAlignment=\"{{chartConfig.horizontalAlignment}}\">\n                </dxo-legend>\n            </dx-chart>\n        </ng-container>\n        <ng-container *ngIf=\"chartConfig.chartType == 'doughnut'\">\n\n            <dx-pie-chart id=\"pie\" type=\"doughnut\" [title]=\"{ text: chartConfig.caption, font: { size: 14 } }\"\n                palette=\"Soft Pastel\" [dataSource]=\"finalChartDataSource\" centerTemplate=\"centerTemplate\"\n                (onPointClick)=\"pointClickHandler($event)\" [palette]=\"chartConfig.palette\">\n\n                <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n                    <ng-container *ngIf=\"item.color\">\n                        <dxi-series argumentField={{chartConfig.argumentField}} valueField=\"{{item.valueField}}\"\n                            name=\"{{item.name}}\" color=\"{{item.color}}\">\n                            <dxo-label [visible]=\"chartConfig.labelDisplay\" format=\"currency\">\n                                <dxo-connector [visible]=\"true\"></dxo-connector>\n                            </dxo-label>\n                        </dxi-series>\n                    </ng-container>\n                    <ng-container *ngIf=\"!item.color\">\n                        <dxi-series argumentField={{chartConfig.argumentField}} valueField=\"{{item.valueField}}\"\n                            name=\"{{item.name}}\">\n                            <dxo-label [visible]=\"chartConfig.labelDisplay\" format=\"currency\">\n                                <dxo-connector [visible]=\"true\"></dxo-connector>\n                            </dxo-label>\n                        </dxi-series>\n                    </ng-container>\n                </ng-container>\n                <ng-container *ngIf=\"chartConfig.size\">\n                    <dxo-size [height]=\"chartConfig.size\">\n                    </dxo-size>\n                </ng-container>\n                <dxo-legend [visible]=\"chartConfig.legendDisplay\"\n                    horizontalAlignment=\"{{chartConfig.horizontalAlignment}}\"\n                    verticalAlignment=\"{{chartConfig.verticalAlignment}}\"></dxo-legend>\n                <!-- <dxo-export [enabled]=\"true\"></dxo-export> -->\n                <dxo-tooltip [enabled]=\"true\" [customizeTooltip]=\"customizeTooltip\" format=\"currency\">\n                </dxo-tooltip>\n                <svg *dxTemplate=\"let pieChart of 'centerTemplate'\">\n                    <circle cx=\"100\" cy=\"100\" [attr.r]=\"pieChart.getInnerRadius() - 6\" fill=\"gray\" opacity=\"0.0001\">\n                    </circle>\n\n                    <text text-anchor=\"middle\" style=\"font-size: 15px\" x=\"100\" y=\"100\" fill=\"#eee\">\n                        <tspan x=\"100\">{{ calculateTotal(pieChart) }}</tspan>\n                        <!-- display: inline -->\n                        <!-- <tspan x=\"100\" dy=\"20px\" style=\"font-weight: 600\"></tspan> -->\n                    </text>\n                </svg>\n            </dx-pie-chart>\n        </ng-container>\n\n        <ng-container *ngIf=\"chartConfig.chartType == 'funnel'\">\n            <dx-funnel id=\"funnel\" [dataSource]=\"finalChartDataSource\" argumentField=\"argument\" valueField=\"value\"\n                palette=\"Soft Pastel\">\n                <ng-container *ngIf=\"chartConfig.size\">\n                    <dxo-size [height]=\"chartConfig.size\">\n                    </dxo-size>\n                </ng-container>\n                <dxo-export [enabled]=\"false\"></dxo-export>\n                <dxo-tooltip [enabled]=\"true\"> </dxo-tooltip>\n                <dxo-item>\n                    <dxo-border [visible]=\"true\"> </dxo-border>\n                </dxo-item>\n                <dxo-label [visible]=\"true\" position=\"inside\" backgroundColor=\"none\"\n                    [customizeText]=\"customizeText\"></dxo-label>\n            </dx-funnel>\n\n        </ng-container>\n\n        <ng-container *ngIf=\"chartConfig.chartType == 'bubble'\">\n            <div class=\"mx-5 overflow-x-auto\">\n                <ng-container *ngFor=\"let item of heatChartDataSource.dataSet\">\n                    <div class=\"flex flex-row\">\n                        <div class=\"h-10 text-sm items-center min-w-12 max-w-[30%] justify-center flex\">\n                            {{item.datasource}}\n                        </div>\n                        <div class=\"inline-block \">\n                            <div class=\"flex flex-nowrap justify-center \">\n                                <ng-container *ngFor=\"let box of item.dataset\">\n                                    <div class=\"flex-shrink-0 min-w-10 max-w-[20%] h-10 text-sm cursor-pointer flex items-center justify-center text-gray-800\"\n                                        [matTooltip]=\"'Record Date: ' + box.recordDate + '\\nRecharge Count: ' + box.toolTip\"\n                                        matTooltipClass=\"custom-tooltip\">\n                                        <div class=\"rounded-full\" [ngStyle]=\"{\n                                                'background-color': box.isHovered ? 'rgb(135, 184, 106)' : box.color,\n                                                'width.px': box.size,\n                                                'hover': box.hover,\n                                                'height.px': box.size\n                                              }\" (mouseenter)=\"box.isHovered = true\"\n                                            (mouseleave)=\"box.isHovered = false\">\n                                        </div>\n                                    </div>\n                                </ng-container>\n                            </div>\n                        </div>\n                    </div>\n                </ng-container>\n                <div class=\"inline-block\">\n                    <div class=\"flex flex-nowrap justify-center\">\n                        <div class=\"flex-shrink-0 w-12 max-w-[20%] h-full flex items-center justify-center\"></div>\n                        <div *ngFor=\"let item of heatChartDataSource.argumentValue\"\n                            class=\"flex-shrink-0 w-10 max-w-[20%] min-h-14 flex text-sm items-center justify-center my-1\"\n                            [ngStyle]=\"{'height': 'auto'}\">\n                            <span class=\"text-rotate\">\n                                {{item}}\n                            </span>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </ng-container>\n    </div>\n\n    <button *ngIf=\"isFullScreen\" class=\"close-button\" (click)=\"toggleFullScreen()\">Close</button>\n</div>" }]
+            args: [{ selector: 'app-gamma-advance-chart', template: "<div class=\"not-full-screen\" (dblclick)=\"toggleFullScreen()\">\n    <ng-container *ngIf=\"page_config?.widGetConfig?.display\">\n        <app-title [title]=\"page_config.widGetConfig.widgetTitle\" [operators]=\"page_config.operations\"\n            [displayType]=\"'chart'\"></app-title>\n    </ng-container>\n    <div class=\"mx-2 p-2 bg-gray-800\">\n        <app-loader *ngIf=\"isLoader\"></app-loader>\n        \n        <ng-container *ngIf=\"chartConfig.chartType !== 'doughnut' && chartConfig.chartType !== 'funnel' && chartConfig.chartType !== 'pie'\" >\n            <dx-chart id=\"chart\" [dataSource]=\"finalChartDataSource\"\n                [title]=\"{ text: chartConfig.caption, font: { size: 14 } }\" *ngIf=\"!isLoader\"\n                [valueAxis]=\"chartConfig.valueAxisConfig\">\n                <ng-container *ngIf=\"chartConfig.size\">\n                    <dxo-size [height]=\"chartConfig.size\">\n                    </dxo-size>\n                </ng-container>\n\n                <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n                    <ng-container *ngIf=\"item && item.axis\">\n                        <dxi-value-axis name=\"{{item.axis}}\" position=\"{{item.position}}\">\n                            <dxo-title text=\"{{item.name}}\"></dxo-title>\n                        </dxi-value-axis>\n                    </ng-container>\n\n                </ng-container>\n                <dxo-argument-axis>\n                    <dxo-label overlappingBehavior=\"rotate\" [rotationAngle]=\"270\"></dxo-label>\n                </dxo-argument-axis>\n                <dxo-tooltip [enabled]=\"true\" [shared]=\"true\" [customizeTooltip]=\"customizeTooltip\">\n                </dxo-tooltip>\n                <dxo-common-series-settings argumentField=\"{{chartConfig.argumentField}}\">\n                </dxo-common-series-settings>\n                <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n                    <ng-container *ngIf=\"item && item.color\">\n                        <dxi-series type=\"{{item.type}}\" valueField=\"{{item.valueField}}\" axis=\"{{item.axis}}\"\n                            name=\"{{item.name}}\" color=\"{{item.color}}\">\n                        </dxi-series>\n                    </ng-container>\n                    <ng-container *ngIf=\"item && !item.color\">\n                        <dxi-series type=\"{{item.type}}\" valueField=\"{{item.valueField}}\" axis=\"{{item.axis}}\"\n                            name=\"{{item.name}}\">\n                        </dxi-series>\n                    </ng-container>\n\n                </ng-container>\n                <dxo-size [height]=\"chartHeight\">\n                </dxo-size>\n                <dxo-legend [visible]=\"chartConfig.legendDisplay\" verticalAlignment=\"{{chartConfig.verticalAlignment}}\"\n                    horizontalAlignment=\"{{chartConfig.horizontalAlignment}}\">\n                </dxo-legend>\n            </dx-chart>\n        </ng-container>\n\n        <ng-container *ngIf=\"chartConfig.chartType == 'doughnut' || chartConfig.chartType == 'pie'\">\n\n            <dx-pie-chart id=\"pie\" [type]=\"chartConfig.chartType\" [title]=\"{ text: chartConfig.caption, font: { size: 14 } }\"\n                palette=\"Soft Pastel\" [dataSource]=\"finalChartDataSource\" centerTemplate=\"centerTemplate\"\n                (onPointClick)=\"pointClickHandler($event)\" [palette]=\"chartConfig.palette\">\n\n                <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n                    <ng-container *ngIf=\"item.color\">\n                        <dxi-series argumentField={{chartConfig.argumentField}} valueField=\"{{item.valueField}}\"\n                            name=\"{{item.name}}\" color=\"{{item.color}}\">\n                            <dxo-label [visible]=\"chartConfig.labelDisplay\" format=\"currency\">\n                                <dxo-connector [visible]=\"true\"></dxo-connector>\n                            </dxo-label>\n                        </dxi-series>\n                    </ng-container>\n                    <ng-container *ngIf=\"!item.color\">\n                        <dxi-series argumentField={{chartConfig.argumentField}} valueField=\"{{item.valueField}}\"\n                            name=\"{{item.name}}\">\n                            <dxo-label [visible]=\"chartConfig.labelDisplay\" format=\"currency\">\n                                <dxo-connector [visible]=\"true\"></dxo-connector>\n                            </dxo-label>\n                        </dxi-series>\n                    </ng-container>\n                </ng-container>\n                <ng-container *ngIf=\"chartConfig.size\">\n                    <dxo-size [height]=\"chartConfig.size\">\n                    </dxo-size>\n                </ng-container>\n                <dxo-legend [visible]=\"chartConfig.legendDisplay\"\n                    horizontalAlignment=\"{{chartConfig.horizontalAlignment}}\"\n                    verticalAlignment=\"{{chartConfig.verticalAlignment}}\"></dxo-legend>\n                <!-- <dxo-export [enabled]=\"true\"></dxo-export> -->\n                <dxo-tooltip [enabled]=\"true\" [customizeTooltip]=\"customizeTooltip\" format=\"currency\">\n                </dxo-tooltip>\n                <ng-container *ngIf=\"chartConfig.chartType == 'doughnut'\">\n                    <svg *dxTemplate=\"let pieChart of 'centerTemplate'\">\n                        <circle cx=\"100\" cy=\"100\" [attr.r]=\"pieChart.getInnerRadius() - 6\" fill=\"gray\" opacity=\"0.0001\">\n                        </circle>\n    \n                        <text text-anchor=\"middle\" style=\"font-size: 15px\" x=\"100\" y=\"100\" fill=\"#eee\">\n                            <tspan x=\"100\">{{ calculateTotal(pieChart) }}</tspan>\n                            <!-- display: inline -->\n                            <!-- <tspan x=\"100\" dy=\"20px\" style=\"font-weight: 600\"></tspan> -->\n                        </text>\n                    </svg>\n                </ng-container>\n              \n            </dx-pie-chart>\n        </ng-container>\n\n        <ng-container *ngIf=\"chartConfig.chartType == 'funnel'\">\n            <dx-funnel id=\"funnel\" [dataSource]=\"finalChartDataSource\" argumentField=\"argument\" valueField=\"value\"\n                palette=\"Soft Pastel\">\n                <ng-container *ngIf=\"chartConfig.size\">\n                    <dxo-size [height]=\"chartConfig.size\">\n                    </dxo-size>\n                </ng-container>\n                <dxo-export [enabled]=\"false\"></dxo-export>\n                <dxo-tooltip [enabled]=\"true\"> </dxo-tooltip>\n                <dxo-item>\n                    <dxo-border [visible]=\"true\"> </dxo-border>\n                </dxo-item>\n                <dxo-label [visible]=\"true\" position=\"inside\" backgroundColor=\"none\"\n                    [customizeText]=\"customizeText\"></dxo-label>\n            </dx-funnel>\n\n        </ng-container>\n\n        <ng-container *ngIf=\"chartConfig.chartType == 'bubble'\">\n            <div class=\"mx-5 overflow-x-auto\">\n                <ng-container *ngFor=\"let item of heatChartDataSource.dataSet\">\n                    <div class=\"flex flex-row\">\n                        <div class=\"h-10 text-sm items-center min-w-12 max-w-[30%] justify-center flex\">\n                            {{item.datasource}}\n                        </div>\n                        <div class=\"inline-block \">\n                            <div class=\"flex flex-nowrap justify-center \">\n                                <ng-container *ngFor=\"let box of item.dataset\">\n                                    <div class=\"flex-shrink-0 min-w-10 max-w-[20%] h-10 text-sm cursor-pointer flex items-center justify-center text-gray-800\"\n                                        [matTooltip]=\"'Record Date: ' + box.recordDate + '\\nRecharge Count: ' + box.toolTip\"\n                                        matTooltipClass=\"custom-tooltip\">\n                                        <div class=\"rounded-full\" [ngStyle]=\"{\n                                                'background-color': box.isHovered ? 'rgb(135, 184, 106)' : box.color,\n                                                'width.px': box.size,\n                                                'hover': box.hover,\n                                                'height.px': box.size\n                                              }\" (mouseenter)=\"box.isHovered = true\"\n                                            (mouseleave)=\"box.isHovered = false\">\n                                        </div>\n                                    </div>\n                                </ng-container>\n                            </div>\n                        </div>\n                    </div>\n                </ng-container>\n                <div class=\"inline-block\">\n                    <div class=\"flex flex-nowrap justify-center\">\n                        <div class=\"flex-shrink-0 w-12 max-w-[20%] h-full flex items-center justify-center\"></div>\n                        <div *ngFor=\"let item of heatChartDataSource.argumentValue\"\n                            class=\"flex-shrink-0 w-10 max-w-[20%] min-h-14 flex text-sm items-center justify-center my-1\"\n                            [ngStyle]=\"{'height': 'auto'}\">\n                            <span class=\"text-rotate\">\n                                {{item}}\n                            </span>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </ng-container>\n    </div>\n\n    <button *ngIf=\"isFullScreen\" class=\"close-button\" (click)=\"toggleFullScreen()\">Close</button>\n</div>" }]
         }], ctorParameters: function () { return [{ type: CommonService }, { type: i2$1.ToastrService }, { type: kpicommonService$1 }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { componentId: [{
                 type: Input
             }], kpi_name: [{
@@ -7855,7 +8293,9 @@ class GammaGeoChartComponent {
             this.isLoader = true;
             this.page_config = value;
             this.page_parms = value.titleParams;
-            if (value.kpiConfig.dataSource && value.kpiConfig.dataSource.length !== 0) {
+            this.sortBy = value.kpiConfig?.dataConfig?.sortBy;
+            if (value.kpiConfig.dataSource &&
+                value.kpiConfig.dataSource.length !== 0) {
                 if (value.kpiConfig.formate == "monthly") {
                     this.mapTYpe = value.kpiConfig.dataConfig.mapType;
                     if (this.mapTYpe == "geoMap") {
@@ -7886,11 +8326,40 @@ class GammaGeoChartComponent {
                             this.isLoader = false;
                         }, 200);
                     }
+                    else if (this.mapTYpe == "bubbleMap") {
+                        this.locations = value.kpiConfig.dataSource;
+                        this.chartHeight = `${value.kpiConfig.dataConfig.size}px`;
+                        this.tootTipColumn = value.kpiConfig.dataConfig.chart_config;
+                        this.mapOptionForHeatMap = {
+                            zoom: this.zoomValuForAll,
+                        };
+                    }
                     else {
                         this.locations = value.kpiConfig.dataSource;
                         this.tootTipColumn = value.kpiConfig.dataConfig.chart_config;
                         this.chartHeight = `${value.kpiConfig.dataConfig.size}px`;
                         this.zoomValuForAll = parseFloat(this.page_config.kpiConfig.dataConfig.zoom);
+                        this.mapOptionForHeatMap = {
+                            zoom: this.zoomValuForAll,
+                        };
+                    }
+                }
+                else if (value.kpiConfig.formate == "daily") {
+                    this.mapTYpe = value.kpiConfig.dataConfig.mapType;
+                    const sortedData = value.kpiConfig.dataSource
+                        .filter(record => record[this.sortBy])
+                        .sort((a, b) => moment$1(b[this.sortBy]).diff(moment$1(a[this.sortBy])));
+                    const mostRecentRecord = sortedData[0];
+                    if (value.endDate) {
+                        this.filteredObjects = sortedData.filter(data => data[this.sortBy] === value.endDate);
+                    }
+                    else {
+                        this.filteredObjects = sortedData.filter(data => data[this.sortBy] === mostRecentRecord[this.sortBy]);
+                    }
+                    if (this.mapTYpe == "bubbleMap") {
+                        this.locations = this.filteredObjects;
+                        this.chartHeight = `${value.kpiConfig.dataConfig.size}px`;
+                        this.tootTipColumn = value.kpiConfig.dataConfig.chart_config;
                         this.mapOptionForHeatMap = {
                             zoom: this.zoomValuForAll
                         };
@@ -7919,6 +8388,11 @@ class GammaGeoChartComponent {
                 this.initializeHeatWithMarkerMap(this.locations);
             }
         }
+        else {
+            this.isLoader = false;
+            this.initializeMap();
+            this.addBubbleMarkers();
+        }
     }
     loadGoogleCharts() {
         google.charts.load("current", {
@@ -7936,7 +8410,7 @@ class GammaGeoChartComponent {
     getTooltip(data) {
         let toolTipData = "";
         this.tootTipColumn.forEach((element) => {
-            if (typeof data[element.dataField] === 'number') {
+            if (typeof data[element.dataField] === "number") {
                 toolTipData +=
                     "<div class='inline'><b>" +
                         element.caption +
@@ -7956,13 +8430,13 @@ class GammaGeoChartComponent {
         return toolTipData;
     }
     getOptionConfig() {
-        if (this.region == 'city') {
+        if (this.region == "city") {
             const options = {
                 region: this.regionCode,
-                displayMode: 'markers',
+                displayMode: "markers",
                 backgroundColor: this.bacgroundColor,
                 tooltip: { isHtml: true },
-                colorAxis: { colors: this.mapColors }
+                colorAxis: { colors: this.mapColors },
             };
             return options;
         }
@@ -7970,13 +8444,50 @@ class GammaGeoChartComponent {
             const options = {
                 backgroundColor: this.bacgroundColor,
                 tooltip: { isHtml: true },
-                colorAxis: { colors: this.mapColors }
+                colorAxis: { colors: this.mapColors },
             };
             return options;
         }
     }
     initializeMap() {
         const mapOptions = this.mapOptionForHeatMap;
+        if (this.mapTYpe == "bubbleMap") {
+            mapOptions["styles"] = [
+                {
+                    featureType: "all",
+                    stylers: [
+                        { saturation: -100 },
+                        { lightness: 70 },
+                        { visibility: "simplified" },
+                    ],
+                },
+                {
+                    featureType: "administrative.country",
+                    elementType: "labels",
+                    stylers: [
+                        { lightness: -30 },
+                        { visibility: "on" },
+                        { fontWeight: "bold" },
+                        { fontSize: "12px" },
+                    ],
+                },
+                {
+                    featureType: "administrative.country",
+                    elementType: "geometry.stroke",
+                    stylers: [
+                        { lightness: -40 },
+                        { weight: 1.5 },
+                    ],
+                },
+                {
+                    featureType: "administrative.country",
+                    elementType: "geometry.fill",
+                    stylers: [
+                        { lightness: 90 },
+                    ],
+                },
+            ];
+        }
         this.map = new google.maps.Map(this.googlMap.nativeElement, mapOptions);
         this.googlMap.nativeElement.style.height = this.chartHeight;
     }
@@ -7987,13 +8498,15 @@ class GammaGeoChartComponent {
                     lat: parseFloat(location[this.page_config.kpiConfig.dataConfig.markerLatitude]),
                     lng: parseFloat(location[this.page_config.kpiConfig.dataConfig.markerLongitude]),
                 },
-                icon: this.page_config.kpiConfig.dataConfig.icon ? {
-                    url: this.page_config.kpiConfig.dataConfig.icon,
-                    scaledSize: {
-                        width: 32,
-                        height: 32,
-                    },
-                } : '',
+                icon: this.page_config.kpiConfig.dataConfig.icon
+                    ? {
+                        url: this.page_config.kpiConfig.dataConfig.icon,
+                        scaledSize: {
+                            width: 32,
+                            height: 32,
+                        },
+                    }
+                    : "",
                 map: this.map,
                 title: `${location.city}: $${location.total_sales_amount}`,
             });
@@ -8044,12 +8557,12 @@ class GammaGeoChartComponent {
             let latitude = parseFloat(element[this.page_config.kpiConfig.dataConfig.markerLatitude]);
             let logtitude = parseFloat(element[this.page_config.kpiConfig.dataConfig.markerLongitude]);
             this.heatmapData.push({
-                location: new google.maps.LatLng(latitude, logtitude)
+                location: new google.maps.LatLng(latitude, logtitude),
             });
             this.bounds.extend(new google.maps.LatLng(latitude, logtitude));
         });
         const mapOptions = {
-            zoom: this.zoomValuForAll
+            zoom: this.zoomValuForAll,
         };
         this.map = new google.maps.Map(this.googlMap.nativeElement, mapOptions);
         this.googlMap.nativeElement.style.height = this.chartHeight;
@@ -8065,11 +8578,11 @@ class GammaGeoChartComponent {
         });
         this.googlMap.nativeElement.style.height = this.chartHeight;
         this.heatmapData = [];
-        data.forEach(element => {
+        data.forEach((element) => {
             let latitude = parseFloat(element[this.page_config.kpiConfig.dataConfig.markerLatitude]);
             let logtitude = parseFloat(element[this.page_config.kpiConfig.dataConfig.markerLongitude]);
             this.heatmapData.push({
-                location: new google.maps.LatLng(latitude, logtitude)
+                location: new google.maps.LatLng(latitude, logtitude),
             });
             this.bounds.extend(new google.maps.LatLng(latitude, logtitude));
         });
@@ -8083,13 +8596,15 @@ class GammaGeoChartComponent {
                     lat: parseFloat(location[this.page_config.kpiConfig.dataConfig.markerLatitude]),
                     lng: parseFloat(location[this.page_config.kpiConfig.dataConfig.markerLongitude]),
                 },
-                icon: this.page_config.kpiConfig.dataConfig.icon ? {
-                    url: this.page_config.kpiConfig.dataConfig.icon,
-                    scaledSize: {
-                        width: 32,
-                        height: 32,
-                    },
-                } : '',
+                icon: this.page_config.kpiConfig.dataConfig.icon
+                    ? {
+                        url: this.page_config.kpiConfig.dataConfig.icon,
+                        scaledSize: {
+                            width: 32,
+                            height: 32,
+                        },
+                    }
+                    : "",
                 map: this.map,
                 title: `${location.city}: $${location.total_sales_amount}`,
             });
@@ -8110,7 +8625,7 @@ class GammaGeoChartComponent {
             });
         });
         this.map.fitBounds(this.bounds);
-        this.map.addListener('zoom_changed', () => this.handleZoomChange());
+        this.map.addListener("zoom_changed", () => this.handleZoomChange());
     }
     handleZoomChange() {
         const zoomLevel = this.map.getZoom();
@@ -8123,6 +8638,56 @@ class GammaGeoChartComponent {
             this.markers.forEach((marker) => marker.setMap(this.map));
         }
     }
+    addBubbleMarkers() {
+        this.prepareBubbleData();
+        this.locations.forEach((location) => {
+            const marker = new google.maps.Marker({
+                position: {
+                    lat: parseFloat(location[this.page_config.kpiConfig.dataConfig.markerLatitude]),
+                    lng: parseFloat(location[this.page_config.kpiConfig.dataConfig.markerLongitude]),
+                },
+                icon: {
+                    path: google.maps.SymbolPath.CIRCLE,
+                    scale: Math.round(location.sales_percentage),
+                    fillColor: this.page_config.kpiConfig.dataConfig.bubbleColor,
+                    fillOpacity: 0.6,
+                    strokeWeight: 0,
+                },
+                map: this.map,
+                title: `${location.city}: $${location[this.page_config.kpiConfig.dataConfig.agrumentValue]}`,
+            });
+            this.bounds.extend(marker.getPosition());
+            this.markers.push(marker);
+            let stringWithoutQuotes = this.getInfoWindoData(location);
+            const infoWIndowData = this.getInfoWindoData(location);
+            const infoWindow = new google.maps.InfoWindow({
+                content: `<div style="height: 100%; width: 100%; color: black; font-size: 20px;">
+         ${infoWIndowData}
+       </div>`,
+            });
+            marker.addListener("click", () => {
+                if (this.currentInfoWindow) {
+                    this.currentInfoWindow.close();
+                }
+                infoWindow.open(this.map, marker);
+                this.currentInfoWindow = infoWindow;
+            });
+        });
+        this.map.fitBounds(this.bounds);
+    }
+    prepareBubbleData() {
+        const minSales = Math.min(...this.locations.map((d) => d[this.page_config.kpiConfig.dataConfig.agrumentValue]));
+        const maxSales = Math.max(...this.locations.map((d) => d[this.page_config.kpiConfig.dataConfig.agrumentValue]));
+        const minPercentage = this.page_config.kpiConfig.dataConfig.bubbleMinimumSize;
+        const maxPercentage = this.page_config.kpiConfig.dataConfig.bubbleMaximumSize;
+        const normalize = (value, min, max) => {
+            return (((value - min) / (max - min)) * (maxPercentage - minPercentage) +
+                minPercentage);
+        };
+        this.locations.forEach((d) => {
+            d.sales_percentage = Math.min(Math.max(normalize(d[this.page_config.kpiConfig.dataConfig.agrumentValue], minSales, maxSales), minPercentage), maxPercentage);
+        });
+    }
 }
 GammaGeoChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GammaGeoChartComponent, deps: [{ token: CommonService }], target: i0.ɵɵFactoryTarget.Component });
 GammaGeoChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: GammaGeoChartComponent, selector: "app-gamma-geo-chart", inputs: { rightClickEnable: "rightClickEnable", chartDataSource: "chartDataSource" }, outputs: { getTableConfigOutPut: "getTableConfigOutPut", oRowClick: "oRowClick", onrightClickContextSelection: "onrightClickContextSelection" }, viewQueries: [{ propertyName: "googlMap", first: true, predicate: ["googlMap"], descendants: true }], ngImport: i0, template: "\n<div class=\"mx-2 bg-gray-800\">\n    <ng-container *ngIf=\"isLoader\">\n        <div class=\"flex justify-center items-start bg-gray-800 p-2\">\n            <app-loader></app-loader>\n        </div>\n    </ng-container>\n\n    <div class=\"mx-2 pb-2\">\n\n      <ng-container>\n        <div id=\"regions_div\" #googlMap style=\"width: 100%\" ></div>    \n      </ng-container>\n      \n       \n\n    </div>\n\n\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoaderComponent, selector: "app-loader" }] });
@@ -11217,6 +11782,7 @@ class ApplicationCreateMenuComponent {
             active: true,
             disabled: false,
             externalLink: false,
+            description: "",
             tooltip: "",
             link: "",
             fragment: "",
@@ -11243,7 +11809,6 @@ class ApplicationCreateMenuComponent {
             this.service.getAppAppMenuConfigById(menuId).subscribe({
                 next: (data) => {
                     this.menuObject = data;
-                    this.ismenuContainer = true;
                     if (data['measures'] && data['measures'].length !== 0)
                         data['measures'].forEach(element => {
                             let att_value = element.attributeValues.join(",");
@@ -11279,6 +11844,15 @@ class ApplicationCreateMenuComponent {
                         this.paparentMenuDatasource.push(obj);
                     }
                 });
+                if (this.menuObject.menuId !== "" && this.menuObject.menuType == "parent") {
+                    const menu_object = this.paparentMenuDatasource.filter(menu => menu.menuId == this.menuObject.menuId);
+                    this.defaultSelectedParent = menu_object[0].menuId;
+                }
+                else if (this.menuObject.menuId !== "" && this.menuObject.menuType == "child") {
+                    const menu_object = this.paparentMenuDatasource.filter(menu => menu.parentMenuTid == this.menuObject.parentMenuTid);
+                    this.defaultSelectedParent = menu_object[0].menuId;
+                }
+                this.ismenuContainer = true;
             }, error: (error) => {
             }
         });
@@ -11337,18 +11911,28 @@ class ApplicationCreateMenuComponent {
         });
     }
     getMenuTidType(item) {
-        const menu_object = this.paparentMenuDatasource.filter(menu => menu.menuId == item.value);
-        this.menuObject['parentMenuTid'] = menu_object[0]["childMenuTid"];
+        if (item.event) {
+            const menu_object = this.paparentMenuDatasource.filter(menu => menu.menuId == item.value);
+            if (this.menuObject.menuType == 'parent' && menu_object[0]['childMenuTid'] !== "") {
+                this.menuObject['parentMenuTid'] = menu_object[0]["childMenuTid"];
+            }
+            else if (this.menuObject.menuType == 'child' && menu_object[0]['childMenuTid'] !== "") {
+                this.menuObject['parentMenuTid'] = menu_object[0]["childMenuTid"];
+            }
+            else {
+                this.menuObject['parentMenuTid'] = menu_object[0]["parentMenuTid"];
+            }
+        }
     }
     menuList() {
         this.router.navigate(['/apps/controlPanel/menuController']);
     }
 }
 ApplicationCreateMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ApplicationCreateMenuComponent, deps: [{ token: CommonService }, { token: ApplicationContentService }, { token: i2$1.ToastrService }, { token: i4.ActivatedRoute }, { token: i4.Router }], target: i0.ɵɵFactoryTarget.Component });
-ApplicationCreateMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ApplicationCreateMenuComponent, selector: "lib-application-create-menu", ngImport: i0, template: "<div class=\"flex flex-col flex-auto min-w-0\">\n\n    <lib-common-header [pageTitle]=\"'Add Menu'\"></lib-common-header>\n\n    <div class=\"p-4 w-full\">\n        <div class=\"m-3 p-4 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700\">\n            <h6 class=\"mb-2 text-lg tracking-tight text-gray-900\n                dark:text-white border-b pb-3 flex items-center\">\n                Basic Information\n                <div class=\"ml-auto\">\n                    <button class=\"{{commonservice.btn_purple_md}}\" (click)=\"menuList()\">\n                        All Menu\n                    </button>\n                </div>\n            </h6>\n\n            <div class=\"w-full m-2\">\n                <div class=\"flex flex-row\">\n                    <div class=\"mx-2 w-1/3\">\n                        <div class=\"text-md p-2 capitalize\">Menu Type</div>\n                        <div class=\"\">\n                            <dx-select-box [items]=\"['child','parent']\" [(ngModel)]=\"menuObject.menuType\"\n                                (onValueChanged)=\"getMenuType($event)\"></dx-select-box>\n                        </div>\n                    </div>\n                    <div class=\"mx-2 w-1/3\">\n                        <div class=\"text-md p-2 capitalize\">Parent Menu</div>\n                        <div class=\"\">\n                            <dx-select-box [showClearButton]=\"true\" (onValueChanged)=\"getMenuTidType($event)\" [items]=\"paparentMenuDatasource\" valueExpr=\"menuId\" displayExpr=\"title\"></dx-select-box>\n                           \n                        </div>\n                    </div>\n                    <div class=\"mx-2 w-1/3\">\n                        <div class=\"text-md p-2 capitalize\">Parent Menu TID</div>\n                        <div class=\"\">\n                            <dx-text-box [(ngModel)]=\"menuObject.parentMenuTid\"></dx-text-box>\n                        </div>\n                    </div>\n                    <div class=\"mx-2 w-1/3\">\n                        <div class=\"text-md p-2 capitalize\">Child Menu TID</div>\n                        <div class=\"\">\n                            <dx-text-box [(ngModel)]=\"menuObject.childMenuTid\"\n                                [value]=\"menuObject.childMenuTid\"></dx-text-box>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n\n    <ng-container *ngIf=\"ismenuContainer\">\n        <div class=\"p-4 w-full\">\n            <div\n                class=\"m-3 p-4 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700\">\n                <h6 class=\"mb-2 text-lg tracking-tight text-gray-900\n                dark:text-white border-b pb-3 flex items-center\">\n                Item Information\n                    <div class=\"ml-auto\">\n                        \n                    </div>\n                </h6>\n\n                <div class=\"w-full m-2\">\n                    <div class=\"flex flex-row\">\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">Menu ID</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"menuObject.menuId\"></dx-text-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">Title</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"menuObject.title\"></dx-text-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">subtitle</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"menuObject.subtitle\"></dx-text-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">Type</div>\n                            <div class=\"\">\n                                <dx-select-box [items]=\"['aside','basic','collapsable','divider','group','spacer']\"\n                                    [(ngModel)]=\"menuObject.type\"></dx-select-box>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"flex flex-row mt-2\">\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">tooltip</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"menuObject.tooltip\"></dx-text-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">link</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"menuObject.link\"></dx-text-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">fragment</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"menuObject.fragment\"></dx-text-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">target</div>\n                            <div class=\"\">\n                                <dx-select-box [items]=\"['_blank','_self','_parent','_top']\"\n                                    [(ngModel)]=\"menuObject.target\"></dx-select-box>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"flex flex-row mt-2\">\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">preserveFragment</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"menuObject.preserveFragment\"></dx-text-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">queryParams</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"menuObject.queryParams\"></dx-text-box>\n                            </div>\n                        </div>\n\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">icon</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"menuObject.icon\"></dx-text-box>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"flex flex-row mt-2\">\n\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"m-10\">\n                                <dx-check-box [(ngModel)]=\"menuObject.children\" text=\"Children\"></dx-check-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n\n                            <div class=\"mt-10\">\n                                <dx-check-box [(ngModel)]=\"menuObject.externalLink\" text=\"External Link\"></dx-check-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"mt-10\">\n                                <dx-check-box [(ngModel)]=\"menuObject.active\" text=\"Active\"></dx-check-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"mt-10\">\n                                <dx-check-box [(ngModel)]=\"menuObject.disabled\" text=\"Disabled\"></dx-check-box>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n\n            </div>\n        </div>\n\n\n        <div class=\"p-4 w-full\">\n            <div\n                class=\"m-3 p-4 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700\">\n                <h6 class=\"mb-2 text-lg tracking-tight text-gray-900\n                dark:text-white border-b pb-3 flex items-center\">\n                User Information\n                    <div class=\"ml-auto\">\n                        <div class=\"{{commonservice.btn_primary_md}}\" (click)=\"addNewUser()\">ADD User</div>\n                    </div>\n                </h6>\n\n                <div class=\"w-full m-2\">\n                    <ng-container *ngFor=\"let item of userOptionContainer; let i = index\">\n                        <div class=\"flex flex-row\">\n                            <div class=\"mx-2 w-1/4\">\n                                <div class=\"text-md p-2 capitalize\">Accessible User Type</div>\n                                <div class=\"\">\n                                    <dx-select-box [items]=\"menuType\" [(ngModel)]=\"item.attributeType\"></dx-select-box>\n                                </div>\n                            </div>\n                            <div class=\"mx-2 w-1/4\" *ngIf=\"item.attributeType == 'user'\">\n                                <div class=\"text-md p-2 capitalize\">User Name</div>\n                                <div class=\"\">\n                                    <dx-text-box \n                                        [(ngModel)]=\"item.attributeValues\"></dx-text-box>\n                                </div>\n                            </div>\n                            <div class=\"mx-2 w-1/4\" *ngIf=\"item.attributeType == 'role'\">\n                                <div class=\"text-md p-2 capitalize\">Select Role</div>\n                                <div class=\"\">\n                                    <dx-text-box \n                                        [(ngModel)]=\"item.attributeValues\"></dx-text-box>\n                                </div>\n                            </div>\n                            <div class=\"mx-2 w-1/4\" *ngIf=\"item.attributeType == 'group'\">\n                                <div class=\"text-md p-2 capitalize\">Select Group</div>\n                                <div class=\"\">\n                                    <dx-text-box \n                                        [(ngModel)]=\"item.attributeValues\"></dx-text-box>\n                                </div>\n                            </div>\n                            <div class=\"mx-2\">\n                                <div class=\"text-md p-2 capitalize\"></div>\n                                <div class=\"mt-4\">\n                                    <div class=\"{{commonservice.btn_danger_md}}\" (click)=\"deleteUser(i)\">Delete</div>\n                                </div>\n                            </div>\n                        </div>\n                    </ng-container>\n\n                    <div class=\"flex flex-row justify-end mt-4 border-t mt-8 py-4\" *ngIf=\"!isContentType\">\n                        <div class=\"{{commonservice.btn_success_md}}\" (click)=\"submitNewMenu()\">Create Menu</div>\n                    </div>\n                    <div class=\"flex flex-row justify-end mt-4 border-t mt-8 py-4\" *ngIf=\"isContentType\">\n                        <div class=\"{{commonservice.btn_success_md}}\" (click)=\"updateMenu()\">Update Menu</div>\n                    </div>\n\n                </div>\n            </div>\n        </div>\n    </ng-container>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.DxCheckBoxComponent, selector: "dx-check-box", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "iconSize", "isValid", "name", "readOnly", "rtlEnabled", "tabIndex", "text", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "visible", "width"], outputs: ["onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconSizeChange", "isValidChange", "nameChange", "readOnlyChange", "rtlEnabledChange", "tabIndexChange", "textChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "component", type: i6$1.DxSelectBoxComponent, selector: "dx-select-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "buttons", "dataSource", "deferRendering", "disabled", "displayExpr", "displayValue", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "fieldTemplate", "focusStateEnabled", "grouped", "groupTemplate", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "items", "itemTemplate", "label", "labelMode", "maxLength", "minSearchLength", "name", "noDataText", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "searchEnabled", "searchExpr", "searchMode", "searchTimeout", "selectedItem", "showClearButton", "showDataBeforeSearch", "showDropDownButton", "showSelectionControls", "spellcheck", "stylingMode", "tabIndex", "text", "useItemTextAsTitle", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueChangeEvent", "valueExpr", "visible", "width", "wrapItemText"], outputs: ["onChange", "onClosed", "onContentReady", "onCopy", "onCustomItemCreating", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onItemClick", "onKeyDown", "onKeyUp", "onOpened", "onOptionChanged", "onPaste", "onSelectionChanged", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "dataSourceChange", "deferRenderingChange", "disabledChange", "displayExprChange", "displayValueChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "groupedChange", "groupTemplateChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "itemsChange", "itemTemplateChange", "labelChange", "labelModeChange", "maxLengthChange", "minSearchLengthChange", "nameChange", "noDataTextChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "searchEnabledChange", "searchExprChange", "searchModeChange", "searchTimeoutChange", "selectedItemChange", "showClearButtonChange", "showDataBeforeSearchChange", "showDropDownButtonChange", "showSelectionControlsChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useItemTextAsTitleChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "valueExprChange", "visibleChange", "widthChange", "wrapItemTextChange", "onBlur"] }, { kind: "component", type: i7.DxTextBoxComponent, selector: "dx-text-box", inputs: ["accessKey", "activeStateEnabled", "buttons", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "label", "labelMode", "mask", "maskChar", "maskInvalidMessage", "maskRules", "maxLength", "mode", "name", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showMaskMode", "spellcheck", "stylingMode", "tabIndex", "text", "useMaskedValue", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOptionChanged", "onPaste", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "labelChange", "labelModeChange", "maskChange", "maskCharChange", "maskInvalidMessageChange", "maskRulesChange", "maxLengthChange", "modeChange", "nameChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showMaskModeChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useMaskedValueChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CommonHeaderComponent, selector: "lib-common-header", inputs: ["pageTitle"] }] });
+ApplicationCreateMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ApplicationCreateMenuComponent, selector: "lib-application-create-menu", ngImport: i0, template: "<div class=\"flex flex-col flex-auto min-w-0\">\n\n    <lib-common-header [pageTitle]=\"'Add Menu'\"></lib-common-header>\n\n    <div class=\"p-4 w-full\">\n        <div class=\"m-3 p-4 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700\">\n            <h6 class=\"mb-2 text-lg tracking-tight text-gray-900\n                dark:text-white border-b pb-3 flex items-center\">\n                Basic Information\n                <div class=\"ml-auto\">\n                    <button class=\"{{commonservice.btn_purple_md}}\" (click)=\"menuList()\">\n                        All Menu\n                    </button>\n                </div>\n            </h6>\n\n            <div class=\"w-full m-2\">\n                <div class=\"flex flex-row\">\n                    <div class=\"mx-2 w-1/3\">\n                        <div class=\"text-md p-2 capitalize\">Menu Type</div>\n                        <div class=\"\">\n                            <dx-select-box [items]=\"['child','parent']\" [(ngModel)]=\"menuObject.menuType\"\n                                (onValueChanged)=\"getMenuType($event)\"></dx-select-box>\n                        </div>\n                    </div>\n                    <div class=\"mx-2 w-1/3\">\n                        <div class=\"text-md p-2 capitalize\">Parent Menu</div>\n                        <div class=\"\">\n                            <dx-select-box [showClearButton]=\"true\"  [value]=\"defaultSelectedParent\" \n                            (onValueChanged)=\"getMenuTidType($event)\" [items]=\"paparentMenuDatasource\" valueExpr=\"menuId\" displayExpr=\"title\"></dx-select-box>\n                        </div>\n                    </div>\n                    <div class=\"mx-2 w-1/3\">\n                        <div class=\"text-md p-2 capitalize\">Parent Menu TID</div>\n                        <div class=\"\">\n                            <dx-text-box [(ngModel)]=\"menuObject.parentMenuTid\"></dx-text-box>\n                        </div>\n                    </div>\n                    <div class=\"mx-2 w-1/3\">\n                        <div class=\"text-md p-2 capitalize\">Child Menu TID</div>\n                        <div class=\"\">\n                            <dx-text-box [(ngModel)]=\"menuObject.childMenuTid\"\n                                [value]=\"menuObject.childMenuTid\"></dx-text-box>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n\n    <ng-container *ngIf=\"ismenuContainer\">\n        <div class=\"p-4 w-full\">\n            <div\n                class=\"m-3 p-4 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700\">\n                <h6 class=\"mb-2 text-lg tracking-tight text-gray-900\n                dark:text-white border-b pb-3 flex items-center\">\n                Item Information\n                    <div class=\"ml-auto\">\n                        \n                    </div>\n                </h6>\n\n                <div class=\"w-full m-2\">\n                    <div class=\"flex flex-row\">\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">Menu ID</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"menuObject.menuId\"></dx-text-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">Title</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"menuObject.title\"></dx-text-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">subtitle</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"menuObject.subtitle\"></dx-text-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">Type</div>\n                            <div class=\"\">\n                                <dx-select-box [items]=\"['aside','basic','collapsable','divider','group','spacer']\"\n                                    [(ngModel)]=\"menuObject.type\"></dx-select-box>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"flex flex-row mt-2\">\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">tooltip</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"menuObject.tooltip\"></dx-text-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">link</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"menuObject.link\"></dx-text-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">fragment</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"menuObject.fragment\"></dx-text-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">target</div>\n                            <div class=\"\">\n                                <dx-select-box [items]=\"['_blank','_self','_parent','_top']\"\n                                    [(ngModel)]=\"menuObject.target\"></dx-select-box>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"flex flex-row mt-2\">\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">preserveFragment</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"menuObject.preserveFragment\"></dx-text-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">queryParams</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"menuObject.queryParams\"></dx-text-box>\n                            </div>\n                        </div>\n\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">icon</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"menuObject.icon\"></dx-text-box>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"flex flex-row mt-2\">\n\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"m-10\">\n                                <dx-check-box [(ngModel)]=\"menuObject.children\" text=\"Children\"></dx-check-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n\n                            <div class=\"mt-10\">\n                                <dx-check-box [(ngModel)]=\"menuObject.externalLink\" text=\"External Link\"></dx-check-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"mt-10\">\n                                <dx-check-box [(ngModel)]=\"menuObject.active\" text=\"Active\"></dx-check-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"mt-10\">\n                                <dx-check-box [(ngModel)]=\"menuObject.disabled\" text=\"Disabled\"></dx-check-box>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"flex flex-row mt-2\">\n\n                        <div class=\"mx-2 w-full\">\n                            <textarea id=\"message\" rows=\"7\"\n                        class=\"block p-2.5 w-full text-lg text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500\"\n                        placeholder=\"Write Menu Description\" [(ngModel)]=\"menuObject.description\"\n                        id=\"exampleTextarea\"></textarea>\n                        </div>\n                        \n                    </div>\n                </div>\n\n            </div>\n        </div>\n\n\n        <div class=\"p-4 w-full\">\n            <div\n                class=\"m-3 p-4 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700\">\n                <h6 class=\"mb-2 text-lg tracking-tight text-gray-900\n                dark:text-white border-b pb-3 flex items-center\">\n                User Information\n                    <div class=\"ml-auto\">\n                        <div class=\"{{commonservice.btn_primary_md}}\" (click)=\"addNewUser()\">ADD User</div>\n                    </div>\n                </h6>\n\n                <div class=\"w-full m-2\">\n                    <ng-container *ngFor=\"let item of userOptionContainer; let i = index\">\n                        <div class=\"flex flex-row\">\n                            <div class=\"mx-2 w-1/4\">\n                                <div class=\"text-md p-2 capitalize\">Accessible User Type</div>\n                                <div class=\"\">\n                                    <dx-select-box [items]=\"menuType\" [(ngModel)]=\"item.attributeType\"></dx-select-box>\n                                </div>\n                            </div>\n                            <div class=\"mx-2 w-1/4\" *ngIf=\"item.attributeType == 'user'\">\n                                <div class=\"text-md p-2 capitalize\">User Name</div>\n                                <div class=\"\">\n                                    <dx-text-box \n                                        [(ngModel)]=\"item.attributeValues\"></dx-text-box>\n                                </div>\n                            </div>\n                            <div class=\"mx-2 w-1/4\" *ngIf=\"item.attributeType == 'role'\">\n                                <div class=\"text-md p-2 capitalize\">Select Role</div>\n                                <div class=\"\">\n                                    <dx-text-box \n                                        [(ngModel)]=\"item.attributeValues\"></dx-text-box>\n                                </div>\n                            </div>\n                            <div class=\"mx-2 w-1/4\" *ngIf=\"item.attributeType == 'group'\">\n                                <div class=\"text-md p-2 capitalize\">Select Group</div>\n                                <div class=\"\">\n                                    <dx-text-box \n                                        [(ngModel)]=\"item.attributeValues\"></dx-text-box>\n                                </div>\n                            </div>\n                            <div class=\"mx-2\">\n                                <div class=\"text-md p-2 capitalize\"></div>\n                                <div class=\"mt-4\">\n                                    <div class=\"{{commonservice.btn_danger_md}}\" (click)=\"deleteUser(i)\">Delete</div>\n                                </div>\n                            </div>\n                        </div>\n                    </ng-container>\n\n                    <div class=\"flex flex-row justify-end mt-4 border-t mt-8 py-4\" *ngIf=\"!isContentType\">\n                        <div class=\"{{commonservice.btn_success_md}}\" (click)=\"submitNewMenu()\">Create Menu</div>\n                    </div>\n                    <div class=\"flex flex-row justify-end mt-4 border-t mt-8 py-4\" *ngIf=\"isContentType\">\n                        <div class=\"{{commonservice.btn_success_md}}\" (click)=\"updateMenu()\">Update Menu</div>\n                    </div>\n\n                </div>\n            </div>\n        </div>\n    </ng-container>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.DxCheckBoxComponent, selector: "dx-check-box", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "iconSize", "isValid", "name", "readOnly", "rtlEnabled", "tabIndex", "text", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "visible", "width"], outputs: ["onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconSizeChange", "isValidChange", "nameChange", "readOnlyChange", "rtlEnabledChange", "tabIndexChange", "textChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "component", type: i6$1.DxSelectBoxComponent, selector: "dx-select-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "buttons", "dataSource", "deferRendering", "disabled", "displayExpr", "displayValue", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "fieldTemplate", "focusStateEnabled", "grouped", "groupTemplate", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "items", "itemTemplate", "label", "labelMode", "maxLength", "minSearchLength", "name", "noDataText", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "searchEnabled", "searchExpr", "searchMode", "searchTimeout", "selectedItem", "showClearButton", "showDataBeforeSearch", "showDropDownButton", "showSelectionControls", "spellcheck", "stylingMode", "tabIndex", "text", "useItemTextAsTitle", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueChangeEvent", "valueExpr", "visible", "width", "wrapItemText"], outputs: ["onChange", "onClosed", "onContentReady", "onCopy", "onCustomItemCreating", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onItemClick", "onKeyDown", "onKeyUp", "onOpened", "onOptionChanged", "onPaste", "onSelectionChanged", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "dataSourceChange", "deferRenderingChange", "disabledChange", "displayExprChange", "displayValueChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "groupedChange", "groupTemplateChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "itemsChange", "itemTemplateChange", "labelChange", "labelModeChange", "maxLengthChange", "minSearchLengthChange", "nameChange", "noDataTextChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "searchEnabledChange", "searchExprChange", "searchModeChange", "searchTimeoutChange", "selectedItemChange", "showClearButtonChange", "showDataBeforeSearchChange", "showDropDownButtonChange", "showSelectionControlsChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useItemTextAsTitleChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "valueExprChange", "visibleChange", "widthChange", "wrapItemTextChange", "onBlur"] }, { kind: "component", type: i7.DxTextBoxComponent, selector: "dx-text-box", inputs: ["accessKey", "activeStateEnabled", "buttons", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "label", "labelMode", "mask", "maskChar", "maskInvalidMessage", "maskRules", "maxLength", "mode", "name", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showMaskMode", "spellcheck", "stylingMode", "tabIndex", "text", "useMaskedValue", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOptionChanged", "onPaste", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "labelChange", "labelModeChange", "maskChange", "maskCharChange", "maskInvalidMessageChange", "maskRulesChange", "maxLengthChange", "modeChange", "nameChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showMaskModeChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useMaskedValueChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CommonHeaderComponent, selector: "lib-common-header", inputs: ["pageTitle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ApplicationCreateMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-application-create-menu', template: "<div class=\"flex flex-col flex-auto min-w-0\">\n\n    <lib-common-header [pageTitle]=\"'Add Menu'\"></lib-common-header>\n\n    <div class=\"p-4 w-full\">\n        <div class=\"m-3 p-4 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700\">\n            <h6 class=\"mb-2 text-lg tracking-tight text-gray-900\n                dark:text-white border-b pb-3 flex items-center\">\n                Basic Information\n                <div class=\"ml-auto\">\n                    <button class=\"{{commonservice.btn_purple_md}}\" (click)=\"menuList()\">\n                        All Menu\n                    </button>\n                </div>\n            </h6>\n\n            <div class=\"w-full m-2\">\n                <div class=\"flex flex-row\">\n                    <div class=\"mx-2 w-1/3\">\n                        <div class=\"text-md p-2 capitalize\">Menu Type</div>\n                        <div class=\"\">\n                            <dx-select-box [items]=\"['child','parent']\" [(ngModel)]=\"menuObject.menuType\"\n                                (onValueChanged)=\"getMenuType($event)\"></dx-select-box>\n                        </div>\n                    </div>\n                    <div class=\"mx-2 w-1/3\">\n                        <div class=\"text-md p-2 capitalize\">Parent Menu</div>\n                        <div class=\"\">\n                            <dx-select-box [showClearButton]=\"true\" (onValueChanged)=\"getMenuTidType($event)\" [items]=\"paparentMenuDatasource\" valueExpr=\"menuId\" displayExpr=\"title\"></dx-select-box>\n                           \n                        </div>\n                    </div>\n                    <div class=\"mx-2 w-1/3\">\n                        <div class=\"text-md p-2 capitalize\">Parent Menu TID</div>\n                        <div class=\"\">\n                            <dx-text-box [(ngModel)]=\"menuObject.parentMenuTid\"></dx-text-box>\n                        </div>\n                    </div>\n                    <div class=\"mx-2 w-1/3\">\n                        <div class=\"text-md p-2 capitalize\">Child Menu TID</div>\n                        <div class=\"\">\n                            <dx-text-box [(ngModel)]=\"menuObject.childMenuTid\"\n                                [value]=\"menuObject.childMenuTid\"></dx-text-box>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n\n    <ng-container *ngIf=\"ismenuContainer\">\n        <div class=\"p-4 w-full\">\n            <div\n                class=\"m-3 p-4 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700\">\n                <h6 class=\"mb-2 text-lg tracking-tight text-gray-900\n                dark:text-white border-b pb-3 flex items-center\">\n                Item Information\n                    <div class=\"ml-auto\">\n                        \n                    </div>\n                </h6>\n\n                <div class=\"w-full m-2\">\n                    <div class=\"flex flex-row\">\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">Menu ID</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"menuObject.menuId\"></dx-text-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">Title</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"menuObject.title\"></dx-text-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">subtitle</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"menuObject.subtitle\"></dx-text-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">Type</div>\n                            <div class=\"\">\n                                <dx-select-box [items]=\"['aside','basic','collapsable','divider','group','spacer']\"\n                                    [(ngModel)]=\"menuObject.type\"></dx-select-box>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"flex flex-row mt-2\">\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">tooltip</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"menuObject.tooltip\"></dx-text-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">link</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"menuObject.link\"></dx-text-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">fragment</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"menuObject.fragment\"></dx-text-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">target</div>\n                            <div class=\"\">\n                                <dx-select-box [items]=\"['_blank','_self','_parent','_top']\"\n                                    [(ngModel)]=\"menuObject.target\"></dx-select-box>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"flex flex-row mt-2\">\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">preserveFragment</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"menuObject.preserveFragment\"></dx-text-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">queryParams</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"menuObject.queryParams\"></dx-text-box>\n                            </div>\n                        </div>\n\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">icon</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"menuObject.icon\"></dx-text-box>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"flex flex-row mt-2\">\n\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"m-10\">\n                                <dx-check-box [(ngModel)]=\"menuObject.children\" text=\"Children\"></dx-check-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n\n                            <div class=\"mt-10\">\n                                <dx-check-box [(ngModel)]=\"menuObject.externalLink\" text=\"External Link\"></dx-check-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"mt-10\">\n                                <dx-check-box [(ngModel)]=\"menuObject.active\" text=\"Active\"></dx-check-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"mt-10\">\n                                <dx-check-box [(ngModel)]=\"menuObject.disabled\" text=\"Disabled\"></dx-check-box>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n\n            </div>\n        </div>\n\n\n        <div class=\"p-4 w-full\">\n            <div\n                class=\"m-3 p-4 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700\">\n                <h6 class=\"mb-2 text-lg tracking-tight text-gray-900\n                dark:text-white border-b pb-3 flex items-center\">\n                User Information\n                    <div class=\"ml-auto\">\n                        <div class=\"{{commonservice.btn_primary_md}}\" (click)=\"addNewUser()\">ADD User</div>\n                    </div>\n                </h6>\n\n                <div class=\"w-full m-2\">\n                    <ng-container *ngFor=\"let item of userOptionContainer; let i = index\">\n                        <div class=\"flex flex-row\">\n                            <div class=\"mx-2 w-1/4\">\n                                <div class=\"text-md p-2 capitalize\">Accessible User Type</div>\n                                <div class=\"\">\n                                    <dx-select-box [items]=\"menuType\" [(ngModel)]=\"item.attributeType\"></dx-select-box>\n                                </div>\n                            </div>\n                            <div class=\"mx-2 w-1/4\" *ngIf=\"item.attributeType == 'user'\">\n                                <div class=\"text-md p-2 capitalize\">User Name</div>\n                                <div class=\"\">\n                                    <dx-text-box \n                                        [(ngModel)]=\"item.attributeValues\"></dx-text-box>\n                                </div>\n                            </div>\n                            <div class=\"mx-2 w-1/4\" *ngIf=\"item.attributeType == 'role'\">\n                                <div class=\"text-md p-2 capitalize\">Select Role</div>\n                                <div class=\"\">\n                                    <dx-text-box \n                                        [(ngModel)]=\"item.attributeValues\"></dx-text-box>\n                                </div>\n                            </div>\n                            <div class=\"mx-2 w-1/4\" *ngIf=\"item.attributeType == 'group'\">\n                                <div class=\"text-md p-2 capitalize\">Select Group</div>\n                                <div class=\"\">\n                                    <dx-text-box \n                                        [(ngModel)]=\"item.attributeValues\"></dx-text-box>\n                                </div>\n                            </div>\n                            <div class=\"mx-2\">\n                                <div class=\"text-md p-2 capitalize\"></div>\n                                <div class=\"mt-4\">\n                                    <div class=\"{{commonservice.btn_danger_md}}\" (click)=\"deleteUser(i)\">Delete</div>\n                                </div>\n                            </div>\n                        </div>\n                    </ng-container>\n\n                    <div class=\"flex flex-row justify-end mt-4 border-t mt-8 py-4\" *ngIf=\"!isContentType\">\n                        <div class=\"{{commonservice.btn_success_md}}\" (click)=\"submitNewMenu()\">Create Menu</div>\n                    </div>\n                    <div class=\"flex flex-row justify-end mt-4 border-t mt-8 py-4\" *ngIf=\"isContentType\">\n                        <div class=\"{{commonservice.btn_success_md}}\" (click)=\"updateMenu()\">Update Menu</div>\n                    </div>\n\n                </div>\n            </div>\n        </div>\n    </ng-container>\n</div>" }]
+            args: [{ selector: 'lib-application-create-menu', template: "<div class=\"flex flex-col flex-auto min-w-0\">\n\n    <lib-common-header [pageTitle]=\"'Add Menu'\"></lib-common-header>\n\n    <div class=\"p-4 w-full\">\n        <div class=\"m-3 p-4 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700\">\n            <h6 class=\"mb-2 text-lg tracking-tight text-gray-900\n                dark:text-white border-b pb-3 flex items-center\">\n                Basic Information\n                <div class=\"ml-auto\">\n                    <button class=\"{{commonservice.btn_purple_md}}\" (click)=\"menuList()\">\n                        All Menu\n                    </button>\n                </div>\n            </h6>\n\n            <div class=\"w-full m-2\">\n                <div class=\"flex flex-row\">\n                    <div class=\"mx-2 w-1/3\">\n                        <div class=\"text-md p-2 capitalize\">Menu Type</div>\n                        <div class=\"\">\n                            <dx-select-box [items]=\"['child','parent']\" [(ngModel)]=\"menuObject.menuType\"\n                                (onValueChanged)=\"getMenuType($event)\"></dx-select-box>\n                        </div>\n                    </div>\n                    <div class=\"mx-2 w-1/3\">\n                        <div class=\"text-md p-2 capitalize\">Parent Menu</div>\n                        <div class=\"\">\n                            <dx-select-box [showClearButton]=\"true\"  [value]=\"defaultSelectedParent\" \n                            (onValueChanged)=\"getMenuTidType($event)\" [items]=\"paparentMenuDatasource\" valueExpr=\"menuId\" displayExpr=\"title\"></dx-select-box>\n                        </div>\n                    </div>\n                    <div class=\"mx-2 w-1/3\">\n                        <div class=\"text-md p-2 capitalize\">Parent Menu TID</div>\n                        <div class=\"\">\n                            <dx-text-box [(ngModel)]=\"menuObject.parentMenuTid\"></dx-text-box>\n                        </div>\n                    </div>\n                    <div class=\"mx-2 w-1/3\">\n                        <div class=\"text-md p-2 capitalize\">Child Menu TID</div>\n                        <div class=\"\">\n                            <dx-text-box [(ngModel)]=\"menuObject.childMenuTid\"\n                                [value]=\"menuObject.childMenuTid\"></dx-text-box>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n\n    <ng-container *ngIf=\"ismenuContainer\">\n        <div class=\"p-4 w-full\">\n            <div\n                class=\"m-3 p-4 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700\">\n                <h6 class=\"mb-2 text-lg tracking-tight text-gray-900\n                dark:text-white border-b pb-3 flex items-center\">\n                Item Information\n                    <div class=\"ml-auto\">\n                        \n                    </div>\n                </h6>\n\n                <div class=\"w-full m-2\">\n                    <div class=\"flex flex-row\">\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">Menu ID</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"menuObject.menuId\"></dx-text-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">Title</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"menuObject.title\"></dx-text-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">subtitle</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"menuObject.subtitle\"></dx-text-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">Type</div>\n                            <div class=\"\">\n                                <dx-select-box [items]=\"['aside','basic','collapsable','divider','group','spacer']\"\n                                    [(ngModel)]=\"menuObject.type\"></dx-select-box>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"flex flex-row mt-2\">\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">tooltip</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"menuObject.tooltip\"></dx-text-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">link</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"menuObject.link\"></dx-text-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">fragment</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"menuObject.fragment\"></dx-text-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">target</div>\n                            <div class=\"\">\n                                <dx-select-box [items]=\"['_blank','_self','_parent','_top']\"\n                                    [(ngModel)]=\"menuObject.target\"></dx-select-box>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"flex flex-row mt-2\">\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">preserveFragment</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"menuObject.preserveFragment\"></dx-text-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">queryParams</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"menuObject.queryParams\"></dx-text-box>\n                            </div>\n                        </div>\n\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">icon</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"menuObject.icon\"></dx-text-box>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"flex flex-row mt-2\">\n\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"m-10\">\n                                <dx-check-box [(ngModel)]=\"menuObject.children\" text=\"Children\"></dx-check-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n\n                            <div class=\"mt-10\">\n                                <dx-check-box [(ngModel)]=\"menuObject.externalLink\" text=\"External Link\"></dx-check-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"mt-10\">\n                                <dx-check-box [(ngModel)]=\"menuObject.active\" text=\"Active\"></dx-check-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"mt-10\">\n                                <dx-check-box [(ngModel)]=\"menuObject.disabled\" text=\"Disabled\"></dx-check-box>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"flex flex-row mt-2\">\n\n                        <div class=\"mx-2 w-full\">\n                            <textarea id=\"message\" rows=\"7\"\n                        class=\"block p-2.5 w-full text-lg text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500\"\n                        placeholder=\"Write Menu Description\" [(ngModel)]=\"menuObject.description\"\n                        id=\"exampleTextarea\"></textarea>\n                        </div>\n                        \n                    </div>\n                </div>\n\n            </div>\n        </div>\n\n\n        <div class=\"p-4 w-full\">\n            <div\n                class=\"m-3 p-4 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700\">\n                <h6 class=\"mb-2 text-lg tracking-tight text-gray-900\n                dark:text-white border-b pb-3 flex items-center\">\n                User Information\n                    <div class=\"ml-auto\">\n                        <div class=\"{{commonservice.btn_primary_md}}\" (click)=\"addNewUser()\">ADD User</div>\n                    </div>\n                </h6>\n\n                <div class=\"w-full m-2\">\n                    <ng-container *ngFor=\"let item of userOptionContainer; let i = index\">\n                        <div class=\"flex flex-row\">\n                            <div class=\"mx-2 w-1/4\">\n                                <div class=\"text-md p-2 capitalize\">Accessible User Type</div>\n                                <div class=\"\">\n                                    <dx-select-box [items]=\"menuType\" [(ngModel)]=\"item.attributeType\"></dx-select-box>\n                                </div>\n                            </div>\n                            <div class=\"mx-2 w-1/4\" *ngIf=\"item.attributeType == 'user'\">\n                                <div class=\"text-md p-2 capitalize\">User Name</div>\n                                <div class=\"\">\n                                    <dx-text-box \n                                        [(ngModel)]=\"item.attributeValues\"></dx-text-box>\n                                </div>\n                            </div>\n                            <div class=\"mx-2 w-1/4\" *ngIf=\"item.attributeType == 'role'\">\n                                <div class=\"text-md p-2 capitalize\">Select Role</div>\n                                <div class=\"\">\n                                    <dx-text-box \n                                        [(ngModel)]=\"item.attributeValues\"></dx-text-box>\n                                </div>\n                            </div>\n                            <div class=\"mx-2 w-1/4\" *ngIf=\"item.attributeType == 'group'\">\n                                <div class=\"text-md p-2 capitalize\">Select Group</div>\n                                <div class=\"\">\n                                    <dx-text-box \n                                        [(ngModel)]=\"item.attributeValues\"></dx-text-box>\n                                </div>\n                            </div>\n                            <div class=\"mx-2\">\n                                <div class=\"text-md p-2 capitalize\"></div>\n                                <div class=\"mt-4\">\n                                    <div class=\"{{commonservice.btn_danger_md}}\" (click)=\"deleteUser(i)\">Delete</div>\n                                </div>\n                            </div>\n                        </div>\n                    </ng-container>\n\n                    <div class=\"flex flex-row justify-end mt-4 border-t mt-8 py-4\" *ngIf=\"!isContentType\">\n                        <div class=\"{{commonservice.btn_success_md}}\" (click)=\"submitNewMenu()\">Create Menu</div>\n                    </div>\n                    <div class=\"flex flex-row justify-end mt-4 border-t mt-8 py-4\" *ngIf=\"isContentType\">\n                        <div class=\"{{commonservice.btn_success_md}}\" (click)=\"updateMenu()\">Update Menu</div>\n                    </div>\n\n                </div>\n            </div>\n        </div>\n    </ng-container>\n</div>" }]
         }], ctorParameters: function () { return [{ type: CommonService }, { type: ApplicationContentService }, { type: i2$1.ToastrService }, { type: i4.ActivatedRoute }, { type: i4.Router }]; } });
 
 class PageConfigMultilayoutComponent {
@@ -12877,7 +13461,8 @@ PackageApplicationControllerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion
         OnlineMetricsComponent,
         OflineMetricsComponent,
         AllMetricsConfigComponent,
-        DashTodayPreviousComponent], imports: [CommonModule, i4.RouterModule, DevExtremeModule,
+        DashTodayPreviousComponent,
+        SingleCardComponent], imports: [CommonModule, i4.RouterModule, DevExtremeModule,
         DxButtonModule,
         DxCheckBoxModule,
         DxNumberBoxModule,
@@ -12906,6 +13491,7 @@ PackageApplicationControllerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion
         DxTooltipModule,
         DxContextMenuModule,
         DxLoadIndicatorModule,
+        DxPieChartModule,
         MatTooltipModule,
         DxPopupModule, DxSelectBoxModule, DxTextBoxModule, DxTreeViewModule,
         MatButtonModule,
@@ -12976,6 +13562,7 @@ PackageApplicationControllerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion
         DxTooltipModule,
         DxContextMenuModule,
         DxLoadIndicatorModule,
+        DxPieChartModule,
         MatTooltipModule,
         DxPopupModule, DxSelectBoxModule, DxTextBoxModule, DxTreeViewModule,
         MatButtonModule,
@@ -13030,7 +13617,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         OnlineMetricsComponent,
                         OflineMetricsComponent,
                         AllMetricsConfigComponent,
-                        DashTodayPreviousComponent
+                        DashTodayPreviousComponent,
+                        SingleCardComponent
                     ],
                     imports: [
                         CommonModule,
@@ -13064,6 +13652,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         DxTooltipModule,
                         DxContextMenuModule,
                         DxLoadIndicatorModule,
+                        DxPieChartModule,
                         MatTooltipModule,
                         DxPopupModule, DxSelectBoxModule, DxTextBoxModule, DxTreeViewModule,
                         MatButtonModule,