gamma-app-controller 1.2.13 → 1.2.15

package/fesm2020/gamma-app-controller.mjs

@@ -31,8 +31,8 @@ import * as i10 from 'devextreme-angular/ui/pie-chart';
 import * as i10$1 from 'devextreme-angular/ui/scroll-view';
 import * as i5$2 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i8$2 from 'devextreme-angular/ui/number-box';
-import * as i8$3 from 'devextreme-angular/ui/funnel';
+import * as i7$2 from 'devextreme-angular/ui/number-box';
+import * as i8$2 from 'devextreme-angular/ui/funnel';
 import * as vkbeautify from 'vkbeautify';
 import cloneDeep from 'lodash-es/cloneDeep';
 import { MatButtonModule } from '@angular/material/button';
@@ -2095,6 +2095,7 @@ class ApplicationFilterComponent {
         this.filter_type = ['single', 'multiple', 'date', 'datetime', "content", "context"];
         this.defaultFilterTypeDataSource = ['static', 'dynamic'];
         this.momentFunction = ["subtract", "add", "startOf", "endOf", "weekPicker", "monthPicker"];
+        this.selected_filters = [];
     }
     ngOnInit() {
         this.isLoader = true;
@@ -2260,12 +2261,29 @@ class ApplicationFilterComponent {
     gotoDataSets() {
         this.router.navigate(['apps/controlPanel/applicationDataset']);
     }
+    isSelectionChange(event) {
+        this.selected_filters = event.selectedRowsData;
+    }
+    getDownloadFilters() {
+        if (this.selected_filters.length == 0) {
+            this.toastr.error('No data available to export.', 'Export Error');
+            return;
+        }
+        const jsonStr = JSON.stringify(this.selected_filters, null, 2);
+        const blob = new Blob([jsonStr], { type: 'application/json' });
+        const url = window.URL.createObjectURL(blob);
+        const anchor = document.createElement('a');
+        anchor.href = url;
+        anchor.download = `exported_filters.json`;
+        anchor.click();
+        window.URL.revokeObjectURL(url);
+    }
 }
 ApplicationFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ApplicationFilterComponent, deps: [{ token: ApplicationContentService }, { token: CommonService }, { token: i3$1.ToastrService }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component });
-ApplicationFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ApplicationFilterComponent, selector: "app-application-filter", viewQueries: [{ propertyName: "dataGrid", first: true, predicate: ["gridContainer"], descendants: true }], ngImport: i0, template: "<div class=\"flex flex-col flex-auto min-w-0\">\n    <lib-common-header [pageTitle]=\"'Application Filters'\"></lib-common-header>\n\n\n\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\n                class=\"mb-2 font-bold text-lg tracking-tight text-gray-900 dark:text-white border-b pb-3 flex items-center\">\n                <i class=\"fa fa-table mr-2\"></i> Filters\n                <div class=\"ml-auto\">\n                    <button class=\"bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-3 rounded\"\n                        (click)=\"getCreateNewFilter()\">\n                        Add Filter\n                    </button>\n                </div>\n            </h6>\n            <app-loader *ngIf=\"isLoader\"></app-loader>\n            <dx-data-grid [columnAutoWidth]=\"true\" [dataSource]=\"filterDataSource\" [hoverStateEnabled]=\"true\"\n                *ngIf=\"!isLoader\" [selectedRowKeys]=\"[]\" [showBorders]=\"true\" [showColumnLines]=\"true\"\n                [showRowLines]=\"true\" id=\"gridContainer\">\n                <dxo-paging [pageSize]=\"10\"></dxo-paging>\n                <dxo-export [enabled]=\"true\"></dxo-export>\n\n                <dxi-column dataField=\"filterName\"></dxi-column>\n                <dxi-column dataField=\"filterId\"></dxi-column>\n                <dxi-column dataField=\"createdBy\"></dxi-column>\n                <dxi-column dataField=\"creationDate\"></dxi-column>\n                <dxi-column dataField=\"action\" cellTemplate=\"cellTemplate\" [fixed]=\"true\"\n                    fixedPosition=\"right\"></dxi-column>\n                <div *dxTemplate=\"let data of 'cellTemplate'\">\n                    <button class=\"{{commonService.btn_primary_md}}\" (click)=\"editFilter(data.data)\">\n                        Edit\n                    </button>\n                    <button class=\"{{commonService.btn_danger_md}}\" (click)=\"deleteFilter(data.data)\">\n                        Delete\n                    </button>\n                </div>\n\n\n            </dx-data-grid>\n        </div>\n    </div>\n    <div class=\"p-2 w-full\" *ngIf=\"isNewFilterCreate\">\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\n                class=\"mb-2 font-bold text-lg tracking-tight text-gray-900 dark:text-white border-b pb-3 flex items-center\">\n                <i class=\"fa fa-table mr-2\"></i> Create Filters\n\n            </h6>\n            <div class=\"flex flex-row my-2\">\n                <div class=\"mx-2 w-1/3\">\n                    <div class=\"text-md mb-2\">Filter Name</div>\n                    <dx-text-box [(ngModel)]=\"creatFilterObject.filterName\"></dx-text-box>\n                </div>\n            </div>\n            <div class=\"m-5 border\">\n                <div class=\"flex flex-col flex-auto min-w-0 \">\n                    <div class=\"text-lg py-2 font-extrabold border-b bg-gray-700 text-white px-2\"> Select Filters\n                    </div>\n                    <div class=\"pt-2 border-x border-b \">\n                        <ng-container *ngFor=\"let item of creatFilterObject.filterItems; let i = index;\">\n                            <div class=\"my-2 flex flex-row justify-between border-b\">\n\n                                <div class=\"px-2 mb-2 w-full\">\n                                    <div class=\"text-md mb-2 mt-5\"> </div>\n                                    <dx-check-box [(ngModel)]=\"item.display\" text=\"Display\"></dx-check-box>\n                                </div>\n                                <div class=\"px-2 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\">Filter Name </div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"kpiFilterConfigService\"\n                                        displayExpr=\"apiName\" valueExpr=\"apiUrl\"\n                                        [(ngModel)]=\"item.apiName\"></dx-select-box>\n                                </div>\n\n                                <div class=\"px-2 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\">Operator Key Name </div>\n                                    <dx-text-box [(ngModel)]=\"item.operatorName\"></dx-text-box>\n\n                                </div>\n                                <div class=\"px-2 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\"> FIlter Label</div>\n                                    <dx-text-box [(ngModel)]=\"item.label\"></dx-text-box>\n                                </div>\n                                <div class=\"px-2 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\"> FIlter Container</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"filter_type\"\n                                        [(ngModel)]=\"item.filterType\"></dx-select-box>\n\n                                </div>\n                                <div class=\"px-2 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\"> FIlter type</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"defaultFilterTypeDataSource\"\n                                        [(ngModel)]=\"item.defaultFilterType\"\n                                        value=\"defaultFilterTypeDataSource[0]\"></dx-select-box>\n\n                                </div>\n\n                                <ng-container\n                                    *ngIf=\"item.defaultFilterType == 'dynamic' && (item.filterType == 'date' || item.filterType == 'datetime')\">\n                                    <div class=\"px-2 mb-2 w-full\">\n                                        <div class=\"text-md mb-2\"> Function </div>\n                                        <dx-select-box [items]=\"momentFunction\"\n                                            [(ngModel)]=\"item.momentFunction\"></dx-select-box>\n                                    </div>\n                                    <div class=\"px-2 mb-2 w-full\">\n                                        <div class=\"text-md mb-2\"> Display Format </div>\n                                        <dx-text-box [(ngModel)]=\"item.momentFormat\"></dx-text-box>\n                                    </div>\n                                    <div class=\"px-2 mb-2 w-full\">\n                                        <div class=\"text-md mb-2\"> Query Format </div>\n                                        <dx-text-box [(ngModel)]=\"item.queryFormat\"></dx-text-box>\n                                    </div>\n\n                                </ng-container>\n                                <ng-container\n                                    *ngIf=\"item.defaultFilterType == 'static' && (item.filterType == 'date' || item.filterType == 'datetime')\">\n                                    <div class=\"px-2 mb-2 w-full\">\n                                        <div class=\"text-md mb-2\"> Default Value </div>\n                                        <dx-text-box \n                                            [(ngModel)]=\"item.defaultFilterValue\"></dx-text-box>\n                                    </div>\n                                    <div class=\"px-2 mb-2 w-full\">\n                                        <div class=\"text-md mb-2\"> Display Format </div>\n                                        <dx-text-box [(ngModel)]=\"item.momentFormat\"></dx-text-box>\n                                    </div>\n                                </ng-container>\n                                <ng-container\n                                    *ngIf=\"item.defaultFilterType == 'dynamic' && (item.filterType !== 'date' || item.filterType !== 'datetime')\">\n                                    <div class=\"px-2 mb-2 w-full\">\n                                        <div class=\"text-md mb-2\"> FIlter Default Value</div>\n                                        <dx-text-box [(ngModel)]=\"item.defaultFilterValue\"></dx-text-box>\n                                    </div>\n                                </ng-container>\n\n                                <div class=\"px-2 mt-8 text-center\">\n                                    <button class=\"{{commonService.btn_danger_sm}} cursor-pointer\"\n                                        (click)=\"deleteFilters(i)\"><i 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 my-2\">\n                            <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\" (click)=\"addFilter()\">Add\n                                Columns</button>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"flex w-full justify-end mt-5 border-t\">\n                <button class=\"{{commonService.btn_success_md}} cursor-pointer mx-1 my-2\" (click)=\"createFilterItems()\">\n                    Submit Filter\n                </button>\n            </div>\n\n        </div>\n    </div>\n\n\n\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.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: i5$1.DxCheckBoxComponent, selector: "dx-check-box", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "iconSize", "isValid", "name", "readOnly", "rtlEnabled", "tabIndex", "text", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "visible", "width"], outputs: ["onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconSizeChange", "isValidChange", "nameChange", "readOnlyChange", "rtlEnabledChange", "tabIndexChange", "textChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "component", type: i9.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$1.DxSelectBoxComponent, selector: "dx-select-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "buttons", "dataSource", "deferRendering", "disabled", "displayExpr", "displayValue", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "fieldTemplate", "focusStateEnabled", "grouped", "groupTemplate", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "items", "itemTemplate", "label", "labelMode", "maxLength", "minSearchLength", "name", "noDataText", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "searchEnabled", "searchExpr", "searchMode", "searchTimeout", "selectedItem", "showClearButton", "showDataBeforeSearch", "showDropDownButton", "showSelectionControls", "spellcheck", "stylingMode", "tabIndex", "text", "useItemTextAsTitle", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueChangeEvent", "valueExpr", "visible", "width", "wrapItemText"], outputs: ["onChange", "onClosed", "onContentReady", "onCopy", "onCustomItemCreating", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onItemClick", "onKeyDown", "onKeyUp", "onOpened", "onOptionChanged", "onPaste", "onSelectionChanged", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "dataSourceChange", "deferRenderingChange", "disabledChange", "displayExprChange", "displayValueChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "groupedChange", "groupTemplateChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "itemsChange", "itemTemplateChange", "labelChange", "labelModeChange", "maxLengthChange", "minSearchLengthChange", "nameChange", "noDataTextChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "searchEnabledChange", "searchExprChange", "searchModeChange", "searchTimeoutChange", "selectedItemChange", "showClearButtonChange", "showDataBeforeSearchChange", "showDropDownButtonChange", "showSelectionControlsChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useItemTextAsTitleChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "valueExprChange", "visibleChange", "widthChange", "wrapItemTextChange", "onBlur"] }, { kind: "component", type: i7.DxTextBoxComponent, selector: "dx-text-box", inputs: ["accessKey", "activeStateEnabled", "buttons", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "label", "labelMode", "mask", "maskChar", "maskInvalidMessage", "maskRules", "maxLength", "mode", "name", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showMaskMode", "spellcheck", "stylingMode", "tabIndex", "text", "useMaskedValue", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOptionChanged", "onPaste", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "labelChange", "labelModeChange", "maskChange", "maskCharChange", "maskInvalidMessageChange", "maskRulesChange", "maxLengthChange", "modeChange", "nameChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showMaskModeChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useMaskedValueChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: LoaderComponent, selector: "app-loader" }, { kind: "component", type: CommonHeaderComponent, selector: "lib-common-header", inputs: ["pageTitle"] }] });
+ApplicationFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ApplicationFilterComponent, selector: "app-application-filter", viewQueries: [{ propertyName: "dataGrid", first: true, predicate: ["gridContainer"], descendants: true }], ngImport: i0, template: "<div class=\"flex flex-col flex-auto min-w-0\">\n    <lib-common-header [pageTitle]=\"'Application Filters'\"></lib-common-header>\n\n\n\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\n                class=\"mb-2 font-bold text-lg tracking-tight text-gray-900 dark:text-white border-b pb-3 flex items-center\">\n                <i class=\"fa fa-table mr-2\"></i> Filters\n                <div class=\"ml-auto\">\n                    <button class=\"{{commonService.btn_primary_md}}\"\n                        (click)=\"getCreateNewFilter()\">\n                        Add Filter\n                    </button>\n                     <button class=\"{{commonService.btn_success_md}}\" (click)=\"getDownloadFilters()\"\n                        *ngIf=\"selected_filters.length !== 0\">\n                        Export Filters\n                    </button>\n                </div>\n            </h6>\n            <app-loader *ngIf=\"isLoader\"></app-loader>\n            <dx-data-grid [columnAutoWidth]=\"true\" [dataSource]=\"filterDataSource\" [hoverStateEnabled]=\"true\"\n                *ngIf=\"!isLoader\" [selectedRowKeys]=\"[]\" [showBorders]=\"true\" [showColumnLines]=\"true\"\n                [showRowLines]=\"true\" id=\"gridContainer\" (onSelectionChanged)=\"isSelectionChange($event)\">\n                 <dxo-selection [selectAllMode]=\"'allMode'\" [showCheckBoxesMode]=\"'always'\" mode=\"multiple\">\n                </dxo-selection>\n                <dxo-paging [pageSize]=\"10\"></dxo-paging>\n                <dxo-export [enabled]=\"true\"></dxo-export>\n\n                <dxi-column dataField=\"filterName\"></dxi-column>\n                <dxi-column dataField=\"filterId\"></dxi-column>\n                <dxi-column dataField=\"createdBy\"></dxi-column>\n                <dxi-column dataField=\"creationDate\"></dxi-column>\n                <dxi-column dataField=\"action\" cellTemplate=\"cellTemplate\" [fixed]=\"true\"\n                    fixedPosition=\"right\"></dxi-column>\n                <div *dxTemplate=\"let data of 'cellTemplate'\">\n                    <button class=\"{{commonService.btn_primary_md}}\" (click)=\"editFilter(data.data)\">\n                        Edit\n                    </button>\n                    <button class=\"{{commonService.btn_danger_md}}\" (click)=\"deleteFilter(data.data)\">\n                        Delete\n                    </button>\n                </div>\n\n\n            </dx-data-grid>\n        </div>\n    </div>\n    <div class=\"p-2 w-full\" *ngIf=\"isNewFilterCreate\">\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\n                class=\"mb-2 font-bold text-lg tracking-tight text-gray-900 dark:text-white border-b pb-3 flex items-center\">\n                <i class=\"fa fa-table mr-2\"></i> Create Filters\n\n            </h6>\n            <div class=\"flex flex-row my-2\">\n                <div class=\"mx-2 w-1/3\">\n                    <div class=\"text-md mb-2\">Filter Name</div>\n                    <dx-text-box [(ngModel)]=\"creatFilterObject.filterName\"></dx-text-box>\n                </div>\n            </div>\n            <div class=\"m-5 border\">\n                <div class=\"flex flex-col flex-auto min-w-0 \">\n                    <div class=\"text-lg py-2 font-extrabold border-b bg-gray-700 text-white px-2\"> Select Filters\n                    </div>\n                    <div class=\"pt-2 border-x border-b \">\n                        <ng-container *ngFor=\"let item of creatFilterObject.filterItems; let i = index;\">\n                            <div class=\"my-2 flex flex-row justify-between border-b\">\n\n                                <div class=\"px-2 mb-2 w-full\">\n                                    <div class=\"text-md mb-2 mt-5\"> </div>\n                                    <dx-check-box [(ngModel)]=\"item.display\" text=\"Display\"></dx-check-box>\n                                </div>\n                                <div class=\"px-2 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\">Filter Name </div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"kpiFilterConfigService\"\n                                        displayExpr=\"apiName\" valueExpr=\"apiUrl\"\n                                        [(ngModel)]=\"item.apiName\"></dx-select-box>\n                                </div>\n\n                                <div class=\"px-2 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\">Operator Key Name </div>\n                                    <dx-text-box [(ngModel)]=\"item.operatorName\"></dx-text-box>\n\n                                </div>\n                                <div class=\"px-2 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\"> FIlter Label</div>\n                                    <dx-text-box [(ngModel)]=\"item.label\"></dx-text-box>\n                                </div>\n                                <div class=\"px-2 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\"> FIlter Container</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"filter_type\"\n                                        [(ngModel)]=\"item.filterType\"></dx-select-box>\n\n                                </div>\n                                <div class=\"px-2 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\"> FIlter type</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"defaultFilterTypeDataSource\"\n                                        [(ngModel)]=\"item.defaultFilterType\"\n                                        value=\"defaultFilterTypeDataSource[0]\"></dx-select-box>\n\n                                </div>\n\n                                <ng-container\n                                    *ngIf=\"item.defaultFilterType == 'dynamic' && (item.filterType == 'date' || item.filterType == 'datetime')\">\n                                    <div class=\"px-2 mb-2 w-full\">\n                                        <div class=\"text-md mb-2\"> Function </div>\n                                        <dx-select-box [items]=\"momentFunction\"\n                                            [(ngModel)]=\"item.momentFunction\"></dx-select-box>\n                                    </div>\n                                    <div class=\"px-2 mb-2 w-full\">\n                                        <div class=\"text-md mb-2\"> Display Format </div>\n                                        <dx-text-box [(ngModel)]=\"item.momentFormat\"></dx-text-box>\n                                    </div>\n                                    <div class=\"px-2 mb-2 w-full\">\n                                        <div class=\"text-md mb-2\"> Query Format </div>\n                                        <dx-text-box [(ngModel)]=\"item.queryFormat\"></dx-text-box>\n                                    </div>\n\n                                </ng-container>\n                                <ng-container\n                                    *ngIf=\"item.defaultFilterType == 'static' && (item.filterType == 'date' || item.filterType == 'datetime')\">\n                                    <div class=\"px-2 mb-2 w-full\">\n                                        <div class=\"text-md mb-2\"> Default Value </div>\n                                        <dx-text-box \n                                            [(ngModel)]=\"item.defaultFilterValue\"></dx-text-box>\n                                    </div>\n                                    <div class=\"px-2 mb-2 w-full\">\n                                        <div class=\"text-md mb-2\"> Display Format </div>\n                                        <dx-text-box [(ngModel)]=\"item.momentFormat\"></dx-text-box>\n                                    </div>\n                                </ng-container>\n                                <ng-container\n                                    *ngIf=\"item.defaultFilterType == 'dynamic' && (item.filterType !== 'date' || item.filterType !== 'datetime')\">\n                                    <div class=\"px-2 mb-2 w-full\">\n                                        <div class=\"text-md mb-2\"> FIlter Default Value</div>\n                                        <dx-text-box [(ngModel)]=\"item.defaultFilterValue\"></dx-text-box>\n                                    </div>\n                                </ng-container>\n\n                                <div class=\"px-2 mt-8 text-center\">\n                                    <button class=\"{{commonService.btn_danger_sm}} cursor-pointer\"\n                                        (click)=\"deleteFilters(i)\"><i 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 my-2\">\n                            <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\" (click)=\"addFilter()\">Add\n                                Columns</button>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"flex w-full justify-end mt-5 border-t\">\n                <button class=\"{{commonService.btn_success_md}} cursor-pointer mx-1 my-2\" (click)=\"createFilterItems()\">\n                    Submit Filter\n                </button>\n            </div>\n\n        </div>\n    </div>\n\n\n\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.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: i5$1.DxCheckBoxComponent, selector: "dx-check-box", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "iconSize", "isValid", "name", "readOnly", "rtlEnabled", "tabIndex", "text", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "visible", "width"], outputs: ["onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconSizeChange", "isValidChange", "nameChange", "readOnlyChange", "rtlEnabledChange", "tabIndexChange", "textChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "component", type: i9.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.DxoSelectionComponent, selector: "dxo-selection", inputs: ["allowSelectAll", "deferred", "mode", "selectAllMode", "showCheckBoxesMode", "recursive"] }, { kind: "component", type: i6$1.DxSelectBoxComponent, selector: "dx-select-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "buttons", "dataSource", "deferRendering", "disabled", "displayExpr", "displayValue", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "fieldTemplate", "focusStateEnabled", "grouped", "groupTemplate", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "items", "itemTemplate", "label", "labelMode", "maxLength", "minSearchLength", "name", "noDataText", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "searchEnabled", "searchExpr", "searchMode", "searchTimeout", "selectedItem", "showClearButton", "showDataBeforeSearch", "showDropDownButton", "showSelectionControls", "spellcheck", "stylingMode", "tabIndex", "text", "useItemTextAsTitle", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueChangeEvent", "valueExpr", "visible", "width", "wrapItemText"], outputs: ["onChange", "onClosed", "onContentReady", "onCopy", "onCustomItemCreating", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onItemClick", "onKeyDown", "onKeyUp", "onOpened", "onOptionChanged", "onPaste", "onSelectionChanged", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "dataSourceChange", "deferRenderingChange", "disabledChange", "displayExprChange", "displayValueChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "groupedChange", "groupTemplateChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "itemsChange", "itemTemplateChange", "labelChange", "labelModeChange", "maxLengthChange", "minSearchLengthChange", "nameChange", "noDataTextChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "searchEnabledChange", "searchExprChange", "searchModeChange", "searchTimeoutChange", "selectedItemChange", "showClearButtonChange", "showDataBeforeSearchChange", "showDropDownButtonChange", "showSelectionControlsChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useItemTextAsTitleChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "valueExprChange", "visibleChange", "widthChange", "wrapItemTextChange", "onBlur"] }, { kind: "component", type: i7.DxTextBoxComponent, selector: "dx-text-box", inputs: ["accessKey", "activeStateEnabled", "buttons", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "label", "labelMode", "mask", "maskChar", "maskInvalidMessage", "maskRules", "maxLength", "mode", "name", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showMaskMode", "spellcheck", "stylingMode", "tabIndex", "text", "useMaskedValue", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOptionChanged", "onPaste", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "labelChange", "labelModeChange", "maskChange", "maskCharChange", "maskInvalidMessageChange", "maskRulesChange", "maxLengthChange", "modeChange", "nameChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showMaskModeChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useMaskedValueChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: LoaderComponent, selector: "app-loader" }, { kind: "component", type: CommonHeaderComponent, selector: "lib-common-header", inputs: ["pageTitle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ApplicationFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-application-filter', template: "<div class=\"flex flex-col flex-auto min-w-0\">\n    <lib-common-header [pageTitle]=\"'Application Filters'\"></lib-common-header>\n\n\n\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\n                class=\"mb-2 font-bold text-lg tracking-tight text-gray-900 dark:text-white border-b pb-3 flex items-center\">\n                <i class=\"fa fa-table mr-2\"></i> Filters\n                <div class=\"ml-auto\">\n                    <button class=\"bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-3 rounded\"\n                        (click)=\"getCreateNewFilter()\">\n                        Add Filter\n                    </button>\n                </div>\n            </h6>\n            <app-loader *ngIf=\"isLoader\"></app-loader>\n            <dx-data-grid [columnAutoWidth]=\"true\" [dataSource]=\"filterDataSource\" [hoverStateEnabled]=\"true\"\n                *ngIf=\"!isLoader\" [selectedRowKeys]=\"[]\" [showBorders]=\"true\" [showColumnLines]=\"true\"\n                [showRowLines]=\"true\" id=\"gridContainer\">\n                <dxo-paging [pageSize]=\"10\"></dxo-paging>\n                <dxo-export [enabled]=\"true\"></dxo-export>\n\n                <dxi-column dataField=\"filterName\"></dxi-column>\n                <dxi-column dataField=\"filterId\"></dxi-column>\n                <dxi-column dataField=\"createdBy\"></dxi-column>\n                <dxi-column dataField=\"creationDate\"></dxi-column>\n                <dxi-column dataField=\"action\" cellTemplate=\"cellTemplate\" [fixed]=\"true\"\n                    fixedPosition=\"right\"></dxi-column>\n                <div *dxTemplate=\"let data of 'cellTemplate'\">\n                    <button class=\"{{commonService.btn_primary_md}}\" (click)=\"editFilter(data.data)\">\n                        Edit\n                    </button>\n                    <button class=\"{{commonService.btn_danger_md}}\" (click)=\"deleteFilter(data.data)\">\n                        Delete\n                    </button>\n                </div>\n\n\n            </dx-data-grid>\n        </div>\n    </div>\n    <div class=\"p-2 w-full\" *ngIf=\"isNewFilterCreate\">\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\n                class=\"mb-2 font-bold text-lg tracking-tight text-gray-900 dark:text-white border-b pb-3 flex items-center\">\n                <i class=\"fa fa-table mr-2\"></i> Create Filters\n\n            </h6>\n            <div class=\"flex flex-row my-2\">\n                <div class=\"mx-2 w-1/3\">\n                    <div class=\"text-md mb-2\">Filter Name</div>\n                    <dx-text-box [(ngModel)]=\"creatFilterObject.filterName\"></dx-text-box>\n                </div>\n            </div>\n            <div class=\"m-5 border\">\n                <div class=\"flex flex-col flex-auto min-w-0 \">\n                    <div class=\"text-lg py-2 font-extrabold border-b bg-gray-700 text-white px-2\"> Select Filters\n                    </div>\n                    <div class=\"pt-2 border-x border-b \">\n                        <ng-container *ngFor=\"let item of creatFilterObject.filterItems; let i = index;\">\n                            <div class=\"my-2 flex flex-row justify-between border-b\">\n\n                                <div class=\"px-2 mb-2 w-full\">\n                                    <div class=\"text-md mb-2 mt-5\"> </div>\n                                    <dx-check-box [(ngModel)]=\"item.display\" text=\"Display\"></dx-check-box>\n                                </div>\n                                <div class=\"px-2 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\">Filter Name </div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"kpiFilterConfigService\"\n                                        displayExpr=\"apiName\" valueExpr=\"apiUrl\"\n                                        [(ngModel)]=\"item.apiName\"></dx-select-box>\n                                </div>\n\n                                <div class=\"px-2 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\">Operator Key Name </div>\n                                    <dx-text-box [(ngModel)]=\"item.operatorName\"></dx-text-box>\n\n                                </div>\n                                <div class=\"px-2 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\"> FIlter Label</div>\n                                    <dx-text-box [(ngModel)]=\"item.label\"></dx-text-box>\n                                </div>\n                                <div class=\"px-2 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\"> FIlter Container</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"filter_type\"\n                                        [(ngModel)]=\"item.filterType\"></dx-select-box>\n\n                                </div>\n                                <div class=\"px-2 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\"> FIlter type</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"defaultFilterTypeDataSource\"\n                                        [(ngModel)]=\"item.defaultFilterType\"\n                                        value=\"defaultFilterTypeDataSource[0]\"></dx-select-box>\n\n                                </div>\n\n                                <ng-container\n                                    *ngIf=\"item.defaultFilterType == 'dynamic' && (item.filterType == 'date' || item.filterType == 'datetime')\">\n                                    <div class=\"px-2 mb-2 w-full\">\n                                        <div class=\"text-md mb-2\"> Function </div>\n                                        <dx-select-box [items]=\"momentFunction\"\n                                            [(ngModel)]=\"item.momentFunction\"></dx-select-box>\n                                    </div>\n                                    <div class=\"px-2 mb-2 w-full\">\n                                        <div class=\"text-md mb-2\"> Display Format </div>\n                                        <dx-text-box [(ngModel)]=\"item.momentFormat\"></dx-text-box>\n                                    </div>\n                                    <div class=\"px-2 mb-2 w-full\">\n                                        <div class=\"text-md mb-2\"> Query Format </div>\n                                        <dx-text-box [(ngModel)]=\"item.queryFormat\"></dx-text-box>\n                                    </div>\n\n                                </ng-container>\n                                <ng-container\n                                    *ngIf=\"item.defaultFilterType == 'static' && (item.filterType == 'date' || item.filterType == 'datetime')\">\n                                    <div class=\"px-2 mb-2 w-full\">\n                                        <div class=\"text-md mb-2\"> Default Value </div>\n                                        <dx-text-box \n                                            [(ngModel)]=\"item.defaultFilterValue\"></dx-text-box>\n                                    </div>\n                                    <div class=\"px-2 mb-2 w-full\">\n                                        <div class=\"text-md mb-2\"> Display Format </div>\n                                        <dx-text-box [(ngModel)]=\"item.momentFormat\"></dx-text-box>\n                                    </div>\n                                </ng-container>\n                                <ng-container\n                                    *ngIf=\"item.defaultFilterType == 'dynamic' && (item.filterType !== 'date' || item.filterType !== 'datetime')\">\n                                    <div class=\"px-2 mb-2 w-full\">\n                                        <div class=\"text-md mb-2\"> FIlter Default Value</div>\n                                        <dx-text-box [(ngModel)]=\"item.defaultFilterValue\"></dx-text-box>\n                                    </div>\n                                </ng-container>\n\n                                <div class=\"px-2 mt-8 text-center\">\n                                    <button class=\"{{commonService.btn_danger_sm}} cursor-pointer\"\n                                        (click)=\"deleteFilters(i)\"><i 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 my-2\">\n                            <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\" (click)=\"addFilter()\">Add\n                                Columns</button>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"flex w-full justify-end mt-5 border-t\">\n                <button class=\"{{commonService.btn_success_md}} cursor-pointer mx-1 my-2\" (click)=\"createFilterItems()\">\n                    Submit Filter\n                </button>\n            </div>\n\n        </div>\n    </div>\n\n\n\n</div>" }]
+            args: [{ selector: 'app-application-filter', template: "<div class=\"flex flex-col flex-auto min-w-0\">\n    <lib-common-header [pageTitle]=\"'Application Filters'\"></lib-common-header>\n\n\n\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\n                class=\"mb-2 font-bold text-lg tracking-tight text-gray-900 dark:text-white border-b pb-3 flex items-center\">\n                <i class=\"fa fa-table mr-2\"></i> Filters\n                <div class=\"ml-auto\">\n                    <button class=\"{{commonService.btn_primary_md}}\"\n                        (click)=\"getCreateNewFilter()\">\n                        Add Filter\n                    </button>\n                     <button class=\"{{commonService.btn_success_md}}\" (click)=\"getDownloadFilters()\"\n                        *ngIf=\"selected_filters.length !== 0\">\n                        Export Filters\n                    </button>\n                </div>\n            </h6>\n            <app-loader *ngIf=\"isLoader\"></app-loader>\n            <dx-data-grid [columnAutoWidth]=\"true\" [dataSource]=\"filterDataSource\" [hoverStateEnabled]=\"true\"\n                *ngIf=\"!isLoader\" [selectedRowKeys]=\"[]\" [showBorders]=\"true\" [showColumnLines]=\"true\"\n                [showRowLines]=\"true\" id=\"gridContainer\" (onSelectionChanged)=\"isSelectionChange($event)\">\n                 <dxo-selection [selectAllMode]=\"'allMode'\" [showCheckBoxesMode]=\"'always'\" mode=\"multiple\">\n                </dxo-selection>\n                <dxo-paging [pageSize]=\"10\"></dxo-paging>\n                <dxo-export [enabled]=\"true\"></dxo-export>\n\n                <dxi-column dataField=\"filterName\"></dxi-column>\n                <dxi-column dataField=\"filterId\"></dxi-column>\n                <dxi-column dataField=\"createdBy\"></dxi-column>\n                <dxi-column dataField=\"creationDate\"></dxi-column>\n                <dxi-column dataField=\"action\" cellTemplate=\"cellTemplate\" [fixed]=\"true\"\n                    fixedPosition=\"right\"></dxi-column>\n                <div *dxTemplate=\"let data of 'cellTemplate'\">\n                    <button class=\"{{commonService.btn_primary_md}}\" (click)=\"editFilter(data.data)\">\n                        Edit\n                    </button>\n                    <button class=\"{{commonService.btn_danger_md}}\" (click)=\"deleteFilter(data.data)\">\n                        Delete\n                    </button>\n                </div>\n\n\n            </dx-data-grid>\n        </div>\n    </div>\n    <div class=\"p-2 w-full\" *ngIf=\"isNewFilterCreate\">\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\n                class=\"mb-2 font-bold text-lg tracking-tight text-gray-900 dark:text-white border-b pb-3 flex items-center\">\n                <i class=\"fa fa-table mr-2\"></i> Create Filters\n\n            </h6>\n            <div class=\"flex flex-row my-2\">\n                <div class=\"mx-2 w-1/3\">\n                    <div class=\"text-md mb-2\">Filter Name</div>\n                    <dx-text-box [(ngModel)]=\"creatFilterObject.filterName\"></dx-text-box>\n                </div>\n            </div>\n            <div class=\"m-5 border\">\n                <div class=\"flex flex-col flex-auto min-w-0 \">\n                    <div class=\"text-lg py-2 font-extrabold border-b bg-gray-700 text-white px-2\"> Select Filters\n                    </div>\n                    <div class=\"pt-2 border-x border-b \">\n                        <ng-container *ngFor=\"let item of creatFilterObject.filterItems; let i = index;\">\n                            <div class=\"my-2 flex flex-row justify-between border-b\">\n\n                                <div class=\"px-2 mb-2 w-full\">\n                                    <div class=\"text-md mb-2 mt-5\"> </div>\n                                    <dx-check-box [(ngModel)]=\"item.display\" text=\"Display\"></dx-check-box>\n                                </div>\n                                <div class=\"px-2 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\">Filter Name </div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"kpiFilterConfigService\"\n                                        displayExpr=\"apiName\" valueExpr=\"apiUrl\"\n                                        [(ngModel)]=\"item.apiName\"></dx-select-box>\n                                </div>\n\n                                <div class=\"px-2 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\">Operator Key Name </div>\n                                    <dx-text-box [(ngModel)]=\"item.operatorName\"></dx-text-box>\n\n                                </div>\n                                <div class=\"px-2 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\"> FIlter Label</div>\n                                    <dx-text-box [(ngModel)]=\"item.label\"></dx-text-box>\n                                </div>\n                                <div class=\"px-2 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\"> FIlter Container</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"filter_type\"\n                                        [(ngModel)]=\"item.filterType\"></dx-select-box>\n\n                                </div>\n                                <div class=\"px-2 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\"> FIlter type</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"defaultFilterTypeDataSource\"\n                                        [(ngModel)]=\"item.defaultFilterType\"\n                                        value=\"defaultFilterTypeDataSource[0]\"></dx-select-box>\n\n                                </div>\n\n                                <ng-container\n                                    *ngIf=\"item.defaultFilterType == 'dynamic' && (item.filterType == 'date' || item.filterType == 'datetime')\">\n                                    <div class=\"px-2 mb-2 w-full\">\n                                        <div class=\"text-md mb-2\"> Function </div>\n                                        <dx-select-box [items]=\"momentFunction\"\n                                            [(ngModel)]=\"item.momentFunction\"></dx-select-box>\n                                    </div>\n                                    <div class=\"px-2 mb-2 w-full\">\n                                        <div class=\"text-md mb-2\"> Display Format </div>\n                                        <dx-text-box [(ngModel)]=\"item.momentFormat\"></dx-text-box>\n                                    </div>\n                                    <div class=\"px-2 mb-2 w-full\">\n                                        <div class=\"text-md mb-2\"> Query Format </div>\n                                        <dx-text-box [(ngModel)]=\"item.queryFormat\"></dx-text-box>\n                                    </div>\n\n                                </ng-container>\n                                <ng-container\n                                    *ngIf=\"item.defaultFilterType == 'static' && (item.filterType == 'date' || item.filterType == 'datetime')\">\n                                    <div class=\"px-2 mb-2 w-full\">\n                                        <div class=\"text-md mb-2\"> Default Value </div>\n                                        <dx-text-box \n                                            [(ngModel)]=\"item.defaultFilterValue\"></dx-text-box>\n                                    </div>\n                                    <div class=\"px-2 mb-2 w-full\">\n                                        <div class=\"text-md mb-2\"> Display Format </div>\n                                        <dx-text-box [(ngModel)]=\"item.momentFormat\"></dx-text-box>\n                                    </div>\n                                </ng-container>\n                                <ng-container\n                                    *ngIf=\"item.defaultFilterType == 'dynamic' && (item.filterType !== 'date' || item.filterType !== 'datetime')\">\n                                    <div class=\"px-2 mb-2 w-full\">\n                                        <div class=\"text-md mb-2\"> FIlter Default Value</div>\n                                        <dx-text-box [(ngModel)]=\"item.defaultFilterValue\"></dx-text-box>\n                                    </div>\n                                </ng-container>\n\n                                <div class=\"px-2 mt-8 text-center\">\n                                    <button class=\"{{commonService.btn_danger_sm}} cursor-pointer\"\n                                        (click)=\"deleteFilters(i)\"><i 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 my-2\">\n                            <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\" (click)=\"addFilter()\">Add\n                                Columns</button>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"flex w-full justify-end mt-5 border-t\">\n                <button class=\"{{commonService.btn_success_md}} cursor-pointer mx-1 my-2\" (click)=\"createFilterItems()\">\n                    Submit Filter\n                </button>\n            </div>\n\n        </div>\n    </div>\n\n\n\n</div>" }]
         }], ctorParameters: function () { return [{ type: ApplicationContentService }, { type: CommonService }, { type: i3$1.ToastrService }, { type: i2.Router }]; }, propDecorators: { dataGrid: [{
                 type: ViewChild,
                 args: ['gridContainer', { static: false }]
@@ -2388,6 +2406,7 @@ class ApplicationDatasetComponent {
         this.kpiService = kpiService;
         this.environment = environment;
         this.dataSourceModal = {};
+        this.selected_datasets = [];
         this.title.setTitle('Application Datasets');
     }
     ngOnInit() {
@@ -2773,12 +2792,29 @@ class ApplicationDatasetComponent {
         });
         return result;
     }
+    isSelectionChange(event) {
+        this.selected_datasets = event.selectedRowsData;
+    }
+    getDownloadDataset() {
+        if (this.selected_datasets.length == 0) {
+            this.toastr.error('No data available to export.', 'Export Error');
+            return;
+        }
+        const jsonStr = JSON.stringify(this.selected_datasets, null, 2);
+        const blob = new Blob([jsonStr], { type: 'application/json' });
+        const url = window.URL.createObjectURL(blob);
+        const anchor = document.createElement('a');
+        anchor.href = url;
+        anchor.download = `exported_datasets.json`;
+        anchor.click();
+        window.URL.revokeObjectURL(url);
+    }
 }
 ApplicationDatasetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ApplicationDatasetComponent, deps: [{ token: ApplicationContentService }, { token: CommonService }, { token: i3$1.ToastrService }, { token: i2.ActivatedRoute }, { token: i2.Router }, { token: i3.Title }, { token: kpicommonService$2 }, { token: APP_ENVIRONMENT }], target: i0.ɵɵFactoryTarget.Component });
-ApplicationDatasetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ApplicationDatasetComponent, selector: "app-application-dataset", viewQueries: [{ propertyName: "scrollToElement", first: true, predicate: ["scrollToElement"], descendants: true }], ngImport: i0, template: "<div class=\"flex flex-col flex-auto min-w-0\">\n    <lib-common-header [pageTitle]=\"'Application Datasets'\"></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 dark:text-white border-b pb-3 flex items-center\">\n                <i class=\"fa fa-table mr-2\"></i> Manage Datasets\n                <div class=\"ml-auto\">\n                    <button class=\"{{commonService.btnLightWhite}}\" (click)=\"backToView()\" *ngIf=\"pageViewId\">\n                        Back To View\n                    </button>\n                    <button class=\"{{commonService.btnLightWhite}}\" (click)=\"backToPage()\" *ngIf=\"pageConfigId\">\n                        Back To Page\n                    </button>\n\n                    <button class=\"{{commonService.btn_primary_md}}\" (click)=\"getCreateNewDataset()\">\n                        Add Dataset\n                    </button>\n\n                </div>\n            </h6>\n            <app-loader *ngIf=\"isLoader\"></app-loader>\n            <dx-data-grid [columnAutoWidth]=\"true\" [dataSource]=\"dataSettableDataSource\" [hoverStateEnabled]=\"true\"\n                *ngIf=\"!isLoader\" [selectedRowKeys]=\"[]\" [showBorders]=\"true\" [showColumnLines]=\"true\"\n                [showRowLines]=\"true\" id=\"gridContainer\">\n                <dxo-paging [pageSize]=\"10\"></dxo-paging>\n                <dxo-export [enabled]=\"true\"></dxo-export>\n                <dxo-search-panel [highlightCaseSensitive]=\"true\" [visible]=\"true\"></dxo-search-panel>\n\n                <dxi-column dataField=\"datasetName\"></dxi-column>\n                <dxi-column dataField=\"datasetType\"></dxi-column>\n                <dxi-column dataField=\"createdBy\"></dxi-column>\n                <dxi-column dataField=\"creationDate\" sortOrder=\"desc\"></dxi-column>\n                <dxi-column dataField=\"action\" cellTemplate=\"cellTemplate\" [fixed]=\"true\"\n                    fixedPosition=\"right\"></dxi-column>\n                <div *dxTemplate=\"let data of 'cellTemplate'\">\n                    <button class=\"{{commonService.btn_primary_md}}\" (click)=\"editDataset(data.data)\">\n                        Edit\n                    </button>\n                    <button class=\"{{commonService.btn_warning_md}}\" (click)=\"duplicateDataset(data.data)\">\n                        Duplicate\n                    </button>\n                    <button class=\"{{commonService.btn_danger_md}}\" (click)=\"deleteDataset(data.data)\">\n                        Delete\n                    </button>\n                    <button class=\"{{commonService.btn_success_md}}\" (click)=\"testDataset(data.data)\">\n                        Test Data\n                    </button>\n                </div>\n\n\n            </dx-data-grid>\n        </div>\n    </div>\n\n\n</div>\n\n\n<dx-popup [(visible)]=\"isDatasetPreview\" [closeOnOutsideClick]=\"false\" [dragEnabled]=\"false\" [width]=\"800\"\n    [height]=\"'auto'\" [showTitle]=\"true\" class=\"popup\" title=\"{{dataSourceModal.datasetName}}\">\n    <div *dxTemplate=\"let data of 'content'\">\n        <!-- <div class=\"text-2xl \">{{dataSourceModal.datasetName}}</div> -->\n        <div class=\"flex flex-row mt-2\">\n            <ng-container *ngIf=\"isFilterInputs\">\n                <ng-container *ngIf=\"dataSourceModal.config.queryConfig\">\n                    <ng-container *ngFor=\"let request of dataSourceModal.config.queryConfig.mapedFilters\">\n                        <div class=\"m-2\">\n                            <div class=\"text-md mb-1\"> {{getCapitalize(request.localColumn)}}</div>\n                            <dx-date-box displayFormat=\"yyyy-MM-dd\" type=\"date\"\n                                (onValueChanged)=\"startDateChange($event,request)\"\n                                *ngIf=\"getFilter(request.localColumn)\">\n                            </dx-date-box>\n                            <dx-text-box [(ngModel)]=\"request.defaultValue\"\n                                *ngIf=\"!getFilter(request.localColumn)\"></dx-text-box>\n                        </div>\n                    </ng-container>\n                </ng-container>\n\n                <div class=\"mt-2\">\n                    <button class=\"{{commonService.btn_primary_md}} cursor-pointer my-4\" (click)=\"getDataPreview()\">\n                        Check\n                    </button>\n                </div>\n            </ng-container>\n        </div>\n\n\n        <div class=\"w-full border p-3\">\n            <app-loader *ngIf=\"isDatasetloader\"></app-loader>\n            <ng-container *ngIf=\"!isDatasetloader\">\n\n                <pre><code>{{dataSourceModal.data | json}}</code></pre>\n            </ng-container>\n        </div>\n    </div>\n</dx-popup>", styles: [""], dependencies: [{ kind: "directive", type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.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.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: i11.DxDateBoxComponent, selector: "dx-date-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "adaptivityEnabled", "applyButtonText", "applyValueMode", "buttons", "calendarOptions", "cancelButtonText", "dateOutOfRangeMessage", "dateSerializationFormat", "deferRendering", "disabled", "disabledDates", "displayFormat", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "interval", "invalidDateMessage", "isValid", "label", "labelMode", "max", "maxLength", "min", "name", "opened", "openOnFieldClick", "pickerType", "placeholder", "readOnly", "rtlEnabled", "showAnalogClock", "showClearButton", "showDropDownButton", "spellcheck", "stylingMode", "tabIndex", "text", "type", "useMaskBehavior", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onClosed", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOpened", "onOptionChanged", "onPaste", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "adaptivityEnabledChange", "applyButtonTextChange", "applyValueModeChange", "buttonsChange", "calendarOptionsChange", "cancelButtonTextChange", "dateOutOfRangeMessageChange", "dateSerializationFormatChange", "deferRenderingChange", "disabledChange", "disabledDatesChange", "displayFormatChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "intervalChange", "invalidDateMessageChange", "isValidChange", "labelChange", "labelModeChange", "maxChange", "maxLengthChange", "minChange", "nameChange", "openedChange", "openOnFieldClickChange", "pickerTypeChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showAnalogClockChange", "showClearButtonChange", "showDropDownButtonChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "typeChange", "useMaskBehaviorChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "component", type: i9$1.DxPopupComponent, selector: "dx-popup", inputs: ["accessKey", "animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "dragAndResizeArea", "dragEnabled", "dragOutsideBoundary", "elementAttr", "focusStateEnabled", "fullScreen", "height", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "resizeEnabled", "restorePosition", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showTitle", "tabIndex", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onResize", "onResizeEnd", "onResizeStart", "onShowing", "onShown", "onTitleRendered", "accessKeyChange", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "dragAndResizeAreaChange", "dragEnabledChange", "dragOutsideBoundaryChange", "elementAttrChange", "focusStateEnabledChange", "fullScreenChange", "heightChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "resizeEnabledChange", "restorePositionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showTitleChange", "tabIndexChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { kind: "component", type: i7.DxTextBoxComponent, selector: "dx-text-box", inputs: ["accessKey", "activeStateEnabled", "buttons", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "label", "labelMode", "mask", "maskChar", "maskInvalidMessage", "maskRules", "maxLength", "mode", "name", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showMaskMode", "spellcheck", "stylingMode", "tabIndex", "text", "useMaskedValue", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOptionChanged", "onPaste", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "labelChange", "labelModeChange", "maskChange", "maskCharChange", "maskInvalidMessageChange", "maskRulesChange", "maxLengthChange", "modeChange", "nameChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showMaskModeChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useMaskedValueChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: LoaderComponent, selector: "app-loader" }, { kind: "component", type: CommonHeaderComponent, selector: "lib-common-header", inputs: ["pageTitle"] }, { kind: "pipe", type: i4$1.JsonPipe, name: "json" }] });
+ApplicationDatasetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ApplicationDatasetComponent, selector: "app-application-dataset", viewQueries: [{ propertyName: "scrollToElement", first: true, predicate: ["scrollToElement"], descendants: true }], ngImport: i0, template: "<div class=\"flex flex-col flex-auto min-w-0\">\n    <lib-common-header [pageTitle]=\"'Application Datasets'\"></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 dark:text-white border-b pb-3 flex items-center\">\n                <i class=\"fa fa-table mr-2\"></i> Manage Datasets\n                <div class=\"ml-auto\">\n                    <button class=\"{{commonService.btnLightWhite}}\" (click)=\"backToView()\" *ngIf=\"pageViewId\">\n                        Back To View\n                    </button>\n                    <button class=\"{{commonService.btnLightWhite}}\" (click)=\"backToPage()\" *ngIf=\"pageConfigId\">\n                        Back To Page\n                    </button>\n\n                    <button class=\"{{commonService.btn_primary_md}}\" (click)=\"getCreateNewDataset()\">\n                        Add Dataset\n                    </button>\n                    <button class=\"{{commonService.btn_success_md}}\" (click)=\"getDownloadDataset()\" *ngIf=\"selected_datasets.length !== 0\">\n                        Export Dataset\n                    </button>\n\n                </div>\n            </h6>\n            <app-loader *ngIf=\"isLoader\"></app-loader>\n            <dx-data-grid [columnAutoWidth]=\"true\" [dataSource]=\"dataSettableDataSource\" [hoverStateEnabled]=\"true\"\n                *ngIf=\"!isLoader\" [selectedRowKeys]=\"[]\" [showBorders]=\"true\" [showColumnLines]=\"true\"\n                [showRowLines]=\"true\" id=\"gridContainer\" (onSelectionChanged)=\"isSelectionChange($event)\">\n                <dxo-selection [selectAllMode]=\"'allMode'\" [showCheckBoxesMode]=\"'always'\" mode=\"multiple\">\n                </dxo-selection>\n                <dxo-paging [pageSize]=\"10\"></dxo-paging>\n                <dxo-export [enabled]=\"true\"></dxo-export>\n                <dxo-search-panel [highlightCaseSensitive]=\"true\" [visible]=\"true\"></dxo-search-panel>\n\n                <dxi-column dataField=\"datasetName\"></dxi-column>\n                <dxi-column dataField=\"datasetType\"></dxi-column>\n                <dxi-column dataField=\"createdBy\"></dxi-column>\n                <dxi-column dataField=\"creationDate\" sortOrder=\"desc\"></dxi-column>\n                <dxi-column dataField=\"action\" cellTemplate=\"cellTemplate\" [fixed]=\"true\"\n                    fixedPosition=\"right\"></dxi-column>\n                <div *dxTemplate=\"let data of 'cellTemplate'\">\n                    <button class=\"{{commonService.btn_primary_md}}\" (click)=\"editDataset(data.data)\">\n                        Edit\n                    </button>\n                    <button class=\"{{commonService.btn_warning_md}}\" (click)=\"duplicateDataset(data.data)\">\n                        Duplicate\n                    </button>\n                    <button class=\"{{commonService.btn_danger_md}}\" (click)=\"deleteDataset(data.data)\">\n                        Delete\n                    </button>\n                    <button class=\"{{commonService.btn_success_md}}\" (click)=\"testDataset(data.data)\">\n                        Test Data\n                    </button>\n                </div>\n\n\n            </dx-data-grid>\n        </div>\n    </div>\n\n\n</div>\n\n\n<dx-popup [(visible)]=\"isDatasetPreview\" [closeOnOutsideClick]=\"false\" [dragEnabled]=\"false\" [width]=\"800\"\n    [height]=\"'auto'\" [showTitle]=\"true\" class=\"popup\" title=\"{{dataSourceModal.datasetName}}\">\n    <div *dxTemplate=\"let data of 'content'\">\n        <!-- <div class=\"text-2xl \">{{dataSourceModal.datasetName}}</div> -->\n        <div class=\"flex flex-row mt-2\">\n            <ng-container *ngIf=\"isFilterInputs\">\n                <ng-container *ngIf=\"dataSourceModal.config.queryConfig\">\n                    <ng-container *ngFor=\"let request of dataSourceModal.config.queryConfig.mapedFilters\">\n                        <div class=\"m-2\">\n                            <div class=\"text-md mb-1\"> {{getCapitalize(request.localColumn)}}</div>\n                            <dx-date-box displayFormat=\"yyyy-MM-dd\" type=\"date\"\n                                (onValueChanged)=\"startDateChange($event,request)\"\n                                *ngIf=\"getFilter(request.localColumn)\">\n                            </dx-date-box>\n                            <dx-text-box [(ngModel)]=\"request.defaultValue\"\n                                *ngIf=\"!getFilter(request.localColumn)\"></dx-text-box>\n                        </div>\n                    </ng-container>\n                </ng-container>\n\n                <div class=\"mt-2\">\n                    <button class=\"{{commonService.btn_primary_md}} cursor-pointer my-4\" (click)=\"getDataPreview()\">\n                        Check\n                    </button>\n                </div>\n            </ng-container>\n        </div>\n\n\n        <div class=\"w-full border p-3\">\n            <app-loader *ngIf=\"isDatasetloader\"></app-loader>\n            <ng-container *ngIf=\"!isDatasetloader\">\n\n                <pre><code>{{dataSourceModal.data | json}}</code></pre>\n            </ng-container>\n        </div>\n    </div>\n</dx-popup>", styles: [""], dependencies: [{ kind: "directive", type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.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.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: i11.DxDateBoxComponent, selector: "dx-date-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "adaptivityEnabled", "applyButtonText", "applyValueMode", "buttons", "calendarOptions", "cancelButtonText", "dateOutOfRangeMessage", "dateSerializationFormat", "deferRendering", "disabled", "disabledDates", "displayFormat", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "interval", "invalidDateMessage", "isValid", "label", "labelMode", "max", "maxLength", "min", "name", "opened", "openOnFieldClick", "pickerType", "placeholder", "readOnly", "rtlEnabled", "showAnalogClock", "showClearButton", "showDropDownButton", "spellcheck", "stylingMode", "tabIndex", "text", "type", "useMaskBehavior", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onClosed", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOpened", "onOptionChanged", "onPaste", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "adaptivityEnabledChange", "applyButtonTextChange", "applyValueModeChange", "buttonsChange", "calendarOptionsChange", "cancelButtonTextChange", "dateOutOfRangeMessageChange", "dateSerializationFormatChange", "deferRenderingChange", "disabledChange", "disabledDatesChange", "displayFormatChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "intervalChange", "invalidDateMessageChange", "isValidChange", "labelChange", "labelModeChange", "maxChange", "maxLengthChange", "minChange", "nameChange", "openedChange", "openOnFieldClickChange", "pickerTypeChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showAnalogClockChange", "showClearButtonChange", "showDropDownButtonChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "typeChange", "useMaskBehaviorChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "component", type: i9$1.DxPopupComponent, selector: "dx-popup", inputs: ["accessKey", "animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "dragAndResizeArea", "dragEnabled", "dragOutsideBoundary", "elementAttr", "focusStateEnabled", "fullScreen", "height", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "resizeEnabled", "restorePosition", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showTitle", "tabIndex", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onResize", "onResizeEnd", "onResizeStart", "onShowing", "onShown", "onTitleRendered", "accessKeyChange", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "dragAndResizeAreaChange", "dragEnabledChange", "dragOutsideBoundaryChange", "elementAttrChange", "focusStateEnabledChange", "fullScreenChange", "heightChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "resizeEnabledChange", "restorePositionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showTitleChange", "tabIndexChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { kind: "component", type: i7.DxTextBoxComponent, selector: "dx-text-box", inputs: ["accessKey", "activeStateEnabled", "buttons", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "label", "labelMode", "mask", "maskChar", "maskInvalidMessage", "maskRules", "maxLength", "mode", "name", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showMaskMode", "spellcheck", "stylingMode", "tabIndex", "text", "useMaskedValue", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOptionChanged", "onPaste", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "labelChange", "labelModeChange", "maskChange", "maskCharChange", "maskInvalidMessageChange", "maskRulesChange", "maxLengthChange", "modeChange", "nameChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showMaskModeChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useMaskedValueChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: LoaderComponent, selector: "app-loader" }, { kind: "component", type: CommonHeaderComponent, selector: "lib-common-header", inputs: ["pageTitle"] }, { kind: "pipe", type: i4$1.JsonPipe, name: "json" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ApplicationDatasetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-application-dataset', template: "<div class=\"flex flex-col flex-auto min-w-0\">\n    <lib-common-header [pageTitle]=\"'Application Datasets'\"></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 dark:text-white border-b pb-3 flex items-center\">\n                <i class=\"fa fa-table mr-2\"></i> Manage Datasets\n                <div class=\"ml-auto\">\n                    <button class=\"{{commonService.btnLightWhite}}\" (click)=\"backToView()\" *ngIf=\"pageViewId\">\n                        Back To View\n                    </button>\n                    <button class=\"{{commonService.btnLightWhite}}\" (click)=\"backToPage()\" *ngIf=\"pageConfigId\">\n                        Back To Page\n                    </button>\n\n                    <button class=\"{{commonService.btn_primary_md}}\" (click)=\"getCreateNewDataset()\">\n                        Add Dataset\n                    </button>\n\n                </div>\n            </h6>\n            <app-loader *ngIf=\"isLoader\"></app-loader>\n            <dx-data-grid [columnAutoWidth]=\"true\" [dataSource]=\"dataSettableDataSource\" [hoverStateEnabled]=\"true\"\n                *ngIf=\"!isLoader\" [selectedRowKeys]=\"[]\" [showBorders]=\"true\" [showColumnLines]=\"true\"\n                [showRowLines]=\"true\" id=\"gridContainer\">\n                <dxo-paging [pageSize]=\"10\"></dxo-paging>\n                <dxo-export [enabled]=\"true\"></dxo-export>\n                <dxo-search-panel [highlightCaseSensitive]=\"true\" [visible]=\"true\"></dxo-search-panel>\n\n                <dxi-column dataField=\"datasetName\"></dxi-column>\n                <dxi-column dataField=\"datasetType\"></dxi-column>\n                <dxi-column dataField=\"createdBy\"></dxi-column>\n                <dxi-column dataField=\"creationDate\" sortOrder=\"desc\"></dxi-column>\n                <dxi-column dataField=\"action\" cellTemplate=\"cellTemplate\" [fixed]=\"true\"\n                    fixedPosition=\"right\"></dxi-column>\n                <div *dxTemplate=\"let data of 'cellTemplate'\">\n                    <button class=\"{{commonService.btn_primary_md}}\" (click)=\"editDataset(data.data)\">\n                        Edit\n                    </button>\n                    <button class=\"{{commonService.btn_warning_md}}\" (click)=\"duplicateDataset(data.data)\">\n                        Duplicate\n                    </button>\n                    <button class=\"{{commonService.btn_danger_md}}\" (click)=\"deleteDataset(data.data)\">\n                        Delete\n                    </button>\n                    <button class=\"{{commonService.btn_success_md}}\" (click)=\"testDataset(data.data)\">\n                        Test Data\n                    </button>\n                </div>\n\n\n            </dx-data-grid>\n        </div>\n    </div>\n\n\n</div>\n\n\n<dx-popup [(visible)]=\"isDatasetPreview\" [closeOnOutsideClick]=\"false\" [dragEnabled]=\"false\" [width]=\"800\"\n    [height]=\"'auto'\" [showTitle]=\"true\" class=\"popup\" title=\"{{dataSourceModal.datasetName}}\">\n    <div *dxTemplate=\"let data of 'content'\">\n        <!-- <div class=\"text-2xl \">{{dataSourceModal.datasetName}}</div> -->\n        <div class=\"flex flex-row mt-2\">\n            <ng-container *ngIf=\"isFilterInputs\">\n                <ng-container *ngIf=\"dataSourceModal.config.queryConfig\">\n                    <ng-container *ngFor=\"let request of dataSourceModal.config.queryConfig.mapedFilters\">\n                        <div class=\"m-2\">\n                            <div class=\"text-md mb-1\"> {{getCapitalize(request.localColumn)}}</div>\n                            <dx-date-box displayFormat=\"yyyy-MM-dd\" type=\"date\"\n                                (onValueChanged)=\"startDateChange($event,request)\"\n                                *ngIf=\"getFilter(request.localColumn)\">\n                            </dx-date-box>\n                            <dx-text-box [(ngModel)]=\"request.defaultValue\"\n                                *ngIf=\"!getFilter(request.localColumn)\"></dx-text-box>\n                        </div>\n                    </ng-container>\n                </ng-container>\n\n                <div class=\"mt-2\">\n                    <button class=\"{{commonService.btn_primary_md}} cursor-pointer my-4\" (click)=\"getDataPreview()\">\n                        Check\n                    </button>\n                </div>\n            </ng-container>\n        </div>\n\n\n        <div class=\"w-full border p-3\">\n            <app-loader *ngIf=\"isDatasetloader\"></app-loader>\n            <ng-container *ngIf=\"!isDatasetloader\">\n\n                <pre><code>{{dataSourceModal.data | json}}</code></pre>\n            </ng-container>\n        </div>\n    </div>\n</dx-popup>" }]
+            args: [{ selector: 'app-application-dataset', template: "<div class=\"flex flex-col flex-auto min-w-0\">\n    <lib-common-header [pageTitle]=\"'Application Datasets'\"></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 dark:text-white border-b pb-3 flex items-center\">\n                <i class=\"fa fa-table mr-2\"></i> Manage Datasets\n                <div class=\"ml-auto\">\n                    <button class=\"{{commonService.btnLightWhite}}\" (click)=\"backToView()\" *ngIf=\"pageViewId\">\n                        Back To View\n                    </button>\n                    <button class=\"{{commonService.btnLightWhite}}\" (click)=\"backToPage()\" *ngIf=\"pageConfigId\">\n                        Back To Page\n                    </button>\n\n                    <button class=\"{{commonService.btn_primary_md}}\" (click)=\"getCreateNewDataset()\">\n                        Add Dataset\n                    </button>\n                    <button class=\"{{commonService.btn_success_md}}\" (click)=\"getDownloadDataset()\" *ngIf=\"selected_datasets.length !== 0\">\n                        Export Dataset\n                    </button>\n\n                </div>\n            </h6>\n            <app-loader *ngIf=\"isLoader\"></app-loader>\n            <dx-data-grid [columnAutoWidth]=\"true\" [dataSource]=\"dataSettableDataSource\" [hoverStateEnabled]=\"true\"\n                *ngIf=\"!isLoader\" [selectedRowKeys]=\"[]\" [showBorders]=\"true\" [showColumnLines]=\"true\"\n                [showRowLines]=\"true\" id=\"gridContainer\" (onSelectionChanged)=\"isSelectionChange($event)\">\n                <dxo-selection [selectAllMode]=\"'allMode'\" [showCheckBoxesMode]=\"'always'\" mode=\"multiple\">\n                </dxo-selection>\n                <dxo-paging [pageSize]=\"10\"></dxo-paging>\n                <dxo-export [enabled]=\"true\"></dxo-export>\n                <dxo-search-panel [highlightCaseSensitive]=\"true\" [visible]=\"true\"></dxo-search-panel>\n\n                <dxi-column dataField=\"datasetName\"></dxi-column>\n                <dxi-column dataField=\"datasetType\"></dxi-column>\n                <dxi-column dataField=\"createdBy\"></dxi-column>\n                <dxi-column dataField=\"creationDate\" sortOrder=\"desc\"></dxi-column>\n                <dxi-column dataField=\"action\" cellTemplate=\"cellTemplate\" [fixed]=\"true\"\n                    fixedPosition=\"right\"></dxi-column>\n                <div *dxTemplate=\"let data of 'cellTemplate'\">\n                    <button class=\"{{commonService.btn_primary_md}}\" (click)=\"editDataset(data.data)\">\n                        Edit\n                    </button>\n                    <button class=\"{{commonService.btn_warning_md}}\" (click)=\"duplicateDataset(data.data)\">\n                        Duplicate\n                    </button>\n                    <button class=\"{{commonService.btn_danger_md}}\" (click)=\"deleteDataset(data.data)\">\n                        Delete\n                    </button>\n                    <button class=\"{{commonService.btn_success_md}}\" (click)=\"testDataset(data.data)\">\n                        Test Data\n                    </button>\n                </div>\n\n\n            </dx-data-grid>\n        </div>\n    </div>\n\n\n</div>\n\n\n<dx-popup [(visible)]=\"isDatasetPreview\" [closeOnOutsideClick]=\"false\" [dragEnabled]=\"false\" [width]=\"800\"\n    [height]=\"'auto'\" [showTitle]=\"true\" class=\"popup\" title=\"{{dataSourceModal.datasetName}}\">\n    <div *dxTemplate=\"let data of 'content'\">\n        <!-- <div class=\"text-2xl \">{{dataSourceModal.datasetName}}</div> -->\n        <div class=\"flex flex-row mt-2\">\n            <ng-container *ngIf=\"isFilterInputs\">\n                <ng-container *ngIf=\"dataSourceModal.config.queryConfig\">\n                    <ng-container *ngFor=\"let request of dataSourceModal.config.queryConfig.mapedFilters\">\n                        <div class=\"m-2\">\n                            <div class=\"text-md mb-1\"> {{getCapitalize(request.localColumn)}}</div>\n                            <dx-date-box displayFormat=\"yyyy-MM-dd\" type=\"date\"\n                                (onValueChanged)=\"startDateChange($event,request)\"\n                                *ngIf=\"getFilter(request.localColumn)\">\n                            </dx-date-box>\n                            <dx-text-box [(ngModel)]=\"request.defaultValue\"\n                                *ngIf=\"!getFilter(request.localColumn)\"></dx-text-box>\n                        </div>\n                    </ng-container>\n                </ng-container>\n\n                <div class=\"mt-2\">\n                    <button class=\"{{commonService.btn_primary_md}} cursor-pointer my-4\" (click)=\"getDataPreview()\">\n                        Check\n                    </button>\n                </div>\n            </ng-container>\n        </div>\n\n\n        <div class=\"w-full border p-3\">\n            <app-loader *ngIf=\"isDatasetloader\"></app-loader>\n            <ng-container *ngIf=\"!isDatasetloader\">\n\n                <pre><code>{{dataSourceModal.data | json}}</code></pre>\n            </ng-container>\n        </div>\n    </div>\n</dx-popup>" }]
         }], ctorParameters: function () { return [{ type: ApplicationContentService }, { type: CommonService }, { type: i3$1.ToastrService }, { type: i2.ActivatedRoute }, { type: i2.Router }, { type: i3.Title }, { type: kpicommonService$2 }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [APP_ENVIRONMENT]
@@ -2807,6 +2843,7 @@ class ApplicationViewsComponent {
             { "compName": "GammaTableWithPercentageComponent", "item": "Table View with percentage" },
             { "compName": "GammSingleNumberCardComponent", "item": "Single Number Card" }
         ];
+        this.selected_views = [];
         this.isPopupVisible = false;
         this.jsonContent = '';
         this.title.setTitle('Application Views');
@@ -2959,12 +2996,29 @@ class ApplicationViewsComponent {
             console.error('Failed to copy text: ', err);
         });
     }
+    isSelectionChange(event) {
+        this.selected_views = event.selectedRowsData;
+    }
+    getDownloadViews() {
+        if (this.selected_views.length == 0) {
+            this.toastr.error('No data available to export.', 'Export Error');
+            return;
+        }
+        const jsonStr = JSON.stringify(this.selected_views, null, 2);
+        const blob = new Blob([jsonStr], { type: 'application/json' });
+        const url = window.URL.createObjectURL(blob);
+        const anchor = document.createElement('a');
+        anchor.href = url;
+        anchor.download = `exported_views.json`;
+        anchor.click();
+        window.URL.revokeObjectURL(url);
+    }
 }
 ApplicationViewsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ApplicationViewsComponent, deps: [{ token: ApplicationContentService }, { token: CommonService }, { token: i3$1.ToastrService }, { token: i3.Title }, { token: i2.ActivatedRoute }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component });
-ApplicationViewsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ApplicationViewsComponent, selector: "app-application-views", viewQueries: [{ propertyName: "scrollToElement", first: true, predicate: ["scrollToElement"], descendants: true }], ngImport: i0, template: "<div class=\"flex flex-col flex-auto min-w-0\">\n\n    <lib-common-header [pageTitle]=\"'Application Views'\"></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                <i class=\"fa fa-table mr-2\"></i> Manage Views\n                <div class=\"ml-auto\">\n\n\n                    <button class=\"{{commonService.btnLightWhite}}\" (click)=\"backToPage()\" *ngIf=\"pageId\">\n                        Back To Page\n                    </button>\n                    <button (click)=\"importConfigPopup()\" class=\"{{commonService.btn_warning_md}}\">\n                        Import Config\n                    </button>\n                    <button class=\"{{commonService.btn_primary_md}}\" (click)=\"createNewComponentView()\">\n                        Add View\n                    </button>\n\n                </div>\n            </h6>\n            <app-loader *ngIf=\"isLoader\"></app-loader>\n            <dx-data-grid [columnAutoWidth]=\"true\" [dataSource]=\"componentViewTableDataSource\"\n                [hoverStateEnabled]=\"true\" *ngIf=\"!isLoader\" [selectedRowKeys]=\"[]\" [showBorders]=\"true\"\n                [showColumnLines]=\"true\" [showRowLines]=\"true\" id=\"gridContainer\">\n                <dxo-paging [pageSize]=\"10\"></dxo-paging>\n                <dxo-export [enabled]=\"true\"></dxo-export>\n                <dxo-search-panel [highlightCaseSensitive]=\"true\" [visible]=\"true\">\n                </dxo-search-panel>\n\n                <dxi-column dataField=\"viewName\"></dxi-column>\n                <!--                <dxi-column dataField=\"datasetName\"></dxi-column>-->\n                <!-- <dxi-column dataField=\"viewLabel\"></dxi-column> -->\n                <dxi-column dataField=\"kpiConfig.formate\"></dxi-column>\n                <dxi-column dataField=\"kpiConfig.componentName\"></dxi-column>\n                <dxi-column dataField=\"viewType\"></dxi-column>\n                <dxi-column dataField=\"createdBy\"></dxi-column>\n                <dxi-column dataField=\"creationDate\" sortOrder=\"desc\"></dxi-column>\n                <dxi-column dataField=\"action\" cellTemplate=\"cellTemplate\" [fixed]=\"true\"\n                    fixedPosition=\"right\"></dxi-column>\n                <div *dxTemplate=\"let data of 'cellTemplate'\">\n                    <button class=\"{{commonService.btn_primary_md}}\" (click)=\"editViews(data.data)\">\n                        Edit\n                    </button>\n                    <!-- <button class=\"{{commonService.btn_warning_md}}\" (click)=\"duplicateViews(data.data)\">\n                        Duplicate\n                    </button> -->\n                    <button class=\"{{commonService.btn_danger_md}}\" (click)=\"deleteDataset(data.data)\">\n                        Delete\n                    </button>\n\n                    <button class=\"{{commonService.btn_primary_md}}\" (click)=\"exportJsonFile(data.data)\"\n                        title=\"Export View\">\n                        <i class=\"fa fa-sign-out\"></i>\n\n                    </button>\n                    <button class=\"{{commonService.btn_warning_md}}\" (click)=\"copyJsonFile(data.data)\"\n                        title=\"Copy as Json\">\n                        <i class=\"fa fa-files-o\"></i>\n\n\n                    </button>\n                </div>\n\n\n\n            </dx-data-grid>\n        </div>\n    </div>\n\n</div>\n\n\n<dx-popup [(visible)]=\"isPopupVisible\" [dragEnabled]=\"false\" [closeOnOutsideClick]=\"false\" [showTitle]=\"true\"\n    title=\"Model Editor\" [width]=\"1000\" [height]=\"620\">\n\n    <div>\n        <button (click)=\"hidePopup()\" class=\"btn btn-secondary\"></button>\n        <div class=\"m-2 flex items-center justify-between\">\n            <input type=\"file\" #fileInput accept=\".json\"\n                class=\"block w-3/5 p-2 text-sm text-gray-400 border border-gray-700 rounded-lg bg-gray-800 focus:ring-blue-500 focus:border-blue-500\"\n                (change)=\"onjsonFileSelected($event)\">\n            <button (click)=\"submitView()\" class=\"{{commonService.btn_success_md}} mr-4\">Submit</button>\n\n        </div>\n        <textarea [(ngModel)]=\"jsonContent\"\n            class=\"w-full h-100 p-2  border border-gray-700 rounded-lg bg-gray-800 text-gray-400\"></textarea>\n    </div>\n</dx-popup>", styles: [""], dependencies: [{ kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.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.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: i9$1.DxPopupComponent, selector: "dx-popup", inputs: ["accessKey", "animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "dragAndResizeArea", "dragEnabled", "dragOutsideBoundary", "elementAttr", "focusStateEnabled", "fullScreen", "height", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "resizeEnabled", "restorePosition", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showTitle", "tabIndex", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onResize", "onResizeEnd", "onResizeStart", "onShowing", "onShown", "onTitleRendered", "accessKeyChange", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "dragAndResizeAreaChange", "dragEnabledChange", "dragOutsideBoundaryChange", "elementAttrChange", "focusStateEnabledChange", "fullScreenChange", "heightChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "resizeEnabledChange", "restorePositionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showTitleChange", "tabIndexChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { kind: "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: LoaderComponent, selector: "app-loader" }, { kind: "component", type: CommonHeaderComponent, selector: "lib-common-header", inputs: ["pageTitle"] }] });
+ApplicationViewsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ApplicationViewsComponent, selector: "app-application-views", viewQueries: [{ propertyName: "scrollToElement", first: true, predicate: ["scrollToElement"], descendants: true }], ngImport: i0, template: "<div class=\"flex flex-col flex-auto min-w-0\">\n\n    <lib-common-header [pageTitle]=\"'Application Views'\"></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                <i class=\"fa fa-table mr-2\"></i> Manage Views\n                <div class=\"ml-auto\">\n\n\n                    <button class=\"{{commonService.btnLightWhite}}\" (click)=\"backToPage()\" *ngIf=\"pageId\">\n                        Back To Page\n                    </button>\n                    <button (click)=\"importConfigPopup()\" class=\"{{commonService.btn_warning_md}}\">\n                        Import Config\n                    </button>\n                    <button class=\"{{commonService.btn_primary_md}}\" (click)=\"createNewComponentView()\">\n                        Add View\n                    </button>\n                    <button class=\"{{commonService.btn_success_md}}\" (click)=\"getDownloadViews()\"\n                        *ngIf=\"selected_views.length !== 0\">\n                        Export Views\n                    </button>\n                </div>\n            </h6>\n            <app-loader *ngIf=\"isLoader\"></app-loader>\n            <dx-data-grid [columnAutoWidth]=\"true\" [dataSource]=\"componentViewTableDataSource\"\n                [hoverStateEnabled]=\"true\" *ngIf=\"!isLoader\" [selectedRowKeys]=\"[]\" [showBorders]=\"true\"\n                [showColumnLines]=\"true\" [showRowLines]=\"true\" id=\"gridContainer\" (onSelectionChanged)=\"isSelectionChange($event)\">\n                 <dxo-selection [selectAllMode]=\"'allMode'\" [showCheckBoxesMode]=\"'always'\" mode=\"multiple\">\n                </dxo-selection>\n                <dxo-paging [pageSize]=\"10\"></dxo-paging>\n                <dxo-export [enabled]=\"true\"></dxo-export>\n                <dxo-search-panel [highlightCaseSensitive]=\"true\" [visible]=\"true\">\n                </dxo-search-panel>\n\n                <dxi-column dataField=\"viewName\"></dxi-column>\n                <!--                <dxi-column dataField=\"datasetName\"></dxi-column>-->\n                <!-- <dxi-column dataField=\"viewLabel\"></dxi-column> -->\n                <dxi-column dataField=\"kpiConfig.formate\"></dxi-column>\n                <dxi-column dataField=\"kpiConfig.componentName\"></dxi-column>\n                <dxi-column dataField=\"viewType\"></dxi-column>\n                <dxi-column dataField=\"createdBy\"></dxi-column>\n                <dxi-column dataField=\"creationDate\" sortOrder=\"desc\"></dxi-column>\n                <dxi-column dataField=\"action\" cellTemplate=\"cellTemplate\" [fixed]=\"true\"\n                    fixedPosition=\"right\"></dxi-column>\n                <div *dxTemplate=\"let data of 'cellTemplate'\">\n                    <button class=\"{{commonService.btn_primary_md}}\" (click)=\"editViews(data.data)\">\n                        Edit\n                    </button>\n                    <!-- <button class=\"{{commonService.btn_warning_md}}\" (click)=\"duplicateViews(data.data)\">\n                        Duplicate\n                    </button> -->\n                    <button class=\"{{commonService.btn_danger_md}}\" (click)=\"deleteDataset(data.data)\">\n                        Delete\n                    </button>\n\n                    <button class=\"{{commonService.btn_primary_md}}\" (click)=\"exportJsonFile(data.data)\"\n                        title=\"Export View\">\n                        <i class=\"fa fa-sign-out\"></i>\n\n                    </button>\n                    <button class=\"{{commonService.btn_warning_md}}\" (click)=\"copyJsonFile(data.data)\"\n                        title=\"Copy as Json\">\n                        <i class=\"fa fa-files-o\"></i>\n\n\n                    </button>\n                </div>\n\n\n\n            </dx-data-grid>\n        </div>\n    </div>\n\n</div>\n\n\n<dx-popup [(visible)]=\"isPopupVisible\" [dragEnabled]=\"false\" [closeOnOutsideClick]=\"false\" [showTitle]=\"true\"\n    title=\"Model Editor\" [width]=\"1000\" [height]=\"620\">\n\n    <div>\n        <button (click)=\"hidePopup()\" class=\"btn btn-secondary\"></button>\n        <div class=\"m-2 flex items-center justify-between\">\n            <input type=\"file\" #fileInput accept=\".json\"\n                class=\"block w-3/5 p-2 text-sm text-gray-400 border border-gray-700 rounded-lg bg-gray-800 focus:ring-blue-500 focus:border-blue-500\"\n                (change)=\"onjsonFileSelected($event)\">\n            <button (click)=\"submitView()\" class=\"{{commonService.btn_success_md}} mr-4\">Submit</button>\n\n        </div>\n        <textarea [(ngModel)]=\"jsonContent\"\n            class=\"w-full h-100 p-2  border border-gray-700 rounded-lg bg-gray-800 text-gray-400\"></textarea>\n    </div>\n</dx-popup>", styles: [""], dependencies: [{ kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.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.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: i9$1.DxPopupComponent, selector: "dx-popup", inputs: ["accessKey", "animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "dragAndResizeArea", "dragEnabled", "dragOutsideBoundary", "elementAttr", "focusStateEnabled", "fullScreen", "height", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "resizeEnabled", "restorePosition", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showTitle", "tabIndex", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onResize", "onResizeEnd", "onResizeStart", "onShowing", "onShown", "onTitleRendered", "accessKeyChange", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "dragAndResizeAreaChange", "dragEnabledChange", "dragOutsideBoundaryChange", "elementAttrChange", "focusStateEnabledChange", "fullScreenChange", "heightChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "resizeEnabledChange", "restorePositionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showTitleChange", "tabIndexChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { kind: "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: LoaderComponent, selector: "app-loader" }, { kind: "component", type: CommonHeaderComponent, selector: "lib-common-header", inputs: ["pageTitle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ApplicationViewsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-application-views', template: "<div class=\"flex flex-col flex-auto min-w-0\">\n\n    <lib-common-header [pageTitle]=\"'Application Views'\"></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                <i class=\"fa fa-table mr-2\"></i> Manage Views\n                <div class=\"ml-auto\">\n\n\n                    <button class=\"{{commonService.btnLightWhite}}\" (click)=\"backToPage()\" *ngIf=\"pageId\">\n                        Back To Page\n                    </button>\n                    <button (click)=\"importConfigPopup()\" class=\"{{commonService.btn_warning_md}}\">\n                        Import Config\n                    </button>\n                    <button class=\"{{commonService.btn_primary_md}}\" (click)=\"createNewComponentView()\">\n                        Add View\n                    </button>\n\n                </div>\n            </h6>\n            <app-loader *ngIf=\"isLoader\"></app-loader>\n            <dx-data-grid [columnAutoWidth]=\"true\" [dataSource]=\"componentViewTableDataSource\"\n                [hoverStateEnabled]=\"true\" *ngIf=\"!isLoader\" [selectedRowKeys]=\"[]\" [showBorders]=\"true\"\n                [showColumnLines]=\"true\" [showRowLines]=\"true\" id=\"gridContainer\">\n                <dxo-paging [pageSize]=\"10\"></dxo-paging>\n                <dxo-export [enabled]=\"true\"></dxo-export>\n                <dxo-search-panel [highlightCaseSensitive]=\"true\" [visible]=\"true\">\n                </dxo-search-panel>\n\n                <dxi-column dataField=\"viewName\"></dxi-column>\n                <!--                <dxi-column dataField=\"datasetName\"></dxi-column>-->\n                <!-- <dxi-column dataField=\"viewLabel\"></dxi-column> -->\n                <dxi-column dataField=\"kpiConfig.formate\"></dxi-column>\n                <dxi-column dataField=\"kpiConfig.componentName\"></dxi-column>\n                <dxi-column dataField=\"viewType\"></dxi-column>\n                <dxi-column dataField=\"createdBy\"></dxi-column>\n                <dxi-column dataField=\"creationDate\" sortOrder=\"desc\"></dxi-column>\n                <dxi-column dataField=\"action\" cellTemplate=\"cellTemplate\" [fixed]=\"true\"\n                    fixedPosition=\"right\"></dxi-column>\n                <div *dxTemplate=\"let data of 'cellTemplate'\">\n                    <button class=\"{{commonService.btn_primary_md}}\" (click)=\"editViews(data.data)\">\n                        Edit\n                    </button>\n                    <!-- <button class=\"{{commonService.btn_warning_md}}\" (click)=\"duplicateViews(data.data)\">\n                        Duplicate\n                    </button> -->\n                    <button class=\"{{commonService.btn_danger_md}}\" (click)=\"deleteDataset(data.data)\">\n                        Delete\n                    </button>\n\n                    <button class=\"{{commonService.btn_primary_md}}\" (click)=\"exportJsonFile(data.data)\"\n                        title=\"Export View\">\n                        <i class=\"fa fa-sign-out\"></i>\n\n                    </button>\n                    <button class=\"{{commonService.btn_warning_md}}\" (click)=\"copyJsonFile(data.data)\"\n                        title=\"Copy as Json\">\n                        <i class=\"fa fa-files-o\"></i>\n\n\n                    </button>\n                </div>\n\n\n\n            </dx-data-grid>\n        </div>\n    </div>\n\n</div>\n\n\n<dx-popup [(visible)]=\"isPopupVisible\" [dragEnabled]=\"false\" [closeOnOutsideClick]=\"false\" [showTitle]=\"true\"\n    title=\"Model Editor\" [width]=\"1000\" [height]=\"620\">\n\n    <div>\n        <button (click)=\"hidePopup()\" class=\"btn btn-secondary\"></button>\n        <div class=\"m-2 flex items-center justify-between\">\n            <input type=\"file\" #fileInput accept=\".json\"\n                class=\"block w-3/5 p-2 text-sm text-gray-400 border border-gray-700 rounded-lg bg-gray-800 focus:ring-blue-500 focus:border-blue-500\"\n                (change)=\"onjsonFileSelected($event)\">\n            <button (click)=\"submitView()\" class=\"{{commonService.btn_success_md}} mr-4\">Submit</button>\n\n        </div>\n        <textarea [(ngModel)]=\"jsonContent\"\n            class=\"w-full h-100 p-2  border border-gray-700 rounded-lg bg-gray-800 text-gray-400\"></textarea>\n    </div>\n</dx-popup>" }]
+            args: [{ selector: 'app-application-views', template: "<div class=\"flex flex-col flex-auto min-w-0\">\n\n    <lib-common-header [pageTitle]=\"'Application Views'\"></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                <i class=\"fa fa-table mr-2\"></i> Manage Views\n                <div class=\"ml-auto\">\n\n\n                    <button class=\"{{commonService.btnLightWhite}}\" (click)=\"backToPage()\" *ngIf=\"pageId\">\n                        Back To Page\n                    </button>\n                    <button (click)=\"importConfigPopup()\" class=\"{{commonService.btn_warning_md}}\">\n                        Import Config\n                    </button>\n                    <button class=\"{{commonService.btn_primary_md}}\" (click)=\"createNewComponentView()\">\n                        Add View\n                    </button>\n                    <button class=\"{{commonService.btn_success_md}}\" (click)=\"getDownloadViews()\"\n                        *ngIf=\"selected_views.length !== 0\">\n                        Export Views\n                    </button>\n                </div>\n            </h6>\n            <app-loader *ngIf=\"isLoader\"></app-loader>\n            <dx-data-grid [columnAutoWidth]=\"true\" [dataSource]=\"componentViewTableDataSource\"\n                [hoverStateEnabled]=\"true\" *ngIf=\"!isLoader\" [selectedRowKeys]=\"[]\" [showBorders]=\"true\"\n                [showColumnLines]=\"true\" [showRowLines]=\"true\" id=\"gridContainer\" (onSelectionChanged)=\"isSelectionChange($event)\">\n                 <dxo-selection [selectAllMode]=\"'allMode'\" [showCheckBoxesMode]=\"'always'\" mode=\"multiple\">\n                </dxo-selection>\n                <dxo-paging [pageSize]=\"10\"></dxo-paging>\n                <dxo-export [enabled]=\"true\"></dxo-export>\n                <dxo-search-panel [highlightCaseSensitive]=\"true\" [visible]=\"true\">\n                </dxo-search-panel>\n\n                <dxi-column dataField=\"viewName\"></dxi-column>\n                <!--                <dxi-column dataField=\"datasetName\"></dxi-column>-->\n                <!-- <dxi-column dataField=\"viewLabel\"></dxi-column> -->\n                <dxi-column dataField=\"kpiConfig.formate\"></dxi-column>\n                <dxi-column dataField=\"kpiConfig.componentName\"></dxi-column>\n                <dxi-column dataField=\"viewType\"></dxi-column>\n                <dxi-column dataField=\"createdBy\"></dxi-column>\n                <dxi-column dataField=\"creationDate\" sortOrder=\"desc\"></dxi-column>\n                <dxi-column dataField=\"action\" cellTemplate=\"cellTemplate\" [fixed]=\"true\"\n                    fixedPosition=\"right\"></dxi-column>\n                <div *dxTemplate=\"let data of 'cellTemplate'\">\n                    <button class=\"{{commonService.btn_primary_md}}\" (click)=\"editViews(data.data)\">\n                        Edit\n                    </button>\n                    <!-- <button class=\"{{commonService.btn_warning_md}}\" (click)=\"duplicateViews(data.data)\">\n                        Duplicate\n                    </button> -->\n                    <button class=\"{{commonService.btn_danger_md}}\" (click)=\"deleteDataset(data.data)\">\n                        Delete\n                    </button>\n\n                    <button class=\"{{commonService.btn_primary_md}}\" (click)=\"exportJsonFile(data.data)\"\n                        title=\"Export View\">\n                        <i class=\"fa fa-sign-out\"></i>\n\n                    </button>\n                    <button class=\"{{commonService.btn_warning_md}}\" (click)=\"copyJsonFile(data.data)\"\n                        title=\"Copy as Json\">\n                        <i class=\"fa fa-files-o\"></i>\n\n\n                    </button>\n                </div>\n\n\n\n            </dx-data-grid>\n        </div>\n    </div>\n\n</div>\n\n\n<dx-popup [(visible)]=\"isPopupVisible\" [dragEnabled]=\"false\" [closeOnOutsideClick]=\"false\" [showTitle]=\"true\"\n    title=\"Model Editor\" [width]=\"1000\" [height]=\"620\">\n\n    <div>\n        <button (click)=\"hidePopup()\" class=\"btn btn-secondary\"></button>\n        <div class=\"m-2 flex items-center justify-between\">\n            <input type=\"file\" #fileInput accept=\".json\"\n                class=\"block w-3/5 p-2 text-sm text-gray-400 border border-gray-700 rounded-lg bg-gray-800 focus:ring-blue-500 focus:border-blue-500\"\n                (change)=\"onjsonFileSelected($event)\">\n            <button (click)=\"submitView()\" class=\"{{commonService.btn_success_md}} mr-4\">Submit</button>\n\n        </div>\n        <textarea [(ngModel)]=\"jsonContent\"\n            class=\"w-full h-100 p-2  border border-gray-700 rounded-lg bg-gray-800 text-gray-400\"></textarea>\n    </div>\n</dx-popup>" }]
         }], ctorParameters: function () { return [{ type: ApplicationContentService }, { type: CommonService }, { type: i3$1.ToastrService }, { type: i3.Title }, { type: i2.ActivatedRoute }, { type: i2.Router }]; }, propDecorators: { scrollToElement: [{
                 type: ViewChild,
                 args: ['scrollToElement']
@@ -4271,6 +4325,7 @@ class DashChartComponent {
                     "chartAxis": "",
                     "legendDisplay": true,
                     "caption": "",
+                    "palette": "",
                     "chart_config": [],
                 },
                 "commonConfig": {
@@ -4629,10 +4684,10 @@ class DashChartComponent {
     }
 }
 DashChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DashChartComponent, deps: [{ token: CommonService }, { token: ApplicationContentService }, { token: i3$1.ToastrService }], target: i0.ɵɵFactoryTarget.Component });
-DashChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DashChartComponent, selector: "app-dash-chart", inputs: { chartconfigData: ["datasetmodal", "chartconfigData"] }, outputs: { getChartConfigOutPut: "getChartConfigOutPut" }, ngImport: i0, template: "<div class=\"mx-2\">\n    <div class=\"w-full m-2 border\">\n        <ng-container *ngIf=\"!isJsonPreview\">\n            <pre><code>{{jsaonDatasource | json}}</code></pre>\n        </ng-container>\n        <ng-container *ngIf=\"isJsonPreview\">\n            <ng-container *ngIf=\"chartType == 'doughnut' || chartType == 'pie'\">\n                <div\n                    class=\"m-3 p-4 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700\">\n                    <!-- <h6 class=\"mb-1 text-md font-bold tracking-tight text-gray-900 dark:text-white border-b pb-3\">\n                        {{widGetConfig.widgetTitle}}\n                    </h6> -->\n                    <dx-pie-chart id=\"pie\" [type]=\"chartType\"\n                        [title]=\"{ text: chartConfig.caption, font: { size: 14 } }\" palette=\"Soft Pastel\"\n                        [dataSource]=\"dataSourseForChart\" centerTemplate=\"centerTemplate\"\n                        (onPointClick)=\"pointClickHandler($event)\" [palette]=\"chartConfig.palette\">\n\n                        <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n                            <ng-container *ngIf=\"item.color\">\n                                <dxi-series argumentField={{chartConfig.argumentField}} valueField=\"{{item.valueField}}\"\n                                    name=\"{{item.name}}\" color=\"{{item.color}}\">\n                                    <dxo-label [visible]=\"chartConfig.labelDisplay\" format=\"#,##0.##\">\n                                        <dxo-connector [visible]=\"true\"></dxo-connector>\n                                    </dxo-label>\n                                </dxi-series>\n                            </ng-container>\n                            <ng-container *ngIf=\"!item.color\">\n                                <dxi-series argumentField={{chartConfig.argumentField}} valueField=\"{{item.valueField}}\"\n                                    name=\"{{item.name}}\">\n                                    <dxo-label [visible]=\"chartConfig.labelDisplay\" format=\"#,##0.##\">\n                                        <dxo-connector [visible]=\"true\"></dxo-connector>\n                                    </dxo-label>\n                                </dxi-series>\n                            </ng-container>\n                        </ng-container>\n                        <dxo-legend [visible]=\"chartConfig.legendDisplay\"\n                            horizontalAlignment=\"{{chartConfig.horizontalAlignment}}\"\n                            verticalAlignment=\"{{chartConfig.verticalAlignment}}\"></dxo-legend>\n                        <!-- <dxo-export [enabled]=\"true\"></dxo-export> -->\n                        <dxo-tooltip [enabled]=\"true\" [customizeTooltip]=\"customizeTooltip\" format=\"#,##0.##\">\n                        </dxo-tooltip>\n                        <ng-container *ngIf=\"chartType == 'doughnut'\">\n                            <svg *dxTemplate=\"let pieChart of 'centerTemplate'\">\n                                <circle cx=\"100\" cy=\"100\" [attr.r]=\"pieChart.getInnerRadius() - 6\" fill=\"gray\"\n                                    opacity=\"0.0001\">\n                                </circle>\n\n                                <text text-anchor=\"middle\" style=\"font-size: 28px\" x=\"100\" y=\"100\" fill=\"#eee\">\n                                    <tspan x=\"100\">{{ calculateTotal(pieChart) }}</tspan>\n                                    <!-- display: inline -->\n                                    <!-- <tspan x=\"100\" dy=\"20px\" style=\"font-weight: 600\"></tspan> -->\n                                </text>\n                            </svg>\n                        </ng-container>\n\n                    </dx-pie-chart>\n                </div>\n            </ng-container>\n            <ng-container\n                *ngIf=\"chartType !== 'doughnut' && chartType !== 'funnel' && chartType !== 'bubble' && chartType !== 'pie'\">\n                <div\n                    class=\"m-3 p-4 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700\">\n                    <!-- <h6 class=\"mb-1 text-md font-bold tracking-tight text-gray-900 dark:text-white border-b pb-3\">\n                        {{widGetConfig.widgetTitle}}\n                    </h6> -->\n                    <dx-chart id=\"chart\" [dataSource]=\"dataSourseForChart\"\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 === '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                </ul>\n            </div>\n\n            <div id=\"default-styled-tab-content\">\n                <div *ngIf=\"activeTab === 'basic'\">\n                    <div class=\"flex flex-col flex-auto min-w-0\">\n                        <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Filter Title\n                            Config\n                        </div>\n                        <div class=\"pt-2 border-x border-b \">\n                            <div class=\"my-2 flex justify-between\">\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Title</div>\n                                    <dx-text-box\n                                        [(ngModel)]=\"mainChartCourceObject.kpiConfig.commonConfig.title\"></dx-text-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Data Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"mainChartCourceObject.kpiConfig.commonConfig.dataField\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-2\"> Display Format </div>\n                                    <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                        [(ngModel)]=\"mainChartCourceObject.kpiConfig.formate\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-2\"> Key To Pass </div>\n                                    <dx-tag-box [items]=\"configColume\"\n                                        [(ngModel)]=\"mainChartCourceObject.kpiConfig.keyToPass\"></dx-tag-box>\n                                </div>\n\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"flex flex-wrap justify-between my-2\">\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1 \">Legend Horizontal Alignment</div>\n                            <dx-select-box [searchEnabled]=\"true\" [items]=\"['right','left','center']\"\n                                [(ngModel)]=\"chartConfig.horizontalAlignment\"></dx-select-box>\n\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Legend Vertical Alignment</div>\n                            <dx-select-box [searchEnabled]=\"true\" [items]=\"['top','bottom']\"\n                                [(ngModel)]=\"chartConfig.verticalAlignment\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1 mt-8\"></div>\n                            <dx-check-box [(ngModel)]=\"chartConfig.legendDisplay\" text=\"Legend Display\"></dx-check-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Argument Field</div>\n                            <dx-select-box [items]=\"configColume\"\n                                [(ngModel)]=\"chartConfig.argumentField\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Size</div>\n                            <dx-text-box [(ngModel)]=\"chartConfig.size\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Caption</div>\n                            <dx-text-box [(ngModel)]=\"chartConfig.caption\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2\"> Display Formate </div>\n                            <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                [(ngModel)]=\"mainChartCourceObject.kpiConfig.formate\"\n                                [readOnly]=\"false\"></dx-select-box>\n                        </div>\n                        <div class=\"w-2/3 px-2 mt-2\" *ngIf=\"chartType == 'doughnut' ||  chartType == 'pie'\">\n                            <div class=\" flex flex-row\">\n                                <div class=\"mr-2\">\n                                    <div class=\"text-md mb-1\"> Color Palette</div>\n                                    <dx-select-box [items]=\"doughnut_color_palette\"\n                                        [(ngModel)]=\"chartConfig.palette\"></dx-select-box>\n                                </div>\n                                <div class=\"mt-7\">\n                                    <dx-check-box [value]=\"chartConfig.labelDisplay\"\n                                        [(ngModel)]=\"chartConfig.labelDisplay\" text=\"Label Display\"></dx-check-box>\n                                </div>\n                            </div>\n\n\n                        </div>\n                        <div class=\"w-2/3 px-2 mt-2\" *ngIf=\"chartType == 'bubble'\">\n                            <div class=\" flex flex-row\">\n                                <div class=\"mr-2\">\n                                    <div class=\"text-md mb-1\"> Source Field</div>\n                                    <dx-select-box [items]=\"configColume\"\n                                        [(ngModel)]=\"chartConfig.sourceField\"></dx-select-box>\n                                </div>\n                                <div class=\"mr-2\">\n                                    <div class=\"text-md mb-1\"> Min Bubble Size</div>\n                                    <dx-text-box [(ngModel)]=\"chartConfig.minBubbleSize\"></dx-text-box>\n                                </div>\n                                <div class=\"mr-2\">\n                                    <div class=\"text-md mb-1\"> Max bubble size</div>\n                                    <dx-text-box [(ngModel)]=\"chartConfig.maxBubbleSize\"></dx-text-box>\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\" *ngIf=\"chartType == 'doughnut'\">\n\n                        </div>\n\n                    </div>\n                </div>\n                <div *ngIf=\"activeTab === 'columns'\">\n                    <div class=\"h-60 overflow-x-auto\">\n                        <div class=\" border-x border-b \">\n                            <div class=\"py-1 flex flex-row border-b\"\n                                *ngFor=\"let item of chartConfig.chart_config; let i = index\">\n\n                                <div class=\"px-1 mb-1 w-1/3\">\n                                    <div class=\"text-md mb-1\"> Value Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"item.valueField\"></dx-select-box>\n                                </div>\n\n                                <div class=\"px-1 mb-1 w-1/4\" *ngIf=\"chartType !== 'doughnut' && chartType !== 'pie'\">\n                                    <div class=\"text-md mb-1\"> Axis</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"item.axis\"></dx-select-box>\n                                </div>\n                                <div class=\" px-2 mb-1 w-1/3\">\n                                    <div class=\"text-md mb-1\"> Position</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"['right','left']\"\n                                        [(ngModel)]=\"item.position\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-1/4\">\n                                    <div class=\"text-md mb-1\"> Name</div>\n                                    <dx-text-box [(ngModel)]=\"item.name\"></dx-text-box>\n                                </div>\n                                <div class=\"text-center mt-6 w-1/6\">\n                                    <button *ngIf=\"i !== 0\" class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItem(i, 'up')\">\n                                        <i class=\"fa fa-arrow-up\" aria-hidden=\"true\"></i>\n                                    </button>\n                                    <button *ngIf=\"i !== chartConfig.chart_config.length - 1\"\n                                        class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItem(i, 'down')\">\n                                        <i class=\"fa fa-arrow-down\" aria-hidden=\"true\"></i>\n                                    </button>\n\n                                    <button class=\"{{commonService.btn_danger_sm}} cursor-pointer\"\n                                        (click)=\"deleteColumns(i)\"><i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                    </button>\n                                </div>\n                            </div>\n                            <div class=\"flex flex-row justify-end my-2\"\n                                *ngIf=\"chartType == 'doughnut' && chartType == 'pie'\">\n                                <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\"\n                                    (click)=\"addColumns()\">Add\n                                    Series</button>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <div *ngIf=\"activeTab === 'properties'\">\n                    <div class=\"h-full overflow-x-auto\">\n                        <app-loader *ngIf=\"isLoader\"></app-loader>\n                        <ng-container *ngIf=\"!isLoader\">\n                            <div class=\"flex flex-row justify-between border-b py-3\">\n                                <div class=\"mx-2\">\n                                    <dx-check-box [value]=\"viewProperties.enableClickEvent\"\n                                        [(ngModel)]=\"viewProperties.enableClickEvent\"\n                                        text=\"Enable Click Event\"></dx-check-box>\n                                </div>\n                                <div class=\"mx-2\">\n                                    <dx-check-box [value]=\"viewProperties.enableRightClickEvent\"\n                                        [(ngModel)]=\"viewProperties.enableRightClickEvent\"\n                                        text=\"Enable Right Click\"></dx-check-box>\n                                </div>\n                            </div>\n                            <div class=\"w-full p-2\" *ngIf=\"viewProperties.enableClickEvent\">\n\n                                <div class=\"flex flex-col flex-auto min-w-0 my-2\">\n                                    <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Event\n                                        Type\n                                        Option\n                                    </div>\n                                    <div class=\"w-full p-3 border-x border-b \">\n                                        <div class=\"flex flex-row\">\n                                            <div class=\"w-full\">\n                                                <div class=\"text-md mb-2\"> Event Type</div>\n                                            </div>\n                                            <div class=\"w-full\">\n                                                <dx-select-box\n                                                    [items]=\"['drilldown','sameViewDrilldown','optionalDrillDown','popup','navigateToPage']\"\n                                                    (onValueChanged)=\"getSelectedEventType($event)\"\n                                                    [(ngModel)]=\"viewProperties.clickEventOptions.eventType\"></dx-select-box>\n                                            </div>\n                                        </div>\n                                         <ng-container *ngIf=\"viewProperties.clickEventOptions.eventType == 'popup'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full\">\n                                                    <div class=\"text-md mb-2\"> Associated Views For Popup</div>\n                                                    <dx-tag-box [items]=\"allConfiguredViews\"\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                        valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                        [showSelectionControls]=\"true\"\n                                                        [searchEnabled]=\"true\"></dx-tag-box>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container\n                                            *ngIf=\"viewProperties.clickEventOptions.eventType == 'navigateToPage'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full mx-2\">\n                                                    <div class=\"text-md mb-2\"> Associated Pages</div>\n                                                    <dx-select-box [items]=\"allConfiguredPage\"\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedPage\"\n                                                        valueExpr=\"pageId\" displayExpr=\"pageName\"\n                                                        [searchEnabled]=\"true\"></dx-select-box>\n                                                </div>\n                                                <div class=\"w-full mx-2\">\n                                                    <div class=\"text-md mb-2\"> Associated Params</div>\n                                                    <dx-text-box\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedParams\"></dx-text-box>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container *ngIf=\"viewProperties.clickEventOptions.eventType == 'drilldown'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full\">\n                                                    <div class=\"text-md mb-2\"> Associated Views</div>\n                                                    <dx-tag-box [items]=\"allConfiguredViews\"\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                        valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                        [showSelectionControls]=\"true\"\n                                                        [searchEnabled]=\"true\"></dx-tag-box>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container\n                                            *ngIf=\"viewProperties.clickEventOptions.eventType == 'sameViewDrilldown'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full\">\n                                                    <div class=\"text-md mb-2\"> Associated Views</div>\n                                                    <dx-tag-box [items]=\"allConfiguredViews\"\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                        valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                        [showSelectionControls]=\"true\"\n                                                        [searchEnabled]=\"true\"></dx-tag-box>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container\n                                            *ngIf=\"viewProperties.clickEventOptions.eventType == 'optionalDrillDown'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full\">\n                                                    <ng-container\n                                                        *ngFor=\"let item of optionalDrilDownDataSource;let i = index;\">\n\n                                                        <div class=\"flex flex-row justify-between\">\n                                                            <div class=\"mx-2 w-1/2\">\n                                                                <div class=\"text-md mb-2\"> Associated Views</div>\n                                                                <dx-tag-box [items]=\"allConfiguredViews\"\n                                                                    [(ngModel)]=\"item.viewId\" valueExpr=\"viewId\"\n                                                                    displayExpr=\"viewName\"\n                                                                    [showSelectionControls]=\"true\"\n                                                                    [maxDisplayedTags]=\"2\"\n                                                                    [searchEnabled]=\"true\"></dx-tag-box>\n\n                                                            </div>\n                                                            <div class=\"mx-2 w-1/2\">\n                                                                <div class=\"text-md mb-2\"> Associated Params</div>\n                                                                <dx-text-box\n                                                                    [(ngModel)]=\"item.filterCondition\"></dx-text-box>\n                                                            </div>\n                                                            <div class=\"mx-2\">\n                                                                <button\n                                                                    class=\"{{commonService.btn_danger_sm}} cursor-pointer mt-8\"\n                                                                    (click)=\"deleteAssociatedParams(i)\"><i\n                                                                        class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                                                </button>\n                                                            </div>\n                                                        </div>\n                                                    </ng-container>\n                                                    <div class=\"flex flex-row justify-end mt-4\">\n                                                        <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\"\n                                                            (click)=\"addAssociatedParams()\">Add\n                                                            Params</button>\n                                                    </div>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <button class=\"{{commonService.btn_light_md}} cursor-pointer mt-4\"\n                                            (click)=\"resetViewProprstise()\">Reset All Event</button>\n                                    </div>\n                                </div>\n\n                            </div>\n                        </ng-container>\n                    </div>\n                </div>\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"chartAccess == 'multy'\">\n            <div class=\"mb-4 border-b border-gray-200 dark:border-gray-700\">\n                <ul class=\"flex flex-wrap -mb-px text-sm font-medium text-center\" role=\"tablist\">\n                    <li class=\"me-2\" role=\"presentation\">\n                        <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'basic',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'basic'\n                            }\" (click)=\"setActiveTab('basic')\" type=\"button\" role=\"tab\">\n                            Basic\n                        </button>\n                    </li>\n                    <li class=\"me-2\" role=\"presentation\">\n                        <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'columns',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'columns'\n                            }\" (click)=\"setActiveTab('columns')\" type=\"button\" role=\"tab\">\n                            Columns\n                        </button>\n                    </li>\n                    <li class=\"me-2\" role=\"presentation\">\n                        <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'properties',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'properties'\n                            }\" (click)=\"setActiveTab('properties')\" type=\"button\" role=\"tab\">\n                            Properties\n                        </button>\n                    </li>\n                </ul>\n            </div>\n\n            <div id=\"default-styled-tab-content\">\n                <div *ngIf=\"activeTab === 'basic'\">\n                    <div class=\"flex flex-col flex-auto min-w-0\">\n                        <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Filter Title\n                            Config\n                        </div>\n                        <div class=\"pt-2 border-x border-b \">\n                            <div class=\"my-2 flex justify-between\">\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Title</div>\n                                    <dx-text-box\n                                        [(ngModel)]=\"mainChartCourceObject.kpiConfig.commonConfig.title\"></dx-text-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Data Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"mainChartCourceObject.kpiConfig.commonConfig.dataField\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-2\"> Display Format </div>\n                                    <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                        [(ngModel)]=\"mainChartCourceObject.kpiConfig.formate\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-2\"> Key To Pass </div>\n                                    <dx-tag-box [items]=\"configColume\"\n                                        [(ngModel)]=\"mainChartCourceObject.kpiConfig.keyToPass\"></dx-tag-box>\n                                </div>\n\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"flex flex-wrap justify-between my-2\">\n                        <div class=\"w-1/3 px-2\">\n                            <div class=\"text-md mb-1\">Legend Horizontal Alignment</div>\n                            <dx-select-box [searchEnabled]=\"true\" [items]=\"['right','left','center']\" [value]=\"'center'\"\n                                [(ngModel)]=\"chartConfig.horizontalAlignment\"></dx-select-box>\n\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> legent Vertical Alignment</div>\n                            <dx-select-box [searchEnabled]=\"true\" [items]=\"['top','bottom']\" [value]=\"'bottom'\"\n                                [(ngModel)]=\"chartConfig.verticalAlignment\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1 mt-8\"></div>\n                            <dx-check-box [(ngModel)]=\"chartConfig.legendDisplay\" text=\"Legend Display\"></dx-check-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Argument Field</div>\n                            <dx-select-box [items]=\"configColume\"\n                                [(ngModel)]=\"chartConfig.argumentField\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Size</div>\n                            <dx-text-box [(ngModel)]=\"chartConfig.size\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Caption</div>\n                            <dx-text-box [(ngModel)]=\"chartConfig.caption\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2\"> Display Format </div>\n                            <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                [(ngModel)]=\"mainChartCourceObject.kpiConfig.formate\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2\"> Date Format </div>\n                            <dx-select-box [items]=\"['MM-DD','YYYY-MM-DD']\"\n                                [(ngModel)]=\"mainChartCourceObject.kpiConfig.displayDateFormat\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2 mt-6\"> </div>\n                            <dx-check-box [(ngModel)]=\"mainChartCourceObject.kpiConfig.descendingOrder\"\n                                text=\"Descending Order\"></dx-check-box>\n                        </div>\n                    </div>\n                </div>\n                <div *ngIf=\"activeTab === 'columns'\">\n                    <dx-scroll-view class=\"h-full\" [width]=\"'100%'\" [height]=\"'100%'\">\n                        <div class=\" border-x border-b \">\n                            <div class=\"py-1 flex flex-wrap border-b\"\n                                *ngFor=\"let item of chartConfig.chart_config; let i = index;\">\n\n                                <div class=\"px-2 mb-1 w-1/3\">\n                                    <div class=\"text-md mb-2\"> Type</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"chartTypeSource\" [value]=\"'spline'\"\n                                        [(ngModel)]=\"item.type\"></dx-select-box>\n                                </div>\n                                <div class=\"px-2 mb-1 w-1/3\">\n                                    <div class=\"text-md mb-1\"> Value Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"item.valueField\"></dx-select-box>\n                                </div>\n\n                                <div class=\"px-2 mb-1 w-1/3\">\n                                    <div class=\"text-md mb-1\"> Axis</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"item.axis\"></dx-select-box>\n                                </div>\n                                <div class=\" px-2 mb-1 w-1/4\">\n                                    <div class=\"text-md mb-1\"> Position</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"['right','left']\"\n                                        [(ngModel)]=\"item.position\"></dx-select-box>\n                                </div>\n                                <div class=\"px-2 mb-1 w-1/4\">\n                                    <div class=\"text-md mb-1\"> Name</div>\n                                    <dx-text-box [(ngModel)]=\"item.name\"></dx-text-box>\n                                </div>\n                                <div class=\"px-2 mb-1 w-1/4\">\n                                    <div class=\"text-md mb-2\"> Color</div>\n                                    <dx-color-box [(ngModel)]=\"item.color\"></dx-color-box>\n                                </div>\n                                <div class=\"text-center my-1 w-1/4\">\n                                    <button *ngIf=\"i !== 0\" class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItem(i, 'up')\">\n                                        <i class=\"fa fa-arrow-up\" aria-hidden=\"true\"></i>\n                                    </button>\n                                    <button *ngIf=\"i !== chartConfig.chart_config.length - 1\"\n                                        class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItem(i, 'down')\">\n                                        <i class=\"fa fa-arrow-down\" aria-hidden=\"true\"></i>\n                                    </button>\n\n                                    <button class=\"{{commonService.btn_danger_sm}} cursor-pointer\"\n                                        (click)=\"deleteColumns(i)\"><i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                    </button>\n                                </div>\n                            </div>\n                            <div class=\"flex flex-row justify-end my-2\">\n                                <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\"\n                                    (click)=\"addColumns()\">Add\n                                    Columns</button>\n                            </div>\n                        </div>\n                    </dx-scroll-view>\n                </div>\n                <div *ngIf=\"activeTab === 'properties'\">\n                    <div class=\"h-full overflow-x-auto\">\n                        <app-loader *ngIf=\"isLoader\"></app-loader>\n                        <ng-container *ngIf=\"!isLoader\">\n                            <div class=\"flex flex-row justify-between border-b py-3\">\n                                <div class=\"mx-2\">\n                                    <dx-check-box [value]=\"viewProperties.enableClickEvent\"\n                                        [(ngModel)]=\"viewProperties.enableClickEvent\"\n                                        text=\"Enable Click Event\"></dx-check-box>\n                                </div>\n                                <div class=\"mx-2\">\n                                    <dx-check-box [value]=\"viewProperties.enableRightClickEvent\"\n                                        [(ngModel)]=\"viewProperties.enableRightClickEvent\"\n                                        text=\"Enable Right Click\"></dx-check-box>\n                                </div>\n                            </div>\n                            <div class=\"w-full p-2\" *ngIf=\"viewProperties.enableClickEvent\">\n\n                                <div class=\"flex flex-col flex-auto min-w-0 my-2\">\n                                    <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Event\n                                        Type\n                                        Option\n                                    </div>\n                                    <div class=\"w-full p-3 border-x border-b \">\n                                        <div class=\"flex flex-row\">\n                                            <div class=\"w-full\">\n                                                <div class=\"text-md mb-2\"> Event Type</div>\n                                            </div>\n                                            <div class=\"w-full\">\n                                                <dx-select-box\n                                                    [items]=\"['drilldown','sameViewDrilldown','optionalDrillDown','popup','navigateToPage']\"\n                                                    (onValueChanged)=\"getSelectedEventType($event)\"\n                                                    [(ngModel)]=\"viewProperties.clickEventOptions.eventType\"></dx-select-box>\n                                            </div>\n                                        </div>\n                                        <ng-container\n                                            *ngIf=\"viewProperties.clickEventOptions.eventType == 'navigateToPage'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full mx-2\">\n                                                    <div class=\"text-md mb-2\"> Associated Pages</div>\n                                                    <dx-select-box [items]=\"allConfiguredPage\"\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedPage\"\n                                                        valueExpr=\"pageId\" displayExpr=\"pageName\"\n                                                        [searchEnabled]=\"true\"></dx-select-box>\n                                                </div>\n                                                <div class=\"w-full mx-2\">\n                                                    <div class=\"text-md mb-2\"> Associated Params</div>\n                                                    <dx-text-box\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedParams\"></dx-text-box>\n\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container *ngIf=\"viewProperties.clickEventOptions.eventType == 'drilldown'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full\">\n                                                    <div class=\"text-md mb-2\"> Associated Views</div>\n                                                    <dx-tag-box [items]=\"allConfiguredViews\"\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                        valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                        [showSelectionControls]=\"true\"\n                                                        [searchEnabled]=\"true\"></dx-tag-box>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container *ngIf=\"viewProperties.clickEventOptions.eventType == 'popup'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full\">\n                                                    <div class=\"text-md mb-2\"> Associated Views For Popup</div>\n                                                    <dx-tag-box [items]=\"allConfiguredViews\"\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                        valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                        [showSelectionControls]=\"true\"\n                                                        [searchEnabled]=\"true\"></dx-tag-box>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container\n                                            *ngIf=\"viewProperties.clickEventOptions.eventType == 'sameViewDrilldown'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full\">\n                                                    <div class=\"text-md mb-2\"> Associated Views</div>\n                                                    <dx-tag-box [items]=\"allConfiguredViews\"\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                        valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                        [showSelectionControls]=\"true\"\n                                                        [searchEnabled]=\"true\"></dx-tag-box>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container\n                                            *ngIf=\"viewProperties.clickEventOptions.eventType == 'optionalDrillDown'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full\">\n                                                    <ng-container\n                                                        *ngFor=\"let item of optionalDrilDownDataSource;let i = index;\">\n\n                                                        <div class=\"flex flex-row justify-between\">\n                                                            <div class=\"mx-2 w-1/2\">\n                                                                <div class=\"text-md mb-2\"> Associated Views</div>\n                                                                <dx-tag-box [items]=\"allConfiguredViews\"\n                                                                    [(ngModel)]=\"item.viewId\" valueExpr=\"viewId\"\n                                                                    displayExpr=\"viewName\"\n                                                                    [showSelectionControls]=\"true\"\n                                                                    [maxDisplayedTags]=\"2\"\n                                                                    [searchEnabled]=\"true\"></dx-tag-box>\n\n                                                            </div>\n                                                            <div class=\"mx-2 w-1/2\">\n                                                                <div class=\"text-md mb-2\"> Associated Params</div>\n                                                                <dx-text-box\n                                                                    [(ngModel)]=\"item.filterCondition\"></dx-text-box>\n                                                            </div>\n                                                            <div class=\"mx-2\">\n                                                                <button\n                                                                    class=\"{{commonService.btn_danger_sm}} cursor-pointer mt-8\"\n                                                                    (click)=\"deleteAssociatedParams(i)\"><i\n                                                                        class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                                                </button>\n                                                            </div>\n                                                        </div>\n                                                    </ng-container>\n                                                    <div class=\"flex flex-row justify-end mt-4\">\n                                                        <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\"\n                                                            (click)=\"addAssociatedParams()\">Add\n                                                            Params</button>\n                                                    </div>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <button class=\"{{commonService.btn_light_md}} cursor-pointer mt-4\"\n                                            (click)=\"resetViewProprstise()\">Reset All Event</button>\n                                    </div>\n                                </div>\n\n                            </div>\n                        </ng-container>\n                    </div>\n                </div>\n            </div>\n        </ng-container>\n\n\n    </div>\n\n</div>\n\n<div class=\"flex flex-row border-t pl-3\">\n    <div class=\"flex justify-start mx-1\">\n        <button class=\"{{commonService.btn_warning_md}} cursor-pointer mt-2\" (click)=\"isJsonPreview = true\">\n            Preview</button>\n        <button class=\"{{commonService.btn_primary_md}} cursor-pointer mt-2\" (click)=\"isJsonPreview = false\">Data\n            Preview</button>\n    </div>\n    <div class=\"flex justify-end mx-1 flex-grow\">\n        <button class=\"{{commonService.btn_success_md}} cursor-pointer mt-2\"\n            (click)=\"getSaveChartConfig()\">Submit</button>\n    </div>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i6.DxoLabelComponent, selector: "dxo-label", inputs: ["connectorColor", "connectorWidth", "customizeText", "font", "format", "indent", "visible", "horizontalAlignment", "position", "text", "verticalAlignment", "alignment", "customizeHint", "displayMode", "indentFromAxis", "overlappingBehavior", "rotationAngle", "staggeringSpacing", "template", "textOverflow", "wordWrap", "argumentFormat", "backgroundColor", "border", "connector", "displayFormat", "horizontalOffset", "showForZeroValues", "verticalOffset", "hideFirstOrLast", "indentFromTick", "useRangeColors", "location", "showColon", "radialOffset", "topIndent", "shadow", "useNodeColors", "dataField", "enabled"] }, { kind: "component", type: i6.DxoLegendComponent, selector: "dxo-legend", inputs: ["backgroundColor", "border", "columnCount", "columnItemSpacing", "customizeHint", "customizeItems", "customizeText", "font", "horizontalAlignment", "itemsAlignment", "itemTextFormat", "itemTextPosition", "margin", "markerSize", "markerTemplate", "orientation", "paddingLeftRight", "paddingTopBottom", "rowCount", "rowItemSpacing", "title", "verticalAlignment", "visible", "hoverMode", "position"] }, { kind: "component", type: i6.DxoTitleComponent, selector: "dxo-title", inputs: ["font", "horizontalAlignment", "margin", "placeholderSize", "subtitle", "text", "verticalAlignment", "textOverflow", "wordWrap", "alignment"] }, { kind: "component", type: i6.DxoSizeComponent, selector: "dxo-size", inputs: ["height", "width"] }, { kind: "component", type: i6.DxoTooltipComponent, selector: "dxo-tooltip", inputs: ["arrowLength", "border", "color", "container", "contentTemplate", "cornerRadius", "customizeTooltip", "enabled", "font", "format", "interactive", "opacity", "paddingLeftRight", "paddingTopBottom", "shadow", "zIndex", "argumentFormat", "location", "shared", "isShown", "text", "position", "showMode", "customizeLinkTooltip", "customizeNodeTooltip", "linkTooltipTemplate", "nodeTooltipTemplate"] }, { kind: "component", type: i7$1.DxChartComponent, selector: "dx-chart", inputs: ["adaptiveLayout", "adjustOnZoom", "animation", "annotations", "argumentAxis", "autoHidePointMarkers", "barGroupPadding", "barGroupWidth", "commonAnnotationSettings", "commonAxisSettings", "commonPaneSettings", "commonSeriesSettings", "containerBackgroundColor", "crosshair", "customizeAnnotation", "customizeLabel", "customizePoint", "dataPrepareSettings", "dataSource", "defaultPane", "disabled", "elementAttr", "export", "legend", "loadingIndicator", "margin", "maxBubbleSize", "minBubbleSize", "negativesAsZeroes", "palette", "paletteExtensionMode", "panes", "pathModified", "pointSelectionMode", "redrawOnResize", "resizePanesOnZoom", "resolveLabelOverlapping", "rotated", "rtlEnabled", "scrollBar", "series", "seriesSelectionMode", "seriesTemplate", "size", "stickyHovering", "synchronizeMultiAxes", "theme", "title", "tooltip", "valueAxis", "zoomAndPan"], outputs: ["onArgumentAxisClick", "onDisposing", "onDone", "onDrawn", "onExported", "onExporting", "onFileSaving", "onIncidentOccurred", "onInitialized", "onLegendClick", "onOptionChanged", "onPointClick", "onPointHoverChanged", "onPointSelectionChanged", "onSeriesClick", "onSeriesHoverChanged", "onSeriesSelectionChanged", "onTooltipHidden", "onTooltipShown", "onZoomEnd", "onZoomStart", "adaptiveLayoutChange", "adjustOnZoomChange", "animationChange", "annotationsChange", "argumentAxisChange", "autoHidePointMarkersChange", "barGroupPaddingChange", "barGroupWidthChange", "commonAnnotationSettingsChange", "commonAxisSettingsChange", "commonPaneSettingsChange", "commonSeriesSettingsChange", "containerBackgroundColorChange", "crosshairChange", "customizeAnnotationChange", "customizeLabelChange", "customizePointChange", "dataPrepareSettingsChange", "dataSourceChange", "defaultPaneChange", "disabledChange", "elementAttrChange", "exportChange", "legendChange", "loadingIndicatorChange", "marginChange", "maxBubbleSizeChange", "minBubbleSizeChange", "negativesAsZeroesChange", "paletteChange", "paletteExtensionModeChange", "panesChange", "pathModifiedChange", "pointSelectionModeChange", "redrawOnResizeChange", "resizePanesOnZoomChange", "resolveLabelOverlappingChange", "rotatedChange", "rtlEnabledChange", "scrollBarChange", "seriesChange", "seriesSelectionModeChange", "seriesTemplateChange", "sizeChange", "stickyHoveringChange", "synchronizeMultiAxesChange", "themeChange", "titleChange", "tooltipChange", "valueAxisChange", "zoomAndPanChange"] }, { kind: "component", type: i6.DxoArgumentAxisComponent, selector: "dxo-argument-axis", inputs: ["aggregateByCategory", "aggregatedPointsPosition", "aggregationGroupWidth", "aggregationInterval", "allowDecimals", "argumentType", "axisDivisionFactor", "breaks", "breakStyle", "categories", "color", "constantLines", "constantLineStyle", "customPosition", "customPositionAxis", "discreteAxisDivisionMode", "endOnTick", "grid", "holidays", "hoverMode", "inverted", "label", "linearThreshold", "logarithmBase", "maxValueMargin", "minorGrid", "minorTick", "minorTickCount", "minorTickInterval", "minValueMargin", "minVisualRangeLength", "offset", "opacity", "placeholderSize", "position", "singleWorkdays", "strips", "stripStyle", "tick", "tickInterval", "title", "type", "valueMarginsEnabled", "visible", "visualRange", "visualRangeUpdateMode", "wholeRange", "width", "workdaysOnly", "workWeek", "firstPointOnStartAngle", "originValue", "period", "startAngle"], outputs: ["visualRangeChange"] }, { kind: "component", type: i6.DxoCommonSeriesSettingsComponent, selector: "dxo-common-series-settings", inputs: ["aggregation", "area", "argumentField", "axis", "bar", "barOverlapGroup", "barPadding", "barWidth", "border", "bubble", "candlestick", "closeValueField", "color", "cornerRadius", "dashStyle", "fullstackedarea", "fullstackedbar", "fullstackedline", "fullstackedspline", "fullstackedsplinearea", "highValueField", "hoverMode", "hoverStyle", "ignoreEmptyPoints", "innerColor", "label", "line", "lowValueField", "maxLabelCount", "minBarSize", "opacity", "openValueField", "pane", "point", "rangearea", "rangebar", "rangeValue1Field", "rangeValue2Field", "reduction", "scatter", "selectionMode", "selectionStyle", "showInLegend", "sizeField", "spline", "splinearea", "stack", "stackedarea", "stackedbar", "stackedline", "stackedspline", "stackedsplinearea", "steparea", "stepline", "stock", "tagField", "type", "valueErrorBar", "valueField", "visible", "width", "argumentType", "minSegmentSize", "smallValuesGrouping", "closed"] }, { kind: "component", type: i6.DxoConnectorComponent, selector: "dxo-connector", inputs: ["color", "visible", "width", "opacity"] }, { kind: "component", type: i6.DxiSeriesComponent, selector: "dxi-series", inputs: ["aggregation", "argumentField", "axis", "barOverlapGroup", "barPadding", "barWidth", "border", "closeValueField", "color", "cornerRadius", "dashStyle", "highValueField", "hoverMode", "hoverStyle", "ignoreEmptyPoints", "innerColor", "label", "lowValueField", "maxLabelCount", "minBarSize", "name", "opacity", "openValueField", "pane", "point", "rangeValue1Field", "rangeValue2Field", "reduction", "selectionMode", "selectionStyle", "showInLegend", "sizeField", "stack", "tag", "tagField", "type", "valueErrorBar", "valueField", "visible", "width", "argumentType", "minSegmentSize", "smallValuesGrouping", "closed"] }, { kind: "component", type: i6.DxiValueAxisComponent, selector: "dxi-value-axis", inputs: ["aggregatedPointsPosition", "allowDecimals", "autoBreaksEnabled", "axisDivisionFactor", "breaks", "breakStyle", "categories", "color", "constantLines", "constantLineStyle", "customPosition", "discreteAxisDivisionMode", "endOnTick", "grid", "inverted", "label", "linearThreshold", "logarithmBase", "maxAutoBreakCount", "maxValueMargin", "minorGrid", "minorTick", "minorTickCount", "minorTickInterval", "minValueMargin", "minVisualRangeLength", "multipleAxesSpacing", "name", "offset", "opacity", "pane", "placeholderSize", "position", "showZero", "strips", "stripStyle", "synchronizedValue", "tick", "tickInterval", "title", "type", "valueMarginsEnabled", "valueType", "visible", "visualRange", "visualRangeUpdateMode", "wholeRange", "width"], outputs: ["visualRangeChange"] }, { kind: "component", type: i5$1.DxCheckBoxComponent, selector: "dx-check-box", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "iconSize", "isValid", "name", "readOnly", "rtlEnabled", "tabIndex", "text", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "visible", "width"], outputs: ["onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconSizeChange", "isValidChange", "nameChange", "readOnlyChange", "rtlEnabledChange", "tabIndexChange", "textChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "component", type: i6$2.DxColorBoxComponent, selector: "dx-color-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "applyButtonText", "applyValueMode", "buttons", "cancelButtonText", "deferRendering", "disabled", "dropDownButtonTemplate", "dropDownOptions", "editAlphaChannel", "elementAttr", "fieldTemplate", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "keyStep", "label", "labelMode", "name", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showDropDownButton", "stylingMode", "tabIndex", "text", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "visible", "width"], outputs: ["onChange", "onClosed", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOpened", "onOptionChanged", "onPaste", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "applyButtonTextChange", "applyValueModeChange", "buttonsChange", "cancelButtonTextChange", "deferRenderingChange", "disabledChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "editAlphaChannelChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "keyStepChange", "labelChange", "labelModeChange", "nameChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showDropDownButtonChange", "stylingModeChange", "tabIndexChange", "textChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "component", type: i10.DxPieChartComponent, selector: "dx-pie-chart", inputs: ["adaptiveLayout", "animation", "annotations", "centerTemplate", "commonAnnotationSettings", "commonSeriesSettings", "customizeAnnotation", "customizeLabel", "customizePoint", "dataSource", "diameter", "disabled", "elementAttr", "export", "innerRadius", "legend", "loadingIndicator", "margin", "minDiameter", "palette", "paletteExtensionMode", "pathModified", "pointSelectionMode", "redrawOnResize", "resolveLabelOverlapping", "rtlEnabled", "segmentsDirection", "series", "seriesTemplate", "size", "sizeGroup", "startAngle", "theme", "title", "tooltip", "type"], outputs: ["onDisposing", "onDone", "onDrawn", "onExported", "onExporting", "onFileSaving", "onIncidentOccurred", "onInitialized", "onLegendClick", "onOptionChanged", "onPointClick", "onPointHoverChanged", "onPointSelectionChanged", "onTooltipHidden", "onTooltipShown", "adaptiveLayoutChange", "animationChange", "annotationsChange", "centerTemplateChange", "commonAnnotationSettingsChange", "commonSeriesSettingsChange", "customizeAnnotationChange", "customizeLabelChange", "customizePointChange", "dataSourceChange", "diameterChange", "disabledChange", "elementAttrChange", "exportChange", "innerRadiusChange", "legendChange", "loadingIndicatorChange", "marginChange", "minDiameterChange", "paletteChange", "paletteExtensionModeChange", "pathModifiedChange", "pointSelectionModeChange", "redrawOnResizeChange", "resolveLabelOverlappingChange", "rtlEnabledChange", "segmentsDirectionChange", "seriesChange", "seriesTemplateChange", "sizeChange", "sizeGroupChange", "startAngleChange", "themeChange", "titleChange", "tooltipChange", "typeChange"] }, { kind: "component", type: i10$1.DxScrollViewComponent, selector: "dx-scroll-view", inputs: ["bounceEnabled", "direction", "disabled", "elementAttr", "height", "pulledDownText", "pullingDownText", "reachBottomText", "refreshingText", "rtlEnabled", "scrollByContent", "scrollByThumb", "showScrollbar", "useNative", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onPullDown", "onReachBottom", "onScroll", "onUpdated", "bounceEnabledChange", "directionChange", "disabledChange", "elementAttrChange", "heightChange", "pulledDownTextChange", "pullingDownTextChange", "reachBottomTextChange", "refreshingTextChange", "rtlEnabledChange", "scrollByContentChange", "scrollByThumbChange", "showScrollbarChange", "useNativeChange", "widthChange"] }, { kind: "component", type: i6$1.DxSelectBoxComponent, selector: "dx-select-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "buttons", "dataSource", "deferRendering", "disabled", "displayExpr", "displayValue", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "fieldTemplate", "focusStateEnabled", "grouped", "groupTemplate", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "items", "itemTemplate", "label", "labelMode", "maxLength", "minSearchLength", "name", "noDataText", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "searchEnabled", "searchExpr", "searchMode", "searchTimeout", "selectedItem", "showClearButton", "showDataBeforeSearch", "showDropDownButton", "showSelectionControls", "spellcheck", "stylingMode", "tabIndex", "text", "useItemTextAsTitle", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueChangeEvent", "valueExpr", "visible", "width", "wrapItemText"], outputs: ["onChange", "onClosed", "onContentReady", "onCopy", "onCustomItemCreating", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onItemClick", "onKeyDown", "onKeyUp", "onOpened", "onOptionChanged", "onPaste", "onSelectionChanged", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "dataSourceChange", "deferRenderingChange", "disabledChange", "displayExprChange", "displayValueChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "groupedChange", "groupTemplateChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "itemsChange", "itemTemplateChange", "labelChange", "labelModeChange", "maxLengthChange", "minSearchLengthChange", "nameChange", "noDataTextChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "searchEnabledChange", "searchExprChange", "searchModeChange", "searchTimeoutChange", "selectedItemChange", "showClearButtonChange", "showDataBeforeSearchChange", "showDropDownButtonChange", "showSelectionControlsChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useItemTextAsTitleChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "valueExprChange", "visibleChange", "widthChange", "wrapItemTextChange", "onBlur"] }, { kind: "component", type: i8$1.DxTagBoxComponent, selector: "dx-tag-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "applyValueMode", "buttons", "dataSource", "deferRendering", "disabled", "displayExpr", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "fieldTemplate", "focusStateEnabled", "grouped", "groupTemplate", "height", "hideSelectedItems", "hint", "hoverStateEnabled", "inputAttr", "isValid", "items", "itemTemplate", "label", "labelMode", "maxDisplayedTags", "maxFilterQueryLength", "maxLength", "minSearchLength", "multiline", "name", "noDataText", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "searchEnabled", "searchExpr", "searchMode", "searchTimeout", "selectAllMode", "selectAllText", "selectedItems", "showClearButton", "showDataBeforeSearch", "showDropDownButton", "showMultiTagOnly", "showSelectionControls", "stylingMode", "tabIndex", "tagTemplate", "text", "useItemTextAsTitle", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueExpr", "visible", "width", "wrapItemText"], outputs: ["onChange", "onClosed", "onContentReady", "onCustomItemCreating", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onItemClick", "onKeyDown", "onKeyUp", "onMultiTagPreparing", "onOpened", "onOptionChanged", "onSelectAllValueChanged", "onSelectionChanged", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "applyValueModeChange", "buttonsChange", "dataSourceChange", "deferRenderingChange", "disabledChange", "displayExprChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "groupedChange", "groupTemplateChange", "heightChange", "hideSelectedItemsChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "itemsChange", "itemTemplateChange", "labelChange", "labelModeChange", "maxDisplayedTagsChange", "maxFilterQueryLengthChange", "maxLengthChange", "minSearchLengthChange", "multilineChange", "nameChange", "noDataTextChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "searchEnabledChange", "searchExprChange", "searchModeChange", "searchTimeoutChange", "selectAllModeChange", "selectAllTextChange", "selectedItemsChange", "showClearButtonChange", "showDataBeforeSearchChange", "showDropDownButtonChange", "showMultiTagOnlyChange", "showSelectionControlsChange", "stylingModeChange", "tabIndexChange", "tagTemplateChange", "textChange", "useItemTextAsTitleChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueExprChange", "visibleChange", "widthChange", "wrapItemTextChange", "onBlur"] }, { kind: "component", type: i7.DxTextBoxComponent, selector: "dx-text-box", inputs: ["accessKey", "activeStateEnabled", "buttons", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "label", "labelMode", "mask", "maskChar", "maskInvalidMessage", "maskRules", "maxLength", "mode", "name", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showMaskMode", "spellcheck", "stylingMode", "tabIndex", "text", "useMaskedValue", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOptionChanged", "onPaste", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "labelChange", "labelModeChange", "maskChange", "maskCharChange", "maskInvalidMessageChange", "maskRulesChange", "maxLengthChange", "modeChange", "nameChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showMaskModeChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useMaskedValueChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: LoaderComponent, selector: "app-loader" }, { kind: "pipe", type: i4$1.JsonPipe, name: "json" }] });
+DashChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DashChartComponent, selector: "app-dash-chart", inputs: { chartconfigData: ["datasetmodal", "chartconfigData"] }, outputs: { getChartConfigOutPut: "getChartConfigOutPut" }, ngImport: i0, template: "<div class=\"mx-2\">\n    <div class=\"w-full m-2 border\">\n        <ng-container *ngIf=\"!isJsonPreview\">\n            <pre><code>{{jsaonDatasource | json}}</code></pre>\n        </ng-container>\n        <ng-container *ngIf=\"isJsonPreview\">\n            <ng-container *ngIf=\"chartType == 'doughnut' || chartType == 'pie'\">\n                <div\n                    class=\"m-3 p-4 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700\">\n                    <!-- <h6 class=\"mb-1 text-md font-bold tracking-tight text-gray-900 dark:text-white border-b pb-3\">\n                        {{widGetConfig.widgetTitle}}\n                    </h6> -->\n                    <dx-pie-chart id=\"pie\" [type]=\"chartType\"\n                        [title]=\"{ text: chartConfig.caption, font: { size: 14 } }\" palette=\"Soft Pastel\"\n                        [dataSource]=\"dataSourseForChart\" centerTemplate=\"centerTemplate\"\n                        (onPointClick)=\"pointClickHandler($event)\" [palette]=\"chartConfig.palette\">\n\n                        <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n                            <ng-container *ngIf=\"item.color\">\n                                <dxi-series argumentField={{chartConfig.argumentField}} valueField=\"{{item.valueField}}\"\n                                    name=\"{{item.name}}\" color=\"{{item.color}}\">\n                                    <dxo-label [visible]=\"chartConfig.labelDisplay\" format=\"#,##0.##\">\n                                        <dxo-connector [visible]=\"true\"></dxo-connector>\n                                    </dxo-label>\n                                </dxi-series>\n                            </ng-container>\n                            <ng-container *ngIf=\"!item.color\">\n                                <dxi-series argumentField={{chartConfig.argumentField}} valueField=\"{{item.valueField}}\"\n                                    name=\"{{item.name}}\">\n                                    <dxo-label [visible]=\"chartConfig.labelDisplay\" format=\"#,##0.##\">\n                                        <dxo-connector [visible]=\"true\"></dxo-connector>\n                                    </dxo-label>\n                                </dxi-series>\n                            </ng-container>\n                        </ng-container>\n                        <dxo-legend [visible]=\"chartConfig.legendDisplay\"\n                            horizontalAlignment=\"{{chartConfig.horizontalAlignment}}\"\n                            verticalAlignment=\"{{chartConfig.verticalAlignment}}\"></dxo-legend>\n                        <!-- <dxo-export [enabled]=\"true\"></dxo-export> -->\n                        <dxo-tooltip [enabled]=\"true\" [customizeTooltip]=\"customizeTooltip\" format=\"#,##0.##\">\n                        </dxo-tooltip>\n                        <ng-container *ngIf=\"chartType == 'doughnut'\">\n                            <svg *dxTemplate=\"let pieChart of 'centerTemplate'\">\n                                <circle cx=\"100\" cy=\"100\" [attr.r]=\"pieChart.getInnerRadius() - 6\" fill=\"gray\"\n                                    opacity=\"0.0001\">\n                                </circle>\n\n                                <text text-anchor=\"middle\" style=\"font-size: 28px\" x=\"100\" y=\"100\" fill=\"#eee\">\n                                    <tspan x=\"100\">{{ calculateTotal(pieChart) }}</tspan>\n                                    <!-- display: inline -->\n                                    <!-- <tspan x=\"100\" dy=\"20px\" style=\"font-weight: 600\"></tspan> -->\n                                </text>\n                            </svg>\n                        </ng-container>\n\n                    </dx-pie-chart>\n                </div>\n            </ng-container>\n            <ng-container\n                *ngIf=\"chartType !== 'doughnut' && chartType !== 'funnel' && chartType !== 'bubble' && chartType !== 'pie'\">\n                <div\n                    class=\"m-3 p-4 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700\">\n                    <!-- <h6 class=\"mb-1 text-md font-bold tracking-tight text-gray-900 dark:text-white border-b pb-3\">\n                        {{widGetConfig.widgetTitle}}\n                    </h6> -->\n                    <dx-chart id=\"chart\" [dataSource]=\"dataSourseForChart\" [palette]=\"chartConfig.palette\"\n                        [title]=\"{ text: chartConfig.caption, font: { size: 14 } }\"\n                        [valueAxis]=\"chartConfig.valueAxisConfig\">\n                        <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n                            <ng-container *ngIf=\"item.axis\">\n                                <dxi-value-axis [name]=\"item.axis\" [position]=\"item.position\">\n                                    <dxo-title [text]=\"item.name\"></dxo-title>\n                                </dxi-value-axis>\n                            </ng-container>\n                        </ng-container>\n                        <dxo-argument-axis>\n                            <dxo-label overlappingBehavior=\"rotate\" [rotationAngle]=\"270\"></dxo-label>\n                        </dxo-argument-axis>\n                        <dxo-tooltip [enabled]=\"true\" [shared]=\"true\"></dxo-tooltip>\n                        <dxo-common-series-settings\n                            [argumentField]=\"chartConfig.argumentField\"></dxo-common-series-settings>\n                        <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 === '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                </ul>\n            </div>\n\n            <div id=\"default-styled-tab-content\">\n                <div *ngIf=\"activeTab === 'basic'\">\n                    <div class=\"flex flex-col flex-auto min-w-0\">\n                        <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Filter Title\n                            Config\n                        </div>\n                        <div class=\"pt-2 border-x border-b \">\n                            <div class=\"my-2 flex justify-between\">\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Title</div>\n                                    <dx-text-box\n                                        [(ngModel)]=\"mainChartCourceObject.kpiConfig.commonConfig.title\"></dx-text-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Data Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"mainChartCourceObject.kpiConfig.commonConfig.dataField\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-2\"> Display Format </div>\n                                    <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                        [(ngModel)]=\"mainChartCourceObject.kpiConfig.formate\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-2\"> Key To Pass </div>\n                                    <dx-tag-box [items]=\"configColume\"\n                                        [(ngModel)]=\"mainChartCourceObject.kpiConfig.keyToPass\"></dx-tag-box>\n                                </div>\n\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"flex flex-wrap justify-between my-2\">\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1 \">Legend Horizontal Alignment</div>\n                            <dx-select-box [searchEnabled]=\"true\" [items]=\"['right','left','center']\"\n                                [(ngModel)]=\"chartConfig.horizontalAlignment\"></dx-select-box>\n\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Legend Vertical Alignment</div>\n                            <dx-select-box [searchEnabled]=\"true\" [items]=\"['top','bottom']\"\n                                [(ngModel)]=\"chartConfig.verticalAlignment\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1 mt-8\"></div>\n                            <dx-check-box [(ngModel)]=\"chartConfig.legendDisplay\" text=\"Legend Display\"></dx-check-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Argument Field</div>\n                            <dx-select-box [items]=\"configColume\"\n                                [(ngModel)]=\"chartConfig.argumentField\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Size</div>\n                            <dx-text-box [(ngModel)]=\"chartConfig.size\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Caption</div>\n                            <dx-text-box [(ngModel)]=\"chartConfig.caption\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2\"> Display Formate </div>\n                            <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                [(ngModel)]=\"mainChartCourceObject.kpiConfig.formate\"\n                                [readOnly]=\"false\"></dx-select-box>\n                        </div>\n                        <div class=\"w-2/3 px-2 mt-2\">\n                            <div class=\" flex flex-row\">\n                                <div class=\"mr-2\">\n                                    <div class=\"text-md mb-1\"> Color Palette</div>\n                                    <dx-select-box [items]=\"doughnut_color_palette\"\n                                        [(ngModel)]=\"chartConfig.palette\"></dx-select-box>\n                                </div>\n                                <div class=\"mt-7\">\n                                    <dx-check-box [value]=\"chartConfig.labelDisplay\"\n                                        [(ngModel)]=\"chartConfig.labelDisplay\" text=\"Label Display\"></dx-check-box>\n                                </div>\n                            </div>\n\n\n                        </div>\n                        <div class=\"w-2/3 px-2 mt-2\" *ngIf=\"chartType == 'bubble'\">\n                            <div class=\" flex flex-row\">\n                                <div class=\"mr-2\">\n                                    <div class=\"text-md mb-1\"> Source Field</div>\n                                    <dx-select-box [items]=\"configColume\"\n                                        [(ngModel)]=\"chartConfig.sourceField\"></dx-select-box>\n                                </div>\n                                <div class=\"mr-2\">\n                                    <div class=\"text-md mb-1\"> Min Bubble Size</div>\n                                    <dx-text-box [(ngModel)]=\"chartConfig.minBubbleSize\"></dx-text-box>\n                                </div>\n                                <div class=\"mr-2\">\n                                    <div class=\"text-md mb-1\"> Max bubble size</div>\n                                    <dx-text-box [(ngModel)]=\"chartConfig.maxBubbleSize\"></dx-text-box>\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\" *ngIf=\"chartType == 'doughnut'\">\n\n                        </div>\n\n                    </div>\n                </div>\n                <div *ngIf=\"activeTab === 'columns'\">\n                    <div class=\"h-60 overflow-x-auto\">\n                        <div class=\" border-x border-b \">\n                            <div class=\"py-1 flex flex-row border-b\"\n                                *ngFor=\"let item of chartConfig.chart_config; let i = index\">\n\n                                <div class=\"px-1 mb-1 w-1/3\">\n                                    <div class=\"text-md mb-1\"> Value Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"item.valueField\"></dx-select-box>\n                                </div>\n\n                                <div class=\"px-1 mb-1 w-1/4\" *ngIf=\"chartType !== 'doughnut' && chartType !== 'pie'\">\n                                    <div class=\"text-md mb-1\"> Axis</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"item.axis\"></dx-select-box>\n                                </div>\n                                <div class=\" px-2 mb-1 w-1/3\">\n                                    <div class=\"text-md mb-1\"> Position</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"['right','left']\"\n                                        [(ngModel)]=\"item.position\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-1/4\">\n                                    <div class=\"text-md mb-1\"> Name</div>\n                                    <dx-text-box [(ngModel)]=\"item.name\"></dx-text-box>\n                                </div>\n                                <div class=\"text-center mt-6 w-1/6\">\n                                    <button *ngIf=\"i !== 0\" class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItem(i, 'up')\">\n                                        <i class=\"fa fa-arrow-up\" aria-hidden=\"true\"></i>\n                                    </button>\n                                    <button *ngIf=\"i !== chartConfig.chart_config.length - 1\"\n                                        class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItem(i, 'down')\">\n                                        <i class=\"fa fa-arrow-down\" aria-hidden=\"true\"></i>\n                                    </button>\n\n                                    <button class=\"{{commonService.btn_danger_sm}} cursor-pointer\"\n                                        (click)=\"deleteColumns(i)\"><i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                    </button>\n                                </div>\n                            </div>\n                            <div class=\"flex flex-row justify-end my-2\"\n                                *ngIf=\"chartType == 'doughnut' && chartType == 'pie'\">\n                                <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\"\n                                    (click)=\"addColumns()\">Add\n                                    Series</button>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <div *ngIf=\"activeTab === 'properties'\">\n                    <div class=\"h-full overflow-x-auto\">\n                        <app-loader *ngIf=\"isLoader\"></app-loader>\n                        <ng-container *ngIf=\"!isLoader\">\n                            <div class=\"flex flex-row justify-between border-b py-3\">\n                                <div class=\"mx-2\">\n                                    <dx-check-box [value]=\"viewProperties.enableClickEvent\"\n                                        [(ngModel)]=\"viewProperties.enableClickEvent\"\n                                        text=\"Enable Click Event\"></dx-check-box>\n                                </div>\n                                <div class=\"mx-2\">\n                                    <dx-check-box [value]=\"viewProperties.enableRightClickEvent\"\n                                        [(ngModel)]=\"viewProperties.enableRightClickEvent\"\n                                        text=\"Enable Right Click\"></dx-check-box>\n                                </div>\n                            </div>\n                            <div class=\"w-full p-2\" *ngIf=\"viewProperties.enableClickEvent\">\n\n                                <div class=\"flex flex-col flex-auto min-w-0 my-2\">\n                                    <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Event\n                                        Type\n                                        Option\n                                    </div>\n                                    <div class=\"w-full p-3 border-x border-b \">\n                                        <div class=\"flex flex-row\">\n                                            <div class=\"w-full\">\n                                                <div class=\"text-md mb-2\"> Event Type</div>\n                                            </div>\n                                            <div class=\"w-full\">\n                                                <dx-select-box\n                                                    [items]=\"['drilldown','sameViewDrilldown','optionalDrillDown','popup','navigateToPage']\"\n                                                    (onValueChanged)=\"getSelectedEventType($event)\"\n                                                    [(ngModel)]=\"viewProperties.clickEventOptions.eventType\"></dx-select-box>\n                                            </div>\n                                        </div>\n                                         <ng-container *ngIf=\"viewProperties.clickEventOptions.eventType == 'popup'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full\">\n                                                    <div class=\"text-md mb-2\"> Associated Views For Popup</div>\n                                                    <dx-tag-box [items]=\"allConfiguredViews\"\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                        valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                        [showSelectionControls]=\"true\"\n                                                        [searchEnabled]=\"true\"></dx-tag-box>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container\n                                            *ngIf=\"viewProperties.clickEventOptions.eventType == 'navigateToPage'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full mx-2\">\n                                                    <div class=\"text-md mb-2\"> Associated Pages</div>\n                                                    <dx-select-box [items]=\"allConfiguredPage\"\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedPage\"\n                                                        valueExpr=\"pageId\" displayExpr=\"pageName\"\n                                                        [searchEnabled]=\"true\"></dx-select-box>\n                                                </div>\n                                                <div class=\"w-full mx-2\">\n                                                    <div class=\"text-md mb-2\"> Associated Params</div>\n                                                    <dx-text-box\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedParams\"></dx-text-box>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container *ngIf=\"viewProperties.clickEventOptions.eventType == 'drilldown'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full\">\n                                                    <div class=\"text-md mb-2\"> Associated Views</div>\n                                                    <dx-tag-box [items]=\"allConfiguredViews\"\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                        valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                        [showSelectionControls]=\"true\"\n                                                        [searchEnabled]=\"true\"></dx-tag-box>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container\n                                            *ngIf=\"viewProperties.clickEventOptions.eventType == 'sameViewDrilldown'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full\">\n                                                    <div class=\"text-md mb-2\"> Associated Views</div>\n                                                    <dx-tag-box [items]=\"allConfiguredViews\"\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                        valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                        [showSelectionControls]=\"true\"\n                                                        [searchEnabled]=\"true\"></dx-tag-box>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container\n                                            *ngIf=\"viewProperties.clickEventOptions.eventType == 'optionalDrillDown'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full\">\n                                                    <ng-container\n                                                        *ngFor=\"let item of optionalDrilDownDataSource;let i = index;\">\n\n                                                        <div class=\"flex flex-row justify-between\">\n                                                            <div class=\"mx-2 w-1/2\">\n                                                                <div class=\"text-md mb-2\"> Associated Views</div>\n                                                                <dx-tag-box [items]=\"allConfiguredViews\"\n                                                                    [(ngModel)]=\"item.viewId\" valueExpr=\"viewId\"\n                                                                    displayExpr=\"viewName\"\n                                                                    [showSelectionControls]=\"true\"\n                                                                    [maxDisplayedTags]=\"2\"\n                                                                    [searchEnabled]=\"true\"></dx-tag-box>\n\n                                                            </div>\n                                                            <div class=\"mx-2 w-1/2\">\n                                                                <div class=\"text-md mb-2\"> Associated Params</div>\n                                                                <dx-text-box\n                                                                    [(ngModel)]=\"item.filterCondition\"></dx-text-box>\n                                                            </div>\n                                                            <div class=\"mx-2\">\n                                                                <button\n                                                                    class=\"{{commonService.btn_danger_sm}} cursor-pointer mt-8\"\n                                                                    (click)=\"deleteAssociatedParams(i)\"><i\n                                                                        class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                                                </button>\n                                                            </div>\n                                                        </div>\n                                                    </ng-container>\n                                                    <div class=\"flex flex-row justify-end mt-4\">\n                                                        <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\"\n                                                            (click)=\"addAssociatedParams()\">Add\n                                                            Params</button>\n                                                    </div>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <button class=\"{{commonService.btn_light_md}} cursor-pointer mt-4\"\n                                            (click)=\"resetViewProprstise()\">Reset All Event</button>\n                                    </div>\n                                </div>\n\n                            </div>\n                        </ng-container>\n                    </div>\n                </div>\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"chartAccess == 'multy'\">\n            <div class=\"mb-4 border-b border-gray-200 dark:border-gray-700\">\n                <ul class=\"flex flex-wrap -mb-px text-sm font-medium text-center\" role=\"tablist\">\n                    <li class=\"me-2\" role=\"presentation\">\n                        <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'basic',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'basic'\n                            }\" (click)=\"setActiveTab('basic')\" type=\"button\" role=\"tab\">\n                            Basic\n                        </button>\n                    </li>\n                    <li class=\"me-2\" role=\"presentation\">\n                        <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'columns',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'columns'\n                            }\" (click)=\"setActiveTab('columns')\" type=\"button\" role=\"tab\">\n                            Columns\n                        </button>\n                    </li>\n                    <li class=\"me-2\" role=\"presentation\">\n                        <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'properties',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'properties'\n                            }\" (click)=\"setActiveTab('properties')\" type=\"button\" role=\"tab\">\n                            Properties\n                        </button>\n                    </li>\n                </ul>\n            </div>\n\n            <div id=\"default-styled-tab-content\">\n                <div *ngIf=\"activeTab === 'basic'\">\n                    <div class=\"flex flex-col flex-auto min-w-0\">\n                        <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Filter Title\n                            Config\n                        </div>\n                        <div class=\"pt-2 border-x border-b \">\n                            <div class=\"my-2 flex justify-between\">\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Title</div>\n                                    <dx-text-box\n                                        [(ngModel)]=\"mainChartCourceObject.kpiConfig.commonConfig.title\"></dx-text-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Data Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"mainChartCourceObject.kpiConfig.commonConfig.dataField\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-2\"> Display Format </div>\n                                    <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                        [(ngModel)]=\"mainChartCourceObject.kpiConfig.formate\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-2\"> Key To Pass </div>\n                                    <dx-tag-box [items]=\"configColume\"\n                                        [(ngModel)]=\"mainChartCourceObject.kpiConfig.keyToPass\"></dx-tag-box>\n                                </div>\n\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"flex flex-wrap justify-between my-2\">\n                        <div class=\"w-1/3 px-2\">\n                            <div class=\"text-md mb-1\">Legend Horizontal Alignment</div>\n                            <dx-select-box [searchEnabled]=\"true\" [items]=\"['right','left','center']\" [value]=\"'center'\"\n                                [(ngModel)]=\"chartConfig.horizontalAlignment\"></dx-select-box>\n\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> legent Vertical Alignment</div>\n                            <dx-select-box [searchEnabled]=\"true\" [items]=\"['top','bottom']\" [value]=\"'bottom'\"\n                                [(ngModel)]=\"chartConfig.verticalAlignment\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1 mt-8\"></div>\n                            <dx-check-box [(ngModel)]=\"chartConfig.legendDisplay\" text=\"Legend Display\"></dx-check-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Argument Field</div>\n                            <dx-select-box [items]=\"configColume\"\n                                [(ngModel)]=\"chartConfig.argumentField\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Size</div>\n                            <dx-text-box [(ngModel)]=\"chartConfig.size\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Caption</div>\n                            <dx-text-box [(ngModel)]=\"chartConfig.caption\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2\"> Display Format </div>\n                            <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                [(ngModel)]=\"mainChartCourceObject.kpiConfig.formate\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2\"> Date Format </div>\n                            <dx-select-box [items]=\"['MM-DD','YYYY-MM-DD']\"\n                                [(ngModel)]=\"mainChartCourceObject.kpiConfig.displayDateFormat\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2 mt-6\"> </div>\n                            <dx-check-box [(ngModel)]=\"mainChartCourceObject.kpiConfig.descendingOrder\"\n                                text=\"Descending Order\"></dx-check-box>\n                        </div>\n                    </div>\n                </div>\n                <div *ngIf=\"activeTab === 'columns'\">\n                    <dx-scroll-view class=\"h-full\" [width]=\"'100%'\" [height]=\"'100%'\">\n                        <div class=\" border-x border-b \">\n                            <div class=\"py-1 flex flex-wrap border-b\"\n                                *ngFor=\"let item of chartConfig.chart_config; let i = index;\">\n\n                                <div class=\"px-2 mb-1 w-1/3\">\n                                    <div class=\"text-md mb-2\"> Type</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"chartTypeSource\" [value]=\"'spline'\"\n                                        [(ngModel)]=\"item.type\"></dx-select-box>\n                                </div>\n                                <div class=\"px-2 mb-1 w-1/3\">\n                                    <div class=\"text-md mb-1\"> Value Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"item.valueField\"></dx-select-box>\n                                </div>\n\n                                <div class=\"px-2 mb-1 w-1/3\">\n                                    <div class=\"text-md mb-1\"> Axis</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"item.axis\"></dx-select-box>\n                                </div>\n                                <div class=\" px-2 mb-1 w-1/4\">\n                                    <div class=\"text-md mb-1\"> Position</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"['right','left']\"\n                                        [(ngModel)]=\"item.position\"></dx-select-box>\n                                </div>\n                                <div class=\"px-2 mb-1 w-1/4\">\n                                    <div class=\"text-md mb-1\"> Name</div>\n                                    <dx-text-box [(ngModel)]=\"item.name\"></dx-text-box>\n                                </div>\n                                <div class=\"px-2 mb-1 w-1/4\">\n                                    <div class=\"text-md mb-2\"> Color</div>\n                                    <dx-color-box [(ngModel)]=\"item.color\"></dx-color-box>\n                                </div>\n                                <div class=\"text-center my-1 w-1/4\">\n                                    <button *ngIf=\"i !== 0\" class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItem(i, 'up')\">\n                                        <i class=\"fa fa-arrow-up\" aria-hidden=\"true\"></i>\n                                    </button>\n                                    <button *ngIf=\"i !== chartConfig.chart_config.length - 1\"\n                                        class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItem(i, 'down')\">\n                                        <i class=\"fa fa-arrow-down\" aria-hidden=\"true\"></i>\n                                    </button>\n\n                                    <button class=\"{{commonService.btn_danger_sm}} cursor-pointer\"\n                                        (click)=\"deleteColumns(i)\"><i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                    </button>\n                                </div>\n                            </div>\n                            <div class=\"flex flex-row justify-end my-2\">\n                                <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\"\n                                    (click)=\"addColumns()\">Add\n                                    Columns</button>\n                            </div>\n                        </div>\n                    </dx-scroll-view>\n                </div>\n                <div *ngIf=\"activeTab === 'properties'\">\n                    <div class=\"h-full overflow-x-auto\">\n                        <app-loader *ngIf=\"isLoader\"></app-loader>\n                        <ng-container *ngIf=\"!isLoader\">\n                            <div class=\"flex flex-row justify-between border-b py-3\">\n                                <div class=\"mx-2\">\n                                    <dx-check-box [value]=\"viewProperties.enableClickEvent\"\n                                        [(ngModel)]=\"viewProperties.enableClickEvent\"\n                                        text=\"Enable Click Event\"></dx-check-box>\n                                </div>\n                                <div class=\"mx-2\">\n                                    <dx-check-box [value]=\"viewProperties.enableRightClickEvent\"\n                                        [(ngModel)]=\"viewProperties.enableRightClickEvent\"\n                                        text=\"Enable Right Click\"></dx-check-box>\n                                </div>\n                            </div>\n                            <div class=\"w-full p-2\" *ngIf=\"viewProperties.enableClickEvent\">\n\n                                <div class=\"flex flex-col flex-auto min-w-0 my-2\">\n                                    <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Event\n                                        Type\n                                        Option\n                                    </div>\n                                    <div class=\"w-full p-3 border-x border-b \">\n                                        <div class=\"flex flex-row\">\n                                            <div class=\"w-full\">\n                                                <div class=\"text-md mb-2\"> Event Type</div>\n                                            </div>\n                                            <div class=\"w-full\">\n                                                <dx-select-box\n                                                    [items]=\"['drilldown','sameViewDrilldown','optionalDrillDown','popup','navigateToPage']\"\n                                                    (onValueChanged)=\"getSelectedEventType($event)\"\n                                                    [(ngModel)]=\"viewProperties.clickEventOptions.eventType\"></dx-select-box>\n                                            </div>\n                                        </div>\n                                        <ng-container\n                                            *ngIf=\"viewProperties.clickEventOptions.eventType == 'navigateToPage'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full mx-2\">\n                                                    <div class=\"text-md mb-2\"> Associated Pages</div>\n                                                    <dx-select-box [items]=\"allConfiguredPage\"\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedPage\"\n                                                        valueExpr=\"pageId\" displayExpr=\"pageName\"\n                                                        [searchEnabled]=\"true\"></dx-select-box>\n                                                </div>\n                                                <div class=\"w-full mx-2\">\n                                                    <div class=\"text-md mb-2\"> Associated Params</div>\n                                                    <dx-text-box\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedParams\"></dx-text-box>\n\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container *ngIf=\"viewProperties.clickEventOptions.eventType == 'drilldown'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full\">\n                                                    <div class=\"text-md mb-2\"> Associated Views</div>\n                                                    <dx-tag-box [items]=\"allConfiguredViews\"\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                        valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                        [showSelectionControls]=\"true\"\n                                                        [searchEnabled]=\"true\"></dx-tag-box>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container *ngIf=\"viewProperties.clickEventOptions.eventType == 'popup'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full\">\n                                                    <div class=\"text-md mb-2\"> Associated Views For Popup</div>\n                                                    <dx-tag-box [items]=\"allConfiguredViews\"\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                        valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                        [showSelectionControls]=\"true\"\n                                                        [searchEnabled]=\"true\"></dx-tag-box>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container\n                                            *ngIf=\"viewProperties.clickEventOptions.eventType == 'sameViewDrilldown'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full\">\n                                                    <div class=\"text-md mb-2\"> Associated Views</div>\n                                                    <dx-tag-box [items]=\"allConfiguredViews\"\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                        valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                        [showSelectionControls]=\"true\"\n                                                        [searchEnabled]=\"true\"></dx-tag-box>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container\n                                            *ngIf=\"viewProperties.clickEventOptions.eventType == 'optionalDrillDown'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full\">\n                                                    <ng-container\n                                                        *ngFor=\"let item of optionalDrilDownDataSource;let i = index;\">\n\n                                                        <div class=\"flex flex-row justify-between\">\n                                                            <div class=\"mx-2 w-1/2\">\n                                                                <div class=\"text-md mb-2\"> Associated Views</div>\n                                                                <dx-tag-box [items]=\"allConfiguredViews\"\n                                                                    [(ngModel)]=\"item.viewId\" valueExpr=\"viewId\"\n                                                                    displayExpr=\"viewName\"\n                                                                    [showSelectionControls]=\"true\"\n                                                                    [maxDisplayedTags]=\"2\"\n                                                                    [searchEnabled]=\"true\"></dx-tag-box>\n\n                                                            </div>\n                                                            <div class=\"mx-2 w-1/2\">\n                                                                <div class=\"text-md mb-2\"> Associated Params</div>\n                                                                <dx-text-box\n                                                                    [(ngModel)]=\"item.filterCondition\"></dx-text-box>\n                                                            </div>\n                                                            <div class=\"mx-2\">\n                                                                <button\n                                                                    class=\"{{commonService.btn_danger_sm}} cursor-pointer mt-8\"\n                                                                    (click)=\"deleteAssociatedParams(i)\"><i\n                                                                        class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                                                </button>\n                                                            </div>\n                                                        </div>\n                                                    </ng-container>\n                                                    <div class=\"flex flex-row justify-end mt-4\">\n                                                        <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\"\n                                                            (click)=\"addAssociatedParams()\">Add\n                                                            Params</button>\n                                                    </div>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <button class=\"{{commonService.btn_light_md}} cursor-pointer mt-4\"\n                                            (click)=\"resetViewProprstise()\">Reset All Event</button>\n                                    </div>\n                                </div>\n\n                            </div>\n                        </ng-container>\n                    </div>\n                </div>\n            </div>\n        </ng-container>\n\n\n    </div>\n\n</div>\n\n<div class=\"flex flex-row border-t pl-3\">\n    <div class=\"flex justify-start mx-1\">\n        <button class=\"{{commonService.btn_warning_md}} cursor-pointer mt-2\" (click)=\"isJsonPreview = true\">\n            Preview</button>\n        <button class=\"{{commonService.btn_primary_md}} cursor-pointer mt-2\" (click)=\"isJsonPreview = false\">Data\n            Preview</button>\n    </div>\n    <div class=\"flex justify-end mx-1 flex-grow\">\n        <button class=\"{{commonService.btn_success_md}} cursor-pointer mt-2\"\n            (click)=\"getSaveChartConfig()\">Submit</button>\n    </div>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i6.DxoLabelComponent, selector: "dxo-label", inputs: ["connectorColor", "connectorWidth", "customizeText", "font", "format", "indent", "visible", "horizontalAlignment", "position", "text", "verticalAlignment", "alignment", "customizeHint", "displayMode", "indentFromAxis", "overlappingBehavior", "rotationAngle", "staggeringSpacing", "template", "textOverflow", "wordWrap", "argumentFormat", "backgroundColor", "border", "connector", "displayFormat", "horizontalOffset", "showForZeroValues", "verticalOffset", "hideFirstOrLast", "indentFromTick", "useRangeColors", "location", "showColon", "radialOffset", "topIndent", "shadow", "useNodeColors", "dataField", "enabled"] }, { kind: "component", type: i6.DxoLegendComponent, selector: "dxo-legend", inputs: ["backgroundColor", "border", "columnCount", "columnItemSpacing", "customizeHint", "customizeItems", "customizeText", "font", "horizontalAlignment", "itemsAlignment", "itemTextFormat", "itemTextPosition", "margin", "markerSize", "markerTemplate", "orientation", "paddingLeftRight", "paddingTopBottom", "rowCount", "rowItemSpacing", "title", "verticalAlignment", "visible", "hoverMode", "position"] }, { kind: "component", type: i6.DxoTitleComponent, selector: "dxo-title", inputs: ["font", "horizontalAlignment", "margin", "placeholderSize", "subtitle", "text", "verticalAlignment", "textOverflow", "wordWrap", "alignment"] }, { kind: "component", type: i6.DxoSizeComponent, selector: "dxo-size", inputs: ["height", "width"] }, { kind: "component", type: i6.DxoTooltipComponent, selector: "dxo-tooltip", inputs: ["arrowLength", "border", "color", "container", "contentTemplate", "cornerRadius", "customizeTooltip", "enabled", "font", "format", "interactive", "opacity", "paddingLeftRight", "paddingTopBottom", "shadow", "zIndex", "argumentFormat", "location", "shared", "isShown", "text", "position", "showMode", "customizeLinkTooltip", "customizeNodeTooltip", "linkTooltipTemplate", "nodeTooltipTemplate"] }, { kind: "component", type: i7$1.DxChartComponent, selector: "dx-chart", inputs: ["adaptiveLayout", "adjustOnZoom", "animation", "annotations", "argumentAxis", "autoHidePointMarkers", "barGroupPadding", "barGroupWidth", "commonAnnotationSettings", "commonAxisSettings", "commonPaneSettings", "commonSeriesSettings", "containerBackgroundColor", "crosshair", "customizeAnnotation", "customizeLabel", "customizePoint", "dataPrepareSettings", "dataSource", "defaultPane", "disabled", "elementAttr", "export", "legend", "loadingIndicator", "margin", "maxBubbleSize", "minBubbleSize", "negativesAsZeroes", "palette", "paletteExtensionMode", "panes", "pathModified", "pointSelectionMode", "redrawOnResize", "resizePanesOnZoom", "resolveLabelOverlapping", "rotated", "rtlEnabled", "scrollBar", "series", "seriesSelectionMode", "seriesTemplate", "size", "stickyHovering", "synchronizeMultiAxes", "theme", "title", "tooltip", "valueAxis", "zoomAndPan"], outputs: ["onArgumentAxisClick", "onDisposing", "onDone", "onDrawn", "onExported", "onExporting", "onFileSaving", "onIncidentOccurred", "onInitialized", "onLegendClick", "onOptionChanged", "onPointClick", "onPointHoverChanged", "onPointSelectionChanged", "onSeriesClick", "onSeriesHoverChanged", "onSeriesSelectionChanged", "onTooltipHidden", "onTooltipShown", "onZoomEnd", "onZoomStart", "adaptiveLayoutChange", "adjustOnZoomChange", "animationChange", "annotationsChange", "argumentAxisChange", "autoHidePointMarkersChange", "barGroupPaddingChange", "barGroupWidthChange", "commonAnnotationSettingsChange", "commonAxisSettingsChange", "commonPaneSettingsChange", "commonSeriesSettingsChange", "containerBackgroundColorChange", "crosshairChange", "customizeAnnotationChange", "customizeLabelChange", "customizePointChange", "dataPrepareSettingsChange", "dataSourceChange", "defaultPaneChange", "disabledChange", "elementAttrChange", "exportChange", "legendChange", "loadingIndicatorChange", "marginChange", "maxBubbleSizeChange", "minBubbleSizeChange", "negativesAsZeroesChange", "paletteChange", "paletteExtensionModeChange", "panesChange", "pathModifiedChange", "pointSelectionModeChange", "redrawOnResizeChange", "resizePanesOnZoomChange", "resolveLabelOverlappingChange", "rotatedChange", "rtlEnabledChange", "scrollBarChange", "seriesChange", "seriesSelectionModeChange", "seriesTemplateChange", "sizeChange", "stickyHoveringChange", "synchronizeMultiAxesChange", "themeChange", "titleChange", "tooltipChange", "valueAxisChange", "zoomAndPanChange"] }, { kind: "component", type: i6.DxoArgumentAxisComponent, selector: "dxo-argument-axis", inputs: ["aggregateByCategory", "aggregatedPointsPosition", "aggregationGroupWidth", "aggregationInterval", "allowDecimals", "argumentType", "axisDivisionFactor", "breaks", "breakStyle", "categories", "color", "constantLines", "constantLineStyle", "customPosition", "customPositionAxis", "discreteAxisDivisionMode", "endOnTick", "grid", "holidays", "hoverMode", "inverted", "label", "linearThreshold", "logarithmBase", "maxValueMargin", "minorGrid", "minorTick", "minorTickCount", "minorTickInterval", "minValueMargin", "minVisualRangeLength", "offset", "opacity", "placeholderSize", "position", "singleWorkdays", "strips", "stripStyle", "tick", "tickInterval", "title", "type", "valueMarginsEnabled", "visible", "visualRange", "visualRangeUpdateMode", "wholeRange", "width", "workdaysOnly", "workWeek", "firstPointOnStartAngle", "originValue", "period", "startAngle"], outputs: ["visualRangeChange"] }, { kind: "component", type: i6.DxoCommonSeriesSettingsComponent, selector: "dxo-common-series-settings", inputs: ["aggregation", "area", "argumentField", "axis", "bar", "barOverlapGroup", "barPadding", "barWidth", "border", "bubble", "candlestick", "closeValueField", "color", "cornerRadius", "dashStyle", "fullstackedarea", "fullstackedbar", "fullstackedline", "fullstackedspline", "fullstackedsplinearea", "highValueField", "hoverMode", "hoverStyle", "ignoreEmptyPoints", "innerColor", "label", "line", "lowValueField", "maxLabelCount", "minBarSize", "opacity", "openValueField", "pane", "point", "rangearea", "rangebar", "rangeValue1Field", "rangeValue2Field", "reduction", "scatter", "selectionMode", "selectionStyle", "showInLegend", "sizeField", "spline", "splinearea", "stack", "stackedarea", "stackedbar", "stackedline", "stackedspline", "stackedsplinearea", "steparea", "stepline", "stock", "tagField", "type", "valueErrorBar", "valueField", "visible", "width", "argumentType", "minSegmentSize", "smallValuesGrouping", "closed"] }, { kind: "component", type: i6.DxoConnectorComponent, selector: "dxo-connector", inputs: ["color", "visible", "width", "opacity"] }, { kind: "component", type: i6.DxiSeriesComponent, selector: "dxi-series", inputs: ["aggregation", "argumentField", "axis", "barOverlapGroup", "barPadding", "barWidth", "border", "closeValueField", "color", "cornerRadius", "dashStyle", "highValueField", "hoverMode", "hoverStyle", "ignoreEmptyPoints", "innerColor", "label", "lowValueField", "maxLabelCount", "minBarSize", "name", "opacity", "openValueField", "pane", "point", "rangeValue1Field", "rangeValue2Field", "reduction", "selectionMode", "selectionStyle", "showInLegend", "sizeField", "stack", "tag", "tagField", "type", "valueErrorBar", "valueField", "visible", "width", "argumentType", "minSegmentSize", "smallValuesGrouping", "closed"] }, { kind: "component", type: i6.DxiValueAxisComponent, selector: "dxi-value-axis", inputs: ["aggregatedPointsPosition", "allowDecimals", "autoBreaksEnabled", "axisDivisionFactor", "breaks", "breakStyle", "categories", "color", "constantLines", "constantLineStyle", "customPosition", "discreteAxisDivisionMode", "endOnTick", "grid", "inverted", "label", "linearThreshold", "logarithmBase", "maxAutoBreakCount", "maxValueMargin", "minorGrid", "minorTick", "minorTickCount", "minorTickInterval", "minValueMargin", "minVisualRangeLength", "multipleAxesSpacing", "name", "offset", "opacity", "pane", "placeholderSize", "position", "showZero", "strips", "stripStyle", "synchronizedValue", "tick", "tickInterval", "title", "type", "valueMarginsEnabled", "valueType", "visible", "visualRange", "visualRangeUpdateMode", "wholeRange", "width"], outputs: ["visualRangeChange"] }, { kind: "component", type: i5$1.DxCheckBoxComponent, selector: "dx-check-box", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "iconSize", "isValid", "name", "readOnly", "rtlEnabled", "tabIndex", "text", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "visible", "width"], outputs: ["onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconSizeChange", "isValidChange", "nameChange", "readOnlyChange", "rtlEnabledChange", "tabIndexChange", "textChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "component", type: i6$2.DxColorBoxComponent, selector: "dx-color-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "applyButtonText", "applyValueMode", "buttons", "cancelButtonText", "deferRendering", "disabled", "dropDownButtonTemplate", "dropDownOptions", "editAlphaChannel", "elementAttr", "fieldTemplate", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "keyStep", "label", "labelMode", "name", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showDropDownButton", "stylingMode", "tabIndex", "text", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "visible", "width"], outputs: ["onChange", "onClosed", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOpened", "onOptionChanged", "onPaste", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "applyButtonTextChange", "applyValueModeChange", "buttonsChange", "cancelButtonTextChange", "deferRenderingChange", "disabledChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "editAlphaChannelChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "keyStepChange", "labelChange", "labelModeChange", "nameChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showDropDownButtonChange", "stylingModeChange", "tabIndexChange", "textChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "component", type: i10.DxPieChartComponent, selector: "dx-pie-chart", inputs: ["adaptiveLayout", "animation", "annotations", "centerTemplate", "commonAnnotationSettings", "commonSeriesSettings", "customizeAnnotation", "customizeLabel", "customizePoint", "dataSource", "diameter", "disabled", "elementAttr", "export", "innerRadius", "legend", "loadingIndicator", "margin", "minDiameter", "palette", "paletteExtensionMode", "pathModified", "pointSelectionMode", "redrawOnResize", "resolveLabelOverlapping", "rtlEnabled", "segmentsDirection", "series", "seriesTemplate", "size", "sizeGroup", "startAngle", "theme", "title", "tooltip", "type"], outputs: ["onDisposing", "onDone", "onDrawn", "onExported", "onExporting", "onFileSaving", "onIncidentOccurred", "onInitialized", "onLegendClick", "onOptionChanged", "onPointClick", "onPointHoverChanged", "onPointSelectionChanged", "onTooltipHidden", "onTooltipShown", "adaptiveLayoutChange", "animationChange", "annotationsChange", "centerTemplateChange", "commonAnnotationSettingsChange", "commonSeriesSettingsChange", "customizeAnnotationChange", "customizeLabelChange", "customizePointChange", "dataSourceChange", "diameterChange", "disabledChange", "elementAttrChange", "exportChange", "innerRadiusChange", "legendChange", "loadingIndicatorChange", "marginChange", "minDiameterChange", "paletteChange", "paletteExtensionModeChange", "pathModifiedChange", "pointSelectionModeChange", "redrawOnResizeChange", "resolveLabelOverlappingChange", "rtlEnabledChange", "segmentsDirectionChange", "seriesChange", "seriesTemplateChange", "sizeChange", "sizeGroupChange", "startAngleChange", "themeChange", "titleChange", "tooltipChange", "typeChange"] }, { kind: "component", type: i10$1.DxScrollViewComponent, selector: "dx-scroll-view", inputs: ["bounceEnabled", "direction", "disabled", "elementAttr", "height", "pulledDownText", "pullingDownText", "reachBottomText", "refreshingText", "rtlEnabled", "scrollByContent", "scrollByThumb", "showScrollbar", "useNative", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onPullDown", "onReachBottom", "onScroll", "onUpdated", "bounceEnabledChange", "directionChange", "disabledChange", "elementAttrChange", "heightChange", "pulledDownTextChange", "pullingDownTextChange", "reachBottomTextChange", "refreshingTextChange", "rtlEnabledChange", "scrollByContentChange", "scrollByThumbChange", "showScrollbarChange", "useNativeChange", "widthChange"] }, { kind: "component", type: i6$1.DxSelectBoxComponent, selector: "dx-select-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "buttons", "dataSource", "deferRendering", "disabled", "displayExpr", "displayValue", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "fieldTemplate", "focusStateEnabled", "grouped", "groupTemplate", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "items", "itemTemplate", "label", "labelMode", "maxLength", "minSearchLength", "name", "noDataText", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "searchEnabled", "searchExpr", "searchMode", "searchTimeout", "selectedItem", "showClearButton", "showDataBeforeSearch", "showDropDownButton", "showSelectionControls", "spellcheck", "stylingMode", "tabIndex", "text", "useItemTextAsTitle", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueChangeEvent", "valueExpr", "visible", "width", "wrapItemText"], outputs: ["onChange", "onClosed", "onContentReady", "onCopy", "onCustomItemCreating", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onItemClick", "onKeyDown", "onKeyUp", "onOpened", "onOptionChanged", "onPaste", "onSelectionChanged", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "dataSourceChange", "deferRenderingChange", "disabledChange", "displayExprChange", "displayValueChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "groupedChange", "groupTemplateChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "itemsChange", "itemTemplateChange", "labelChange", "labelModeChange", "maxLengthChange", "minSearchLengthChange", "nameChange", "noDataTextChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "searchEnabledChange", "searchExprChange", "searchModeChange", "searchTimeoutChange", "selectedItemChange", "showClearButtonChange", "showDataBeforeSearchChange", "showDropDownButtonChange", "showSelectionControlsChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useItemTextAsTitleChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "valueExprChange", "visibleChange", "widthChange", "wrapItemTextChange", "onBlur"] }, { kind: "component", type: i8$1.DxTagBoxComponent, selector: "dx-tag-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "applyValueMode", "buttons", "dataSource", "deferRendering", "disabled", "displayExpr", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "fieldTemplate", "focusStateEnabled", "grouped", "groupTemplate", "height", "hideSelectedItems", "hint", "hoverStateEnabled", "inputAttr", "isValid", "items", "itemTemplate", "label", "labelMode", "maxDisplayedTags", "maxFilterQueryLength", "maxLength", "minSearchLength", "multiline", "name", "noDataText", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "searchEnabled", "searchExpr", "searchMode", "searchTimeout", "selectAllMode", "selectAllText", "selectedItems", "showClearButton", "showDataBeforeSearch", "showDropDownButton", "showMultiTagOnly", "showSelectionControls", "stylingMode", "tabIndex", "tagTemplate", "text", "useItemTextAsTitle", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueExpr", "visible", "width", "wrapItemText"], outputs: ["onChange", "onClosed", "onContentReady", "onCustomItemCreating", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onItemClick", "onKeyDown", "onKeyUp", "onMultiTagPreparing", "onOpened", "onOptionChanged", "onSelectAllValueChanged", "onSelectionChanged", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "applyValueModeChange", "buttonsChange", "dataSourceChange", "deferRenderingChange", "disabledChange", "displayExprChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "groupedChange", "groupTemplateChange", "heightChange", "hideSelectedItemsChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "itemsChange", "itemTemplateChange", "labelChange", "labelModeChange", "maxDisplayedTagsChange", "maxFilterQueryLengthChange", "maxLengthChange", "minSearchLengthChange", "multilineChange", "nameChange", "noDataTextChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "searchEnabledChange", "searchExprChange", "searchModeChange", "searchTimeoutChange", "selectAllModeChange", "selectAllTextChange", "selectedItemsChange", "showClearButtonChange", "showDataBeforeSearchChange", "showDropDownButtonChange", "showMultiTagOnlyChange", "showSelectionControlsChange", "stylingModeChange", "tabIndexChange", "tagTemplateChange", "textChange", "useItemTextAsTitleChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueExprChange", "visibleChange", "widthChange", "wrapItemTextChange", "onBlur"] }, { kind: "component", type: i7.DxTextBoxComponent, selector: "dx-text-box", inputs: ["accessKey", "activeStateEnabled", "buttons", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "label", "labelMode", "mask", "maskChar", "maskInvalidMessage", "maskRules", "maxLength", "mode", "name", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showMaskMode", "spellcheck", "stylingMode", "tabIndex", "text", "useMaskedValue", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOptionChanged", "onPaste", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "labelChange", "labelModeChange", "maskChange", "maskCharChange", "maskInvalidMessageChange", "maskRulesChange", "maxLengthChange", "modeChange", "nameChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showMaskModeChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useMaskedValueChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: LoaderComponent, selector: "app-loader" }, { kind: "pipe", type: i4$1.JsonPipe, name: "json" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DashChartComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-dash-chart', template: "<div class=\"mx-2\">\n    <div class=\"w-full m-2 border\">\n        <ng-container *ngIf=\"!isJsonPreview\">\n            <pre><code>{{jsaonDatasource | json}}</code></pre>\n        </ng-container>\n        <ng-container *ngIf=\"isJsonPreview\">\n            <ng-container *ngIf=\"chartType == 'doughnut' || chartType == 'pie'\">\n                <div\n                    class=\"m-3 p-4 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700\">\n                    <!-- <h6 class=\"mb-1 text-md font-bold tracking-tight text-gray-900 dark:text-white border-b pb-3\">\n                        {{widGetConfig.widgetTitle}}\n                    </h6> -->\n                    <dx-pie-chart id=\"pie\" [type]=\"chartType\"\n                        [title]=\"{ text: chartConfig.caption, font: { size: 14 } }\" palette=\"Soft Pastel\"\n                        [dataSource]=\"dataSourseForChart\" centerTemplate=\"centerTemplate\"\n                        (onPointClick)=\"pointClickHandler($event)\" [palette]=\"chartConfig.palette\">\n\n                        <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n                            <ng-container *ngIf=\"item.color\">\n                                <dxi-series argumentField={{chartConfig.argumentField}} valueField=\"{{item.valueField}}\"\n                                    name=\"{{item.name}}\" color=\"{{item.color}}\">\n                                    <dxo-label [visible]=\"chartConfig.labelDisplay\" format=\"#,##0.##\">\n                                        <dxo-connector [visible]=\"true\"></dxo-connector>\n                                    </dxo-label>\n                                </dxi-series>\n                            </ng-container>\n                            <ng-container *ngIf=\"!item.color\">\n                                <dxi-series argumentField={{chartConfig.argumentField}} valueField=\"{{item.valueField}}\"\n                                    name=\"{{item.name}}\">\n                                    <dxo-label [visible]=\"chartConfig.labelDisplay\" format=\"#,##0.##\">\n                                        <dxo-connector [visible]=\"true\"></dxo-connector>\n                                    </dxo-label>\n                                </dxi-series>\n                            </ng-container>\n                        </ng-container>\n                        <dxo-legend [visible]=\"chartConfig.legendDisplay\"\n                            horizontalAlignment=\"{{chartConfig.horizontalAlignment}}\"\n                            verticalAlignment=\"{{chartConfig.verticalAlignment}}\"></dxo-legend>\n                        <!-- <dxo-export [enabled]=\"true\"></dxo-export> -->\n                        <dxo-tooltip [enabled]=\"true\" [customizeTooltip]=\"customizeTooltip\" format=\"#,##0.##\">\n                        </dxo-tooltip>\n                        <ng-container *ngIf=\"chartType == 'doughnut'\">\n                            <svg *dxTemplate=\"let pieChart of 'centerTemplate'\">\n                                <circle cx=\"100\" cy=\"100\" [attr.r]=\"pieChart.getInnerRadius() - 6\" fill=\"gray\"\n                                    opacity=\"0.0001\">\n                                </circle>\n\n                                <text text-anchor=\"middle\" style=\"font-size: 28px\" x=\"100\" y=\"100\" fill=\"#eee\">\n                                    <tspan x=\"100\">{{ calculateTotal(pieChart) }}</tspan>\n                                    <!-- display: inline -->\n                                    <!-- <tspan x=\"100\" dy=\"20px\" style=\"font-weight: 600\"></tspan> -->\n                                </text>\n                            </svg>\n                        </ng-container>\n\n                    </dx-pie-chart>\n                </div>\n            </ng-container>\n            <ng-container\n                *ngIf=\"chartType !== 'doughnut' && chartType !== 'funnel' && chartType !== 'bubble' && chartType !== 'pie'\">\n                <div\n                    class=\"m-3 p-4 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700\">\n                    <!-- <h6 class=\"mb-1 text-md font-bold tracking-tight text-gray-900 dark:text-white border-b pb-3\">\n                        {{widGetConfig.widgetTitle}}\n                    </h6> -->\n                    <dx-chart id=\"chart\" [dataSource]=\"dataSourseForChart\"\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 === '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                </ul>\n            </div>\n\n            <div id=\"default-styled-tab-content\">\n                <div *ngIf=\"activeTab === 'basic'\">\n                    <div class=\"flex flex-col flex-auto min-w-0\">\n                        <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Filter Title\n                            Config\n                        </div>\n                        <div class=\"pt-2 border-x border-b \">\n                            <div class=\"my-2 flex justify-between\">\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Title</div>\n                                    <dx-text-box\n                                        [(ngModel)]=\"mainChartCourceObject.kpiConfig.commonConfig.title\"></dx-text-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Data Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"mainChartCourceObject.kpiConfig.commonConfig.dataField\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-2\"> Display Format </div>\n                                    <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                        [(ngModel)]=\"mainChartCourceObject.kpiConfig.formate\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-2\"> Key To Pass </div>\n                                    <dx-tag-box [items]=\"configColume\"\n                                        [(ngModel)]=\"mainChartCourceObject.kpiConfig.keyToPass\"></dx-tag-box>\n                                </div>\n\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"flex flex-wrap justify-between my-2\">\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1 \">Legend Horizontal Alignment</div>\n                            <dx-select-box [searchEnabled]=\"true\" [items]=\"['right','left','center']\"\n                                [(ngModel)]=\"chartConfig.horizontalAlignment\"></dx-select-box>\n\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Legend Vertical Alignment</div>\n                            <dx-select-box [searchEnabled]=\"true\" [items]=\"['top','bottom']\"\n                                [(ngModel)]=\"chartConfig.verticalAlignment\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1 mt-8\"></div>\n                            <dx-check-box [(ngModel)]=\"chartConfig.legendDisplay\" text=\"Legend Display\"></dx-check-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Argument Field</div>\n                            <dx-select-box [items]=\"configColume\"\n                                [(ngModel)]=\"chartConfig.argumentField\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Size</div>\n                            <dx-text-box [(ngModel)]=\"chartConfig.size\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Caption</div>\n                            <dx-text-box [(ngModel)]=\"chartConfig.caption\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2\"> Display Formate </div>\n                            <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                [(ngModel)]=\"mainChartCourceObject.kpiConfig.formate\"\n                                [readOnly]=\"false\"></dx-select-box>\n                        </div>\n                        <div class=\"w-2/3 px-2 mt-2\" *ngIf=\"chartType == 'doughnut' ||  chartType == 'pie'\">\n                            <div class=\" flex flex-row\">\n                                <div class=\"mr-2\">\n                                    <div class=\"text-md mb-1\"> Color Palette</div>\n                                    <dx-select-box [items]=\"doughnut_color_palette\"\n                                        [(ngModel)]=\"chartConfig.palette\"></dx-select-box>\n                                </div>\n                                <div class=\"mt-7\">\n                                    <dx-check-box [value]=\"chartConfig.labelDisplay\"\n                                        [(ngModel)]=\"chartConfig.labelDisplay\" text=\"Label Display\"></dx-check-box>\n                                </div>\n                            </div>\n\n\n                        </div>\n                        <div class=\"w-2/3 px-2 mt-2\" *ngIf=\"chartType == 'bubble'\">\n                            <div class=\" flex flex-row\">\n                                <div class=\"mr-2\">\n                                    <div class=\"text-md mb-1\"> Source Field</div>\n                                    <dx-select-box [items]=\"configColume\"\n                                        [(ngModel)]=\"chartConfig.sourceField\"></dx-select-box>\n                                </div>\n                                <div class=\"mr-2\">\n                                    <div class=\"text-md mb-1\"> Min Bubble Size</div>\n                                    <dx-text-box [(ngModel)]=\"chartConfig.minBubbleSize\"></dx-text-box>\n                                </div>\n                                <div class=\"mr-2\">\n                                    <div class=\"text-md mb-1\"> Max bubble size</div>\n                                    <dx-text-box [(ngModel)]=\"chartConfig.maxBubbleSize\"></dx-text-box>\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\" *ngIf=\"chartType == 'doughnut'\">\n\n                        </div>\n\n                    </div>\n                </div>\n                <div *ngIf=\"activeTab === 'columns'\">\n                    <div class=\"h-60 overflow-x-auto\">\n                        <div class=\" border-x border-b \">\n                            <div class=\"py-1 flex flex-row border-b\"\n                                *ngFor=\"let item of chartConfig.chart_config; let i = index\">\n\n                                <div class=\"px-1 mb-1 w-1/3\">\n                                    <div class=\"text-md mb-1\"> Value Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"item.valueField\"></dx-select-box>\n                                </div>\n\n                                <div class=\"px-1 mb-1 w-1/4\" *ngIf=\"chartType !== 'doughnut' && chartType !== 'pie'\">\n                                    <div class=\"text-md mb-1\"> Axis</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"item.axis\"></dx-select-box>\n                                </div>\n                                <div class=\" px-2 mb-1 w-1/3\">\n                                    <div class=\"text-md mb-1\"> Position</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"['right','left']\"\n                                        [(ngModel)]=\"item.position\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-1/4\">\n                                    <div class=\"text-md mb-1\"> Name</div>\n                                    <dx-text-box [(ngModel)]=\"item.name\"></dx-text-box>\n                                </div>\n                                <div class=\"text-center mt-6 w-1/6\">\n                                    <button *ngIf=\"i !== 0\" class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItem(i, 'up')\">\n                                        <i class=\"fa fa-arrow-up\" aria-hidden=\"true\"></i>\n                                    </button>\n                                    <button *ngIf=\"i !== chartConfig.chart_config.length - 1\"\n                                        class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItem(i, 'down')\">\n                                        <i class=\"fa fa-arrow-down\" aria-hidden=\"true\"></i>\n                                    </button>\n\n                                    <button class=\"{{commonService.btn_danger_sm}} cursor-pointer\"\n                                        (click)=\"deleteColumns(i)\"><i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                    </button>\n                                </div>\n                            </div>\n                            <div class=\"flex flex-row justify-end my-2\"\n                                *ngIf=\"chartType == 'doughnut' && chartType == 'pie'\">\n                                <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\"\n                                    (click)=\"addColumns()\">Add\n                                    Series</button>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <div *ngIf=\"activeTab === 'properties'\">\n                    <div class=\"h-full overflow-x-auto\">\n                        <app-loader *ngIf=\"isLoader\"></app-loader>\n                        <ng-container *ngIf=\"!isLoader\">\n                            <div class=\"flex flex-row justify-between border-b py-3\">\n                                <div class=\"mx-2\">\n                                    <dx-check-box [value]=\"viewProperties.enableClickEvent\"\n                                        [(ngModel)]=\"viewProperties.enableClickEvent\"\n                                        text=\"Enable Click Event\"></dx-check-box>\n                                </div>\n                                <div class=\"mx-2\">\n                                    <dx-check-box [value]=\"viewProperties.enableRightClickEvent\"\n                                        [(ngModel)]=\"viewProperties.enableRightClickEvent\"\n                                        text=\"Enable Right Click\"></dx-check-box>\n                                </div>\n                            </div>\n                            <div class=\"w-full p-2\" *ngIf=\"viewProperties.enableClickEvent\">\n\n                                <div class=\"flex flex-col flex-auto min-w-0 my-2\">\n                                    <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Event\n                                        Type\n                                        Option\n                                    </div>\n                                    <div class=\"w-full p-3 border-x border-b \">\n                                        <div class=\"flex flex-row\">\n                                            <div class=\"w-full\">\n                                                <div class=\"text-md mb-2\"> Event Type</div>\n                                            </div>\n                                            <div class=\"w-full\">\n                                                <dx-select-box\n                                                    [items]=\"['drilldown','sameViewDrilldown','optionalDrillDown','popup','navigateToPage']\"\n                                                    (onValueChanged)=\"getSelectedEventType($event)\"\n                                                    [(ngModel)]=\"viewProperties.clickEventOptions.eventType\"></dx-select-box>\n                                            </div>\n                                        </div>\n                                         <ng-container *ngIf=\"viewProperties.clickEventOptions.eventType == 'popup'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full\">\n                                                    <div class=\"text-md mb-2\"> Associated Views For Popup</div>\n                                                    <dx-tag-box [items]=\"allConfiguredViews\"\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                        valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                        [showSelectionControls]=\"true\"\n                                                        [searchEnabled]=\"true\"></dx-tag-box>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container\n                                            *ngIf=\"viewProperties.clickEventOptions.eventType == 'navigateToPage'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full mx-2\">\n                                                    <div class=\"text-md mb-2\"> Associated Pages</div>\n                                                    <dx-select-box [items]=\"allConfiguredPage\"\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedPage\"\n                                                        valueExpr=\"pageId\" displayExpr=\"pageName\"\n                                                        [searchEnabled]=\"true\"></dx-select-box>\n                                                </div>\n                                                <div class=\"w-full mx-2\">\n                                                    <div class=\"text-md mb-2\"> Associated Params</div>\n                                                    <dx-text-box\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedParams\"></dx-text-box>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container *ngIf=\"viewProperties.clickEventOptions.eventType == 'drilldown'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full\">\n                                                    <div class=\"text-md mb-2\"> Associated Views</div>\n                                                    <dx-tag-box [items]=\"allConfiguredViews\"\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                        valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                        [showSelectionControls]=\"true\"\n                                                        [searchEnabled]=\"true\"></dx-tag-box>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container\n                                            *ngIf=\"viewProperties.clickEventOptions.eventType == 'sameViewDrilldown'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full\">\n                                                    <div class=\"text-md mb-2\"> Associated Views</div>\n                                                    <dx-tag-box [items]=\"allConfiguredViews\"\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                        valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                        [showSelectionControls]=\"true\"\n                                                        [searchEnabled]=\"true\"></dx-tag-box>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container\n                                            *ngIf=\"viewProperties.clickEventOptions.eventType == 'optionalDrillDown'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full\">\n                                                    <ng-container\n                                                        *ngFor=\"let item of optionalDrilDownDataSource;let i = index;\">\n\n                                                        <div class=\"flex flex-row justify-between\">\n                                                            <div class=\"mx-2 w-1/2\">\n                                                                <div class=\"text-md mb-2\"> Associated Views</div>\n                                                                <dx-tag-box [items]=\"allConfiguredViews\"\n                                                                    [(ngModel)]=\"item.viewId\" valueExpr=\"viewId\"\n                                                                    displayExpr=\"viewName\"\n                                                                    [showSelectionControls]=\"true\"\n                                                                    [maxDisplayedTags]=\"2\"\n                                                                    [searchEnabled]=\"true\"></dx-tag-box>\n\n                                                            </div>\n                                                            <div class=\"mx-2 w-1/2\">\n                                                                <div class=\"text-md mb-2\"> Associated Params</div>\n                                                                <dx-text-box\n                                                                    [(ngModel)]=\"item.filterCondition\"></dx-text-box>\n                                                            </div>\n                                                            <div class=\"mx-2\">\n                                                                <button\n                                                                    class=\"{{commonService.btn_danger_sm}} cursor-pointer mt-8\"\n                                                                    (click)=\"deleteAssociatedParams(i)\"><i\n                                                                        class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                                                </button>\n                                                            </div>\n                                                        </div>\n                                                    </ng-container>\n                                                    <div class=\"flex flex-row justify-end mt-4\">\n                                                        <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\"\n                                                            (click)=\"addAssociatedParams()\">Add\n                                                            Params</button>\n                                                    </div>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <button class=\"{{commonService.btn_light_md}} cursor-pointer mt-4\"\n                                            (click)=\"resetViewProprstise()\">Reset All Event</button>\n                                    </div>\n                                </div>\n\n                            </div>\n                        </ng-container>\n                    </div>\n                </div>\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"chartAccess == 'multy'\">\n            <div class=\"mb-4 border-b border-gray-200 dark:border-gray-700\">\n                <ul class=\"flex flex-wrap -mb-px text-sm font-medium text-center\" role=\"tablist\">\n                    <li class=\"me-2\" role=\"presentation\">\n                        <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'basic',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'basic'\n                            }\" (click)=\"setActiveTab('basic')\" type=\"button\" role=\"tab\">\n                            Basic\n                        </button>\n                    </li>\n                    <li class=\"me-2\" role=\"presentation\">\n                        <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'columns',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'columns'\n                            }\" (click)=\"setActiveTab('columns')\" type=\"button\" role=\"tab\">\n                            Columns\n                        </button>\n                    </li>\n                    <li class=\"me-2\" role=\"presentation\">\n                        <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'properties',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'properties'\n                            }\" (click)=\"setActiveTab('properties')\" type=\"button\" role=\"tab\">\n                            Properties\n                        </button>\n                    </li>\n                </ul>\n            </div>\n\n            <div id=\"default-styled-tab-content\">\n                <div *ngIf=\"activeTab === 'basic'\">\n                    <div class=\"flex flex-col flex-auto min-w-0\">\n                        <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Filter Title\n                            Config\n                        </div>\n                        <div class=\"pt-2 border-x border-b \">\n                            <div class=\"my-2 flex justify-between\">\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Title</div>\n                                    <dx-text-box\n                                        [(ngModel)]=\"mainChartCourceObject.kpiConfig.commonConfig.title\"></dx-text-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Data Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"mainChartCourceObject.kpiConfig.commonConfig.dataField\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-2\"> Display Format </div>\n                                    <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                        [(ngModel)]=\"mainChartCourceObject.kpiConfig.formate\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-2\"> Key To Pass </div>\n                                    <dx-tag-box [items]=\"configColume\"\n                                        [(ngModel)]=\"mainChartCourceObject.kpiConfig.keyToPass\"></dx-tag-box>\n                                </div>\n\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"flex flex-wrap justify-between my-2\">\n                        <div class=\"w-1/3 px-2\">\n                            <div class=\"text-md mb-1\">Legend Horizontal Alignment</div>\n                            <dx-select-box [searchEnabled]=\"true\" [items]=\"['right','left','center']\" [value]=\"'center'\"\n                                [(ngModel)]=\"chartConfig.horizontalAlignment\"></dx-select-box>\n\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> legent Vertical Alignment</div>\n                            <dx-select-box [searchEnabled]=\"true\" [items]=\"['top','bottom']\" [value]=\"'bottom'\"\n                                [(ngModel)]=\"chartConfig.verticalAlignment\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1 mt-8\"></div>\n                            <dx-check-box [(ngModel)]=\"chartConfig.legendDisplay\" text=\"Legend Display\"></dx-check-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Argument Field</div>\n                            <dx-select-box [items]=\"configColume\"\n                                [(ngModel)]=\"chartConfig.argumentField\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Size</div>\n                            <dx-text-box [(ngModel)]=\"chartConfig.size\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Caption</div>\n                            <dx-text-box [(ngModel)]=\"chartConfig.caption\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2\"> Display Format </div>\n                            <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                [(ngModel)]=\"mainChartCourceObject.kpiConfig.formate\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2\"> Date Format </div>\n                            <dx-select-box [items]=\"['MM-DD','YYYY-MM-DD']\"\n                                [(ngModel)]=\"mainChartCourceObject.kpiConfig.displayDateFormat\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2 mt-6\"> </div>\n                            <dx-check-box [(ngModel)]=\"mainChartCourceObject.kpiConfig.descendingOrder\"\n                                text=\"Descending Order\"></dx-check-box>\n                        </div>\n                    </div>\n                </div>\n                <div *ngIf=\"activeTab === 'columns'\">\n                    <dx-scroll-view class=\"h-full\" [width]=\"'100%'\" [height]=\"'100%'\">\n                        <div class=\" border-x border-b \">\n                            <div class=\"py-1 flex flex-wrap border-b\"\n                                *ngFor=\"let item of chartConfig.chart_config; let i = index;\">\n\n                                <div class=\"px-2 mb-1 w-1/3\">\n                                    <div class=\"text-md mb-2\"> Type</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"chartTypeSource\" [value]=\"'spline'\"\n                                        [(ngModel)]=\"item.type\"></dx-select-box>\n                                </div>\n                                <div class=\"px-2 mb-1 w-1/3\">\n                                    <div class=\"text-md mb-1\"> Value Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"item.valueField\"></dx-select-box>\n                                </div>\n\n                                <div class=\"px-2 mb-1 w-1/3\">\n                                    <div class=\"text-md mb-1\"> Axis</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"item.axis\"></dx-select-box>\n                                </div>\n                                <div class=\" px-2 mb-1 w-1/4\">\n                                    <div class=\"text-md mb-1\"> Position</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"['right','left']\"\n                                        [(ngModel)]=\"item.position\"></dx-select-box>\n                                </div>\n                                <div class=\"px-2 mb-1 w-1/4\">\n                                    <div class=\"text-md mb-1\"> Name</div>\n                                    <dx-text-box [(ngModel)]=\"item.name\"></dx-text-box>\n                                </div>\n                                <div class=\"px-2 mb-1 w-1/4\">\n                                    <div class=\"text-md mb-2\"> Color</div>\n                                    <dx-color-box [(ngModel)]=\"item.color\"></dx-color-box>\n                                </div>\n                                <div class=\"text-center my-1 w-1/4\">\n                                    <button *ngIf=\"i !== 0\" class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItem(i, 'up')\">\n                                        <i class=\"fa fa-arrow-up\" aria-hidden=\"true\"></i>\n                                    </button>\n                                    <button *ngIf=\"i !== chartConfig.chart_config.length - 1\"\n                                        class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItem(i, 'down')\">\n                                        <i class=\"fa fa-arrow-down\" aria-hidden=\"true\"></i>\n                                    </button>\n\n                                    <button class=\"{{commonService.btn_danger_sm}} cursor-pointer\"\n                                        (click)=\"deleteColumns(i)\"><i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                    </button>\n                                </div>\n                            </div>\n                            <div class=\"flex flex-row justify-end my-2\">\n                                <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\"\n                                    (click)=\"addColumns()\">Add\n                                    Columns</button>\n                            </div>\n                        </div>\n                    </dx-scroll-view>\n                </div>\n                <div *ngIf=\"activeTab === 'properties'\">\n                    <div class=\"h-full overflow-x-auto\">\n                        <app-loader *ngIf=\"isLoader\"></app-loader>\n                        <ng-container *ngIf=\"!isLoader\">\n                            <div class=\"flex flex-row justify-between border-b py-3\">\n                                <div class=\"mx-2\">\n                                    <dx-check-box [value]=\"viewProperties.enableClickEvent\"\n                                        [(ngModel)]=\"viewProperties.enableClickEvent\"\n                                        text=\"Enable Click Event\"></dx-check-box>\n                                </div>\n                                <div class=\"mx-2\">\n                                    <dx-check-box [value]=\"viewProperties.enableRightClickEvent\"\n                                        [(ngModel)]=\"viewProperties.enableRightClickEvent\"\n                                        text=\"Enable Right Click\"></dx-check-box>\n                                </div>\n                            </div>\n                            <div class=\"w-full p-2\" *ngIf=\"viewProperties.enableClickEvent\">\n\n                                <div class=\"flex flex-col flex-auto min-w-0 my-2\">\n                                    <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Event\n                                        Type\n                                        Option\n                                    </div>\n                                    <div class=\"w-full p-3 border-x border-b \">\n                                        <div class=\"flex flex-row\">\n                                            <div class=\"w-full\">\n                                                <div class=\"text-md mb-2\"> Event Type</div>\n                                            </div>\n                                            <div class=\"w-full\">\n                                                <dx-select-box\n                                                    [items]=\"['drilldown','sameViewDrilldown','optionalDrillDown','popup','navigateToPage']\"\n                                                    (onValueChanged)=\"getSelectedEventType($event)\"\n                                                    [(ngModel)]=\"viewProperties.clickEventOptions.eventType\"></dx-select-box>\n                                            </div>\n                                        </div>\n                                        <ng-container\n                                            *ngIf=\"viewProperties.clickEventOptions.eventType == 'navigateToPage'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full mx-2\">\n                                                    <div class=\"text-md mb-2\"> Associated Pages</div>\n                                                    <dx-select-box [items]=\"allConfiguredPage\"\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedPage\"\n                                                        valueExpr=\"pageId\" displayExpr=\"pageName\"\n                                                        [searchEnabled]=\"true\"></dx-select-box>\n                                                </div>\n                                                <div class=\"w-full mx-2\">\n                                                    <div class=\"text-md mb-2\"> Associated Params</div>\n                                                    <dx-text-box\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedParams\"></dx-text-box>\n\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container *ngIf=\"viewProperties.clickEventOptions.eventType == 'drilldown'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full\">\n                                                    <div class=\"text-md mb-2\"> Associated Views</div>\n                                                    <dx-tag-box [items]=\"allConfiguredViews\"\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                        valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                        [showSelectionControls]=\"true\"\n                                                        [searchEnabled]=\"true\"></dx-tag-box>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container *ngIf=\"viewProperties.clickEventOptions.eventType == 'popup'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full\">\n                                                    <div class=\"text-md mb-2\"> Associated Views For Popup</div>\n                                                    <dx-tag-box [items]=\"allConfiguredViews\"\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                        valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                        [showSelectionControls]=\"true\"\n                                                        [searchEnabled]=\"true\"></dx-tag-box>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container\n                                            *ngIf=\"viewProperties.clickEventOptions.eventType == 'sameViewDrilldown'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full\">\n                                                    <div class=\"text-md mb-2\"> Associated Views</div>\n                                                    <dx-tag-box [items]=\"allConfiguredViews\"\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                        valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                        [showSelectionControls]=\"true\"\n                                                        [searchEnabled]=\"true\"></dx-tag-box>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container\n                                            *ngIf=\"viewProperties.clickEventOptions.eventType == 'optionalDrillDown'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full\">\n                                                    <ng-container\n                                                        *ngFor=\"let item of optionalDrilDownDataSource;let i = index;\">\n\n                                                        <div class=\"flex flex-row justify-between\">\n                                                            <div class=\"mx-2 w-1/2\">\n                                                                <div class=\"text-md mb-2\"> Associated Views</div>\n                                                                <dx-tag-box [items]=\"allConfiguredViews\"\n                                                                    [(ngModel)]=\"item.viewId\" valueExpr=\"viewId\"\n                                                                    displayExpr=\"viewName\"\n                                                                    [showSelectionControls]=\"true\"\n                                                                    [maxDisplayedTags]=\"2\"\n                                                                    [searchEnabled]=\"true\"></dx-tag-box>\n\n                                                            </div>\n                                                            <div class=\"mx-2 w-1/2\">\n                                                                <div class=\"text-md mb-2\"> Associated Params</div>\n                                                                <dx-text-box\n                                                                    [(ngModel)]=\"item.filterCondition\"></dx-text-box>\n                                                            </div>\n                                                            <div class=\"mx-2\">\n                                                                <button\n                                                                    class=\"{{commonService.btn_danger_sm}} cursor-pointer mt-8\"\n                                                                    (click)=\"deleteAssociatedParams(i)\"><i\n                                                                        class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                                                </button>\n                                                            </div>\n                                                        </div>\n                                                    </ng-container>\n                                                    <div class=\"flex flex-row justify-end mt-4\">\n                                                        <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\"\n                                                            (click)=\"addAssociatedParams()\">Add\n                                                            Params</button>\n                                                    </div>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <button class=\"{{commonService.btn_light_md}} cursor-pointer mt-4\"\n                                            (click)=\"resetViewProprstise()\">Reset All Event</button>\n                                    </div>\n                                </div>\n\n                            </div>\n                        </ng-container>\n                    </div>\n                </div>\n            </div>\n        </ng-container>\n\n\n    </div>\n\n</div>\n\n<div class=\"flex flex-row border-t pl-3\">\n    <div class=\"flex justify-start mx-1\">\n        <button class=\"{{commonService.btn_warning_md}} cursor-pointer mt-2\" (click)=\"isJsonPreview = true\">\n            Preview</button>\n        <button class=\"{{commonService.btn_primary_md}} cursor-pointer mt-2\" (click)=\"isJsonPreview = false\">Data\n            Preview</button>\n    </div>\n    <div class=\"flex justify-end mx-1 flex-grow\">\n        <button class=\"{{commonService.btn_success_md}} cursor-pointer mt-2\"\n            (click)=\"getSaveChartConfig()\">Submit</button>\n    </div>\n</div>" }]
+            args: [{ selector: 'app-dash-chart', template: "<div class=\"mx-2\">\n    <div class=\"w-full m-2 border\">\n        <ng-container *ngIf=\"!isJsonPreview\">\n            <pre><code>{{jsaonDatasource | json}}</code></pre>\n        </ng-container>\n        <ng-container *ngIf=\"isJsonPreview\">\n            <ng-container *ngIf=\"chartType == 'doughnut' || chartType == 'pie'\">\n                <div\n                    class=\"m-3 p-4 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700\">\n                    <!-- <h6 class=\"mb-1 text-md font-bold tracking-tight text-gray-900 dark:text-white border-b pb-3\">\n                        {{widGetConfig.widgetTitle}}\n                    </h6> -->\n                    <dx-pie-chart id=\"pie\" [type]=\"chartType\"\n                        [title]=\"{ text: chartConfig.caption, font: { size: 14 } }\" palette=\"Soft Pastel\"\n                        [dataSource]=\"dataSourseForChart\" centerTemplate=\"centerTemplate\"\n                        (onPointClick)=\"pointClickHandler($event)\" [palette]=\"chartConfig.palette\">\n\n                        <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n                            <ng-container *ngIf=\"item.color\">\n                                <dxi-series argumentField={{chartConfig.argumentField}} valueField=\"{{item.valueField}}\"\n                                    name=\"{{item.name}}\" color=\"{{item.color}}\">\n                                    <dxo-label [visible]=\"chartConfig.labelDisplay\" format=\"#,##0.##\">\n                                        <dxo-connector [visible]=\"true\"></dxo-connector>\n                                    </dxo-label>\n                                </dxi-series>\n                            </ng-container>\n                            <ng-container *ngIf=\"!item.color\">\n                                <dxi-series argumentField={{chartConfig.argumentField}} valueField=\"{{item.valueField}}\"\n                                    name=\"{{item.name}}\">\n                                    <dxo-label [visible]=\"chartConfig.labelDisplay\" format=\"#,##0.##\">\n                                        <dxo-connector [visible]=\"true\"></dxo-connector>\n                                    </dxo-label>\n                                </dxi-series>\n                            </ng-container>\n                        </ng-container>\n                        <dxo-legend [visible]=\"chartConfig.legendDisplay\"\n                            horizontalAlignment=\"{{chartConfig.horizontalAlignment}}\"\n                            verticalAlignment=\"{{chartConfig.verticalAlignment}}\"></dxo-legend>\n                        <!-- <dxo-export [enabled]=\"true\"></dxo-export> -->\n                        <dxo-tooltip [enabled]=\"true\" [customizeTooltip]=\"customizeTooltip\" format=\"#,##0.##\">\n                        </dxo-tooltip>\n                        <ng-container *ngIf=\"chartType == 'doughnut'\">\n                            <svg *dxTemplate=\"let pieChart of 'centerTemplate'\">\n                                <circle cx=\"100\" cy=\"100\" [attr.r]=\"pieChart.getInnerRadius() - 6\" fill=\"gray\"\n                                    opacity=\"0.0001\">\n                                </circle>\n\n                                <text text-anchor=\"middle\" style=\"font-size: 28px\" x=\"100\" y=\"100\" fill=\"#eee\">\n                                    <tspan x=\"100\">{{ calculateTotal(pieChart) }}</tspan>\n                                    <!-- display: inline -->\n                                    <!-- <tspan x=\"100\" dy=\"20px\" style=\"font-weight: 600\"></tspan> -->\n                                </text>\n                            </svg>\n                        </ng-container>\n\n                    </dx-pie-chart>\n                </div>\n            </ng-container>\n            <ng-container\n                *ngIf=\"chartType !== 'doughnut' && chartType !== 'funnel' && chartType !== 'bubble' && chartType !== 'pie'\">\n                <div\n                    class=\"m-3 p-4 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700\">\n                    <!-- <h6 class=\"mb-1 text-md font-bold tracking-tight text-gray-900 dark:text-white border-b pb-3\">\n                        {{widGetConfig.widgetTitle}}\n                    </h6> -->\n                    <dx-chart id=\"chart\" [dataSource]=\"dataSourseForChart\" [palette]=\"chartConfig.palette\"\n                        [title]=\"{ text: chartConfig.caption, font: { size: 14 } }\"\n                        [valueAxis]=\"chartConfig.valueAxisConfig\">\n                        <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n                            <ng-container *ngIf=\"item.axis\">\n                                <dxi-value-axis [name]=\"item.axis\" [position]=\"item.position\">\n                                    <dxo-title [text]=\"item.name\"></dxo-title>\n                                </dxi-value-axis>\n                            </ng-container>\n                        </ng-container>\n                        <dxo-argument-axis>\n                            <dxo-label overlappingBehavior=\"rotate\" [rotationAngle]=\"270\"></dxo-label>\n                        </dxo-argument-axis>\n                        <dxo-tooltip [enabled]=\"true\" [shared]=\"true\"></dxo-tooltip>\n                        <dxo-common-series-settings\n                            [argumentField]=\"chartConfig.argumentField\"></dxo-common-series-settings>\n                        <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 === '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                </ul>\n            </div>\n\n            <div id=\"default-styled-tab-content\">\n                <div *ngIf=\"activeTab === 'basic'\">\n                    <div class=\"flex flex-col flex-auto min-w-0\">\n                        <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Filter Title\n                            Config\n                        </div>\n                        <div class=\"pt-2 border-x border-b \">\n                            <div class=\"my-2 flex justify-between\">\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Title</div>\n                                    <dx-text-box\n                                        [(ngModel)]=\"mainChartCourceObject.kpiConfig.commonConfig.title\"></dx-text-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Data Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"mainChartCourceObject.kpiConfig.commonConfig.dataField\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-2\"> Display Format </div>\n                                    <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                        [(ngModel)]=\"mainChartCourceObject.kpiConfig.formate\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-2\"> Key To Pass </div>\n                                    <dx-tag-box [items]=\"configColume\"\n                                        [(ngModel)]=\"mainChartCourceObject.kpiConfig.keyToPass\"></dx-tag-box>\n                                </div>\n\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"flex flex-wrap justify-between my-2\">\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1 \">Legend Horizontal Alignment</div>\n                            <dx-select-box [searchEnabled]=\"true\" [items]=\"['right','left','center']\"\n                                [(ngModel)]=\"chartConfig.horizontalAlignment\"></dx-select-box>\n\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Legend Vertical Alignment</div>\n                            <dx-select-box [searchEnabled]=\"true\" [items]=\"['top','bottom']\"\n                                [(ngModel)]=\"chartConfig.verticalAlignment\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1 mt-8\"></div>\n                            <dx-check-box [(ngModel)]=\"chartConfig.legendDisplay\" text=\"Legend Display\"></dx-check-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Argument Field</div>\n                            <dx-select-box [items]=\"configColume\"\n                                [(ngModel)]=\"chartConfig.argumentField\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Size</div>\n                            <dx-text-box [(ngModel)]=\"chartConfig.size\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Caption</div>\n                            <dx-text-box [(ngModel)]=\"chartConfig.caption\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2\"> Display Formate </div>\n                            <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                [(ngModel)]=\"mainChartCourceObject.kpiConfig.formate\"\n                                [readOnly]=\"false\"></dx-select-box>\n                        </div>\n                        <div class=\"w-2/3 px-2 mt-2\">\n                            <div class=\" flex flex-row\">\n                                <div class=\"mr-2\">\n                                    <div class=\"text-md mb-1\"> Color Palette</div>\n                                    <dx-select-box [items]=\"doughnut_color_palette\"\n                                        [(ngModel)]=\"chartConfig.palette\"></dx-select-box>\n                                </div>\n                                <div class=\"mt-7\">\n                                    <dx-check-box [value]=\"chartConfig.labelDisplay\"\n                                        [(ngModel)]=\"chartConfig.labelDisplay\" text=\"Label Display\"></dx-check-box>\n                                </div>\n                            </div>\n\n\n                        </div>\n                        <div class=\"w-2/3 px-2 mt-2\" *ngIf=\"chartType == 'bubble'\">\n                            <div class=\" flex flex-row\">\n                                <div class=\"mr-2\">\n                                    <div class=\"text-md mb-1\"> Source Field</div>\n                                    <dx-select-box [items]=\"configColume\"\n                                        [(ngModel)]=\"chartConfig.sourceField\"></dx-select-box>\n                                </div>\n                                <div class=\"mr-2\">\n                                    <div class=\"text-md mb-1\"> Min Bubble Size</div>\n                                    <dx-text-box [(ngModel)]=\"chartConfig.minBubbleSize\"></dx-text-box>\n                                </div>\n                                <div class=\"mr-2\">\n                                    <div class=\"text-md mb-1\"> Max bubble size</div>\n                                    <dx-text-box [(ngModel)]=\"chartConfig.maxBubbleSize\"></dx-text-box>\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\" *ngIf=\"chartType == 'doughnut'\">\n\n                        </div>\n\n                    </div>\n                </div>\n                <div *ngIf=\"activeTab === 'columns'\">\n                    <div class=\"h-60 overflow-x-auto\">\n                        <div class=\" border-x border-b \">\n                            <div class=\"py-1 flex flex-row border-b\"\n                                *ngFor=\"let item of chartConfig.chart_config; let i = index\">\n\n                                <div class=\"px-1 mb-1 w-1/3\">\n                                    <div class=\"text-md mb-1\"> Value Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"item.valueField\"></dx-select-box>\n                                </div>\n\n                                <div class=\"px-1 mb-1 w-1/4\" *ngIf=\"chartType !== 'doughnut' && chartType !== 'pie'\">\n                                    <div class=\"text-md mb-1\"> Axis</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"item.axis\"></dx-select-box>\n                                </div>\n                                <div class=\" px-2 mb-1 w-1/3\">\n                                    <div class=\"text-md mb-1\"> Position</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"['right','left']\"\n                                        [(ngModel)]=\"item.position\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-1/4\">\n                                    <div class=\"text-md mb-1\"> Name</div>\n                                    <dx-text-box [(ngModel)]=\"item.name\"></dx-text-box>\n                                </div>\n                                <div class=\"text-center mt-6 w-1/6\">\n                                    <button *ngIf=\"i !== 0\" class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItem(i, 'up')\">\n                                        <i class=\"fa fa-arrow-up\" aria-hidden=\"true\"></i>\n                                    </button>\n                                    <button *ngIf=\"i !== chartConfig.chart_config.length - 1\"\n                                        class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItem(i, 'down')\">\n                                        <i class=\"fa fa-arrow-down\" aria-hidden=\"true\"></i>\n                                    </button>\n\n                                    <button class=\"{{commonService.btn_danger_sm}} cursor-pointer\"\n                                        (click)=\"deleteColumns(i)\"><i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                    </button>\n                                </div>\n                            </div>\n                            <div class=\"flex flex-row justify-end my-2\"\n                                *ngIf=\"chartType == 'doughnut' && chartType == 'pie'\">\n                                <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\"\n                                    (click)=\"addColumns()\">Add\n                                    Series</button>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <div *ngIf=\"activeTab === 'properties'\">\n                    <div class=\"h-full overflow-x-auto\">\n                        <app-loader *ngIf=\"isLoader\"></app-loader>\n                        <ng-container *ngIf=\"!isLoader\">\n                            <div class=\"flex flex-row justify-between border-b py-3\">\n                                <div class=\"mx-2\">\n                                    <dx-check-box [value]=\"viewProperties.enableClickEvent\"\n                                        [(ngModel)]=\"viewProperties.enableClickEvent\"\n                                        text=\"Enable Click Event\"></dx-check-box>\n                                </div>\n                                <div class=\"mx-2\">\n                                    <dx-check-box [value]=\"viewProperties.enableRightClickEvent\"\n                                        [(ngModel)]=\"viewProperties.enableRightClickEvent\"\n                                        text=\"Enable Right Click\"></dx-check-box>\n                                </div>\n                            </div>\n                            <div class=\"w-full p-2\" *ngIf=\"viewProperties.enableClickEvent\">\n\n                                <div class=\"flex flex-col flex-auto min-w-0 my-2\">\n                                    <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Event\n                                        Type\n                                        Option\n                                    </div>\n                                    <div class=\"w-full p-3 border-x border-b \">\n                                        <div class=\"flex flex-row\">\n                                            <div class=\"w-full\">\n                                                <div class=\"text-md mb-2\"> Event Type</div>\n                                            </div>\n                                            <div class=\"w-full\">\n                                                <dx-select-box\n                                                    [items]=\"['drilldown','sameViewDrilldown','optionalDrillDown','popup','navigateToPage']\"\n                                                    (onValueChanged)=\"getSelectedEventType($event)\"\n                                                    [(ngModel)]=\"viewProperties.clickEventOptions.eventType\"></dx-select-box>\n                                            </div>\n                                        </div>\n                                         <ng-container *ngIf=\"viewProperties.clickEventOptions.eventType == 'popup'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full\">\n                                                    <div class=\"text-md mb-2\"> Associated Views For Popup</div>\n                                                    <dx-tag-box [items]=\"allConfiguredViews\"\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                        valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                        [showSelectionControls]=\"true\"\n                                                        [searchEnabled]=\"true\"></dx-tag-box>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container\n                                            *ngIf=\"viewProperties.clickEventOptions.eventType == 'navigateToPage'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full mx-2\">\n                                                    <div class=\"text-md mb-2\"> Associated Pages</div>\n                                                    <dx-select-box [items]=\"allConfiguredPage\"\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedPage\"\n                                                        valueExpr=\"pageId\" displayExpr=\"pageName\"\n                                                        [searchEnabled]=\"true\"></dx-select-box>\n                                                </div>\n                                                <div class=\"w-full mx-2\">\n                                                    <div class=\"text-md mb-2\"> Associated Params</div>\n                                                    <dx-text-box\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedParams\"></dx-text-box>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container *ngIf=\"viewProperties.clickEventOptions.eventType == 'drilldown'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full\">\n                                                    <div class=\"text-md mb-2\"> Associated Views</div>\n                                                    <dx-tag-box [items]=\"allConfiguredViews\"\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                        valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                        [showSelectionControls]=\"true\"\n                                                        [searchEnabled]=\"true\"></dx-tag-box>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container\n                                            *ngIf=\"viewProperties.clickEventOptions.eventType == 'sameViewDrilldown'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full\">\n                                                    <div class=\"text-md mb-2\"> Associated Views</div>\n                                                    <dx-tag-box [items]=\"allConfiguredViews\"\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                        valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                        [showSelectionControls]=\"true\"\n                                                        [searchEnabled]=\"true\"></dx-tag-box>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container\n                                            *ngIf=\"viewProperties.clickEventOptions.eventType == 'optionalDrillDown'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full\">\n                                                    <ng-container\n                                                        *ngFor=\"let item of optionalDrilDownDataSource;let i = index;\">\n\n                                                        <div class=\"flex flex-row justify-between\">\n                                                            <div class=\"mx-2 w-1/2\">\n                                                                <div class=\"text-md mb-2\"> Associated Views</div>\n                                                                <dx-tag-box [items]=\"allConfiguredViews\"\n                                                                    [(ngModel)]=\"item.viewId\" valueExpr=\"viewId\"\n                                                                    displayExpr=\"viewName\"\n                                                                    [showSelectionControls]=\"true\"\n                                                                    [maxDisplayedTags]=\"2\"\n                                                                    [searchEnabled]=\"true\"></dx-tag-box>\n\n                                                            </div>\n                                                            <div class=\"mx-2 w-1/2\">\n                                                                <div class=\"text-md mb-2\"> Associated Params</div>\n                                                                <dx-text-box\n                                                                    [(ngModel)]=\"item.filterCondition\"></dx-text-box>\n                                                            </div>\n                                                            <div class=\"mx-2\">\n                                                                <button\n                                                                    class=\"{{commonService.btn_danger_sm}} cursor-pointer mt-8\"\n                                                                    (click)=\"deleteAssociatedParams(i)\"><i\n                                                                        class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                                                </button>\n                                                            </div>\n                                                        </div>\n                                                    </ng-container>\n                                                    <div class=\"flex flex-row justify-end mt-4\">\n                                                        <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\"\n                                                            (click)=\"addAssociatedParams()\">Add\n                                                            Params</button>\n                                                    </div>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <button class=\"{{commonService.btn_light_md}} cursor-pointer mt-4\"\n                                            (click)=\"resetViewProprstise()\">Reset All Event</button>\n                                    </div>\n                                </div>\n\n                            </div>\n                        </ng-container>\n                    </div>\n                </div>\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"chartAccess == 'multy'\">\n            <div class=\"mb-4 border-b border-gray-200 dark:border-gray-700\">\n                <ul class=\"flex flex-wrap -mb-px text-sm font-medium text-center\" role=\"tablist\">\n                    <li class=\"me-2\" role=\"presentation\">\n                        <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'basic',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'basic'\n                            }\" (click)=\"setActiveTab('basic')\" type=\"button\" role=\"tab\">\n                            Basic\n                        </button>\n                    </li>\n                    <li class=\"me-2\" role=\"presentation\">\n                        <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'columns',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'columns'\n                            }\" (click)=\"setActiveTab('columns')\" type=\"button\" role=\"tab\">\n                            Columns\n                        </button>\n                    </li>\n                    <li class=\"me-2\" role=\"presentation\">\n                        <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'properties',\n                                'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'properties'\n                            }\" (click)=\"setActiveTab('properties')\" type=\"button\" role=\"tab\">\n                            Properties\n                        </button>\n                    </li>\n                </ul>\n            </div>\n\n            <div id=\"default-styled-tab-content\">\n                <div *ngIf=\"activeTab === 'basic'\">\n                    <div class=\"flex flex-col flex-auto min-w-0\">\n                        <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Filter Title\n                            Config\n                        </div>\n                        <div class=\"pt-2 border-x border-b \">\n                            <div class=\"my-2 flex justify-between\">\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Title</div>\n                                    <dx-text-box\n                                        [(ngModel)]=\"mainChartCourceObject.kpiConfig.commonConfig.title\"></dx-text-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-1\"> Data Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"mainChartCourceObject.kpiConfig.commonConfig.dataField\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-2\"> Display Format </div>\n                                    <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                        [(ngModel)]=\"mainChartCourceObject.kpiConfig.formate\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-1 w-full\">\n                                    <div class=\"text-md mb-2\"> Key To Pass </div>\n                                    <dx-tag-box [items]=\"configColume\"\n                                        [(ngModel)]=\"mainChartCourceObject.kpiConfig.keyToPass\"></dx-tag-box>\n                                </div>\n\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"flex flex-wrap justify-between my-2\">\n                        <div class=\"w-1/3 px-2\">\n                            <div class=\"text-md mb-1\">Legend Horizontal Alignment</div>\n                            <dx-select-box [searchEnabled]=\"true\" [items]=\"['right','left','center']\" [value]=\"'center'\"\n                                [(ngModel)]=\"chartConfig.horizontalAlignment\"></dx-select-box>\n\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> legent Vertical Alignment</div>\n                            <dx-select-box [searchEnabled]=\"true\" [items]=\"['top','bottom']\" [value]=\"'bottom'\"\n                                [(ngModel)]=\"chartConfig.verticalAlignment\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1 mt-8\"></div>\n                            <dx-check-box [(ngModel)]=\"chartConfig.legendDisplay\" text=\"Legend Display\"></dx-check-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Argument Field</div>\n                            <dx-select-box [items]=\"configColume\"\n                                [(ngModel)]=\"chartConfig.argumentField\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Size</div>\n                            <dx-text-box [(ngModel)]=\"chartConfig.size\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-1\"> Caption</div>\n                            <dx-text-box [(ngModel)]=\"chartConfig.caption\"></dx-text-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2\"> Display Format </div>\n                            <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                [(ngModel)]=\"mainChartCourceObject.kpiConfig.formate\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2\"> Date Format </div>\n                            <dx-select-box [items]=\"['MM-DD','YYYY-MM-DD']\"\n                                [(ngModel)]=\"mainChartCourceObject.kpiConfig.displayDateFormat\"></dx-select-box>\n                        </div>\n                        <div class=\"w-1/3 px-2 mt-2\">\n                            <div class=\"text-md mb-2 mt-6\"> </div>\n                            <dx-check-box [(ngModel)]=\"mainChartCourceObject.kpiConfig.descendingOrder\"\n                                text=\"Descending Order\"></dx-check-box>\n                        </div>\n                    </div>\n                </div>\n                <div *ngIf=\"activeTab === 'columns'\">\n                    <dx-scroll-view class=\"h-full\" [width]=\"'100%'\" [height]=\"'100%'\">\n                        <div class=\" border-x border-b \">\n                            <div class=\"py-1 flex flex-wrap border-b\"\n                                *ngFor=\"let item of chartConfig.chart_config; let i = index;\">\n\n                                <div class=\"px-2 mb-1 w-1/3\">\n                                    <div class=\"text-md mb-2\"> Type</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"chartTypeSource\" [value]=\"'spline'\"\n                                        [(ngModel)]=\"item.type\"></dx-select-box>\n                                </div>\n                                <div class=\"px-2 mb-1 w-1/3\">\n                                    <div class=\"text-md mb-1\"> Value Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"item.valueField\"></dx-select-box>\n                                </div>\n\n                                <div class=\"px-2 mb-1 w-1/3\">\n                                    <div class=\"text-md mb-1\"> Axis</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"item.axis\"></dx-select-box>\n                                </div>\n                                <div class=\" px-2 mb-1 w-1/4\">\n                                    <div class=\"text-md mb-1\"> Position</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"['right','left']\"\n                                        [(ngModel)]=\"item.position\"></dx-select-box>\n                                </div>\n                                <div class=\"px-2 mb-1 w-1/4\">\n                                    <div class=\"text-md mb-1\"> Name</div>\n                                    <dx-text-box [(ngModel)]=\"item.name\"></dx-text-box>\n                                </div>\n                                <div class=\"px-2 mb-1 w-1/4\">\n                                    <div class=\"text-md mb-2\"> Color</div>\n                                    <dx-color-box [(ngModel)]=\"item.color\"></dx-color-box>\n                                </div>\n                                <div class=\"text-center my-1 w-1/4\">\n                                    <button *ngIf=\"i !== 0\" class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItem(i, 'up')\">\n                                        <i class=\"fa fa-arrow-up\" aria-hidden=\"true\"></i>\n                                    </button>\n                                    <button *ngIf=\"i !== chartConfig.chart_config.length - 1\"\n                                        class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItem(i, 'down')\">\n                                        <i class=\"fa fa-arrow-down\" aria-hidden=\"true\"></i>\n                                    </button>\n\n                                    <button class=\"{{commonService.btn_danger_sm}} cursor-pointer\"\n                                        (click)=\"deleteColumns(i)\"><i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                    </button>\n                                </div>\n                            </div>\n                            <div class=\"flex flex-row justify-end my-2\">\n                                <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\"\n                                    (click)=\"addColumns()\">Add\n                                    Columns</button>\n                            </div>\n                        </div>\n                    </dx-scroll-view>\n                </div>\n                <div *ngIf=\"activeTab === 'properties'\">\n                    <div class=\"h-full overflow-x-auto\">\n                        <app-loader *ngIf=\"isLoader\"></app-loader>\n                        <ng-container *ngIf=\"!isLoader\">\n                            <div class=\"flex flex-row justify-between border-b py-3\">\n                                <div class=\"mx-2\">\n                                    <dx-check-box [value]=\"viewProperties.enableClickEvent\"\n                                        [(ngModel)]=\"viewProperties.enableClickEvent\"\n                                        text=\"Enable Click Event\"></dx-check-box>\n                                </div>\n                                <div class=\"mx-2\">\n                                    <dx-check-box [value]=\"viewProperties.enableRightClickEvent\"\n                                        [(ngModel)]=\"viewProperties.enableRightClickEvent\"\n                                        text=\"Enable Right Click\"></dx-check-box>\n                                </div>\n                            </div>\n                            <div class=\"w-full p-2\" *ngIf=\"viewProperties.enableClickEvent\">\n\n                                <div class=\"flex flex-col flex-auto min-w-0 my-2\">\n                                    <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Event\n                                        Type\n                                        Option\n                                    </div>\n                                    <div class=\"w-full p-3 border-x border-b \">\n                                        <div class=\"flex flex-row\">\n                                            <div class=\"w-full\">\n                                                <div class=\"text-md mb-2\"> Event Type</div>\n                                            </div>\n                                            <div class=\"w-full\">\n                                                <dx-select-box\n                                                    [items]=\"['drilldown','sameViewDrilldown','optionalDrillDown','popup','navigateToPage']\"\n                                                    (onValueChanged)=\"getSelectedEventType($event)\"\n                                                    [(ngModel)]=\"viewProperties.clickEventOptions.eventType\"></dx-select-box>\n                                            </div>\n                                        </div>\n                                        <ng-container\n                                            *ngIf=\"viewProperties.clickEventOptions.eventType == 'navigateToPage'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full mx-2\">\n                                                    <div class=\"text-md mb-2\"> Associated Pages</div>\n                                                    <dx-select-box [items]=\"allConfiguredPage\"\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedPage\"\n                                                        valueExpr=\"pageId\" displayExpr=\"pageName\"\n                                                        [searchEnabled]=\"true\"></dx-select-box>\n                                                </div>\n                                                <div class=\"w-full mx-2\">\n                                                    <div class=\"text-md mb-2\"> Associated Params</div>\n                                                    <dx-text-box\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedParams\"></dx-text-box>\n\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container *ngIf=\"viewProperties.clickEventOptions.eventType == 'drilldown'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full\">\n                                                    <div class=\"text-md mb-2\"> Associated Views</div>\n                                                    <dx-tag-box [items]=\"allConfiguredViews\"\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                        valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                        [showSelectionControls]=\"true\"\n                                                        [searchEnabled]=\"true\"></dx-tag-box>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container *ngIf=\"viewProperties.clickEventOptions.eventType == 'popup'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full\">\n                                                    <div class=\"text-md mb-2\"> Associated Views For Popup</div>\n                                                    <dx-tag-box [items]=\"allConfiguredViews\"\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                        valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                        [showSelectionControls]=\"true\"\n                                                        [searchEnabled]=\"true\"></dx-tag-box>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container\n                                            *ngIf=\"viewProperties.clickEventOptions.eventType == 'sameViewDrilldown'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full\">\n                                                    <div class=\"text-md mb-2\"> Associated Views</div>\n                                                    <dx-tag-box [items]=\"allConfiguredViews\"\n                                                        [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                        valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                        [showSelectionControls]=\"true\"\n                                                        [searchEnabled]=\"true\"></dx-tag-box>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <ng-container\n                                            *ngIf=\"viewProperties.clickEventOptions.eventType == 'optionalDrillDown'\">\n                                            <div class=\"flex flex-row justify-between mt-3\">\n                                                <div class=\"w-full\">\n                                                    <ng-container\n                                                        *ngFor=\"let item of optionalDrilDownDataSource;let i = index;\">\n\n                                                        <div class=\"flex flex-row justify-between\">\n                                                            <div class=\"mx-2 w-1/2\">\n                                                                <div class=\"text-md mb-2\"> Associated Views</div>\n                                                                <dx-tag-box [items]=\"allConfiguredViews\"\n                                                                    [(ngModel)]=\"item.viewId\" valueExpr=\"viewId\"\n                                                                    displayExpr=\"viewName\"\n                                                                    [showSelectionControls]=\"true\"\n                                                                    [maxDisplayedTags]=\"2\"\n                                                                    [searchEnabled]=\"true\"></dx-tag-box>\n\n                                                            </div>\n                                                            <div class=\"mx-2 w-1/2\">\n                                                                <div class=\"text-md mb-2\"> Associated Params</div>\n                                                                <dx-text-box\n                                                                    [(ngModel)]=\"item.filterCondition\"></dx-text-box>\n                                                            </div>\n                                                            <div class=\"mx-2\">\n                                                                <button\n                                                                    class=\"{{commonService.btn_danger_sm}} cursor-pointer mt-8\"\n                                                                    (click)=\"deleteAssociatedParams(i)\"><i\n                                                                        class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                                                </button>\n                                                            </div>\n                                                        </div>\n                                                    </ng-container>\n                                                    <div class=\"flex flex-row justify-end mt-4\">\n                                                        <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\"\n                                                            (click)=\"addAssociatedParams()\">Add\n                                                            Params</button>\n                                                    </div>\n                                                </div>\n                                            </div>\n                                        </ng-container>\n                                        <button class=\"{{commonService.btn_light_md}} cursor-pointer mt-4\"\n                                            (click)=\"resetViewProprstise()\">Reset All Event</button>\n                                    </div>\n                                </div>\n\n                            </div>\n                        </ng-container>\n                    </div>\n                </div>\n            </div>\n        </ng-container>\n\n\n    </div>\n\n</div>\n\n<div class=\"flex flex-row border-t pl-3\">\n    <div class=\"flex justify-start mx-1\">\n        <button class=\"{{commonService.btn_warning_md}} cursor-pointer mt-2\" (click)=\"isJsonPreview = true\">\n            Preview</button>\n        <button class=\"{{commonService.btn_primary_md}} cursor-pointer mt-2\" (click)=\"isJsonPreview = false\">Data\n            Preview</button>\n    </div>\n    <div class=\"flex justify-end mx-1 flex-grow\">\n        <button class=\"{{commonService.btn_success_md}} cursor-pointer mt-2\"\n            (click)=\"getSaveChartConfig()\">Submit</button>\n    </div>\n</div>" }]
         }], ctorParameters: function () { return [{ type: CommonService }, { type: ApplicationContentService }, { type: i3$1.ToastrService }]; }, propDecorators: { getChartConfigOutPut: [{
                 type: Output
             }], chartconfigData: [{
@@ -4919,7 +4974,7 @@ class DashTableComponent {
     }
 }
 DashTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DashTableComponent, deps: [{ token: CommonService }, { token: i0.ChangeDetectorRef }, { token: ApplicationContentService }, { token: i3$1.ToastrService }], target: i0.ɵɵFactoryTarget.Component });
-DashTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DashTableComponent, selector: "app-dash-table", inputs: { chartconfigData: ["datasetmodal", "chartconfigData"] }, outputs: { getTableConfigOutPut: "getTableConfigOutPut" }, ngImport: i0, template: "<div class=\"m-2\">\n    <div class=\"w-full m-2 border-r\">\n        <ng-container *ngIf=\"!isJsonPreview\">\n            <pre><code>{{jsaonDatasource | json}}</code></pre>\n        </ng-container>\n        <ng-container *ngIf=\"isJsonPreview\">\n            <dx-data-grid [columnAutoWidth]=\"true\" [dataSource]=\"dataSourseForTable\" [hoverStateEnabled]=\"true\"\n                [selectedRowKeys]=\"[]\" [showBorders]=\"true\" [showColumnLines]=\"true\" [columns]=\"tableDataConfig.columns\"\n                [showRowLines]=\"true\" id=\"gridContainer\">\n                <dxo-search-panel [highlightCaseSensitive]=\"true\"\n                    [visible]=\"tableDataConfig.searchPanel\"></dxo-search-panel>\n                <dxo-export [enabled]=\"true\" fileName=\"{{tableDataConfig.file_name}}\"\n                    [customizeExcelCell]=\"commonService.customizeExcelCell\"></dxo-export>\n                <dxo-paging [pageSize]=\"5\"></dxo-paging>\n                <!-- <dxo-pager [showInfo]=\"tableDataConfig.pageInfo\" [showPageSizeSelector]=\"true\"\n                    [allowedPageSizes]=\"tableDataConfig.allowedPageSizes\">\n                </dxo-pager> -->\n                <!-- <ng-container *ngFor=\"let item of dataSourseForTable\">\n                    <div *ngFor=\"let key of getObjectKeys(item)\">\n                        <dxi-column dataField=\"{{ key }}\" *ngIf=\"key == 'recordDate'\" sortOrder=\"desc\"></dxi-column>\n                        <dxi-column [sortingMethod]=\"commonService.customValueSorter\" dataField=\"{{ key }}\"\n                            alignment=\"right\"></dxi-column>\n                    </div>\n                </ng-container> -->\n                <ng-container *ngFor=\"let item of tableDataConfig.columns\">\n                    <dxi-column *ngIf=\"item.dataField == 'recordDate'\" dataField=\"{{ item.dataField }}\"\n                        [caption]=\"item.caption\" [visible]=\"item.visible\" sortOrder=\"desc\"></dxi-column>\n                    <dxi-column *ngIf=\"item.dataField !== 'recordDate'\"\n                        [sortingMethod]=\"commonService.customValueSorter\" [caption]=\"item.caption\"\n                        dataField=\"{{ item.dataField }}\" alignment=\"left\" [visible]=\"item.visible\">\n                    </dxi-column>\n                </ng-container>\n            </dx-data-grid>\n        </ng-container>\n    </div>\n    <div class=\"w-full mx-2 border-r\">\n        <div class=\"mb-4 border-b border-gray-200 dark:border-gray-700\">\n            <ul class=\"flex flex-wrap -mb-px text-sm font-medium text-center\" role=\"tablist\">\n                <li class=\"me-2\" role=\"presentation\">\n                    <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                        'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'basic',\n                                        'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'basic'\n                                    }\" (click)=\"setActiveTab('basic')\" type=\"button\" role=\"tab\">\n                        Basic\n                    </button>\n                </li>\n                <li class=\"me-2\" role=\"presentation\">\n                    <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                        'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'columns',\n                                        'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'columns'\n                                    }\" (click)=\"setActiveTab('columns')\" type=\"button\" role=\"tab\">\n                        Columns\n                    </button>\n                </li>\n                <li class=\"me-2\" role=\"presentation\">\n                    <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                        'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'properties',\n                                        'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'properties'\n                                    }\" (click)=\"setActiveTab('properties')\" type=\"button\" role=\"tab\">\n                        Properties\n                    </button>\n                </li>\n\n            </ul>\n        </div>\n\n        <div id=\"default-styled-tab-content\">\n            <div *ngIf=\"activeTab === 'basic'\">\n                <div class=\"flex flex-col flex-auto min-w-0\">\n                    <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Filter Title Config\n                    </div>\n                    <div class=\"pt-2 border-x border-b \">\n                        <div class=\"my-2 flex justify-between\">\n                            <div class=\"px-1 mb-1 w-full\">\n                                <div class=\"text-md mb-1\"> Title</div>\n                                <dx-text-box [(ngModel)]=\"tableDataConfig.commonConfig.title\"></dx-text-box>\n                            </div>\n                            <div class=\"px-1 mb-1 w-full\">\n                                <div class=\"text-md mb-1\"> Data Field</div>\n                                <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                    [(ngModel)]=\"tableDataConfig.commonConfig.dataField\"></dx-select-box>\n                            </div>\n                            <div class=\"px-1 mb-1 w-full\">\n                                <div class=\"text-md mb-2\"> Display Formate </div>\n                                <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                    [(ngModel)]=\"table_columns_config.kpiConfig.formate\"></dx-select-box>\n                            </div>\n                            <div class=\"px-1 mb-1 w-full\">\n                                <div class=\"text-md mb-2\"> Key To Pass </div>\n                                <dx-tag-box [items]=\"configColume\"\n                                    [(ngModel)]=\"table_columns_config.kpiConfig.keyToPass\"></dx-tag-box>\n                            </div>\n                            <!-- <div class=\"px-1 mb-1\">\n                                <div class=\"text-md mb-1\"> Checked Key</div>\n                                <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                    [(ngModel)]=\"tableDataConfig.commonConfig.checkedKey\"></dx-select-box>\n                            </div>\n                            <div class=\"px-4 mt-6\">\n                                <dx-check-box [value]=\"tableDataConfig.commonConfig.isSearchBox\"\n                                    [(ngModel)]=\"tableDataConfig.commonConfig.isSearchBox\"\n                                    text=\"Search Box\"></dx-check-box>\n\n                            </div> -->\n                        </div>\n                    </div>\n                </div>\n                <div class=\"flex flex-col flex-auto min-w-0\">\n                    <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Table Config\n                    </div>\n                    <div class=\"flex flse-row border-x border-b\">\n                        <div class=\"px-1 mb-2 mt-8 w-full\">\n                            <!-- <div class=\"text-md mb-2\"> </div> -->\n                            <dx-check-box [value]=\"tableDataConfig.searchPanel\"\n                                [(ngModel)]=\"tableDataConfig.searchPanel\" text=\"Search Panel\"></dx-check-box>\n                        </div>\n                        <div class=\" px-1 mb-2 w-full\">\n                            <div class=\"text-md mb-2\">Sort By</div>\n                            <dx-tag-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                [(ngModel)]=\"tableDataConfig.tableSortBy\"></dx-tag-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 w-full\">\n                            <div class=\"text-md mb-2\"> Table Height</div>\n                            <dx-text-box [value]=\"tableDataConfig.tableHeight\"\n                                [(ngModel)]=\"tableDataConfig.tableHeight\"></dx-text-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\n                                                [items]=\"['drilldown','sameViewDrilldown','optionalDrillDown','popup','navigateToPage']\"\n                                                (onValueChanged)=\"getSelectedEventType($event)\"\n                                                [(ngModel)]=\"viewProperties.clickEventOptions.eventType\"></dx-select-box>\n                                        </div>\n                                    </div>\n                                    <ng-container\n                                        *ngIf=\"viewProperties.clickEventOptions.eventType == 'navigateToPage'\">\n                                        <div class=\"flex flex-row justify-between mt-3\">\n                                            <div class=\"w-full mx-2\">\n                                                <div class=\"text-md mb-2\"> Associated Pages</div>\n                                                <dx-select-box [items]=\"allConfiguredPage\"\n                                                    [(ngModel)]=\"viewProperties.clickEventOptions.associatedPage\"\n                                                    valueExpr=\"pageId\" displayExpr=\"pageName\"\n                                                    [searchEnabled]=\"true\"></dx-select-box>\n                                            </div>\n                                            <div class=\"w-full mx-2\">\n                                                <div class=\"text-md mb-2\"> Associated Params</div>\n                                                <dx-text-box\n                                                    [(ngModel)]=\"viewProperties.clickEventOptions.associatedParams\"></dx-text-box>\n                                            </div>\n                                        </div>\n                                    </ng-container>\n                                    <ng-container *ngIf=\"viewProperties.clickEventOptions.eventType == 'popup'\">\n                                        <div class=\"flex flex-row justify-between mt-3\">\n                                            <div class=\"w-full\">\n                                                <div class=\"text-md mb-2\"> Associated Views For Popup</div>\n                                                <dx-tag-box [items]=\"allConfiguredViews\"\n                                                    [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                    valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                    [showSelectionControls]=\"true\" [searchEnabled]=\"true\"></dx-tag-box>\n                                            </div>\n                                        </div>\n                                    </ng-container>\n                                    <ng-container *ngIf=\"viewProperties.clickEventOptions.eventType == 'drilldown'\">\n                                        <div class=\"flex flex-row justify-between mt-3\">\n                                            <div class=\"w-full\">\n                                                <div class=\"text-md mb-2\"> Associated Views</div>\n                                                <dx-tag-box [items]=\"allConfiguredViews\"\n                                                    [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                    valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                    [showSelectionControls]=\"true\" [searchEnabled]=\"true\"></dx-tag-box>\n                                            </div>\n                                        </div>\n                                    </ng-container>\n                                    <ng-container\n                                        *ngIf=\"viewProperties.clickEventOptions.eventType == 'sameViewDrilldown'\">\n                                        <div class=\"flex flex-row justify-between mt-3\">\n                                            <div class=\"w-full\">\n                                                <div class=\"text-md mb-2\"> Associated Views</div>\n                                                <dx-tag-box [items]=\"allConfiguredViews\"\n                                                    [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                    valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                    [showSelectionControls]=\"true\" [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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.DxoExportComponent, selector: "dxo-export", inputs: ["backgroundColor", "enabled", "fileName", "formats", "margin", "printingEnabled", "proxyUrl", "svgToCanvas", "allowExportSelectedData", "customizeExcelCell", "excelFilterEnabled", "excelWrapTextEnabled", "ignoreExcelErrors", "texts"] }, { kind: "component", type: i5$1.DxCheckBoxComponent, selector: "dx-check-box", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "iconSize", "isValid", "name", "readOnly", "rtlEnabled", "tabIndex", "text", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "visible", "width"], outputs: ["onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconSizeChange", "isValidChange", "nameChange", "readOnlyChange", "rtlEnabledChange", "tabIndexChange", "textChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "component", type: i9.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$2.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: i7.DxTextBoxComponent, selector: "dx-text-box", inputs: ["accessKey", "activeStateEnabled", "buttons", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "label", "labelMode", "mask", "maskChar", "maskInvalidMessage", "maskRules", "maxLength", "mode", "name", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showMaskMode", "spellcheck", "stylingMode", "tabIndex", "text", "useMaskedValue", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOptionChanged", "onPaste", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "labelChange", "labelModeChange", "maskChange", "maskCharChange", "maskInvalidMessageChange", "maskRulesChange", "maxLengthChange", "modeChange", "nameChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showMaskModeChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useMaskedValueChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: LoaderComponent, selector: "app-loader" }, { kind: "pipe", type: i4$1.JsonPipe, name: "json" }] });
+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\">Sort By</div>\n                            <dx-tag-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                [(ngModel)]=\"tableDataConfig.tableSortBy\"></dx-tag-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 w-full\">\n                            <div class=\"text-md mb-2\"> Table Height</div>\n                            <dx-text-box [value]=\"tableDataConfig.tableHeight\"\n                                [(ngModel)]=\"tableDataConfig.tableHeight\"></dx-text-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\n                                                [items]=\"['drilldown','sameViewDrilldown','optionalDrillDown','popup','navigateToPage']\"\n                                                (onValueChanged)=\"getSelectedEventType($event)\"\n                                                [(ngModel)]=\"viewProperties.clickEventOptions.eventType\"></dx-select-box>\n                                        </div>\n                                    </div>\n                                    <ng-container\n                                        *ngIf=\"viewProperties.clickEventOptions.eventType == 'navigateToPage'\">\n                                        <div class=\"flex flex-row justify-between mt-3\">\n                                            <div class=\"w-full mx-2\">\n                                                <div class=\"text-md mb-2\"> Associated Pages</div>\n                                                <dx-select-box [items]=\"allConfiguredPage\"\n                                                    [(ngModel)]=\"viewProperties.clickEventOptions.associatedPage\"\n                                                    valueExpr=\"pageId\" displayExpr=\"pageName\"\n                                                    [searchEnabled]=\"true\"></dx-select-box>\n                                            </div>\n                                            <div class=\"w-full mx-2\">\n                                                <div class=\"text-md mb-2\"> Associated Params</div>\n                                                <dx-text-box\n                                                    [(ngModel)]=\"viewProperties.clickEventOptions.associatedParams\"></dx-text-box>\n                                            </div>\n                                        </div>\n                                    </ng-container>\n                                    <ng-container *ngIf=\"viewProperties.clickEventOptions.eventType == 'popup'\">\n                                        <div class=\"flex flex-row justify-between mt-3\">\n                                            <div class=\"w-full\">\n                                                <div class=\"text-md mb-2\"> Associated Views For Popup</div>\n                                                <dx-tag-box [items]=\"allConfiguredViews\"\n                                                    [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                    valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                    [showSelectionControls]=\"true\" [searchEnabled]=\"true\"></dx-tag-box>\n                                            </div>\n                                        </div>\n                                    </ng-container>\n                                    <ng-container *ngIf=\"viewProperties.clickEventOptions.eventType == 'drilldown'\">\n                                        <div class=\"flex flex-row justify-between mt-3\">\n                                            <div class=\"w-full\">\n                                                <div class=\"text-md mb-2\"> Associated Views</div>\n                                                <dx-tag-box [items]=\"allConfiguredViews\"\n                                                    [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                    valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                    [showSelectionControls]=\"true\" [searchEnabled]=\"true\"></dx-tag-box>\n                                            </div>\n                                        </div>\n                                    </ng-container>\n                                    <ng-container\n                                        *ngIf=\"viewProperties.clickEventOptions.eventType == 'sameViewDrilldown'\">\n                                        <div class=\"flex flex-row justify-between mt-3\">\n                                            <div class=\"w-full\">\n                                                <div class=\"text-md mb-2\"> Associated Views</div>\n                                                <dx-tag-box [items]=\"allConfiguredViews\"\n                                                    [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                    valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                    [showSelectionControls]=\"true\" [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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.DxoExportComponent, selector: "dxo-export", inputs: ["backgroundColor", "enabled", "fileName", "formats", "margin", "printingEnabled", "proxyUrl", "svgToCanvas", "allowExportSelectedData", "customizeExcelCell", "excelFilterEnabled", "excelWrapTextEnabled", "ignoreExcelErrors", "texts"] }, { kind: "component", type: i5$1.DxCheckBoxComponent, selector: "dx-check-box", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "iconSize", "isValid", "name", "readOnly", "rtlEnabled", "tabIndex", "text", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "visible", "width"], outputs: ["onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconSizeChange", "isValidChange", "nameChange", "readOnlyChange", "rtlEnabledChange", "tabIndexChange", "textChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "component", type: i9.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: i7$2.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: i7.DxTextBoxComponent, selector: "dx-text-box", inputs: ["accessKey", "activeStateEnabled", "buttons", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "label", "labelMode", "mask", "maskChar", "maskInvalidMessage", "maskRules", "maxLength", "mode", "name", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showMaskMode", "spellcheck", "stylingMode", "tabIndex", "text", "useMaskedValue", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOptionChanged", "onPaste", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "labelChange", "labelModeChange", "maskChange", "maskCharChange", "maskInvalidMessageChange", "maskRulesChange", "maxLengthChange", "modeChange", "nameChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showMaskModeChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useMaskedValueChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: LoaderComponent, selector: "app-loader" }, { kind: "pipe", type: i4$1.JsonPipe, name: "json" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DashTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-dash-table', template: "<div class=\"m-2\">\n    <div class=\"w-full m-2 border-r\">\n        <ng-container *ngIf=\"!isJsonPreview\">\n            <pre><code>{{jsaonDatasource | json}}</code></pre>\n        </ng-container>\n        <ng-container *ngIf=\"isJsonPreview\">\n            <dx-data-grid [columnAutoWidth]=\"true\" [dataSource]=\"dataSourseForTable\" [hoverStateEnabled]=\"true\"\n                [selectedRowKeys]=\"[]\" [showBorders]=\"true\" [showColumnLines]=\"true\" [columns]=\"tableDataConfig.columns\"\n                [showRowLines]=\"true\" id=\"gridContainer\">\n                <dxo-search-panel [highlightCaseSensitive]=\"true\"\n                    [visible]=\"tableDataConfig.searchPanel\"></dxo-search-panel>\n                <dxo-export [enabled]=\"true\" fileName=\"{{tableDataConfig.file_name}}\"\n                    [customizeExcelCell]=\"commonService.customizeExcelCell\"></dxo-export>\n                <dxo-paging [pageSize]=\"5\"></dxo-paging>\n                <!-- <dxo-pager [showInfo]=\"tableDataConfig.pageInfo\" [showPageSizeSelector]=\"true\"\n                    [allowedPageSizes]=\"tableDataConfig.allowedPageSizes\">\n                </dxo-pager> -->\n                <!-- <ng-container *ngFor=\"let item of dataSourseForTable\">\n                    <div *ngFor=\"let key of getObjectKeys(item)\">\n                        <dxi-column dataField=\"{{ key }}\" *ngIf=\"key == 'recordDate'\" sortOrder=\"desc\"></dxi-column>\n                        <dxi-column [sortingMethod]=\"commonService.customValueSorter\" dataField=\"{{ key }}\"\n                            alignment=\"right\"></dxi-column>\n                    </div>\n                </ng-container> -->\n                <ng-container *ngFor=\"let item of tableDataConfig.columns\">\n                    <dxi-column *ngIf=\"item.dataField == 'recordDate'\" dataField=\"{{ item.dataField }}\"\n                        [caption]=\"item.caption\" [visible]=\"item.visible\" sortOrder=\"desc\"></dxi-column>\n                    <dxi-column *ngIf=\"item.dataField !== 'recordDate'\"\n                        [sortingMethod]=\"commonService.customValueSorter\" [caption]=\"item.caption\"\n                        dataField=\"{{ item.dataField }}\" alignment=\"left\" [visible]=\"item.visible\">\n                    </dxi-column>\n                </ng-container>\n            </dx-data-grid>\n        </ng-container>\n    </div>\n    <div class=\"w-full mx-2 border-r\">\n        <div class=\"mb-4 border-b border-gray-200 dark:border-gray-700\">\n            <ul class=\"flex flex-wrap -mb-px text-sm font-medium text-center\" role=\"tablist\">\n                <li class=\"me-2\" role=\"presentation\">\n                    <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                        'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'basic',\n                                        'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'basic'\n                                    }\" (click)=\"setActiveTab('basic')\" type=\"button\" role=\"tab\">\n                        Basic\n                    </button>\n                </li>\n                <li class=\"me-2\" role=\"presentation\">\n                    <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                        'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'columns',\n                                        'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'columns'\n                                    }\" (click)=\"setActiveTab('columns')\" type=\"button\" role=\"tab\">\n                        Columns\n                    </button>\n                </li>\n                <li class=\"me-2\" role=\"presentation\">\n                    <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                        'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'properties',\n                                        'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'properties'\n                                    }\" (click)=\"setActiveTab('properties')\" type=\"button\" role=\"tab\">\n                        Properties\n                    </button>\n                </li>\n\n            </ul>\n        </div>\n\n        <div id=\"default-styled-tab-content\">\n            <div *ngIf=\"activeTab === 'basic'\">\n                <div class=\"flex flex-col flex-auto min-w-0\">\n                    <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Filter Title Config\n                    </div>\n                    <div class=\"pt-2 border-x border-b \">\n                        <div class=\"my-2 flex justify-between\">\n                            <div class=\"px-1 mb-1 w-full\">\n                                <div class=\"text-md mb-1\"> Title</div>\n                                <dx-text-box [(ngModel)]=\"tableDataConfig.commonConfig.title\"></dx-text-box>\n                            </div>\n                            <div class=\"px-1 mb-1 w-full\">\n                                <div class=\"text-md mb-1\"> Data Field</div>\n                                <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                    [(ngModel)]=\"tableDataConfig.commonConfig.dataField\"></dx-select-box>\n                            </div>\n                            <div class=\"px-1 mb-1 w-full\">\n                                <div class=\"text-md mb-2\"> Display Formate </div>\n                                <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                    [(ngModel)]=\"table_columns_config.kpiConfig.formate\"></dx-select-box>\n                            </div>\n                            <div class=\"px-1 mb-1 w-full\">\n                                <div class=\"text-md mb-2\"> Key To Pass </div>\n                                <dx-tag-box [items]=\"configColume\"\n                                    [(ngModel)]=\"table_columns_config.kpiConfig.keyToPass\"></dx-tag-box>\n                            </div>\n                            <!-- <div class=\"px-1 mb-1\">\n                                <div class=\"text-md mb-1\"> Checked Key</div>\n                                <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                    [(ngModel)]=\"tableDataConfig.commonConfig.checkedKey\"></dx-select-box>\n                            </div>\n                            <div class=\"px-4 mt-6\">\n                                <dx-check-box [value]=\"tableDataConfig.commonConfig.isSearchBox\"\n                                    [(ngModel)]=\"tableDataConfig.commonConfig.isSearchBox\"\n                                    text=\"Search Box\"></dx-check-box>\n\n                            </div> -->\n                        </div>\n                    </div>\n                </div>\n                <div class=\"flex flex-col flex-auto min-w-0\">\n                    <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Table Config\n                    </div>\n                    <div class=\"flex flse-row border-x border-b\">\n                        <div class=\"px-1 mb-2 mt-8 w-full\">\n                            <!-- <div class=\"text-md mb-2\"> </div> -->\n                            <dx-check-box [value]=\"tableDataConfig.searchPanel\"\n                                [(ngModel)]=\"tableDataConfig.searchPanel\" text=\"Search Panel\"></dx-check-box>\n                        </div>\n                        <div class=\" px-1 mb-2 w-full\">\n                            <div class=\"text-md mb-2\">Sort By</div>\n                            <dx-tag-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                [(ngModel)]=\"tableDataConfig.tableSortBy\"></dx-tag-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 w-full\">\n                            <div class=\"text-md mb-2\"> Table Height</div>\n                            <dx-text-box [value]=\"tableDataConfig.tableHeight\"\n                                [(ngModel)]=\"tableDataConfig.tableHeight\"></dx-text-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\n                                                [items]=\"['drilldown','sameViewDrilldown','optionalDrillDown','popup','navigateToPage']\"\n                                                (onValueChanged)=\"getSelectedEventType($event)\"\n                                                [(ngModel)]=\"viewProperties.clickEventOptions.eventType\"></dx-select-box>\n                                        </div>\n                                    </div>\n                                    <ng-container\n                                        *ngIf=\"viewProperties.clickEventOptions.eventType == 'navigateToPage'\">\n                                        <div class=\"flex flex-row justify-between mt-3\">\n                                            <div class=\"w-full mx-2\">\n                                                <div class=\"text-md mb-2\"> Associated Pages</div>\n                                                <dx-select-box [items]=\"allConfiguredPage\"\n                                                    [(ngModel)]=\"viewProperties.clickEventOptions.associatedPage\"\n                                                    valueExpr=\"pageId\" displayExpr=\"pageName\"\n                                                    [searchEnabled]=\"true\"></dx-select-box>\n                                            </div>\n                                            <div class=\"w-full mx-2\">\n                                                <div class=\"text-md mb-2\"> Associated Params</div>\n                                                <dx-text-box\n                                                    [(ngModel)]=\"viewProperties.clickEventOptions.associatedParams\"></dx-text-box>\n                                            </div>\n                                        </div>\n                                    </ng-container>\n                                    <ng-container *ngIf=\"viewProperties.clickEventOptions.eventType == 'popup'\">\n                                        <div class=\"flex flex-row justify-between mt-3\">\n                                            <div class=\"w-full\">\n                                                <div class=\"text-md mb-2\"> Associated Views For Popup</div>\n                                                <dx-tag-box [items]=\"allConfiguredViews\"\n                                                    [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                    valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                    [showSelectionControls]=\"true\" [searchEnabled]=\"true\"></dx-tag-box>\n                                            </div>\n                                        </div>\n                                    </ng-container>\n                                    <ng-container *ngIf=\"viewProperties.clickEventOptions.eventType == 'drilldown'\">\n                                        <div class=\"flex flex-row justify-between mt-3\">\n                                            <div class=\"w-full\">\n                                                <div class=\"text-md mb-2\"> Associated Views</div>\n                                                <dx-tag-box [items]=\"allConfiguredViews\"\n                                                    [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                    valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                    [showSelectionControls]=\"true\" [searchEnabled]=\"true\"></dx-tag-box>\n                                            </div>\n                                        </div>\n                                    </ng-container>\n                                    <ng-container\n                                        *ngIf=\"viewProperties.clickEventOptions.eventType == 'sameViewDrilldown'\">\n                                        <div class=\"flex flex-row justify-between mt-3\">\n                                            <div class=\"w-full\">\n                                                <div class=\"text-md mb-2\"> Associated Views</div>\n                                                <dx-tag-box [items]=\"allConfiguredViews\"\n                                                    [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                    valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                    [showSelectionControls]=\"true\" [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>" }]
@@ -5335,7 +5390,7 @@ class TableWithBarComponent {
     }
 }
 TableWithBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableWithBarComponent, deps: [{ token: CommonService }, { token: i0.ChangeDetectorRef }, { token: ApplicationContentService }, { token: i3$1.ToastrService }], target: i0.ɵɵFactoryTarget.Component });
-TableWithBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TableWithBarComponent, selector: "app-table-with-bar", inputs: { chartconfigData: ["datasetmodal", "chartconfigData"] }, outputs: { createOtherComponentView: "createOtherComponentView" }, ngImport: i0, template: "<div class=\"flex flex-wrap\">\n    <div class=\"w-full mx-2 border-r\">\n        <ng-container *ngIf=\"!isJsonPreview\">\n            <pre><code>{{jsaonDatasource | json}}</code></pre>\n        </ng-container>\n        <ng-container *ngIf=\"isJsonPreview\">\n         <!-- <app-gamma-table-with-percentage [chartDataSource]=\"chartDataSourceForMap\"></app-gamma-table-with-percentage> -->\n         <app-gamma-table-clumn-bar-chart [chartDataSource]=\"chartDataSourceForMap\"></app-gamma-table-clumn-bar-chart>\n\n            <div #dynamicContainer></div>\n\n        </ng-container>\n    </div>\n    <div class=\"w-full mx-2\">\n\n        <div class=\"mb-4 border-b border-gray-200 dark:border-gray-700\">\n            <ul class=\"flex flex-wrap -mb-px text-sm font-medium text-center\" role=\"tablist\">\n                <li class=\"me-2\" role=\"presentation\">\n                    <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{ \n                                        'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'basic',\n                                        'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'basic' \n                                    }\" (click)=\"setActiveTab('basic')\" type=\"button\" role=\"tab\">\n                        Basic\n                    </button>\n                </li>\n                <li class=\"me-2\" role=\"presentation\">\n                    <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{ \n                                        'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === '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 my-2\">\n                    <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Filter Title\n                        Config\n                    </div>\n                    <div class=\"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\">\n                                <div class=\"text-md mb-1\"> Checked Key</div>\n                                <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                    [(ngModel)]=\"tableDataConfig.commonConfig.dataField\"></dx-select-box>\n                            </div> -->\n                            <!-- <div class=\"px-4 mt-6 w-full\">\n                                <dx-check-box [value]=\"tableDataConfig.commonConfig.isSearchBox\"\n                                    [(ngModel)]=\"tableDataConfig.commonConfig.isSearchBox\"\n                                    text=\"Search Box\"></dx-check-box>\n\n                            </div> -->\n                            <div class=\"px-1 mb-1 w-full\">\n                                <div class=\"text-md mb-2\"> Display Formate </div>\n                                <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                    [(ngModel)]=\"table_columns_config.kpiConfig.formate\"\n                                    [readOnly]=\"false\"></dx-select-box>\n                            </div>\n                            <div class=\"px-1 mb-1 w-full\">\n                                <div class=\"text-md mb-2\"> Key To Pass </div>\n                                <dx-tag-box [items]=\"configColume\"\n                                    [(ngModel)]=\"table_columns_config.kpiConfig.keyToPass\"></dx-tag-box>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"flex flex-col flex-auto min-w-0 my-2\">\n                    <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Table Config\n                    </div>\n                    <div class=\"flex flse-row py-3 border-x border-b \">\n                        <div class=\"px-1 mb-2 mt-8 w-full\">\n                            <dx-check-box [value]=\"tableDataConfig.searchPanel\"\n                                [(ngModel)]=\"tableDataConfig.searchPanel\" text=\"Search Panel\"></dx-check-box>\n                        </div>\n                        <div class=\" px-1 mb-2 w-full\">\n                            <div class=\"text-md mb-2\">File Name</div>\n                            <dx-text-box [(ngModel)]=\"tableDataConfig.file_name\"></dx-text-box>\n                        </div>\n                        <div class=\"px-1 mb-2 w-full\">\n                            <div class=\"text-md mb-2\"> Number Of Row</div>\n                            <dx-number-box [value]=\"tableDataConfig.numberOfRow\"\n                                [(ngModel)]=\"tableDataConfig.numberOfRow\"></dx-number-box>\n                        </div>\n                        <div class=\"px-1 mb-2 w-full\">\n                            <div class=\"text-md mb-2\"> Table Height</div>\n                            <dx-text-box [value]=\"tableDataConfig.tableHeight\"\n                                [(ngModel)]=\"tableDataConfig.tableHeight\"></dx-text-box>\n                        </div>\n                        <div class=\"px-1 mb-2 mt-8 w-full\">\n                            <dx-check-box [value]=\"tableDataConfig.pageInfo\" [(ngModel)]=\"tableDataConfig.pageInfo\"\n                                text=\"Page Info\"></dx-check-box>\n                        </div>\n\n                    </div>\n\n                </div>\n\n\n            </div>\n            <div *ngIf=\"activeTab === '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\n                                <div class=\"px-1 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\"> Value Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"item.dataField\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\"> Caption</div>\n                                    <dx-text-box [(ngModel)]=\"item.caption\"></dx-text-box>\n                                </div>\n                                <div class=\"px-2 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\"> UI Function</div>\n                                    <dx-select-box [items]=\"enrichNameList\" [(ngModel)]=\"item.enrichName\"\n                                        [searchEnabled]=\"true\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-2 mt-6 w-full\">\n                                    <dx-check-box [value]=\"item.isShowBar\" [(ngModel)]=\"item.isShowBar\"\n                                        text=\"Allow Bar\"></dx-check-box>\n                                </div>\n\n                                <div class=\"px-1 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\">Color</div>\n                                    <dx-color-box [(ngModel)]=\"item.color\"></dx-color-box>\n                                </div>\n                                <div class=\"text-center mt-8 w-full\">\n                                    <button *ngIf=\"i !== 0\" class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItemForColumns(i, 'up')\">\n                                        <i class=\"fa fa-arrow-up\" aria-hidden=\"true\"></i>\n                                    </button>\n\n                                    <button *ngIf=\"i !== tableDataConfig.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<div class=\"flex flex-row border-t pl-3\">\n    <div class=\"flex justify-start mx-1\">\n        <button class=\"{{commonService.btn_warning_md}} cursor-pointer mt-2\" (click)=\"viewMapForTest()\">\n            Preview</button>\n        <button class=\"{{commonService.btn_primary_md}} cursor-pointer mt-2\" (click)=\"isJsonPreview = false\">Data\n            Preview</button>\n    </div>\n    <div class=\"flex justify-end mx-1 flex-grow\">\n        <button class=\"{{commonService.btn_success_md}} cursor-pointer mt-2\"\n            (click)=\"getSaveChartConfig()\">Submit</button>\n    </div>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5$1.DxCheckBoxComponent, selector: "dx-check-box", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "iconSize", "isValid", "name", "readOnly", "rtlEnabled", "tabIndex", "text", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "visible", "width"], outputs: ["onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconSizeChange", "isValidChange", "nameChange", "readOnlyChange", "rtlEnabledChange", "tabIndexChange", "textChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "component", type: i6$2.DxColorBoxComponent, selector: "dx-color-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "applyButtonText", "applyValueMode", "buttons", "cancelButtonText", "deferRendering", "disabled", "dropDownButtonTemplate", "dropDownOptions", "editAlphaChannel", "elementAttr", "fieldTemplate", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "keyStep", "label", "labelMode", "name", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showDropDownButton", "stylingMode", "tabIndex", "text", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "visible", "width"], outputs: ["onChange", "onClosed", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOpened", "onOptionChanged", "onPaste", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "applyButtonTextChange", "applyValueModeChange", "buttonsChange", "cancelButtonTextChange", "deferRenderingChange", "disabledChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "editAlphaChannelChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "keyStepChange", "labelChange", "labelModeChange", "nameChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showDropDownButtonChange", "stylingModeChange", "tabIndexChange", "textChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "component", type: i8$2.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: i7.DxTextBoxComponent, selector: "dx-text-box", inputs: ["accessKey", "activeStateEnabled", "buttons", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "label", "labelMode", "mask", "maskChar", "maskInvalidMessage", "maskRules", "maxLength", "mode", "name", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showMaskMode", "spellcheck", "stylingMode", "tabIndex", "text", "useMaskedValue", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOptionChanged", "onPaste", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "labelChange", "labelModeChange", "maskChange", "maskCharChange", "maskInvalidMessageChange", "maskRulesChange", "maxLengthChange", "modeChange", "nameChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showMaskModeChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useMaskedValueChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: LoaderComponent, selector: "app-loader" }, { kind: "component", type: GammaTableClumnBarChartComponent, selector: "app-gamma-table-clumn-bar-chart", inputs: ["rightClickEnable", "chartDataSource"], outputs: ["getTableConfigOutPut", "oRowClick", "onrightClickContextSelection"] }, { kind: "pipe", type: i4$1.JsonPipe, name: "json" }] });
+TableWithBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TableWithBarComponent, selector: "app-table-with-bar", inputs: { chartconfigData: ["datasetmodal", "chartconfigData"] }, outputs: { createOtherComponentView: "createOtherComponentView" }, ngImport: i0, template: "<div class=\"flex flex-wrap\">\n    <div class=\"w-full mx-2 border-r\">\n        <ng-container *ngIf=\"!isJsonPreview\">\n            <pre><code>{{jsaonDatasource | json}}</code></pre>\n        </ng-container>\n        <ng-container *ngIf=\"isJsonPreview\">\n         <!-- <app-gamma-table-with-percentage [chartDataSource]=\"chartDataSourceForMap\"></app-gamma-table-with-percentage> -->\n         <app-gamma-table-clumn-bar-chart [chartDataSource]=\"chartDataSourceForMap\"></app-gamma-table-clumn-bar-chart>\n\n            <div #dynamicContainer></div>\n\n        </ng-container>\n    </div>\n    <div class=\"w-full mx-2\">\n\n        <div class=\"mb-4 border-b border-gray-200 dark:border-gray-700\">\n            <ul class=\"flex flex-wrap -mb-px text-sm font-medium text-center\" role=\"tablist\">\n                <li class=\"me-2\" role=\"presentation\">\n                    <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{ \n                                        'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'basic',\n                                        'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'basic' \n                                    }\" (click)=\"setActiveTab('basic')\" type=\"button\" role=\"tab\">\n                        Basic\n                    </button>\n                </li>\n                <li class=\"me-2\" role=\"presentation\">\n                    <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{ \n                                        'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === '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 my-2\">\n                    <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Filter Title\n                        Config\n                    </div>\n                    <div class=\"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\">\n                                <div class=\"text-md mb-1\"> Checked Key</div>\n                                <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                    [(ngModel)]=\"tableDataConfig.commonConfig.dataField\"></dx-select-box>\n                            </div> -->\n                            <!-- <div class=\"px-4 mt-6 w-full\">\n                                <dx-check-box [value]=\"tableDataConfig.commonConfig.isSearchBox\"\n                                    [(ngModel)]=\"tableDataConfig.commonConfig.isSearchBox\"\n                                    text=\"Search Box\"></dx-check-box>\n\n                            </div> -->\n                            <div class=\"px-1 mb-1 w-full\">\n                                <div class=\"text-md mb-2\"> Display Formate </div>\n                                <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                    [(ngModel)]=\"table_columns_config.kpiConfig.formate\"\n                                    [readOnly]=\"false\"></dx-select-box>\n                            </div>\n                            <div class=\"px-1 mb-1 w-full\">\n                                <div class=\"text-md mb-2\"> Key To Pass </div>\n                                <dx-tag-box [items]=\"configColume\"\n                                    [(ngModel)]=\"table_columns_config.kpiConfig.keyToPass\"></dx-tag-box>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"flex flex-col flex-auto min-w-0 my-2\">\n                    <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Table Config\n                    </div>\n                    <div class=\"flex flse-row py-3 border-x border-b \">\n                        <div class=\"px-1 mb-2 mt-8 w-full\">\n                            <dx-check-box [value]=\"tableDataConfig.searchPanel\"\n                                [(ngModel)]=\"tableDataConfig.searchPanel\" text=\"Search Panel\"></dx-check-box>\n                        </div>\n                        <div class=\" px-1 mb-2 w-full\">\n                            <div class=\"text-md mb-2\">File Name</div>\n                            <dx-text-box [(ngModel)]=\"tableDataConfig.file_name\"></dx-text-box>\n                        </div>\n                        <div class=\"px-1 mb-2 w-full\">\n                            <div class=\"text-md mb-2\"> Number Of Row</div>\n                            <dx-number-box [value]=\"tableDataConfig.numberOfRow\"\n                                [(ngModel)]=\"tableDataConfig.numberOfRow\"></dx-number-box>\n                        </div>\n                        <div class=\"px-1 mb-2 w-full\">\n                            <div class=\"text-md mb-2\"> Table Height</div>\n                            <dx-text-box [value]=\"tableDataConfig.tableHeight\"\n                                [(ngModel)]=\"tableDataConfig.tableHeight\"></dx-text-box>\n                        </div>\n                        <div class=\"px-1 mb-2 mt-8 w-full\">\n                            <dx-check-box [value]=\"tableDataConfig.pageInfo\" [(ngModel)]=\"tableDataConfig.pageInfo\"\n                                text=\"Page Info\"></dx-check-box>\n                        </div>\n\n                    </div>\n\n                </div>\n\n\n            </div>\n            <div *ngIf=\"activeTab === '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\n                                <div class=\"px-1 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\"> Value Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"item.dataField\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\"> Caption</div>\n                                    <dx-text-box [(ngModel)]=\"item.caption\"></dx-text-box>\n                                </div>\n                                <div class=\"px-2 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\"> UI Function</div>\n                                    <dx-select-box [items]=\"enrichNameList\" [(ngModel)]=\"item.enrichName\"\n                                        [searchEnabled]=\"true\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-2 mt-6 w-full\">\n                                    <dx-check-box [value]=\"item.isShowBar\" [(ngModel)]=\"item.isShowBar\"\n                                        text=\"Allow Bar\"></dx-check-box>\n                                </div>\n\n                                <div class=\"px-1 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\">Color</div>\n                                    <dx-color-box [(ngModel)]=\"item.color\"></dx-color-box>\n                                </div>\n                                <div class=\"text-center mt-8 w-full\">\n                                    <button *ngIf=\"i !== 0\" class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItemForColumns(i, 'up')\">\n                                        <i class=\"fa fa-arrow-up\" aria-hidden=\"true\"></i>\n                                    </button>\n\n                                    <button *ngIf=\"i !== tableDataConfig.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<div class=\"flex flex-row border-t pl-3\">\n    <div class=\"flex justify-start mx-1\">\n        <button class=\"{{commonService.btn_warning_md}} cursor-pointer mt-2\" (click)=\"viewMapForTest()\">\n            Preview</button>\n        <button class=\"{{commonService.btn_primary_md}} cursor-pointer mt-2\" (click)=\"isJsonPreview = false\">Data\n            Preview</button>\n    </div>\n    <div class=\"flex justify-end mx-1 flex-grow\">\n        <button class=\"{{commonService.btn_success_md}} cursor-pointer mt-2\"\n            (click)=\"getSaveChartConfig()\">Submit</button>\n    </div>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5$1.DxCheckBoxComponent, selector: "dx-check-box", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "iconSize", "isValid", "name", "readOnly", "rtlEnabled", "tabIndex", "text", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "visible", "width"], outputs: ["onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconSizeChange", "isValidChange", "nameChange", "readOnlyChange", "rtlEnabledChange", "tabIndexChange", "textChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "component", type: i6$2.DxColorBoxComponent, selector: "dx-color-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "applyButtonText", "applyValueMode", "buttons", "cancelButtonText", "deferRendering", "disabled", "dropDownButtonTemplate", "dropDownOptions", "editAlphaChannel", "elementAttr", "fieldTemplate", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "keyStep", "label", "labelMode", "name", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showDropDownButton", "stylingMode", "tabIndex", "text", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "visible", "width"], outputs: ["onChange", "onClosed", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOpened", "onOptionChanged", "onPaste", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "applyButtonTextChange", "applyValueModeChange", "buttonsChange", "cancelButtonTextChange", "deferRenderingChange", "disabledChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "editAlphaChannelChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "keyStepChange", "labelChange", "labelModeChange", "nameChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showDropDownButtonChange", "stylingModeChange", "tabIndexChange", "textChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "component", type: i7$2.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: i7.DxTextBoxComponent, selector: "dx-text-box", inputs: ["accessKey", "activeStateEnabled", "buttons", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "label", "labelMode", "mask", "maskChar", "maskInvalidMessage", "maskRules", "maxLength", "mode", "name", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showMaskMode", "spellcheck", "stylingMode", "tabIndex", "text", "useMaskedValue", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOptionChanged", "onPaste", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "labelChange", "labelModeChange", "maskChange", "maskCharChange", "maskInvalidMessageChange", "maskRulesChange", "maxLengthChange", "modeChange", "nameChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showMaskModeChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useMaskedValueChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: LoaderComponent, selector: "app-loader" }, { kind: "component", type: GammaTableClumnBarChartComponent, selector: "app-gamma-table-clumn-bar-chart", inputs: ["rightClickEnable", "chartDataSource"], outputs: ["getTableConfigOutPut", "oRowClick", "onrightClickContextSelection"] }, { kind: "pipe", type: i4$1.JsonPipe, name: "json" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableWithBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-table-with-bar', template: "<div class=\"flex flex-wrap\">\n    <div class=\"w-full mx-2 border-r\">\n        <ng-container *ngIf=\"!isJsonPreview\">\n            <pre><code>{{jsaonDatasource | json}}</code></pre>\n        </ng-container>\n        <ng-container *ngIf=\"isJsonPreview\">\n         <!-- <app-gamma-table-with-percentage [chartDataSource]=\"chartDataSourceForMap\"></app-gamma-table-with-percentage> -->\n         <app-gamma-table-clumn-bar-chart [chartDataSource]=\"chartDataSourceForMap\"></app-gamma-table-clumn-bar-chart>\n\n            <div #dynamicContainer></div>\n\n        </ng-container>\n    </div>\n    <div class=\"w-full mx-2\">\n\n        <div class=\"mb-4 border-b border-gray-200 dark:border-gray-700\">\n            <ul class=\"flex flex-wrap -mb-px text-sm font-medium text-center\" role=\"tablist\">\n                <li class=\"me-2\" role=\"presentation\">\n                    <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{ \n                                        'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'basic',\n                                        'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'basic' \n                                    }\" (click)=\"setActiveTab('basic')\" type=\"button\" role=\"tab\">\n                        Basic\n                    </button>\n                </li>\n                <li class=\"me-2\" role=\"presentation\">\n                    <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{ \n                                        'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === '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 my-2\">\n                    <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Filter Title\n                        Config\n                    </div>\n                    <div class=\"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\">\n                                <div class=\"text-md mb-1\"> Checked Key</div>\n                                <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                    [(ngModel)]=\"tableDataConfig.commonConfig.dataField\"></dx-select-box>\n                            </div> -->\n                            <!-- <div class=\"px-4 mt-6 w-full\">\n                                <dx-check-box [value]=\"tableDataConfig.commonConfig.isSearchBox\"\n                                    [(ngModel)]=\"tableDataConfig.commonConfig.isSearchBox\"\n                                    text=\"Search Box\"></dx-check-box>\n\n                            </div> -->\n                            <div class=\"px-1 mb-1 w-full\">\n                                <div class=\"text-md mb-2\"> Display Formate </div>\n                                <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                    [(ngModel)]=\"table_columns_config.kpiConfig.formate\"\n                                    [readOnly]=\"false\"></dx-select-box>\n                            </div>\n                            <div class=\"px-1 mb-1 w-full\">\n                                <div class=\"text-md mb-2\"> Key To Pass </div>\n                                <dx-tag-box [items]=\"configColume\"\n                                    [(ngModel)]=\"table_columns_config.kpiConfig.keyToPass\"></dx-tag-box>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"flex flex-col flex-auto min-w-0 my-2\">\n                    <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Table Config\n                    </div>\n                    <div class=\"flex flse-row py-3 border-x border-b \">\n                        <div class=\"px-1 mb-2 mt-8 w-full\">\n                            <dx-check-box [value]=\"tableDataConfig.searchPanel\"\n                                [(ngModel)]=\"tableDataConfig.searchPanel\" text=\"Search Panel\"></dx-check-box>\n                        </div>\n                        <div class=\" px-1 mb-2 w-full\">\n                            <div class=\"text-md mb-2\">File Name</div>\n                            <dx-text-box [(ngModel)]=\"tableDataConfig.file_name\"></dx-text-box>\n                        </div>\n                        <div class=\"px-1 mb-2 w-full\">\n                            <div class=\"text-md mb-2\"> Number Of Row</div>\n                            <dx-number-box [value]=\"tableDataConfig.numberOfRow\"\n                                [(ngModel)]=\"tableDataConfig.numberOfRow\"></dx-number-box>\n                        </div>\n                        <div class=\"px-1 mb-2 w-full\">\n                            <div class=\"text-md mb-2\"> Table Height</div>\n                            <dx-text-box [value]=\"tableDataConfig.tableHeight\"\n                                [(ngModel)]=\"tableDataConfig.tableHeight\"></dx-text-box>\n                        </div>\n                        <div class=\"px-1 mb-2 mt-8 w-full\">\n                            <dx-check-box [value]=\"tableDataConfig.pageInfo\" [(ngModel)]=\"tableDataConfig.pageInfo\"\n                                text=\"Page Info\"></dx-check-box>\n                        </div>\n\n                    </div>\n\n                </div>\n\n\n            </div>\n            <div *ngIf=\"activeTab === '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\n                                <div class=\"px-1 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\"> Value Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"item.dataField\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\"> Caption</div>\n                                    <dx-text-box [(ngModel)]=\"item.caption\"></dx-text-box>\n                                </div>\n                                <div class=\"px-2 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\"> UI Function</div>\n                                    <dx-select-box [items]=\"enrichNameList\" [(ngModel)]=\"item.enrichName\"\n                                        [searchEnabled]=\"true\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-2 mt-6 w-full\">\n                                    <dx-check-box [value]=\"item.isShowBar\" [(ngModel)]=\"item.isShowBar\"\n                                        text=\"Allow Bar\"></dx-check-box>\n                                </div>\n\n                                <div class=\"px-1 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\">Color</div>\n                                    <dx-color-box [(ngModel)]=\"item.color\"></dx-color-box>\n                                </div>\n                                <div class=\"text-center mt-8 w-full\">\n                                    <button *ngIf=\"i !== 0\" class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItemForColumns(i, 'up')\">\n                                        <i class=\"fa fa-arrow-up\" aria-hidden=\"true\"></i>\n                                    </button>\n\n                                    <button *ngIf=\"i !== tableDataConfig.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<div class=\"flex flex-row border-t pl-3\">\n    <div class=\"flex justify-start mx-1\">\n        <button class=\"{{commonService.btn_warning_md}} cursor-pointer mt-2\" (click)=\"viewMapForTest()\">\n            Preview</button>\n        <button class=\"{{commonService.btn_primary_md}} cursor-pointer mt-2\" (click)=\"isJsonPreview = false\">Data\n            Preview</button>\n    </div>\n    <div class=\"flex justify-end mx-1 flex-grow\">\n        <button class=\"{{commonService.btn_success_md}} cursor-pointer mt-2\"\n            (click)=\"getSaveChartConfig()\">Submit</button>\n    </div>\n</div>" }]
@@ -5633,6 +5688,11 @@ class SingleCardComponent {
         this.tableDataConfig = {
             "color": "",
             "size": "",
+            "isIcon": false,
+            "iconName": "",
+            "iconColor": "",
+            "iconText": "",
+            "iconBackgroundColor": "",
             "sortBy": [],
             "columns": []
         };
@@ -5859,10 +5919,10 @@ class SingleCardComponent {
     }
 }
 SingleCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SingleCardComponent, deps: [{ token: CommonService }, { token: i0.ChangeDetectorRef }, { token: ApplicationContentService }, { token: i3$1.ToastrService }], target: i0.ɵɵFactoryTarget.Component });
-SingleCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SingleCardComponent, selector: "lib-single-card", inputs: { chartconfigData: ["datasetmodal", "chartconfigData"] }, outputs: { getSingleCardConfigOutPut: "getSingleCardConfigOutPut" }, ngImport: i0, template: "\n\n<div class=\"m-2\"></div>\n    <div class=\"w-full m-2 border-r\">\n        <ng-container *ngIf=\"!isJsonPreview\">\n            <pre><code>{{jsaonDatasource | json}}</code></pre>\n        </ng-container>\n        <ng-container *ngIf=\"isJsonPreview\">    \n            <div class=\"flex justify-center items-start bg-gray-800 p-3 mx-2 text-center\">\n        <div class=\"w-full\">\n            <div [style.color]=\"tableDataConfig.color\"\n         [style.font-size.px]=\"tableDataConfig.size || 16\"\n                class=\"font-semibold\">{{jsaonDatasource.revenue}}</div>\n            </div>\n        </div>\n        </ng-container>\n    </div>\n    <div class=\"w-full mx-2 border-r\">\n        <div class=\"mb-4 border-b border-gray-200 dark:border-gray-700\">\n            <ul class=\"flex flex-wrap -mb-px text-sm font-medium text-center\" role=\"tablist\">\n                <li class=\"me-2\" role=\"presentation\">\n                    <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                        'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'basic',\n                                        'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'basic'\n                                    }\" (click)=\"setActiveTab('basic')\" type=\"button\" role=\"tab\">\n                        Basic\n                    </button>\n                </li>\n                <li class=\"me-2\" role=\"presentation\">\n                    <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                        'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'columns',\n                                        'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'columns'\n                                    }\" (click)=\"setActiveTab('columns')\" type=\"button\" role=\"tab\">\n                        Columns\n                    </button>\n                </li>\n                <li class=\"me-2\" role=\"presentation\">\n                    <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                        'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'properties',\n                                        'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'properties'\n                                    }\" (click)=\"setActiveTab('properties')\" type=\"button\" role=\"tab\">\n                        Properties\n                    </button>\n                </li>\n\n            </ul>\n        </div>\n\n        <div id=\"default-styled-tab-content\">   \n            <div *ngIf=\"activeTab === 'basic'\">\n                <div class=\"flex flex-col flex-auto min-w-0\">\n                    <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Filter Title Config\n                    </div>\n                    <div class=\"pt-2 border-x border-b \">\n                        <div class=\"my-2 flex justify-between\">\n                            \n                            <div class=\"px-1 mb-2 w-full\">\n                                <div class=\"text-md mb-2\">Color</div>\n                                <dx-color-box [(ngModel)]=\"tableDataConfig.color\"></dx-color-box>\n\n                            </div>\n                            <div class=\"px-1 mb-1 w-full\">\n                                <div class=\"text-md mb-2\">Size</div>\n                                <dx-text-box placeholder=\"Enter size\"  [(ngModel)]=\"tableDataConfig.size\"></dx-text-box>\n                    \n                            </div>\n                            \n                            <div class=\"px-1 mb-1 w-full\">\n                                <div class=\"text-md mb-2\"> Key To Pass </div>\n                                <dx-tag-box [items]=\"configColume\"\n                                    [(ngModel)]=\"table_columns_config.kpiConfig.keyToPass\"></dx-tag-box>\n                            </div>\n                            <div class=\"px-1 mb-1 w-full\">\n                                <div class=\"text-md mb-2\"> Display Formate </div>\n                                <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                    [(ngModel)]=\"table_columns_config.kpiConfig.formate\"></dx-select-box>\n                            </div>\n\n                            <div class=\"px-1 mb-1 w-full\">\n                                <div class=\"text-md mb-2\"> Sort By </div>\n                                <dx-tag-box [items]=\"configColume\"\n                                    [(ngModel)]=\"tableDataConfig.sortBy\"></dx-tag-box>\n                            </div>\n                            </div>         \n                        </div>\n                    </div>\n\n            </div>\n            <div *ngIf=\"activeTab === 'columns'\">\n                <div class=\"h-full overflow-x-auto\">\n                    <div class=\"flex flex-col flex-auto min-w-0\">\n\n                        <div class=\"pt-2 border-x border-b \">\n                            <div class=\"my-2 border-b flex flex-row\"\n                                *ngFor=\"let item of tableDataConfig.columns; let i = index;\">\n                                <div class=\"px-1 mb-2 mt-6 w-full\">\n                                    <dx-check-box [(ngModel)]=\"item.visible\"\n                                        text=\"Visiblity\"></dx-check-box>\n                                </div>\n                                \n                                <div class=\"px-1 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\"> Value Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"item.dataField\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\"> Caption</div>\n                                    <dx-text-box [(ngModel)]=\"item.caption\"></dx-text-box>\n                                </div>\n                                <div class=\"px-2 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\"> UI Function</div>\n                                    <dx-select-box [items]=\"enrichNameList\" [(ngModel)]=\"item.enrichName\"\n                                        [searchEnabled]=\"true\"></dx-select-box>\n                                </div>\n                                <div class=\"text-center mt-8 w-full\">\n                                    <button *ngIf=\"i !== 0\" class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItemForColumns(i, 'up')\">\n                                        <i class=\"fa fa-arrow-up\" aria-hidden=\"true\"></i>\n                                    </button>\n\n                                    <button *ngIf=\"i !== tableDataConfig.columns.length - 1\"\n                                        class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItemForColumns(i, 'down')\">\n                                        <i class=\"fa fa-arrow-down\" aria-hidden=\"true\"></i>\n                                    </button>\n                                    <button class=\"{{commonService.btn_danger_sm}} cursor-pointer\"\n                                        (click)=\"deleteColumns(i)\"><i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                    </button>\n                                </div>\n\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"flex flex-row justify-end my-2\">\n                        <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\" (click)=\"addColumns()\">Add\n                            Columns</button>\n                    </div>\n                </div>\n            </div>\n            <div *ngIf=\"activeTab === 'properties'\">\n                <div class=\"h-full overflow-x-auto\">\n                    <app-loader *ngIf=\"isLoader\"></app-loader>\n                    <ng-container *ngIf=\"!isLoader\">\n                        <div class=\"flex flex-row justify-between border-b py-3\">\n                            <div class=\"mx-2\">\n                                <dx-check-box [value]=\"viewProperties.enableClickEvent\"\n                                    [(ngModel)]=\"viewProperties.enableClickEvent\"\n                                    text=\"Enable Click Event\"></dx-check-box>\n                            </div>\n                            <div class=\"mx-2\">\n                                <dx-check-box [value]=\"viewProperties.enableRightClickEvent\"\n                                    [(ngModel)]=\"viewProperties.enableRightClickEvent\"\n                                    text=\"Enable Right Click\"></dx-check-box>\n                            </div>\n                        </div>\n                        <div class=\"w-full p-2\" *ngIf=\"viewProperties.enableClickEvent\">\n\n                            <div class=\"flex flex-col flex-auto min-w-0 my-2\">\n                                <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Event\n                                    Type\n                                    Option\n                                </div>\n                                <div class=\"w-full p-3 border-x border-b \">\n                                    <div class=\"flex flex-row\">\n                                        <div class=\"w-full\">\n                                            <div class=\"text-md mb-2\"> Event Type</div>\n                                        </div>\n                                        <div class=\"w-full\">\n                                            <dx-select-box [items]=\"['drilldown','sameViewDrilldown','optionalDrillDown']\"\n                                                (onValueChanged)=\"getSelectedEventType($event)\"\n                                                [(ngModel)]=\"viewProperties.clickEventOptions.eventType\"></dx-select-box>\n                                        </div>\n                                    </div>\n                                    <ng-container *ngIf=\"viewProperties.clickEventOptions.eventType == 'drilldown'\">\n                                        <div class=\"flex flex-row justify-between mt-3\">\n                                            <div class=\"w-full\">\n                                                <div class=\"text-md mb-2\"> Associated Views</div>\n                                                <dx-tag-box [items]=\"allConfiguredViews\"\n                                                    [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                    valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                    [showSelectionControls]=\"true\" [searchEnabled]=\"true\"></dx-tag-box>\n                                            </div>\n                                        </div>\n                                    </ng-container>\n                                    <ng-container *ngIf=\"viewProperties.clickEventOptions.eventType == 'sameViewDrilldown'\">\n                                        <div class=\"flex flex-row justify-between mt-3\">\n                                            <div class=\"w-full\">\n                                                <div class=\"text-md mb-2\"> Associated Views</div>\n                                                <dx-tag-box [items]=\"allConfiguredViews\"\n                                                    [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                    valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                    [showSelectionControls]=\"true\" [searchEnabled]=\"true\"></dx-tag-box>\n                                            </div>\n                                        </div>\n                                    </ng-container>\n                                    <ng-container\n                                        *ngIf=\"viewProperties.clickEventOptions.eventType == 'optionalDrillDown'\">\n                                        <div class=\"flex flex-row justify-between mt-3\">\n                                            <div class=\"w-full\">\n                                                <ng-container\n                                                    *ngFor=\"let item of optionalDrilDownDataSource;let i = index;\">\n\n                                                    <div class=\"flex flex-row justify-between\">\n                                                        <div class=\"mx-2 w-1/2\">\n                                                            <div class=\"text-md mb-2\"> Associated Views</div>\n                                                            <dx-tag-box [items]=\"allConfiguredViews\"\n                                                                [(ngModel)]=\"item.viewId\" valueExpr=\"viewId\"\n                                                                displayExpr=\"viewName\" [showSelectionControls]=\"true\"\n                                                                [maxDisplayedTags]=\"2\"\n                                                                [searchEnabled]=\"true\"></dx-tag-box>\n\n                                                        </div>\n                                                        <div class=\"mx-2 w-1/2\">\n                                                            <div class=\"text-md mb-2\"> Associated Params</div>\n                                                            <dx-text-box\n                                                                [(ngModel)]=\"item.filterCondition\"></dx-text-box>\n                                                        </div>\n                                                        <div class=\"mx-2\">\n                                                            <button\n                                                                class=\"{{commonService.btn_danger_sm}} cursor-pointer mt-8\"\n                                                                (click)=\"deleteAssociatedParams(i)\"><i\n                                                                    class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                                            </button>\n                                                        </div>\n                                                    </div>\n                                                </ng-container>\n                                                <div class=\"flex flex-row justify-end mt-4\">\n                                                    <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\"\n                                                        (click)=\"addAssociatedParams()\">Add\n                                                        Params</button>\n                                                </div>\n                                            </div>\n                                        </div>\n                                    </ng-container>\n                                    <button class=\"{{commonService.btn_light_md}} cursor-pointer mt-4\"\n                                        (click)=\"resetViewProprstise()\">Reset All Event</button>\n                                </div>\n                            </div>\n\n                        </div>\n                    </ng-container>\n                </div>\n            </div>\n\n        </div>\n    </div>\n\n\n<div class=\"flex flex-row border-t pl-3\">\n    <div class=\"flex justify-start mx-1\">\n        <button class=\"{{commonService.btn_warning_md}} cursor-pointer mt-2\" (click)=\"isJsonPreview = true\">\n            Preview</button>\n        <button class=\"{{commonService.btn_primary_md}} cursor-pointer mt-2\" (click)=\"isJsonPreview = false\">Data\n            Preview</button>\n    </div>\n    <div class=\"flex justify-end mx-1 flex-grow\">\n        <button class=\"{{commonService.btn_success_md}} cursor-pointer mt-2\"\n            (click)=\"getSaveConfig()\">Submit</button>\n    </div>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5$1.DxCheckBoxComponent, selector: "dx-check-box", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "iconSize", "isValid", "name", "readOnly", "rtlEnabled", "tabIndex", "text", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "visible", "width"], outputs: ["onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconSizeChange", "isValidChange", "nameChange", "readOnlyChange", "rtlEnabledChange", "tabIndexChange", "textChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "component", type: i6$2.DxColorBoxComponent, selector: "dx-color-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "applyButtonText", "applyValueMode", "buttons", "cancelButtonText", "deferRendering", "disabled", "dropDownButtonTemplate", "dropDownOptions", "editAlphaChannel", "elementAttr", "fieldTemplate", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "keyStep", "label", "labelMode", "name", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showDropDownButton", "stylingMode", "tabIndex", "text", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "visible", "width"], outputs: ["onChange", "onClosed", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOpened", "onOptionChanged", "onPaste", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "applyButtonTextChange", "applyValueModeChange", "buttonsChange", "cancelButtonTextChange", "deferRenderingChange", "disabledChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "editAlphaChannelChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "keyStepChange", "labelChange", "labelModeChange", "nameChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showDropDownButtonChange", "stylingModeChange", "tabIndexChange", "textChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "component", type: i6$1.DxSelectBoxComponent, selector: "dx-select-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "buttons", "dataSource", "deferRendering", "disabled", "displayExpr", "displayValue", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "fieldTemplate", "focusStateEnabled", "grouped", "groupTemplate", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "items", "itemTemplate", "label", "labelMode", "maxLength", "minSearchLength", "name", "noDataText", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "searchEnabled", "searchExpr", "searchMode", "searchTimeout", "selectedItem", "showClearButton", "showDataBeforeSearch", "showDropDownButton", "showSelectionControls", "spellcheck", "stylingMode", "tabIndex", "text", "useItemTextAsTitle", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueChangeEvent", "valueExpr", "visible", "width", "wrapItemText"], outputs: ["onChange", "onClosed", "onContentReady", "onCopy", "onCustomItemCreating", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onItemClick", "onKeyDown", "onKeyUp", "onOpened", "onOptionChanged", "onPaste", "onSelectionChanged", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "dataSourceChange", "deferRenderingChange", "disabledChange", "displayExprChange", "displayValueChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "groupedChange", "groupTemplateChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "itemsChange", "itemTemplateChange", "labelChange", "labelModeChange", "maxLengthChange", "minSearchLengthChange", "nameChange", "noDataTextChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "searchEnabledChange", "searchExprChange", "searchModeChange", "searchTimeoutChange", "selectedItemChange", "showClearButtonChange", "showDataBeforeSearchChange", "showDropDownButtonChange", "showSelectionControlsChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useItemTextAsTitleChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "valueExprChange", "visibleChange", "widthChange", "wrapItemTextChange", "onBlur"] }, { kind: "component", type: i8$1.DxTagBoxComponent, selector: "dx-tag-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "applyValueMode", "buttons", "dataSource", "deferRendering", "disabled", "displayExpr", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "fieldTemplate", "focusStateEnabled", "grouped", "groupTemplate", "height", "hideSelectedItems", "hint", "hoverStateEnabled", "inputAttr", "isValid", "items", "itemTemplate", "label", "labelMode", "maxDisplayedTags", "maxFilterQueryLength", "maxLength", "minSearchLength", "multiline", "name", "noDataText", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "searchEnabled", "searchExpr", "searchMode", "searchTimeout", "selectAllMode", "selectAllText", "selectedItems", "showClearButton", "showDataBeforeSearch", "showDropDownButton", "showMultiTagOnly", "showSelectionControls", "stylingMode", "tabIndex", "tagTemplate", "text", "useItemTextAsTitle", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueExpr", "visible", "width", "wrapItemText"], outputs: ["onChange", "onClosed", "onContentReady", "onCustomItemCreating", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onItemClick", "onKeyDown", "onKeyUp", "onMultiTagPreparing", "onOpened", "onOptionChanged", "onSelectAllValueChanged", "onSelectionChanged", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "applyValueModeChange", "buttonsChange", "dataSourceChange", "deferRenderingChange", "disabledChange", "displayExprChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "groupedChange", "groupTemplateChange", "heightChange", "hideSelectedItemsChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "itemsChange", "itemTemplateChange", "labelChange", "labelModeChange", "maxDisplayedTagsChange", "maxFilterQueryLengthChange", "maxLengthChange", "minSearchLengthChange", "multilineChange", "nameChange", "noDataTextChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "searchEnabledChange", "searchExprChange", "searchModeChange", "searchTimeoutChange", "selectAllModeChange", "selectAllTextChange", "selectedItemsChange", "showClearButtonChange", "showDataBeforeSearchChange", "showDropDownButtonChange", "showMultiTagOnlyChange", "showSelectionControlsChange", "stylingModeChange", "tabIndexChange", "tagTemplateChange", "textChange", "useItemTextAsTitleChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueExprChange", "visibleChange", "widthChange", "wrapItemTextChange", "onBlur"] }, { kind: "component", type: i7.DxTextBoxComponent, selector: "dx-text-box", inputs: ["accessKey", "activeStateEnabled", "buttons", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "label", "labelMode", "mask", "maskChar", "maskInvalidMessage", "maskRules", "maxLength", "mode", "name", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showMaskMode", "spellcheck", "stylingMode", "tabIndex", "text", "useMaskedValue", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOptionChanged", "onPaste", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "labelChange", "labelModeChange", "maskChange", "maskCharChange", "maskInvalidMessageChange", "maskRulesChange", "maxLengthChange", "modeChange", "nameChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showMaskModeChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useMaskedValueChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: LoaderComponent, selector: "app-loader" }, { kind: "pipe", type: i4$1.JsonPipe, name: "json" }] });
+SingleCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SingleCardComponent, selector: "lib-single-card", inputs: { chartconfigData: ["datasetmodal", "chartconfigData"] }, outputs: { getSingleCardConfigOutPut: "getSingleCardConfigOutPut" }, ngImport: i0, template: "<div class=\"m-2\"></div>\n<div class=\"w-full m-2 border-r\">\n    <ng-container *ngIf=\"!isJsonPreview\">\n        <pre><code>{{jsaonDatasource | json}}</code></pre>\n    </ng-container>\n\n\n    <ng-container *ngIf=\"isJsonPreview\">\n\n        <div class=\"flex items-center p-4  bg-gray-200 dark:bg-gray-800  mx-2\n         text-gray-900 dark:text-gray-100 rounded shadow-xs\" *ngIf=\"tableDataConfig.isIcon\">\n            <div class=\"py-3 px-4 mr-4 rounded-full\" [style.color]=\"tableDataConfig.iconColor\"\n                [style.backgroundColor]=\"tableDataConfig.iconBackgroundColor\" >\n                <i [class]=\"tableDataConfig.iconName\"></i>\n\n            </div>\n            <div>\n                <p class=\"mb-2 text-sm font-medium text-gray-600 dark:text-gray-200\">\n                    {{tableDataConfig.iconText}}\n                </p>\n                <p class=\"font-semibold\" [style.color]=\"tableDataConfig.color\"\n                    [style.font-size.px]=\"tableDataConfig.size || 16\">\n                    {{jsaonDatasource[tableDataConfig.columns[0].dataField]}}\n                </p>\n            </div>\n        </div>\n\n        <div class=\"flex flex-row justify-center items-start \n         bg-gray-200 dark:bg-gray-800 \n         text-gray-900 dark:text-gray-100 \n         p-4 mx-2 text-center transition-colors duration-300 border border-r\" *ngIf=\"!tableDataConfig.isIcon\">\n            <ng-container *ngIf=\"!isLoader\">\n                <div class=\"flex justify-center items-center font-bold p-2\"\n                    [style.color]=\"tableDataConfig.color\" [style.font-size.px]=\"tableDataConfig.size || 16\">\n                    {{jsaonDatasource[tableDataConfig.columns[0].dataField]}}\n                </div>\n            </ng-container>\n        </div>\n    </ng-container>\n</div>\n<div class=\"w-full mx-2 border-r\">\n    <div class=\"mb-4 border-b border-gray-200 dark:border-gray-700\">\n        <ul class=\"flex flex-wrap -mb-px text-sm font-medium text-center\" role=\"tablist\">\n            <li class=\"me-2\" role=\"presentation\">\n                <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                        'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'basic',\n                                        'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'basic'\n                                    }\" (click)=\"setActiveTab('basic')\" type=\"button\" role=\"tab\">\n                    Basic\n                </button>\n            </li>\n            <li class=\"me-2\" role=\"presentation\">\n                <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                        'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'columns',\n                                        'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'columns'\n                                    }\" (click)=\"setActiveTab('columns')\" type=\"button\" role=\"tab\">\n                    Columns\n                </button>\n            </li>\n            <li class=\"me-2\" role=\"presentation\">\n                <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                        'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'properties',\n                                        'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'properties'\n                                    }\" (click)=\"setActiveTab('properties')\" type=\"button\" role=\"tab\">\n                    Properties\n                </button>\n            </li>\n\n        </ul>\n    </div>\n\n    <div id=\"default-styled-tab-content\">\n        <div *ngIf=\"activeTab === 'basic'\">\n            <div class=\"flex flex-row \">\n\n                <div class=\"px-1 mb-1 w-full\">\n                    <div class=\"text-md mb-2\"> Key To Pass </div>\n                    <dx-tag-box [items]=\"configColume\"\n                        [(ngModel)]=\"table_columns_config.kpiConfig.keyToPass\"></dx-tag-box>\n                </div>\n                <div class=\"px-1 mb-1 w-full\">\n                    <div class=\"text-md mb-2\"> Display Formate </div>\n                    <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                        [(ngModel)]=\"table_columns_config.kpiConfig.formate\"></dx-select-box>\n                </div>\n\n                <div class=\"px-1 mb-1 w-full\">\n                    <div class=\"text-md mb-2\"> Sort By </div>\n                    <dx-tag-box [items]=\"configColume\" [(ngModel)]=\"tableDataConfig.sortBy\"></dx-tag-box>\n                </div>\n\n            </div>\n            <div class=\"flex flex-row mt-2\">\n                <div class=\"px-1 mb-2 w-full\">\n                    <div class=\"text-md mb-2\">Color</div>\n                    <dx-color-box [(ngModel)]=\"tableDataConfig.color\"></dx-color-box>\n\n                </div>\n                <div class=\"px-1 mb-1 w-full\">\n                    <div class=\"text-md mb-2\">Font Size</div>\n                    <dx-number-box placeholder=\"Enter size\" [(ngModel)]=\"tableDataConfig.size\"></dx-number-box>\n\n                </div>\n\n                <div class=\"px-1 mb-1 w-full\">\n                    <div class=\"text-md mt-8\"> </div>\n                    <dx-check-box text=\"Enable Icon\" [(ngModel)]=\"tableDataConfig.isIcon\"></dx-check-box>\n                </div>\n            </div>\n            <div class=\"flex flex-row mt-2\" *ngIf=\"tableDataConfig.isIcon\">\n                <div class=\"px-1 mb-1 w-full\">\n                    <div class=\"text-md mb-2\">Icon Name </div>\n                    <dx-text-box placeholder=\"Enter fontawsome Icon\"\n                        [(ngModel)]=\"tableDataConfig.iconName\"></dx-text-box>\n                </div>\n                <div class=\"px-1 mb-2 w-full\">\n                    <div class=\"text-md mb-2\">Icon Color</div>\n                    <dx-color-box [(ngModel)]=\"tableDataConfig.iconColor\"></dx-color-box>\n\n                </div>\n                <div class=\"px-1 mb-2 w-full\">\n                    <div class=\"text-md mb-2\">Icon Background Color</div>\n                    <dx-color-box [(ngModel)]=\"tableDataConfig.iconBackgroundColor\"></dx-color-box>\n\n                </div>\n                <div class=\"px-1 mb-1 w-full\">\n                    <div class=\"text-md mb-2\">Content</div>\n                    <dx-text-box placeholder=\"Enter Supporting Content\"\n                        [(ngModel)]=\"tableDataConfig.iconText\"></dx-text-box>\n                </div>\n\n            </div>\n\n        </div>\n        <div *ngIf=\"activeTab === 'columns'\">\n            <div class=\"h-full overflow-x-auto\">\n                <div class=\"flex flex-col flex-auto min-w-0\">\n\n                    <div class=\"pt-2 border-x border-b \">\n                        <div class=\"my-2 border-b flex flex-row\"\n                            *ngFor=\"let item of tableDataConfig.columns; let i = index;\">\n                            <div class=\"px-1 mb-2 mt-6 w-full\">\n                                <dx-check-box [(ngModel)]=\"item.visible\" text=\"Visiblity\"></dx-check-box>\n                            </div>\n\n                            <div class=\"px-1 mb-2 w-full\">\n                                <div class=\"text-md mb-2\"> Value Field</div>\n                                <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                    [(ngModel)]=\"item.dataField\"></dx-select-box>\n                            </div>\n                            <div class=\"px-1 mb-2 w-full\">\n                                <div class=\"text-md mb-2\"> Caption</div>\n                                <dx-text-box [(ngModel)]=\"item.caption\"></dx-text-box>\n                            </div>\n                            <div class=\"px-2 mb-2 w-full\">\n                                <div class=\"text-md mb-2\"> UI Function</div>\n                                <dx-select-box [items]=\"enrichNameList\" [(ngModel)]=\"item.enrichName\"\n                                    [searchEnabled]=\"true\"></dx-select-box>\n                            </div>\n                            <div class=\"text-center mt-8 w-full\">\n                                <button *ngIf=\"i !== 0\" class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                    (click)=\"moveItemForColumns(i, 'up')\">\n                                    <i class=\"fa fa-arrow-up\" aria-hidden=\"true\"></i>\n                                </button>\n\n                                <button *ngIf=\"i !== tableDataConfig.columns.length - 1\"\n                                    class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                    (click)=\"moveItemForColumns(i, 'down')\">\n                                    <i class=\"fa fa-arrow-down\" aria-hidden=\"true\"></i>\n                                </button>\n                                <button class=\"{{commonService.btn_danger_sm}} cursor-pointer\"\n                                    (click)=\"deleteColumns(i)\"><i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                </button>\n                            </div>\n\n                        </div>\n                    </div>\n                </div>\n                <div class=\"flex flex-row justify-end my-2\">\n                    <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\" (click)=\"addColumns()\">Add\n                        Columns</button>\n                </div>\n            </div>\n        </div>\n        <div *ngIf=\"activeTab === 'properties'\">\n            <div class=\"h-full overflow-x-auto\">\n                <app-loader *ngIf=\"isLoader\"></app-loader>\n                <ng-container *ngIf=\"!isLoader\">\n                    <div class=\"flex flex-row justify-between border-b py-3\">\n                        <div class=\"mx-2\">\n                            <dx-check-box [value]=\"viewProperties.enableClickEvent\"\n                                [(ngModel)]=\"viewProperties.enableClickEvent\" 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\" [showSelectionControls]=\"true\"\n                                                [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\" [showSelectionControls]=\"true\"\n                                                [searchEnabled]=\"true\"></dx-tag-box>\n                                        </div>\n                                    </div>\n                                </ng-container>\n                                <ng-container *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\" [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 [(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 class=\"fa fa-trash-o\"\n                                                                aria-hidden=\"true\"></i>\n                                                        </button>\n                                                    </div>\n                                                </div>\n                                            </ng-container>\n                                            <div class=\"flex flex-row justify-end mt-4\">\n                                                <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\"\n                                                    (click)=\"addAssociatedParams()\">Add\n                                                    Params</button>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </ng-container>\n                                <button class=\"{{commonService.btn_light_md}} cursor-pointer mt-4\"\n                                    (click)=\"resetViewProprstise()\">Reset All Event</button>\n                            </div>\n                        </div>\n\n                    </div>\n                </ng-container>\n            </div>\n        </div>\n\n    </div>\n</div>\n\n\n<div class=\"flex flex-row border-t pl-3\">\n    <div class=\"flex justify-start mx-1\">\n        <button class=\"{{commonService.btn_warning_md}} cursor-pointer mt-2\" (click)=\"isJsonPreview = true\">\n            Preview</button>\n        <button class=\"{{commonService.btn_primary_md}} cursor-pointer mt-2\" (click)=\"isJsonPreview = false\">Data\n            Preview</button>\n    </div>\n    <div class=\"flex justify-end mx-1 flex-grow\">\n        <button class=\"{{commonService.btn_success_md}} cursor-pointer mt-2\" (click)=\"getSaveConfig()\">Submit</button>\n    </div>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5$1.DxCheckBoxComponent, selector: "dx-check-box", inputs: ["accessKey", "activeStateEnabled", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "iconSize", "isValid", "name", "readOnly", "rtlEnabled", "tabIndex", "text", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "visible", "width"], outputs: ["onContentReady", "onDisposing", "onInitialized", "onOptionChanged", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "iconSizeChange", "isValidChange", "nameChange", "readOnlyChange", "rtlEnabledChange", "tabIndexChange", "textChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "component", type: i6$2.DxColorBoxComponent, selector: "dx-color-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "applyButtonText", "applyValueMode", "buttons", "cancelButtonText", "deferRendering", "disabled", "dropDownButtonTemplate", "dropDownOptions", "editAlphaChannel", "elementAttr", "fieldTemplate", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "keyStep", "label", "labelMode", "name", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showDropDownButton", "stylingMode", "tabIndex", "text", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "visible", "width"], outputs: ["onChange", "onClosed", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOpened", "onOptionChanged", "onPaste", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "applyButtonTextChange", "applyValueModeChange", "buttonsChange", "cancelButtonTextChange", "deferRenderingChange", "disabledChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "editAlphaChannelChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "keyStepChange", "labelChange", "labelModeChange", "nameChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showDropDownButtonChange", "stylingModeChange", "tabIndexChange", "textChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "component", type: i7$2.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: i7.DxTextBoxComponent, selector: "dx-text-box", inputs: ["accessKey", "activeStateEnabled", "buttons", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "label", "labelMode", "mask", "maskChar", "maskInvalidMessage", "maskRules", "maxLength", "mode", "name", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showMaskMode", "spellcheck", "stylingMode", "tabIndex", "text", "useMaskedValue", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOptionChanged", "onPaste", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "labelChange", "labelModeChange", "maskChange", "maskCharChange", "maskInvalidMessageChange", "maskRulesChange", "maxLengthChange", "modeChange", "nameChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showMaskModeChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useMaskedValueChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: LoaderComponent, selector: "app-loader" }, { kind: "pipe", type: i4$1.JsonPipe, name: "json" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SingleCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-single-card', template: "\n\n<div class=\"m-2\"></div>\n    <div class=\"w-full m-2 border-r\">\n        <ng-container *ngIf=\"!isJsonPreview\">\n            <pre><code>{{jsaonDatasource | json}}</code></pre>\n        </ng-container>\n        <ng-container *ngIf=\"isJsonPreview\">    \n            <div class=\"flex justify-center items-start bg-gray-800 p-3 mx-2 text-center\">\n        <div class=\"w-full\">\n            <div [style.color]=\"tableDataConfig.color\"\n         [style.font-size.px]=\"tableDataConfig.size || 16\"\n                class=\"font-semibold\">{{jsaonDatasource.revenue}}</div>\n            </div>\n        </div>\n        </ng-container>\n    </div>\n    <div class=\"w-full mx-2 border-r\">\n        <div class=\"mb-4 border-b border-gray-200 dark:border-gray-700\">\n            <ul class=\"flex flex-wrap -mb-px text-sm font-medium text-center\" role=\"tablist\">\n                <li class=\"me-2\" role=\"presentation\">\n                    <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                        'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'basic',\n                                        'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'basic'\n                                    }\" (click)=\"setActiveTab('basic')\" type=\"button\" role=\"tab\">\n                        Basic\n                    </button>\n                </li>\n                <li class=\"me-2\" role=\"presentation\">\n                    <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                        'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'columns',\n                                        'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'columns'\n                                    }\" (click)=\"setActiveTab('columns')\" type=\"button\" role=\"tab\">\n                        Columns\n                    </button>\n                </li>\n                <li class=\"me-2\" role=\"presentation\">\n                    <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                        'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'properties',\n                                        'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'properties'\n                                    }\" (click)=\"setActiveTab('properties')\" type=\"button\" role=\"tab\">\n                        Properties\n                    </button>\n                </li>\n\n            </ul>\n        </div>\n\n        <div id=\"default-styled-tab-content\">   \n            <div *ngIf=\"activeTab === 'basic'\">\n                <div class=\"flex flex-col flex-auto min-w-0\">\n                    <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Filter Title Config\n                    </div>\n                    <div class=\"pt-2 border-x border-b \">\n                        <div class=\"my-2 flex justify-between\">\n                            \n                            <div class=\"px-1 mb-2 w-full\">\n                                <div class=\"text-md mb-2\">Color</div>\n                                <dx-color-box [(ngModel)]=\"tableDataConfig.color\"></dx-color-box>\n\n                            </div>\n                            <div class=\"px-1 mb-1 w-full\">\n                                <div class=\"text-md mb-2\">Size</div>\n                                <dx-text-box placeholder=\"Enter size\"  [(ngModel)]=\"tableDataConfig.size\"></dx-text-box>\n                    \n                            </div>\n                            \n                            <div class=\"px-1 mb-1 w-full\">\n                                <div class=\"text-md mb-2\"> Key To Pass </div>\n                                <dx-tag-box [items]=\"configColume\"\n                                    [(ngModel)]=\"table_columns_config.kpiConfig.keyToPass\"></dx-tag-box>\n                            </div>\n                            <div class=\"px-1 mb-1 w-full\">\n                                <div class=\"text-md mb-2\"> Display Formate </div>\n                                <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                                    [(ngModel)]=\"table_columns_config.kpiConfig.formate\"></dx-select-box>\n                            </div>\n\n                            <div class=\"px-1 mb-1 w-full\">\n                                <div class=\"text-md mb-2\"> Sort By </div>\n                                <dx-tag-box [items]=\"configColume\"\n                                    [(ngModel)]=\"tableDataConfig.sortBy\"></dx-tag-box>\n                            </div>\n                            </div>         \n                        </div>\n                    </div>\n\n            </div>\n            <div *ngIf=\"activeTab === 'columns'\">\n                <div class=\"h-full overflow-x-auto\">\n                    <div class=\"flex flex-col flex-auto min-w-0\">\n\n                        <div class=\"pt-2 border-x border-b \">\n                            <div class=\"my-2 border-b flex flex-row\"\n                                *ngFor=\"let item of tableDataConfig.columns; let i = index;\">\n                                <div class=\"px-1 mb-2 mt-6 w-full\">\n                                    <dx-check-box [(ngModel)]=\"item.visible\"\n                                        text=\"Visiblity\"></dx-check-box>\n                                </div>\n                                \n                                <div class=\"px-1 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\"> Value Field</div>\n                                    <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                        [(ngModel)]=\"item.dataField\"></dx-select-box>\n                                </div>\n                                <div class=\"px-1 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\"> Caption</div>\n                                    <dx-text-box [(ngModel)]=\"item.caption\"></dx-text-box>\n                                </div>\n                                <div class=\"px-2 mb-2 w-full\">\n                                    <div class=\"text-md mb-2\"> UI Function</div>\n                                    <dx-select-box [items]=\"enrichNameList\" [(ngModel)]=\"item.enrichName\"\n                                        [searchEnabled]=\"true\"></dx-select-box>\n                                </div>\n                                <div class=\"text-center mt-8 w-full\">\n                                    <button *ngIf=\"i !== 0\" class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItemForColumns(i, 'up')\">\n                                        <i class=\"fa fa-arrow-up\" aria-hidden=\"true\"></i>\n                                    </button>\n\n                                    <button *ngIf=\"i !== tableDataConfig.columns.length - 1\"\n                                        class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                        (click)=\"moveItemForColumns(i, 'down')\">\n                                        <i class=\"fa fa-arrow-down\" aria-hidden=\"true\"></i>\n                                    </button>\n                                    <button class=\"{{commonService.btn_danger_sm}} cursor-pointer\"\n                                        (click)=\"deleteColumns(i)\"><i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                    </button>\n                                </div>\n\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"flex flex-row justify-end my-2\">\n                        <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\" (click)=\"addColumns()\">Add\n                            Columns</button>\n                    </div>\n                </div>\n            </div>\n            <div *ngIf=\"activeTab === 'properties'\">\n                <div class=\"h-full overflow-x-auto\">\n                    <app-loader *ngIf=\"isLoader\"></app-loader>\n                    <ng-container *ngIf=\"!isLoader\">\n                        <div class=\"flex flex-row justify-between border-b py-3\">\n                            <div class=\"mx-2\">\n                                <dx-check-box [value]=\"viewProperties.enableClickEvent\"\n                                    [(ngModel)]=\"viewProperties.enableClickEvent\"\n                                    text=\"Enable Click Event\"></dx-check-box>\n                            </div>\n                            <div class=\"mx-2\">\n                                <dx-check-box [value]=\"viewProperties.enableRightClickEvent\"\n                                    [(ngModel)]=\"viewProperties.enableRightClickEvent\"\n                                    text=\"Enable Right Click\"></dx-check-box>\n                            </div>\n                        </div>\n                        <div class=\"w-full p-2\" *ngIf=\"viewProperties.enableClickEvent\">\n\n                            <div class=\"flex flex-col flex-auto min-w-0 my-2\">\n                                <div class=\"text-sm py-1 font-extrabold border-b bg-gray-700 text-white px-2\"> Event\n                                    Type\n                                    Option\n                                </div>\n                                <div class=\"w-full p-3 border-x border-b \">\n                                    <div class=\"flex flex-row\">\n                                        <div class=\"w-full\">\n                                            <div class=\"text-md mb-2\"> Event Type</div>\n                                        </div>\n                                        <div class=\"w-full\">\n                                            <dx-select-box [items]=\"['drilldown','sameViewDrilldown','optionalDrillDown']\"\n                                                (onValueChanged)=\"getSelectedEventType($event)\"\n                                                [(ngModel)]=\"viewProperties.clickEventOptions.eventType\"></dx-select-box>\n                                        </div>\n                                    </div>\n                                    <ng-container *ngIf=\"viewProperties.clickEventOptions.eventType == 'drilldown'\">\n                                        <div class=\"flex flex-row justify-between mt-3\">\n                                            <div class=\"w-full\">\n                                                <div class=\"text-md mb-2\"> Associated Views</div>\n                                                <dx-tag-box [items]=\"allConfiguredViews\"\n                                                    [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                    valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                    [showSelectionControls]=\"true\" [searchEnabled]=\"true\"></dx-tag-box>\n                                            </div>\n                                        </div>\n                                    </ng-container>\n                                    <ng-container *ngIf=\"viewProperties.clickEventOptions.eventType == 'sameViewDrilldown'\">\n                                        <div class=\"flex flex-row justify-between mt-3\">\n                                            <div class=\"w-full\">\n                                                <div class=\"text-md mb-2\"> Associated Views</div>\n                                                <dx-tag-box [items]=\"allConfiguredViews\"\n                                                    [(ngModel)]=\"viewProperties.clickEventOptions.associatedViews\"\n                                                    valueExpr=\"viewId\" displayExpr=\"viewName\"\n                                                    [showSelectionControls]=\"true\" [searchEnabled]=\"true\"></dx-tag-box>\n                                            </div>\n                                        </div>\n                                    </ng-container>\n                                    <ng-container\n                                        *ngIf=\"viewProperties.clickEventOptions.eventType == 'optionalDrillDown'\">\n                                        <div class=\"flex flex-row justify-between mt-3\">\n                                            <div class=\"w-full\">\n                                                <ng-container\n                                                    *ngFor=\"let item of optionalDrilDownDataSource;let i = index;\">\n\n                                                    <div class=\"flex flex-row justify-between\">\n                                                        <div class=\"mx-2 w-1/2\">\n                                                            <div class=\"text-md mb-2\"> Associated Views</div>\n                                                            <dx-tag-box [items]=\"allConfiguredViews\"\n                                                                [(ngModel)]=\"item.viewId\" valueExpr=\"viewId\"\n                                                                displayExpr=\"viewName\" [showSelectionControls]=\"true\"\n                                                                [maxDisplayedTags]=\"2\"\n                                                                [searchEnabled]=\"true\"></dx-tag-box>\n\n                                                        </div>\n                                                        <div class=\"mx-2 w-1/2\">\n                                                            <div class=\"text-md mb-2\"> Associated Params</div>\n                                                            <dx-text-box\n                                                                [(ngModel)]=\"item.filterCondition\"></dx-text-box>\n                                                        </div>\n                                                        <div class=\"mx-2\">\n                                                            <button\n                                                                class=\"{{commonService.btn_danger_sm}} cursor-pointer mt-8\"\n                                                                (click)=\"deleteAssociatedParams(i)\"><i\n                                                                    class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                                            </button>\n                                                        </div>\n                                                    </div>\n                                                </ng-container>\n                                                <div class=\"flex flex-row justify-end mt-4\">\n                                                    <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\"\n                                                        (click)=\"addAssociatedParams()\">Add\n                                                        Params</button>\n                                                </div>\n                                            </div>\n                                        </div>\n                                    </ng-container>\n                                    <button class=\"{{commonService.btn_light_md}} cursor-pointer mt-4\"\n                                        (click)=\"resetViewProprstise()\">Reset All Event</button>\n                                </div>\n                            </div>\n\n                        </div>\n                    </ng-container>\n                </div>\n            </div>\n\n        </div>\n    </div>\n\n\n<div class=\"flex flex-row border-t pl-3\">\n    <div class=\"flex justify-start mx-1\">\n        <button class=\"{{commonService.btn_warning_md}} cursor-pointer mt-2\" (click)=\"isJsonPreview = true\">\n            Preview</button>\n        <button class=\"{{commonService.btn_primary_md}} cursor-pointer mt-2\" (click)=\"isJsonPreview = false\">Data\n            Preview</button>\n    </div>\n    <div class=\"flex justify-end mx-1 flex-grow\">\n        <button class=\"{{commonService.btn_success_md}} cursor-pointer mt-2\"\n            (click)=\"getSaveConfig()\">Submit</button>\n    </div>\n</div>" }]
+            args: [{ selector: 'lib-single-card', template: "<div class=\"m-2\"></div>\n<div class=\"w-full m-2 border-r\">\n    <ng-container *ngIf=\"!isJsonPreview\">\n        <pre><code>{{jsaonDatasource | json}}</code></pre>\n    </ng-container>\n\n\n    <ng-container *ngIf=\"isJsonPreview\">\n\n        <div class=\"flex items-center p-4  bg-gray-200 dark:bg-gray-800  mx-2\n         text-gray-900 dark:text-gray-100 rounded shadow-xs\" *ngIf=\"tableDataConfig.isIcon\">\n            <div class=\"py-3 px-4 mr-4 rounded-full\" [style.color]=\"tableDataConfig.iconColor\"\n                [style.backgroundColor]=\"tableDataConfig.iconBackgroundColor\" >\n                <i [class]=\"tableDataConfig.iconName\"></i>\n\n            </div>\n            <div>\n                <p class=\"mb-2 text-sm font-medium text-gray-600 dark:text-gray-200\">\n                    {{tableDataConfig.iconText}}\n                </p>\n                <p class=\"font-semibold\" [style.color]=\"tableDataConfig.color\"\n                    [style.font-size.px]=\"tableDataConfig.size || 16\">\n                    {{jsaonDatasource[tableDataConfig.columns[0].dataField]}}\n                </p>\n            </div>\n        </div>\n\n        <div class=\"flex flex-row justify-center items-start \n         bg-gray-200 dark:bg-gray-800 \n         text-gray-900 dark:text-gray-100 \n         p-4 mx-2 text-center transition-colors duration-300 border border-r\" *ngIf=\"!tableDataConfig.isIcon\">\n            <ng-container *ngIf=\"!isLoader\">\n                <div class=\"flex justify-center items-center font-bold p-2\"\n                    [style.color]=\"tableDataConfig.color\" [style.font-size.px]=\"tableDataConfig.size || 16\">\n                    {{jsaonDatasource[tableDataConfig.columns[0].dataField]}}\n                </div>\n            </ng-container>\n        </div>\n    </ng-container>\n</div>\n<div class=\"w-full mx-2 border-r\">\n    <div class=\"mb-4 border-b border-gray-200 dark:border-gray-700\">\n        <ul class=\"flex flex-wrap -mb-px text-sm font-medium text-center\" role=\"tablist\">\n            <li class=\"me-2\" role=\"presentation\">\n                <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                        'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'basic',\n                                        'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'basic'\n                                    }\" (click)=\"setActiveTab('basic')\" type=\"button\" role=\"tab\">\n                    Basic\n                </button>\n            </li>\n            <li class=\"me-2\" role=\"presentation\">\n                <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                        'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'columns',\n                                        'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'columns'\n                                    }\" (click)=\"setActiveTab('columns')\" type=\"button\" role=\"tab\">\n                    Columns\n                </button>\n            </li>\n            <li class=\"me-2\" role=\"presentation\">\n                <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                        'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'properties',\n                                        'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'properties'\n                                    }\" (click)=\"setActiveTab('properties')\" type=\"button\" role=\"tab\">\n                    Properties\n                </button>\n            </li>\n\n        </ul>\n    </div>\n\n    <div id=\"default-styled-tab-content\">\n        <div *ngIf=\"activeTab === 'basic'\">\n            <div class=\"flex flex-row \">\n\n                <div class=\"px-1 mb-1 w-full\">\n                    <div class=\"text-md mb-2\"> Key To Pass </div>\n                    <dx-tag-box [items]=\"configColume\"\n                        [(ngModel)]=\"table_columns_config.kpiConfig.keyToPass\"></dx-tag-box>\n                </div>\n                <div class=\"px-1 mb-1 w-full\">\n                    <div class=\"text-md mb-2\"> Display Formate </div>\n                    <dx-select-box [items]=\"['daily','hourly','monthly']\"\n                        [(ngModel)]=\"table_columns_config.kpiConfig.formate\"></dx-select-box>\n                </div>\n\n                <div class=\"px-1 mb-1 w-full\">\n                    <div class=\"text-md mb-2\"> Sort By </div>\n                    <dx-tag-box [items]=\"configColume\" [(ngModel)]=\"tableDataConfig.sortBy\"></dx-tag-box>\n                </div>\n\n            </div>\n            <div class=\"flex flex-row mt-2\">\n                <div class=\"px-1 mb-2 w-full\">\n                    <div class=\"text-md mb-2\">Color</div>\n                    <dx-color-box [(ngModel)]=\"tableDataConfig.color\"></dx-color-box>\n\n                </div>\n                <div class=\"px-1 mb-1 w-full\">\n                    <div class=\"text-md mb-2\">Font Size</div>\n                    <dx-number-box placeholder=\"Enter size\" [(ngModel)]=\"tableDataConfig.size\"></dx-number-box>\n\n                </div>\n\n                <div class=\"px-1 mb-1 w-full\">\n                    <div class=\"text-md mt-8\"> </div>\n                    <dx-check-box text=\"Enable Icon\" [(ngModel)]=\"tableDataConfig.isIcon\"></dx-check-box>\n                </div>\n            </div>\n            <div class=\"flex flex-row mt-2\" *ngIf=\"tableDataConfig.isIcon\">\n                <div class=\"px-1 mb-1 w-full\">\n                    <div class=\"text-md mb-2\">Icon Name </div>\n                    <dx-text-box placeholder=\"Enter fontawsome Icon\"\n                        [(ngModel)]=\"tableDataConfig.iconName\"></dx-text-box>\n                </div>\n                <div class=\"px-1 mb-2 w-full\">\n                    <div class=\"text-md mb-2\">Icon Color</div>\n                    <dx-color-box [(ngModel)]=\"tableDataConfig.iconColor\"></dx-color-box>\n\n                </div>\n                <div class=\"px-1 mb-2 w-full\">\n                    <div class=\"text-md mb-2\">Icon Background Color</div>\n                    <dx-color-box [(ngModel)]=\"tableDataConfig.iconBackgroundColor\"></dx-color-box>\n\n                </div>\n                <div class=\"px-1 mb-1 w-full\">\n                    <div class=\"text-md mb-2\">Content</div>\n                    <dx-text-box placeholder=\"Enter Supporting Content\"\n                        [(ngModel)]=\"tableDataConfig.iconText\"></dx-text-box>\n                </div>\n\n            </div>\n\n        </div>\n        <div *ngIf=\"activeTab === 'columns'\">\n            <div class=\"h-full overflow-x-auto\">\n                <div class=\"flex flex-col flex-auto min-w-0\">\n\n                    <div class=\"pt-2 border-x border-b \">\n                        <div class=\"my-2 border-b flex flex-row\"\n                            *ngFor=\"let item of tableDataConfig.columns; let i = index;\">\n                            <div class=\"px-1 mb-2 mt-6 w-full\">\n                                <dx-check-box [(ngModel)]=\"item.visible\" text=\"Visiblity\"></dx-check-box>\n                            </div>\n\n                            <div class=\"px-1 mb-2 w-full\">\n                                <div class=\"text-md mb-2\"> Value Field</div>\n                                <dx-select-box [searchEnabled]=\"true\" [items]=\"configColume\"\n                                    [(ngModel)]=\"item.dataField\"></dx-select-box>\n                            </div>\n                            <div class=\"px-1 mb-2 w-full\">\n                                <div class=\"text-md mb-2\"> Caption</div>\n                                <dx-text-box [(ngModel)]=\"item.caption\"></dx-text-box>\n                            </div>\n                            <div class=\"px-2 mb-2 w-full\">\n                                <div class=\"text-md mb-2\"> UI Function</div>\n                                <dx-select-box [items]=\"enrichNameList\" [(ngModel)]=\"item.enrichName\"\n                                    [searchEnabled]=\"true\"></dx-select-box>\n                            </div>\n                            <div class=\"text-center mt-8 w-full\">\n                                <button *ngIf=\"i !== 0\" class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                    (click)=\"moveItemForColumns(i, 'up')\">\n                                    <i class=\"fa fa-arrow-up\" aria-hidden=\"true\"></i>\n                                </button>\n\n                                <button *ngIf=\"i !== tableDataConfig.columns.length - 1\"\n                                    class=\"{{commonService.btn_light_sm}} cursor-pointer mx-1\"\n                                    (click)=\"moveItemForColumns(i, 'down')\">\n                                    <i class=\"fa fa-arrow-down\" aria-hidden=\"true\"></i>\n                                </button>\n                                <button class=\"{{commonService.btn_danger_sm}} cursor-pointer\"\n                                    (click)=\"deleteColumns(i)\"><i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                                </button>\n                            </div>\n\n                        </div>\n                    </div>\n                </div>\n                <div class=\"flex flex-row justify-end my-2\">\n                    <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\" (click)=\"addColumns()\">Add\n                        Columns</button>\n                </div>\n            </div>\n        </div>\n        <div *ngIf=\"activeTab === 'properties'\">\n            <div class=\"h-full overflow-x-auto\">\n                <app-loader *ngIf=\"isLoader\"></app-loader>\n                <ng-container *ngIf=\"!isLoader\">\n                    <div class=\"flex flex-row justify-between border-b py-3\">\n                        <div class=\"mx-2\">\n                            <dx-check-box [value]=\"viewProperties.enableClickEvent\"\n                                [(ngModel)]=\"viewProperties.enableClickEvent\" 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\" [showSelectionControls]=\"true\"\n                                                [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\" [showSelectionControls]=\"true\"\n                                                [searchEnabled]=\"true\"></dx-tag-box>\n                                        </div>\n                                    </div>\n                                </ng-container>\n                                <ng-container *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\" [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 [(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 class=\"fa fa-trash-o\"\n                                                                aria-hidden=\"true\"></i>\n                                                        </button>\n                                                    </div>\n                                                </div>\n                                            </ng-container>\n                                            <div class=\"flex flex-row justify-end mt-4\">\n                                                <button class=\"{{commonService.btn_primary_sm}} cursor-pointer\"\n                                                    (click)=\"addAssociatedParams()\">Add\n                                                    Params</button>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </ng-container>\n                                <button class=\"{{commonService.btn_light_md}} cursor-pointer mt-4\"\n                                    (click)=\"resetViewProprstise()\">Reset All Event</button>\n                            </div>\n                        </div>\n\n                    </div>\n                </ng-container>\n            </div>\n        </div>\n\n    </div>\n</div>\n\n\n<div class=\"flex flex-row border-t pl-3\">\n    <div class=\"flex justify-start mx-1\">\n        <button class=\"{{commonService.btn_warning_md}} cursor-pointer mt-2\" (click)=\"isJsonPreview = true\">\n            Preview</button>\n        <button class=\"{{commonService.btn_primary_md}} cursor-pointer mt-2\" (click)=\"isJsonPreview = false\">Data\n            Preview</button>\n    </div>\n    <div class=\"flex justify-end mx-1 flex-grow\">\n        <button class=\"{{commonService.btn_success_md}} cursor-pointer mt-2\" (click)=\"getSaveConfig()\">Submit</button>\n    </div>\n</div>" }]
         }], ctorParameters: function () { return [{ type: CommonService }, { type: i0.ChangeDetectorRef }, { type: ApplicationContentService }, { type: i3$1.ToastrService }]; }, propDecorators: { getSingleCardConfigOutPut: [{
                 type: Output
             }], chartconfigData: [{
@@ -8548,6 +8608,7 @@ class GammSingleNumberCardComponent {
             this.isLoader = true;
             this.selectedColumn = value.kpiConfig?.dataConfig?.columns?.[0]?.dataField || "";
             this.sortBy = value.kpiConfig?.dataConfig?.sortBy;
+            this.tableDataConfig = value.kpiConfig?.dataConfig;
             if (value.kpiConfig.dataSource?.length) {
                 this.page_config = value;
                 let sortedData = value.kpiConfig.dataSource;
@@ -8589,10 +8650,10 @@ class GammSingleNumberCardComponent {
     }
 }
 GammSingleNumberCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GammSingleNumberCardComponent, deps: [{ token: CommonService }, { token: i3$1.ToastrService }], target: i0.ɵɵFactoryTarget.Component });
-GammSingleNumberCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: GammSingleNumberCardComponent, selector: "app-gamm-single-number-card", inputs: { chartDataSource: "chartDataSource" }, ngImport: i0, template: "<div class=\"flex flex-row justify-center items-start \n         bg-gray-200 dark:bg-gray-800 \n         text-gray-900 dark:text-gray-100 \n         p-4 mx-2 text-center transition-colors duration-300\">\n\n    <ng-container *ngIf=\"isLoader\">\n        <app-loader></app-loader>\n    </ng-container>\n\n    <ng-container *ngIf=\"!isLoader\">\n        <div class=\"flex justify-center items-center text-4xl font-bold p-2 {{randomColorClass}}\">\n            {{ currentDateData }}\n        </div>\n    </ng-container>\n\n</div>", dependencies: [{ kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoaderComponent, selector: "app-loader" }] });
+GammSingleNumberCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: GammSingleNumberCardComponent, selector: "app-gamm-single-number-card", inputs: { chartDataSource: "chartDataSource" }, ngImport: i0, template: "\n\n\n<div class=\"flex items-center p-4  bg-gray-200 dark:bg-gray-800  mx-2\n         text-gray-900 dark:text-gray-100 rounded shadow-xs\" *ngIf=\"tableDataConfig.isIcon\">\n    <ng-container *ngIf=\"isLoader\">\n        <app-loader></app-loader>\n    </ng-container>\n    <div class=\"py-3 px-4 mr-4 rounded-full\" [style.color]=\"tableDataConfig.iconColor\"\n        [style.backgroundColor]=\"tableDataConfig.iconBackgroundColor\">\n        <i [class]=\"tableDataConfig.iconName\"></i>\n\n    </div>\n    <div>\n        <p class=\"mb-2 text-sm font-medium text-gray-600 dark:text-gray-200\">\n            {{tableDataConfig.iconText}}\n        </p>\n        <p class=\"font-semibold\" [style.color]=\"tableDataConfig.color\"\n            [style.font-size.px]=\"tableDataConfig.size || 16\">\n            {{ currentDateData }}\n        </p>\n    </div>\n</div>\n\n<div class=\"flex flex-row justify-center items-start \n         bg-gray-200 dark:bg-gray-800 \n         text-gray-900 dark:text-gray-100 \n         p-4 mx-2 text-center transition-colors duration-300 border border-r\" *ngIf=\"!tableDataConfig.isIcon\">\n    <ng-container *ngIf=\"isLoader\">\n        <app-loader></app-loader>\n    </ng-container>\n    <ng-container *ngIf=\"!isLoader\">\n        <div class=\"flex justify-center items-center font-bold p-2\" [style.color]=\"tableDataConfig.color\"\n            [style.font-size.px]=\"tableDataConfig.size || 16\">\n            {{ currentDateData }}\n        </div>\n    </ng-container>\n</div>", dependencies: [{ kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoaderComponent, selector: "app-loader" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GammSingleNumberCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-gamm-single-number-card', template: "<div class=\"flex flex-row justify-center items-start \n         bg-gray-200 dark:bg-gray-800 \n         text-gray-900 dark:text-gray-100 \n         p-4 mx-2 text-center transition-colors duration-300\">\n\n    <ng-container *ngIf=\"isLoader\">\n        <app-loader></app-loader>\n    </ng-container>\n\n    <ng-container *ngIf=\"!isLoader\">\n        <div class=\"flex justify-center items-center text-4xl font-bold p-2 {{randomColorClass}}\">\n            {{ currentDateData }}\n        </div>\n    </ng-container>\n\n</div>" }]
+            args: [{ selector: 'app-gamm-single-number-card', template: "\n\n\n<div class=\"flex items-center p-4  bg-gray-200 dark:bg-gray-800  mx-2\n         text-gray-900 dark:text-gray-100 rounded shadow-xs\" *ngIf=\"tableDataConfig.isIcon\">\n    <ng-container *ngIf=\"isLoader\">\n        <app-loader></app-loader>\n    </ng-container>\n    <div class=\"py-3 px-4 mr-4 rounded-full\" [style.color]=\"tableDataConfig.iconColor\"\n        [style.backgroundColor]=\"tableDataConfig.iconBackgroundColor\">\n        <i [class]=\"tableDataConfig.iconName\"></i>\n\n    </div>\n    <div>\n        <p class=\"mb-2 text-sm font-medium text-gray-600 dark:text-gray-200\">\n            {{tableDataConfig.iconText}}\n        </p>\n        <p class=\"font-semibold\" [style.color]=\"tableDataConfig.color\"\n            [style.font-size.px]=\"tableDataConfig.size || 16\">\n            {{ currentDateData }}\n        </p>\n    </div>\n</div>\n\n<div class=\"flex flex-row justify-center items-start \n         bg-gray-200 dark:bg-gray-800 \n         text-gray-900 dark:text-gray-100 \n         p-4 mx-2 text-center transition-colors duration-300 border border-r\" *ngIf=\"!tableDataConfig.isIcon\">\n    <ng-container *ngIf=\"isLoader\">\n        <app-loader></app-loader>\n    </ng-container>\n    <ng-container *ngIf=\"!isLoader\">\n        <div class=\"flex justify-center items-center font-bold p-2\" [style.color]=\"tableDataConfig.color\"\n            [style.font-size.px]=\"tableDataConfig.size || 16\">\n            {{ currentDateData }}\n        </div>\n    </ng-container>\n</div>" }]
         }], ctorParameters: function () { return [{ type: CommonService }, { type: i3$1.ToastrService }]; }, propDecorators: { chartDataSource: [{
                 type: Input,
                 args: ['chartDataSource']
@@ -9322,10 +9383,10 @@ class GammaAdvanceChartComponent {
     }
 }
 GammaAdvanceChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GammaAdvanceChartComponent, deps: [{ token: CommonService }, { token: i3$1.ToastrService }, { token: kpicommonService$1 }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: APP_ENVIRONMENT }], target: i0.ɵɵFactoryTarget.Component });
-GammaAdvanceChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: GammaAdvanceChartComponent, selector: "app-gamma-advance-chart", inputs: { componentId: "componentId", kpi_name: "kpi_name", chartDataSource: "chartDataSource" }, outputs: { onChartPointClick: "onChartPointClick" }, ngImport: i0, template: "<div class=\"not-full-screen\" (dblclick)=\"toggleFullScreen()\">\n    <ng-container *ngIf=\"page_config?.widGetConfig?.display\">\n        <app-title [title]=\"page_config.widGetConfig.widgetTitle\" [operators]=\"page_config.operations\"\n            [displayType]=\"'chart'\"></app-title>\n    </ng-container>\n    <div class=\"mx-2 p-2 bg-gray-200 dark:bg-gray-800 text-gray-900 dark:text-gray-100\">\n        <app-loader *ngIf=\"isLoader\"></app-loader>\n        <ng-container\n            *ngIf=\"chartConfig.chartType !== 'doughnut' && chartConfig.chartType !== 'pie' && chartConfig.chartType !== 'funnel' && chartConfig.chartType !== 'bubble'\">\n            \n            <dx-chart id=\"chart\"  [dataSource]=\"finalChartDataSource\" (onPointClick)=\"getAllChartPointClick($event)\"\n                [title]=\"{ text: chartConfig.caption, font: { size: 14 } }\" *ngIf=\"!isLoader\"\n                [valueAxis]=\"chartConfig.valueAxisConfig\">\n                <ng-container *ngIf=\"chartConfig.size\">\n                    <dxo-size [height]=\"chartConfig.size\">\n                    </dxo-size>\n                </ng-container>\n\n                <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n                    <ng-container *ngIf=\"item && item.axis\">\n                        <dxi-value-axis name=\"{{item.axis}}\" position=\"{{item.position}}\">\n                            <dxo-title text=\"{{item.name}}\"></dxo-title>\n                        </dxi-value-axis>\n                    </ng-container>\n\n                </ng-container>\n                <dxo-argument-axis>\n                    <dxo-label overlappingBehavior=\"rotate\" [rotationAngle]=\"270\"></dxo-label>\n                </dxo-argument-axis>\n                <dxo-tooltip [enabled]=\"true\" [shared]=\"true\" [customizeTooltip]=\"customizeTooltip\">\n                </dxo-tooltip>\n                <dxo-common-series-settings argumentField=\"{{chartConfig.argumentField}}\">\n                </dxo-common-series-settings>\n                <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n                    <ng-container *ngIf=\"item && item.color\">\n                        <dxi-series type=\"{{item.type}}\" valueField=\"{{item.valueField}}\" axis=\"{{item.axis}}\"\n                            name=\"{{item.name}}\" color=\"{{item.color}}\">\n                        </dxi-series>\n                    </ng-container>\n                    <ng-container *ngIf=\"item && !item.color\">\n                        <dxi-series type=\"{{item.type}}\" valueField=\"{{item.valueField}}\" axis=\"{{item.axis}}\"\n                            name=\"{{item.name}}\">\n                        </dxi-series>\n                    </ng-container>\n\n                </ng-container>\n                <dxo-size [height]=\"chartHeight\">\n                </dxo-size>\n                <dxo-legend [visible]=\"chartConfig.legendDisplay\" verticalAlignment=\"{{chartConfig.verticalAlignment}}\"\n                    horizontalAlignment=\"{{chartConfig.horizontalAlignment}}\">\n                </dxo-legend>\n            </dx-chart>\n        </ng-container>\n\n\n\n        <ng-container *ngIf=\"chartConfig.chartType == 'doughnut' || chartConfig.chartType == 'pie'\">\n\n            <dx-pie-chart id=\"pie\" [type]=\"chartConfig.chartType\" [title]=\"{ text: chartConfig.caption, font: { size: 14 } }\"\n                [dataSource]=\"finalChartDataSource\" centerTemplate=\"centerTemplate\"\n                (onPointClick)=\"pointClickHandler($event)\" [palette]=\"chartConfig.palette\">\n\n                <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n                    <ng-container *ngIf=\"item.color\">\n                        <dxi-series argumentField={{chartConfig.argumentField}} valueField=\"{{item.valueField}}\"\n                            name=\"{{item.name}}\" color=\"{{item.color}}\">\n                            <dxo-label [visible]=\"chartConfig.labelDisplay\" format=\"currency\">\n                                <dxo-connector [visible]=\"true\"></dxo-connector>\n                            </dxo-label>\n                        </dxi-series>\n                    </ng-container>\n                    <ng-container *ngIf=\"!item.color\">\n                        <dxi-series argumentField={{chartConfig.argumentField}} valueField=\"{{item.valueField}}\"\n                            name=\"{{item.name}}\">\n                            <dxo-label [visible]=\"chartConfig.labelDisplay\" format=\"currency\">\n                                <dxo-connector [visible]=\"true\"></dxo-connector>\n                            </dxo-label>\n                        </dxi-series>\n                    </ng-container>\n                </ng-container>\n                <ng-container *ngIf=\"chartConfig.size\">\n                    <dxo-size [height]=\"chartConfig.size\">\n                    </dxo-size>\n                </ng-container>\n                <dxo-legend [visible]=\"chartConfig.legendDisplay\"\n                    horizontalAlignment=\"{{chartConfig.horizontalAlignment}}\"\n                    verticalAlignment=\"{{chartConfig.verticalAlignment}}\"></dxo-legend>\n                <!-- <dxo-export [enabled]=\"true\"></dxo-export> -->\n                <dxo-tooltip [enabled]=\"true\" [customizeTooltip]=\"customizeTooltip\" format=\"currency\">\n                </dxo-tooltip>\n                <ng-container *ngIf=\"chartConfig.chartType == 'doughnut'\">\n                    <svg *dxTemplate=\"let pieChart of 'centerTemplate'\">\n                        <circle cx=\"100\" cy=\"100\" [attr.r]=\"pieChart.getInnerRadius() - 6\" fill=\"gray\" opacity=\"0.0001\">\n                        </circle>\n    \n                        <text text-anchor=\"middle\" style=\"font-size: 15px\" x=\"100\" y=\"100\" fill=\"#eee\">\n                            <tspan x=\"100\">{{ calculateTotal(pieChart) }}</tspan>\n                            <!-- display: inline -->\n                            <!-- <tspan x=\"100\" dy=\"20px\" style=\"font-weight: 600\"></tspan> -->\n                        </text>\n                    </svg>\n                </ng-container>\n            </dx-pie-chart>\n        </ng-container>\n\n        <ng-container *ngIf=\"chartConfig.chartType == 'funnel'\">\n            <dx-funnel id=\"funnel\" [dataSource]=\"finalChartDataSource\" argumentField=\"argument\" valueField=\"value\"\n                palette=\"Soft Pastel\">\n                <ng-container *ngIf=\"chartConfig.size\">\n                    <dxo-size [height]=\"chartConfig.size\">\n                    </dxo-size>\n                </ng-container>\n                <dxo-export [enabled]=\"false\"></dxo-export>\n                <dxo-tooltip [enabled]=\"true\"> </dxo-tooltip>\n                <dxo-item>\n                    <dxo-border [visible]=\"true\"> </dxo-border>\n                </dxo-item>\n                <dxo-label [visible]=\"true\" position=\"inside\" backgroundColor=\"none\"\n                    [customizeText]=\"customizeText\"></dxo-label>\n            </dx-funnel>\n\n        </ng-container>\n\n        <ng-container *ngIf=\"chartConfig.chartType == 'bubble'\">\n            <div class=\"mx-5 overflow-x-auto\">\n                <ng-container *ngFor=\"let item of heatChartDataSource.dataSet\">\n                    <div class=\"flex flex-row\">\n                        <div class=\"h-10 text-sm items-center min-w-12 max-w-[30%] justify-center flex\">\n                            {{item.datasource}}\n                        </div>\n                        <div class=\"inline-block \">\n                            <div class=\"flex flex-nowrap justify-center \">\n                                <ng-container *ngFor=\"let box of item.dataset\">\n                                    <div class=\"flex-shrink-0 min-w-10 max-w-[20%] h-10 text-sm cursor-pointer flex items-center justify-center text-gray-800\"\n                                        [matTooltip]=\"'Record Date: ' + box.recordDate + '\\nRecharge Count: ' + box.toolTip\"\n                                        matTooltipClass=\"custom-tooltip\">\n                                        <div class=\"rounded-full\" [ngStyle]=\"{\n                                                'background-color': box.isHovered ? 'rgb(135, 184, 106)' : box.color,\n                                                'width.px': box.size,\n                                                'hover': box.hover,\n                                                'height.px': box.size\n                                              }\" (mouseenter)=\"box.isHovered = true\"\n                                            (mouseleave)=\"box.isHovered = false\">\n                                        </div>\n                                    </div>\n                                </ng-container>\n                            </div>\n                        </div>\n                    </div>\n                </ng-container>\n                <div class=\"inline-block\">\n                    <div class=\"flex flex-nowrap justify-center\">\n                        <div class=\"flex-shrink-0 w-12 max-w-[20%] h-full flex items-center justify-center\"></div>\n                        <div *ngFor=\"let item of heatChartDataSource.argumentValue\"\n                            class=\"flex-shrink-0 w-10 max-w-[20%] min-h-14 flex text-sm items-center justify-center my-1\"\n                            [ngStyle]=\"{'height': 'auto'}\">\n                            <span class=\"text-rotate\">\n                                {{item}}\n                            </span>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </ng-container>\n\n\n    </div>\n\n    <button *ngIf=\"isFullScreen\" class=\"close-button\" (click)=\"toggleFullScreen()\">Close</button>\n</div>", dependencies: [{ kind: "directive", type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i6.DxoExportComponent, selector: "dxo-export", inputs: ["backgroundColor", "enabled", "fileName", "formats", "margin", "printingEnabled", "proxyUrl", "svgToCanvas", "allowExportSelectedData", "customizeExcelCell", "excelFilterEnabled", "excelWrapTextEnabled", "ignoreExcelErrors", "texts"] }, { kind: "component", type: i6.DxoLabelComponent, selector: "dxo-label", inputs: ["connectorColor", "connectorWidth", "customizeText", "font", "format", "indent", "visible", "horizontalAlignment", "position", "text", "verticalAlignment", "alignment", "customizeHint", "displayMode", "indentFromAxis", "overlappingBehavior", "rotationAngle", "staggeringSpacing", "template", "textOverflow", "wordWrap", "argumentFormat", "backgroundColor", "border", "connector", "displayFormat", "horizontalOffset", "showForZeroValues", "verticalOffset", "hideFirstOrLast", "indentFromTick", "useRangeColors", "location", "showColon", "radialOffset", "topIndent", "shadow", "useNodeColors", "dataField", "enabled"] }, { kind: "component", type: i6.DxoLegendComponent, selector: "dxo-legend", inputs: ["backgroundColor", "border", "columnCount", "columnItemSpacing", "customizeHint", "customizeItems", "customizeText", "font", "horizontalAlignment", "itemsAlignment", "itemTextFormat", "itemTextPosition", "margin", "markerSize", "markerTemplate", "orientation", "paddingLeftRight", "paddingTopBottom", "rowCount", "rowItemSpacing", "title", "verticalAlignment", "visible", "hoverMode", "position"] }, { kind: "component", type: i6.DxoBorderComponent, selector: "dxo-border", inputs: ["color", "cornerRadius", "dashStyle", "opacity", "visible", "width", "bottom", "left", "right", "top"] }, { kind: "component", type: i6.DxoTitleComponent, selector: "dxo-title", inputs: ["font", "horizontalAlignment", "margin", "placeholderSize", "subtitle", "text", "verticalAlignment", "textOverflow", "wordWrap", "alignment"] }, { kind: "component", type: i6.DxoSizeComponent, selector: "dxo-size", inputs: ["height", "width"] }, { kind: "component", type: i6.DxoTooltipComponent, selector: "dxo-tooltip", inputs: ["arrowLength", "border", "color", "container", "contentTemplate", "cornerRadius", "customizeTooltip", "enabled", "font", "format", "interactive", "opacity", "paddingLeftRight", "paddingTopBottom", "shadow", "zIndex", "argumentFormat", "location", "shared", "isShown", "text", "position", "showMode", "customizeLinkTooltip", "customizeNodeTooltip", "linkTooltipTemplate", "nodeTooltipTemplate"] }, { kind: "component", type: i7$1.DxChartComponent, selector: "dx-chart", inputs: ["adaptiveLayout", "adjustOnZoom", "animation", "annotations", "argumentAxis", "autoHidePointMarkers", "barGroupPadding", "barGroupWidth", "commonAnnotationSettings", "commonAxisSettings", "commonPaneSettings", "commonSeriesSettings", "containerBackgroundColor", "crosshair", "customizeAnnotation", "customizeLabel", "customizePoint", "dataPrepareSettings", "dataSource", "defaultPane", "disabled", "elementAttr", "export", "legend", "loadingIndicator", "margin", "maxBubbleSize", "minBubbleSize", "negativesAsZeroes", "palette", "paletteExtensionMode", "panes", "pathModified", "pointSelectionMode", "redrawOnResize", "resizePanesOnZoom", "resolveLabelOverlapping", "rotated", "rtlEnabled", "scrollBar", "series", "seriesSelectionMode", "seriesTemplate", "size", "stickyHovering", "synchronizeMultiAxes", "theme", "title", "tooltip", "valueAxis", "zoomAndPan"], outputs: ["onArgumentAxisClick", "onDisposing", "onDone", "onDrawn", "onExported", "onExporting", "onFileSaving", "onIncidentOccurred", "onInitialized", "onLegendClick", "onOptionChanged", "onPointClick", "onPointHoverChanged", "onPointSelectionChanged", "onSeriesClick", "onSeriesHoverChanged", "onSeriesSelectionChanged", "onTooltipHidden", "onTooltipShown", "onZoomEnd", "onZoomStart", "adaptiveLayoutChange", "adjustOnZoomChange", "animationChange", "annotationsChange", "argumentAxisChange", "autoHidePointMarkersChange", "barGroupPaddingChange", "barGroupWidthChange", "commonAnnotationSettingsChange", "commonAxisSettingsChange", "commonPaneSettingsChange", "commonSeriesSettingsChange", "containerBackgroundColorChange", "crosshairChange", "customizeAnnotationChange", "customizeLabelChange", "customizePointChange", "dataPrepareSettingsChange", "dataSourceChange", "defaultPaneChange", "disabledChange", "elementAttrChange", "exportChange", "legendChange", "loadingIndicatorChange", "marginChange", "maxBubbleSizeChange", "minBubbleSizeChange", "negativesAsZeroesChange", "paletteChange", "paletteExtensionModeChange", "panesChange", "pathModifiedChange", "pointSelectionModeChange", "redrawOnResizeChange", "resizePanesOnZoomChange", "resolveLabelOverlappingChange", "rotatedChange", "rtlEnabledChange", "scrollBarChange", "seriesChange", "seriesSelectionModeChange", "seriesTemplateChange", "sizeChange", "stickyHoveringChange", "synchronizeMultiAxesChange", "themeChange", "titleChange", "tooltipChange", "valueAxisChange", "zoomAndPanChange"] }, { kind: "component", type: i6.DxoArgumentAxisComponent, selector: "dxo-argument-axis", inputs: ["aggregateByCategory", "aggregatedPointsPosition", "aggregationGroupWidth", "aggregationInterval", "allowDecimals", "argumentType", "axisDivisionFactor", "breaks", "breakStyle", "categories", "color", "constantLines", "constantLineStyle", "customPosition", "customPositionAxis", "discreteAxisDivisionMode", "endOnTick", "grid", "holidays", "hoverMode", "inverted", "label", "linearThreshold", "logarithmBase", "maxValueMargin", "minorGrid", "minorTick", "minorTickCount", "minorTickInterval", "minValueMargin", "minVisualRangeLength", "offset", "opacity", "placeholderSize", "position", "singleWorkdays", "strips", "stripStyle", "tick", "tickInterval", "title", "type", "valueMarginsEnabled", "visible", "visualRange", "visualRangeUpdateMode", "wholeRange", "width", "workdaysOnly", "workWeek", "firstPointOnStartAngle", "originValue", "period", "startAngle"], outputs: ["visualRangeChange"] }, { kind: "component", type: i6.DxoCommonSeriesSettingsComponent, selector: "dxo-common-series-settings", inputs: ["aggregation", "area", "argumentField", "axis", "bar", "barOverlapGroup", "barPadding", "barWidth", "border", "bubble", "candlestick", "closeValueField", "color", "cornerRadius", "dashStyle", "fullstackedarea", "fullstackedbar", "fullstackedline", "fullstackedspline", "fullstackedsplinearea", "highValueField", "hoverMode", "hoverStyle", "ignoreEmptyPoints", "innerColor", "label", "line", "lowValueField", "maxLabelCount", "minBarSize", "opacity", "openValueField", "pane", "point", "rangearea", "rangebar", "rangeValue1Field", "rangeValue2Field", "reduction", "scatter", "selectionMode", "selectionStyle", "showInLegend", "sizeField", "spline", "splinearea", "stack", "stackedarea", "stackedbar", "stackedline", "stackedspline", "stackedsplinearea", "steparea", "stepline", "stock", "tagField", "type", "valueErrorBar", "valueField", "visible", "width", "argumentType", "minSegmentSize", "smallValuesGrouping", "closed"] }, { kind: "component", type: i6.DxoConnectorComponent, selector: "dxo-connector", inputs: ["color", "visible", "width", "opacity"] }, { kind: "component", type: i6.DxiSeriesComponent, selector: "dxi-series", inputs: ["aggregation", "argumentField", "axis", "barOverlapGroup", "barPadding", "barWidth", "border", "closeValueField", "color", "cornerRadius", "dashStyle", "highValueField", "hoverMode", "hoverStyle", "ignoreEmptyPoints", "innerColor", "label", "lowValueField", "maxLabelCount", "minBarSize", "name", "opacity", "openValueField", "pane", "point", "rangeValue1Field", "rangeValue2Field", "reduction", "selectionMode", "selectionStyle", "showInLegend", "sizeField", "stack", "tag", "tagField", "type", "valueErrorBar", "valueField", "visible", "width", "argumentType", "minSegmentSize", "smallValuesGrouping", "closed"] }, { kind: "component", type: i6.DxiValueAxisComponent, selector: "dxi-value-axis", inputs: ["aggregatedPointsPosition", "allowDecimals", "autoBreaksEnabled", "axisDivisionFactor", "breaks", "breakStyle", "categories", "color", "constantLines", "constantLineStyle", "customPosition", "discreteAxisDivisionMode", "endOnTick", "grid", "inverted", "label", "linearThreshold", "logarithmBase", "maxAutoBreakCount", "maxValueMargin", "minorGrid", "minorTick", "minorTickCount", "minorTickInterval", "minValueMargin", "minVisualRangeLength", "multipleAxesSpacing", "name", "offset", "opacity", "pane", "placeholderSize", "position", "showZero", "strips", "stripStyle", "synchronizedValue", "tick", "tickInterval", "title", "type", "valueMarginsEnabled", "valueType", "visible", "visualRange", "visualRangeUpdateMode", "wholeRange", "width"], outputs: ["visualRangeChange"] }, { kind: "component", type: i8$3.DxFunnelComponent, selector: "dx-funnel", inputs: ["adaptiveLayout", "algorithm", "argumentField", "colorField", "dataSource", "disabled", "elementAttr", "export", "hoverEnabled", "inverted", "item", "label", "legend", "loadingIndicator", "margin", "neckHeight", "neckWidth", "palette", "paletteExtensionMode", "pathModified", "redrawOnResize", "resolveLabelOverlapping", "rtlEnabled", "selectionMode", "size", "sortData", "theme", "title", "tooltip", "valueField"], outputs: ["onDisposing", "onDrawn", "onExported", "onExporting", "onFileSaving", "onHoverChanged", "onIncidentOccurred", "onInitialized", "onItemClick", "onLegendClick", "onOptionChanged", "onSelectionChanged", "adaptiveLayoutChange", "algorithmChange", "argumentFieldChange", "colorFieldChange", "dataSourceChange", "disabledChange", "elementAttrChange", "exportChange", "hoverEnabledChange", "invertedChange", "itemChange", "labelChange", "legendChange", "loadingIndicatorChange", "marginChange", "neckHeightChange", "neckWidthChange", "paletteChange", "paletteExtensionModeChange", "pathModifiedChange", "redrawOnResizeChange", "resolveLabelOverlappingChange", "rtlEnabledChange", "selectionModeChange", "sizeChange", "sortDataChange", "themeChange", "titleChange", "tooltipChange", "valueFieldChange"] }, { kind: "component", type: i6.DxoItemComponent, selector: "dxo-item", inputs: ["border", "hoverStyle", "selectionStyle"] }, { kind: "component", type: i10.DxPieChartComponent, selector: "dx-pie-chart", inputs: ["adaptiveLayout", "animation", "annotations", "centerTemplate", "commonAnnotationSettings", "commonSeriesSettings", "customizeAnnotation", "customizeLabel", "customizePoint", "dataSource", "diameter", "disabled", "elementAttr", "export", "innerRadius", "legend", "loadingIndicator", "margin", "minDiameter", "palette", "paletteExtensionMode", "pathModified", "pointSelectionMode", "redrawOnResize", "resolveLabelOverlapping", "rtlEnabled", "segmentsDirection", "series", "seriesTemplate", "size", "sizeGroup", "startAngle", "theme", "title", "tooltip", "type"], outputs: ["onDisposing", "onDone", "onDrawn", "onExported", "onExporting", "onFileSaving", "onIncidentOccurred", "onInitialized", "onLegendClick", "onOptionChanged", "onPointClick", "onPointHoverChanged", "onPointSelectionChanged", "onTooltipHidden", "onTooltipShown", "adaptiveLayoutChange", "animationChange", "annotationsChange", "centerTemplateChange", "commonAnnotationSettingsChange", "commonSeriesSettingsChange", "customizeAnnotationChange", "customizeLabelChange", "customizePointChange", "dataSourceChange", "diameterChange", "disabledChange", "elementAttrChange", "exportChange", "innerRadiusChange", "legendChange", "loadingIndicatorChange", "marginChange", "minDiameterChange", "paletteChange", "paletteExtensionModeChange", "pathModifiedChange", "pointSelectionModeChange", "redrawOnResizeChange", "resolveLabelOverlappingChange", "rtlEnabledChange", "segmentsDirectionChange", "seriesChange", "seriesTemplateChange", "sizeChange", "sizeGroupChange", "startAngleChange", "themeChange", "titleChange", "tooltipChange", "typeChange"] }, { kind: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: AppTitleComponent, selector: "app-title", inputs: ["title", "multiple", "isFilterDisplay", "icon", "iconName", "displayType", "keyToPass", "fixOperationLevles", "operators"], outputs: ["onOperatorClick"] }, { kind: "component", type: LoaderComponent, selector: "app-loader" }] });
+GammaAdvanceChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: GammaAdvanceChartComponent, selector: "app-gamma-advance-chart", inputs: { componentId: "componentId", kpi_name: "kpi_name", chartDataSource: "chartDataSource" }, outputs: { onChartPointClick: "onChartPointClick" }, ngImport: i0, template: "<div class=\"not-full-screen\" (dblclick)=\"toggleFullScreen()\">\n    <ng-container *ngIf=\"page_config?.widGetConfig?.display\">\n        <app-title [title]=\"page_config.widGetConfig.widgetTitle\" [operators]=\"page_config.operations\"\n            [displayType]=\"'chart'\"></app-title>\n    </ng-container>\n    <div class=\"mx-2 p-2 bg-gray-200 dark:bg-gray-800 text-gray-900 dark:text-gray-100\">\n        <app-loader *ngIf=\"isLoader\"></app-loader>\n        <ng-container\n            *ngIf=\"chartConfig.chartType !== 'doughnut' && chartConfig.chartType !== 'pie' && chartConfig.chartType !== 'funnel' && chartConfig.chartType !== 'bubble'\">\n            \n            <dx-chart id=\"chart\"  [dataSource]=\"finalChartDataSource\" (onPointClick)=\"getAllChartPointClick($event)\" [palette]=\"chartConfig.palette\"\n                [title]=\"{ text: chartConfig.caption, font: { size: 14 } }\" *ngIf=\"!isLoader\"\n                [valueAxis]=\"chartConfig.valueAxisConfig\">\n                <ng-container *ngIf=\"chartConfig.size\">\n                    <dxo-size [height]=\"chartConfig.size\">\n                    </dxo-size>\n                </ng-container>\n\n                <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n                    <ng-container *ngIf=\"item && item.axis\">\n                        <dxi-value-axis name=\"{{item.axis}}\" position=\"{{item.position}}\">\n                            <dxo-title text=\"{{item.name}}\"></dxo-title>\n                        </dxi-value-axis>\n                    </ng-container>\n\n                </ng-container>\n                <dxo-argument-axis>\n                    <dxo-label overlappingBehavior=\"rotate\" [rotationAngle]=\"270\"></dxo-label>\n                </dxo-argument-axis>\n                <dxo-tooltip [enabled]=\"true\" [shared]=\"true\" [customizeTooltip]=\"customizeTooltip\">\n                </dxo-tooltip>\n                <dxo-common-series-settings argumentField=\"{{chartConfig.argumentField}}\">\n                </dxo-common-series-settings>\n                <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n                    <ng-container *ngIf=\"item && item.color\">\n                        <dxi-series type=\"{{item.type}}\" valueField=\"{{item.valueField}}\" axis=\"{{item.axis}}\"\n                            name=\"{{item.name}}\" color=\"{{item.color}}\">\n                        </dxi-series>\n                    </ng-container>\n                    <ng-container *ngIf=\"item && !item.color\">\n                        <dxi-series type=\"{{item.type}}\" valueField=\"{{item.valueField}}\" axis=\"{{item.axis}}\"\n                            name=\"{{item.name}}\">\n                        </dxi-series>\n                    </ng-container>\n\n                </ng-container>\n                <dxo-size [height]=\"chartHeight\">\n                </dxo-size>\n                <dxo-legend [visible]=\"chartConfig.legendDisplay\" verticalAlignment=\"{{chartConfig.verticalAlignment}}\"\n                    horizontalAlignment=\"{{chartConfig.horizontalAlignment}}\">\n                </dxo-legend>\n            </dx-chart>\n        </ng-container>\n\n\n\n        <ng-container *ngIf=\"chartConfig.chartType == 'doughnut' || chartConfig.chartType == 'pie'\">\n\n            <dx-pie-chart id=\"pie\" [type]=\"chartConfig.chartType\" [title]=\"{ text: chartConfig.caption, font: { size: 14 } }\"\n                [dataSource]=\"finalChartDataSource\" centerTemplate=\"centerTemplate\"\n                (onPointClick)=\"pointClickHandler($event)\" [palette]=\"chartConfig.palette\">\n\n                <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n                    <ng-container *ngIf=\"item.color\">\n                        <dxi-series argumentField={{chartConfig.argumentField}} valueField=\"{{item.valueField}}\"\n                            name=\"{{item.name}}\" color=\"{{item.color}}\">\n                            <dxo-label [visible]=\"chartConfig.labelDisplay\" format=\"currency\">\n                                <dxo-connector [visible]=\"true\"></dxo-connector>\n                            </dxo-label>\n                        </dxi-series>\n                    </ng-container>\n                    <ng-container *ngIf=\"!item.color\">\n                        <dxi-series argumentField={{chartConfig.argumentField}} valueField=\"{{item.valueField}}\"\n                            name=\"{{item.name}}\">\n                            <dxo-label [visible]=\"chartConfig.labelDisplay\" format=\"currency\">\n                                <dxo-connector [visible]=\"true\"></dxo-connector>\n                            </dxo-label>\n                        </dxi-series>\n                    </ng-container>\n                </ng-container>\n                <ng-container *ngIf=\"chartConfig.size\">\n                    <dxo-size [height]=\"chartConfig.size\">\n                    </dxo-size>\n                </ng-container>\n                <dxo-legend [visible]=\"chartConfig.legendDisplay\"\n                    horizontalAlignment=\"{{chartConfig.horizontalAlignment}}\"\n                    verticalAlignment=\"{{chartConfig.verticalAlignment}}\"></dxo-legend>\n                <!-- <dxo-export [enabled]=\"true\"></dxo-export> -->\n                <dxo-tooltip [enabled]=\"true\" [customizeTooltip]=\"customizeTooltip\" format=\"currency\">\n                </dxo-tooltip>\n                <ng-container *ngIf=\"chartConfig.chartType == 'doughnut'\">\n                    <svg *dxTemplate=\"let pieChart of 'centerTemplate'\">\n                        <circle cx=\"100\" cy=\"100\" [attr.r]=\"pieChart.getInnerRadius() - 6\" fill=\"gray\" opacity=\"0.0001\">\n                        </circle>\n    \n                        <text text-anchor=\"middle\" style=\"font-size: 15px\" x=\"100\" y=\"100\" fill=\"#eee\">\n                            <tspan x=\"100\">{{ calculateTotal(pieChart) }}</tspan>\n                            <!-- display: inline -->\n                            <!-- <tspan x=\"100\" dy=\"20px\" style=\"font-weight: 600\"></tspan> -->\n                        </text>\n                    </svg>\n                </ng-container>\n            </dx-pie-chart>\n        </ng-container>\n\n        <ng-container *ngIf=\"chartConfig.chartType == 'funnel'\">\n            <dx-funnel id=\"funnel\" [dataSource]=\"finalChartDataSource\" argumentField=\"argument\" valueField=\"value\"\n                palette=\"Soft Pastel\">\n                <ng-container *ngIf=\"chartConfig.size\">\n                    <dxo-size [height]=\"chartConfig.size\">\n                    </dxo-size>\n                </ng-container>\n                <dxo-export [enabled]=\"false\"></dxo-export>\n                <dxo-tooltip [enabled]=\"true\"> </dxo-tooltip>\n                <dxo-item>\n                    <dxo-border [visible]=\"true\"> </dxo-border>\n                </dxo-item>\n                <dxo-label [visible]=\"true\" position=\"inside\" backgroundColor=\"none\"\n                    [customizeText]=\"customizeText\"></dxo-label>\n            </dx-funnel>\n\n        </ng-container>\n\n        <ng-container *ngIf=\"chartConfig.chartType == 'bubble'\">\n            <div class=\"mx-5 overflow-x-auto\">\n                <ng-container *ngFor=\"let item of heatChartDataSource.dataSet\">\n                    <div class=\"flex flex-row\">\n                        <div class=\"h-10 text-sm items-center min-w-12 max-w-[30%] justify-center flex\">\n                            {{item.datasource}}\n                        </div>\n                        <div class=\"inline-block \">\n                            <div class=\"flex flex-nowrap justify-center \">\n                                <ng-container *ngFor=\"let box of item.dataset\">\n                                    <div class=\"flex-shrink-0 min-w-10 max-w-[20%] h-10 text-sm cursor-pointer flex items-center justify-center text-gray-800\"\n                                        [matTooltip]=\"'Record Date: ' + box.recordDate + '\\nRecharge Count: ' + box.toolTip\"\n                                        matTooltipClass=\"custom-tooltip\">\n                                        <div class=\"rounded-full\" [ngStyle]=\"{\n                                                'background-color': box.isHovered ? 'rgb(135, 184, 106)' : box.color,\n                                                'width.px': box.size,\n                                                'hover': box.hover,\n                                                'height.px': box.size\n                                              }\" (mouseenter)=\"box.isHovered = true\"\n                                            (mouseleave)=\"box.isHovered = false\">\n                                        </div>\n                                    </div>\n                                </ng-container>\n                            </div>\n                        </div>\n                    </div>\n                </ng-container>\n                <div class=\"inline-block\">\n                    <div class=\"flex flex-nowrap justify-center\">\n                        <div class=\"flex-shrink-0 w-12 max-w-[20%] h-full flex items-center justify-center\"></div>\n                        <div *ngFor=\"let item of heatChartDataSource.argumentValue\"\n                            class=\"flex-shrink-0 w-10 max-w-[20%] min-h-14 flex text-sm items-center justify-center my-1\"\n                            [ngStyle]=\"{'height': 'auto'}\">\n                            <span class=\"text-rotate\">\n                                {{item}}\n                            </span>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </ng-container>\n\n\n    </div>\n\n    <button *ngIf=\"isFullScreen\" class=\"close-button\" (click)=\"toggleFullScreen()\">Close</button>\n</div>", dependencies: [{ kind: "directive", type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i6.DxoExportComponent, selector: "dxo-export", inputs: ["backgroundColor", "enabled", "fileName", "formats", "margin", "printingEnabled", "proxyUrl", "svgToCanvas", "allowExportSelectedData", "customizeExcelCell", "excelFilterEnabled", "excelWrapTextEnabled", "ignoreExcelErrors", "texts"] }, { kind: "component", type: i6.DxoLabelComponent, selector: "dxo-label", inputs: ["connectorColor", "connectorWidth", "customizeText", "font", "format", "indent", "visible", "horizontalAlignment", "position", "text", "verticalAlignment", "alignment", "customizeHint", "displayMode", "indentFromAxis", "overlappingBehavior", "rotationAngle", "staggeringSpacing", "template", "textOverflow", "wordWrap", "argumentFormat", "backgroundColor", "border", "connector", "displayFormat", "horizontalOffset", "showForZeroValues", "verticalOffset", "hideFirstOrLast", "indentFromTick", "useRangeColors", "location", "showColon", "radialOffset", "topIndent", "shadow", "useNodeColors", "dataField", "enabled"] }, { kind: "component", type: i6.DxoLegendComponent, selector: "dxo-legend", inputs: ["backgroundColor", "border", "columnCount", "columnItemSpacing", "customizeHint", "customizeItems", "customizeText", "font", "horizontalAlignment", "itemsAlignment", "itemTextFormat", "itemTextPosition", "margin", "markerSize", "markerTemplate", "orientation", "paddingLeftRight", "paddingTopBottom", "rowCount", "rowItemSpacing", "title", "verticalAlignment", "visible", "hoverMode", "position"] }, { kind: "component", type: i6.DxoBorderComponent, selector: "dxo-border", inputs: ["color", "cornerRadius", "dashStyle", "opacity", "visible", "width", "bottom", "left", "right", "top"] }, { kind: "component", type: i6.DxoTitleComponent, selector: "dxo-title", inputs: ["font", "horizontalAlignment", "margin", "placeholderSize", "subtitle", "text", "verticalAlignment", "textOverflow", "wordWrap", "alignment"] }, { kind: "component", type: i6.DxoSizeComponent, selector: "dxo-size", inputs: ["height", "width"] }, { kind: "component", type: i6.DxoTooltipComponent, selector: "dxo-tooltip", inputs: ["arrowLength", "border", "color", "container", "contentTemplate", "cornerRadius", "customizeTooltip", "enabled", "font", "format", "interactive", "opacity", "paddingLeftRight", "paddingTopBottom", "shadow", "zIndex", "argumentFormat", "location", "shared", "isShown", "text", "position", "showMode", "customizeLinkTooltip", "customizeNodeTooltip", "linkTooltipTemplate", "nodeTooltipTemplate"] }, { kind: "component", type: i7$1.DxChartComponent, selector: "dx-chart", inputs: ["adaptiveLayout", "adjustOnZoom", "animation", "annotations", "argumentAxis", "autoHidePointMarkers", "barGroupPadding", "barGroupWidth", "commonAnnotationSettings", "commonAxisSettings", "commonPaneSettings", "commonSeriesSettings", "containerBackgroundColor", "crosshair", "customizeAnnotation", "customizeLabel", "customizePoint", "dataPrepareSettings", "dataSource", "defaultPane", "disabled", "elementAttr", "export", "legend", "loadingIndicator", "margin", "maxBubbleSize", "minBubbleSize", "negativesAsZeroes", "palette", "paletteExtensionMode", "panes", "pathModified", "pointSelectionMode", "redrawOnResize", "resizePanesOnZoom", "resolveLabelOverlapping", "rotated", "rtlEnabled", "scrollBar", "series", "seriesSelectionMode", "seriesTemplate", "size", "stickyHovering", "synchronizeMultiAxes", "theme", "title", "tooltip", "valueAxis", "zoomAndPan"], outputs: ["onArgumentAxisClick", "onDisposing", "onDone", "onDrawn", "onExported", "onExporting", "onFileSaving", "onIncidentOccurred", "onInitialized", "onLegendClick", "onOptionChanged", "onPointClick", "onPointHoverChanged", "onPointSelectionChanged", "onSeriesClick", "onSeriesHoverChanged", "onSeriesSelectionChanged", "onTooltipHidden", "onTooltipShown", "onZoomEnd", "onZoomStart", "adaptiveLayoutChange", "adjustOnZoomChange", "animationChange", "annotationsChange", "argumentAxisChange", "autoHidePointMarkersChange", "barGroupPaddingChange", "barGroupWidthChange", "commonAnnotationSettingsChange", "commonAxisSettingsChange", "commonPaneSettingsChange", "commonSeriesSettingsChange", "containerBackgroundColorChange", "crosshairChange", "customizeAnnotationChange", "customizeLabelChange", "customizePointChange", "dataPrepareSettingsChange", "dataSourceChange", "defaultPaneChange", "disabledChange", "elementAttrChange", "exportChange", "legendChange", "loadingIndicatorChange", "marginChange", "maxBubbleSizeChange", "minBubbleSizeChange", "negativesAsZeroesChange", "paletteChange", "paletteExtensionModeChange", "panesChange", "pathModifiedChange", "pointSelectionModeChange", "redrawOnResizeChange", "resizePanesOnZoomChange", "resolveLabelOverlappingChange", "rotatedChange", "rtlEnabledChange", "scrollBarChange", "seriesChange", "seriesSelectionModeChange", "seriesTemplateChange", "sizeChange", "stickyHoveringChange", "synchronizeMultiAxesChange", "themeChange", "titleChange", "tooltipChange", "valueAxisChange", "zoomAndPanChange"] }, { kind: "component", type: i6.DxoArgumentAxisComponent, selector: "dxo-argument-axis", inputs: ["aggregateByCategory", "aggregatedPointsPosition", "aggregationGroupWidth", "aggregationInterval", "allowDecimals", "argumentType", "axisDivisionFactor", "breaks", "breakStyle", "categories", "color", "constantLines", "constantLineStyle", "customPosition", "customPositionAxis", "discreteAxisDivisionMode", "endOnTick", "grid", "holidays", "hoverMode", "inverted", "label", "linearThreshold", "logarithmBase", "maxValueMargin", "minorGrid", "minorTick", "minorTickCount", "minorTickInterval", "minValueMargin", "minVisualRangeLength", "offset", "opacity", "placeholderSize", "position", "singleWorkdays", "strips", "stripStyle", "tick", "tickInterval", "title", "type", "valueMarginsEnabled", "visible", "visualRange", "visualRangeUpdateMode", "wholeRange", "width", "workdaysOnly", "workWeek", "firstPointOnStartAngle", "originValue", "period", "startAngle"], outputs: ["visualRangeChange"] }, { kind: "component", type: i6.DxoCommonSeriesSettingsComponent, selector: "dxo-common-series-settings", inputs: ["aggregation", "area", "argumentField", "axis", "bar", "barOverlapGroup", "barPadding", "barWidth", "border", "bubble", "candlestick", "closeValueField", "color", "cornerRadius", "dashStyle", "fullstackedarea", "fullstackedbar", "fullstackedline", "fullstackedspline", "fullstackedsplinearea", "highValueField", "hoverMode", "hoverStyle", "ignoreEmptyPoints", "innerColor", "label", "line", "lowValueField", "maxLabelCount", "minBarSize", "opacity", "openValueField", "pane", "point", "rangearea", "rangebar", "rangeValue1Field", "rangeValue2Field", "reduction", "scatter", "selectionMode", "selectionStyle", "showInLegend", "sizeField", "spline", "splinearea", "stack", "stackedarea", "stackedbar", "stackedline", "stackedspline", "stackedsplinearea", "steparea", "stepline", "stock", "tagField", "type", "valueErrorBar", "valueField", "visible", "width", "argumentType", "minSegmentSize", "smallValuesGrouping", "closed"] }, { kind: "component", type: i6.DxoConnectorComponent, selector: "dxo-connector", inputs: ["color", "visible", "width", "opacity"] }, { kind: "component", type: i6.DxiSeriesComponent, selector: "dxi-series", inputs: ["aggregation", "argumentField", "axis", "barOverlapGroup", "barPadding", "barWidth", "border", "closeValueField", "color", "cornerRadius", "dashStyle", "highValueField", "hoverMode", "hoverStyle", "ignoreEmptyPoints", "innerColor", "label", "lowValueField", "maxLabelCount", "minBarSize", "name", "opacity", "openValueField", "pane", "point", "rangeValue1Field", "rangeValue2Field", "reduction", "selectionMode", "selectionStyle", "showInLegend", "sizeField", "stack", "tag", "tagField", "type", "valueErrorBar", "valueField", "visible", "width", "argumentType", "minSegmentSize", "smallValuesGrouping", "closed"] }, { kind: "component", type: i6.DxiValueAxisComponent, selector: "dxi-value-axis", inputs: ["aggregatedPointsPosition", "allowDecimals", "autoBreaksEnabled", "axisDivisionFactor", "breaks", "breakStyle", "categories", "color", "constantLines", "constantLineStyle", "customPosition", "discreteAxisDivisionMode", "endOnTick", "grid", "inverted", "label", "linearThreshold", "logarithmBase", "maxAutoBreakCount", "maxValueMargin", "minorGrid", "minorTick", "minorTickCount", "minorTickInterval", "minValueMargin", "minVisualRangeLength", "multipleAxesSpacing", "name", "offset", "opacity", "pane", "placeholderSize", "position", "showZero", "strips", "stripStyle", "synchronizedValue", "tick", "tickInterval", "title", "type", "valueMarginsEnabled", "valueType", "visible", "visualRange", "visualRangeUpdateMode", "wholeRange", "width"], outputs: ["visualRangeChange"] }, { kind: "component", type: i8$2.DxFunnelComponent, selector: "dx-funnel", inputs: ["adaptiveLayout", "algorithm", "argumentField", "colorField", "dataSource", "disabled", "elementAttr", "export", "hoverEnabled", "inverted", "item", "label", "legend", "loadingIndicator", "margin", "neckHeight", "neckWidth", "palette", "paletteExtensionMode", "pathModified", "redrawOnResize", "resolveLabelOverlapping", "rtlEnabled", "selectionMode", "size", "sortData", "theme", "title", "tooltip", "valueField"], outputs: ["onDisposing", "onDrawn", "onExported", "onExporting", "onFileSaving", "onHoverChanged", "onIncidentOccurred", "onInitialized", "onItemClick", "onLegendClick", "onOptionChanged", "onSelectionChanged", "adaptiveLayoutChange", "algorithmChange", "argumentFieldChange", "colorFieldChange", "dataSourceChange", "disabledChange", "elementAttrChange", "exportChange", "hoverEnabledChange", "invertedChange", "itemChange", "labelChange", "legendChange", "loadingIndicatorChange", "marginChange", "neckHeightChange", "neckWidthChange", "paletteChange", "paletteExtensionModeChange", "pathModifiedChange", "redrawOnResizeChange", "resolveLabelOverlappingChange", "rtlEnabledChange", "selectionModeChange", "sizeChange", "sortDataChange", "themeChange", "titleChange", "tooltipChange", "valueFieldChange"] }, { kind: "component", type: i6.DxoItemComponent, selector: "dxo-item", inputs: ["border", "hoverStyle", "selectionStyle"] }, { kind: "component", type: i10.DxPieChartComponent, selector: "dx-pie-chart", inputs: ["adaptiveLayout", "animation", "annotations", "centerTemplate", "commonAnnotationSettings", "commonSeriesSettings", "customizeAnnotation", "customizeLabel", "customizePoint", "dataSource", "diameter", "disabled", "elementAttr", "export", "innerRadius", "legend", "loadingIndicator", "margin", "minDiameter", "palette", "paletteExtensionMode", "pathModified", "pointSelectionMode", "redrawOnResize", "resolveLabelOverlapping", "rtlEnabled", "segmentsDirection", "series", "seriesTemplate", "size", "sizeGroup", "startAngle", "theme", "title", "tooltip", "type"], outputs: ["onDisposing", "onDone", "onDrawn", "onExported", "onExporting", "onFileSaving", "onIncidentOccurred", "onInitialized", "onLegendClick", "onOptionChanged", "onPointClick", "onPointHoverChanged", "onPointSelectionChanged", "onTooltipHidden", "onTooltipShown", "adaptiveLayoutChange", "animationChange", "annotationsChange", "centerTemplateChange", "commonAnnotationSettingsChange", "commonSeriesSettingsChange", "customizeAnnotationChange", "customizeLabelChange", "customizePointChange", "dataSourceChange", "diameterChange", "disabledChange", "elementAttrChange", "exportChange", "innerRadiusChange", "legendChange", "loadingIndicatorChange", "marginChange", "minDiameterChange", "paletteChange", "paletteExtensionModeChange", "pathModifiedChange", "pointSelectionModeChange", "redrawOnResizeChange", "resolveLabelOverlappingChange", "rtlEnabledChange", "segmentsDirectionChange", "seriesChange", "seriesTemplateChange", "sizeChange", "sizeGroupChange", "startAngleChange", "themeChange", "titleChange", "tooltipChange", "typeChange"] }, { kind: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: AppTitleComponent, selector: "app-title", inputs: ["title", "multiple", "isFilterDisplay", "icon", "iconName", "displayType", "keyToPass", "fixOperationLevles", "operators"], outputs: ["onOperatorClick"] }, { kind: "component", type: LoaderComponent, selector: "app-loader" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GammaAdvanceChartComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-gamma-advance-chart', template: "<div class=\"not-full-screen\" (dblclick)=\"toggleFullScreen()\">\n    <ng-container *ngIf=\"page_config?.widGetConfig?.display\">\n        <app-title [title]=\"page_config.widGetConfig.widgetTitle\" [operators]=\"page_config.operations\"\n            [displayType]=\"'chart'\"></app-title>\n    </ng-container>\n    <div class=\"mx-2 p-2 bg-gray-200 dark:bg-gray-800 text-gray-900 dark:text-gray-100\">\n        <app-loader *ngIf=\"isLoader\"></app-loader>\n        <ng-container\n            *ngIf=\"chartConfig.chartType !== 'doughnut' && chartConfig.chartType !== 'pie' && chartConfig.chartType !== 'funnel' && chartConfig.chartType !== 'bubble'\">\n            \n            <dx-chart id=\"chart\"  [dataSource]=\"finalChartDataSource\" (onPointClick)=\"getAllChartPointClick($event)\"\n                [title]=\"{ text: chartConfig.caption, font: { size: 14 } }\" *ngIf=\"!isLoader\"\n                [valueAxis]=\"chartConfig.valueAxisConfig\">\n                <ng-container *ngIf=\"chartConfig.size\">\n                    <dxo-size [height]=\"chartConfig.size\">\n                    </dxo-size>\n                </ng-container>\n\n                <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n                    <ng-container *ngIf=\"item && item.axis\">\n                        <dxi-value-axis name=\"{{item.axis}}\" position=\"{{item.position}}\">\n                            <dxo-title text=\"{{item.name}}\"></dxo-title>\n                        </dxi-value-axis>\n                    </ng-container>\n\n                </ng-container>\n                <dxo-argument-axis>\n                    <dxo-label overlappingBehavior=\"rotate\" [rotationAngle]=\"270\"></dxo-label>\n                </dxo-argument-axis>\n                <dxo-tooltip [enabled]=\"true\" [shared]=\"true\" [customizeTooltip]=\"customizeTooltip\">\n                </dxo-tooltip>\n                <dxo-common-series-settings argumentField=\"{{chartConfig.argumentField}}\">\n                </dxo-common-series-settings>\n                <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n                    <ng-container *ngIf=\"item && item.color\">\n                        <dxi-series type=\"{{item.type}}\" valueField=\"{{item.valueField}}\" axis=\"{{item.axis}}\"\n                            name=\"{{item.name}}\" color=\"{{item.color}}\">\n                        </dxi-series>\n                    </ng-container>\n                    <ng-container *ngIf=\"item && !item.color\">\n                        <dxi-series type=\"{{item.type}}\" valueField=\"{{item.valueField}}\" axis=\"{{item.axis}}\"\n                            name=\"{{item.name}}\">\n                        </dxi-series>\n                    </ng-container>\n\n                </ng-container>\n                <dxo-size [height]=\"chartHeight\">\n                </dxo-size>\n                <dxo-legend [visible]=\"chartConfig.legendDisplay\" verticalAlignment=\"{{chartConfig.verticalAlignment}}\"\n                    horizontalAlignment=\"{{chartConfig.horizontalAlignment}}\">\n                </dxo-legend>\n            </dx-chart>\n        </ng-container>\n\n\n\n        <ng-container *ngIf=\"chartConfig.chartType == 'doughnut' || chartConfig.chartType == 'pie'\">\n\n            <dx-pie-chart id=\"pie\" [type]=\"chartConfig.chartType\" [title]=\"{ text: chartConfig.caption, font: { size: 14 } }\"\n                [dataSource]=\"finalChartDataSource\" centerTemplate=\"centerTemplate\"\n                (onPointClick)=\"pointClickHandler($event)\" [palette]=\"chartConfig.palette\">\n\n                <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n                    <ng-container *ngIf=\"item.color\">\n                        <dxi-series argumentField={{chartConfig.argumentField}} valueField=\"{{item.valueField}}\"\n                            name=\"{{item.name}}\" color=\"{{item.color}}\">\n                            <dxo-label [visible]=\"chartConfig.labelDisplay\" format=\"currency\">\n                                <dxo-connector [visible]=\"true\"></dxo-connector>\n                            </dxo-label>\n                        </dxi-series>\n                    </ng-container>\n                    <ng-container *ngIf=\"!item.color\">\n                        <dxi-series argumentField={{chartConfig.argumentField}} valueField=\"{{item.valueField}}\"\n                            name=\"{{item.name}}\">\n                            <dxo-label [visible]=\"chartConfig.labelDisplay\" format=\"currency\">\n                                <dxo-connector [visible]=\"true\"></dxo-connector>\n                            </dxo-label>\n                        </dxi-series>\n                    </ng-container>\n                </ng-container>\n                <ng-container *ngIf=\"chartConfig.size\">\n                    <dxo-size [height]=\"chartConfig.size\">\n                    </dxo-size>\n                </ng-container>\n                <dxo-legend [visible]=\"chartConfig.legendDisplay\"\n                    horizontalAlignment=\"{{chartConfig.horizontalAlignment}}\"\n                    verticalAlignment=\"{{chartConfig.verticalAlignment}}\"></dxo-legend>\n                <!-- <dxo-export [enabled]=\"true\"></dxo-export> -->\n                <dxo-tooltip [enabled]=\"true\" [customizeTooltip]=\"customizeTooltip\" format=\"currency\">\n                </dxo-tooltip>\n                <ng-container *ngIf=\"chartConfig.chartType == 'doughnut'\">\n                    <svg *dxTemplate=\"let pieChart of 'centerTemplate'\">\n                        <circle cx=\"100\" cy=\"100\" [attr.r]=\"pieChart.getInnerRadius() - 6\" fill=\"gray\" opacity=\"0.0001\">\n                        </circle>\n    \n                        <text text-anchor=\"middle\" style=\"font-size: 15px\" x=\"100\" y=\"100\" fill=\"#eee\">\n                            <tspan x=\"100\">{{ calculateTotal(pieChart) }}</tspan>\n                            <!-- display: inline -->\n                            <!-- <tspan x=\"100\" dy=\"20px\" style=\"font-weight: 600\"></tspan> -->\n                        </text>\n                    </svg>\n                </ng-container>\n            </dx-pie-chart>\n        </ng-container>\n\n        <ng-container *ngIf=\"chartConfig.chartType == 'funnel'\">\n            <dx-funnel id=\"funnel\" [dataSource]=\"finalChartDataSource\" argumentField=\"argument\" valueField=\"value\"\n                palette=\"Soft Pastel\">\n                <ng-container *ngIf=\"chartConfig.size\">\n                    <dxo-size [height]=\"chartConfig.size\">\n                    </dxo-size>\n                </ng-container>\n                <dxo-export [enabled]=\"false\"></dxo-export>\n                <dxo-tooltip [enabled]=\"true\"> </dxo-tooltip>\n                <dxo-item>\n                    <dxo-border [visible]=\"true\"> </dxo-border>\n                </dxo-item>\n                <dxo-label [visible]=\"true\" position=\"inside\" backgroundColor=\"none\"\n                    [customizeText]=\"customizeText\"></dxo-label>\n            </dx-funnel>\n\n        </ng-container>\n\n        <ng-container *ngIf=\"chartConfig.chartType == 'bubble'\">\n            <div class=\"mx-5 overflow-x-auto\">\n                <ng-container *ngFor=\"let item of heatChartDataSource.dataSet\">\n                    <div class=\"flex flex-row\">\n                        <div class=\"h-10 text-sm items-center min-w-12 max-w-[30%] justify-center flex\">\n                            {{item.datasource}}\n                        </div>\n                        <div class=\"inline-block \">\n                            <div class=\"flex flex-nowrap justify-center \">\n                                <ng-container *ngFor=\"let box of item.dataset\">\n                                    <div class=\"flex-shrink-0 min-w-10 max-w-[20%] h-10 text-sm cursor-pointer flex items-center justify-center text-gray-800\"\n                                        [matTooltip]=\"'Record Date: ' + box.recordDate + '\\nRecharge Count: ' + box.toolTip\"\n                                        matTooltipClass=\"custom-tooltip\">\n                                        <div class=\"rounded-full\" [ngStyle]=\"{\n                                                'background-color': box.isHovered ? 'rgb(135, 184, 106)' : box.color,\n                                                'width.px': box.size,\n                                                'hover': box.hover,\n                                                'height.px': box.size\n                                              }\" (mouseenter)=\"box.isHovered = true\"\n                                            (mouseleave)=\"box.isHovered = false\">\n                                        </div>\n                                    </div>\n                                </ng-container>\n                            </div>\n                        </div>\n                    </div>\n                </ng-container>\n                <div class=\"inline-block\">\n                    <div class=\"flex flex-nowrap justify-center\">\n                        <div class=\"flex-shrink-0 w-12 max-w-[20%] h-full flex items-center justify-center\"></div>\n                        <div *ngFor=\"let item of heatChartDataSource.argumentValue\"\n                            class=\"flex-shrink-0 w-10 max-w-[20%] min-h-14 flex text-sm items-center justify-center my-1\"\n                            [ngStyle]=\"{'height': 'auto'}\">\n                            <span class=\"text-rotate\">\n                                {{item}}\n                            </span>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </ng-container>\n\n\n    </div>\n\n    <button *ngIf=\"isFullScreen\" class=\"close-button\" (click)=\"toggleFullScreen()\">Close</button>\n</div>" }]
+            args: [{ selector: 'app-gamma-advance-chart', template: "<div class=\"not-full-screen\" (dblclick)=\"toggleFullScreen()\">\n    <ng-container *ngIf=\"page_config?.widGetConfig?.display\">\n        <app-title [title]=\"page_config.widGetConfig.widgetTitle\" [operators]=\"page_config.operations\"\n            [displayType]=\"'chart'\"></app-title>\n    </ng-container>\n    <div class=\"mx-2 p-2 bg-gray-200 dark:bg-gray-800 text-gray-900 dark:text-gray-100\">\n        <app-loader *ngIf=\"isLoader\"></app-loader>\n        <ng-container\n            *ngIf=\"chartConfig.chartType !== 'doughnut' && chartConfig.chartType !== 'pie' && chartConfig.chartType !== 'funnel' && chartConfig.chartType !== 'bubble'\">\n            \n            <dx-chart id=\"chart\"  [dataSource]=\"finalChartDataSource\" (onPointClick)=\"getAllChartPointClick($event)\" [palette]=\"chartConfig.palette\"\n                [title]=\"{ text: chartConfig.caption, font: { size: 14 } }\" *ngIf=\"!isLoader\"\n                [valueAxis]=\"chartConfig.valueAxisConfig\">\n                <ng-container *ngIf=\"chartConfig.size\">\n                    <dxo-size [height]=\"chartConfig.size\">\n                    </dxo-size>\n                </ng-container>\n\n                <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n                    <ng-container *ngIf=\"item && item.axis\">\n                        <dxi-value-axis name=\"{{item.axis}}\" position=\"{{item.position}}\">\n                            <dxo-title text=\"{{item.name}}\"></dxo-title>\n                        </dxi-value-axis>\n                    </ng-container>\n\n                </ng-container>\n                <dxo-argument-axis>\n                    <dxo-label overlappingBehavior=\"rotate\" [rotationAngle]=\"270\"></dxo-label>\n                </dxo-argument-axis>\n                <dxo-tooltip [enabled]=\"true\" [shared]=\"true\" [customizeTooltip]=\"customizeTooltip\">\n                </dxo-tooltip>\n                <dxo-common-series-settings argumentField=\"{{chartConfig.argumentField}}\">\n                </dxo-common-series-settings>\n                <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n                    <ng-container *ngIf=\"item && item.color\">\n                        <dxi-series type=\"{{item.type}}\" valueField=\"{{item.valueField}}\" axis=\"{{item.axis}}\"\n                            name=\"{{item.name}}\" color=\"{{item.color}}\">\n                        </dxi-series>\n                    </ng-container>\n                    <ng-container *ngIf=\"item && !item.color\">\n                        <dxi-series type=\"{{item.type}}\" valueField=\"{{item.valueField}}\" axis=\"{{item.axis}}\"\n                            name=\"{{item.name}}\">\n                        </dxi-series>\n                    </ng-container>\n\n                </ng-container>\n                <dxo-size [height]=\"chartHeight\">\n                </dxo-size>\n                <dxo-legend [visible]=\"chartConfig.legendDisplay\" verticalAlignment=\"{{chartConfig.verticalAlignment}}\"\n                    horizontalAlignment=\"{{chartConfig.horizontalAlignment}}\">\n                </dxo-legend>\n            </dx-chart>\n        </ng-container>\n\n\n\n        <ng-container *ngIf=\"chartConfig.chartType == 'doughnut' || chartConfig.chartType == 'pie'\">\n\n            <dx-pie-chart id=\"pie\" [type]=\"chartConfig.chartType\" [title]=\"{ text: chartConfig.caption, font: { size: 14 } }\"\n                [dataSource]=\"finalChartDataSource\" centerTemplate=\"centerTemplate\"\n                (onPointClick)=\"pointClickHandler($event)\" [palette]=\"chartConfig.palette\">\n\n                <ng-container *ngFor=\"let item of chartConfig.chart_config\">\n                    <ng-container *ngIf=\"item.color\">\n                        <dxi-series argumentField={{chartConfig.argumentField}} valueField=\"{{item.valueField}}\"\n                            name=\"{{item.name}}\" color=\"{{item.color}}\">\n                            <dxo-label [visible]=\"chartConfig.labelDisplay\" format=\"currency\">\n                                <dxo-connector [visible]=\"true\"></dxo-connector>\n                            </dxo-label>\n                        </dxi-series>\n                    </ng-container>\n                    <ng-container *ngIf=\"!item.color\">\n                        <dxi-series argumentField={{chartConfig.argumentField}} valueField=\"{{item.valueField}}\"\n                            name=\"{{item.name}}\">\n                            <dxo-label [visible]=\"chartConfig.labelDisplay\" format=\"currency\">\n                                <dxo-connector [visible]=\"true\"></dxo-connector>\n                            </dxo-label>\n                        </dxi-series>\n                    </ng-container>\n                </ng-container>\n                <ng-container *ngIf=\"chartConfig.size\">\n                    <dxo-size [height]=\"chartConfig.size\">\n                    </dxo-size>\n                </ng-container>\n                <dxo-legend [visible]=\"chartConfig.legendDisplay\"\n                    horizontalAlignment=\"{{chartConfig.horizontalAlignment}}\"\n                    verticalAlignment=\"{{chartConfig.verticalAlignment}}\"></dxo-legend>\n                <!-- <dxo-export [enabled]=\"true\"></dxo-export> -->\n                <dxo-tooltip [enabled]=\"true\" [customizeTooltip]=\"customizeTooltip\" format=\"currency\">\n                </dxo-tooltip>\n                <ng-container *ngIf=\"chartConfig.chartType == 'doughnut'\">\n                    <svg *dxTemplate=\"let pieChart of 'centerTemplate'\">\n                        <circle cx=\"100\" cy=\"100\" [attr.r]=\"pieChart.getInnerRadius() - 6\" fill=\"gray\" opacity=\"0.0001\">\n                        </circle>\n    \n                        <text text-anchor=\"middle\" style=\"font-size: 15px\" x=\"100\" y=\"100\" fill=\"#eee\">\n                            <tspan x=\"100\">{{ calculateTotal(pieChart) }}</tspan>\n                            <!-- display: inline -->\n                            <!-- <tspan x=\"100\" dy=\"20px\" style=\"font-weight: 600\"></tspan> -->\n                        </text>\n                    </svg>\n                </ng-container>\n            </dx-pie-chart>\n        </ng-container>\n\n        <ng-container *ngIf=\"chartConfig.chartType == 'funnel'\">\n            <dx-funnel id=\"funnel\" [dataSource]=\"finalChartDataSource\" argumentField=\"argument\" valueField=\"value\"\n                palette=\"Soft Pastel\">\n                <ng-container *ngIf=\"chartConfig.size\">\n                    <dxo-size [height]=\"chartConfig.size\">\n                    </dxo-size>\n                </ng-container>\n                <dxo-export [enabled]=\"false\"></dxo-export>\n                <dxo-tooltip [enabled]=\"true\"> </dxo-tooltip>\n                <dxo-item>\n                    <dxo-border [visible]=\"true\"> </dxo-border>\n                </dxo-item>\n                <dxo-label [visible]=\"true\" position=\"inside\" backgroundColor=\"none\"\n                    [customizeText]=\"customizeText\"></dxo-label>\n            </dx-funnel>\n\n        </ng-container>\n\n        <ng-container *ngIf=\"chartConfig.chartType == 'bubble'\">\n            <div class=\"mx-5 overflow-x-auto\">\n                <ng-container *ngFor=\"let item of heatChartDataSource.dataSet\">\n                    <div class=\"flex flex-row\">\n                        <div class=\"h-10 text-sm items-center min-w-12 max-w-[30%] justify-center flex\">\n                            {{item.datasource}}\n                        </div>\n                        <div class=\"inline-block \">\n                            <div class=\"flex flex-nowrap justify-center \">\n                                <ng-container *ngFor=\"let box of item.dataset\">\n                                    <div class=\"flex-shrink-0 min-w-10 max-w-[20%] h-10 text-sm cursor-pointer flex items-center justify-center text-gray-800\"\n                                        [matTooltip]=\"'Record Date: ' + box.recordDate + '\\nRecharge Count: ' + box.toolTip\"\n                                        matTooltipClass=\"custom-tooltip\">\n                                        <div class=\"rounded-full\" [ngStyle]=\"{\n                                                'background-color': box.isHovered ? 'rgb(135, 184, 106)' : box.color,\n                                                'width.px': box.size,\n                                                'hover': box.hover,\n                                                'height.px': box.size\n                                              }\" (mouseenter)=\"box.isHovered = true\"\n                                            (mouseleave)=\"box.isHovered = false\">\n                                        </div>\n                                    </div>\n                                </ng-container>\n                            </div>\n                        </div>\n                    </div>\n                </ng-container>\n                <div class=\"inline-block\">\n                    <div class=\"flex flex-nowrap justify-center\">\n                        <div class=\"flex-shrink-0 w-12 max-w-[20%] h-full flex items-center justify-center\"></div>\n                        <div *ngFor=\"let item of heatChartDataSource.argumentValue\"\n                            class=\"flex-shrink-0 w-10 max-w-[20%] min-h-14 flex text-sm items-center justify-center my-1\"\n                            [ngStyle]=\"{'height': 'auto'}\">\n                            <span class=\"text-rotate\">\n                                {{item}}\n                            </span>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </ng-container>\n\n\n    </div>\n\n    <button *ngIf=\"isFullScreen\" class=\"close-button\" (click)=\"toggleFullScreen()\">Close</button>\n</div>" }]
         }], ctorParameters: function () { return [{ type: CommonService }, { type: i3$1.ToastrService }, { type: kpicommonService$1 }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [APP_ENVIRONMENT]
@@ -10993,10 +11054,10 @@ class LoadingComponent$1 {
     }
 }
 LoadingComponent$1.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LoadingComponent$1, deps: [], target: i0.ɵɵFactoryTarget.Component });
-LoadingComponent$1.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: LoadingComponent$1, selector: "app-loading", ngImport: i0, template: "<!-- <div class=\"modal\" id=\"loading-modal\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"exampleModalLabel\" aria-hidden=\"true\" style=\"display: none;\">\n    <div class=\"modal-dialog\" role=\"document\" style=\"max-width: 600px;margin: 8.75rem auto;\">\n        <div class=\"modal-content\">\n            <div class=\"modal-body\" style=\"padding: 20px;\">\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\n                      <span aria-hidden=\"true\">&times;</span>\n                    </button> Loading. Please Wait...\n                <div class=\"progress\" style=\"height: 25px\">\n                    <div class=\"progress-bar progress-bar-striped progress-bar-animated bg-info\" role=\"progressbar\" style=\"width: 100%\" aria-valuenow=\"50\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div> -->\n<!-- <div class=\"loader-background \">\n    <div class=\"loader\"></div>\n</div> -->\n<div class=\"popup\">\n    <div class=\"popup__content\">\n        <div class=\"loader\"></div>\n    </div>\n</div>", styles: [".popup{height:100%;width:100%;position:fixed;top:0;left:0;background-color:#33333386;z-index:999}.popup__content{display:grid;place-items:center;position:relative;height:30rem;width:75%;top:50%;left:50%;transform:translate(-50%,-50%)}.loader{border:16px solid #f3f3f3;border-top:16px solid #ccc;border-radius:100%;width:120px;height:120px;animation:spin 2s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] });
+LoadingComponent$1.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: LoadingComponent$1, selector: "app-loading", ngImport: i0, template: "<!-- <div class=\"modal\" id=\"loading-modal\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"exampleModalLabel\" aria-hidden=\"true\" style=\"display: none;\">\n    <div class=\"modal-dialog\" role=\"document\" style=\"max-width: 600px;margin: 8.75rem auto;\">\n        <div class=\"modal-content\">\n            <div class=\"modal-body\" style=\"padding: 20px;\">\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\n                      <span aria-hidden=\"true\">&times;</span>\n                    </button> Loading. Please Wait...\n                <div class=\"progress\" style=\"height: 25px\">\n                    <div class=\"progress-bar progress-bar-striped progress-bar-animated bg-info\" role=\"progressbar\" style=\"width: 100%\" aria-valuenow=\"50\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div> -->\n<!-- <div class=\"loader-background \">\n    <div class=\"loader\"></div>\n</div> -->\n<div class=\"popup\">\n    <div class=\"popup__content\">\n        <div class=\"loader\"></div>\n    </div>\n</div>", styles: [".popup{height:100%;width:100%;position:fixed;top:0;left:0;background-color:#33333386;z-index:99}.popup__content{display:grid;place-items:center;position:relative;height:30rem;width:75%;top:50%;left:50%;transform:translate(-50%,-50%)}.loader{border:16px solid #f3f3f3;border-top:16px solid #ccc;border-radius:100%;width:120px;height:120px;animation:spin 2s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LoadingComponent$1, decorators: [{
             type: Component,
-            args: [{ selector: 'app-loading', template: "<!-- <div class=\"modal\" id=\"loading-modal\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"exampleModalLabel\" aria-hidden=\"true\" style=\"display: none;\">\n    <div class=\"modal-dialog\" role=\"document\" style=\"max-width: 600px;margin: 8.75rem auto;\">\n        <div class=\"modal-content\">\n            <div class=\"modal-body\" style=\"padding: 20px;\">\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\n                      <span aria-hidden=\"true\">&times;</span>\n                    </button> Loading. Please Wait...\n                <div class=\"progress\" style=\"height: 25px\">\n                    <div class=\"progress-bar progress-bar-striped progress-bar-animated bg-info\" role=\"progressbar\" style=\"width: 100%\" aria-valuenow=\"50\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div> -->\n<!-- <div class=\"loader-background \">\n    <div class=\"loader\"></div>\n</div> -->\n<div class=\"popup\">\n    <div class=\"popup__content\">\n        <div class=\"loader\"></div>\n    </div>\n</div>", styles: [".popup{height:100%;width:100%;position:fixed;top:0;left:0;background-color:#33333386;z-index:999}.popup__content{display:grid;place-items:center;position:relative;height:30rem;width:75%;top:50%;left:50%;transform:translate(-50%,-50%)}.loader{border:16px solid #f3f3f3;border-top:16px solid #ccc;border-radius:100%;width:120px;height:120px;animation:spin 2s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
+            args: [{ selector: 'app-loading', template: "<!-- <div class=\"modal\" id=\"loading-modal\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"exampleModalLabel\" aria-hidden=\"true\" style=\"display: none;\">\n    <div class=\"modal-dialog\" role=\"document\" style=\"max-width: 600px;margin: 8.75rem auto;\">\n        <div class=\"modal-content\">\n            <div class=\"modal-body\" style=\"padding: 20px;\">\n                <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\n                      <span aria-hidden=\"true\">&times;</span>\n                    </button> Loading. Please Wait...\n                <div class=\"progress\" style=\"height: 25px\">\n                    <div class=\"progress-bar progress-bar-striped progress-bar-animated bg-info\" role=\"progressbar\" style=\"width: 100%\" aria-valuenow=\"50\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div> -->\n<!-- <div class=\"loader-background \">\n    <div class=\"loader\"></div>\n</div> -->\n<div class=\"popup\">\n    <div class=\"popup__content\">\n        <div class=\"loader\"></div>\n    </div>\n</div>", styles: [".popup{height:100%;width:100%;position:fixed;top:0;left:0;background-color:#33333386;z-index:99}.popup__content{display:grid;place-items:center;position:relative;height:30rem;width:75%;top:50%;left:50%;transform:translate(-50%,-50%)}.loader{border:16px solid #f3f3f3;border-top:16px solid #ccc;border-radius:100%;width:120px;height:120px;animation:spin 2s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
         }], ctorParameters: function () { return []; } });
 
 class SqlPipe {
@@ -11046,7 +11107,7 @@ class CreateDatasetSqlComponent {
                 serverColumn: "limit",
                 operatorName: "eq",
                 defaultValue: "5000",
-                dataType: "string"
+                dataType: "int"
             });
         }
         this.apiBulderDataset = value;
@@ -12714,6 +12775,7 @@ class PageControlerComponent {
             { "compName": "CreateMetricsComponent", "item": "Create Metrics" },
             { "compName": "ExceptionOperationComponent", "item": "Exception Opration" },
         ];
+        this.selected_page = [];
     }
     ngOnInit() {
         this.getAppPageConfigs();
@@ -12838,12 +12900,29 @@ class PageControlerComponent {
             this.scrollContainer.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'end' });
         }, 0);
     }
+    isSelectionChange(event) {
+        this.selected_page = event.selectedRowsData;
+    }
+    getDownloadPage() {
+        if (this.selected_page.length == 0) {
+            this.toastr.error('No data available to export.', 'Export Error');
+            return;
+        }
+        const jsonStr = JSON.stringify(this.selected_page, null, 2);
+        const blob = new Blob([jsonStr], { type: 'application/json' });
+        const url = window.URL.createObjectURL(blob);
+        const anchor = document.createElement('a');
+        anchor.href = url;
+        anchor.download = `exported_pages.json`;
+        anchor.click();
+        window.URL.revokeObjectURL(url);
+    }
 }
 PageControlerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PageControlerComponent, deps: [{ token: i2.Router }, { token: CommonService }, { token: ApplicationContentService }, { token: i3$1.ToastrService }, { token: DynamicRouteService }], target: i0.ɵɵFactoryTarget.Component });
-PageControlerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PageControlerComponent, selector: "app-dashbord-controller", viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true }], ngImport: i0, template: "<div class=\"flex flex-col flex-auto min-w-0\">\n\n    <lib-common-header [pageTitle]=\"' Application Pages'\"></lib-common-header>\n\n\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 dark:text-white border-b pb-3 flex items-center\">\n                <i class=\"fa fa-table mr-2\"></i> Manage Pages\n                <div class=\"ml-auto\">\n                    <button class=\"{{commonService.btn_primary_md}}\" (click)=\"createNewTamplete()\">\n                        Create New Page\n                    </button>\n                </div>\n            </h6>\n            <app-loader *ngIf=\"isLoader\"></app-loader>\n            <dx-data-grid [columnAutoWidth]=\"true\" [dataSource]=\"templateDataSource\" [hoverStateEnabled]=\"true\"\n                *ngIf=\"!isLoader\" [selectedRowKeys]=\"[]\" [showBorders]=\"true\" [showColumnLines]=\"true\"\n                [showRowLines]=\"true\">\n                <dxo-paging [pageSize]=\"10\"></dxo-paging>\n                <dxo-export [enabled]=\"true\"></dxo-export>\n                <dxo-search-panel [highlightCaseSensitive]=\"true\" [visible]=\"true\">\n                </dxo-search-panel>\n\n                <dxi-column dataField=\"pageName\"></dxi-column>\n                <!-- <dxi-column dataField=\"pageTitle\"></dxi-column> -->\n                <!-- <dxi-column dataField=\"pageTemplate\"></dxi-column> -->\n                <dxi-column dataField=\"pageId\"></dxi-column>\n                <dxi-column dataField=\"pageUrl\"></dxi-column>\n                <!-- <dxi-column dataField=\"createdBy\"></dxi-column> -->\n                <!-- <dxi-column dataField=\"creationDate\"></dxi-column> -->\n                <dxi-column dataField=\"creationDate\" sortOrder=\"desc\"></dxi-column>\n                <dxi-column dataField=\"Configured\" cellTemplate=\"cellTemplate2\" fixed=\"true\" fixedPosition=\"left\"></dxi-column>\n                <dxi-column dataField=\"action\" cellTemplate=\"cellTemplate\" fixed=\"true\" fixedPosition=\"right\"></dxi-column>\n                <div *dxTemplate=\"let data of 'cellTemplate'\">\n                    <button class=\"{{commonService.btn_primary_md}}\" (click)=\"editTemplate(data.data)\">\n                        Edit\n                    </button>\n                    <button class=\"{{commonService.btn_success_md}}\" (click)=\"viewsPage(data.data)\">\n                        View Page\n                    </button>\n                    <button class=\"{{commonService.btn_danger_md}}\" (click)=\"deleteTamplete(data.data)\">\n                        Delete\n                    </button>\n                </div>\n                <div *dxTemplate=\"let data of 'cellTemplate2'\">\n\n                    <button class=\"{{commonService.btn_success_md}}\" (click)=\"configuredTemplate(data.data)\">\n                        Configure\n                    </button>\n\n                </div>\n\n\n\n            </dx-data-grid>\n        </div>\n    </div>\n\n    <div #scrollContainer>\n        <div class=\"p-2\" *ngIf=\"isNewTampleteCreate\">\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\n                    class=\"mb-2 font-bold text-lg tracking-tight text-gray-900 dark:text-white border-b pb-3 flex items-center\">\n                    <i class=\"fa fa-table mr-2\"></i> Create Page\n                </h6>\n\n                <!-- Flex container for form fields -->\n                <!-- <div class=\"flex flex-wrap w-full\">\n                    <div class=\"w-1/2 px-2 mb-2\">\n                        <div class=\"text-md mb-1\">Page Name</div>\n                        <dx-text-box [(ngModel)]=\"dashboardConfig.pageName\"></dx-text-box>\n                    </div>\n                    <div class=\"w-1/2 px-2 mb-2\">\n                        <div class=\"text-md mb-1\">Page Title</div>\n                        <dx-text-box [(ngModel)]=\"dashboardConfig.pageTitle\"></dx-text-box>\n                    </div>\n                    <div class=\"w-1/2 px-2 mb-2\">\n                        <div class=\"text-md mb-1\">Page URL</div>\n                        <dx-text-box [(ngModel)]=\"dashboardConfig.pageUrl\"></dx-text-box>\n                    </div>\n                    <div class=\"w-1/2 px-2 mb-2\">\n                        <div class=\"text-md mb-1\">Page Template</div>\n                        <dx-select-box [items]=\"componentTemplates\" displayExpr=\"item\" valueExpr=\"compName\"\n                            [(ngModel)]=\"dashboardConfig.pageTemplate\" searchEnabled=\"true\"></dx-select-box>\n                    </div>\n                    <div class=\"w-1/2 px-2 mb-2\">\n                        <div class=\"text-md mb-1\">Page Documentation Url</div>\n                        <dx-text-box [(ngModel)]=\"dashboardConfig.pageDocumentationUrl\"></dx-text-box>\n                    </div>\n                    <div class=\"w-1/2 px-2 mb-2\">\n                        <div class=\"text-md mb-1\">Page Filter</div>\n                        <dx-select-box [items]=\"filterDataSource\" displayExpr=\"filterName\" valueExpr=\"filterId\"\n                            [(ngModel)]=\"dashboardConfig.filterId\"></dx-select-box>\n                    </div>\n                </div> -->\n                <div class=\"grid grid-cols-2 gap-4 w-full\">\n                    <div class=\"px-2 mb-2\">\n                        <div class=\"text-md mb-1\">Page Name</div>\n                        <dx-text-box [(ngModel)]=\"dashboardConfig.pageName\"></dx-text-box>\n                    </div>\n                    <div class=\"px-2 mb-2\">\n                        <div class=\"text-md mb-1\">Page Title</div>\n                        <dx-text-box [(ngModel)]=\"dashboardConfig.pageTitle\"></dx-text-box>\n                    </div>\n                    <div class=\"px-2 mb-2\">\n                        <div class=\"text-md mb-1\">Page URL</div>\n                        <dx-text-box [(ngModel)]=\"dashboardConfig.pageUrl\"></dx-text-box>\n                    </div>\n                    <div class=\"px-2 mb-2\">\n                        <div class=\"text-md mb-1\">Page Template</div>\n                        <dx-select-box [items]=\"componentTemplates\" displayExpr=\"item\" valueExpr=\"compName\"\n                            [(ngModel)]=\"dashboardConfig.pageTemplate\" [searchEnabled]=\"true\"></dx-select-box>\n                    </div>\n                    <div class=\"px-2 mb-2\">\n                        <div class=\"text-md mb-1\">Page Documentation Url</div>\n                        <dx-text-box [(ngModel)]=\"dashboardConfig.pageDocumentationUrl\"></dx-text-box>\n                    </div>\n                    <div class=\"px-2 mb-2\">\n                        <div class=\"text-md mb-1\">Page Filter</div>\n                        <dx-select-box [items]=\"filterDataSource\" displayExpr=\"filterName\" valueExpr=\"filterId\"\n                            [(ngModel)]=\"dashboardConfig.filterId\"></dx-select-box>\n                    </div>\n                </div>\n\n                <!-- Submit button -->\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 Template</button>\n                </div>\n            </div>\n        </div>\n    </div>\n\n\n\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.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.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$1.DxSelectBoxComponent, selector: "dx-select-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "buttons", "dataSource", "deferRendering", "disabled", "displayExpr", "displayValue", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "fieldTemplate", "focusStateEnabled", "grouped", "groupTemplate", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "items", "itemTemplate", "label", "labelMode", "maxLength", "minSearchLength", "name", "noDataText", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "searchEnabled", "searchExpr", "searchMode", "searchTimeout", "selectedItem", "showClearButton", "showDataBeforeSearch", "showDropDownButton", "showSelectionControls", "spellcheck", "stylingMode", "tabIndex", "text", "useItemTextAsTitle", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueChangeEvent", "valueExpr", "visible", "width", "wrapItemText"], outputs: ["onChange", "onClosed", "onContentReady", "onCopy", "onCustomItemCreating", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onItemClick", "onKeyDown", "onKeyUp", "onOpened", "onOptionChanged", "onPaste", "onSelectionChanged", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "dataSourceChange", "deferRenderingChange", "disabledChange", "displayExprChange", "displayValueChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "groupedChange", "groupTemplateChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "itemsChange", "itemTemplateChange", "labelChange", "labelModeChange", "maxLengthChange", "minSearchLengthChange", "nameChange", "noDataTextChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "searchEnabledChange", "searchExprChange", "searchModeChange", "searchTimeoutChange", "selectedItemChange", "showClearButtonChange", "showDataBeforeSearchChange", "showDropDownButtonChange", "showSelectionControlsChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useItemTextAsTitleChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "valueExprChange", "visibleChange", "widthChange", "wrapItemTextChange", "onBlur"] }, { kind: "component", type: i7.DxTextBoxComponent, selector: "dx-text-box", inputs: ["accessKey", "activeStateEnabled", "buttons", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "label", "labelMode", "mask", "maskChar", "maskInvalidMessage", "maskRules", "maxLength", "mode", "name", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showMaskMode", "spellcheck", "stylingMode", "tabIndex", "text", "useMaskedValue", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOptionChanged", "onPaste", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "labelChange", "labelModeChange", "maskChange", "maskCharChange", "maskInvalidMessageChange", "maskRulesChange", "maxLengthChange", "modeChange", "nameChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showMaskModeChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useMaskedValueChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: LoaderComponent, selector: "app-loader" }, { kind: "component", type: CommonHeaderComponent, selector: "lib-common-header", inputs: ["pageTitle"] }] });
+PageControlerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PageControlerComponent, selector: "app-dashbord-controller", viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true }], ngImport: i0, template: "<div class=\"flex flex-col flex-auto min-w-0\">\n\n    <lib-common-header [pageTitle]=\"' Application Pages'\"></lib-common-header>\n\n\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 dark:text-white border-b pb-3 flex items-center\">\n                <i class=\"fa fa-table mr-2\"></i> Manage Pages\n                <div class=\"ml-auto\">\n                    <button class=\"{{commonService.btn_primary_md}}\" (click)=\"createNewTamplete()\">\n                        Create New Page\n                    </button>\n                     <button class=\"{{commonService.btn_success_md}}\" (click)=\"getDownloadPage()\"\n                        *ngIf=\"selected_page.length !== 0\">\n                        Export Pages\n                    </button>\n                </div>\n            </h6>\n            <app-loader *ngIf=\"isLoader\"></app-loader>\n            <dx-data-grid [columnAutoWidth]=\"true\" [dataSource]=\"templateDataSource\" [hoverStateEnabled]=\"true\"\n                *ngIf=\"!isLoader\" [selectedRowKeys]=\"[]\" [showBorders]=\"true\" [showColumnLines]=\"true\"\n                [showRowLines]=\"true\" (onSelectionChanged)=\"isSelectionChange($event)\">\n                 <dxo-selection [selectAllMode]=\"'allMode'\" [showCheckBoxesMode]=\"'always'\" mode=\"multiple\">\n                </dxo-selection>\n                <dxo-paging [pageSize]=\"10\"></dxo-paging>\n                <dxo-export [enabled]=\"true\"></dxo-export>\n                <dxo-search-panel [highlightCaseSensitive]=\"true\" [visible]=\"true\">\n                </dxo-search-panel>\n\n                <dxi-column dataField=\"pageName\"></dxi-column>\n                <!-- <dxi-column dataField=\"pageTitle\"></dxi-column> -->\n                <!-- <dxi-column dataField=\"pageTemplate\"></dxi-column> -->\n                <dxi-column dataField=\"pageId\"></dxi-column>\n                <dxi-column dataField=\"pageUrl\"></dxi-column>\n                <!-- <dxi-column dataField=\"createdBy\"></dxi-column> -->\n                <!-- <dxi-column dataField=\"creationDate\"></dxi-column> -->\n                <dxi-column dataField=\"creationDate\" sortOrder=\"desc\"></dxi-column>\n                <dxi-column dataField=\"Configured\" cellTemplate=\"cellTemplate2\" fixed=\"true\" fixedPosition=\"left\"></dxi-column>\n                <dxi-column dataField=\"action\" cellTemplate=\"cellTemplate\" fixed=\"true\" fixedPosition=\"right\"></dxi-column>\n                <div *dxTemplate=\"let data of 'cellTemplate'\">\n                    <button class=\"{{commonService.btn_primary_md}}\" (click)=\"editTemplate(data.data)\">\n                        Edit\n                    </button>\n                    <button class=\"{{commonService.btn_success_md}}\" (click)=\"viewsPage(data.data)\">\n                        View Page\n                    </button>\n                    <button class=\"{{commonService.btn_danger_md}}\" (click)=\"deleteTamplete(data.data)\">\n                        Delete\n                    </button>\n                </div>\n                <div *dxTemplate=\"let data of 'cellTemplate2'\">\n\n                    <button class=\"{{commonService.btn_success_md}}\" (click)=\"configuredTemplate(data.data)\">\n                        Configure\n                    </button>\n\n                </div>\n\n\n\n            </dx-data-grid>\n        </div>\n    </div>\n\n    <div #scrollContainer>\n        <div class=\"p-2\" *ngIf=\"isNewTampleteCreate\">\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\n                    class=\"mb-2 font-bold text-lg tracking-tight text-gray-900 dark:text-white border-b pb-3 flex items-center\">\n                    <i class=\"fa fa-table mr-2\"></i> Create Page\n                </h6>\n\n                <!-- Flex container for form fields -->\n                <!-- <div class=\"flex flex-wrap w-full\">\n                    <div class=\"w-1/2 px-2 mb-2\">\n                        <div class=\"text-md mb-1\">Page Name</div>\n                        <dx-text-box [(ngModel)]=\"dashboardConfig.pageName\"></dx-text-box>\n                    </div>\n                    <div class=\"w-1/2 px-2 mb-2\">\n                        <div class=\"text-md mb-1\">Page Title</div>\n                        <dx-text-box [(ngModel)]=\"dashboardConfig.pageTitle\"></dx-text-box>\n                    </div>\n                    <div class=\"w-1/2 px-2 mb-2\">\n                        <div class=\"text-md mb-1\">Page URL</div>\n                        <dx-text-box [(ngModel)]=\"dashboardConfig.pageUrl\"></dx-text-box>\n                    </div>\n                    <div class=\"w-1/2 px-2 mb-2\">\n                        <div class=\"text-md mb-1\">Page Template</div>\n                        <dx-select-box [items]=\"componentTemplates\" displayExpr=\"item\" valueExpr=\"compName\"\n                            [(ngModel)]=\"dashboardConfig.pageTemplate\" searchEnabled=\"true\"></dx-select-box>\n                    </div>\n                    <div class=\"w-1/2 px-2 mb-2\">\n                        <div class=\"text-md mb-1\">Page Documentation Url</div>\n                        <dx-text-box [(ngModel)]=\"dashboardConfig.pageDocumentationUrl\"></dx-text-box>\n                    </div>\n                    <div class=\"w-1/2 px-2 mb-2\">\n                        <div class=\"text-md mb-1\">Page Filter</div>\n                        <dx-select-box [items]=\"filterDataSource\" displayExpr=\"filterName\" valueExpr=\"filterId\"\n                            [(ngModel)]=\"dashboardConfig.filterId\"></dx-select-box>\n                    </div>\n                </div> -->\n                <div class=\"grid grid-cols-2 gap-4 w-full\">\n                    <div class=\"px-2 mb-2\">\n                        <div class=\"text-md mb-1\">Page Name</div>\n                        <dx-text-box [(ngModel)]=\"dashboardConfig.pageName\"></dx-text-box>\n                    </div>\n                    <div class=\"px-2 mb-2\">\n                        <div class=\"text-md mb-1\">Page Title</div>\n                        <dx-text-box [(ngModel)]=\"dashboardConfig.pageTitle\"></dx-text-box>\n                    </div>\n                    <div class=\"px-2 mb-2\">\n                        <div class=\"text-md mb-1\">Page URL</div>\n                        <dx-text-box [(ngModel)]=\"dashboardConfig.pageUrl\"></dx-text-box>\n                    </div>\n                    <div class=\"px-2 mb-2\">\n                        <div class=\"text-md mb-1\">Page Template</div>\n                        <dx-select-box [items]=\"componentTemplates\" displayExpr=\"item\" valueExpr=\"compName\"\n                            [(ngModel)]=\"dashboardConfig.pageTemplate\" [searchEnabled]=\"true\"></dx-select-box>\n                    </div>\n                    <div class=\"px-2 mb-2\">\n                        <div class=\"text-md mb-1\">Page Documentation Url</div>\n                        <dx-text-box [(ngModel)]=\"dashboardConfig.pageDocumentationUrl\"></dx-text-box>\n                    </div>\n                    <div class=\"px-2 mb-2\">\n                        <div class=\"text-md mb-1\">Page Filter</div>\n                        <dx-select-box [items]=\"filterDataSource\" displayExpr=\"filterName\" valueExpr=\"filterId\"\n                            [(ngModel)]=\"dashboardConfig.filterId\"></dx-select-box>\n                    </div>\n                </div>\n\n                <!-- Submit button -->\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 Template</button>\n                </div>\n            </div>\n        </div>\n    </div>\n\n\n\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.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.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: i6$1.DxSelectBoxComponent, selector: "dx-select-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "buttons", "dataSource", "deferRendering", "disabled", "displayExpr", "displayValue", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "fieldTemplate", "focusStateEnabled", "grouped", "groupTemplate", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "items", "itemTemplate", "label", "labelMode", "maxLength", "minSearchLength", "name", "noDataText", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "searchEnabled", "searchExpr", "searchMode", "searchTimeout", "selectedItem", "showClearButton", "showDataBeforeSearch", "showDropDownButton", "showSelectionControls", "spellcheck", "stylingMode", "tabIndex", "text", "useItemTextAsTitle", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueChangeEvent", "valueExpr", "visible", "width", "wrapItemText"], outputs: ["onChange", "onClosed", "onContentReady", "onCopy", "onCustomItemCreating", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onItemClick", "onKeyDown", "onKeyUp", "onOpened", "onOptionChanged", "onPaste", "onSelectionChanged", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "dataSourceChange", "deferRenderingChange", "disabledChange", "displayExprChange", "displayValueChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "groupedChange", "groupTemplateChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "itemsChange", "itemTemplateChange", "labelChange", "labelModeChange", "maxLengthChange", "minSearchLengthChange", "nameChange", "noDataTextChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "searchEnabledChange", "searchExprChange", "searchModeChange", "searchTimeoutChange", "selectedItemChange", "showClearButtonChange", "showDataBeforeSearchChange", "showDropDownButtonChange", "showSelectionControlsChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useItemTextAsTitleChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "valueExprChange", "visibleChange", "widthChange", "wrapItemTextChange", "onBlur"] }, { kind: "component", type: i7.DxTextBoxComponent, selector: "dx-text-box", inputs: ["accessKey", "activeStateEnabled", "buttons", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "label", "labelMode", "mask", "maskChar", "maskInvalidMessage", "maskRules", "maxLength", "mode", "name", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showMaskMode", "spellcheck", "stylingMode", "tabIndex", "text", "useMaskedValue", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOptionChanged", "onPaste", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "labelChange", "labelModeChange", "maskChange", "maskCharChange", "maskInvalidMessageChange", "maskRulesChange", "maxLengthChange", "modeChange", "nameChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showMaskModeChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useMaskedValueChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: LoaderComponent, selector: "app-loader" }, { kind: "component", type: CommonHeaderComponent, selector: "lib-common-header", inputs: ["pageTitle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PageControlerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-dashbord-controller', template: "<div class=\"flex flex-col flex-auto min-w-0\">\n\n    <lib-common-header [pageTitle]=\"' Application Pages'\"></lib-common-header>\n\n\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 dark:text-white border-b pb-3 flex items-center\">\n                <i class=\"fa fa-table mr-2\"></i> Manage Pages\n                <div class=\"ml-auto\">\n                    <button class=\"{{commonService.btn_primary_md}}\" (click)=\"createNewTamplete()\">\n                        Create New Page\n                    </button>\n                </div>\n            </h6>\n            <app-loader *ngIf=\"isLoader\"></app-loader>\n            <dx-data-grid [columnAutoWidth]=\"true\" [dataSource]=\"templateDataSource\" [hoverStateEnabled]=\"true\"\n                *ngIf=\"!isLoader\" [selectedRowKeys]=\"[]\" [showBorders]=\"true\" [showColumnLines]=\"true\"\n                [showRowLines]=\"true\">\n                <dxo-paging [pageSize]=\"10\"></dxo-paging>\n                <dxo-export [enabled]=\"true\"></dxo-export>\n                <dxo-search-panel [highlightCaseSensitive]=\"true\" [visible]=\"true\">\n                </dxo-search-panel>\n\n                <dxi-column dataField=\"pageName\"></dxi-column>\n                <!-- <dxi-column dataField=\"pageTitle\"></dxi-column> -->\n                <!-- <dxi-column dataField=\"pageTemplate\"></dxi-column> -->\n                <dxi-column dataField=\"pageId\"></dxi-column>\n                <dxi-column dataField=\"pageUrl\"></dxi-column>\n                <!-- <dxi-column dataField=\"createdBy\"></dxi-column> -->\n                <!-- <dxi-column dataField=\"creationDate\"></dxi-column> -->\n                <dxi-column dataField=\"creationDate\" sortOrder=\"desc\"></dxi-column>\n                <dxi-column dataField=\"Configured\" cellTemplate=\"cellTemplate2\" fixed=\"true\" fixedPosition=\"left\"></dxi-column>\n                <dxi-column dataField=\"action\" cellTemplate=\"cellTemplate\" fixed=\"true\" fixedPosition=\"right\"></dxi-column>\n                <div *dxTemplate=\"let data of 'cellTemplate'\">\n                    <button class=\"{{commonService.btn_primary_md}}\" (click)=\"editTemplate(data.data)\">\n                        Edit\n                    </button>\n                    <button class=\"{{commonService.btn_success_md}}\" (click)=\"viewsPage(data.data)\">\n                        View Page\n                    </button>\n                    <button class=\"{{commonService.btn_danger_md}}\" (click)=\"deleteTamplete(data.data)\">\n                        Delete\n                    </button>\n                </div>\n                <div *dxTemplate=\"let data of 'cellTemplate2'\">\n\n                    <button class=\"{{commonService.btn_success_md}}\" (click)=\"configuredTemplate(data.data)\">\n                        Configure\n                    </button>\n\n                </div>\n\n\n\n            </dx-data-grid>\n        </div>\n    </div>\n\n    <div #scrollContainer>\n        <div class=\"p-2\" *ngIf=\"isNewTampleteCreate\">\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\n                    class=\"mb-2 font-bold text-lg tracking-tight text-gray-900 dark:text-white border-b pb-3 flex items-center\">\n                    <i class=\"fa fa-table mr-2\"></i> Create Page\n                </h6>\n\n                <!-- Flex container for form fields -->\n                <!-- <div class=\"flex flex-wrap w-full\">\n                    <div class=\"w-1/2 px-2 mb-2\">\n                        <div class=\"text-md mb-1\">Page Name</div>\n                        <dx-text-box [(ngModel)]=\"dashboardConfig.pageName\"></dx-text-box>\n                    </div>\n                    <div class=\"w-1/2 px-2 mb-2\">\n                        <div class=\"text-md mb-1\">Page Title</div>\n                        <dx-text-box [(ngModel)]=\"dashboardConfig.pageTitle\"></dx-text-box>\n                    </div>\n                    <div class=\"w-1/2 px-2 mb-2\">\n                        <div class=\"text-md mb-1\">Page URL</div>\n                        <dx-text-box [(ngModel)]=\"dashboardConfig.pageUrl\"></dx-text-box>\n                    </div>\n                    <div class=\"w-1/2 px-2 mb-2\">\n                        <div class=\"text-md mb-1\">Page Template</div>\n                        <dx-select-box [items]=\"componentTemplates\" displayExpr=\"item\" valueExpr=\"compName\"\n                            [(ngModel)]=\"dashboardConfig.pageTemplate\" searchEnabled=\"true\"></dx-select-box>\n                    </div>\n                    <div class=\"w-1/2 px-2 mb-2\">\n                        <div class=\"text-md mb-1\">Page Documentation Url</div>\n                        <dx-text-box [(ngModel)]=\"dashboardConfig.pageDocumentationUrl\"></dx-text-box>\n                    </div>\n                    <div class=\"w-1/2 px-2 mb-2\">\n                        <div class=\"text-md mb-1\">Page Filter</div>\n                        <dx-select-box [items]=\"filterDataSource\" displayExpr=\"filterName\" valueExpr=\"filterId\"\n                            [(ngModel)]=\"dashboardConfig.filterId\"></dx-select-box>\n                    </div>\n                </div> -->\n                <div class=\"grid grid-cols-2 gap-4 w-full\">\n                    <div class=\"px-2 mb-2\">\n                        <div class=\"text-md mb-1\">Page Name</div>\n                        <dx-text-box [(ngModel)]=\"dashboardConfig.pageName\"></dx-text-box>\n                    </div>\n                    <div class=\"px-2 mb-2\">\n                        <div class=\"text-md mb-1\">Page Title</div>\n                        <dx-text-box [(ngModel)]=\"dashboardConfig.pageTitle\"></dx-text-box>\n                    </div>\n                    <div class=\"px-2 mb-2\">\n                        <div class=\"text-md mb-1\">Page URL</div>\n                        <dx-text-box [(ngModel)]=\"dashboardConfig.pageUrl\"></dx-text-box>\n                    </div>\n                    <div class=\"px-2 mb-2\">\n                        <div class=\"text-md mb-1\">Page Template</div>\n                        <dx-select-box [items]=\"componentTemplates\" displayExpr=\"item\" valueExpr=\"compName\"\n                            [(ngModel)]=\"dashboardConfig.pageTemplate\" [searchEnabled]=\"true\"></dx-select-box>\n                    </div>\n                    <div class=\"px-2 mb-2\">\n                        <div class=\"text-md mb-1\">Page Documentation Url</div>\n                        <dx-text-box [(ngModel)]=\"dashboardConfig.pageDocumentationUrl\"></dx-text-box>\n                    </div>\n                    <div class=\"px-2 mb-2\">\n                        <div class=\"text-md mb-1\">Page Filter</div>\n                        <dx-select-box [items]=\"filterDataSource\" displayExpr=\"filterName\" valueExpr=\"filterId\"\n                            [(ngModel)]=\"dashboardConfig.filterId\"></dx-select-box>\n                    </div>\n                </div>\n\n                <!-- Submit button -->\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 Template</button>\n                </div>\n            </div>\n        </div>\n    </div>\n\n\n\n</div>" }]
+            args: [{ selector: 'app-dashbord-controller', template: "<div class=\"flex flex-col flex-auto min-w-0\">\n\n    <lib-common-header [pageTitle]=\"' Application Pages'\"></lib-common-header>\n\n\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 dark:text-white border-b pb-3 flex items-center\">\n                <i class=\"fa fa-table mr-2\"></i> Manage Pages\n                <div class=\"ml-auto\">\n                    <button class=\"{{commonService.btn_primary_md}}\" (click)=\"createNewTamplete()\">\n                        Create New Page\n                    </button>\n                     <button class=\"{{commonService.btn_success_md}}\" (click)=\"getDownloadPage()\"\n                        *ngIf=\"selected_page.length !== 0\">\n                        Export Pages\n                    </button>\n                </div>\n            </h6>\n            <app-loader *ngIf=\"isLoader\"></app-loader>\n            <dx-data-grid [columnAutoWidth]=\"true\" [dataSource]=\"templateDataSource\" [hoverStateEnabled]=\"true\"\n                *ngIf=\"!isLoader\" [selectedRowKeys]=\"[]\" [showBorders]=\"true\" [showColumnLines]=\"true\"\n                [showRowLines]=\"true\" (onSelectionChanged)=\"isSelectionChange($event)\">\n                 <dxo-selection [selectAllMode]=\"'allMode'\" [showCheckBoxesMode]=\"'always'\" mode=\"multiple\">\n                </dxo-selection>\n                <dxo-paging [pageSize]=\"10\"></dxo-paging>\n                <dxo-export [enabled]=\"true\"></dxo-export>\n                <dxo-search-panel [highlightCaseSensitive]=\"true\" [visible]=\"true\">\n                </dxo-search-panel>\n\n                <dxi-column dataField=\"pageName\"></dxi-column>\n                <!-- <dxi-column dataField=\"pageTitle\"></dxi-column> -->\n                <!-- <dxi-column dataField=\"pageTemplate\"></dxi-column> -->\n                <dxi-column dataField=\"pageId\"></dxi-column>\n                <dxi-column dataField=\"pageUrl\"></dxi-column>\n                <!-- <dxi-column dataField=\"createdBy\"></dxi-column> -->\n                <!-- <dxi-column dataField=\"creationDate\"></dxi-column> -->\n                <dxi-column dataField=\"creationDate\" sortOrder=\"desc\"></dxi-column>\n                <dxi-column dataField=\"Configured\" cellTemplate=\"cellTemplate2\" fixed=\"true\" fixedPosition=\"left\"></dxi-column>\n                <dxi-column dataField=\"action\" cellTemplate=\"cellTemplate\" fixed=\"true\" fixedPosition=\"right\"></dxi-column>\n                <div *dxTemplate=\"let data of 'cellTemplate'\">\n                    <button class=\"{{commonService.btn_primary_md}}\" (click)=\"editTemplate(data.data)\">\n                        Edit\n                    </button>\n                    <button class=\"{{commonService.btn_success_md}}\" (click)=\"viewsPage(data.data)\">\n                        View Page\n                    </button>\n                    <button class=\"{{commonService.btn_danger_md}}\" (click)=\"deleteTamplete(data.data)\">\n                        Delete\n                    </button>\n                </div>\n                <div *dxTemplate=\"let data of 'cellTemplate2'\">\n\n                    <button class=\"{{commonService.btn_success_md}}\" (click)=\"configuredTemplate(data.data)\">\n                        Configure\n                    </button>\n\n                </div>\n\n\n\n            </dx-data-grid>\n        </div>\n    </div>\n\n    <div #scrollContainer>\n        <div class=\"p-2\" *ngIf=\"isNewTampleteCreate\">\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\n                    class=\"mb-2 font-bold text-lg tracking-tight text-gray-900 dark:text-white border-b pb-3 flex items-center\">\n                    <i class=\"fa fa-table mr-2\"></i> Create Page\n                </h6>\n\n                <!-- Flex container for form fields -->\n                <!-- <div class=\"flex flex-wrap w-full\">\n                    <div class=\"w-1/2 px-2 mb-2\">\n                        <div class=\"text-md mb-1\">Page Name</div>\n                        <dx-text-box [(ngModel)]=\"dashboardConfig.pageName\"></dx-text-box>\n                    </div>\n                    <div class=\"w-1/2 px-2 mb-2\">\n                        <div class=\"text-md mb-1\">Page Title</div>\n                        <dx-text-box [(ngModel)]=\"dashboardConfig.pageTitle\"></dx-text-box>\n                    </div>\n                    <div class=\"w-1/2 px-2 mb-2\">\n                        <div class=\"text-md mb-1\">Page URL</div>\n                        <dx-text-box [(ngModel)]=\"dashboardConfig.pageUrl\"></dx-text-box>\n                    </div>\n                    <div class=\"w-1/2 px-2 mb-2\">\n                        <div class=\"text-md mb-1\">Page Template</div>\n                        <dx-select-box [items]=\"componentTemplates\" displayExpr=\"item\" valueExpr=\"compName\"\n                            [(ngModel)]=\"dashboardConfig.pageTemplate\" searchEnabled=\"true\"></dx-select-box>\n                    </div>\n                    <div class=\"w-1/2 px-2 mb-2\">\n                        <div class=\"text-md mb-1\">Page Documentation Url</div>\n                        <dx-text-box [(ngModel)]=\"dashboardConfig.pageDocumentationUrl\"></dx-text-box>\n                    </div>\n                    <div class=\"w-1/2 px-2 mb-2\">\n                        <div class=\"text-md mb-1\">Page Filter</div>\n                        <dx-select-box [items]=\"filterDataSource\" displayExpr=\"filterName\" valueExpr=\"filterId\"\n                            [(ngModel)]=\"dashboardConfig.filterId\"></dx-select-box>\n                    </div>\n                </div> -->\n                <div class=\"grid grid-cols-2 gap-4 w-full\">\n                    <div class=\"px-2 mb-2\">\n                        <div class=\"text-md mb-1\">Page Name</div>\n                        <dx-text-box [(ngModel)]=\"dashboardConfig.pageName\"></dx-text-box>\n                    </div>\n                    <div class=\"px-2 mb-2\">\n                        <div class=\"text-md mb-1\">Page Title</div>\n                        <dx-text-box [(ngModel)]=\"dashboardConfig.pageTitle\"></dx-text-box>\n                    </div>\n                    <div class=\"px-2 mb-2\">\n                        <div class=\"text-md mb-1\">Page URL</div>\n                        <dx-text-box [(ngModel)]=\"dashboardConfig.pageUrl\"></dx-text-box>\n                    </div>\n                    <div class=\"px-2 mb-2\">\n                        <div class=\"text-md mb-1\">Page Template</div>\n                        <dx-select-box [items]=\"componentTemplates\" displayExpr=\"item\" valueExpr=\"compName\"\n                            [(ngModel)]=\"dashboardConfig.pageTemplate\" [searchEnabled]=\"true\"></dx-select-box>\n                    </div>\n                    <div class=\"px-2 mb-2\">\n                        <div class=\"text-md mb-1\">Page Documentation Url</div>\n                        <dx-text-box [(ngModel)]=\"dashboardConfig.pageDocumentationUrl\"></dx-text-box>\n                    </div>\n                    <div class=\"px-2 mb-2\">\n                        <div class=\"text-md mb-1\">Page Filter</div>\n                        <dx-select-box [items]=\"filterDataSource\" displayExpr=\"filterName\" valueExpr=\"filterId\"\n                            [(ngModel)]=\"dashboardConfig.filterId\"></dx-select-box>\n                    </div>\n                </div>\n\n                <!-- Submit button -->\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 Template</button>\n                </div>\n            </div>\n        </div>\n    </div>\n\n\n\n</div>" }]
         }], ctorParameters: function () { return [{ type: i2.Router }, { type: CommonService }, { type: ApplicationContentService }, { type: i3$1.ToastrService }, { type: DynamicRouteService }]; }, propDecorators: { scrollContainer: [{
                 type: ViewChild,
                 args: ['scrollContainer']
@@ -18642,8 +18721,10 @@ class KpiWithDataSetTestComponent {
             const itemDiv = document.createElement('div');
             itemDiv.id = elementId;
             itemDiv.classList.add(item.nodeProperties.width, w_height, 'mb-2');
-            const widgetDiv = this.getWidgetTitleDiv(item);
-            itemDiv.appendChild(widgetDiv);
+            if (item.nodeProperties.widgetTitle !== "") {
+                const widgetDiv = this.getWidgetTitleDiv(item);
+                itemDiv.appendChild(widgetDiv);
+            }
             const innerDiv = document.createElement('div');
             innerDiv.classList.add('rounded', 'justify-center', 'items-center', 'border', 'p-1', 'm-1', 'flex', 'flex-row');
             item.compConfig.viewConfig.forEach(element => {
@@ -18661,8 +18742,10 @@ class KpiWithDataSetTestComponent {
         else if (existingElement) {
             const itemDiv = existingElement;
             itemDiv.innerHTML = '';
-            const widgetDiv = this.getWidgetTitleDiv(item);
-            itemDiv.appendChild(widgetDiv);
+            if (item.nodeProperties.widgetTitle !== "") {
+                const widgetDiv = this.getWidgetTitleDiv(item);
+                itemDiv.appendChild(widgetDiv);
+            }
             item.compConfig.viewConfig.forEach(element => {
                 element.kpiConfig['dataSource'] = datasetById[element.datasetId];
                 element.kpiConfig['contextMenu'] = this.contextMenuDataSource;
@@ -18987,12 +19070,12 @@ class KpiWithDataSetTestComponent {
                                         });
                                         queryParams['pageId'] = params['pageId'];
                                         const fullUrl = this.router.serializeUrl(this.router.createUrlTree([data.pageUrl], { queryParams }));
-                                        window.open(fullUrl, '_blank');
+                                        this.router.navigate([data.pageUrl], { queryParams });
                                     }
                                     else {
                                         const queryString = new URLSearchParams(params).toString();
                                         const fullUrl = this.router.serializeUrl(this.router.createUrlTree([data.pageUrl], { queryParams: params }));
-                                        window.open(fullUrl, '_blank');
+                                        this.router.navigate([data.pageUrl], { queryParams });
                                         console.log(data);
                                     }
                                 }
@@ -22252,8 +22335,11 @@ class LandingComponentComponent {
             const itemDiv = document.createElement('div');
             itemDiv.id = elementId;
             itemDiv.classList.add(item.nodeProperties.width, w_height, 'mb-2');
-            const widgetDiv = this.getWidgetTitleDiv(item);
-            itemDiv.appendChild(widgetDiv);
+            debugger;
+            if (item.nodeProperties.widgetTitle !== "") {
+                const widgetDiv = this.getWidgetTitleDiv(item);
+                itemDiv.appendChild(widgetDiv);
+            }
             const innerDiv = document.createElement('div');
             innerDiv.classList.add('rounded', 'justify-center', 'items-center', 'border', 'p-1', 'm-1', 'flex', 'flex-row');
             item.compConfig.viewConfig.forEach(element => {
@@ -22271,8 +22357,11 @@ class LandingComponentComponent {
         else if (existingElement) {
             const itemDiv = existingElement;
             itemDiv.innerHTML = '';
-            const widgetDiv = this.getWidgetTitleDiv(item);
-            itemDiv.appendChild(widgetDiv);
+            debugger;
+            if (item.nodeProperties.widgetTitle !== "") {
+                const widgetDiv = this.getWidgetTitleDiv(item);
+                itemDiv.appendChild(widgetDiv);
+            }
             item.compConfig.viewConfig.forEach(element => {
                 element.kpiConfig['dataSource'] = datasetById[element.datasetId];
                 element.kpiConfig['contextMenu'] = this.contextMenuDataSource;
@@ -22596,12 +22685,12 @@ class LandingComponentComponent {
                                         });
                                         queryParams['pageId'] = params['pageId'];
                                         const fullUrl = this.router.serializeUrl(this.router.createUrlTree([data.pageUrl], { queryParams }));
-                                        window.open(fullUrl, '_blank');
+                                        this.router.navigate([data.pageUrl], { queryParams });
                                     }
                                     else {
                                         const queryString = new URLSearchParams(params).toString();
                                         const fullUrl = this.router.serializeUrl(this.router.createUrlTree([data.pageUrl], { queryParams: params }));
-                                        window.open(fullUrl, '_blank');
+                                        this.router.navigate([data.pageUrl], { queryParams });
                                         console.log(data);
                                     }
                                 }