gamma-app-controller 1.1.0 → 1.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (23) hide show
  1. package/esm2020/lib/application-controller/application-controller.module.mjs +14 -5
  2. package/esm2020/lib/application-controller/application-dataset-call.service.mjs +3 -3
  3. package/esm2020/lib/application-controller/application-dataset-component/dataset-query-bulder/dataset-query-bulder.component.mjs +4 -3
  4. package/esm2020/lib/application-controller/application-filter/application-filter.component.mjs +2 -2
  5. package/esm2020/lib/application-controller/page-controller/page-config/page-config.component.mjs +5 -3
  6. package/esm2020/lib/application-controller/page-controller/page-config-multi-layout/page-config-multi-layout.component.mjs +984 -0
  7. package/esm2020/lib/application-controller/page-controller/page-controller/page-controller.component.mjs +9 -2
  8. package/esm2020/lib/application-controller/shared/advanced-component/app-advance-header/app-header.component.mjs +23 -6
  9. package/esm2020/lib/application-controller/shared/advanced-component/gamma-table-with-percentage/gamma-table-with-percentage.component.mjs +101 -127
  10. package/esm2020/lib/application-controller/support-components/dash-table/dash-table.component.mjs +3 -3
  11. package/esm2020/lib/application-controller/support-components/table-with-bar/table-with-bar.component.mjs +2 -1
  12. package/esm2020/public-api.mjs +4 -1
  13. package/fesm2015/gamma-app-controller.mjs +1131 -170
  14. package/fesm2015/gamma-app-controller.mjs.map +1 -1
  15. package/fesm2020/gamma-app-controller.mjs +1129 -170
  16. package/fesm2020/gamma-app-controller.mjs.map +1 -1
  17. package/lib/application-controller/application-controller.module.d.ts +12 -11
  18. package/lib/application-controller/page-controller/page-config/page-config.component.d.ts +1 -1
  19. package/lib/application-controller/page-controller/page-config-multi-layout/page-config-multi-layout.component.d.ts +190 -0
  20. package/lib/application-controller/shared/advanced-component/app-advance-header/app-header.component.d.ts +3 -1
  21. package/lib/application-controller/shared/advanced-component/gamma-table-with-percentage/gamma-table-with-percentage.component.d.ts +15 -12
  22. package/package.json +1 -1
  23. package/public-api.d.ts +3 -0
@@ -28,7 +28,7 @@ import * as i6$2 from 'devextreme-angular/ui/color-box';
28
28
  import * as i8$1 from 'devextreme-angular/ui/tag-box';
29
29
  import * as i5$1 from 'devextreme-angular/ui/chart';
30
30
  import * as i8$2 from 'devextreme-angular/ui/pie-chart';
31
- import * as i9$1 from 'devextreme-angular/ui/scroll-view';
31
+ import * as i10 from 'devextreme-angular/ui/scroll-view';
32
32
  import * as i13 from '@angular/material/tooltip';
33
33
  import { MatTooltipModule } from '@angular/material/tooltip';
34
34
  import * as i8$3 from 'devextreme-angular/ui/number-box';
@@ -1933,7 +1933,7 @@ class ApplicationFilterComponent {
1933
1933
  "momentFormat": "YYYY-MM-DD"
1934
1934
  }]
1935
1935
  };
1936
- this.filter_type = ['single', 'multiple', 'date', 'datetime', "content"];
1936
+ this.filter_type = ['single', 'multiple', 'date', 'datetime', "content", "context"];
1937
1937
  this.defaultFilterTypeDataSource = ['static', 'dynamic'];
1938
1938
  this.momentFunction = ["subtract", "add", "startOf", "endOf"];
1939
1939
  }
@@ -2960,10 +2960,11 @@ class DatasetQueryBulderComponent {
2960
2960
  'deriveField': true
2961
2961
  };
2962
2962
  this.queryBulderDataset.queryConfig.columns.push(node);
2963
- console.log(columeString);
2964
2963
  }
2965
2964
  else if (element.reconType == "percentage") {
2966
- let columeString = "{'$cond': { if: { $eq: [ '$" + element.columeOne + "', 0 ] }, then: 0, else: {'$divide':[{'$subtract': ['$" + element.columeOne + "','$" + element.columeTwo + "']},'$" + element.columeOne + "']} }}";
2965
+ let columeString = `{ '$cond': {'if': {'$and': [{ '$eq': ['$${element.columeOne}', 0] }, { '$eq': ['$${element.columeTwo}', 0] } ] }, 'then': 0, 'else': {'$divide':
2966
+ [{ '$abs': { '$subtract': ['$${element.columeOne}', '$${element.columeTwo}'] } }, { '$max': ['$${element.columeOne}', '$${element.columeTwo}'] } ] } } }
2967
+ `;
2967
2968
  let node = {
2968
2969
  "measures": true,
2969
2970
  "dataField": element.dataField,
@@ -4144,7 +4145,7 @@ class DashChartComponent {
4144
4145
  }
4145
4146
  }
4146
4147
  DashChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DashChartComponent, deps: [{ token: CommonService }], target: i0.ɵɵFactoryTarget.Component });
4147
- 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" }] });
4148
+ 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" }] });
4148
4149
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DashChartComponent, decorators: [{
4149
4150
  type: Component,
4150
4151
  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 {
4422
4423
  }
4423
4424
  }
4424
4425
  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 });
4425
- 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" }] });
4426
+ 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" }] });
4426
4427
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DashTableComponent, decorators: [{
4427
4428
  type: Component,
4428
- 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>" }]
4429
+ 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>" }]
4429
4430
  }], ctorParameters: function () { return [{ type: CommonService }, { type: i0.ChangeDetectorRef }, { type: ApplicationContentService }, { type: i2$2.ToastrService }]; }, propDecorators: { getTableConfigOutPut: [{
4430
4431
  type: Output
4431
4432
  }], chartconfigData: [{
@@ -4784,6 +4785,7 @@ class TableWithBarComponent {
4784
4785
  }
4785
4786
  this.table_columns_config.kpiConfig['viewProperties'] = this.viewProperties;
4786
4787
  console.log(this.table_columns_config);
4788
+ this.createOtherComponentView.emit(this.table_columns_config);
4787
4789
  }
4788
4790
  deleteAssociatedParams(index) {
4789
4791
  this.optionalDrilDownDataSource.splice(index, 1);
@@ -6423,6 +6425,19 @@ class AppAdvanceHeaderComponent {
6423
6425
  }
6424
6426
  }
6425
6427
  }
6428
+ set contextFilterItems(value) {
6429
+ if (!value) {
6430
+ this.contextFilterItemsForFilter = value;
6431
+ }
6432
+ else {
6433
+ this.contextFilterItemsForFilter = [];
6434
+ value.forEach(element => {
6435
+ if (element.filterType == "context") {
6436
+ this.contextFilterItemsForFilter.push(element);
6437
+ }
6438
+ });
6439
+ }
6440
+ }
6426
6441
  ngOnInit() {
6427
6442
  }
6428
6443
  pageAutoloadStopRun() {
@@ -6510,10 +6525,10 @@ class AppAdvanceHeaderComponent {
6510
6525
  }
6511
6526
  }
6512
6527
  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 });
6513
- 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"] }] });
6528
+ 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"] }] });
6514
6529
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AppAdvanceHeaderComponent, decorators: [{
6515
6530
  type: Component,
6516
- 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>" }]
6531
+ 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>" }]
6517
6532
  }], ctorParameters: function () { return [{ type: i2.ActivatedRoute }, { type: i2.Router }]; }, propDecorators: { pageTitle: [{
6518
6533
  type: Input
6519
6534
  }], bread_crumbs_container: [{
@@ -6533,38 +6548,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
6533
6548
  }], filterItems: [{
6534
6549
  type: Input,
6535
6550
  args: ['filterItems']
6551
+ }], contextFilterItems: [{
6552
+ type: Input,
6553
+ args: ['contextFilterItems']
6536
6554
  }] } });
6537
6555
 
6538
6556
  class GammaTableWithPercentageComponent {
6539
6557
  constructor(commonService, toastr) {
6540
6558
  this.commonService = commonService;
6541
6559
  this.toastr = toastr;
6542
- this.data = [
6543
- {
6544
- eventType: "Voice",
6545
- access_cost_sar: 767.7730000000023,
6546
- event_type: '1',
6547
- ict_cost_sar: 7232,
6548
- margin_sar: 2445.7730000000023,
6549
- revenue: 5232
6550
- },
6551
- {
6552
- eventType: "SMS",
6553
- access_cost_sar: 345.7730000000023,
6554
- event_type: '2',
6555
- ict_cost_sar: 35654,
6556
- margin_sar: 2445.7730000000023,
6557
- revenue: 55654
6558
- },
6559
- {
6560
- eventType: "GPRS",
6561
- access_cost_sar: 567.7730000000023,
6562
- event_type: '3',
6563
- ict_cost_sar: 89387,
6564
- margin_sar: 5445.7730000000023,
6565
- revenue: 99387
6566
- }
6567
- ];
6560
+ this.getTableConfigOutPut = new EventEmitter();
6561
+ this.oRowClick = new EventEmitter();
6562
+ this.onrightClickContextSelection = new EventEmitter();
6563
+ this.rightClickEnable = true;
6568
6564
  this.tableDataSource = [];
6569
6565
  }
6570
6566
  set chartDataSource(value) {
@@ -6573,20 +6569,25 @@ class GammaTableWithPercentageComponent {
6573
6569
  }
6574
6570
  else {
6575
6571
  this.isLoader = true;
6572
+ this.page_config = value;
6573
+ this.page_parms = value.titleParams;
6576
6574
  if (value.kpiConfig.dataSource && value.kpiConfig.dataSource.length !== 0) {
6577
- const sortedData = value.kpiConfig.dataSource.sort((a, b) => {
6578
- return moment(b.recordDate, "YYYY-MM-DD").diff(moment(a.recordDate, "YYYY-MM-DD"));
6579
- });
6580
- value.kpiConfig.dataSource.forEach(item => item.recordDate = new Date(item.recordDate));
6581
- value.kpiConfig.dataSource.sort((a, b) => b.recordDate - a.recordDate);
6582
- const uniqueEvents = new Map();
6583
- value.kpiConfig.dataSource.forEach(item => {
6584
- if (!uniqueEvents.has(item.eventTypeKey)) {
6585
- uniqueEvents.set(item.eventTypeKey, item);
6586
- }
6587
- });
6588
- const result = Array.from(uniqueEvents.values());
6589
- this.loadDailyMscVoiceTable(result);
6575
+ this.tableConfig = value.kpiConfig.dataConfig;
6576
+ const columns = value.kpiConfig.dataConfig.columns;
6577
+ let mainDatasource;
6578
+ let tableColumns = (value.kpiConfig.dataConfig.columns) ? value.kpiConfig.dataConfig.columns : [];
6579
+ if (tableColumns && tableColumns.length !== 0) {
6580
+ const dataSource = value.kpiConfig.dataSource.map(obj => {
6581
+ const newObj = { ...obj };
6582
+ Object.keys(newObj).forEach(key => {
6583
+ if (key.toLowerCase().includes('date') && newObj[key]) {
6584
+ newObj[key] = moment(newObj[key]).format("YYYY-MM-DD");
6585
+ }
6586
+ });
6587
+ return newObj;
6588
+ });
6589
+ this.percentageDataSource = this.loadDailyMscVoiceTable(dataSource, columns);
6590
+ }
6590
6591
  this.isLoader = false;
6591
6592
  }
6592
6593
  else {
@@ -6595,99 +6596,90 @@ class GammaTableWithPercentageComponent {
6595
6596
  }
6596
6597
  ngOnInit() {
6597
6598
  }
6598
- loadDailyMscVoiceTable(data) {
6599
- this.tableDataSource = [];
6600
- let dataset = [];
6601
- let column1Name = 'access_cost_sar';
6602
- let column2Name = 'ict_cost_sar';
6603
- let column3Name = 'margin_sar';
6604
- let column4Name = 'revenue';
6605
- let revenueArr = [], interConnectArr = [], accessCostArr = [], marginArr = [];
6606
- for (const [i, v] of Object.entries(data)) {
6607
- if (v[column1Name] == undefined) {
6608
- v[column1Name] = 0;
6609
- }
6610
- if (v[column2Name] == undefined) {
6611
- v[column2Name] = 0;
6612
- }
6613
- if (v[column3Name] == undefined) {
6614
- v[column3Name] = 0;
6615
- }
6616
- if (v[column4Name] == undefined) {
6617
- v[column4Name] = 0;
6618
- }
6619
- accessCostArr.push(v[column1Name]);
6620
- interConnectArr.push(v[column2Name]);
6621
- marginArr.push(v[column3Name]);
6622
- revenueArr.push(v[column4Name]);
6623
- }
6624
- let maxAccessCostVal = Math.max.apply(Math, accessCostArr);
6625
- let minAccessCostVal = Math.min.apply(Math, accessCostArr);
6626
- let maxinterConnectVal = Math.max.apply(Math, interConnectArr);
6627
- let mininterConnectVal = Math.min.apply(Math, interConnectArr);
6628
- let maxmarginVal = Math.max.apply(Math, marginArr);
6629
- let minmarginVal = Math.min.apply(Math, marginArr);
6630
- let maxRevenueVal = Math.max.apply(Math, revenueArr);
6631
- let minRevenueVal = Math.min.apply(Math, revenueArr);
6632
- for (const [i, v] of Object.entries(data)) {
6633
- let r = [];
6634
- let accessCostValue, interConnectValue, marginValue, revenueValue;
6635
- if (v[column1Name] > 0) {
6636
- accessCostValue = this.commonService.scaleNumber(parseFloat(v[column1Name]), maxAccessCostVal, minAccessCostVal, 10, 75);
6637
- }
6638
- else {
6639
- accessCostValue = 0;
6640
- }
6641
- if (v[column2Name] > 0) {
6642
- interConnectValue = this.commonService.scaleNumber(parseFloat(v[column2Name]), maxinterConnectVal, mininterConnectVal, 10, 75);
6643
- }
6644
- else {
6645
- interConnectValue = 0;
6646
- }
6647
- if (v[column3Name] > 0) {
6648
- marginValue = this.commonService.scaleNumber(parseFloat(v[column3Name]), maxmarginVal, minmarginVal, 10, 75);
6649
- }
6650
- else {
6651
- marginValue = 0;
6652
- }
6653
- if (v[column4Name] > 0) {
6654
- revenueValue = this.commonService.scaleNumber(parseFloat(v[column4Name]), maxRevenueVal, minRevenueVal, 10, 75);
6655
- }
6656
- else {
6657
- revenueValue = 0;
6658
- }
6659
- let accessCostBar = this.commonService.createHtml(accessCostValue, this.commonService.reformatNumberWithThousandSeparator(v[column1Name]), '#002E70');
6660
- let interconnectBar = this.commonService.createHtml(interConnectValue, this.commonService.reformatNumberWithThousandSeparator(v[column2Name]), '#F46604');
6661
- let marginBar = this.commonService.createHtml(marginValue, this.commonService.reformatNumberWithThousandSeparator(v[column3Name]), '#3d8706');
6662
- let revenueBar = this.commonService.createHtml(revenueValue, this.commonService.reformatNumberWithThousandSeparator(v[column4Name]), '#ffac42');
6663
- let node = {
6664
- 'eventType': this.getEventTypeName(v['eventTypeKey']),
6665
- 'access_cost_sar': accessCostBar,
6666
- 'margin_sar': marginBar,
6667
- 'ict_cost_sar': interconnectBar,
6668
- 'revenue': revenueBar,
6669
- };
6670
- this.tableDataSource.push(node);
6671
- }
6599
+ loadDailyMscVoiceTable(data, datacolumns) {
6600
+ this.argumentValue = datacolumns.filter((column) => column.isShowBar == false);
6601
+ this.dataConfig = datacolumns.filter((column) => column.isShowBar == true);
6602
+ let keys = this.dataConfig;
6603
+ const result = {};
6604
+ let finalDatasource = [];
6605
+ data.forEach((elementOne) => {
6606
+ keys.forEach((key) => {
6607
+ const values = data.map((item) => parseFloat(item[key['dataField']]) || 0);
6608
+ const maxValue = Math.max(...values);
6609
+ const minValue = Math.min(...values);
6610
+ result[key['dataField']] = { maxValue, minValue };
6611
+ });
6612
+ let obj = {};
6613
+ keys.forEach((key) => {
6614
+ let widthVal = this.commonService.scaleNumber(parseFloat(elementOne[key['dataField']]), result[key['dataField']]['minValue'], result[key['dataField']]['maxValue'], 10, 75);
6615
+ let Bar = this.commonService.createHtml(widthVal, this.commonService.reformatNumberWithThousandSeparator(elementOne[key['dataField']]), key['color']);
6616
+ obj[key['dataField']] = Bar;
6617
+ });
6618
+ this.argumentValue.forEach((element) => {
6619
+ obj[element.dataField] = elementOne[element.dataField];
6620
+ });
6621
+ finalDatasource.push(obj);
6622
+ });
6623
+ return finalDatasource;
6672
6624
  }
6673
- getEventTypeName(key) {
6674
- if (key == "1") {
6675
- return "Voice";
6676
- }
6677
- else if (key == "2") {
6678
- return "SMS";
6679
- }
6680
- else {
6681
- return "GPRS";
6625
+ onRowClick(e) {
6626
+ const title_params = e.data[this.page_config.kpiConfig.dataConfig.commonConfig['dataField']];
6627
+ let title = this.page_config.kpiConfig.dataConfig.commonConfig['title'] + title_params;
6628
+ let obj = {
6629
+ data: e.data,
6630
+ keyToPass: this.page_config.kpiConfig.keyToPass,
6631
+ tableTitle: (this.page_parms) ? this.page_parms + title : title,
6632
+ viewId: this.page_config.viewId,
6633
+ drillDownType: "natural",
6634
+ drilldownFrom: this.page_config.viewId,
6635
+ drilldownTo: "",
6636
+ };
6637
+ this.oRowClick.emit(obj);
6638
+ }
6639
+ addMenuItems(e) {
6640
+ const title_params = e.row.data[this.page_config.kpiConfig.dataConfig.commonConfig['dataField']];
6641
+ let title = this.page_config.kpiConfig.dataConfig.commonConfig['title'] + title_params;
6642
+ if (this.rightClickEnable && e.columnIndex == 0) {
6643
+ if (e.target == 'content') {
6644
+ if (!e.items)
6645
+ e.items = [];
6646
+ this.page_config.kpiConfig.contextMenu.forEach(element => {
6647
+ if (!this.page_config.kpiConfig.keyToPass.some(key => element.displayKey.includes(key))) {
6648
+ e.items.push({
6649
+ text: element.displayKey,
6650
+ onItemClick: () => {
6651
+ let rightclickData = {
6652
+ data: e.row.data,
6653
+ keyToPass: this.page_config.kpiConfig.keyToPass,
6654
+ tableTitle: (this.page_parms) ? this.page_parms + title : title,
6655
+ viewId: this.page_config.viewId,
6656
+ drillDownType: "context",
6657
+ drilldownFrom: this.page_config.viewId,
6658
+ drilldownTo: element.viewId,
6659
+ };
6660
+ this.onrightClickContextSelection.emit(rightclickData);
6661
+ }
6662
+ });
6663
+ }
6664
+ });
6665
+ }
6682
6666
  }
6683
6667
  }
6684
6668
  }
6685
6669
  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 });
6686
- 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" }] });
6670
+ 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" }] });
6687
6671
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GammaTableWithPercentageComponent, decorators: [{
6688
6672
  type: Component,
6689
- 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>" }]
6690
- }], ctorParameters: function () { return [{ type: CommonService }, { type: i2$2.ToastrService }]; }, propDecorators: { chartDataSource: [{
6673
+ 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)\" -->" }]
6674
+ }], ctorParameters: function () { return [{ type: CommonService }, { type: i2$2.ToastrService }]; }, propDecorators: { getTableConfigOutPut: [{
6675
+ type: Output
6676
+ }], oRowClick: [{
6677
+ type: Output
6678
+ }], onrightClickContextSelection: [{
6679
+ type: Output
6680
+ }], rightClickEnable: [{
6681
+ type: Input
6682
+ }], chartDataSource: [{
6691
6683
  type: Input,
6692
6684
  args: ['chartDataSource']
6693
6685
  }] } });
@@ -8409,7 +8401,7 @@ class ApplicationDatssetsCall {
8409
8401
  let resultObj = {
8410
8402
  columnName: filterKey,
8411
8403
  dataType: "string",
8412
- operator: filterKey,
8404
+ operator: "eq",
8413
8405
  value: filter[filterKey]
8414
8406
  };
8415
8407
  if (Array.isArray(filter[filterKey])) {
@@ -8565,7 +8557,7 @@ class ApplicationDatssetsCall {
8565
8557
  let resultObj = {
8566
8558
  columnName: filterKey,
8567
8559
  dataType: "string",
8568
- operator: filterKey,
8560
+ operator: "eq",
8569
8561
  value: filter[filterKey]
8570
8562
  };
8571
8563
  if (Array.isArray(filter[filterKey])) {
@@ -9706,13 +9698,14 @@ class PageConfigComponent {
9706
9698
  createDivElements(datasetById) {
9707
9699
  const container = this.dynamicContainer.nativeElement;
9708
9700
  container.innerHTML = "";
9701
+ const context_filter = this.dashBoardWidgetConfig.filters ? this.dashBoardWidgetConfig.filters.filterItems : null;
9709
9702
  this.dashBoardWidgetConfig.widgets.forEach(async (div) => {
9710
9703
  const rowDiv = document.createElement('div');
9711
9704
  let w_height = (div.widgetProperties.height == "") ? "h-auto" : 'h-[' + div.widgetProperties.height + ']';
9712
9705
  rowDiv.classList.add(div.widgetProperties.width, w_height, 'border');
9713
9706
  const filterDiv = document.createElement('div');
9714
9707
  const filterItems = (div.filters) ? div.filters.filterItems : [];
9715
- this.loadFilterComponent(div, filterDiv, filterItems);
9708
+ this.loadFilterComponent(div, filterDiv, filterItems, context_filter);
9716
9709
  rowDiv.appendChild(filterDiv);
9717
9710
  if (div.widgetNode && div.widgetNode.length && div.widgetNode.length != 0) {
9718
9711
  const mainItemDiv = document.createElement('div');
@@ -9895,13 +9888,14 @@ class PageConfigComponent {
9895
9888
  this.CompRefs.location.nativeElement.classList.add(cssClass);
9896
9889
  containerElement.appendChild(this.CompRefs.location.nativeElement);
9897
9890
  }
9898
- loadFilterComponent(indexObj, containerElement, filterItems) {
9891
+ loadFilterComponent(indexObj, containerElement, filterItems, context_filter) {
9899
9892
  let selectedDates = { startDate: this.defaultStartDate, endDate: this.defaultEndDate };
9900
9893
  const componentClass = this.componentClassMap['AppAdvanceHeaderComponent'];
9901
9894
  this.CompRefs = this.viewContainerRef.createComponent(componentClass);
9902
9895
  const dynamicComponentInstance = this.CompRefs.instance;
9903
9896
  dynamicComponentInstance.selectedDates = selectedDates;
9904
9897
  dynamicComponentInstance.filterItems = filterItems;
9898
+ dynamicComponentInstance.contextFilterItems = context_filter;
9905
9899
  dynamicComponentInstance.pageTitle = this.pageTitle;
9906
9900
  dynamicComponentInstance.isEditButton = false;
9907
9901
  dynamicComponentInstance.isAdvanceButton = true;
@@ -10173,7 +10167,7 @@ class PageConfigComponent {
10173
10167
  }
10174
10168
  }
10175
10169
  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 });
10176
- 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"] }] });
10170
+ 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"] }] });
10177
10171
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PageConfigComponent, decorators: [{
10178
10172
  type: Component,
10179
10173
  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"] }]
@@ -10232,9 +10226,11 @@ class PageControlerComponent {
10232
10226
  this.templateDataSource = [];
10233
10227
  this.componentTemplates = [
10234
10228
  { "compName": "KpiWithDataSetTestComponent", "item": "Default KPI Layout" },
10229
+ { "compName": "KpiWithMultilayoutSetTestComponent", "item": "Multiple Layout KPI" },
10235
10230
  { "compName": "LandingComponentComponent", "item": "Default Page" },
10236
10231
  { "compName": "CdrConfigComponent", "item": "CDR Config" },
10237
10232
  { "compName": "CreateKpiTreeComponent", "item": "Create KPI Config" },
10233
+ { "compName": "CreateMetricsComponent", "item": "Create Metrics" },
10238
10234
  ];
10239
10235
  }
10240
10236
  ngOnInit() {
@@ -10345,7 +10341,12 @@ class PageControlerComponent {
10345
10341
  'contentType': "edit",
10346
10342
  }
10347
10343
  };
10348
- this.router.navigate(['/apps/controlPanel/pageConfigController'], navigation);
10344
+ if (item.pageTemplate == "KpiWithMultilayoutSetTestComponent") {
10345
+ this.router.navigate(['/apps/controlPanel/multiPageConfigController'], navigation);
10346
+ }
10347
+ else {
10348
+ this.router.navigate(['/apps/controlPanel/pageConfigController'], navigation);
10349
+ }
10349
10350
  }
10350
10351
  getCreateDashboard() {
10351
10352
  this.router.navigateByUrl('/apps/controlPanel/pageConfigController');
@@ -10736,31 +10737,985 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
10736
10737
  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>" }]
10737
10738
  }], ctorParameters: function () { return [{ type: CommonService }]; } });
10738
10739
 
10739
- const appRoutes = [
10740
- {
10741
- path: '',
10742
- redirectTo: 'applicationDataset',
10743
- pathMatch: 'full'
10744
- },
10745
- {
10746
- path: 'applicationDataset',
10747
- component: ApplicationDatasetComponent,
10748
- },
10749
- {
10750
- path: 'applicationViews',
10751
- component: ApplicationViewsComponent,
10752
- },
10753
- {
10754
- path: 'applicationFilter',
10755
- component: ApplicationFilterComponent,
10756
- },
10757
- {
10758
- path: 'applicationDashboard',
10759
- component: PageControlerComponent,
10760
- },
10761
- {
10762
- path: 'pageConfigController',
10763
- component: PageConfigComponent,
10740
+ class PageConfigMultilayoutComponent {
10741
+ constructor(commonService, activatedRoute, viewContainerRef, componentFactoryResolver, service, toastr, router, datasetService) {
10742
+ this.commonService = commonService;
10743
+ this.activatedRoute = activatedRoute;
10744
+ this.viewContainerRef = viewContainerRef;
10745
+ this.componentFactoryResolver = componentFactoryResolver;
10746
+ this.service = service;
10747
+ this.toastr = toastr;
10748
+ this.router = router;
10749
+ this.datasetService = datasetService;
10750
+ this.dashbord_container = [];
10751
+ 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'];
10752
+ this.loadingModal = true;
10753
+ this.page_title = 'Dashboard';
10754
+ this.isToggleSwich = true;
10755
+ this.isDatePicker = false;
10756
+ this.isToggleEventStatus = false;
10757
+ this.isEditClick = false;
10758
+ this.isUpdateWidget = false;
10759
+ this.dynamicComponentRefs = [];
10760
+ this.componentClassMap = {
10761
+ GammaAdvanceChartComponent,
10762
+ GammaTodayPreviousComponent,
10763
+ AppAdvanceHeaderComponent,
10764
+ GammaTableWithPercentageComponent,
10765
+ GammSingleNumberCardComponent,
10766
+ GammaAdvanceOperatorTableComponent,
10767
+ AdvanceWidgetHeaderFilterComponent,
10768
+ GammaGeoChartComponent
10769
+ };
10770
+ this.dataSourceMataData = [];
10771
+ this.queryType = "mongo";
10772
+ this.dataSetModal = [];
10773
+ this.componentConfigDataSource = [];
10774
+ this.dataSourceModal = {};
10775
+ this.isDashBoardContent = false;
10776
+ this.selectedViewFormComponent = {};
10777
+ this.addedwidGetConfig = {
10778
+ "display": true,
10779
+ "widgetTitle": "",
10780
+ "width": "",
10781
+ "height": "",
10782
+ "isWidgetFilter": false
10783
+ };
10784
+ this.dashBoardWidgetConfig = [];
10785
+ this.selectedIndexObjForChart = {};
10786
+ this.selectedContainerObjectForChart = {};
10787
+ this.uniqueDataSetObject = {};
10788
+ this.islayoutCreate = false;
10789
+ this.isDefaultView = true;
10790
+ this.viewToSearch = '';
10791
+ this.filteredComponentConfig = [];
10792
+ this.editViewdataSourceModal = {};
10793
+ this.editItemForUpdate = {};
10794
+ this.allWidgetByDataset = [];
10795
+ this.nodeProperticeFilters = [];
10796
+ this.selectedFilterDatasource = {};
10797
+ this.selectedViewsIds = [];
10798
+ this.advanceLayoutContainer = [];
10799
+ }
10800
+ ngOnInit() {
10801
+ this.isDashBoardContentTypeView = (this.activatedRoute.snapshot.queryParams['contentType'] == 'view') ? true : false;
10802
+ this.pageId = this.activatedRoute.snapshot.queryParams['pageId'];
10803
+ this.getDataSet();
10804
+ this.defaultStartDate = moment().subtract('10', 'days').format('YYYY-MM-DD');
10805
+ this.defaultEndDate = moment().subtract('1', 'days').format('YYYY-MM-DD');
10806
+ this.getFilterItems();
10807
+ this.getAllViewsItems();
10808
+ this.getAppPageDetailConfigByPageId();
10809
+ }
10810
+ getAllViewsItems() {
10811
+ this.service.getAppViewConfigs().subscribe({
10812
+ next: (data) => {
10813
+ this.componentConfigDataSource = data;
10814
+ this.filteredComponentConfig = this.componentConfigDataSource;
10815
+ }, error: (err) => {
10816
+ this.toastr.error('Unexpected Server Exception. Please contact System Admin.', 'View Config');
10817
+ }
10818
+ });
10819
+ }
10820
+ getFilterItems() {
10821
+ this.service.getAppFilterConfigs().subscribe({
10822
+ next: (data) => {
10823
+ this.filterDataSource = data;
10824
+ }, error: (err) => {
10825
+ this.toastr.error('Unexpected Server Exception. Please contact System Admin.', 'Error');
10826
+ }
10827
+ });
10828
+ }
10829
+ getAppPageDetailConfigByPageId() {
10830
+ this.service.getAppPageDetailConfig(this.pageId).subscribe({
10831
+ next: (data) => {
10832
+ this.dashBoardWidgetConfig = data;
10833
+ this.pageTitle = data.pageName;
10834
+ this.pageUrl = data.pageUrl;
10835
+ if (data.widgets && data.widgets.length !== 0) {
10836
+ this.getComponentConfigSet();
10837
+ }
10838
+ else {
10839
+ this.loadingModal = false;
10840
+ }
10841
+ },
10842
+ error: (err) => {
10843
+ this.toastr.error('Unexpected Server Exception. Please contact System Admin.', 'Error');
10844
+ }
10845
+ });
10846
+ }
10847
+ getComponentConfigSet() {
10848
+ let defaultFilters = { operationFilter: { startDate: "", endDate: "" } };
10849
+ this.dashBoardWidgetConfig.widgets.forEach(widget => {
10850
+ if (widget.filters) {
10851
+ widget.filters.filterItems.forEach(element => {
10852
+ if (element.filterType === 'date' || element.filterType === 'datetime') {
10853
+ if (element.defaultFilterType === "dynamic" && element.momentFunction !== "" && element.defaultFilterValue !== "" && element.momentFormat !== "") {
10854
+ let [count, unit] = element.defaultFilterValue.split(',');
10855
+ if (element.apiName === "endDate") {
10856
+ if (element.display) {
10857
+ defaultFilters.operationFilter.endDate = moment()[element.momentFunction](parseInt(count), unit).format(element.momentFormat);
10858
+ this.defaultEndDate = moment()[element.momentFunction](parseInt(count), unit).format(element.momentFormat);
10859
+ }
10860
+ }
10861
+ if (element.apiName === "startDate") {
10862
+ defaultFilters.operationFilter.startDate = moment()[element.momentFunction](parseInt(count), unit).format(element.momentFormat);
10863
+ }
10864
+ }
10865
+ else if (element.defaultFilterType === "static" && element.defaultFilterValue !== "") {
10866
+ if (element.apiName === "endDate") {
10867
+ if (element.display) {
10868
+ defaultFilters.operationFilter.endDate = element.defaultFilterValue;
10869
+ this.defaultEndDate = element.defaultFilterValue;
10870
+ }
10871
+ }
10872
+ if (element.apiName === "startDate") {
10873
+ defaultFilters.operationFilter.startDate = element.defaultFilterValue;
10874
+ this.defaultStartDate = element.defaultFilterValue;
10875
+ }
10876
+ }
10877
+ }
10878
+ else {
10879
+ if ((typeof element.filterDataSourceValue === "string" && element.filterDataSourceValue !== "") ||
10880
+ (Array.isArray(element.filterDataSourceValue) && element.filterDataSourceValue.length > 0)) {
10881
+ if (element.operatorName !== "") {
10882
+ defaultFilters.operationFilter[element.operatorName] = Array.isArray(element.filterDataSourceValue)
10883
+ ? element.filterDataSourceValue
10884
+ : [element.filterDataSourceValue];
10885
+ }
10886
+ else {
10887
+ defaultFilters.operationFilter[element.apiName] = element.filterDataSourceValue.join(",");
10888
+ }
10889
+ }
10890
+ }
10891
+ });
10892
+ }
10893
+ });
10894
+ let apiCalls = [];
10895
+ this.defaultApplyedFilter = defaultFilters;
10896
+ Promise.all(apiCalls).then(() => {
10897
+ this.createDivElements(this.uniqueDataSetObject);
10898
+ this.loadingModal = false;
10899
+ });
10900
+ }
10901
+ ngOnDestroy() {
10902
+ }
10903
+ getDataSet() {
10904
+ this.isLoader = true;
10905
+ this.service.getAppDatasetConfigs().subscribe({
10906
+ next: (data) => {
10907
+ this.dataSettableDataSource = data;
10908
+ this.isLoader = false;
10909
+ }, error: (err) => {
10910
+ this.toastr.error('Unexpected Server Exception. Please contact System Admin.', 'Dataset Creation');
10911
+ }
10912
+ });
10913
+ }
10914
+ getComponentConfig(event) {
10915
+ const foundObject = this.componentConfigDataSource.find(view => view.viewId === event.viewId);
10916
+ this.getEmitNewChartConfig(foundObject);
10917
+ this.loadingModal = true;
10918
+ }
10919
+ addNewchart() {
10920
+ this.isGenerate = false;
10921
+ this.isChartButtonClick = true;
10922
+ this.isWidgetCreationContent = false;
10923
+ this.isDefaultView = false;
10924
+ }
10925
+ addWidget() {
10926
+ this.newWidgetIndex = undefined;
10927
+ this.isWidgetCreationContent = true;
10928
+ this.isDefaultView = false;
10929
+ this.isEditMainLayout = false;
10930
+ this.isChartButtonClick = false;
10931
+ this.isUpdateWidget = false;
10932
+ this.widgetName = '';
10933
+ this.widgetTitle = '';
10934
+ this.addedwidGetConfig = {
10935
+ "display": true,
10936
+ "widgetTitle": "",
10937
+ "width": "",
10938
+ "height": "",
10939
+ "isWidgetFilter": false
10940
+ };
10941
+ }
10942
+ getWith(e) {
10943
+ this.selectedWidth = e.value;
10944
+ }
10945
+ getHeight(e) {
10946
+ this.selectedHeight = e.value;
10947
+ }
10948
+ addLayoutTOview() {
10949
+ let inner_node = {
10950
+ id: this.commonService.primeryRendomeId(5),
10951
+ nodeTitle: "",
10952
+ filterId: this.selectedFilterId,
10953
+ nodeProperties: this.addedwidGetConfig,
10954
+ compConfig: {
10955
+ dynamicComponentRefs: [],
10956
+ viewConfig: []
10957
+ },
10958
+ };
10959
+ if (this.dashBoardWidgetConfig.widgets[this.newWidgetIndex].widgetNode) {
10960
+ this.dashBoardWidgetConfig.widgets[this.newWidgetIndex].widgetNode.push(inner_node);
10961
+ }
10962
+ else {
10963
+ this.dashBoardWidgetConfig.widgets[this.newWidgetIndex].widgetNode = [];
10964
+ this.dashBoardWidgetConfig.widgets[this.newWidgetIndex].widgetNode.push(inner_node);
10965
+ }
10966
+ this.loadingModal = true;
10967
+ this.updateWidget();
10968
+ }
10969
+ reformatWidgetConfig(dashBoardWidgetConfig, index = null) {
10970
+ const processWidget = (widget) => {
10971
+ widget.compConfig.viewConfig = widget.compConfig.viewConfig.map(config => config.viewId);
10972
+ widget.compConfig.dynamicComponentRefs = [];
10973
+ if (widget.widgetNode && widget.widgetNode.length > 0) {
10974
+ widget.widgetNode.forEach(node => {
10975
+ node.compConfig.viewConfig = node.compConfig.viewConfig.map(config => config.viewId);
10976
+ node.compConfig.dynamicComponentRefs = [];
10977
+ });
10978
+ }
10979
+ };
10980
+ if (index !== null && index >= 0 && index < dashBoardWidgetConfig.widgets.length) {
10981
+ processWidget(dashBoardWidgetConfig.widgets[index]);
10982
+ }
10983
+ else {
10984
+ dashBoardWidgetConfig.widgets.forEach(widget => processWidget(widget));
10985
+ }
10986
+ return dashBoardWidgetConfig.widgets[index];
10987
+ }
10988
+ updateWidget() {
10989
+ let modifiedConfig = this.reformatWidgetConfig(this.dashBoardWidgetConfig, this.newWidgetIndex);
10990
+ modifiedConfig['filterId'] = (modifiedConfig.filters && modifiedConfig.filters.filterId) ? modifiedConfig.filters.filterId : null;
10991
+ delete modifiedConfig['filters'];
10992
+ this.service.editAppWidgetConfig(modifiedConfig).subscribe({
10993
+ next: (data) => {
10994
+ this.getAppPageDetailConfigByPageId();
10995
+ this.backToMainView();
10996
+ }, error: (err) => {
10997
+ this.loadingModal = false;
10998
+ this.toastr.error('Unexpected Server Exception. Please contact System Admin.', 'Widget Creation');
10999
+ }
11000
+ });
11001
+ this.newWidgetIndex = undefined;
11002
+ this.isWidgetCreationContent = false;
11003
+ this.isDefaultView = true;
11004
+ }
11005
+ updateLayoutWidgetTOview() {
11006
+ this.loadingModal = true;
11007
+ this.updateWidget();
11008
+ }
11009
+ addWidgetTOview() {
11010
+ let obj = {
11011
+ widgetId: this.commonService.primeryRendomeId(5),
11012
+ widgetName: this.widgetName,
11013
+ widgetTitle: this.widgetTitle,
11014
+ widgetProperties: this.addedwidGetConfig,
11015
+ pageId: this.pageId,
11016
+ filterId: this.selectedFilterId,
11017
+ widgetNode: [],
11018
+ compConfig: {
11019
+ dynamicComponentRefs: [],
11020
+ viewConfig: []
11021
+ },
11022
+ };
11023
+ this.loadingModal = true;
11024
+ this.service.createAppWidgetConfig(obj).subscribe({
11025
+ next: (data) => {
11026
+ this.loadingModal = false;
11027
+ this.getAppPageDetailConfigByPageId();
11028
+ }, error: (err) => {
11029
+ this.loadingModal = false;
11030
+ this.toastr.error('Unexpected Server Exception. Please contact System Admin.', 'Widget Creation');
11031
+ }
11032
+ });
11033
+ this.dashBoardWidgetConfig.widgets.push(obj);
11034
+ this.dynamicContainer.nativeElement.innerHTML = '';
11035
+ this.isWidgetCreationContent = false;
11036
+ this.isDefaultView = true;
11037
+ }
11038
+ insertNewWiget(index) {
11039
+ this.addedwidGetConfig = {
11040
+ "display": true,
11041
+ "widgetTitle": "",
11042
+ "width": "",
11043
+ "height": "",
11044
+ "isWidgetFilter": false
11045
+ };
11046
+ this.isUpdateWidget = false;
11047
+ this.isWidgetCreationContent = true;
11048
+ this.isDefaultView = false;
11049
+ this.isChartButtonClick = false;
11050
+ this.islayoutCreate = true;
11051
+ this.newWidgetIndex = index;
11052
+ }
11053
+ insertChartWiget(indexObj, containerElement) {
11054
+ this.isGenerate = false;
11055
+ this.isChartButtonClick = true;
11056
+ this.isWidgetCreationContent = false;
11057
+ this.isDefaultView = false;
11058
+ this.selectedContainerObjectForChart = containerElement;
11059
+ this.selectedIndexObjForChart = indexObj;
11060
+ this.selectedViewFormComponent = {};
11061
+ }
11062
+ async getEmitNewChartConfig(data) {
11063
+ this.selectedIndexObjForChart.compConfig.viewConfig.push(data);
11064
+ this.loadDynamicComponent(data, this.selectedIndexObjForChart, this.selectedContainerObjectForChart);
11065
+ console.log(this.dashBoardWidgetConfig);
11066
+ this.updateWidget();
11067
+ this.loadingModal = false;
11068
+ this.isChartButtonClick = false;
11069
+ }
11070
+ updateToView() {
11071
+ this.loadingModal = true;
11072
+ this.updateWidget();
11073
+ }
11074
+ deleteWidget(item, index) {
11075
+ this.dashBoardWidgetConfig.widgets.splice(index, 1);
11076
+ this.newWidgetIndex = undefined;
11077
+ }
11078
+ deleteInsertWidget(item, childIndex, parentIndex) {
11079
+ this.dashBoardWidgetConfig.widgets[parentIndex].widgetNode.splice(childIndex, 1);
11080
+ this.newWidgetIndex = undefined;
11081
+ }
11082
+ getWidgetTitleDiv(item, div) {
11083
+ const widgetDiv = document.createElement('div');
11084
+ 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');
11085
+ const titleDiv = document.createElement('div');
11086
+ titleDiv.innerText = (item.nodeProperties) ? item.nodeProperties.widgetTitle : "";
11087
+ widgetDiv.append(titleDiv);
11088
+ const editIcon = document.createElement('i');
11089
+ editIcon.classList.add('fa', 'fa-pencil', 'ml-2', 'cursor-pointer', 'text-blue-400', 'hover:text-blue-700');
11090
+ widgetDiv.append(editIcon);
11091
+ if (item.nodeProperties.isWidgetFilter) {
11092
+ const searchContainerDiv = document.createElement('div');
11093
+ searchContainerDiv.classList.add('flex', 'items-center', 'space-x-2');
11094
+ const searchButton = document.createElement('button');
11095
+ searchButton.innerText = 'Filter';
11096
+ searchButton.classList.add('px-3', 'py-1.5', 'bg-blue-600', 'mr-2', 'text-white', 'rounded', 'hover:bg-blue-700');
11097
+ this.nodeproperticeFilterDataSource = [];
11098
+ searchButton.addEventListener('click', () => {
11099
+ this.isWidgetFilters = true;
11100
+ let filtePropertice = [];
11101
+ item.compConfig.viewConfig.forEach(element => {
11102
+ let key_name = this.uniqueDataSetObject[element.datasetId][0];
11103
+ Object.keys(key_name).forEach(key => {
11104
+ if (!filtePropertice.includes(key)) {
11105
+ filtePropertice.push(key);
11106
+ }
11107
+ });
11108
+ });
11109
+ filtePropertice.forEach(element => {
11110
+ let obj = {
11111
+ columnName: element,
11112
+ dataType: "float",
11113
+ operator: "",
11114
+ value: "",
11115
+ };
11116
+ this.nodeproperticeFilterDataSource.push(obj);
11117
+ });
11118
+ });
11119
+ searchContainerDiv.appendChild(searchButton);
11120
+ widgetDiv.appendChild(titleDiv);
11121
+ widgetDiv.appendChild(searchContainerDiv);
11122
+ }
11123
+ if (item.filterId) {
11124
+ this.nodeproperticeFilterDataSource = {};
11125
+ this.nodeproperticeFilterDataSource['viewConfig'] = item;
11126
+ this.nodeproperticeFilterDataSource['havingConfig'] = [];
11127
+ this.service.getAppFilterConfig(item.filterId).subscribe({
11128
+ next: (data) => {
11129
+ const filterDiv = document.createElement('div');
11130
+ this.loadWidgetFilterComponent(item, widgetDiv, data.filterItems);
11131
+ }, error: (err) => {
11132
+ }
11133
+ });
11134
+ }
11135
+ if (item.nodeProperties.nodefilters && item.nodeProperties.nodefilters.length !== 0) {
11136
+ const searchContainerDiv = document.createElement('div');
11137
+ searchContainerDiv.classList.add('flex', 'items-center', 'space-x-2');
11138
+ item.nodeProperties.nodefilters.forEach(filter => {
11139
+ const filterDiv = document.createElement('div');
11140
+ filterDiv.classList.add('flex', 'items-center');
11141
+ if (filter.input_type === 'text') {
11142
+ const textBox = document.createElement('input');
11143
+ textBox.type = 'text';
11144
+ textBox.placeholder = `Enter ${filter.local_column}`;
11145
+ 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');
11146
+ const searchButton = document.createElement('button');
11147
+ searchButton.innerText = 'Search';
11148
+ searchButton.classList.add('px-3', 'py-1.5', 'bg-blue-600', 'mr-2', 'text-white', 'rounded', 'hover:bg-blue-700');
11149
+ const separerotButton = document.createElement('div');
11150
+ separerotButton.innerHTML = '|';
11151
+ searchButton.addEventListener('click', () => {
11152
+ const searchTerm = textBox.value;
11153
+ console.log('Text search button clicked with:', searchTerm);
11154
+ });
11155
+ filterDiv.appendChild(textBox);
11156
+ filterDiv.appendChild(searchButton);
11157
+ filterDiv.appendChild(separerotButton);
11158
+ }
11159
+ searchContainerDiv.appendChild(filterDiv);
11160
+ });
11161
+ widgetDiv.appendChild(searchContainerDiv);
11162
+ }
11163
+ editIcon.addEventListener('click', () => {
11164
+ this.newWidgetIndex = this.dashBoardWidgetConfig.widgets.findIndex(object => object.widgetId === div.widgetId);
11165
+ this.isUpdateWidget = true;
11166
+ this.islayoutCreate = true;
11167
+ this.isWidgetCreationContent = true;
11168
+ this.isDefaultView = false;
11169
+ this.isChartButtonClick = false;
11170
+ this.nodeProperticeFilters = (item.nodeProperties.nodefilters && item.nodeProperties.nodefilters.length !== 0) ? item.nodeProperties.nodefilters : [];
11171
+ item.nodeProperties['nodefilters'] = this.nodeProperticeFilters;
11172
+ this.addedwidGetConfig = item.nodeProperties;
11173
+ this.allWidgetInnerContent = item.compConfig.viewConfig;
11174
+ this.selectedFilterId = (item.filterId) ? item.filterId : "";
11175
+ this.editViewdataSourceModal = {};
11176
+ this.selectedFilterDatasource = item;
11177
+ });
11178
+ return widgetDiv;
11179
+ }
11180
+ getFilterValueById(event) {
11181
+ if (event.event) {
11182
+ this.service.getAppFilterConfig(event.value).subscribe({
11183
+ next: (data) => {
11184
+ if (Object.keys(this.selectedFilterDatasource).length !== 0) {
11185
+ this.selectedFilterDatasource.filterId = this.selectedFilterId;
11186
+ }
11187
+ else {
11188
+ this.dashBoardWidgetConfig.widgets[this.newWidgetIndex].filters = data;
11189
+ }
11190
+ this.toastr.success("Filter Changed");
11191
+ }, erroe: (err) => {
11192
+ this.toastr.error('Unexpected Server Exception. Please contact System Admin.', 'Filter Update');
11193
+ }
11194
+ });
11195
+ }
11196
+ }
11197
+ createDivElements(datasetById) {
11198
+ const container = this.dynamicContainer.nativeElement;
11199
+ container.innerHTML = "";
11200
+ const multiItemDiv = document.createElement('div');
11201
+ multiItemDiv.classList.add("flex", "flex-row", "justify-between");
11202
+ const context_filter = this.dashBoardWidgetConfig.filters ? this.dashBoardWidgetConfig.filters.filterItems : null;
11203
+ this.dashBoardWidgetConfig.widgets.forEach(async (div) => {
11204
+ const rowDiv = document.createElement('div');
11205
+ let w_height = (div.widgetProperties.height == "") ? "h-auto" : 'h-[' + div.widgetProperties.height + ']';
11206
+ rowDiv.classList.add(div.widgetProperties.width, w_height, 'border');
11207
+ const filterDiv = document.createElement('div');
11208
+ const filterItems = (div.filters) ? div.filters.filterItems : [];
11209
+ this.loadFilterComponent(div, filterDiv, filterItems, context_filter);
11210
+ rowDiv.appendChild(filterDiv);
11211
+ if (div.widgetNode && div.widgetNode.length && div.widgetNode.length != 0) {
11212
+ const mainItemDiv = document.createElement('div');
11213
+ mainItemDiv.classList.add("flex", "flex-wrap", "w-full");
11214
+ this.loadWidgetNodes(div, mainItemDiv, datasetById);
11215
+ rowDiv.appendChild(mainItemDiv);
11216
+ }
11217
+ const p_innerDiv = document.createElement('div');
11218
+ p_innerDiv.classList.add('rounded', 'justify-center', 'items-center', 'border', 'p-1', 'm-1', 'flex', 'flex-row');
11219
+ const p_button_widget = document.createElement('div');
11220
+ p_button_widget.innerText = 'Add Single Layout';
11221
+ p_button_widget.classList.add('bg-blue-700', "p-1", "w-fit", "cursor-pointer", 'text-xs');
11222
+ p_button_widget.addEventListener('click', () => {
11223
+ let index = this.dashBoardWidgetConfig.widgets.findIndex(object => object.widgetId === div.widgetId);
11224
+ this.insertNewWiget(index);
11225
+ });
11226
+ const p_del_button = document.createElement('div');
11227
+ p_del_button.innerText = 'Detete layout';
11228
+ p_del_button.classList.add('bg-red-700', "p-1", "w-fit", "cursor-pointer", 'text-xs');
11229
+ p_del_button.addEventListener('click', () => {
11230
+ let result = confirm("<i>Are You Sure?</i>", "Delete Layout");
11231
+ result.then((dialogResult) => {
11232
+ if (dialogResult) {
11233
+ this.loadingModal = true;
11234
+ this.dashBoardWidgetConfig.widgets = this.dashBoardWidgetConfig.widgets.map(config => config.widgetId);
11235
+ rowDiv.remove();
11236
+ this.service.editAppPageConfig(this.dashBoardWidgetConfig).subscribe({
11237
+ next: (data) => {
11238
+ this.getAppPageDetailConfigByPageId();
11239
+ }, error: (err) => {
11240
+ this.loadingModal = false;
11241
+ this.toastr.error('Unexpected Server Exception. Please contact System Admin.', 'Widget Creation');
11242
+ }
11243
+ });
11244
+ this.newWidgetIndex = undefined;
11245
+ this.isWidgetCreationContent = false;
11246
+ this.isDefaultView = true;
11247
+ }
11248
+ });
11249
+ });
11250
+ const advance_button = document.createElement('div');
11251
+ advance_button.innerText = 'Advance Layout';
11252
+ advance_button.classList.add('bg-yellow-700', "p-1", "w-fit", "cursor-pointer", 'text-xs');
11253
+ advance_button.addEventListener('click', () => {
11254
+ const comp_object = this.findWidgetById(this.dashBoardWidgetConfig.widgets, div.widgetId);
11255
+ this.newWidgetIndex = this.dashBoardWidgetConfig.widgets.findIndex(object => object.widgetId === div.widgetId);
11256
+ this.isAdvanceLayout = true;
11257
+ });
11258
+ p_innerDiv.appendChild(advance_button);
11259
+ p_innerDiv.appendChild(p_button_widget);
11260
+ p_innerDiv.appendChild(p_del_button);
11261
+ if (!this.isDashBoardContentTypeView) {
11262
+ rowDiv.appendChild(p_innerDiv);
11263
+ }
11264
+ multiItemDiv.appendChild(rowDiv);
11265
+ container.appendChild(multiItemDiv);
11266
+ });
11267
+ }
11268
+ loadWidgetNodes(div, mainItemDiv, datasetById) {
11269
+ div.widgetNode.forEach(item => {
11270
+ this.loadSingleWidgetNode(item, mainItemDiv, datasetById, div);
11271
+ });
11272
+ }
11273
+ loadSingleWidgetNode(item, containerElement, datasetById, div) {
11274
+ let w_height = (item.nodeProperties.height == "") ? "h-auto" : 'h-[' + item.nodeProperties.height + ']';
11275
+ let w_width = (item.nodeProperties.width == "") ? "w-full" : item.nodeProperties.width;
11276
+ const itemDiv = document.createElement('div');
11277
+ itemDiv.classList.add(w_width, w_height, 'border', 'p-1');
11278
+ const flexContainer = document.createElement('div');
11279
+ flexContainer.classList.add('flex', 'justify-between', 'items-center', 'text-gray-900', 'dark:text-white', 'bg-gray-800', 'mx-2', 'rounded-t-lg');
11280
+ const widgetDiv = this.getWidgetTitleDiv(item, div);
11281
+ item.compConfig.viewConfig.forEach(element => {
11282
+ if (element.kpiConfig) {
11283
+ let apiCalls = [];
11284
+ this.service.getAppDatasetConfig(element.datasetId).subscribe({
11285
+ next: (dataset) => {
11286
+ if (dataset.datasetType !== "sqlQuery" && dataset.datasetType !== "plainjson") {
11287
+ const datasetWithLimit = this.setDataSetsLimit(dataset);
11288
+ apiCalls.push(this.datasetService.getDataFromDataSet(datasetWithLimit, datasetWithLimit.datasetId, this.defaultApplyedFilter));
11289
+ }
11290
+ else {
11291
+ apiCalls.push(this.datasetService.getDataFromDataSet(dataset, dataset.datasetId, this.defaultApplyedFilter));
11292
+ }
11293
+ Promise.all(apiCalls).then(() => {
11294
+ this.uniqueDataSetObject = this.datasetService.getUniqueDataSetObject();
11295
+ element.kpiConfig['dataSource'] = this.uniqueDataSetObject[element.datasetId];
11296
+ const comp_object = this.findWidgetById(this.dashBoardWidgetConfig.widgets, item.id);
11297
+ this.loadDynamicComponent(element, comp_object, itemDiv);
11298
+ });
11299
+ }, error: (err) => {
11300
+ }
11301
+ });
11302
+ }
11303
+ });
11304
+ flexContainer.appendChild(widgetDiv);
11305
+ const buttonsContainer = document.createElement('div');
11306
+ buttonsContainer.classList.add('flex', 'mx-2');
11307
+ const innerDiv = document.createElement('div');
11308
+ innerDiv.classList.add('rounded', 'justify-center', 'items-center', 'p-1', 'm-1', 'flex', 'flex-row');
11309
+ const button_chart = document.createElement('div');
11310
+ button_chart.innerText = 'Add View';
11311
+ button_chart.classList.add('bg-green-700', "p-1", "w-fit", "cursor-pointer", 'text-xs');
11312
+ button_chart.addEventListener('click', () => {
11313
+ this.newWidgetIndex = this.dashBoardWidgetConfig.widgets.findIndex(object => object.widgetId === div.widgetId);
11314
+ const comp_object = this.findWidgetById(this.dashBoardWidgetConfig.widgets, item.id);
11315
+ this.insertChartWiget(comp_object, itemDiv);
11316
+ });
11317
+ const del_button_chart = document.createElement('div');
11318
+ del_button_chart.innerText = 'Detete';
11319
+ del_button_chart.classList.add('bg-red-700', "p-1", "w-fit", "cursor-pointer", 'text-xs');
11320
+ del_button_chart.addEventListener('click', () => {
11321
+ let result = confirm("<i>Are You Sure?</i>", "Delete View");
11322
+ result.then((dialogResult) => {
11323
+ if (dialogResult) {
11324
+ let widgetIndex = this.dashBoardWidgetConfig.widgets.findIndex(object => object.widgetId === div.widgetId);
11325
+ const mapedObject = this.dashBoardWidgetConfig.widgets[widgetIndex];
11326
+ if (mapedObject.widgetNode && mapedObject.widgetNode.length > 0) {
11327
+ let mapIndex = mapedObject.widgetNode.findIndex(ind => ind.id === item.id);
11328
+ mapedObject.widgetNode.forEach(node => {
11329
+ node.compConfig.viewConfig = node.compConfig.viewConfig.map(config => config.viewId);
11330
+ node.compConfig.dynamicComponentRefs = [];
11331
+ });
11332
+ mapedObject.widgetNode.splice(mapIndex, 1);
11333
+ }
11334
+ mapedObject['filterId'] = (mapedObject.filters) ? mapedObject.filters.filterId : null;
11335
+ delete mapedObject['filters'];
11336
+ mapedObject.compConfig.dynamicComponentRefs = [];
11337
+ this.service.editAppWidgetConfig(mapedObject).subscribe({
11338
+ next: (data) => {
11339
+ this.getAppPageDetailConfigByPageId();
11340
+ }, error: (err) => {
11341
+ this.loadingModal = false;
11342
+ this.toastr.error('Unexpected Server Exception. Please contact System Admin.', 'Widget Creation');
11343
+ }
11344
+ });
11345
+ this.newWidgetIndex = undefined;
11346
+ itemDiv.remove();
11347
+ }
11348
+ });
11349
+ });
11350
+ buttonsContainer.appendChild(button_chart);
11351
+ buttonsContainer.appendChild(del_button_chart);
11352
+ flexContainer.appendChild(buttonsContainer);
11353
+ if (!this.isDashBoardContentTypeView) {
11354
+ }
11355
+ itemDiv.appendChild(flexContainer);
11356
+ containerElement.appendChild(itemDiv);
11357
+ }
11358
+ findWidgetById(configs, id) {
11359
+ for (const config of configs) {
11360
+ if (config.id === id) {
11361
+ return config;
11362
+ }
11363
+ if (config.widgetNode && config.widgetNode.length > 0) {
11364
+ const found = this.findWidgetById(config.widgetNode, id);
11365
+ if (found) {
11366
+ return found;
11367
+ }
11368
+ }
11369
+ }
11370
+ return undefined;
11371
+ }
11372
+ deleteWidgetById(configs, id) {
11373
+ for (let i = configs.length - 1; i >= 0; i--) {
11374
+ if (configs[i].id === id) {
11375
+ configs.splice(i, 1);
11376
+ }
11377
+ else if (configs[i].widgetNode && configs[i].widgetNode.length > 0) {
11378
+ this.deleteWidgetById(configs[i].widgetNode, id);
11379
+ }
11380
+ }
11381
+ }
11382
+ loadDynamicComponent(data, indexObj, containerElement) {
11383
+ const componentClass = this.componentClassMap[data.kpiConfig['componentName']];
11384
+ this.CompRefs = this.viewContainerRef.createComponent(componentClass);
11385
+ const dynamicComponentInstance = this.CompRefs.instance;
11386
+ dynamicComponentInstance.chartDataSource = data;
11387
+ dynamicComponentInstance.kpi_name = "";
11388
+ indexObj.compConfig.dynamicComponentRefs.push(this.CompRefs);
11389
+ const cssClass = "w-full";
11390
+ this.CompRefs.location.nativeElement.classList.add(cssClass);
11391
+ containerElement.appendChild(this.CompRefs.location.nativeElement);
11392
+ }
11393
+ loadFilterComponent(indexObj, containerElement, filterItems, context_filter) {
11394
+ let selectedDates = { startDate: this.defaultStartDate, endDate: this.defaultEndDate };
11395
+ const componentClass = this.componentClassMap['AppAdvanceHeaderComponent'];
11396
+ this.CompRefs = this.viewContainerRef.createComponent(componentClass);
11397
+ const dynamicComponentInstance = this.CompRefs.instance;
11398
+ dynamicComponentInstance.selectedDates = selectedDates;
11399
+ dynamicComponentInstance.filterItems = filterItems;
11400
+ dynamicComponentInstance.contextFilterItems = context_filter;
11401
+ dynamicComponentInstance.pageTitle = this.pageTitle;
11402
+ dynamicComponentInstance.isEditButton = false;
11403
+ dynamicComponentInstance.isAdvanceButton = true;
11404
+ indexObj.compConfig.dynamicComponentRefs.push(this.CompRefs);
11405
+ const cssClass = "w-full";
11406
+ this.CompRefs.location.nativeElement.classList.add(cssClass);
11407
+ containerElement.appendChild(this.CompRefs.location.nativeElement);
11408
+ }
11409
+ loadWidgetFilterComponent(indexObj, containerElement, filterItems) {
11410
+ let userName = localStorage.getItem('user_name');
11411
+ let selectedDates = { startDate: this.defaultStartDate, endDate: this.defaultEndDate };
11412
+ const componentClass = this.componentClassMap['AdvanceWidgetHeaderFilterComponent'];
11413
+ this.CompRefs = this.viewContainerRef.createComponent(componentClass);
11414
+ const dynamicComponentInstance = this.CompRefs.instance;
11415
+ dynamicComponentInstance.selectedDates = selectedDates;
11416
+ dynamicComponentInstance.filterItems = filterItems;
11417
+ dynamicComponentInstance.getWidgetFilterConfig.subscribe((value) => {
11418
+ this.getWidgetFilterForTemplate(value);
11419
+ });
11420
+ indexObj.compConfig.dynamicComponentRefs.push(this.CompRefs);
11421
+ containerElement.appendChild(this.CompRefs.location.nativeElement);
11422
+ }
11423
+ getDeleteViewFromConfig(index) {
11424
+ console.log(index);
11425
+ this.allWidgetInnerContent.splice(index, 1);
11426
+ }
11427
+ moveItemForPageView(index, direction) {
11428
+ if (index < 0 || index >= this.dashBoardWidgetConfig.widgets[this.newWidgetIndex].widgetNode.length)
11429
+ return;
11430
+ const newPosition = direction === 'up' ? index - 1 : index + 1;
11431
+ if (newPosition < 0 || newPosition >= this.dashBoardWidgetConfig.widgets[this.newWidgetIndex].widgetNode.length)
11432
+ return;
11433
+ const itemToMove = this.dashBoardWidgetConfig.widgets[this.newWidgetIndex].widgetNode[index];
11434
+ this.dashBoardWidgetConfig.widgets[this.newWidgetIndex].widgetNode.splice(index, 1);
11435
+ this.dashBoardWidgetConfig.widgets[this.newWidgetIndex].widgetNode.splice(newPosition, 0, itemToMove);
11436
+ }
11437
+ moveItemForColumns(index, direction) {
11438
+ if (index < 0 || index >= this.allWidgetInnerContent.length)
11439
+ return;
11440
+ const newPosition = direction === 'up' ? index - 1 : index + 1;
11441
+ if (newPosition < 0 || newPosition >= this.allWidgetInnerContent.length)
11442
+ return;
11443
+ const itemToMove = this.allWidgetInnerContent[index];
11444
+ this.allWidgetInnerContent.splice(index, 1);
11445
+ this.allWidgetInnerContent.splice(newPosition, 0, itemToMove);
11446
+ }
11447
+ moveItemForWidget(index, direction) {
11448
+ if (index < 0 || index >= this.dashBoardWidgetConfig.widgets.length)
11449
+ return;
11450
+ const newPosition = direction === 'up' ? index - 1 : index + 1;
11451
+ if (newPosition < 0 || newPosition >= this.dashBoardWidgetConfig.widgets.length)
11452
+ return;
11453
+ const itemToMove = this.dashBoardWidgetConfig.widgets[index];
11454
+ this.dashBoardWidgetConfig.widgets.splice(index, 1);
11455
+ this.dashBoardWidgetConfig.widgets.splice(newPosition, 0, itemToMove);
11456
+ }
11457
+ getEditViewFromLayout(data, index) {
11458
+ this.isEditMainLayout = true;
11459
+ this.newWidgetIndex = index;
11460
+ this.isWidgetCreationContent = true;
11461
+ this.isDefaultView = false;
11462
+ this.isChartButtonClick = false;
11463
+ this.isUpdateWidget = false;
11464
+ this.widgetName = data.widgetName;
11465
+ this.widgetTitle = data.widgetTitle;
11466
+ this.selectedFilterId = data.filters.filterId;
11467
+ this.addedwidGetConfig = data.widgetProperties;
11468
+ }
11469
+ backToMainView() {
11470
+ this.isDefaultView = true;
11471
+ this.isUpdateWidget = false;
11472
+ this.isWidgetCreationContent = false;
11473
+ this.isChartButtonClick = false;
11474
+ this.isEditMainLayout = false;
11475
+ this.islayoutCreate = false;
11476
+ this.newWidgetIndex = undefined;
11477
+ this.selectedFilterId = undefined;
11478
+ }
11479
+ filterViews() {
11480
+ if (this.viewToSearch.trim() !== '') {
11481
+ this.filteredComponentConfig = this.componentConfigDataSource.filter((item) => item.viewName.toLowerCase().includes(this.viewToSearch.toLowerCase()));
11482
+ }
11483
+ else {
11484
+ this.filteredComponentConfig = this.componentConfigDataSource;
11485
+ }
11486
+ }
11487
+ editComponentViews(item) {
11488
+ this.loadingModal = true;
11489
+ this.editItemForUpdate = item;
11490
+ if (this.isUpdateWidget && !this.isChartButtonClick) {
11491
+ this.selectedViewId = item.viewId;
11492
+ setTimeout(() => {
11493
+ this.isCreateNewViewWithDefaultView = true;
11494
+ this.loadingModal = false;
11495
+ }, 400);
11496
+ }
11497
+ else {
11498
+ let navigation = {
11499
+ queryParams: {
11500
+ 'viewId': item.viewId,
11501
+ 'pageId': this.pageId
11502
+ }
11503
+ };
11504
+ this.router.navigate(['apps/controlPanel/applicationContent/applicationViews'], navigation);
11505
+ }
11506
+ }
11507
+ editComponentDatasets(item) {
11508
+ this.loadingModal = true;
11509
+ this.editItemForUpdate = item;
11510
+ if (this.isUpdateWidget && !this.isChartButtonClick) {
11511
+ this.selectedDatasetId = item.datasetId;
11512
+ setTimeout(() => {
11513
+ this.isCreateDatasetWithDatasetId = true;
11514
+ this.loadingModal = false;
11515
+ }, 400);
11516
+ }
11517
+ else {
11518
+ let navigation = {
11519
+ queryParams: {
11520
+ 'viewId': item.viewId,
11521
+ 'pageId': this.pageId
11522
+ }
11523
+ };
11524
+ this.router.navigate(['apps/controlPanel/applicationContent/applicationViews'], navigation);
11525
+ }
11526
+ }
11527
+ getAllPage() {
11528
+ this.router.navigate(['apps/controlPanel/applicationContent/applicationDashboard']);
11529
+ }
11530
+ transformColumnsForColumns(inputColumns) {
11531
+ const columns = [];
11532
+ inputColumns.forEach(col => {
11533
+ columns.push({
11534
+ dataField: col.dataField,
11535
+ visible: true,
11536
+ caption: col.caption,
11537
+ });
11538
+ });
11539
+ return columns;
11540
+ }
11541
+ getCreateDataSetPage() {
11542
+ this.isCreateDataset = true;
11543
+ }
11544
+ getCreateViewPage() {
11545
+ this.selectedViewId = undefined;
11546
+ this.loadingModal = true;
11547
+ setTimeout(() => {
11548
+ this.isCreateNewView = true;
11549
+ this.loadingModal = false;
11550
+ }, 400);
11551
+ }
11552
+ getEmitNewChartCongig(event) {
11553
+ delete event.kpiConfig.dataSource;
11554
+ this.editItemForUpdate['kpiConfig'] = event.kpiConfig;
11555
+ console.log(this.editItemForUpdate);
11556
+ this.service.updateAppViewConfig(this.editItemForUpdate).subscribe({
11557
+ next: (data) => {
11558
+ this.isEditOptionClick = false;
11559
+ this.toastr.success('View Update Successfully');
11560
+ }, error: (err) => {
11561
+ this.toastr.error('Unexpected Server Exception. Please contact System Admin.', 'View Creation');
11562
+ }
11563
+ });
11564
+ }
11565
+ getViewPage() {
11566
+ let navigationExtras = {
11567
+ queryParams: {
11568
+ "pageId": this.pageId
11569
+ }
11570
+ };
11571
+ this.router.navigate([this.pageUrl], navigationExtras);
11572
+ }
11573
+ getNodeProperticeFilterOption() {
11574
+ let obj = {
11575
+ input_type: "text",
11576
+ server_column: "",
11577
+ local_column: "",
11578
+ select_box_option: "",
11579
+ };
11580
+ this.nodeProperticeFilters.push(obj);
11581
+ }
11582
+ deleteNodeFilter(index) {
11583
+ this.nodeProperticeFilters.splice(index, 1);
11584
+ }
11585
+ setDataSetsLimit(dataset) {
11586
+ let limit = { "limit": "10" };
11587
+ dataset.config.queryConfig.reqFields.push(limit);
11588
+ return dataset;
11589
+ }
11590
+ getViewPopupHide(e) {
11591
+ this.getAllViewsItems();
11592
+ }
11593
+ getDatasetPopupHide(e) {
11594
+ }
11595
+ submitFilter() {
11596
+ }
11597
+ getWidgetFilterForTemplate(value) {
11598
+ this.getDataSet();
11599
+ }
11600
+ getDeleteViewFromLayout(item, i) {
11601
+ this.dashBoardWidgetConfig.widgets.splice(i, 1);
11602
+ this.dashBoardWidgetConfig.widgets.forEach(widget => {
11603
+ widget.compConfig.viewConfig = widget.compConfig.viewConfig.map(config => config.viewId);
11604
+ widget.compConfig.dynamicComponentRefs = [];
11605
+ if (widget.widgetNode && widget.widgetNode.length > 0) {
11606
+ widget.widgetNode.forEach(node => {
11607
+ node.compConfig.viewConfig = node.compConfig.viewConfig.map(config => config.viewId);
11608
+ node.compConfig.dynamicComponentRefs = [];
11609
+ });
11610
+ }
11611
+ });
11612
+ const widgetData = this.dashBoardWidgetConfig;
11613
+ widgetData['widgets'] = this.dashBoardWidgetConfig.widgets.map(item => item.widgetId);
11614
+ widgetData['filterId'] = (widgetData.filters) ? widgetData.filters.filterId : null;
11615
+ delete widgetData['filters'];
11616
+ this.service.editAppPageConfig(widgetData).subscribe({
11617
+ next: (data) => {
11618
+ this.toastr.success("Layout Deleted Successfully");
11619
+ this.getAppPageDetailConfigByPageId();
11620
+ }, error: (err) => {
11621
+ this.loadingModal = false;
11622
+ this.toastr.error('Unexpected Server Exception. Please contact System Admin.', 'Widget Creation');
11623
+ }
11624
+ });
11625
+ }
11626
+ getProcessForConfig() {
11627
+ this.advanceLayoutContainer = [];
11628
+ const filteredColumns = this.componentConfigDataSource.filter(column => this.selectedViewsIds.includes(column.viewId));
11629
+ const columnDefList = [];
11630
+ filteredColumns.forEach(element => {
11631
+ let obj = {
11632
+ "id": this.commonService.primeryRendomeId(5),
11633
+ "nodeTitle": "",
11634
+ "compConfig": {
11635
+ "dynamicComponentRefs": [],
11636
+ "viewConfig": [element]
11637
+ },
11638
+ "filterId": null,
11639
+ "nodeProperties": {
11640
+ "display": true,
11641
+ "widgetTitle": "",
11642
+ "width": "",
11643
+ "height": "",
11644
+ "isWidgetFilter": false
11645
+ }
11646
+ };
11647
+ this.advanceLayoutContainer.push(obj);
11648
+ });
11649
+ this.isProceed = true;
11650
+ }
11651
+ getSelectedColumnSource(event) {
11652
+ if (event.event) {
11653
+ this.selectedViewsIds = event.value;
11654
+ }
11655
+ }
11656
+ submitAdvanceView() {
11657
+ if (this.dashBoardWidgetConfig.widgets[this.newWidgetIndex].widgetNode && this.dashBoardWidgetConfig.widgets[this.newWidgetIndex].widgetNode.length !== 0) {
11658
+ this.dashBoardWidgetConfig.widgets[this.newWidgetIndex].widgetNode = [...this.dashBoardWidgetConfig.widgets[this.newWidgetIndex].widgetNode, ...this.advanceLayoutContainer];
11659
+ }
11660
+ else {
11661
+ this.dashBoardWidgetConfig.widgets[this.newWidgetIndex].widgetNode = this.advanceLayoutContainer;
11662
+ }
11663
+ this.isAdvanceLayout = false;
11664
+ this.advanceLayoutContainer = [];
11665
+ this.isProceed = false;
11666
+ this.updateWidget();
11667
+ }
11668
+ deleteView(i) {
11669
+ }
11670
+ }
11671
+ 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 });
11672
+ 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"] }] });
11673
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PageConfigMultilayoutComponent, decorators: [{
11674
+ type: Component,
11675
+ 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"] }]
11676
+ }], 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: [{
11677
+ type: ViewChild,
11678
+ args: ['dynamicComponentContainer', { read: ViewContainerRef }]
11679
+ }], containerRef: [{
11680
+ type: ViewChild,
11681
+ args: ['container', { read: ViewContainerRef }]
11682
+ }], dynamicContainer: [{
11683
+ type: ViewChild,
11684
+ args: ['dynamicContainer', { static: true }]
11685
+ }], scrollView: [{
11686
+ type: ViewChild,
11687
+ args: [DxScrollViewComponent, { static: false }]
11688
+ }] } });
11689
+
11690
+ const appRoutes = [
11691
+ {
11692
+ path: '',
11693
+ redirectTo: 'applicationDataset',
11694
+ pathMatch: 'full'
11695
+ },
11696
+ {
11697
+ path: 'applicationDataset',
11698
+ component: ApplicationDatasetComponent,
11699
+ },
11700
+ {
11701
+ path: 'applicationViews',
11702
+ component: ApplicationViewsComponent,
11703
+ },
11704
+ {
11705
+ path: 'applicationFilter',
11706
+ component: ApplicationFilterComponent,
11707
+ },
11708
+ {
11709
+ path: 'applicationDashboard',
11710
+ component: PageControlerComponent,
11711
+ },
11712
+ {
11713
+ path: 'pageConfigController',
11714
+ component: PageConfigComponent,
11715
+ },
11716
+ {
11717
+ path: 'multiPageConfigController',
11718
+ component: PageConfigMultilayoutComponent,
10764
11719
  },
10765
11720
  {
10766
11721
  path: 'menuController',
@@ -10819,7 +11774,8 @@ PackageApplicationControllerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion
10819
11774
  GammaTableClumnBarChartComponent,
10820
11775
  ApplicationMenusComponent,
10821
11776
  ApplicationCreateMenuComponent,
10822
- GammaGeoChartComponent], imports: [CommonModule, i2.RouterModule, DevExtremeModule,
11777
+ GammaGeoChartComponent,
11778
+ PageConfigMultilayoutComponent], imports: [CommonModule, i2.RouterModule, DevExtremeModule,
10823
11779
  DxButtonModule,
10824
11780
  DxCheckBoxModule,
10825
11781
  DxNumberBoxModule,
@@ -10877,7 +11833,8 @@ PackageApplicationControllerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion
10877
11833
  SafeHtmlPipe,
10878
11834
  GoogleGeoMapComponent,
10879
11835
  GammaTableClumnBarChartComponent,
10880
- GammaGeoChartComponent] });
11836
+ GammaGeoChartComponent,
11837
+ PageConfigMultilayoutComponent] });
10881
11838
  PackageApplicationControllerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PackageApplicationControllerModule, providers: [
10882
11839
  ApplicationContentService,
10883
11840
  ApplicationDatssetsCall
@@ -10960,7 +11917,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
10960
11917
  GammaTableClumnBarChartComponent,
10961
11918
  ApplicationMenusComponent,
10962
11919
  ApplicationCreateMenuComponent,
10963
- GammaGeoChartComponent
11920
+ GammaGeoChartComponent,
11921
+ PageConfigMultilayoutComponent
10964
11922
  ],
10965
11923
  imports: [
10966
11924
  CommonModule,
@@ -11026,7 +11984,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
11026
11984
  SafeHtmlPipe,
11027
11985
  GoogleGeoMapComponent,
11028
11986
  GammaTableClumnBarChartComponent,
11029
- GammaGeoChartComponent
11987
+ GammaGeoChartComponent,
11988
+ PageConfigMultilayoutComponent
11030
11989
  ],
11031
11990
  providers: [
11032
11991
  ApplicationContentService,
@@ -11076,5 +12035,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
11076
12035
  }]
11077
12036
  }] });
11078
12037
 
11079
- 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 };
12038
+ 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 };
11080
12039
  //# sourceMappingURL=gamma-app-controller.mjs.map