gamma-app-controller 1.0.9 → 1.1.1

package/fesm2020/gamma-app-controller.mjs

@@ -28,7 +28,7 @@ import * as i6$2 from 'devextreme-angular/ui/color-box';
 import * as i8$1 from 'devextreme-angular/ui/tag-box';
 import * as i5$1 from 'devextreme-angular/ui/chart';
 import * as i8$2 from 'devextreme-angular/ui/pie-chart';
-import * as i9$1 from 'devextreme-angular/ui/scroll-view';
+import * as i10 from 'devextreme-angular/ui/scroll-view';
 import * as i13 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import * as i8$3 from 'devextreme-angular/ui/number-box';
@@ -1933,7 +1933,7 @@ class ApplicationFilterComponent {
                     "momentFormat": "YYYY-MM-DD"
                 }]
         };
-        this.filter_type = ['single', 'multiple', 'date', 'datetime', "content"];
+        this.filter_type = ['single', 'multiple', 'date', 'datetime', "content", "context"];
         this.defaultFilterTypeDataSource = ['static', 'dynamic'];
         this.momentFunction = ["subtract", "add", "startOf", "endOf"];
     }
@@ -2960,10 +2960,11 @@ class DatasetQueryBulderComponent {
                     'deriveField': true
                 };
                 this.queryBulderDataset.queryConfig.columns.push(node);
-                console.log(columeString);
             }
             else if (element.reconType == "percentage") {
-                let columeString = "{'$cond': { if: { $eq: [ '$" + element.columeOne + "', 0 ] }, then: 0, else: {'$divide':[{'$subtract': ['$" + element.columeOne + "','$" + element.columeTwo + "']},'$" + element.columeOne + "']} }}";
+                let columeString = `{ '$cond': {'if': {'$and': [{ '$eq': ['$${element.columeOne}', 0] }, { '$eq': ['$${element.columeTwo}', 0] } ] }, 'then': 0, 'else': {'$divide': 
+        [{ '$abs': { '$subtract': ['$${element.columeOne}', '$${element.columeTwo}'] } }, { '$max': ['$${element.columeOne}', '$${element.columeTwo}'] } ] } } }
+`;
                 let node = {
                     "measures": true,
                     "dataField": element.dataField,
@@ -4144,7 +4145,7 @@ class DashChartComponent {
     }
 }
 DashChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DashChartComponent, deps: [{ token: CommonService }], target: i0.ɵɵFactoryTarget.Component });
-DashChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DashChartComponent, selector: "app-dash-chart", inputs: { chartconfigData: ["datasetmodal", "chartconfigData"] }, outputs: { getChartConfigOutPut: "getChartConfigOutPut" }, ngImport: i0, template: "<div class=\"mx-2\">\n    <div class=\"w-full m-2 border\">\n        <ng-container *ngIf=\"!isJsonPreview\">\n            <pre><code>{{jsaonDatasource | json}}</code></pre>\n        </ng-container>\n        <ng-container *ngIf=\"isJsonPreview\">\n            <ng-container *ngIf=\"chartType == 'doughnut'\">\n                <div\n                    class=\"m-3 p-4 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700\">\n                    <!-- <h6 class=\"mb-1 text-md font-bold tracking-tight text-gray-900 dark:text-white border-b pb-3\">\n                        {{widGetConfig.widgetTitle}}\n                    </h6> -->\n                    <dx-pie-chart id=\"pie\" type=\"doughnut\" [title]=\"{ text: chartConfig.caption, font: { size: 14 } }\"\n                        palette=\"Soft Pastel\" [dataSource]=\"dataSourseForChart\" centerTemplate=\"centerTemplate\"\n                        (onPointClick)=\"pointClickHandler($event)\" [palette]=\"chartConfig.palette\">\n\n                        <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n                            <ng-container *ngIf=\"item.color\">\n                                <dxi-series argumentField={{chartConfig.argumentField}} valueField=\"{{item.valueField}}\"\n                                    name=\"{{item.name}}\" color=\"{{item.color}}\">\n                                    <dxo-label [visible]=\"chartConfig.labelDisplay\" format=\"#,##0.##\">\n                                        <dxo-connector [visible]=\"true\"></dxo-connector>\n                                    </dxo-label>\n                                </dxi-series>\n                            </ng-container>\n                            <ng-container *ngIf=\"!item.color\">\n                                <dxi-series argumentField={{chartConfig.argumentField}} valueField=\"{{item.valueField}}\"\n                                    name=\"{{item.name}}\">\n                                    <dxo-label [visible]=\"chartConfig.labelDisplay\" format=\"#,##0.##\">\n                                        <dxo-connector [visible]=\"true\"></dxo-connector>\n                                    </dxo-label>\n                                </dxi-series>\n                            </ng-container>\n                        </ng-container>\n                        <dxo-legend [visible]=\"chartConfig.legendDisplay\"\n                            horizontalAlignment=\"{{chartConfig.horizontalAlignment}}\"\n                            verticalAlignment=\"{{chartConfig.verticalAlignment}}\"></dxo-legend>\n                        <!-- <dxo-export [enabled]=\"true\"></dxo-export> -->\n                        <dxo-tooltip [enabled]=\"true\" [customizeTooltip]=\"customizeTooltip\" format=\"#,##0.##\">\n                        </dxo-tooltip>\n                        <svg *dxTemplate=\"let pieChart of 'centerTemplate'\">\n                            <circle cx=\"100\" cy=\"100\" [attr.r]=\"pieChart.getInnerRadius() - 6\" fill=\"gray\"\n                                opacity=\"0.0001\">\n                            </circle>\n\n                            <text text-anchor=\"middle\" style=\"font-size: 28px\" x=\"100\" y=\"100\" fill=\"#eee\">\n                                <tspan x=\"100\">{{ calculateTotal(pieChart) }}</tspan>\n                                <!-- display: inline -->\n                                <!-- <tspan x=\"100\" dy=\"20px\" style=\"font-weight: 600\"></tspan> -->\n                            </text>\n                        </svg>\n                    </dx-pie-chart>\n                </div>\n            </ng-container>\n            <ng-container *ngIf=\"chartType !== 'doughnut' && chartType !== 'funnel' && chartType !== 'bubble'\">\n                <div\n                    class=\"m-3 p-4 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700\">\n                    <!-- <h6 class=\"mb-1 text-md font-bold tracking-tight text-gray-900 dark:text-white border-b pb-3\">\n                        {{widGetConfig.widgetTitle}}\n                    </h6> -->\n                    <dx-chart id=\"chart\" [dataSource]=\"dataSourseForChart\"\n                        [title]=\"{ text: chartConfig.caption, font: { size: 14 } }\"\n                        [valueAxis]=\"chartConfig.valueAxisConfig\">\n                        <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n                            <ng-container *ngIf=\"item.axis\">\n                                <dxi-value-axis [name]=\"item.axis\" [position]=\"item.position\">\n                                    <dxo-title [text]=\"item.name\"></dxo-title>\n                                </dxi-value-axis>\n                            </ng-container>\n                        </ng-container>\n                        <dxo-argument-axis>\n                            <dxo-label overlappingBehavior=\"rotate\" [rotationAngle]=\"270\"></dxo-label>\n                        </dxo-argument-axis>\n                        <dxo-tooltip [enabled]=\"true\" [shared]=\"true\"></dxo-tooltip>\n                        <dxo-common-series-settings\n                            [argumentField]=\"chartConfig.argumentField\"></dxo-common-series-settings>\n                        <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n                            <ng-container *ngIf=\"item.color\">\n                                <dxi-series type=\"{{item.type}}\" valueField=\"{{item.valueField}}\" axis=\"{{item.axis}}\"\n                                    name=\"{{item.name}}\" color=\"{{item.color}}\">\n                                </dxi-series>\n                            </ng-container>\n                            <ng-container *ngIf=\"!item.color\">\n                                <dxi-series type=\"{{item.type}}\" valueField=\"{{item.valueField}}\" axis=\"{{item.axis}}\"\n                                    name=\"{{item.name}}\">\n                                </dxi-series>\n                            </ng-container>\n\n                        </ng-container>\n                        <dxo-size [height]=\"chartConfig.size\"></dxo-size>\n                        <dxo-legend [visible]=\"chartConfig.legendDisplay\"\n                            [verticalAlignment]=\"chartConfig.verticalAlignment\"\n                            [horizontalAlignment]=\"chartConfig.horizontalAlignment\"></dxo-legend>\n                    </dx-chart>\n                </div>\n            </ng-container>\n\n            <ng-container *ngIf=\"chartType == 'funnel'\">\n\n            </ng-container>\n            <ng-container *ngIf=\"chartType == 'bubble'\">\n                <div class=\"mx-5\">\n                    <ng-container *ngFor=\"let item of heatChartDataSource.dataSet\">\n                        <div class=\"flex flex-row\">\n                            <div class=\"h-10 text-sm items-center min-w-24 max-w-[30%] justify-center flex\">\n                                {{item.datasource}}\n                            </div>\n                            <div class=\"inline-block \">\n                                <div class=\"flex flex-nowrap justify-center \">\n                                    <ng-container *ngFor=\"let box of item.dataset\">\n                                        <div class=\"flex-shrink-0 min-w-10 max-w-[20%] h-10 text-sm cursor-pointer flex items-center justify-center text-gray-800\"\n                                            [matTooltip]=\"'Record Date: ' + box.recordDate + '\\nRecharge Count: ' + box.toolTip\"\n                                            matTooltipClass=\"custom-tooltip\">\n                                            <div class=\"rounded-full\" [ngStyle]=\"{\n                                        'background-color': box.isHovered ? 'rgb(135, 184, 106)' : box.color,\n                                        'width.px': box.size,\n                                        'hover': box.hover,\n                                        'height.px': box.size\n                                      }\" (mouseenter)=\"box.isHovered = true\" (mouseleave)=\"box.isHovered = false\">\n                                            </div>\n                                        </div>\n                                    </ng-container>\n                                </div>\n                            </div>\n                        </div>\n                    </ng-container>\n                    <div class=\"inline-block\">\n                        <div class=\"flex flex-nowrap justify-center\">\n                            <div class=\"flex-shrink-0 w-24 max-w-[20%] h-full flex items-center justify-center\"></div>\n                            <div *ngFor=\"let item of heatChartDataSource.argumentValue\"\n                                class=\"flex-shrink-0 w-10 max-w-[20%] min-h-14 flex text-sm items-center justify-center my-1\"\n                                [ngStyle]=\"{'height': 'auto'}\">\n                                <span class=\"text-rotate\">\n                                    {{item}}\n                                </span>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </ng-container>\n\n        </ng-container>\n\n    </div>\n    <div class=\"w-full m-2 border\">\n        <div class=\"flex flex-row mb-1\">\n            <div class=\"w-1/3 mx-1\">\n                <dx-select-box [dataSource]=\"chartAxisSource\" [(ngModel)]=\"chartAccess\" placeholder=\"Chart Type\"\n                    displayExpr=\"name\" valueExpr=\"value\" (onValueChanged)=\"getChartAccessType($event)\">\n                </dx-select-box>\n            </div>\n            <div class=\"w-1/3 mx-1\">\n                <ng-container *ngIf=\"chartAccess == 'single'\">\n                    <dx-select-box [items]=\"chartTypeSource\" (onValueChanged)=\"getChartType($event)\"\n                        [(ngModel)]=\"chartType\"></dx-select-box>\n                </ng-container>\n                <ng-container *ngIf=\"chartAccess == 'multy'\">\n                    <dx-select-box [items]=\"componentNamesForMultyAccess\" displayExpr=\"item\" valueExpr=\"compName\"\n                        [(ngModel)]=\"componentName\"></dx-select-box>\n                </ng-container>\n            </div>\n        </div>\n        <ng-container *ngIf=\"chartAccess == 'single'\">\n\n            <div class=\"mb-4 border-b border-gray-200 dark:border-gray-700\">\n                <ul class=\"flex flex-wrap -mb-px text-sm font-medium text-center\" role=\"tablist\">\n                    <li class=\"me-2\" role=\"presentation\">\n                        <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'basic',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'basic'\n                            }\" (click)=\"setActiveTab('basic')\" type=\"button\" role=\"tab\">\n                            Basic\n                        </button>\n                    </li>\n                    <li class=\"me-2\" role=\"presentation\">\n                        <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'columns',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'columns'\n                            }\" (click)=\"setActiveTab('columns')\" type=\"button\" role=\"tab\">\n                            Columns\n                        </button>\n                    </li>\n                    <!-- <li class=\"me-2\" role=\"presentation\">\n                        <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'widget',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'widget'\n                            }\" (click)=\"setActiveTab('widget')\" type=\"button\" role=\"tab\">\n                            Widget\n                        </button>\n                    </li> -->\n                </ul>\n            </div>\n\n            <div id=\"default-styled-tab-content\">\n                <div *ngIf=\"activeTab === 'basic'\">\n                    <div class=\"flex flex-wrap justify-between my-2\">\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1 \">Legend Horizontal Alignment</div>\n                            <dx-select-box [searchEnabled]=\"true\" [items]=\"['right','left','center']\"\n                                [(ngModel)]=\"chartConfig.horizontalAlignment\"></dx-select-box>\n\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Legend Vertical Alignment</div>\n                            <dx-select-box [searchEnabled]=\"true\" [items]=\"['top','bottom']\"\n                                [(ngModel)]=\"chartConfig.verticalAlignment\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1 mt-8\"></div>\n                            <dx-check-box [(ngModel)]=\"chartConfig.legendDisplay\" text=\"Legend Display\"></dx-check-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Argument Field</div>\n                            <dx-select-box [items]=\"configColume\"\n                                [(ngModel)]=\"chartConfig.argumentField\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Size</div>\n                            <dx-text-box [(ngModel)]=\"chartConfig.size\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Caption</div>\n                            <dx-text-box [(ngModel)]=\"chartConfig.caption\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2\"> Display Formate </div>\n                            <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                [(ngModel)]=\"mainChartCourceObject.kpiConfig.formate\"\n                                [readOnly]=\"false\"></dx-select-box>\n                        </div>\n                        <div class=\"w-2/3 px-2 mt-2\" *ngIf=\"chartType == 'doughnut'\">\n                            <div class=\" flex flex-row\">\n                                <div class=\"mr-2\">\n                                    <div class=\"text-md mb-1\"> Color Palette</div>\n                                    <dx-select-box [items]=\"doughnut_color_palette\"\n                                        [(ngModel)]=\"chartConfig.palette\"></dx-select-box>\n                                </div>\n                                <div class=\"mt-5\">\n                                    <dx-check-box [value]=\"chartConfig.labelDisplay\"\n                                        [(ngModel)]=\"chartConfig.labelDisplay\" text=\"Label Display\"></dx-check-box>\n                                </div>\n                            </div>\n\n\n                        </div>\n                        <div class=\"w-2/3 px-2 mt-2\" *ngIf=\"chartType == 'bubble'\">\n                            <div class=\" flex flex-row\">\n                                <div class=\"mr-2\">\n                                    <div class=\"text-md mb-1\"> Source Field</div>\n                                    <dx-select-box [items]=\"configColume\"\n                                        [(ngModel)]=\"chartConfig.sourceField\"></dx-select-box>\n                                </div>\n                                <div class=\"mr-2\">\n                                    <div class=\"text-md mb-1\"> Min Bubble Size</div>\n                                    <dx-text-box [(ngModel)]=\"chartConfig.minBubbleSize\"></dx-text-box>\n                                </div>\n                                <div class=\"mr-2\">\n                                    <div class=\"text-md mb-1\"> Max bubble size</div>\n                                    <dx-text-box [(ngModel)]=\"chartConfig.maxBubbleSize\"></dx-text-box>\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\" *ngIf=\"chartType == 'doughnut'\">\n\n                        </div>\n\n                    </div>\n                </div>\n                <div *ngIf=\"activeTab === 'columns'\">\n                    <div class=\"h-60 overflow-x-auto\">\n                        <div class=\" border-x border-b \">\n                            <div class=\"py-1 flex flex-row border-b\"\n                                *ngFor=\"let item of chartConfig.chart_config; let i = index\">\n\n                                <div class=\"px-1 mb-1 w-1/3\">\n                                    <div class=\"text-md mb-1\"> Value Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"item.valueField\"></dx-select-box>\n                                </div>\n\n                                <div class=\"px-1 mb-1 w-1/4\" *ngIf=\"chartType !== 'doughnut'\">\n                                    <div class=\"text-md mb-1\"> Axis</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"item.axis\"></dx-select-box>\n                                </div>\n                                <div class=\" px-2 mb-1 w-1/3\">\n                                    <div class=\"text-md mb-1\"> Position</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"['right','left']\"\n                                        [(ngModel)]=\"item.position\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-1/4\">\n                                    <div class=\"text-md mb-1\"> Name</div>\n                                    <dx-text-box [(ngModel)]=\"item.name\"></dx-text-box>\n                                </div>\n                                <div class=\"text-center mt-6 w-1/6\">\n                                    <button *ngIf=\"i !== 0\" class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItem(i, 'up')\">\n                                        <i class=\"fa fa-arrow-up\" aria-hidden=\"true\"></i>\n                                    </button>\n                                    <button *ngIf=\"i !== chartConfig.chart_config.length - 1\"\n                                        class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItem(i, 'down')\">\n                                        <i class=\"fa fa-arrow-down\" aria-hidden=\"true\"></i>\n                                    </button>\n\n                                    <button class=\"{{commonService.btn_danger_sm}} cursor-pointer\"\n                                        (click)=\"deleteColumns(i)\"><i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                    </button>\n                                </div>\n                            </div>\n                            <div class=\"flex flex-row justify-end my-2\" *ngIf=\"chartType == 'doughnut'\">\n                                <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\"\n                                    (click)=\"addColumns()\">Add\n                                    Series</button>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <!-- <div *ngIf=\"activeTab === 'widget'\">\n                    <div class=\"flex flex-wrap justify-between my-2\">\n                        <div class=\"w-1/3 px-1 mb-1\">\n                            <div class=\"text-md mb-2\"> Widget level</div>\n                            <dx-text-box [value]=\"mainChartCourceObject.widget\"\n                                [(ngModel)]=\"mainChartCourceObject.widget\" [readOnly]=\"isEditWidget\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-1 mb-1\">\n                            <div class=\"text-md mb-2\"> Title</div>\n                            <dx-text-box [value]=\"widGetConfig.widgetTitle\"\n                                [(ngModel)]=\"widGetConfig.widgetTitle\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-1 mb-1\">\n                            <div class=\"text-md mb-2\"> Width </div>\n                            <dx-select-box [value]=\"widGetConfig.width\" [items]=\"widget_width\"\n                                [(ngModel)]=\"widGetConfig.width\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-1 mb-1\">\n                            <div class=\"text-md mb-2\"> Display Formate </div>\n                            <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                [(ngModel)]=\"mainChartCourceObject.kpiConfig.formate\"\n                                [readOnly]=\"false\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-1 pt-6 text-center\">\n                            <dx-check-box [value]=\"widGetConfig.display\" [(ngModel)]=\"widGetConfig.display\"\n                                text=\"Display\"></dx-check-box>\n                        </div>\n                    </div>\n\n                </div> -->\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"chartAccess == 'multy'\">\n            <div class=\"mb-4 border-b border-gray-200 dark:border-gray-700\">\n                <ul class=\"flex flex-wrap -mb-px text-sm font-medium text-center\" role=\"tablist\">\n                    <li class=\"me-2\" role=\"presentation\">\n                        <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'basic',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'basic'\n                            }\" (click)=\"setActiveTab('basic')\" type=\"button\" role=\"tab\">\n                            Basic\n                        </button>\n                    </li>\n                    <li class=\"me-2\" role=\"presentation\">\n                        <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'columns',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'columns'\n                            }\" (click)=\"setActiveTab('columns')\" type=\"button\" role=\"tab\">\n                            Columns\n                        </button>\n                    </li>\n                    <!-- <li class=\"me-2\" role=\"presentation\">\n                        <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'widget',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'widget'\n                            }\" (click)=\"setActiveTab('widget')\" type=\"button\" role=\"tab\">\n                            Widget\n                        </button>\n                    </li> -->\n                </ul>\n            </div>\n\n            <div id=\"default-styled-tab-content\">\n                <div *ngIf=\"activeTab === 'basic'\">\n                    <div class=\"flex flex-wrap justify-between my-2\">\n                        <div class=\"w-1/3 px-2\">\n                            <div class=\"text-md mb-1\">Legend Horizontal Alignment</div>\n                            <dx-select-box [searchEnabled]=\"true\" [items]=\"['right','left','center']\" [value]=\"'center'\"\n                                [(ngModel)]=\"chartConfig.horizontalAlignment\"></dx-select-box>\n\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> legent Vertical Alignment</div>\n                            <dx-select-box [searchEnabled]=\"true\" [items]=\"['top','bottom']\" [value]=\"'bottom'\"\n                                [(ngModel)]=\"chartConfig.verticalAlignment\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1 mt-8\"></div>\n                            <dx-check-box [(ngModel)]=\"chartConfig.legendDisplay\" text=\"Legend Display\"></dx-check-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Argument Field</div>\n                            <dx-select-box [items]=\"configColume\"\n                                [(ngModel)]=\"chartConfig.argumentField\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Size</div>\n                            <dx-text-box [(ngModel)]=\"chartConfig.size\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Caption</div>\n                            <dx-text-box [(ngModel)]=\"chartConfig.caption\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2\"> Display Formate </div>\n                            <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                [(ngModel)]=\"mainChartCourceObject.kpiConfig.formate\"\n                                [readOnly]=\"false\"></dx-select-box>\n                        </div>\n                    </div>\n                </div>\n                <div *ngIf=\"activeTab === 'columns'\">\n                    <dx-scroll-view class=\"h-full\" [width]=\"'100%'\" [height]=\"'100%'\">\n                        <div class=\" border-x border-b \">\n                            <div class=\"py-1 flex flex-wrap border-b\"\n                                *ngFor=\"let item of chartConfig.chart_config; let i = index;\">\n\n                                <div class=\"px-2 mb-1 w-1/3\">\n                                    <div class=\"text-md mb-2\"> Type</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"chartTypeSource\" [value]=\"'spline'\"\n                                        [(ngModel)]=\"item.type\"></dx-select-box>\n                                </div>\n                                <div class=\"px-2 mb-1 w-1/3\">\n                                    <div class=\"text-md mb-1\"> Value Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"item.valueField\"></dx-select-box>\n                                </div>\n\n                                <div class=\"px-2 mb-1 w-1/3\">\n                                    <div class=\"text-md mb-1\"> Axis</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"item.axis\"></dx-select-box>\n                                </div>\n                                <div class=\" px-2 mb-1 w-1/4\">\n                                    <div class=\"text-md mb-1\"> Position</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"['right','left']\"\n                                        [(ngModel)]=\"item.position\"></dx-select-box>\n                                </div>\n                                <div class=\"px-2 mb-1 w-1/4\">\n                                    <div class=\"text-md mb-1\"> Name</div>\n                                    <dx-text-box [(ngModel)]=\"item.name\"></dx-text-box>\n                                </div>\n                                <div class=\"px-2 mb-1 w-1/4\">\n                                    <div class=\"text-md mb-2\"> Color</div>\n                                    <dx-color-box [(ngModel)]=\"item.color\"></dx-color-box>\n                                </div>\n                                <div class=\"text-center my-1 w-1/4\">\n                                    <button *ngIf=\"i !== 0\" class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItem(i, 'up')\">\n                                        <i class=\"fa fa-arrow-up\" aria-hidden=\"true\"></i>\n                                    </button>\n                                    <button *ngIf=\"i !== chartConfig.chart_config.length - 1\"\n                                        class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItem(i, 'down')\">\n                                        <i class=\"fa fa-arrow-down\" aria-hidden=\"true\"></i>\n                                    </button>\n\n                                    <button class=\"{{commonService.btn_danger_sm}} cursor-pointer\"\n                                        (click)=\"deleteColumns(i)\"><i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                    </button>\n                                </div>\n                            </div>\n                            <div class=\"flex flex-row justify-end my-2\">\n                                <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\"\n                                    (click)=\"addColumns()\">Add\n                                    Columns</button>\n                            </div>\n                        </div>\n                    </dx-scroll-view>\n                </div>\n                <!-- <div *ngIf=\"activeTab === 'widget'\">\n                    <div class=\"flex flex-wrap justify-between my-2\">\n                        <div class=\"w-1/3 px-1 mb-1\">\n                            <div class=\"text-md mb-2\"> Widget level</div>\n                            <dx-text-box [value]=\"mainChartCourceObject.widget\"\n                                [(ngModel)]=\"mainChartCourceObject.widget\" [readOnly]=\"isEditWidget\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-1 mb-1\">\n                            <div class=\"text-md mb-2\"> Title</div>\n                            <dx-text-box [value]=\"widGetConfig.widgetTitle\"\n                                [(ngModel)]=\"widGetConfig.widgetTitle\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-1 mb-1\">\n                            <div class=\"text-md mb-2\"> Width </div>\n                            <dx-select-box [value]=\"widGetConfig.width\" [items]=\"widget_width\"\n                                [(ngModel)]=\"widGetConfig.width\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-1 mb-1\">\n                            <div class=\"text-md mb-2\"> Display Formate </div>\n                            <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                [(ngModel)]=\"mainChartCourceObject.kpiConfig.formate\"\n                                [readOnly]=\"false\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-1 pt-6 text-center\">\n                            <dx-check-box [value]=\"widGetConfig.display\" [(ngModel)]=\"widGetConfig.display\"\n                                text=\"Display\"></dx-check-box>\n                        </div>\n                    </div>\n\n                </div> -->\n            </div>\n        </ng-container>\n\n\n    </div>\n\n</div>\n\n<div class=\"flex flex-row border-t pl-3\">\n    <div class=\"flex justify-start mx-1\">\n        <button class=\"{{commonService.btn_warning_md}} cursor-pointer mt-2\" (click)=\"isJsonPreview = true\">\n            Preview</button>\n        <button class=\"{{commonService.btn_primary_md}} cursor-pointer mt-2\" (click)=\"isJsonPreview = false\">Data\n            Preview</button>\n    </div>\n    <div class=\"flex justify-end mx-1 flex-grow\">\n        <button class=\"{{commonService.btn_success_md}} cursor-pointer mt-2\"\n            (click)=\"getSaveChartConfig()\">Submit</button>\n    </div>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i6.DxoLabelComponent, selector: "dxo-label", inputs: ["connectorColor", "connectorWidth", "customizeText", "font", "format", "indent", "visible", "horizontalAlignment", "position", "text", "verticalAlignment", "alignment", "customizeHint", "displayMode", "indentFromAxis", "overlappingBehavior", "rotationAngle", "staggeringSpacing", "template", "textOverflow", "wordWrap", "argumentFormat", "backgroundColor", "border", "connector", "displayFormat", "horizontalOffset", "showForZeroValues", "verticalOffset", "hideFirstOrLast", "indentFromTick", "useRangeColors", "location", "showColon", "radialOffset", "topIndent", "shadow", "useNodeColors", "dataField", "enabled"] }, { kind: "component", type: i6.DxoLegendComponent, selector: "dxo-legend", inputs: ["backgroundColor", "border", "columnCount", "columnItemSpacing", "customizeHint", "customizeItems", "customizeText", "font", "horizontalAlignment", "itemsAlignment", "itemTextFormat", "itemTextPosition", "margin", "markerSize", "markerTemplate", "orientation", "paddingLeftRight", "paddingTopBottom", "rowCount", "rowItemSpacing", "title", "verticalAlignment", "visible", "hoverMode", "position"] }, { kind: "component", type: i6.DxoTitleComponent, selector: "dxo-title", inputs: ["font", "horizontalAlignment", "margin", "placeholderSize", "subtitle", "text", "verticalAlignment", "textOverflow", "wordWrap", "alignment"] }, { kind: "component", type: i6.DxoSizeComponent, selector: "dxo-size", inputs: ["height", "width"] }, { kind: "component", type: i6.DxoTooltipComponent, selector: "dxo-tooltip", inputs: ["arrowLength", "border", "color", "container", "contentTemplate", "cornerRadius", "customizeTooltip", "enabled", "font", "format", "interactive", "opacity", "paddingLeftRight", "paddingTopBottom", "shadow", "zIndex", "argumentFormat", "location", "shared", "isShown", "text", "position", "showMode", "customizeLinkTooltip", "customizeNodeTooltip", "linkTooltipTemplate", "nodeTooltipTemplate"] }, { kind: "component", type: i5$1.DxChartComponent, selector: "dx-chart", inputs: ["adaptiveLayout", "adjustOnZoom", "animation", "annotations", "argumentAxis", "autoHidePointMarkers", "barGroupPadding", "barGroupWidth", "commonAnnotationSettings", "commonAxisSettings", "commonPaneSettings", "commonSeriesSettings", "containerBackgroundColor", "crosshair", "customizeAnnotation", "customizeLabel", "customizePoint", "dataPrepareSettings", "dataSource", "defaultPane", "disabled", "elementAttr", "export", "legend", "loadingIndicator", "margin", "maxBubbleSize", "minBubbleSize", "negativesAsZeroes", "palette", "paletteExtensionMode", "panes", "pathModified", "pointSelectionMode", "redrawOnResize", "resizePanesOnZoom", "resolveLabelOverlapping", "rotated", "rtlEnabled", "scrollBar", "series", "seriesSelectionMode", "seriesTemplate", "size", "stickyHovering", "synchronizeMultiAxes", "theme", "title", "tooltip", "valueAxis", "zoomAndPan"], outputs: ["onArgumentAxisClick", "onDisposing", "onDone", "onDrawn", "onExported", "onExporting", "onFileSaving", "onIncidentOccurred", "onInitialized", "onLegendClick", "onOptionChanged", "onPointClick", "onPointHoverChanged", "onPointSelectionChanged", "onSeriesClick", "onSeriesHoverChanged", "onSeriesSelectionChanged", "onTooltipHidden", "onTooltipShown", "onZoomEnd", "onZoomStart", "adaptiveLayoutChange", "adjustOnZoomChange", "animationChange", "annotationsChange", "argumentAxisChange", "autoHidePointMarkersChange", "barGroupPaddingChange", "barGroupWidthChange", "commonAnnotationSettingsChange", "commonAxisSettingsChange", "commonPaneSettingsChange", "commonSeriesSettingsChange", "containerBackgroundColorChange", "crosshairChange", "customizeAnnotationChange", "customizeLabelChange", "customizePointChange", "dataPrepareSettingsChange", "dataSourceChange", "defaultPaneChange", "disabledChange", "elementAttrChange", "exportChange", "legendChange", "loadingIndicatorChange", "marginChange", "maxBubbleSizeChange", "minBubbleSizeChange", "negativesAsZeroesChange", "paletteChange", "paletteExtensionModeChange", "panesChange", "pathModifiedChange", "pointSelectionModeChange", "redrawOnResizeChange", "resizePanesOnZoomChange", "resolveLabelOverlappingChange", "rotatedChange", "rtlEnabledChange", "scrollBarChange", "seriesChange", "seriesSelectionModeChange", "seriesTemplateChange", "sizeChange", "stickyHoveringChange", "synchronizeMultiAxesChange", "themeChange", "titleChange", "tooltipChange", "valueAxisChange", "zoomAndPanChange"] }, { kind: "component", type: i6.DxoArgumentAxisComponent, selector: "dxo-argument-axis", inputs: ["aggregateByCategory", "aggregatedPointsPosition", "aggregationGroupWidth", "aggregationInterval", "allowDecimals", "argumentType", "axisDivisionFactor", "breaks", "breakStyle", "categories", "color", "constantLines", "constantLineStyle", "customPosition", "customPositionAxis", "discreteAxisDivisionMode", "endOnTick", "grid", "holidays", "hoverMode", "inverted", "label", "linearThreshold", "logarithmBase", "maxValueMargin", "minorGrid", "minorTick", "minorTickCount", "minorTickInterval", "minValueMargin", "minVisualRangeLength", "offset", "opacity", "placeholderSize", "position", "singleWorkdays", "strips", "stripStyle", "tick", "tickInterval", "title", "type", "valueMarginsEnabled", "visible", "visualRange", "visualRangeUpdateMode", "wholeRange", "width", "workdaysOnly", "workWeek", "firstPointOnStartAngle", "originValue", "period", "startAngle"], outputs: ["visualRangeChange"] }, { kind: "component", type: i6.DxoCommonSeriesSettingsComponent, selector: "dxo-common-series-settings", inputs: ["aggregation", "area", "argumentField", "axis", "bar", "barOverlapGroup", "barPadding", "barWidth", "border", "bubble", "candlestick", "closeValueField", "color", "cornerRadius", "dashStyle", "fullstackedarea", "fullstackedbar", "fullstackedline", "fullstackedspline", "fullstackedsplinearea", "highValueField", "hoverMode", "hoverStyle", "ignoreEmptyPoints", "innerColor", "label", "line", "lowValueField", "maxLabelCount", "minBarSize", "opacity", "openValueField", "pane", "point", "rangearea", "rangebar", "rangeValue1Field", "rangeValue2Field", "reduction", "scatter", "selectionMode", "selectionStyle", "showInLegend", "sizeField", "spline", "splinearea", "stack", "stackedarea", "stackedbar", "stackedline", "stackedspline", "stackedsplinearea", "steparea", "stepline", "stock", "tagField", "type", "valueErrorBar", "valueField", "visible", "width", "argumentType", "minSegmentSize", "smallValuesGrouping", "closed"] }, { kind: "component", type: i6.DxoConnectorComponent, selector: "dxo-connector", inputs: ["color", "visible", "width", "opacity"] }, { kind: "component", type: i6.DxiSeriesComponent, selector: "dxi-series", inputs: ["aggregation", "argumentField", "axis", "barOverlapGroup", "barPadding", "barWidth", "border", "closeValueField", "color", "cornerRadius", "dashStyle", "highValueField", "hoverMode", "hoverStyle", "ignoreEmptyPoints", "innerColor", "label", "lowValueField", "maxLabelCount", "minBarSize", "name", "opacity", "openValueField", "pane", "point", "rangeValue1Field", "rangeValue2Field", "reduction", "selectionMode", "selectionStyle", "showInLegend", "sizeField", "stack", "tag", "tagField", "type", "valueErrorBar", "valueField", "visible", "width", "argumentType", "minSegmentSize", "smallValuesGrouping", "closed"] }, { kind: "component", type: i6.DxiValueAxisComponent, selector: "dxi-value-axis", inputs: ["aggregatedPointsPosition", "allowDecimals", "autoBreaksEnabled", "axisDivisionFactor", "breaks", "breakStyle", "categories", "color", "constantLines", "constantLineStyle", "customPosition", "discreteAxisDivisionMode", "endOnTick", "grid", "inverted", "label", "linearThreshold", "logarithmBase", "maxAutoBreakCount", "maxValueMargin", "minorGrid", "minorTick", "minorTickCount", "minorTickInterval", "minValueMargin", "minVisualRangeLength", "multipleAxesSpacing", "name", "offset", "opacity", "pane", "placeholderSize", "position", "showZero", "strips", "stripStyle", "synchronizedValue", "tick", "tickInterval", "title", "type", "valueMarginsEnabled", "valueType", "visible", "visualRange", "visualRangeUpdateMode", "wholeRange", "width"], outputs: ["visualRangeChange"] }, { kind: "component", type: i5.DxCheckBoxComponent, selector: "dx-check-box", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "iconSize", "isValid", "name", "readOnly", "rtlEnabled", "tabIndex", "text", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "visible", "width"], outputs: ["onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconSizeChange", "isValidChange", "nameChange", "readOnlyChange", "rtlEnabledChange", "tabIndexChange", "textChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "component", type: i6$2.DxColorBoxComponent, selector: "dx-color-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "applyButtonText", "applyValueMode", "buttons", "cancelButtonText", "deferRendering", "disabled", "dropDownButtonTemplate", "dropDownOptions", "editAlphaChannel", "elementAttr", "fieldTemplate", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "keyStep", "label", "labelMode", "name", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showDropDownButton", "stylingMode", "tabIndex", "text", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "visible", "width"], outputs: ["onChange", "onClosed", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOpened", "onOptionChanged", "onPaste", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "applyButtonTextChange", "applyValueModeChange", "buttonsChange", "cancelButtonTextChange", "deferRenderingChange", "disabledChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "editAlphaChannelChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "keyStepChange", "labelChange", "labelModeChange", "nameChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showDropDownButtonChange", "stylingModeChange", "tabIndexChange", "textChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "component", type: i8$2.DxPieChartComponent, selector: "dx-pie-chart", inputs: ["adaptiveLayout", "animation", "annotations", "centerTemplate", "commonAnnotationSettings", "commonSeriesSettings", "customizeAnnotation", "customizeLabel", "customizePoint", "dataSource", "diameter", "disabled", "elementAttr", "export", "innerRadius", "legend", "loadingIndicator", "margin", "minDiameter", "palette", "paletteExtensionMode", "pathModified", "pointSelectionMode", "redrawOnResize", "resolveLabelOverlapping", "rtlEnabled", "segmentsDirection", "series", "seriesTemplate", "size", "sizeGroup", "startAngle", "theme", "title", "tooltip", "type"], outputs: ["onDisposing", "onDone", "onDrawn", "onExported", "onExporting", "onFileSaving", "onIncidentOccurred", "onInitialized", "onLegendClick", "onOptionChanged", "onPointClick", "onPointHoverChanged", "onPointSelectionChanged", "onTooltipHidden", "onTooltipShown", "adaptiveLayoutChange", "animationChange", "annotationsChange", "centerTemplateChange", "commonAnnotationSettingsChange", "commonSeriesSettingsChange", "customizeAnnotationChange", "customizeLabelChange", "customizePointChange", "dataSourceChange", "diameterChange", "disabledChange", "elementAttrChange", "exportChange", "innerRadiusChange", "legendChange", "loadingIndicatorChange", "marginChange", "minDiameterChange", "paletteChange", "paletteExtensionModeChange", "pathModifiedChange", "pointSelectionModeChange", "redrawOnResizeChange", "resolveLabelOverlappingChange", "rtlEnabledChange", "segmentsDirectionChange", "seriesChange", "seriesTemplateChange", "sizeChange", "sizeGroupChange", "startAngleChange", "themeChange", "titleChange", "tooltipChange", "typeChange"] }, { kind: "component", type: i9$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: i11.DxTextBoxComponent, selector: "dx-text-box", inputs: ["accessKey", "activeStateEnabled", "buttons", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "label", "labelMode", "mask", "maskChar", "maskInvalidMessage", "maskRules", "maxLength", "mode", "name", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showMaskMode", "spellcheck", "stylingMode", "tabIndex", "text", "useMaskedValue", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOptionChanged", "onPaste", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "labelChange", "labelModeChange", "maskChange", "maskCharChange", "maskInvalidMessageChange", "maskRulesChange", "maxLengthChange", "modeChange", "nameChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showMaskModeChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useMaskedValueChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i13.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i4.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'\">\n                <div\n                    class=\"m-3 p-4 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700\">\n                    <!-- <h6 class=\"mb-1 text-md font-bold tracking-tight text-gray-900 dark:text-white border-b pb-3\">\n                        {{widGetConfig.widgetTitle}}\n                    </h6> -->\n                    <dx-pie-chart id=\"pie\" type=\"doughnut\" [title]=\"{ text: chartConfig.caption, font: { size: 14 } }\"\n                        palette=\"Soft Pastel\" [dataSource]=\"dataSourseForChart\" centerTemplate=\"centerTemplate\"\n                        (onPointClick)=\"pointClickHandler($event)\" [palette]=\"chartConfig.palette\">\n\n                        <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n                            <ng-container *ngIf=\"item.color\">\n                                <dxi-series argumentField={{chartConfig.argumentField}} valueField=\"{{item.valueField}}\"\n                                    name=\"{{item.name}}\" color=\"{{item.color}}\">\n                                    <dxo-label [visible]=\"chartConfig.labelDisplay\" format=\"#,##0.##\">\n                                        <dxo-connector [visible]=\"true\"></dxo-connector>\n                                    </dxo-label>\n                                </dxi-series>\n                            </ng-container>\n                            <ng-container *ngIf=\"!item.color\">\n                                <dxi-series argumentField={{chartConfig.argumentField}} valueField=\"{{item.valueField}}\"\n                                    name=\"{{item.name}}\">\n                                    <dxo-label [visible]=\"chartConfig.labelDisplay\" format=\"#,##0.##\">\n                                        <dxo-connector [visible]=\"true\"></dxo-connector>\n                                    </dxo-label>\n                                </dxi-series>\n                            </ng-container>\n                        </ng-container>\n                        <dxo-legend [visible]=\"chartConfig.legendDisplay\"\n                            horizontalAlignment=\"{{chartConfig.horizontalAlignment}}\"\n                            verticalAlignment=\"{{chartConfig.verticalAlignment}}\"></dxo-legend>\n                        <!-- <dxo-export [enabled]=\"true\"></dxo-export> -->\n                        <dxo-tooltip [enabled]=\"true\" [customizeTooltip]=\"customizeTooltip\" format=\"#,##0.##\">\n                        </dxo-tooltip>\n                        <svg *dxTemplate=\"let pieChart of 'centerTemplate'\">\n                            <circle cx=\"100\" cy=\"100\" [attr.r]=\"pieChart.getInnerRadius() - 6\" fill=\"gray\"\n                                opacity=\"0.0001\">\n                            </circle>\n\n                            <text text-anchor=\"middle\" style=\"font-size: 28px\" x=\"100\" y=\"100\" fill=\"#eee\">\n                                <tspan x=\"100\">{{ calculateTotal(pieChart) }}</tspan>\n                                <!-- display: inline -->\n                                <!-- <tspan x=\"100\" dy=\"20px\" style=\"font-weight: 600\"></tspan> -->\n                            </text>\n                        </svg>\n                    </dx-pie-chart>\n                </div>\n            </ng-container>\n            <ng-container *ngIf=\"chartType !== 'doughnut' && chartType !== 'funnel' && chartType !== 'bubble'\">\n                <div\n                    class=\"m-3 p-4 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700\">\n                    <!-- <h6 class=\"mb-1 text-md font-bold tracking-tight text-gray-900 dark:text-white border-b pb-3\">\n                        {{widGetConfig.widgetTitle}}\n                    </h6> -->\n                    <dx-chart id=\"chart\" [dataSource]=\"dataSourseForChart\"\n                        [title]=\"{ text: chartConfig.caption, font: { size: 14 } }\"\n                        [valueAxis]=\"chartConfig.valueAxisConfig\">\n                        <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n                            <ng-container *ngIf=\"item.axis\">\n                                <dxi-value-axis [name]=\"item.axis\" [position]=\"item.position\">\n                                    <dxo-title [text]=\"item.name\"></dxo-title>\n                                </dxi-value-axis>\n                            </ng-container>\n                        </ng-container>\n                        <dxo-argument-axis>\n                            <dxo-label overlappingBehavior=\"rotate\" [rotationAngle]=\"270\"></dxo-label>\n                        </dxo-argument-axis>\n                        <dxo-tooltip [enabled]=\"true\" [shared]=\"true\"></dxo-tooltip>\n                        <dxo-common-series-settings\n                            [argumentField]=\"chartConfig.argumentField\"></dxo-common-series-settings>\n                        <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n                            <ng-container *ngIf=\"item.color\">\n                                <dxi-series type=\"{{item.type}}\" valueField=\"{{item.valueField}}\" axis=\"{{item.axis}}\"\n                                    name=\"{{item.name}}\" color=\"{{item.color}}\">\n                                </dxi-series>\n                            </ng-container>\n                            <ng-container *ngIf=\"!item.color\">\n                                <dxi-series type=\"{{item.type}}\" valueField=\"{{item.valueField}}\" axis=\"{{item.axis}}\"\n                                    name=\"{{item.name}}\">\n                                </dxi-series>\n                            </ng-container>\n\n                        </ng-container>\n                        <dxo-size [height]=\"chartConfig.size\"></dxo-size>\n                        <dxo-legend [visible]=\"chartConfig.legendDisplay\"\n                            [verticalAlignment]=\"chartConfig.verticalAlignment\"\n                            [horizontalAlignment]=\"chartConfig.horizontalAlignment\"></dxo-legend>\n                    </dx-chart>\n                </div>\n            </ng-container>\n\n            <ng-container *ngIf=\"chartType == 'funnel'\">\n\n            </ng-container>\n            <ng-container *ngIf=\"chartType == 'bubble'\">\n                <div class=\"mx-5\">\n                    <ng-container *ngFor=\"let item of heatChartDataSource.dataSet\">\n                        <div class=\"flex flex-row\">\n                            <div class=\"h-10 text-sm items-center min-w-24 max-w-[30%] justify-center flex\">\n                                {{item.datasource}}\n                            </div>\n                            <div class=\"inline-block \">\n                                <div class=\"flex flex-nowrap justify-center \">\n                                    <ng-container *ngFor=\"let box of item.dataset\">\n                                        <div class=\"flex-shrink-0 min-w-10 max-w-[20%] h-10 text-sm cursor-pointer flex items-center justify-center text-gray-800\"\n                                            [matTooltip]=\"'Record Date: ' + box.recordDate + '\\nRecharge Count: ' + box.toolTip\"\n                                            matTooltipClass=\"custom-tooltip\">\n                                            <div class=\"rounded-full\" [ngStyle]=\"{\n                                        'background-color': box.isHovered ? 'rgb(135, 184, 106)' : box.color,\n                                        'width.px': box.size,\n                                        'hover': box.hover,\n                                        'height.px': box.size\n                                      }\" (mouseenter)=\"box.isHovered = true\" (mouseleave)=\"box.isHovered = false\">\n                                            </div>\n                                        </div>\n                                    </ng-container>\n                                </div>\n                            </div>\n                        </div>\n                    </ng-container>\n                    <div class=\"inline-block\">\n                        <div class=\"flex flex-nowrap justify-center\">\n                            <div class=\"flex-shrink-0 w-24 max-w-[20%] h-full flex items-center justify-center\"></div>\n                            <div *ngFor=\"let item of heatChartDataSource.argumentValue\"\n                                class=\"flex-shrink-0 w-10 max-w-[20%] min-h-14 flex text-sm items-center justify-center my-1\"\n                                [ngStyle]=\"{'height': 'auto'}\">\n                                <span class=\"text-rotate\">\n                                    {{item}}\n                                </span>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </ng-container>\n\n        </ng-container>\n\n    </div>\n    <div class=\"w-full m-2 border\">\n        <div class=\"flex flex-row mb-1\">\n            <div class=\"w-1/3 mx-1\">\n                <dx-select-box [dataSource]=\"chartAxisSource\" [(ngModel)]=\"chartAccess\" placeholder=\"Chart Type\"\n                    displayExpr=\"name\" valueExpr=\"value\" (onValueChanged)=\"getChartAccessType($event)\">\n                </dx-select-box>\n            </div>\n            <div class=\"w-1/3 mx-1\">\n                <ng-container *ngIf=\"chartAccess == 'single'\">\n                    <dx-select-box [items]=\"chartTypeSource\" (onValueChanged)=\"getChartType($event)\"\n                        [(ngModel)]=\"chartType\"></dx-select-box>\n                </ng-container>\n                <ng-container *ngIf=\"chartAccess == 'multy'\">\n                    <dx-select-box [items]=\"componentNamesForMultyAccess\" displayExpr=\"item\" valueExpr=\"compName\"\n                        [(ngModel)]=\"componentName\"></dx-select-box>\n                </ng-container>\n            </div>\n        </div>\n        <ng-container *ngIf=\"chartAccess == 'single'\">\n\n            <div class=\"mb-4 border-b border-gray-200 dark:border-gray-700\">\n                <ul class=\"flex flex-wrap -mb-px text-sm font-medium text-center\" role=\"tablist\">\n                    <li class=\"me-2\" role=\"presentation\">\n                        <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'basic',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'basic'\n                            }\" (click)=\"setActiveTab('basic')\" type=\"button\" role=\"tab\">\n                            Basic\n                        </button>\n                    </li>\n                    <li class=\"me-2\" role=\"presentation\">\n                        <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'columns',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'columns'\n                            }\" (click)=\"setActiveTab('columns')\" type=\"button\" role=\"tab\">\n                            Columns\n                        </button>\n                    </li>\n                    <!-- <li class=\"me-2\" role=\"presentation\">\n                        <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'widget',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'widget'\n                            }\" (click)=\"setActiveTab('widget')\" type=\"button\" role=\"tab\">\n                            Widget\n                        </button>\n                    </li> -->\n                </ul>\n            </div>\n\n            <div id=\"default-styled-tab-content\">\n                <div *ngIf=\"activeTab === 'basic'\">\n                    <div class=\"flex flex-wrap justify-between my-2\">\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1 \">Legend Horizontal Alignment</div>\n                            <dx-select-box [searchEnabled]=\"true\" [items]=\"['right','left','center']\"\n                                [(ngModel)]=\"chartConfig.horizontalAlignment\"></dx-select-box>\n\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Legend Vertical Alignment</div>\n                            <dx-select-box [searchEnabled]=\"true\" [items]=\"['top','bottom']\"\n                                [(ngModel)]=\"chartConfig.verticalAlignment\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1 mt-8\"></div>\n                            <dx-check-box [(ngModel)]=\"chartConfig.legendDisplay\" text=\"Legend Display\"></dx-check-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Argument Field</div>\n                            <dx-select-box [items]=\"configColume\"\n                                [(ngModel)]=\"chartConfig.argumentField\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Size</div>\n                            <dx-text-box [(ngModel)]=\"chartConfig.size\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Caption</div>\n                            <dx-text-box [(ngModel)]=\"chartConfig.caption\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2\"> Display Formate </div>\n                            <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                [(ngModel)]=\"mainChartCourceObject.kpiConfig.formate\"\n                                [readOnly]=\"false\"></dx-select-box>\n                        </div>\n                        <div class=\"w-2/3 px-2 mt-2\" *ngIf=\"chartType == 'doughnut'\">\n                            <div class=\" flex flex-row\">\n                                <div class=\"mr-2\">\n                                    <div class=\"text-md mb-1\"> Color Palette</div>\n                                    <dx-select-box [items]=\"doughnut_color_palette\"\n                                        [(ngModel)]=\"chartConfig.palette\"></dx-select-box>\n                                </div>\n                                <div class=\"mt-5\">\n                                    <dx-check-box [value]=\"chartConfig.labelDisplay\"\n                                        [(ngModel)]=\"chartConfig.labelDisplay\" text=\"Label Display\"></dx-check-box>\n                                </div>\n                            </div>\n\n\n                        </div>\n                        <div class=\"w-2/3 px-2 mt-2\" *ngIf=\"chartType == 'bubble'\">\n                            <div class=\" flex flex-row\">\n                                <div class=\"mr-2\">\n                                    <div class=\"text-md mb-1\"> Source Field</div>\n                                    <dx-select-box [items]=\"configColume\"\n                                        [(ngModel)]=\"chartConfig.sourceField\"></dx-select-box>\n                                </div>\n                                <div class=\"mr-2\">\n                                    <div class=\"text-md mb-1\"> Min Bubble Size</div>\n                                    <dx-text-box [(ngModel)]=\"chartConfig.minBubbleSize\"></dx-text-box>\n                                </div>\n                                <div class=\"mr-2\">\n                                    <div class=\"text-md mb-1\"> Max bubble size</div>\n                                    <dx-text-box [(ngModel)]=\"chartConfig.maxBubbleSize\"></dx-text-box>\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\" *ngIf=\"chartType == 'doughnut'\">\n\n                        </div>\n\n                    </div>\n                </div>\n                <div *ngIf=\"activeTab === 'columns'\">\n                    <div class=\"h-60 overflow-x-auto\">\n                        <div class=\" border-x border-b \">\n                            <div class=\"py-1 flex flex-row border-b\"\n                                *ngFor=\"let item of chartConfig.chart_config; let i = index\">\n\n                                <div class=\"px-1 mb-1 w-1/3\">\n                                    <div class=\"text-md mb-1\"> Value Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"item.valueField\"></dx-select-box>\n                                </div>\n\n                                <div class=\"px-1 mb-1 w-1/4\" *ngIf=\"chartType !== 'doughnut'\">\n                                    <div class=\"text-md mb-1\"> Axis</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"item.axis\"></dx-select-box>\n                                </div>\n                                <div class=\" px-2 mb-1 w-1/3\">\n                                    <div class=\"text-md mb-1\"> Position</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"['right','left']\"\n                                        [(ngModel)]=\"item.position\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-1/4\">\n                                    <div class=\"text-md mb-1\"> Name</div>\n                                    <dx-text-box [(ngModel)]=\"item.name\"></dx-text-box>\n                                </div>\n                                <div class=\"text-center mt-6 w-1/6\">\n                                    <button *ngIf=\"i !== 0\" class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItem(i, 'up')\">\n                                        <i class=\"fa fa-arrow-up\" aria-hidden=\"true\"></i>\n                                    </button>\n                                    <button *ngIf=\"i !== chartConfig.chart_config.length - 1\"\n                                        class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItem(i, 'down')\">\n                                        <i class=\"fa fa-arrow-down\" aria-hidden=\"true\"></i>\n                                    </button>\n\n                                    <button class=\"{{commonService.btn_danger_sm}} cursor-pointer\"\n                                        (click)=\"deleteColumns(i)\"><i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                    </button>\n                                </div>\n                            </div>\n                            <div class=\"flex flex-row justify-end my-2\" *ngIf=\"chartType == 'doughnut'\">\n                                <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\"\n                                    (click)=\"addColumns()\">Add\n                                    Series</button>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <!-- <div *ngIf=\"activeTab === 'widget'\">\n                    <div class=\"flex flex-wrap justify-between my-2\">\n                        <div class=\"w-1/3 px-1 mb-1\">\n                            <div class=\"text-md mb-2\"> Widget level</div>\n                            <dx-text-box [value]=\"mainChartCourceObject.widget\"\n                                [(ngModel)]=\"mainChartCourceObject.widget\" [readOnly]=\"isEditWidget\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-1 mb-1\">\n                            <div class=\"text-md mb-2\"> Title</div>\n                            <dx-text-box [value]=\"widGetConfig.widgetTitle\"\n                                [(ngModel)]=\"widGetConfig.widgetTitle\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-1 mb-1\">\n                            <div class=\"text-md mb-2\"> Width </div>\n                            <dx-select-box [value]=\"widGetConfig.width\" [items]=\"widget_width\"\n                                [(ngModel)]=\"widGetConfig.width\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-1 mb-1\">\n                            <div class=\"text-md mb-2\"> Display Formate </div>\n                            <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                [(ngModel)]=\"mainChartCourceObject.kpiConfig.formate\"\n                                [readOnly]=\"false\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-1 pt-6 text-center\">\n                            <dx-check-box [value]=\"widGetConfig.display\" [(ngModel)]=\"widGetConfig.display\"\n                                text=\"Display\"></dx-check-box>\n                        </div>\n                    </div>\n\n                </div> -->\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"chartAccess == 'multy'\">\n            <div class=\"mb-4 border-b border-gray-200 dark:border-gray-700\">\n                <ul class=\"flex flex-wrap -mb-px text-sm font-medium text-center\" role=\"tablist\">\n                    <li class=\"me-2\" role=\"presentation\">\n                        <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'basic',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'basic'\n                            }\" (click)=\"setActiveTab('basic')\" type=\"button\" role=\"tab\">\n                            Basic\n                        </button>\n                    </li>\n                    <li class=\"me-2\" role=\"presentation\">\n                        <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'columns',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'columns'\n                            }\" (click)=\"setActiveTab('columns')\" type=\"button\" role=\"tab\">\n                            Columns\n                        </button>\n                    </li>\n                    <!-- <li class=\"me-2\" role=\"presentation\">\n                        <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'widget',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'widget'\n                            }\" (click)=\"setActiveTab('widget')\" type=\"button\" role=\"tab\">\n                            Widget\n                        </button>\n                    </li> -->\n                </ul>\n            </div>\n\n            <div id=\"default-styled-tab-content\">\n                <div *ngIf=\"activeTab === 'basic'\">\n                    <div class=\"flex flex-wrap justify-between my-2\">\n                        <div class=\"w-1/3 px-2\">\n                            <div class=\"text-md mb-1\">Legend Horizontal Alignment</div>\n                            <dx-select-box [searchEnabled]=\"true\" [items]=\"['right','left','center']\" [value]=\"'center'\"\n                                [(ngModel)]=\"chartConfig.horizontalAlignment\"></dx-select-box>\n\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> legent Vertical Alignment</div>\n                            <dx-select-box [searchEnabled]=\"true\" [items]=\"['top','bottom']\" [value]=\"'bottom'\"\n                                [(ngModel)]=\"chartConfig.verticalAlignment\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1 mt-8\"></div>\n                            <dx-check-box [(ngModel)]=\"chartConfig.legendDisplay\" text=\"Legend Display\"></dx-check-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Argument Field</div>\n                            <dx-select-box [items]=\"configColume\"\n                                [(ngModel)]=\"chartConfig.argumentField\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Size</div>\n                            <dx-text-box [(ngModel)]=\"chartConfig.size\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Caption</div>\n                            <dx-text-box [(ngModel)]=\"chartConfig.caption\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2\"> Display Formate </div>\n                            <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                [(ngModel)]=\"mainChartCourceObject.kpiConfig.formate\"\n                                [readOnly]=\"false\"></dx-select-box>\n                        </div>\n                    </div>\n                </div>\n                <div *ngIf=\"activeTab === 'columns'\">\n                    <dx-scroll-view class=\"h-full\" [width]=\"'100%'\" [height]=\"'100%'\">\n                        <div class=\" border-x border-b \">\n                            <div class=\"py-1 flex flex-wrap border-b\"\n                                *ngFor=\"let item of chartConfig.chart_config; let i = index;\">\n\n                                <div class=\"px-2 mb-1 w-1/3\">\n                                    <div class=\"text-md mb-2\"> Type</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"chartTypeSource\" [value]=\"'spline'\"\n                                        [(ngModel)]=\"item.type\"></dx-select-box>\n                                </div>\n                                <div class=\"px-2 mb-1 w-1/3\">\n                                    <div class=\"text-md mb-1\"> Value Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"item.valueField\"></dx-select-box>\n                                </div>\n\n                                <div class=\"px-2 mb-1 w-1/3\">\n                                    <div class=\"text-md mb-1\"> Axis</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"item.axis\"></dx-select-box>\n                                </div>\n                                <div class=\" px-2 mb-1 w-1/4\">\n                                    <div class=\"text-md mb-1\"> Position</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"['right','left']\"\n                                        [(ngModel)]=\"item.position\"></dx-select-box>\n                                </div>\n                                <div class=\"px-2 mb-1 w-1/4\">\n                                    <div class=\"text-md mb-1\"> Name</div>\n                                    <dx-text-box [(ngModel)]=\"item.name\"></dx-text-box>\n                                </div>\n                                <div class=\"px-2 mb-1 w-1/4\">\n                                    <div class=\"text-md mb-2\"> Color</div>\n                                    <dx-color-box [(ngModel)]=\"item.color\"></dx-color-box>\n                                </div>\n                                <div class=\"text-center my-1 w-1/4\">\n                                    <button *ngIf=\"i !== 0\" class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItem(i, 'up')\">\n                                        <i class=\"fa fa-arrow-up\" aria-hidden=\"true\"></i>\n                                    </button>\n                                    <button *ngIf=\"i !== chartConfig.chart_config.length - 1\"\n                                        class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItem(i, 'down')\">\n                                        <i class=\"fa fa-arrow-down\" aria-hidden=\"true\"></i>\n                                    </button>\n\n                                    <button class=\"{{commonService.btn_danger_sm}} cursor-pointer\"\n                                        (click)=\"deleteColumns(i)\"><i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                    </button>\n                                </div>\n                            </div>\n                            <div class=\"flex flex-row justify-end my-2\">\n                                <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\"\n                                    (click)=\"addColumns()\">Add\n                                    Columns</button>\n                            </div>\n                        </div>\n                    </dx-scroll-view>\n                </div>\n                <!-- <div *ngIf=\"activeTab === 'widget'\">\n                    <div class=\"flex flex-wrap justify-between my-2\">\n                        <div class=\"w-1/3 px-1 mb-1\">\n                            <div class=\"text-md mb-2\"> Widget level</div>\n                            <dx-text-box [value]=\"mainChartCourceObject.widget\"\n                                [(ngModel)]=\"mainChartCourceObject.widget\" [readOnly]=\"isEditWidget\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-1 mb-1\">\n                            <div class=\"text-md mb-2\"> Title</div>\n                            <dx-text-box [value]=\"widGetConfig.widgetTitle\"\n                                [(ngModel)]=\"widGetConfig.widgetTitle\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-1 mb-1\">\n                            <div class=\"text-md mb-2\"> Width </div>\n                            <dx-select-box [value]=\"widGetConfig.width\" [items]=\"widget_width\"\n                                [(ngModel)]=\"widGetConfig.width\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-1 mb-1\">\n                            <div class=\"text-md mb-2\"> Display Formate </div>\n                            <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                [(ngModel)]=\"mainChartCourceObject.kpiConfig.formate\"\n                                [readOnly]=\"false\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-1 pt-6 text-center\">\n                            <dx-check-box [value]=\"widGetConfig.display\" [(ngModel)]=\"widGetConfig.display\"\n                                text=\"Display\"></dx-check-box>\n                        </div>\n                    </div>\n\n                </div> -->\n            </div>\n        </ng-container>\n\n\n    </div>\n\n</div>\n\n<div class=\"flex flex-row border-t pl-3\">\n    <div class=\"flex justify-start mx-1\">\n        <button class=\"{{commonService.btn_warning_md}} cursor-pointer mt-2\" (click)=\"isJsonPreview = true\">\n            Preview</button>\n        <button class=\"{{commonService.btn_primary_md}} cursor-pointer mt-2\" (click)=\"isJsonPreview = false\">Data\n            Preview</button>\n    </div>\n    <div class=\"flex justify-end mx-1 flex-grow\">\n        <button class=\"{{commonService.btn_success_md}} cursor-pointer mt-2\"\n            (click)=\"getSaveChartConfig()\">Submit</button>\n    </div>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i6.DxoLabelComponent, selector: "dxo-label", inputs: ["connectorColor", "connectorWidth", "customizeText", "font", "format", "indent", "visible", "horizontalAlignment", "position", "text", "verticalAlignment", "alignment", "customizeHint", "displayMode", "indentFromAxis", "overlappingBehavior", "rotationAngle", "staggeringSpacing", "template", "textOverflow", "wordWrap", "argumentFormat", "backgroundColor", "border", "connector", "displayFormat", "horizontalOffset", "showForZeroValues", "verticalOffset", "hideFirstOrLast", "indentFromTick", "useRangeColors", "location", "showColon", "radialOffset", "topIndent", "shadow", "useNodeColors", "dataField", "enabled"] }, { kind: "component", type: i6.DxoLegendComponent, selector: "dxo-legend", inputs: ["backgroundColor", "border", "columnCount", "columnItemSpacing", "customizeHint", "customizeItems", "customizeText", "font", "horizontalAlignment", "itemsAlignment", "itemTextFormat", "itemTextPosition", "margin", "markerSize", "markerTemplate", "orientation", "paddingLeftRight", "paddingTopBottom", "rowCount", "rowItemSpacing", "title", "verticalAlignment", "visible", "hoverMode", "position"] }, { kind: "component", type: i6.DxoTitleComponent, selector: "dxo-title", inputs: ["font", "horizontalAlignment", "margin", "placeholderSize", "subtitle", "text", "verticalAlignment", "textOverflow", "wordWrap", "alignment"] }, { kind: "component", type: i6.DxoSizeComponent, selector: "dxo-size", inputs: ["height", "width"] }, { kind: "component", type: i6.DxoTooltipComponent, selector: "dxo-tooltip", inputs: ["arrowLength", "border", "color", "container", "contentTemplate", "cornerRadius", "customizeTooltip", "enabled", "font", "format", "interactive", "opacity", "paddingLeftRight", "paddingTopBottom", "shadow", "zIndex", "argumentFormat", "location", "shared", "isShown", "text", "position", "showMode", "customizeLinkTooltip", "customizeNodeTooltip", "linkTooltipTemplate", "nodeTooltipTemplate"] }, { kind: "component", type: i5$1.DxChartComponent, selector: "dx-chart", inputs: ["adaptiveLayout", "adjustOnZoom", "animation", "annotations", "argumentAxis", "autoHidePointMarkers", "barGroupPadding", "barGroupWidth", "commonAnnotationSettings", "commonAxisSettings", "commonPaneSettings", "commonSeriesSettings", "containerBackgroundColor", "crosshair", "customizeAnnotation", "customizeLabel", "customizePoint", "dataPrepareSettings", "dataSource", "defaultPane", "disabled", "elementAttr", "export", "legend", "loadingIndicator", "margin", "maxBubbleSize", "minBubbleSize", "negativesAsZeroes", "palette", "paletteExtensionMode", "panes", "pathModified", "pointSelectionMode", "redrawOnResize", "resizePanesOnZoom", "resolveLabelOverlapping", "rotated", "rtlEnabled", "scrollBar", "series", "seriesSelectionMode", "seriesTemplate", "size", "stickyHovering", "synchronizeMultiAxes", "theme", "title", "tooltip", "valueAxis", "zoomAndPan"], outputs: ["onArgumentAxisClick", "onDisposing", "onDone", "onDrawn", "onExported", "onExporting", "onFileSaving", "onIncidentOccurred", "onInitialized", "onLegendClick", "onOptionChanged", "onPointClick", "onPointHoverChanged", "onPointSelectionChanged", "onSeriesClick", "onSeriesHoverChanged", "onSeriesSelectionChanged", "onTooltipHidden", "onTooltipShown", "onZoomEnd", "onZoomStart", "adaptiveLayoutChange", "adjustOnZoomChange", "animationChange", "annotationsChange", "argumentAxisChange", "autoHidePointMarkersChange", "barGroupPaddingChange", "barGroupWidthChange", "commonAnnotationSettingsChange", "commonAxisSettingsChange", "commonPaneSettingsChange", "commonSeriesSettingsChange", "containerBackgroundColorChange", "crosshairChange", "customizeAnnotationChange", "customizeLabelChange", "customizePointChange", "dataPrepareSettingsChange", "dataSourceChange", "defaultPaneChange", "disabledChange", "elementAttrChange", "exportChange", "legendChange", "loadingIndicatorChange", "marginChange", "maxBubbleSizeChange", "minBubbleSizeChange", "negativesAsZeroesChange", "paletteChange", "paletteExtensionModeChange", "panesChange", "pathModifiedChange", "pointSelectionModeChange", "redrawOnResizeChange", "resizePanesOnZoomChange", "resolveLabelOverlappingChange", "rotatedChange", "rtlEnabledChange", "scrollBarChange", "seriesChange", "seriesSelectionModeChange", "seriesTemplateChange", "sizeChange", "stickyHoveringChange", "synchronizeMultiAxesChange", "themeChange", "titleChange", "tooltipChange", "valueAxisChange", "zoomAndPanChange"] }, { kind: "component", type: i6.DxoArgumentAxisComponent, selector: "dxo-argument-axis", inputs: ["aggregateByCategory", "aggregatedPointsPosition", "aggregationGroupWidth", "aggregationInterval", "allowDecimals", "argumentType", "axisDivisionFactor", "breaks", "breakStyle", "categories", "color", "constantLines", "constantLineStyle", "customPosition", "customPositionAxis", "discreteAxisDivisionMode", "endOnTick", "grid", "holidays", "hoverMode", "inverted", "label", "linearThreshold", "logarithmBase", "maxValueMargin", "minorGrid", "minorTick", "minorTickCount", "minorTickInterval", "minValueMargin", "minVisualRangeLength", "offset", "opacity", "placeholderSize", "position", "singleWorkdays", "strips", "stripStyle", "tick", "tickInterval", "title", "type", "valueMarginsEnabled", "visible", "visualRange", "visualRangeUpdateMode", "wholeRange", "width", "workdaysOnly", "workWeek", "firstPointOnStartAngle", "originValue", "period", "startAngle"], outputs: ["visualRangeChange"] }, { kind: "component", type: i6.DxoCommonSeriesSettingsComponent, selector: "dxo-common-series-settings", inputs: ["aggregation", "area", "argumentField", "axis", "bar", "barOverlapGroup", "barPadding", "barWidth", "border", "bubble", "candlestick", "closeValueField", "color", "cornerRadius", "dashStyle", "fullstackedarea", "fullstackedbar", "fullstackedline", "fullstackedspline", "fullstackedsplinearea", "highValueField", "hoverMode", "hoverStyle", "ignoreEmptyPoints", "innerColor", "label", "line", "lowValueField", "maxLabelCount", "minBarSize", "opacity", "openValueField", "pane", "point", "rangearea", "rangebar", "rangeValue1Field", "rangeValue2Field", "reduction", "scatter", "selectionMode", "selectionStyle", "showInLegend", "sizeField", "spline", "splinearea", "stack", "stackedarea", "stackedbar", "stackedline", "stackedspline", "stackedsplinearea", "steparea", "stepline", "stock", "tagField", "type", "valueErrorBar", "valueField", "visible", "width", "argumentType", "minSegmentSize", "smallValuesGrouping", "closed"] }, { kind: "component", type: i6.DxoConnectorComponent, selector: "dxo-connector", inputs: ["color", "visible", "width", "opacity"] }, { kind: "component", type: i6.DxiSeriesComponent, selector: "dxi-series", inputs: ["aggregation", "argumentField", "axis", "barOverlapGroup", "barPadding", "barWidth", "border", "closeValueField", "color", "cornerRadius", "dashStyle", "highValueField", "hoverMode", "hoverStyle", "ignoreEmptyPoints", "innerColor", "label", "lowValueField", "maxLabelCount", "minBarSize", "name", "opacity", "openValueField", "pane", "point", "rangeValue1Field", "rangeValue2Field", "reduction", "selectionMode", "selectionStyle", "showInLegend", "sizeField", "stack", "tag", "tagField", "type", "valueErrorBar", "valueField", "visible", "width", "argumentType", "minSegmentSize", "smallValuesGrouping", "closed"] }, { kind: "component", type: i6.DxiValueAxisComponent, selector: "dxi-value-axis", inputs: ["aggregatedPointsPosition", "allowDecimals", "autoBreaksEnabled", "axisDivisionFactor", "breaks", "breakStyle", "categories", "color", "constantLines", "constantLineStyle", "customPosition", "discreteAxisDivisionMode", "endOnTick", "grid", "inverted", "label", "linearThreshold", "logarithmBase", "maxAutoBreakCount", "maxValueMargin", "minorGrid", "minorTick", "minorTickCount", "minorTickInterval", "minValueMargin", "minVisualRangeLength", "multipleAxesSpacing", "name", "offset", "opacity", "pane", "placeholderSize", "position", "showZero", "strips", "stripStyle", "synchronizedValue", "tick", "tickInterval", "title", "type", "valueMarginsEnabled", "valueType", "visible", "visualRange", "visualRangeUpdateMode", "wholeRange", "width"], outputs: ["visualRangeChange"] }, { kind: "component", type: i5.DxCheckBoxComponent, selector: "dx-check-box", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "iconSize", "isValid", "name", "readOnly", "rtlEnabled", "tabIndex", "text", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "visible", "width"], outputs: ["onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconSizeChange", "isValidChange", "nameChange", "readOnlyChange", "rtlEnabledChange", "tabIndexChange", "textChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "component", type: i6$2.DxColorBoxComponent, selector: "dx-color-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "applyButtonText", "applyValueMode", "buttons", "cancelButtonText", "deferRendering", "disabled", "dropDownButtonTemplate", "dropDownOptions", "editAlphaChannel", "elementAttr", "fieldTemplate", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "keyStep", "label", "labelMode", "name", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showDropDownButton", "stylingMode", "tabIndex", "text", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "visible", "width"], outputs: ["onChange", "onClosed", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOpened", "onOptionChanged", "onPaste", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "applyButtonTextChange", "applyValueModeChange", "buttonsChange", "cancelButtonTextChange", "deferRenderingChange", "disabledChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "editAlphaChannelChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "keyStepChange", "labelChange", "labelModeChange", "nameChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showDropDownButtonChange", "stylingModeChange", "tabIndexChange", "textChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "component", type: i8$2.DxPieChartComponent, selector: "dx-pie-chart", inputs: ["adaptiveLayout", "animation", "annotations", "centerTemplate", "commonAnnotationSettings", "commonSeriesSettings", "customizeAnnotation", "customizeLabel", "customizePoint", "dataSource", "diameter", "disabled", "elementAttr", "export", "innerRadius", "legend", "loadingIndicator", "margin", "minDiameter", "palette", "paletteExtensionMode", "pathModified", "pointSelectionMode", "redrawOnResize", "resolveLabelOverlapping", "rtlEnabled", "segmentsDirection", "series", "seriesTemplate", "size", "sizeGroup", "startAngle", "theme", "title", "tooltip", "type"], outputs: ["onDisposing", "onDone", "onDrawn", "onExported", "onExporting", "onFileSaving", "onIncidentOccurred", "onInitialized", "onLegendClick", "onOptionChanged", "onPointClick", "onPointHoverChanged", "onPointSelectionChanged", "onTooltipHidden", "onTooltipShown", "adaptiveLayoutChange", "animationChange", "annotationsChange", "centerTemplateChange", "commonAnnotationSettingsChange", "commonSeriesSettingsChange", "customizeAnnotationChange", "customizeLabelChange", "customizePointChange", "dataSourceChange", "diameterChange", "disabledChange", "elementAttrChange", "exportChange", "innerRadiusChange", "legendChange", "loadingIndicatorChange", "marginChange", "minDiameterChange", "paletteChange", "paletteExtensionModeChange", "pathModifiedChange", "pointSelectionModeChange", "redrawOnResizeChange", "resolveLabelOverlappingChange", "rtlEnabledChange", "segmentsDirectionChange", "seriesChange", "seriesTemplateChange", "sizeChange", "sizeGroupChange", "startAngleChange", "themeChange", "titleChange", "tooltipChange", "typeChange"] }, { kind: "component", type: i10.DxScrollViewComponent, selector: "dx-scroll-view", inputs: ["bounceEnabled", "direction", "disabled", "elementAttr", "height", "pulledDownText", "pullingDownText", "reachBottomText", "refreshingText", "rtlEnabled", "scrollByContent", "scrollByThumb", "showScrollbar", "useNative", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onPullDown", "onReachBottom", "onScroll", "onUpdated", "bounceEnabledChange", "directionChange", "disabledChange", "elementAttrChange", "heightChange", "pulledDownTextChange", "pullingDownTextChange", "reachBottomTextChange", "refreshingTextChange", "rtlEnabledChange", "scrollByContentChange", "scrollByThumbChange", "showScrollbarChange", "useNativeChange", "widthChange"] }, { kind: "component", type: i6$1.DxSelectBoxComponent, selector: "dx-select-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "buttons", "dataSource", "deferRendering", "disabled", "displayExpr", "displayValue", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "fieldTemplate", "focusStateEnabled", "grouped", "groupTemplate", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "items", "itemTemplate", "label", "labelMode", "maxLength", "minSearchLength", "name", "noDataText", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "searchEnabled", "searchExpr", "searchMode", "searchTimeout", "selectedItem", "showClearButton", "showDataBeforeSearch", "showDropDownButton", "showSelectionControls", "spellcheck", "stylingMode", "tabIndex", "text", "useItemTextAsTitle", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueChangeEvent", "valueExpr", "visible", "width", "wrapItemText"], outputs: ["onChange", "onClosed", "onContentReady", "onCopy", "onCustomItemCreating", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onItemClick", "onKeyDown", "onKeyUp", "onOpened", "onOptionChanged", "onPaste", "onSelectionChanged", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "dataSourceChange", "deferRenderingChange", "disabledChange", "displayExprChange", "displayValueChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "groupedChange", "groupTemplateChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "itemsChange", "itemTemplateChange", "labelChange", "labelModeChange", "maxLengthChange", "minSearchLengthChange", "nameChange", "noDataTextChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "searchEnabledChange", "searchExprChange", "searchModeChange", "searchTimeoutChange", "selectedItemChange", "showClearButtonChange", "showDataBeforeSearchChange", "showDropDownButtonChange", "showSelectionControlsChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useItemTextAsTitleChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "valueExprChange", "visibleChange", "widthChange", "wrapItemTextChange", "onBlur"] }, { kind: "component", type: i11.DxTextBoxComponent, selector: "dx-text-box", inputs: ["accessKey", "activeStateEnabled", "buttons", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "label", "labelMode", "mask", "maskChar", "maskInvalidMessage", "maskRules", "maxLength", "mode", "name", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showMaskMode", "spellcheck", "stylingMode", "tabIndex", "text", "useMaskedValue", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOptionChanged", "onPaste", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "labelChange", "labelModeChange", "maskChange", "maskCharChange", "maskInvalidMessageChange", "maskRulesChange", "maxLengthChange", "modeChange", "nameChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showMaskModeChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useMaskedValueChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i13.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i4.JsonPipe, name: "json" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DashChartComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-dash-chart', template: "<div class=\"mx-2\">\n    <div class=\"w-full m-2 border\">\n        <ng-container *ngIf=\"!isJsonPreview\">\n            <pre><code>{{jsaonDatasource | json}}</code></pre>\n        </ng-container>\n        <ng-container *ngIf=\"isJsonPreview\">\n            <ng-container *ngIf=\"chartType == 'doughnut'\">\n                <div\n                    class=\"m-3 p-4 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700\">\n                    <!-- <h6 class=\"mb-1 text-md font-bold tracking-tight text-gray-900 dark:text-white border-b pb-3\">\n                        {{widGetConfig.widgetTitle}}\n                    </h6> -->\n                    <dx-pie-chart id=\"pie\" type=\"doughnut\" [title]=\"{ text: chartConfig.caption, font: { size: 14 } }\"\n                        palette=\"Soft Pastel\" [dataSource]=\"dataSourseForChart\" centerTemplate=\"centerTemplate\"\n                        (onPointClick)=\"pointClickHandler($event)\" [palette]=\"chartConfig.palette\">\n\n                        <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n                            <ng-container *ngIf=\"item.color\">\n                                <dxi-series argumentField={{chartConfig.argumentField}} valueField=\"{{item.valueField}}\"\n                                    name=\"{{item.name}}\" color=\"{{item.color}}\">\n                                    <dxo-label [visible]=\"chartConfig.labelDisplay\" format=\"#,##0.##\">\n                                        <dxo-connector [visible]=\"true\"></dxo-connector>\n                                    </dxo-label>\n                                </dxi-series>\n                            </ng-container>\n                            <ng-container *ngIf=\"!item.color\">\n                                <dxi-series argumentField={{chartConfig.argumentField}} valueField=\"{{item.valueField}}\"\n                                    name=\"{{item.name}}\">\n                                    <dxo-label [visible]=\"chartConfig.labelDisplay\" format=\"#,##0.##\">\n                                        <dxo-connector [visible]=\"true\"></dxo-connector>\n                                    </dxo-label>\n                                </dxi-series>\n                            </ng-container>\n                        </ng-container>\n                        <dxo-legend [visible]=\"chartConfig.legendDisplay\"\n                            horizontalAlignment=\"{{chartConfig.horizontalAlignment}}\"\n                            verticalAlignment=\"{{chartConfig.verticalAlignment}}\"></dxo-legend>\n                        <!-- <dxo-export [enabled]=\"true\"></dxo-export> -->\n                        <dxo-tooltip [enabled]=\"true\" [customizeTooltip]=\"customizeTooltip\" format=\"#,##0.##\">\n                        </dxo-tooltip>\n                        <svg *dxTemplate=\"let pieChart of 'centerTemplate'\">\n                            <circle cx=\"100\" cy=\"100\" [attr.r]=\"pieChart.getInnerRadius() - 6\" fill=\"gray\"\n                                opacity=\"0.0001\">\n                            </circle>\n\n                            <text text-anchor=\"middle\" style=\"font-size: 28px\" x=\"100\" y=\"100\" fill=\"#eee\">\n                                <tspan x=\"100\">{{ calculateTotal(pieChart) }}</tspan>\n                                <!-- display: inline -->\n                                <!-- <tspan x=\"100\" dy=\"20px\" style=\"font-weight: 600\"></tspan> -->\n                            </text>\n                        </svg>\n                    </dx-pie-chart>\n                </div>\n            </ng-container>\n            <ng-container *ngIf=\"chartType !== 'doughnut' && chartType !== 'funnel' && chartType !== 'bubble'\">\n                <div\n                    class=\"m-3 p-4 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700\">\n                    <!-- <h6 class=\"mb-1 text-md font-bold tracking-tight text-gray-900 dark:text-white border-b pb-3\">\n                        {{widGetConfig.widgetTitle}}\n                    </h6> -->\n                    <dx-chart id=\"chart\" [dataSource]=\"dataSourseForChart\"\n                        [title]=\"{ text: chartConfig.caption, font: { size: 14 } }\"\n                        [valueAxis]=\"chartConfig.valueAxisConfig\">\n                        <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n                            <ng-container *ngIf=\"item.axis\">\n                                <dxi-value-axis [name]=\"item.axis\" [position]=\"item.position\">\n                                    <dxo-title [text]=\"item.name\"></dxo-title>\n                                </dxi-value-axis>\n                            </ng-container>\n                        </ng-container>\n                        <dxo-argument-axis>\n                            <dxo-label overlappingBehavior=\"rotate\" [rotationAngle]=\"270\"></dxo-label>\n                        </dxo-argument-axis>\n                        <dxo-tooltip [enabled]=\"true\" [shared]=\"true\"></dxo-tooltip>\n                        <dxo-common-series-settings\n                            [argumentField]=\"chartConfig.argumentField\"></dxo-common-series-settings>\n                        <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n                            <ng-container *ngIf=\"item.color\">\n                                <dxi-series type=\"{{item.type}}\" valueField=\"{{item.valueField}}\" axis=\"{{item.axis}}\"\n                                    name=\"{{item.name}}\" color=\"{{item.color}}\">\n                                </dxi-series>\n                            </ng-container>\n                            <ng-container *ngIf=\"!item.color\">\n                                <dxi-series type=\"{{item.type}}\" valueField=\"{{item.valueField}}\" axis=\"{{item.axis}}\"\n                                    name=\"{{item.name}}\">\n                                </dxi-series>\n                            </ng-container>\n\n                        </ng-container>\n                        <dxo-size [height]=\"chartConfig.size\"></dxo-size>\n                        <dxo-legend [visible]=\"chartConfig.legendDisplay\"\n                            [verticalAlignment]=\"chartConfig.verticalAlignment\"\n                            [horizontalAlignment]=\"chartConfig.horizontalAlignment\"></dxo-legend>\n                    </dx-chart>\n                </div>\n            </ng-container>\n\n            <ng-container *ngIf=\"chartType == 'funnel'\">\n\n            </ng-container>\n            <ng-container *ngIf=\"chartType == 'bubble'\">\n                <div class=\"mx-5\">\n                    <ng-container *ngFor=\"let item of heatChartDataSource.dataSet\">\n                        <div class=\"flex flex-row\">\n                            <div class=\"h-10 text-sm items-center min-w-24 max-w-[30%] justify-center flex\">\n                                {{item.datasource}}\n                            </div>\n                            <div class=\"inline-block \">\n                                <div class=\"flex flex-nowrap justify-center \">\n                                    <ng-container *ngFor=\"let box of item.dataset\">\n                                        <div class=\"flex-shrink-0 min-w-10 max-w-[20%] h-10 text-sm cursor-pointer flex items-center justify-center text-gray-800\"\n                                            [matTooltip]=\"'Record Date: ' + box.recordDate + '\\nRecharge Count: ' + box.toolTip\"\n                                            matTooltipClass=\"custom-tooltip\">\n                                            <div class=\"rounded-full\" [ngStyle]=\"{\n                                        'background-color': box.isHovered ? 'rgb(135, 184, 106)' : box.color,\n                                        'width.px': box.size,\n                                        'hover': box.hover,\n                                        'height.px': box.size\n                                      }\" (mouseenter)=\"box.isHovered = true\" (mouseleave)=\"box.isHovered = false\">\n                                            </div>\n                                        </div>\n                                    </ng-container>\n                                </div>\n                            </div>\n                        </div>\n                    </ng-container>\n                    <div class=\"inline-block\">\n                        <div class=\"flex flex-nowrap justify-center\">\n                            <div class=\"flex-shrink-0 w-24 max-w-[20%] h-full flex items-center justify-center\"></div>\n                            <div *ngFor=\"let item of heatChartDataSource.argumentValue\"\n                                class=\"flex-shrink-0 w-10 max-w-[20%] min-h-14 flex text-sm items-center justify-center my-1\"\n                                [ngStyle]=\"{'height': 'auto'}\">\n                                <span class=\"text-rotate\">\n                                    {{item}}\n                                </span>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </ng-container>\n\n        </ng-container>\n\n    </div>\n    <div class=\"w-full m-2 border\">\n        <div class=\"flex flex-row mb-1\">\n            <div class=\"w-1/3 mx-1\">\n                <dx-select-box [dataSource]=\"chartAxisSource\" [(ngModel)]=\"chartAccess\" placeholder=\"Chart Type\"\n                    displayExpr=\"name\" valueExpr=\"value\" (onValueChanged)=\"getChartAccessType($event)\">\n                </dx-select-box>\n            </div>\n            <div class=\"w-1/3 mx-1\">\n                <ng-container *ngIf=\"chartAccess == 'single'\">\n                    <dx-select-box [items]=\"chartTypeSource\" (onValueChanged)=\"getChartType($event)\"\n                        [(ngModel)]=\"chartType\"></dx-select-box>\n                </ng-container>\n                <ng-container *ngIf=\"chartAccess == 'multy'\">\n                    <dx-select-box [items]=\"componentNamesForMultyAccess\" displayExpr=\"item\" valueExpr=\"compName\"\n                        [(ngModel)]=\"componentName\"></dx-select-box>\n                </ng-container>\n            </div>\n        </div>\n        <ng-container *ngIf=\"chartAccess == 'single'\">\n\n            <div class=\"mb-4 border-b border-gray-200 dark:border-gray-700\">\n                <ul class=\"flex flex-wrap -mb-px text-sm font-medium text-center\" role=\"tablist\">\n                    <li class=\"me-2\" role=\"presentation\">\n                        <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'basic',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'basic'\n                            }\" (click)=\"setActiveTab('basic')\" type=\"button\" role=\"tab\">\n                            Basic\n                        </button>\n                    </li>\n                    <li class=\"me-2\" role=\"presentation\">\n                        <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'columns',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'columns'\n                            }\" (click)=\"setActiveTab('columns')\" type=\"button\" role=\"tab\">\n                            Columns\n                        </button>\n                    </li>\n                    <!-- <li class=\"me-2\" role=\"presentation\">\n                        <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'widget',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'widget'\n                            }\" (click)=\"setActiveTab('widget')\" type=\"button\" role=\"tab\">\n                            Widget\n                        </button>\n                    </li> -->\n                </ul>\n            </div>\n\n            <div id=\"default-styled-tab-content\">\n                <div *ngIf=\"activeTab === 'basic'\">\n                    <div class=\"flex flex-wrap justify-between my-2\">\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1 \">Legend Horizontal Alignment</div>\n                            <dx-select-box [searchEnabled]=\"true\" [items]=\"['right','left','center']\"\n                                [(ngModel)]=\"chartConfig.horizontalAlignment\"></dx-select-box>\n\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Legend Vertical Alignment</div>\n                            <dx-select-box [searchEnabled]=\"true\" [items]=\"['top','bottom']\"\n                                [(ngModel)]=\"chartConfig.verticalAlignment\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1 mt-8\"></div>\n                            <dx-check-box [(ngModel)]=\"chartConfig.legendDisplay\" text=\"Legend Display\"></dx-check-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Argument Field</div>\n                            <dx-select-box [items]=\"configColume\"\n                                [(ngModel)]=\"chartConfig.argumentField\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Size</div>\n                            <dx-text-box [(ngModel)]=\"chartConfig.size\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Caption</div>\n                            <dx-text-box [(ngModel)]=\"chartConfig.caption\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2\"> Display Formate </div>\n                            <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                [(ngModel)]=\"mainChartCourceObject.kpiConfig.formate\"\n                                [readOnly]=\"false\"></dx-select-box>\n                        </div>\n                        <div class=\"w-2/3 px-2 mt-2\" *ngIf=\"chartType == 'doughnut'\">\n                            <div class=\" flex flex-row\">\n                                <div class=\"mr-2\">\n                                    <div class=\"text-md mb-1\"> Color Palette</div>\n                                    <dx-select-box [items]=\"doughnut_color_palette\"\n                                        [(ngModel)]=\"chartConfig.palette\"></dx-select-box>\n                                </div>\n                                <div class=\"mt-5\">\n                                    <dx-check-box [value]=\"chartConfig.labelDisplay\"\n                                        [(ngModel)]=\"chartConfig.labelDisplay\" text=\"Label Display\"></dx-check-box>\n                                </div>\n                            </div>\n\n\n                        </div>\n                        <div class=\"w-2/3 px-2 mt-2\" *ngIf=\"chartType == 'bubble'\">\n                            <div class=\" flex flex-row\">\n                                <div class=\"mr-2\">\n                                    <div class=\"text-md mb-1\"> Source Field</div>\n                                    <dx-select-box [items]=\"configColume\"\n                                        [(ngModel)]=\"chartConfig.sourceField\"></dx-select-box>\n                                </div>\n                                <div class=\"mr-2\">\n                                    <div class=\"text-md mb-1\"> Min Bubble Size</div>\n                                    <dx-text-box [(ngModel)]=\"chartConfig.minBubbleSize\"></dx-text-box>\n                                </div>\n                                <div class=\"mr-2\">\n                                    <div class=\"text-md mb-1\"> Max bubble size</div>\n                                    <dx-text-box [(ngModel)]=\"chartConfig.maxBubbleSize\"></dx-text-box>\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\" *ngIf=\"chartType == 'doughnut'\">\n\n                        </div>\n\n                    </div>\n                </div>\n                <div *ngIf=\"activeTab === 'columns'\">\n                    <div class=\"h-60 overflow-x-auto\">\n                        <div class=\" border-x border-b \">\n                            <div class=\"py-1 flex flex-row border-b\"\n                                *ngFor=\"let item of chartConfig.chart_config; let i = index\">\n\n                                <div class=\"px-1 mb-1 w-1/3\">\n                                    <div class=\"text-md mb-1\"> Value Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"item.valueField\"></dx-select-box>\n                                </div>\n\n                                <div class=\"px-1 mb-1 w-1/4\" *ngIf=\"chartType !== 'doughnut'\">\n                                    <div class=\"text-md mb-1\"> Axis</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"item.axis\"></dx-select-box>\n                                </div>\n                                <div class=\" px-2 mb-1 w-1/3\">\n                                    <div class=\"text-md mb-1\"> Position</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"['right','left']\"\n                                        [(ngModel)]=\"item.position\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-1/4\">\n                                    <div class=\"text-md mb-1\"> Name</div>\n                                    <dx-text-box [(ngModel)]=\"item.name\"></dx-text-box>\n                                </div>\n                                <div class=\"text-center mt-6 w-1/6\">\n                                    <button *ngIf=\"i !== 0\" class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItem(i, 'up')\">\n                                        <i class=\"fa fa-arrow-up\" aria-hidden=\"true\"></i>\n                                    </button>\n                                    <button *ngIf=\"i !== chartConfig.chart_config.length - 1\"\n                                        class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItem(i, 'down')\">\n                                        <i class=\"fa fa-arrow-down\" aria-hidden=\"true\"></i>\n                                    </button>\n\n                                    <button class=\"{{commonService.btn_danger_sm}} cursor-pointer\"\n                                        (click)=\"deleteColumns(i)\"><i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                    </button>\n                                </div>\n                            </div>\n                            <div class=\"flex flex-row justify-end my-2\" *ngIf=\"chartType == 'doughnut'\">\n                                <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\"\n                                    (click)=\"addColumns()\">Add\n                                    Series</button>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <!-- <div *ngIf=\"activeTab === 'widget'\">\n                    <div class=\"flex flex-wrap justify-between my-2\">\n                        <div class=\"w-1/3 px-1 mb-1\">\n                            <div class=\"text-md mb-2\"> Widget level</div>\n                            <dx-text-box [value]=\"mainChartCourceObject.widget\"\n                                [(ngModel)]=\"mainChartCourceObject.widget\" [readOnly]=\"isEditWidget\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-1 mb-1\">\n                            <div class=\"text-md mb-2\"> Title</div>\n                            <dx-text-box [value]=\"widGetConfig.widgetTitle\"\n                                [(ngModel)]=\"widGetConfig.widgetTitle\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-1 mb-1\">\n                            <div class=\"text-md mb-2\"> Width </div>\n                            <dx-select-box [value]=\"widGetConfig.width\" [items]=\"widget_width\"\n                                [(ngModel)]=\"widGetConfig.width\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-1 mb-1\">\n                            <div class=\"text-md mb-2\"> Display Formate </div>\n                            <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                [(ngModel)]=\"mainChartCourceObject.kpiConfig.formate\"\n                                [readOnly]=\"false\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-1 pt-6 text-center\">\n                            <dx-check-box [value]=\"widGetConfig.display\" [(ngModel)]=\"widGetConfig.display\"\n                                text=\"Display\"></dx-check-box>\n                        </div>\n                    </div>\n\n                </div> -->\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"chartAccess == 'multy'\">\n            <div class=\"mb-4 border-b border-gray-200 dark:border-gray-700\">\n                <ul class=\"flex flex-wrap -mb-px text-sm font-medium text-center\" role=\"tablist\">\n                    <li class=\"me-2\" role=\"presentation\">\n                        <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'basic',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'basic'\n                            }\" (click)=\"setActiveTab('basic')\" type=\"button\" role=\"tab\">\n                            Basic\n                        </button>\n                    </li>\n                    <li class=\"me-2\" role=\"presentation\">\n                        <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'columns',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'columns'\n                            }\" (click)=\"setActiveTab('columns')\" type=\"button\" role=\"tab\">\n                            Columns\n                        </button>\n                    </li>\n                    <!-- <li class=\"me-2\" role=\"presentation\">\n                        <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'widget',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'widget'\n                            }\" (click)=\"setActiveTab('widget')\" type=\"button\" role=\"tab\">\n                            Widget\n                        </button>\n                    </li> -->\n                </ul>\n            </div>\n\n            <div id=\"default-styled-tab-content\">\n                <div *ngIf=\"activeTab === 'basic'\">\n                    <div class=\"flex flex-wrap justify-between my-2\">\n                        <div class=\"w-1/3 px-2\">\n                            <div class=\"text-md mb-1\">Legend Horizontal Alignment</div>\n                            <dx-select-box [searchEnabled]=\"true\" [items]=\"['right','left','center']\" [value]=\"'center'\"\n                                [(ngModel)]=\"chartConfig.horizontalAlignment\"></dx-select-box>\n\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> legent Vertical Alignment</div>\n                            <dx-select-box [searchEnabled]=\"true\" [items]=\"['top','bottom']\" [value]=\"'bottom'\"\n                                [(ngModel)]=\"chartConfig.verticalAlignment\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1 mt-8\"></div>\n                            <dx-check-box [(ngModel)]=\"chartConfig.legendDisplay\" text=\"Legend Display\"></dx-check-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Argument Field</div>\n                            <dx-select-box [items]=\"configColume\"\n                                [(ngModel)]=\"chartConfig.argumentField\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Size</div>\n                            <dx-text-box [(ngModel)]=\"chartConfig.size\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Caption</div>\n                            <dx-text-box [(ngModel)]=\"chartConfig.caption\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2\"> Display Formate </div>\n                            <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                [(ngModel)]=\"mainChartCourceObject.kpiConfig.formate\"\n                                [readOnly]=\"false\"></dx-select-box>\n                        </div>\n                    </div>\n                </div>\n                <div *ngIf=\"activeTab === 'columns'\">\n                    <dx-scroll-view class=\"h-full\" [width]=\"'100%'\" [height]=\"'100%'\">\n                        <div class=\" border-x border-b \">\n                            <div class=\"py-1 flex flex-wrap border-b\"\n                                *ngFor=\"let item of chartConfig.chart_config; let i = index;\">\n\n                                <div class=\"px-2 mb-1 w-1/3\">\n                                    <div class=\"text-md mb-2\"> Type</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"chartTypeSource\" [value]=\"'spline'\"\n                                        [(ngModel)]=\"item.type\"></dx-select-box>\n                                </div>\n                                <div class=\"px-2 mb-1 w-1/3\">\n                                    <div class=\"text-md mb-1\"> Value Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"item.valueField\"></dx-select-box>\n                                </div>\n\n                                <div class=\"px-2 mb-1 w-1/3\">\n                                    <div class=\"text-md mb-1\"> Axis</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"item.axis\"></dx-select-box>\n                                </div>\n                                <div class=\" px-2 mb-1 w-1/4\">\n                                    <div class=\"text-md mb-1\"> Position</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"['right','left']\"\n                                        [(ngModel)]=\"item.position\"></dx-select-box>\n                                </div>\n                                <div class=\"px-2 mb-1 w-1/4\">\n                                    <div class=\"text-md mb-1\"> Name</div>\n                                    <dx-text-box [(ngModel)]=\"item.name\"></dx-text-box>\n                                </div>\n                                <div class=\"px-2 mb-1 w-1/4\">\n                                    <div class=\"text-md mb-2\"> Color</div>\n                                    <dx-color-box [(ngModel)]=\"item.color\"></dx-color-box>\n                                </div>\n                                <div class=\"text-center my-1 w-1/4\">\n                                    <button *ngIf=\"i !== 0\" class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItem(i, 'up')\">\n                                        <i class=\"fa fa-arrow-up\" aria-hidden=\"true\"></i>\n                                    </button>\n                                    <button *ngIf=\"i !== chartConfig.chart_config.length - 1\"\n                                        class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItem(i, 'down')\">\n                                        <i class=\"fa fa-arrow-down\" aria-hidden=\"true\"></i>\n                                    </button>\n\n                                    <button class=\"{{commonService.btn_danger_sm}} cursor-pointer\"\n                                        (click)=\"deleteColumns(i)\"><i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                    </button>\n                                </div>\n                            </div>\n                            <div class=\"flex flex-row justify-end my-2\">\n                                <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\"\n                                    (click)=\"addColumns()\">Add\n                                    Columns</button>\n                            </div>\n                        </div>\n                    </dx-scroll-view>\n                </div>\n                <!-- <div *ngIf=\"activeTab === 'widget'\">\n                    <div class=\"flex flex-wrap justify-between my-2\">\n                        <div class=\"w-1/3 px-1 mb-1\">\n                            <div class=\"text-md mb-2\"> Widget level</div>\n                            <dx-text-box [value]=\"mainChartCourceObject.widget\"\n                                [(ngModel)]=\"mainChartCourceObject.widget\" [readOnly]=\"isEditWidget\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-1 mb-1\">\n                            <div class=\"text-md mb-2\"> Title</div>\n                            <dx-text-box [value]=\"widGetConfig.widgetTitle\"\n                                [(ngModel)]=\"widGetConfig.widgetTitle\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-1 mb-1\">\n                            <div class=\"text-md mb-2\"> Width </div>\n                            <dx-select-box [value]=\"widGetConfig.width\" [items]=\"widget_width\"\n                                [(ngModel)]=\"widGetConfig.width\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-1 mb-1\">\n                            <div class=\"text-md mb-2\"> Display Formate </div>\n                            <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                [(ngModel)]=\"mainChartCourceObject.kpiConfig.formate\"\n                                [readOnly]=\"false\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-1 pt-6 text-center\">\n                            <dx-check-box [value]=\"widGetConfig.display\" [(ngModel)]=\"widGetConfig.display\"\n                                text=\"Display\"></dx-check-box>\n                        </div>\n                    </div>\n\n                </div> -->\n            </div>\n        </ng-container>\n\n\n    </div>\n\n</div>\n\n<div class=\"flex flex-row border-t pl-3\">\n    <div class=\"flex justify-start mx-1\">\n        <button class=\"{{commonService.btn_warning_md}} cursor-pointer mt-2\" (click)=\"isJsonPreview = true\">\n            Preview</button>\n        <button class=\"{{commonService.btn_primary_md}} cursor-pointer mt-2\" (click)=\"isJsonPreview = false\">Data\n            Preview</button>\n    </div>\n    <div class=\"flex justify-end mx-1 flex-grow\">\n        <button class=\"{{commonService.btn_success_md}} cursor-pointer mt-2\"\n            (click)=\"getSaveChartConfig()\">Submit</button>\n    </div>\n</div>" }]
@@ -4422,10 +4423,10 @@ class DashTableComponent {
     }
 }
 DashTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DashTableComponent, deps: [{ token: CommonService }, { token: i0.ChangeDetectorRef }, { token: ApplicationContentService }, { token: i2$2.ToastrService }], target: i0.ɵɵFactoryTarget.Component });
-DashTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DashTableComponent, selector: "app-dash-table", inputs: { chartconfigData: ["datasetmodal", "chartconfigData"] }, outputs: { getTableConfigOutPut: "getTableConfigOutPut" }, ngImport: i0, template: "<div class=\"m-2\">\n    <div class=\"w-full m-2 border-r\">\n        <ng-container *ngIf=\"!isJsonPreview\">\n            <pre><code>{{jsaonDatasource | json}}</code></pre>\n        </ng-container>\n        <ng-container *ngIf=\"isJsonPreview\">\n            <dx-data-grid [columnAutoWidth]=\"true\" [dataSource]=\"dataSourseForTable\" [hoverStateEnabled]=\"true\"\n                [selectedRowKeys]=\"[]\" [showBorders]=\"true\" [showColumnLines]=\"true\" [columns]=\"tableDataConfig.columns\"\n                [showRowLines]=\"true\" id=\"gridContainer\">\n                <dxo-search-panel [highlightCaseSensitive]=\"true\"\n                    [visible]=\"tableDataConfig.searchPanel\"></dxo-search-panel>\n                <dxo-export [enabled]=\"true\" fileName=\"{{tableDataConfig.file_name}}\"\n                    [customizeExcelCell]=\"commonService.customizeExcelCell\"></dxo-export>\n                <dxo-paging [pageSize]=\"5\"></dxo-paging>\n                <!-- <dxo-pager [showInfo]=\"tableDataConfig.pageInfo\" [showPageSizeSelector]=\"true\"\n                    [allowedPageSizes]=\"tableDataConfig.allowedPageSizes\">\n                </dxo-pager> -->\n                <!-- <ng-container *ngFor=\"let item of dataSourseForTable\">\n                    <div *ngFor=\"let key of getObjectKeys(item)\">\n                        <dxi-column dataField=\"{{ key }}\" *ngIf=\"key == 'recordDate'\" sortOrder=\"desc\"></dxi-column>\n                        <dxi-column [sortingMethod]=\"commonService.customValueSorter\" dataField=\"{{ key }}\"\n                            alignment=\"right\"></dxi-column>\n                    </div>\n                </ng-container> -->\n                <ng-container *ngFor=\"let item of tableDataConfig.columns\">\n                    <dxi-column *ngIf=\"item.dataField == 'recordDate'\" dataField=\"{{ item.dataField }}\"\n                        [caption]=\"item.caption\" [visible]=\"item.visible\" sortOrder=\"desc\"></dxi-column>\n                    <dxi-column *ngIf=\"item.dataField !== 'recordDate'\"\n                        [sortingMethod]=\"commonService.customValueSorter\" [caption]=\"item.caption\"\n                        dataField=\"{{ item.dataField }}\" alignment=\"left\" [visible]=\"item.visible\">\n                    </dxi-column>\n                </ng-container>\n            </dx-data-grid>\n        </ng-container>\n    </div>\n    <div class=\"w-full mx-2 border-r\">\n        <div class=\"mb-4 border-b border-gray-200 dark:border-gray-700\">\n            <ul class=\"flex flex-wrap -mb-px text-sm font-medium text-center\" role=\"tablist\">\n                <li class=\"me-2\" role=\"presentation\">\n                    <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                        'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'basic',\n                                        'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'basic'\n                                    }\" (click)=\"setActiveTab('basic')\" type=\"button\" role=\"tab\">\n                        Basic\n                    </button>\n                </li>\n                <li class=\"me-2\" role=\"presentation\">\n                    <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                        'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'columns',\n                                        'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'columns'\n                                    }\" (click)=\"setActiveTab('columns')\" type=\"button\" role=\"tab\">\n                        Columns\n                    </button>\n                </li>\n                <li class=\"me-2\" role=\"presentation\">\n                    <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                        'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'properties',\n                                        'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'properties'\n                                    }\" (click)=\"setActiveTab('properties')\" type=\"button\" role=\"tab\">\n                        Properties\n                    </button>\n                </li>\n\n            </ul>\n        </div>\n\n        <div id=\"default-styled-tab-content\">\n            <div *ngIf=\"activeTab === 'basic'\">\n                <div class=\"flex flex-col flex-auto min-w-0\">\n                    <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Filter Title Config\n                    </div>\n                    <div class=\"pt-2 border-x border-b \">\n                        <div class=\"my-2 flex justify-between\">\n                            <div class=\"px-1 mb-1 w-full\">\n                                <div class=\"text-md mb-1\"> Title</div>\n                                <dx-text-box [(ngModel)]=\"tableDataConfig.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)]=\"tableDataConfig.commonConfig.dataField\"></dx-select-box>\n                            </div>\n                            <div class=\"px-1 mb-1 w-full\">\n                                <div class=\"text-md mb-2\"> Display Formate </div>\n                                <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                    [(ngModel)]=\"table_columns_config.kpiConfig.formate\"></dx-select-box>\n                            </div>\n                            <div class=\"px-1 mb-1 w-full\">\n                                <div class=\"text-md mb-2\"> Key To Pass </div>\n                                <dx-tag-box [items]=\"configColume\"\n                                    [(ngModel)]=\"table_columns_config.kpiConfig.keyToPass\"></dx-tag-box>\n                            </div>\n                            <!-- <div class=\"px-1 mb-1\">\n                                <div class=\"text-md mb-1\"> Checked Key</div>\n                                <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                    [(ngModel)]=\"tableDataConfig.commonConfig.checkedKey\"></dx-select-box>\n                            </div>\n                            <div class=\"px-4 mt-6\">\n                                <dx-check-box [value]=\"tableDataConfig.commonConfig.isSearchBox\"\n                                    [(ngModel)]=\"tableDataConfig.commonConfig.isSearchBox\"\n                                    text=\"Search Box\"></dx-check-box>\n\n                            </div> -->\n                        </div>\n                    </div>\n                </div>\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\"> Table Config\n                    </div>\n                    <div class=\"flex flse-row border-x border-b\">\n                        <div class=\"px-1 mb-2 mt-8 w-full\">\n                            <!-- <div class=\"text-md mb-2\"> </div> -->\n                            <dx-check-box [value]=\"tableDataConfig.searchPanel\"\n                                [(ngModel)]=\"tableDataConfig.searchPanel\" text=\"Search Panel\"></dx-check-box>\n                        </div>\n                        <div class=\" px-1 mb-2 w-full\">\n                            <div class=\"text-md mb-2\">File Name</div>\n                            <dx-text-box [(ngModel)]=\"tableDataConfig.file_name\"></dx-text-box>\n                        </div>\n                        <div class=\"px-1 mb-2 w-full\">\n                            <div class=\"text-md mb-2\"> Number Of Row</div>\n                            <dx-number-box [value]=\"tableDataConfig.numberOfRow\"\n                                [(ngModel)]=\"tableDataConfig.numberOfRow\"></dx-number-box>\n                        </div>\n                        <div class=\"px-1 mb-2 mt-8 w-full\">\n                            <dx-check-box [value]=\"tableDataConfig.pageInfo\" [(ngModel)]=\"tableDataConfig.pageInfo\"\n                                text=\"Page Info\"></dx-check-box>\n                        </div>\n                    </div>\n                </div>\n\n            </div>\n            <div *ngIf=\"activeTab === 'columns'\">\n                <div class=\"h-full overflow-x-auto\">\n                    <div class=\"flex flex-col flex-auto min-w-0\">\n\n                        <div class=\"pt-2 border-x border-b \">\n                            <div class=\"my-2 border-b flex flex-row\"\n                                *ngFor=\"let item of tableDataConfig.columns; let i = index;\">\n                                <div class=\"px-1 mb-2 mt-6 w-full\">\n                                    <dx-check-box [value]=\"item.visible\" [(ngModel)]=\"item.visible\"\n                                        text=\"Visiblity\"></dx-check-box>\n                                </div>\n                                <ng-container *ngIf=\"item.group !== undefined\">\n                                    <div class=\"px-1 mb-2 w-full\">\n                                        <div class=\"text-md mb-2\">Group Name</div>\n                                        <dx-text-box [(ngModel)]=\"item.group\"></dx-text-box>\n                                    </div>\n                                </ng-container>\n                                <div class=\"px-1 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\"> Value Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"item.dataField\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\"> Caption</div>\n                                    <dx-text-box [(ngModel)]=\"item.caption\"></dx-text-box>\n                                </div>\n                                <div class=\"px-2 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\"> UI Function</div>\n                                    <dx-select-box [items]=\"enrichNameList\" [(ngModel)]=\"item.enrichName\"\n                                        [searchEnabled]=\"true\"></dx-select-box>\n                                </div>\n                                <div class=\"text-center mt-8 w-full\">\n                                    <button *ngIf=\"i !== 0\" class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItemForColumns(i, 'up')\">\n                                        <i class=\"fa fa-arrow-up\" aria-hidden=\"true\"></i>\n                                    </button>\n\n                                    <button *ngIf=\"i !== tableDataConfig.columns.length - 1\"\n                                        class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItemForColumns(i, 'down')\">\n                                        <i class=\"fa fa-arrow-down\" aria-hidden=\"true\"></i>\n                                    </button>\n                                    <button class=\"{{commonService.btn_danger_sm}} cursor-pointer\"\n                                        (click)=\"deleteColumns(i)\"><i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                    </button>\n                                </div>\n\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"flex flex-row justify-end my-2\">\n                        <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\" (click)=\"addColumns()\">Add\n                            Columns</button>\n                    </div>\n                </div>\n            </div>\n            <div *ngIf=\"activeTab === 'properties'\">\n                <div class=\"h-full overflow-x-auto\">\n                    <app-loader *ngIf=\"isLoader\"></app-loader>\n                    <ng-container *ngIf=\"!isLoader\">\n                        <div class=\"flex flex-row justify-between border-b py-3\">\n                            <div class=\"mx-2\">\n                                <dx-check-box [value]=\"viewProperties.enableClickEvent\"\n                                    [(ngModel)]=\"viewProperties.enableClickEvent\"\n                                    text=\"Enable Click Event\"></dx-check-box>\n                            </div>\n                            <div class=\"mx-2\">\n                                <dx-check-box [value]=\"viewProperties.enableRightClickEvent\"\n                                    [(ngModel)]=\"viewProperties.enableRightClickEvent\"\n                                    text=\"Enable Right Click\"></dx-check-box>\n                            </div>\n                        </div>\n                        <div class=\"w-full p-2\" *ngIf=\"viewProperties.enableClickEvent\">\n\n                            <div class=\"flex flex-col flex-auto min-w-0 my-2\">\n                                <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Event\n                                    Type\n                                    Option\n                                </div>\n                                <div class=\"w-full p-3 border-x border-b \">\n                                    <div class=\"flex flex-row\">\n                                        <div class=\"w-full\">\n                                            <div class=\"text-md mb-2\"> Event Type</div>\n                                        </div>\n                                        <div class=\"w-full\">\n                                            <dx-select-box [items]=\"['drilldown','optionalDrillDown']\"\n                                                (onValueChanged)=\"getSelectedEventType($event)\"\n                                                [(ngModel)]=\"viewProperties.clickEventOptions.eventType\"></dx-select-box>\n                                        </div>\n                                    </div>\n                                    <ng-container *ngIf=\"viewProperties.clickEventOptions.eventType == 'drilldown'\">\n                                        <div class=\"flex flex-row justify-between mt-3\">\n                                            <div class=\"w-full\">\n                                                <div class=\"text-md mb-2\"> Associated Views</div>\n                                                <dx-tag-box [items]=\"allConfiguredViews\"\n                                                    [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                    valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                    [showSelectionControls]=\"true\" [searchEnabled]=\"true\"></dx-tag-box>\n                                            </div>\n                                        </div>\n                                    </ng-container>\n                                    <ng-container\n                                        *ngIf=\"viewProperties.clickEventOptions.eventType == 'optionalDrillDown'\">\n                                        <div class=\"flex flex-row justify-between mt-3\">\n                                            <div class=\"w-full\">\n                                                <ng-container\n                                                    *ngFor=\"let item of optionalDrilDownDataSource;let i = index;\">\n\n                                                    <div class=\"flex flex-row justify-between\">\n                                                        <div class=\"mx-2 w-1/2\">\n                                                            <div class=\"text-md mb-2\"> Associated Views</div>\n                                                            <dx-tag-box [items]=\"allConfiguredViews\"\n                                                                [(ngModel)]=\"item.viewId\" valueExpr=\"viewId\"\n                                                                displayExpr=\"viewName\" [showSelectionControls]=\"true\"\n                                                                [maxDisplayedTags]=\"2\"\n                                                                [searchEnabled]=\"true\"></dx-tag-box>\n\n                                                        </div>\n                                                        <div class=\"mx-2 w-1/2\">\n                                                            <div class=\"text-md mb-2\"> Associated Params</div>\n                                                            <dx-text-box\n                                                                [(ngModel)]=\"item.filterCondition\"></dx-text-box>\n                                                        </div>\n                                                        <div class=\"mx-2\">\n                                                            <button\n                                                                class=\"{{commonService.btn_danger_sm}} cursor-pointer mt-8\"\n                                                                (click)=\"deleteAssociatedParams(i)\"><i\n                                                                    class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                                            </button>\n                                                        </div>\n                                                    </div>\n                                                </ng-container>\n                                                <div class=\"flex flex-row justify-end mt-4\">\n                                                    <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\"\n                                                        (click)=\"addAssociatedParams()\">Add\n                                                        Params</button>\n                                                </div>\n                                            </div>\n                                        </div>\n                                    </ng-container>\n                                    <button class=\"{{commonService.btn_light_md}} cursor-pointer mt-4\"\n                                        (click)=\"resetViewProprstise()\">Reset All Event</button>\n                                </div>\n                            </div>\n\n                        </div>\n                    </ng-container>\n                </div>\n            </div>\n\n        </div>\n\n\n    </div>\n</div>\n\n\n<div class=\"flex flex-row border-t pl-3\">\n    <div class=\"flex justify-start mx-1\">\n        <button class=\"{{commonService.btn_warning_md}} cursor-pointer mt-2\" (click)=\"isJsonPreview = true\">\n            Preview</button>\n        <button class=\"{{commonService.btn_primary_md}} cursor-pointer mt-2\" (click)=\"isJsonPreview = false\">Data\n            Preview</button>\n    </div>\n    <div class=\"flex justify-end mx-1 flex-grow\">\n        <button class=\"{{commonService.btn_success_md}} cursor-pointer mt-2\"\n            (click)=\"getSaveChartConfig()\">Submit</button>\n    </div>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.DxoExportComponent, selector: "dxo-export", inputs: ["backgroundColor", "enabled", "fileName", "formats", "margin", "printingEnabled", "proxyUrl", "svgToCanvas", "allowExportSelectedData", "customizeExcelCell", "excelFilterEnabled", "excelWrapTextEnabled", "ignoreExcelErrors", "texts"] }, { kind: "component", type: i5.DxCheckBoxComponent, selector: "dx-check-box", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "iconSize", "isValid", "name", "readOnly", "rtlEnabled", "tabIndex", "text", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "visible", "width"], outputs: ["onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconSizeChange", "isValidChange", "nameChange", "readOnlyChange", "rtlEnabledChange", "tabIndexChange", "textChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "component", type: i9.DxDataGridComponent, selector: "dx-data-grid", inputs: ["accessKey", "activeStateEnabled", "allowColumnReordering", "allowColumnResizing", "autoNavigateToFocusedRow", "cacheEnabled", "cellHintEnabled", "columnAutoWidth", "columnChooser", "columnFixing", "columnHidingEnabled", "columnMinWidth", "columnResizingMode", "columns", "columnWidth", "customizeColumns", "customizeExportData", "dataRowTemplate", "dataSource", "dateSerializationFormat", "disabled", "editing", "elementAttr", "errorRowEnabled", "export", "filterBuilder", "filterBuilderPopup", "filterPanel", "filterRow", "filterSyncEnabled", "filterValue", "focusedColumnIndex", "focusedRowEnabled", "focusedRowIndex", "focusedRowKey", "focusStateEnabled", "grouping", "groupPanel", "headerFilter", "height", "highlightChanges", "hint", "hoverStateEnabled", "keyboardNavigation", "keyExpr", "loadPanel", "masterDetail", "noDataText", "pager", "paging", "remoteOperations", "renderAsync", "repaintChangesOnly", "rowAlternationEnabled", "rowDragging", "rowTemplate", "rtlEnabled", "scrolling", "searchPanel", "selectedRowKeys", "selection", "selectionFilter", "showBorders", "showColumnHeaders", "showColumnLines", "showRowLines", "sortByGroupSummaryInfo", "sorting", "stateStoring", "summary", "syncLookupFilterValues", "tabIndex", "toolbar", "twoWayBindingEnabled", "visible", "width", "wordWrapEnabled"], outputs: ["onAdaptiveDetailRowPreparing", "onCellClick", "onCellDblClick", "onCellHoverChanged", "onCellPrepared", "onContentReady", "onContextMenuPreparing", "onDataErrorOccurred", "onDisposing", "onEditCanceled", "onEditCanceling", "onEditingStart", "onEditorPrepared", "onEditorPreparing", "onExported", "onExporting", "onFileSaving", "onFocusedCellChanged", "onFocusedCellChanging", "onFocusedRowChanged", "onFocusedRowChanging", "onInitialized", "onInitNewRow", "onKeyDown", "onOptionChanged", "onRowClick", "onRowCollapsed", "onRowCollapsing", "onRowDblClick", "onRowExpanded", "onRowExpanding", "onRowInserted", "onRowInserting", "onRowPrepared", "onRowRemoved", "onRowRemoving", "onRowUpdated", "onRowUpdating", "onRowValidating", "onSaved", "onSaving", "onSelectionChanged", "onToolbarPreparing", "accessKeyChange", "activeStateEnabledChange", "allowColumnReorderingChange", "allowColumnResizingChange", "autoNavigateToFocusedRowChange", "cacheEnabledChange", "cellHintEnabledChange", "columnAutoWidthChange", "columnChooserChange", "columnFixingChange", "columnHidingEnabledChange", "columnMinWidthChange", "columnResizingModeChange", "columnsChange", "columnWidthChange", "customizeColumnsChange", "customizeExportDataChange", "dataRowTemplateChange", "dataSourceChange", "dateSerializationFormatChange", "disabledChange", "editingChange", "elementAttrChange", "errorRowEnabledChange", "exportChange", "filterBuilderChange", "filterBuilderPopupChange", "filterPanelChange", "filterRowChange", "filterSyncEnabledChange", "filterValueChange", "focusedColumnIndexChange", "focusedRowEnabledChange", "focusedRowIndexChange", "focusedRowKeyChange", "focusStateEnabledChange", "groupingChange", "groupPanelChange", "headerFilterChange", "heightChange", "highlightChangesChange", "hintChange", "hoverStateEnabledChange", "keyboardNavigationChange", "keyExprChange", "loadPanelChange", "masterDetailChange", "noDataTextChange", "pagerChange", "pagingChange", "remoteOperationsChange", "renderAsyncChange", "repaintChangesOnlyChange", "rowAlternationEnabledChange", "rowDraggingChange", "rowTemplateChange", "rtlEnabledChange", "scrollingChange", "searchPanelChange", "selectedRowKeysChange", "selectionChange", "selectionFilterChange", "showBordersChange", "showColumnHeadersChange", "showColumnLinesChange", "showRowLinesChange", "sortByGroupSummaryInfoChange", "sortingChange", "stateStoringChange", "summaryChange", "syncLookupFilterValuesChange", "tabIndexChange", "toolbarChange", "twoWayBindingEnabledChange", "visibleChange", "widthChange", "wordWrapEnabledChange"] }, { kind: "component", type: i6.DxiColumnComponent, selector: "dxi-column", inputs: ["alignment", "allowEditing", "allowExporting", "allowFiltering", "allowFixing", "allowGrouping", "allowHeaderFiltering", "allowHiding", "allowReordering", "allowResizing", "allowSearch", "allowSorting", "autoExpandGroup", "buttons", "calculateCellValue", "calculateDisplayValue", "calculateFilterExpression", "calculateGroupValue", "calculateSortValue", "caption", "cellTemplate", "columns", "cssClass", "customizeText", "dataField", "dataType", "editCellTemplate", "editorOptions", "encodeHtml", "falseText", "filterOperations", "filterType", "filterValue", "filterValues", "fixed", "fixedPosition", "format", "formItem", "groupCellTemplate", "groupIndex", "headerCellTemplate", "headerFilter", "hidingPriority", "isBand", "lookup", "minWidth", "name", "ownerBand", "renderAsync", "selectedFilterOperation", "setCellValue", "showEditorAlways", "showInColumnChooser", "showWhenGrouped", "sortIndex", "sortingMethod", "sortOrder", "trueText", "type", "validationRules", "visible", "visibleIndex", "width"], outputs: ["filterValueChange", "filterValuesChange", "groupIndexChange", "selectedFilterOperationChange", "sortIndexChange", "sortOrderChange", "visibleChange", "visibleIndexChange"] }, { kind: "component", type: i6.DxoPagingComponent, selector: "dxo-paging", inputs: ["enabled", "pageIndex", "pageSize"], outputs: ["pageIndexChange", "pageSizeChange"] }, { kind: "component", type: i6.DxoSearchPanelComponent, selector: "dxo-search-panel", inputs: ["highlightCaseSensitive", "highlightSearchText", "placeholder", "searchVisibleColumnsOnly", "text", "visible", "width"], outputs: ["textChange"] }, { kind: "component", type: i8$3.DxNumberBoxComponent, selector: "dx-number-box", inputs: ["accessKey", "activeStateEnabled", "buttons", "disabled", "elementAttr", "focusStateEnabled", "format", "height", "hint", "hoverStateEnabled", "inputAttr", "invalidValueMessage", "isValid", "label", "labelMode", "max", "min", "mode", "name", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showSpinButtons", "step", "stylingMode", "tabIndex", "text", "useLargeSpinButtons", "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", "formatChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "invalidValueMessageChange", "isValidChange", "labelChange", "labelModeChange", "maxChange", "minChange", "modeChange", "nameChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showSpinButtonsChange", "stepChange", "stylingModeChange", "tabIndexChange", "textChange", "useLargeSpinButtonsChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "component", type: i6$1.DxSelectBoxComponent, selector: "dx-select-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "buttons", "dataSource", "deferRendering", "disabled", "displayExpr", "displayValue", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "fieldTemplate", "focusStateEnabled", "grouped", "groupTemplate", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "items", "itemTemplate", "label", "labelMode", "maxLength", "minSearchLength", "name", "noDataText", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "searchEnabled", "searchExpr", "searchMode", "searchTimeout", "selectedItem", "showClearButton", "showDataBeforeSearch", "showDropDownButton", "showSelectionControls", "spellcheck", "stylingMode", "tabIndex", "text", "useItemTextAsTitle", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueChangeEvent", "valueExpr", "visible", "width", "wrapItemText"], outputs: ["onChange", "onClosed", "onContentReady", "onCopy", "onCustomItemCreating", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onItemClick", "onKeyDown", "onKeyUp", "onOpened", "onOptionChanged", "onPaste", "onSelectionChanged", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "dataSourceChange", "deferRenderingChange", "disabledChange", "displayExprChange", "displayValueChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "groupedChange", "groupTemplateChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "itemsChange", "itemTemplateChange", "labelChange", "labelModeChange", "maxLengthChange", "minSearchLengthChange", "nameChange", "noDataTextChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "searchEnabledChange", "searchExprChange", "searchModeChange", "searchTimeoutChange", "selectedItemChange", "showClearButtonChange", "showDataBeforeSearchChange", "showDropDownButtonChange", "showSelectionControlsChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useItemTextAsTitleChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "valueExprChange", "visibleChange", "widthChange", "wrapItemTextChange", "onBlur"] }, { kind: "component", type: 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: i11.DxTextBoxComponent, selector: "dx-text-box", inputs: ["accessKey", "activeStateEnabled", "buttons", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "label", "labelMode", "mask", "maskChar", "maskInvalidMessage", "maskRules", "maxLength", "mode", "name", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showMaskMode", "spellcheck", "stylingMode", "tabIndex", "text", "useMaskedValue", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOptionChanged", "onPaste", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "labelChange", "labelModeChange", "maskChange", "maskCharChange", "maskInvalidMessageChange", "maskRulesChange", "maxLengthChange", "modeChange", "nameChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showMaskModeChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useMaskedValueChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: LoaderComponent, selector: "app-loader" }, { kind: "pipe", type: i4.JsonPipe, name: "json" }] });
+DashTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DashTableComponent, selector: "app-dash-table", inputs: { chartconfigData: ["datasetmodal", "chartconfigData"] }, outputs: { getTableConfigOutPut: "getTableConfigOutPut" }, ngImport: i0, template: "<div class=\"m-2\">\n    <div class=\"w-full m-2 border-r\">\n        <ng-container *ngIf=\"!isJsonPreview\">\n            <pre><code>{{jsaonDatasource | json}}</code></pre>\n        </ng-container>\n        <ng-container *ngIf=\"isJsonPreview\">\n            <dx-data-grid [columnAutoWidth]=\"true\" [dataSource]=\"dataSourseForTable\" [hoverStateEnabled]=\"true\"\n                [selectedRowKeys]=\"[]\" [showBorders]=\"true\" [showColumnLines]=\"true\" [columns]=\"tableDataConfig.columns\"\n                [showRowLines]=\"true\" id=\"gridContainer\">\n                <dxo-search-panel [highlightCaseSensitive]=\"true\"\n                    [visible]=\"tableDataConfig.searchPanel\"></dxo-search-panel>\n                <dxo-export [enabled]=\"true\" fileName=\"{{tableDataConfig.file_name}}\"\n                    [customizeExcelCell]=\"commonService.customizeExcelCell\"></dxo-export>\n                <dxo-paging [pageSize]=\"5\"></dxo-paging>\n                <!-- <dxo-pager [showInfo]=\"tableDataConfig.pageInfo\" [showPageSizeSelector]=\"true\"\n                    [allowedPageSizes]=\"tableDataConfig.allowedPageSizes\">\n                </dxo-pager> -->\n                <!-- <ng-container *ngFor=\"let item of dataSourseForTable\">\n                    <div *ngFor=\"let key of getObjectKeys(item)\">\n                        <dxi-column dataField=\"{{ key }}\" *ngIf=\"key == 'recordDate'\" sortOrder=\"desc\"></dxi-column>\n                        <dxi-column [sortingMethod]=\"commonService.customValueSorter\" dataField=\"{{ key }}\"\n                            alignment=\"right\"></dxi-column>\n                    </div>\n                </ng-container> -->\n                <ng-container *ngFor=\"let item of tableDataConfig.columns\">\n                    <dxi-column *ngIf=\"item.dataField == 'recordDate'\" dataField=\"{{ item.dataField }}\"\n                        [caption]=\"item.caption\" [visible]=\"item.visible\" sortOrder=\"desc\"></dxi-column>\n                    <dxi-column *ngIf=\"item.dataField !== 'recordDate'\"\n                        [sortingMethod]=\"commonService.customValueSorter\" [caption]=\"item.caption\"\n                        dataField=\"{{ item.dataField }}\" alignment=\"left\" [visible]=\"item.visible\">\n                    </dxi-column>\n                </ng-container>\n            </dx-data-grid>\n        </ng-container>\n    </div>\n    <div class=\"w-full mx-2 border-r\">\n        <div class=\"mb-4 border-b border-gray-200 dark:border-gray-700\">\n            <ul class=\"flex flex-wrap -mb-px text-sm font-medium text-center\" role=\"tablist\">\n                <li class=\"me-2\" role=\"presentation\">\n                    <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                        'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'basic',\n                                        'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'basic'\n                                    }\" (click)=\"setActiveTab('basic')\" type=\"button\" role=\"tab\">\n                        Basic\n                    </button>\n                </li>\n                <li class=\"me-2\" role=\"presentation\">\n                    <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                        'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'columns',\n                                        'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'columns'\n                                    }\" (click)=\"setActiveTab('columns')\" type=\"button\" role=\"tab\">\n                        Columns\n                    </button>\n                </li>\n                <li class=\"me-2\" role=\"presentation\">\n                    <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                        'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'properties',\n                                        'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'properties'\n                                    }\" (click)=\"setActiveTab('properties')\" type=\"button\" role=\"tab\">\n                        Properties\n                    </button>\n                </li>\n\n            </ul>\n        </div>\n\n        <div id=\"default-styled-tab-content\">\n            <div *ngIf=\"activeTab === 'basic'\">\n                <div class=\"flex flex-col flex-auto min-w-0\">\n                    <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Filter Title Config\n                    </div>\n                    <div class=\"pt-2 border-x border-b \">\n                        <div class=\"my-2 flex justify-between\">\n                            <div class=\"px-1 mb-1 w-full\">\n                                <div class=\"text-md mb-1\"> Title</div>\n                                <dx-text-box [(ngModel)]=\"tableDataConfig.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)]=\"tableDataConfig.commonConfig.dataField\"></dx-select-box>\n                            </div>\n                            <div class=\"px-1 mb-1 w-full\">\n                                <div class=\"text-md mb-2\"> Display Formate </div>\n                                <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                    [(ngModel)]=\"table_columns_config.kpiConfig.formate\"></dx-select-box>\n                            </div>\n                            <div class=\"px-1 mb-1 w-full\">\n                                <div class=\"text-md mb-2\"> Key To Pass </div>\n                                <dx-tag-box [items]=\"configColume\"\n                                    [(ngModel)]=\"table_columns_config.kpiConfig.keyToPass\"></dx-tag-box>\n                            </div>\n                            <!-- <div class=\"px-1 mb-1\">\n                                <div class=\"text-md mb-1\"> Checked Key</div>\n                                <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                    [(ngModel)]=\"tableDataConfig.commonConfig.checkedKey\"></dx-select-box>\n                            </div>\n                            <div class=\"px-4 mt-6\">\n                                <dx-check-box [value]=\"tableDataConfig.commonConfig.isSearchBox\"\n                                    [(ngModel)]=\"tableDataConfig.commonConfig.isSearchBox\"\n                                    text=\"Search Box\"></dx-check-box>\n\n                            </div> -->\n                        </div>\n                    </div>\n                </div>\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\"> Table Config\n                    </div>\n                    <div class=\"flex flse-row border-x border-b\">\n                        <div class=\"px-1 mb-2 mt-8 w-full\">\n                            <!-- <div class=\"text-md mb-2\"> </div> -->\n                            <dx-check-box [value]=\"tableDataConfig.searchPanel\"\n                                [(ngModel)]=\"tableDataConfig.searchPanel\" text=\"Search Panel\"></dx-check-box>\n                        </div>\n                        <div class=\" px-1 mb-2 w-full\">\n                            <div class=\"text-md mb-2\">File Name</div>\n                            <dx-text-box [(ngModel)]=\"tableDataConfig.file_name\"></dx-text-box>\n                        </div>\n                        <div class=\"px-1 mb-2 w-full\">\n                            <div class=\"text-md mb-2\"> Number Of Row</div>\n                            <dx-number-box [value]=\"tableDataConfig.numberOfRow\"\n                                [(ngModel)]=\"tableDataConfig.numberOfRow\"></dx-number-box>\n                        </div>\n                        <div class=\"px-1 mb-2 mt-8 w-full\">\n                            <dx-check-box [value]=\"tableDataConfig.pageInfo\" [(ngModel)]=\"tableDataConfig.pageInfo\"\n                                text=\"Page Info\"></dx-check-box>\n                        </div>\n                    </div>\n                </div>\n\n            </div>\n            <div *ngIf=\"activeTab === 'columns'\">\n                <div class=\"h-full overflow-x-auto\">\n                    <div class=\"flex flex-col flex-auto min-w-0\">\n\n                        <div class=\"pt-2 border-x border-b \">\n                            <div class=\"my-2 border-b flex flex-row\"\n                                *ngFor=\"let item of tableDataConfig.columns; let i = index;\">\n                                <div class=\"px-1 mb-2 mt-6 w-full\">\n                                    <dx-check-box [value]=\"item.visible\" [(ngModel)]=\"item.visible\"\n                                        text=\"Visiblity\"></dx-check-box>\n                                </div>\n                                <ng-container *ngIf=\"item.group !== undefined\">\n                                    <div class=\"px-1 mb-2 w-full\">\n                                        <div class=\"text-md mb-2\">Group Name</div>\n                                        <dx-text-box [(ngModel)]=\"item.group\"></dx-text-box>\n                                    </div>\n                                </ng-container>\n                                <div class=\"px-1 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\"> Value Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"item.dataField\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\"> Caption</div>\n                                    <dx-text-box [(ngModel)]=\"item.caption\"></dx-text-box>\n                                </div>\n                                <div class=\"px-2 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\"> UI Function</div>\n                                    <dx-select-box [items]=\"enrichNameList\" [(ngModel)]=\"item.enrichName\"\n                                        [searchEnabled]=\"true\"></dx-select-box>\n                                </div>\n                                <div class=\"text-center mt-8 w-full\">\n                                    <button *ngIf=\"i !== 0\" class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItemForColumns(i, 'up')\">\n                                        <i class=\"fa fa-arrow-up\" aria-hidden=\"true\"></i>\n                                    </button>\n\n                                    <button *ngIf=\"i !== tableDataConfig.columns.length - 1\"\n                                        class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItemForColumns(i, 'down')\">\n                                        <i class=\"fa fa-arrow-down\" aria-hidden=\"true\"></i>\n                                    </button>\n                                    <button class=\"{{commonService.btn_danger_sm}} cursor-pointer\"\n                                        (click)=\"deleteColumns(i)\"><i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                    </button>\n                                </div>\n\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"flex flex-row justify-end my-2\">\n                        <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\" (click)=\"addColumns()\">Add\n                            Columns</button>\n                    </div>\n                </div>\n            </div>\n            <div *ngIf=\"activeTab === 'properties'\">\n                <div class=\"h-full overflow-x-auto\">\n                    <app-loader *ngIf=\"isLoader\"></app-loader>\n                    <ng-container *ngIf=\"!isLoader\">\n                        <div class=\"flex flex-row justify-between border-b py-3\">\n                            <div class=\"mx-2\">\n                                <dx-check-box [value]=\"viewProperties.enableClickEvent\"\n                                    [(ngModel)]=\"viewProperties.enableClickEvent\"\n                                    text=\"Enable Click Event\"></dx-check-box>\n                            </div>\n                            <div class=\"mx-2\">\n                                <dx-check-box [value]=\"viewProperties.enableRightClickEvent\"\n                                    [(ngModel)]=\"viewProperties.enableRightClickEvent\"\n                                    text=\"Enable Right Click\"></dx-check-box>\n                            </div>\n                        </div>\n                        <div class=\"w-full p-2\" *ngIf=\"viewProperties.enableClickEvent\">\n\n                            <div class=\"flex flex-col flex-auto min-w-0 my-2\">\n                                <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Event\n                                    Type\n                                    Option\n                                </div>\n                                <div class=\"w-full p-3 border-x border-b \">\n                                    <div class=\"flex flex-row\">\n                                        <div class=\"w-full\">\n                                            <div class=\"text-md mb-2\"> Event Type</div>\n                                        </div>\n                                        <div class=\"w-full\">\n                                            <dx-select-box [items]=\"['drilldown','sameViewDrilldown','optionalDrillDown']\"\n                                                (onValueChanged)=\"getSelectedEventType($event)\"\n                                                [(ngModel)]=\"viewProperties.clickEventOptions.eventType\"></dx-select-box>\n                                        </div>\n                                    </div>\n                                    <ng-container *ngIf=\"viewProperties.clickEventOptions.eventType == 'drilldown'\">\n                                        <div class=\"flex flex-row justify-between mt-3\">\n                                            <div class=\"w-full\">\n                                                <div class=\"text-md mb-2\"> Associated Views</div>\n                                                <dx-tag-box [items]=\"allConfiguredViews\"\n                                                    [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                    valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                    [showSelectionControls]=\"true\" [searchEnabled]=\"true\"></dx-tag-box>\n                                            </div>\n                                        </div>\n                                    </ng-container>\n                                    <ng-container *ngIf=\"viewProperties.clickEventOptions.eventType == 'sameViewDrilldown'\">\n                                        <div class=\"flex flex-row justify-between mt-3\">\n                                            <div class=\"w-full\">\n                                                <div class=\"text-md mb-2\"> Associated Views</div>\n                                                <dx-tag-box [items]=\"allConfiguredViews\"\n                                                    [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                    valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                    [showSelectionControls]=\"true\" [searchEnabled]=\"true\"></dx-tag-box>\n                                            </div>\n                                        </div>\n                                    </ng-container>\n                                    <ng-container\n                                        *ngIf=\"viewProperties.clickEventOptions.eventType == 'optionalDrillDown'\">\n                                        <div class=\"flex flex-row justify-between mt-3\">\n                                            <div class=\"w-full\">\n                                                <ng-container\n                                                    *ngFor=\"let item of optionalDrilDownDataSource;let i = index;\">\n\n                                                    <div class=\"flex flex-row justify-between\">\n                                                        <div class=\"mx-2 w-1/2\">\n                                                            <div class=\"text-md mb-2\"> Associated Views</div>\n                                                            <dx-tag-box [items]=\"allConfiguredViews\"\n                                                                [(ngModel)]=\"item.viewId\" valueExpr=\"viewId\"\n                                                                displayExpr=\"viewName\" [showSelectionControls]=\"true\"\n                                                                [maxDisplayedTags]=\"2\"\n                                                                [searchEnabled]=\"true\"></dx-tag-box>\n\n                                                        </div>\n                                                        <div class=\"mx-2 w-1/2\">\n                                                            <div class=\"text-md mb-2\"> Associated Params</div>\n                                                            <dx-text-box\n                                                                [(ngModel)]=\"item.filterCondition\"></dx-text-box>\n                                                        </div>\n                                                        <div class=\"mx-2\">\n                                                            <button\n                                                                class=\"{{commonService.btn_danger_sm}} cursor-pointer mt-8\"\n                                                                (click)=\"deleteAssociatedParams(i)\"><i\n                                                                    class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                                            </button>\n                                                        </div>\n                                                    </div>\n                                                </ng-container>\n                                                <div class=\"flex flex-row justify-end mt-4\">\n                                                    <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\"\n                                                        (click)=\"addAssociatedParams()\">Add\n                                                        Params</button>\n                                                </div>\n                                            </div>\n                                        </div>\n                                    </ng-container>\n                                    <button class=\"{{commonService.btn_light_md}} cursor-pointer mt-4\"\n                                        (click)=\"resetViewProprstise()\">Reset All Event</button>\n                                </div>\n                            </div>\n\n                        </div>\n                    </ng-container>\n                </div>\n            </div>\n\n        </div>\n\n\n    </div>\n</div>\n\n\n<div class=\"flex flex-row border-t pl-3\">\n    <div class=\"flex justify-start mx-1\">\n        <button class=\"{{commonService.btn_warning_md}} cursor-pointer mt-2\" (click)=\"isJsonPreview = true\">\n            Preview</button>\n        <button class=\"{{commonService.btn_primary_md}} cursor-pointer mt-2\" (click)=\"isJsonPreview = false\">Data\n            Preview</button>\n    </div>\n    <div class=\"flex justify-end mx-1 flex-grow\">\n        <button class=\"{{commonService.btn_success_md}} cursor-pointer mt-2\"\n            (click)=\"getSaveChartConfig()\">Submit</button>\n    </div>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.DxoExportComponent, selector: "dxo-export", inputs: ["backgroundColor", "enabled", "fileName", "formats", "margin", "printingEnabled", "proxyUrl", "svgToCanvas", "allowExportSelectedData", "customizeExcelCell", "excelFilterEnabled", "excelWrapTextEnabled", "ignoreExcelErrors", "texts"] }, { kind: "component", type: i5.DxCheckBoxComponent, selector: "dx-check-box", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "iconSize", "isValid", "name", "readOnly", "rtlEnabled", "tabIndex", "text", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "visible", "width"], outputs: ["onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconSizeChange", "isValidChange", "nameChange", "readOnlyChange", "rtlEnabledChange", "tabIndexChange", "textChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "component", type: i9.DxDataGridComponent, selector: "dx-data-grid", inputs: ["accessKey", "activeStateEnabled", "allowColumnReordering", "allowColumnResizing", "autoNavigateToFocusedRow", "cacheEnabled", "cellHintEnabled", "columnAutoWidth", "columnChooser", "columnFixing", "columnHidingEnabled", "columnMinWidth", "columnResizingMode", "columns", "columnWidth", "customizeColumns", "customizeExportData", "dataRowTemplate", "dataSource", "dateSerializationFormat", "disabled", "editing", "elementAttr", "errorRowEnabled", "export", "filterBuilder", "filterBuilderPopup", "filterPanel", "filterRow", "filterSyncEnabled", "filterValue", "focusedColumnIndex", "focusedRowEnabled", "focusedRowIndex", "focusedRowKey", "focusStateEnabled", "grouping", "groupPanel", "headerFilter", "height", "highlightChanges", "hint", "hoverStateEnabled", "keyboardNavigation", "keyExpr", "loadPanel", "masterDetail", "noDataText", "pager", "paging", "remoteOperations", "renderAsync", "repaintChangesOnly", "rowAlternationEnabled", "rowDragging", "rowTemplate", "rtlEnabled", "scrolling", "searchPanel", "selectedRowKeys", "selection", "selectionFilter", "showBorders", "showColumnHeaders", "showColumnLines", "showRowLines", "sortByGroupSummaryInfo", "sorting", "stateStoring", "summary", "syncLookupFilterValues", "tabIndex", "toolbar", "twoWayBindingEnabled", "visible", "width", "wordWrapEnabled"], outputs: ["onAdaptiveDetailRowPreparing", "onCellClick", "onCellDblClick", "onCellHoverChanged", "onCellPrepared", "onContentReady", "onContextMenuPreparing", "onDataErrorOccurred", "onDisposing", "onEditCanceled", "onEditCanceling", "onEditingStart", "onEditorPrepared", "onEditorPreparing", "onExported", "onExporting", "onFileSaving", "onFocusedCellChanged", "onFocusedCellChanging", "onFocusedRowChanged", "onFocusedRowChanging", "onInitialized", "onInitNewRow", "onKeyDown", "onOptionChanged", "onRowClick", "onRowCollapsed", "onRowCollapsing", "onRowDblClick", "onRowExpanded", "onRowExpanding", "onRowInserted", "onRowInserting", "onRowPrepared", "onRowRemoved", "onRowRemoving", "onRowUpdated", "onRowUpdating", "onRowValidating", "onSaved", "onSaving", "onSelectionChanged", "onToolbarPreparing", "accessKeyChange", "activeStateEnabledChange", "allowColumnReorderingChange", "allowColumnResizingChange", "autoNavigateToFocusedRowChange", "cacheEnabledChange", "cellHintEnabledChange", "columnAutoWidthChange", "columnChooserChange", "columnFixingChange", "columnHidingEnabledChange", "columnMinWidthChange", "columnResizingModeChange", "columnsChange", "columnWidthChange", "customizeColumnsChange", "customizeExportDataChange", "dataRowTemplateChange", "dataSourceChange", "dateSerializationFormatChange", "disabledChange", "editingChange", "elementAttrChange", "errorRowEnabledChange", "exportChange", "filterBuilderChange", "filterBuilderPopupChange", "filterPanelChange", "filterRowChange", "filterSyncEnabledChange", "filterValueChange", "focusedColumnIndexChange", "focusedRowEnabledChange", "focusedRowIndexChange", "focusedRowKeyChange", "focusStateEnabledChange", "groupingChange", "groupPanelChange", "headerFilterChange", "heightChange", "highlightChangesChange", "hintChange", "hoverStateEnabledChange", "keyboardNavigationChange", "keyExprChange", "loadPanelChange", "masterDetailChange", "noDataTextChange", "pagerChange", "pagingChange", "remoteOperationsChange", "renderAsyncChange", "repaintChangesOnlyChange", "rowAlternationEnabledChange", "rowDraggingChange", "rowTemplateChange", "rtlEnabledChange", "scrollingChange", "searchPanelChange", "selectedRowKeysChange", "selectionChange", "selectionFilterChange", "showBordersChange", "showColumnHeadersChange", "showColumnLinesChange", "showRowLinesChange", "sortByGroupSummaryInfoChange", "sortingChange", "stateStoringChange", "summaryChange", "syncLookupFilterValuesChange", "tabIndexChange", "toolbarChange", "twoWayBindingEnabledChange", "visibleChange", "widthChange", "wordWrapEnabledChange"] }, { kind: "component", type: i6.DxiColumnComponent, selector: "dxi-column", inputs: ["alignment", "allowEditing", "allowExporting", "allowFiltering", "allowFixing", "allowGrouping", "allowHeaderFiltering", "allowHiding", "allowReordering", "allowResizing", "allowSearch", "allowSorting", "autoExpandGroup", "buttons", "calculateCellValue", "calculateDisplayValue", "calculateFilterExpression", "calculateGroupValue", "calculateSortValue", "caption", "cellTemplate", "columns", "cssClass", "customizeText", "dataField", "dataType", "editCellTemplate", "editorOptions", "encodeHtml", "falseText", "filterOperations", "filterType", "filterValue", "filterValues", "fixed", "fixedPosition", "format", "formItem", "groupCellTemplate", "groupIndex", "headerCellTemplate", "headerFilter", "hidingPriority", "isBand", "lookup", "minWidth", "name", "ownerBand", "renderAsync", "selectedFilterOperation", "setCellValue", "showEditorAlways", "showInColumnChooser", "showWhenGrouped", "sortIndex", "sortingMethod", "sortOrder", "trueText", "type", "validationRules", "visible", "visibleIndex", "width"], outputs: ["filterValueChange", "filterValuesChange", "groupIndexChange", "selectedFilterOperationChange", "sortIndexChange", "sortOrderChange", "visibleChange", "visibleIndexChange"] }, { kind: "component", type: i6.DxoPagingComponent, selector: "dxo-paging", inputs: ["enabled", "pageIndex", "pageSize"], outputs: ["pageIndexChange", "pageSizeChange"] }, { kind: "component", type: i6.DxoSearchPanelComponent, selector: "dxo-search-panel", inputs: ["highlightCaseSensitive", "highlightSearchText", "placeholder", "searchVisibleColumnsOnly", "text", "visible", "width"], outputs: ["textChange"] }, { kind: "component", type: i8$3.DxNumberBoxComponent, selector: "dx-number-box", inputs: ["accessKey", "activeStateEnabled", "buttons", "disabled", "elementAttr", "focusStateEnabled", "format", "height", "hint", "hoverStateEnabled", "inputAttr", "invalidValueMessage", "isValid", "label", "labelMode", "max", "min", "mode", "name", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showSpinButtons", "step", "stylingMode", "tabIndex", "text", "useLargeSpinButtons", "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", "formatChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "invalidValueMessageChange", "isValidChange", "labelChange", "labelModeChange", "maxChange", "minChange", "modeChange", "nameChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showSpinButtonsChange", "stepChange", "stylingModeChange", "tabIndexChange", "textChange", "useLargeSpinButtonsChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "component", type: i6$1.DxSelectBoxComponent, selector: "dx-select-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "buttons", "dataSource", "deferRendering", "disabled", "displayExpr", "displayValue", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "fieldTemplate", "focusStateEnabled", "grouped", "groupTemplate", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "items", "itemTemplate", "label", "labelMode", "maxLength", "minSearchLength", "name", "noDataText", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "searchEnabled", "searchExpr", "searchMode", "searchTimeout", "selectedItem", "showClearButton", "showDataBeforeSearch", "showDropDownButton", "showSelectionControls", "spellcheck", "stylingMode", "tabIndex", "text", "useItemTextAsTitle", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueChangeEvent", "valueExpr", "visible", "width", "wrapItemText"], outputs: ["onChange", "onClosed", "onContentReady", "onCopy", "onCustomItemCreating", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onItemClick", "onKeyDown", "onKeyUp", "onOpened", "onOptionChanged", "onPaste", "onSelectionChanged", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "dataSourceChange", "deferRenderingChange", "disabledChange", "displayExprChange", "displayValueChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "groupedChange", "groupTemplateChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "itemsChange", "itemTemplateChange", "labelChange", "labelModeChange", "maxLengthChange", "minSearchLengthChange", "nameChange", "noDataTextChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "searchEnabledChange", "searchExprChange", "searchModeChange", "searchTimeoutChange", "selectedItemChange", "showClearButtonChange", "showDataBeforeSearchChange", "showDropDownButtonChange", "showSelectionControlsChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useItemTextAsTitleChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "valueExprChange", "visibleChange", "widthChange", "wrapItemTextChange", "onBlur"] }, { kind: "component", type: 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: i11.DxTextBoxComponent, selector: "dx-text-box", inputs: ["accessKey", "activeStateEnabled", "buttons", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "label", "labelMode", "mask", "maskChar", "maskInvalidMessage", "maskRules", "maxLength", "mode", "name", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showMaskMode", "spellcheck", "stylingMode", "tabIndex", "text", "useMaskedValue", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOptionChanged", "onPaste", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "labelChange", "labelModeChange", "maskChange", "maskCharChange", "maskInvalidMessageChange", "maskRulesChange", "maxLengthChange", "modeChange", "nameChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showMaskModeChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useMaskedValueChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: LoaderComponent, selector: "app-loader" }, { kind: "pipe", type: i4.JsonPipe, name: "json" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DashTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-dash-table', template: "<div class=\"m-2\">\n    <div class=\"w-full m-2 border-r\">\n        <ng-container *ngIf=\"!isJsonPreview\">\n            <pre><code>{{jsaonDatasource | json}}</code></pre>\n        </ng-container>\n        <ng-container *ngIf=\"isJsonPreview\">\n            <dx-data-grid [columnAutoWidth]=\"true\" [dataSource]=\"dataSourseForTable\" [hoverStateEnabled]=\"true\"\n                [selectedRowKeys]=\"[]\" [showBorders]=\"true\" [showColumnLines]=\"true\" [columns]=\"tableDataConfig.columns\"\n                [showRowLines]=\"true\" id=\"gridContainer\">\n                <dxo-search-panel [highlightCaseSensitive]=\"true\"\n                    [visible]=\"tableDataConfig.searchPanel\"></dxo-search-panel>\n                <dxo-export [enabled]=\"true\" fileName=\"{{tableDataConfig.file_name}}\"\n                    [customizeExcelCell]=\"commonService.customizeExcelCell\"></dxo-export>\n                <dxo-paging [pageSize]=\"5\"></dxo-paging>\n                <!-- <dxo-pager [showInfo]=\"tableDataConfig.pageInfo\" [showPageSizeSelector]=\"true\"\n                    [allowedPageSizes]=\"tableDataConfig.allowedPageSizes\">\n                </dxo-pager> -->\n                <!-- <ng-container *ngFor=\"let item of dataSourseForTable\">\n                    <div *ngFor=\"let key of getObjectKeys(item)\">\n                        <dxi-column dataField=\"{{ key }}\" *ngIf=\"key == 'recordDate'\" sortOrder=\"desc\"></dxi-column>\n                        <dxi-column [sortingMethod]=\"commonService.customValueSorter\" dataField=\"{{ key }}\"\n                            alignment=\"right\"></dxi-column>\n                    </div>\n                </ng-container> -->\n                <ng-container *ngFor=\"let item of tableDataConfig.columns\">\n                    <dxi-column *ngIf=\"item.dataField == 'recordDate'\" dataField=\"{{ item.dataField }}\"\n                        [caption]=\"item.caption\" [visible]=\"item.visible\" sortOrder=\"desc\"></dxi-column>\n                    <dxi-column *ngIf=\"item.dataField !== 'recordDate'\"\n                        [sortingMethod]=\"commonService.customValueSorter\" [caption]=\"item.caption\"\n                        dataField=\"{{ item.dataField }}\" alignment=\"left\" [visible]=\"item.visible\">\n                    </dxi-column>\n                </ng-container>\n            </dx-data-grid>\n        </ng-container>\n    </div>\n    <div class=\"w-full mx-2 border-r\">\n        <div class=\"mb-4 border-b border-gray-200 dark:border-gray-700\">\n            <ul class=\"flex flex-wrap -mb-px text-sm font-medium text-center\" role=\"tablist\">\n                <li class=\"me-2\" role=\"presentation\">\n                    <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                        'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'basic',\n                                        'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'basic'\n                                    }\" (click)=\"setActiveTab('basic')\" type=\"button\" role=\"tab\">\n                        Basic\n                    </button>\n                </li>\n                <li class=\"me-2\" role=\"presentation\">\n                    <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                        'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'columns',\n                                        'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'columns'\n                                    }\" (click)=\"setActiveTab('columns')\" type=\"button\" role=\"tab\">\n                        Columns\n                    </button>\n                </li>\n                <li class=\"me-2\" role=\"presentation\">\n                    <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                        'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'properties',\n                                        'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'properties'\n                                    }\" (click)=\"setActiveTab('properties')\" type=\"button\" role=\"tab\">\n                        Properties\n                    </button>\n                </li>\n\n            </ul>\n        </div>\n\n        <div id=\"default-styled-tab-content\">\n            <div *ngIf=\"activeTab === 'basic'\">\n                <div class=\"flex flex-col flex-auto min-w-0\">\n                    <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Filter Title Config\n                    </div>\n                    <div class=\"pt-2 border-x border-b \">\n                        <div class=\"my-2 flex justify-between\">\n                            <div class=\"px-1 mb-1 w-full\">\n                                <div class=\"text-md mb-1\"> Title</div>\n                                <dx-text-box [(ngModel)]=\"tableDataConfig.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)]=\"tableDataConfig.commonConfig.dataField\"></dx-select-box>\n                            </div>\n                            <div class=\"px-1 mb-1 w-full\">\n                                <div class=\"text-md mb-2\"> Display Formate </div>\n                                <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                    [(ngModel)]=\"table_columns_config.kpiConfig.formate\"></dx-select-box>\n                            </div>\n                            <div class=\"px-1 mb-1 w-full\">\n                                <div class=\"text-md mb-2\"> Key To Pass </div>\n                                <dx-tag-box [items]=\"configColume\"\n                                    [(ngModel)]=\"table_columns_config.kpiConfig.keyToPass\"></dx-tag-box>\n                            </div>\n                            <!-- <div class=\"px-1 mb-1\">\n                                <div class=\"text-md mb-1\"> Checked Key</div>\n                                <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                    [(ngModel)]=\"tableDataConfig.commonConfig.checkedKey\"></dx-select-box>\n                            </div>\n                            <div class=\"px-4 mt-6\">\n                                <dx-check-box [value]=\"tableDataConfig.commonConfig.isSearchBox\"\n                                    [(ngModel)]=\"tableDataConfig.commonConfig.isSearchBox\"\n                                    text=\"Search Box\"></dx-check-box>\n\n                            </div> -->\n                        </div>\n                    </div>\n                </div>\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\"> Table Config\n                    </div>\n                    <div class=\"flex flse-row border-x border-b\">\n                        <div class=\"px-1 mb-2 mt-8 w-full\">\n                            <!-- <div class=\"text-md mb-2\"> </div> -->\n                            <dx-check-box [value]=\"tableDataConfig.searchPanel\"\n                                [(ngModel)]=\"tableDataConfig.searchPanel\" text=\"Search Panel\"></dx-check-box>\n                        </div>\n                        <div class=\" px-1 mb-2 w-full\">\n                            <div class=\"text-md mb-2\">File Name</div>\n                            <dx-text-box [(ngModel)]=\"tableDataConfig.file_name\"></dx-text-box>\n                        </div>\n                        <div class=\"px-1 mb-2 w-full\">\n                            <div class=\"text-md mb-2\"> Number Of Row</div>\n                            <dx-number-box [value]=\"tableDataConfig.numberOfRow\"\n                                [(ngModel)]=\"tableDataConfig.numberOfRow\"></dx-number-box>\n                        </div>\n                        <div class=\"px-1 mb-2 mt-8 w-full\">\n                            <dx-check-box [value]=\"tableDataConfig.pageInfo\" [(ngModel)]=\"tableDataConfig.pageInfo\"\n                                text=\"Page Info\"></dx-check-box>\n                        </div>\n                    </div>\n                </div>\n\n            </div>\n            <div *ngIf=\"activeTab === 'columns'\">\n                <div class=\"h-full overflow-x-auto\">\n                    <div class=\"flex flex-col flex-auto min-w-0\">\n\n                        <div class=\"pt-2 border-x border-b \">\n                            <div class=\"my-2 border-b flex flex-row\"\n                                *ngFor=\"let item of tableDataConfig.columns; let i = index;\">\n                                <div class=\"px-1 mb-2 mt-6 w-full\">\n                                    <dx-check-box [value]=\"item.visible\" [(ngModel)]=\"item.visible\"\n                                        text=\"Visiblity\"></dx-check-box>\n                                </div>\n                                <ng-container *ngIf=\"item.group !== undefined\">\n                                    <div class=\"px-1 mb-2 w-full\">\n                                        <div class=\"text-md mb-2\">Group Name</div>\n                                        <dx-text-box [(ngModel)]=\"item.group\"></dx-text-box>\n                                    </div>\n                                </ng-container>\n                                <div class=\"px-1 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\"> Value Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"item.dataField\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\"> Caption</div>\n                                    <dx-text-box [(ngModel)]=\"item.caption\"></dx-text-box>\n                                </div>\n                                <div class=\"px-2 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\"> UI Function</div>\n                                    <dx-select-box [items]=\"enrichNameList\" [(ngModel)]=\"item.enrichName\"\n                                        [searchEnabled]=\"true\"></dx-select-box>\n                                </div>\n                                <div class=\"text-center mt-8 w-full\">\n                                    <button *ngIf=\"i !== 0\" class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItemForColumns(i, 'up')\">\n                                        <i class=\"fa fa-arrow-up\" aria-hidden=\"true\"></i>\n                                    </button>\n\n                                    <button *ngIf=\"i !== tableDataConfig.columns.length - 1\"\n                                        class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItemForColumns(i, 'down')\">\n                                        <i class=\"fa fa-arrow-down\" aria-hidden=\"true\"></i>\n                                    </button>\n                                    <button class=\"{{commonService.btn_danger_sm}} cursor-pointer\"\n                                        (click)=\"deleteColumns(i)\"><i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                    </button>\n                                </div>\n\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"flex flex-row justify-end my-2\">\n                        <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\" (click)=\"addColumns()\">Add\n                            Columns</button>\n                    </div>\n                </div>\n            </div>\n            <div *ngIf=\"activeTab === 'properties'\">\n                <div class=\"h-full overflow-x-auto\">\n                    <app-loader *ngIf=\"isLoader\"></app-loader>\n                    <ng-container *ngIf=\"!isLoader\">\n                        <div class=\"flex flex-row justify-between border-b py-3\">\n                            <div class=\"mx-2\">\n                                <dx-check-box [value]=\"viewProperties.enableClickEvent\"\n                                    [(ngModel)]=\"viewProperties.enableClickEvent\"\n                                    text=\"Enable Click Event\"></dx-check-box>\n                            </div>\n                            <div class=\"mx-2\">\n                                <dx-check-box [value]=\"viewProperties.enableRightClickEvent\"\n                                    [(ngModel)]=\"viewProperties.enableRightClickEvent\"\n                                    text=\"Enable Right Click\"></dx-check-box>\n                            </div>\n                        </div>\n                        <div class=\"w-full p-2\" *ngIf=\"viewProperties.enableClickEvent\">\n\n                            <div class=\"flex flex-col flex-auto min-w-0 my-2\">\n                                <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Event\n                                    Type\n                                    Option\n                                </div>\n                                <div class=\"w-full p-3 border-x border-b \">\n                                    <div class=\"flex flex-row\">\n                                        <div class=\"w-full\">\n                                            <div class=\"text-md mb-2\"> Event Type</div>\n                                        </div>\n                                        <div class=\"w-full\">\n                                            <dx-select-box [items]=\"['drilldown','optionalDrillDown']\"\n                                                (onValueChanged)=\"getSelectedEventType($event)\"\n                                                [(ngModel)]=\"viewProperties.clickEventOptions.eventType\"></dx-select-box>\n                                        </div>\n                                    </div>\n                                    <ng-container *ngIf=\"viewProperties.clickEventOptions.eventType == 'drilldown'\">\n                                        <div class=\"flex flex-row justify-between mt-3\">\n                                            <div class=\"w-full\">\n                                                <div class=\"text-md mb-2\"> Associated Views</div>\n                                                <dx-tag-box [items]=\"allConfiguredViews\"\n                                                    [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                    valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                    [showSelectionControls]=\"true\" [searchEnabled]=\"true\"></dx-tag-box>\n                                            </div>\n                                        </div>\n                                    </ng-container>\n                                    <ng-container\n                                        *ngIf=\"viewProperties.clickEventOptions.eventType == 'optionalDrillDown'\">\n                                        <div class=\"flex flex-row justify-between mt-3\">\n                                            <div class=\"w-full\">\n                                                <ng-container\n                                                    *ngFor=\"let item of optionalDrilDownDataSource;let i = index;\">\n\n                                                    <div class=\"flex flex-row justify-between\">\n                                                        <div class=\"mx-2 w-1/2\">\n                                                            <div class=\"text-md mb-2\"> Associated Views</div>\n                                                            <dx-tag-box [items]=\"allConfiguredViews\"\n                                                                [(ngModel)]=\"item.viewId\" valueExpr=\"viewId\"\n                                                                displayExpr=\"viewName\" [showSelectionControls]=\"true\"\n                                                                [maxDisplayedTags]=\"2\"\n                                                                [searchEnabled]=\"true\"></dx-tag-box>\n\n                                                        </div>\n                                                        <div class=\"mx-2 w-1/2\">\n                                                            <div class=\"text-md mb-2\"> Associated Params</div>\n                                                            <dx-text-box\n                                                                [(ngModel)]=\"item.filterCondition\"></dx-text-box>\n                                                        </div>\n                                                        <div class=\"mx-2\">\n                                                            <button\n                                                                class=\"{{commonService.btn_danger_sm}} cursor-pointer mt-8\"\n                                                                (click)=\"deleteAssociatedParams(i)\"><i\n                                                                    class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                                            </button>\n                                                        </div>\n                                                    </div>\n                                                </ng-container>\n                                                <div class=\"flex flex-row justify-end mt-4\">\n                                                    <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\"\n                                                        (click)=\"addAssociatedParams()\">Add\n                                                        Params</button>\n                                                </div>\n                                            </div>\n                                        </div>\n                                    </ng-container>\n                                    <button class=\"{{commonService.btn_light_md}} cursor-pointer mt-4\"\n                                        (click)=\"resetViewProprstise()\">Reset All Event</button>\n                                </div>\n                            </div>\n\n                        </div>\n                    </ng-container>\n                </div>\n            </div>\n\n        </div>\n\n\n    </div>\n</div>\n\n\n<div class=\"flex flex-row border-t pl-3\">\n    <div class=\"flex justify-start mx-1\">\n        <button class=\"{{commonService.btn_warning_md}} cursor-pointer mt-2\" (click)=\"isJsonPreview = true\">\n            Preview</button>\n        <button class=\"{{commonService.btn_primary_md}} cursor-pointer mt-2\" (click)=\"isJsonPreview = false\">Data\n            Preview</button>\n    </div>\n    <div class=\"flex justify-end mx-1 flex-grow\">\n        <button class=\"{{commonService.btn_success_md}} cursor-pointer mt-2\"\n            (click)=\"getSaveChartConfig()\">Submit</button>\n    </div>\n</div>" }]
+            args: [{ selector: 'app-dash-table', template: "<div class=\"m-2\">\n    <div class=\"w-full m-2 border-r\">\n        <ng-container *ngIf=\"!isJsonPreview\">\n            <pre><code>{{jsaonDatasource | json}}</code></pre>\n        </ng-container>\n        <ng-container *ngIf=\"isJsonPreview\">\n            <dx-data-grid [columnAutoWidth]=\"true\" [dataSource]=\"dataSourseForTable\" [hoverStateEnabled]=\"true\"\n                [selectedRowKeys]=\"[]\" [showBorders]=\"true\" [showColumnLines]=\"true\" [columns]=\"tableDataConfig.columns\"\n                [showRowLines]=\"true\" id=\"gridContainer\">\n                <dxo-search-panel [highlightCaseSensitive]=\"true\"\n                    [visible]=\"tableDataConfig.searchPanel\"></dxo-search-panel>\n                <dxo-export [enabled]=\"true\" fileName=\"{{tableDataConfig.file_name}}\"\n                    [customizeExcelCell]=\"commonService.customizeExcelCell\"></dxo-export>\n                <dxo-paging [pageSize]=\"5\"></dxo-paging>\n                <!-- <dxo-pager [showInfo]=\"tableDataConfig.pageInfo\" [showPageSizeSelector]=\"true\"\n                    [allowedPageSizes]=\"tableDataConfig.allowedPageSizes\">\n                </dxo-pager> -->\n                <!-- <ng-container *ngFor=\"let item of dataSourseForTable\">\n                    <div *ngFor=\"let key of getObjectKeys(item)\">\n                        <dxi-column dataField=\"{{ key }}\" *ngIf=\"key == 'recordDate'\" sortOrder=\"desc\"></dxi-column>\n                        <dxi-column [sortingMethod]=\"commonService.customValueSorter\" dataField=\"{{ key }}\"\n                            alignment=\"right\"></dxi-column>\n                    </div>\n                </ng-container> -->\n                <ng-container *ngFor=\"let item of tableDataConfig.columns\">\n                    <dxi-column *ngIf=\"item.dataField == 'recordDate'\" dataField=\"{{ item.dataField }}\"\n                        [caption]=\"item.caption\" [visible]=\"item.visible\" sortOrder=\"desc\"></dxi-column>\n                    <dxi-column *ngIf=\"item.dataField !== 'recordDate'\"\n                        [sortingMethod]=\"commonService.customValueSorter\" [caption]=\"item.caption\"\n                        dataField=\"{{ item.dataField }}\" alignment=\"left\" [visible]=\"item.visible\">\n                    </dxi-column>\n                </ng-container>\n            </dx-data-grid>\n        </ng-container>\n    </div>\n    <div class=\"w-full mx-2 border-r\">\n        <div class=\"mb-4 border-b border-gray-200 dark:border-gray-700\">\n            <ul class=\"flex flex-wrap -mb-px text-sm font-medium text-center\" role=\"tablist\">\n                <li class=\"me-2\" role=\"presentation\">\n                    <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                        'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'basic',\n                                        'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'basic'\n                                    }\" (click)=\"setActiveTab('basic')\" type=\"button\" role=\"tab\">\n                        Basic\n                    </button>\n                </li>\n                <li class=\"me-2\" role=\"presentation\">\n                    <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                        'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'columns',\n                                        'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'columns'\n                                    }\" (click)=\"setActiveTab('columns')\" type=\"button\" role=\"tab\">\n                        Columns\n                    </button>\n                </li>\n                <li class=\"me-2\" role=\"presentation\">\n                    <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                        'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'properties',\n                                        'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'properties'\n                                    }\" (click)=\"setActiveTab('properties')\" type=\"button\" role=\"tab\">\n                        Properties\n                    </button>\n                </li>\n\n            </ul>\n        </div>\n\n        <div id=\"default-styled-tab-content\">\n            <div *ngIf=\"activeTab === 'basic'\">\n                <div class=\"flex flex-col flex-auto min-w-0\">\n                    <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Filter Title Config\n                    </div>\n                    <div class=\"pt-2 border-x border-b \">\n                        <div class=\"my-2 flex justify-between\">\n                            <div class=\"px-1 mb-1 w-full\">\n                                <div class=\"text-md mb-1\"> Title</div>\n                                <dx-text-box [(ngModel)]=\"tableDataConfig.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)]=\"tableDataConfig.commonConfig.dataField\"></dx-select-box>\n                            </div>\n                            <div class=\"px-1 mb-1 w-full\">\n                                <div class=\"text-md mb-2\"> Display Formate </div>\n                                <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                    [(ngModel)]=\"table_columns_config.kpiConfig.formate\"></dx-select-box>\n                            </div>\n                            <div class=\"px-1 mb-1 w-full\">\n                                <div class=\"text-md mb-2\"> Key To Pass </div>\n                                <dx-tag-box [items]=\"configColume\"\n                                    [(ngModel)]=\"table_columns_config.kpiConfig.keyToPass\"></dx-tag-box>\n                            </div>\n                            <!-- <div class=\"px-1 mb-1\">\n                                <div class=\"text-md mb-1\"> Checked Key</div>\n                                <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                    [(ngModel)]=\"tableDataConfig.commonConfig.checkedKey\"></dx-select-box>\n                            </div>\n                            <div class=\"px-4 mt-6\">\n                                <dx-check-box [value]=\"tableDataConfig.commonConfig.isSearchBox\"\n                                    [(ngModel)]=\"tableDataConfig.commonConfig.isSearchBox\"\n                                    text=\"Search Box\"></dx-check-box>\n\n                            </div> -->\n                        </div>\n                    </div>\n                </div>\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\"> Table Config\n                    </div>\n                    <div class=\"flex flse-row border-x border-b\">\n                        <div class=\"px-1 mb-2 mt-8 w-full\">\n                            <!-- <div class=\"text-md mb-2\"> </div> -->\n                            <dx-check-box [value]=\"tableDataConfig.searchPanel\"\n                                [(ngModel)]=\"tableDataConfig.searchPanel\" text=\"Search Panel\"></dx-check-box>\n                        </div>\n                        <div class=\" px-1 mb-2 w-full\">\n                            <div class=\"text-md mb-2\">File Name</div>\n                            <dx-text-box [(ngModel)]=\"tableDataConfig.file_name\"></dx-text-box>\n                        </div>\n                        <div class=\"px-1 mb-2 w-full\">\n                            <div class=\"text-md mb-2\"> Number Of Row</div>\n                            <dx-number-box [value]=\"tableDataConfig.numberOfRow\"\n                                [(ngModel)]=\"tableDataConfig.numberOfRow\"></dx-number-box>\n                        </div>\n                        <div class=\"px-1 mb-2 mt-8 w-full\">\n                            <dx-check-box [value]=\"tableDataConfig.pageInfo\" [(ngModel)]=\"tableDataConfig.pageInfo\"\n                                text=\"Page Info\"></dx-check-box>\n                        </div>\n                    </div>\n                </div>\n\n            </div>\n            <div *ngIf=\"activeTab === 'columns'\">\n                <div class=\"h-full overflow-x-auto\">\n                    <div class=\"flex flex-col flex-auto min-w-0\">\n\n                        <div class=\"pt-2 border-x border-b \">\n                            <div class=\"my-2 border-b flex flex-row\"\n                                *ngFor=\"let item of tableDataConfig.columns; let i = index;\">\n                                <div class=\"px-1 mb-2 mt-6 w-full\">\n                                    <dx-check-box [value]=\"item.visible\" [(ngModel)]=\"item.visible\"\n                                        text=\"Visiblity\"></dx-check-box>\n                                </div>\n                                <ng-container *ngIf=\"item.group !== undefined\">\n                                    <div class=\"px-1 mb-2 w-full\">\n                                        <div class=\"text-md mb-2\">Group Name</div>\n                                        <dx-text-box [(ngModel)]=\"item.group\"></dx-text-box>\n                                    </div>\n                                </ng-container>\n                                <div class=\"px-1 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\"> Value Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"item.dataField\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\"> Caption</div>\n                                    <dx-text-box [(ngModel)]=\"item.caption\"></dx-text-box>\n                                </div>\n                                <div class=\"px-2 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\"> UI Function</div>\n                                    <dx-select-box [items]=\"enrichNameList\" [(ngModel)]=\"item.enrichName\"\n                                        [searchEnabled]=\"true\"></dx-select-box>\n                                </div>\n                                <div class=\"text-center mt-8 w-full\">\n                                    <button *ngIf=\"i !== 0\" class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItemForColumns(i, 'up')\">\n                                        <i class=\"fa fa-arrow-up\" aria-hidden=\"true\"></i>\n                                    </button>\n\n                                    <button *ngIf=\"i !== tableDataConfig.columns.length - 1\"\n                                        class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItemForColumns(i, 'down')\">\n                                        <i class=\"fa fa-arrow-down\" aria-hidden=\"true\"></i>\n                                    </button>\n                                    <button class=\"{{commonService.btn_danger_sm}} cursor-pointer\"\n                                        (click)=\"deleteColumns(i)\"><i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                    </button>\n                                </div>\n\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"flex flex-row justify-end my-2\">\n                        <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\" (click)=\"addColumns()\">Add\n                            Columns</button>\n                    </div>\n                </div>\n            </div>\n            <div *ngIf=\"activeTab === 'properties'\">\n                <div class=\"h-full overflow-x-auto\">\n                    <app-loader *ngIf=\"isLoader\"></app-loader>\n                    <ng-container *ngIf=\"!isLoader\">\n                        <div class=\"flex flex-row justify-between border-b py-3\">\n                            <div class=\"mx-2\">\n                                <dx-check-box [value]=\"viewProperties.enableClickEvent\"\n                                    [(ngModel)]=\"viewProperties.enableClickEvent\"\n                                    text=\"Enable Click Event\"></dx-check-box>\n                            </div>\n                            <div class=\"mx-2\">\n                                <dx-check-box [value]=\"viewProperties.enableRightClickEvent\"\n                                    [(ngModel)]=\"viewProperties.enableRightClickEvent\"\n                                    text=\"Enable Right Click\"></dx-check-box>\n                            </div>\n                        </div>\n                        <div class=\"w-full p-2\" *ngIf=\"viewProperties.enableClickEvent\">\n\n                            <div class=\"flex flex-col flex-auto min-w-0 my-2\">\n                                <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Event\n                                    Type\n                                    Option\n                                </div>\n                                <div class=\"w-full p-3 border-x border-b \">\n                                    <div class=\"flex flex-row\">\n                                        <div class=\"w-full\">\n                                            <div class=\"text-md mb-2\"> Event Type</div>\n                                        </div>\n                                        <div class=\"w-full\">\n                                            <dx-select-box [items]=\"['drilldown','sameViewDrilldown','optionalDrillDown']\"\n                                                (onValueChanged)=\"getSelectedEventType($event)\"\n                                                [(ngModel)]=\"viewProperties.clickEventOptions.eventType\"></dx-select-box>\n                                        </div>\n                                    </div>\n                                    <ng-container *ngIf=\"viewProperties.clickEventOptions.eventType == 'drilldown'\">\n                                        <div class=\"flex flex-row justify-between mt-3\">\n                                            <div class=\"w-full\">\n                                                <div class=\"text-md mb-2\"> Associated Views</div>\n                                                <dx-tag-box [items]=\"allConfiguredViews\"\n                                                    [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                    valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                    [showSelectionControls]=\"true\" [searchEnabled]=\"true\"></dx-tag-box>\n                                            </div>\n                                        </div>\n                                    </ng-container>\n                                    <ng-container *ngIf=\"viewProperties.clickEventOptions.eventType == 'sameViewDrilldown'\">\n                                        <div class=\"flex flex-row justify-between mt-3\">\n                                            <div class=\"w-full\">\n                                                <div class=\"text-md mb-2\"> Associated Views</div>\n                                                <dx-tag-box [items]=\"allConfiguredViews\"\n                                                    [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                    valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                    [showSelectionControls]=\"true\" [searchEnabled]=\"true\"></dx-tag-box>\n                                            </div>\n                                        </div>\n                                    </ng-container>\n                                    <ng-container\n                                        *ngIf=\"viewProperties.clickEventOptions.eventType == 'optionalDrillDown'\">\n                                        <div class=\"flex flex-row justify-between mt-3\">\n                                            <div class=\"w-full\">\n                                                <ng-container\n                                                    *ngFor=\"let item of optionalDrilDownDataSource;let i = index;\">\n\n                                                    <div class=\"flex flex-row justify-between\">\n                                                        <div class=\"mx-2 w-1/2\">\n                                                            <div class=\"text-md mb-2\"> Associated Views</div>\n                                                            <dx-tag-box [items]=\"allConfiguredViews\"\n                                                                [(ngModel)]=\"item.viewId\" valueExpr=\"viewId\"\n                                                                displayExpr=\"viewName\" [showSelectionControls]=\"true\"\n                                                                [maxDisplayedTags]=\"2\"\n                                                                [searchEnabled]=\"true\"></dx-tag-box>\n\n                                                        </div>\n                                                        <div class=\"mx-2 w-1/2\">\n                                                            <div class=\"text-md mb-2\"> Associated Params</div>\n                                                            <dx-text-box\n                                                                [(ngModel)]=\"item.filterCondition\"></dx-text-box>\n                                                        </div>\n                                                        <div class=\"mx-2\">\n                                                            <button\n                                                                class=\"{{commonService.btn_danger_sm}} cursor-pointer mt-8\"\n                                                                (click)=\"deleteAssociatedParams(i)\"><i\n                                                                    class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                                            </button>\n                                                        </div>\n                                                    </div>\n                                                </ng-container>\n                                                <div class=\"flex flex-row justify-end mt-4\">\n                                                    <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\"\n                                                        (click)=\"addAssociatedParams()\">Add\n                                                        Params</button>\n                                                </div>\n                                            </div>\n                                        </div>\n                                    </ng-container>\n                                    <button class=\"{{commonService.btn_light_md}} cursor-pointer mt-4\"\n                                        (click)=\"resetViewProprstise()\">Reset All Event</button>\n                                </div>\n                            </div>\n\n                        </div>\n                    </ng-container>\n                </div>\n            </div>\n\n        </div>\n\n\n    </div>\n</div>\n\n\n<div class=\"flex flex-row border-t pl-3\">\n    <div class=\"flex justify-start mx-1\">\n        <button class=\"{{commonService.btn_warning_md}} cursor-pointer mt-2\" (click)=\"isJsonPreview = true\">\n            Preview</button>\n        <button class=\"{{commonService.btn_primary_md}} cursor-pointer mt-2\" (click)=\"isJsonPreview = false\">Data\n            Preview</button>\n    </div>\n    <div class=\"flex justify-end mx-1 flex-grow\">\n        <button class=\"{{commonService.btn_success_md}} cursor-pointer mt-2\"\n            (click)=\"getSaveChartConfig()\">Submit</button>\n    </div>\n</div>" }]
         }], ctorParameters: function () { return [{ type: CommonService }, { type: i0.ChangeDetectorRef }, { type: ApplicationContentService }, { type: i2$2.ToastrService }]; }, propDecorators: { getTableConfigOutPut: [{
                 type: Output
             }], chartconfigData: [{
@@ -4784,6 +4785,7 @@ class TableWithBarComponent {
         }
         this.table_columns_config.kpiConfig['viewProperties'] = this.viewProperties;
         console.log(this.table_columns_config);
+        this.createOtherComponentView.emit(this.table_columns_config);
     }
     deleteAssociatedParams(index) {
         this.optionalDrilDownDataSource.splice(index, 1);
@@ -5260,9 +5262,6 @@ class CreateCompViewComponent {
                         this.isCreateNewView = false;
                         this.isLoader = false;
                         this.toastr.success('View Update Successfully');
-                        if (this.isHeader) {
-                            this.router.navigate(['/apps/controlPanel/applicationViews/']);
-                        }
                     }, error: (err) => {
                         this.toastr.error('Unexpected Server Exception. Please contact System Admin.', 'View Creation');
                     }
@@ -5283,9 +5282,6 @@ class CreateCompViewComponent {
                     "viewType": ""
                 };
                 this.isLoader = false;
-                if (this.isHeader) {
-                    this.router.navigate(['/apps/controlPanel/applicationViews/']);
-                }
             }, error: (err) => {
                 this.toastr.error('Unexpected Server Exception. Please contact System Admin.', 'View Creation');
             }
@@ -6429,6 +6425,19 @@ class AppAdvanceHeaderComponent {
             }
         }
     }
+    set contextFilterItems(value) {
+        if (!value) {
+            this.contextFilterItemsForFilter = value;
+        }
+        else {
+            this.contextFilterItemsForFilter = [];
+            value.forEach(element => {
+                if (element.filterType == "context") {
+                    this.contextFilterItemsForFilter.push(element);
+                }
+            });
+        }
+    }
     ngOnInit() {
     }
     pageAutoloadStopRun() {
@@ -6516,10 +6525,10 @@ class AppAdvanceHeaderComponent {
     }
 }
 AppAdvanceHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AppAdvanceHeaderComponent, deps: [{ token: i2.ActivatedRoute }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component });
-AppAdvanceHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: AppAdvanceHeaderComponent, selector: "app-advance-header", inputs: { pageTitle: "pageTitle", bread_crumbs_container: "bread_crumbs_container", isEditButton: "isEditButton", isAdvanceButton: "isAdvanceButton", selectedDates: "selectedDates", filterItems: "filterItems" }, outputs: { toggleEvent: "toggleEvent", selectedDateRangeOrServtype: "selectedDateRangeOrServtype", getFilterPageConfig: "getFilterPageConfig" }, ngImport: i0, template: "<div class=\"flex flex-col mb-2\">\n    <div class=\"flex justify-between border-b dark:bg-transparent\">\n        <div class=\"flex flex-col ml-1\">\n            <div class=\"flex items-center float-start\">\n                <div class=\"flex items-center overflow-hidden\">\n                    <mat-icon class=\"icon-size-2\" [svgIcon]=\"'heroicons_solid:template'\"></mat-icon>\n                </div>\n                <h2\n                    class=\"text-2xl md:text-2xl py-3 font-extrabold items-center ml-2 tracking-tight leading-5 truncate capitalize\">\n                    {{ pageTitle }}\n                </h2>\n            </div>\n            <div class=\"\">\n                <!-- INCOMING -->\n                <gamma-bread-crumbs [kpi_data_container]=\"bread_crumbs_container\"></gamma-bread-crumbs>\n            </div>\n        </div>\n        <div class=\"flex justify-between items-center border-l-2 p-0 m-0\">\n\n            <div class=\"mx-2\" *ngIf=\"isEditButton\">\n                <div (click)=\"editKpi()\"\n                    class=\"bg-blue-700 cursor-pointer dark:bg-blue-600 dark:focus:ring-blue-800 dark:hover:bg-blue-700 focus:outline-none focus:ring-4 focus:ring-blue-300 font-medium hover:bg-blue-800 mr-2 px-2.5 py-2 rounded text-sm text-white ng-star-inserted\">\n                    Edit\n                </div>\n            </div>\n            <div class=\"w-1 h-full border-l-2\" *ngIf=\"isEditButton\"></div>\n            <div class=\"mx-2\">\n                <div class=\"cursor-pointer\" (click)=\"advanceFilterKpi()\"> {{selectedDetesforView}}</div>\n            </div>\n            <div class=\"w-1 h-full border-l-2\"></div>\n            <div class=\"mx-2\" *ngIf=\"isAdvanceButton\">\n                <button class=\"mat-focus-indicator mat-menu-trigger mat-icon-button mat-button-base\"\n                    aria-haspopup=\"menu\" (click)=\"advanceFilterKpi()\">\n                    <span class=\"mat-button-wrapper\">\n                        <span class=\"relative\">\n                            <mat-icon title=\"Filters\" [svgIcon]=\"'heroicons_outline:adjustments'\">\n                            </mat-icon>\n                        </span>\n                    </span>\n                </button>\n            </div>\n\n\n            <div class=\"w-1 h-full border-l-2\"></div>\n            <!-- <div class=\"mx-2\">\n                <button class=\"mat-focus-indicator mat-menu-trigger mat-icon-button mat-button-base\"\n                    aria-haspopup=\"menu\">\n                    <span class=\"mat-button-wrapper\">\n                        <span class=\"relative\">\n                            <mat-icon (click)=\"callPageDocumentation()\" title=\"Add Filters\" [svgIcon]=\"\n                                    'heroicons_outline:question-mark-circle'\n                                \">\n                            </mat-icon>\n                        </span>\n                    </span>\n                    <span class=\"mat-button-focus-overlay\"></span>\n                </button>\n            </div> -->\n\n        </div>\n    </div>\n</div>\n\n<dx-popup [(visible)]=\"isAdvanceFilter\" [closeOnOutsideClick]=\"false\" [dragEnabled]=\"false\" [width]=\"600\"\n    [height]=\"'auto'\" [showTitle]=\"true\" class=\"popup\" title=\"Filter\">\n    <div *dxTemplate=\"let data of 'content'\">\n        <app-gamma-advance-filter [kpiId]=\"'231212'\" [filterOperatorData]=\"filterItemsForFilter\"\n            [isButtonDesiable]=\"isAdvanceFilter\" [filterStartDate]=\"filterStartDate\" [filterEndDate]=\"filterEndDate\"\n            (filterDataObject)=\"getSerchFilter($event)\"></app-gamma-advance-filter>\n    </div>\n</dx-popup>", styles: [""], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i4$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: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: GammaAdvanceFilterComponent, selector: "app-gamma-advance-filter", inputs: ["kpiId", "filterStartDate", "filterEndDate", "browser_api_config", "isButtonDesiable", "filterOperatorData"], outputs: ["filterDataObject"] }, { kind: "component", type: BreadCrumbsComponent, selector: "gamma-bread-crumbs", inputs: ["kpi_data_container"] }] });
+AppAdvanceHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: AppAdvanceHeaderComponent, selector: "app-advance-header", inputs: { pageTitle: "pageTitle", bread_crumbs_container: "bread_crumbs_container", isEditButton: "isEditButton", isAdvanceButton: "isAdvanceButton", selectedDates: "selectedDates", filterItems: "filterItems", contextFilterItems: "contextFilterItems" }, outputs: { toggleEvent: "toggleEvent", selectedDateRangeOrServtype: "selectedDateRangeOrServtype", getFilterPageConfig: "getFilterPageConfig" }, ngImport: i0, template: "<div class=\"flex flex-col mb-2\">\n    <div class=\"flex justify-between border-b dark:bg-transparent\">\n        <div class=\"flex flex-col ml-1\">\n            <div class=\"flex items-center float-start\">\n                <div class=\"flex items-center overflow-hidden\">\n                    <mat-icon class=\"icon-size-2\" [svgIcon]=\"'heroicons_solid:template'\"></mat-icon>\n                </div>\n                <h2\n                    class=\"text-2xl md:text-2xl py-3 font-extrabold items-center ml-2 tracking-tight leading-5 truncate capitalize\">\n                    {{ pageTitle }}\n                </h2>\n            </div>\n            <div class=\"\">\n                <!-- INCOMING -->\n                <gamma-bread-crumbs [kpi_data_container]=\"bread_crumbs_container\"></gamma-bread-crumbs>\n            </div>\n        </div>\n        <div class=\"flex justify-between items-center border-l-2 p-0 m-0\">\n\n            <div class=\"mx-2\" *ngIf=\"isEditButton\">\n                <div (click)=\"editKpi()\"\n                    class=\"bg-blue-700 cursor-pointer dark:bg-blue-600 dark:focus:ring-blue-800 dark:hover:bg-blue-700 focus:outline-none focus:ring-4 focus:ring-blue-300 font-medium hover:bg-blue-800 mr-2 px-2.5 py-2 rounded text-sm text-white ng-star-inserted\">\n                    Edit\n                </div>\n            </div>\n            <div class=\"w-1 h-full border-l-2\"></div>\n            <ng-container *ngIf=\"contextFilterItemsForFilter &&  contextFilterItemsForFilter.length !== 0\">\n                <div class=\"mx-2\">\n                    <dx-select-box [dataSource]=\"contextFilterItemsForFilter\" displayExpr=\"label\" value=\"defaultFilterValue\"></dx-select-box>\n                </div>\n            </ng-container>\n           \n            <div class=\"w-1 h-full border-l-2\"></div>\n            <div class=\"mx-2\">\n                <div class=\"cursor-pointer\" (click)=\"advanceFilterKpi()\"> {{selectedDetesforView}}</div>\n            </div>\n            <div class=\"w-1 h-full border-l-2\"></div>\n            <div class=\"mx-2\" *ngIf=\"isAdvanceButton\">\n                <button class=\"mat-focus-indicator mat-menu-trigger mat-icon-button mat-button-base\"\n                    aria-haspopup=\"menu\" (click)=\"advanceFilterKpi()\">\n                    <span class=\"mat-button-wrapper\">\n                        <span class=\"relative\">\n                            <mat-icon title=\"Filters\" [svgIcon]=\"'heroicons_outline:adjustments'\">\n                            </mat-icon>\n                        </span>\n                    </span>\n                </button>\n            </div>\n\n\n            <div class=\"w-1 h-full border-l-2\"></div>\n            \n\n        </div>\n    </div>\n</div>\n\n<dx-popup [(visible)]=\"isAdvanceFilter\" [closeOnOutsideClick]=\"false\" [dragEnabled]=\"false\" [width]=\"600\"\n    [height]=\"'auto'\" [showTitle]=\"true\" class=\"popup\" title=\"Filter\">\n    <div *dxTemplate=\"let data of 'content'\">\n        <app-gamma-advance-filter [kpiId]=\"'231212'\" [filterOperatorData]=\"filterItemsForFilter\"\n            [isButtonDesiable]=\"isAdvanceFilter\" [filterStartDate]=\"filterStartDate\" [filterEndDate]=\"filterEndDate\"\n            (filterDataObject)=\"getSerchFilter($event)\"></app-gamma-advance-filter>\n    </div>\n</dx-popup>", styles: [""], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i4$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: 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: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: GammaAdvanceFilterComponent, selector: "app-gamma-advance-filter", inputs: ["kpiId", "filterStartDate", "filterEndDate", "browser_api_config", "isButtonDesiable", "filterOperatorData"], outputs: ["filterDataObject"] }, { kind: "component", type: BreadCrumbsComponent, selector: "gamma-bread-crumbs", inputs: ["kpi_data_container"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AppAdvanceHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-advance-header', template: "<div class=\"flex flex-col mb-2\">\n    <div class=\"flex justify-between border-b dark:bg-transparent\">\n        <div class=\"flex flex-col ml-1\">\n            <div class=\"flex items-center float-start\">\n                <div class=\"flex items-center overflow-hidden\">\n                    <mat-icon class=\"icon-size-2\" [svgIcon]=\"'heroicons_solid:template'\"></mat-icon>\n                </div>\n                <h2\n                    class=\"text-2xl md:text-2xl py-3 font-extrabold items-center ml-2 tracking-tight leading-5 truncate capitalize\">\n                    {{ pageTitle }}\n                </h2>\n            </div>\n            <div class=\"\">\n                <!-- INCOMING -->\n                <gamma-bread-crumbs [kpi_data_container]=\"bread_crumbs_container\"></gamma-bread-crumbs>\n            </div>\n        </div>\n        <div class=\"flex justify-between items-center border-l-2 p-0 m-0\">\n\n            <div class=\"mx-2\" *ngIf=\"isEditButton\">\n                <div (click)=\"editKpi()\"\n                    class=\"bg-blue-700 cursor-pointer dark:bg-blue-600 dark:focus:ring-blue-800 dark:hover:bg-blue-700 focus:outline-none focus:ring-4 focus:ring-blue-300 font-medium hover:bg-blue-800 mr-2 px-2.5 py-2 rounded text-sm text-white ng-star-inserted\">\n                    Edit\n                </div>\n            </div>\n            <div class=\"w-1 h-full border-l-2\" *ngIf=\"isEditButton\"></div>\n            <div class=\"mx-2\">\n                <div class=\"cursor-pointer\" (click)=\"advanceFilterKpi()\"> {{selectedDetesforView}}</div>\n            </div>\n            <div class=\"w-1 h-full border-l-2\"></div>\n            <div class=\"mx-2\" *ngIf=\"isAdvanceButton\">\n                <button class=\"mat-focus-indicator mat-menu-trigger mat-icon-button mat-button-base\"\n                    aria-haspopup=\"menu\" (click)=\"advanceFilterKpi()\">\n                    <span class=\"mat-button-wrapper\">\n                        <span class=\"relative\">\n                            <mat-icon title=\"Filters\" [svgIcon]=\"'heroicons_outline:adjustments'\">\n                            </mat-icon>\n                        </span>\n                    </span>\n                </button>\n            </div>\n\n\n            <div class=\"w-1 h-full border-l-2\"></div>\n            <!-- <div class=\"mx-2\">\n                <button class=\"mat-focus-indicator mat-menu-trigger mat-icon-button mat-button-base\"\n                    aria-haspopup=\"menu\">\n                    <span class=\"mat-button-wrapper\">\n                        <span class=\"relative\">\n                            <mat-icon (click)=\"callPageDocumentation()\" title=\"Add Filters\" [svgIcon]=\"\n                                    'heroicons_outline:question-mark-circle'\n                                \">\n                            </mat-icon>\n                        </span>\n                    </span>\n                    <span class=\"mat-button-focus-overlay\"></span>\n                </button>\n            </div> -->\n\n        </div>\n    </div>\n</div>\n\n<dx-popup [(visible)]=\"isAdvanceFilter\" [closeOnOutsideClick]=\"false\" [dragEnabled]=\"false\" [width]=\"600\"\n    [height]=\"'auto'\" [showTitle]=\"true\" class=\"popup\" title=\"Filter\">\n    <div *dxTemplate=\"let data of 'content'\">\n        <app-gamma-advance-filter [kpiId]=\"'231212'\" [filterOperatorData]=\"filterItemsForFilter\"\n            [isButtonDesiable]=\"isAdvanceFilter\" [filterStartDate]=\"filterStartDate\" [filterEndDate]=\"filterEndDate\"\n            (filterDataObject)=\"getSerchFilter($event)\"></app-gamma-advance-filter>\n    </div>\n</dx-popup>" }]
+            args: [{ selector: 'app-advance-header', template: "<div class=\"flex flex-col mb-2\">\n    <div class=\"flex justify-between border-b dark:bg-transparent\">\n        <div class=\"flex flex-col ml-1\">\n            <div class=\"flex items-center float-start\">\n                <div class=\"flex items-center overflow-hidden\">\n                    <mat-icon class=\"icon-size-2\" [svgIcon]=\"'heroicons_solid:template'\"></mat-icon>\n                </div>\n                <h2\n                    class=\"text-2xl md:text-2xl py-3 font-extrabold items-center ml-2 tracking-tight leading-5 truncate capitalize\">\n                    {{ pageTitle }}\n                </h2>\n            </div>\n            <div class=\"\">\n                <!-- INCOMING -->\n                <gamma-bread-crumbs [kpi_data_container]=\"bread_crumbs_container\"></gamma-bread-crumbs>\n            </div>\n        </div>\n        <div class=\"flex justify-between items-center border-l-2 p-0 m-0\">\n\n            <div class=\"mx-2\" *ngIf=\"isEditButton\">\n                <div (click)=\"editKpi()\"\n                    class=\"bg-blue-700 cursor-pointer dark:bg-blue-600 dark:focus:ring-blue-800 dark:hover:bg-blue-700 focus:outline-none focus:ring-4 focus:ring-blue-300 font-medium hover:bg-blue-800 mr-2 px-2.5 py-2 rounded text-sm text-white ng-star-inserted\">\n                    Edit\n                </div>\n            </div>\n            <div class=\"w-1 h-full border-l-2\"></div>\n            <ng-container *ngIf=\"contextFilterItemsForFilter &&  contextFilterItemsForFilter.length !== 0\">\n                <div class=\"mx-2\">\n                    <dx-select-box [dataSource]=\"contextFilterItemsForFilter\" displayExpr=\"label\" value=\"defaultFilterValue\"></dx-select-box>\n                </div>\n            </ng-container>\n           \n            <div class=\"w-1 h-full border-l-2\"></div>\n            <div class=\"mx-2\">\n                <div class=\"cursor-pointer\" (click)=\"advanceFilterKpi()\"> {{selectedDetesforView}}</div>\n            </div>\n            <div class=\"w-1 h-full border-l-2\"></div>\n            <div class=\"mx-2\" *ngIf=\"isAdvanceButton\">\n                <button class=\"mat-focus-indicator mat-menu-trigger mat-icon-button mat-button-base\"\n                    aria-haspopup=\"menu\" (click)=\"advanceFilterKpi()\">\n                    <span class=\"mat-button-wrapper\">\n                        <span class=\"relative\">\n                            <mat-icon title=\"Filters\" [svgIcon]=\"'heroicons_outline:adjustments'\">\n                            </mat-icon>\n                        </span>\n                    </span>\n                </button>\n            </div>\n\n\n            <div class=\"w-1 h-full border-l-2\"></div>\n            \n\n        </div>\n    </div>\n</div>\n\n<dx-popup [(visible)]=\"isAdvanceFilter\" [closeOnOutsideClick]=\"false\" [dragEnabled]=\"false\" [width]=\"600\"\n    [height]=\"'auto'\" [showTitle]=\"true\" class=\"popup\" title=\"Filter\">\n    <div *dxTemplate=\"let data of 'content'\">\n        <app-gamma-advance-filter [kpiId]=\"'231212'\" [filterOperatorData]=\"filterItemsForFilter\"\n            [isButtonDesiable]=\"isAdvanceFilter\" [filterStartDate]=\"filterStartDate\" [filterEndDate]=\"filterEndDate\"\n            (filterDataObject)=\"getSerchFilter($event)\"></app-gamma-advance-filter>\n    </div>\n</dx-popup>" }]
         }], ctorParameters: function () { return [{ type: i2.ActivatedRoute }, { type: i2.Router }]; }, propDecorators: { pageTitle: [{
                 type: Input
             }], bread_crumbs_container: [{
@@ -6539,38 +6548,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             }], filterItems: [{
                 type: Input,
                 args: ['filterItems']
+            }], contextFilterItems: [{
+                type: Input,
+                args: ['contextFilterItems']
             }] } });
 
 class GammaTableWithPercentageComponent {
     constructor(commonService, toastr) {
         this.commonService = commonService;
         this.toastr = toastr;
-        this.data = [
-            {
-                eventType: "Voice",
-                access_cost_sar: 767.7730000000023,
-                event_type: '1',
-                ict_cost_sar: 7232,
-                margin_sar: 2445.7730000000023,
-                revenue: 5232
-            },
-            {
-                eventType: "SMS",
-                access_cost_sar: 345.7730000000023,
-                event_type: '2',
-                ict_cost_sar: 35654,
-                margin_sar: 2445.7730000000023,
-                revenue: 55654
-            },
-            {
-                eventType: "GPRS",
-                access_cost_sar: 567.7730000000023,
-                event_type: '3',
-                ict_cost_sar: 89387,
-                margin_sar: 5445.7730000000023,
-                revenue: 99387
-            }
-        ];
+        this.getTableConfigOutPut = new EventEmitter();
+        this.oRowClick = new EventEmitter();
+        this.onrightClickContextSelection = new EventEmitter();
+        this.rightClickEnable = true;
         this.tableDataSource = [];
     }
     set chartDataSource(value) {
@@ -6579,20 +6569,25 @@ class GammaTableWithPercentageComponent {
         }
         else {
             this.isLoader = true;
+            this.page_config = value;
+            this.page_parms = value.titleParams;
             if (value.kpiConfig.dataSource && value.kpiConfig.dataSource.length !== 0) {
-                const sortedData = value.kpiConfig.dataSource.sort((a, b) => {
-                    return moment(b.recordDate, "YYYY-MM-DD").diff(moment(a.recordDate, "YYYY-MM-DD"));
-                });
-                value.kpiConfig.dataSource.forEach(item => item.recordDate = new Date(item.recordDate));
-                value.kpiConfig.dataSource.sort((a, b) => b.recordDate - a.recordDate);
-                const uniqueEvents = new Map();
-                value.kpiConfig.dataSource.forEach(item => {
-                    if (!uniqueEvents.has(item.eventTypeKey)) {
-                        uniqueEvents.set(item.eventTypeKey, item);
-                    }
-                });
-                const result = Array.from(uniqueEvents.values());
-                this.loadDailyMscVoiceTable(result);
+                this.tableConfig = value.kpiConfig.dataConfig;
+                const columns = value.kpiConfig.dataConfig.columns;
+                let mainDatasource;
+                let tableColumns = (value.kpiConfig.dataConfig.columns) ? value.kpiConfig.dataConfig.columns : [];
+                if (tableColumns && tableColumns.length !== 0) {
+                    const dataSource = value.kpiConfig.dataSource.map(obj => {
+                        const newObj = { ...obj };
+                        Object.keys(newObj).forEach(key => {
+                            if (key.toLowerCase().includes('date') && newObj[key]) {
+                                newObj[key] = moment(newObj[key]).format("YYYY-MM-DD");
+                            }
+                        });
+                        return newObj;
+                    });
+                    this.percentageDataSource = this.loadDailyMscVoiceTable(dataSource, columns);
+                }
                 this.isLoader = false;
             }
             else {
@@ -6601,99 +6596,90 @@ class GammaTableWithPercentageComponent {
     }
     ngOnInit() {
     }
-    loadDailyMscVoiceTable(data) {
-        this.tableDataSource = [];
-        let dataset = [];
-        let column1Name = 'access_cost_sar';
-        let column2Name = 'ict_cost_sar';
-        let column3Name = 'margin_sar';
-        let column4Name = 'revenue';
-        let revenueArr = [], interConnectArr = [], accessCostArr = [], marginArr = [];
-        for (const [i, v] of Object.entries(data)) {
-            if (v[column1Name] == undefined) {
-                v[column1Name] = 0;
-            }
-            if (v[column2Name] == undefined) {
-                v[column2Name] = 0;
-            }
-            if (v[column3Name] == undefined) {
-                v[column3Name] = 0;
-            }
-            if (v[column4Name] == undefined) {
-                v[column4Name] = 0;
-            }
-            accessCostArr.push(v[column1Name]);
-            interConnectArr.push(v[column2Name]);
-            marginArr.push(v[column3Name]);
-            revenueArr.push(v[column4Name]);
-        }
-        let maxAccessCostVal = Math.max.apply(Math, accessCostArr);
-        let minAccessCostVal = Math.min.apply(Math, accessCostArr);
-        let maxinterConnectVal = Math.max.apply(Math, interConnectArr);
-        let mininterConnectVal = Math.min.apply(Math, interConnectArr);
-        let maxmarginVal = Math.max.apply(Math, marginArr);
-        let minmarginVal = Math.min.apply(Math, marginArr);
-        let maxRevenueVal = Math.max.apply(Math, revenueArr);
-        let minRevenueVal = Math.min.apply(Math, revenueArr);
-        for (const [i, v] of Object.entries(data)) {
-            let r = [];
-            let accessCostValue, interConnectValue, marginValue, revenueValue;
-            if (v[column1Name] > 0) {
-                accessCostValue = this.commonService.scaleNumber(parseFloat(v[column1Name]), maxAccessCostVal, minAccessCostVal, 10, 75);
-            }
-            else {
-                accessCostValue = 0;
-            }
-            if (v[column2Name] > 0) {
-                interConnectValue = this.commonService.scaleNumber(parseFloat(v[column2Name]), maxinterConnectVal, mininterConnectVal, 10, 75);
-            }
-            else {
-                interConnectValue = 0;
-            }
-            if (v[column3Name] > 0) {
-                marginValue = this.commonService.scaleNumber(parseFloat(v[column3Name]), maxmarginVal, minmarginVal, 10, 75);
-            }
-            else {
-                marginValue = 0;
-            }
-            if (v[column4Name] > 0) {
-                revenueValue = this.commonService.scaleNumber(parseFloat(v[column4Name]), maxRevenueVal, minRevenueVal, 10, 75);
-            }
-            else {
-                revenueValue = 0;
-            }
-            let accessCostBar = this.commonService.createHtml(accessCostValue, this.commonService.reformatNumberWithThousandSeparator(v[column1Name]), '#002E70');
-            let interconnectBar = this.commonService.createHtml(interConnectValue, this.commonService.reformatNumberWithThousandSeparator(v[column2Name]), '#F46604');
-            let marginBar = this.commonService.createHtml(marginValue, this.commonService.reformatNumberWithThousandSeparator(v[column3Name]), '#3d8706');
-            let revenueBar = this.commonService.createHtml(revenueValue, this.commonService.reformatNumberWithThousandSeparator(v[column4Name]), '#ffac42');
-            let node = {
-                'eventType': this.getEventTypeName(v['eventTypeKey']),
-                'access_cost_sar': accessCostBar,
-                'margin_sar': marginBar,
-                'ict_cost_sar': interconnectBar,
-                'revenue': revenueBar,
-            };
-            this.tableDataSource.push(node);
-        }
+    loadDailyMscVoiceTable(data, datacolumns) {
+        this.argumentValue = datacolumns.filter((column) => column.isShowBar == false);
+        this.dataConfig = datacolumns.filter((column) => column.isShowBar == true);
+        let keys = this.dataConfig;
+        const result = {};
+        let finalDatasource = [];
+        data.forEach((elementOne) => {
+            keys.forEach((key) => {
+                const values = data.map((item) => parseFloat(item[key['dataField']]) || 0);
+                const maxValue = Math.max(...values);
+                const minValue = Math.min(...values);
+                result[key['dataField']] = { maxValue, minValue };
+            });
+            let obj = {};
+            keys.forEach((key) => {
+                let widthVal = this.commonService.scaleNumber(parseFloat(elementOne[key['dataField']]), result[key['dataField']]['minValue'], result[key['dataField']]['maxValue'], 10, 75);
+                let Bar = this.commonService.createHtml(widthVal, this.commonService.reformatNumberWithThousandSeparator(elementOne[key['dataField']]), key['color']);
+                obj[key['dataField']] = Bar;
+            });
+            this.argumentValue.forEach((element) => {
+                obj[element.dataField] = elementOne[element.dataField];
+            });
+            finalDatasource.push(obj);
+        });
+        return finalDatasource;
     }
-    getEventTypeName(key) {
-        if (key == "1") {
-            return "Voice";
-        }
-        else if (key == "2") {
-            return "SMS";
-        }
-        else {
-            return "GPRS";
+    onRowClick(e) {
+        const title_params = e.data[this.page_config.kpiConfig.dataConfig.commonConfig['dataField']];
+        let title = this.page_config.kpiConfig.dataConfig.commonConfig['title'] + title_params;
+        let obj = {
+            data: e.data,
+            keyToPass: this.page_config.kpiConfig.keyToPass,
+            tableTitle: (this.page_parms) ? this.page_parms + title : title,
+            viewId: this.page_config.viewId,
+            drillDownType: "natural",
+            drilldownFrom: this.page_config.viewId,
+            drilldownTo: "",
+        };
+        this.oRowClick.emit(obj);
+    }
+    addMenuItems(e) {
+        const title_params = e.row.data[this.page_config.kpiConfig.dataConfig.commonConfig['dataField']];
+        let title = this.page_config.kpiConfig.dataConfig.commonConfig['title'] + title_params;
+        if (this.rightClickEnable && e.columnIndex == 0) {
+            if (e.target == 'content') {
+                if (!e.items)
+                    e.items = [];
+                this.page_config.kpiConfig.contextMenu.forEach(element => {
+                    if (!this.page_config.kpiConfig.keyToPass.some(key => element.displayKey.includes(key))) {
+                        e.items.push({
+                            text: element.displayKey,
+                            onItemClick: () => {
+                                let rightclickData = {
+                                    data: e.row.data,
+                                    keyToPass: this.page_config.kpiConfig.keyToPass,
+                                    tableTitle: (this.page_parms) ? this.page_parms + title : title,
+                                    viewId: this.page_config.viewId,
+                                    drillDownType: "context",
+                                    drilldownFrom: this.page_config.viewId,
+                                    drilldownTo: element.viewId,
+                                };
+                                this.onrightClickContextSelection.emit(rightclickData);
+                            }
+                        });
+                    }
+                });
+            }
         }
     }
 }
 GammaTableWithPercentageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GammaTableWithPercentageComponent, deps: [{ token: CommonService }, { token: i2$2.ToastrService }], target: i0.ɵɵFactoryTarget.Component });
-GammaTableWithPercentageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: GammaTableWithPercentageComponent, selector: "app-gamma-table-with-percentage", inputs: { chartDataSource: "chartDataSource" }, ngImport: i0, template: "<div class=\"mx-2 bg-gray-800\">\n    <ng-container *ngIf=\"isLoader\">\n        <div class=\"flex justify-center items-start bg-gray-800 p-2\">\n            <app-loader></app-loader>\n        </div>\n    </ng-container>\n\n    <div class=\"mx-2 pb-2\">\n        <ng-container *ngIf=\"!isLoader\">\n            <dx-data-grid [columnAutoWidth]=\"true\" [dataSource]=\"tableDataSource\" [selectedRowKeys]=\"[]\"\n                [showBorders]=\"true\" [showRowLines]=\"true\" id=\"gridContainer\" [height]=\"370\">\n                <dxo-search-panel [highlightCaseSensitive]=\"true\" [visible]=\"true\"></dxo-search-panel>\n                <dxo-export [enabled]=\"true\"></dxo-export>\n                <dxo-paging [pageSize]=\"7\"></dxo-paging>\n                <dxo-pager [showInfo]=\"true\" [showPageSizeSelector]=\"false\">\n                </dxo-pager>\n                <dxo-selection mode=\"single\"></dxo-selection>\n                <dxi-column dataField=\"eventType\"></dxi-column>\n                <dxi-column dataField=\"access_cost_sar\" cellTemplate=\"cellTemplate1\"></dxi-column>\n                <dxi-column dataField=\"margin_sar\" cellTemplate=\"cellTemplate2\"></dxi-column>\n                <dxi-column dataField=\"ict_cost_sar\" cellTemplate=\"cellTemplate3\"></dxi-column>\n                <dxi-column dataField=\"revenue\" cellTemplate=\"cellTemplate4\"></dxi-column>\n\n\n                <div *dxTemplate=\"let data of 'cellTemplate1'\">\n                    <div [innerHTML]=\"data.value | contentSafeHtml\"></div>\n                </div>\n                <div *dxTemplate=\"let data of 'cellTemplate2'\">\n                    <div [innerHTML]=\"data.value | contentSafeHtml\"></div>\n                </div>\n                <div *dxTemplate=\"let data of 'cellTemplate3'\">\n                    <div [innerHTML]=\"data.value | contentSafeHtml\"></div>\n                </div>\n                <div *dxTemplate=\"let data of 'cellTemplate4'\">\n                    <div [innerHTML]=\"data.value | contentSafeHtml\"></div>\n                </div>\n\n            </dx-data-grid>\n        </ng-container>\n\n    </div>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i6.DxoExportComponent, selector: "dxo-export", inputs: ["backgroundColor", "enabled", "fileName", "formats", "margin", "printingEnabled", "proxyUrl", "svgToCanvas", "allowExportSelectedData", "customizeExcelCell", "excelFilterEnabled", "excelWrapTextEnabled", "ignoreExcelErrors", "texts"] }, { kind: "component", type: i9.DxDataGridComponent, selector: "dx-data-grid", inputs: ["accessKey", "activeStateEnabled", "allowColumnReordering", "allowColumnResizing", "autoNavigateToFocusedRow", "cacheEnabled", "cellHintEnabled", "columnAutoWidth", "columnChooser", "columnFixing", "columnHidingEnabled", "columnMinWidth", "columnResizingMode", "columns", "columnWidth", "customizeColumns", "customizeExportData", "dataRowTemplate", "dataSource", "dateSerializationFormat", "disabled", "editing", "elementAttr", "errorRowEnabled", "export", "filterBuilder", "filterBuilderPopup", "filterPanel", "filterRow", "filterSyncEnabled", "filterValue", "focusedColumnIndex", "focusedRowEnabled", "focusedRowIndex", "focusedRowKey", "focusStateEnabled", "grouping", "groupPanel", "headerFilter", "height", "highlightChanges", "hint", "hoverStateEnabled", "keyboardNavigation", "keyExpr", "loadPanel", "masterDetail", "noDataText", "pager", "paging", "remoteOperations", "renderAsync", "repaintChangesOnly", "rowAlternationEnabled", "rowDragging", "rowTemplate", "rtlEnabled", "scrolling", "searchPanel", "selectedRowKeys", "selection", "selectionFilter", "showBorders", "showColumnHeaders", "showColumnLines", "showRowLines", "sortByGroupSummaryInfo", "sorting", "stateStoring", "summary", "syncLookupFilterValues", "tabIndex", "toolbar", "twoWayBindingEnabled", "visible", "width", "wordWrapEnabled"], outputs: ["onAdaptiveDetailRowPreparing", "onCellClick", "onCellDblClick", "onCellHoverChanged", "onCellPrepared", "onContentReady", "onContextMenuPreparing", "onDataErrorOccurred", "onDisposing", "onEditCanceled", "onEditCanceling", "onEditingStart", "onEditorPrepared", "onEditorPreparing", "onExported", "onExporting", "onFileSaving", "onFocusedCellChanged", "onFocusedCellChanging", "onFocusedRowChanged", "onFocusedRowChanging", "onInitialized", "onInitNewRow", "onKeyDown", "onOptionChanged", "onRowClick", "onRowCollapsed", "onRowCollapsing", "onRowDblClick", "onRowExpanded", "onRowExpanding", "onRowInserted", "onRowInserting", "onRowPrepared", "onRowRemoved", "onRowRemoving", "onRowUpdated", "onRowUpdating", "onRowValidating", "onSaved", "onSaving", "onSelectionChanged", "onToolbarPreparing", "accessKeyChange", "activeStateEnabledChange", "allowColumnReorderingChange", "allowColumnResizingChange", "autoNavigateToFocusedRowChange", "cacheEnabledChange", "cellHintEnabledChange", "columnAutoWidthChange", "columnChooserChange", "columnFixingChange", "columnHidingEnabledChange", "columnMinWidthChange", "columnResizingModeChange", "columnsChange", "columnWidthChange", "customizeColumnsChange", "customizeExportDataChange", "dataRowTemplateChange", "dataSourceChange", "dateSerializationFormatChange", "disabledChange", "editingChange", "elementAttrChange", "errorRowEnabledChange", "exportChange", "filterBuilderChange", "filterBuilderPopupChange", "filterPanelChange", "filterRowChange", "filterSyncEnabledChange", "filterValueChange", "focusedColumnIndexChange", "focusedRowEnabledChange", "focusedRowIndexChange", "focusedRowKeyChange", "focusStateEnabledChange", "groupingChange", "groupPanelChange", "headerFilterChange", "heightChange", "highlightChangesChange", "hintChange", "hoverStateEnabledChange", "keyboardNavigationChange", "keyExprChange", "loadPanelChange", "masterDetailChange", "noDataTextChange", "pagerChange", "pagingChange", "remoteOperationsChange", "renderAsyncChange", "repaintChangesOnlyChange", "rowAlternationEnabledChange", "rowDraggingChange", "rowTemplateChange", "rtlEnabledChange", "scrollingChange", "searchPanelChange", "selectedRowKeysChange", "selectionChange", "selectionFilterChange", "showBordersChange", "showColumnHeadersChange", "showColumnLinesChange", "showRowLinesChange", "sortByGroupSummaryInfoChange", "sortingChange", "stateStoringChange", "summaryChange", "syncLookupFilterValuesChange", "tabIndexChange", "toolbarChange", "twoWayBindingEnabledChange", "visibleChange", "widthChange", "wordWrapEnabledChange"] }, { kind: "component", type: i6.DxiColumnComponent, selector: "dxi-column", inputs: ["alignment", "allowEditing", "allowExporting", "allowFiltering", "allowFixing", "allowGrouping", "allowHeaderFiltering", "allowHiding", "allowReordering", "allowResizing", "allowSearch", "allowSorting", "autoExpandGroup", "buttons", "calculateCellValue", "calculateDisplayValue", "calculateFilterExpression", "calculateGroupValue", "calculateSortValue", "caption", "cellTemplate", "columns", "cssClass", "customizeText", "dataField", "dataType", "editCellTemplate", "editorOptions", "encodeHtml", "falseText", "filterOperations", "filterType", "filterValue", "filterValues", "fixed", "fixedPosition", "format", "formItem", "groupCellTemplate", "groupIndex", "headerCellTemplate", "headerFilter", "hidingPriority", "isBand", "lookup", "minWidth", "name", "ownerBand", "renderAsync", "selectedFilterOperation", "setCellValue", "showEditorAlways", "showInColumnChooser", "showWhenGrouped", "sortIndex", "sortingMethod", "sortOrder", "trueText", "type", "validationRules", "visible", "visibleIndex", "width"], outputs: ["filterValueChange", "filterValuesChange", "groupIndexChange", "selectedFilterOperationChange", "sortIndexChange", "sortOrderChange", "visibleChange", "visibleIndexChange"] }, { kind: "component", type: i6.DxoPagerComponent, selector: "dxo-pager", inputs: ["allowedPageSizes", "displayMode", "infoText", "showInfo", "showNavigationButtons", "showPageSizeSelector", "visible"] }, { kind: "component", type: i6.DxoPagingComponent, selector: "dxo-paging", inputs: ["enabled", "pageIndex", "pageSize"], outputs: ["pageIndexChange", "pageSizeChange"] }, { kind: "component", type: i6.DxoSearchPanelComponent, selector: "dxo-search-panel", inputs: ["highlightCaseSensitive", "highlightSearchText", "placeholder", "searchVisibleColumnsOnly", "text", "visible", "width"], outputs: ["textChange"] }, { kind: "component", type: i6.DxoSelectionComponent, selector: "dxo-selection", inputs: ["allowSelectAll", "deferred", "mode", "selectAllMode", "showCheckBoxesMode", "recursive"] }, { kind: "component", type: LoaderComponent, selector: "app-loader" }, { kind: "pipe", type: contentSafeHtml, name: "contentSafeHtml" }] });
+GammaTableWithPercentageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: GammaTableWithPercentageComponent, selector: "app-gamma-table-with-percentage", inputs: { rightClickEnable: "rightClickEnable", chartDataSource: "chartDataSource" }, outputs: { getTableConfigOutPut: "getTableConfigOutPut", oRowClick: "oRowClick", onrightClickContextSelection: "onrightClickContextSelection" }, ngImport: i0, template: "<!-- <div class=\"mx-2 bg-gray-800\">\n    <ng-container *ngIf=\"isLoader\">\n        <div class=\"flex justify-center items-start bg-gray-800 p-2\">\n            <app-loader></app-loader>\n        </div>\n    </ng-container>\n\n    <div class=\"mx-2 pb-2\">\n        <ng-container *ngIf=\"!isLoader\">\n            <dx-data-grid (onFileSaving)=\"downloadTableData($event)\" [dataSource]=\"percentageDataSource\"\n                (onRowClick)=\"onRowClick($event)\" [rowAlternationEnabled]=\"true\" [hoverStateEnabled]=\"true\"\n                [selectedRowKeys]=\"[]\" [showBorders]=\"true\" [showColumnLines]=\"true\" [showRowLines]=\"true\"\n                [showRowLines]=\"true\" id=\"gridContainer\" (onContextMenuPreparing)=\"addMenuItems($event)\">\n                <dxo-search-panel [highlightCaseSensitive]=\"true\"\n                    [visible]=\"tableConfig.searchPanel\"></dxo-search-panel>\n                <dxo-export [enabled]=\"true\" fileName=\"{{tableConfig.file_name}}\"></dxo-export>\n                <dxo-paging [pageSize]=\"tableConfig.numberOfRow\"></dxo-paging>\n                <dxo-pager [showInfo]=\"tableConfig.pageInfo\" [showPageSizeSelector]=\"true\"\n                    [allowedPageSizes]=\"tableConfig.allowedPageSizes\">\n                </dxo-pager>\n                <dxo-load-panel [enabled]=\"true\">\n                </dxo-load-panel>\n                <ng-container *ngFor=\"let item of argumentValue\">\n                    <dxi-column *ngIf=\"item.dataField == 'recordDate'\" dataField=\"{{ item.dataField }}\"\n                        [caption]=\"item.caption\" [visible]=\"item.visible\" sortOrder=\"desc\"></dxi-column>\n                    <dxi-column *ngIf=\"item.dataField !== 'recordDate'\" format=\"#,##0.##\"\n                        [sortingMethod]=\"commonService.customValueSorter\" [caption]=\"item.caption\"\n                        dataField=\"{{ item.dataField }}\" alignment=\"left\" [visible]=\"item.visible\">\n                    </dxi-column>\n                </ng-container>\n                <ng-container *ngFor=\"let item of dataConfig\">\n                    <dxi-column cellTemplate=\"{{ item.dataField }}\" dataField=\"{{ item.dataField }}\" alignment=\"right\"\n                        [sortingMethod]=\"commonService.customValueSorterForBar\"></dxi-column>\n                </ng-container>\n                <ng-container *ngFor=\"let item of dataConfig\">\n                    <div *dxTemplate=\"let data of  item.dataField\">\n                        <div [innerHTML]=\"data.value | contentSafeHtml\"></div>\n                    </div>\n                </ng-container>\n            </dx-data-grid>\n        </ng-container>\n\n    </div>\n</div> -->\n\n<div class=\"mx-2 bg-gray-800\">\n    <ng-container *ngIf=\"isLoader\">\n        <div class=\"flex justify-center items-start bg-gray-800 p-2\">\n            <app-loader></app-loader>\n        </div>\n    </ng-container>\n\n    <div class=\"mx-2 pb-2\">\n        <ng-container *ngIf=\"!isLoader\">\n            <dx-data-grid (onRowClick)=\"onRowClick($event)\" [dataSource]=\"percentageDataSource\"\n                (onContextMenuPreparing)=\"addMenuItems($event)\" [rowAlternationEnabled]=\"true\"\n                [hoverStateEnabled]=\"true\" [selectedRowKeys]=\"[]\" [showBorders]=\"true\" [showColumnLines]=\"true\"\n                [showRowLines]=\"true\" [showRowLines]=\"true\" id=\"gridContainer\"\n                [customizeExportData]=\"commonService.removeHtmlContentFromData\">\n                <dxo-search-panel [highlightCaseSensitive]=\"true\"\n                    [visible]=\"tableConfig.searchPanel\"></dxo-search-panel>\n                <dxo-export [enabled]=\"true\" fileName=\"{{tableConfig.file_name}}\"></dxo-export>\n                <dxo-paging [pageSize]=\"tableConfig.numberOfRow\"></dxo-paging>\n                <dxo-pager [showInfo]=\"tableConfig.pageInfo\" [showPageSizeSelector]=\"true\"\n                    [allowedPageSizes]=\"tableConfig.allowedPageSizes\">\n                </dxo-pager>\n                <dxo-load-panel [enabled]=\"true\">\n                </dxo-load-panel>\n                <ng-container *ngFor=\"let item of argumentValue\">\n                    <dxi-column *ngIf=\"item.dataField == 'recordDate'\" dataField=\"{{ item.dataField }}\"\n                        [caption]=\"item.caption\" [visible]=\"item.visible\" sortOrder=\"desc\"></dxi-column>\n                    <dxi-column *ngIf=\"item.dataField !== 'recordDate'\" format=\"#,##0.##\" [caption]=\"item.caption\"\n                        [sortingMethod]=\"commonService.customValueSorter\" dataField=\"{{ item.dataField }}\"\n                        alignment=\"left\" [visible]=\"item.visible\">\n                    </dxi-column>\n                </ng-container>\n                <ng-container *ngFor=\"let item of dataConfig\">\n                    <dxi-column cellTemplate=\"{{ item.dataField }}\" dataField=\"{{ item.dataField }}\" alignment=\"right\"\n                        [sortingMethod]=\"commonService.customValueSorterForBar\"></dxi-column>\n                </ng-container>\n                <ng-container *ngFor=\"let item of dataConfig\">\n                    <div *dxTemplate=\"let data of  item.dataField\">\n                        <div [innerHTML]=\"data.value | contentSafeHtml\"></div>\n                    </div>\n                </ng-container>\n            </dx-data-grid>\n        </ng-container>\n\n    </div>\n</div>\n\n<!-- (onFileSaving)=\"downloadTableData($event)\" -->", styles: [""], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i6.DxoExportComponent, selector: "dxo-export", inputs: ["backgroundColor", "enabled", "fileName", "formats", "margin", "printingEnabled", "proxyUrl", "svgToCanvas", "allowExportSelectedData", "customizeExcelCell", "excelFilterEnabled", "excelWrapTextEnabled", "ignoreExcelErrors", "texts"] }, { kind: "component", type: i9.DxDataGridComponent, selector: "dx-data-grid", inputs: ["accessKey", "activeStateEnabled", "allowColumnReordering", "allowColumnResizing", "autoNavigateToFocusedRow", "cacheEnabled", "cellHintEnabled", "columnAutoWidth", "columnChooser", "columnFixing", "columnHidingEnabled", "columnMinWidth", "columnResizingMode", "columns", "columnWidth", "customizeColumns", "customizeExportData", "dataRowTemplate", "dataSource", "dateSerializationFormat", "disabled", "editing", "elementAttr", "errorRowEnabled", "export", "filterBuilder", "filterBuilderPopup", "filterPanel", "filterRow", "filterSyncEnabled", "filterValue", "focusedColumnIndex", "focusedRowEnabled", "focusedRowIndex", "focusedRowKey", "focusStateEnabled", "grouping", "groupPanel", "headerFilter", "height", "highlightChanges", "hint", "hoverStateEnabled", "keyboardNavigation", "keyExpr", "loadPanel", "masterDetail", "noDataText", "pager", "paging", "remoteOperations", "renderAsync", "repaintChangesOnly", "rowAlternationEnabled", "rowDragging", "rowTemplate", "rtlEnabled", "scrolling", "searchPanel", "selectedRowKeys", "selection", "selectionFilter", "showBorders", "showColumnHeaders", "showColumnLines", "showRowLines", "sortByGroupSummaryInfo", "sorting", "stateStoring", "summary", "syncLookupFilterValues", "tabIndex", "toolbar", "twoWayBindingEnabled", "visible", "width", "wordWrapEnabled"], outputs: ["onAdaptiveDetailRowPreparing", "onCellClick", "onCellDblClick", "onCellHoverChanged", "onCellPrepared", "onContentReady", "onContextMenuPreparing", "onDataErrorOccurred", "onDisposing", "onEditCanceled", "onEditCanceling", "onEditingStart", "onEditorPrepared", "onEditorPreparing", "onExported", "onExporting", "onFileSaving", "onFocusedCellChanged", "onFocusedCellChanging", "onFocusedRowChanged", "onFocusedRowChanging", "onInitialized", "onInitNewRow", "onKeyDown", "onOptionChanged", "onRowClick", "onRowCollapsed", "onRowCollapsing", "onRowDblClick", "onRowExpanded", "onRowExpanding", "onRowInserted", "onRowInserting", "onRowPrepared", "onRowRemoved", "onRowRemoving", "onRowUpdated", "onRowUpdating", "onRowValidating", "onSaved", "onSaving", "onSelectionChanged", "onToolbarPreparing", "accessKeyChange", "activeStateEnabledChange", "allowColumnReorderingChange", "allowColumnResizingChange", "autoNavigateToFocusedRowChange", "cacheEnabledChange", "cellHintEnabledChange", "columnAutoWidthChange", "columnChooserChange", "columnFixingChange", "columnHidingEnabledChange", "columnMinWidthChange", "columnResizingModeChange", "columnsChange", "columnWidthChange", "customizeColumnsChange", "customizeExportDataChange", "dataRowTemplateChange", "dataSourceChange", "dateSerializationFormatChange", "disabledChange", "editingChange", "elementAttrChange", "errorRowEnabledChange", "exportChange", "filterBuilderChange", "filterBuilderPopupChange", "filterPanelChange", "filterRowChange", "filterSyncEnabledChange", "filterValueChange", "focusedColumnIndexChange", "focusedRowEnabledChange", "focusedRowIndexChange", "focusedRowKeyChange", "focusStateEnabledChange", "groupingChange", "groupPanelChange", "headerFilterChange", "heightChange", "highlightChangesChange", "hintChange", "hoverStateEnabledChange", "keyboardNavigationChange", "keyExprChange", "loadPanelChange", "masterDetailChange", "noDataTextChange", "pagerChange", "pagingChange", "remoteOperationsChange", "renderAsyncChange", "repaintChangesOnlyChange", "rowAlternationEnabledChange", "rowDraggingChange", "rowTemplateChange", "rtlEnabledChange", "scrollingChange", "searchPanelChange", "selectedRowKeysChange", "selectionChange", "selectionFilterChange", "showBordersChange", "showColumnHeadersChange", "showColumnLinesChange", "showRowLinesChange", "sortByGroupSummaryInfoChange", "sortingChange", "stateStoringChange", "summaryChange", "syncLookupFilterValuesChange", "tabIndexChange", "toolbarChange", "twoWayBindingEnabledChange", "visibleChange", "widthChange", "wordWrapEnabledChange"] }, { kind: "component", type: i6.DxiColumnComponent, selector: "dxi-column", inputs: ["alignment", "allowEditing", "allowExporting", "allowFiltering", "allowFixing", "allowGrouping", "allowHeaderFiltering", "allowHiding", "allowReordering", "allowResizing", "allowSearch", "allowSorting", "autoExpandGroup", "buttons", "calculateCellValue", "calculateDisplayValue", "calculateFilterExpression", "calculateGroupValue", "calculateSortValue", "caption", "cellTemplate", "columns", "cssClass", "customizeText", "dataField", "dataType", "editCellTemplate", "editorOptions", "encodeHtml", "falseText", "filterOperations", "filterType", "filterValue", "filterValues", "fixed", "fixedPosition", "format", "formItem", "groupCellTemplate", "groupIndex", "headerCellTemplate", "headerFilter", "hidingPriority", "isBand", "lookup", "minWidth", "name", "ownerBand", "renderAsync", "selectedFilterOperation", "setCellValue", "showEditorAlways", "showInColumnChooser", "showWhenGrouped", "sortIndex", "sortingMethod", "sortOrder", "trueText", "type", "validationRules", "visible", "visibleIndex", "width"], outputs: ["filterValueChange", "filterValuesChange", "groupIndexChange", "selectedFilterOperationChange", "sortIndexChange", "sortOrderChange", "visibleChange", "visibleIndexChange"] }, { kind: "component", type: i6.DxoLoadPanelComponent, selector: "dxo-load-panel", inputs: ["enabled", "height", "indicatorSrc", "shading", "shadingColor", "showIndicator", "showPane", "text", "width"] }, { kind: "component", type: i6.DxoPagerComponent, selector: "dxo-pager", inputs: ["allowedPageSizes", "displayMode", "infoText", "showInfo", "showNavigationButtons", "showPageSizeSelector", "visible"] }, { kind: "component", type: i6.DxoPagingComponent, selector: "dxo-paging", inputs: ["enabled", "pageIndex", "pageSize"], outputs: ["pageIndexChange", "pageSizeChange"] }, { kind: "component", type: i6.DxoSearchPanelComponent, selector: "dxo-search-panel", inputs: ["highlightCaseSensitive", "highlightSearchText", "placeholder", "searchVisibleColumnsOnly", "text", "visible", "width"], outputs: ["textChange"] }, { kind: "component", type: LoaderComponent, selector: "app-loader" }, { kind: "pipe", type: contentSafeHtml, name: "contentSafeHtml" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GammaTableWithPercentageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-gamma-table-with-percentage', template: "<div class=\"mx-2 bg-gray-800\">\n    <ng-container *ngIf=\"isLoader\">\n        <div class=\"flex justify-center items-start bg-gray-800 p-2\">\n            <app-loader></app-loader>\n        </div>\n    </ng-container>\n\n    <div class=\"mx-2 pb-2\">\n        <ng-container *ngIf=\"!isLoader\">\n            <dx-data-grid [columnAutoWidth]=\"true\" [dataSource]=\"tableDataSource\" [selectedRowKeys]=\"[]\"\n                [showBorders]=\"true\" [showRowLines]=\"true\" id=\"gridContainer\" [height]=\"370\">\n                <dxo-search-panel [highlightCaseSensitive]=\"true\" [visible]=\"true\"></dxo-search-panel>\n                <dxo-export [enabled]=\"true\"></dxo-export>\n                <dxo-paging [pageSize]=\"7\"></dxo-paging>\n                <dxo-pager [showInfo]=\"true\" [showPageSizeSelector]=\"false\">\n                </dxo-pager>\n                <dxo-selection mode=\"single\"></dxo-selection>\n                <dxi-column dataField=\"eventType\"></dxi-column>\n                <dxi-column dataField=\"access_cost_sar\" cellTemplate=\"cellTemplate1\"></dxi-column>\n                <dxi-column dataField=\"margin_sar\" cellTemplate=\"cellTemplate2\"></dxi-column>\n                <dxi-column dataField=\"ict_cost_sar\" cellTemplate=\"cellTemplate3\"></dxi-column>\n                <dxi-column dataField=\"revenue\" cellTemplate=\"cellTemplate4\"></dxi-column>\n\n\n                <div *dxTemplate=\"let data of 'cellTemplate1'\">\n                    <div [innerHTML]=\"data.value | contentSafeHtml\"></div>\n                </div>\n                <div *dxTemplate=\"let data of 'cellTemplate2'\">\n                    <div [innerHTML]=\"data.value | contentSafeHtml\"></div>\n                </div>\n                <div *dxTemplate=\"let data of 'cellTemplate3'\">\n                    <div [innerHTML]=\"data.value | contentSafeHtml\"></div>\n                </div>\n                <div *dxTemplate=\"let data of 'cellTemplate4'\">\n                    <div [innerHTML]=\"data.value | contentSafeHtml\"></div>\n                </div>\n\n            </dx-data-grid>\n        </ng-container>\n\n    </div>\n</div>" }]
-        }], ctorParameters: function () { return [{ type: CommonService }, { type: i2$2.ToastrService }]; }, propDecorators: { chartDataSource: [{
+            args: [{ selector: 'app-gamma-table-with-percentage', template: "<!-- <div class=\"mx-2 bg-gray-800\">\n    <ng-container *ngIf=\"isLoader\">\n        <div class=\"flex justify-center items-start bg-gray-800 p-2\">\n            <app-loader></app-loader>\n        </div>\n    </ng-container>\n\n    <div class=\"mx-2 pb-2\">\n        <ng-container *ngIf=\"!isLoader\">\n            <dx-data-grid (onFileSaving)=\"downloadTableData($event)\" [dataSource]=\"percentageDataSource\"\n                (onRowClick)=\"onRowClick($event)\" [rowAlternationEnabled]=\"true\" [hoverStateEnabled]=\"true\"\n                [selectedRowKeys]=\"[]\" [showBorders]=\"true\" [showColumnLines]=\"true\" [showRowLines]=\"true\"\n                [showRowLines]=\"true\" id=\"gridContainer\" (onContextMenuPreparing)=\"addMenuItems($event)\">\n                <dxo-search-panel [highlightCaseSensitive]=\"true\"\n                    [visible]=\"tableConfig.searchPanel\"></dxo-search-panel>\n                <dxo-export [enabled]=\"true\" fileName=\"{{tableConfig.file_name}}\"></dxo-export>\n                <dxo-paging [pageSize]=\"tableConfig.numberOfRow\"></dxo-paging>\n                <dxo-pager [showInfo]=\"tableConfig.pageInfo\" [showPageSizeSelector]=\"true\"\n                    [allowedPageSizes]=\"tableConfig.allowedPageSizes\">\n                </dxo-pager>\n                <dxo-load-panel [enabled]=\"true\">\n                </dxo-load-panel>\n                <ng-container *ngFor=\"let item of argumentValue\">\n                    <dxi-column *ngIf=\"item.dataField == 'recordDate'\" dataField=\"{{ item.dataField }}\"\n                        [caption]=\"item.caption\" [visible]=\"item.visible\" sortOrder=\"desc\"></dxi-column>\n                    <dxi-column *ngIf=\"item.dataField !== 'recordDate'\" format=\"#,##0.##\"\n                        [sortingMethod]=\"commonService.customValueSorter\" [caption]=\"item.caption\"\n                        dataField=\"{{ item.dataField }}\" alignment=\"left\" [visible]=\"item.visible\">\n                    </dxi-column>\n                </ng-container>\n                <ng-container *ngFor=\"let item of dataConfig\">\n                    <dxi-column cellTemplate=\"{{ item.dataField }}\" dataField=\"{{ item.dataField }}\" alignment=\"right\"\n                        [sortingMethod]=\"commonService.customValueSorterForBar\"></dxi-column>\n                </ng-container>\n                <ng-container *ngFor=\"let item of dataConfig\">\n                    <div *dxTemplate=\"let data of  item.dataField\">\n                        <div [innerHTML]=\"data.value | contentSafeHtml\"></div>\n                    </div>\n                </ng-container>\n            </dx-data-grid>\n        </ng-container>\n\n    </div>\n</div> -->\n\n<div class=\"mx-2 bg-gray-800\">\n    <ng-container *ngIf=\"isLoader\">\n        <div class=\"flex justify-center items-start bg-gray-800 p-2\">\n            <app-loader></app-loader>\n        </div>\n    </ng-container>\n\n    <div class=\"mx-2 pb-2\">\n        <ng-container *ngIf=\"!isLoader\">\n            <dx-data-grid (onRowClick)=\"onRowClick($event)\" [dataSource]=\"percentageDataSource\"\n                (onContextMenuPreparing)=\"addMenuItems($event)\" [rowAlternationEnabled]=\"true\"\n                [hoverStateEnabled]=\"true\" [selectedRowKeys]=\"[]\" [showBorders]=\"true\" [showColumnLines]=\"true\"\n                [showRowLines]=\"true\" [showRowLines]=\"true\" id=\"gridContainer\"\n                [customizeExportData]=\"commonService.removeHtmlContentFromData\">\n                <dxo-search-panel [highlightCaseSensitive]=\"true\"\n                    [visible]=\"tableConfig.searchPanel\"></dxo-search-panel>\n                <dxo-export [enabled]=\"true\" fileName=\"{{tableConfig.file_name}}\"></dxo-export>\n                <dxo-paging [pageSize]=\"tableConfig.numberOfRow\"></dxo-paging>\n                <dxo-pager [showInfo]=\"tableConfig.pageInfo\" [showPageSizeSelector]=\"true\"\n                    [allowedPageSizes]=\"tableConfig.allowedPageSizes\">\n                </dxo-pager>\n                <dxo-load-panel [enabled]=\"true\">\n                </dxo-load-panel>\n                <ng-container *ngFor=\"let item of argumentValue\">\n                    <dxi-column *ngIf=\"item.dataField == 'recordDate'\" dataField=\"{{ item.dataField }}\"\n                        [caption]=\"item.caption\" [visible]=\"item.visible\" sortOrder=\"desc\"></dxi-column>\n                    <dxi-column *ngIf=\"item.dataField !== 'recordDate'\" format=\"#,##0.##\" [caption]=\"item.caption\"\n                        [sortingMethod]=\"commonService.customValueSorter\" dataField=\"{{ item.dataField }}\"\n                        alignment=\"left\" [visible]=\"item.visible\">\n                    </dxi-column>\n                </ng-container>\n                <ng-container *ngFor=\"let item of dataConfig\">\n                    <dxi-column cellTemplate=\"{{ item.dataField }}\" dataField=\"{{ item.dataField }}\" alignment=\"right\"\n                        [sortingMethod]=\"commonService.customValueSorterForBar\"></dxi-column>\n                </ng-container>\n                <ng-container *ngFor=\"let item of dataConfig\">\n                    <div *dxTemplate=\"let data of  item.dataField\">\n                        <div [innerHTML]=\"data.value | contentSafeHtml\"></div>\n                    </div>\n                </ng-container>\n            </dx-data-grid>\n        </ng-container>\n\n    </div>\n</div>\n\n<!-- (onFileSaving)=\"downloadTableData($event)\" -->" }]
+        }], ctorParameters: function () { return [{ type: CommonService }, { type: i2$2.ToastrService }]; }, propDecorators: { getTableConfigOutPut: [{
+                type: Output
+            }], oRowClick: [{
+                type: Output
+            }], onrightClickContextSelection: [{
+                type: Output
+            }], rightClickEnable: [{
+                type: Input
+            }], chartDataSource: [{
                 type: Input,
                 args: ['chartDataSource']
             }] } });
@@ -8415,7 +8401,7 @@ class ApplicationDatssetsCall {
                 let resultObj = {
                     columnName: filterKey,
                     dataType: "string",
-                    operator: filterKey,
+                    operator: "eq",
                     value: filter[filterKey]
                 };
                 if (Array.isArray(filter[filterKey])) {
@@ -8571,7 +8557,7 @@ class ApplicationDatssetsCall {
                 let resultObj = {
                     columnName: filterKey,
                     dataType: "string",
-                    operator: filterKey,
+                    operator: "eq",
                     value: filter[filterKey]
                 };
                 if (Array.isArray(filter[filterKey])) {
@@ -9083,6 +9069,12 @@ class CreateDatasetComponent {
                     else if (data.datasetType == 'simpleApi') {
                         this.restApiDataset = data.config;
                     }
+                    else if (data.datasetType == 'sqlQuery') {
+                        this.sqlApiDataset = data.config;
+                    }
+                    else if (data.datasetType == 'plainjson') {
+                        this.jsonDataset = data.config;
+                    }
                 }, error: (err) => {
                     this.loadingModal = false;
                     this.toastr.error('Unexpected Server Exception. Please contact System Admin.', 'Dataset Creation');
@@ -9200,9 +9192,6 @@ class CreateDatasetComponent {
                 this.isDuplidateView = false;
                 this.loadingModal = false;
                 this.toastr.success('Dataset Created Successfully');
-                if (this.isHeader) {
-                    this.router.navigate(['apps/controlPanel/applicationDataset/']);
-                }
             }, error: (err) => {
                 this.toastr.error('Unexpected Server Exception. Please contact System Admin.', 'Dataset Creation');
             }
@@ -9213,9 +9202,6 @@ class CreateDatasetComponent {
             next: (data) => {
                 this.loadingModal = false;
                 this.toastr.success('Dataset Updated Successfully');
-                if (this.isHeader) {
-                    this.router.navigate(['apps/controlPanel/applicationDataset/']);
-                }
             }, error: (err) => {
                 this.toastr.error('Unexpected Server Exception. Please contact System Admin.', 'Dataset Creation');
             }
@@ -9712,13 +9698,14 @@ class PageConfigComponent {
     createDivElements(datasetById) {
         const container = this.dynamicContainer.nativeElement;
         container.innerHTML = "";
+        const context_filter = this.dashBoardWidgetConfig.filters ? this.dashBoardWidgetConfig.filters.filterItems : null;
         this.dashBoardWidgetConfig.widgets.forEach(async (div) => {
             const rowDiv = document.createElement('div');
             let w_height = (div.widgetProperties.height == "") ? "h-auto" : 'h-[' + div.widgetProperties.height + ']';
             rowDiv.classList.add(div.widgetProperties.width, w_height, 'border');
             const filterDiv = document.createElement('div');
             const filterItems = (div.filters) ? div.filters.filterItems : [];
-            this.loadFilterComponent(div, filterDiv, filterItems);
+            this.loadFilterComponent(div, filterDiv, filterItems, context_filter);
             rowDiv.appendChild(filterDiv);
             if (div.widgetNode && div.widgetNode.length && div.widgetNode.length != 0) {
                 const mainItemDiv = document.createElement('div');
@@ -9901,13 +9888,14 @@ class PageConfigComponent {
         this.CompRefs.location.nativeElement.classList.add(cssClass);
         containerElement.appendChild(this.CompRefs.location.nativeElement);
     }
-    loadFilterComponent(indexObj, containerElement, filterItems) {
+    loadFilterComponent(indexObj, containerElement, filterItems, context_filter) {
         let selectedDates = { startDate: this.defaultStartDate, endDate: this.defaultEndDate };
         const componentClass = this.componentClassMap['AppAdvanceHeaderComponent'];
         this.CompRefs = this.viewContainerRef.createComponent(componentClass);
         const dynamicComponentInstance = this.CompRefs.instance;
         dynamicComponentInstance.selectedDates = selectedDates;
         dynamicComponentInstance.filterItems = filterItems;
+        dynamicComponentInstance.contextFilterItems = context_filter;
         dynamicComponentInstance.pageTitle = this.pageTitle;
         dynamicComponentInstance.isEditButton = false;
         dynamicComponentInstance.isAdvanceButton = true;
@@ -10179,7 +10167,7 @@ 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: i2$2.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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i5.DxCheckBoxComponent, selector: "dx-check-box", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "iconSize", "isValid", "name", "readOnly", "rtlEnabled", "tabIndex", "text", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "visible", "width"], outputs: ["onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconSizeChange", "isValidChange", "nameChange", "readOnlyChange", "rtlEnabledChange", "tabIndexChange", "textChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "component", type: i4$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: i9$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: i11.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: i2$1.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\">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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i5.DxCheckBoxComponent, selector: "dx-check-box", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "iconSize", "isValid", "name", "readOnly", "rtlEnabled", "tabIndex", "text", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "visible", "width"], outputs: ["onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconSizeChange", "isValidChange", "nameChange", "readOnlyChange", "rtlEnabledChange", "tabIndexChange", "textChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "component", type: i4$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.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: i11.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: i2$1.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"] }]
@@ -10238,9 +10226,11 @@ class PageControlerComponent {
         this.templateDataSource = [];
         this.componentTemplates = [
             { "compName": "KpiWithDataSetTestComponent", "item": "Default KPI Layout" },
+            { "compName": "KpiWithMultilayoutSetTestComponent", "item": "Multiple Layout KPI" },
             { "compName": "LandingComponentComponent", "item": "Default Page" },
             { "compName": "CdrConfigComponent", "item": "CDR Config" },
             { "compName": "CreateKpiTreeComponent", "item": "Create KPI Config" },
+            { "compName": "CreateMetricsComponent", "item": "Create Metrics" },
         ];
     }
     ngOnInit() {
@@ -10351,7 +10341,12 @@ class PageControlerComponent {
                 'contentType': "edit",
             }
         };
-        this.router.navigate(['/apps/controlPanel/pageConfigController'], navigation);
+        if (item.pageTemplate == "KpiWithMultilayoutSetTestComponent") {
+            this.router.navigate(['/apps/controlPanel/multiPageConfigController'], navigation);
+        }
+        else {
+            this.router.navigate(['/apps/controlPanel/pageConfigController'], navigation);
+        }
     }
     getCreateDashboard() {
         this.router.navigateByUrl('/apps/controlPanel/pageConfigController');
@@ -10742,31 +10737,985 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             args: [{ selector: 'lib-application-create-menu', template: "<div class=\"flex flex-col flex-auto min-w-0\">\n\n    <lib-common-header [pageTitle]=\"'Add Menu'\"></lib-common-header>\n\n    <div class=\"p-4 w-full\">\n        <div class=\"m-3 p-4 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700\">\n            <h6 class=\"mb-2 text-lg tracking-tight text-gray-900\n                dark:text-white border-b pb-3 flex items-center\">\n                Basic Information\n                <div class=\"ml-auto\">\n                    \n                </div>\n            </h6>\n\n            <div class=\"w-full m-2\">\n                <div class=\"flex flex-row\">\n                    <div class=\"mx-2 w-1/3\">\n                        <div class=\"text-md p-2 capitalize\">Menu Type</div>\n                        <div class=\"\">\n                            <dx-select-box [items]=\"['child','parent']\" [(ngModel)]=\"menuObject.menuType\"\n                                (onValueChanged)=\"getMenuType($event)\"></dx-select-box>\n                        </div>\n                    </div>\n                    <div class=\"mx-2 w-1/3\" *ngIf=\"menuObject.menuType == 'child'\">\n                        <div class=\"text-md p-2 capitalize\">Parent Menu</div>\n                        <div class=\"\">\n                            <dx-select-box [dataSource]=\"paparentMenuDatasource\" valueExpr=\"tid\" displayExpr=\"title\"\n                                [(ngModel)]=\"menuObject.parentMenuTid\"></dx-select-box>\n                        </div>\n                    </div>\n                    <div class=\"mx-2 w-1/3\" *ngIf=\"menuObject.menuType == 'child'\">\n                        <div class=\"text-md p-2 capitalize\">Child Menu TID</div>\n                        <div class=\"\">\n                            <dx-text-box [(ngModel)]=\"menuObject.childMenuTid\"\n                                [value]=\"menuObject.parentMenuTid\"></dx-text-box>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n\n    <ng-container *ngIf=\"ismenuContainer\">\n        <div class=\"p-4 w-full\">\n            <div\n                class=\"m-3 p-4 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700\">\n                <h6 class=\"mb-2 text-lg tracking-tight text-gray-900\n                dark:text-white border-b pb-3 flex items-center\">\n                Item Information\n                    <div class=\"ml-auto\">\n                        \n                    </div>\n                </h6>\n\n                <div class=\"w-full m-2\">\n                    <div class=\"flex flex-row\">\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">Menu ID</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"menuObject.menuId\"></dx-text-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">Title</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"menuObject.title\"></dx-text-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">subtitle</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"menuObject.subtitle\"></dx-text-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">Type</div>\n                            <div class=\"\">\n                                <dx-select-box [items]=\"['aside','basic','collapsable','divider','group','spacer']\"\n                                    [(ngModel)]=\"menuObject.type\"></dx-select-box>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"flex flex-row mt-2\">\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">tooltip</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"menuObject.tooltip\"></dx-text-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">link</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"menuObject.link\"></dx-text-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">fragment</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"menuObject.fragment\"></dx-text-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">target</div>\n                            <div class=\"\">\n                                <dx-select-box [items]=\"['_blank','_self','_parent','_top']\"\n                                    [(ngModel)]=\"menuObject.target\"></dx-select-box>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"flex flex-row mt-2\">\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">preserveFragment</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"menuObject.preserveFragment\"></dx-text-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">queryParams</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"menuObject.queryParams\"></dx-text-box>\n                            </div>\n                        </div>\n\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"text-md p-2 capitalize\">icon</div>\n                            <div class=\"\">\n                                <dx-text-box [(ngModel)]=\"menuObject.icon\"></dx-text-box>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"flex flex-row mt-2\">\n\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"m-10\">\n                                <dx-check-box [(ngModel)]=\"menuObject.children\" text=\"Children\"></dx-check-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n\n                            <div class=\"mt-10\">\n                                <dx-check-box [(ngModel)]=\"menuObject.externalLink\" text=\"External Link\"></dx-check-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"mt-10\">\n                                <dx-check-box [(ngModel)]=\"menuObject.active\" text=\"Active\"></dx-check-box>\n                            </div>\n                        </div>\n                        <div class=\"mx-2 w-full\">\n                            <div class=\"mt-10\">\n                                <dx-check-box [(ngModel)]=\"menuObject.disabled\" text=\"Disabled\"></dx-check-box>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n\n            </div>\n        </div>\n\n\n        <div class=\"p-4 w-full\">\n            <div\n                class=\"m-3 p-4 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700\">\n                <h6 class=\"mb-2 text-lg tracking-tight text-gray-900\n                dark:text-white border-b pb-3 flex items-center\">\n                User Information\n                    <div class=\"ml-auto\">\n                        <div class=\"{{commonservice.btn_primary_md}}\" (click)=\"addNewUser()\">ADD User</div>\n                    </div>\n                </h6>\n\n                <div class=\"w-full m-2\">\n                    <ng-container *ngFor=\"let item of userOptionContainer; let i = index\">\n                        <div class=\"flex flex-row\">\n                            <div class=\"mx-2 w-1/4\">\n                                <div class=\"text-md p-2 capitalize\">accessible users</div>\n                                <div class=\"\">\n                                    <dx-text-box [(ngModel)]=\"item.userName\"></dx-text-box>\n                                </div>\n                            </div>\n                            <div class=\"mx-2 w-1/4\">\n                                <div class=\"text-md p-2 capitalize\">User Permissions</div>\n                                <div class=\"\">\n                                    <dx-select-box [items]=\"['project.owner','project.editor','project.viewer']\"\n                                        [(ngModel)]=\"item.permissions\"></dx-select-box>\n                                </div>\n                            </div>\n                            <div class=\"mx-2\">\n                                <div class=\"text-md p-2 capitalize\"></div>\n                                <div class=\"mt-4\">\n                                    <div class=\"{{commonservice.btn_danger_md}}\" (click)=\"deleteUser(i)\">Delete</div>\n                                </div>\n                            </div>\n                        </div>\n                    </ng-container>\n\n                    <div class=\"flex flex-row justify-end mt-4 border-t mt-8 py-4\">\n                        <div class=\"{{commonservice.btn_success_md}}\" (click)=\"submitNewMenu()\">Create Menu</div>\n                    </div>\n\n                </div>\n            </div>\n        </div>\n    </ng-container>\n</div>" }]
         }], ctorParameters: function () { return [{ type: CommonService }]; } });
 
-const appRoutes = [
-    {
-        path: '',
-        redirectTo: 'applicationDataset',
-        pathMatch: 'full'
-    },
-    {
-        path: 'applicationDataset',
-        component: ApplicationDatasetComponent,
-    },
-    {
-        path: 'applicationViews',
-        component: ApplicationViewsComponent,
-    },
-    {
-        path: 'applicationFilter',
-        component: ApplicationFilterComponent,
-    },
-    {
-        path: 'applicationDashboard',
-        component: PageControlerComponent,
-    },
-    {
-        path: 'pageConfigController',
-        component: PageConfigComponent,
+class PageConfigMultilayoutComponent {
+    constructor(commonService, activatedRoute, viewContainerRef, componentFactoryResolver, service, toastr, router, datasetService) {
+        this.commonService = commonService;
+        this.activatedRoute = activatedRoute;
+        this.viewContainerRef = viewContainerRef;
+        this.componentFactoryResolver = componentFactoryResolver;
+        this.service = service;
+        this.toastr = toastr;
+        this.router = router;
+        this.datasetService = datasetService;
+        this.dashbord_container = [];
+        this.widget_width = ['w-full', 'w-1/2', 'w-1/3', 'w-2/3', 'w-1/4', 'w-3/4', 'w-1/5', 'w-4/5', 'w-1/6', 'w-5/6'];
+        this.loadingModal = true;
+        this.page_title = 'Dashboard';
+        this.isToggleSwich = true;
+        this.isDatePicker = false;
+        this.isToggleEventStatus = false;
+        this.isEditClick = false;
+        this.isUpdateWidget = false;
+        this.dynamicComponentRefs = [];
+        this.componentClassMap = {
+            GammaAdvanceChartComponent,
+            GammaTodayPreviousComponent,
+            AppAdvanceHeaderComponent,
+            GammaTableWithPercentageComponent,
+            GammSingleNumberCardComponent,
+            GammaAdvanceOperatorTableComponent,
+            AdvanceWidgetHeaderFilterComponent,
+            GammaGeoChartComponent
+        };
+        this.dataSourceMataData = [];
+        this.queryType = "mongo";
+        this.dataSetModal = [];
+        this.componentConfigDataSource = [];
+        this.dataSourceModal = {};
+        this.isDashBoardContent = false;
+        this.selectedViewFormComponent = {};
+        this.addedwidGetConfig = {
+            "display": true,
+            "widgetTitle": "",
+            "width": "",
+            "height": "",
+            "isWidgetFilter": false
+        };
+        this.dashBoardWidgetConfig = [];
+        this.selectedIndexObjForChart = {};
+        this.selectedContainerObjectForChart = {};
+        this.uniqueDataSetObject = {};
+        this.islayoutCreate = false;
+        this.isDefaultView = true;
+        this.viewToSearch = '';
+        this.filteredComponentConfig = [];
+        this.editViewdataSourceModal = {};
+        this.editItemForUpdate = {};
+        this.allWidgetByDataset = [];
+        this.nodeProperticeFilters = [];
+        this.selectedFilterDatasource = {};
+        this.selectedViewsIds = [];
+        this.advanceLayoutContainer = [];
+    }
+    ngOnInit() {
+        this.isDashBoardContentTypeView = (this.activatedRoute.snapshot.queryParams['contentType'] == 'view') ? true : false;
+        this.pageId = this.activatedRoute.snapshot.queryParams['pageId'];
+        this.getDataSet();
+        this.defaultStartDate = moment().subtract('10', 'days').format('YYYY-MM-DD');
+        this.defaultEndDate = moment().subtract('1', 'days').format('YYYY-MM-DD');
+        this.getFilterItems();
+        this.getAllViewsItems();
+        this.getAppPageDetailConfigByPageId();
+    }
+    getAllViewsItems() {
+        this.service.getAppViewConfigs().subscribe({
+            next: (data) => {
+                this.componentConfigDataSource = data;
+                this.filteredComponentConfig = this.componentConfigDataSource;
+            }, error: (err) => {
+                this.toastr.error('Unexpected Server Exception. Please contact System Admin.', 'View Config');
+            }
+        });
+    }
+    getFilterItems() {
+        this.service.getAppFilterConfigs().subscribe({
+            next: (data) => {
+                this.filterDataSource = data;
+            }, error: (err) => {
+                this.toastr.error('Unexpected Server Exception. Please contact System Admin.', 'Error');
+            }
+        });
+    }
+    getAppPageDetailConfigByPageId() {
+        this.service.getAppPageDetailConfig(this.pageId).subscribe({
+            next: (data) => {
+                this.dashBoardWidgetConfig = data;
+                this.pageTitle = data.pageName;
+                this.pageUrl = data.pageUrl;
+                if (data.widgets && data.widgets.length !== 0) {
+                    this.getComponentConfigSet();
+                }
+                else {
+                    this.loadingModal = false;
+                }
+            },
+            error: (err) => {
+                this.toastr.error('Unexpected Server Exception. Please contact System Admin.', 'Error');
+            }
+        });
+    }
+    getComponentConfigSet() {
+        let defaultFilters = { operationFilter: { startDate: "", endDate: "" } };
+        this.dashBoardWidgetConfig.widgets.forEach(widget => {
+            if (widget.filters) {
+                widget.filters.filterItems.forEach(element => {
+                    if (element.filterType === 'date' || element.filterType === 'datetime') {
+                        if (element.defaultFilterType === "dynamic" && element.momentFunction !== "" && element.defaultFilterValue !== "" && element.momentFormat !== "") {
+                            let [count, unit] = element.defaultFilterValue.split(',');
+                            if (element.apiName === "endDate") {
+                                if (element.display) {
+                                    defaultFilters.operationFilter.endDate = moment()[element.momentFunction](parseInt(count), unit).format(element.momentFormat);
+                                    this.defaultEndDate = moment()[element.momentFunction](parseInt(count), unit).format(element.momentFormat);
+                                }
+                            }
+                            if (element.apiName === "startDate") {
+                                defaultFilters.operationFilter.startDate = moment()[element.momentFunction](parseInt(count), unit).format(element.momentFormat);
+                            }
+                        }
+                        else if (element.defaultFilterType === "static" && element.defaultFilterValue !== "") {
+                            if (element.apiName === "endDate") {
+                                if (element.display) {
+                                    defaultFilters.operationFilter.endDate = element.defaultFilterValue;
+                                    this.defaultEndDate = element.defaultFilterValue;
+                                }
+                            }
+                            if (element.apiName === "startDate") {
+                                defaultFilters.operationFilter.startDate = element.defaultFilterValue;
+                                this.defaultStartDate = element.defaultFilterValue;
+                            }
+                        }
+                    }
+                    else {
+                        if ((typeof element.filterDataSourceValue === "string" && element.filterDataSourceValue !== "") ||
+                            (Array.isArray(element.filterDataSourceValue) && element.filterDataSourceValue.length > 0)) {
+                            if (element.operatorName !== "") {
+                                defaultFilters.operationFilter[element.operatorName] = Array.isArray(element.filterDataSourceValue)
+                                    ? element.filterDataSourceValue
+                                    : [element.filterDataSourceValue];
+                            }
+                            else {
+                                defaultFilters.operationFilter[element.apiName] = element.filterDataSourceValue.join(",");
+                            }
+                        }
+                    }
+                });
+            }
+        });
+        let apiCalls = [];
+        this.defaultApplyedFilter = defaultFilters;
+        Promise.all(apiCalls).then(() => {
+            this.createDivElements(this.uniqueDataSetObject);
+            this.loadingModal = false;
+        });
+    }
+    ngOnDestroy() {
+    }
+    getDataSet() {
+        this.isLoader = true;
+        this.service.getAppDatasetConfigs().subscribe({
+            next: (data) => {
+                this.dataSettableDataSource = data;
+                this.isLoader = false;
+            }, error: (err) => {
+                this.toastr.error('Unexpected Server Exception. Please contact System Admin.', 'Dataset Creation');
+            }
+        });
+    }
+    getComponentConfig(event) {
+        const foundObject = this.componentConfigDataSource.find(view => view.viewId === event.viewId);
+        this.getEmitNewChartConfig(foundObject);
+        this.loadingModal = true;
+    }
+    addNewchart() {
+        this.isGenerate = false;
+        this.isChartButtonClick = true;
+        this.isWidgetCreationContent = false;
+        this.isDefaultView = false;
+    }
+    addWidget() {
+        this.newWidgetIndex = undefined;
+        this.isWidgetCreationContent = true;
+        this.isDefaultView = false;
+        this.isEditMainLayout = false;
+        this.isChartButtonClick = false;
+        this.isUpdateWidget = false;
+        this.widgetName = '';
+        this.widgetTitle = '';
+        this.addedwidGetConfig = {
+            "display": true,
+            "widgetTitle": "",
+            "width": "",
+            "height": "",
+            "isWidgetFilter": false
+        };
+    }
+    getWith(e) {
+        this.selectedWidth = e.value;
+    }
+    getHeight(e) {
+        this.selectedHeight = e.value;
+    }
+    addLayoutTOview() {
+        let inner_node = {
+            id: this.commonService.primeryRendomeId(5),
+            nodeTitle: "",
+            filterId: this.selectedFilterId,
+            nodeProperties: this.addedwidGetConfig,
+            compConfig: {
+                dynamicComponentRefs: [],
+                viewConfig: []
+            },
+        };
+        if (this.dashBoardWidgetConfig.widgets[this.newWidgetIndex].widgetNode) {
+            this.dashBoardWidgetConfig.widgets[this.newWidgetIndex].widgetNode.push(inner_node);
+        }
+        else {
+            this.dashBoardWidgetConfig.widgets[this.newWidgetIndex].widgetNode = [];
+            this.dashBoardWidgetConfig.widgets[this.newWidgetIndex].widgetNode.push(inner_node);
+        }
+        this.loadingModal = true;
+        this.updateWidget();
+    }
+    reformatWidgetConfig(dashBoardWidgetConfig, index = null) {
+        const processWidget = (widget) => {
+            widget.compConfig.viewConfig = widget.compConfig.viewConfig.map(config => config.viewId);
+            widget.compConfig.dynamicComponentRefs = [];
+            if (widget.widgetNode && widget.widgetNode.length > 0) {
+                widget.widgetNode.forEach(node => {
+                    node.compConfig.viewConfig = node.compConfig.viewConfig.map(config => config.viewId);
+                    node.compConfig.dynamicComponentRefs = [];
+                });
+            }
+        };
+        if (index !== null && index >= 0 && index < dashBoardWidgetConfig.widgets.length) {
+            processWidget(dashBoardWidgetConfig.widgets[index]);
+        }
+        else {
+            dashBoardWidgetConfig.widgets.forEach(widget => processWidget(widget));
+        }
+        return dashBoardWidgetConfig.widgets[index];
+    }
+    updateWidget() {
+        let modifiedConfig = this.reformatWidgetConfig(this.dashBoardWidgetConfig, this.newWidgetIndex);
+        modifiedConfig['filterId'] = (modifiedConfig.filters && modifiedConfig.filters.filterId) ? modifiedConfig.filters.filterId : null;
+        delete modifiedConfig['filters'];
+        this.service.editAppWidgetConfig(modifiedConfig).subscribe({
+            next: (data) => {
+                this.getAppPageDetailConfigByPageId();
+                this.backToMainView();
+            }, error: (err) => {
+                this.loadingModal = false;
+                this.toastr.error('Unexpected Server Exception. Please contact System Admin.', 'Widget Creation');
+            }
+        });
+        this.newWidgetIndex = undefined;
+        this.isWidgetCreationContent = false;
+        this.isDefaultView = true;
+    }
+    updateLayoutWidgetTOview() {
+        this.loadingModal = true;
+        this.updateWidget();
+    }
+    addWidgetTOview() {
+        let obj = {
+            widgetId: this.commonService.primeryRendomeId(5),
+            widgetName: this.widgetName,
+            widgetTitle: this.widgetTitle,
+            widgetProperties: this.addedwidGetConfig,
+            pageId: this.pageId,
+            filterId: this.selectedFilterId,
+            widgetNode: [],
+            compConfig: {
+                dynamicComponentRefs: [],
+                viewConfig: []
+            },
+        };
+        this.loadingModal = true;
+        this.service.createAppWidgetConfig(obj).subscribe({
+            next: (data) => {
+                this.loadingModal = false;
+                this.getAppPageDetailConfigByPageId();
+            }, error: (err) => {
+                this.loadingModal = false;
+                this.toastr.error('Unexpected Server Exception. Please contact System Admin.', 'Widget Creation');
+            }
+        });
+        this.dashBoardWidgetConfig.widgets.push(obj);
+        this.dynamicContainer.nativeElement.innerHTML = '';
+        this.isWidgetCreationContent = false;
+        this.isDefaultView = true;
+    }
+    insertNewWiget(index) {
+        this.addedwidGetConfig = {
+            "display": true,
+            "widgetTitle": "",
+            "width": "",
+            "height": "",
+            "isWidgetFilter": false
+        };
+        this.isUpdateWidget = false;
+        this.isWidgetCreationContent = true;
+        this.isDefaultView = false;
+        this.isChartButtonClick = false;
+        this.islayoutCreate = true;
+        this.newWidgetIndex = index;
+    }
+    insertChartWiget(indexObj, containerElement) {
+        this.isGenerate = false;
+        this.isChartButtonClick = true;
+        this.isWidgetCreationContent = false;
+        this.isDefaultView = false;
+        this.selectedContainerObjectForChart = containerElement;
+        this.selectedIndexObjForChart = indexObj;
+        this.selectedViewFormComponent = {};
+    }
+    async getEmitNewChartConfig(data) {
+        this.selectedIndexObjForChart.compConfig.viewConfig.push(data);
+        this.loadDynamicComponent(data, this.selectedIndexObjForChart, this.selectedContainerObjectForChart);
+        console.log(this.dashBoardWidgetConfig);
+        this.updateWidget();
+        this.loadingModal = false;
+        this.isChartButtonClick = false;
+    }
+    updateToView() {
+        this.loadingModal = true;
+        this.updateWidget();
+    }
+    deleteWidget(item, index) {
+        this.dashBoardWidgetConfig.widgets.splice(index, 1);
+        this.newWidgetIndex = undefined;
+    }
+    deleteInsertWidget(item, childIndex, parentIndex) {
+        this.dashBoardWidgetConfig.widgets[parentIndex].widgetNode.splice(childIndex, 1);
+        this.newWidgetIndex = undefined;
+    }
+    getWidgetTitleDiv(item, div) {
+        const widgetDiv = document.createElement('div');
+        widgetDiv.classList.add('flex', 'items-center', 'justify-between', 'font-bold', 'text-md', 'text-gray-900', 'dark:text-white', 'border-b', 'p-3', 'bg-gray-800', 'mx-2', 'rounded-t-lg');
+        const titleDiv = document.createElement('div');
+        titleDiv.innerText = (item.nodeProperties) ? item.nodeProperties.widgetTitle : "";
+        widgetDiv.append(titleDiv);
+        const editIcon = document.createElement('i');
+        editIcon.classList.add('fa', 'fa-pencil', 'ml-2', 'cursor-pointer', 'text-blue-400', 'hover:text-blue-700');
+        widgetDiv.append(editIcon);
+        if (item.nodeProperties.isWidgetFilter) {
+            const searchContainerDiv = document.createElement('div');
+            searchContainerDiv.classList.add('flex', 'items-center', 'space-x-2');
+            const searchButton = document.createElement('button');
+            searchButton.innerText = 'Filter';
+            searchButton.classList.add('px-3', 'py-1.5', 'bg-blue-600', 'mr-2', 'text-white', 'rounded', 'hover:bg-blue-700');
+            this.nodeproperticeFilterDataSource = [];
+            searchButton.addEventListener('click', () => {
+                this.isWidgetFilters = true;
+                let filtePropertice = [];
+                item.compConfig.viewConfig.forEach(element => {
+                    let key_name = this.uniqueDataSetObject[element.datasetId][0];
+                    Object.keys(key_name).forEach(key => {
+                        if (!filtePropertice.includes(key)) {
+                            filtePropertice.push(key);
+                        }
+                    });
+                });
+                filtePropertice.forEach(element => {
+                    let obj = {
+                        columnName: element,
+                        dataType: "float",
+                        operator: "",
+                        value: "",
+                    };
+                    this.nodeproperticeFilterDataSource.push(obj);
+                });
+            });
+            searchContainerDiv.appendChild(searchButton);
+            widgetDiv.appendChild(titleDiv);
+            widgetDiv.appendChild(searchContainerDiv);
+        }
+        if (item.filterId) {
+            this.nodeproperticeFilterDataSource = {};
+            this.nodeproperticeFilterDataSource['viewConfig'] = item;
+            this.nodeproperticeFilterDataSource['havingConfig'] = [];
+            this.service.getAppFilterConfig(item.filterId).subscribe({
+                next: (data) => {
+                    const filterDiv = document.createElement('div');
+                    this.loadWidgetFilterComponent(item, widgetDiv, data.filterItems);
+                }, error: (err) => {
+                }
+            });
+        }
+        if (item.nodeProperties.nodefilters && item.nodeProperties.nodefilters.length !== 0) {
+            const searchContainerDiv = document.createElement('div');
+            searchContainerDiv.classList.add('flex', 'items-center', 'space-x-2');
+            item.nodeProperties.nodefilters.forEach(filter => {
+                const filterDiv = document.createElement('div');
+                filterDiv.classList.add('flex', 'items-center');
+                if (filter.input_type === 'text') {
+                    const textBox = document.createElement('input');
+                    textBox.type = 'text';
+                    textBox.placeholder = `Enter ${filter.local_column}`;
+                    textBox.classList.add('px-2', 'py-1.5', 'rounded', 'border', 'mr-1', 'border-gray-500', 'text-gray-900', 'dark:bg-gray-700', 'dark:text-white');
+                    const searchButton = document.createElement('button');
+                    searchButton.innerText = 'Search';
+                    searchButton.classList.add('px-3', 'py-1.5', 'bg-blue-600', 'mr-2', 'text-white', 'rounded', 'hover:bg-blue-700');
+                    const separerotButton = document.createElement('div');
+                    separerotButton.innerHTML = '|';
+                    searchButton.addEventListener('click', () => {
+                        const searchTerm = textBox.value;
+                        console.log('Text search button clicked with:', searchTerm);
+                    });
+                    filterDiv.appendChild(textBox);
+                    filterDiv.appendChild(searchButton);
+                    filterDiv.appendChild(separerotButton);
+                }
+                searchContainerDiv.appendChild(filterDiv);
+            });
+            widgetDiv.appendChild(searchContainerDiv);
+        }
+        editIcon.addEventListener('click', () => {
+            this.newWidgetIndex = this.dashBoardWidgetConfig.widgets.findIndex(object => object.widgetId === div.widgetId);
+            this.isUpdateWidget = true;
+            this.islayoutCreate = true;
+            this.isWidgetCreationContent = true;
+            this.isDefaultView = false;
+            this.isChartButtonClick = false;
+            this.nodeProperticeFilters = (item.nodeProperties.nodefilters && item.nodeProperties.nodefilters.length !== 0) ? item.nodeProperties.nodefilters : [];
+            item.nodeProperties['nodefilters'] = this.nodeProperticeFilters;
+            this.addedwidGetConfig = item.nodeProperties;
+            this.allWidgetInnerContent = item.compConfig.viewConfig;
+            this.selectedFilterId = (item.filterId) ? item.filterId : "";
+            this.editViewdataSourceModal = {};
+            this.selectedFilterDatasource = item;
+        });
+        return widgetDiv;
+    }
+    getFilterValueById(event) {
+        if (event.event) {
+            this.service.getAppFilterConfig(event.value).subscribe({
+                next: (data) => {
+                    if (Object.keys(this.selectedFilterDatasource).length !== 0) {
+                        this.selectedFilterDatasource.filterId = this.selectedFilterId;
+                    }
+                    else {
+                        this.dashBoardWidgetConfig.widgets[this.newWidgetIndex].filters = data;
+                    }
+                    this.toastr.success("Filter Changed");
+                }, erroe: (err) => {
+                    this.toastr.error('Unexpected Server Exception. Please contact System Admin.', 'Filter Update');
+                }
+            });
+        }
+    }
+    createDivElements(datasetById) {
+        const container = this.dynamicContainer.nativeElement;
+        container.innerHTML = "";
+        const multiItemDiv = document.createElement('div');
+        multiItemDiv.classList.add("flex", "flex-row", "justify-between");
+        const context_filter = this.dashBoardWidgetConfig.filters ? this.dashBoardWidgetConfig.filters.filterItems : null;
+        this.dashBoardWidgetConfig.widgets.forEach(async (div) => {
+            const rowDiv = document.createElement('div');
+            let w_height = (div.widgetProperties.height == "") ? "h-auto" : 'h-[' + div.widgetProperties.height + ']';
+            rowDiv.classList.add(div.widgetProperties.width, w_height, 'border');
+            const filterDiv = document.createElement('div');
+            const filterItems = (div.filters) ? div.filters.filterItems : [];
+            this.loadFilterComponent(div, filterDiv, filterItems, context_filter);
+            rowDiv.appendChild(filterDiv);
+            if (div.widgetNode && div.widgetNode.length && div.widgetNode.length != 0) {
+                const mainItemDiv = document.createElement('div');
+                mainItemDiv.classList.add("flex", "flex-wrap", "w-full");
+                this.loadWidgetNodes(div, mainItemDiv, datasetById);
+                rowDiv.appendChild(mainItemDiv);
+            }
+            const p_innerDiv = document.createElement('div');
+            p_innerDiv.classList.add('rounded', 'justify-center', 'items-center', 'border', 'p-1', 'm-1', 'flex', 'flex-row');
+            const p_button_widget = document.createElement('div');
+            p_button_widget.innerText = 'Add Single Layout';
+            p_button_widget.classList.add('bg-blue-700', "p-1", "w-fit", "cursor-pointer", 'text-xs');
+            p_button_widget.addEventListener('click', () => {
+                let index = this.dashBoardWidgetConfig.widgets.findIndex(object => object.widgetId === div.widgetId);
+                this.insertNewWiget(index);
+            });
+            const p_del_button = document.createElement('div');
+            p_del_button.innerText = 'Detete layout';
+            p_del_button.classList.add('bg-red-700', "p-1", "w-fit", "cursor-pointer", 'text-xs');
+            p_del_button.addEventListener('click', () => {
+                let result = confirm("<i>Are You Sure?</i>", "Delete Layout");
+                result.then((dialogResult) => {
+                    if (dialogResult) {
+                        this.loadingModal = true;
+                        this.dashBoardWidgetConfig.widgets = this.dashBoardWidgetConfig.widgets.map(config => config.widgetId);
+                        rowDiv.remove();
+                        this.service.editAppPageConfig(this.dashBoardWidgetConfig).subscribe({
+                            next: (data) => {
+                                this.getAppPageDetailConfigByPageId();
+                            }, error: (err) => {
+                                this.loadingModal = false;
+                                this.toastr.error('Unexpected Server Exception. Please contact System Admin.', 'Widget Creation');
+                            }
+                        });
+                        this.newWidgetIndex = undefined;
+                        this.isWidgetCreationContent = false;
+                        this.isDefaultView = true;
+                    }
+                });
+            });
+            const advance_button = document.createElement('div');
+            advance_button.innerText = 'Advance Layout';
+            advance_button.classList.add('bg-yellow-700', "p-1", "w-fit", "cursor-pointer", 'text-xs');
+            advance_button.addEventListener('click', () => {
+                const comp_object = this.findWidgetById(this.dashBoardWidgetConfig.widgets, div.widgetId);
+                this.newWidgetIndex = this.dashBoardWidgetConfig.widgets.findIndex(object => object.widgetId === div.widgetId);
+                this.isAdvanceLayout = true;
+            });
+            p_innerDiv.appendChild(advance_button);
+            p_innerDiv.appendChild(p_button_widget);
+            p_innerDiv.appendChild(p_del_button);
+            if (!this.isDashBoardContentTypeView) {
+                rowDiv.appendChild(p_innerDiv);
+            }
+            multiItemDiv.appendChild(rowDiv);
+            container.appendChild(multiItemDiv);
+        });
+    }
+    loadWidgetNodes(div, mainItemDiv, datasetById) {
+        div.widgetNode.forEach(item => {
+            this.loadSingleWidgetNode(item, mainItemDiv, datasetById, div);
+        });
+    }
+    loadSingleWidgetNode(item, containerElement, datasetById, div) {
+        let w_height = (item.nodeProperties.height == "") ? "h-auto" : 'h-[' + item.nodeProperties.height + ']';
+        let w_width = (item.nodeProperties.width == "") ? "w-full" : item.nodeProperties.width;
+        const itemDiv = document.createElement('div');
+        itemDiv.classList.add(w_width, w_height, 'border', 'p-1');
+        const flexContainer = document.createElement('div');
+        flexContainer.classList.add('flex', 'justify-between', 'items-center', 'text-gray-900', 'dark:text-white', 'bg-gray-800', 'mx-2', 'rounded-t-lg');
+        const widgetDiv = this.getWidgetTitleDiv(item, div);
+        item.compConfig.viewConfig.forEach(element => {
+            if (element.kpiConfig) {
+                let apiCalls = [];
+                this.service.getAppDatasetConfig(element.datasetId).subscribe({
+                    next: (dataset) => {
+                        if (dataset.datasetType !== "sqlQuery" && dataset.datasetType !== "plainjson") {
+                            const datasetWithLimit = this.setDataSetsLimit(dataset);
+                            apiCalls.push(this.datasetService.getDataFromDataSet(datasetWithLimit, datasetWithLimit.datasetId, this.defaultApplyedFilter));
+                        }
+                        else {
+                            apiCalls.push(this.datasetService.getDataFromDataSet(dataset, dataset.datasetId, this.defaultApplyedFilter));
+                        }
+                        Promise.all(apiCalls).then(() => {
+                            this.uniqueDataSetObject = this.datasetService.getUniqueDataSetObject();
+                            element.kpiConfig['dataSource'] = this.uniqueDataSetObject[element.datasetId];
+                            const comp_object = this.findWidgetById(this.dashBoardWidgetConfig.widgets, item.id);
+                            this.loadDynamicComponent(element, comp_object, itemDiv);
+                        });
+                    }, error: (err) => {
+                    }
+                });
+            }
+        });
+        flexContainer.appendChild(widgetDiv);
+        const buttonsContainer = document.createElement('div');
+        buttonsContainer.classList.add('flex', 'mx-2');
+        const innerDiv = document.createElement('div');
+        innerDiv.classList.add('rounded', 'justify-center', 'items-center', 'p-1', 'm-1', 'flex', 'flex-row');
+        const button_chart = document.createElement('div');
+        button_chart.innerText = 'Add View';
+        button_chart.classList.add('bg-green-700', "p-1", "w-fit", "cursor-pointer", 'text-xs');
+        button_chart.addEventListener('click', () => {
+            this.newWidgetIndex = this.dashBoardWidgetConfig.widgets.findIndex(object => object.widgetId === div.widgetId);
+            const comp_object = this.findWidgetById(this.dashBoardWidgetConfig.widgets, item.id);
+            this.insertChartWiget(comp_object, itemDiv);
+        });
+        const del_button_chart = document.createElement('div');
+        del_button_chart.innerText = 'Detete';
+        del_button_chart.classList.add('bg-red-700', "p-1", "w-fit", "cursor-pointer", 'text-xs');
+        del_button_chart.addEventListener('click', () => {
+            let result = confirm("<i>Are You Sure?</i>", "Delete View");
+            result.then((dialogResult) => {
+                if (dialogResult) {
+                    let widgetIndex = this.dashBoardWidgetConfig.widgets.findIndex(object => object.widgetId === div.widgetId);
+                    const mapedObject = this.dashBoardWidgetConfig.widgets[widgetIndex];
+                    if (mapedObject.widgetNode && mapedObject.widgetNode.length > 0) {
+                        let mapIndex = mapedObject.widgetNode.findIndex(ind => ind.id === item.id);
+                        mapedObject.widgetNode.forEach(node => {
+                            node.compConfig.viewConfig = node.compConfig.viewConfig.map(config => config.viewId);
+                            node.compConfig.dynamicComponentRefs = [];
+                        });
+                        mapedObject.widgetNode.splice(mapIndex, 1);
+                    }
+                    mapedObject['filterId'] = (mapedObject.filters) ? mapedObject.filters.filterId : null;
+                    delete mapedObject['filters'];
+                    mapedObject.compConfig.dynamicComponentRefs = [];
+                    this.service.editAppWidgetConfig(mapedObject).subscribe({
+                        next: (data) => {
+                            this.getAppPageDetailConfigByPageId();
+                        }, error: (err) => {
+                            this.loadingModal = false;
+                            this.toastr.error('Unexpected Server Exception. Please contact System Admin.', 'Widget Creation');
+                        }
+                    });
+                    this.newWidgetIndex = undefined;
+                    itemDiv.remove();
+                }
+            });
+        });
+        buttonsContainer.appendChild(button_chart);
+        buttonsContainer.appendChild(del_button_chart);
+        flexContainer.appendChild(buttonsContainer);
+        if (!this.isDashBoardContentTypeView) {
+        }
+        itemDiv.appendChild(flexContainer);
+        containerElement.appendChild(itemDiv);
+    }
+    findWidgetById(configs, id) {
+        for (const config of configs) {
+            if (config.id === id) {
+                return config;
+            }
+            if (config.widgetNode && config.widgetNode.length > 0) {
+                const found = this.findWidgetById(config.widgetNode, id);
+                if (found) {
+                    return found;
+                }
+            }
+        }
+        return undefined;
+    }
+    deleteWidgetById(configs, id) {
+        for (let i = configs.length - 1; i >= 0; i--) {
+            if (configs[i].id === id) {
+                configs.splice(i, 1);
+            }
+            else if (configs[i].widgetNode && configs[i].widgetNode.length > 0) {
+                this.deleteWidgetById(configs[i].widgetNode, id);
+            }
+        }
+    }
+    loadDynamicComponent(data, indexObj, containerElement) {
+        const componentClass = this.componentClassMap[data.kpiConfig['componentName']];
+        this.CompRefs = this.viewContainerRef.createComponent(componentClass);
+        const dynamicComponentInstance = this.CompRefs.instance;
+        dynamicComponentInstance.chartDataSource = data;
+        dynamicComponentInstance.kpi_name = "";
+        indexObj.compConfig.dynamicComponentRefs.push(this.CompRefs);
+        const cssClass = "w-full";
+        this.CompRefs.location.nativeElement.classList.add(cssClass);
+        containerElement.appendChild(this.CompRefs.location.nativeElement);
+    }
+    loadFilterComponent(indexObj, containerElement, filterItems, context_filter) {
+        let selectedDates = { startDate: this.defaultStartDate, endDate: this.defaultEndDate };
+        const componentClass = this.componentClassMap['AppAdvanceHeaderComponent'];
+        this.CompRefs = this.viewContainerRef.createComponent(componentClass);
+        const dynamicComponentInstance = this.CompRefs.instance;
+        dynamicComponentInstance.selectedDates = selectedDates;
+        dynamicComponentInstance.filterItems = filterItems;
+        dynamicComponentInstance.contextFilterItems = context_filter;
+        dynamicComponentInstance.pageTitle = this.pageTitle;
+        dynamicComponentInstance.isEditButton = false;
+        dynamicComponentInstance.isAdvanceButton = true;
+        indexObj.compConfig.dynamicComponentRefs.push(this.CompRefs);
+        const cssClass = "w-full";
+        this.CompRefs.location.nativeElement.classList.add(cssClass);
+        containerElement.appendChild(this.CompRefs.location.nativeElement);
+    }
+    loadWidgetFilterComponent(indexObj, containerElement, filterItems) {
+        let userName = localStorage.getItem('user_name');
+        let selectedDates = { startDate: this.defaultStartDate, endDate: this.defaultEndDate };
+        const componentClass = this.componentClassMap['AdvanceWidgetHeaderFilterComponent'];
+        this.CompRefs = this.viewContainerRef.createComponent(componentClass);
+        const dynamicComponentInstance = this.CompRefs.instance;
+        dynamicComponentInstance.selectedDates = selectedDates;
+        dynamicComponentInstance.filterItems = filterItems;
+        dynamicComponentInstance.getWidgetFilterConfig.subscribe((value) => {
+            this.getWidgetFilterForTemplate(value);
+        });
+        indexObj.compConfig.dynamicComponentRefs.push(this.CompRefs);
+        containerElement.appendChild(this.CompRefs.location.nativeElement);
+    }
+    getDeleteViewFromConfig(index) {
+        console.log(index);
+        this.allWidgetInnerContent.splice(index, 1);
+    }
+    moveItemForPageView(index, direction) {
+        if (index < 0 || index >= this.dashBoardWidgetConfig.widgets[this.newWidgetIndex].widgetNode.length)
+            return;
+        const newPosition = direction === 'up' ? index - 1 : index + 1;
+        if (newPosition < 0 || newPosition >= this.dashBoardWidgetConfig.widgets[this.newWidgetIndex].widgetNode.length)
+            return;
+        const itemToMove = this.dashBoardWidgetConfig.widgets[this.newWidgetIndex].widgetNode[index];
+        this.dashBoardWidgetConfig.widgets[this.newWidgetIndex].widgetNode.splice(index, 1);
+        this.dashBoardWidgetConfig.widgets[this.newWidgetIndex].widgetNode.splice(newPosition, 0, itemToMove);
+    }
+    moveItemForColumns(index, direction) {
+        if (index < 0 || index >= this.allWidgetInnerContent.length)
+            return;
+        const newPosition = direction === 'up' ? index - 1 : index + 1;
+        if (newPosition < 0 || newPosition >= this.allWidgetInnerContent.length)
+            return;
+        const itemToMove = this.allWidgetInnerContent[index];
+        this.allWidgetInnerContent.splice(index, 1);
+        this.allWidgetInnerContent.splice(newPosition, 0, itemToMove);
+    }
+    moveItemForWidget(index, direction) {
+        if (index < 0 || index >= this.dashBoardWidgetConfig.widgets.length)
+            return;
+        const newPosition = direction === 'up' ? index - 1 : index + 1;
+        if (newPosition < 0 || newPosition >= this.dashBoardWidgetConfig.widgets.length)
+            return;
+        const itemToMove = this.dashBoardWidgetConfig.widgets[index];
+        this.dashBoardWidgetConfig.widgets.splice(index, 1);
+        this.dashBoardWidgetConfig.widgets.splice(newPosition, 0, itemToMove);
+    }
+    getEditViewFromLayout(data, index) {
+        this.isEditMainLayout = true;
+        this.newWidgetIndex = index;
+        this.isWidgetCreationContent = true;
+        this.isDefaultView = false;
+        this.isChartButtonClick = false;
+        this.isUpdateWidget = false;
+        this.widgetName = data.widgetName;
+        this.widgetTitle = data.widgetTitle;
+        this.selectedFilterId = data.filters.filterId;
+        this.addedwidGetConfig = data.widgetProperties;
+    }
+    backToMainView() {
+        this.isDefaultView = true;
+        this.isUpdateWidget = false;
+        this.isWidgetCreationContent = false;
+        this.isChartButtonClick = false;
+        this.isEditMainLayout = false;
+        this.islayoutCreate = false;
+        this.newWidgetIndex = undefined;
+        this.selectedFilterId = undefined;
+    }
+    filterViews() {
+        if (this.viewToSearch.trim() !== '') {
+            this.filteredComponentConfig = this.componentConfigDataSource.filter((item) => item.viewName.toLowerCase().includes(this.viewToSearch.toLowerCase()));
+        }
+        else {
+            this.filteredComponentConfig = this.componentConfigDataSource;
+        }
+    }
+    editComponentViews(item) {
+        this.loadingModal = true;
+        this.editItemForUpdate = item;
+        if (this.isUpdateWidget && !this.isChartButtonClick) {
+            this.selectedViewId = item.viewId;
+            setTimeout(() => {
+                this.isCreateNewViewWithDefaultView = true;
+                this.loadingModal = false;
+            }, 400);
+        }
+        else {
+            let navigation = {
+                queryParams: {
+                    'viewId': item.viewId,
+                    'pageId': this.pageId
+                }
+            };
+            this.router.navigate(['apps/controlPanel/applicationContent/applicationViews'], navigation);
+        }
+    }
+    editComponentDatasets(item) {
+        this.loadingModal = true;
+        this.editItemForUpdate = item;
+        if (this.isUpdateWidget && !this.isChartButtonClick) {
+            this.selectedDatasetId = item.datasetId;
+            setTimeout(() => {
+                this.isCreateDatasetWithDatasetId = true;
+                this.loadingModal = false;
+            }, 400);
+        }
+        else {
+            let navigation = {
+                queryParams: {
+                    'viewId': item.viewId,
+                    'pageId': this.pageId
+                }
+            };
+            this.router.navigate(['apps/controlPanel/applicationContent/applicationViews'], navigation);
+        }
+    }
+    getAllPage() {
+        this.router.navigate(['apps/controlPanel/applicationContent/applicationDashboard']);
+    }
+    transformColumnsForColumns(inputColumns) {
+        const columns = [];
+        inputColumns.forEach(col => {
+            columns.push({
+                dataField: col.dataField,
+                visible: true,
+                caption: col.caption,
+            });
+        });
+        return columns;
+    }
+    getCreateDataSetPage() {
+        this.isCreateDataset = true;
+    }
+    getCreateViewPage() {
+        this.selectedViewId = undefined;
+        this.loadingModal = true;
+        setTimeout(() => {
+            this.isCreateNewView = true;
+            this.loadingModal = false;
+        }, 400);
+    }
+    getEmitNewChartCongig(event) {
+        delete event.kpiConfig.dataSource;
+        this.editItemForUpdate['kpiConfig'] = event.kpiConfig;
+        console.log(this.editItemForUpdate);
+        this.service.updateAppViewConfig(this.editItemForUpdate).subscribe({
+            next: (data) => {
+                this.isEditOptionClick = false;
+                this.toastr.success('View Update Successfully');
+            }, error: (err) => {
+                this.toastr.error('Unexpected Server Exception. Please contact System Admin.', 'View Creation');
+            }
+        });
+    }
+    getViewPage() {
+        let navigationExtras = {
+            queryParams: {
+                "pageId": this.pageId
+            }
+        };
+        this.router.navigate([this.pageUrl], navigationExtras);
+    }
+    getNodeProperticeFilterOption() {
+        let obj = {
+            input_type: "text",
+            server_column: "",
+            local_column: "",
+            select_box_option: "",
+        };
+        this.nodeProperticeFilters.push(obj);
+    }
+    deleteNodeFilter(index) {
+        this.nodeProperticeFilters.splice(index, 1);
+    }
+    setDataSetsLimit(dataset) {
+        let limit = { "limit": "10" };
+        dataset.config.queryConfig.reqFields.push(limit);
+        return dataset;
+    }
+    getViewPopupHide(e) {
+        this.getAllViewsItems();
+    }
+    getDatasetPopupHide(e) {
+    }
+    submitFilter() {
+    }
+    getWidgetFilterForTemplate(value) {
+        this.getDataSet();
+    }
+    getDeleteViewFromLayout(item, i) {
+        this.dashBoardWidgetConfig.widgets.splice(i, 1);
+        this.dashBoardWidgetConfig.widgets.forEach(widget => {
+            widget.compConfig.viewConfig = widget.compConfig.viewConfig.map(config => config.viewId);
+            widget.compConfig.dynamicComponentRefs = [];
+            if (widget.widgetNode && widget.widgetNode.length > 0) {
+                widget.widgetNode.forEach(node => {
+                    node.compConfig.viewConfig = node.compConfig.viewConfig.map(config => config.viewId);
+                    node.compConfig.dynamicComponentRefs = [];
+                });
+            }
+        });
+        const widgetData = this.dashBoardWidgetConfig;
+        widgetData['widgets'] = this.dashBoardWidgetConfig.widgets.map(item => item.widgetId);
+        widgetData['filterId'] = (widgetData.filters) ? widgetData.filters.filterId : null;
+        delete widgetData['filters'];
+        this.service.editAppPageConfig(widgetData).subscribe({
+            next: (data) => {
+                this.toastr.success("Layout Deleted Successfully");
+                this.getAppPageDetailConfigByPageId();
+            }, error: (err) => {
+                this.loadingModal = false;
+                this.toastr.error('Unexpected Server Exception. Please contact System Admin.', 'Widget Creation');
+            }
+        });
+    }
+    getProcessForConfig() {
+        this.advanceLayoutContainer = [];
+        const filteredColumns = this.componentConfigDataSource.filter(column => this.selectedViewsIds.includes(column.viewId));
+        const columnDefList = [];
+        filteredColumns.forEach(element => {
+            let obj = {
+                "id": this.commonService.primeryRendomeId(5),
+                "nodeTitle": "",
+                "compConfig": {
+                    "dynamicComponentRefs": [],
+                    "viewConfig": [element]
+                },
+                "filterId": null,
+                "nodeProperties": {
+                    "display": true,
+                    "widgetTitle": "",
+                    "width": "",
+                    "height": "",
+                    "isWidgetFilter": false
+                }
+            };
+            this.advanceLayoutContainer.push(obj);
+        });
+        this.isProceed = true;
+    }
+    getSelectedColumnSource(event) {
+        if (event.event) {
+            this.selectedViewsIds = event.value;
+        }
+    }
+    submitAdvanceView() {
+        if (this.dashBoardWidgetConfig.widgets[this.newWidgetIndex].widgetNode && this.dashBoardWidgetConfig.widgets[this.newWidgetIndex].widgetNode.length !== 0) {
+            this.dashBoardWidgetConfig.widgets[this.newWidgetIndex].widgetNode = [...this.dashBoardWidgetConfig.widgets[this.newWidgetIndex].widgetNode, ...this.advanceLayoutContainer];
+        }
+        else {
+            this.dashBoardWidgetConfig.widgets[this.newWidgetIndex].widgetNode = this.advanceLayoutContainer;
+        }
+        this.isAdvanceLayout = false;
+        this.advanceLayoutContainer = [];
+        this.isProceed = false;
+        this.updateWidget();
+    }
+    deleteView(i) {
+    }
+}
+PageConfigMultilayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PageConfigMultilayoutComponent, deps: [{ token: CommonService }, { token: i2.ActivatedRoute }, { token: i0.ViewContainerRef }, { token: i0.ComponentFactoryResolver }, { token: ApplicationContentService }, { token: i2$2.ToastrService }, { token: i2.Router }, { token: ApplicationDatssetsCall }], target: i0.ɵɵFactoryTarget.Component });
+PageConfigMultilayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PageConfigMultilayoutComponent, 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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i5.DxCheckBoxComponent, selector: "dx-check-box", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "iconSize", "isValid", "name", "readOnly", "rtlEnabled", "tabIndex", "text", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "visible", "width"], outputs: ["onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconSizeChange", "isValidChange", "nameChange", "readOnlyChange", "rtlEnabledChange", "tabIndexChange", "textChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "component", type: i4$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.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: i11.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: i2$1.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: PageConfigMultilayoutComponent, 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"] }]
+        }], ctorParameters: function () { return [{ type: CommonService }, { type: i2.ActivatedRoute }, { type: i0.ViewContainerRef }, { type: i0.ComponentFactoryResolver }, { type: ApplicationContentService }, { type: i2$2.ToastrService }, { type: i2.Router }, { type: ApplicationDatssetsCall }]; }, propDecorators: { dynamicComponentContainer: [{
+                type: ViewChild,
+                args: ['dynamicComponentContainer', { read: ViewContainerRef }]
+            }], containerRef: [{
+                type: ViewChild,
+                args: ['container', { read: ViewContainerRef }]
+            }], dynamicContainer: [{
+                type: ViewChild,
+                args: ['dynamicContainer', { static: true }]
+            }], scrollView: [{
+                type: ViewChild,
+                args: [DxScrollViewComponent, { static: false }]
+            }] } });
+
+const appRoutes = [
+    {
+        path: '',
+        redirectTo: 'applicationDataset',
+        pathMatch: 'full'
+    },
+    {
+        path: 'applicationDataset',
+        component: ApplicationDatasetComponent,
+    },
+    {
+        path: 'applicationViews',
+        component: ApplicationViewsComponent,
+    },
+    {
+        path: 'applicationFilter',
+        component: ApplicationFilterComponent,
+    },
+    {
+        path: 'applicationDashboard',
+        component: PageControlerComponent,
+    },
+    {
+        path: 'pageConfigController',
+        component: PageConfigComponent,
+    },
+    {
+        path: 'multiPageConfigController',
+        component: PageConfigMultilayoutComponent,
     },
     {
         path: 'menuController',
@@ -10825,7 +11774,8 @@ PackageApplicationControllerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion
         GammaTableClumnBarChartComponent,
         ApplicationMenusComponent,
         ApplicationCreateMenuComponent,
-        GammaGeoChartComponent], imports: [CommonModule, i2.RouterModule, DevExtremeModule,
+        GammaGeoChartComponent,
+        PageConfigMultilayoutComponent], imports: [CommonModule, i2.RouterModule, DevExtremeModule,
         DxButtonModule,
         DxCheckBoxModule,
         DxNumberBoxModule,
@@ -10883,7 +11833,8 @@ PackageApplicationControllerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion
         SafeHtmlPipe,
         GoogleGeoMapComponent,
         GammaTableClumnBarChartComponent,
-        GammaGeoChartComponent] });
+        GammaGeoChartComponent,
+        PageConfigMultilayoutComponent] });
 PackageApplicationControllerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PackageApplicationControllerModule, providers: [
         ApplicationContentService,
         ApplicationDatssetsCall
@@ -10966,7 +11917,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         GammaTableClumnBarChartComponent,
                         ApplicationMenusComponent,
                         ApplicationCreateMenuComponent,
-                        GammaGeoChartComponent
+                        GammaGeoChartComponent,
+                        PageConfigMultilayoutComponent
                     ],
                     imports: [
                         CommonModule,
@@ -11032,7 +11984,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         SafeHtmlPipe,
                         GoogleGeoMapComponent,
                         GammaTableClumnBarChartComponent,
-                        GammaGeoChartComponent
+                        GammaGeoChartComponent,
+                        PageConfigMultilayoutComponent
                     ],
                     providers: [
                         ApplicationContentService,
@@ -11082,5 +12035,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 }]
         }] });
 
-export { APP_ENVIRONMENT, AdvanceWidgetHeaderFilterComponent, AppAdvanceHeaderComponent, AppHttpService, AppTitleComponent, ApplicationContentService, ApplicationDatssetsCall, ApplicationFilterComponent, ApplicationViewsComponent, BreadCrumbsComponent, CdrConfigComponent, CommonHeaderComponent, CommonService, CreateCompViewComponent, CreateDatasetComponent, CreateDatasetJsonComponent, CreateDatasetSqlComponent, DashChartComponent, DashTableComponent, GamamWidgetComponent, GammSingleNumberCardComponent, GammaAdvanceChartComponent, GammaAdvanceFilterComponent, GammaAdvanceOperatorTableComponent, GammaAppControllerComponent, GammaAppControllerModule, GammaAppControllerService, GammaGeoChartComponent, GammaTableClumnBarChartComponent, GammaTableWithPercentageComponent, GammaTodayPreviousComponent, GeoMapComponent, GoogleGeoMapComponent, IconsModule, LoaderComponent, LoadingComponent, LoadingModule, PackageApplicationControllerModule, SafeHtmlPipe, SqlPipe, TableWithBarComponent, contentSafeHtml, kpicommonService$2 as kpicommonService };
+export { APP_ENVIRONMENT, AdvanceWidgetHeaderFilterComponent, AppAdvanceHeaderComponent, AppHttpService, AppTitleComponent, ApplicationContentService, ApplicationDatssetsCall, ApplicationFilterComponent, ApplicationViewsComponent, BreadCrumbsComponent, CdrConfigComponent, CommonHeaderComponent, CommonService, CreateCompViewComponent, CreateDatasetComponent, CreateDatasetJsonComponent, CreateDatasetSqlComponent, DashChartComponent, DashTableComponent, GamamWidgetComponent, GammSingleNumberCardComponent, GammaAdvanceChartComponent, GammaAdvanceFilterComponent, GammaAdvanceOperatorTableComponent, GammaAppControllerComponent, GammaAppControllerModule, GammaAppControllerService, GammaGeoChartComponent, GammaTableClumnBarChartComponent, GammaTableWithPercentageComponent, GammaTodayPreviousComponent, GeoMapComponent, GoogleGeoMapComponent, IconsModule, LoaderComponent, LoadingComponent, LoadingModule, PackageApplicationControllerModule, PageConfigComponent, PageConfigMultilayoutComponent, PageControlerComponent, SafeHtmlPipe, SqlPipe, TableWithBarComponent, contentSafeHtml, kpicommonService$2 as kpicommonService };
 //# sourceMappingURL=gamma-app-controller.mjs.map