npm - gamma-app-controller - Versions diffs - 2.0.20 → 2.0.22 - Mend

gamma-app-controller 2.0.20 → 2.0.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/fesm2015/gamma-app-controller.mjs CHANGED Viewed

@@ -3645,6 +3645,7 @@ class GammaGeoChartComponent {
                         };
                     }
                     else if (this.mapTYpe == "choroplethMap") {
+                        this.chartConfig = value.kpiConfig.dataConfig;
                         let chartConfig = value.kpiConfig.dataConfig;
                         if (chartConfig.isDataAggregation) {
                             const aggreationData = this.getGroupDataForChart(value.kpiConfig.dataSource, chartConfig['dataAggregationConfig']['dataAggregateColumes'], chartConfig['dataAggregationConfig']['aggregateFields']);
@@ -4256,10 +4257,10 @@ class GammaGeoChartComponent {
     }
 }
 GammaGeoChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GammaGeoChartComponent, deps: [{ token: CommonService }], target: i0.ɵɵFactoryTarget.Component });
-GammaGeoChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: GammaGeoChartComponent, selector: "app-gamma-geo-chart", inputs: { rightClickEnable: "rightClickEnable", chartDataSource: "chartDataSource" }, outputs: { getTableConfigOutPut: "getTableConfigOutPut", oRowClick: "oRowClick", onrightClickContextSelection: "onrightClickContextSelection" }, viewQueries: [{ propertyName: "googlMap", first: true, predicate: ["googlMap"], descendants: true }], ngImport: i0, template: "<div class=\"mx-2 bg-gray-800\">\n  <!-- <ng-container *ngIf=\"isLoader\">\n    <div class=\"flex justify-center items-start bg-gray-800 p-2\">\n      <app-loader></app-loader>\n    </div>\n  </ng-container> -->\n\n\n  <div class=\"relative w-full\">\n\n    <div id=\"regions_div\" #googlMap style=\"width: 100%\"></div>\n    <div id=\"googlemap\" style=\"width: 100%;\" [style.height]=\"chartHeight\"></div>\n\n    <div *ngIf=\"isLoader\" class=\"absolute inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm\">\n      <div class=\"geo-chart-loader\"></div>\n    </div>\n\n\n\n    <div class=\"mx-2 pb-2\">\n      <div class=\" mx-auto w-full mt-3\" *ngIf=\"isRangeSliderVisible\">\n        <div class=\"flex items-center justify-between mb-2\">\n\n          <button class=\"text-white px-3 py-2 rounded bg-gray-800 hover:bg-gray-700\" (click)=\"togglePlay()\">\n            <i class=\"fa\" [ngClass]=\"isPlaying ? 'fa-pause' : 'fa-play'\"></i>\n          </button>\n\n          <div class=\"flex space-x-2 text-sm font-semibold\">\n            <ng-container *ngFor=\"let year of allSelectedRangeSliderValues; let i = index\">\n              <span class=\"cursor-pointer select-none px-2 py-1 rounded-md transition\" [ngClass]=\"{\n            'bg-black text-white shadow': year === selectedRangeSliderValue,\n            'text-gray-300 hover:text-white': year !== selectedRangeSliderValue\n          }\" (click)=\"setYearByIndex(i)\">\n                {{ year }}\n              </span>\n            </ng-container>\n          </div>\n\n          <button class=\"text-white px-3 py-2 rounded bg-gray-800 hover:bg-gray-700\" (click)=\"restart()\">\n            <i class=\"fa fa-refresh\"></i>\n          </button>\n\n        </div>\n\n        <input type=\"range\" class=\"w-full h-2 rounded-lg appearance-none cursor-pointer\n           bg-gradient-to-r from-green-400 via-yellow-400 to-red-500\" [min]=\"0\"\n          [max]=\"allSelectedRangeSliderValues.length - 1\" [value]=\"choroplethMapCurrentIndex\"\n          (input)=\"onYearChange($event)\" />\n      </div>\n\n\n\n\n    </div>\n\n  </div>\n\n\n\n\n\n</div>", styles: [".geo-chart-loader{width:64px;height:64px;border:6px solid rgba(255,255,255,.2);border-top-color:#4ade80;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i4$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+GammaGeoChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: GammaGeoChartComponent, selector: "app-gamma-geo-chart", inputs: { rightClickEnable: "rightClickEnable", chartDataSource: "chartDataSource" }, outputs: { getTableConfigOutPut: "getTableConfigOutPut", oRowClick: "oRowClick", onrightClickContextSelection: "onrightClickContextSelection" }, viewQueries: [{ propertyName: "googlMap", first: true, predicate: ["googlMap"], descendants: true }], ngImport: i0, template: "<div class=\"mx-2 bg-gray-800\">\n  <div class=\"relative w-full\">\n\n\n    <div class=\"absolute left-4 bottom-6 pointer-events-none floting-side-bar\" *ngIf=\"!isLoader\">\n      <div class=\"flex items-center h-80 px-4 py-3 rounded-xl shadow-lg backdrop-blur-md bg-black/60\">\n        <div class=\"w-4 h-full rounded-full shadow-xl\"\n          [style.background]=\"'linear-gradient(to bottom,' + chartConfig.colorOne + ',' + chartConfig.colorTwo + ')'\">\n        </div>\n      </div>\n    </div>\n\n\n    \n\n    <!-- <div class=\"absolute top-[200px] left-4 bottom-6 z-40 flex items-center\">\n      <div class=\"flex items-center space-x-2\">\n        <div class=\"w-4 h-full rounded-full shadow-lg\"\n         [style.background]=\"'linear-gradient(to right,' + chartConfig.colorOne + ',' + chartConfig.colorTwo + ')'\"></div>\n        <div class=\"flex flex-col justify-between h-full text-xs text-white\">\n          <span>High</span>\n          <span>Low</span>\n        </div>\n      </div>\n    </div> -->\n\n\n    <div id=\"regions_div\" #googlMap style=\"width: 100%\"></div>\n    <div id=\"googlemap\" style=\"width: 100%;\" [style.height]=\"chartHeight\"></div>\n    <div *ngIf=\"isLoader\" class=\"absolute inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm\">\n      <div class=\"geo-chart-loader\"></div>\n    </div>\n    <div class=\"mx-2 pb-2\">\n      <div class=\" mx-auto w-full mt-3\" *ngIf=\"isRangeSliderVisible\">\n        <div class=\"flex items-center justify-between mb-2\">\n          <button class=\"text-white px-3 py-2 rounded bg-gray-800 hover:bg-gray-700\" (click)=\"togglePlay()\">\n            <i class=\"fa\" [ngClass]=\"isPlaying ? 'fa-pause' : 'fa-play'\"></i>\n          </button>\n          <div class=\"flex space-x-2 text-sm font-semibold\">\n            <ng-container *ngFor=\"let year of allSelectedRangeSliderValues; let i = index\">\n              <span class=\"cursor-pointer select-none px-2 py-1 rounded-md transition\" [ngClass]=\"{\n            'bg-black text-white shadow': year === selectedRangeSliderValue,\n            'text-gray-300 hover:text-white': year !== selectedRangeSliderValue\n          }\" (click)=\"setYearByIndex(i)\">\n                {{ year }}\n              </span>\n            </ng-container>\n          </div>\n          <button class=\"text-white px-3 py-2 rounded bg-gray-800 hover:bg-gray-700\" (click)=\"restart()\">\n            <i class=\"fa fa-refresh\"></i>\n          </button>\n        </div>\n        <input type=\"range\" class=\"w-full h-2 rounded-lg appearance-none cursor-pointer\n           bg-gradient-to-r from-green-400 via-yellow-400 to-red-500\" [min]=\"0\"\n          [max]=\"allSelectedRangeSliderValues.length - 1\" [value]=\"choroplethMapCurrentIndex\"\n          (input)=\"onYearChange($event)\" />\n      </div>\n    </div>\n  </div>\n</div>", styles: [".geo-chart-loader{width:64px;height:64px;border:6px solid rgba(255,255,255,.2);border-top-color:#4ade80;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.floting-side-bar{top:60px;z-index:999999}\n"], dependencies: [{ kind: "directive", type: i4$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GammaGeoChartComponent, decorators: [{
             type: Component,
-            args: [{ selector: "app-gamma-geo-chart", template: "<div class=\"mx-2 bg-gray-800\">\n  <!-- <ng-container *ngIf=\"isLoader\">\n    <div class=\"flex justify-center items-start bg-gray-800 p-2\">\n      <app-loader></app-loader>\n    </div>\n  </ng-container> -->\n\n\n  <div class=\"relative w-full\">\n\n    <div id=\"regions_div\" #googlMap style=\"width: 100%\"></div>\n    <div id=\"googlemap\" style=\"width: 100%;\" [style.height]=\"chartHeight\"></div>\n\n    <div *ngIf=\"isLoader\" class=\"absolute inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm\">\n      <div class=\"geo-chart-loader\"></div>\n    </div>\n\n\n\n    <div class=\"mx-2 pb-2\">\n      <div class=\" mx-auto w-full mt-3\" *ngIf=\"isRangeSliderVisible\">\n        <div class=\"flex items-center justify-between mb-2\">\n\n          <button class=\"text-white px-3 py-2 rounded bg-gray-800 hover:bg-gray-700\" (click)=\"togglePlay()\">\n            <i class=\"fa\" [ngClass]=\"isPlaying ? 'fa-pause' : 'fa-play'\"></i>\n          </button>\n\n          <div class=\"flex space-x-2 text-sm font-semibold\">\n            <ng-container *ngFor=\"let year of allSelectedRangeSliderValues; let i = index\">\n              <span class=\"cursor-pointer select-none px-2 py-1 rounded-md transition\" [ngClass]=\"{\n            'bg-black text-white shadow': year === selectedRangeSliderValue,\n            'text-gray-300 hover:text-white': year !== selectedRangeSliderValue\n          }\" (click)=\"setYearByIndex(i)\">\n                {{ year }}\n              </span>\n            </ng-container>\n          </div>\n\n          <button class=\"text-white px-3 py-2 rounded bg-gray-800 hover:bg-gray-700\" (click)=\"restart()\">\n            <i class=\"fa fa-refresh\"></i>\n          </button>\n\n        </div>\n\n        <input type=\"range\" class=\"w-full h-2 rounded-lg appearance-none cursor-pointer\n           bg-gradient-to-r from-green-400 via-yellow-400 to-red-500\" [min]=\"0\"\n          [max]=\"allSelectedRangeSliderValues.length - 1\" [value]=\"choroplethMapCurrentIndex\"\n          (input)=\"onYearChange($event)\" />\n      </div>\n\n\n\n\n    </div>\n\n  </div>\n\n\n\n\n\n</div>", styles: [".geo-chart-loader{width:64px;height:64px;border:6px solid rgba(255,255,255,.2);border-top-color:#4ade80;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"] }]
+            args: [{ selector: "app-gamma-geo-chart", template: "<div class=\"mx-2 bg-gray-800\">\n  <div class=\"relative w-full\">\n\n\n    <div class=\"absolute left-4 bottom-6 pointer-events-none floting-side-bar\" *ngIf=\"!isLoader\">\n      <div class=\"flex items-center h-80 px-4 py-3 rounded-xl shadow-lg backdrop-blur-md bg-black/60\">\n        <div class=\"w-4 h-full rounded-full shadow-xl\"\n          [style.background]=\"'linear-gradient(to bottom,' + chartConfig.colorOne + ',' + chartConfig.colorTwo + ')'\">\n        </div>\n      </div>\n    </div>\n\n\n    \n\n    <!-- <div class=\"absolute top-[200px] left-4 bottom-6 z-40 flex items-center\">\n      <div class=\"flex items-center space-x-2\">\n        <div class=\"w-4 h-full rounded-full shadow-lg\"\n         [style.background]=\"'linear-gradient(to right,' + chartConfig.colorOne + ',' + chartConfig.colorTwo + ')'\"></div>\n        <div class=\"flex flex-col justify-between h-full text-xs text-white\">\n          <span>High</span>\n          <span>Low</span>\n        </div>\n      </div>\n    </div> -->\n\n\n    <div id=\"regions_div\" #googlMap style=\"width: 100%\"></div>\n    <div id=\"googlemap\" style=\"width: 100%;\" [style.height]=\"chartHeight\"></div>\n    <div *ngIf=\"isLoader\" class=\"absolute inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm\">\n      <div class=\"geo-chart-loader\"></div>\n    </div>\n    <div class=\"mx-2 pb-2\">\n      <div class=\" mx-auto w-full mt-3\" *ngIf=\"isRangeSliderVisible\">\n        <div class=\"flex items-center justify-between mb-2\">\n          <button class=\"text-white px-3 py-2 rounded bg-gray-800 hover:bg-gray-700\" (click)=\"togglePlay()\">\n            <i class=\"fa\" [ngClass]=\"isPlaying ? 'fa-pause' : 'fa-play'\"></i>\n          </button>\n          <div class=\"flex space-x-2 text-sm font-semibold\">\n            <ng-container *ngFor=\"let year of allSelectedRangeSliderValues; let i = index\">\n              <span class=\"cursor-pointer select-none px-2 py-1 rounded-md transition\" [ngClass]=\"{\n            'bg-black text-white shadow': year === selectedRangeSliderValue,\n            'text-gray-300 hover:text-white': year !== selectedRangeSliderValue\n          }\" (click)=\"setYearByIndex(i)\">\n                {{ year }}\n              </span>\n            </ng-container>\n          </div>\n          <button class=\"text-white px-3 py-2 rounded bg-gray-800 hover:bg-gray-700\" (click)=\"restart()\">\n            <i class=\"fa fa-refresh\"></i>\n          </button>\n        </div>\n        <input type=\"range\" class=\"w-full h-2 rounded-lg appearance-none cursor-pointer\n           bg-gradient-to-r from-green-400 via-yellow-400 to-red-500\" [min]=\"0\"\n          [max]=\"allSelectedRangeSliderValues.length - 1\" [value]=\"choroplethMapCurrentIndex\"\n          (input)=\"onYearChange($event)\" />\n      </div>\n    </div>\n  </div>\n</div>", styles: [".geo-chart-loader{width:64px;height:64px;border:6px solid rgba(255,255,255,.2);border-top-color:#4ade80;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.floting-side-bar{top:60px;z-index:999999}\n"] }]
         }], ctorParameters: function () { return [{ type: CommonService }]; }, propDecorators: { googlMap: [{
                 type: ViewChild,
                 args: ["googlMap"]
@@ -7534,6 +7535,82 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 args: ['datasetmodal']
             }] } });
+class GammSingleNumberCardComponent {
+    constructor(commonService, toastr) {
+        this.commonService = commonService;
+        this.toastr = toastr;
+        this.isLoader = true;
+        this.colors = [
+            "text-green-500",
+            "text-orange-500",
+            "text-blue-500",
+            "text-purple-500",
+            "text-yellow-500"
+        ];
+    }
+    set chartDataSource(value) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+        this.objectdataSource = value;
+        if (!this.objectdataSource || this.objectdataSource.length === 0) {
+            this.isChartvisible = false;
+            return;
+        }
+        else {
+            this.isLoader = true;
+            this.selectedColumn = ((_d = (_c = (_b = (_a = value.kpiConfig) === null || _a === void 0 ? void 0 : _a.dataConfig) === null || _b === void 0 ? void 0 : _b.columns) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.dataField) || "";
+            this.selectedCaption = ((_h = (_g = (_f = (_e = value.kpiConfig) === null || _e === void 0 ? void 0 : _e.dataConfig) === null || _f === void 0 ? void 0 : _f.columns) === null || _g === void 0 ? void 0 : _g[0]) === null || _h === void 0 ? void 0 : _h.caption) || "";
+            this.sortBy = (_k = (_j = value.kpiConfig) === null || _j === void 0 ? void 0 : _j.dataConfig) === null || _k === void 0 ? void 0 : _k.sortBy;
+            this.tableDataConfig = (_l = value.kpiConfig) === null || _l === void 0 ? void 0 : _l.dataConfig;
+            if ((_m = value.kpiConfig.dataSource) === null || _m === void 0 ? void 0 : _m.length) {
+                this.page_config = value;
+                let sortedData = value.kpiConfig.dataSource;
+                if ((_o = this.sortBy) === null || _o === void 0 ? void 0 : _o.length) {
+                    let sortKey = this.sortBy[0];
+                    sortedData = sortedData.sort((a, b) => moment$1(b[sortKey], "YYYY-MM-DD").diff(moment$1(a[sortKey], "YYYY-MM-DD")));
+                }
+                if (value.kpiConfig.formate === "daily") {
+                    this.currentDateData = sortedData.length ? this.commonService.abbreviateNumber(sortedData[0][this.selectedColumn] || 0) : "0";
+                }
+                else if (value.kpiConfig.formate === "monthly") {
+                    let total = sortedData.reduce((sum, item) => {
+                        let value = Number(item[this.selectedColumn]) || 0;
+                        return sum + value;
+                    }, 0);
+                    this.currentDateData = this.commonService.abbreviateNumber(total);
+                }
+                this.isLoader = false;
+            }
+        }
+    }
+    getDynamicValue(data) {
+        if (!this.selectedColumn || !data.hasOwnProperty(this.selectedColumn)) {
+            return null;
+        }
+        let value = data[this.selectedColumn];
+        const numericValue = Number(value);
+        if (!isNaN(numericValue)) {
+            return this.commonService.abbreviateNumber(numericValue);
+        }
+        return value;
+    }
+    ngOnInit() {
+        this.randomColorClass = this.getRandomColor();
+    }
+    getRandomColor() {
+        const randomIndex = Math.floor(Math.random() * this.colors.length);
+        return this.colors[randomIndex];
+    }
+}
+GammSingleNumberCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GammSingleNumberCardComponent, deps: [{ token: CommonService }, { token: i4$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 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 flex-col justify-center items-center\">\n            <div class=\"font-bold p-2 text-gray-600 dark:text-gray-200\" [style.font-size.px]=\"14\">\n                {{ selectedCaption }}\n            </div>\n\n            <div class=\"font-bold p-2\" [style.color]=\"tableDataConfig.color\"\n                [style.font-size.px]=\"tableDataConfig.size || 16\">\n                {{ currentDateData }}\n            </div>\n        </div>\n    </ng-container>\n\n</div>", dependencies: [{ kind: "directive", type: i4$2.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 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 flex-col justify-center items-center\">\n            <div class=\"font-bold p-2 text-gray-600 dark:text-gray-200\" [style.font-size.px]=\"14\">\n                {{ selectedCaption }}\n            </div>\n\n            <div class=\"font-bold p-2\" [style.color]=\"tableDataConfig.color\"\n                [style.font-size.px]=\"tableDataConfig.size || 16\">\n                {{ currentDateData }}\n            </div>\n        </div>\n    </ng-container>\n\n</div>" }]
+        }], ctorParameters: function () { return [{ type: CommonService }, { type: i4$1.ToastrService }]; }, propDecorators: { chartDataSource: [{
+                type: Input,
+                args: ['chartDataSource']
+            }] } });
 class SingleCardComponent {
     constructor(commonService, cdr, service, taostr) {
         this.commonService = commonService;
@@ -7543,7 +7620,7 @@ class SingleCardComponent {
         this.dataSourseForTable = [];
         this.allConfiguredViews = [];
         this.optionalDrilDownDataSource = [];
-        this.table_columns_config = {
+        this.cardMainComponentObject = {
             "kpiConfig": {
                 "serviceId": "",
                 "api": "/kpi/trends/network/get-metric-data",
@@ -7554,7 +7631,7 @@ class SingleCardComponent {
                 "dataConfig": {}
             },
         };
-        this.tableDataConfig = {
+        this.cardDataConfig = {
             "color": "",
             "size": "",
             "isIcon": false,
@@ -7567,10 +7644,12 @@ class SingleCardComponent {
         };
         this.enrichNameList = ["abbreviateNumber", "getColorCodeSpan", "ThousandSeparator", "ThousandSeparatorWithTwoDecimals", "formatBytesv2"];
         this.isLoader = true;
+        this.userOptionContainer = [];
         this.activeTab = 'basic';
         this.getSingleCardConfigOutPut = new EventEmitter();
     }
     set chartconfigData(value) {
+        var _a;
         if (value === undefined || value.length === 0) {
             return;
         }
@@ -7580,10 +7659,14 @@ class SingleCardComponent {
             this.dataSourseForTable = value.data.slice(0, 10);
             this.selectedViewConfigs = value;
             this.selectedTableViewType = value.selectedViewType;
+            this.previewData = value.data;
+            this.userOptionContainer = ((_a = value.selectedWidgetConfig) === null || _a === void 0 ? void 0 : _a.permissions) ? value.selectedWidgetConfig.permissions : [];
             if (value.selectedWidgetConfig) {
-                this.table_columns_config['kpiConfig'] = value.selectedWidgetConfig;
-                this.tableDataConfig = value.selectedWidgetConfig.dataConfig;
-                this.tableDataConfig.columns = (value.selectedWidgetConfig.dataConfig.columns) ? value.selectedWidgetConfig.dataConfig.columns : [];
+                this.cardMainComponentObject['kpiConfig'] = value.selectedWidgetConfig;
+                this.cardDataConfig = value.selectedWidgetConfig.dataConfig;
+                this.cardDataSourceModel = this.cardMainComponentObject;
+                this.cardDataSourceModel.kpiConfig['dataSource'] = this.previewData;
+                this.cardDataConfig.columns = (value.selectedWidgetConfig.dataConfig.columns) ? value.selectedWidgetConfig.dataConfig.columns : [];
                 if (value.selectedWidgetConfig.viewProperties) {
                     this.viewProperties = value.selectedWidgetConfig.viewProperties;
                     this.viewProperties = {
@@ -7638,7 +7721,7 @@ class SingleCardComponent {
                 this.cdr.detectChanges();
             }
             else {
-                this.tableDataConfig.columns = value.columnData;
+                this.cardDataConfig.columns = value.columnData;
                 this.viewProperties = {
                     enableClickEvent: false,
                     enableRightClickEvent: true,
@@ -7647,8 +7730,8 @@ class SingleCardComponent {
                         eventType: ""
                     }
                 };
-                if (!this.tableDataConfig.columns) {
-                    this.tableDataConfig.columns = [];
+                if (!this.cardDataConfig.columns) {
+                    this.cardDataConfig.columns = [];
                     this.configColume.forEach(element => {
                         let obj = {
                             "visible": true,
@@ -7656,10 +7739,12 @@ class SingleCardComponent {
                             "caption": this.commonService.convertString(element),
                             "enrichName": "",
                         };
-                        this.tableDataConfig.columns.push(obj);
+                        this.cardDataConfig.columns.push(obj);
                     });
                     console.log(this.configColume);
                 }
+                this.cardDataSourceModel = this.cardMainComponentObject;
+                this.cardDataSourceModel.kpiConfig['dataSource'] = this.previewData;
                 this.cdr.detectChanges();
             }
         }
@@ -7694,23 +7779,23 @@ class SingleCardComponent {
         if (this.selectedTableViewType === 'groupTable') {
             obj['group'] = '';
         }
-        this.tableDataConfig.columns.push(obj);
+        this.cardDataConfig.columns.push(obj);
     }
     deleteColumns(i) {
-        this.tableDataConfig.columns.splice(i, 1);
+        this.cardDataConfig.columns.splice(i, 1);
     }
     getEnrichClassName(e, item) {
         item.enrichName = e.value;
     }
     moveItemForColumns(index, direction) {
-        if (index < 0 || index >= this.tableDataConfig.columns.length)
+        if (index < 0 || index >= this.cardDataConfig.columns.length)
             return;
         const newPosition = direction === 'up' ? index - 1 : index + 1;
-        if (newPosition < 0 || newPosition >= this.tableDataConfig.columns.length)
+        if (newPosition < 0 || newPosition >= this.cardDataConfig.columns.length)
             return;
-        const itemToMove = this.tableDataConfig.columns[index];
-        this.tableDataConfig.columns.splice(index, 1);
-        this.tableDataConfig.columns.splice(newPosition, 0, itemToMove);
+        const itemToMove = this.cardDataConfig.columns[index];
+        this.cardDataConfig.columns.splice(index, 1);
+        this.cardDataConfig.columns.splice(newPosition, 0, itemToMove);
     }
     getObjectKeys(obj) {
         return Object.keys(obj);
@@ -7755,9 +7840,10 @@ class SingleCardComponent {
         if (this.viewProperties.clickEventOptions.eventType == 'optionalDrillDown') {
             this.viewProperties['clickEventOptions']['associatedViews'] = this.optionalDrilDownDataSource;
         }
-        this.table_columns_config.kpiConfig['viewProperties'] = this.viewProperties;
-        this.table_columns_config.kpiConfig.dataConfig = JSON.parse(JSON.stringify(this.tableDataConfig));
-        this.getSingleCardConfigOutPut.emit(this.table_columns_config);
+        this.cardMainComponentObject.kpiConfig['viewProperties'] = this.viewProperties;
+        this.cardMainComponentObject.kpiConfig.dataConfig = JSON.parse(JSON.stringify(this.cardDataConfig));
+        this.cardMainComponentObject['permissions'] = this.userOptionContainer;
+        this.getSingleCardConfigOutPut.emit(this.cardMainComponentObject);
     }
     deleteAssociatedParams(index) {
         this.optionalDrilDownDataSource.splice(index, 1);
@@ -7772,7 +7858,7 @@ class SingleCardComponent {
         if (e.event) {
             this.optionalDrilDownDataSource = [];
             if (this.viewProperties.clickEventOptions.eventType == 'drilldown') {
-                this.table_columns_config.kpiConfig['viewProperties']['associatedViews'] = [];
+                this.cardMainComponentObject.kpiConfig['viewProperties']['associatedViews'] = [];
             }
         }
     }
@@ -7788,10 +7874,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: i4$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: "<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$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: 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$1.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: i9$2.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$2.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=\"cardDataConfig.isIcon\">\n            <div class=\"py-3 px-4 mr-4 rounded-full\" [style.color]=\"cardDataConfig.iconColor\"\n                [style.backgroundColor]=\"cardDataConfig.iconBackgroundColor\">\n                <i [class]=\"cardDataConfig.iconName\"></i>\n\n            </div>\n            <div>\n                <p class=\"mb-2 text-sm font-medium text-gray-600 dark:text-gray-200\">\n                    {{cardDataConfig.iconText}}\n                </p>\n                <p class=\"font-semibold\" [style.color]=\"cardDataConfig.color\"\n                    [style.font-size.px]=\"cardDataConfig.size || 16\">\n                    {{jsaonDatasource[cardDataConfig.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=\"!cardDataConfig.isIcon\">\n            <ng-container *ngIf=\"!isLoader\">\n                <div class=\"flex justify-center items-center font-bold p-2\" [style.color]=\"cardDataConfig.color\"\n                    [style.font-size.px]=\"cardDataConfig.size || 16\">\n                    {{jsaonDatasource[cardDataConfig.columns[0].dataField]}}\n                </div>\n            </ng-container>\n        </div> -->\n        <app-gamm-single-number-card [chartDataSource]=\"cardDataSourceModel\"></app-gamm-single-number-card>\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            <li class=\"me-2\" role=\"presentation\">\n                <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                        'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'permission',\n                                        'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'permission'\n                                    }\" (click)=\"setActiveTab('permission')\" type=\"button\" role=\"tab\">\n                    Manage Permissions\n                </button>\n            </li>\n\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)]=\"cardMainComponentObject.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)]=\"cardMainComponentObject.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)]=\"cardDataConfig.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)]=\"cardDataConfig.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)]=\"cardDataConfig.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)]=\"cardDataConfig.isIcon\"></dx-check-box>\n                </div>\n            </div>\n            <div class=\"flex flex-row mt-2\" *ngIf=\"cardDataConfig.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)]=\"cardDataConfig.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)]=\"cardDataConfig.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)]=\"cardDataConfig.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)]=\"cardDataConfig.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 cardDataConfig.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 !== cardDataConfig.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 *ngIf=\"activeTab === 'permission'\">\n            <div class=\"h-full overflow-x-auto\">\n                <app-user-access [(userOptionContainer)]=\"userOptionContainer\">\n                </app-user-access>\n            </div>\n        </div>\n    </div>\n</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$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: 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$1.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: i9$2.DxTagBoxComponent, selector: "dx-tag-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "applyValueMode", "buttons", "dataSource", "deferRendering", "disabled", "displayExpr", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "fieldTemplate", "focusStateEnabled", "grouped", "groupTemplate", "height", "hideSelectedItems", "hint", "hoverStateEnabled", "inputAttr", "isValid", "items", "itemTemplate", "label", "labelMode", "maxDisplayedTags", "maxFilterQueryLength", "maxLength", "minSearchLength", "multiline", "name", "noDataText", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "searchEnabled", "searchExpr", "searchMode", "searchTimeout", "selectAllMode", "selectAllText", "selectedItems", "showClearButton", "showDataBeforeSearch", "showDropDownButton", "showMultiTagOnly", "showSelectionControls", "stylingMode", "tabIndex", "tagTemplate", "text", "useItemTextAsTitle", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueExpr", "visible", "width", "wrapItemText"], outputs: ["onChange", "onClosed", "onContentReady", "onCustomItemCreating", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onItemClick", "onKeyDown", "onKeyUp", "onMultiTagPreparing", "onOpened", "onOptionChanged", "onSelectAllValueChanged", "onSelectionChanged", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "applyValueModeChange", "buttonsChange", "dataSourceChange", "deferRenderingChange", "disabledChange", "displayExprChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "groupedChange", "groupTemplateChange", "heightChange", "hideSelectedItemsChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "itemsChange", "itemTemplateChange", "labelChange", "labelModeChange", "maxDisplayedTagsChange", "maxFilterQueryLengthChange", "maxLengthChange", "minSearchLengthChange", "multilineChange", "nameChange", "noDataTextChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "searchEnabledChange", "searchExprChange", "searchModeChange", "searchTimeoutChange", "selectAllModeChange", "selectAllTextChange", "selectedItemsChange", "showClearButtonChange", "showDataBeforeSearchChange", "showDropDownButtonChange", "showMultiTagOnlyChange", "showSelectionControlsChange", "stylingModeChange", "tabIndexChange", "tagTemplateChange", "textChange", "useItemTextAsTitleChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueExprChange", "visibleChange", "widthChange", "wrapItemTextChange", "onBlur"] }, { kind: "component", type: i7.DxTextBoxComponent, selector: "dx-text-box", inputs: ["accessKey", "activeStateEnabled", "buttons", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "label", "labelMode", "mask", "maskChar", "maskInvalidMessage", "maskRules", "maxLength", "mode", "name", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showMaskMode", "spellcheck", "stylingMode", "tabIndex", "text", "useMaskedValue", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOptionChanged", "onPaste", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "labelChange", "labelModeChange", "maskChange", "maskCharChange", "maskInvalidMessageChange", "maskRulesChange", "maxLengthChange", "modeChange", "nameChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showMaskModeChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useMaskedValueChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: UserAccessComponent, selector: "app-user-access", inputs: ["userOptionContainer"], outputs: ["userOptionContainerChange"] }, { kind: "component", type: LoaderComponent, selector: "app-loader" }, { kind: "component", type: GammSingleNumberCardComponent, selector: "app-gamm-single-number-card", inputs: ["chartDataSource"] }, { kind: "pipe", type: i4$2.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: "<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>" }]
+            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=\"cardDataConfig.isIcon\">\n            <div class=\"py-3 px-4 mr-4 rounded-full\" [style.color]=\"cardDataConfig.iconColor\"\n                [style.backgroundColor]=\"cardDataConfig.iconBackgroundColor\">\n                <i [class]=\"cardDataConfig.iconName\"></i>\n\n            </div>\n            <div>\n                <p class=\"mb-2 text-sm font-medium text-gray-600 dark:text-gray-200\">\n                    {{cardDataConfig.iconText}}\n                </p>\n                <p class=\"font-semibold\" [style.color]=\"cardDataConfig.color\"\n                    [style.font-size.px]=\"cardDataConfig.size || 16\">\n                    {{jsaonDatasource[cardDataConfig.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=\"!cardDataConfig.isIcon\">\n            <ng-container *ngIf=\"!isLoader\">\n                <div class=\"flex justify-center items-center font-bold p-2\" [style.color]=\"cardDataConfig.color\"\n                    [style.font-size.px]=\"cardDataConfig.size || 16\">\n                    {{jsaonDatasource[cardDataConfig.columns[0].dataField]}}\n                </div>\n            </ng-container>\n        </div> -->\n        <app-gamm-single-number-card [chartDataSource]=\"cardDataSourceModel\"></app-gamm-single-number-card>\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            <li class=\"me-2\" role=\"presentation\">\n                <button class=\"inline-block p-4 border-b-2 rounded-t-lg\" [ngClass]=\"{\n                                        'text-purple-600 border-purple-600 dark:text-purple-500 dark:border-purple-500': activeTab === 'permission',\n                                        'text-gray-500 dark:text-gray-400 border-transparent': activeTab !== 'permission'\n                                    }\" (click)=\"setActiveTab('permission')\" type=\"button\" role=\"tab\">\n                    Manage Permissions\n                </button>\n            </li>\n\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)]=\"cardMainComponentObject.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)]=\"cardMainComponentObject.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)]=\"cardDataConfig.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)]=\"cardDataConfig.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)]=\"cardDataConfig.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)]=\"cardDataConfig.isIcon\"></dx-check-box>\n                </div>\n            </div>\n            <div class=\"flex flex-row mt-2\" *ngIf=\"cardDataConfig.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)]=\"cardDataConfig.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)]=\"cardDataConfig.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)]=\"cardDataConfig.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)]=\"cardDataConfig.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 cardDataConfig.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 !== cardDataConfig.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 *ngIf=\"activeTab === 'permission'\">\n            <div class=\"h-full overflow-x-auto\">\n                <app-user-access [(userOptionContainer)]=\"userOptionContainer\">\n                </app-user-access>\n            </div>\n        </div>\n    </div>\n</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: i4$1.ToastrService }]; }, propDecorators: { getSingleCardConfigOutPut: [{
                 type: Output
             }], chartconfigData: [{
@@ -9404,81 +9490,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 args: ['chartDataSource']
             }] } });
-class GammSingleNumberCardComponent {
-    constructor(commonService, toastr) {
-        this.commonService = commonService;
-        this.toastr = toastr;
-        this.isLoader = true;
-        this.colors = [
-            "text-green-500",
-            "text-orange-500",
-            "text-blue-500",
-            "text-purple-500",
-            "text-yellow-500"
-        ];
-    }
-    set chartDataSource(value) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-        this.objectdataSource = value;
-        if (!this.objectdataSource || this.objectdataSource.length === 0) {
-            this.isChartvisible = false;
-            return;
-        }
-        else {
-            this.isLoader = true;
-            this.selectedColumn = ((_d = (_c = (_b = (_a = value.kpiConfig) === null || _a === void 0 ? void 0 : _a.dataConfig) === null || _b === void 0 ? void 0 : _b.columns) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.dataField) || "";
-            this.sortBy = (_f = (_e = value.kpiConfig) === null || _e === void 0 ? void 0 : _e.dataConfig) === null || _f === void 0 ? void 0 : _f.sortBy;
-            this.tableDataConfig = (_g = value.kpiConfig) === null || _g === void 0 ? void 0 : _g.dataConfig;
-            if ((_h = value.kpiConfig.dataSource) === null || _h === void 0 ? void 0 : _h.length) {
-                this.page_config = value;
-                let sortedData = value.kpiConfig.dataSource;
-                if ((_j = this.sortBy) === null || _j === void 0 ? void 0 : _j.length) {
-                    let sortKey = this.sortBy[0];
-                    sortedData = sortedData.sort((a, b) => moment$1(b[sortKey], "YYYY-MM-DD").diff(moment$1(a[sortKey], "YYYY-MM-DD")));
-                }
-                if (value.kpiConfig.formate === "daily") {
-                    this.currentDateData = sortedData.length ? this.commonService.abbreviateNumber(sortedData[0][this.selectedColumn] || 0) : "0";
-                }
-                else if (value.kpiConfig.formate === "monthly") {
-                    let total = sortedData.reduce((sum, item) => {
-                        let value = Number(item[this.selectedColumn]) || 0;
-                        return sum + value;
-                    }, 0);
-                    this.currentDateData = this.commonService.abbreviateNumber(total);
-                }
-                this.isLoader = false;
-            }
-        }
-    }
-    getDynamicValue(data) {
-        if (!this.selectedColumn || !data.hasOwnProperty(this.selectedColumn)) {
-            return null;
-        }
-        let value = data[this.selectedColumn];
-        const numericValue = Number(value);
-        if (!isNaN(numericValue)) {
-            return this.commonService.abbreviateNumber(numericValue);
-        }
-        return value;
-    }
-    ngOnInit() {
-        this.randomColorClass = this.getRandomColor();
-    }
-    getRandomColor() {
-        const randomIndex = Math.floor(Math.random() * this.colors.length);
-        return this.colors[randomIndex];
-    }
-}
-GammSingleNumberCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GammSingleNumberCardComponent, deps: [{ token: CommonService }, { token: i4$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: "\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$2.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: "\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: i4$1.ToastrService }]; }, propDecorators: { chartDataSource: [{
-                type: Input,
-                args: ['chartDataSource']
-            }] } });
 class GammaAdvanceOperatorTableComponent {
     constructor(commonService) {
         this.commonService = commonService;