gamma-app-controller 1.2.6 → 1.2.7

package/fesm2020/gamma-app-controller.mjs

@@ -1,5 +1,8 @@
 import * as i0 from '@angular/core';
-import { Injectable, Inject, Component, ViewEncapsulation, NgModule, InjectionToken, Input, ViewChild, EventEmitter, Output, Pipe, HostListener, ViewContainerRef, ChangeDetectionStrategy, HostBinding } from '@angular/core';
+import { InjectionToken, Injectable, Inject, Component, ViewEncapsulation, NgModule, Input, ViewChild, EventEmitter, Output, Pipe, HostListener, ViewContainerRef, ChangeDetectionStrategy, HostBinding } from '@angular/core';
+import { map, catchError, throwError, BehaviorSubject, Subject, ReplaySubject, takeUntil, filter, forkJoin } from 'rxjs';
+import * as i1 from '@angular/common/http';
+import { HttpHeaders } from '@angular/common/http';
 import * as i2 from '@angular/router';
 import { RouterModule, NavigationEnd } from '@angular/router';
 import * as i4$1 from '@angular/common';
@@ -11,9 +14,6 @@ import { DxScrollViewComponent, DevExtremeModule, DxButtonModule, DxCheckBoxModu
 import * as i8 from '@angular/forms';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { confirm } from 'devextreme/ui/dialog';
-import * as i1 from '@angular/common/http';
-import { HttpHeaders } from '@angular/common/http';
-import { BehaviorSubject, throwError, map, catchError, Subject, ReplaySubject, takeUntil, filter, forkJoin } from 'rxjs';
 import momentNamespace from 'moment';
 import * as i3$1 from 'ngx-toastr';
 import * as i5 from 'devextreme-angular/core';
@@ -42,13 +42,27 @@ import * as i10$2 from 'devextreme-angular/ui/html-editor';
 import * as i2$1 from '@angular/cdk/overlay';
 import { trigger, state, style, transition, animate, keyframes } from '@angular/animations';
 
+const APP_ENVIRONMENT = new InjectionToken('APP_ENVIRONMENT');
+
 class GammaAppControllerService {
-    constructor(env) {
-        this.env = env;
-        console.log(this.env.apiEndpoint);
+    constructor(environment, http) {
+        this.environment = environment;
+        this.http = http;
+        console.log(this.environment.apiEndpoint);
+    }
+    getFilterDataByDrillDown(apiName) {
+        const apiUrl = this.environment.appUrl + apiName;
+        return this.http
+            .get(apiUrl, { withCredentials: true })
+            .pipe(map((response) => {
+            return response;
+        }), catchError(this.handleError));
+    }
+    handleError(error) {
+        return throwError(error);
     }
 }
-GammaAppControllerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GammaAppControllerService, deps: [{ token: 'APP_ENVIRONMENT' }], target: i0.ɵɵFactoryTarget.Injectable });
+GammaAppControllerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GammaAppControllerService, deps: [{ token: APP_ENVIRONMENT }, { token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
 GammaAppControllerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GammaAppControllerService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GammaAppControllerService, decorators: [{
             type: Injectable,
@@ -57,8 +71,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
-                    args: ['APP_ENVIRONMENT']
-                }] }]; } });
+                    args: [APP_ENVIRONMENT]
+                }] }, { type: i1.HttpClient }]; } });
 
 class GammaAppControllerComponent {
 }
@@ -127,8 +141,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 }]
         }] });
 
-const APP_ENVIRONMENT = new InjectionToken('APP_ENVIRONMENT');
-
 class ApplicationContentService {
     constructor(http, environment) {
         this.http = http;
@@ -7828,12 +7840,12 @@ class GammaAdvanceFilterComponent {
         }
     }
 }
-GammaAdvanceFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GammaAdvanceFilterComponent, deps: [{ token: ApplicationContentService }, { token: kpicommonService$1 }, { token: i3$1.ToastrService }, { token: CommonService }], target: i0.ɵɵFactoryTarget.Component });
+GammaAdvanceFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GammaAdvanceFilterComponent, deps: [{ token: GammaAppControllerService }, { token: kpicommonService$1 }, { token: i3$1.ToastrService }, { token: CommonService }], target: i0.ɵɵFactoryTarget.Component });
 GammaAdvanceFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: GammaAdvanceFilterComponent, selector: "app-gamma-advance-filter", inputs: { kpiId: "kpiId", filterStartDate: "filterStartDate", filterEndDate: "filterEndDate", browser_api_config: "browser_api_config", isButtonDesiable: "isButtonDesiable", filterOperatorData: "filterOperatorData" }, outputs: { filterDataObject: "filterDataObject" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "menuIcon", first: true, predicate: ["menuIcon"], descendants: true }], ngImport: i0, template: "<app-loader *ngIf=\"isLoader\"></app-loader>\n\n\n<ng-container *ngIf=\"!isLoader\">\n    <div class=\"flex flex-col border-b\">\n        <div class=\"flex flex-row justify-end mb-4\" *ngIf=\"quickDateSelector\">\n            <div class=\"w-1/4\">\n                <dx-select-box [dataSource]=\"ranges\" valueExpr=\"value\" displayExpr=\"name\"\n                    (onValueChanged)=\"getQuickDateClick($event)\" placeholder=\"Quick Dates\">\n                </dx-select-box>\n            </div>\n        </div>\n\n        <ng-container *ngFor=\"let filter of kpiFilterData\">\n\n            <div class=\"flex flex-row justify-between\">\n                <ng-container *ngIf=\"filter.filterType == 'date'\">\n                    <ng-container *ngIf=\"filter.display\">\n                        <div class=\"mb-2\">{{getCapitalize(filter.label)}}</div>\n                        <div class=\"mb-2\">\n                            <div class=\"w-80\" *ngIf=\"filter.momentFunction == 'monthPicker'\">\n                                <dx-date-box (onValueChanged)=\"startDateChangeForMonthPicker($event,filter.momentFormat)\"\n                                    displayFormat=\"monthAndYear\" placeholder=\"Select Month\"\n                                    [calendarOptions]=\"{maxZoomLevel: 'year', minZoomLevel: 'century'}\"\n                                    type=\"{{filter.filterType}}\" [(ngModel)]=\"filter.filterDataSourceValue\">\n                                </dx-date-box>\n                            </div>\n                            <div class=\"w-80\" *ngIf=\"filter.momentFunction == 'weekPicker'\">\n                                <dx-date-box (onValueChanged)=\"startDateChange($event)\" displayFormat=\"yyyy-MM-dd\"\n                                    type=\"{{filter.filterType}}\" [(ngModel)]=\"filter.filterDataSourceValue\">\n                                </dx-date-box>\n                            </div>\n                            <div class=\"w-80\"\n                                *ngIf=\"filter.momentFunction !== 'monthPicker' && filter.momentFunction !== 'weekPicker'\">\n                                <dx-date-box (onValueChanged)=\"startDateChange($event)\" displayFormat=\"yyyy-MM-dd\"\n                                    type=\"{{filter.filterType}}\" [(ngModel)]=\"filter.filterDataSourceValue\">\n                                </dx-date-box>\n                            </div>\n                        </div>\n                    </ng-container>\n\n\n                </ng-container>\n                <ng-container *ngIf=\"filter.filterType == 'datetime'\">\n                    <div class=\"mb-2\">{{getCapitalize(filter.label)}}</div>\n                    <div class=\"mb-2\">\n                        <div class=\"w-80\">\n                            <dx-date-box (onValueChanged)=\"startDateChange($event)\" displayFormat=\"yyyy-MM-dd HH:mm:ss\"\n                                type=\"{{filter.filterType}}\" [(ngModel)]=\"filter.filterDataSourceValue\">\n                            </dx-date-box>\n                        </div>\n                    </div>\n                </ng-container>\n                <ng-container *ngIf=\"filter.filterType !== 'date' && filter.filterType !== 'datetime'\">\n                    <div class=\"mb-2\">\n                        {{getCapitalize(filter.label)}}\n                    </div>\n                    <div class=\"mb-2\">\n                        <ng-container *ngIf=\"filter.filterType == 'multiple'\">\n                            <div class=\"w-80\">\n                                <dx-tag-box [dataSource]=\"filter.filterDataSource\" valueExpr=\"value\" displayExpr=\"name\"\n                                    [searchEnabled]=\"true\" [multiline]=\"true\" [maxDisplayedTags]=\"6\"\n                                    [(ngModel)]=\"filter.filterDataSourceValue\" [showSelectionControls]=\"true\"\n                                    [searchEnabled]=\"true\">\n                                </dx-tag-box>\n                            </div>\n                        </ng-container>\n                        <ng-container *ngIf=\"filter.filterType == 'single'\">\n                            <div class=\"w-80\">\n                                <dx-select-box [items]=\"filter.filterDataSource\"\n                                    [(ngModel)]=\"filter.filterDataSourceValue\" displayExpr=\"name\"\n                                    valueExpr=\"value\"></dx-select-box>\n                            </div>\n                        </ng-container>\n                        <ng-container *ngIf=\"filter.filterType == 'content'\">\n                            <div class=\"w-80\">\n                                <dx-text-box [(ngModel)]=\"filter.filterDataSourceValue\"></dx-text-box>\n                            </div>\n                        </ng-container>\n                    </div>\n                </ng-container>\n            </div>\n        </ng-container>\n    </div>\n    <div class=\"flex flex-row justify-end pl-3\">\n\n\n        <button class=\"{{commonService.BtnLightWhite}} cursor-pointer mt-2\" (click)=\"reseteFilter()\">Reset</button>\n        <button class=\"{{commonService.btnPrimaryBlue}} cursor-pointer mt-2\" (click)=\"searchByFilter()\"\n            *ngIf=\"isButtonDesiable\">Search</button>\n    </div>\n</ng-container>", styles: ["::ng-deep .dx-timeview{width:250px!important}::ng-deep .dx-timeview-field .dx-numberbox{width:70px!important}::ng-deep .dx-timeview-format12{width:70px!important}::ng-deep .dx-numberbox-spin-container{width:18px!important}::ng-deep .dx-texteditor{margin-bottom:10px}.floating-menu{position:absolute;display:none;background:white;border:1px solid #ccc;box-shadow:0 4px 8px #0000001a;z-index:1000;min-width:150px}.floating-menu.show{display:block;z-index:99999}.floating-menu ul{list-style:none;padding:0;margin:0}.floating-menu ul li{padding:10px;cursor:pointer}.floating-menu ul li:hover{background:#f0f0f0}\n"], dependencies: [{ kind: "directive", type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i11.DxDateBoxComponent, selector: "dx-date-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "adaptivityEnabled", "applyButtonText", "applyValueMode", "buttons", "calendarOptions", "cancelButtonText", "dateOutOfRangeMessage", "dateSerializationFormat", "deferRendering", "disabled", "disabledDates", "displayFormat", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "interval", "invalidDateMessage", "isValid", "label", "labelMode", "max", "maxLength", "min", "name", "opened", "openOnFieldClick", "pickerType", "placeholder", "readOnly", "rtlEnabled", "showAnalogClock", "showClearButton", "showDropDownButton", "spellcheck", "stylingMode", "tabIndex", "text", "type", "useMaskBehavior", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onClosed", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOpened", "onOptionChanged", "onPaste", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "adaptivityEnabledChange", "applyButtonTextChange", "applyValueModeChange", "buttonsChange", "calendarOptionsChange", "cancelButtonTextChange", "dateOutOfRangeMessageChange", "dateSerializationFormatChange", "deferRenderingChange", "disabledChange", "disabledDatesChange", "displayFormatChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "intervalChange", "invalidDateMessageChange", "isValidChange", "labelChange", "labelModeChange", "maxChange", "maxLengthChange", "minChange", "nameChange", "openedChange", "openOnFieldClickChange", "pickerTypeChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showAnalogClockChange", "showClearButtonChange", "showDropDownButtonChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "typeChange", "useMaskBehaviorChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "component", type: i6$1.DxSelectBoxComponent, selector: "dx-select-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "buttons", "dataSource", "deferRendering", "disabled", "displayExpr", "displayValue", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "fieldTemplate", "focusStateEnabled", "grouped", "groupTemplate", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "items", "itemTemplate", "label", "labelMode", "maxLength", "minSearchLength", "name", "noDataText", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "searchEnabled", "searchExpr", "searchMode", "searchTimeout", "selectedItem", "showClearButton", "showDataBeforeSearch", "showDropDownButton", "showSelectionControls", "spellcheck", "stylingMode", "tabIndex", "text", "useItemTextAsTitle", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueChangeEvent", "valueExpr", "visible", "width", "wrapItemText"], outputs: ["onChange", "onClosed", "onContentReady", "onCopy", "onCustomItemCreating", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onItemClick", "onKeyDown", "onKeyUp", "onOpened", "onOptionChanged", "onPaste", "onSelectionChanged", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "dataSourceChange", "deferRenderingChange", "disabledChange", "displayExprChange", "displayValueChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "groupedChange", "groupTemplateChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "itemsChange", "itemTemplateChange", "labelChange", "labelModeChange", "maxLengthChange", "minSearchLengthChange", "nameChange", "noDataTextChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "searchEnabledChange", "searchExprChange", "searchModeChange", "searchTimeoutChange", "selectedItemChange", "showClearButtonChange", "showDataBeforeSearchChange", "showDropDownButtonChange", "showSelectionControlsChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useItemTextAsTitleChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "valueExprChange", "visibleChange", "widthChange", "wrapItemTextChange", "onBlur"] }, { kind: "component", type: i8$1.DxTagBoxComponent, selector: "dx-tag-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "applyValueMode", "buttons", "dataSource", "deferRendering", "disabled", "displayExpr", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "fieldTemplate", "focusStateEnabled", "grouped", "groupTemplate", "height", "hideSelectedItems", "hint", "hoverStateEnabled", "inputAttr", "isValid", "items", "itemTemplate", "label", "labelMode", "maxDisplayedTags", "maxFilterQueryLength", "maxLength", "minSearchLength", "multiline", "name", "noDataText", "opened", "openOnFieldClick", "placeholder", "readOnly", "rtlEnabled", "searchEnabled", "searchExpr", "searchMode", "searchTimeout", "selectAllMode", "selectAllText", "selectedItems", "showClearButton", "showDataBeforeSearch", "showDropDownButton", "showMultiTagOnly", "showSelectionControls", "stylingMode", "tabIndex", "tagTemplate", "text", "useItemTextAsTitle", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueExpr", "visible", "width", "wrapItemText"], outputs: ["onChange", "onClosed", "onContentReady", "onCustomItemCreating", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onItemClick", "onKeyDown", "onKeyUp", "onMultiTagPreparing", "onOpened", "onOptionChanged", "onSelectAllValueChanged", "onSelectionChanged", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "applyValueModeChange", "buttonsChange", "dataSourceChange", "deferRenderingChange", "disabledChange", "displayExprChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "fieldTemplateChange", "focusStateEnabledChange", "groupedChange", "groupTemplateChange", "heightChange", "hideSelectedItemsChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "itemsChange", "itemTemplateChange", "labelChange", "labelModeChange", "maxDisplayedTagsChange", "maxFilterQueryLengthChange", "maxLengthChange", "minSearchLengthChange", "multilineChange", "nameChange", "noDataTextChange", "openedChange", "openOnFieldClickChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "searchEnabledChange", "searchExprChange", "searchModeChange", "searchTimeoutChange", "selectAllModeChange", "selectAllTextChange", "selectedItemsChange", "showClearButtonChange", "showDataBeforeSearchChange", "showDropDownButtonChange", "showMultiTagOnlyChange", "showSelectionControlsChange", "stylingModeChange", "tabIndexChange", "tagTemplateChange", "textChange", "useItemTextAsTitleChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueExprChange", "visibleChange", "widthChange", "wrapItemTextChange", "onBlur"] }, { kind: "component", type: i7.DxTextBoxComponent, selector: "dx-text-box", inputs: ["accessKey", "activeStateEnabled", "buttons", "disabled", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "isValid", "label", "labelMode", "mask", "maskChar", "maskInvalidMessage", "maskRules", "maxLength", "mode", "name", "placeholder", "readOnly", "rtlEnabled", "showClearButton", "showMaskMode", "spellcheck", "stylingMode", "tabIndex", "text", "useMaskedValue", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOptionChanged", "onPaste", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "buttonsChange", "disabledChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "isValidChange", "labelChange", "labelModeChange", "maskChange", "maskCharChange", "maskInvalidMessageChange", "maskRulesChange", "maxLengthChange", "modeChange", "nameChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showClearButtonChange", "showMaskModeChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "useMaskedValueChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: LoaderComponent, selector: "app-loader" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GammaAdvanceFilterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-gamma-advance-filter', template: "<app-loader *ngIf=\"isLoader\"></app-loader>\n\n\n<ng-container *ngIf=\"!isLoader\">\n    <div class=\"flex flex-col border-b\">\n        <div class=\"flex flex-row justify-end mb-4\" *ngIf=\"quickDateSelector\">\n            <div class=\"w-1/4\">\n                <dx-select-box [dataSource]=\"ranges\" valueExpr=\"value\" displayExpr=\"name\"\n                    (onValueChanged)=\"getQuickDateClick($event)\" placeholder=\"Quick Dates\">\n                </dx-select-box>\n            </div>\n        </div>\n\n        <ng-container *ngFor=\"let filter of kpiFilterData\">\n\n            <div class=\"flex flex-row justify-between\">\n                <ng-container *ngIf=\"filter.filterType == 'date'\">\n                    <ng-container *ngIf=\"filter.display\">\n                        <div class=\"mb-2\">{{getCapitalize(filter.label)}}</div>\n                        <div class=\"mb-2\">\n                            <div class=\"w-80\" *ngIf=\"filter.momentFunction == 'monthPicker'\">\n                                <dx-date-box (onValueChanged)=\"startDateChangeForMonthPicker($event,filter.momentFormat)\"\n                                    displayFormat=\"monthAndYear\" placeholder=\"Select Month\"\n                                    [calendarOptions]=\"{maxZoomLevel: 'year', minZoomLevel: 'century'}\"\n                                    type=\"{{filter.filterType}}\" [(ngModel)]=\"filter.filterDataSourceValue\">\n                                </dx-date-box>\n                            </div>\n                            <div class=\"w-80\" *ngIf=\"filter.momentFunction == 'weekPicker'\">\n                                <dx-date-box (onValueChanged)=\"startDateChange($event)\" displayFormat=\"yyyy-MM-dd\"\n                                    type=\"{{filter.filterType}}\" [(ngModel)]=\"filter.filterDataSourceValue\">\n                                </dx-date-box>\n                            </div>\n                            <div class=\"w-80\"\n                                *ngIf=\"filter.momentFunction !== 'monthPicker' && filter.momentFunction !== 'weekPicker'\">\n                                <dx-date-box (onValueChanged)=\"startDateChange($event)\" displayFormat=\"yyyy-MM-dd\"\n                                    type=\"{{filter.filterType}}\" [(ngModel)]=\"filter.filterDataSourceValue\">\n                                </dx-date-box>\n                            </div>\n                        </div>\n                    </ng-container>\n\n\n                </ng-container>\n                <ng-container *ngIf=\"filter.filterType == 'datetime'\">\n                    <div class=\"mb-2\">{{getCapitalize(filter.label)}}</div>\n                    <div class=\"mb-2\">\n                        <div class=\"w-80\">\n                            <dx-date-box (onValueChanged)=\"startDateChange($event)\" displayFormat=\"yyyy-MM-dd HH:mm:ss\"\n                                type=\"{{filter.filterType}}\" [(ngModel)]=\"filter.filterDataSourceValue\">\n                            </dx-date-box>\n                        </div>\n                    </div>\n                </ng-container>\n                <ng-container *ngIf=\"filter.filterType !== 'date' && filter.filterType !== 'datetime'\">\n                    <div class=\"mb-2\">\n                        {{getCapitalize(filter.label)}}\n                    </div>\n                    <div class=\"mb-2\">\n                        <ng-container *ngIf=\"filter.filterType == 'multiple'\">\n                            <div class=\"w-80\">\n                                <dx-tag-box [dataSource]=\"filter.filterDataSource\" valueExpr=\"value\" displayExpr=\"name\"\n                                    [searchEnabled]=\"true\" [multiline]=\"true\" [maxDisplayedTags]=\"6\"\n                                    [(ngModel)]=\"filter.filterDataSourceValue\" [showSelectionControls]=\"true\"\n                                    [searchEnabled]=\"true\">\n                                </dx-tag-box>\n                            </div>\n                        </ng-container>\n                        <ng-container *ngIf=\"filter.filterType == 'single'\">\n                            <div class=\"w-80\">\n                                <dx-select-box [items]=\"filter.filterDataSource\"\n                                    [(ngModel)]=\"filter.filterDataSourceValue\" displayExpr=\"name\"\n                                    valueExpr=\"value\"></dx-select-box>\n                            </div>\n                        </ng-container>\n                        <ng-container *ngIf=\"filter.filterType == 'content'\">\n                            <div class=\"w-80\">\n                                <dx-text-box [(ngModel)]=\"filter.filterDataSourceValue\"></dx-text-box>\n                            </div>\n                        </ng-container>\n                    </div>\n                </ng-container>\n            </div>\n        </ng-container>\n    </div>\n    <div class=\"flex flex-row justify-end pl-3\">\n\n\n        <button class=\"{{commonService.BtnLightWhite}} cursor-pointer mt-2\" (click)=\"reseteFilter()\">Reset</button>\n        <button class=\"{{commonService.btnPrimaryBlue}} cursor-pointer mt-2\" (click)=\"searchByFilter()\"\n            *ngIf=\"isButtonDesiable\">Search</button>\n    </div>\n</ng-container>", styles: ["::ng-deep .dx-timeview{width:250px!important}::ng-deep .dx-timeview-field .dx-numberbox{width:70px!important}::ng-deep .dx-timeview-format12{width:70px!important}::ng-deep .dx-numberbox-spin-container{width:18px!important}::ng-deep .dx-texteditor{margin-bottom:10px}.floating-menu{position:absolute;display:none;background:white;border:1px solid #ccc;box-shadow:0 4px 8px #0000001a;z-index:1000;min-width:150px}.floating-menu.show{display:block;z-index:99999}.floating-menu ul{list-style:none;padding:0;margin:0}.floating-menu ul li{padding:10px;cursor:pointer}.floating-menu ul li:hover{background:#f0f0f0}\n"] }]
-        }], ctorParameters: function () { return [{ type: ApplicationContentService }, { type: kpicommonService$1 }, { type: i3$1.ToastrService }, { type: CommonService }]; }, propDecorators: { kpiId: [{
+        }], ctorParameters: function () { return [{ type: GammaAppControllerService }, { type: kpicommonService$1 }, { type: i3$1.ToastrService }, { type: CommonService }]; }, propDecorators: { kpiId: [{
                 type: Input
             }], filterStartDate: [{
                 type: Input
@@ -17649,125 +17661,18 @@ class KpiWithSingleLayoutService {
             return response;
         }), catchError(this.handleError));
     }
-}
-KpiWithSingleLayoutService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: KpiWithSingleLayoutService, deps: [{ token: i1.HttpClient }, { token: APP_ENVIRONMENT }], target: i0.ɵɵFactoryTarget.Injectable });
-KpiWithSingleLayoutService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: KpiWithSingleLayoutService, providedIn: "root" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: KpiWithSingleLayoutService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: "root" }]
-        }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [APP_ENVIRONMENT]
-                }] }]; } });
-
-class KpiWithMultiLayoutService {
-    constructor(http, environment) {
-        this.http = http;
-        this.environment = environment;
-        this.headers = new HttpHeaders().set('Content-Type', 'application/json');
-        this.options = { headers: this.headers, withCredentials: true };
-        this._selectedKpiOnClick = new Subject();
-        this._kpilist = new Subject();
-        this._selectKpiFromDropDown = new Subject();
-        this._componentRegistry = new Map();
-        this.kpiFilter = new BehaviorSubject([]);
-    }
-    handleError(error) {
-        return throwError(error);
-    }
-    getlistKpiBrowser() {
-        const apiUrl = this.environment.appUrl + this.environment.apiVersion + '/kpi-config/listKpiBrowser';
-        return this.http
-            .get(apiUrl, { withCredentials: true })
-            .pipe(map((response) => {
-            return response;
-        }), catchError(this.handleError));
-    }
-    getAppPageDetailConfig(pageId) {
-        return this.http
-            .get(this.environment.appUrl + this.environment.apiVersion + '/kpi-config/getAppPageDetailConfig?pageConfigId=' + pageId, this.options)
-            .pipe(map((response) => {
-            return response;
-        }), catchError(this.handleError));
-    }
-    getAppPageConfigs() {
-        const apiUrl = this.environment.appUrl + this.environment.apiVersion + '/kpi-config/getAppPageConfigs';
-        return this.http
-            .get(apiUrl, { withCredentials: true })
-            .pipe(map((response) => {
-            return response;
-        }), catchError(this.handleError));
-    }
-    getAppDatasetConfigs() {
-        const apiUrl = this.environment.appUrl + this.environment.apiVersion + '/kpi-config/getAppDatasetConfigs';
-        return this.http
-            .get(apiUrl, { withCredentials: true })
-            .pipe(map((response) => {
-            return response;
-        }), catchError(this.handleError));
-    }
-    getAppDatasetConfig(datasetId) {
-        const apiUrl = this.environment.appUrl + this.environment.apiVersion + '/kpi-config/getAppDatasetConfig?datasetId=' + datasetId;
-        return this.http
-            .get(apiUrl, { withCredentials: true })
-            .pipe(map((response) => {
-            return response;
-        }), catchError(this.handleError));
-    }
-    getAppFilterConfig(filterId) {
-        return this.http
-            .get(this.environment.appUrl + this.environment.apiVersion + '/kpi-config/getAppFilterConfig?filterId=' + filterId, this.options)
-            .pipe(map((response) => {
-            return response;
-        }), catchError(this.handleError));
-    }
-    getAppViewConfigs() {
-        const apiUrl = this.environment.appUrl + this.environment.apiVersion + '/kpi-config/getAppViewConfigs';
+    getFilterDataByDrillDown(apiName) {
+        const apiUrl = this.environment.appUrl + apiName;
         return this.http
             .get(apiUrl, { withCredentials: true })
             .pipe(map((response) => {
             return response;
         }), catchError(this.handleError));
     }
-    getData(body, requestID) {
-        return this.http
-            .post(this.environment.appUrl + this.environment.apiVersion + requestID, JSON.stringify(body), this.options)
-            .pipe(map((response) => {
-            return response;
-        }), catchError(this.handleError));
-    }
-    getSimpleApiPostRequest(requestApi, body) {
-        return this.http
-            .post(this.environment.appUrl + this.environment.apiVersion + requestApi, JSON.stringify(body), this.options)
-            .pipe(map((response) => {
-            return response;
-        }), catchError(this.handleError));
-    }
-    getSimpleApiGetRequest(requestApi) {
-        return this.http
-            .get(this.environment.appUrl + this.environment.apiVersion + requestApi, { withCredentials: true })
-            .pipe(map((response) => {
-            return response;
-        }), catchError(this.handleError));
-    }
-    getJsonDatasetPayload(requestApi) {
-        return this.http
-            .get(this.environment.appUrl + this.environment.apiVersion + requestApi, { withCredentials: true })
-            .pipe(map((response) => {
-            return response;
-        }), catchError(this.handleError));
-    }
-    genericSqlQueryResponse(requestApi, body) {
-        return this.http
-            .post(this.environment.appUrl + this.environment.apiVersion + requestApi, JSON.stringify(body), this.options)
-            .pipe(map((response) => {
-            return response;
-        }), catchError(this.handleError));
-    }
 }
-KpiWithMultiLayoutService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: KpiWithMultiLayoutService, deps: [{ token: i1.HttpClient }, { token: APP_ENVIRONMENT }], target: i0.ɵɵFactoryTarget.Injectable });
-KpiWithMultiLayoutService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: KpiWithMultiLayoutService, providedIn: "root" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: KpiWithMultiLayoutService, decorators: [{
+KpiWithSingleLayoutService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: KpiWithSingleLayoutService, deps: [{ token: i1.HttpClient }, { token: APP_ENVIRONMENT }], target: i0.ɵɵFactoryTarget.Injectable });
+KpiWithSingleLayoutService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: KpiWithSingleLayoutService, providedIn: "root" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: KpiWithSingleLayoutService, decorators: [{
             type: Injectable,
             args: [{ providedIn: "root" }]
         }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: undefined, decorators: [{
@@ -18124,12 +18029,12 @@ class SingleLayoutApplicationDatssetsCall {
         return this.uniqueDataSetObject;
     }
 }
-SingleLayoutApplicationDatssetsCall.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SingleLayoutApplicationDatssetsCall, deps: [{ token: KpiWithMultiLayoutService }, { token: kpicommonService$2 }, { token: i3$1.ToastrService }, { token: i2.Router }, { token: APP_ENVIRONMENT }], target: i0.ɵɵFactoryTarget.Injectable });
+SingleLayoutApplicationDatssetsCall.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SingleLayoutApplicationDatssetsCall, deps: [{ token: KpiWithSingleLayoutService }, { token: kpicommonService$2 }, { token: i3$1.ToastrService }, { token: i2.Router }, { token: APP_ENVIRONMENT }], target: i0.ɵɵFactoryTarget.Injectable });
 SingleLayoutApplicationDatssetsCall.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SingleLayoutApplicationDatssetsCall, providedIn: "root" });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SingleLayoutApplicationDatssetsCall, decorators: [{
             type: Injectable,
             args: [{ providedIn: "root" }]
-        }], ctorParameters: function () { return [{ type: KpiWithMultiLayoutService }, { type: kpicommonService$2 }, { type: i3$1.ToastrService }, { type: i2.Router }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: KpiWithSingleLayoutService }, { type: kpicommonService$2 }, { type: i3$1.ToastrService }, { type: i2.Router }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [APP_ENVIRONMENT]
                 }] }]; } });
@@ -19814,6 +19719,121 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 args: ['modalConfigs']
             }] } });
 
+class KpiWithMultiLayoutService {
+    constructor(http, environment) {
+        this.http = http;
+        this.environment = environment;
+        this.headers = new HttpHeaders().set('Content-Type', 'application/json');
+        this.options = { headers: this.headers, withCredentials: true };
+        this._selectedKpiOnClick = new Subject();
+        this._kpilist = new Subject();
+        this._selectKpiFromDropDown = new Subject();
+        this._componentRegistry = new Map();
+        this.kpiFilter = new BehaviorSubject([]);
+    }
+    handleError(error) {
+        return throwError(error);
+    }
+    getlistKpiBrowser() {
+        const apiUrl = this.environment.appUrl + this.environment.apiVersion + '/kpi-config/listKpiBrowser';
+        return this.http
+            .get(apiUrl, { withCredentials: true })
+            .pipe(map((response) => {
+            return response;
+        }), catchError(this.handleError));
+    }
+    getAppPageDetailConfig(pageId) {
+        return this.http
+            .get(this.environment.appUrl + this.environment.apiVersion + '/kpi-config/getAppPageDetailConfig?pageConfigId=' + pageId, this.options)
+            .pipe(map((response) => {
+            return response;
+        }), catchError(this.handleError));
+    }
+    getAppPageConfigs() {
+        const apiUrl = this.environment.appUrl + this.environment.apiVersion + '/kpi-config/getAppPageConfigs';
+        return this.http
+            .get(apiUrl, { withCredentials: true })
+            .pipe(map((response) => {
+            return response;
+        }), catchError(this.handleError));
+    }
+    getAppDatasetConfigs() {
+        const apiUrl = this.environment.appUrl + this.environment.apiVersion + '/kpi-config/getAppDatasetConfigs';
+        return this.http
+            .get(apiUrl, { withCredentials: true })
+            .pipe(map((response) => {
+            return response;
+        }), catchError(this.handleError));
+    }
+    getAppDatasetConfig(datasetId) {
+        const apiUrl = this.environment.appUrl + this.environment.apiVersion + '/kpi-config/getAppDatasetConfig?datasetId=' + datasetId;
+        return this.http
+            .get(apiUrl, { withCredentials: true })
+            .pipe(map((response) => {
+            return response;
+        }), catchError(this.handleError));
+    }
+    getAppFilterConfig(filterId) {
+        return this.http
+            .get(this.environment.appUrl + this.environment.apiVersion + '/kpi-config/getAppFilterConfig?filterId=' + filterId, this.options)
+            .pipe(map((response) => {
+            return response;
+        }), catchError(this.handleError));
+    }
+    getAppViewConfigs() {
+        const apiUrl = this.environment.appUrl + this.environment.apiVersion + '/kpi-config/getAppViewConfigs';
+        return this.http
+            .get(apiUrl, { withCredentials: true })
+            .pipe(map((response) => {
+            return response;
+        }), catchError(this.handleError));
+    }
+    getData(body, requestID) {
+        return this.http
+            .post(this.environment.appUrl + this.environment.apiVersion + requestID, JSON.stringify(body), this.options)
+            .pipe(map((response) => {
+            return response;
+        }), catchError(this.handleError));
+    }
+    getSimpleApiPostRequest(requestApi, body) {
+        return this.http
+            .post(this.environment.appUrl + this.environment.apiVersion + requestApi, JSON.stringify(body), this.options)
+            .pipe(map((response) => {
+            return response;
+        }), catchError(this.handleError));
+    }
+    getSimpleApiGetRequest(requestApi) {
+        return this.http
+            .get(this.environment.appUrl + this.environment.apiVersion + requestApi, { withCredentials: true })
+            .pipe(map((response) => {
+            return response;
+        }), catchError(this.handleError));
+    }
+    getJsonDatasetPayload(requestApi) {
+        return this.http
+            .get(this.environment.appUrl + this.environment.apiVersion + requestApi, { withCredentials: true })
+            .pipe(map((response) => {
+            return response;
+        }), catchError(this.handleError));
+    }
+    genericSqlQueryResponse(requestApi, body) {
+        return this.http
+            .post(this.environment.appUrl + this.environment.apiVersion + requestApi, JSON.stringify(body), this.options)
+            .pipe(map((response) => {
+            return response;
+        }), catchError(this.handleError));
+    }
+}
+KpiWithMultiLayoutService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: KpiWithMultiLayoutService, deps: [{ token: i1.HttpClient }, { token: APP_ENVIRONMENT }], target: i0.ɵɵFactoryTarget.Injectable });
+KpiWithMultiLayoutService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: KpiWithMultiLayoutService, providedIn: "root" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: KpiWithMultiLayoutService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: "root" }]
+        }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [APP_ENVIRONMENT]
+                }] }]; } });
+
 class MultilayoutApplicationDatssetsCall {
     constructor(service, kpiService, toastr, environment) {
         this.service = service;