gamma-app-controller 1.3.5 → 2.0.0

package/fesm2020/gamma-app-controller.mjs

@@ -193,7 +193,7 @@ class ApplicationContentService {
         }), catchError(this.handleError));
     }
     getKpiBrowserConfigById(id) {
-        const apiUrl = this.environment.appUrl + this.environment.apiVersion + '/kpi-config/getKpiBrowserConfigById?id=' + id;
+        const apiUrl = this.environment.appUrl + this.environment.apiVersion + this.environment.packageBasePath + '/getKpiBrowserConfigById?id=' + id;
         return this.http
             .get(apiUrl, { withCredentials: true })
             .pipe(map((response) => {
@@ -237,27 +237,27 @@ class ApplicationContentService {
     }
     createAppDataset(body) {
         return this.http
-            .post(this.environment.appUrl + this.environment.apiVersion + '/kpi-config/createAppDataset', JSON.stringify(body), this.options)
+            .post(this.environment.appUrl + this.environment.apiVersion + this.environment.packageBasePath + '/createAppDataset', JSON.stringify(body), this.options)
             .pipe(map((response) => {
             return response;
         }), catchError(this.handleError));
     }
     updateAppDatasetConfig(body) {
         return this.http
-            .post(this.environment.appUrl + this.environment.apiVersion + '/kpi-config/updateAppDatasetConfig', JSON.stringify(body), this.options)
+            .post(this.environment.appUrl + this.environment.apiVersion + this.environment.packageBasePath + '/updateAppDatasetConfig', JSON.stringify(body), this.options)
             .pipe(map((response) => {
             return response;
         }), catchError(this.handleError));
     }
     deleteAppDatasetConfig(datasetId) {
         return this.http
-            .delete(this.environment.appUrl + this.environment.apiVersion + '/kpi-config/deleteAppDatasetConfig/' + datasetId, this.options)
+            .delete(this.environment.appUrl + this.environment.apiVersion + this.environment.packageBasePath + '/deleteAppDatasetConfig/' + datasetId, this.options)
             .pipe(map((response) => {
             return response;
         }), catchError(this.handleError));
     }
     getAppDatasetConfigs() {
-        const apiUrl = this.environment.appUrl + this.environment.apiVersion + '/kpi-config/getAppDatasetConfigs';
+        const apiUrl = this.environment.appUrl + this.environment.apiVersion + this.environment.packageBasePath + '/getAppDatasetConfigs';
         return this.http
             .get(apiUrl, { withCredentials: true })
             .pipe(map((response) => {
@@ -265,7 +265,7 @@ class ApplicationContentService {
         }), catchError(this.handleError));
     }
     getAppDatasetConfig(datasetId) {
-        const apiUrl = this.environment.appUrl + this.environment.apiVersion + '/kpi-config/getAppDatasetConfig?datasetId=' + datasetId;
+        const apiUrl = this.environment.appUrl + this.environment.apiVersion + this.environment.packageBasePath + '/getAppDatasetConfig?datasetId=' + datasetId;
         return this.http
             .get(apiUrl, { withCredentials: true })
             .pipe(map((response) => {
@@ -274,20 +274,20 @@ class ApplicationContentService {
     }
     createAppViewConfig(body) {
         return this.http
-            .post(this.environment.appUrl + this.environment.apiVersion + '/kpi-config/createAppViewConfig', JSON.stringify(body), this.options)
+            .post(this.environment.appUrl + this.environment.apiVersion + this.environment.packageBasePath + '/createAppViewConfig', JSON.stringify(body), this.options)
             .pipe(map((response) => {
             return response;
         }), catchError(this.handleError));
     }
     updateAppViewConfig(body) {
         return this.http
-            .post(this.environment.appUrl + this.environment.apiVersion + '/kpi-config/updateAppViewConfig', JSON.stringify(body), this.options)
+            .post(this.environment.appUrl + this.environment.apiVersion + this.environment.packageBasePath + '/updateAppViewConfig', JSON.stringify(body), this.options)
             .pipe(map((response) => {
             return response;
         }), catchError(this.handleError));
     }
     getAppViewConfigs() {
-        const apiUrl = this.environment.appUrl + this.environment.apiVersion + '/kpi-config/getAppViewConfigs';
+        const apiUrl = this.environment.appUrl + this.environment.apiVersion + this.environment.packageBasePath + '/getAppViewConfigs';
         return this.http
             .get(apiUrl, { withCredentials: true })
             .pipe(map((response) => {
@@ -295,7 +295,7 @@ class ApplicationContentService {
         }), catchError(this.handleError));
     }
     getAppViewConfig(viewId) {
-        const apiUrl = this.environment.appUrl + this.environment.apiVersion + '/kpi-config/getAppViewConfig?viewId=' + viewId;
+        const apiUrl = this.environment.appUrl + this.environment.apiVersion + this.environment.packageBasePath + '/getAppViewConfig?viewId=' + viewId;
         return this.http
             .get(apiUrl, { withCredentials: true })
             .pipe(map((response) => {
@@ -304,27 +304,27 @@ class ApplicationContentService {
     }
     deleteAppViewConfig(datasetId) {
         return this.http
-            .delete(this.environment.appUrl + this.environment.apiVersion + '/kpi-config/deleteAppViewConfig/' + datasetId, this.options)
+            .delete(this.environment.appUrl + this.environment.apiVersion + this.environment.packageBasePath + '/deleteAppViewConfig/' + datasetId, this.options)
             .pipe(map((response) => {
             return response;
         }), catchError(this.handleError));
     }
     createAppFilterConfig(body) {
         return this.http
-            .post(this.environment.appUrl + this.environment.apiVersion + '/kpi-config/createAppFilterConfig', JSON.stringify(body), this.options)
+            .post(this.environment.appUrl + this.environment.apiVersion + this.environment.packageBasePath + '/createAppFilterConfig', JSON.stringify(body), this.options)
             .pipe(map((response) => {
             return response;
         }), catchError(this.handleError));
     }
     editAppFilterConfig(body) {
         return this.http
-            .post(this.environment.appUrl + this.environment.apiVersion + '/kpi-config/editAppFilterConfig', JSON.stringify(body), this.options)
+            .post(this.environment.appUrl + this.environment.apiVersion + this.environment.packageBasePath + '/editAppFilterConfig', JSON.stringify(body), this.options)
             .pipe(map((response) => {
             return response;
         }), catchError(this.handleError));
     }
     getAppFilterConfigs() {
-        const apiUrl = this.environment.appUrl + this.environment.apiVersion + '/kpi-config/getAppFilterConfigs';
+        const apiUrl = this.environment.appUrl + this.environment.apiVersion + this.environment.packageBasePath + '/getAppFilterConfigs';
         return this.http
             .get(apiUrl, { withCredentials: true })
             .pipe(map((response) => {
@@ -333,7 +333,7 @@ class ApplicationContentService {
     }
     deleteAppFilterConfig(filterId) {
         return this.http
-            .delete(this.environment.appUrl + this.environment.apiVersion + '/kpi-config/deleteAppFilterConfig/' + filterId, this.options)
+            .delete(this.environment.appUrl + this.environment.apiVersion + this.environment.packageBasePath + '/deleteAppFilterConfig/' + filterId, this.options)
             .pipe(map((response) => {
             return response;
         }), catchError(this.handleError));
@@ -353,7 +353,7 @@ class ApplicationContentService {
         }), catchError(this.handleError));
     }
     getAppPageConfigs() {
-        const apiUrl = this.environment.appUrl + this.environment.apiVersion + '/kpi-config/getAppPageConfigs';
+        const apiUrl = this.environment.appUrl + this.environment.apiVersion + this.environment.packageBasePath + '/getAppPageConfigs';
         return this.http
             .get(apiUrl, { withCredentials: true })
             .pipe(map((response) => {
@@ -362,62 +362,62 @@ class ApplicationContentService {
     }
     createAppPageConfig(body) {
         return this.http
-            .post(this.environment.appUrl + this.environment.apiVersion + '/kpi-config/createAppPageConfig', JSON.stringify(body), this.options)
+            .post(this.environment.appUrl + this.environment.apiVersion + this.environment.packageBasePath + '/createAppPageConfig', JSON.stringify(body), this.options)
             .pipe(map((response) => {
             return response;
         }), catchError(this.handleError));
     }
     editAppPageConfig(body) {
         return this.http
-            .post(this.environment.appUrl + this.environment.apiVersion + '/kpi-config/editAppPageConfig', JSON.stringify(body), this.options)
+            .post(this.environment.appUrl + this.environment.apiVersion + this.environment.packageBasePath + '/editAppPageConfig', JSON.stringify(body), this.options)
             .pipe(map((response) => {
             return response;
         }), catchError(this.handleError));
     }
     deleteAppPageConfig(pageId) {
         return this.http
-            .delete(this.environment.appUrl + this.environment.apiVersion + '/kpi-config/deleteAppPageConfig/' + pageId, this.options)
+            .delete(this.environment.appUrl + this.environment.apiVersion + this.environment.packageBasePath + '/deleteAppPageConfig/' + pageId, this.options)
             .pipe(map((response) => {
             return response;
         }), catchError(this.handleError));
     }
     createAppWidgetConfig(body) {
         return this.http
-            .post(this.environment.appUrl + this.environment.apiVersion + '/kpi-config/createAppWidgetConfig', JSON.stringify(body), this.options)
+            .post(this.environment.appUrl + this.environment.apiVersion + this.environment.packageBasePath + '/createAppWidgetConfig', JSON.stringify(body), this.options)
             .pipe(map((response) => {
             return response;
         }), catchError(this.handleError));
     }
     editAppWidgetConfig(body) {
         return this.http
-            .post(this.environment.appUrl + this.environment.apiVersion + '/kpi-config/editAppWidgetConfig', JSON.stringify(body), this.options)
+            .post(this.environment.appUrl + this.environment.apiVersion + this.environment.packageBasePath + '/editAppWidgetConfig', JSON.stringify(body), this.options)
             .pipe(map((response) => {
             return response;
         }), catchError(this.handleError));
     }
     getAppPageDetailConfig(pageId) {
         return this.http
-            .get(this.environment.appUrl + this.environment.apiVersion + '/kpi-config/getAppPageDetailConfig?pageConfigId=' + pageId, this.options)
+            .get(this.environment.appUrl + this.environment.apiVersion + this.environment.packageBasePath + '/getAppPageDetailConfig?pageConfigId=' + pageId, this.options)
             .pipe(map((response) => {
             return response;
         }), catchError(this.handleError));
     }
     deleteAppWidgetConfig(filterId) {
         return this.http
-            .delete(this.environment.appUrl + this.environment.apiVersion + '/kpi-config/deleteAppWidgetConfig/' + filterId, this.options)
+            .delete(this.environment.appUrl + this.environment.apiVersion + this.environment.packageBasePath + '/deleteAppWidgetConfig/' + filterId, this.options)
             .pipe(map((response) => {
             return response;
         }), catchError(this.handleError));
     }
     getAppFilterConfig(filterId) {
         return this.http
-            .get(this.environment.appUrl + this.environment.apiVersion + '/kpi-config/getAppFilterConfig?filterId=' + filterId, this.options)
+            .get(this.environment.appUrl + this.environment.apiVersion + this.environment.packageBasePath + '/getAppFilterConfig?filterId=' + filterId, this.options)
             .pipe(map((response) => {
             return response;
         }), catchError(this.handleError));
     }
     getKPIReferenceEndPoints() {
-        const apiUrl = this.environment.appUrl + this.environment.apiVersion + '/kpi-config/getKPIReferenceEndPoints';
+        const apiUrl = this.environment.appUrl + this.environment.apiVersion + this.environment.packageBasePath + '/getKPIReferenceEndPoints';
         return this.http
             .get(apiUrl, { withCredentials: true })
             .pipe(map((response) => {
@@ -432,7 +432,7 @@ class ApplicationContentService {
         }), catchError(this.handleError));
     }
     getlistKpiBrowser() {
-        const apiUrl = this.environment.appUrl + this.environment.apiVersion + '/kpi-config/listKpiBrowser';
+        const apiUrl = this.environment.appUrl + this.environment.apiVersion + this.environment.packageBasePath + '/listKpiBrowser';
         return this.http
             .get(apiUrl, { withCredentials: true })
             .pipe(map((response) => {
@@ -456,14 +456,14 @@ class ApplicationContentService {
     }
     configureKpiBrowserConfig(body) {
         return this.http
-            .post(this.environment.appUrl + this.environment.apiVersion + '/kpi-config/configureKpiBrowserConfig', JSON.stringify(body), this.options)
+            .post(this.environment.appUrl + this.environment.apiVersion + this.environment.packageBasePath + '/configureKpiBrowserConfig', JSON.stringify(body), this.options)
             .pipe(map((response) => {
             return response;
         }), catchError(this.handleError));
     }
     getCreateKpi(body) {
         return this.http
-            .post(this.environment.appUrl + this.environment.apiVersion + '/kpi-config/createKpi', JSON.stringify(body), this.options)
+            .post(this.environment.appUrl + this.environment.apiVersion + this.environment.packageBasePath + '/createKpi', JSON.stringify(body), this.options)
             .pipe(map((response) => {
             return response;
         }), catchError(this.handleError));
@@ -474,7 +474,7 @@ class ApplicationContentService {
         });
         const options = { headers: headers, withCredentials: true };
         return this.http
-            .post(this.environment.appUrl + this.environment.apiVersion + '/kpi-config/uploadDatasetJsonPayload', formData, options)
+            .post(this.environment.appUrl + this.environment.apiVersion + this.environment.packageBasePath + '/uploadDatasetJsonPayload', formData, options)
             .pipe(map((response) => {
             return response;
         }), catchError(this.handleError));
@@ -650,7 +650,7 @@ class ApplicationContentService {
         }), catchError(this.handleError));
     }
     configureAppMenuConfig(manueConfig) {
-        const apiUrl = this.environment.appUrl + this.environment.apiVersion + '/kpi-config/configureAppMenuConfig';
+        const apiUrl = this.environment.appUrl + this.environment.apiVersion + this.environment.packageBasePath + '/configureAppMenuConfig';
         return this.http
             .post(apiUrl, JSON.stringify(manueConfig), this.options)
             .pipe(map((response) => {
@@ -658,15 +658,15 @@ class ApplicationContentService {
         }), catchError(this.handleError));
     }
     listAppMenuConfigs() {
-        const apiUrl = this.environment.appUrl + this.environment.apiVersion + '/kpi-config/listAppMenuConfigs';
+        const apiUrl = this.environment.appUrl + this.environment.apiVersion + this.environment.packageBasePath + '/listAppMenuConfigs?caller=app';
         return this.http
             .get(apiUrl, { withCredentials: true })
             .pipe(map((response) => {
             return response;
         }), catchError(this.handleError));
     }
-    getAppAppMenuConfigById(manuid) {
-        const apiUrl = this.environment.appUrl + this.environment.apiVersion + '/kpi-config/getAppAppMenuConfigById?menuId=' + manuid;
+    getAppMenuConfigById(manuid) {
+        const apiUrl = this.environment.appUrl + this.environment.apiVersion + this.environment.packageBasePath + '/getAppMenuConfigById?caller=app&menuId=' + manuid;
         return this.http
             .get(apiUrl, { withCredentials: true })
             .pipe(map((response) => {
@@ -674,7 +674,7 @@ class ApplicationContentService {
         }), catchError(this.handleError));
     }
     updateAppMenuConfig(manueConfig) {
-        const apiUrl = this.environment.appUrl + this.environment.apiVersion + '/kpi-config/updateAppMenuConfig';
+        const apiUrl = this.environment.appUrl + this.environment.apiVersion + this.environment.packageBasePath + '/updateAppMenuConfig';
         return this.http
             .post(apiUrl, JSON.stringify(manueConfig), this.options)
             .pipe(map((response) => {
@@ -683,7 +683,7 @@ class ApplicationContentService {
     }
     deleteAppMenuConfig(menuId) {
         return this.http
-            .delete(this.environment.appUrl + this.environment.apiVersion + '/kpi-config/deleteAppMenuConfig/' + menuId, this.options)
+            .delete(this.environment.appUrl + this.environment.apiVersion + this.environment.packageBasePath + '/deleteAppMenuConfig/' + menuId, this.options)
             .pipe(map((response) => {
             return response;
         }), catchError(this.handleError));
@@ -4301,7 +4301,7 @@ class UserAccessComponent {
             this.userOptionContainer = [
                 {
                     entityName: 'user',
-                    entityValues: ['${USER}']
+                    entityValues: ['{USER}']
                 }
             ];
             this.emitChanges();
@@ -4310,7 +4310,7 @@ class UserAccessComponent {
     addNewUser() {
         this.userOptionContainer.push({
             entityName: 'user',
-            entityValues: ['${USER}']
+            entityValues: ['{USER}']
         });
         this.emitChanges();
     }
@@ -4363,6 +4363,7 @@ class DashChartComponent {
                     "title": "",
                     "argumentField": "",
                     "chartGroupBy": "",
+                    "chartSortBy": "",
                     "verticalAlignment": "bottom",
                     "horizontalAlignment": "center",
                     "size": "250",
@@ -4437,6 +4438,7 @@ class DashChartComponent {
                 this.mainChartCourceObject['kpiConfig'] = value.selectedWidgetConfig;
                 value.selectedWidgetConfig['keyToPass'] = (value.selectedWidgetConfig['keyToPass']) ? value.selectedWidgetConfig['keyToPass'] : [];
                 value.selectedWidgetConfig['dataConfig']['chartGroupBy'] = (value.selectedWidgetConfig['dataConfig']['chartGroupBy']) ? value.selectedWidgetConfig['dataConfig']['chartGroupBy'] : "";
+                value.selectedWidgetConfig['dataConfig']['chartSortBy'] = (value.selectedWidgetConfig['dataConfig']['chartSortBy']) ? value.selectedWidgetConfig['dataConfig']['chartSortBy'] : "";
                 if (value.selectedWidgetConfig['dataConfig']['chartGroupBy']) {
                     const { dataSourceForChart, listOfGroupByData } = this.getStackBarChart(this.previewData, this.chartConfig.argumentField, this.chartConfig.chart_config[0].valueField, value.selectedWidgetConfig['dataConfig']['chartGroupBy']);
                     this.dataSourseForChart = dataSourceForChart;
@@ -4786,10 +4788,10 @@ class DashChartComponent {
     }
 }
 DashChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DashChartComponent, deps: [{ token: CommonService }, { token: ApplicationContentService }, { token: i4$1.ToastrService }], 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' || 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\"\n                        [title]=\"{ text: chartConfig.caption, font: { size: 14 } }\" palette=\"Soft Pastel\"\n                        [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\" *ngIf=\"chartConfig.displayCenterLabel\">\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\n                *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\" [palette]=\"chartConfig.palette\"\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                        <!-- for others single access chart start -->\n                        <ng-container *ngIf=\"chartType !== 'stackedBar' && chartType !== 'line'\">\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}}\"\n                                        axis=\"{{item.axis}}\" 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}}\"\n                                        axis=\"{{item.axis}}\" name=\"{{item.name}}\">\n                                    </dxi-series>\n                                </ng-container>\n                            </ng-container>\n                        </ng-container>\n                        <!-- for others single access chart end -->\n\n                        <!-- for stackber start -->\n                        <ng-container *ngIf=\"chartType === 'stackedBar' || chartType === 'line'\">\n                            <ng-container *ngFor=\"let item of chartWithThreeDimentionDataSeries\">\n                                <dxi-series valueField=\"{{item}}\" name=\"{{item}}\" type=\"{{chartType}}\"></dxi-series>\n                            </ng-container>\n                        </ng-container>\n                        <!-- for stackber end -->\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 === '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                    <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 === 'permission',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'permission'\n                            }\" (click)=\"setActiveTab('permission')\" type=\"button\" role=\"tab\">\n                            Manage Permissions\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-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\n                            Config\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\n                                        [(ngModel)]=\"mainChartCourceObject.kpiConfig.commonConfig.title\"></dx-text-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Data Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"mainChartCourceObject.kpiConfig.commonConfig.dataField\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-2\"> Display Format </div>\n                                    <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                        [(ngModel)]=\"mainChartCourceObject.kpiConfig.formate\"></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)]=\"mainChartCourceObject.kpiConfig.keyToPass\"></dx-tag-box>\n                                </div>\n\n                            </div>\n                        </div>\n                    </div>\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-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2\"> Date Format </div>\n                            <dx-select-box [items]=\"['MM-DD','YYYY-MM-DD']\"\n                                [(ngModel)]=\"mainChartCourceObject.kpiConfig.displayDateFormat\"></dx-select-box>\n                        </div>\n\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2 mt-6\"> </div>\n                            <dx-check-box [(ngModel)]=\"mainChartCourceObject.kpiConfig.descendingOrder\"\n                                text=\"Descending Order\"></dx-check-box>\n                        </div>\n                        <div class=\"w-2/3 px-2 mt-2\">\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\n                            </div>\n\n\n                        </div>\n\n\n\n\n                    </div>\n\n                    <div class=\"m-3 p-4 bg-white border border-gray-300 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700\"\n                        *ngIf=\"isAdvanceContainer\">\n                        <h6\n                            class=\"mb-2 text-lg tracking-tight text-gray-900 dark:text-white border-b pb-3 flex items-center capitalize\">\n                            Advance Columns for {{chartType}} Chart\n                            <div class=\"ml-auto\">\n\n                            </div>\n                        </h6>\n                        <div class=\"flex flex-row\" *ngIf=\"chartType === 'stackedBar' || chartType === 'line' \">\n                            <div class=\"w-1/3 px-2 mt-2\">\n                                <div class=\"text-md mb-2\"> Chart Group By </div>\n                                <dx-select-box [items]=\"configColume\" (onValueChanged)=\"getChartStackbarChart($event)\"\n                                    [(ngModel)]=\"chartConfig.chartGroupBy\"></dx-select-box>\n                            </div>\n                        </div>\n                        <div class=\"flex flex-row\" *ngIf=\"chartType === 'bubble'\">\n                            <div class=\" flex flex-row\">\n                                <div class=\"mr-2 w-full\">\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 w-full\">\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 w-full\">\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=\"flex flex-row\" *ngIf=\"chartType === 'doughnut' || chartType === 'pie'\">\n                            <div class=\" flex flex-row\">\n                                <!-- <div class=\"w-1/3 px-2 mt-2\">\n                                    <div class=\"text-md mb-2\"> Chart Group By </div>\n                                    <dx-select-box [items]=\"configColume\"\n                                        (onValueChanged)=\"getChartStackbarChart($event)\"\n                                        [(ngModel)]=\"chartConfig.chartGroupBy\"></dx-select-box>\n\n\n                                </div> -->\n                                <div class=\"mt-7 mx-2\">\n                                    <dx-check-box [(ngModel)]=\"chartConfig.displayCenterLabel\"\n                                        text=\"Display Center Label\"></dx-check-box>\n                                </div>\n                            </div>\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\"\n                                *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 === '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\n                                                    [items]=\"['drilldown','sameViewDrilldown','optionalDrillDown','popup','navigateToPage']\"\n                                                    (onValueChanged)=\"getSelectedEventType($event)\"\n                                                    [(ngModel)]=\"viewProperties.clickEventOptions.eventType\"></dx-select-box>\n                                            </div>\n                                        </div>\n                                        <ng-container *ngIf=\"viewProperties.clickEventOptions.eventType === 'popup'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full\">\n                                                    <div class=\"text-md mb-2\"> Associated Views For Popup</div>\n                                                    <dx-tag-box [items]=\"allConfiguredViews\"\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                        valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                        [showSelectionControls]=\"true\"\n                                                        [searchEnabled]=\"true\"></dx-tag-box>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container\n                                            *ngIf=\"viewProperties.clickEventOptions.eventType === 'navigateToPage'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full mx-2\">\n                                                    <div class=\"text-md mb-2\"> Associated Pages</div>\n                                                    <dx-select-box [items]=\"allConfiguredPage\"\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedPage\"\n                                                        valueExpr=\"pageId\" displayExpr=\"pageName\"\n                                                        [searchEnabled]=\"true\"></dx-select-box>\n                                                </div>\n                                                <div class=\"w-full mx-2\">\n                                                    <div class=\"text-md mb-2\"> Associated Params</div>\n                                                    <dx-text-box\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedParams\"></dx-text-box>\n                                                </div>\n                                            </div>\n                                        </ng-container>\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\"\n                                                        [searchEnabled]=\"true\"></dx-tag-box>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container\n                                            *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\"\n                                                        [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\"\n                                                                    [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                <div *ngIf=\"activeTab === 'permission'\">\n                    <div class=\"h-full overflow-x-auto\">\n                        <app-user-access [(userOptionContainer)]=\"userOptionContainer\">\n                        </app-user-access>\n                    </div>\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 === '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                    <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 === 'permission',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'permission'\n                            }\" (click)=\"setActiveTab('permission')\" type=\"button\" role=\"tab\">\n                            Manage Permissions\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-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\n                            Config\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\n                                        [(ngModel)]=\"mainChartCourceObject.kpiConfig.commonConfig.title\"></dx-text-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Data Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"mainChartCourceObject.kpiConfig.commonConfig.dataField\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-2\"> Display Format </div>\n                                    <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                        [(ngModel)]=\"mainChartCourceObject.kpiConfig.formate\"></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)]=\"mainChartCourceObject.kpiConfig.keyToPass\"></dx-tag-box>\n                                </div>\n\n                            </div>\n                        </div>\n                    </div>\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 Format </div>\n                            <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                [(ngModel)]=\"mainChartCourceObject.kpiConfig.formate\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2\"> Date Format </div>\n                            <dx-select-box [items]=\"['MM-DD','YYYY-MM-DD']\"\n                                [(ngModel)]=\"mainChartCourceObject.kpiConfig.displayDateFormat\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2 mt-6\"> </div>\n                            <dx-check-box [(ngModel)]=\"mainChartCourceObject.kpiConfig.descendingOrder\"\n                                text=\"Descending Order\"></dx-check-box>\n                        </div>\n                    </div>\n\n\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 === '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\n                                                    [items]=\"['drilldown','sameViewDrilldown','optionalDrillDown','popup','navigateToPage']\"\n                                                    (onValueChanged)=\"getSelectedEventType($event)\"\n                                                    [(ngModel)]=\"viewProperties.clickEventOptions.eventType\"></dx-select-box>\n                                            </div>\n                                        </div>\n                                        <ng-container\n                                            *ngIf=\"viewProperties.clickEventOptions.eventType === 'navigateToPage'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full mx-2\">\n                                                    <div class=\"text-md mb-2\"> Associated Pages</div>\n                                                    <dx-select-box [items]=\"allConfiguredPage\"\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedPage\"\n                                                        valueExpr=\"pageId\" displayExpr=\"pageName\"\n                                                        [searchEnabled]=\"true\"></dx-select-box>\n                                                </div>\n                                                <div class=\"w-full mx-2\">\n                                                    <div class=\"text-md mb-2\"> Associated Params</div>\n                                                    <dx-text-box\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedParams\"></dx-text-box>\n\n                                                </div>\n                                            </div>\n                                        </ng-container>\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\"\n                                                        [searchEnabled]=\"true\"></dx-tag-box>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container *ngIf=\"viewProperties.clickEventOptions.eventType === 'popup'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full\">\n                                                    <div class=\"text-md mb-2\"> Associated Views For Popup</div>\n                                                    <dx-tag-box [items]=\"allConfiguredViews\"\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                        valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                        [showSelectionControls]=\"true\"\n                                                        [searchEnabled]=\"true\"></dx-tag-box>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container\n                                            *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\"\n                                                        [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\"\n                                                                    [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                <div *ngIf=\"activeTab === 'permission'\">\n                    <div class=\"h-full overflow-x-auto\">\n                        <app-user-access [(userOptionContainer)]=\"userOptionContainer\">\n                        </app-user-access>\n                    </div>\n                </div>\n            </div>\n        </ng-container>\n\n\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>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i4$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5.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: i7$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$1.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: i10.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$1.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: 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: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: UserAccessComponent, selector: "app-user-access", inputs: ["userOptionContainer"], outputs: ["userOptionContainerChange"] }, { kind: "component", type: LoaderComponent, selector: "app-loader" }, { kind: "pipe", type: i4$2.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\"\n                        [title]=\"{ text: chartConfig.caption, font: { size: 14 } }\" palette=\"Soft Pastel\"\n                        [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                                    *ngIf=\"chartConfig.displayCenterLabel\">\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\n                *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\" [palette]=\"chartConfig.palette\"\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                        <!-- for others single access chart start -->\n                        <ng-container *ngIf=\"chartType !== 'stackedBar' && chartType !== 'line'\">\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}}\"\n                                        axis=\"{{item.axis}}\" 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}}\"\n                                        axis=\"{{item.axis}}\" name=\"{{item.name}}\">\n                                    </dxi-series>\n                                </ng-container>\n                            </ng-container>\n                        </ng-container>\n                        <!-- for others single access chart end -->\n\n                        <!-- for stackber start -->\n                        <ng-container *ngIf=\"chartType === 'stackedBar' || chartType === 'line'\">\n                            <ng-container *ngFor=\"let item of chartWithThreeDimentionDataSeries\">\n                                <dxi-series valueField=\"{{item}}\" name=\"{{item}}\" type=\"{{chartType}}\"></dxi-series>\n                            </ng-container>\n                        </ng-container>\n                        <!-- for stackber end -->\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 === '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                    <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 === 'permission',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'permission'\n                            }\" (click)=\"setActiveTab('permission')\" type=\"button\" role=\"tab\">\n                            Manage Permissions\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-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\n                            Config\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\n                                        [(ngModel)]=\"mainChartCourceObject.kpiConfig.commonConfig.title\"></dx-text-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Data Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"mainChartCourceObject.kpiConfig.commonConfig.dataField\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-2\"> Display Format </div>\n                                    <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                        [(ngModel)]=\"mainChartCourceObject.kpiConfig.formate\"></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)]=\"mainChartCourceObject.kpiConfig.keyToPass\"></dx-tag-box>\n                                </div>\n\n                            </div>\n                        </div>\n                    </div>\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-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2\"> Date Format </div>\n                            <dx-select-box [items]=\"['MM-DD','YYYY-MM-DD']\"\n                                [(ngModel)]=\"mainChartCourceObject.kpiConfig.displayDateFormat\"></dx-select-box>\n                        </div>\n\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2\">Sort By</div>\n                            <dx-tag-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                [(ngModel)]=\"chartConfig.chartSortBy\"></dx-tag-box>\n                        </div>\n\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2 mt-6\"> </div>\n                            <dx-check-box [(ngModel)]=\"mainChartCourceObject.kpiConfig.descendingOrder\"\n                                text=\"Descending Order\"></dx-check-box>\n                        </div>\n                        <div class=\"w-2/3 px-2 mt-2\">\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\n                            </div>\n\n\n                        </div>\n\n\n\n\n                    </div>\n\n                    <div class=\"m-3 p-4 bg-white border border-gray-300 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700\"\n                        *ngIf=\"isAdvanceContainer\">\n                        <h6\n                            class=\"mb-2 text-lg tracking-tight text-gray-900 dark:text-white border-b pb-3 flex items-center capitalize\">\n                            Advance Columns for {{chartType}} Chart\n                            <div class=\"ml-auto\">\n\n                            </div>\n                        </h6>\n                        <div class=\"flex flex-row\" *ngIf=\"chartType === 'stackedBar' || chartType === 'line' \">\n                            <div class=\"w-1/3 px-2 mt-2\">\n                                <div class=\"text-md mb-2\"> Chart Group By </div>\n                                <dx-select-box [items]=\"configColume\" (onValueChanged)=\"getChartStackbarChart($event)\"\n                                    [(ngModel)]=\"chartConfig.chartGroupBy\"></dx-select-box>\n                            </div>\n                        </div>\n                        <div class=\"flex flex-row\" *ngIf=\"chartType === 'bubble'\">\n                            <div class=\" flex flex-row\">\n                                <div class=\"mr-2 w-full\">\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 w-full\">\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 w-full\">\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=\"flex flex-row\" *ngIf=\"chartType === 'doughnut' || chartType === 'pie'\">\n                            <div class=\" flex flex-row\">\n                                <!-- <div class=\"w-1/3 px-2 mt-2\">\n                                    <div class=\"text-md mb-2\"> Chart Group By </div>\n                                    <dx-select-box [items]=\"configColume\"\n                                        (onValueChanged)=\"getChartStackbarChart($event)\"\n                                        [(ngModel)]=\"chartConfig.chartGroupBy\"></dx-select-box>\n\n\n                                </div> -->\n                                <div class=\"mt-7 mx-2\">\n                                    <dx-check-box [(ngModel)]=\"chartConfig.displayCenterLabel\"\n                                        text=\"Display Center Label\"></dx-check-box>\n                                </div>\n                            </div>\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\"\n                                *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 === '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\n                                                    [items]=\"['drilldown','sameViewDrilldown','optionalDrillDown','popup','navigateToPage']\"\n                                                    (onValueChanged)=\"getSelectedEventType($event)\"\n                                                    [(ngModel)]=\"viewProperties.clickEventOptions.eventType\"></dx-select-box>\n                                            </div>\n                                        </div>\n                                        <ng-container *ngIf=\"viewProperties.clickEventOptions.eventType === 'popup'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full\">\n                                                    <div class=\"text-md mb-2\"> Associated Views For Popup</div>\n                                                    <dx-tag-box [items]=\"allConfiguredViews\"\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                        valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                        [showSelectionControls]=\"true\"\n                                                        [searchEnabled]=\"true\"></dx-tag-box>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container\n                                            *ngIf=\"viewProperties.clickEventOptions.eventType === 'navigateToPage'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full mx-2\">\n                                                    <div class=\"text-md mb-2\"> Associated Pages</div>\n                                                    <dx-select-box [items]=\"allConfiguredPage\"\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedPage\"\n                                                        valueExpr=\"pageId\" displayExpr=\"pageName\"\n                                                        [searchEnabled]=\"true\"></dx-select-box>\n                                                </div>\n                                                <div class=\"w-full mx-2\">\n                                                    <div class=\"text-md mb-2\"> Associated Params</div>\n                                                    <dx-text-box\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedParams\"></dx-text-box>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container\n                                            *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\"\n                                                        [searchEnabled]=\"true\"></dx-tag-box>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container\n                                            *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\"\n                                                        [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\"\n                                                                    [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                <div *ngIf=\"activeTab === 'permission'\">\n                    <div class=\"h-full overflow-x-auto\">\n                        <app-user-access [(userOptionContainer)]=\"userOptionContainer\">\n                        </app-user-access>\n                    </div>\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 === '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                    <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 === 'permission',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'permission'\n                            }\" (click)=\"setActiveTab('permission')\" type=\"button\" role=\"tab\">\n                            Manage Permissions\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-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\n                            Config\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\n                                        [(ngModel)]=\"mainChartCourceObject.kpiConfig.commonConfig.title\"></dx-text-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Data Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"mainChartCourceObject.kpiConfig.commonConfig.dataField\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-2\"> Display Format </div>\n                                    <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                        [(ngModel)]=\"mainChartCourceObject.kpiConfig.formate\"></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)]=\"mainChartCourceObject.kpiConfig.keyToPass\"></dx-tag-box>\n                                </div>\n\n                            </div>\n                        </div>\n                    </div>\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 Format </div>\n                            <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                [(ngModel)]=\"mainChartCourceObject.kpiConfig.formate\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2\"> Date Format </div>\n                            <dx-select-box [items]=\"['MM-DD','YYYY-MM-DD']\"\n                                [(ngModel)]=\"mainChartCourceObject.kpiConfig.displayDateFormat\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2\">Sort By</div>\n                            <dx-tag-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                [(ngModel)]=\"chartConfig.chartSortBy\"></dx-tag-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2 mt-6\"> </div>\n                            <dx-check-box [(ngModel)]=\"mainChartCourceObject.kpiConfig.descendingOrder\"\n                                text=\"Descending Order\"></dx-check-box>\n                        </div>\n                    </div>\n\n\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 === '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\n                                                    [items]=\"['drilldown','sameViewDrilldown','optionalDrillDown','popup','navigateToPage']\"\n                                                    (onValueChanged)=\"getSelectedEventType($event)\"\n                                                    [(ngModel)]=\"viewProperties.clickEventOptions.eventType\"></dx-select-box>\n                                            </div>\n                                        </div>\n                                        <ng-container\n                                            *ngIf=\"viewProperties.clickEventOptions.eventType === 'navigateToPage'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full mx-2\">\n                                                    <div class=\"text-md mb-2\"> Associated Pages</div>\n                                                    <dx-select-box [items]=\"allConfiguredPage\"\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedPage\"\n                                                        valueExpr=\"pageId\" displayExpr=\"pageName\"\n                                                        [searchEnabled]=\"true\"></dx-select-box>\n                                                </div>\n                                                <div class=\"w-full mx-2\">\n                                                    <div class=\"text-md mb-2\"> Associated Params</div>\n                                                    <dx-text-box\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedParams\"></dx-text-box>\n\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container\n                                            *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\"\n                                                        [searchEnabled]=\"true\"></dx-tag-box>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container *ngIf=\"viewProperties.clickEventOptions.eventType === 'popup'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full\">\n                                                    <div class=\"text-md mb-2\"> Associated Views For Popup</div>\n                                                    <dx-tag-box [items]=\"allConfiguredViews\"\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                        valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                        [showSelectionControls]=\"true\"\n                                                        [searchEnabled]=\"true\"></dx-tag-box>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container\n                                            *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\"\n                                                        [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\"\n                                                                    [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                <div *ngIf=\"activeTab === 'permission'\">\n                    <div class=\"h-full overflow-x-auto\">\n                        <app-user-access [(userOptionContainer)]=\"userOptionContainer\">\n                        </app-user-access>\n                    </div>\n                </div>\n            </div>\n        </ng-container>\n\n\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>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i4$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5.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: i7$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$1.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: i10.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$1.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: 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: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: UserAccessComponent, selector: "app-user-access", inputs: ["userOptionContainer"], outputs: ["userOptionContainerChange"] }, { kind: "component", type: LoaderComponent, selector: "app-loader" }, { kind: "pipe", type: i4$2.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' || 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\"\n                        [title]=\"{ text: chartConfig.caption, font: { size: 14 } }\" palette=\"Soft Pastel\"\n                        [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\" *ngIf=\"chartConfig.displayCenterLabel\">\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\n                *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\" [palette]=\"chartConfig.palette\"\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                        <!-- for others single access chart start -->\n                        <ng-container *ngIf=\"chartType !== 'stackedBar' && chartType !== 'line'\">\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}}\"\n                                        axis=\"{{item.axis}}\" 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}}\"\n                                        axis=\"{{item.axis}}\" name=\"{{item.name}}\">\n                                    </dxi-series>\n                                </ng-container>\n                            </ng-container>\n                        </ng-container>\n                        <!-- for others single access chart end -->\n\n                        <!-- for stackber start -->\n                        <ng-container *ngIf=\"chartType === 'stackedBar' || chartType === 'line'\">\n                            <ng-container *ngFor=\"let item of chartWithThreeDimentionDataSeries\">\n                                <dxi-series valueField=\"{{item}}\" name=\"{{item}}\" type=\"{{chartType}}\"></dxi-series>\n                            </ng-container>\n                        </ng-container>\n                        <!-- for stackber end -->\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 === '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                    <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 === 'permission',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'permission'\n                            }\" (click)=\"setActiveTab('permission')\" type=\"button\" role=\"tab\">\n                            Manage Permissions\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-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\n                            Config\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\n                                        [(ngModel)]=\"mainChartCourceObject.kpiConfig.commonConfig.title\"></dx-text-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Data Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"mainChartCourceObject.kpiConfig.commonConfig.dataField\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-2\"> Display Format </div>\n                                    <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                        [(ngModel)]=\"mainChartCourceObject.kpiConfig.formate\"></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)]=\"mainChartCourceObject.kpiConfig.keyToPass\"></dx-tag-box>\n                                </div>\n\n                            </div>\n                        </div>\n                    </div>\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-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2\"> Date Format </div>\n                            <dx-select-box [items]=\"['MM-DD','YYYY-MM-DD']\"\n                                [(ngModel)]=\"mainChartCourceObject.kpiConfig.displayDateFormat\"></dx-select-box>\n                        </div>\n\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2 mt-6\"> </div>\n                            <dx-check-box [(ngModel)]=\"mainChartCourceObject.kpiConfig.descendingOrder\"\n                                text=\"Descending Order\"></dx-check-box>\n                        </div>\n                        <div class=\"w-2/3 px-2 mt-2\">\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\n                            </div>\n\n\n                        </div>\n\n\n\n\n                    </div>\n\n                    <div class=\"m-3 p-4 bg-white border border-gray-300 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700\"\n                        *ngIf=\"isAdvanceContainer\">\n                        <h6\n                            class=\"mb-2 text-lg tracking-tight text-gray-900 dark:text-white border-b pb-3 flex items-center capitalize\">\n                            Advance Columns for {{chartType}} Chart\n                            <div class=\"ml-auto\">\n\n                            </div>\n                        </h6>\n                        <div class=\"flex flex-row\" *ngIf=\"chartType === 'stackedBar' || chartType === 'line' \">\n                            <div class=\"w-1/3 px-2 mt-2\">\n                                <div class=\"text-md mb-2\"> Chart Group By </div>\n                                <dx-select-box [items]=\"configColume\" (onValueChanged)=\"getChartStackbarChart($event)\"\n                                    [(ngModel)]=\"chartConfig.chartGroupBy\"></dx-select-box>\n                            </div>\n                        </div>\n                        <div class=\"flex flex-row\" *ngIf=\"chartType === 'bubble'\">\n                            <div class=\" flex flex-row\">\n                                <div class=\"mr-2 w-full\">\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 w-full\">\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 w-full\">\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=\"flex flex-row\" *ngIf=\"chartType === 'doughnut' || chartType === 'pie'\">\n                            <div class=\" flex flex-row\">\n                                <!-- <div class=\"w-1/3 px-2 mt-2\">\n                                    <div class=\"text-md mb-2\"> Chart Group By </div>\n                                    <dx-select-box [items]=\"configColume\"\n                                        (onValueChanged)=\"getChartStackbarChart($event)\"\n                                        [(ngModel)]=\"chartConfig.chartGroupBy\"></dx-select-box>\n\n\n                                </div> -->\n                                <div class=\"mt-7 mx-2\">\n                                    <dx-check-box [(ngModel)]=\"chartConfig.displayCenterLabel\"\n                                        text=\"Display Center Label\"></dx-check-box>\n                                </div>\n                            </div>\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\"\n                                *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 === '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\n                                                    [items]=\"['drilldown','sameViewDrilldown','optionalDrillDown','popup','navigateToPage']\"\n                                                    (onValueChanged)=\"getSelectedEventType($event)\"\n                                                    [(ngModel)]=\"viewProperties.clickEventOptions.eventType\"></dx-select-box>\n                                            </div>\n                                        </div>\n                                        <ng-container *ngIf=\"viewProperties.clickEventOptions.eventType === 'popup'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full\">\n                                                    <div class=\"text-md mb-2\"> Associated Views For Popup</div>\n                                                    <dx-tag-box [items]=\"allConfiguredViews\"\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                        valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                        [showSelectionControls]=\"true\"\n                                                        [searchEnabled]=\"true\"></dx-tag-box>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container\n                                            *ngIf=\"viewProperties.clickEventOptions.eventType === 'navigateToPage'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full mx-2\">\n                                                    <div class=\"text-md mb-2\"> Associated Pages</div>\n                                                    <dx-select-box [items]=\"allConfiguredPage\"\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedPage\"\n                                                        valueExpr=\"pageId\" displayExpr=\"pageName\"\n                                                        [searchEnabled]=\"true\"></dx-select-box>\n                                                </div>\n                                                <div class=\"w-full mx-2\">\n                                                    <div class=\"text-md mb-2\"> Associated Params</div>\n                                                    <dx-text-box\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedParams\"></dx-text-box>\n                                                </div>\n                                            </div>\n                                        </ng-container>\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\"\n                                                        [searchEnabled]=\"true\"></dx-tag-box>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container\n                                            *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\"\n                                                        [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\"\n                                                                    [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                <div *ngIf=\"activeTab === 'permission'\">\n                    <div class=\"h-full overflow-x-auto\">\n                        <app-user-access [(userOptionContainer)]=\"userOptionContainer\">\n                        </app-user-access>\n                    </div>\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 === '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                    <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 === 'permission',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'permission'\n                            }\" (click)=\"setActiveTab('permission')\" type=\"button\" role=\"tab\">\n                            Manage Permissions\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-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\n                            Config\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\n                                        [(ngModel)]=\"mainChartCourceObject.kpiConfig.commonConfig.title\"></dx-text-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Data Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"mainChartCourceObject.kpiConfig.commonConfig.dataField\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-2\"> Display Format </div>\n                                    <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                        [(ngModel)]=\"mainChartCourceObject.kpiConfig.formate\"></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)]=\"mainChartCourceObject.kpiConfig.keyToPass\"></dx-tag-box>\n                                </div>\n\n                            </div>\n                        </div>\n                    </div>\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 Format </div>\n                            <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                [(ngModel)]=\"mainChartCourceObject.kpiConfig.formate\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2\"> Date Format </div>\n                            <dx-select-box [items]=\"['MM-DD','YYYY-MM-DD']\"\n                                [(ngModel)]=\"mainChartCourceObject.kpiConfig.displayDateFormat\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2 mt-6\"> </div>\n                            <dx-check-box [(ngModel)]=\"mainChartCourceObject.kpiConfig.descendingOrder\"\n                                text=\"Descending Order\"></dx-check-box>\n                        </div>\n                    </div>\n\n\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 === '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\n                                                    [items]=\"['drilldown','sameViewDrilldown','optionalDrillDown','popup','navigateToPage']\"\n                                                    (onValueChanged)=\"getSelectedEventType($event)\"\n                                                    [(ngModel)]=\"viewProperties.clickEventOptions.eventType\"></dx-select-box>\n                                            </div>\n                                        </div>\n                                        <ng-container\n                                            *ngIf=\"viewProperties.clickEventOptions.eventType === 'navigateToPage'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full mx-2\">\n                                                    <div class=\"text-md mb-2\"> Associated Pages</div>\n                                                    <dx-select-box [items]=\"allConfiguredPage\"\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedPage\"\n                                                        valueExpr=\"pageId\" displayExpr=\"pageName\"\n                                                        [searchEnabled]=\"true\"></dx-select-box>\n                                                </div>\n                                                <div class=\"w-full mx-2\">\n                                                    <div class=\"text-md mb-2\"> Associated Params</div>\n                                                    <dx-text-box\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedParams\"></dx-text-box>\n\n                                                </div>\n                                            </div>\n                                        </ng-container>\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\"\n                                                        [searchEnabled]=\"true\"></dx-tag-box>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container *ngIf=\"viewProperties.clickEventOptions.eventType === 'popup'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full\">\n                                                    <div class=\"text-md mb-2\"> Associated Views For Popup</div>\n                                                    <dx-tag-box [items]=\"allConfiguredViews\"\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                        valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                        [showSelectionControls]=\"true\"\n                                                        [searchEnabled]=\"true\"></dx-tag-box>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container\n                                            *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\"\n                                                        [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\"\n                                                                    [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                <div *ngIf=\"activeTab === 'permission'\">\n                    <div class=\"h-full overflow-x-auto\">\n                        <app-user-access [(userOptionContainer)]=\"userOptionContainer\">\n                        </app-user-access>\n                    </div>\n                </div>\n            </div>\n        </ng-container>\n\n\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>\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\"\n                        [title]=\"{ text: chartConfig.caption, font: { size: 14 } }\" palette=\"Soft Pastel\"\n                        [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                                    *ngIf=\"chartConfig.displayCenterLabel\">\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\n                *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\" [palette]=\"chartConfig.palette\"\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                        <!-- for others single access chart start -->\n                        <ng-container *ngIf=\"chartType !== 'stackedBar' && chartType !== 'line'\">\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}}\"\n                                        axis=\"{{item.axis}}\" 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}}\"\n                                        axis=\"{{item.axis}}\" name=\"{{item.name}}\">\n                                    </dxi-series>\n                                </ng-container>\n                            </ng-container>\n                        </ng-container>\n                        <!-- for others single access chart end -->\n\n                        <!-- for stackber start -->\n                        <ng-container *ngIf=\"chartType === 'stackedBar' || chartType === 'line'\">\n                            <ng-container *ngFor=\"let item of chartWithThreeDimentionDataSeries\">\n                                <dxi-series valueField=\"{{item}}\" name=\"{{item}}\" type=\"{{chartType}}\"></dxi-series>\n                            </ng-container>\n                        </ng-container>\n                        <!-- for stackber end -->\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 === '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                    <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 === 'permission',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'permission'\n                            }\" (click)=\"setActiveTab('permission')\" type=\"button\" role=\"tab\">\n                            Manage Permissions\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-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\n                            Config\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\n                                        [(ngModel)]=\"mainChartCourceObject.kpiConfig.commonConfig.title\"></dx-text-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Data Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"mainChartCourceObject.kpiConfig.commonConfig.dataField\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-2\"> Display Format </div>\n                                    <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                        [(ngModel)]=\"mainChartCourceObject.kpiConfig.formate\"></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)]=\"mainChartCourceObject.kpiConfig.keyToPass\"></dx-tag-box>\n                                </div>\n\n                            </div>\n                        </div>\n                    </div>\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-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2\"> Date Format </div>\n                            <dx-select-box [items]=\"['MM-DD','YYYY-MM-DD']\"\n                                [(ngModel)]=\"mainChartCourceObject.kpiConfig.displayDateFormat\"></dx-select-box>\n                        </div>\n\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2\">Sort By</div>\n                            <dx-tag-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                [(ngModel)]=\"chartConfig.chartSortBy\"></dx-tag-box>\n                        </div>\n\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2 mt-6\"> </div>\n                            <dx-check-box [(ngModel)]=\"mainChartCourceObject.kpiConfig.descendingOrder\"\n                                text=\"Descending Order\"></dx-check-box>\n                        </div>\n                        <div class=\"w-2/3 px-2 mt-2\">\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\n                            </div>\n\n\n                        </div>\n\n\n\n\n                    </div>\n\n                    <div class=\"m-3 p-4 bg-white border border-gray-300 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700\"\n                        *ngIf=\"isAdvanceContainer\">\n                        <h6\n                            class=\"mb-2 text-lg tracking-tight text-gray-900 dark:text-white border-b pb-3 flex items-center capitalize\">\n                            Advance Columns for {{chartType}} Chart\n                            <div class=\"ml-auto\">\n\n                            </div>\n                        </h6>\n                        <div class=\"flex flex-row\" *ngIf=\"chartType === 'stackedBar' || chartType === 'line' \">\n                            <div class=\"w-1/3 px-2 mt-2\">\n                                <div class=\"text-md mb-2\"> Chart Group By </div>\n                                <dx-select-box [items]=\"configColume\" (onValueChanged)=\"getChartStackbarChart($event)\"\n                                    [(ngModel)]=\"chartConfig.chartGroupBy\"></dx-select-box>\n                            </div>\n                        </div>\n                        <div class=\"flex flex-row\" *ngIf=\"chartType === 'bubble'\">\n                            <div class=\" flex flex-row\">\n                                <div class=\"mr-2 w-full\">\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 w-full\">\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 w-full\">\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=\"flex flex-row\" *ngIf=\"chartType === 'doughnut' || chartType === 'pie'\">\n                            <div class=\" flex flex-row\">\n                                <!-- <div class=\"w-1/3 px-2 mt-2\">\n                                    <div class=\"text-md mb-2\"> Chart Group By </div>\n                                    <dx-select-box [items]=\"configColume\"\n                                        (onValueChanged)=\"getChartStackbarChart($event)\"\n                                        [(ngModel)]=\"chartConfig.chartGroupBy\"></dx-select-box>\n\n\n                                </div> -->\n                                <div class=\"mt-7 mx-2\">\n                                    <dx-check-box [(ngModel)]=\"chartConfig.displayCenterLabel\"\n                                        text=\"Display Center Label\"></dx-check-box>\n                                </div>\n                            </div>\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\"\n                                *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 === '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\n                                                    [items]=\"['drilldown','sameViewDrilldown','optionalDrillDown','popup','navigateToPage']\"\n                                                    (onValueChanged)=\"getSelectedEventType($event)\"\n                                                    [(ngModel)]=\"viewProperties.clickEventOptions.eventType\"></dx-select-box>\n                                            </div>\n                                        </div>\n                                        <ng-container *ngIf=\"viewProperties.clickEventOptions.eventType === 'popup'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full\">\n                                                    <div class=\"text-md mb-2\"> Associated Views For Popup</div>\n                                                    <dx-tag-box [items]=\"allConfiguredViews\"\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                        valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                        [showSelectionControls]=\"true\"\n                                                        [searchEnabled]=\"true\"></dx-tag-box>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container\n                                            *ngIf=\"viewProperties.clickEventOptions.eventType === 'navigateToPage'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full mx-2\">\n                                                    <div class=\"text-md mb-2\"> Associated Pages</div>\n                                                    <dx-select-box [items]=\"allConfiguredPage\"\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedPage\"\n                                                        valueExpr=\"pageId\" displayExpr=\"pageName\"\n                                                        [searchEnabled]=\"true\"></dx-select-box>\n                                                </div>\n                                                <div class=\"w-full mx-2\">\n                                                    <div class=\"text-md mb-2\"> Associated Params</div>\n                                                    <dx-text-box\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedParams\"></dx-text-box>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container\n                                            *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\"\n                                                        [searchEnabled]=\"true\"></dx-tag-box>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container\n                                            *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\"\n                                                        [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\"\n                                                                    [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                <div *ngIf=\"activeTab === 'permission'\">\n                    <div class=\"h-full overflow-x-auto\">\n                        <app-user-access [(userOptionContainer)]=\"userOptionContainer\">\n                        </app-user-access>\n                    </div>\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 === '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                    <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 === 'permission',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'permission'\n                            }\" (click)=\"setActiveTab('permission')\" type=\"button\" role=\"tab\">\n                            Manage Permissions\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-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\n                            Config\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\n                                        [(ngModel)]=\"mainChartCourceObject.kpiConfig.commonConfig.title\"></dx-text-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Data Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"mainChartCourceObject.kpiConfig.commonConfig.dataField\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-2\"> Display Format </div>\n                                    <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                        [(ngModel)]=\"mainChartCourceObject.kpiConfig.formate\"></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)]=\"mainChartCourceObject.kpiConfig.keyToPass\"></dx-tag-box>\n                                </div>\n\n                            </div>\n                        </div>\n                    </div>\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 Format </div>\n                            <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                [(ngModel)]=\"mainChartCourceObject.kpiConfig.formate\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2\"> Date Format </div>\n                            <dx-select-box [items]=\"['MM-DD','YYYY-MM-DD']\"\n                                [(ngModel)]=\"mainChartCourceObject.kpiConfig.displayDateFormat\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2\">Sort By</div>\n                            <dx-tag-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                [(ngModel)]=\"chartConfig.chartSortBy\"></dx-tag-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2 mt-6\"> </div>\n                            <dx-check-box [(ngModel)]=\"mainChartCourceObject.kpiConfig.descendingOrder\"\n                                text=\"Descending Order\"></dx-check-box>\n                        </div>\n                    </div>\n\n\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 === '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\n                                                    [items]=\"['drilldown','sameViewDrilldown','optionalDrillDown','popup','navigateToPage']\"\n                                                    (onValueChanged)=\"getSelectedEventType($event)\"\n                                                    [(ngModel)]=\"viewProperties.clickEventOptions.eventType\"></dx-select-box>\n                                            </div>\n                                        </div>\n                                        <ng-container\n                                            *ngIf=\"viewProperties.clickEventOptions.eventType === 'navigateToPage'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full mx-2\">\n                                                    <div class=\"text-md mb-2\"> Associated Pages</div>\n                                                    <dx-select-box [items]=\"allConfiguredPage\"\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedPage\"\n                                                        valueExpr=\"pageId\" displayExpr=\"pageName\"\n                                                        [searchEnabled]=\"true\"></dx-select-box>\n                                                </div>\n                                                <div class=\"w-full mx-2\">\n                                                    <div class=\"text-md mb-2\"> Associated Params</div>\n                                                    <dx-text-box\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedParams\"></dx-text-box>\n\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container\n                                            *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\"\n                                                        [searchEnabled]=\"true\"></dx-tag-box>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container *ngIf=\"viewProperties.clickEventOptions.eventType === 'popup'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full\">\n                                                    <div class=\"text-md mb-2\"> Associated Views For Popup</div>\n                                                    <dx-tag-box [items]=\"allConfiguredViews\"\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                        valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                        [showSelectionControls]=\"true\"\n                                                        [searchEnabled]=\"true\"></dx-tag-box>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container\n                                            *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\"\n                                                        [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\"\n                                                                    [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                <div *ngIf=\"activeTab === 'permission'\">\n                    <div class=\"h-full overflow-x-auto\">\n                        <app-user-access [(userOptionContainer)]=\"userOptionContainer\">\n                        </app-user-access>\n                    </div>\n                </div>\n            </div>\n        </ng-container>\n\n\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>\n</div>" }]
         }], ctorParameters: function () { return [{ type: CommonService }, { type: ApplicationContentService }, { type: i4$1.ToastrService }]; }, propDecorators: { getChartConfigOutPut: [{
                 type: Output
             }], chartconfigData: [{
@@ -4864,7 +4866,6 @@ class DashTableComponent {
             this.configColume = Object.keys(value.data[0]);
             this.dataSourseForTable = value.data.slice(0, 10);
             this.selectedViewConfigs = value;
-            debugger;
             this.userOptionContainer = value.selectedWidgetConfig?.permissions ? value.selectedWidgetConfig.permissions : [];
             this.selectedTableViewType = value.selectedViewType;
             if (value.selectedWidgetConfig) {
@@ -7050,7 +7051,6 @@ class CreateCompViewComponent {
         this.createViewConfig(data);
     }
     createViewConfig(data) {
-        debugger;
         this.creatCompViewObject['datasetId'] = data['datasetId'];
         this.creatCompViewObject['viewType'] = this.selectedViewType;
         this.isLoader = true;
@@ -8956,12 +8956,16 @@ class GammaAdvanceOperatorTableComponent {
         }
     }
     shouldShowColumn(field) {
-        let excludedFields = ['recordDate', 'record_date', 'eventDate', 'event_date'];
+        let defaultFields = ['recordDate', 'record_date', 'eventDate', 'event_date'];
+        let excludedFields = [];
         if (this.tableShortBy && this.tableShortBy.length !== 0) {
             this.tableShortBy.forEach(element => {
                 excludedFields.push(element);
             });
         }
+        else {
+            excludedFields = defaultFields;
+        }
         return !excludedFields.includes(field);
     }
 }
@@ -9233,6 +9237,26 @@ class GammaAdvanceChartComponent {
                                         .sort((a, b) => moment$1(b[value.kpiConfig.dataConfig['argumentField']]).diff(moment$1(a[value.kpiConfig.dataConfig['argumentField']])));
                                 }
                             }
+                            const chartSortBy = value.kpiConfig.dataConfig['chartSortBy'];
+                            const isDesc = this.chartOrderBy === true;
+                            if (Array.isArray(chartSortBy) && chartSortBy.length !== 0) {
+                                value.kpiConfig.dataSource.sort((a, b) => {
+                                    for (const key of chartSortBy) {
+                                        if (a[key] == null && b[key] == null)
+                                            continue;
+                                        if (a[key] == null)
+                                            return 1;
+                                        if (b[key] == null)
+                                            return -1;
+                                        if (a[key] === b[key])
+                                            continue;
+                                        return isDesc
+                                            ? b[key] - a[key]
+                                            : a[key] - b[key];
+                                    }
+                                    return 0;
+                                });
+                            }
                             this.getMonthlyChart(value.kpiConfig.dataSource, value.kpiConfig.dataConfig);
                             this.isChartvisible == true;
                         }
@@ -12890,10 +12914,10 @@ class PageConfigComponent {
     }
 }
 PageConfigComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PageConfigComponent, deps: [{ token: CommonService }, { token: i2.ActivatedRoute }, { token: i0.ViewContainerRef }, { token: i0.ComponentFactoryResolver }, { token: ApplicationContentService }, { token: i4$1.ToastrService }, { token: i2.Router }, { token: ApplicationDatssetsCall }], target: i0.ɵɵFactoryTarget.Component });
-PageConfigComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PageConfigComponent, selector: "app-dashbord-config", viewQueries: [{ propertyName: "dynamicComponentContainer", first: true, predicate: ["dynamicComponentContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "containerRef", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef }, { propertyName: "dynamicContainer", first: true, predicate: ["dynamicContainer"], descendants: true, static: true }, { propertyName: "scrollView", first: true, predicate: DxScrollViewComponent, descendants: true }], ngImport: i0, template: "<app-loading *ngIf=\"loadingModal\"></app-loading>\n\n<div class=\"flex flex-row h-[90vh] w-full\">\n    <div class=\"w-3/4 border-r h-full flex flex-col px-2\">\n        <!-- Scrollable content -->\n        <div class=\"flex-grow overflow-y-auto\">\n            <div class=\"flex flex-wrap my-3\" #dynamicContainer></div>\n        </div>\n\n        <!-- Fixed bottom section -->\n        <div class=\"flex flex-row justify-center items-center h-16 m-2 border shrink-0\">\n            <lib-common-header [pageTitle]=\"''\"></lib-common-header>\n            <div class=\"{{commonService.btn_primary_md}} m-2\" (click)=\"addWidget()\">Add Layout</div>\n            <div class=\"{{commonService.btnOthersPurple}} m-2 cursor-pointer\" (click)=\"getViewPage()\">View Page</div>\n        </div>\n    </div>\n    <div class=\"w-1/4 p-2 h-full\">\n        <ng-container *ngIf=\"isDashBoardContent\">\n            <div class=\"{{commonService.btnDarkBlack}} m-2 w-fit text-center cursar-pointer\" (click)=\"backToMainView()\">\n                Back\n            </div>\n            <ng-container *ngFor=\"let item of page_config.api_config; let i = index\">\n                <div class=\"mb-2 flex flex-row justify-between items-center border-b\">\n                    <div class=\"text-md py-2 font-bold  text-white px-2\">\n                        {{item.widGetConfig.widgetTitle}}\n                    </div>\n                    <div class=\"flex space-x-2\">\n                        <!-- <button (click)=\"editSelectedWidget(item, i)\"\n                            class=\"w-8 h-8 bg-sky-600 hover:bg-blue-800 text-white rounded-full flex items-center justify-center\">\n                            <i class=\"fa fa-edit\"></i>\n                        </button> -->\n                        <button\n                            class=\"w-8 h-8 bg-red-600 hover:bg-red-800 text-white rounded-full flex items-center justify-center\">\n                            <i class=\"fa fa-trash-o\"></i>\n                        </button>\n                    </div>\n                </div>\n\n            </ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"isWidgetCreationContent\">\n            <h6 class=\"mb-2 font-bold text-lg tracking-tight text-gray-900 dark:text-white border-b pb-3\">\n                <span *ngIf=\"!islayoutCreate\">Widget Settings</span>\n                <span *ngIf=\"islayoutCreate\">Layout Settings</span>\n            </h6>\n            <div class=\"flex flex-row my-4\">\n                <dx-check-box class=\"ml-auto\" [(ngModel)]=\"addedwidGetConfig.display\" text=\"Display\"></dx-check-box>\n            </div>\n            <div class=\"flex flex-row mb-2 justify-between\">\n                <span class=\"text-md my-auto px-2\">Width</span>\n                <dx-select-box class=\"w-1/2\" [items]=\"widget_width\"\n                    [(ngModel)]=\"addedwidGetConfig.width\"></dx-select-box>\n            </div>\n            <div class=\"flex flex-row mb-2 justify-between\">\n                <span class=\"text-md my-auto px-2\">Height</span>\n                <dx-text-box class=\"w-1/2\" [(ngModel)]=\"addedwidGetConfig.height\"></dx-text-box>\n            </div>\n\n            <div class=\"flex flex-row mb-2 justify-between\" *ngIf=\"!islayoutCreate\">\n                <div class=\"text-md my-auto px-2\">Widget Title</div>\n                <div><dx-text-box class=\"w-1/2\" [(ngModel)]=\"widgetTitle\"></dx-text-box></div>\n            </div>\n            <div class=\"flex flex-row mb-2 justify-between\" *ngIf=\"!islayoutCreate\">\n                <span class=\"text-md my-auto px-2\">Widget Name</span>\n                <dx-text-box class=\"w-1/2\" [(ngModel)]=\"widgetName\"></dx-text-box>\n            </div>\n\n\n            <div class=\"flex flex-row mb-5 justify-between\" *ngIf=\"islayoutCreate\">\n                <span class=\"text-sm my-auto px-2\">Layout Title</span>\n                <dx-text-box class=\"w-1/2\" [(ngModel)]=\"addedwidGetConfig.widgetTitle\"></dx-text-box>\n            </div>\n\n            <div class=\"flex flex-row mb-2 justify-between\">\n                <span class=\"text-md my-auto px-2\">Filter</span>\n                <dx-select-box class=\"w-1/2\" [items]=\"filterDataSource\" displayExpr=\"filterName\" [searchEnabled]=\"true\"\n                    valueExpr=\"filterId\" [(ngModel)]=\"selectedFilterId\"\n                    (onValueChanged)=\"getFilterValueById($event)\"></dx-select-box>\n            </div>\n            <ng-container *ngIf=\"!isUpdateWidget\">\n                <div class=\"mt-6\" *ngIf=\"!islayoutCreate && isEditMainLayout\">\n                    <ng-container\n                        *ngFor=\"let item of dashBoardWidgetConfig.widgets[newWidgetIndex].widgetNode;let i = index\">\n                        <div class=\"mb-2 flex flex-row justify-between items-center border-b \">\n                            <div class=\"text-md py-2 font-bold  text-white px-2\">\n                                {{item.nodeProperties.widgetTitle}}\n                            </div>\n                            <div class=\"flex space-x-2\">\n                                <button *ngIf=\"i !== 0\" class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                    (click)=\"moveItemForPageView(i, 'up')\">\n                                    <i class=\"fa fa-arrow-up\" aria-hidden=\"true\"></i>\n                                </button>\n\n                                <button\n                                    *ngIf=\"i !==  dashBoardWidgetConfig.widgets[newWidgetIndex].widgetNode.length - 1\"\n                                    class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                    (click)=\"moveItemForPageView(i, 'down')\">\n                                    <i class=\"fa fa-arrow-down\" aria-hidden=\"true\"></i>\n                                </button>\n                                <button\n                                    class=\"w-8 h-8 bg-red-600 hover:bg-red-800 text-white rounded-full flex items-center justify-center\">\n                                    <i class=\"fa fa-trash-o\"></i>\n                                </button>\n                            </div>\n                        </div>\n\n                    </ng-container>\n                </div>\n            </ng-container>\n\n\n\n            <ng-container *ngIf=\"isUpdateWidget\">\n                <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Application Views\n                </div>\n                <div class=\"border-x border-b p-2\">\n                    <ng-container *ngFor=\"let item of allWidgetInnerContent; let i = index\">\n                        <div class=\"group  w-full flex justify-between border-b items-center\">\n                            <div class=\"text-md font-bold  py-2 cursor-pointer\">\n                                {{item.viewName}}\n                            </div>\n\n                            <div class=\"flex space-x-2\">\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 !== allWidgetInnerContent.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=\"rounded-full p-2 text-white bg-blue-500 hover:bg-blue-700 mb-2\"\n                                    (click)=\"editComponentViews(item)\">\n                                    <i class=\"fa fa-eye\" aria-hidden=\"true\"></i>\n                                </button>\n                                <button class=\"rounded-full p-2 text-white bg-blue-500 hover:bg-blue-700 mb-2\"\n                                    (click)=\"editComponentDatasets(item)\">\n                                    <i class=\"fa fa-database\" aria-hidden=\"true\"></i>\n                                </button>\n                                <button class=\"rounded-full p-2 text-white bg-red-500 hover:bg-red-700 mb-2\"\n                                    (click)=\"getDeleteViewFromConfig(i)\">\n                                    <i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                </button>\n                            </div>\n\n                        </div>\n                    </ng-container>\n                </div>\n            </ng-container>\n            <ng-container *ngIf=\"isUpdateWidget\">\n                <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Add Filter For View\n\n                </div>\n                <div class=\"border-x border-b p-2\">\n                    <div class=\"flex flex-row py-3 border-b\">\n                        <dx-check-box [(ngModel)]=\"addedwidGetConfig.isWidgetFilter\"\n                            text=\"Popup Columns Filter Enable\"></dx-check-box>\n                    </div>\n                    <div class=\"flex flex-row my-2 border-b\">\n                        <ng-container *ngFor=\"let item of nodeProperticeFilters; let i = index\">\n                            <div class=\"flex flex-wrap border-b\">\n                                <div class=\"px-1 w-1/3\">\n                                    <div class=\"text-md\">Input Type</div>\n                                    <dx-select-box [items]=\"['text']\" [(ngModel)]=\"item.input_type\"\n                                        value=\"text\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1-1 w-2/3\" *ngIf=\"item.input_type == 'text'\">\n                                    <div class=\"text-md\">Server Column</div>\n                                    <dx-text-box [(ngModel)]=\"item.server_column\"></dx-text-box>\n                                </div>\n                                <div class=\"px-1-1 w-1/2\" *ngIf=\"item.input_type == 'text'\">\n                                    <div class=\"text-md\">Local Column</div>\n                                    <dx-text-box [(ngModel)]=\"item.local_column\"></dx-text-box>\n                                </div>\n                                <div class=\"px-1-1 w-1/3\" *ngIf=\"item.input_type == 'select'\">\n                                    <div class=\"text-md\">Columns Name</div>\n                                    <dx-text-box [(ngModel)]=\"item.select_box_option\"></dx-text-box>\n                                </div>\n                                <div class=\"px-1-1 w-1/2\">\n                                    <div class=\"flex justify-end\">\n                                        <div class=\"{{commonService.btn_danger_sm}} w-24 mt-6 text-center\"\n                                            (click)=\"deleteNodeFilter(i)\">Delete Filter</div>\n                                    </div>\n                                </div>\n                            </div>\n                        </ng-container>\n                    </div>\n                    <div class=\"{{commonService.btn_primary_sm}} w-auto text-center\"\n                        (click)=\"getNodeProperticeFilterOption()\">Add\n                        Filter</div>\n                </div>\n            </ng-container>\n\n            <div class=\"flex flex-row justify-end items-center h-16 m-2\">\n                <div class=\"{{commonService.btnDarkBlack}} m-2 w-fit text-center cursar-pointer\"\n                    (click)=\"backToMainView()\">Back\n                </div>\n                <ng-container *ngIf=\"!isUpdateWidget\">\n                    <div *ngIf=\"islayoutCreate\"\n                        class=\"{{commonService.btn_success_md}} m-2 w-fit text-center cursar-pointer\"\n                        (click)=\"addLayoutTOview()\">Add View\n                    </div>\n                    <div *ngIf=\"!islayoutCreate && !isEditMainLayout\"\n                        class=\"{{commonService.btn_primary_md}} m-2 w-fit text-center cursar-pointer\"\n                        (click)=\"addWidgetTOview()\">Add Layout\n                    </div>\n                    <div *ngIf=\"!islayoutCreate && isEditMainLayout\"\n                        class=\"{{commonService.btn_primary_md}} m-2 w-fit text-center cursar-pointer\"\n                        (click)=\"updateLayoutWidgetTOview()\">Update Layout\n                    </div>\n\n                </ng-container>\n\n                <div class=\"{{commonService.btn_warning_md}} m-2 w-fit text-center cursar-pointer\"\n                    (click)=\"updateToView()\" *ngIf=\"isUpdateWidget\">Update View\n                </div>\n\n            </div>\n\n\n            <!-- <pre><code>{{dashBoardWidgetConfig | json}}</code></pre> -->\n        </ng-container>\n        <ng-container *ngIf=\"isChartButtonClick\">\n            <h6\n                class=\"mb-2 font-bold text-md tracking-tight text-gray-900 dark:text-white border-b pb-3 flex  items-center\">\n                <i class=\"fa fa-bar-chart-o mr-2\"></i> Select View\n                <div class=\"{{commonService.btnDarkBlack}} m-2 w-fit text-center cursor-pointer\"\n                    (click)=\"backToMainView()\">Back\n                </div>\n            </h6>\n            <div class=\" h-[80vh] overflow-x-auto\">\n                <div class=\"relative my-2 \">\n                    <input type=\"text\" [(ngModel)]=\"viewToSearch\" (keyup)=\"filterViews()\" (keydown)=\"filterViews()\"\n                        class=\"bg-gray-800 border border-gray-700 text-gray-200 text-sm focus:ring-gray-400 focus:border-gray-500 block w-full p-4 h-8 rounded\"\n                        placeholder=\"Search View\" />\n                    <button type=\"button\" class=\"absolute inset-y-0 right-0 flex items-center pr-6\">\n                        <mat-icon class=\"rotate-90 cursor-pointer\" [svgIcon]=\"'heroicons_outline:search'\"></mat-icon>\n                    </button>\n                </div>\n                <ng-container *ngFor=\"let item of filteredComponentConfig\">\n                    <div class=\"relative group my-3 w-full\">\n                        <!-- Item View Name -->\n                        <div class=\"text-md font-bold border-b py-2 cursar-pointer\">\n                            {{item.viewName}}</div>\n\n                        <!-- Hover Buttons -->\n                        <div\n                            class=\"absolute top-0  right-0 flex space-x-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pb-2\">\n                            <button class=\"rounded-full p-2 text-white bg-blue-500 hover:bg-blue-700\">\n                                <i class=\"fa fa-pencil-square-o\" aria-hidden=\"true\"\n                                    (click)=\"editComponentViews(item)\"></i>\n                            </button>\n                            <button class=\"rounded-full p-2 text-white bg-green-500 hover:bg-green-700\"\n                                (click)=\"getComponentConfig(item)\">\n                                <i class=\"fa fa-plus\"></i>\n                            </button>\n                        </div>\n                    </div>\n                </ng-container>\n            </div>\n\n        </ng-container>\n        <ng-container *ngIf=\"isDefaultView\">\n            <ng-container *ngFor=\"let item of dashBoardWidgetConfig.widgets; let i = index\">\n                <div class=\"group my-3 w-full flex justify-between border-b items-center\">\n                    <div class=\"text-md font-bold  py-2 cursor-pointer\">\n                        {{item.widgetTitle}}\n                    </div>\n\n                    <div class=\"flex space-x-2\">\n                        <button *ngIf=\"i !== 0\" class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                            (click)=\"moveItemForWidget(i, 'up')\">\n                            <i class=\"fa fa-arrow-up\" aria-hidden=\"true\"></i>\n                        </button>\n\n                        <button *ngIf=\"i !== dashBoardWidgetConfig.widgets.length - 1\"\n                            class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                            (click)=\"moveItemForWidget(i, 'down')\">\n                            <i class=\"fa fa-arrow-down\" aria-hidden=\"true\"></i>\n                        </button>\n                        <button class=\"rounded-full p-2 text-white bg-blue-500 hover:bg-blue-700 mb-2\"\n                            (click)=\"getEditViewFromLayout(item,i)\">\n                            <i class=\"fa fa-pencil-square\" aria-hidden=\"true\"></i>\n\n                        </button>\n                        <button class=\"rounded-full p-2 text-white bg-red-500 hover:bg-red-700 mb-2\"\n                            (click)=\"getDeleteViewFromLayout(item,i)\">\n                            <i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                        </button>\n\n                    </div>\n                </div>\n            </ng-container>\n        </ng-container>\n\n\n    </div>\n</div>\n<!-- </div> -->\n\n<dx-popup [(visible)]=\"isEditOptionClick\" [closeOnOutsideClick]=\"false\" [dragEnabled]=\"false\" [width]=\"1200\"\n    [height]=\"'auto'\" [showTitle]=\"true\" class=\"popup\" title=\"{{editViewdataSourceModal.viewName}}\">\n    <div *dxTemplate=\"let data of 'content'\">\n\n        <app-dash-chart [datasetmodal]=\"editViewdataSourceModal\" (getChartConfigOutPut)=\"getEmitNewChartCongig($event)\"\n            *ngIf=\"editViewdataSourceModal.viewType == 'chart'\"></app-dash-chart>\n        <app-dash-table [datasetmodal]=\"editViewdataSourceModal\" (getTableConfigOutPut)=\"getEmitNewChartCongig($event)\"\n            *ngIf=\"editViewdataSourceModal.viewType == 'table'\"></app-dash-table>\n        <!-- <app-dash-other [datasetmodal]=\"editViewdataSourceModal\" *ngIf=\"editViewdataSourceModal.viewType == 'others'\"\n            (createOtherComponentView)=\"getEmitNewChartCongig($event)\"></app-dash-other> -->\n    </div>\n</dx-popup>\n\n\n<dx-popup [(visible)]=\"isCreateDataset\" [closeOnOutsideClick]=\"false\" [dragEnabled]=\"false\" [width]=\"1200\"\n    [height]=\"600\" [showTitle]=\"true\" class=\"popup\" title=\"Dataset Editor\">\n    <div *dxTemplate=\"let data of 'content'\">\n        <dx-scroll-view class=\"h-full\" [width]=\"'100%'\" [height]=\"'100%'\">\n            <app-create-dataset [isHeader]=\"false\"></app-create-dataset>\n        </dx-scroll-view>\n    </div>\n</dx-popup>\n<dx-popup [(visible)]=\"isCreateDatasetWithDatasetId\" [closeOnOutsideClick]=\"false\" [dragEnabled]=\"false\" [width]=\"1200\"\n    [height]=\"600\" [showTitle]=\"true\" class=\"popup\" title=\"Dataset Editor\" (onHidden)=\"getDatasetPopupHide($event)\">\n    <div *dxTemplate=\"let data of 'content'\">\n        <dx-scroll-view class=\"h-full\" [width]=\"'100%'\" [height]=\"'100%'\">\n            <app-create-dataset [selectedDatasetId]=\"selectedDatasetId\" [isHeader]=\"false\"></app-create-dataset>\n        </dx-scroll-view>\n    </div>\n</dx-popup>\n\n<dx-popup [(visible)]=\"isCreateNewViewWithDefaultView\" [closeOnOutsideClick]=\"false\" [dragEnabled]=\"false\"\n    [width]=\"1200\" [height]=\"600\" [showTitle]=\"true\" class=\"popup\" title=\"Views Editor\"\n    (onHidden)=\"getViewPopupHide($event)\">\n    <div *dxTemplate=\"let data of 'content'\">\n        <dx-scroll-view class=\"h-full\" [width]=\"'100%'\" [height]=\"'100%'\">\n            <app-create-comp-view [selectedViewId]=\"selectedViewId\" [isHeader]=\"false\"></app-create-comp-view>\n        </dx-scroll-view>\n    </div>\n</dx-popup>\n<dx-popup [(visible)]=\"isCreateNewView\" [closeOnOutsideClick]=\"false\" [dragEnabled]=\"false\" [width]=\"1200\"\n    [height]=\"600\" [showTitle]=\"true\" class=\"popup\" title=\"Views Editor\">\n    <div *dxTemplate=\"let data of 'content'\">\n        <dx-scroll-view class=\"h-full\" [width]=\"'100%'\" [height]=\"'100%'\">\n            <app-create-comp-view [isHeader]=\"false\"></app-create-comp-view>\n        </dx-scroll-view>\n    </div>\n</dx-popup>\n\n\n<dx-popup [(visible)]=\"isWidgetFilters\" [closeOnOutsideClick]=\"false\" [dragEnabled]=\"false\" [width]=\"800\" [height]=\"400\"\n    [showTitle]=\"true\" class=\"popup\" title=\"Dataset Filter\">\n    <div *dxTemplate=\"let data of 'content'\">\n        <div class=\"my-2\">\n            <dx-scroll-view [width]=\"'100%'\" [height]=\"'85%'\">\n                <ng-container *ngFor=\"let item of nodeproperticeFilterDataSource; let i = index\">\n                    <div class=\"flex flex-row my-2\">\n                        <div class=\"m-1\">\n                            <dx-text-box [(ngModel)]=\"item.columnName\"></dx-text-box>\n                        </div>\n                        <div class=\"m-1\">\n                            <dx-select-box [items]=\"['get','let']\" [(ngModel)]=\"item.operator\"\n                                placeholder=\"Operator\"></dx-select-box>\n                        </div>\n                        <div class=\"m-1\">\n                            <dx-text-box [(ngModel)]=\"item.value\"></dx-text-box>\n                        </div>\n                    </div>\n                </ng-container>\n\n            </dx-scroll-view>\n            <div class=\"flex justify-end mx-1 flex-grow\">\n                <button class=\"{{commonService.btn_success_md}} cursor-pointer mt-2\"\n                    (click)=\"submitFilter()\">Submit</button>\n            </div>\n\n        </div>\n\n    </div>\n</dx-popup>\n<dx-popup [(visible)]=\"isAdvanceLayout\" [closeOnOutsideClick]=\"false\" [dragEnabled]=\"false\" [width]=\"1200\"\n    [height]=\"700\" [showTitle]=\"true\" class=\"popup\" title=\"Dataset Filter\">\n    <div *dxTemplate=\"let data of 'content'\">\n        <div class=\"flex flex-row px-2 mb-3\">\n            <div class=\"w-2/3 mb-2\">\n                <div class=\"text-md mb-2\">Select Views</div>\n                <dx-tag-box [dataSource]=\"componentConfigDataSource\" valueExpr=\"viewId\" displayExpr=\"viewName\"\n                    [multiline]=\"true\" [showSelectionControls]=\"true\" [(ngModel)]=\"selectedViewsIds\"\n                    [maxDisplayedTags]=\"3\" (onValueChanged)=\"getSelectedColumnSource($event)\" [searchEnabled]=\"true\">\n                </dx-tag-box>\n            </div>\n            <div class=\"w-1/3 px-2\">\n                <button class=\"{{commonService.btn_primary_md}} mt-6\" (click)=\"getProcessForConfig()\">\n                    Add To View\n                </button>\n                <!-- <button class=\"{{commonService.btn_danger_md}} cursor-pointer mt-6\" (click)=\"cancelCdrConfig()\">Cancel\n                                    </button> -->\n            </div>\n        </div>\n        <dx-scroll-view [width]=\"'100%'\" [height]=\"'80%'\">\n\n            <div class=\"m-2 border-b\" *ngIf=\"isProceed\">\n                <ng-container *ngFor=\"let item of advanceLayoutContainer; let i = index;\">\n                    <div class=\"flex flex-row m-2\">\n                        <div class=\"mx-2 w-1/2\">\n                            <div class=\"text-md mb-2\">View Name</div>\n                            <dx-text-box [(ngModel)]=\"item.compConfig.viewConfig[0].viewName\"></dx-text-box>\n                        </div>\n                        <div class=\"mx-2\">\n                            <div class=\"text-md mb-2\">Widget Title</div>\n                            <dx-text-box [(ngModel)]=\"item.nodeProperties.widgetTitle\"></dx-text-box>\n                        </div>\n\n                        <div class=\"mx-2\">\n                            <div class=\"text-md mb-2\">Widget Width</div>\n                            <dx-select-box [searchEnabled]=\"true\" [items]=\"widget_width\"\n                                [(ngModel)]=\"item.nodeProperties.width\"></dx-select-box>\n                        </div>\n\n                        <div class=\"mx-2\">\n                            <div class=\"text-md mb-2\">Widget Height</div>\n                            <dx-text-box [(ngModel)]=\"item.nodeProperties.height\"></dx-text-box>\n                        </div>\n                        <div class=\"mx-2\">\n                            <div class=\"text-md mb-2\">Widget Filter</div>\n                            <dx-select-box [items]=\"filterDataSource\" displayExpr=\"filterName\" [searchEnabled]=\"true\"\n                                valueExpr=\"filterId\" [(ngModel)]=\"item.filterId\"></dx-select-box>\n                        </div>\n                        <div class=\"mx-2\">\n                            <div class=\"text-md mt-8\">\n                                <dx-check-box [(ngModel)]=\"item.nodeProperties.display\" text=\"Display\"></dx-check-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2\">\n                            <button class=\"{{commonService.btn_danger_sm}} cursor-pointer mt-8\"\n                                (click)=\"deleteView(i)\"><i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                            </button>\n                        </div>\n                    </div>\n                </ng-container>\n            </div>\n        </dx-scroll-view>\n        <div class=\"flex justify-end mx-1 my-2 flex-grow\">\n            <button class=\"{{commonService.btn_success_md}} cursor-pointer mt-2\" (click)=\"submitAdvanceView()\">Add\n                Layout</button>\n        </div>\n    </div>\n</dx-popup>", styles: ["::ng-deep #scrollview-demo{min-height:550px}::ng-deep #scrollview{height:auto;position:absolute;top:0;bottom:300px;padding:20px}::ng-deep #scrollview-content{white-space:pre-wrap}.scrollable-content{height:90vh;overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: i4$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i5$1.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: i9$1.DxPopupComponent, selector: "dx-popup", inputs: ["accessKey", "animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "dragAndResizeArea", "dragEnabled", "dragOutsideBoundary", "elementAttr", "focusStateEnabled", "fullScreen", "height", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "resizeEnabled", "restorePosition", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showTitle", "tabIndex", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onResize", "onResizeEnd", "onResizeStart", "onShowing", "onShown", "onTitleRendered", "accessKeyChange", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "dragAndResizeAreaChange", "dragEnabledChange", "dragOutsideBoundaryChange", "elementAttrChange", "focusStateEnabledChange", "fullScreenChange", "heightChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "resizeEnabledChange", "restorePositionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showTitleChange", "tabIndexChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { kind: "component", type: i10$1.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: 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.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: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: LoadingComponent$1, selector: "app-loading" }, { kind: "component", type: CreateCompViewComponent, selector: "app-create-comp-view", inputs: ["kpiTreeData", "isHeader", "selectedViewId"] }, { 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: CreateDatasetComponent, selector: "app-create-dataset", inputs: ["isHeader", "selectedDatasetId"] }, { kind: "component", type: CommonHeaderComponent, selector: "lib-common-header", inputs: ["pageTitle"] }] });
+PageConfigComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PageConfigComponent, selector: "app-dashbord-config", viewQueries: [{ propertyName: "dynamicComponentContainer", first: true, predicate: ["dynamicComponentContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "containerRef", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef }, { propertyName: "dynamicContainer", first: true, predicate: ["dynamicContainer"], descendants: true, static: true }, { propertyName: "scrollView", first: true, predicate: DxScrollViewComponent, descendants: true }], ngImport: i0, template: "<app-loading *ngIf=\"loadingModal\"></app-loading>\n\n<div class=\"flex flex-row h-[90vh] w-full\">\n    <div class=\"w-3/4 border-r h-full flex flex-col px-2\">\n        <!-- Scrollable content -->\n        <div class=\"flex-grow overflow-y-auto\">\n            <div class=\"flex flex-wrap my-3\" #dynamicContainer></div>\n        </div>\n\n        <!-- Fixed bottom section -->\n        <div class=\"flex flex-row justify-center items-center h-16 m-2 border shrink-0\">\n            <lib-common-header [pageTitle]=\"''\"></lib-common-header>\n            <div class=\"{{commonService.btn_primary_md}} m-2\" (click)=\"addWidget()\">Add Layout</div>\n            <div class=\"{{commonService.btnOthersPurple}} m-2 cursor-pointer\" (click)=\"getViewPage()\">View Page</div>\n        </div>\n    </div>\n    <div class=\"w-1/4 p-2 h-full\">\n        <ng-container *ngIf=\"isDashBoardContent\">\n            <div class=\"{{commonService.btnDarkBlack}} m-2 w-fit text-center cursar-pointer\" (click)=\"backToMainView()\">\n                Back\n            </div>\n            <ng-container *ngFor=\"let item of page_config.api_config; let i = index\">\n                <div class=\"mb-2 flex flex-row justify-between items-center border-b\">\n                    <div class=\"text-md py-2 font-bold  text-white px-2\">\n                        {{item.widGetConfig.widgetTitle}}\n                    </div>\n                    <div class=\"flex space-x-2\">\n                        <!-- <button (click)=\"editSelectedWidget(item, i)\"\n                            class=\"w-8 h-8 bg-sky-600 hover:bg-blue-800 text-white rounded-full flex items-center justify-center\">\n                            <i class=\"fa fa-edit\"></i>\n                        </button> -->\n                        <button\n                            class=\"w-8 h-8 bg-red-600 hover:bg-red-800 text-white rounded-full flex items-center justify-center\">\n                            <i class=\"fa fa-trash-o\"></i>\n                        </button>\n                    </div>\n                </div>\n\n            </ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"isWidgetCreationContent\">\n            <h6 class=\"mb-2 font-bold text-lg tracking-tight text-gray-900 dark:text-white border-b pb-3\">\n                <span *ngIf=\"!islayoutCreate\">Widget Settings</span>\n                <span *ngIf=\"islayoutCreate\">Layout Settings</span>\n            </h6>\n            <div class=\"flex flex-row my-4\">\n                <dx-check-box class=\"ml-auto\" [(ngModel)]=\"addedwidGetConfig.display\" text=\"Display\"></dx-check-box>\n            </div>\n            <div class=\"flex flex-row mb-2 justify-between\">\n                <span class=\"text-md my-auto px-2\">Width</span>\n                <dx-select-box class=\"w-1/2\" [items]=\"widget_width\"\n                    [(ngModel)]=\"addedwidGetConfig.width\"></dx-select-box>\n            </div>\n            <div class=\"flex flex-row mb-2 justify-between\">\n                <span class=\"text-md my-auto px-2\">Height</span>\n                <dx-text-box class=\"w-1/2\" [(ngModel)]=\"addedwidGetConfig.height\"></dx-text-box>\n            </div>\n\n            <div class=\"flex flex-row mb-2 justify-between\" *ngIf=\"!islayoutCreate\">\n                <div class=\"text-md my-auto px-2 inline\">Widget Title</div>\n                <dx-text-box class=\"w-full\" [(ngModel)]=\"widgetTitle\"></dx-text-box>\n            </div>\n            <div class=\"flex flex-row mb-2 justify-between\" *ngIf=\"!islayoutCreate\">\n                <div class=\"text-md my-auto px-2\">Widget Name</div>\n                <dx-text-box class=\"w-full\" [(ngModel)]=\"widgetName\"></dx-text-box>\n            </div>\n\n\n            <div class=\"flex flex-row mb-5 justify-between\" *ngIf=\"islayoutCreate\">\n                <span class=\"text-sm my-auto px-2\">Layout Title</span>\n                <dx-text-box class=\"w-1/2\" [(ngModel)]=\"addedwidGetConfig.widgetTitle\"></dx-text-box>\n            </div>\n\n            <div class=\"flex flex-row mb-2 justify-between\">\n                <span class=\"text-md my-auto px-2\">Filter</span>\n                <dx-select-box class=\"w-1/2\" [items]=\"filterDataSource\" displayExpr=\"filterName\" [searchEnabled]=\"true\"\n                    valueExpr=\"filterId\" [(ngModel)]=\"selectedFilterId\"\n                    (onValueChanged)=\"getFilterValueById($event)\"></dx-select-box>\n            </div>\n            <ng-container *ngIf=\"!isUpdateWidget\">\n                <div class=\"mt-6\" *ngIf=\"!islayoutCreate && isEditMainLayout\">\n                    <ng-container\n                        *ngFor=\"let item of dashBoardWidgetConfig.widgets[newWidgetIndex].widgetNode;let i = index\">\n                        <div class=\"mb-2 flex flex-row justify-between items-center border-b \">\n                            <div class=\"text-md py-2 font-bold  text-white px-2\">\n                                {{item.nodeProperties.widgetTitle}}\n                            </div>\n                            <div class=\"flex space-x-2\">\n                                <button *ngIf=\"i !== 0\" class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                    (click)=\"moveItemForPageView(i, 'up')\">\n                                    <i class=\"fa fa-arrow-up\" aria-hidden=\"true\"></i>\n                                </button>\n\n                                <button\n                                    *ngIf=\"i !==  dashBoardWidgetConfig.widgets[newWidgetIndex].widgetNode.length - 1\"\n                                    class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                    (click)=\"moveItemForPageView(i, 'down')\">\n                                    <i class=\"fa fa-arrow-down\" aria-hidden=\"true\"></i>\n                                </button>\n                                <button\n                                    class=\"w-8 h-8 bg-red-600 hover:bg-red-800 text-white rounded-full flex items-center justify-center\">\n                                    <i class=\"fa fa-trash-o\"></i>\n                                </button>\n                            </div>\n                        </div>\n\n                    </ng-container>\n                </div>\n            </ng-container>\n\n\n\n            <ng-container *ngIf=\"isUpdateWidget\">\n                <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Application Views\n                </div>\n                <div class=\"border-x border-b p-2\">\n                    <ng-container *ngFor=\"let item of allWidgetInnerContent; let i = index\">\n                        <div class=\"group  w-full flex justify-between border-b items-center\">\n                            <div class=\"text-md font-bold  py-2 cursor-pointer\">\n                                {{item.viewName}}\n                            </div>\n\n                            <div class=\"flex space-x-2\">\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 !== allWidgetInnerContent.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=\"rounded-full p-2 text-white bg-blue-500 hover:bg-blue-700 mb-2\"\n                                    (click)=\"editComponentViews(item)\">\n                                    <i class=\"fa fa-eye\" aria-hidden=\"true\"></i>\n                                </button>\n                                <button class=\"rounded-full p-2 text-white bg-blue-500 hover:bg-blue-700 mb-2\"\n                                    (click)=\"editComponentDatasets(item)\">\n                                    <i class=\"fa fa-database\" aria-hidden=\"true\"></i>\n                                </button>\n                                <button class=\"rounded-full p-2 text-white bg-red-500 hover:bg-red-700 mb-2\"\n                                    (click)=\"getDeleteViewFromConfig(i)\">\n                                    <i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                </button>\n                            </div>\n\n                        </div>\n                    </ng-container>\n                </div>\n            </ng-container>\n            <ng-container *ngIf=\"isUpdateWidget\">\n                <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Add Filter For View\n\n                </div>\n                <div class=\"border-x border-b p-2\">\n                    <div class=\"flex flex-row py-3 border-b\">\n                        <dx-check-box [(ngModel)]=\"addedwidGetConfig.isWidgetFilter\"\n                            text=\"Popup Columns Filter Enable\"></dx-check-box>\n                    </div>\n                    <div class=\"flex flex-row my-2 border-b\">\n                        <ng-container *ngFor=\"let item of nodeProperticeFilters; let i = index\">\n                            <div class=\"flex flex-wrap border-b\">\n                                <div class=\"px-1 w-1/3\">\n                                    <div class=\"text-md\">Input Type</div>\n                                    <dx-select-box [items]=\"['text']\" [(ngModel)]=\"item.input_type\"\n                                        value=\"text\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1-1 w-2/3\" *ngIf=\"item.input_type == 'text'\">\n                                    <div class=\"text-md\">Server Column</div>\n                                    <dx-text-box [(ngModel)]=\"item.server_column\"></dx-text-box>\n                                </div>\n                                <div class=\"px-1-1 w-1/2\" *ngIf=\"item.input_type == 'text'\">\n                                    <div class=\"text-md\">Local Column</div>\n                                    <dx-text-box [(ngModel)]=\"item.local_column\"></dx-text-box>\n                                </div>\n                                <div class=\"px-1-1 w-1/3\" *ngIf=\"item.input_type == 'select'\">\n                                    <div class=\"text-md\">Columns Name</div>\n                                    <dx-text-box [(ngModel)]=\"item.select_box_option\"></dx-text-box>\n                                </div>\n                                <div class=\"px-1-1 w-1/2\">\n                                    <div class=\"flex justify-end\">\n                                        <div class=\"{{commonService.btn_danger_sm}} w-24 mt-6 text-center\"\n                                            (click)=\"deleteNodeFilter(i)\">Delete Filter</div>\n                                    </div>\n                                </div>\n                            </div>\n                        </ng-container>\n                    </div>\n                    <div class=\"{{commonService.btn_primary_sm}} w-auto text-center\"\n                        (click)=\"getNodeProperticeFilterOption()\">Add\n                        Filter</div>\n                </div>\n            </ng-container>\n\n            <div class=\"flex flex-row justify-end items-center h-16 m-2\">\n                <div class=\"{{commonService.btnDarkBlack}} m-2 w-fit text-center cursar-pointer\"\n                    (click)=\"backToMainView()\">Back\n                </div>\n                <ng-container *ngIf=\"!isUpdateWidget\">\n                    <div *ngIf=\"islayoutCreate\"\n                        class=\"{{commonService.btn_success_md}} m-2 w-fit text-center cursar-pointer\"\n                        (click)=\"addLayoutTOview()\">Add View\n                    </div>\n                    <div *ngIf=\"!islayoutCreate && !isEditMainLayout\"\n                        class=\"{{commonService.btn_primary_md}} m-2 w-fit text-center cursar-pointer\"\n                        (click)=\"addWidgetTOview()\">Add Layout\n                    </div>\n                    <div *ngIf=\"!islayoutCreate && isEditMainLayout\"\n                        class=\"{{commonService.btn_primary_md}} m-2 w-fit text-center cursar-pointer\"\n                        (click)=\"updateLayoutWidgetTOview()\">Update Layout\n                    </div>\n\n                </ng-container>\n\n                <div class=\"{{commonService.btn_warning_md}} m-2 w-fit text-center cursar-pointer\"\n                    (click)=\"updateToView()\" *ngIf=\"isUpdateWidget\">Update View\n                </div>\n\n            </div>\n\n\n            <!-- <pre><code>{{dashBoardWidgetConfig | json}}</code></pre> -->\n        </ng-container>\n        <ng-container *ngIf=\"isChartButtonClick\">\n            <h6\n                class=\"mb-2 font-bold text-md tracking-tight text-gray-900 dark:text-white border-b pb-3 flex  items-center\">\n                <i class=\"fa fa-bar-chart-o mr-2\"></i> Select View\n                <div class=\"{{commonService.btnDarkBlack}} m-2 w-fit text-center cursor-pointer\"\n                    (click)=\"backToMainView()\">Back\n                </div>\n            </h6>\n            <div class=\" h-[80vh] overflow-x-auto\">\n                <div class=\"relative my-2 \">\n                    <input type=\"text\" [(ngModel)]=\"viewToSearch\" (keyup)=\"filterViews()\" (keydown)=\"filterViews()\"\n                        class=\"bg-gray-800 border border-gray-700 text-gray-200 text-sm focus:ring-gray-400 focus:border-gray-500 block w-full p-4 h-8 rounded\"\n                        placeholder=\"Search View\" />\n                    <button type=\"button\" class=\"absolute inset-y-0 right-0 flex items-center pr-6\">\n                        <mat-icon class=\"rotate-90 cursor-pointer\" [svgIcon]=\"'heroicons_outline:search'\"></mat-icon>\n                    </button>\n                </div>\n                <ng-container *ngFor=\"let item of filteredComponentConfig\">\n                    <div class=\"relative group my-3 w-full\">\n                        <!-- Item View Name -->\n                        <div class=\"text-md font-bold border-b py-2 cursar-pointer\">\n                            {{item.viewName}}</div>\n\n                        <!-- Hover Buttons -->\n                        <div\n                            class=\"absolute top-0  right-0 flex space-x-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pb-2\">\n                            <button class=\"rounded-full p-2 text-white bg-blue-500 hover:bg-blue-700\">\n                                <i class=\"fa fa-pencil-square-o\" aria-hidden=\"true\"\n                                    (click)=\"editComponentViews(item)\"></i>\n                            </button>\n                            <button class=\"rounded-full p-2 text-white bg-green-500 hover:bg-green-700\"\n                                (click)=\"getComponentConfig(item)\">\n                                <i class=\"fa fa-plus\"></i>\n                            </button>\n                        </div>\n                    </div>\n                </ng-container>\n            </div>\n\n        </ng-container>\n        <ng-container *ngIf=\"isDefaultView\">\n            <ng-container *ngFor=\"let item of dashBoardWidgetConfig.widgets; let i = index\">\n                <div class=\"group my-3 w-full flex justify-between border-b items-center\">\n                    <div class=\"text-md font-bold  py-2 cursor-pointer\">\n                        {{item.widgetTitle}}\n                    </div>\n\n                    <div class=\"flex space-x-2\">\n                        <button *ngIf=\"i !== 0\" class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                            (click)=\"moveItemForWidget(i, 'up')\">\n                            <i class=\"fa fa-arrow-up\" aria-hidden=\"true\"></i>\n                        </button>\n\n                        <button *ngIf=\"i !== dashBoardWidgetConfig.widgets.length - 1\"\n                            class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                            (click)=\"moveItemForWidget(i, 'down')\">\n                            <i class=\"fa fa-arrow-down\" aria-hidden=\"true\"></i>\n                        </button>\n                        <button class=\"rounded-full p-2 text-white bg-blue-500 hover:bg-blue-700 mb-2\"\n                            (click)=\"getEditViewFromLayout(item,i)\">\n                            <i class=\"fa fa-pencil-square\" aria-hidden=\"true\"></i>\n\n                        </button>\n                        <button class=\"rounded-full p-2 text-white bg-red-500 hover:bg-red-700 mb-2\"\n                            (click)=\"getDeleteViewFromLayout(item,i)\">\n                            <i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                        </button>\n\n                    </div>\n                </div>\n            </ng-container>\n        </ng-container>\n\n\n    </div>\n</div>\n<!-- </div> -->\n\n<dx-popup [(visible)]=\"isEditOptionClick\" [closeOnOutsideClick]=\"false\" [dragEnabled]=\"false\" [width]=\"1200\"\n    [height]=\"'auto'\" [showTitle]=\"true\" class=\"popup\" title=\"{{editViewdataSourceModal.viewName}}\">\n    <div *dxTemplate=\"let data of 'content'\">\n\n        <app-dash-chart [datasetmodal]=\"editViewdataSourceModal\" (getChartConfigOutPut)=\"getEmitNewChartCongig($event)\"\n            *ngIf=\"editViewdataSourceModal.viewType == 'chart'\"></app-dash-chart>\n        <app-dash-table [datasetmodal]=\"editViewdataSourceModal\" (getTableConfigOutPut)=\"getEmitNewChartCongig($event)\"\n            *ngIf=\"editViewdataSourceModal.viewType == 'table'\"></app-dash-table>\n        <!-- <app-dash-other [datasetmodal]=\"editViewdataSourceModal\" *ngIf=\"editViewdataSourceModal.viewType == 'others'\"\n            (createOtherComponentView)=\"getEmitNewChartCongig($event)\"></app-dash-other> -->\n    </div>\n</dx-popup>\n\n\n<dx-popup [(visible)]=\"isCreateDataset\" [closeOnOutsideClick]=\"false\" [dragEnabled]=\"false\" [width]=\"1200\"\n    [height]=\"600\" [showTitle]=\"true\" class=\"popup\" title=\"Dataset Editor\">\n    <div *dxTemplate=\"let data of 'content'\">\n        <dx-scroll-view class=\"h-full\" [width]=\"'100%'\" [height]=\"'100%'\">\n            <app-create-dataset [isHeader]=\"false\"></app-create-dataset>\n        </dx-scroll-view>\n    </div>\n</dx-popup>\n<dx-popup [(visible)]=\"isCreateDatasetWithDatasetId\" [closeOnOutsideClick]=\"false\" [dragEnabled]=\"false\" [width]=\"1200\"\n    [height]=\"600\" [showTitle]=\"true\" class=\"popup\" title=\"Dataset Editor\" (onHidden)=\"getDatasetPopupHide($event)\">\n    <div *dxTemplate=\"let data of 'content'\">\n        <dx-scroll-view class=\"h-full\" [width]=\"'100%'\" [height]=\"'100%'\">\n            <app-create-dataset [selectedDatasetId]=\"selectedDatasetId\" [isHeader]=\"false\"></app-create-dataset>\n        </dx-scroll-view>\n    </div>\n</dx-popup>\n\n<dx-popup [(visible)]=\"isCreateNewViewWithDefaultView\" [closeOnOutsideClick]=\"false\" [dragEnabled]=\"false\"\n    [width]=\"1200\" [height]=\"600\" [showTitle]=\"true\" class=\"popup\" title=\"Views Editor\"\n    (onHidden)=\"getViewPopupHide($event)\">\n    <div *dxTemplate=\"let data of 'content'\">\n        <dx-scroll-view class=\"h-full\" [width]=\"'100%'\" [height]=\"'100%'\">\n            <app-create-comp-view [selectedViewId]=\"selectedViewId\" [isHeader]=\"false\"></app-create-comp-view>\n        </dx-scroll-view>\n    </div>\n</dx-popup>\n<dx-popup [(visible)]=\"isCreateNewView\" [closeOnOutsideClick]=\"false\" [dragEnabled]=\"false\" [width]=\"1200\"\n    [height]=\"600\" [showTitle]=\"true\" class=\"popup\" title=\"Views Editor\">\n    <div *dxTemplate=\"let data of 'content'\">\n        <dx-scroll-view class=\"h-full\" [width]=\"'100%'\" [height]=\"'100%'\">\n            <app-create-comp-view [isHeader]=\"false\"></app-create-comp-view>\n        </dx-scroll-view>\n    </div>\n</dx-popup>\n\n\n<dx-popup [(visible)]=\"isWidgetFilters\" [closeOnOutsideClick]=\"false\" [dragEnabled]=\"false\" [width]=\"800\" [height]=\"400\"\n    [showTitle]=\"true\" class=\"popup\" title=\"Dataset Filter\">\n    <div *dxTemplate=\"let data of 'content'\">\n        <div class=\"my-2\">\n            <dx-scroll-view [width]=\"'100%'\" [height]=\"'85%'\">\n                <ng-container *ngFor=\"let item of nodeproperticeFilterDataSource; let i = index\">\n                    <div class=\"flex flex-row my-2\">\n                        <div class=\"m-1\">\n                            <dx-text-box [(ngModel)]=\"item.columnName\"></dx-text-box>\n                        </div>\n                        <div class=\"m-1\">\n                            <dx-select-box [items]=\"['get','let']\" [(ngModel)]=\"item.operator\"\n                                placeholder=\"Operator\"></dx-select-box>\n                        </div>\n                        <div class=\"m-1\">\n                            <dx-text-box [(ngModel)]=\"item.value\"></dx-text-box>\n                        </div>\n                    </div>\n                </ng-container>\n\n            </dx-scroll-view>\n            <div class=\"flex justify-end mx-1 flex-grow\">\n                <button class=\"{{commonService.btn_success_md}} cursor-pointer mt-2\"\n                    (click)=\"submitFilter()\">Submit</button>\n            </div>\n\n        </div>\n\n    </div>\n</dx-popup>\n<dx-popup [(visible)]=\"isAdvanceLayout\" [closeOnOutsideClick]=\"false\" [dragEnabled]=\"false\" [width]=\"1200\"\n    [height]=\"700\" [showTitle]=\"true\" class=\"popup\" title=\"Dataset Filter\">\n    <div *dxTemplate=\"let data of 'content'\">\n        <div class=\"flex flex-row px-2 mb-3\">\n            <div class=\"w-2/3 mb-2\">\n                <div class=\"text-md mb-2\">Select Views</div>\n                <dx-tag-box [dataSource]=\"componentConfigDataSource\" valueExpr=\"viewId\" displayExpr=\"viewName\"\n                    [multiline]=\"true\" [showSelectionControls]=\"true\" [(ngModel)]=\"selectedViewsIds\"\n                    [maxDisplayedTags]=\"3\" (onValueChanged)=\"getSelectedColumnSource($event)\" [searchEnabled]=\"true\">\n                </dx-tag-box>\n            </div>\n            <div class=\"w-1/3 px-2\">\n                <button class=\"{{commonService.btn_primary_md}} mt-6\" (click)=\"getProcessForConfig()\">\n                    Add To View\n                </button>\n                <!-- <button class=\"{{commonService.btn_danger_md}} cursor-pointer mt-6\" (click)=\"cancelCdrConfig()\">Cancel\n                                    </button> -->\n            </div>\n        </div>\n        <dx-scroll-view [width]=\"'100%'\" [height]=\"'80%'\">\n\n            <div class=\"m-2 border-b\" *ngIf=\"isProceed\">\n                <ng-container *ngFor=\"let item of advanceLayoutContainer; let i = index;\">\n                    <div class=\"flex flex-row m-2\">\n                        <div class=\"mx-2 w-1/2\">\n                            <div class=\"text-md mb-2\">View Name</div>\n                            <dx-text-box [(ngModel)]=\"item.compConfig.viewConfig[0].viewName\"></dx-text-box>\n                        </div>\n                        <div class=\"mx-2\">\n                            <div class=\"text-md mb-2\">Widget Title</div>\n                            <dx-text-box [(ngModel)]=\"item.nodeProperties.widgetTitle\"></dx-text-box>\n                        </div>\n\n                        <div class=\"mx-2\">\n                            <div class=\"text-md mb-2\">Widget Width</div>\n                            <dx-select-box [searchEnabled]=\"true\" [items]=\"widget_width\"\n                                [(ngModel)]=\"item.nodeProperties.width\"></dx-select-box>\n                        </div>\n\n                        <div class=\"mx-2\">\n                            <div class=\"text-md mb-2\">Widget Height</div>\n                            <dx-text-box [(ngModel)]=\"item.nodeProperties.height\"></dx-text-box>\n                        </div>\n                        <div class=\"mx-2\">\n                            <div class=\"text-md mb-2\">Widget Filter</div>\n                            <dx-select-box [items]=\"filterDataSource\" displayExpr=\"filterName\" [searchEnabled]=\"true\"\n                                valueExpr=\"filterId\" [(ngModel)]=\"item.filterId\"></dx-select-box>\n                        </div>\n                        <div class=\"mx-2\">\n                            <div class=\"text-md mt-8\">\n                                <dx-check-box [(ngModel)]=\"item.nodeProperties.display\" text=\"Display\"></dx-check-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2\">\n                            <button class=\"{{commonService.btn_danger_sm}} cursor-pointer mt-8\"\n                                (click)=\"deleteView(i)\"><i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                            </button>\n                        </div>\n                    </div>\n                </ng-container>\n            </div>\n        </dx-scroll-view>\n        <div class=\"flex justify-end mx-1 my-2 flex-grow\">\n            <button class=\"{{commonService.btn_success_md}} cursor-pointer mt-2\" (click)=\"submitAdvanceView()\">Add\n                Layout</button>\n        </div>\n    </div>\n</dx-popup>", styles: ["::ng-deep #scrollview-demo{min-height:550px}::ng-deep #scrollview{height:auto;position:absolute;top:0;bottom:300px;padding:20px}::ng-deep #scrollview-content{white-space:pre-wrap}.scrollable-content{height:90vh;overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: i4$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i5$1.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: i9$1.DxPopupComponent, selector: "dx-popup", inputs: ["accessKey", "animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "dragAndResizeArea", "dragEnabled", "dragOutsideBoundary", "elementAttr", "focusStateEnabled", "fullScreen", "height", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "resizeEnabled", "restorePosition", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showTitle", "tabIndex", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onResize", "onResizeEnd", "onResizeStart", "onShowing", "onShown", "onTitleRendered", "accessKeyChange", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "dragAndResizeAreaChange", "dragEnabledChange", "dragOutsideBoundaryChange", "elementAttrChange", "focusStateEnabledChange", "fullScreenChange", "heightChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "resizeEnabledChange", "restorePositionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showTitleChange", "tabIndexChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { kind: "component", type: i10$1.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: 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.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: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: LoadingComponent$1, selector: "app-loading" }, { kind: "component", type: CreateCompViewComponent, selector: "app-create-comp-view", inputs: ["kpiTreeData", "isHeader", "selectedViewId"] }, { 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: CreateDatasetComponent, selector: "app-create-dataset", inputs: ["isHeader", "selectedDatasetId"] }, { kind: "component", type: CommonHeaderComponent, selector: "lib-common-header", inputs: ["pageTitle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PageConfigComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-dashbord-config', template: "<app-loading *ngIf=\"loadingModal\"></app-loading>\n\n<div class=\"flex flex-row h-[90vh] w-full\">\n    <div class=\"w-3/4 border-r h-full flex flex-col px-2\">\n        <!-- Scrollable content -->\n        <div class=\"flex-grow overflow-y-auto\">\n            <div class=\"flex flex-wrap my-3\" #dynamicContainer></div>\n        </div>\n\n        <!-- Fixed bottom section -->\n        <div class=\"flex flex-row justify-center items-center h-16 m-2 border shrink-0\">\n            <lib-common-header [pageTitle]=\"''\"></lib-common-header>\n            <div class=\"{{commonService.btn_primary_md}} m-2\" (click)=\"addWidget()\">Add Layout</div>\n            <div class=\"{{commonService.btnOthersPurple}} m-2 cursor-pointer\" (click)=\"getViewPage()\">View Page</div>\n        </div>\n    </div>\n    <div class=\"w-1/4 p-2 h-full\">\n        <ng-container *ngIf=\"isDashBoardContent\">\n            <div class=\"{{commonService.btnDarkBlack}} m-2 w-fit text-center cursar-pointer\" (click)=\"backToMainView()\">\n                Back\n            </div>\n            <ng-container *ngFor=\"let item of page_config.api_config; let i = index\">\n                <div class=\"mb-2 flex flex-row justify-between items-center border-b\">\n                    <div class=\"text-md py-2 font-bold  text-white px-2\">\n                        {{item.widGetConfig.widgetTitle}}\n                    </div>\n                    <div class=\"flex space-x-2\">\n                        <!-- <button (click)=\"editSelectedWidget(item, i)\"\n                            class=\"w-8 h-8 bg-sky-600 hover:bg-blue-800 text-white rounded-full flex items-center justify-center\">\n                            <i class=\"fa fa-edit\"></i>\n                        </button> -->\n                        <button\n                            class=\"w-8 h-8 bg-red-600 hover:bg-red-800 text-white rounded-full flex items-center justify-center\">\n                            <i class=\"fa fa-trash-o\"></i>\n                        </button>\n                    </div>\n                </div>\n\n            </ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"isWidgetCreationContent\">\n            <h6 class=\"mb-2 font-bold text-lg tracking-tight text-gray-900 dark:text-white border-b pb-3\">\n                <span *ngIf=\"!islayoutCreate\">Widget Settings</span>\n                <span *ngIf=\"islayoutCreate\">Layout Settings</span>\n            </h6>\n            <div class=\"flex flex-row my-4\">\n                <dx-check-box class=\"ml-auto\" [(ngModel)]=\"addedwidGetConfig.display\" text=\"Display\"></dx-check-box>\n            </div>\n            <div class=\"flex flex-row mb-2 justify-between\">\n                <span class=\"text-md my-auto px-2\">Width</span>\n                <dx-select-box class=\"w-1/2\" [items]=\"widget_width\"\n                    [(ngModel)]=\"addedwidGetConfig.width\"></dx-select-box>\n            </div>\n            <div class=\"flex flex-row mb-2 justify-between\">\n                <span class=\"text-md my-auto px-2\">Height</span>\n                <dx-text-box class=\"w-1/2\" [(ngModel)]=\"addedwidGetConfig.height\"></dx-text-box>\n            </div>\n\n            <div class=\"flex flex-row mb-2 justify-between\" *ngIf=\"!islayoutCreate\">\n                <div class=\"text-md my-auto px-2\">Widget Title</div>\n                <div><dx-text-box class=\"w-1/2\" [(ngModel)]=\"widgetTitle\"></dx-text-box></div>\n            </div>\n            <div class=\"flex flex-row mb-2 justify-between\" *ngIf=\"!islayoutCreate\">\n                <span class=\"text-md my-auto px-2\">Widget Name</span>\n                <dx-text-box class=\"w-1/2\" [(ngModel)]=\"widgetName\"></dx-text-box>\n            </div>\n\n\n            <div class=\"flex flex-row mb-5 justify-between\" *ngIf=\"islayoutCreate\">\n                <span class=\"text-sm my-auto px-2\">Layout Title</span>\n                <dx-text-box class=\"w-1/2\" [(ngModel)]=\"addedwidGetConfig.widgetTitle\"></dx-text-box>\n            </div>\n\n            <div class=\"flex flex-row mb-2 justify-between\">\n                <span class=\"text-md my-auto px-2\">Filter</span>\n                <dx-select-box class=\"w-1/2\" [items]=\"filterDataSource\" displayExpr=\"filterName\" [searchEnabled]=\"true\"\n                    valueExpr=\"filterId\" [(ngModel)]=\"selectedFilterId\"\n                    (onValueChanged)=\"getFilterValueById($event)\"></dx-select-box>\n            </div>\n            <ng-container *ngIf=\"!isUpdateWidget\">\n                <div class=\"mt-6\" *ngIf=\"!islayoutCreate && isEditMainLayout\">\n                    <ng-container\n                        *ngFor=\"let item of dashBoardWidgetConfig.widgets[newWidgetIndex].widgetNode;let i = index\">\n                        <div class=\"mb-2 flex flex-row justify-between items-center border-b \">\n                            <div class=\"text-md py-2 font-bold  text-white px-2\">\n                                {{item.nodeProperties.widgetTitle}}\n                            </div>\n                            <div class=\"flex space-x-2\">\n                                <button *ngIf=\"i !== 0\" class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                    (click)=\"moveItemForPageView(i, 'up')\">\n                                    <i class=\"fa fa-arrow-up\" aria-hidden=\"true\"></i>\n                                </button>\n\n                                <button\n                                    *ngIf=\"i !==  dashBoardWidgetConfig.widgets[newWidgetIndex].widgetNode.length - 1\"\n                                    class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                    (click)=\"moveItemForPageView(i, 'down')\">\n                                    <i class=\"fa fa-arrow-down\" aria-hidden=\"true\"></i>\n                                </button>\n                                <button\n                                    class=\"w-8 h-8 bg-red-600 hover:bg-red-800 text-white rounded-full flex items-center justify-center\">\n                                    <i class=\"fa fa-trash-o\"></i>\n                                </button>\n                            </div>\n                        </div>\n\n                    </ng-container>\n                </div>\n            </ng-container>\n\n\n\n            <ng-container *ngIf=\"isUpdateWidget\">\n                <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Application Views\n                </div>\n                <div class=\"border-x border-b p-2\">\n                    <ng-container *ngFor=\"let item of allWidgetInnerContent; let i = index\">\n                        <div class=\"group  w-full flex justify-between border-b items-center\">\n                            <div class=\"text-md font-bold  py-2 cursor-pointer\">\n                                {{item.viewName}}\n                            </div>\n\n                            <div class=\"flex space-x-2\">\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 !== allWidgetInnerContent.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=\"rounded-full p-2 text-white bg-blue-500 hover:bg-blue-700 mb-2\"\n                                    (click)=\"editComponentViews(item)\">\n                                    <i class=\"fa fa-eye\" aria-hidden=\"true\"></i>\n                                </button>\n                                <button class=\"rounded-full p-2 text-white bg-blue-500 hover:bg-blue-700 mb-2\"\n                                    (click)=\"editComponentDatasets(item)\">\n                                    <i class=\"fa fa-database\" aria-hidden=\"true\"></i>\n                                </button>\n                                <button class=\"rounded-full p-2 text-white bg-red-500 hover:bg-red-700 mb-2\"\n                                    (click)=\"getDeleteViewFromConfig(i)\">\n                                    <i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                </button>\n                            </div>\n\n                        </div>\n                    </ng-container>\n                </div>\n            </ng-container>\n            <ng-container *ngIf=\"isUpdateWidget\">\n                <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Add Filter For View\n\n                </div>\n                <div class=\"border-x border-b p-2\">\n                    <div class=\"flex flex-row py-3 border-b\">\n                        <dx-check-box [(ngModel)]=\"addedwidGetConfig.isWidgetFilter\"\n                            text=\"Popup Columns Filter Enable\"></dx-check-box>\n                    </div>\n                    <div class=\"flex flex-row my-2 border-b\">\n                        <ng-container *ngFor=\"let item of nodeProperticeFilters; let i = index\">\n                            <div class=\"flex flex-wrap border-b\">\n                                <div class=\"px-1 w-1/3\">\n                                    <div class=\"text-md\">Input Type</div>\n                                    <dx-select-box [items]=\"['text']\" [(ngModel)]=\"item.input_type\"\n                                        value=\"text\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1-1 w-2/3\" *ngIf=\"item.input_type == 'text'\">\n                                    <div class=\"text-md\">Server Column</div>\n                                    <dx-text-box [(ngModel)]=\"item.server_column\"></dx-text-box>\n                                </div>\n                                <div class=\"px-1-1 w-1/2\" *ngIf=\"item.input_type == 'text'\">\n                                    <div class=\"text-md\">Local Column</div>\n                                    <dx-text-box [(ngModel)]=\"item.local_column\"></dx-text-box>\n                                </div>\n                                <div class=\"px-1-1 w-1/3\" *ngIf=\"item.input_type == 'select'\">\n                                    <div class=\"text-md\">Columns Name</div>\n                                    <dx-text-box [(ngModel)]=\"item.select_box_option\"></dx-text-box>\n                                </div>\n                                <div class=\"px-1-1 w-1/2\">\n                                    <div class=\"flex justify-end\">\n                                        <div class=\"{{commonService.btn_danger_sm}} w-24 mt-6 text-center\"\n                                            (click)=\"deleteNodeFilter(i)\">Delete Filter</div>\n                                    </div>\n                                </div>\n                            </div>\n                        </ng-container>\n                    </div>\n                    <div class=\"{{commonService.btn_primary_sm}} w-auto text-center\"\n                        (click)=\"getNodeProperticeFilterOption()\">Add\n                        Filter</div>\n                </div>\n            </ng-container>\n\n            <div class=\"flex flex-row justify-end items-center h-16 m-2\">\n                <div class=\"{{commonService.btnDarkBlack}} m-2 w-fit text-center cursar-pointer\"\n                    (click)=\"backToMainView()\">Back\n                </div>\n                <ng-container *ngIf=\"!isUpdateWidget\">\n                    <div *ngIf=\"islayoutCreate\"\n                        class=\"{{commonService.btn_success_md}} m-2 w-fit text-center cursar-pointer\"\n                        (click)=\"addLayoutTOview()\">Add View\n                    </div>\n                    <div *ngIf=\"!islayoutCreate && !isEditMainLayout\"\n                        class=\"{{commonService.btn_primary_md}} m-2 w-fit text-center cursar-pointer\"\n                        (click)=\"addWidgetTOview()\">Add Layout\n                    </div>\n                    <div *ngIf=\"!islayoutCreate && isEditMainLayout\"\n                        class=\"{{commonService.btn_primary_md}} m-2 w-fit text-center cursar-pointer\"\n                        (click)=\"updateLayoutWidgetTOview()\">Update Layout\n                    </div>\n\n                </ng-container>\n\n                <div class=\"{{commonService.btn_warning_md}} m-2 w-fit text-center cursar-pointer\"\n                    (click)=\"updateToView()\" *ngIf=\"isUpdateWidget\">Update View\n                </div>\n\n            </div>\n\n\n            <!-- <pre><code>{{dashBoardWidgetConfig | json}}</code></pre> -->\n        </ng-container>\n        <ng-container *ngIf=\"isChartButtonClick\">\n            <h6\n                class=\"mb-2 font-bold text-md tracking-tight text-gray-900 dark:text-white border-b pb-3 flex  items-center\">\n                <i class=\"fa fa-bar-chart-o mr-2\"></i> Select View\n                <div class=\"{{commonService.btnDarkBlack}} m-2 w-fit text-center cursor-pointer\"\n                    (click)=\"backToMainView()\">Back\n                </div>\n            </h6>\n            <div class=\" h-[80vh] overflow-x-auto\">\n                <div class=\"relative my-2 \">\n                    <input type=\"text\" [(ngModel)]=\"viewToSearch\" (keyup)=\"filterViews()\" (keydown)=\"filterViews()\"\n                        class=\"bg-gray-800 border border-gray-700 text-gray-200 text-sm focus:ring-gray-400 focus:border-gray-500 block w-full p-4 h-8 rounded\"\n                        placeholder=\"Search View\" />\n                    <button type=\"button\" class=\"absolute inset-y-0 right-0 flex items-center pr-6\">\n                        <mat-icon class=\"rotate-90 cursor-pointer\" [svgIcon]=\"'heroicons_outline:search'\"></mat-icon>\n                    </button>\n                </div>\n                <ng-container *ngFor=\"let item of filteredComponentConfig\">\n                    <div class=\"relative group my-3 w-full\">\n                        <!-- Item View Name -->\n                        <div class=\"text-md font-bold border-b py-2 cursar-pointer\">\n                            {{item.viewName}}</div>\n\n                        <!-- Hover Buttons -->\n                        <div\n                            class=\"absolute top-0  right-0 flex space-x-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pb-2\">\n                            <button class=\"rounded-full p-2 text-white bg-blue-500 hover:bg-blue-700\">\n                                <i class=\"fa fa-pencil-square-o\" aria-hidden=\"true\"\n                                    (click)=\"editComponentViews(item)\"></i>\n                            </button>\n                            <button class=\"rounded-full p-2 text-white bg-green-500 hover:bg-green-700\"\n                                (click)=\"getComponentConfig(item)\">\n                                <i class=\"fa fa-plus\"></i>\n                            </button>\n                        </div>\n                    </div>\n                </ng-container>\n            </div>\n\n        </ng-container>\n        <ng-container *ngIf=\"isDefaultView\">\n            <ng-container *ngFor=\"let item of dashBoardWidgetConfig.widgets; let i = index\">\n                <div class=\"group my-3 w-full flex justify-between border-b items-center\">\n                    <div class=\"text-md font-bold  py-2 cursor-pointer\">\n                        {{item.widgetTitle}}\n                    </div>\n\n                    <div class=\"flex space-x-2\">\n                        <button *ngIf=\"i !== 0\" class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                            (click)=\"moveItemForWidget(i, 'up')\">\n                            <i class=\"fa fa-arrow-up\" aria-hidden=\"true\"></i>\n                        </button>\n\n                        <button *ngIf=\"i !== dashBoardWidgetConfig.widgets.length - 1\"\n                            class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                            (click)=\"moveItemForWidget(i, 'down')\">\n                            <i class=\"fa fa-arrow-down\" aria-hidden=\"true\"></i>\n                        </button>\n                        <button class=\"rounded-full p-2 text-white bg-blue-500 hover:bg-blue-700 mb-2\"\n                            (click)=\"getEditViewFromLayout(item,i)\">\n                            <i class=\"fa fa-pencil-square\" aria-hidden=\"true\"></i>\n\n                        </button>\n                        <button class=\"rounded-full p-2 text-white bg-red-500 hover:bg-red-700 mb-2\"\n                            (click)=\"getDeleteViewFromLayout(item,i)\">\n                            <i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                        </button>\n\n                    </div>\n                </div>\n            </ng-container>\n        </ng-container>\n\n\n    </div>\n</div>\n<!-- </div> -->\n\n<dx-popup [(visible)]=\"isEditOptionClick\" [closeOnOutsideClick]=\"false\" [dragEnabled]=\"false\" [width]=\"1200\"\n    [height]=\"'auto'\" [showTitle]=\"true\" class=\"popup\" title=\"{{editViewdataSourceModal.viewName}}\">\n    <div *dxTemplate=\"let data of 'content'\">\n\n        <app-dash-chart [datasetmodal]=\"editViewdataSourceModal\" (getChartConfigOutPut)=\"getEmitNewChartCongig($event)\"\n            *ngIf=\"editViewdataSourceModal.viewType == 'chart'\"></app-dash-chart>\n        <app-dash-table [datasetmodal]=\"editViewdataSourceModal\" (getTableConfigOutPut)=\"getEmitNewChartCongig($event)\"\n            *ngIf=\"editViewdataSourceModal.viewType == 'table'\"></app-dash-table>\n        <!-- <app-dash-other [datasetmodal]=\"editViewdataSourceModal\" *ngIf=\"editViewdataSourceModal.viewType == 'others'\"\n            (createOtherComponentView)=\"getEmitNewChartCongig($event)\"></app-dash-other> -->\n    </div>\n</dx-popup>\n\n\n<dx-popup [(visible)]=\"isCreateDataset\" [closeOnOutsideClick]=\"false\" [dragEnabled]=\"false\" [width]=\"1200\"\n    [height]=\"600\" [showTitle]=\"true\" class=\"popup\" title=\"Dataset Editor\">\n    <div *dxTemplate=\"let data of 'content'\">\n        <dx-scroll-view class=\"h-full\" [width]=\"'100%'\" [height]=\"'100%'\">\n            <app-create-dataset [isHeader]=\"false\"></app-create-dataset>\n        </dx-scroll-view>\n    </div>\n</dx-popup>\n<dx-popup [(visible)]=\"isCreateDatasetWithDatasetId\" [closeOnOutsideClick]=\"false\" [dragEnabled]=\"false\" [width]=\"1200\"\n    [height]=\"600\" [showTitle]=\"true\" class=\"popup\" title=\"Dataset Editor\" (onHidden)=\"getDatasetPopupHide($event)\">\n    <div *dxTemplate=\"let data of 'content'\">\n        <dx-scroll-view class=\"h-full\" [width]=\"'100%'\" [height]=\"'100%'\">\n            <app-create-dataset [selectedDatasetId]=\"selectedDatasetId\" [isHeader]=\"false\"></app-create-dataset>\n        </dx-scroll-view>\n    </div>\n</dx-popup>\n\n<dx-popup [(visible)]=\"isCreateNewViewWithDefaultView\" [closeOnOutsideClick]=\"false\" [dragEnabled]=\"false\"\n    [width]=\"1200\" [height]=\"600\" [showTitle]=\"true\" class=\"popup\" title=\"Views Editor\"\n    (onHidden)=\"getViewPopupHide($event)\">\n    <div *dxTemplate=\"let data of 'content'\">\n        <dx-scroll-view class=\"h-full\" [width]=\"'100%'\" [height]=\"'100%'\">\n            <app-create-comp-view [selectedViewId]=\"selectedViewId\" [isHeader]=\"false\"></app-create-comp-view>\n        </dx-scroll-view>\n    </div>\n</dx-popup>\n<dx-popup [(visible)]=\"isCreateNewView\" [closeOnOutsideClick]=\"false\" [dragEnabled]=\"false\" [width]=\"1200\"\n    [height]=\"600\" [showTitle]=\"true\" class=\"popup\" title=\"Views Editor\">\n    <div *dxTemplate=\"let data of 'content'\">\n        <dx-scroll-view class=\"h-full\" [width]=\"'100%'\" [height]=\"'100%'\">\n            <app-create-comp-view [isHeader]=\"false\"></app-create-comp-view>\n        </dx-scroll-view>\n    </div>\n</dx-popup>\n\n\n<dx-popup [(visible)]=\"isWidgetFilters\" [closeOnOutsideClick]=\"false\" [dragEnabled]=\"false\" [width]=\"800\" [height]=\"400\"\n    [showTitle]=\"true\" class=\"popup\" title=\"Dataset Filter\">\n    <div *dxTemplate=\"let data of 'content'\">\n        <div class=\"my-2\">\n            <dx-scroll-view [width]=\"'100%'\" [height]=\"'85%'\">\n                <ng-container *ngFor=\"let item of nodeproperticeFilterDataSource; let i = index\">\n                    <div class=\"flex flex-row my-2\">\n                        <div class=\"m-1\">\n                            <dx-text-box [(ngModel)]=\"item.columnName\"></dx-text-box>\n                        </div>\n                        <div class=\"m-1\">\n                            <dx-select-box [items]=\"['get','let']\" [(ngModel)]=\"item.operator\"\n                                placeholder=\"Operator\"></dx-select-box>\n                        </div>\n                        <div class=\"m-1\">\n                            <dx-text-box [(ngModel)]=\"item.value\"></dx-text-box>\n                        </div>\n                    </div>\n                </ng-container>\n\n            </dx-scroll-view>\n            <div class=\"flex justify-end mx-1 flex-grow\">\n                <button class=\"{{commonService.btn_success_md}} cursor-pointer mt-2\"\n                    (click)=\"submitFilter()\">Submit</button>\n            </div>\n\n        </div>\n\n    </div>\n</dx-popup>\n<dx-popup [(visible)]=\"isAdvanceLayout\" [closeOnOutsideClick]=\"false\" [dragEnabled]=\"false\" [width]=\"1200\"\n    [height]=\"700\" [showTitle]=\"true\" class=\"popup\" title=\"Dataset Filter\">\n    <div *dxTemplate=\"let data of 'content'\">\n        <div class=\"flex flex-row px-2 mb-3\">\n            <div class=\"w-2/3 mb-2\">\n                <div class=\"text-md mb-2\">Select Views</div>\n                <dx-tag-box [dataSource]=\"componentConfigDataSource\" valueExpr=\"viewId\" displayExpr=\"viewName\"\n                    [multiline]=\"true\" [showSelectionControls]=\"true\" [(ngModel)]=\"selectedViewsIds\"\n                    [maxDisplayedTags]=\"3\" (onValueChanged)=\"getSelectedColumnSource($event)\" [searchEnabled]=\"true\">\n                </dx-tag-box>\n            </div>\n            <div class=\"w-1/3 px-2\">\n                <button class=\"{{commonService.btn_primary_md}} mt-6\" (click)=\"getProcessForConfig()\">\n                    Add To View\n                </button>\n                <!-- <button class=\"{{commonService.btn_danger_md}} cursor-pointer mt-6\" (click)=\"cancelCdrConfig()\">Cancel\n                                    </button> -->\n            </div>\n        </div>\n        <dx-scroll-view [width]=\"'100%'\" [height]=\"'80%'\">\n\n            <div class=\"m-2 border-b\" *ngIf=\"isProceed\">\n                <ng-container *ngFor=\"let item of advanceLayoutContainer; let i = index;\">\n                    <div class=\"flex flex-row m-2\">\n                        <div class=\"mx-2 w-1/2\">\n                            <div class=\"text-md mb-2\">View Name</div>\n                            <dx-text-box [(ngModel)]=\"item.compConfig.viewConfig[0].viewName\"></dx-text-box>\n                        </div>\n                        <div class=\"mx-2\">\n                            <div class=\"text-md mb-2\">Widget Title</div>\n                            <dx-text-box [(ngModel)]=\"item.nodeProperties.widgetTitle\"></dx-text-box>\n                        </div>\n\n                        <div class=\"mx-2\">\n                            <div class=\"text-md mb-2\">Widget Width</div>\n                            <dx-select-box [searchEnabled]=\"true\" [items]=\"widget_width\"\n                                [(ngModel)]=\"item.nodeProperties.width\"></dx-select-box>\n                        </div>\n\n                        <div class=\"mx-2\">\n                            <div class=\"text-md mb-2\">Widget Height</div>\n                            <dx-text-box [(ngModel)]=\"item.nodeProperties.height\"></dx-text-box>\n                        </div>\n                        <div class=\"mx-2\">\n                            <div class=\"text-md mb-2\">Widget Filter</div>\n                            <dx-select-box [items]=\"filterDataSource\" displayExpr=\"filterName\" [searchEnabled]=\"true\"\n                                valueExpr=\"filterId\" [(ngModel)]=\"item.filterId\"></dx-select-box>\n                        </div>\n                        <div class=\"mx-2\">\n                            <div class=\"text-md mt-8\">\n                                <dx-check-box [(ngModel)]=\"item.nodeProperties.display\" text=\"Display\"></dx-check-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2\">\n                            <button class=\"{{commonService.btn_danger_sm}} cursor-pointer mt-8\"\n                                (click)=\"deleteView(i)\"><i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                            </button>\n                        </div>\n                    </div>\n                </ng-container>\n            </div>\n        </dx-scroll-view>\n        <div class=\"flex justify-end mx-1 my-2 flex-grow\">\n            <button class=\"{{commonService.btn_success_md}} cursor-pointer mt-2\" (click)=\"submitAdvanceView()\">Add\n                Layout</button>\n        </div>\n    </div>\n</dx-popup>", styles: ["::ng-deep #scrollview-demo{min-height:550px}::ng-deep #scrollview{height:auto;position:absolute;top:0;bottom:300px;padding:20px}::ng-deep #scrollview-content{white-space:pre-wrap}.scrollable-content{height:90vh;overflow-y:auto}\n"] }]
+            args: [{ selector: 'app-dashbord-config', template: "<app-loading *ngIf=\"loadingModal\"></app-loading>\n\n<div class=\"flex flex-row h-[90vh] w-full\">\n    <div class=\"w-3/4 border-r h-full flex flex-col px-2\">\n        <!-- Scrollable content -->\n        <div class=\"flex-grow overflow-y-auto\">\n            <div class=\"flex flex-wrap my-3\" #dynamicContainer></div>\n        </div>\n\n        <!-- Fixed bottom section -->\n        <div class=\"flex flex-row justify-center items-center h-16 m-2 border shrink-0\">\n            <lib-common-header [pageTitle]=\"''\"></lib-common-header>\n            <div class=\"{{commonService.btn_primary_md}} m-2\" (click)=\"addWidget()\">Add Layout</div>\n            <div class=\"{{commonService.btnOthersPurple}} m-2 cursor-pointer\" (click)=\"getViewPage()\">View Page</div>\n        </div>\n    </div>\n    <div class=\"w-1/4 p-2 h-full\">\n        <ng-container *ngIf=\"isDashBoardContent\">\n            <div class=\"{{commonService.btnDarkBlack}} m-2 w-fit text-center cursar-pointer\" (click)=\"backToMainView()\">\n                Back\n            </div>\n            <ng-container *ngFor=\"let item of page_config.api_config; let i = index\">\n                <div class=\"mb-2 flex flex-row justify-between items-center border-b\">\n                    <div class=\"text-md py-2 font-bold  text-white px-2\">\n                        {{item.widGetConfig.widgetTitle}}\n                    </div>\n                    <div class=\"flex space-x-2\">\n                        <!-- <button (click)=\"editSelectedWidget(item, i)\"\n                            class=\"w-8 h-8 bg-sky-600 hover:bg-blue-800 text-white rounded-full flex items-center justify-center\">\n                            <i class=\"fa fa-edit\"></i>\n                        </button> -->\n                        <button\n                            class=\"w-8 h-8 bg-red-600 hover:bg-red-800 text-white rounded-full flex items-center justify-center\">\n                            <i class=\"fa fa-trash-o\"></i>\n                        </button>\n                    </div>\n                </div>\n\n            </ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"isWidgetCreationContent\">\n            <h6 class=\"mb-2 font-bold text-lg tracking-tight text-gray-900 dark:text-white border-b pb-3\">\n                <span *ngIf=\"!islayoutCreate\">Widget Settings</span>\n                <span *ngIf=\"islayoutCreate\">Layout Settings</span>\n            </h6>\n            <div class=\"flex flex-row my-4\">\n                <dx-check-box class=\"ml-auto\" [(ngModel)]=\"addedwidGetConfig.display\" text=\"Display\"></dx-check-box>\n            </div>\n            <div class=\"flex flex-row mb-2 justify-between\">\n                <span class=\"text-md my-auto px-2\">Width</span>\n                <dx-select-box class=\"w-1/2\" [items]=\"widget_width\"\n                    [(ngModel)]=\"addedwidGetConfig.width\"></dx-select-box>\n            </div>\n            <div class=\"flex flex-row mb-2 justify-between\">\n                <span class=\"text-md my-auto px-2\">Height</span>\n                <dx-text-box class=\"w-1/2\" [(ngModel)]=\"addedwidGetConfig.height\"></dx-text-box>\n            </div>\n\n            <div class=\"flex flex-row mb-2 justify-between\" *ngIf=\"!islayoutCreate\">\n                <div class=\"text-md my-auto px-2 inline\">Widget Title</div>\n                <dx-text-box class=\"w-full\" [(ngModel)]=\"widgetTitle\"></dx-text-box>\n            </div>\n            <div class=\"flex flex-row mb-2 justify-between\" *ngIf=\"!islayoutCreate\">\n                <div class=\"text-md my-auto px-2\">Widget Name</div>\n                <dx-text-box class=\"w-full\" [(ngModel)]=\"widgetName\"></dx-text-box>\n            </div>\n\n\n            <div class=\"flex flex-row mb-5 justify-between\" *ngIf=\"islayoutCreate\">\n                <span class=\"text-sm my-auto px-2\">Layout Title</span>\n                <dx-text-box class=\"w-1/2\" [(ngModel)]=\"addedwidGetConfig.widgetTitle\"></dx-text-box>\n            </div>\n\n            <div class=\"flex flex-row mb-2 justify-between\">\n                <span class=\"text-md my-auto px-2\">Filter</span>\n                <dx-select-box class=\"w-1/2\" [items]=\"filterDataSource\" displayExpr=\"filterName\" [searchEnabled]=\"true\"\n                    valueExpr=\"filterId\" [(ngModel)]=\"selectedFilterId\"\n                    (onValueChanged)=\"getFilterValueById($event)\"></dx-select-box>\n            </div>\n            <ng-container *ngIf=\"!isUpdateWidget\">\n                <div class=\"mt-6\" *ngIf=\"!islayoutCreate && isEditMainLayout\">\n                    <ng-container\n                        *ngFor=\"let item of dashBoardWidgetConfig.widgets[newWidgetIndex].widgetNode;let i = index\">\n                        <div class=\"mb-2 flex flex-row justify-between items-center border-b \">\n                            <div class=\"text-md py-2 font-bold  text-white px-2\">\n                                {{item.nodeProperties.widgetTitle}}\n                            </div>\n                            <div class=\"flex space-x-2\">\n                                <button *ngIf=\"i !== 0\" class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                    (click)=\"moveItemForPageView(i, 'up')\">\n                                    <i class=\"fa fa-arrow-up\" aria-hidden=\"true\"></i>\n                                </button>\n\n                                <button\n                                    *ngIf=\"i !==  dashBoardWidgetConfig.widgets[newWidgetIndex].widgetNode.length - 1\"\n                                    class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                    (click)=\"moveItemForPageView(i, 'down')\">\n                                    <i class=\"fa fa-arrow-down\" aria-hidden=\"true\"></i>\n                                </button>\n                                <button\n                                    class=\"w-8 h-8 bg-red-600 hover:bg-red-800 text-white rounded-full flex items-center justify-center\">\n                                    <i class=\"fa fa-trash-o\"></i>\n                                </button>\n                            </div>\n                        </div>\n\n                    </ng-container>\n                </div>\n            </ng-container>\n\n\n\n            <ng-container *ngIf=\"isUpdateWidget\">\n                <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Application Views\n                </div>\n                <div class=\"border-x border-b p-2\">\n                    <ng-container *ngFor=\"let item of allWidgetInnerContent; let i = index\">\n                        <div class=\"group  w-full flex justify-between border-b items-center\">\n                            <div class=\"text-md font-bold  py-2 cursor-pointer\">\n                                {{item.viewName}}\n                            </div>\n\n                            <div class=\"flex space-x-2\">\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 !== allWidgetInnerContent.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=\"rounded-full p-2 text-white bg-blue-500 hover:bg-blue-700 mb-2\"\n                                    (click)=\"editComponentViews(item)\">\n                                    <i class=\"fa fa-eye\" aria-hidden=\"true\"></i>\n                                </button>\n                                <button class=\"rounded-full p-2 text-white bg-blue-500 hover:bg-blue-700 mb-2\"\n                                    (click)=\"editComponentDatasets(item)\">\n                                    <i class=\"fa fa-database\" aria-hidden=\"true\"></i>\n                                </button>\n                                <button class=\"rounded-full p-2 text-white bg-red-500 hover:bg-red-700 mb-2\"\n                                    (click)=\"getDeleteViewFromConfig(i)\">\n                                    <i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                </button>\n                            </div>\n\n                        </div>\n                    </ng-container>\n                </div>\n            </ng-container>\n            <ng-container *ngIf=\"isUpdateWidget\">\n                <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Add Filter For View\n\n                </div>\n                <div class=\"border-x border-b p-2\">\n                    <div class=\"flex flex-row py-3 border-b\">\n                        <dx-check-box [(ngModel)]=\"addedwidGetConfig.isWidgetFilter\"\n                            text=\"Popup Columns Filter Enable\"></dx-check-box>\n                    </div>\n                    <div class=\"flex flex-row my-2 border-b\">\n                        <ng-container *ngFor=\"let item of nodeProperticeFilters; let i = index\">\n                            <div class=\"flex flex-wrap border-b\">\n                                <div class=\"px-1 w-1/3\">\n                                    <div class=\"text-md\">Input Type</div>\n                                    <dx-select-box [items]=\"['text']\" [(ngModel)]=\"item.input_type\"\n                                        value=\"text\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1-1 w-2/3\" *ngIf=\"item.input_type == 'text'\">\n                                    <div class=\"text-md\">Server Column</div>\n                                    <dx-text-box [(ngModel)]=\"item.server_column\"></dx-text-box>\n                                </div>\n                                <div class=\"px-1-1 w-1/2\" *ngIf=\"item.input_type == 'text'\">\n                                    <div class=\"text-md\">Local Column</div>\n                                    <dx-text-box [(ngModel)]=\"item.local_column\"></dx-text-box>\n                                </div>\n                                <div class=\"px-1-1 w-1/3\" *ngIf=\"item.input_type == 'select'\">\n                                    <div class=\"text-md\">Columns Name</div>\n                                    <dx-text-box [(ngModel)]=\"item.select_box_option\"></dx-text-box>\n                                </div>\n                                <div class=\"px-1-1 w-1/2\">\n                                    <div class=\"flex justify-end\">\n                                        <div class=\"{{commonService.btn_danger_sm}} w-24 mt-6 text-center\"\n                                            (click)=\"deleteNodeFilter(i)\">Delete Filter</div>\n                                    </div>\n                                </div>\n                            </div>\n                        </ng-container>\n                    </div>\n                    <div class=\"{{commonService.btn_primary_sm}} w-auto text-center\"\n                        (click)=\"getNodeProperticeFilterOption()\">Add\n                        Filter</div>\n                </div>\n            </ng-container>\n\n            <div class=\"flex flex-row justify-end items-center h-16 m-2\">\n                <div class=\"{{commonService.btnDarkBlack}} m-2 w-fit text-center cursar-pointer\"\n                    (click)=\"backToMainView()\">Back\n                </div>\n                <ng-container *ngIf=\"!isUpdateWidget\">\n                    <div *ngIf=\"islayoutCreate\"\n                        class=\"{{commonService.btn_success_md}} m-2 w-fit text-center cursar-pointer\"\n                        (click)=\"addLayoutTOview()\">Add View\n                    </div>\n                    <div *ngIf=\"!islayoutCreate && !isEditMainLayout\"\n                        class=\"{{commonService.btn_primary_md}} m-2 w-fit text-center cursar-pointer\"\n                        (click)=\"addWidgetTOview()\">Add Layout\n                    </div>\n                    <div *ngIf=\"!islayoutCreate && isEditMainLayout\"\n                        class=\"{{commonService.btn_primary_md}} m-2 w-fit text-center cursar-pointer\"\n                        (click)=\"updateLayoutWidgetTOview()\">Update Layout\n                    </div>\n\n                </ng-container>\n\n                <div class=\"{{commonService.btn_warning_md}} m-2 w-fit text-center cursar-pointer\"\n                    (click)=\"updateToView()\" *ngIf=\"isUpdateWidget\">Update View\n                </div>\n\n            </div>\n\n\n            <!-- <pre><code>{{dashBoardWidgetConfig | json}}</code></pre> -->\n        </ng-container>\n        <ng-container *ngIf=\"isChartButtonClick\">\n            <h6\n                class=\"mb-2 font-bold text-md tracking-tight text-gray-900 dark:text-white border-b pb-3 flex  items-center\">\n                <i class=\"fa fa-bar-chart-o mr-2\"></i> Select View\n                <div class=\"{{commonService.btnDarkBlack}} m-2 w-fit text-center cursor-pointer\"\n                    (click)=\"backToMainView()\">Back\n                </div>\n            </h6>\n            <div class=\" h-[80vh] overflow-x-auto\">\n                <div class=\"relative my-2 \">\n                    <input type=\"text\" [(ngModel)]=\"viewToSearch\" (keyup)=\"filterViews()\" (keydown)=\"filterViews()\"\n                        class=\"bg-gray-800 border border-gray-700 text-gray-200 text-sm focus:ring-gray-400 focus:border-gray-500 block w-full p-4 h-8 rounded\"\n                        placeholder=\"Search View\" />\n                    <button type=\"button\" class=\"absolute inset-y-0 right-0 flex items-center pr-6\">\n                        <mat-icon class=\"rotate-90 cursor-pointer\" [svgIcon]=\"'heroicons_outline:search'\"></mat-icon>\n                    </button>\n                </div>\n                <ng-container *ngFor=\"let item of filteredComponentConfig\">\n                    <div class=\"relative group my-3 w-full\">\n                        <!-- Item View Name -->\n                        <div class=\"text-md font-bold border-b py-2 cursar-pointer\">\n                            {{item.viewName}}</div>\n\n                        <!-- Hover Buttons -->\n                        <div\n                            class=\"absolute top-0  right-0 flex space-x-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pb-2\">\n                            <button class=\"rounded-full p-2 text-white bg-blue-500 hover:bg-blue-700\">\n                                <i class=\"fa fa-pencil-square-o\" aria-hidden=\"true\"\n                                    (click)=\"editComponentViews(item)\"></i>\n                            </button>\n                            <button class=\"rounded-full p-2 text-white bg-green-500 hover:bg-green-700\"\n                                (click)=\"getComponentConfig(item)\">\n                                <i class=\"fa fa-plus\"></i>\n                            </button>\n                        </div>\n                    </div>\n                </ng-container>\n            </div>\n\n        </ng-container>\n        <ng-container *ngIf=\"isDefaultView\">\n            <ng-container *ngFor=\"let item of dashBoardWidgetConfig.widgets; let i = index\">\n                <div class=\"group my-3 w-full flex justify-between border-b items-center\">\n                    <div class=\"text-md font-bold  py-2 cursor-pointer\">\n                        {{item.widgetTitle}}\n                    </div>\n\n                    <div class=\"flex space-x-2\">\n                        <button *ngIf=\"i !== 0\" class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                            (click)=\"moveItemForWidget(i, 'up')\">\n                            <i class=\"fa fa-arrow-up\" aria-hidden=\"true\"></i>\n                        </button>\n\n                        <button *ngIf=\"i !== dashBoardWidgetConfig.widgets.length - 1\"\n                            class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                            (click)=\"moveItemForWidget(i, 'down')\">\n                            <i class=\"fa fa-arrow-down\" aria-hidden=\"true\"></i>\n                        </button>\n                        <button class=\"rounded-full p-2 text-white bg-blue-500 hover:bg-blue-700 mb-2\"\n                            (click)=\"getEditViewFromLayout(item,i)\">\n                            <i class=\"fa fa-pencil-square\" aria-hidden=\"true\"></i>\n\n                        </button>\n                        <button class=\"rounded-full p-2 text-white bg-red-500 hover:bg-red-700 mb-2\"\n                            (click)=\"getDeleteViewFromLayout(item,i)\">\n                            <i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                        </button>\n\n                    </div>\n                </div>\n            </ng-container>\n        </ng-container>\n\n\n    </div>\n</div>\n<!-- </div> -->\n\n<dx-popup [(visible)]=\"isEditOptionClick\" [closeOnOutsideClick]=\"false\" [dragEnabled]=\"false\" [width]=\"1200\"\n    [height]=\"'auto'\" [showTitle]=\"true\" class=\"popup\" title=\"{{editViewdataSourceModal.viewName}}\">\n    <div *dxTemplate=\"let data of 'content'\">\n\n        <app-dash-chart [datasetmodal]=\"editViewdataSourceModal\" (getChartConfigOutPut)=\"getEmitNewChartCongig($event)\"\n            *ngIf=\"editViewdataSourceModal.viewType == 'chart'\"></app-dash-chart>\n        <app-dash-table [datasetmodal]=\"editViewdataSourceModal\" (getTableConfigOutPut)=\"getEmitNewChartCongig($event)\"\n            *ngIf=\"editViewdataSourceModal.viewType == 'table'\"></app-dash-table>\n        <!-- <app-dash-other [datasetmodal]=\"editViewdataSourceModal\" *ngIf=\"editViewdataSourceModal.viewType == 'others'\"\n            (createOtherComponentView)=\"getEmitNewChartCongig($event)\"></app-dash-other> -->\n    </div>\n</dx-popup>\n\n\n<dx-popup [(visible)]=\"isCreateDataset\" [closeOnOutsideClick]=\"false\" [dragEnabled]=\"false\" [width]=\"1200\"\n    [height]=\"600\" [showTitle]=\"true\" class=\"popup\" title=\"Dataset Editor\">\n    <div *dxTemplate=\"let data of 'content'\">\n        <dx-scroll-view class=\"h-full\" [width]=\"'100%'\" [height]=\"'100%'\">\n            <app-create-dataset [isHeader]=\"false\"></app-create-dataset>\n        </dx-scroll-view>\n    </div>\n</dx-popup>\n<dx-popup [(visible)]=\"isCreateDatasetWithDatasetId\" [closeOnOutsideClick]=\"false\" [dragEnabled]=\"false\" [width]=\"1200\"\n    [height]=\"600\" [showTitle]=\"true\" class=\"popup\" title=\"Dataset Editor\" (onHidden)=\"getDatasetPopupHide($event)\">\n    <div *dxTemplate=\"let data of 'content'\">\n        <dx-scroll-view class=\"h-full\" [width]=\"'100%'\" [height]=\"'100%'\">\n            <app-create-dataset [selectedDatasetId]=\"selectedDatasetId\" [isHeader]=\"false\"></app-create-dataset>\n        </dx-scroll-view>\n    </div>\n</dx-popup>\n\n<dx-popup [(visible)]=\"isCreateNewViewWithDefaultView\" [closeOnOutsideClick]=\"false\" [dragEnabled]=\"false\"\n    [width]=\"1200\" [height]=\"600\" [showTitle]=\"true\" class=\"popup\" title=\"Views Editor\"\n    (onHidden)=\"getViewPopupHide($event)\">\n    <div *dxTemplate=\"let data of 'content'\">\n        <dx-scroll-view class=\"h-full\" [width]=\"'100%'\" [height]=\"'100%'\">\n            <app-create-comp-view [selectedViewId]=\"selectedViewId\" [isHeader]=\"false\"></app-create-comp-view>\n        </dx-scroll-view>\n    </div>\n</dx-popup>\n<dx-popup [(visible)]=\"isCreateNewView\" [closeOnOutsideClick]=\"false\" [dragEnabled]=\"false\" [width]=\"1200\"\n    [height]=\"600\" [showTitle]=\"true\" class=\"popup\" title=\"Views Editor\">\n    <div *dxTemplate=\"let data of 'content'\">\n        <dx-scroll-view class=\"h-full\" [width]=\"'100%'\" [height]=\"'100%'\">\n            <app-create-comp-view [isHeader]=\"false\"></app-create-comp-view>\n        </dx-scroll-view>\n    </div>\n</dx-popup>\n\n\n<dx-popup [(visible)]=\"isWidgetFilters\" [closeOnOutsideClick]=\"false\" [dragEnabled]=\"false\" [width]=\"800\" [height]=\"400\"\n    [showTitle]=\"true\" class=\"popup\" title=\"Dataset Filter\">\n    <div *dxTemplate=\"let data of 'content'\">\n        <div class=\"my-2\">\n            <dx-scroll-view [width]=\"'100%'\" [height]=\"'85%'\">\n                <ng-container *ngFor=\"let item of nodeproperticeFilterDataSource; let i = index\">\n                    <div class=\"flex flex-row my-2\">\n                        <div class=\"m-1\">\n                            <dx-text-box [(ngModel)]=\"item.columnName\"></dx-text-box>\n                        </div>\n                        <div class=\"m-1\">\n                            <dx-select-box [items]=\"['get','let']\" [(ngModel)]=\"item.operator\"\n                                placeholder=\"Operator\"></dx-select-box>\n                        </div>\n                        <div class=\"m-1\">\n                            <dx-text-box [(ngModel)]=\"item.value\"></dx-text-box>\n                        </div>\n                    </div>\n                </ng-container>\n\n            </dx-scroll-view>\n            <div class=\"flex justify-end mx-1 flex-grow\">\n                <button class=\"{{commonService.btn_success_md}} cursor-pointer mt-2\"\n                    (click)=\"submitFilter()\">Submit</button>\n            </div>\n\n        </div>\n\n    </div>\n</dx-popup>\n<dx-popup [(visible)]=\"isAdvanceLayout\" [closeOnOutsideClick]=\"false\" [dragEnabled]=\"false\" [width]=\"1200\"\n    [height]=\"700\" [showTitle]=\"true\" class=\"popup\" title=\"Dataset Filter\">\n    <div *dxTemplate=\"let data of 'content'\">\n        <div class=\"flex flex-row px-2 mb-3\">\n            <div class=\"w-2/3 mb-2\">\n                <div class=\"text-md mb-2\">Select Views</div>\n                <dx-tag-box [dataSource]=\"componentConfigDataSource\" valueExpr=\"viewId\" displayExpr=\"viewName\"\n                    [multiline]=\"true\" [showSelectionControls]=\"true\" [(ngModel)]=\"selectedViewsIds\"\n                    [maxDisplayedTags]=\"3\" (onValueChanged)=\"getSelectedColumnSource($event)\" [searchEnabled]=\"true\">\n                </dx-tag-box>\n            </div>\n            <div class=\"w-1/3 px-2\">\n                <button class=\"{{commonService.btn_primary_md}} mt-6\" (click)=\"getProcessForConfig()\">\n                    Add To View\n                </button>\n                <!-- <button class=\"{{commonService.btn_danger_md}} cursor-pointer mt-6\" (click)=\"cancelCdrConfig()\">Cancel\n                                    </button> -->\n            </div>\n        </div>\n        <dx-scroll-view [width]=\"'100%'\" [height]=\"'80%'\">\n\n            <div class=\"m-2 border-b\" *ngIf=\"isProceed\">\n                <ng-container *ngFor=\"let item of advanceLayoutContainer; let i = index;\">\n                    <div class=\"flex flex-row m-2\">\n                        <div class=\"mx-2 w-1/2\">\n                            <div class=\"text-md mb-2\">View Name</div>\n                            <dx-text-box [(ngModel)]=\"item.compConfig.viewConfig[0].viewName\"></dx-text-box>\n                        </div>\n                        <div class=\"mx-2\">\n                            <div class=\"text-md mb-2\">Widget Title</div>\n                            <dx-text-box [(ngModel)]=\"item.nodeProperties.widgetTitle\"></dx-text-box>\n                        </div>\n\n                        <div class=\"mx-2\">\n                            <div class=\"text-md mb-2\">Widget Width</div>\n                            <dx-select-box [searchEnabled]=\"true\" [items]=\"widget_width\"\n                                [(ngModel)]=\"item.nodeProperties.width\"></dx-select-box>\n                        </div>\n\n                        <div class=\"mx-2\">\n                            <div class=\"text-md mb-2\">Widget Height</div>\n                            <dx-text-box [(ngModel)]=\"item.nodeProperties.height\"></dx-text-box>\n                        </div>\n                        <div class=\"mx-2\">\n                            <div class=\"text-md mb-2\">Widget Filter</div>\n                            <dx-select-box [items]=\"filterDataSource\" displayExpr=\"filterName\" [searchEnabled]=\"true\"\n                                valueExpr=\"filterId\" [(ngModel)]=\"item.filterId\"></dx-select-box>\n                        </div>\n                        <div class=\"mx-2\">\n                            <div class=\"text-md mt-8\">\n                                <dx-check-box [(ngModel)]=\"item.nodeProperties.display\" text=\"Display\"></dx-check-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2\">\n                            <button class=\"{{commonService.btn_danger_sm}} cursor-pointer mt-8\"\n                                (click)=\"deleteView(i)\"><i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                            </button>\n                        </div>\n                    </div>\n                </ng-container>\n            </div>\n        </dx-scroll-view>\n        <div class=\"flex justify-end mx-1 my-2 flex-grow\">\n            <button class=\"{{commonService.btn_success_md}} cursor-pointer mt-2\" (click)=\"submitAdvanceView()\">Add\n                Layout</button>\n        </div>\n    </div>\n</dx-popup>", styles: ["::ng-deep #scrollview-demo{min-height:550px}::ng-deep #scrollview{height:auto;position:absolute;top:0;bottom:300px;padding:20px}::ng-deep #scrollview-content{white-space:pre-wrap}.scrollable-content{height:90vh;overflow-y:auto}\n"] }]
         }], ctorParameters: function () { return [{ type: CommonService }, { type: i2.ActivatedRoute }, { type: i0.ViewContainerRef }, { type: i0.ComponentFactoryResolver }, { type: ApplicationContentService }, { type: i4$1.ToastrService }, { type: i2.Router }, { type: ApplicationDatssetsCall }]; }, propDecorators: { dynamicComponentContainer: [{
                 type: ViewChild,
                 args: ['dynamicComponentContainer', { read: ViewContainerRef }]
@@ -13252,7 +13276,7 @@ class ApplicationCreateMenuComponent {
         let menuId = this.activatedRoute.snapshot.queryParams['menuId'];
         let contentType = this.activatedRoute.snapshot.queryParams['contentType'];
         if (contentType == "edit") {
-            this.service.getAppAppMenuConfigById(menuId).subscribe({
+            this.service.getAppMenuConfigById(menuId).subscribe({
                 next: (data) => {
                     this.menuObject = data;
                     this.selectedQueryParamStr = (data['queryParams'] && data['queryParams']['pageId']) ? data['queryParams']['pageId'] : "";
@@ -16045,7 +16069,7 @@ class CdrConfigService {
         }), catchError(this.handleError));
     }
     getKPIReferenceEndPoints() {
-        const apiUrl = this.environment.appUrl + this.environment.apiVersion + '/kpi-config/getKPIReferenceEndPoints';
+        const apiUrl = this.environment.appUrl + this.environment.apiVersion + this.environment.packageBasePath + '/getKPIReferenceEndPoints';
         return this.http
             .get(apiUrl, { withCredentials: true })
             .pipe(map((response) => {
@@ -16452,7 +16476,7 @@ class CreateKpIService {
         });
     }
     getKpiBrowserConfigById(id) {
-        const apiUrl = this.environment.appUrl + this.environment.apiVersion + '/kpi-config/getKpiBrowserConfigById?id=' + id;
+        const apiUrl = this.environment.appUrl + this.environment.apiVersion + this.environment.packageBasePath + '/getKpiBrowserConfigById?id=' + id;
         return this.http
             .get(apiUrl, { withCredentials: true })
             .pipe(map((response) => {
@@ -16460,7 +16484,7 @@ class CreateKpIService {
         }), catchError(this.handleError));
     }
     getAppPageConfigs() {
-        const apiUrl = this.environment.appUrl + this.environment.apiVersion + '/kpi-config/getAppPageConfigs';
+        const apiUrl = this.environment.appUrl + this.environment.apiVersion + this.environment.packageBasePath + '/getAppPageConfigs';
         return this.http
             .get(apiUrl, { withCredentials: true })
             .pipe(map((response) => {
@@ -16468,7 +16492,7 @@ class CreateKpIService {
         }), catchError(this.handleError));
     }
     getlistKpiBrowser() {
-        const apiUrl = this.environment.appUrl + this.environment.apiVersion + '/kpi-config/listKpiBrowser';
+        const apiUrl = this.environment.appUrl + this.environment.apiVersion + this.environment.packageBasePath + '/listKpiBrowser';
         return this.http
             .get(apiUrl, { withCredentials: true })
             .pipe(map((response) => {
@@ -16477,14 +16501,45 @@ class CreateKpIService {
     }
     configureKpiBrowserConfig(body) {
         return this.http
-            .post(this.environment.appUrl + this.environment.apiVersion + '/kpi-config/configureKpiBrowserConfig', JSON.stringify(body), this.options)
+            .post(this.environment.appUrl + this.environment.apiVersion + this.environment.packageBasePath + '/configureKpiBrowserConfig', JSON.stringify(body), this.options)
             .pipe(map((response) => {
             return response;
         }), catchError(this.handleError));
     }
     getCreateKpi(body) {
         return this.http
-            .post(this.environment.appUrl + this.environment.apiVersion + '/kpi-config/createKpi', JSON.stringify(body), this.options)
+            .post(this.environment.appUrl + this.environment.apiVersion + this.environment.packageBasePath + '/createKpi', JSON.stringify(body), this.options)
+            .pipe(map((response) => {
+            return response;
+        }), catchError(this.handleError));
+    }
+    listKpiEntryConfigs() {
+        const apiUrl = this.environment.appUrl + this.environment.apiVersion + this.environment.packageBasePath + '/listKpiEntryConfigs?caller=app';
+        return this.http
+            .get(apiUrl, { withCredentials: true })
+            .pipe(map((response) => {
+            return response;
+        }), catchError(this.handleError));
+    }
+    createKpiEntryConfig(kpiObj) {
+        const apiUrl = this.environment.appUrl + this.environment.apiVersion + this.environment.packageBasePath + '/createKpiEntryConfig';
+        return this.http
+            .post(apiUrl, JSON.stringify(kpiObj), this.options)
+            .pipe(map((response) => {
+            return response;
+        }), catchError(this.handleError));
+    }
+    updateKpiEntryConfig(kpiObj) {
+        const apiUrl = this.environment.appUrl + this.environment.apiVersion + this.environment.packageBasePath + '/updateKpiEntryConfig';
+        return this.http
+            .post(apiUrl, JSON.stringify(kpiObj), this.options)
+            .pipe(map((response) => {
+            return response;
+        }), catchError(this.handleError));
+    }
+    deleteKpiEntryConfig(kpiId) {
+        return this.http
+            .delete(this.environment.appUrl + this.environment.apiVersion + this.environment.packageBasePath + '/deleteKpiEntryConfig/' + kpiId, this.options)
             .pipe(map((response) => {
             return response;
         }), catchError(this.handleError));
@@ -16606,10 +16661,10 @@ class TreeViewBasicItemComponent {
     }
 }
 TreeViewBasicItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TreeViewBasicItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CreateKpIService }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component });
-TreeViewBasicItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TreeViewBasicItemComponent, selector: "treeview-basic-item", inputs: { item: "item", name: "name", internalRoute: "internalRoute", isEditIcon: "isEditIcon", treeId: "treeId" }, outputs: { editableKpiBasicData: "editableKpiBasicData" }, ngImport: i0, template: "<!-- Item wrapper -->\n<div class=\"treeview-item-wrapper\" [class.treeview-item-has-subtitle]=\"!!item.subtitle\"\n    [ngClass]=\"item.classes?.wrapper\" (click)=\"getKPIDataOnclick(item, $event)\" (dblclick)='getNavigateToKpi(item)' *ngIf=\"item.isVisible\">\n\n    <!-- Item with an internal link -->\n    <!-- <ng-container *ngIf=\"item.link && !item.externalLink && !item.function && !item.disabled\">\n        <a class=\"treeview-item\" [ngClass]=\"{'treeview-item-active-forced': item.active}\" [routerLink]=\"[item.link]\"\n            [fragment]=\"item.fragment ?? null\" [preserveFragment]=\"item.preserveFragment ?? false\"\n            [queryParams]=\"item.queryParams ?? null\" [queryParamsHandling]=\"item.queryParamsHandling ?? null\"\n            [routerLinkActive]=\"'treeview-item-active'\" [routerLinkActiveOptions]=\"isActiveMatchOptions\"\n            [matTooltip]=\"item.tooltip || ''\">\n            <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n        </a>\n    </ng-container> -->\n\n\n    <!-- Item with a no link and no function -->\n    <ng-container *ngIf=\"!item.link && !item.function && !item.disabled\">\n        <div class=\"treeview-item\" id=\"kpiId-{{item.tid}}\" [matTooltip]=\"item.tooltip || ''\">\n            <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n        </div>\n    </ng-container>\n\n</div>\n\n<!-- Item template -->\n<ng-template #itemTemplate>\n\n    <!-- Icon -->\n    <ng-container *ngIf=\"item.icon\">\n        <mat-icon class=\"treeview-item-icon\" [ngClass]=\"item.classes?.icon\" [svgIcon]=\"item.icon\"></mat-icon>\n    </ng-container>\n\n    <!-- Title & Subtitle -->\n    <div class=\"treeview-item-title-wrapper\">\n        <div class=\"treeview-item-title capitalize\">\n            <span [ngClass]=\"item.classes?.name\">\n                <i class=\"fa fa-pencil text-sky-800 mx-2 hover:text-sky-400 cursor-pointer \"\n                    (click)=\"getEditTreeData(item)\" *ngIf=\"isEditIcon\"></i> {{item.name}}\n            </span>\n        </div>\n        <ng-container *ngIf=\"item.subtitle\">\n            <div class=\"treeview-item-subtitle\">\n                <span [ngClass]=\"item.classes?.subtitle\">\n                    {{item.subtitle}}\n                </span>\n            </div>\n        </ng-container>\n    </div>\n\n    <!-- Badge -->\n    <ng-container *ngIf=\"item.badge\">\n        <div class=\"treeview-item-badge\">\n            <div class=\"treeview-item-badge-content\" [ngClass]=\"item.badge.classes\">\n                {{item.badge.title}}\n            </div>\n        </div>\n    </ng-container>\n\n</ng-template>", dependencies: [{ kind: "directive", type: i4$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TreeViewBasicItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TreeViewBasicItemComponent, selector: "treeview-basic-item", inputs: { item: "item", name: "name", internalRoute: "internalRoute", isEditIcon: "isEditIcon", treeId: "treeId" }, outputs: { editableKpiBasicData: "editableKpiBasicData" }, ngImport: i0, template: "<!-- Item wrapper -->\n<div class=\"treeview-item-wrapper\" [class.treeview-item-has-subtitle]=\"!!item.subtitle\"\n    [ngClass]=\"item.classes?.wrapper\" (click)=\"getKPIDataOnclick(item, $event)\" (dblclick)='getNavigateToKpi(item)' *ngIf=\"item.visibility\">\n\n    <!-- Item with an internal link -->\n    <!-- <ng-container *ngIf=\"item.link && !item.externalLink && !item.function && !item.disabled\">\n        <a class=\"treeview-item\" [ngClass]=\"{'treeview-item-active-forced': item.active}\" [routerLink]=\"[item.link]\"\n            [fragment]=\"item.fragment ?? null\" [preserveFragment]=\"item.preserveFragment ?? false\"\n            [queryParams]=\"item.queryParams ?? null\" [queryParamsHandling]=\"item.queryParamsHandling ?? null\"\n            [routerLinkActive]=\"'treeview-item-active'\" [routerLinkActiveOptions]=\"isActiveMatchOptions\"\n            [matTooltip]=\"item.tooltip || ''\">\n            <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n        </a>\n    </ng-container> -->\n\n\n    <!-- Item with a no link and no function -->\n    <ng-container *ngIf=\"!item.link && !item.function && !item.disabled\">\n        <div class=\"treeview-item\" id=\"kpiId-{{item.id}}\" [matTooltip]=\"item.tooltip || ''\">\n            <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n        </div>\n    </ng-container>\n\n</div>\n\n<!-- Item template -->\n<ng-template #itemTemplate>\n\n    <!-- Icon -->\n    <ng-container *ngIf=\"item.icon\">\n        <mat-icon class=\"treeview-item-icon\" [ngClass]=\"item.classes?.icon\" [svgIcon]=\"item.icon\"></mat-icon>\n    </ng-container>\n\n    <!-- Title & Subtitle -->\n    <div class=\"treeview-item-title-wrapper\">\n        <div class=\"treeview-item-title capitalize\">\n            <span [ngClass]=\"item.classes?.name\">\n                <i class=\"fa fa-pencil text-sky-800 mx-2 hover:text-sky-400 cursor-pointer \"\n                    (click)=\"getEditTreeData(item)\" *ngIf=\"isEditIcon\"></i> {{item.title}}\n            </span>\n        </div>\n        <ng-container *ngIf=\"item.subtitle\">\n            <div class=\"treeview-item-subtitle\">\n                <span [ngClass]=\"item.classes?.subtitle\">\n                    {{item.subtitle}}\n                </span>\n            </div>\n        </ng-container>\n    </div>\n\n    <!-- Badge -->\n    <ng-container *ngIf=\"item.badge\">\n        <div class=\"treeview-item-badge\">\n            <div class=\"treeview-item-badge-content\" [ngClass]=\"item.badge.classes\">\n                {{item.badge.title}}\n            </div>\n        </div>\n    </ng-container>\n\n</ng-template>", dependencies: [{ kind: "directive", type: i4$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TreeViewBasicItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'treeview-basic-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Item wrapper -->\n<div class=\"treeview-item-wrapper\" [class.treeview-item-has-subtitle]=\"!!item.subtitle\"\n    [ngClass]=\"item.classes?.wrapper\" (click)=\"getKPIDataOnclick(item, $event)\" (dblclick)='getNavigateToKpi(item)' *ngIf=\"item.isVisible\">\n\n    <!-- Item with an internal link -->\n    <!-- <ng-container *ngIf=\"item.link && !item.externalLink && !item.function && !item.disabled\">\n        <a class=\"treeview-item\" [ngClass]=\"{'treeview-item-active-forced': item.active}\" [routerLink]=\"[item.link]\"\n            [fragment]=\"item.fragment ?? null\" [preserveFragment]=\"item.preserveFragment ?? false\"\n            [queryParams]=\"item.queryParams ?? null\" [queryParamsHandling]=\"item.queryParamsHandling ?? null\"\n            [routerLinkActive]=\"'treeview-item-active'\" [routerLinkActiveOptions]=\"isActiveMatchOptions\"\n            [matTooltip]=\"item.tooltip || ''\">\n            <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n        </a>\n    </ng-container> -->\n\n\n    <!-- Item with a no link and no function -->\n    <ng-container *ngIf=\"!item.link && !item.function && !item.disabled\">\n        <div class=\"treeview-item\" id=\"kpiId-{{item.tid}}\" [matTooltip]=\"item.tooltip || ''\">\n            <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n        </div>\n    </ng-container>\n\n</div>\n\n<!-- Item template -->\n<ng-template #itemTemplate>\n\n    <!-- Icon -->\n    <ng-container *ngIf=\"item.icon\">\n        <mat-icon class=\"treeview-item-icon\" [ngClass]=\"item.classes?.icon\" [svgIcon]=\"item.icon\"></mat-icon>\n    </ng-container>\n\n    <!-- Title & Subtitle -->\n    <div class=\"treeview-item-title-wrapper\">\n        <div class=\"treeview-item-title capitalize\">\n            <span [ngClass]=\"item.classes?.name\">\n                <i class=\"fa fa-pencil text-sky-800 mx-2 hover:text-sky-400 cursor-pointer \"\n                    (click)=\"getEditTreeData(item)\" *ngIf=\"isEditIcon\"></i> {{item.name}}\n            </span>\n        </div>\n        <ng-container *ngIf=\"item.subtitle\">\n            <div class=\"treeview-item-subtitle\">\n                <span [ngClass]=\"item.classes?.subtitle\">\n                    {{item.subtitle}}\n                </span>\n            </div>\n        </ng-container>\n    </div>\n\n    <!-- Badge -->\n    <ng-container *ngIf=\"item.badge\">\n        <div class=\"treeview-item-badge\">\n            <div class=\"treeview-item-badge-content\" [ngClass]=\"item.badge.classes\">\n                {{item.badge.title}}\n            </div>\n        </div>\n    </ng-container>\n\n</ng-template>" }]
+            args: [{ selector: 'treeview-basic-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Item wrapper -->\n<div class=\"treeview-item-wrapper\" [class.treeview-item-has-subtitle]=\"!!item.subtitle\"\n    [ngClass]=\"item.classes?.wrapper\" (click)=\"getKPIDataOnclick(item, $event)\" (dblclick)='getNavigateToKpi(item)' *ngIf=\"item.visibility\">\n\n    <!-- Item with an internal link -->\n    <!-- <ng-container *ngIf=\"item.link && !item.externalLink && !item.function && !item.disabled\">\n        <a class=\"treeview-item\" [ngClass]=\"{'treeview-item-active-forced': item.active}\" [routerLink]=\"[item.link]\"\n            [fragment]=\"item.fragment ?? null\" [preserveFragment]=\"item.preserveFragment ?? false\"\n            [queryParams]=\"item.queryParams ?? null\" [queryParamsHandling]=\"item.queryParamsHandling ?? null\"\n            [routerLinkActive]=\"'treeview-item-active'\" [routerLinkActiveOptions]=\"isActiveMatchOptions\"\n            [matTooltip]=\"item.tooltip || ''\">\n            <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n        </a>\n    </ng-container> -->\n\n\n    <!-- Item with a no link and no function -->\n    <ng-container *ngIf=\"!item.link && !item.function && !item.disabled\">\n        <div class=\"treeview-item\" id=\"kpiId-{{item.id}}\" [matTooltip]=\"item.tooltip || ''\">\n            <ng-container *ngTemplateOutlet=\"itemTemplate\"></ng-container>\n        </div>\n    </ng-container>\n\n</div>\n\n<!-- Item template -->\n<ng-template #itemTemplate>\n\n    <!-- Icon -->\n    <ng-container *ngIf=\"item.icon\">\n        <mat-icon class=\"treeview-item-icon\" [ngClass]=\"item.classes?.icon\" [svgIcon]=\"item.icon\"></mat-icon>\n    </ng-container>\n\n    <!-- Title & Subtitle -->\n    <div class=\"treeview-item-title-wrapper\">\n        <div class=\"treeview-item-title capitalize\">\n            <span [ngClass]=\"item.classes?.name\">\n                <i class=\"fa fa-pencil text-sky-800 mx-2 hover:text-sky-400 cursor-pointer \"\n                    (click)=\"getEditTreeData(item)\" *ngIf=\"isEditIcon\"></i> {{item.title}}\n            </span>\n        </div>\n        <ng-container *ngIf=\"item.subtitle\">\n            <div class=\"treeview-item-subtitle\">\n                <span [ngClass]=\"item.classes?.subtitle\">\n                    {{item.subtitle}}\n                </span>\n            </div>\n        </ng-container>\n    </div>\n\n    <!-- Badge -->\n    <ng-container *ngIf=\"item.badge\">\n        <div class=\"treeview-item-badge\">\n            <div class=\"treeview-item-badge-content\" [ngClass]=\"item.badge.classes\">\n                {{item.badge.title}}\n            </div>\n        </div>\n    </ng-container>\n\n</ng-template>" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: CreateKpIService }, { type: i2.Router }]; }, propDecorators: { item: [{
                 type: Input
             }], name: [{
@@ -17018,29 +17073,6 @@ const gammaAnimations = [
     zoomIn, zoomOut
 ];
 
-class TreeViewDividerItemComponent {
-    constructor(_changeDetectorRef) {
-        this._changeDetectorRef = _changeDetectorRef;
-        this._unsubscribeAll = new Subject();
-    }
-    ngOnInit() {
-    }
-    ngOnDestroy() {
-        this._unsubscribeAll.next(null);
-        this._unsubscribeAll.complete();
-    }
-}
-TreeViewDividerItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TreeViewDividerItemComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TreeViewDividerItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TreeViewDividerItemComponent, selector: "treeview-divider-item", inputs: { item: "item", name: "name" }, ngImport: i0, template: "<!-- Divider -->\n<div class=\"treeview-item-wrapper divider\" [ngClass]=\"item.classes?.wrapper\"></div>", dependencies: [{ kind: "directive", type: i4$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TreeViewDividerItemComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'treeview-divider-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Divider -->\n<div class=\"treeview-item-wrapper divider\" [ngClass]=\"item.classes?.wrapper\"></div>" }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { item: [{
-                type: Input
-            }], name: [{
-                type: Input
-            }] } });
-
 class TreeViewCollapsableItemComponent {
     constructor(_changeDetectorRef, _router, _treeviewService) {
         this._changeDetectorRef = _changeDetectorRef;
@@ -17059,17 +17091,7 @@ class TreeViewCollapsableItemComponent {
         };
     }
     ngOnInit() {
-        const activeItem = this.findActiveChild(this.item, this.treeId);
-        if (this.treeId == undefined || this.treeId == null) {
-            if (this.autoCollapse) {
-                this.collapse();
-            }
-        }
-        else {
-            if (activeItem) {
-                this.expand();
-            }
-        }
+        console.log(this.item, 'items');
     }
     ngOnDestroy() {
         this._unsubscribeAll.next(null);
@@ -17166,10 +17188,10 @@ class TreeViewCollapsableItemComponent {
     }
 }
 TreeViewCollapsableItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TreeViewCollapsableItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i2.Router }, { token: TreeviewSharedService }], target: i0.ɵɵFactoryTarget.Component });
-TreeViewCollapsableItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TreeViewCollapsableItemComponent, selector: "treeview-collapsable-item", inputs: { autoCollapse: "autoCollapse", item: "item", name: "name", treeId: "treeId", internalRoute: "internalRoute", isEditIcon: "isEditIcon" }, outputs: { editableKpiData: "editableKpiData" }, host: { properties: { "class": "this.classList" } }, ngImport: i0, template: "<div class=\"treeview-item-wrapper\" [class.treeview-item-has-subtitle]=\"!!item.subtitle\"\n    [ngClass]=\"item.classes?.wrapper\" *ngIf=\"item.isVisible\">\n\n    <div class=\"treeview-item\" id=\"kpiId-{{item.tid}}\" [ngClass]=\"{'treeview-item-disabled': item.disabled}\"\n        [matTooltip]=\"item.tooltip || ''\" (click)=\"toggleCollapsable()\">\n\n        <!-- Icon -->\n        <ng-container *ngIf=\"item.icon\">\n            <mat-icon class=\"treeview-item-icon\" [ngClass]=\"item.classes?.icon\" [svgIcon]=\"item.icon\"></mat-icon>\n        </ng-container>\n\n        <!-- Title & Subtitle -->\n        <div class=\"treeview-item-title-wrapper\">\n            <div class=\"treeview-item-title\">\n                <span [ngClass]=\"item.classes?.name\">\n                    <i class=\"fa fa-pencil text-sky-800 mx-2 hover:text-sky-400 cursor-pointer\"\n                        (click)=\"getEditTreeData(item)\" *ngIf=\"isEditIcon\"></i> {{item.name}}\n                </span>\n            </div>\n            <ng-container *ngIf=\"item.subtitle\">\n                <div class=\"treeview-item-subtitle\">\n                    <span [ngClass]=\"item.classes?.subtitle\">\n                        {{item.subtitle}}\n                    </span>\n                </div>\n            </ng-container>\n        </div>\n\n        <!-- Badge -->\n        <ng-container *ngIf=\"item.badge\">\n            <div class=\"treeview-item-badge\">\n                <div class=\"treeview-item-badge-content\" [ngClass]=\"item.badge.classes\">\n                    {{item.badge.name}}\n                </div>\n            </div>\n        </ng-container>\n\n        <!-- Arrow -->\n        <mat-icon class=\"treeview-item-arrow icon-size-4\" [svgIcon]=\"'heroicons_solid:chevron-right'\"></mat-icon>\n\n    </div>\n\n</div>\n\n<div class=\"treeview-item-children\" *ngIf=\"!isCollapsed\" @expandCollapse>\n\n    <ng-container *ngFor=\"let item of item.nodes; trackBy: trackByFn\">\n\n        <!-- Skip the hidden items -->\n        <ng-container *ngIf=\"(item.hidden && !item.hidden(item)) || !item.hidden\">\n\n            <!-- Basic -->\n            <ng-container *ngIf=\"item.tag_type === 'child'\">\n                <treeview-basic-item [item]=\"item\" [name]=\"name\" [isEditIcon]=\"isEditIcon\"\n                    (editableKpiBasicData)=\"getKpiEditKpiBasicData($event)\"\n                    [internalRoute]=\"internalRoute\"></treeview-basic-item>\n            </ng-container>\n\n            <!-- Collapsable -->\n            <ng-container *ngIf=\"item.tag_type === 'parent'\">\n                <treeview-collapsable-item [item]=\"item\" [name]=\"name\" [isEditIcon]=\"isEditIcon\"\n                    (editableKpiData)=\"getKpiEditKpiData($event)\" [internalRoute]=\"internalRoute\"\n                    [autoCollapse]=\"autoCollapse\" [treeId]=\"treeId\">\n                </treeview-collapsable-item>\n            </ng-container>\n\n            <!-- Divider -->\n            <ng-container *ngIf=\"item.tag_type === 'divider'\">\n                <treeview-divider-item [item]=\"item\" [name]=\"name\"></treeview-divider-item>\n            </ng-container>\n\n        </ng-container>\n\n    </ng-container>\n\n</div>", dependencies: [{ kind: "directive", type: i4$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: TreeViewBasicItemComponent, selector: "treeview-basic-item", inputs: ["item", "name", "internalRoute", "isEditIcon", "treeId"], outputs: ["editableKpiBasicData"] }, { kind: "component", type: TreeViewCollapsableItemComponent, selector: "treeview-collapsable-item", inputs: ["autoCollapse", "item", "name", "treeId", "internalRoute", "isEditIcon"], outputs: ["editableKpiData"] }, { kind: "component", type: TreeViewDividerItemComponent, selector: "treeview-divider-item", inputs: ["item", "name"] }], animations: gammaAnimations, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TreeViewCollapsableItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TreeViewCollapsableItemComponent, selector: "treeview-collapsable-item", inputs: { autoCollapse: "autoCollapse", item: "item", name: "name", treeId: "treeId", internalRoute: "internalRoute", isEditIcon: "isEditIcon" }, outputs: { editableKpiData: "editableKpiData" }, host: { properties: { "class": "this.classList" } }, ngImport: i0, template: "<div class=\"treeview-item-wrapper\" [class.treeview-item-has-subtitle]=\"!!item.subtitle\"\n    [ngClass]=\"item.classes?.wrapper\" *ngIf=\"item.visibility\">\n\n    <div class=\"treeview-item\" id=\"kpiId-{{item.id}}\" [ngClass]=\"{'treeview-item-disabled': item.disabled}\"\n        [matTooltip]=\"item.tooltip || ''\" (click)=\"toggleCollapsable()\">\n\n        <!-- Icon -->\n        <ng-container *ngIf=\"item.icon\">\n            <mat-icon class=\"treeview-item-icon\" [ngClass]=\"item.classes?.icon\" [svgIcon]=\"item.icon\"></mat-icon>\n        </ng-container>\n\n        <!-- Title & Subtitle -->\n        <div class=\"treeview-item-title-wrapper\">\n            <div class=\"treeview-item-title\">\n                <span [ngClass]=\"item.classes?.name\">\n                    <i class=\"fa fa-pencil text-sky-800 mx-2 hover:text-sky-400 cursor-pointer\"\n                        (click)=\"getEditTreeData(item)\" *ngIf=\"isEditIcon\"></i> {{item.title}}\n                </span>\n            </div>\n        </div>\n\n        <!-- Badge -->\n       \n\n        <!-- Arrow -->\n        <mat-icon class=\"treeview-item-arrow icon-size-4\" [svgIcon]=\"'heroicons_solid:chevron-right'\"></mat-icon>\n\n    </div>\n\n</div>\n\n<div class=\"treeview-item-children\" *ngIf=\"!isCollapsed\" @expandCollapse>\n\n    <ng-container *ngFor=\"let item of item.children; trackBy: trackByFn\">\n\n        <!-- Skip the hidden items -->\n        <ng-container *ngIf=\"(item.hidden && !item.hidden(item)) || !item.hidden\">\n\n            <!-- Basic -->\n            <ng-container *ngIf=\"item.tagType == 'child'\">\n                <treeview-basic-item [item]=\"item\" [name]=\"name\" [isEditIcon]=\"isEditIcon\"\n                    (editableKpiBasicData)=\"getKpiEditKpiBasicData($event)\"\n                    [internalRoute]=\"internalRoute\"></treeview-basic-item>\n            </ng-container>\n\n            <!-- Collapsable -->\n            <ng-container *ngIf=\"item.tagType == 'parent'\">\n                <treeview-collapsable-item [item]=\"item\" [name]=\"name\" [isEditIcon]=\"isEditIcon\"\n                    (editableKpiData)=\"getKpiEditKpiData($event)\" [internalRoute]=\"internalRoute\"\n                    [autoCollapse]=\"autoCollapse\" [treeId]=\"treeId\">\n                </treeview-collapsable-item>\n            </ng-container>\n\n        </ng-container>\n\n    </ng-container>\n\n</div>", dependencies: [{ kind: "directive", type: i4$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: TreeViewBasicItemComponent, selector: "treeview-basic-item", inputs: ["item", "name", "internalRoute", "isEditIcon", "treeId"], outputs: ["editableKpiBasicData"] }, { kind: "component", type: TreeViewCollapsableItemComponent, selector: "treeview-collapsable-item", inputs: ["autoCollapse", "item", "name", "treeId", "internalRoute", "isEditIcon"], outputs: ["editableKpiData"] }], animations: gammaAnimations, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TreeViewCollapsableItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'treeview-collapsable-item', animations: gammaAnimations, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"treeview-item-wrapper\" [class.treeview-item-has-subtitle]=\"!!item.subtitle\"\n    [ngClass]=\"item.classes?.wrapper\" *ngIf=\"item.isVisible\">\n\n    <div class=\"treeview-item\" id=\"kpiId-{{item.tid}}\" [ngClass]=\"{'treeview-item-disabled': item.disabled}\"\n        [matTooltip]=\"item.tooltip || ''\" (click)=\"toggleCollapsable()\">\n\n        <!-- Icon -->\n        <ng-container *ngIf=\"item.icon\">\n            <mat-icon class=\"treeview-item-icon\" [ngClass]=\"item.classes?.icon\" [svgIcon]=\"item.icon\"></mat-icon>\n        </ng-container>\n\n        <!-- Title & Subtitle -->\n        <div class=\"treeview-item-title-wrapper\">\n            <div class=\"treeview-item-title\">\n                <span [ngClass]=\"item.classes?.name\">\n                    <i class=\"fa fa-pencil text-sky-800 mx-2 hover:text-sky-400 cursor-pointer\"\n                        (click)=\"getEditTreeData(item)\" *ngIf=\"isEditIcon\"></i> {{item.name}}\n                </span>\n            </div>\n            <ng-container *ngIf=\"item.subtitle\">\n                <div class=\"treeview-item-subtitle\">\n                    <span [ngClass]=\"item.classes?.subtitle\">\n                        {{item.subtitle}}\n                    </span>\n                </div>\n            </ng-container>\n        </div>\n\n        <!-- Badge -->\n        <ng-container *ngIf=\"item.badge\">\n            <div class=\"treeview-item-badge\">\n                <div class=\"treeview-item-badge-content\" [ngClass]=\"item.badge.classes\">\n                    {{item.badge.name}}\n                </div>\n            </div>\n        </ng-container>\n\n        <!-- Arrow -->\n        <mat-icon class=\"treeview-item-arrow icon-size-4\" [svgIcon]=\"'heroicons_solid:chevron-right'\"></mat-icon>\n\n    </div>\n\n</div>\n\n<div class=\"treeview-item-children\" *ngIf=\"!isCollapsed\" @expandCollapse>\n\n    <ng-container *ngFor=\"let item of item.nodes; trackBy: trackByFn\">\n\n        <!-- Skip the hidden items -->\n        <ng-container *ngIf=\"(item.hidden && !item.hidden(item)) || !item.hidden\">\n\n            <!-- Basic -->\n            <ng-container *ngIf=\"item.tag_type === 'child'\">\n                <treeview-basic-item [item]=\"item\" [name]=\"name\" [isEditIcon]=\"isEditIcon\"\n                    (editableKpiBasicData)=\"getKpiEditKpiBasicData($event)\"\n                    [internalRoute]=\"internalRoute\"></treeview-basic-item>\n            </ng-container>\n\n            <!-- Collapsable -->\n            <ng-container *ngIf=\"item.tag_type === 'parent'\">\n                <treeview-collapsable-item [item]=\"item\" [name]=\"name\" [isEditIcon]=\"isEditIcon\"\n                    (editableKpiData)=\"getKpiEditKpiData($event)\" [internalRoute]=\"internalRoute\"\n                    [autoCollapse]=\"autoCollapse\" [treeId]=\"treeId\">\n                </treeview-collapsable-item>\n            </ng-container>\n\n            <!-- Divider -->\n            <ng-container *ngIf=\"item.tag_type === 'divider'\">\n                <treeview-divider-item [item]=\"item\" [name]=\"name\"></treeview-divider-item>\n            </ng-container>\n\n        </ng-container>\n\n    </ng-container>\n\n</div>" }]
+            args: [{ selector: 'treeview-collapsable-item', animations: gammaAnimations, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"treeview-item-wrapper\" [class.treeview-item-has-subtitle]=\"!!item.subtitle\"\n    [ngClass]=\"item.classes?.wrapper\" *ngIf=\"item.visibility\">\n\n    <div class=\"treeview-item\" id=\"kpiId-{{item.id}}\" [ngClass]=\"{'treeview-item-disabled': item.disabled}\"\n        [matTooltip]=\"item.tooltip || ''\" (click)=\"toggleCollapsable()\">\n\n        <!-- Icon -->\n        <ng-container *ngIf=\"item.icon\">\n            <mat-icon class=\"treeview-item-icon\" [ngClass]=\"item.classes?.icon\" [svgIcon]=\"item.icon\"></mat-icon>\n        </ng-container>\n\n        <!-- Title & Subtitle -->\n        <div class=\"treeview-item-title-wrapper\">\n            <div class=\"treeview-item-title\">\n                <span [ngClass]=\"item.classes?.name\">\n                    <i class=\"fa fa-pencil text-sky-800 mx-2 hover:text-sky-400 cursor-pointer\"\n                        (click)=\"getEditTreeData(item)\" *ngIf=\"isEditIcon\"></i> {{item.title}}\n                </span>\n            </div>\n        </div>\n\n        <!-- Badge -->\n       \n\n        <!-- Arrow -->\n        <mat-icon class=\"treeview-item-arrow icon-size-4\" [svgIcon]=\"'heroicons_solid:chevron-right'\"></mat-icon>\n\n    </div>\n\n</div>\n\n<div class=\"treeview-item-children\" *ngIf=\"!isCollapsed\" @expandCollapse>\n\n    <ng-container *ngFor=\"let item of item.children; trackBy: trackByFn\">\n\n        <!-- Skip the hidden items -->\n        <ng-container *ngIf=\"(item.hidden && !item.hidden(item)) || !item.hidden\">\n\n            <!-- Basic -->\n            <ng-container *ngIf=\"item.tagType == 'child'\">\n                <treeview-basic-item [item]=\"item\" [name]=\"name\" [isEditIcon]=\"isEditIcon\"\n                    (editableKpiBasicData)=\"getKpiEditKpiBasicData($event)\"\n                    [internalRoute]=\"internalRoute\"></treeview-basic-item>\n            </ng-container>\n\n            <!-- Collapsable -->\n            <ng-container *ngIf=\"item.tagType == 'parent'\">\n                <treeview-collapsable-item [item]=\"item\" [name]=\"name\" [isEditIcon]=\"isEditIcon\"\n                    (editableKpiData)=\"getKpiEditKpiData($event)\" [internalRoute]=\"internalRoute\"\n                    [autoCollapse]=\"autoCollapse\" [treeId]=\"treeId\">\n                </treeview-collapsable-item>\n            </ng-container>\n\n        </ng-container>\n\n    </ng-container>\n\n</div>" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i2.Router }, { type: TreeviewSharedService }]; }, propDecorators: { autoCollapse: [{
                 type: Input
             }], item: [{
@@ -17214,7 +17236,7 @@ class TreeviewComponent {
         this.editableKpiData = new EventEmitter();
     }
     ngOnInit() {
-        console.log(this.navigation);
+        console.log(this.navigation, 'kpi tree');
         this._treeviewService.onCollapsableItemCollapsed
             .pipe(takeUntil(this._unsubscribeAll))
             .subscribe((item) => {
@@ -17227,7 +17249,6 @@ class TreeviewComponent {
         });
         if (this.navigation != undefined) {
             this._treeviewservice.getKpiList(this.navigation);
-            this.getKpiName(this.navigation, 'kpi');
         }
     }
     ngOnDestroy() {
@@ -17281,10 +17302,10 @@ class TreeviewComponent {
     }
 }
 TreeviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TreeviewComponent, deps: [{ token: i2.Router }, { token: i2$1.ScrollStrategyOptions }, { token: CreateKpIService }, { token: i0.ChangeDetectorRef }, { token: i4$2.ViewportScroller }, { token: TreeviewSharedService }], target: i0.ɵɵFactoryTarget.Component });
-TreeviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TreeviewComponent, selector: "treeview", inputs: { autoCollapse: "autoCollapse", inner: "inner", navigation: "navigation", opened: "opened", isEditIcon: "isEditIcon", isSearchBox: "isSearchBox", transparentOverlay: "transparentOverlay", treeListForSearchBox: "treeListForSearchBox", name: "name", openTreeId: "openTreeId", routeKey: "routeKey" }, outputs: { editableKpiData: "editableKpiData" }, ngImport: i0, template: "<div class=\"treeview-wrapper\">\n    <div class=\"mx-3 my-4\" *ngIf=\"isSearchBox\">\n        <dx-select-box [items]=\"treeListForSearchBox\" [searchEnabled]=\"true\" valueExpr=\"kpiId\" displayExpr=\"name\"\n            [placeholder]=\"'Search KPI'\" (onValueChanged)=\"selectedKpiNameFromSearchKpi($event)\">\n        </dx-select-box>\n    </div>\n\n    <!-- Content -->\n    <div class=\"treeview-content\" fuseScrollbar #navigationContent>\n\n        <!-- Items -->\n        <ng-container *ngFor=\"let item of navigation;\">\n\n            <!-- Skip the hidden items -->\n            <ng-container *ngIf=\"(item.hidden && !item.hidden(item)) || !item.hidden\">\n\n                <!-- Basic -->\n                <ng-container *ngIf=\"item.tag_type === 'child'\">\n                    <treeview-basic-item [item]=\"item\" [name]=\"name\" [isEditIcon]=\"isEditIcon\"\n                        (editableKpiBasicData)=\"getBasicEditKpiData($event)\" [internalRoute]=\"routeKey\"\n                        [treeId]=\"openTreeId\">\n                    </treeview-basic-item>\n                </ng-container>\n\n                <!-- Collapsable -->\n                <ng-container *ngIf=\"item.tag_type === 'parent'\">\n                    <treeview-collapsable-item [item]=\"item\" [name]=\"name\" [isEditIcon]=\"isEditIcon\"\n                        (editableKpiData)=\"getEditKpiData($event)\" [autoCollapse]=\"autoCollapse\" [treeId]=\"openTreeId\"\n                        [internalRoute]=\"routeKey\">\n                    </treeview-collapsable-item>\n                </ng-container>\n\n                <!-- Divider -->\n                <ng-container *ngIf=\"item.tag_type === 'divider'\">\n                    <treeview-divider-item [item]=\"item\" [name]=\"name\">\n                    </treeview-divider-item>\n                </ng-container>\n\n\n            </ng-container>\n\n        </ng-container>\n\n    </div>\n\n\n\n</div>", styles: [":root{--treeview-width: 480px}treeview{position:sticky;display:flex;flex-direction:column;flex:1 0 auto;top:0;width:var(--treeview-width);min-width:var(--treeview-width);max-width:var(--treeview-width);height:100%;min-height:67vh;max-height:67vh;z-index:200}treeview.treeview-animations-enabled{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:visibility,margin-left,margin-right,transform,width,max-width,min-width}treeview.treeview-animations-enabled .treeview-wrapper{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:width,max-width,min-width}treeview.treeview-mode-over{position:fixed;top:0;bottom:0}treeview.treeview-position-left.treeview-mode-side{margin-left:calc(var(--treeview-width) * -1)}treeview.treeview-position-left.treeview-mode-side.treeview-opened{margin-left:0}treeview.treeview-position-left.treeview-mode-over{left:0;transform:translate3d(-100%,0,0)}treeview.treeview-position-left.treeview-mode-over.treeview-opened{transform:translateZ(0)}treeview.treeview-position-left .treeview-wrapper{left:0}treeview.treeview-position-right.treeview-mode-side{margin-right:calc(var(--treeview-width) * -1)}treeview.treeview-position-right.treeview-mode-side.treeview-opened{margin-right:0}treeview.treeview-position-right.treeview-mode-over{right:0;transform:translate3d(100%,0,0)}treeview.treeview-position-right.treeview-mode-over.treeview-opened{transform:translateZ(0)}treeview.treeview-position-right .treeview-wrapper{right:0}treeview.treeview-inner{position:relative;width:auto;min-width:0;max-width:none;height:auto;min-height:0;max-height:none;box-shadow:none}treeview.treeview-inner .treeview-wrapper{position:relative;overflow:visible;height:auto}treeview.treeview-inner .treeview-wrapper .treeview-content{overflow:visible!important}treeview .treeview-wrapper{position:absolute;display:flex;flex:1 1 auto;flex-direction:column;top:0;bottom:0;width:36rem;overflow:hidden;z-index:10;background:inherit}treeview .treeview-wrapper .treeview-content{flex:1 1 auto;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}treeview .treeview-wrapper .treeview-content>treeview-divider-item{margin:24px 0}treeview .treeview-wrapper .treeview-content>treeview-group-item{margin-top:24px}treeview .treeview-aside-wrapper{position:absolute;display:flex;flex:1 1 auto;flex-direction:column;top:0;bottom:0;left:var(--treeview-width);width:var(--treeview-width);height:100%;z-index:5;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;transition-duration:.4s;transition-property:left,right;transition-timing-function:cubic-bezier(.25,.8,.25,1);background:inherit}treeview .treeview-aside-wrapper>treeview-aside-item{padding:24px 0}treeview .treeview-aside-wrapper>treeview-aside-item>.treeview-item-wrapper{display:none!important}treeview.treeview-position-right .treeview-aside-wrapper{left:auto;right:var(--treeview-width)}treeview treeview-aside-item,treeview treeview-basic-item,treeview treeview-collapsable-item,treeview treeview-divider-item,treeview treeview-group-item,treeview treeview-spacer-item{display:flex;flex-direction:column;flex:1 0 auto;-webkit-user-select:none;user-select:none}treeview treeview-aside-item .treeview-item-wrapper .treeview-item,treeview treeview-basic-item .treeview-item-wrapper .treeview-item,treeview treeview-collapsable-item .treeview-item-wrapper .treeview-item,treeview treeview-divider-item .treeview-item-wrapper .treeview-item,treeview treeview-group-item .treeview-item-wrapper .treeview-item,treeview treeview-spacer-item .treeview-item-wrapper .treeview-item{position:relative;display:flex;align-items:center;justify-content:flex-start;padding:10px 16px;font-size:13px;font-weight:500;line-height:20px;text-decoration:none;border-radius:6px}treeview treeview-aside-item .treeview-item-wrapper .treeview-item.treeview-item-disabled,treeview treeview-basic-item .treeview-item-wrapper .treeview-item.treeview-item-disabled,treeview treeview-collapsable-item .treeview-item-wrapper .treeview-item.treeview-item-disabled,treeview treeview-divider-item .treeview-item-wrapper .treeview-item.treeview-item-disabled,treeview treeview-group-item .treeview-item-wrapper .treeview-item.treeview-item-disabled,treeview treeview-spacer-item .treeview-item-wrapper .treeview-item.treeview-item-disabled{cursor:default;opacity:.4}treeview treeview-aside-item .treeview-item-wrapper .treeview-item .treeview-item-icon,treeview treeview-basic-item .treeview-item-wrapper .treeview-item .treeview-item-icon,treeview treeview-collapsable-item .treeview-item-wrapper .treeview-item .treeview-item-icon,treeview treeview-divider-item .treeview-item-wrapper .treeview-item .treeview-item-icon,treeview treeview-group-item .treeview-item-wrapper .treeview-item .treeview-item-icon,treeview treeview-spacer-item .treeview-item-wrapper .treeview-item .treeview-item-icon{margin-right:16px}treeview treeview-aside-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper .treeview-item-subtitle,treeview treeview-basic-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper .treeview-item-subtitle,treeview treeview-collapsable-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper .treeview-item-subtitle,treeview treeview-divider-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper .treeview-item-subtitle,treeview treeview-group-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper .treeview-item-subtitle,treeview treeview-spacer-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper .treeview-item-subtitle{font-size:11px;line-height:1.5}treeview treeview-aside-item .treeview-item-wrapper .treeview-item .treeview-item-badge,treeview treeview-basic-item .treeview-item-wrapper .treeview-item .treeview-item-badge,treeview treeview-collapsable-item .treeview-item-wrapper .treeview-item .treeview-item-badge,treeview treeview-divider-item .treeview-item-wrapper .treeview-item .treeview-item-badge,treeview treeview-group-item .treeview-item-wrapper .treeview-item .treeview-item-badge,treeview treeview-spacer-item .treeview-item-wrapper .treeview-item .treeview-item-badge{margin-left:auto}treeview treeview-aside-item .treeview-item-wrapper .treeview-item .treeview-item-badge .treeview-item-badge-content,treeview treeview-basic-item .treeview-item-wrapper .treeview-item .treeview-item-badge .treeview-item-badge-content,treeview treeview-collapsable-item .treeview-item-wrapper .treeview-item .treeview-item-badge .treeview-item-badge-content,treeview treeview-divider-item .treeview-item-wrapper .treeview-item .treeview-item-badge .treeview-item-badge-content,treeview treeview-group-item .treeview-item-wrapper .treeview-item .treeview-item-badge .treeview-item-badge-content,treeview treeview-spacer-item .treeview-item-wrapper .treeview-item .treeview-item-badge .treeview-item-badge-content{display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;white-space:nowrap;height:20px}treeview treeview-aside-item>.treeview-item-wrapper,treeview treeview-basic-item>.treeview-item-wrapper,treeview treeview-collapsable-item>.treeview-item-wrapper,treeview treeview-group-item>.treeview-item-wrapper{margin:0 12px}treeview treeview-aside-item,treeview treeview-basic-item,treeview treeview-collapsable-item{margin-bottom:4px}treeview treeview-aside-item .treeview-item,treeview treeview-basic-item .treeview-item,treeview treeview-collapsable-item .treeview-item{cursor:pointer}treeview treeview-collapsable-item>.treeview-item-wrapper .treeview-item .treeview-item-badge+.treeview-item-arrow{margin-left:8px}treeview treeview-collapsable-item>.treeview-item-wrapper .treeview-item .treeview-item-arrow{height:20px;line-height:20px;margin-left:auto;transition:transform .3s cubic-bezier(.25,.8,.25,1),color 375ms cubic-bezier(.25,.8,.25,1)}treeview treeview-collapsable-item.treeview-item-expanded>.treeview-item-wrapper .treeview-item .treeview-item-arrow{transform:rotate(90deg)}treeview treeview-collapsable-item>.treeview-item-children>*:first-child{margin-top:6px}treeview treeview-collapsable-item>.treeview-item-children>*:last-child{padding-bottom:6px}treeview treeview-collapsable-item>.treeview-item-children>*:last-child>.treeview-item-children>*:last-child{padding-bottom:0}treeview treeview-collapsable-item>.treeview-item-children .treeview-item{padding:10px 16px}treeview treeview-collapsable-item .treeview-item-children{overflow:hidden}treeview treeview-collapsable-item .treeview-item-children .treeview-item{padding-left:56px}treeview treeview-collapsable-item .treeview-item-children .treeview-item-children .treeview-item{padding-left:72px}treeview treeview-collapsable-item .treeview-item-children .treeview-item-children .treeview-item-children .treeview-item{padding-left:88px}treeview treeview-collapsable-item .treeview-item-children .treeview-item-children .treeview-item-children .treeview-item-children .treeview-item{padding-left:104px}treeview treeview-divider-item{margin:12px 0}treeview treeview-divider-item .treeview-item-wrapper{height:1px;box-shadow:0 1px}treeview treeview-group-item>.treeview-item-wrapper .treeview-item .treeview-item-badge,treeview treeview-group-item>.treeview-item-wrapper .treeview-item .treeview-item-icon{display:none!important}treeview treeview-group-item>.treeview-item-wrapper .treeview-item .treeview-item-title-wrapper .treeview-item-title{font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase}treeview treeview-spacer-item{margin:6px 0}.treeview-overlay{position:absolute;inset:0;z-index:170;opacity:0;background-color:#0009}.treeview-overlay+.treeview-aside-overlay{background-color:transparent}.treeview-aside-overlay{position:absolute;inset:0;z-index:169;opacity:0;background-color:#0000004d}treeview-aside-item .treeview-item-wrapper .treeview-item,treeview-basic-item .treeview-item-wrapper .treeview-item,treeview-collapsable-item .treeview-item-wrapper .treeview-item,treeview-group-item .treeview-item-wrapper .treeview-item{color:currentColor}treeview-aside-item .treeview-item-wrapper .treeview-item .treeview-item-icon,treeview-basic-item .treeview-item-wrapper .treeview-item .treeview-item-icon,treeview-collapsable-item .treeview-item-wrapper .treeview-item .treeview-item-icon,treeview-group-item .treeview-item-wrapper .treeview-item .treeview-item-icon{@apply text-current opacity-60;}treeview-aside-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper .treeview-item-title,treeview-basic-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper .treeview-item-title,treeview-collapsable-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper .treeview-item-title,treeview-group-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper .treeview-item-title{@apply text-current opacity-80;}treeview-aside-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper .treeview-item-subtitle,treeview-basic-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper .treeview-item-subtitle,treeview-collapsable-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper .treeview-item-subtitle,treeview-group-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper .treeview-item-subtitle{@apply text-current opacity-50;}treeview-aside-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active,treeview-aside-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active-forced,treeview-basic-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active,treeview-basic-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active-forced,treeview-collapsable-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active,treeview-collapsable-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active-forced{@apply bg-gray-800 bg-opacity-5 dark:bg-white dark:bg-opacity-12;}treeview-aside-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active .treeview-item-icon,treeview-aside-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active-forced .treeview-item-icon,treeview-basic-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active .treeview-item-icon,treeview-basic-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active-forced .treeview-item-icon,treeview-collapsable-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active .treeview-item-icon,treeview-collapsable-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active-forced .treeview-item-icon{@apply opacity-100;}treeview-aside-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active .treeview-item-title,treeview-aside-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active-forced .treeview-item-title,treeview-basic-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active .treeview-item-title,treeview-basic-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active-forced .treeview-item-title,treeview-collapsable-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active .treeview-item-title,treeview-collapsable-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active-forced .treeview-item-title{@apply opacity-100;}treeview-aside-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active .treeview-item-subtitle,treeview-aside-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active-forced .treeview-item-subtitle,treeview-basic-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active .treeview-item-subtitle,treeview-basic-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active-forced .treeview-item-subtitle,treeview-collapsable-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active .treeview-item-subtitle,treeview-collapsable-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active-forced .treeview-item-subtitle{@apply opacity-100;}treeview-aside-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-active-forced):not(.treeview-item-active):not(.treeview-item-disabled):hover,treeview-basic-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-active-forced):not(.treeview-item-active):not(.treeview-item-disabled):hover,treeview-collapsable-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-active-forced):not(.treeview-item-active):not(.treeview-item-disabled):hover{@apply bg-gray-800 bg-opacity-5 dark:bg-white dark:bg-opacity-12;}treeview-aside-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-active-forced):not(.treeview-item-active):not(.treeview-item-disabled):hover .treeview-item-icon,treeview-basic-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-active-forced):not(.treeview-item-active):not(.treeview-item-disabled):hover .treeview-item-icon,treeview-collapsable-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-active-forced):not(.treeview-item-active):not(.treeview-item-disabled):hover .treeview-item-icon{@apply opacity-100;}treeview-aside-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-active-forced):not(.treeview-item-active):not(.treeview-item-disabled):hover .treeview-item-title,treeview-aside-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-active-forced):not(.treeview-item-active):not(.treeview-item-disabled):hover .treeview-item-arrow,treeview-basic-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-active-forced):not(.treeview-item-active):not(.treeview-item-disabled):hover .treeview-item-title,treeview-basic-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-active-forced):not(.treeview-item-active):not(.treeview-item-disabled):hover .treeview-item-arrow,treeview-collapsable-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-active-forced):not(.treeview-item-active):not(.treeview-item-disabled):hover .treeview-item-title,treeview-collapsable-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-active-forced):not(.treeview-item-active):not(.treeview-item-disabled):hover .treeview-item-arrow{@apply opacity-100;}treeview-aside-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-active-forced):not(.treeview-item-active):not(.treeview-item-disabled):hover .treeview-item-subtitle,treeview-basic-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-active-forced):not(.treeview-item-active):not(.treeview-item-disabled):hover .treeview-item-subtitle,treeview-collapsable-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-active-forced):not(.treeview-item-active):not(.treeview-item-disabled):hover .treeview-item-subtitle{@apply opacity-100;}treeview-collapsable-item.treeview-item-expanded>.treeview-item-wrapper .treeview-item .treeview-item-icon{@apply opacity-100;}treeview-collapsable-item.treeview-item-expanded>.treeview-item-wrapper .treeview-item .treeview-item-title,treeview-collapsable-item.treeview-item-expanded>.treeview-item-wrapper .treeview-item .treeview-item-arrow{@apply opacity-100;}treeview-collapsable-item.treeview-item-expanded>.treeview-item-wrapper .treeview-item .treeview-item-subtitle{@apply opacity-100;}treeview-group-item>.treeview-item-wrapper .treeview-item .treeview-item-title-wrapper .treeview-item-title{@apply opacity-100 text-primary-600 dark:text-primary-400;}:root{--treeview-compact-width: 112px}treeview.treeview-appearance-compact{width:var(--treeview-compact-width);min-width:var(--treeview-compact-width);max-width:var(--treeview-compact-width)}treeview.treeview-appearance-compact.treeview-position-left.treeview-mode-side{margin-left:calc(var(--treeview-compact-width) * -1)}treeview.treeview-appearance-compact.treeview-position-left.treeview-opened{margin-left:0}treeview.treeview-appearance-compact.treeview-position-right.treeview-mode-side{margin-right:calc(var(--treeview-compact-width) * -1)}treeview.treeview-appearance-compact.treeview-position-right.treeview-opened{margin-right:0}treeview.treeview-appearance-compact.treeview-position-right .treeview-aside-wrapper{left:auto;right:var(--treeview-compact-width)}treeview.treeview-appearance-compact .treeview-wrapper .treeview-content>treeview-aside-item .treeview-item-wrapper,treeview.treeview-appearance-compact .treeview-wrapper .treeview-content>treeview-basic-item .treeview-item-wrapper{margin:4px 8px 0}treeview.treeview-appearance-compact .treeview-wrapper .treeview-content>treeview-aside-item .treeview-item-wrapper .treeview-item,treeview.treeview-appearance-compact .treeview-wrapper .treeview-content>treeview-basic-item .treeview-item-wrapper .treeview-item{flex-direction:column;justify-content:center;padding:12px;border-radius:6px}treeview.treeview-appearance-compact .treeview-wrapper .treeview-content>treeview-aside-item .treeview-item-wrapper .treeview-item .treeview-item-icon,treeview.treeview-appearance-compact .treeview-wrapper .treeview-content>treeview-basic-item .treeview-item-wrapper .treeview-item .treeview-item-icon{margin-right:0}treeview.treeview-appearance-compact .treeview-wrapper .treeview-content>treeview-aside-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper,treeview.treeview-appearance-compact .treeview-wrapper .treeview-content>treeview-basic-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper{margin-top:8px}treeview.treeview-appearance-compact .treeview-wrapper .treeview-content>treeview-aside-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper .treeview-item-title,treeview.treeview-appearance-compact .treeview-wrapper .treeview-content>treeview-basic-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper .treeview-item-title{font-size:12px;font-weight:500;text-align:center;line-height:16px}treeview.treeview-appearance-compact .treeview-wrapper .treeview-content>treeview-aside-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper .treeview-item-subtitle,treeview.treeview-appearance-compact .treeview-wrapper .treeview-content>treeview-basic-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper .treeview-item-subtitle{display:none!important}treeview.treeview-appearance-compact .treeview-wrapper .treeview-content>treeview-aside-item .treeview-item-wrapper .treeview-item .treeview-item-badge,treeview.treeview-appearance-compact .treeview-wrapper .treeview-content>treeview-basic-item .treeview-item-wrapper .treeview-item .treeview-item-badge{position:absolute;top:12px;left:64px}treeview.treeview-appearance-compact .treeview-wrapper .treeview-content>treeview-aside-item>treeview-collapsable-item,treeview.treeview-appearance-compact .treeview-wrapper .treeview-content>treeview-basic-item>treeview-collapsable-item{display:none}treeview.treeview-appearance-compact .treeview-wrapper .treeview-content>treeview-aside-item>treeview-group-item>.treeview-item-wrapper,treeview.treeview-appearance-compact .treeview-wrapper .treeview-content>treeview-basic-item>treeview-group-item>.treeview-item-wrapper{display:none}treeview.treeview-appearance-compact .treeview-aside-wrapper{left:var(--treeview-compact-width)}:root{--treeview-width: 480px;--treeview-dense-width: 80px}treeview.treeview-appearance-dense:not(.treeview-mode-over){width:var(--treeview-dense-width);min-width:var(--treeview-dense-width);max-width:var(--treeview-dense-width)}treeview.treeview-appearance-dense:not(.treeview-mode-over).treeview-position-left.treeview-mode-side{margin-left:calc(var(--treeview-dense-width) * -1)}treeview.treeview-appearance-dense:not(.treeview-mode-over).treeview-position-left.treeview-opened{margin-left:0}treeview.treeview-appearance-dense:not(.treeview-mode-over).treeview-position-right.treeview-mode-side{margin-right:calc(var(--treeview-dense-width) * -1)}treeview.treeview-appearance-dense:not(.treeview-mode-over).treeview-position-right.treeview-opened{margin-right:0}treeview.treeview-appearance-dense:not(.treeview-mode-over).treeview-position-right .treeview-aside-wrapper{left:auto;right:var(--treeview-dense-width)}treeview.treeview-appearance-dense:not(.treeview-mode-over).treeview-position-right.treeview-hover .treeview-aside-wrapper{left:auto;right:var(--treeview-width)}treeview.treeview-appearance-dense .treeview-wrapper .treeview-content treeview-aside-item .treeview-item-wrapper .treeview-item,treeview.treeview-appearance-dense .treeview-wrapper .treeview-content treeview-basic-item .treeview-item-wrapper .treeview-item,treeview.treeview-appearance-dense .treeview-wrapper .treeview-content treeview-collapsable-item .treeview-item-wrapper .treeview-item,treeview.treeview-appearance-dense .treeview-wrapper .treeview-content treeview-group-item .treeview-item-wrapper .treeview-item{width:calc(var(--treeview-dense-width) - 24px);min-width:calc(var(--treeview-dense-width) - 24px);max-width:calc(var(--treeview-dense-width) - 24px)}treeview.treeview-appearance-dense .treeview-wrapper .treeview-content treeview-aside-item .treeview-item-wrapper .treeview-item .treeview-item-arrow,treeview.treeview-appearance-dense .treeview-wrapper .treeview-content treeview-aside-item .treeview-item-wrapper .treeview-item .treeview-item-badge,treeview.treeview-appearance-dense .treeview-wrapper .treeview-content treeview-aside-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper,treeview.treeview-appearance-dense .treeview-wrapper .treeview-content treeview-basic-item .treeview-item-wrapper .treeview-item .treeview-item-arrow,treeview.treeview-appearance-dense .treeview-wrapper .treeview-content treeview-basic-item .treeview-item-wrapper .treeview-item .treeview-item-badge,treeview.treeview-appearance-dense .treeview-wrapper .treeview-content treeview-basic-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper,treeview.treeview-appearance-dense .treeview-wrapper .treeview-content treeview-collapsable-item .treeview-item-wrapper .treeview-item .treeview-item-arrow,treeview.treeview-appearance-dense .treeview-wrapper .treeview-content treeview-collapsable-item .treeview-item-wrapper .treeview-item .treeview-item-badge,treeview.treeview-appearance-dense .treeview-wrapper .treeview-content treeview-collapsable-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper,treeview.treeview-appearance-dense .treeview-wrapper .treeview-content treeview-group-item .treeview-item-wrapper .treeview-item .treeview-item-arrow,treeview.treeview-appearance-dense .treeview-wrapper .treeview-content treeview-group-item .treeview-item-wrapper .treeview-item .treeview-item-badge,treeview.treeview-appearance-dense .treeview-wrapper .treeview-content treeview-group-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper{transition:opacity .4s cubic-bezier(.25,.8,.25,1)}treeview.treeview-appearance-dense .treeview-wrapper .treeview-content treeview-group-item:first-of-type{margin-top:0}treeview.treeview-appearance-dense:not(.treeview-hover):not(.treeview-mode-over) .treeview-wrapper .treeview-content .treeview-item-wrapper .treeview-item{padding:10px 16px}treeview.treeview-appearance-dense:not(.treeview-hover):not(.treeview-mode-over) .treeview-wrapper .treeview-content .treeview-item-wrapper .treeview-item .treeview-item-arrow,treeview.treeview-appearance-dense:not(.treeview-hover):not(.treeview-mode-over) .treeview-wrapper .treeview-content .treeview-item-wrapper .treeview-item .treeview-item-badge,treeview.treeview-appearance-dense:not(.treeview-hover):not(.treeview-mode-over) .treeview-wrapper .treeview-content .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper{white-space:nowrap;opacity:0}treeview.treeview-appearance-dense:not(.treeview-hover):not(.treeview-mode-over) .treeview-wrapper .treeview-content treeview-collapsable-item .treeview-item-children{display:none}treeview.treeview-appearance-dense:not(.treeview-hover):not(.treeview-mode-over) .treeview-wrapper .treeview-content treeview-group-item>.treeview-item-wrapper .treeview-item:before{content:\"\";position:absolute;top:20px;width:23px;border-top-width:2px}treeview.treeview-appearance-dense .treeview-aside-wrapper{left:var(--treeview-dense-width)}treeview.treeview-appearance-dense.treeview-hover .treeview-wrapper{width:var(--treeview-width)}treeview.treeview-appearance-dense.treeview-hover .treeview-wrapper .treeview-content .treeview-item-wrapper .treeview-item{width:calc(var(--treeview-width) - 24px);min-width:calc(var(--treeview-width) - 24px);max-width:calc(var(--treeview-width) - 24px)}treeview.treeview-appearance-dense.treeview-hover .treeview-wrapper .treeview-content .treeview-item-wrapper .treeview-item .treeview-item-arrow,treeview.treeview-appearance-dense.treeview-hover .treeview-wrapper .treeview-content .treeview-item-wrapper .treeview-item .treeview-item-badge,treeview.treeview-appearance-dense.treeview-hover .treeview-wrapper .treeview-content .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper{white-space:nowrap;animation:removeWhiteSpaceNoWrap 1ms linear .35s;animation-fill-mode:forwards}treeview.treeview-appearance-dense.treeview-hover .treeview-aside-wrapper{left:var(--treeview-width)}@keyframes removeWhiteSpaceNoWrap{0%{white-space:nowrap}99%{white-space:nowrap}to{white-space:normal}}:root{--treeview-thin-width: 80px}treeview.treeview-appearance-thin{width:var(--treeview-thin-width);min-width:var(--treeview-thin-width);max-width:var(--treeview-thin-width)}treeview.treeview-appearance-thin.treeview-position-left.treeview-mode-side{margin-left:calc(var(--treeview-thin-width) * -1)}treeview.treeview-appearance-thin.treeview-position-left.treeview-opened{margin-left:0}treeview.treeview-appearance-thin.treeview-position-right.treeview-mode-side{margin-right:calc(var(--treeview-thin-width) * -1)}treeview.treeview-appearance-thin.treeview-position-right.treeview-opened{margin-right:0}treeview.treeview-appearance-thin.treeview-position-right .treeview-aside-wrapper{left:auto;right:var(--treeview-thin-width)}treeview.treeview-appearance-thin .treeview-wrapper .treeview-content>treeview-aside-item,treeview.treeview-appearance-thin .treeview-wrapper .treeview-content>treeview-basic-item{flex-direction:column;justify-content:center;height:64px;min-height:64px;max-height:64px;padding:0 16px}treeview.treeview-appearance-thin .treeview-wrapper .treeview-content>treeview-aside-item .treeview-item-wrapper,treeview.treeview-appearance-thin .treeview-wrapper .treeview-content>treeview-basic-item .treeview-item-wrapper{display:flex;align-items:center;justify-content:center}treeview.treeview-appearance-thin .treeview-wrapper .treeview-content>treeview-aside-item .treeview-item-wrapper .treeview-item,treeview.treeview-appearance-thin .treeview-wrapper .treeview-content>treeview-basic-item .treeview-item-wrapper .treeview-item{justify-content:center;padding:12px;border-radius:4px}treeview.treeview-appearance-thin .treeview-wrapper .treeview-content>treeview-aside-item .treeview-item-wrapper .treeview-item .treeview-item-icon,treeview.treeview-appearance-thin .treeview-wrapper .treeview-content>treeview-basic-item .treeview-item-wrapper .treeview-item .treeview-item-icon{margin:0}treeview.treeview-appearance-thin .treeview-wrapper .treeview-content>treeview-aside-item .treeview-item-wrapper .treeview-item .treeview-item-arrow,treeview.treeview-appearance-thin .treeview-wrapper .treeview-content>treeview-aside-item .treeview-item-wrapper .treeview-item .treeview-item-badge-content,treeview.treeview-appearance-thin .treeview-wrapper .treeview-content>treeview-aside-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper,treeview.treeview-appearance-thin .treeview-wrapper .treeview-content>treeview-basic-item .treeview-item-wrapper .treeview-item .treeview-item-arrow,treeview.treeview-appearance-thin .treeview-wrapper .treeview-content>treeview-basic-item .treeview-item-wrapper .treeview-item .treeview-item-badge-content,treeview.treeview-appearance-thin .treeview-wrapper .treeview-content>treeview-basic-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper{display:none}treeview.treeview-appearance-thin .treeview-wrapper .treeview-content>treeview-collapsable-item{display:none}treeview.treeview-appearance-thin .treeview-wrapper .treeview-content>treeview-group-item>.treeview-item-wrapper{display:none}treeview.treeview-appearance-thin .treeview-aside-wrapper{left:var(--treeview-thin-width)}\n"], dependencies: [{ kind: "directive", type: i4$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: TreeViewBasicItemComponent, selector: "treeview-basic-item", inputs: ["item", "name", "internalRoute", "isEditIcon", "treeId"], outputs: ["editableKpiBasicData"] }, { kind: "component", type: TreeViewCollapsableItemComponent, selector: "treeview-collapsable-item", inputs: ["autoCollapse", "item", "name", "treeId", "internalRoute", "isEditIcon"], outputs: ["editableKpiData"] }, { kind: "component", type: TreeViewDividerItemComponent, selector: "treeview-divider-item", inputs: ["item", "name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+TreeviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TreeviewComponent, selector: "treeview", inputs: { autoCollapse: "autoCollapse", inner: "inner", navigation: "navigation", opened: "opened", isEditIcon: "isEditIcon", isSearchBox: "isSearchBox", transparentOverlay: "transparentOverlay", treeListForSearchBox: "treeListForSearchBox", name: "name", openTreeId: "openTreeId", routeKey: "routeKey" }, outputs: { editableKpiData: "editableKpiData" }, ngImport: i0, template: "<div class=\"treeview-wrapper\">\n    <div class=\"mx-3 my-4\" *ngIf=\"isSearchBox\">\n        <dx-select-box [items]=\"treeListForSearchBox\" [searchEnabled]=\"true\" valueExpr=\"kpiId\" displayExpr=\"name\"\n            [placeholder]=\"'Search KPI'\" (onValueChanged)=\"selectedKpiNameFromSearchKpi($event)\">\n        </dx-select-box>\n    </div>\n\n    <!-- Content -->\n    <div class=\"treeview-content\" fuseScrollbar #navigationContent>\n\n        <!-- Items -->\n        <ng-container *ngFor=\"let item of navigation;\">\n\n            <!-- Skip the hidden items -->\n            <ng-container *ngIf=\"(item.hidden && !item.hidden(item)) || !item.hidden\">\n\n                <!-- Basic -->\n                <ng-container *ngIf=\"item.tagType == 'child'\">\n                    <treeview-basic-item [item]=\"item\" [name]=\"name\" [isEditIcon]=\"isEditIcon\"\n                        (editableKpiBasicData)=\"getBasicEditKpiData($event)\" [internalRoute]=\"routeKey\"\n                        [treeId]=\"openTreeId\">\n                    </treeview-basic-item>\n                </ng-container>\n\n                <!-- Collapsable -->\n                <ng-container *ngIf=\"item.tagType == 'parent'\">\n                    <treeview-collapsable-item [item]=\"item\" [name]=\"name\" [isEditIcon]=\"isEditIcon\"\n                        (editableKpiData)=\"getEditKpiData($event)\" [autoCollapse]=\"autoCollapse\" [treeId]=\"openTreeId\"\n                        [internalRoute]=\"routeKey\">\n                    </treeview-collapsable-item>\n                </ng-container>\n\n\n            </ng-container>\n\n        </ng-container>\n\n    </div>\n\n\n\n</div>", styles: [":root{--treeview-width: 480px}treeview{position:sticky;display:flex;flex-direction:column;flex:1 0 auto;top:0;width:var(--treeview-width);min-width:var(--treeview-width);max-width:var(--treeview-width);height:100%;min-height:67vh;max-height:67vh;z-index:200}treeview.treeview-animations-enabled{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:visibility,margin-left,margin-right,transform,width,max-width,min-width}treeview.treeview-animations-enabled .treeview-wrapper{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:width,max-width,min-width}treeview.treeview-mode-over{position:fixed;top:0;bottom:0}treeview.treeview-position-left.treeview-mode-side{margin-left:calc(var(--treeview-width) * -1)}treeview.treeview-position-left.treeview-mode-side.treeview-opened{margin-left:0}treeview.treeview-position-left.treeview-mode-over{left:0;transform:translate3d(-100%,0,0)}treeview.treeview-position-left.treeview-mode-over.treeview-opened{transform:translateZ(0)}treeview.treeview-position-left .treeview-wrapper{left:0}treeview.treeview-position-right.treeview-mode-side{margin-right:calc(var(--treeview-width) * -1)}treeview.treeview-position-right.treeview-mode-side.treeview-opened{margin-right:0}treeview.treeview-position-right.treeview-mode-over{right:0;transform:translate3d(100%,0,0)}treeview.treeview-position-right.treeview-mode-over.treeview-opened{transform:translateZ(0)}treeview.treeview-position-right .treeview-wrapper{right:0}treeview.treeview-inner{position:relative;width:auto;min-width:0;max-width:none;height:auto;min-height:0;max-height:none;box-shadow:none}treeview.treeview-inner .treeview-wrapper{position:relative;overflow:visible;height:auto}treeview.treeview-inner .treeview-wrapper .treeview-content{overflow:visible!important}treeview .treeview-wrapper{position:absolute;display:flex;flex:1 1 auto;flex-direction:column;top:0;bottom:0;width:36rem;overflow:hidden;z-index:10;background:inherit}treeview .treeview-wrapper .treeview-content{flex:1 1 auto;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}treeview .treeview-wrapper .treeview-content>treeview-divider-item{margin:24px 0}treeview .treeview-wrapper .treeview-content>treeview-group-item{margin-top:24px}treeview .treeview-aside-wrapper{position:absolute;display:flex;flex:1 1 auto;flex-direction:column;top:0;bottom:0;left:var(--treeview-width);width:var(--treeview-width);height:100%;z-index:5;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;transition-duration:.4s;transition-property:left,right;transition-timing-function:cubic-bezier(.25,.8,.25,1);background:inherit}treeview .treeview-aside-wrapper>treeview-aside-item{padding:24px 0}treeview .treeview-aside-wrapper>treeview-aside-item>.treeview-item-wrapper{display:none!important}treeview.treeview-position-right .treeview-aside-wrapper{left:auto;right:var(--treeview-width)}treeview treeview-aside-item,treeview treeview-basic-item,treeview treeview-collapsable-item,treeview treeview-divider-item,treeview treeview-group-item,treeview treeview-spacer-item{display:flex;flex-direction:column;flex:1 0 auto;-webkit-user-select:none;user-select:none}treeview treeview-aside-item .treeview-item-wrapper .treeview-item,treeview treeview-basic-item .treeview-item-wrapper .treeview-item,treeview treeview-collapsable-item .treeview-item-wrapper .treeview-item,treeview treeview-divider-item .treeview-item-wrapper .treeview-item,treeview treeview-group-item .treeview-item-wrapper .treeview-item,treeview treeview-spacer-item .treeview-item-wrapper .treeview-item{position:relative;display:flex;align-items:center;justify-content:flex-start;padding:10px 16px;font-size:13px;font-weight:500;line-height:20px;text-decoration:none;border-radius:6px}treeview treeview-aside-item .treeview-item-wrapper .treeview-item.treeview-item-disabled,treeview treeview-basic-item .treeview-item-wrapper .treeview-item.treeview-item-disabled,treeview treeview-collapsable-item .treeview-item-wrapper .treeview-item.treeview-item-disabled,treeview treeview-divider-item .treeview-item-wrapper .treeview-item.treeview-item-disabled,treeview treeview-group-item .treeview-item-wrapper .treeview-item.treeview-item-disabled,treeview treeview-spacer-item .treeview-item-wrapper .treeview-item.treeview-item-disabled{cursor:default;opacity:.4}treeview treeview-aside-item .treeview-item-wrapper .treeview-item .treeview-item-icon,treeview treeview-basic-item .treeview-item-wrapper .treeview-item .treeview-item-icon,treeview treeview-collapsable-item .treeview-item-wrapper .treeview-item .treeview-item-icon,treeview treeview-divider-item .treeview-item-wrapper .treeview-item .treeview-item-icon,treeview treeview-group-item .treeview-item-wrapper .treeview-item .treeview-item-icon,treeview treeview-spacer-item .treeview-item-wrapper .treeview-item .treeview-item-icon{margin-right:16px}treeview treeview-aside-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper .treeview-item-subtitle,treeview treeview-basic-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper .treeview-item-subtitle,treeview treeview-collapsable-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper .treeview-item-subtitle,treeview treeview-divider-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper .treeview-item-subtitle,treeview treeview-group-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper .treeview-item-subtitle,treeview treeview-spacer-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper .treeview-item-subtitle{font-size:11px;line-height:1.5}treeview treeview-aside-item .treeview-item-wrapper .treeview-item .treeview-item-badge,treeview treeview-basic-item .treeview-item-wrapper .treeview-item .treeview-item-badge,treeview treeview-collapsable-item .treeview-item-wrapper .treeview-item .treeview-item-badge,treeview treeview-divider-item .treeview-item-wrapper .treeview-item .treeview-item-badge,treeview treeview-group-item .treeview-item-wrapper .treeview-item .treeview-item-badge,treeview treeview-spacer-item .treeview-item-wrapper .treeview-item .treeview-item-badge{margin-left:auto}treeview treeview-aside-item .treeview-item-wrapper .treeview-item .treeview-item-badge .treeview-item-badge-content,treeview treeview-basic-item .treeview-item-wrapper .treeview-item .treeview-item-badge .treeview-item-badge-content,treeview treeview-collapsable-item .treeview-item-wrapper .treeview-item .treeview-item-badge .treeview-item-badge-content,treeview treeview-divider-item .treeview-item-wrapper .treeview-item .treeview-item-badge .treeview-item-badge-content,treeview treeview-group-item .treeview-item-wrapper .treeview-item .treeview-item-badge .treeview-item-badge-content,treeview treeview-spacer-item .treeview-item-wrapper .treeview-item .treeview-item-badge .treeview-item-badge-content{display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;white-space:nowrap;height:20px}treeview treeview-aside-item>.treeview-item-wrapper,treeview treeview-basic-item>.treeview-item-wrapper,treeview treeview-collapsable-item>.treeview-item-wrapper,treeview treeview-group-item>.treeview-item-wrapper{margin:0 12px}treeview treeview-aside-item,treeview treeview-basic-item,treeview treeview-collapsable-item{margin-bottom:4px}treeview treeview-aside-item .treeview-item,treeview treeview-basic-item .treeview-item,treeview treeview-collapsable-item .treeview-item{cursor:pointer}treeview treeview-collapsable-item>.treeview-item-wrapper .treeview-item .treeview-item-badge+.treeview-item-arrow{margin-left:8px}treeview treeview-collapsable-item>.treeview-item-wrapper .treeview-item .treeview-item-arrow{height:20px;line-height:20px;margin-left:auto;transition:transform .3s cubic-bezier(.25,.8,.25,1),color 375ms cubic-bezier(.25,.8,.25,1)}treeview treeview-collapsable-item.treeview-item-expanded>.treeview-item-wrapper .treeview-item .treeview-item-arrow{transform:rotate(90deg)}treeview treeview-collapsable-item>.treeview-item-children>*:first-child{margin-top:6px}treeview treeview-collapsable-item>.treeview-item-children>*:last-child{padding-bottom:6px}treeview treeview-collapsable-item>.treeview-item-children>*:last-child>.treeview-item-children>*:last-child{padding-bottom:0}treeview treeview-collapsable-item>.treeview-item-children .treeview-item{padding:10px 16px}treeview treeview-collapsable-item .treeview-item-children{overflow:hidden}treeview treeview-collapsable-item .treeview-item-children .treeview-item{padding-left:56px}treeview treeview-collapsable-item .treeview-item-children .treeview-item-children .treeview-item{padding-left:72px}treeview treeview-collapsable-item .treeview-item-children .treeview-item-children .treeview-item-children .treeview-item{padding-left:88px}treeview treeview-collapsable-item .treeview-item-children .treeview-item-children .treeview-item-children .treeview-item-children .treeview-item{padding-left:104px}treeview treeview-divider-item{margin:12px 0}treeview treeview-divider-item .treeview-item-wrapper{height:1px;box-shadow:0 1px}treeview treeview-group-item>.treeview-item-wrapper .treeview-item .treeview-item-badge,treeview treeview-group-item>.treeview-item-wrapper .treeview-item .treeview-item-icon{display:none!important}treeview treeview-group-item>.treeview-item-wrapper .treeview-item .treeview-item-title-wrapper .treeview-item-title{font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase}treeview treeview-spacer-item{margin:6px 0}.treeview-overlay{position:absolute;inset:0;z-index:170;opacity:0;background-color:#0009}.treeview-overlay+.treeview-aside-overlay{background-color:transparent}.treeview-aside-overlay{position:absolute;inset:0;z-index:169;opacity:0;background-color:#0000004d}treeview-aside-item .treeview-item-wrapper .treeview-item,treeview-basic-item .treeview-item-wrapper .treeview-item,treeview-collapsable-item .treeview-item-wrapper .treeview-item,treeview-group-item .treeview-item-wrapper .treeview-item{color:currentColor}treeview-aside-item .treeview-item-wrapper .treeview-item .treeview-item-icon,treeview-basic-item .treeview-item-wrapper .treeview-item .treeview-item-icon,treeview-collapsable-item .treeview-item-wrapper .treeview-item .treeview-item-icon,treeview-group-item .treeview-item-wrapper .treeview-item .treeview-item-icon{@apply text-current opacity-60;}treeview-aside-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper .treeview-item-title,treeview-basic-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper .treeview-item-title,treeview-collapsable-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper .treeview-item-title,treeview-group-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper .treeview-item-title{@apply text-current opacity-80;}treeview-aside-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper .treeview-item-subtitle,treeview-basic-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper .treeview-item-subtitle,treeview-collapsable-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper .treeview-item-subtitle,treeview-group-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper .treeview-item-subtitle{@apply text-current opacity-50;}treeview-aside-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active,treeview-aside-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active-forced,treeview-basic-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active,treeview-basic-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active-forced,treeview-collapsable-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active,treeview-collapsable-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active-forced{@apply bg-gray-800 bg-opacity-5 dark:bg-white dark:bg-opacity-12;}treeview-aside-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active .treeview-item-icon,treeview-aside-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active-forced .treeview-item-icon,treeview-basic-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active .treeview-item-icon,treeview-basic-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active-forced .treeview-item-icon,treeview-collapsable-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active .treeview-item-icon,treeview-collapsable-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active-forced .treeview-item-icon{@apply opacity-100;}treeview-aside-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active .treeview-item-title,treeview-aside-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active-forced .treeview-item-title,treeview-basic-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active .treeview-item-title,treeview-basic-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active-forced .treeview-item-title,treeview-collapsable-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active .treeview-item-title,treeview-collapsable-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active-forced .treeview-item-title{@apply opacity-100;}treeview-aside-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active .treeview-item-subtitle,treeview-aside-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active-forced .treeview-item-subtitle,treeview-basic-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active .treeview-item-subtitle,treeview-basic-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active-forced .treeview-item-subtitle,treeview-collapsable-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active .treeview-item-subtitle,treeview-collapsable-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active-forced .treeview-item-subtitle{@apply opacity-100;}treeview-aside-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-active-forced):not(.treeview-item-active):not(.treeview-item-disabled):hover,treeview-basic-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-active-forced):not(.treeview-item-active):not(.treeview-item-disabled):hover,treeview-collapsable-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-active-forced):not(.treeview-item-active):not(.treeview-item-disabled):hover{@apply bg-gray-800 bg-opacity-5 dark:bg-white dark:bg-opacity-12;}treeview-aside-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-active-forced):not(.treeview-item-active):not(.treeview-item-disabled):hover .treeview-item-icon,treeview-basic-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-active-forced):not(.treeview-item-active):not(.treeview-item-disabled):hover .treeview-item-icon,treeview-collapsable-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-active-forced):not(.treeview-item-active):not(.treeview-item-disabled):hover .treeview-item-icon{@apply opacity-100;}treeview-aside-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-active-forced):not(.treeview-item-active):not(.treeview-item-disabled):hover .treeview-item-title,treeview-aside-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-active-forced):not(.treeview-item-active):not(.treeview-item-disabled):hover .treeview-item-arrow,treeview-basic-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-active-forced):not(.treeview-item-active):not(.treeview-item-disabled):hover .treeview-item-title,treeview-basic-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-active-forced):not(.treeview-item-active):not(.treeview-item-disabled):hover .treeview-item-arrow,treeview-collapsable-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-active-forced):not(.treeview-item-active):not(.treeview-item-disabled):hover .treeview-item-title,treeview-collapsable-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-active-forced):not(.treeview-item-active):not(.treeview-item-disabled):hover .treeview-item-arrow{@apply opacity-100;}treeview-aside-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-active-forced):not(.treeview-item-active):not(.treeview-item-disabled):hover .treeview-item-subtitle,treeview-basic-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-active-forced):not(.treeview-item-active):not(.treeview-item-disabled):hover .treeview-item-subtitle,treeview-collapsable-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-active-forced):not(.treeview-item-active):not(.treeview-item-disabled):hover .treeview-item-subtitle{@apply opacity-100;}treeview-collapsable-item.treeview-item-expanded>.treeview-item-wrapper .treeview-item .treeview-item-icon{@apply opacity-100;}treeview-collapsable-item.treeview-item-expanded>.treeview-item-wrapper .treeview-item .treeview-item-title,treeview-collapsable-item.treeview-item-expanded>.treeview-item-wrapper .treeview-item .treeview-item-arrow{@apply opacity-100;}treeview-collapsable-item.treeview-item-expanded>.treeview-item-wrapper .treeview-item .treeview-item-subtitle{@apply opacity-100;}treeview-group-item>.treeview-item-wrapper .treeview-item .treeview-item-title-wrapper .treeview-item-title{@apply opacity-100 text-primary-600 dark:text-primary-400;}:root{--treeview-compact-width: 112px}treeview.treeview-appearance-compact{width:var(--treeview-compact-width);min-width:var(--treeview-compact-width);max-width:var(--treeview-compact-width)}treeview.treeview-appearance-compact.treeview-position-left.treeview-mode-side{margin-left:calc(var(--treeview-compact-width) * -1)}treeview.treeview-appearance-compact.treeview-position-left.treeview-opened{margin-left:0}treeview.treeview-appearance-compact.treeview-position-right.treeview-mode-side{margin-right:calc(var(--treeview-compact-width) * -1)}treeview.treeview-appearance-compact.treeview-position-right.treeview-opened{margin-right:0}treeview.treeview-appearance-compact.treeview-position-right .treeview-aside-wrapper{left:auto;right:var(--treeview-compact-width)}treeview.treeview-appearance-compact .treeview-wrapper .treeview-content>treeview-aside-item .treeview-item-wrapper,treeview.treeview-appearance-compact .treeview-wrapper .treeview-content>treeview-basic-item .treeview-item-wrapper{margin:4px 8px 0}treeview.treeview-appearance-compact .treeview-wrapper .treeview-content>treeview-aside-item .treeview-item-wrapper .treeview-item,treeview.treeview-appearance-compact .treeview-wrapper .treeview-content>treeview-basic-item .treeview-item-wrapper .treeview-item{flex-direction:column;justify-content:center;padding:12px;border-radius:6px}treeview.treeview-appearance-compact .treeview-wrapper .treeview-content>treeview-aside-item .treeview-item-wrapper .treeview-item .treeview-item-icon,treeview.treeview-appearance-compact .treeview-wrapper .treeview-content>treeview-basic-item .treeview-item-wrapper .treeview-item .treeview-item-icon{margin-right:0}treeview.treeview-appearance-compact .treeview-wrapper .treeview-content>treeview-aside-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper,treeview.treeview-appearance-compact .treeview-wrapper .treeview-content>treeview-basic-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper{margin-top:8px}treeview.treeview-appearance-compact .treeview-wrapper .treeview-content>treeview-aside-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper .treeview-item-title,treeview.treeview-appearance-compact .treeview-wrapper .treeview-content>treeview-basic-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper .treeview-item-title{font-size:12px;font-weight:500;text-align:center;line-height:16px}treeview.treeview-appearance-compact .treeview-wrapper .treeview-content>treeview-aside-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper .treeview-item-subtitle,treeview.treeview-appearance-compact .treeview-wrapper .treeview-content>treeview-basic-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper .treeview-item-subtitle{display:none!important}treeview.treeview-appearance-compact .treeview-wrapper .treeview-content>treeview-aside-item .treeview-item-wrapper .treeview-item .treeview-item-badge,treeview.treeview-appearance-compact .treeview-wrapper .treeview-content>treeview-basic-item .treeview-item-wrapper .treeview-item .treeview-item-badge{position:absolute;top:12px;left:64px}treeview.treeview-appearance-compact .treeview-wrapper .treeview-content>treeview-aside-item>treeview-collapsable-item,treeview.treeview-appearance-compact .treeview-wrapper .treeview-content>treeview-basic-item>treeview-collapsable-item{display:none}treeview.treeview-appearance-compact .treeview-wrapper .treeview-content>treeview-aside-item>treeview-group-item>.treeview-item-wrapper,treeview.treeview-appearance-compact .treeview-wrapper .treeview-content>treeview-basic-item>treeview-group-item>.treeview-item-wrapper{display:none}treeview.treeview-appearance-compact .treeview-aside-wrapper{left:var(--treeview-compact-width)}:root{--treeview-width: 480px;--treeview-dense-width: 80px}treeview.treeview-appearance-dense:not(.treeview-mode-over){width:var(--treeview-dense-width);min-width:var(--treeview-dense-width);max-width:var(--treeview-dense-width)}treeview.treeview-appearance-dense:not(.treeview-mode-over).treeview-position-left.treeview-mode-side{margin-left:calc(var(--treeview-dense-width) * -1)}treeview.treeview-appearance-dense:not(.treeview-mode-over).treeview-position-left.treeview-opened{margin-left:0}treeview.treeview-appearance-dense:not(.treeview-mode-over).treeview-position-right.treeview-mode-side{margin-right:calc(var(--treeview-dense-width) * -1)}treeview.treeview-appearance-dense:not(.treeview-mode-over).treeview-position-right.treeview-opened{margin-right:0}treeview.treeview-appearance-dense:not(.treeview-mode-over).treeview-position-right .treeview-aside-wrapper{left:auto;right:var(--treeview-dense-width)}treeview.treeview-appearance-dense:not(.treeview-mode-over).treeview-position-right.treeview-hover .treeview-aside-wrapper{left:auto;right:var(--treeview-width)}treeview.treeview-appearance-dense .treeview-wrapper .treeview-content treeview-aside-item .treeview-item-wrapper .treeview-item,treeview.treeview-appearance-dense .treeview-wrapper .treeview-content treeview-basic-item .treeview-item-wrapper .treeview-item,treeview.treeview-appearance-dense .treeview-wrapper .treeview-content treeview-collapsable-item .treeview-item-wrapper .treeview-item,treeview.treeview-appearance-dense .treeview-wrapper .treeview-content treeview-group-item .treeview-item-wrapper .treeview-item{width:calc(var(--treeview-dense-width) - 24px);min-width:calc(var(--treeview-dense-width) - 24px);max-width:calc(var(--treeview-dense-width) - 24px)}treeview.treeview-appearance-dense .treeview-wrapper .treeview-content treeview-aside-item .treeview-item-wrapper .treeview-item .treeview-item-arrow,treeview.treeview-appearance-dense .treeview-wrapper .treeview-content treeview-aside-item .treeview-item-wrapper .treeview-item .treeview-item-badge,treeview.treeview-appearance-dense .treeview-wrapper .treeview-content treeview-aside-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper,treeview.treeview-appearance-dense .treeview-wrapper .treeview-content treeview-basic-item .treeview-item-wrapper .treeview-item .treeview-item-arrow,treeview.treeview-appearance-dense .treeview-wrapper .treeview-content treeview-basic-item .treeview-item-wrapper .treeview-item .treeview-item-badge,treeview.treeview-appearance-dense .treeview-wrapper .treeview-content treeview-basic-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper,treeview.treeview-appearance-dense .treeview-wrapper .treeview-content treeview-collapsable-item .treeview-item-wrapper .treeview-item .treeview-item-arrow,treeview.treeview-appearance-dense .treeview-wrapper .treeview-content treeview-collapsable-item .treeview-item-wrapper .treeview-item .treeview-item-badge,treeview.treeview-appearance-dense .treeview-wrapper .treeview-content treeview-collapsable-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper,treeview.treeview-appearance-dense .treeview-wrapper .treeview-content treeview-group-item .treeview-item-wrapper .treeview-item .treeview-item-arrow,treeview.treeview-appearance-dense .treeview-wrapper .treeview-content treeview-group-item .treeview-item-wrapper .treeview-item .treeview-item-badge,treeview.treeview-appearance-dense .treeview-wrapper .treeview-content treeview-group-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper{transition:opacity .4s cubic-bezier(.25,.8,.25,1)}treeview.treeview-appearance-dense .treeview-wrapper .treeview-content treeview-group-item:first-of-type{margin-top:0}treeview.treeview-appearance-dense:not(.treeview-hover):not(.treeview-mode-over) .treeview-wrapper .treeview-content .treeview-item-wrapper .treeview-item{padding:10px 16px}treeview.treeview-appearance-dense:not(.treeview-hover):not(.treeview-mode-over) .treeview-wrapper .treeview-content .treeview-item-wrapper .treeview-item .treeview-item-arrow,treeview.treeview-appearance-dense:not(.treeview-hover):not(.treeview-mode-over) .treeview-wrapper .treeview-content .treeview-item-wrapper .treeview-item .treeview-item-badge,treeview.treeview-appearance-dense:not(.treeview-hover):not(.treeview-mode-over) .treeview-wrapper .treeview-content .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper{white-space:nowrap;opacity:0}treeview.treeview-appearance-dense:not(.treeview-hover):not(.treeview-mode-over) .treeview-wrapper .treeview-content treeview-collapsable-item .treeview-item-children{display:none}treeview.treeview-appearance-dense:not(.treeview-hover):not(.treeview-mode-over) .treeview-wrapper .treeview-content treeview-group-item>.treeview-item-wrapper .treeview-item:before{content:\"\";position:absolute;top:20px;width:23px;border-top-width:2px}treeview.treeview-appearance-dense .treeview-aside-wrapper{left:var(--treeview-dense-width)}treeview.treeview-appearance-dense.treeview-hover .treeview-wrapper{width:var(--treeview-width)}treeview.treeview-appearance-dense.treeview-hover .treeview-wrapper .treeview-content .treeview-item-wrapper .treeview-item{width:calc(var(--treeview-width) - 24px);min-width:calc(var(--treeview-width) - 24px);max-width:calc(var(--treeview-width) - 24px)}treeview.treeview-appearance-dense.treeview-hover .treeview-wrapper .treeview-content .treeview-item-wrapper .treeview-item .treeview-item-arrow,treeview.treeview-appearance-dense.treeview-hover .treeview-wrapper .treeview-content .treeview-item-wrapper .treeview-item .treeview-item-badge,treeview.treeview-appearance-dense.treeview-hover .treeview-wrapper .treeview-content .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper{white-space:nowrap;animation:removeWhiteSpaceNoWrap 1ms linear .35s;animation-fill-mode:forwards}treeview.treeview-appearance-dense.treeview-hover .treeview-aside-wrapper{left:var(--treeview-width)}@keyframes removeWhiteSpaceNoWrap{0%{white-space:nowrap}99%{white-space:nowrap}to{white-space:normal}}:root{--treeview-thin-width: 80px}treeview.treeview-appearance-thin{width:var(--treeview-thin-width);min-width:var(--treeview-thin-width);max-width:var(--treeview-thin-width)}treeview.treeview-appearance-thin.treeview-position-left.treeview-mode-side{margin-left:calc(var(--treeview-thin-width) * -1)}treeview.treeview-appearance-thin.treeview-position-left.treeview-opened{margin-left:0}treeview.treeview-appearance-thin.treeview-position-right.treeview-mode-side{margin-right:calc(var(--treeview-thin-width) * -1)}treeview.treeview-appearance-thin.treeview-position-right.treeview-opened{margin-right:0}treeview.treeview-appearance-thin.treeview-position-right .treeview-aside-wrapper{left:auto;right:var(--treeview-thin-width)}treeview.treeview-appearance-thin .treeview-wrapper .treeview-content>treeview-aside-item,treeview.treeview-appearance-thin .treeview-wrapper .treeview-content>treeview-basic-item{flex-direction:column;justify-content:center;height:64px;min-height:64px;max-height:64px;padding:0 16px}treeview.treeview-appearance-thin .treeview-wrapper .treeview-content>treeview-aside-item .treeview-item-wrapper,treeview.treeview-appearance-thin .treeview-wrapper .treeview-content>treeview-basic-item .treeview-item-wrapper{display:flex;align-items:center;justify-content:center}treeview.treeview-appearance-thin .treeview-wrapper .treeview-content>treeview-aside-item .treeview-item-wrapper .treeview-item,treeview.treeview-appearance-thin .treeview-wrapper .treeview-content>treeview-basic-item .treeview-item-wrapper .treeview-item{justify-content:center;padding:12px;border-radius:4px}treeview.treeview-appearance-thin .treeview-wrapper .treeview-content>treeview-aside-item .treeview-item-wrapper .treeview-item .treeview-item-icon,treeview.treeview-appearance-thin .treeview-wrapper .treeview-content>treeview-basic-item .treeview-item-wrapper .treeview-item .treeview-item-icon{margin:0}treeview.treeview-appearance-thin .treeview-wrapper .treeview-content>treeview-aside-item .treeview-item-wrapper .treeview-item .treeview-item-arrow,treeview.treeview-appearance-thin .treeview-wrapper .treeview-content>treeview-aside-item .treeview-item-wrapper .treeview-item .treeview-item-badge-content,treeview.treeview-appearance-thin .treeview-wrapper .treeview-content>treeview-aside-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper,treeview.treeview-appearance-thin .treeview-wrapper .treeview-content>treeview-basic-item .treeview-item-wrapper .treeview-item .treeview-item-arrow,treeview.treeview-appearance-thin .treeview-wrapper .treeview-content>treeview-basic-item .treeview-item-wrapper .treeview-item .treeview-item-badge-content,treeview.treeview-appearance-thin .treeview-wrapper .treeview-content>treeview-basic-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper{display:none}treeview.treeview-appearance-thin .treeview-wrapper .treeview-content>treeview-collapsable-item{display:none}treeview.treeview-appearance-thin .treeview-wrapper .treeview-content>treeview-group-item>.treeview-item-wrapper{display:none}treeview.treeview-appearance-thin .treeview-aside-wrapper{left:var(--treeview-thin-width)}\n"], dependencies: [{ kind: "directive", type: i4$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: TreeViewBasicItemComponent, selector: "treeview-basic-item", inputs: ["item", "name", "internalRoute", "isEditIcon", "treeId"], outputs: ["editableKpiBasicData"] }, { kind: "component", type: TreeViewCollapsableItemComponent, selector: "treeview-collapsable-item", inputs: ["autoCollapse", "item", "name", "treeId", "internalRoute", "isEditIcon"], outputs: ["editableKpiData"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TreeviewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'treeview', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"treeview-wrapper\">\n    <div class=\"mx-3 my-4\" *ngIf=\"isSearchBox\">\n        <dx-select-box [items]=\"treeListForSearchBox\" [searchEnabled]=\"true\" valueExpr=\"kpiId\" displayExpr=\"name\"\n            [placeholder]=\"'Search KPI'\" (onValueChanged)=\"selectedKpiNameFromSearchKpi($event)\">\n        </dx-select-box>\n    </div>\n\n    <!-- Content -->\n    <div class=\"treeview-content\" fuseScrollbar #navigationContent>\n\n        <!-- Items -->\n        <ng-container *ngFor=\"let item of navigation;\">\n\n            <!-- Skip the hidden items -->\n            <ng-container *ngIf=\"(item.hidden && !item.hidden(item)) || !item.hidden\">\n\n                <!-- Basic -->\n                <ng-container *ngIf=\"item.tag_type === 'child'\">\n                    <treeview-basic-item [item]=\"item\" [name]=\"name\" [isEditIcon]=\"isEditIcon\"\n                        (editableKpiBasicData)=\"getBasicEditKpiData($event)\" [internalRoute]=\"routeKey\"\n                        [treeId]=\"openTreeId\">\n                    </treeview-basic-item>\n                </ng-container>\n\n                <!-- Collapsable -->\n                <ng-container *ngIf=\"item.tag_type === 'parent'\">\n                    <treeview-collapsable-item [item]=\"item\" [name]=\"name\" [isEditIcon]=\"isEditIcon\"\n                        (editableKpiData)=\"getEditKpiData($event)\" [autoCollapse]=\"autoCollapse\" [treeId]=\"openTreeId\"\n                        [internalRoute]=\"routeKey\">\n                    </treeview-collapsable-item>\n                </ng-container>\n\n                <!-- Divider -->\n                <ng-container *ngIf=\"item.tag_type === 'divider'\">\n                    <treeview-divider-item [item]=\"item\" [name]=\"name\">\n                    </treeview-divider-item>\n                </ng-container>\n\n\n            </ng-container>\n\n        </ng-container>\n\n    </div>\n\n\n\n</div>", styles: [":root{--treeview-width: 480px}treeview{position:sticky;display:flex;flex-direction:column;flex:1 0 auto;top:0;width:var(--treeview-width);min-width:var(--treeview-width);max-width:var(--treeview-width);height:100%;min-height:67vh;max-height:67vh;z-index:200}treeview.treeview-animations-enabled{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:visibility,margin-left,margin-right,transform,width,max-width,min-width}treeview.treeview-animations-enabled .treeview-wrapper{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:width,max-width,min-width}treeview.treeview-mode-over{position:fixed;top:0;bottom:0}treeview.treeview-position-left.treeview-mode-side{margin-left:calc(var(--treeview-width) * -1)}treeview.treeview-position-left.treeview-mode-side.treeview-opened{margin-left:0}treeview.treeview-position-left.treeview-mode-over{left:0;transform:translate3d(-100%,0,0)}treeview.treeview-position-left.treeview-mode-over.treeview-opened{transform:translateZ(0)}treeview.treeview-position-left .treeview-wrapper{left:0}treeview.treeview-position-right.treeview-mode-side{margin-right:calc(var(--treeview-width) * -1)}treeview.treeview-position-right.treeview-mode-side.treeview-opened{margin-right:0}treeview.treeview-position-right.treeview-mode-over{right:0;transform:translate3d(100%,0,0)}treeview.treeview-position-right.treeview-mode-over.treeview-opened{transform:translateZ(0)}treeview.treeview-position-right .treeview-wrapper{right:0}treeview.treeview-inner{position:relative;width:auto;min-width:0;max-width:none;height:auto;min-height:0;max-height:none;box-shadow:none}treeview.treeview-inner .treeview-wrapper{position:relative;overflow:visible;height:auto}treeview.treeview-inner .treeview-wrapper .treeview-content{overflow:visible!important}treeview .treeview-wrapper{position:absolute;display:flex;flex:1 1 auto;flex-direction:column;top:0;bottom:0;width:36rem;overflow:hidden;z-index:10;background:inherit}treeview .treeview-wrapper .treeview-content{flex:1 1 auto;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}treeview .treeview-wrapper .treeview-content>treeview-divider-item{margin:24px 0}treeview .treeview-wrapper .treeview-content>treeview-group-item{margin-top:24px}treeview .treeview-aside-wrapper{position:absolute;display:flex;flex:1 1 auto;flex-direction:column;top:0;bottom:0;left:var(--treeview-width);width:var(--treeview-width);height:100%;z-index:5;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;transition-duration:.4s;transition-property:left,right;transition-timing-function:cubic-bezier(.25,.8,.25,1);background:inherit}treeview .treeview-aside-wrapper>treeview-aside-item{padding:24px 0}treeview .treeview-aside-wrapper>treeview-aside-item>.treeview-item-wrapper{display:none!important}treeview.treeview-position-right .treeview-aside-wrapper{left:auto;right:var(--treeview-width)}treeview treeview-aside-item,treeview treeview-basic-item,treeview treeview-collapsable-item,treeview treeview-divider-item,treeview treeview-group-item,treeview treeview-spacer-item{display:flex;flex-direction:column;flex:1 0 auto;-webkit-user-select:none;user-select:none}treeview treeview-aside-item .treeview-item-wrapper .treeview-item,treeview treeview-basic-item .treeview-item-wrapper .treeview-item,treeview treeview-collapsable-item .treeview-item-wrapper .treeview-item,treeview treeview-divider-item .treeview-item-wrapper .treeview-item,treeview treeview-group-item .treeview-item-wrapper .treeview-item,treeview treeview-spacer-item .treeview-item-wrapper .treeview-item{position:relative;display:flex;align-items:center;justify-content:flex-start;padding:10px 16px;font-size:13px;font-weight:500;line-height:20px;text-decoration:none;border-radius:6px}treeview treeview-aside-item .treeview-item-wrapper .treeview-item.treeview-item-disabled,treeview treeview-basic-item .treeview-item-wrapper .treeview-item.treeview-item-disabled,treeview treeview-collapsable-item .treeview-item-wrapper .treeview-item.treeview-item-disabled,treeview treeview-divider-item .treeview-item-wrapper .treeview-item.treeview-item-disabled,treeview treeview-group-item .treeview-item-wrapper .treeview-item.treeview-item-disabled,treeview treeview-spacer-item .treeview-item-wrapper .treeview-item.treeview-item-disabled{cursor:default;opacity:.4}treeview treeview-aside-item .treeview-item-wrapper .treeview-item .treeview-item-icon,treeview treeview-basic-item .treeview-item-wrapper .treeview-item .treeview-item-icon,treeview treeview-collapsable-item .treeview-item-wrapper .treeview-item .treeview-item-icon,treeview treeview-divider-item .treeview-item-wrapper .treeview-item .treeview-item-icon,treeview treeview-group-item .treeview-item-wrapper .treeview-item .treeview-item-icon,treeview treeview-spacer-item .treeview-item-wrapper .treeview-item .treeview-item-icon{margin-right:16px}treeview treeview-aside-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper .treeview-item-subtitle,treeview treeview-basic-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper .treeview-item-subtitle,treeview treeview-collapsable-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper .treeview-item-subtitle,treeview treeview-divider-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper .treeview-item-subtitle,treeview treeview-group-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper .treeview-item-subtitle,treeview treeview-spacer-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper .treeview-item-subtitle{font-size:11px;line-height:1.5}treeview treeview-aside-item .treeview-item-wrapper .treeview-item .treeview-item-badge,treeview treeview-basic-item .treeview-item-wrapper .treeview-item .treeview-item-badge,treeview treeview-collapsable-item .treeview-item-wrapper .treeview-item .treeview-item-badge,treeview treeview-divider-item .treeview-item-wrapper .treeview-item .treeview-item-badge,treeview treeview-group-item .treeview-item-wrapper .treeview-item .treeview-item-badge,treeview treeview-spacer-item .treeview-item-wrapper .treeview-item .treeview-item-badge{margin-left:auto}treeview treeview-aside-item .treeview-item-wrapper .treeview-item .treeview-item-badge .treeview-item-badge-content,treeview treeview-basic-item .treeview-item-wrapper .treeview-item .treeview-item-badge .treeview-item-badge-content,treeview treeview-collapsable-item .treeview-item-wrapper .treeview-item .treeview-item-badge .treeview-item-badge-content,treeview treeview-divider-item .treeview-item-wrapper .treeview-item .treeview-item-badge .treeview-item-badge-content,treeview treeview-group-item .treeview-item-wrapper .treeview-item .treeview-item-badge .treeview-item-badge-content,treeview treeview-spacer-item .treeview-item-wrapper .treeview-item .treeview-item-badge .treeview-item-badge-content{display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;white-space:nowrap;height:20px}treeview treeview-aside-item>.treeview-item-wrapper,treeview treeview-basic-item>.treeview-item-wrapper,treeview treeview-collapsable-item>.treeview-item-wrapper,treeview treeview-group-item>.treeview-item-wrapper{margin:0 12px}treeview treeview-aside-item,treeview treeview-basic-item,treeview treeview-collapsable-item{margin-bottom:4px}treeview treeview-aside-item .treeview-item,treeview treeview-basic-item .treeview-item,treeview treeview-collapsable-item .treeview-item{cursor:pointer}treeview treeview-collapsable-item>.treeview-item-wrapper .treeview-item .treeview-item-badge+.treeview-item-arrow{margin-left:8px}treeview treeview-collapsable-item>.treeview-item-wrapper .treeview-item .treeview-item-arrow{height:20px;line-height:20px;margin-left:auto;transition:transform .3s cubic-bezier(.25,.8,.25,1),color 375ms cubic-bezier(.25,.8,.25,1)}treeview treeview-collapsable-item.treeview-item-expanded>.treeview-item-wrapper .treeview-item .treeview-item-arrow{transform:rotate(90deg)}treeview treeview-collapsable-item>.treeview-item-children>*:first-child{margin-top:6px}treeview treeview-collapsable-item>.treeview-item-children>*:last-child{padding-bottom:6px}treeview treeview-collapsable-item>.treeview-item-children>*:last-child>.treeview-item-children>*:last-child{padding-bottom:0}treeview treeview-collapsable-item>.treeview-item-children .treeview-item{padding:10px 16px}treeview treeview-collapsable-item .treeview-item-children{overflow:hidden}treeview treeview-collapsable-item .treeview-item-children .treeview-item{padding-left:56px}treeview treeview-collapsable-item .treeview-item-children .treeview-item-children .treeview-item{padding-left:72px}treeview treeview-collapsable-item .treeview-item-children .treeview-item-children .treeview-item-children .treeview-item{padding-left:88px}treeview treeview-collapsable-item .treeview-item-children .treeview-item-children .treeview-item-children .treeview-item-children .treeview-item{padding-left:104px}treeview treeview-divider-item{margin:12px 0}treeview treeview-divider-item .treeview-item-wrapper{height:1px;box-shadow:0 1px}treeview treeview-group-item>.treeview-item-wrapper .treeview-item .treeview-item-badge,treeview treeview-group-item>.treeview-item-wrapper .treeview-item .treeview-item-icon{display:none!important}treeview treeview-group-item>.treeview-item-wrapper .treeview-item .treeview-item-title-wrapper .treeview-item-title{font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase}treeview treeview-spacer-item{margin:6px 0}.treeview-overlay{position:absolute;inset:0;z-index:170;opacity:0;background-color:#0009}.treeview-overlay+.treeview-aside-overlay{background-color:transparent}.treeview-aside-overlay{position:absolute;inset:0;z-index:169;opacity:0;background-color:#0000004d}treeview-aside-item .treeview-item-wrapper .treeview-item,treeview-basic-item .treeview-item-wrapper .treeview-item,treeview-collapsable-item .treeview-item-wrapper .treeview-item,treeview-group-item .treeview-item-wrapper .treeview-item{color:currentColor}treeview-aside-item .treeview-item-wrapper .treeview-item .treeview-item-icon,treeview-basic-item .treeview-item-wrapper .treeview-item .treeview-item-icon,treeview-collapsable-item .treeview-item-wrapper .treeview-item .treeview-item-icon,treeview-group-item .treeview-item-wrapper .treeview-item .treeview-item-icon{@apply text-current opacity-60;}treeview-aside-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper .treeview-item-title,treeview-basic-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper .treeview-item-title,treeview-collapsable-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper .treeview-item-title,treeview-group-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper .treeview-item-title{@apply text-current opacity-80;}treeview-aside-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper .treeview-item-subtitle,treeview-basic-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper .treeview-item-subtitle,treeview-collapsable-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper .treeview-item-subtitle,treeview-group-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper .treeview-item-subtitle{@apply text-current opacity-50;}treeview-aside-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active,treeview-aside-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active-forced,treeview-basic-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active,treeview-basic-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active-forced,treeview-collapsable-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active,treeview-collapsable-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active-forced{@apply bg-gray-800 bg-opacity-5 dark:bg-white dark:bg-opacity-12;}treeview-aside-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active .treeview-item-icon,treeview-aside-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active-forced .treeview-item-icon,treeview-basic-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active .treeview-item-icon,treeview-basic-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active-forced .treeview-item-icon,treeview-collapsable-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active .treeview-item-icon,treeview-collapsable-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active-forced .treeview-item-icon{@apply opacity-100;}treeview-aside-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active .treeview-item-title,treeview-aside-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active-forced .treeview-item-title,treeview-basic-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active .treeview-item-title,treeview-basic-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active-forced .treeview-item-title,treeview-collapsable-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active .treeview-item-title,treeview-collapsable-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active-forced .treeview-item-title{@apply opacity-100;}treeview-aside-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active .treeview-item-subtitle,treeview-aside-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active-forced .treeview-item-subtitle,treeview-basic-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active .treeview-item-subtitle,treeview-basic-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active-forced .treeview-item-subtitle,treeview-collapsable-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active .treeview-item-subtitle,treeview-collapsable-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active-forced .treeview-item-subtitle{@apply opacity-100;}treeview-aside-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-active-forced):not(.treeview-item-active):not(.treeview-item-disabled):hover,treeview-basic-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-active-forced):not(.treeview-item-active):not(.treeview-item-disabled):hover,treeview-collapsable-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-active-forced):not(.treeview-item-active):not(.treeview-item-disabled):hover{@apply bg-gray-800 bg-opacity-5 dark:bg-white dark:bg-opacity-12;}treeview-aside-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-active-forced):not(.treeview-item-active):not(.treeview-item-disabled):hover .treeview-item-icon,treeview-basic-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-active-forced):not(.treeview-item-active):not(.treeview-item-disabled):hover .treeview-item-icon,treeview-collapsable-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-active-forced):not(.treeview-item-active):not(.treeview-item-disabled):hover .treeview-item-icon{@apply opacity-100;}treeview-aside-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-active-forced):not(.treeview-item-active):not(.treeview-item-disabled):hover .treeview-item-title,treeview-aside-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-active-forced):not(.treeview-item-active):not(.treeview-item-disabled):hover .treeview-item-arrow,treeview-basic-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-active-forced):not(.treeview-item-active):not(.treeview-item-disabled):hover .treeview-item-title,treeview-basic-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-active-forced):not(.treeview-item-active):not(.treeview-item-disabled):hover .treeview-item-arrow,treeview-collapsable-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-active-forced):not(.treeview-item-active):not(.treeview-item-disabled):hover .treeview-item-title,treeview-collapsable-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-active-forced):not(.treeview-item-active):not(.treeview-item-disabled):hover .treeview-item-arrow{@apply opacity-100;}treeview-aside-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-active-forced):not(.treeview-item-active):not(.treeview-item-disabled):hover .treeview-item-subtitle,treeview-basic-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-active-forced):not(.treeview-item-active):not(.treeview-item-disabled):hover .treeview-item-subtitle,treeview-collapsable-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-active-forced):not(.treeview-item-active):not(.treeview-item-disabled):hover .treeview-item-subtitle{@apply opacity-100;}treeview-collapsable-item.treeview-item-expanded>.treeview-item-wrapper .treeview-item .treeview-item-icon{@apply opacity-100;}treeview-collapsable-item.treeview-item-expanded>.treeview-item-wrapper .treeview-item .treeview-item-title,treeview-collapsable-item.treeview-item-expanded>.treeview-item-wrapper .treeview-item .treeview-item-arrow{@apply opacity-100;}treeview-collapsable-item.treeview-item-expanded>.treeview-item-wrapper .treeview-item .treeview-item-subtitle{@apply opacity-100;}treeview-group-item>.treeview-item-wrapper .treeview-item .treeview-item-title-wrapper .treeview-item-title{@apply opacity-100 text-primary-600 dark:text-primary-400;}:root{--treeview-compact-width: 112px}treeview.treeview-appearance-compact{width:var(--treeview-compact-width);min-width:var(--treeview-compact-width);max-width:var(--treeview-compact-width)}treeview.treeview-appearance-compact.treeview-position-left.treeview-mode-side{margin-left:calc(var(--treeview-compact-width) * -1)}treeview.treeview-appearance-compact.treeview-position-left.treeview-opened{margin-left:0}treeview.treeview-appearance-compact.treeview-position-right.treeview-mode-side{margin-right:calc(var(--treeview-compact-width) * -1)}treeview.treeview-appearance-compact.treeview-position-right.treeview-opened{margin-right:0}treeview.treeview-appearance-compact.treeview-position-right .treeview-aside-wrapper{left:auto;right:var(--treeview-compact-width)}treeview.treeview-appearance-compact .treeview-wrapper .treeview-content>treeview-aside-item .treeview-item-wrapper,treeview.treeview-appearance-compact .treeview-wrapper .treeview-content>treeview-basic-item .treeview-item-wrapper{margin:4px 8px 0}treeview.treeview-appearance-compact .treeview-wrapper .treeview-content>treeview-aside-item .treeview-item-wrapper .treeview-item,treeview.treeview-appearance-compact .treeview-wrapper .treeview-content>treeview-basic-item .treeview-item-wrapper .treeview-item{flex-direction:column;justify-content:center;padding:12px;border-radius:6px}treeview.treeview-appearance-compact .treeview-wrapper .treeview-content>treeview-aside-item .treeview-item-wrapper .treeview-item .treeview-item-icon,treeview.treeview-appearance-compact .treeview-wrapper .treeview-content>treeview-basic-item .treeview-item-wrapper .treeview-item .treeview-item-icon{margin-right:0}treeview.treeview-appearance-compact .treeview-wrapper .treeview-content>treeview-aside-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper,treeview.treeview-appearance-compact .treeview-wrapper .treeview-content>treeview-basic-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper{margin-top:8px}treeview.treeview-appearance-compact .treeview-wrapper .treeview-content>treeview-aside-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper .treeview-item-title,treeview.treeview-appearance-compact .treeview-wrapper .treeview-content>treeview-basic-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper .treeview-item-title{font-size:12px;font-weight:500;text-align:center;line-height:16px}treeview.treeview-appearance-compact .treeview-wrapper .treeview-content>treeview-aside-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper .treeview-item-subtitle,treeview.treeview-appearance-compact .treeview-wrapper .treeview-content>treeview-basic-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper .treeview-item-subtitle{display:none!important}treeview.treeview-appearance-compact .treeview-wrapper .treeview-content>treeview-aside-item .treeview-item-wrapper .treeview-item .treeview-item-badge,treeview.treeview-appearance-compact .treeview-wrapper .treeview-content>treeview-basic-item .treeview-item-wrapper .treeview-item .treeview-item-badge{position:absolute;top:12px;left:64px}treeview.treeview-appearance-compact .treeview-wrapper .treeview-content>treeview-aside-item>treeview-collapsable-item,treeview.treeview-appearance-compact .treeview-wrapper .treeview-content>treeview-basic-item>treeview-collapsable-item{display:none}treeview.treeview-appearance-compact .treeview-wrapper .treeview-content>treeview-aside-item>treeview-group-item>.treeview-item-wrapper,treeview.treeview-appearance-compact .treeview-wrapper .treeview-content>treeview-basic-item>treeview-group-item>.treeview-item-wrapper{display:none}treeview.treeview-appearance-compact .treeview-aside-wrapper{left:var(--treeview-compact-width)}:root{--treeview-width: 480px;--treeview-dense-width: 80px}treeview.treeview-appearance-dense:not(.treeview-mode-over){width:var(--treeview-dense-width);min-width:var(--treeview-dense-width);max-width:var(--treeview-dense-width)}treeview.treeview-appearance-dense:not(.treeview-mode-over).treeview-position-left.treeview-mode-side{margin-left:calc(var(--treeview-dense-width) * -1)}treeview.treeview-appearance-dense:not(.treeview-mode-over).treeview-position-left.treeview-opened{margin-left:0}treeview.treeview-appearance-dense:not(.treeview-mode-over).treeview-position-right.treeview-mode-side{margin-right:calc(var(--treeview-dense-width) * -1)}treeview.treeview-appearance-dense:not(.treeview-mode-over).treeview-position-right.treeview-opened{margin-right:0}treeview.treeview-appearance-dense:not(.treeview-mode-over).treeview-position-right .treeview-aside-wrapper{left:auto;right:var(--treeview-dense-width)}treeview.treeview-appearance-dense:not(.treeview-mode-over).treeview-position-right.treeview-hover .treeview-aside-wrapper{left:auto;right:var(--treeview-width)}treeview.treeview-appearance-dense .treeview-wrapper .treeview-content treeview-aside-item .treeview-item-wrapper .treeview-item,treeview.treeview-appearance-dense .treeview-wrapper .treeview-content treeview-basic-item .treeview-item-wrapper .treeview-item,treeview.treeview-appearance-dense .treeview-wrapper .treeview-content treeview-collapsable-item .treeview-item-wrapper .treeview-item,treeview.treeview-appearance-dense .treeview-wrapper .treeview-content treeview-group-item .treeview-item-wrapper .treeview-item{width:calc(var(--treeview-dense-width) - 24px);min-width:calc(var(--treeview-dense-width) - 24px);max-width:calc(var(--treeview-dense-width) - 24px)}treeview.treeview-appearance-dense .treeview-wrapper .treeview-content treeview-aside-item .treeview-item-wrapper .treeview-item .treeview-item-arrow,treeview.treeview-appearance-dense .treeview-wrapper .treeview-content treeview-aside-item .treeview-item-wrapper .treeview-item .treeview-item-badge,treeview.treeview-appearance-dense .treeview-wrapper .treeview-content treeview-aside-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper,treeview.treeview-appearance-dense .treeview-wrapper .treeview-content treeview-basic-item .treeview-item-wrapper .treeview-item .treeview-item-arrow,treeview.treeview-appearance-dense .treeview-wrapper .treeview-content treeview-basic-item .treeview-item-wrapper .treeview-item .treeview-item-badge,treeview.treeview-appearance-dense .treeview-wrapper .treeview-content treeview-basic-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper,treeview.treeview-appearance-dense .treeview-wrapper .treeview-content treeview-collapsable-item .treeview-item-wrapper .treeview-item .treeview-item-arrow,treeview.treeview-appearance-dense .treeview-wrapper .treeview-content treeview-collapsable-item .treeview-item-wrapper .treeview-item .treeview-item-badge,treeview.treeview-appearance-dense .treeview-wrapper .treeview-content treeview-collapsable-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper,treeview.treeview-appearance-dense .treeview-wrapper .treeview-content treeview-group-item .treeview-item-wrapper .treeview-item .treeview-item-arrow,treeview.treeview-appearance-dense .treeview-wrapper .treeview-content treeview-group-item .treeview-item-wrapper .treeview-item .treeview-item-badge,treeview.treeview-appearance-dense .treeview-wrapper .treeview-content treeview-group-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper{transition:opacity .4s cubic-bezier(.25,.8,.25,1)}treeview.treeview-appearance-dense .treeview-wrapper .treeview-content treeview-group-item:first-of-type{margin-top:0}treeview.treeview-appearance-dense:not(.treeview-hover):not(.treeview-mode-over) .treeview-wrapper .treeview-content .treeview-item-wrapper .treeview-item{padding:10px 16px}treeview.treeview-appearance-dense:not(.treeview-hover):not(.treeview-mode-over) .treeview-wrapper .treeview-content .treeview-item-wrapper .treeview-item .treeview-item-arrow,treeview.treeview-appearance-dense:not(.treeview-hover):not(.treeview-mode-over) .treeview-wrapper .treeview-content .treeview-item-wrapper .treeview-item .treeview-item-badge,treeview.treeview-appearance-dense:not(.treeview-hover):not(.treeview-mode-over) .treeview-wrapper .treeview-content .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper{white-space:nowrap;opacity:0}treeview.treeview-appearance-dense:not(.treeview-hover):not(.treeview-mode-over) .treeview-wrapper .treeview-content treeview-collapsable-item .treeview-item-children{display:none}treeview.treeview-appearance-dense:not(.treeview-hover):not(.treeview-mode-over) .treeview-wrapper .treeview-content treeview-group-item>.treeview-item-wrapper .treeview-item:before{content:\"\";position:absolute;top:20px;width:23px;border-top-width:2px}treeview.treeview-appearance-dense .treeview-aside-wrapper{left:var(--treeview-dense-width)}treeview.treeview-appearance-dense.treeview-hover .treeview-wrapper{width:var(--treeview-width)}treeview.treeview-appearance-dense.treeview-hover .treeview-wrapper .treeview-content .treeview-item-wrapper .treeview-item{width:calc(var(--treeview-width) - 24px);min-width:calc(var(--treeview-width) - 24px);max-width:calc(var(--treeview-width) - 24px)}treeview.treeview-appearance-dense.treeview-hover .treeview-wrapper .treeview-content .treeview-item-wrapper .treeview-item .treeview-item-arrow,treeview.treeview-appearance-dense.treeview-hover .treeview-wrapper .treeview-content .treeview-item-wrapper .treeview-item .treeview-item-badge,treeview.treeview-appearance-dense.treeview-hover .treeview-wrapper .treeview-content .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper{white-space:nowrap;animation:removeWhiteSpaceNoWrap 1ms linear .35s;animation-fill-mode:forwards}treeview.treeview-appearance-dense.treeview-hover .treeview-aside-wrapper{left:var(--treeview-width)}@keyframes removeWhiteSpaceNoWrap{0%{white-space:nowrap}99%{white-space:nowrap}to{white-space:normal}}:root{--treeview-thin-width: 80px}treeview.treeview-appearance-thin{width:var(--treeview-thin-width);min-width:var(--treeview-thin-width);max-width:var(--treeview-thin-width)}treeview.treeview-appearance-thin.treeview-position-left.treeview-mode-side{margin-left:calc(var(--treeview-thin-width) * -1)}treeview.treeview-appearance-thin.treeview-position-left.treeview-opened{margin-left:0}treeview.treeview-appearance-thin.treeview-position-right.treeview-mode-side{margin-right:calc(var(--treeview-thin-width) * -1)}treeview.treeview-appearance-thin.treeview-position-right.treeview-opened{margin-right:0}treeview.treeview-appearance-thin.treeview-position-right .treeview-aside-wrapper{left:auto;right:var(--treeview-thin-width)}treeview.treeview-appearance-thin .treeview-wrapper .treeview-content>treeview-aside-item,treeview.treeview-appearance-thin .treeview-wrapper .treeview-content>treeview-basic-item{flex-direction:column;justify-content:center;height:64px;min-height:64px;max-height:64px;padding:0 16px}treeview.treeview-appearance-thin .treeview-wrapper .treeview-content>treeview-aside-item .treeview-item-wrapper,treeview.treeview-appearance-thin .treeview-wrapper .treeview-content>treeview-basic-item .treeview-item-wrapper{display:flex;align-items:center;justify-content:center}treeview.treeview-appearance-thin .treeview-wrapper .treeview-content>treeview-aside-item .treeview-item-wrapper .treeview-item,treeview.treeview-appearance-thin .treeview-wrapper .treeview-content>treeview-basic-item .treeview-item-wrapper .treeview-item{justify-content:center;padding:12px;border-radius:4px}treeview.treeview-appearance-thin .treeview-wrapper .treeview-content>treeview-aside-item .treeview-item-wrapper .treeview-item .treeview-item-icon,treeview.treeview-appearance-thin .treeview-wrapper .treeview-content>treeview-basic-item .treeview-item-wrapper .treeview-item .treeview-item-icon{margin:0}treeview.treeview-appearance-thin .treeview-wrapper .treeview-content>treeview-aside-item .treeview-item-wrapper .treeview-item .treeview-item-arrow,treeview.treeview-appearance-thin .treeview-wrapper .treeview-content>treeview-aside-item .treeview-item-wrapper .treeview-item .treeview-item-badge-content,treeview.treeview-appearance-thin .treeview-wrapper .treeview-content>treeview-aside-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper,treeview.treeview-appearance-thin .treeview-wrapper .treeview-content>treeview-basic-item .treeview-item-wrapper .treeview-item .treeview-item-arrow,treeview.treeview-appearance-thin .treeview-wrapper .treeview-content>treeview-basic-item .treeview-item-wrapper .treeview-item .treeview-item-badge-content,treeview.treeview-appearance-thin .treeview-wrapper .treeview-content>treeview-basic-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper{display:none}treeview.treeview-appearance-thin .treeview-wrapper .treeview-content>treeview-collapsable-item{display:none}treeview.treeview-appearance-thin .treeview-wrapper .treeview-content>treeview-group-item>.treeview-item-wrapper{display:none}treeview.treeview-appearance-thin .treeview-aside-wrapper{left:var(--treeview-thin-width)}\n"] }]
+            args: [{ selector: 'treeview', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"treeview-wrapper\">\n    <div class=\"mx-3 my-4\" *ngIf=\"isSearchBox\">\n        <dx-select-box [items]=\"treeListForSearchBox\" [searchEnabled]=\"true\" valueExpr=\"kpiId\" displayExpr=\"name\"\n            [placeholder]=\"'Search KPI'\" (onValueChanged)=\"selectedKpiNameFromSearchKpi($event)\">\n        </dx-select-box>\n    </div>\n\n    <!-- Content -->\n    <div class=\"treeview-content\" fuseScrollbar #navigationContent>\n\n        <!-- Items -->\n        <ng-container *ngFor=\"let item of navigation;\">\n\n            <!-- Skip the hidden items -->\n            <ng-container *ngIf=\"(item.hidden && !item.hidden(item)) || !item.hidden\">\n\n                <!-- Basic -->\n                <ng-container *ngIf=\"item.tagType == 'child'\">\n                    <treeview-basic-item [item]=\"item\" [name]=\"name\" [isEditIcon]=\"isEditIcon\"\n                        (editableKpiBasicData)=\"getBasicEditKpiData($event)\" [internalRoute]=\"routeKey\"\n                        [treeId]=\"openTreeId\">\n                    </treeview-basic-item>\n                </ng-container>\n\n                <!-- Collapsable -->\n                <ng-container *ngIf=\"item.tagType == 'parent'\">\n                    <treeview-collapsable-item [item]=\"item\" [name]=\"name\" [isEditIcon]=\"isEditIcon\"\n                        (editableKpiData)=\"getEditKpiData($event)\" [autoCollapse]=\"autoCollapse\" [treeId]=\"openTreeId\"\n                        [internalRoute]=\"routeKey\">\n                    </treeview-collapsable-item>\n                </ng-container>\n\n\n            </ng-container>\n\n        </ng-container>\n\n    </div>\n\n\n\n</div>", styles: [":root{--treeview-width: 480px}treeview{position:sticky;display:flex;flex-direction:column;flex:1 0 auto;top:0;width:var(--treeview-width);min-width:var(--treeview-width);max-width:var(--treeview-width);height:100%;min-height:67vh;max-height:67vh;z-index:200}treeview.treeview-animations-enabled{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:visibility,margin-left,margin-right,transform,width,max-width,min-width}treeview.treeview-animations-enabled .treeview-wrapper{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:width,max-width,min-width}treeview.treeview-mode-over{position:fixed;top:0;bottom:0}treeview.treeview-position-left.treeview-mode-side{margin-left:calc(var(--treeview-width) * -1)}treeview.treeview-position-left.treeview-mode-side.treeview-opened{margin-left:0}treeview.treeview-position-left.treeview-mode-over{left:0;transform:translate3d(-100%,0,0)}treeview.treeview-position-left.treeview-mode-over.treeview-opened{transform:translateZ(0)}treeview.treeview-position-left .treeview-wrapper{left:0}treeview.treeview-position-right.treeview-mode-side{margin-right:calc(var(--treeview-width) * -1)}treeview.treeview-position-right.treeview-mode-side.treeview-opened{margin-right:0}treeview.treeview-position-right.treeview-mode-over{right:0;transform:translate3d(100%,0,0)}treeview.treeview-position-right.treeview-mode-over.treeview-opened{transform:translateZ(0)}treeview.treeview-position-right .treeview-wrapper{right:0}treeview.treeview-inner{position:relative;width:auto;min-width:0;max-width:none;height:auto;min-height:0;max-height:none;box-shadow:none}treeview.treeview-inner .treeview-wrapper{position:relative;overflow:visible;height:auto}treeview.treeview-inner .treeview-wrapper .treeview-content{overflow:visible!important}treeview .treeview-wrapper{position:absolute;display:flex;flex:1 1 auto;flex-direction:column;top:0;bottom:0;width:36rem;overflow:hidden;z-index:10;background:inherit}treeview .treeview-wrapper .treeview-content{flex:1 1 auto;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}treeview .treeview-wrapper .treeview-content>treeview-divider-item{margin:24px 0}treeview .treeview-wrapper .treeview-content>treeview-group-item{margin-top:24px}treeview .treeview-aside-wrapper{position:absolute;display:flex;flex:1 1 auto;flex-direction:column;top:0;bottom:0;left:var(--treeview-width);width:var(--treeview-width);height:100%;z-index:5;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;transition-duration:.4s;transition-property:left,right;transition-timing-function:cubic-bezier(.25,.8,.25,1);background:inherit}treeview .treeview-aside-wrapper>treeview-aside-item{padding:24px 0}treeview .treeview-aside-wrapper>treeview-aside-item>.treeview-item-wrapper{display:none!important}treeview.treeview-position-right .treeview-aside-wrapper{left:auto;right:var(--treeview-width)}treeview treeview-aside-item,treeview treeview-basic-item,treeview treeview-collapsable-item,treeview treeview-divider-item,treeview treeview-group-item,treeview treeview-spacer-item{display:flex;flex-direction:column;flex:1 0 auto;-webkit-user-select:none;user-select:none}treeview treeview-aside-item .treeview-item-wrapper .treeview-item,treeview treeview-basic-item .treeview-item-wrapper .treeview-item,treeview treeview-collapsable-item .treeview-item-wrapper .treeview-item,treeview treeview-divider-item .treeview-item-wrapper .treeview-item,treeview treeview-group-item .treeview-item-wrapper .treeview-item,treeview treeview-spacer-item .treeview-item-wrapper .treeview-item{position:relative;display:flex;align-items:center;justify-content:flex-start;padding:10px 16px;font-size:13px;font-weight:500;line-height:20px;text-decoration:none;border-radius:6px}treeview treeview-aside-item .treeview-item-wrapper .treeview-item.treeview-item-disabled,treeview treeview-basic-item .treeview-item-wrapper .treeview-item.treeview-item-disabled,treeview treeview-collapsable-item .treeview-item-wrapper .treeview-item.treeview-item-disabled,treeview treeview-divider-item .treeview-item-wrapper .treeview-item.treeview-item-disabled,treeview treeview-group-item .treeview-item-wrapper .treeview-item.treeview-item-disabled,treeview treeview-spacer-item .treeview-item-wrapper .treeview-item.treeview-item-disabled{cursor:default;opacity:.4}treeview treeview-aside-item .treeview-item-wrapper .treeview-item .treeview-item-icon,treeview treeview-basic-item .treeview-item-wrapper .treeview-item .treeview-item-icon,treeview treeview-collapsable-item .treeview-item-wrapper .treeview-item .treeview-item-icon,treeview treeview-divider-item .treeview-item-wrapper .treeview-item .treeview-item-icon,treeview treeview-group-item .treeview-item-wrapper .treeview-item .treeview-item-icon,treeview treeview-spacer-item .treeview-item-wrapper .treeview-item .treeview-item-icon{margin-right:16px}treeview treeview-aside-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper .treeview-item-subtitle,treeview treeview-basic-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper .treeview-item-subtitle,treeview treeview-collapsable-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper .treeview-item-subtitle,treeview treeview-divider-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper .treeview-item-subtitle,treeview treeview-group-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper .treeview-item-subtitle,treeview treeview-spacer-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper .treeview-item-subtitle{font-size:11px;line-height:1.5}treeview treeview-aside-item .treeview-item-wrapper .treeview-item .treeview-item-badge,treeview treeview-basic-item .treeview-item-wrapper .treeview-item .treeview-item-badge,treeview treeview-collapsable-item .treeview-item-wrapper .treeview-item .treeview-item-badge,treeview treeview-divider-item .treeview-item-wrapper .treeview-item .treeview-item-badge,treeview treeview-group-item .treeview-item-wrapper .treeview-item .treeview-item-badge,treeview treeview-spacer-item .treeview-item-wrapper .treeview-item .treeview-item-badge{margin-left:auto}treeview treeview-aside-item .treeview-item-wrapper .treeview-item .treeview-item-badge .treeview-item-badge-content,treeview treeview-basic-item .treeview-item-wrapper .treeview-item .treeview-item-badge .treeview-item-badge-content,treeview treeview-collapsable-item .treeview-item-wrapper .treeview-item .treeview-item-badge .treeview-item-badge-content,treeview treeview-divider-item .treeview-item-wrapper .treeview-item .treeview-item-badge .treeview-item-badge-content,treeview treeview-group-item .treeview-item-wrapper .treeview-item .treeview-item-badge .treeview-item-badge-content,treeview treeview-spacer-item .treeview-item-wrapper .treeview-item .treeview-item-badge .treeview-item-badge-content{display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;white-space:nowrap;height:20px}treeview treeview-aside-item>.treeview-item-wrapper,treeview treeview-basic-item>.treeview-item-wrapper,treeview treeview-collapsable-item>.treeview-item-wrapper,treeview treeview-group-item>.treeview-item-wrapper{margin:0 12px}treeview treeview-aside-item,treeview treeview-basic-item,treeview treeview-collapsable-item{margin-bottom:4px}treeview treeview-aside-item .treeview-item,treeview treeview-basic-item .treeview-item,treeview treeview-collapsable-item .treeview-item{cursor:pointer}treeview treeview-collapsable-item>.treeview-item-wrapper .treeview-item .treeview-item-badge+.treeview-item-arrow{margin-left:8px}treeview treeview-collapsable-item>.treeview-item-wrapper .treeview-item .treeview-item-arrow{height:20px;line-height:20px;margin-left:auto;transition:transform .3s cubic-bezier(.25,.8,.25,1),color 375ms cubic-bezier(.25,.8,.25,1)}treeview treeview-collapsable-item.treeview-item-expanded>.treeview-item-wrapper .treeview-item .treeview-item-arrow{transform:rotate(90deg)}treeview treeview-collapsable-item>.treeview-item-children>*:first-child{margin-top:6px}treeview treeview-collapsable-item>.treeview-item-children>*:last-child{padding-bottom:6px}treeview treeview-collapsable-item>.treeview-item-children>*:last-child>.treeview-item-children>*:last-child{padding-bottom:0}treeview treeview-collapsable-item>.treeview-item-children .treeview-item{padding:10px 16px}treeview treeview-collapsable-item .treeview-item-children{overflow:hidden}treeview treeview-collapsable-item .treeview-item-children .treeview-item{padding-left:56px}treeview treeview-collapsable-item .treeview-item-children .treeview-item-children .treeview-item{padding-left:72px}treeview treeview-collapsable-item .treeview-item-children .treeview-item-children .treeview-item-children .treeview-item{padding-left:88px}treeview treeview-collapsable-item .treeview-item-children .treeview-item-children .treeview-item-children .treeview-item-children .treeview-item{padding-left:104px}treeview treeview-divider-item{margin:12px 0}treeview treeview-divider-item .treeview-item-wrapper{height:1px;box-shadow:0 1px}treeview treeview-group-item>.treeview-item-wrapper .treeview-item .treeview-item-badge,treeview treeview-group-item>.treeview-item-wrapper .treeview-item .treeview-item-icon{display:none!important}treeview treeview-group-item>.treeview-item-wrapper .treeview-item .treeview-item-title-wrapper .treeview-item-title{font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase}treeview treeview-spacer-item{margin:6px 0}.treeview-overlay{position:absolute;inset:0;z-index:170;opacity:0;background-color:#0009}.treeview-overlay+.treeview-aside-overlay{background-color:transparent}.treeview-aside-overlay{position:absolute;inset:0;z-index:169;opacity:0;background-color:#0000004d}treeview-aside-item .treeview-item-wrapper .treeview-item,treeview-basic-item .treeview-item-wrapper .treeview-item,treeview-collapsable-item .treeview-item-wrapper .treeview-item,treeview-group-item .treeview-item-wrapper .treeview-item{color:currentColor}treeview-aside-item .treeview-item-wrapper .treeview-item .treeview-item-icon,treeview-basic-item .treeview-item-wrapper .treeview-item .treeview-item-icon,treeview-collapsable-item .treeview-item-wrapper .treeview-item .treeview-item-icon,treeview-group-item .treeview-item-wrapper .treeview-item .treeview-item-icon{@apply text-current opacity-60;}treeview-aside-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper .treeview-item-title,treeview-basic-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper .treeview-item-title,treeview-collapsable-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper .treeview-item-title,treeview-group-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper .treeview-item-title{@apply text-current opacity-80;}treeview-aside-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper .treeview-item-subtitle,treeview-basic-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper .treeview-item-subtitle,treeview-collapsable-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper .treeview-item-subtitle,treeview-group-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper .treeview-item-subtitle{@apply text-current opacity-50;}treeview-aside-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active,treeview-aside-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active-forced,treeview-basic-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active,treeview-basic-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active-forced,treeview-collapsable-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active,treeview-collapsable-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active-forced{@apply bg-gray-800 bg-opacity-5 dark:bg-white dark:bg-opacity-12;}treeview-aside-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active .treeview-item-icon,treeview-aside-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active-forced .treeview-item-icon,treeview-basic-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active .treeview-item-icon,treeview-basic-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active-forced .treeview-item-icon,treeview-collapsable-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active .treeview-item-icon,treeview-collapsable-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active-forced .treeview-item-icon{@apply opacity-100;}treeview-aside-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active .treeview-item-title,treeview-aside-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active-forced .treeview-item-title,treeview-basic-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active .treeview-item-title,treeview-basic-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active-forced .treeview-item-title,treeview-collapsable-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active .treeview-item-title,treeview-collapsable-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active-forced .treeview-item-title{@apply opacity-100;}treeview-aside-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active .treeview-item-subtitle,treeview-aside-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active-forced .treeview-item-subtitle,treeview-basic-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active .treeview-item-subtitle,treeview-basic-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active-forced .treeview-item-subtitle,treeview-collapsable-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active .treeview-item-subtitle,treeview-collapsable-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-disabled).treeview-item-active-forced .treeview-item-subtitle{@apply opacity-100;}treeview-aside-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-active-forced):not(.treeview-item-active):not(.treeview-item-disabled):hover,treeview-basic-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-active-forced):not(.treeview-item-active):not(.treeview-item-disabled):hover,treeview-collapsable-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-active-forced):not(.treeview-item-active):not(.treeview-item-disabled):hover{@apply bg-gray-800 bg-opacity-5 dark:bg-white dark:bg-opacity-12;}treeview-aside-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-active-forced):not(.treeview-item-active):not(.treeview-item-disabled):hover .treeview-item-icon,treeview-basic-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-active-forced):not(.treeview-item-active):not(.treeview-item-disabled):hover .treeview-item-icon,treeview-collapsable-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-active-forced):not(.treeview-item-active):not(.treeview-item-disabled):hover .treeview-item-icon{@apply opacity-100;}treeview-aside-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-active-forced):not(.treeview-item-active):not(.treeview-item-disabled):hover .treeview-item-title,treeview-aside-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-active-forced):not(.treeview-item-active):not(.treeview-item-disabled):hover .treeview-item-arrow,treeview-basic-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-active-forced):not(.treeview-item-active):not(.treeview-item-disabled):hover .treeview-item-title,treeview-basic-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-active-forced):not(.treeview-item-active):not(.treeview-item-disabled):hover .treeview-item-arrow,treeview-collapsable-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-active-forced):not(.treeview-item-active):not(.treeview-item-disabled):hover .treeview-item-title,treeview-collapsable-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-active-forced):not(.treeview-item-active):not(.treeview-item-disabled):hover .treeview-item-arrow{@apply opacity-100;}treeview-aside-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-active-forced):not(.treeview-item-active):not(.treeview-item-disabled):hover .treeview-item-subtitle,treeview-basic-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-active-forced):not(.treeview-item-active):not(.treeview-item-disabled):hover .treeview-item-subtitle,treeview-collapsable-item>.treeview-item-wrapper .treeview-item:not(.treeview-item-active-forced):not(.treeview-item-active):not(.treeview-item-disabled):hover .treeview-item-subtitle{@apply opacity-100;}treeview-collapsable-item.treeview-item-expanded>.treeview-item-wrapper .treeview-item .treeview-item-icon{@apply opacity-100;}treeview-collapsable-item.treeview-item-expanded>.treeview-item-wrapper .treeview-item .treeview-item-title,treeview-collapsable-item.treeview-item-expanded>.treeview-item-wrapper .treeview-item .treeview-item-arrow{@apply opacity-100;}treeview-collapsable-item.treeview-item-expanded>.treeview-item-wrapper .treeview-item .treeview-item-subtitle{@apply opacity-100;}treeview-group-item>.treeview-item-wrapper .treeview-item .treeview-item-title-wrapper .treeview-item-title{@apply opacity-100 text-primary-600 dark:text-primary-400;}:root{--treeview-compact-width: 112px}treeview.treeview-appearance-compact{width:var(--treeview-compact-width);min-width:var(--treeview-compact-width);max-width:var(--treeview-compact-width)}treeview.treeview-appearance-compact.treeview-position-left.treeview-mode-side{margin-left:calc(var(--treeview-compact-width) * -1)}treeview.treeview-appearance-compact.treeview-position-left.treeview-opened{margin-left:0}treeview.treeview-appearance-compact.treeview-position-right.treeview-mode-side{margin-right:calc(var(--treeview-compact-width) * -1)}treeview.treeview-appearance-compact.treeview-position-right.treeview-opened{margin-right:0}treeview.treeview-appearance-compact.treeview-position-right .treeview-aside-wrapper{left:auto;right:var(--treeview-compact-width)}treeview.treeview-appearance-compact .treeview-wrapper .treeview-content>treeview-aside-item .treeview-item-wrapper,treeview.treeview-appearance-compact .treeview-wrapper .treeview-content>treeview-basic-item .treeview-item-wrapper{margin:4px 8px 0}treeview.treeview-appearance-compact .treeview-wrapper .treeview-content>treeview-aside-item .treeview-item-wrapper .treeview-item,treeview.treeview-appearance-compact .treeview-wrapper .treeview-content>treeview-basic-item .treeview-item-wrapper .treeview-item{flex-direction:column;justify-content:center;padding:12px;border-radius:6px}treeview.treeview-appearance-compact .treeview-wrapper .treeview-content>treeview-aside-item .treeview-item-wrapper .treeview-item .treeview-item-icon,treeview.treeview-appearance-compact .treeview-wrapper .treeview-content>treeview-basic-item .treeview-item-wrapper .treeview-item .treeview-item-icon{margin-right:0}treeview.treeview-appearance-compact .treeview-wrapper .treeview-content>treeview-aside-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper,treeview.treeview-appearance-compact .treeview-wrapper .treeview-content>treeview-basic-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper{margin-top:8px}treeview.treeview-appearance-compact .treeview-wrapper .treeview-content>treeview-aside-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper .treeview-item-title,treeview.treeview-appearance-compact .treeview-wrapper .treeview-content>treeview-basic-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper .treeview-item-title{font-size:12px;font-weight:500;text-align:center;line-height:16px}treeview.treeview-appearance-compact .treeview-wrapper .treeview-content>treeview-aside-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper .treeview-item-subtitle,treeview.treeview-appearance-compact .treeview-wrapper .treeview-content>treeview-basic-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper .treeview-item-subtitle{display:none!important}treeview.treeview-appearance-compact .treeview-wrapper .treeview-content>treeview-aside-item .treeview-item-wrapper .treeview-item .treeview-item-badge,treeview.treeview-appearance-compact .treeview-wrapper .treeview-content>treeview-basic-item .treeview-item-wrapper .treeview-item .treeview-item-badge{position:absolute;top:12px;left:64px}treeview.treeview-appearance-compact .treeview-wrapper .treeview-content>treeview-aside-item>treeview-collapsable-item,treeview.treeview-appearance-compact .treeview-wrapper .treeview-content>treeview-basic-item>treeview-collapsable-item{display:none}treeview.treeview-appearance-compact .treeview-wrapper .treeview-content>treeview-aside-item>treeview-group-item>.treeview-item-wrapper,treeview.treeview-appearance-compact .treeview-wrapper .treeview-content>treeview-basic-item>treeview-group-item>.treeview-item-wrapper{display:none}treeview.treeview-appearance-compact .treeview-aside-wrapper{left:var(--treeview-compact-width)}:root{--treeview-width: 480px;--treeview-dense-width: 80px}treeview.treeview-appearance-dense:not(.treeview-mode-over){width:var(--treeview-dense-width);min-width:var(--treeview-dense-width);max-width:var(--treeview-dense-width)}treeview.treeview-appearance-dense:not(.treeview-mode-over).treeview-position-left.treeview-mode-side{margin-left:calc(var(--treeview-dense-width) * -1)}treeview.treeview-appearance-dense:not(.treeview-mode-over).treeview-position-left.treeview-opened{margin-left:0}treeview.treeview-appearance-dense:not(.treeview-mode-over).treeview-position-right.treeview-mode-side{margin-right:calc(var(--treeview-dense-width) * -1)}treeview.treeview-appearance-dense:not(.treeview-mode-over).treeview-position-right.treeview-opened{margin-right:0}treeview.treeview-appearance-dense:not(.treeview-mode-over).treeview-position-right .treeview-aside-wrapper{left:auto;right:var(--treeview-dense-width)}treeview.treeview-appearance-dense:not(.treeview-mode-over).treeview-position-right.treeview-hover .treeview-aside-wrapper{left:auto;right:var(--treeview-width)}treeview.treeview-appearance-dense .treeview-wrapper .treeview-content treeview-aside-item .treeview-item-wrapper .treeview-item,treeview.treeview-appearance-dense .treeview-wrapper .treeview-content treeview-basic-item .treeview-item-wrapper .treeview-item,treeview.treeview-appearance-dense .treeview-wrapper .treeview-content treeview-collapsable-item .treeview-item-wrapper .treeview-item,treeview.treeview-appearance-dense .treeview-wrapper .treeview-content treeview-group-item .treeview-item-wrapper .treeview-item{width:calc(var(--treeview-dense-width) - 24px);min-width:calc(var(--treeview-dense-width) - 24px);max-width:calc(var(--treeview-dense-width) - 24px)}treeview.treeview-appearance-dense .treeview-wrapper .treeview-content treeview-aside-item .treeview-item-wrapper .treeview-item .treeview-item-arrow,treeview.treeview-appearance-dense .treeview-wrapper .treeview-content treeview-aside-item .treeview-item-wrapper .treeview-item .treeview-item-badge,treeview.treeview-appearance-dense .treeview-wrapper .treeview-content treeview-aside-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper,treeview.treeview-appearance-dense .treeview-wrapper .treeview-content treeview-basic-item .treeview-item-wrapper .treeview-item .treeview-item-arrow,treeview.treeview-appearance-dense .treeview-wrapper .treeview-content treeview-basic-item .treeview-item-wrapper .treeview-item .treeview-item-badge,treeview.treeview-appearance-dense .treeview-wrapper .treeview-content treeview-basic-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper,treeview.treeview-appearance-dense .treeview-wrapper .treeview-content treeview-collapsable-item .treeview-item-wrapper .treeview-item .treeview-item-arrow,treeview.treeview-appearance-dense .treeview-wrapper .treeview-content treeview-collapsable-item .treeview-item-wrapper .treeview-item .treeview-item-badge,treeview.treeview-appearance-dense .treeview-wrapper .treeview-content treeview-collapsable-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper,treeview.treeview-appearance-dense .treeview-wrapper .treeview-content treeview-group-item .treeview-item-wrapper .treeview-item .treeview-item-arrow,treeview.treeview-appearance-dense .treeview-wrapper .treeview-content treeview-group-item .treeview-item-wrapper .treeview-item .treeview-item-badge,treeview.treeview-appearance-dense .treeview-wrapper .treeview-content treeview-group-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper{transition:opacity .4s cubic-bezier(.25,.8,.25,1)}treeview.treeview-appearance-dense .treeview-wrapper .treeview-content treeview-group-item:first-of-type{margin-top:0}treeview.treeview-appearance-dense:not(.treeview-hover):not(.treeview-mode-over) .treeview-wrapper .treeview-content .treeview-item-wrapper .treeview-item{padding:10px 16px}treeview.treeview-appearance-dense:not(.treeview-hover):not(.treeview-mode-over) .treeview-wrapper .treeview-content .treeview-item-wrapper .treeview-item .treeview-item-arrow,treeview.treeview-appearance-dense:not(.treeview-hover):not(.treeview-mode-over) .treeview-wrapper .treeview-content .treeview-item-wrapper .treeview-item .treeview-item-badge,treeview.treeview-appearance-dense:not(.treeview-hover):not(.treeview-mode-over) .treeview-wrapper .treeview-content .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper{white-space:nowrap;opacity:0}treeview.treeview-appearance-dense:not(.treeview-hover):not(.treeview-mode-over) .treeview-wrapper .treeview-content treeview-collapsable-item .treeview-item-children{display:none}treeview.treeview-appearance-dense:not(.treeview-hover):not(.treeview-mode-over) .treeview-wrapper .treeview-content treeview-group-item>.treeview-item-wrapper .treeview-item:before{content:\"\";position:absolute;top:20px;width:23px;border-top-width:2px}treeview.treeview-appearance-dense .treeview-aside-wrapper{left:var(--treeview-dense-width)}treeview.treeview-appearance-dense.treeview-hover .treeview-wrapper{width:var(--treeview-width)}treeview.treeview-appearance-dense.treeview-hover .treeview-wrapper .treeview-content .treeview-item-wrapper .treeview-item{width:calc(var(--treeview-width) - 24px);min-width:calc(var(--treeview-width) - 24px);max-width:calc(var(--treeview-width) - 24px)}treeview.treeview-appearance-dense.treeview-hover .treeview-wrapper .treeview-content .treeview-item-wrapper .treeview-item .treeview-item-arrow,treeview.treeview-appearance-dense.treeview-hover .treeview-wrapper .treeview-content .treeview-item-wrapper .treeview-item .treeview-item-badge,treeview.treeview-appearance-dense.treeview-hover .treeview-wrapper .treeview-content .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper{white-space:nowrap;animation:removeWhiteSpaceNoWrap 1ms linear .35s;animation-fill-mode:forwards}treeview.treeview-appearance-dense.treeview-hover .treeview-aside-wrapper{left:var(--treeview-width)}@keyframes removeWhiteSpaceNoWrap{0%{white-space:nowrap}99%{white-space:nowrap}to{white-space:normal}}:root{--treeview-thin-width: 80px}treeview.treeview-appearance-thin{width:var(--treeview-thin-width);min-width:var(--treeview-thin-width);max-width:var(--treeview-thin-width)}treeview.treeview-appearance-thin.treeview-position-left.treeview-mode-side{margin-left:calc(var(--treeview-thin-width) * -1)}treeview.treeview-appearance-thin.treeview-position-left.treeview-opened{margin-left:0}treeview.treeview-appearance-thin.treeview-position-right.treeview-mode-side{margin-right:calc(var(--treeview-thin-width) * -1)}treeview.treeview-appearance-thin.treeview-position-right.treeview-opened{margin-right:0}treeview.treeview-appearance-thin.treeview-position-right .treeview-aside-wrapper{left:auto;right:var(--treeview-thin-width)}treeview.treeview-appearance-thin .treeview-wrapper .treeview-content>treeview-aside-item,treeview.treeview-appearance-thin .treeview-wrapper .treeview-content>treeview-basic-item{flex-direction:column;justify-content:center;height:64px;min-height:64px;max-height:64px;padding:0 16px}treeview.treeview-appearance-thin .treeview-wrapper .treeview-content>treeview-aside-item .treeview-item-wrapper,treeview.treeview-appearance-thin .treeview-wrapper .treeview-content>treeview-basic-item .treeview-item-wrapper{display:flex;align-items:center;justify-content:center}treeview.treeview-appearance-thin .treeview-wrapper .treeview-content>treeview-aside-item .treeview-item-wrapper .treeview-item,treeview.treeview-appearance-thin .treeview-wrapper .treeview-content>treeview-basic-item .treeview-item-wrapper .treeview-item{justify-content:center;padding:12px;border-radius:4px}treeview.treeview-appearance-thin .treeview-wrapper .treeview-content>treeview-aside-item .treeview-item-wrapper .treeview-item .treeview-item-icon,treeview.treeview-appearance-thin .treeview-wrapper .treeview-content>treeview-basic-item .treeview-item-wrapper .treeview-item .treeview-item-icon{margin:0}treeview.treeview-appearance-thin .treeview-wrapper .treeview-content>treeview-aside-item .treeview-item-wrapper .treeview-item .treeview-item-arrow,treeview.treeview-appearance-thin .treeview-wrapper .treeview-content>treeview-aside-item .treeview-item-wrapper .treeview-item .treeview-item-badge-content,treeview.treeview-appearance-thin .treeview-wrapper .treeview-content>treeview-aside-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper,treeview.treeview-appearance-thin .treeview-wrapper .treeview-content>treeview-basic-item .treeview-item-wrapper .treeview-item .treeview-item-arrow,treeview.treeview-appearance-thin .treeview-wrapper .treeview-content>treeview-basic-item .treeview-item-wrapper .treeview-item .treeview-item-badge-content,treeview.treeview-appearance-thin .treeview-wrapper .treeview-content>treeview-basic-item .treeview-item-wrapper .treeview-item .treeview-item-title-wrapper{display:none}treeview.treeview-appearance-thin .treeview-wrapper .treeview-content>treeview-collapsable-item{display:none}treeview.treeview-appearance-thin .treeview-wrapper .treeview-content>treeview-group-item>.treeview-item-wrapper{display:none}treeview.treeview-appearance-thin .treeview-aside-wrapper{left:var(--treeview-thin-width)}\n"] }]
         }], ctorParameters: function () { return [{ type: i2.Router }, { type: i2$1.ScrollStrategyOptions }, { type: CreateKpIService }, { type: i0.ChangeDetectorRef }, { type: i4$2.ViewportScroller }, { type: TreeviewSharedService }]; }, propDecorators: { autoCollapse: [{
                 type: Input
             }], inner: [{
@@ -17334,6 +17355,9 @@ class CreateKpiTreeComponent {
         this.kpi_external = false;
         this.isComponentUpdata = false;
         this.userOptionContainer = [];
+        this.selected_aliases = [];
+        this.isKpiTreePrepared = false;
+        this.kpiConfigDataSource = [];
     }
     ngOnInit() {
         this.getAllKpiData();
@@ -17349,10 +17373,12 @@ class CreateKpiTreeComponent {
         });
     }
     getAllKpiData() {
-        this.loadingModal = false;
         this.keiParentDataSource = [];
-        this.service.getlistKpiBrowser().subscribe((data) => {
-            this.kpiData = data;
+        this.service.listKpiEntryConfigs().subscribe((data) => {
+            const userName = "admin";
+            this.kpiConfigDataSource = data;
+            this.kpiData = this.buildMenuTree(userName, data);
+            this.loadingModal = false;
             this.prepareParentDataSource(data);
         }, err => {
             this.loadingModal = false;
@@ -17361,104 +17387,95 @@ class CreateKpiTreeComponent {
     }
     prepareParentDataSource(data) {
         data.forEach((result) => {
-            if (result.tag_type == 'parent') {
-                let node = {
-                    "name": result.name,
-                    "tid": result.tid
-                };
-                this.keiParentDataSource.push(node);
-                this.prepareParentDataSource(result.nodes);
+            if (result.tagType == 'parent') {
+                this.keiParentDataSource.push(result);
             }
         });
     }
-    makeNewKpi() {
-        if (this.selected_kpi_tid !== undefined && this.selected_kpi_tid.length > 0) {
-            this.getHeistId(this.kpiData, this.selected_kpi_tid);
-            this.createNewKpiWithTid();
-        }
-        else {
-            this.heistValue = (this.kpiData.length != 0) ? this.getHighestTid(this.kpiData) : 0;
-            let value = parseInt(this.heistValue) + 1;
-            let obj = {
-                "name": this.select_kpi_name,
-                "tid": value.toString(),
-                "isBookmarked": false,
-                "isAccessible": this.kpi_external,
-                "lastAccessTime": "",
-                "tag_type": this.select_tag_type,
-                "id": this.selected_id,
-                "pageId": this.selected_page_id,
-                "desc": this.selected_desc,
-                "isVisible": this.kpi_visibility,
-                "nodes": [],
-                "config": {}
-            };
-            this.kpiData.push(obj);
-            if (this.select_tag_type == 'parent') {
-                let obj = {
-                    "name": this.select_kpi_name,
-                    "tid": value.toString(),
-                };
-                this.keiParentDataSource.push(obj);
-            }
-            if (this.select_tag_type == 'child') {
-                let obj = {
-                    "name": this.select_kpi_name,
-                    "id": this.selected_id,
-                    "pageId": this.selected_page_id,
-                    "searchFilter": false,
-                    "isSrvTypeOperator": false,
-                    "operationLevels": [],
-                    "fixOperationLevles": [],
-                    "api_config": []
-                };
-                this.service.configureKpiBrowserConfig(obj).subscribe(data => {
-                    console.log("kpi browser config created");
-                });
-            }
-            this.submitNewKpi();
-        }
+    makeNewKpiWithUserEntity() {
+        let kpiObj = {
+            "kpiId": this.selected_id,
+            "kpiName": this.select_kpi_name,
+            "aliases": this.selected_aliases,
+            "pageId": this.selected_page_id,
+            "description": this.selected_desc,
+            "kpiInfo": "",
+            "tagType": this.select_tag_type,
+            "active": true,
+            "visibility": this.kpi_visibility,
+            "externalKpi": this.kpi_external,
+            "target": "",
+            "icon": "",
+            "url": "",
+            "kpiType": this.select_tag_type == "parent" ? "collapsable" : "basic",
+            "parentTid": this.selected_kpi_tid,
+            "childTid": this.selected_kpi_child_tid,
+            "permissions": this.userOptionContainer,
+        };
+        this.service.createKpiEntryConfig(kpiObj).subscribe(data => {
+            this.toastr.success('KPI Created Successfully');
+            this.getAllKpiData();
+            this.getReseteKpi();
+        }, err => {
+            this.toastr.error('Unexpected Server Exception. Please contact System Admin.', 'KPI Config');
+        });
+        console.log("KPI with User Entity Obj:", kpiObj);
     }
-    createNewKpiWithTid() {
-        let auto_tid = this.autoIncrement(this.selected_kpi_tid, this.heistValue);
-        let obj = {
-            "name": this.select_kpi_name,
-            "tid": auto_tid,
-            "isBookmarked": false,
-            "isAccessible": this.kpi_external,
-            "lastAccessTime": "",
-            "tag_type": this.select_tag_type,
-            "id": this.selected_id,
+    getEditableKpi(kpi) {
+        const data = this.kpiConfigDataSource.find((item) => item.kpiId === kpi.id);
+        const tidKey = data.tagType === 'child' && data.childTid.length > 3 ? 'childTid' : 'parentTid';
+        const parentName = this.keiParentDataSource.find((item) => item[tidKey] == data["parentTid"]);
+        this.parante_kpi_name = parentName ? parentName['kpiId'] : null;
+        this.selected_id = data["kpiId"];
+        this.select_kpi_name = data["kpiName"];
+        this.selected_aliases = data["aliases"];
+        this.selected_page_id = data["pageId"];
+        this.selected_desc = data["description"];
+        this.select_tag_type = data["tagType"];
+        this.kpi_visibility = data["visibility"];
+        this.kpi_external = data["externalKpi"];
+        this.selected_kpi_tid = data["parentTid"];
+        this.selected_kpi_child_tid = data["childTid"];
+        this.userOptionContainer = (data["permissions"] && data["permissions"].length > 0) ? data["permissions"] : [];
+        this.isEditKpiAdded = true;
+    }
+    getUpdateKpi() {
+        let kpiObj = {
+            "kpiId": this.selected_id,
+            "kpiName": this.select_kpi_name,
+            "aliases": this.selected_aliases,
             "pageId": this.selected_page_id,
-            "desc": this.selected_desc,
-            "isVisible": this.kpi_visibility,
-            "nodes": [],
-            "config": {}
+            "description": this.selected_desc,
+            "kpiInfo": "",
+            "tagType": this.select_tag_type,
+            "active": true,
+            "visibility": this.kpi_visibility,
+            "externalKpi": this.kpi_external,
+            "target": "",
+            "icon": "",
+            "url": "",
+            "kpiType": this.select_tag_type == "parent" ? "collapsable" : "basic",
+            "parentTid": this.selected_kpi_tid,
+            "childTid": this.selected_kpi_child_tid,
+            "permissions": this.userOptionContainer,
         };
-        if (this.select_tag_type == 'parent') {
-            let obj = {
-                "name": this.select_kpi_name,
-                "tid": auto_tid
-            };
-            this.keiParentDataSource.push(obj);
-        }
-        if (this.select_tag_type == 'child') {
-            let obj = {
-                "name": this.select_kpi_name,
-                "id": this.selected_id,
-                "pageId": this.selected_page_id,
-                "searchFilter": false,
-                "isSrvTypeOperator": false,
-                "operationLevels": [],
-                "fixOperationLevles": [],
-                "api_config": []
-            };
-            this.service.configureKpiBrowserConfig(obj).subscribe(data => {
-                console.log("kpi browser config created");
-            });
+        this.service.updateKpiEntryConfig(kpiObj).subscribe(data => {
+            this.toastr.success('KPI Updated Successfully');
+            this.getAllKpiData();
+            this.getReseteKpi();
+            this.isEditKpiAdded = false;
+        }, err => {
+            this.toastr.error('Unexpected Server Exception. Please contact System Admin.', 'KPI Config');
+        });
+        console.log("KPI with User Entity Obj:", kpiObj);
+    }
+    onCustomDimentionCreating(args) {
+        const newValue = args.text;
+        args.customItem = newValue;
+        const isItemInDataSource = this.selected_aliases.some((item) => item === newValue);
+        if (!isItemInDataSource) {
+            this.selected_aliases.unshift(newValue);
         }
-        this.setKpibyTid(this.kpiData, this.selected_kpi_tid, obj);
-        this.submitNewKpi();
     }
     getReseteKpi() {
         this.select_kpi_name = '';
@@ -17476,74 +17493,23 @@ class CreateKpiTreeComponent {
         this.editable_desc = '';
         this.editable_info = '';
         this.parante_kpi_name = '';
+        this.selected_kpi_child_tid = '';
+        this.selected_aliases = [];
         this.kpi_external = false;
         this.kpi_visibility = false;
         this.isComponentUpdata = false;
-    }
-    getDeletKpi(tid) {
-        console.log(this.selected_p_kpi);
+        this.isEditKpiAdded = false;
     }
     addTagtypeValue(e) {
         this.select_tag_type = e.value;
     }
     getKpiItemValue(e) {
-        const kpi_data = this.keiParentDataSource.find((item) => item.tid === e.value);
-        this.selected_kpi_tid = kpi_data.tid;
-    }
-    autoIncrement(string1, string2) {
-        if (string2 === null) {
-            const numberPart = string1 + '.1';
-            return numberPart;
-        }
-        else {
-            const parts = string2.split('.');
-            let lastPart = parseInt(parts[parts.length - 1], 10);
-            let new_number = lastPart++;
-            parts[parts.length - 1] = lastPart.toString();
-            return parts.join(".");
+        if (e.event) {
+            const kpi_data = this.keiParentDataSource.find((item) => item.kpiId === e.value);
+            const tidKey = this.select_tag_type === 'child' && this.isEditKpiAdded ? 'childTid' : 'parentTid';
+            this.selected_kpi_tid = kpi_data[tidKey];
         }
     }
-    setKpibyTid(data, tid, newKpiObj) {
-        data.forEach(result => {
-            if (result.nodes !== undefined) {
-                if (result.tid == tid) {
-                    result.nodes.push(newKpiObj);
-                }
-                this.setKpibyTid(result.nodes, tid, newKpiObj);
-            }
-        });
-    }
-    getHeistId(data, tid) {
-        data.forEach((result) => {
-            if (result.tid === tid) {
-                if (result.nodes.length > 0) {
-                    this.heistValue = this.getHighestTid(result.nodes);
-                }
-                else {
-                    this.heistValue = null;
-                }
-            }
-            else if (result.nodes !== undefined && result.nodes.length > 0) {
-                this.getHeistId(result.nodes, tid);
-            }
-        });
-    }
-    getHighestTid(data) {
-        const highestTid = data.reduce((maxTid, currentItem) => {
-            const currentTidParts = currentItem.tid.split('.').map(part => parseInt(part, 10));
-            const maxTidParts = maxTid.split('.').map(part => parseInt(part, 10));
-            for (let i = 0; i < currentTidParts.length; i++) {
-                if (currentTidParts[i] > maxTidParts[i]) {
-                    return currentItem.tid;
-                }
-                else if (currentTidParts[i] < maxTidParts[i]) {
-                    return maxTid;
-                }
-            }
-            return maxTid;
-        }, data[0].tid);
-        return highestTid;
-    }
     addNewKpi() {
         this.isNewKpiAdded = true;
         this.isEditKpiAdded = false;
@@ -17551,22 +17517,6 @@ class CreateKpiTreeComponent {
     cancelUpdate() {
         this.isEditKpiAdded = false;
     }
-    getEditableKpi(data) {
-        this.isComponentUpdata = false;
-        this.isEditKpiAdded = true;
-        this.isNewKpiAdded = false;
-        this.isFromEditable = true;
-        this.editable_desc = data.desc;
-        this.editable_info = (data.kpiInfo) ? data.kpiInfo : "";
-        this.editable_kpi_name = data.name;
-        this.editable_tag_type = data.tag_type;
-        this.editable_kpi_tid = data.tid;
-        this.editable_id = data.id;
-        this.editable_page_id = data.pageId;
-        this.kpi_visibility = data.isVisible;
-        this.kpi_external = data.isAccessible;
-        this.parante_kpi_name = this.getKpiParrentName(data.tid);
-    }
     getKpiParrentName(input) {
         const lastIndex = input.lastIndexOf('.');
         if (lastIndex === -1) {
@@ -17574,55 +17524,15 @@ class CreateKpiTreeComponent {
         }
         return input.substring(0, lastIndex);
     }
-    getUpdateKpi() {
-        if (!this.isComponentUpdata) {
-            this.getUpdateKpiName(this.kpiData, this.editable_kpi_tid);
-        }
-        setTimeout(() => {
-            this.submitNewKpi();
-            this.toastr.success('KPI Updated Successfully');
-            this.reseteUpdateKpiForm();
-            this.isEditKpiAdded = false;
-        }, 500);
-    }
-    getDeleteKpi() {
-        this.getDeleteKpiName(this.kpiData, this.editable_kpi_tid);
-        setTimeout(() => {
-            this.submitNewKpi();
+    getDeletKpi() {
+        this.service.deleteKpiEntryConfig(this.selected_id).subscribe(data => {
             this.toastr.success('KPI Deleted Successfully');
-            this.reseteUpdateKpiForm();
-            this.isEditKpiAdded = false;
-        }, 500);
-    }
-    getUpdateKpiName(data, tid) {
-        data.forEach((result) => {
-            if (result.tid === tid) {
-                result.desc = this.editable_desc;
-                result.kpiInfo = this.editable_info;
-                result.name = this.editable_kpi_name;
-                result.id = this.editable_id;
-                result.pageId = this.editable_page_id;
-                result.tag_type = this.editable_tag_type;
-                result.isVisible = this.kpi_visibility;
-                result.isAccessible = this.kpi_external;
-                result.tid = this.editable_kpi_tid;
-            }
-            else if (result.nodes !== undefined && result.nodes.length > 0) {
-                this.getUpdateKpiName(result.nodes, tid);
-            }
+            this.getAllKpiData();
+            this.getReseteKpi();
+        }, err => {
+            this.toastr.error('Unexpected Server Exception. Please contact System Admin.', 'KPI Config');
         });
     }
-    getDeleteKpiName(data, tid) {
-        for (let i = data.length - 1; i >= 0; i--) {
-            const result = data[i];
-            if (result.tid === tid) {
-                data.splice(i, 1);
-            }
-            else if (result.nodes !== undefined && result.nodes.length > 0) {
-                this.getDeleteKpiName(result.nodes, tid);
-            }
-        }
-    }
     reseteUpdateKpiForm() {
         this.editable_desc = undefined;
         this.editable_info = undefined;
@@ -17643,73 +17553,66 @@ class CreateKpiTreeComponent {
             this.getReseteKpi();
         });
     }
-    getNewParrentKpiItemValue(e) {
-        this.isComponentUpdata = true;
-        const kpi_data = this.keiParentDataSource.find((item) => item.tid === e.value);
-        this.getHeistId(this.kpiData, kpi_data.tid);
-        let auto_tid = this.autoIncrement(kpi_data.tid, this.heistValue);
-        let obj = {
-            "name": this.editable_kpi_name,
-            "tid": auto_tid,
-            "isBookmarked": false,
-            "isAccessible": this.kpi_external,
-            "lastAccessTime": "",
-            "tag_type": this.editable_tag_type,
-            "id": this.editable_id,
-            "pageId": this.editable_page_id,
-            "desc": this.editable_desc,
-            "kpiInfo": this.editable_info,
-            "isVisible": this.kpi_visibility,
-            "nodes": [],
-            "config": {}
-        };
-        this.getDeleteKpiName(this.kpiData, this.editable_kpi_tid);
-        this.setKpibyTid(this.kpiData, kpi_data.tid, obj);
-        this.editable_kpi_tid = kpi_data.tid;
-    }
-    makeNewKpiWithUserEntity() {
-        this.userOptionContainer.forEach(element => {
-            let att_value = element.attributeValues.split(",");
-            element.attributeValues = att_value;
+    buildMenuTree(userName, kpiData) {
+        let filteredMenus = kpiData;
+        const menuMap = new Map();
+        const menuTree = [];
+        filteredMenus.forEach(menu => {
+            menuMap.set(menu.childTid || menu.parentTid, {
+                id: menu.kpiId,
+                title: menu.kpiName,
+                icon: menu.icon,
+                type: menu.kpiType,
+                tagType: menu.tagType,
+                visibility: menu.visibility,
+                ...(menu.link && { link: menu.link.replace(/^\/+/, '') }),
+                children: []
+            });
         });
-        if (this.selected_kpi_tid !== undefined && this.selected_kpi_tid.length > 0) {
-            this.getHeistId(this.kpiData, this.selected_kpi_tid);
-        }
-        else {
-            this.heistValue = (this.kpiData.length != 0) ? this.getHighestTid(this.kpiData) : 0;
-            let value = parseInt(this.heistValue) + 1;
-        }
-        let kpiObj = {
-            "kpiId": this.selected_id,
-            "pageId": this.selected_page_id,
-            "title": this.select_kpi_name,
-            "description": this.selected_desc,
-            "kpiInfo": this.selected_info,
-            "tagType": this.select_tag_type,
-            "active": true,
-            "visibility": this.kpi_visibility,
-            "externalKpi": this.kpi_external,
-            "target": "",
-            "icon": "",
-            "url": "",
-            "kpiType": "",
-            "parentTid": this.selected_kpi_tid,
-            "childTid": "",
-            "measures": this.userOptionContainer,
-        };
-        console.log("KPI with User Entity Obj:", kpiObj);
-    }
-    routeToKpiConfig() {
-        this.router.navigate(['apps/controlPanel/kpiController/kpiConfig']);
+        filteredMenus.forEach(kpi => {
+            if (kpi.parentTid && kpi.childTid) {
+                const parent = menuMap.get(kpi.parentTid);
+                if (parent) {
+                    parent.children.push(menuMap.get(kpi.childTid));
+                }
+            }
+            else {
+                menuTree.push(menuMap.get(kpi.parentTid));
+            }
+        });
+        return menuTree;
     }
 }
 CreateKpiTreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CreateKpiTreeComponent, deps: [{ token: CommonService }, { token: i8.FormBuilder }, { token: CreateKpIService }, { token: i4$1.ToastrService }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component });
-CreateKpiTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CreateKpiTreeComponent, selector: "app-create-kpi", ngImport: i0, template: "<app-loading *ngIf=\"loadingModal\"></app-loading>\n<div class=\"p-4 flex flex-row w-full\">\n    <div class=\"mx-2 bg-white dark:bg-transparent border-r\">\n\n        <treeview class=\"dark bg-gray-900 dark:bg-transparent\" [name]=\"'mainNavigation'\" [routeKey]=\"'raKpi'\"\n            [navigation]=\"kpiData\" [isSearchBox]=\"false\" [isEditIcon]=\"true\" (editableKpiData)=\"getEditableKpi($event)\">\n        </treeview>\n    </div>\n    <div class=\"mx-2 w-full\">\n        <div class=\"flex flex-row item-center justify-center my-8\">\n            <button class=\"{{commonService.btn_warning_md}}\" (click)=\"addNewKpi()\">Add New KPI</button>\n            <button class=\"{{commonService.btn_primary_md}}\" (click)=\"routeToKpiConfig()\"\n                routerLinkActive=\"router-link-active\">Configure KPI</button>\n        </div>\n        <ng-container *ngIf=\"isNewKpiAdded\">\n            <div class=\"px-2 w-full\">\n                <div class=\"m-1\">\n                    <div class=\"px-2 pt-1 w-full\">\n                        <p class=\"text-lg mt-2\">Name</p>\n                        <dx-text-box [(ngModel)]=\"select_kpi_name\"></dx-text-box>\n                    </div>\n                </div>\n\n                <div class=\"m-1\">\n                    <div class=\"px-2 pt-1  w-full\">\n                        <p class=\"text-lg mt-2\"> Tag Type</p>\n                        <dx-select-box [dataSource]=\"tagType\" [(ngModel)]=\"select_tag_type\"\n                            (onValueChanged)=\"addTagtypeValue($event)\"></dx-select-box>\n                    </div>\n                </div>\n                <div class=\"m-1\">\n                    <div class=\"px-2 pt-1  w-full\">\n                        <p class=\"text-lg mt-2\">ID</p>\n                        <dx-text-box [(ngModel)]=\"selected_id\"></dx-text-box>\n                    </div>\n                </div>\n                <div class=\"m-1\">\n                    <div class=\"px-2 pt-1  w-full\">\n                        <p class=\"text-lg mt-2\">Page ID</p>\n                        <!-- <dx-text-box [(ngModel)]=\"selected_page_id\"></dx-text-box> -->\n                        <dx-select-box [items]=\"templateDataSource\" valueExpr=\"pageId\" displayExpr=\"pageName\" [searchEnabled]=\"true\"\n                            [(ngModel)]=\"selected_page_id\"></dx-select-box>\n                    </div>\n                </div>\n                <div class=\"m-1\">\n                    <div class=\"px-2 pt-1  w-full\">\n                        <p class=\"text-lg mt-2\">Description</p>\n                        <dx-html-editor height=\"'auto'\" [(ngModel)]=\"selected_desc\">\n                            <dxo-toolbar [multiline]=\"false\">\n\n                                <dxi-item name=\"size\"\n                                    [acceptedValues]=\"['8pt', '10pt', '12pt', '14pt', '18pt', '24pt', '36pt']\"\n                                    [options]=\"{ inputAttr: { 'aria-label': 'Font size' } }\"></dxi-item>\n                                <dxi-item name=\"font\" [acceptedValues]=\"[\n                                    'Arial',\n                                    'Courier New',\n                                    'Georgia',\n                                    'Impact',\n                                    'Lucida Console',\n                                    'Tahoma',\n                                    'Times New Roman',\n                                    'Verdana'\n                                  ]\" [options]=\"{ inputAttr: { 'aria-label': 'Font family' } }\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"bold\"></dxi-item>\n                                <dxi-item name=\"italic\"></dxi-item>\n                                <dxi-item name=\"underline\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"alignLeft\"></dxi-item>\n                                <dxi-item name=\"alignCenter\"></dxi-item>\n                                <dxi-item name=\"alignRight\"></dxi-item>\n                                <dxi-item name=\"alignJustify\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"orderedList\"></dxi-item>\n                                <dxi-item name=\"bulletList\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"header\" [acceptedValues]=\"[false, 1, 2, 3, 4, 5]\"\n                                    [options]=\"{ inputAttr: { 'aria-label': 'Header' } }\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"color\"></dxi-item>\n                                <dxi-item name=\"background\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"link\"></dxi-item>\n                                <dxi-item name=\"image\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"clear\"></dxi-item>\n                                <dxi-item name=\"codeBlock\"></dxi-item>\n                            </dxo-toolbar>\n                            <dxo-media-resizing [enabled]=\"true\"> </dxo-media-resizing>\n                            <dxo-image-upload [tabs]=\"['file', 'url']\" fileUploadMode=\"base64\">\n                            </dxo-image-upload>\n                        </dx-html-editor>\n                    </div>\n                </div>\n\n                <div class=\"m-1\">\n                    <div class=\"px-2 pt-1 w-full\">\n                        <p class=\"text-lg mt-2\"> Parent Component </p>\n                        <dx-select-box [dataSource]=\"keiParentDataSource\" displayExpr=\"name\" valueExpr=\"tid\"\n                            (onValueChanged)=\"getKpiItemValue($event)\" [value]=\"parante_kpi_name\"></dx-select-box>\n                    </div>\n                </div>\n                <div class=\"m-1\">\n                    <div class=\"px-2 pt-1  w-full\">\n                        <p class=\"text-lg mt-2\">TID</p>\n                        <dx-text-box [(ngModel)]=\"selected_kpi_tid\" [readOnly]=\"true\"></dx-text-box>\n                    </div>\n                </div>\n                <div class=\"flex flex-row justify-between mt-3\">\n                    <div class=\"px-2 pt-1  w-full\">\n                        <dx-check-box [(ngModel)]=\"kpi_visibility\" text=\"Visibility\"></dx-check-box>\n                    </div>\n                    <div class=\"px-2 pt-1  w-full\">\n                        <dx-check-box [(ngModel)]=\"kpi_external\" text=\"External KPI\"></dx-check-box>\n                    </div>\n                </div>\n                <div class=\"m-1\">\n                    <div class=\"px-2 pt-1  w-full\">\n                        <p class=\"text-lg mt-2\">KPI Info</p>\n                        <dx-html-editor height=\"'auto'\" [(ngModel)]=\"selected_info\">\n                            <dxo-toolbar [multiline]=\"false\">\n\n                                <dxi-item name=\"size\"\n                                    [acceptedValues]=\"['8pt', '10pt', '12pt', '14pt', '18pt', '24pt', '36pt']\"\n                                    [options]=\"{ inputAttr: { 'aria-label': 'Font size' } }\"></dxi-item>\n                                <dxi-item name=\"font\" [acceptedValues]=\"[\n                                                    'Arial',\n                                                    'Courier New',\n                                                    'Georgia',\n                                                    'Impact',\n                                                    'Lucida Console',\n                                                    'Tahoma',\n                                                    'Times New Roman',\n                                                    'Verdana'\n                                                  ]\"\n                                    [options]=\"{ inputAttr: { 'aria-label': 'Font family' } }\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"bold\"></dxi-item>\n                                <dxi-item name=\"italic\"></dxi-item>\n                                <dxi-item name=\"underline\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"alignLeft\"></dxi-item>\n                                <dxi-item name=\"alignCenter\"></dxi-item>\n                                <dxi-item name=\"alignRight\"></dxi-item>\n                                <dxi-item name=\"alignJustify\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"orderedList\"></dxi-item>\n                                <dxi-item name=\"bulletList\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"header\" [acceptedValues]=\"[false, 1, 2, 3, 4, 5]\"\n                                    [options]=\"{ inputAttr: { 'aria-label': 'Header' } }\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"color\"></dxi-item>\n                                <dxi-item name=\"background\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"link\"></dxi-item>\n                                <dxi-item name=\"image\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"clear\"></dxi-item>\n                                <dxi-item name=\"codeBlock\"></dxi-item>\n                            </dxo-toolbar>\n                            <dxo-media-resizing [enabled]=\"true\"> </dxo-media-resizing>\n                            <dxo-image-upload [tabs]=\"['file', 'url']\" fileUploadMode=\"base64\">\n                            </dxo-image-upload>\n                        </dx-html-editor>\n                    </div>\n                </div>\n\n                 <app-user-access [(userOptionContainer)]=\"userOptionContainer\">\n                </app-user-access>\n\n                <div class=\"flex flex-auto mt-5 justify-end\">\n                    <button class=\"{{commonService.btn_primary_md}}\" (click)=\"makeNewKpi()\">Create\n                    </button>\n                    <button class=\"{{commonService.btn_primary_md}}\" (click)=\"makeNewKpiWithUserEntity()\">Create With User Privilege\n                    </button>\n                    <button class=\"{{commonService.btn_warning_md}}\" (click)=\"getReseteKpi()\">Reset</button>\n\n                </div>\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"isEditKpiAdded\">\n            <div class=\"px-2 w-full\">\n                <div class=\"m-1\">\n                    <div class=\"px-2 pt-1 w-full\">\n                        <p class=\"text-lg mb-2\">Name</p>\n                        <dx-text-box [(ngModel)]=\"editable_kpi_name\"></dx-text-box>\n                    </div>\n                </div>\n                <div class=\"m-1\">\n                    <div class=\"px-2 pt-1  w-full\">\n                        <p class=\"text-lg mt-2\"> Tag Type</p>\n                        <dx-select-box [dataSource]=\"tagType\" [(ngModel)]=\"editable_tag_type\"\n                            (onValueChanged)=\"addTagtypeValue($event)\" [readOnly]=\"isFromEditable\"></dx-select-box>\n                    </div>\n                </div>\n                <div class=\"m-1\">\n                    <div class=\"px-2 pt-1  w-full\">\n                        <p class=\"text-lg mt-2\">ID</p>\n                        <dx-text-box [(ngModel)]=\"editable_id\"></dx-text-box>\n                    </div>\n                </div>\n                <div class=\"m-1\">\n                    <div class=\"px-2 pt-1  w-full\">\n                        <p class=\"text-lg mt-2\">Page ID</p>\n                        <!-- <dx-text-box [(ngModel)]=\"editable_page_id\"></dx-text-box> -->\n                        <dx-select-box [items]=\"templateDataSource\" valueExpr=\"pageId\" displayExpr=\"pageName\" [searchEnabled]=\"true\"\n                            [(ngModel)]=\"editable_page_id\"></dx-select-box>\n\n                    </div>\n                </div>\n                <div class=\"m-1\">\n                    <div class=\"px-2 pt-1  w-full\">\n                        <p class=\"text-lg mt-2\">Description</p>\n                        <dx-html-editor height=\"'auto'\" [(ngModel)]=\"editable_desc\">\n                            <dxo-toolbar [multiline]=\"true\">\n                                <dxi-item name=\"undo\"></dxi-item>\n                                <dxi-item name=\"redo\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"size\"\n                                    [acceptedValues]=\"['8pt', '10pt', '12pt', '14pt', '18pt', '24pt', '36pt']\"\n                                    [options]=\"{ inputAttr: { 'aria-label': 'Font size' } }\"></dxi-item>\n                                <dxi-item name=\"font\" [acceptedValues]=\"[\n                                                                'Arial',\n                                                                'Courier New',\n                                                                'Georgia',\n                                                                'Impact',\n                                                                'Lucida Console',\n                                                                'Tahoma',\n                                                                'Times New Roman',\n                                                                'Verdana'\n                                                              ]\"\n                                    [options]=\"{ inputAttr: { 'aria-label': 'Font family' } }\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"bold\"></dxi-item>\n                                <dxi-item name=\"italic\"></dxi-item>\n                                <dxi-item name=\"underline\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"alignLeft\"></dxi-item>\n                                <dxi-item name=\"alignCenter\"></dxi-item>\n                                <dxi-item name=\"alignRight\"></dxi-item>\n                                <dxi-item name=\"alignJustify\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"orderedList\"></dxi-item>\n                                <dxi-item name=\"bulletList\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"header\" [acceptedValues]=\"[false, 1, 2, 3, 4, 5]\"\n                                    [options]=\"{ inputAttr: { 'aria-label': 'Header' } }\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"color\"></dxi-item>\n                                <dxi-item name=\"background\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"link\"></dxi-item>\n                                <dxi-item name=\"image\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"clear\"></dxi-item>\n                                <dxi-item name=\"blockquote\"></dxi-item>\n\n                            </dxo-toolbar>\n                            <dxo-media-resizing [enabled]=\"true\"> </dxo-media-resizing>\n                            <dxo-image-upload [tabs]=\"['file', 'url']\" fileUploadMode=\"base64\">\n                            </dxo-image-upload>\n                        </dx-html-editor>\n                    </div>\n                </div>\n                <div class=\"m-1\">\n                    <div class=\"px-2 pt-1 w-full\">\n                        <p class=\"text-lg mt-2\"> Parent Component </p>\n                        <dx-select-box [searchEnabled]=\"true\" [readOnly]=\"editable_tag_type == 'parent'\"\n                            [dataSource]=\"keiParentDataSource\" displayExpr=\"name\" valueExpr=\"tid\"\n                            (onValueChanged)=\"getNewParrentKpiItemValue($event)\"\n                            [value]=\"parante_kpi_name\"></dx-select-box>\n                    </div>\n                </div>\n\n                <div class=\"m-1\">\n                    <div class=\"px-2 pt-1  w-full\">\n                        <p class=\"text-lg mt-2\">TID</p>\n                        <dx-text-box [(ngModel)]=\"editable_kpi_tid\" [readOnly]=\"false\"></dx-text-box>\n                    </div>\n                </div>\n                <div class=\"flex flex-row justify-between mt-3\">\n\n                    <div class=\"px-2 pt-1 w-full\">\n                        <dx-check-box [(ngModel)]=\"kpi_visibility\" text=\"Visibility\"></dx-check-box>\n                    </div>\n\n                    <div class=\"px-2 pt-1 w-full\">\n                        <dx-check-box [(ngModel)]=\"kpi_external\" text=\"External KPI\"></dx-check-box>\n                    </div>\n                </div>\n                <div class=\"m-1\">\n                    <div class=\"px-2 pt-1  w-full\">\n                        <p class=\"text-lg mt-2\">KPI Info</p>\n                        <dx-html-editor height=\"'auto'\" [(ngModel)]=\"editable_info\">\n                            <dxo-toolbar [multiline]=\"false\">\n\n                                <dxi-item name=\"size\"\n                                    [acceptedValues]=\"['8pt', '10pt', '12pt', '14pt', '18pt', '24pt', '36pt']\"\n                                    [options]=\"{ inputAttr: { 'aria-label': 'Font size' } }\"></dxi-item>\n                                <dxi-item name=\"font\" [acceptedValues]=\"[\n                                                    'Arial',\n                                                    'Courier New',\n                                                    'Georgia',\n                                                    'Impact',\n                                                    'Lucida Console',\n                                                    'Tahoma',\n                                                    'Times New Roman',\n                                                    'Verdana'\n                                                  ]\"\n                                    [options]=\"{ inputAttr: { 'aria-label': 'Font family' } }\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"bold\"></dxi-item>\n                                <dxi-item name=\"italic\"></dxi-item>\n                                <dxi-item name=\"underline\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"alignLeft\"></dxi-item>\n                                <dxi-item name=\"alignCenter\"></dxi-item>\n                                <dxi-item name=\"alignRight\"></dxi-item>\n                                <dxi-item name=\"alignJustify\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"orderedList\"></dxi-item>\n                                <dxi-item name=\"bulletList\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"header\" [acceptedValues]=\"[false, 1, 2, 3, 4, 5]\"\n                                    [options]=\"{ inputAttr: { 'aria-label': 'Header' } }\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"color\"></dxi-item>\n                                <dxi-item name=\"background\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"link\"></dxi-item>\n                                <dxi-item name=\"image\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"clear\"></dxi-item>\n                                <dxi-item name=\"codeBlock\"></dxi-item>\n                            </dxo-toolbar>\n                            <dxo-media-resizing [enabled]=\"true\"> </dxo-media-resizing>\n                            <dxo-image-upload [tabs]=\"['file', 'url']\" fileUploadMode=\"base64\">\n                            </dxo-image-upload>\n                        </dx-html-editor>\n                    </div>\n                </div>\n                <div class=\"flex flex-auto mt-3 justify-end\">\n                    <button class=\"{{commonService.btn_primary_md}}\" (click)=\"getUpdateKpi()\">Update\n                    </button>\n                    <button class=\"{{commonService.btn_danger_md}}\" (click)=\"getDeleteKpi()\">Delete\n                    </button>\n                    <!-- <button class=\"{{commonService.btn_danger_md}}\" (click)=\"cancelUpdate()\">Cancle</button> -->\n\n                </div>\n            </div>\n        </ng-container>\n    </div>\n\n\n\n\n</div>", styles: [":host ::ng-deep treeview .treeview-wrapper{width:100%!important}\n"], dependencies: [{ kind: "directive", type: i4$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoadingComponent$1, selector: "app-loading" }, { kind: "component", type: i6.DxiItemComponent, selector: "dxi-item", inputs: ["disabled", "html", "icon", "template", "text", "title", "visible", "onClick", "stylingMode", "type", "baseSize", "box", "ratio", "shrink", "elementAttr", "hint", "beginGroup", "closeMenuOnClick", "items", "selectable", "selected", "colSpan", "cssClass", "dataField", "editorOptions", "editorType", "helpText", "isRequired", "itemType", "label", "name", "validationRules", "visibleIndex", "alignItemLabels", "caption", "colCount", "colCountByScreen", "tabPanelOptions", "tabs", "badge", "tabTemplate", "buttonOptions", "horizontalAlignment", "verticalAlignment", "locateInMenu", "location", "menuItemTemplate", "options", "showText", "widget", "height", "width", "imageAlt", "imageSrc", "acceptedValues", "formatName", "formatValues", "key", "showChevron", "menuTemplate", "heightRatio", "widthRatio", "expanded", "hasItems", "id", "parentId"] }, { kind: "component", type: i5$1.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.DxoToolbarComponent, selector: "dxo-toolbar", inputs: ["disabled", "items", "visible", "fileSelectionItems", "container", "multiline"] }, { kind: "component", type: i10$2.DxHtmlEditorComponent, selector: "dx-html-editor", inputs: ["accessKey", "activeStateEnabled", "allowSoftLineBreak", "customizeModules", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "imageUpload", "isValid", "mediaResizing", "mentions", "name", "placeholder", "readOnly", "rtlEnabled", "stylingMode", "tabIndex", "tableContextMenu", "tableResizing", "toolbar", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueType", "variables", "visible", "width"], outputs: ["onContentReady", "onDisposing", "onFocusIn", "onFocusOut", "onInitialized", "onOptionChanged", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "allowSoftLineBreakChange", "customizeModulesChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "imageUploadChange", "isValidChange", "mediaResizingChange", "mentionsChange", "nameChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "stylingModeChange", "tabIndexChange", "tableContextMenuChange", "tableResizingChange", "toolbarChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueTypeChange", "variablesChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "component", type: i6.DxoImageUploadComponent, selector: "dxo-image-upload", inputs: ["fileUploaderOptions", "fileUploadMode", "tabs", "uploadDirectory", "uploadUrl"] }, { kind: "component", type: i6.DxoMediaResizingComponent, selector: "dxo-media-resizing", inputs: ["allowedTargets", "enabled"] }, { 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: UserAccessComponent, selector: "app-user-access", inputs: ["userOptionContainer"], outputs: ["userOptionContainerChange"] }, { kind: "component", type: TreeviewComponent, selector: "treeview", inputs: ["autoCollapse", "inner", "navigation", "opened", "isEditIcon", "isSearchBox", "transparentOverlay", "treeListForSearchBox", "name", "openTreeId", "routeKey"], outputs: ["editableKpiData"] }] });
+CreateKpiTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CreateKpiTreeComponent, selector: "app-create-kpi", ngImport: i0, template: "<app-loading *ngIf=\"loadingModal\"></app-loading>\n<div class=\"p-4 flex flex-row w-full\" *ngIf=\"!loadingModal\">\n    <div class=\"mx-2 bg-white dark:bg-transparent border-r\">\n        <!-- <ng-container *ngIf=\"isKpiTreePrepared\"> -->\n            <treeview class=\"dark bg-gray-900 dark:bg-transparent\" [name]=\"'mainNavigation'\" [routeKey]=\"'raKpi'\"\n                [navigation]=\"kpiData\" [isSearchBox]=\"false\" [isEditIcon]=\"true\"\n                (editableKpiData)=\"getEditableKpi($event)\">\n            </treeview>\n        <!-- </ng-container> -->\n\n    </div>\n    <div class=\"mx-2 w-full\">\n        <!-- <div class=\"flex flex-row item-center justify-center my-8\">\n            <button class=\"{{commonService.btn_warning_md}}\" (click)=\"addNewKpi()\">Add New KPI</button>\n            <button class=\"{{commonService.btn_primary_md}}\" (click)=\"routeToKpiConfig()\"\n                routerLinkActive=\"router-link-active\">Configure KPI</button>\n        </div> -->\n        <!-- <ng-container *ngIf=\"isNewKpiAdded\"> -->\n        <!-- <div class=\"px-2 w-full\"> -->\n        <div class=\"m-1\">\n            <div class=\"px-2 pt-1 w-full\">\n                <p class=\"text-lg mt-2\">Name</p>\n                <dx-text-box [(ngModel)]=\"select_kpi_name\"></dx-text-box>\n            </div>\n        </div>\n        <div class=\"flex flex-row w-full\">\n            <div class=\"m-1 w-1/3\">\n                <div class=\"px-2 pt-1  w-full\">\n                    <p class=\"text-lg mt-2\"> Tag Type</p>\n                    <dx-select-box [dataSource]=\"tagType\" [(ngModel)]=\"select_tag_type\"\n                        (onValueChanged)=\"addTagtypeValue($event)\"></dx-select-box>\n                </div>\n            </div>\n            <!-- (onCustomItemCreating)=\"onCustomDimentionCreating($event)\" -->\n            <div class=\"m-1 w-full\">\n                <div class=\"px-2 pt-1  w-full\">\n                    <p class=\"text-lg mt-2\">Aliases</p>\n                    <dx-tag-box [acceptCustomValue]=\"true\" [(ngModel)]=\"selected_aliases\"></dx-tag-box>\n                </div>\n            </div>\n        </div>\n        <div class=\"m-1\">\n            <div class=\"px-2 pt-1  w-full\">\n                <p class=\"text-lg mt-2\">Page ID</p>\n                <!-- <dx-text-box [(ngModel)]=\"selected_page_id\"></dx-text-box> -->\n                <dx-select-box [items]=\"templateDataSource\" valueExpr=\"pageId\" displayExpr=\"pageName\"\n                    [searchEnabled]=\"true\" [(ngModel)]=\"selected_page_id\"></dx-select-box>\n            </div>\n        </div>\n        <div class=\"m-1\">\n            <div class=\"px-2 pt-1  w-full\">\n                <p class=\"text-lg mt-2\">Description</p>\n                <dx-html-editor height=\"'auto'\" [(ngModel)]=\"selected_desc\">\n                    <dxo-toolbar [multiline]=\"false\">\n\n                        <dxi-item name=\"size\" [acceptedValues]=\"['8pt', '10pt', '12pt', '14pt', '18pt', '24pt', '36pt']\"\n                            [options]=\"{ inputAttr: { 'aria-label': 'Font size' } }\"></dxi-item>\n                        <dxi-item name=\"font\" [acceptedValues]=\"[\n                                    'Arial',\n                                    'Courier New',\n                                    'Georgia',\n                                    'Impact',\n                                    'Lucida Console',\n                                    'Tahoma',\n                                    'Times New Roman',\n                                    'Verdana'\n                                  ]\" [options]=\"{ inputAttr: { 'aria-label': 'Font family' } }\"></dxi-item>\n                        <dxi-item name=\"separator\"></dxi-item>\n                        <dxi-item name=\"bold\"></dxi-item>\n                        <dxi-item name=\"italic\"></dxi-item>\n                        <dxi-item name=\"underline\"></dxi-item>\n                        <dxi-item name=\"separator\"></dxi-item>\n                        <dxi-item name=\"alignLeft\"></dxi-item>\n                        <dxi-item name=\"alignCenter\"></dxi-item>\n                        <dxi-item name=\"alignRight\"></dxi-item>\n                        <dxi-item name=\"alignJustify\"></dxi-item>\n                        <dxi-item name=\"separator\"></dxi-item>\n                        <dxi-item name=\"orderedList\"></dxi-item>\n                        <dxi-item name=\"bulletList\"></dxi-item>\n                        <dxi-item name=\"separator\"></dxi-item>\n                        <dxi-item name=\"header\" [acceptedValues]=\"[false, 1, 2, 3, 4, 5]\"\n                            [options]=\"{ inputAttr: { 'aria-label': 'Header' } }\"></dxi-item>\n                        <dxi-item name=\"separator\"></dxi-item>\n                        <dxi-item name=\"color\"></dxi-item>\n                        <dxi-item name=\"background\"></dxi-item>\n                        <dxi-item name=\"separator\"></dxi-item>\n                        <dxi-item name=\"link\"></dxi-item>\n                        <dxi-item name=\"image\"></dxi-item>\n                        <dxi-item name=\"separator\"></dxi-item>\n                        <dxi-item name=\"clear\"></dxi-item>\n                        <dxi-item name=\"codeBlock\"></dxi-item>\n                    </dxo-toolbar>\n                    <dxo-media-resizing [enabled]=\"true\"> </dxo-media-resizing>\n                    <dxo-image-upload [tabs]=\"['file', 'url']\" fileUploadMode=\"base64\">\n                    </dxo-image-upload>\n                </dx-html-editor>\n            </div>\n        </div>\n\n\n        <div class=\"flex flex-row w-full\">\n            <div class=\"m-1 w-full\">\n                <div class=\"px-2 pt-1 w-full\">\n                    <p class=\"text-lg mt-2\"> Parent Component </p>\n                    <dx-select-box [items]=\"keiParentDataSource\" displayExpr=\"kpiName\" valueExpr=\"kpiId\"\n                        (onValueChanged)=\"getKpiItemValue($event)\" [(ngModel)]=\"parante_kpi_name\"></dx-select-box>\n                </div>\n            </div>\n            <div class=\"m-1 w-full\">\n                <div class=\"px-2 pt-1  w-full\">\n                    <p class=\"text-lg mt-2\">Parent TID</p>\n                    <dx-text-box [(ngModel)]=\"selected_kpi_tid\" [readOnly]=\"false\"></dx-text-box>\n                </div>\n            </div>\n            <div class=\"m-1 w-full\">\n                <div class=\"px-2 pt-1  w-full\">\n                    <p class=\"text-lg mt-2\">Child TID</p>\n                    <dx-text-box [(ngModel)]=\"selected_kpi_child_tid\" [readOnly]=\"false\"></dx-text-box>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"flex flex-row justify-between mt-3\">\n            <div class=\"px-2 pt-1  w-full\">\n                <dx-check-box [(ngModel)]=\"kpi_visibility\" text=\"Visibility\"></dx-check-box>\n            </div>\n            <div class=\"px-2 pt-1  w-full\">\n                <dx-check-box [(ngModel)]=\"kpi_external\" text=\"External KPI\"></dx-check-box>\n            </div>\n        </div>\n        <!-- <div class=\"m-1\">\n                    <div class=\"px-2 pt-1  w-full\">\n                        <p class=\"text-lg mt-2\">KPI Info</p>\n                        <dx-html-editor height=\"'auto'\" [(ngModel)]=\"selected_info\">\n                            <dxo-toolbar [multiline]=\"false\">\n\n                                <dxi-item name=\"size\"\n                                    [acceptedValues]=\"['8pt', '10pt', '12pt', '14pt', '18pt', '24pt', '36pt']\"\n                                    [options]=\"{ inputAttr: { 'aria-label': 'Font size' } }\"></dxi-item>\n                                <dxi-item name=\"font\" [acceptedValues]=\"[\n                                                    'Arial',\n                                                    'Courier New',\n                                                    'Georgia',\n                                                    'Impact',\n                                                    'Lucida Console',\n                                                    'Tahoma',\n                                                    'Times New Roman',\n                                                    'Verdana'\n                                                  ]\"\n                                    [options]=\"{ inputAttr: { 'aria-label': 'Font family' } }\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"bold\"></dxi-item>\n                                <dxi-item name=\"italic\"></dxi-item>\n                                <dxi-item name=\"underline\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"alignLeft\"></dxi-item>\n                                <dxi-item name=\"alignCenter\"></dxi-item>\n                                <dxi-item name=\"alignRight\"></dxi-item>\n                                <dxi-item name=\"alignJustify\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"orderedList\"></dxi-item>\n                                <dxi-item name=\"bulletList\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"header\" [acceptedValues]=\"[false, 1, 2, 3, 4, 5]\"\n                                    [options]=\"{ inputAttr: { 'aria-label': 'Header' } }\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"color\"></dxi-item>\n                                <dxi-item name=\"background\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"link\"></dxi-item>\n                                <dxi-item name=\"image\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"clear\"></dxi-item>\n                                <dxi-item name=\"codeBlock\"></dxi-item>\n                            </dxo-toolbar>\n                            <dxo-media-resizing [enabled]=\"true\"> </dxo-media-resizing>\n                            <dxo-image-upload [tabs]=\"['file', 'url']\" fileUploadMode=\"base64\">\n                            </dxo-image-upload>\n                        </dx-html-editor>\n                    </div>\n                </div> -->\n\n        <app-user-access [(userOptionContainer)]=\"userOptionContainer\">\n        </app-user-access>\n\n        <div class=\"flex flex-auto mt-5 justify-end\">\n            <button class=\"{{commonService.btn_success_md}}\" (click)=\"getUpdateKpi()\" *ngIf=\"isEditKpiAdded\">Update KPI\n                    </button>\n            <button class=\"{{commonService.btn_danger_md}}\" (click)=\"getDeletKpi()\" *ngIf=\"isEditKpiAdded\">Delete KPI\n                    </button>\n            <button class=\"{{commonService.btn_success_md}}\" (click)=\"makeNewKpiWithUserEntity()\" *ngIf=\"!isEditKpiAdded\">Create KPI\n            </button>\n            <button class=\"{{commonService.btn_warning_md}}\" (click)=\"getReseteKpi()\">Reset</button>\n\n        </div>\n        <!-- </div> -->\n        <!-- </ng-container> -->\n    </div>\n\n\n\n\n</div>", styles: [":host ::ng-deep treeview .treeview-wrapper{width:100%!important}\n"], dependencies: [{ kind: "directive", type: i4$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoadingComponent$1, selector: "app-loading" }, { kind: "component", type: i6.DxiItemComponent, selector: "dxi-item", inputs: ["disabled", "html", "icon", "template", "text", "title", "visible", "onClick", "stylingMode", "type", "baseSize", "box", "ratio", "shrink", "elementAttr", "hint", "beginGroup", "closeMenuOnClick", "items", "selectable", "selected", "colSpan", "cssClass", "dataField", "editorOptions", "editorType", "helpText", "isRequired", "itemType", "label", "name", "validationRules", "visibleIndex", "alignItemLabels", "caption", "colCount", "colCountByScreen", "tabPanelOptions", "tabs", "badge", "tabTemplate", "buttonOptions", "horizontalAlignment", "verticalAlignment", "locateInMenu", "location", "menuItemTemplate", "options", "showText", "widget", "height", "width", "imageAlt", "imageSrc", "acceptedValues", "formatName", "formatValues", "key", "showChevron", "menuTemplate", "heightRatio", "widthRatio", "expanded", "hasItems", "id", "parentId"] }, { kind: "component", type: i5$1.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.DxoToolbarComponent, selector: "dxo-toolbar", inputs: ["disabled", "items", "visible", "fileSelectionItems", "container", "multiline"] }, { kind: "component", type: i10$2.DxHtmlEditorComponent, selector: "dx-html-editor", inputs: ["accessKey", "activeStateEnabled", "allowSoftLineBreak", "customizeModules", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "imageUpload", "isValid", "mediaResizing", "mentions", "name", "placeholder", "readOnly", "rtlEnabled", "stylingMode", "tabIndex", "tableContextMenu", "tableResizing", "toolbar", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueType", "variables", "visible", "width"], outputs: ["onContentReady", "onDisposing", "onFocusIn", "onFocusOut", "onInitialized", "onOptionChanged", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "allowSoftLineBreakChange", "customizeModulesChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "imageUploadChange", "isValidChange", "mediaResizingChange", "mentionsChange", "nameChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "stylingModeChange", "tabIndexChange", "tableContextMenuChange", "tableResizingChange", "toolbarChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueTypeChange", "variablesChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "component", type: i6.DxoImageUploadComponent, selector: "dxo-image-upload", inputs: ["fileUploaderOptions", "fileUploadMode", "tabs", "uploadDirectory", "uploadUrl"] }, { kind: "component", type: i6.DxoMediaResizingComponent, selector: "dxo-media-resizing", inputs: ["allowedTargets", "enabled"] }, { 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: UserAccessComponent, selector: "app-user-access", inputs: ["userOptionContainer"], outputs: ["userOptionContainerChange"] }, { kind: "component", type: TreeviewComponent, selector: "treeview", inputs: ["autoCollapse", "inner", "navigation", "opened", "isEditIcon", "isSearchBox", "transparentOverlay", "treeListForSearchBox", "name", "openTreeId", "routeKey"], outputs: ["editableKpiData"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CreateKpiTreeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-create-kpi', template: "<app-loading *ngIf=\"loadingModal\"></app-loading>\n<div class=\"p-4 flex flex-row w-full\">\n    <div class=\"mx-2 bg-white dark:bg-transparent border-r\">\n\n        <treeview class=\"dark bg-gray-900 dark:bg-transparent\" [name]=\"'mainNavigation'\" [routeKey]=\"'raKpi'\"\n            [navigation]=\"kpiData\" [isSearchBox]=\"false\" [isEditIcon]=\"true\" (editableKpiData)=\"getEditableKpi($event)\">\n        </treeview>\n    </div>\n    <div class=\"mx-2 w-full\">\n        <div class=\"flex flex-row item-center justify-center my-8\">\n            <button class=\"{{commonService.btn_warning_md}}\" (click)=\"addNewKpi()\">Add New KPI</button>\n            <button class=\"{{commonService.btn_primary_md}}\" (click)=\"routeToKpiConfig()\"\n                routerLinkActive=\"router-link-active\">Configure KPI</button>\n        </div>\n        <ng-container *ngIf=\"isNewKpiAdded\">\n            <div class=\"px-2 w-full\">\n                <div class=\"m-1\">\n                    <div class=\"px-2 pt-1 w-full\">\n                        <p class=\"text-lg mt-2\">Name</p>\n                        <dx-text-box [(ngModel)]=\"select_kpi_name\"></dx-text-box>\n                    </div>\n                </div>\n\n                <div class=\"m-1\">\n                    <div class=\"px-2 pt-1  w-full\">\n                        <p class=\"text-lg mt-2\"> Tag Type</p>\n                        <dx-select-box [dataSource]=\"tagType\" [(ngModel)]=\"select_tag_type\"\n                            (onValueChanged)=\"addTagtypeValue($event)\"></dx-select-box>\n                    </div>\n                </div>\n                <div class=\"m-1\">\n                    <div class=\"px-2 pt-1  w-full\">\n                        <p class=\"text-lg mt-2\">ID</p>\n                        <dx-text-box [(ngModel)]=\"selected_id\"></dx-text-box>\n                    </div>\n                </div>\n                <div class=\"m-1\">\n                    <div class=\"px-2 pt-1  w-full\">\n                        <p class=\"text-lg mt-2\">Page ID</p>\n                        <!-- <dx-text-box [(ngModel)]=\"selected_page_id\"></dx-text-box> -->\n                        <dx-select-box [items]=\"templateDataSource\" valueExpr=\"pageId\" displayExpr=\"pageName\" [searchEnabled]=\"true\"\n                            [(ngModel)]=\"selected_page_id\"></dx-select-box>\n                    </div>\n                </div>\n                <div class=\"m-1\">\n                    <div class=\"px-2 pt-1  w-full\">\n                        <p class=\"text-lg mt-2\">Description</p>\n                        <dx-html-editor height=\"'auto'\" [(ngModel)]=\"selected_desc\">\n                            <dxo-toolbar [multiline]=\"false\">\n\n                                <dxi-item name=\"size\"\n                                    [acceptedValues]=\"['8pt', '10pt', '12pt', '14pt', '18pt', '24pt', '36pt']\"\n                                    [options]=\"{ inputAttr: { 'aria-label': 'Font size' } }\"></dxi-item>\n                                <dxi-item name=\"font\" [acceptedValues]=\"[\n                                    'Arial',\n                                    'Courier New',\n                                    'Georgia',\n                                    'Impact',\n                                    'Lucida Console',\n                                    'Tahoma',\n                                    'Times New Roman',\n                                    'Verdana'\n                                  ]\" [options]=\"{ inputAttr: { 'aria-label': 'Font family' } }\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"bold\"></dxi-item>\n                                <dxi-item name=\"italic\"></dxi-item>\n                                <dxi-item name=\"underline\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"alignLeft\"></dxi-item>\n                                <dxi-item name=\"alignCenter\"></dxi-item>\n                                <dxi-item name=\"alignRight\"></dxi-item>\n                                <dxi-item name=\"alignJustify\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"orderedList\"></dxi-item>\n                                <dxi-item name=\"bulletList\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"header\" [acceptedValues]=\"[false, 1, 2, 3, 4, 5]\"\n                                    [options]=\"{ inputAttr: { 'aria-label': 'Header' } }\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"color\"></dxi-item>\n                                <dxi-item name=\"background\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"link\"></dxi-item>\n                                <dxi-item name=\"image\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"clear\"></dxi-item>\n                                <dxi-item name=\"codeBlock\"></dxi-item>\n                            </dxo-toolbar>\n                            <dxo-media-resizing [enabled]=\"true\"> </dxo-media-resizing>\n                            <dxo-image-upload [tabs]=\"['file', 'url']\" fileUploadMode=\"base64\">\n                            </dxo-image-upload>\n                        </dx-html-editor>\n                    </div>\n                </div>\n\n                <div class=\"m-1\">\n                    <div class=\"px-2 pt-1 w-full\">\n                        <p class=\"text-lg mt-2\"> Parent Component </p>\n                        <dx-select-box [dataSource]=\"keiParentDataSource\" displayExpr=\"name\" valueExpr=\"tid\"\n                            (onValueChanged)=\"getKpiItemValue($event)\" [value]=\"parante_kpi_name\"></dx-select-box>\n                    </div>\n                </div>\n                <div class=\"m-1\">\n                    <div class=\"px-2 pt-1  w-full\">\n                        <p class=\"text-lg mt-2\">TID</p>\n                        <dx-text-box [(ngModel)]=\"selected_kpi_tid\" [readOnly]=\"true\"></dx-text-box>\n                    </div>\n                </div>\n                <div class=\"flex flex-row justify-between mt-3\">\n                    <div class=\"px-2 pt-1  w-full\">\n                        <dx-check-box [(ngModel)]=\"kpi_visibility\" text=\"Visibility\"></dx-check-box>\n                    </div>\n                    <div class=\"px-2 pt-1  w-full\">\n                        <dx-check-box [(ngModel)]=\"kpi_external\" text=\"External KPI\"></dx-check-box>\n                    </div>\n                </div>\n                <div class=\"m-1\">\n                    <div class=\"px-2 pt-1  w-full\">\n                        <p class=\"text-lg mt-2\">KPI Info</p>\n                        <dx-html-editor height=\"'auto'\" [(ngModel)]=\"selected_info\">\n                            <dxo-toolbar [multiline]=\"false\">\n\n                                <dxi-item name=\"size\"\n                                    [acceptedValues]=\"['8pt', '10pt', '12pt', '14pt', '18pt', '24pt', '36pt']\"\n                                    [options]=\"{ inputAttr: { 'aria-label': 'Font size' } }\"></dxi-item>\n                                <dxi-item name=\"font\" [acceptedValues]=\"[\n                                                    'Arial',\n                                                    'Courier New',\n                                                    'Georgia',\n                                                    'Impact',\n                                                    'Lucida Console',\n                                                    'Tahoma',\n                                                    'Times New Roman',\n                                                    'Verdana'\n                                                  ]\"\n                                    [options]=\"{ inputAttr: { 'aria-label': 'Font family' } }\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"bold\"></dxi-item>\n                                <dxi-item name=\"italic\"></dxi-item>\n                                <dxi-item name=\"underline\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"alignLeft\"></dxi-item>\n                                <dxi-item name=\"alignCenter\"></dxi-item>\n                                <dxi-item name=\"alignRight\"></dxi-item>\n                                <dxi-item name=\"alignJustify\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"orderedList\"></dxi-item>\n                                <dxi-item name=\"bulletList\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"header\" [acceptedValues]=\"[false, 1, 2, 3, 4, 5]\"\n                                    [options]=\"{ inputAttr: { 'aria-label': 'Header' } }\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"color\"></dxi-item>\n                                <dxi-item name=\"background\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"link\"></dxi-item>\n                                <dxi-item name=\"image\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"clear\"></dxi-item>\n                                <dxi-item name=\"codeBlock\"></dxi-item>\n                            </dxo-toolbar>\n                            <dxo-media-resizing [enabled]=\"true\"> </dxo-media-resizing>\n                            <dxo-image-upload [tabs]=\"['file', 'url']\" fileUploadMode=\"base64\">\n                            </dxo-image-upload>\n                        </dx-html-editor>\n                    </div>\n                </div>\n\n                 <app-user-access [(userOptionContainer)]=\"userOptionContainer\">\n                </app-user-access>\n\n                <div class=\"flex flex-auto mt-5 justify-end\">\n                    <button class=\"{{commonService.btn_primary_md}}\" (click)=\"makeNewKpi()\">Create\n                    </button>\n                    <button class=\"{{commonService.btn_primary_md}}\" (click)=\"makeNewKpiWithUserEntity()\">Create With User Privilege\n                    </button>\n                    <button class=\"{{commonService.btn_warning_md}}\" (click)=\"getReseteKpi()\">Reset</button>\n\n                </div>\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"isEditKpiAdded\">\n            <div class=\"px-2 w-full\">\n                <div class=\"m-1\">\n                    <div class=\"px-2 pt-1 w-full\">\n                        <p class=\"text-lg mb-2\">Name</p>\n                        <dx-text-box [(ngModel)]=\"editable_kpi_name\"></dx-text-box>\n                    </div>\n                </div>\n                <div class=\"m-1\">\n                    <div class=\"px-2 pt-1  w-full\">\n                        <p class=\"text-lg mt-2\"> Tag Type</p>\n                        <dx-select-box [dataSource]=\"tagType\" [(ngModel)]=\"editable_tag_type\"\n                            (onValueChanged)=\"addTagtypeValue($event)\" [readOnly]=\"isFromEditable\"></dx-select-box>\n                    </div>\n                </div>\n                <div class=\"m-1\">\n                    <div class=\"px-2 pt-1  w-full\">\n                        <p class=\"text-lg mt-2\">ID</p>\n                        <dx-text-box [(ngModel)]=\"editable_id\"></dx-text-box>\n                    </div>\n                </div>\n                <div class=\"m-1\">\n                    <div class=\"px-2 pt-1  w-full\">\n                        <p class=\"text-lg mt-2\">Page ID</p>\n                        <!-- <dx-text-box [(ngModel)]=\"editable_page_id\"></dx-text-box> -->\n                        <dx-select-box [items]=\"templateDataSource\" valueExpr=\"pageId\" displayExpr=\"pageName\" [searchEnabled]=\"true\"\n                            [(ngModel)]=\"editable_page_id\"></dx-select-box>\n\n                    </div>\n                </div>\n                <div class=\"m-1\">\n                    <div class=\"px-2 pt-1  w-full\">\n                        <p class=\"text-lg mt-2\">Description</p>\n                        <dx-html-editor height=\"'auto'\" [(ngModel)]=\"editable_desc\">\n                            <dxo-toolbar [multiline]=\"true\">\n                                <dxi-item name=\"undo\"></dxi-item>\n                                <dxi-item name=\"redo\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"size\"\n                                    [acceptedValues]=\"['8pt', '10pt', '12pt', '14pt', '18pt', '24pt', '36pt']\"\n                                    [options]=\"{ inputAttr: { 'aria-label': 'Font size' } }\"></dxi-item>\n                                <dxi-item name=\"font\" [acceptedValues]=\"[\n                                                                'Arial',\n                                                                'Courier New',\n                                                                'Georgia',\n                                                                'Impact',\n                                                                'Lucida Console',\n                                                                'Tahoma',\n                                                                'Times New Roman',\n                                                                'Verdana'\n                                                              ]\"\n                                    [options]=\"{ inputAttr: { 'aria-label': 'Font family' } }\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"bold\"></dxi-item>\n                                <dxi-item name=\"italic\"></dxi-item>\n                                <dxi-item name=\"underline\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"alignLeft\"></dxi-item>\n                                <dxi-item name=\"alignCenter\"></dxi-item>\n                                <dxi-item name=\"alignRight\"></dxi-item>\n                                <dxi-item name=\"alignJustify\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"orderedList\"></dxi-item>\n                                <dxi-item name=\"bulletList\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"header\" [acceptedValues]=\"[false, 1, 2, 3, 4, 5]\"\n                                    [options]=\"{ inputAttr: { 'aria-label': 'Header' } }\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"color\"></dxi-item>\n                                <dxi-item name=\"background\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"link\"></dxi-item>\n                                <dxi-item name=\"image\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"clear\"></dxi-item>\n                                <dxi-item name=\"blockquote\"></dxi-item>\n\n                            </dxo-toolbar>\n                            <dxo-media-resizing [enabled]=\"true\"> </dxo-media-resizing>\n                            <dxo-image-upload [tabs]=\"['file', 'url']\" fileUploadMode=\"base64\">\n                            </dxo-image-upload>\n                        </dx-html-editor>\n                    </div>\n                </div>\n                <div class=\"m-1\">\n                    <div class=\"px-2 pt-1 w-full\">\n                        <p class=\"text-lg mt-2\"> Parent Component </p>\n                        <dx-select-box [searchEnabled]=\"true\" [readOnly]=\"editable_tag_type == 'parent'\"\n                            [dataSource]=\"keiParentDataSource\" displayExpr=\"name\" valueExpr=\"tid\"\n                            (onValueChanged)=\"getNewParrentKpiItemValue($event)\"\n                            [value]=\"parante_kpi_name\"></dx-select-box>\n                    </div>\n                </div>\n\n                <div class=\"m-1\">\n                    <div class=\"px-2 pt-1  w-full\">\n                        <p class=\"text-lg mt-2\">TID</p>\n                        <dx-text-box [(ngModel)]=\"editable_kpi_tid\" [readOnly]=\"false\"></dx-text-box>\n                    </div>\n                </div>\n                <div class=\"flex flex-row justify-between mt-3\">\n\n                    <div class=\"px-2 pt-1 w-full\">\n                        <dx-check-box [(ngModel)]=\"kpi_visibility\" text=\"Visibility\"></dx-check-box>\n                    </div>\n\n                    <div class=\"px-2 pt-1 w-full\">\n                        <dx-check-box [(ngModel)]=\"kpi_external\" text=\"External KPI\"></dx-check-box>\n                    </div>\n                </div>\n                <div class=\"m-1\">\n                    <div class=\"px-2 pt-1  w-full\">\n                        <p class=\"text-lg mt-2\">KPI Info</p>\n                        <dx-html-editor height=\"'auto'\" [(ngModel)]=\"editable_info\">\n                            <dxo-toolbar [multiline]=\"false\">\n\n                                <dxi-item name=\"size\"\n                                    [acceptedValues]=\"['8pt', '10pt', '12pt', '14pt', '18pt', '24pt', '36pt']\"\n                                    [options]=\"{ inputAttr: { 'aria-label': 'Font size' } }\"></dxi-item>\n                                <dxi-item name=\"font\" [acceptedValues]=\"[\n                                                    'Arial',\n                                                    'Courier New',\n                                                    'Georgia',\n                                                    'Impact',\n                                                    'Lucida Console',\n                                                    'Tahoma',\n                                                    'Times New Roman',\n                                                    'Verdana'\n                                                  ]\"\n                                    [options]=\"{ inputAttr: { 'aria-label': 'Font family' } }\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"bold\"></dxi-item>\n                                <dxi-item name=\"italic\"></dxi-item>\n                                <dxi-item name=\"underline\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"alignLeft\"></dxi-item>\n                                <dxi-item name=\"alignCenter\"></dxi-item>\n                                <dxi-item name=\"alignRight\"></dxi-item>\n                                <dxi-item name=\"alignJustify\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"orderedList\"></dxi-item>\n                                <dxi-item name=\"bulletList\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"header\" [acceptedValues]=\"[false, 1, 2, 3, 4, 5]\"\n                                    [options]=\"{ inputAttr: { 'aria-label': 'Header' } }\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"color\"></dxi-item>\n                                <dxi-item name=\"background\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"link\"></dxi-item>\n                                <dxi-item name=\"image\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"clear\"></dxi-item>\n                                <dxi-item name=\"codeBlock\"></dxi-item>\n                            </dxo-toolbar>\n                            <dxo-media-resizing [enabled]=\"true\"> </dxo-media-resizing>\n                            <dxo-image-upload [tabs]=\"['file', 'url']\" fileUploadMode=\"base64\">\n                            </dxo-image-upload>\n                        </dx-html-editor>\n                    </div>\n                </div>\n                <div class=\"flex flex-auto mt-3 justify-end\">\n                    <button class=\"{{commonService.btn_primary_md}}\" (click)=\"getUpdateKpi()\">Update\n                    </button>\n                    <button class=\"{{commonService.btn_danger_md}}\" (click)=\"getDeleteKpi()\">Delete\n                    </button>\n                    <!-- <button class=\"{{commonService.btn_danger_md}}\" (click)=\"cancelUpdate()\">Cancle</button> -->\n\n                </div>\n            </div>\n        </ng-container>\n    </div>\n\n\n\n\n</div>", styles: [":host ::ng-deep treeview .treeview-wrapper{width:100%!important}\n"] }]
+            args: [{ selector: 'app-create-kpi', template: "<app-loading *ngIf=\"loadingModal\"></app-loading>\n<div class=\"p-4 flex flex-row w-full\" *ngIf=\"!loadingModal\">\n    <div class=\"mx-2 bg-white dark:bg-transparent border-r\">\n        <!-- <ng-container *ngIf=\"isKpiTreePrepared\"> -->\n            <treeview class=\"dark bg-gray-900 dark:bg-transparent\" [name]=\"'mainNavigation'\" [routeKey]=\"'raKpi'\"\n                [navigation]=\"kpiData\" [isSearchBox]=\"false\" [isEditIcon]=\"true\"\n                (editableKpiData)=\"getEditableKpi($event)\">\n            </treeview>\n        <!-- </ng-container> -->\n\n    </div>\n    <div class=\"mx-2 w-full\">\n        <!-- <div class=\"flex flex-row item-center justify-center my-8\">\n            <button class=\"{{commonService.btn_warning_md}}\" (click)=\"addNewKpi()\">Add New KPI</button>\n            <button class=\"{{commonService.btn_primary_md}}\" (click)=\"routeToKpiConfig()\"\n                routerLinkActive=\"router-link-active\">Configure KPI</button>\n        </div> -->\n        <!-- <ng-container *ngIf=\"isNewKpiAdded\"> -->\n        <!-- <div class=\"px-2 w-full\"> -->\n        <div class=\"m-1\">\n            <div class=\"px-2 pt-1 w-full\">\n                <p class=\"text-lg mt-2\">Name</p>\n                <dx-text-box [(ngModel)]=\"select_kpi_name\"></dx-text-box>\n            </div>\n        </div>\n        <div class=\"flex flex-row w-full\">\n            <div class=\"m-1 w-1/3\">\n                <div class=\"px-2 pt-1  w-full\">\n                    <p class=\"text-lg mt-2\"> Tag Type</p>\n                    <dx-select-box [dataSource]=\"tagType\" [(ngModel)]=\"select_tag_type\"\n                        (onValueChanged)=\"addTagtypeValue($event)\"></dx-select-box>\n                </div>\n            </div>\n            <!-- (onCustomItemCreating)=\"onCustomDimentionCreating($event)\" -->\n            <div class=\"m-1 w-full\">\n                <div class=\"px-2 pt-1  w-full\">\n                    <p class=\"text-lg mt-2\">Aliases</p>\n                    <dx-tag-box [acceptCustomValue]=\"true\" [(ngModel)]=\"selected_aliases\"></dx-tag-box>\n                </div>\n            </div>\n        </div>\n        <div class=\"m-1\">\n            <div class=\"px-2 pt-1  w-full\">\n                <p class=\"text-lg mt-2\">Page ID</p>\n                <!-- <dx-text-box [(ngModel)]=\"selected_page_id\"></dx-text-box> -->\n                <dx-select-box [items]=\"templateDataSource\" valueExpr=\"pageId\" displayExpr=\"pageName\"\n                    [searchEnabled]=\"true\" [(ngModel)]=\"selected_page_id\"></dx-select-box>\n            </div>\n        </div>\n        <div class=\"m-1\">\n            <div class=\"px-2 pt-1  w-full\">\n                <p class=\"text-lg mt-2\">Description</p>\n                <dx-html-editor height=\"'auto'\" [(ngModel)]=\"selected_desc\">\n                    <dxo-toolbar [multiline]=\"false\">\n\n                        <dxi-item name=\"size\" [acceptedValues]=\"['8pt', '10pt', '12pt', '14pt', '18pt', '24pt', '36pt']\"\n                            [options]=\"{ inputAttr: { 'aria-label': 'Font size' } }\"></dxi-item>\n                        <dxi-item name=\"font\" [acceptedValues]=\"[\n                                    'Arial',\n                                    'Courier New',\n                                    'Georgia',\n                                    'Impact',\n                                    'Lucida Console',\n                                    'Tahoma',\n                                    'Times New Roman',\n                                    'Verdana'\n                                  ]\" [options]=\"{ inputAttr: { 'aria-label': 'Font family' } }\"></dxi-item>\n                        <dxi-item name=\"separator\"></dxi-item>\n                        <dxi-item name=\"bold\"></dxi-item>\n                        <dxi-item name=\"italic\"></dxi-item>\n                        <dxi-item name=\"underline\"></dxi-item>\n                        <dxi-item name=\"separator\"></dxi-item>\n                        <dxi-item name=\"alignLeft\"></dxi-item>\n                        <dxi-item name=\"alignCenter\"></dxi-item>\n                        <dxi-item name=\"alignRight\"></dxi-item>\n                        <dxi-item name=\"alignJustify\"></dxi-item>\n                        <dxi-item name=\"separator\"></dxi-item>\n                        <dxi-item name=\"orderedList\"></dxi-item>\n                        <dxi-item name=\"bulletList\"></dxi-item>\n                        <dxi-item name=\"separator\"></dxi-item>\n                        <dxi-item name=\"header\" [acceptedValues]=\"[false, 1, 2, 3, 4, 5]\"\n                            [options]=\"{ inputAttr: { 'aria-label': 'Header' } }\"></dxi-item>\n                        <dxi-item name=\"separator\"></dxi-item>\n                        <dxi-item name=\"color\"></dxi-item>\n                        <dxi-item name=\"background\"></dxi-item>\n                        <dxi-item name=\"separator\"></dxi-item>\n                        <dxi-item name=\"link\"></dxi-item>\n                        <dxi-item name=\"image\"></dxi-item>\n                        <dxi-item name=\"separator\"></dxi-item>\n                        <dxi-item name=\"clear\"></dxi-item>\n                        <dxi-item name=\"codeBlock\"></dxi-item>\n                    </dxo-toolbar>\n                    <dxo-media-resizing [enabled]=\"true\"> </dxo-media-resizing>\n                    <dxo-image-upload [tabs]=\"['file', 'url']\" fileUploadMode=\"base64\">\n                    </dxo-image-upload>\n                </dx-html-editor>\n            </div>\n        </div>\n\n\n        <div class=\"flex flex-row w-full\">\n            <div class=\"m-1 w-full\">\n                <div class=\"px-2 pt-1 w-full\">\n                    <p class=\"text-lg mt-2\"> Parent Component </p>\n                    <dx-select-box [items]=\"keiParentDataSource\" displayExpr=\"kpiName\" valueExpr=\"kpiId\"\n                        (onValueChanged)=\"getKpiItemValue($event)\" [(ngModel)]=\"parante_kpi_name\"></dx-select-box>\n                </div>\n            </div>\n            <div class=\"m-1 w-full\">\n                <div class=\"px-2 pt-1  w-full\">\n                    <p class=\"text-lg mt-2\">Parent TID</p>\n                    <dx-text-box [(ngModel)]=\"selected_kpi_tid\" [readOnly]=\"false\"></dx-text-box>\n                </div>\n            </div>\n            <div class=\"m-1 w-full\">\n                <div class=\"px-2 pt-1  w-full\">\n                    <p class=\"text-lg mt-2\">Child TID</p>\n                    <dx-text-box [(ngModel)]=\"selected_kpi_child_tid\" [readOnly]=\"false\"></dx-text-box>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"flex flex-row justify-between mt-3\">\n            <div class=\"px-2 pt-1  w-full\">\n                <dx-check-box [(ngModel)]=\"kpi_visibility\" text=\"Visibility\"></dx-check-box>\n            </div>\n            <div class=\"px-2 pt-1  w-full\">\n                <dx-check-box [(ngModel)]=\"kpi_external\" text=\"External KPI\"></dx-check-box>\n            </div>\n        </div>\n        <!-- <div class=\"m-1\">\n                    <div class=\"px-2 pt-1  w-full\">\n                        <p class=\"text-lg mt-2\">KPI Info</p>\n                        <dx-html-editor height=\"'auto'\" [(ngModel)]=\"selected_info\">\n                            <dxo-toolbar [multiline]=\"false\">\n\n                                <dxi-item name=\"size\"\n                                    [acceptedValues]=\"['8pt', '10pt', '12pt', '14pt', '18pt', '24pt', '36pt']\"\n                                    [options]=\"{ inputAttr: { 'aria-label': 'Font size' } }\"></dxi-item>\n                                <dxi-item name=\"font\" [acceptedValues]=\"[\n                                                    'Arial',\n                                                    'Courier New',\n                                                    'Georgia',\n                                                    'Impact',\n                                                    'Lucida Console',\n                                                    'Tahoma',\n                                                    'Times New Roman',\n                                                    'Verdana'\n                                                  ]\"\n                                    [options]=\"{ inputAttr: { 'aria-label': 'Font family' } }\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"bold\"></dxi-item>\n                                <dxi-item name=\"italic\"></dxi-item>\n                                <dxi-item name=\"underline\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"alignLeft\"></dxi-item>\n                                <dxi-item name=\"alignCenter\"></dxi-item>\n                                <dxi-item name=\"alignRight\"></dxi-item>\n                                <dxi-item name=\"alignJustify\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"orderedList\"></dxi-item>\n                                <dxi-item name=\"bulletList\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"header\" [acceptedValues]=\"[false, 1, 2, 3, 4, 5]\"\n                                    [options]=\"{ inputAttr: { 'aria-label': 'Header' } }\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"color\"></dxi-item>\n                                <dxi-item name=\"background\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"link\"></dxi-item>\n                                <dxi-item name=\"image\"></dxi-item>\n                                <dxi-item name=\"separator\"></dxi-item>\n                                <dxi-item name=\"clear\"></dxi-item>\n                                <dxi-item name=\"codeBlock\"></dxi-item>\n                            </dxo-toolbar>\n                            <dxo-media-resizing [enabled]=\"true\"> </dxo-media-resizing>\n                            <dxo-image-upload [tabs]=\"['file', 'url']\" fileUploadMode=\"base64\">\n                            </dxo-image-upload>\n                        </dx-html-editor>\n                    </div>\n                </div> -->\n\n        <app-user-access [(userOptionContainer)]=\"userOptionContainer\">\n        </app-user-access>\n\n        <div class=\"flex flex-auto mt-5 justify-end\">\n            <button class=\"{{commonService.btn_success_md}}\" (click)=\"getUpdateKpi()\" *ngIf=\"isEditKpiAdded\">Update KPI\n                    </button>\n            <button class=\"{{commonService.btn_danger_md}}\" (click)=\"getDeletKpi()\" *ngIf=\"isEditKpiAdded\">Delete KPI\n                    </button>\n            <button class=\"{{commonService.btn_success_md}}\" (click)=\"makeNewKpiWithUserEntity()\" *ngIf=\"!isEditKpiAdded\">Create KPI\n            </button>\n            <button class=\"{{commonService.btn_warning_md}}\" (click)=\"getReseteKpi()\">Reset</button>\n\n        </div>\n        <!-- </div> -->\n        <!-- </ng-container> -->\n    </div>\n\n\n\n\n</div>", styles: [":host ::ng-deep treeview .treeview-wrapper{width:100%!important}\n"] }]
         }], ctorParameters: function () { return [{ type: CommonService }, { type: i8.FormBuilder }, { type: CreateKpIService }, { type: i4$1.ToastrService }, { type: i2.Router }]; } });
 
+class TreeViewDividerItemComponent {
+    constructor(_changeDetectorRef) {
+        this._changeDetectorRef = _changeDetectorRef;
+        this._unsubscribeAll = new Subject();
+    }
+    ngOnInit() {
+    }
+    ngOnDestroy() {
+        this._unsubscribeAll.next(null);
+        this._unsubscribeAll.complete();
+    }
+}
+TreeViewDividerItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TreeViewDividerItemComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+TreeViewDividerItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TreeViewDividerItemComponent, selector: "treeview-divider-item", inputs: { item: "item", name: "name" }, ngImport: i0, template: "<!-- Divider -->\n<div class=\"treeview-item-wrapper divider\" [ngClass]=\"item.classes?.wrapper\"></div>", dependencies: [{ kind: "directive", type: i4$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TreeViewDividerItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'treeview-divider-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Divider -->\n<div class=\"treeview-item-wrapper divider\" [ngClass]=\"item.classes?.wrapper\"></div>" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { item: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }] } });
+
 class TreeViewSpacerItemComponent {
     constructor(_changeDetectorRef) {
         this._changeDetectorRef = _changeDetectorRef;
@@ -18016,7 +17919,7 @@ class KpiWithSingleLayoutService {
         return throwError(error);
     }
     getlistKpiBrowser() {
-        const apiUrl = this.environment.appUrl + this.environment.apiVersion + '/kpi-config/listKpiBrowser';
+        const apiUrl = this.environment.appUrl + this.environment.apiVersion + this.environment.packageBasePath + '/listKpiBrowser';
         return this.http
             .get(apiUrl, { withCredentials: true })
             .pipe(map((response) => {
@@ -18025,13 +17928,13 @@ class KpiWithSingleLayoutService {
     }
     getAppPageDetailConfig(pageId) {
         return this.http
-            .get(this.environment.appUrl + this.environment.apiVersion + '/kpi-config/getAppPageDetailConfig?pageConfigId=' + pageId, this.options)
+            .get(this.environment.appUrl + this.environment.apiVersion + this.environment.packageBasePath + '/getAppPageDetailConfig?pageConfigId=' + pageId, this.options)
             .pipe(map((response) => {
             return response;
         }), catchError(this.handleError));
     }
     getAppPageConfigs() {
-        const apiUrl = this.environment.appUrl + this.environment.apiVersion + '/kpi-config/getAppPageConfigs';
+        const apiUrl = this.environment.appUrl + this.environment.apiVersion + this.environment.packageBasePath + '/getAppPageConfigs';
         return this.http
             .get(apiUrl, { withCredentials: true })
             .pipe(map((response) => {
@@ -18039,7 +17942,7 @@ class KpiWithSingleLayoutService {
         }), catchError(this.handleError));
     }
     getAppDatasetConfigs() {
-        const apiUrl = this.environment.appUrl + this.environment.apiVersion + '/kpi-config/getAppDatasetConfigs';
+        const apiUrl = this.environment.appUrl + this.environment.apiVersion + this.environment.packageBasePath + '/getAppDatasetConfigs';
         return this.http
             .get(apiUrl, { withCredentials: true })
             .pipe(map((response) => {
@@ -18047,7 +17950,7 @@ class KpiWithSingleLayoutService {
         }), catchError(this.handleError));
     }
     getAppDatasetConfig(datasetId) {
-        const apiUrl = this.environment.appUrl + this.environment.apiVersion + '/kpi-config/getAppDatasetConfig?datasetId=' + datasetId;
+        const apiUrl = this.environment.appUrl + this.environment.apiVersion + this.environment.packageBasePath + '/getAppDatasetConfig?datasetId=' + datasetId;
         return this.http
             .get(apiUrl, { withCredentials: true })
             .pipe(map((response) => {
@@ -18056,13 +17959,13 @@ class KpiWithSingleLayoutService {
     }
     getAppFilterConfig(filterId) {
         return this.http
-            .get(this.environment.appUrl + this.environment.apiVersion + '/kpi-config/getAppFilterConfig?filterId=' + filterId, this.options)
+            .get(this.environment.appUrl + this.environment.apiVersion + this.environment.packageBasePath + '/getAppFilterConfig?filterId=' + filterId, this.options)
             .pipe(map((response) => {
             return response;
         }), catchError(this.handleError));
     }
     getAppViewConfigs() {
-        const apiUrl = this.environment.appUrl + this.environment.apiVersion + '/kpi-config/getAppViewConfigs';
+        const apiUrl = this.environment.appUrl + this.environment.apiVersion + this.environment.packageBasePath + '/getAppViewConfigs';
         return this.http
             .get(apiUrl, { withCredentials: true })
             .pipe(map((response) => {
@@ -18596,11 +18499,11 @@ class PermissionHelper {
             const { entityName, entityValues } = item;
             if (entityName === 'user' &&
                 Array.isArray(entityValues) &&
-                (entityValues.includes('${USER}') || entityValues.includes(username))) {
+                (entityValues.includes('{USER}') || entityValues.includes(username))) {
                 return true;
             }
             if (entityName === 'role' && Array.isArray(entityValues)) {
-                if (entityValues.includes('${ROLE}')) {
+                if (entityValues.includes('{ROLE}')) {
                     return true;
                 }
                 return this.securityPrincipal.roleDetails
@@ -18608,7 +18511,7 @@ class PermissionHelper {
                     : true;
             }
             if (entityName === 'group' && Array.isArray(entityValues)) {
-                if (entityValues.includes('${GROUP}')) {
+                if (entityValues.includes('{GROUP}')) {
                     return true;
                 }
                 return this.securityPrincipal.groupDetails
@@ -20388,7 +20291,7 @@ class KpiWithMultiLayoutService {
         return throwError(error);
     }
     getlistKpiBrowser() {
-        const apiUrl = this.environment.appUrl + this.environment.apiVersion + '/kpi-config/listKpiBrowser';
+        const apiUrl = this.environment.appUrl + this.environment.apiVersion + this.environment.packageBasePath + '/listKpiBrowser';
         return this.http
             .get(apiUrl, { withCredentials: true })
             .pipe(map((response) => {
@@ -20397,13 +20300,13 @@ class KpiWithMultiLayoutService {
     }
     getAppPageDetailConfig(pageId) {
         return this.http
-            .get(this.environment.appUrl + this.environment.apiVersion + '/kpi-config/getAppPageDetailConfig?pageConfigId=' + pageId, this.options)
+            .get(this.environment.appUrl + this.environment.apiVersion + this.environment.packageBasePath + '/getAppPageDetailConfig?pageConfigId=' + pageId, this.options)
             .pipe(map((response) => {
             return response;
         }), catchError(this.handleError));
     }
     getAppPageConfigs() {
-        const apiUrl = this.environment.appUrl + this.environment.apiVersion + '/kpi-config/getAppPageConfigs';
+        const apiUrl = this.environment.appUrl + this.environment.apiVersion + this.environment.packageBasePath + '/getAppPageConfigs';
         return this.http
             .get(apiUrl, { withCredentials: true })
             .pipe(map((response) => {
@@ -20411,7 +20314,7 @@ class KpiWithMultiLayoutService {
         }), catchError(this.handleError));
     }
     getAppDatasetConfigs() {
-        const apiUrl = this.environment.appUrl + this.environment.apiVersion + '/kpi-config/getAppDatasetConfigs';
+        const apiUrl = this.environment.appUrl + this.environment.apiVersion + this.environment.packageBasePath + '/getAppDatasetConfigs';
         return this.http
             .get(apiUrl, { withCredentials: true })
             .pipe(map((response) => {
@@ -20419,7 +20322,7 @@ class KpiWithMultiLayoutService {
         }), catchError(this.handleError));
     }
     getAppDatasetConfig(datasetId) {
-        const apiUrl = this.environment.appUrl + this.environment.apiVersion + '/kpi-config/getAppDatasetConfig?datasetId=' + datasetId;
+        const apiUrl = this.environment.appUrl + this.environment.apiVersion + this.environment.packageBasePath + '/getAppDatasetConfig?datasetId=' + datasetId;
         return this.http
             .get(apiUrl, { withCredentials: true })
             .pipe(map((response) => {
@@ -20428,13 +20331,13 @@ class KpiWithMultiLayoutService {
     }
     getAppFilterConfig(filterId) {
         return this.http
-            .get(this.environment.appUrl + this.environment.apiVersion + '/kpi-config/getAppFilterConfig?filterId=' + filterId, this.options)
+            .get(this.environment.appUrl + this.environment.apiVersion + this.environment.packageBasePath + '/getAppFilterConfig?filterId=' + filterId, this.options)
             .pipe(map((response) => {
             return response;
         }), catchError(this.handleError));
     }
     getAppViewConfigs() {
-        const apiUrl = this.environment.appUrl + this.environment.apiVersion + '/kpi-config/getAppViewConfigs';
+        const apiUrl = this.environment.appUrl + this.environment.apiVersion + this.environment.packageBasePath + '/getAppViewConfigs';
         return this.http
             .get(apiUrl, { withCredentials: true })
             .pipe(map((response) => {
@@ -21699,7 +21602,7 @@ class LandingComponentService {
         return throwError(error);
     }
     getlistKpiBrowser() {
-        const apiUrl = this.environment.appUrl + this.environment.apiVersion + '/kpi-config/listKpiBrowser';
+        const apiUrl = this.environment.appUrl + this.environment.apiVersion + this.environment.packageBasePath + '/listKpiBrowser';
         return this.http
             .get(apiUrl, { withCredentials: true })
             .pipe(map((response) => {
@@ -21708,13 +21611,13 @@ class LandingComponentService {
     }
     getAppPageDetailConfig(pageId) {
         return this.http
-            .get(this.environment.appUrl + this.environment.apiVersion + '/kpi-config/getAppPageDetailConfig?pageConfigId=' + pageId, this.options)
+            .get(this.environment.appUrl + this.environment.apiVersion + this.environment.packageBasePath + '/getAppPageDetailConfig?pageConfigId=' + pageId, this.options)
             .pipe(map((response) => {
             return response;
         }), catchError(this.handleError));
     }
     getAppPageConfigs() {
-        const apiUrl = this.environment.appUrl + this.environment.apiVersion + '/kpi-config/getAppPageConfigs';
+        const apiUrl = this.environment.appUrl + this.environment.apiVersion + this.environment.packageBasePath + '/getAppPageConfigs';
         return this.http
             .get(apiUrl, { withCredentials: true })
             .pipe(map((response) => {
@@ -21722,7 +21625,7 @@ class LandingComponentService {
         }), catchError(this.handleError));
     }
     getAppDatasetConfigs() {
-        const apiUrl = this.environment.appUrl + this.environment.apiVersion + '/kpi-config/getAppDatasetConfigs';
+        const apiUrl = this.environment.appUrl + this.environment.apiVersion + this.environment.packageBasePath + '/getAppDatasetConfigs';
         return this.http
             .get(apiUrl, { withCredentials: true })
             .pipe(map((response) => {
@@ -21730,7 +21633,7 @@ class LandingComponentService {
         }), catchError(this.handleError));
     }
     getAppDatasetConfig(datasetId) {
-        const apiUrl = this.environment.appUrl + this.environment.apiVersion + '/kpi-config/getAppDatasetConfig?datasetId=' + datasetId;
+        const apiUrl = this.environment.appUrl + this.environment.apiVersion + this.environment.packageBasePath + '/getAppDatasetConfig?datasetId=' + datasetId;
         return this.http
             .get(apiUrl, { withCredentials: true })
             .pipe(map((response) => {
@@ -21739,13 +21642,13 @@ class LandingComponentService {
     }
     getAppFilterConfig(filterId) {
         return this.http
-            .get(this.environment.appUrl + this.environment.apiVersion + '/kpi-config/getAppFilterConfig?filterId=' + filterId, this.options)
+            .get(this.environment.appUrl + this.environment.apiVersion + this.environment.packageBasePath + '/getAppFilterConfig?filterId=' + filterId, this.options)
             .pipe(map((response) => {
             return response;
         }), catchError(this.handleError));
     }
     getAppViewConfigs() {
-        const apiUrl = this.environment.appUrl + this.environment.apiVersion + '/kpi-config/getAppViewConfigs';
+        const apiUrl = this.environment.appUrl + this.environment.apiVersion + this.environment.packageBasePath + '/getAppViewConfigs';
         return this.http
             .get(apiUrl, { withCredentials: true })
             .pipe(map((response) => {
@@ -21955,7 +21858,6 @@ class LandingComponentComponent {
             });
         });
         Promise.all(apiCalls).then(() => {
-            debugger;
             this.globalDefaultFilter = filter;
             this.uniqueDataSetObject = this.datasetService.getUniqueDataSetObject();
             this.createDivElements(this.uniqueDataSetObject, true);
@@ -23244,7 +23146,7 @@ class LandingMultiLayoutComponentService {
         return throwError(error);
     }
     getlistKpiBrowser() {
-        const apiUrl = this.environment.appUrl + this.environment.apiVersion + '/kpi-config/listKpiBrowser';
+        const apiUrl = this.environment.appUrl + this.environment.apiVersion + this.environment.packageBasePath + '/listKpiBrowser';
         return this.http
             .get(apiUrl, { withCredentials: true })
             .pipe(map((response) => {
@@ -23253,13 +23155,13 @@ class LandingMultiLayoutComponentService {
     }
     getAppPageDetailConfig(pageId) {
         return this.http
-            .get(this.environment.appUrl + this.environment.apiVersion + '/kpi-config/getAppPageDetailConfig?pageConfigId=' + pageId, this.options)
+            .get(this.environment.appUrl + this.environment.apiVersion + this.environment.packageBasePath + '/getAppPageDetailConfig?pageConfigId=' + pageId, this.options)
             .pipe(map((response) => {
             return response;
         }), catchError(this.handleError));
     }
     getAppPageConfigs() {
-        const apiUrl = this.environment.appUrl + this.environment.apiVersion + '/kpi-config/getAppPageConfigs';
+        const apiUrl = this.environment.appUrl + this.environment.apiVersion + this.environment.packageBasePath + '/getAppPageConfigs';
         return this.http
             .get(apiUrl, { withCredentials: true })
             .pipe(map((response) => {
@@ -23267,7 +23169,7 @@ class LandingMultiLayoutComponentService {
         }), catchError(this.handleError));
     }
     getAppDatasetConfigs() {
-        const apiUrl = this.environment.appUrl + this.environment.apiVersion + '/kpi-config/getAppDatasetConfigs';
+        const apiUrl = this.environment.appUrl + this.environment.apiVersion + this.environment.packageBasePath + '/getAppDatasetConfigs';
         return this.http
             .get(apiUrl, { withCredentials: true })
             .pipe(map((response) => {
@@ -23275,7 +23177,7 @@ class LandingMultiLayoutComponentService {
         }), catchError(this.handleError));
     }
     getAppDatasetConfig(datasetId) {
-        const apiUrl = this.environment.appUrl + this.environment.apiVersion + '/kpi-config/getAppDatasetConfig?datasetId=' + datasetId;
+        const apiUrl = this.environment.appUrl + this.environment.apiVersion + this.environment.packageBasePath + '/getAppDatasetConfig?datasetId=' + datasetId;
         return this.http
             .get(apiUrl, { withCredentials: true })
             .pipe(map((response) => {
@@ -23284,13 +23186,13 @@ class LandingMultiLayoutComponentService {
     }
     getAppFilterConfig(filterId) {
         return this.http
-            .get(this.environment.appUrl + this.environment.apiVersion + '/kpi-config/getAppFilterConfig?filterId=' + filterId, this.options)
+            .get(this.environment.appUrl + this.environment.apiVersion + this.environment.packageBasePath + '/getAppFilterConfig?filterId=' + filterId, this.options)
             .pipe(map((response) => {
             return response;
         }), catchError(this.handleError));
     }
     getAppViewConfigs() {
-        const apiUrl = this.environment.appUrl + this.environment.apiVersion + '/kpi-config/getAppViewConfigs';
+        const apiUrl = this.environment.appUrl + this.environment.apiVersion + this.environment.packageBasePath + '/getAppViewConfigs';
         return this.http
             .get(apiUrl, { withCredentials: true })
             .pipe(map((response) => {
@@ -24779,7 +24681,7 @@ class BookmarkedService {
         return throwError(error);
     }
     getlistKpiBrowser() {
-        const apiUrl = this.environment.appUrl + this.environment.apiVersion + '/kpi-config/listKpiBrowser';
+        const apiUrl = this.environment.appUrl + this.environment.apiVersion + this.environment.packageBasePath + '/listKpiBrowser';
         return this.http
             .get(apiUrl, { withCredentials: true })
             .pipe(map((response) => {
@@ -24788,13 +24690,13 @@ class BookmarkedService {
     }
     getAppPageDetailConfig(pageId) {
         return this.http
-            .get(this.environment.appUrl + this.environment.apiVersion + '/kpi-config/getAppPageDetailConfig?pageConfigId=' + pageId, this.options)
+            .get(this.environment.appUrl + this.environment.apiVersion + this.environment.packageBasePath + '/getAppPageDetailConfig?pageConfigId=' + pageId, this.options)
             .pipe(map((response) => {
             return response;
         }), catchError(this.handleError));
     }
     getAppPageConfigs() {
-        const apiUrl = this.environment.appUrl + this.environment.apiVersion + '/kpi-config/getAppPageConfigs';
+        const apiUrl = this.environment.appUrl + this.environment.apiVersion + this.environment.packageBasePath + '/getAppPageConfigs';
         return this.http
             .get(apiUrl, { withCredentials: true })
             .pipe(map((response) => {
@@ -24802,7 +24704,7 @@ class BookmarkedService {
         }), catchError(this.handleError));
     }
     getAppDatasetConfigs() {
-        const apiUrl = this.environment.appUrl + this.environment.apiVersion + '/kpi-config/getAppDatasetConfigs';
+        const apiUrl = this.environment.appUrl + this.environment.apiVersion + this.environment.packageBasePath + '/getAppDatasetConfigs';
         return this.http
             .get(apiUrl, { withCredentials: true })
             .pipe(map((response) => {
@@ -24810,7 +24712,7 @@ class BookmarkedService {
         }), catchError(this.handleError));
     }
     getAppDatasetConfig(datasetId) {
-        const apiUrl = this.environment.appUrl + this.environment.apiVersion + '/kpi-config/getAppDatasetConfig?datasetId=' + datasetId;
+        const apiUrl = this.environment.appUrl + this.environment.apiVersion + this.environment.packageBasePath + '/getAppDatasetConfig?datasetId=' + datasetId;
         return this.http
             .get(apiUrl, { withCredentials: true })
             .pipe(map((response) => {
@@ -24819,13 +24721,13 @@ class BookmarkedService {
     }
     getAppFilterConfig(filterId) {
         return this.http
-            .get(this.environment.appUrl + this.environment.apiVersion + '/kpi-config/getAppFilterConfig?filterId=' + filterId, this.options)
+            .get(this.environment.appUrl + this.environment.apiVersion + this.environment.packageBasePath + '/getAppFilterConfig?filterId=' + filterId, this.options)
             .pipe(map((response) => {
             return response;
         }), catchError(this.handleError));
     }
     getAppViewConfigs() {
-        const apiUrl = this.environment.appUrl + this.environment.apiVersion + '/kpi-config/getAppViewConfigs';
+        const apiUrl = this.environment.appUrl + this.environment.apiVersion + this.environment.packageBasePath + '/getAppViewConfigs';
         return this.http
             .get(apiUrl, { withCredentials: true })
             .pipe(map((response) => {