{"__symbolic":"module","version":4,"metadata":{"MdgPivotComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":20,"character":1},"arguments":[{"selector":"mdg-pivot","template":"<div class='mdg-pivot-container' [class.full-screen]='isFullScreen' #container>\n  <mdg-toolbar #toolbar [dataLoading]='isLoading' [isCustomSave]='isCustomSave' [isSaveSubscribed]='isSaveSubscribed' [isFullScreen]='isFullScreen' [toolbarConfig]='toolbarConfig' [formulas]='formulas' (applyChanges)='onApplyChanges($event)'\n    (exportReport)='onExportReport($event)' (showFullScreen)='onShowFullScreen($event)' (updateFormat)='onUpdateFormat($event)'\n    (saveReport)='onSaveReport($event)' (changeChartType)='onChangeChartType($event)' [pivotConfig]='pivotConfig'\n    (error)='onError($event)'></mdg-toolbar>\n  <mdg-pivotdrawer #pivot [formulas]='formulas' [columns]='columns' [chartType]='pivotConfig.reportType' [title]='pivotConfig.reportTitle'\n    [selectedColumns]='selectedColumns' [selectedRows]='selectedRows' [selectedValues]='selectedValues' [pivotConfig]='pivotConfig'\n    [selectedFColumns]='selectedFColumns' [noRecordsMessage]='noRecordsMessage' (loading)='onLoading($event)' (error)='onError($event)' [filters]='filters'></mdg-pivotdrawer>\n</div> ","styles":[]}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":3}}]}],"autoConfigurePivot":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":3}}]}],"pivotFormat":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":3}}]}],"toolbarFormat":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":3}}]}],"isLoading":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":3}}]}],"isCustomSave":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":3}}]}],"noRecordsMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":3}}]}],"pivot":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":43,"character":3},"arguments":["pivot"]}]}],"toolbar":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":44,"character":3},"arguments":["toolbar"]}]}],"container":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":45,"character":3},"arguments":["container"]}]}],"savePivot":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":47,"character":3}}]}],"error":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":48,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","name":"ɵd"}]}],"ngOnInit":[{"__symbolic":"method"}],"onFullScreenChange":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":108,"character":3},"arguments":["document: fullscreenchange",["$event"]]}]}],"onWebkitFullScreenChange":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":113,"character":3},"arguments":["document: webkitfullscreenchange",["$event"]]}]}],"ngOnChanges":[{"__symbolic":"method"}],"onChangeChartType":[{"__symbolic":"method"}],"refreshData":[{"__symbolic":"method"}],"checkFullScreen":[{"__symbolic":"method"}],"copytoolbarFormat":[{"__symbolic":"method"}],"setDefaults":[{"__symbolic":"method"}],"findColumns":[{"__symbolic":"method"}],"copyColumn":[{"__symbolic":"method"}],"assignDataType":[{"__symbolic":"method"}],"getDataType":[{"__symbolic":"method"}],"onApplyChanges":[{"__symbolic":"method"}],"onUpdateFormat":[{"__symbolic":"method"}],"onExportReport":[{"__symbolic":"method"}],"onShowFullScreen":[{"__symbolic":"method"}],"onSaveReport":[{"__symbolic":"method"}],"onLoading":[{"__symbolic":"method"}],"onError":[{"__symbolic":"method"}]}},"MdgPivotModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":45,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"MdgPivotComponent"},{"__symbolic":"reference","name":"ɵe"},{"__symbolic":"reference","name":"ɵf"},{"__symbolic":"reference","name":"ɵg"},{"__symbolic":"reference","name":"ɵh"},{"__symbolic":"reference","name":"ɵj"},{"__symbolic":"reference","name":"ɵk"},{"__symbolic":"reference","name":"ɵl"},{"__symbolic":"reference","name":"ɵm"},{"__symbolic":"reference","name":"ɵn"},{"__symbolic":"reference","name":"ɵo"},{"__symbolic":"reference","name":"ɵp"},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵq"},{"__symbolic":"reference","name":"ɵr"},{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","name":"ɵi"},{"__symbolic":"reference","name":"ɵd"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":67,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":68,"character":4},{"__symbolic":"reference","module":"ng2-charts","name":"ChartsModule","line":69,"character":4},{"__symbolic":"reference","module":"ng2-dnd","name":"DndModule","line":70,"character":4},{"__symbolic":"reference","module":"primeng/calendar","name":"CalendarModule","line":71,"character":4}],"providers":[{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","module":"@angular/common","name":"DecimalPipe","line":32,"character":2},{"__symbolic":"reference","module":"@angular/common","name":"CurrencyPipe","line":33,"character":2},{"__symbolic":"reference","module":"@angular/common","name":"DatePipe","line":34,"character":2},{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","name":"ɵq"},{"__symbolic":"reference","name":"ɵr"},{"__symbolic":"reference","name":"ɵi"},{"__symbolic":"reference","name":"ɵd"},{"__symbolic":"reference","module":"ng2-dnd","name":"DragDropService","line":40,"character":2},{"__symbolic":"reference","module":"ng2-dnd","name":"DragDropConfig","line":41,"character":2},{"__symbolic":"reference","name":"ɵa"}],"exports":[{"__symbolic":"reference","name":"MdgPivotComponent"}]}]}],"members":{}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":3,"character":1}}],"members":{"copyArray":[{"__symbolic":"method"}],"copyObject":[{"__symbolic":"method"}],"getMonthName":[{"__symbolic":"method"}],"getHeaderStyle":[{"__symbolic":"method"}],"getGrandTotalStyle":[{"__symbolic":"method"}],"getCellStyle":[{"__symbolic":"method"}],"getStyleData":[{"__symbolic":"method"}],"getPageInfo":[{"__symbolic":"method"}]}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":3,"character":1},"arguments":[{"name":"distinct"}]}],"members":{"transform":[{"__symbolic":"method"}],"transformArr":[{"__symbolic":"method"}]}},"ɵc":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":5,"character":1},"arguments":[{"name":"sortBy"}]}],"members":{"transformObj":[{"__symbolic":"method"}],"transformGroup":[{"__symbolic":"method"}],"transform":[{"__symbolic":"method"}],"transformDate":[{"__symbolic":"method"}],"transformString":[{"__symbolic":"method"}],"transformValues":[{"__symbolic":"method"}],"transformfields":[{"__symbolic":"method"}],"obLen":[{"__symbolic":"method"}],"obIx":[{"__symbolic":"method"}],"keySort":[{"__symbolic":"method"}]}},"ɵd":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":5,"character":1},"arguments":[{"name":"format"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/common","name":"DatePipe","line":7,"character":34},{"__symbolic":"reference","module":"@angular/common","name":"DecimalPipe","line":7,"character":65},{"__symbolic":"reference","module":"@angular/common","name":"CurrencyPipe","line":7,"character":100},{"__symbolic":"reference","name":"ɵa"}]}],"transform":[{"__symbolic":"method"}],"transformStr":[{"__symbolic":"method"}]}},"ɵe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":13,"character":1},"arguments":[{"selector":"mdg-toolbar","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":15,"character":19},"member":"OnPush"},"template":"<div class='mdg-toolbar' [ngClass]='toolbarConfig.class'>\n  <div class='mdg-config' [ngClass]='toolbarConfig.optionsConfig.class' *ngIf=\"pivotConfig.showOptions\">\n    <a (click)='showOption = !showOption' [class.disabled]='dataLoading' [title]=\"toolbarConfig.optionsConfig.title\">\n      <i [class]=\"toolbarConfig.optionsConfig.icon\"></i>\n      <span>{{toolbarConfig.optionsConfig.text}}</span>\n    </a>\n  </div>\n  <div class='mdg-filter' [ngClass]='toolbarConfig.filterConfig.class' *ngIf=\"pivotConfig.showFilter\">\n    <a (click)='ShowFilter()' [class.disabled]='dataLoading' [title]=\"toolbarConfig.optionsConfig.title\">\n      <i [class]=\"toolbarConfig.filterConfig.icon\"></i>\n      <span>{{toolbarConfig.filterConfig.text}}</span>\n    </a>\n  </div>\n  <div class='mdg-format' [ngClass]='toolbarConfig.formatConfig.class' *ngIf=\"pivotConfig.showFormat\">\n    <a (click)='ShowFormat()' [class.disabled]='dataLoading' [title]=\"toolbarConfig.optionsConfig.title\">\n      <i [class]=\"toolbarConfig.formatConfig.icon\"></i>\n      <span>{{toolbarConfig.formatConfig.text}}</span>\n    </a>\n  </div>\n  <div class='mdg-export mdg-pivottype' [ngClass]='toolbarConfig.pivotTypeConfig.class' *ngIf=\"pivotConfig.showExport || pivotConfig.showPrint\">\n    <div class=\"dropdown\">\n      <div [class.disabled]='dataLoading'>\n        <a class=\"dropdown-toggle\" [class.disabled]='dataLoading' [title]='toolbarConfig.pivotTypeConfig.title'>\n          <i class=\"fa fa-fw {{chartType.class}}\"></i>\n          <span>{{chartType.text}}</span>\n        </a>\n        <ul class=\"dropdown-menu no-radius\">\n          <li *ngFor=\"let ct of availChartTypes;\">\n            <a (click)='selectChart(ct)'>\n              <i class='fa {{ct.class}}'></i> {{ct.text}}</a>\n          </li>\n        </ul>\n      </div>\n    </div>\n  </div>\n  <div class='mdg-export' [ngClass]='toolbarConfig.exportConfig.class' *ngIf=\"pivotConfig.showExport || pivotConfig.showPrint\">\n    <div class=\"dropdown\">\n      <div [class.disabled]='dataLoading'>\n        <a class=\"dropdown-toggle\" [class.disabled]='dataLoading' [title]='toolbarConfig.exportConfig.title'>\n          <i [class]=\"toolbarConfig.exportConfig.icon\"></i>\n          <span>{{toolbarConfig.exportConfig.text}}</span>\n        </a>\n        <ul class=\"dropdown-menu no-radius\">\n          <li *ngIf=\"pivotConfig.showExport && chartType.value === 'grid'\">\n            <a (click)='exportPivot(\"XLS\")'>\n              <i class='fa fa-file-excel-o'></i> Excel</a>\n          </li>\n          <li *ngIf=\"pivotConfig.showExport && chartType.value !== 'grid'\">\n            <a (click)='exportPivot(\"IMG\")'>\n              <i class='fa fa-file-image-o'></i> Image</a>\n          </li>\n          <li *ngIf=\"pivotConfig.showExport\">\n            <a (click)='exportPivot(\"PDF\")'>\n              <i class='fa fa-file-pdf-o'></i> PDF</a>\n          </li>\n          <li *ngIf=\"pivotConfig.showPrint\">\n            <a (click)='exportPivot(\"PRINT\")'>\n              <i class='fa fa-print'></i> Print</a>\n          </li>\n        </ul>\n      </div>\n    </div>\n  </div>\n  <div class='mdg-save' [ngClass]='toolbarConfig.saveConfig.class' *ngIf=\"pivotConfig.showSave\">\n    <a (click)='SavePivot()' [class.disabled]='dataLoading' [title]=\"toolbarConfig.saveConfig.title\">\n      <i [class]=\"toolbarConfig.saveConfig.icon\"></i>\n      <span>{{toolbarConfig.saveConfig.text}}</span>\n    </a>\n  </div>\n  <div class='mdg-fullscreen' [ngClass]='toolbarConfig.fullscreenConfig.class' >\n    <a (click)='ShowFullScreen()' *ngIf=\"!isFSRequested\" [class.disabled]='dataLoading' [title]=\"toolbarConfig.fullscreenConfig.title\">\n      <i [class]=\"toolbarConfig.fullscreenConfig.icon\"></i>\n      <span>{{toolbarConfig.fullscreenConfig.text}}</span>\n    </a>\n    <a (click)='RestoreFullScreen()' *ngIf=\"isFSRequested\" [class.disabled]='dataLoading' [title]=\"toolbarConfig.fullscreenConfig.closeTitle\">\n      <i [class]=\"toolbarConfig.fullscreenConfig.closeIcon\"></i>\n      <span>{{toolbarConfig.fullscreenConfig.text}}</span>\n    </a>\n  </div>\n</div>\n<div *ngIf=\"showOption\" class='mdg-options-container'>\n  <div class=\"mdg-options-popup-container\">\n    <div class='row'>\n      <div class=\"col-md-12 col-sm-12 col-xs-12 col-lg-12\">\n        <div class='row'>\n          <div class=\"col-md-6 col-sm-6 col-xs-12 col-lg-6\">\n            <h3>\n              <i class=\"fa fa-fw fa-table\"></i> Configure Pivot fields</h3>\n          </div>\n          <div class=\"col-md-6 col-sm-6 col-xs-12 col-lg-6 text-lg-right text-md-right text-sm-right\">\n            <small>Drag & Drop fields to configure your pivot report.</small>\n          </div>\n        </div>\n        <hr class=\"buffer-5-0\">\n      </div>\n      <div class=\"col-md-12 col-sm-12 col-xs-12 col-lg-12 content\">\n        <div class='row'>\n          <div class='col-md-3 col-sm-3 col-xs-12'>\n            <div class='border-top-ddd border-left-ddd border-right-ddd'>\n              <div class=\"padding-5 bg-f7f7f7\" *ngIf=\"showColSearch\">\n                <input class=\"mdg-toolbar-search-input\" [(ngModel)]='searchText' (keyup)='onColSearch()' (keydown)='onColSearch()' placeholder=\"Search Fields...\">\n                <div class=\"pull-right right-buffer-5\">\n                  <i class='fa fa-times cursor-pointer' (click)='showColSearch = !showColSearch; searchText = \"\"; onColSearch()'></i>\n                </div>\n              </div>\n              <div *ngIf=\"!showColSearch\" class=\"padding-5 bg-f7f7f7\">List of Fields\n                <div class=\"pull-right right-buffer-5\">\n                  <i class='fa fa-search cursor-pointer padding-right-5' (click)='showColSearch = !showColSearch'></i>\n                  <i class='fa cursor-pointer' (click)='checkSelection()' [class.fa-check-square-o]='selectAll' [class.padding-right-2]='!selectAll'\n                    [class.fa-square-o]='!selectAll'></i>\n                </div>\n              </div>\n            </div>\n            <div class=\"mdg-options-stack-container overflow-y border-ddd\" dnd-droppable (onDropSuccess)=\"onDropped($event)\">\n              <div class=\"border-bottom-ddd padding-5\" dnd-draggable *ngFor=\"let col of scolumns\" [dragData]=\"col\" [class.text-bold]='col.checked' title=\"{{col.displayName}}\">\n                <i class='fa fa-reorder cursor-move font-10'></i> {{col.displayName}}\n                <div class=\"pull-right\">\n                  <i class='fa cursor-pointer' (click)='selectCheck(col)' [class.fa-check-square-o]='col.checked' [class.padding-right-2]='!col.checked'\n                    [class.fa-square-o]='!col.checked'></i>\n                </div>\n              </div>\n              <div class='border-bottom-ddd'>\n                <div class=\"padding-5 bg-f7f7f7\" *ngIf=\"formulaFields.length > 0\">Formula Fields</div>\n              </div>\n              <div class=\"border-bottom-ddd padding-5\" dnd-draggable *ngFor=\"let col of formulaFields\" [dragData]=\"col\" title=\"{{col.displayName}}\">\n                <i class='fa fa-reorder cursor-move font-10'></i> {{col.displayName}}\n                <div class=\"pull-right\">\n                  <i class='fa cursor-pointer fa-pencil' (click)='editFormula(col)'></i>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div class='col-md-3 col-sm-3 col-xs-12'>\n            <div class='border-top-ddd border-left-ddd border-right-ddd'>\n              <div class=\"padding-5 bg-f7f7f7\">Columns\n                <div class=\"pull-right cursor-pointer mouse-over-000\" title='Move Down'>\n                  <i class='fa fa-arrow-down text-999 mouse-over-000' (click)='colMoveDown()'></i>\n                </div>\n                <div class=\"pull-right cursor-pointer right-buffer-10 mouse-over-000\" title='Move Up'>\n                  <i class='fa fa-arrow-up text-999 mouse-over-000' (click)='colMoveUp()'></i>\n                </div>\n              </div>\n            </div>\n            <div class=\"mdg-options-stack-container overflow-y border-ddd\" dnd-droppable (onDropSuccess)=\"onColDropped($event)\">\n              <div class=\"border-bottom-ddd padding-5\" [class.mdg-selected]='col.selected' dnd-draggable [dragData]=\"col\" *ngFor=\"let col of selectedColumns\"\n                (click)='selectColItem(col)' title=\"{{col.displayName}}\">\n                <i class='fa fa-reorder cursor-move font-10'></i> {{col.displayName}}\n                <!-- <div class=\"pull-right\">{{col.colOrder}}</div> -->\n              </div>\n            </div>\n          </div>\n          <div class='col-md-3 col-sm-3 col-xs-12'>\n            <div class='border-top-ddd border-left-ddd border-right-ddd'>\n              <div class=\"padding-5 bg-f7f7f7\">Rows\n                <div class=\"pull-right cursor-pointer mouse-over-000\" title='Move Down'>\n                  <i class='fa fa-arrow-down text-999 mouse-over-000' (click)='rowMoveDown()'></i>\n                </div>\n                <div class=\"pull-right cursor-pointer right-buffer-10 mouse-over-000\" title='Move Up'>\n                  <i class='fa fa-arrow-up text-999 mouse-over-000' (click)='rowMoveUp()'></i>\n                </div>\n              </div>\n            </div>\n            <div class=\"mdg-options-stack-container overflow-y border-ddd\" dnd-droppable (onDropSuccess)=\"onRowDropped($event)\">\n              <div class=\"border-bottom-ddd padding-5\" [class.mdg-selected]='col.selected' dnd-draggable [dragData]=\"col\" *ngFor=\"let col of selectedRows\"\n                (click)='selectRowItem(col)' title=\"{{col.displayName}}\">\n                <i class='fa fa-reorder cursor-move font-10'></i> {{col.displayName}}\n                <!-- <div class=\"pull-right\">{{col.colOrder}}</div> -->\n              </div>\n            </div>\n          </div>\n          <div class='col-md-3 col-sm-3 col-xs-12'>\n            <div class='border-top-ddd border-left-ddd border-right-ddd'>\n              <div class=\"padding-5 bg-f7f7f7\">Values\n                <div class=\"pull-right cursor-pointer mouse-over-000\" title='Move Down'>\n                  <i class='fa fa-arrow-down text-999 mouse-over-000' (click)='valMoveDown()'></i>\n                </div>\n                <div class=\"pull-right cursor-pointer right-buffer-10 mouse-over-000\" title='Move Up'>\n                  <i class='fa fa-arrow-up text-999 mouse-over-000' (click)='valMoveUp()'></i>\n                </div>\n              </div>\n            </div>\n            <div class=\"mdg-options-stack-container overflow-y border-ddd\" dnd-droppable (onDropSuccess)=\"onValDropped($event)\">\n              <div class=\"border-bottom-ddd padding-5 formulae\" [class.mdg-selected]='col.column.selected' dnd-draggable [dragData]=\"col\"\n                *ngFor=\"let col of selectedValues\" title=\"{{col.column.valueField ? col.column.displayName : col.mathFn.Name + ' of ' + col.column.displayName}}\">\n                <div class='fcontent' (click)='selectValItem(col)'>{{col.column.valueField ? col.column.displayName : col.mathFn.Name + \" of \" + col.column.displayName}}</div>\n                <!-- <div class=\"pull-right\">{{col.colOrder}}</div> -->\n                <div *ngIf=\"!col.column.valueField\" class=\"option\" (click)='showFormula(col)'>\n                  <span>fx</span>\n                  <i class='fa fa-angle-down cursor-pointer'></i>\n                  <!-- <div class=\"dropdown-content\">\n                    <a *ngFor=\"let item of col.mathFns\" (click)='selectFn(col,item,$event)'>{{item.Name}}</a>\n                  </div> -->\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"col-md-12 col-sm-12 col-xs-12 col-lg-12\">\n        <hr class=\"buffer-5-0\">\n        <div class='row'>\n          <div class=\"col-md-6 col-sm-6 hidden-xs col-lg-6\">\n          </div>\n          <div class=\"col-md-6 col-sm-6 col-xs-12 col-lg-6 text-lg-right text-md-right text-sm-right\">\n            <button class='btn btn-sm btn-success right-buffer-10' (click)='AddFField()'>Add Formula Field</button>\n            <button class='btn btn-sm btn-primary right-buffer-10' (click)='ApplyChanges()'>Apply</button>\n            <button class='btn btn-sm btn-default' (click)='cancelOptions()'>Cancel</button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<div *ngIf=\"showFilter\" class='mdg-options-container'>\n  <div class=\"mdg-options-popup-container filter\">\n    <div class='row'>\n      <div class=\"col-md-12 col-sm-12 col-xs-12 col-lg-12\">\n        <div class='row'>\n          <div class=\"col-md-6 col-sm-6 col-xs-12 col-lg-6\">\n            <h3>\n              <i class=\"fa fa-fw fa-filter\"></i> Configure Pivot Extra Filters</h3>\n          </div>\n          <div class=\"col-md-6 col-sm-6 col-xs-12 col-lg-6 text-lg-right text-md-right text-sm-right\">\n            <small>Drag & Drop fields to add filters to your pivot report.</small>\n          </div>\n        </div>\n        <hr class=\"buffer-5-0\">\n      </div>\n      <div class=\"col-md-12 col-sm-12 col-xs-12 col-lg-12 content\">\n        <div class='row'>\n          <div class='col-md-6 col-sm-6 col-xs-12'>\n            <div class='border-top-ddd border-left-ddd border-right-ddd'>\n              <div class=\"padding-5 bg-f7f7f7\" *ngIf=\"showCFilterSearch\">\n                <input class=\"mdg-toolbar-search-input\" [(ngModel)]='searchCFilterText' (keyup)='onCFilterSearch()' (keydown)='onCFilterSearch()' placeholder=\"Search Fields...\">\n                <div class=\"pull-right right-buffer-5\">\n                  <i class='fa fa-times cursor-pointer' (click)='showCFilterSearch = !showCFilterSearch; searchCFilterText = \"\"; onCFilterSearch()'></i>\n                </div>\n              </div>\n              <div *ngIf=\"!showCFilterSearch\" class=\"padding-5 bg-f7f7f7\">List of Fields\n                <div class=\"pull-right right-buffer-5\">\n                  <i class='fa fa-search cursor-pointer padding-right-5' (click)='showCFilterSearch = !showCFilterSearch'></i>\n                  <i class='fa cursor-pointer' (click)='checkFSelection()' [class.fa-check-square-o]='selectFAll' [class.padding-right-2]='!selectFAll'\n                    [class.fa-square-o]='!selectFAll'></i>\n                </div>\n              </div>\n            </div>\n            <div class=\"mdg-options-stack-container overflow-y border-ddd\" dnd-droppable (onDropSuccess)=\"onFDropped($event)\">\n              <div class=\"border-bottom-ddd padding-5\" dnd-draggable *ngFor=\"let col of fcolumns\" [dragData]=\"col\" [class.text-bold]='col.checked' title=\"{{col.displayName}}\">\n                <i class='fa fa-reorder cursor-move font-10'></i> {{col.displayName}}\n                <div class=\"pull-right\">\n                  <i class='fa cursor-pointer' (click)='selectFCheck(col)' [class.fa-check-square-o]='col.checked' [class.padding-right-2]='!col.checked'\n                    [class.fa-square-o]='!col.checked'></i>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div class='col-md-6 col-sm-6 col-xs-12'>\n            <div class='border-top-ddd border-left-ddd border-right-ddd'>\n              <div class=\"padding-5 bg-f7f7f7\">Filters\n              </div>\n            </div>\n            <div class=\"mdg-options-stack-container overflow-y border-ddd\" dnd-droppable (onDropSuccess)=\"onFColDropped($event)\">\n              <div class=\"border-bottom-ddd padding-5\" [class.mdg-selected]='col.selected' dnd-draggable [dragData]=\"col\" *ngFor=\"let col of selectedFColumns\"\n                (click)='selectColItem(col)'>\n                <i class='fa fa-reorder cursor-move font-10'></i> {{col.displayName}}\n                <!-- <div class=\"pull-right\">{{col.colOrder}}</div> -->\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"col-md-12 col-sm-12 col-xs-12 col-lg-12\">\n        <hr class=\"buffer-5-0\">\n        <div class='row'>\n          <div class=\"col-md-6 col-sm-6 hidden-xs col-lg-6\">\n          </div>\n          <div class=\"col-md-6 col-sm-6 col-xs-12 col-lg-6 text-lg-right text-md-right text-sm-right\">\n            <button class='btn btn-sm btn-primary right-buffer-10' (click)='ApplyFilter()'>Apply</button>\n            <button class='btn btn-sm btn-default' (click)='cancelFilter();'>Cancel</button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<mdg-formulaselector #formulaselector (updateFormula)='onFSUpdateFormula($event)'></mdg-formulaselector>\n<mdg-formula #formula [columns]='columns' [formulas]='formulas' (updateFormula)='onUpdateFormula($event)' (errorFormula)='onErrorFormula($event)'></mdg-formula>\n<mdg-format #format (updateFormat)='onUpdateFormat($event)' (error)='onSaveError($event)'></mdg-format>\n<mdg-save #save (saveReport)='onSaveReport($event)' (saveError)='onSaveError($event)'></mdg-save>\n"}]}],"members":{"fcolumns":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":309,"character":3}}]}],"formulas":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":310,"character":3}}]}],"dataLoading":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":311,"character":3}}]}],"isFullScreen":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":312,"character":3}}]}],"isCustomSave":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":313,"character":3}}]}],"isSaveSubscribed":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":314,"character":3}}]}],"pivotConfig":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":315,"character":3}}]}],"toolbarConfig":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":316,"character":3}}]}],"applyChanges":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":318,"character":3}}]}],"exportReport":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":319,"character":3}}]}],"showFullScreen":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":320,"character":3}}]}],"updateFormat":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":321,"character":3}}]}],"saveReport":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":322,"character":3}}]}],"error":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":323,"character":3}}]}],"changeChartType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":324,"character":3}}]}],"formulaselector":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":326,"character":3},"arguments":["formulaselector"]}]}],"formula":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":327,"character":3},"arguments":["formula"]}]}],"format":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":328,"character":3},"arguments":["format"]}]}],"save":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":329,"character":3},"arguments":["save"]}]}],"onKeydownHandler":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":371,"character":3},"arguments":["document:keydown.escape",["$event"]]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵc"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"assignChartTypes":[{"__symbolic":"method"}],"setChart":[{"__symbolic":"method"}],"selectChart":[{"__symbolic":"method"}],"assignColumnSelection":[{"__symbolic":"method"}],"selectCheck":[{"__symbolic":"method"}],"setData":[{"__symbolic":"method"}],"onColSearch":[{"__symbolic":"method"}],"onCFilterSearch":[{"__symbolic":"method"}],"checkSelection":[{"__symbolic":"method"}],"assignOrder":[{"__symbolic":"method"}],"assignValOrder":[{"__symbolic":"method"}],"onDropped":[{"__symbolic":"method"}],"checkColumnSelected":[{"__symbolic":"method"}],"onColDropped":[{"__symbolic":"method"}],"onRowDropped":[{"__symbolic":"method"}],"selectColItem":[{"__symbolic":"method"}],"colMoveUp":[{"__symbolic":"method"}],"colMoveDown":[{"__symbolic":"method"}],"selectRowItem":[{"__symbolic":"method"}],"rowMoveUp":[{"__symbolic":"method"}],"rowMoveDown":[{"__symbolic":"method"}],"onValDropped":[{"__symbolic":"method"}],"selectValItem":[{"__symbolic":"method"}],"valMoveUp":[{"__symbolic":"method"}],"valMoveDown":[{"__symbolic":"method"}],"selectFn":[{"__symbolic":"method"}],"ApplyChanges":[{"__symbolic":"method"}],"cancelOptions":[{"__symbolic":"method"}],"checkSelectedColumns":[{"__symbolic":"method"}],"exportPivot":[{"__symbolic":"method"}],"ShowFullScreen":[{"__symbolic":"method"}],"RestoreFullScreen":[{"__symbolic":"method"}],"showFormula":[{"__symbolic":"method"}],"onFSUpdateFormula":[{"__symbolic":"method"}],"onUpdateFormula":[{"__symbolic":"method"}],"onUpdateFormat":[{"__symbolic":"method"}],"ShowFilter":[{"__symbolic":"method"}],"ShowFormat":[{"__symbolic":"method"}],"checkFSelection":[{"__symbolic":"method"}],"onFDropped":[{"__symbolic":"method"}],"checkFColumnSelected":[{"__symbolic":"method"}],"onFColDropped":[{"__symbolic":"method"}],"selectFCheck":[{"__symbolic":"method"}],"cancelFilter":[{"__symbolic":"method"}],"ApplyFilter":[{"__symbolic":"method"}],"editFormula":[{"__symbolic":"method"}],"AddFField":[{"__symbolic":"method"}],"SavePivot":[{"__symbolic":"method"}],"onSaveReport":[{"__symbolic":"method"}],"onSaveError":[{"__symbolic":"method"}],"onErrorFormula":[{"__symbolic":"method"}]}},"ɵf":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"mdg-filter","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":8,"character":19},"member":"OnPush"},"template":"<div *ngIf=\"showFilter\" class='mdg-filter-container'>\n  <div class=\"mdg-filter-popup-container\">\n    <div class='row'>\n      <div class=\"col-md-12 col-sm-12 col-xs-12 col-lg-12\">\n        <div class='row'>\n          <div class=\"col-md-6 col-sm-6 col-xs-12 col-lg-6\" title=\"{{column.displayName}}\">\n            <h3>{{column.displayName}}</h3>\n          </div>\n          <div class=\"col-md-6 col-sm-6 col-xs-12 col-lg-6\">\n            <div class=\"mdg-filter-sort\">\n              <div>\n                <h3>Sort : </h3>\n              </div>\n              <div class=\"sortby\" [class.bg-f7f7f7]='distValue.sort === \"asc\"' (click)='selectSort(\"asc\")'>A-Z</div>\n              <div class=\"sortby\" [class.bg-f7f7f7]='distValue.sort === \"desc\"' (click)='selectSort(\"desc\")'>Z-A</div>\n            </div>\n          </div>\n        </div>\n        <hr class=\"buffer-5-0\">\n      </div>\n      <div class=\"col-md-12 col-sm-12 col-xs-12 col-lg-12 content\">\n        <div class='border-top-ddd border-left-ddd border-right-ddd'>\n          <div class=\"padding-5 bg-f7f7f7\" *ngIf=\"showFilterSearch\">\n            <input class=\"mdg-toolbar-search-input\" [(ngModel)]='searchFilterText' (keyup)='onFilterSearch()' (keydown)='onFilterSearch()' placeholder=\"Search Values...\">\n            <div class=\"pull-right right-buffer-5\">\n              <i class='fa fa-times cursor-pointer' (click)='showFilterSearch = !showFilterSearch; searchFilterText = \"\"; onFilterSearch()'></i>\n            </div>\n          </div>\n          <div *ngIf=\"!showFilterSearch\" class=\"padding-5 bg-f7f7f7\">List of Values\n            <div class=\"pull-right right-buffer-5\">\n              <i class='fa fa-search cursor-pointer padding-right-5' (click)='showFilterSearch = !showFilterSearch'></i>\n              <i class='fa cursor-pointer' (click)='checkSelection()' [class.fa-check-square-o]='selectAll' [class.padding-right-2]='!selectAll'\n                [class.fa-square-o]='!selectAll'></i>\n            </div>\n          </div>\n        </div>\n        <div class=\"mdg-filter-stack-container overflow-y border-ddd\">\n          <div class=\"border-bottom-ddd padding-5 mdg-filter-cell\" *ngFor=\"let col of svalues\" [class.text-bold]='col.checked' title=\"{{ col.value | format:column }}\">\n            <div>\n              <i class='fa fa-reorder cursor-move font-10'></i>\n            </div>\n            <div>{{ col.value | format:column }}</div>\n            <div>\n              <i class='fa cursor-pointer' (click)='addFilter(col)' [class.fa-check-square-o]='col.checked' [class.fa-square-o]='!col.checked'></i>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"col-md-12 col-sm-12 col-xs-12 col-lg-12\">\n        <hr class=\"buffer-5-0\">\n        <div class='row'>\n          <div class=\"col-xs-12 text-lg-right text-md-right text-sm-right\">\n            <button class='btn btn-sm btn-primary right-buffer-10' (click)='applyFilter()'>Apply</button>\n            <button class='btn btn-sm btn-default' (click)='showFilter = false'>Cancel</button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n"}]}],"members":{"updateFilters":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":76,"character":3}}]}],"onKeydownHandler":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":82,"character":3},"arguments":["document:keydown.escape",["$event"]]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":88,"character":29},{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","name":"ɵa"}]}],"ShowFilter":[{"__symbolic":"method"}],"onFilterSearch":[{"__symbolic":"method"}],"updateValue":[{"__symbolic":"method"}],"selectSort":[{"__symbolic":"method"}],"checkAllSelected":[{"__symbolic":"method"}],"addFilter":[{"__symbolic":"method"}],"checkSelection":[{"__symbolic":"method"}],"applyFilter":[{"__symbolic":"method"}],"getDisplayDate":[{"__symbolic":"method"}],"detectChanges":[{"__symbolic":"method"}]}},"ɵg":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"mdg-datefilter","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":9,"character":19},"member":"OnPush"},"template":"<div *ngIf=\"showFilter\" class='mdg-filter-container'>\n  <div class=\"mdg-datefilter-popup-container\">\n    <div class='row'>\n      <div class=\"col-md-12 col-sm-12 col-xs-12 col-lg-12\">\n        <div class='row'>\n          <div class=\"col-md-12 col-sm-12 col-xs-12 col-lg-12\" [title]=\"column.displayName\">\n            <h3 class=\"no-margin\">{{column.displayName}}</h3>\n          </div>\n        </div>\n        <hr class=\"buffer-5-0\">\n        <div class='row'>\n          <div class=\"col-md-4 col-sm-4 col-xs-6 col-lg-3\">\n            <h4 class=\"no-margin top-buffer-5\">Filter By : </h4>\n          </div>\n          <div class=\"col-md-4 col-sm-4 col-xs-6 col-lg-4\">\n            <select class=\"form-control no-radius input-sm\" [(ngModel)]='filterBy'>\n              <option value=\"list\">List</option>\n              <option value=\"range\">Range</option>\n              <option value=\"quarter\">Quarter</option>\n              <option value=\"month\">Month</option>\n              <option value=\"week\">Week</option>\n            </select>\n          </div>\n          <div class=\"col-md-4 col-sm-4 col-xs-12 col-lg-5\">\n            <div class=\"mdg-filter-sort\">\n              <div>\n                <h3 class=\"no-margin top-buffer-5\">Sort : </h3>\n              </div>\n              <div class=\"sortby\" [class.bg-f7f7f7]='distValue.sort === \"asc\"' (click)='selectSort(\"asc\")'>A-Z</div>\n              <div class=\"sortby\" [class.bg-f7f7f7]='distValue.sort === \"desc\"' (click)='selectSort(\"desc\")'>Z-A</div>\n            </div>\n          </div>\n        </div>\n        <hr class=\"buffer-5-0\">\n      </div>\n      <div class=\"col-md-12 col-sm-12 col-xs-12 col-lg-12 content\" *ngIf=\"filterBy === 'range'\">\n        <div class=\"row\">\n          <div class=\"col-md-2 col-sm-2 col-xs-4\">\n            <h4 class=\"no-margin top-buffer-5\">From</h4>\n          </div>\n          <div class=\"col-md-4 col-sm-4 col-xs-8\">\n            <p-calendar [(ngModel)]=\"fromDate\" inputStyleClass='form-control no-radius input-sm'></p-calendar>\n          </div>\n          <div class=\"col-md-2 col-sm-2 col-xs-4\">\n            <h4 class=\"no-margin top-buffer-5\">To</h4>\n          </div>\n          <div class=\"col-md-4 col-sm-4 col-xs-8\">\n            <p-calendar [(ngModel)]=\"toDate\" inputStyleClass='form-control no-radius input-sm'></p-calendar>\n          </div>\n        </div>\n      </div>\n      <div class=\"col-md-12 col-sm-12 col-xs-12 col-lg-12 content\" *ngIf=\"filterBy === 'quarter'\">\n        <div class=\"row\">\n          <div class=\"col-md-4 col-sm-6 col-xs-6\">\n            <h4 class=\"no-margin top-buffer-5\">Select Quarter : </h4>\n          </div>\n          <div class=\"col-md-8 col-sm-6 col-xs-6\">\n            <select class=\"form-control no-radius input-sm\" [(ngModel)]='selectedQuarter'>\n              <option *ngFor='let item of quartersArr' [ngValue]=\"item\">{{item.text}}</option>\n            </select>\n          </div>\n          <div class=\"col-xs-12 text-center\">\n            <small>\n              <b>Q1</b> - Jan, Feb, Mar,\n              <b>Q2</b> - Apr, May, Jun,\n              <b>Q3</b> - Jul, Aug, Sep,\n              <b>Q4</b> - Oct, Nov, Dec</small>\n          </div>\n        </div>\n      </div>\n      <div class=\"col-md-12 col-sm-12 col-xs-12 col-lg-12 content\" *ngIf=\"filterBy === 'month'\">\n        <div class=\"row\">\n          <div class=\"col-md-4 col-sm-6 col-xs-6\">\n            <h4 class=\"no-margin top-buffer-5\">Select Month : </h4>\n          </div>\n          <div class=\"col-md-8 col-sm-6 col-xs-6\">\n            <select class=\"form-control no-radius input-sm\" [(ngModel)]='selectedMonth'>\n              <option *ngFor='let item of monthsArr' [ngValue]=\"item\">{{item.text}}</option>\n            </select>\n          </div>\n        </div>\n      </div>\n      <div class=\"col-md-12 col-sm-12 col-xs-12 col-lg-12 content\" *ngIf=\"filterBy === 'week'\">\n        <div class=\"row\">\n          <div class=\"col-md-4 col-sm-6 col-xs-6\">\n            <h4 class=\"no-margin top-buffer-5\">Select Week : </h4>\n          </div>\n          <div class=\"col-md-8 col-sm-6 col-xs-6\">\n            <select class=\"form-control no-radius input-sm\" [(ngModel)]='selectedWeek'>\n              <option *ngFor='let item of weeksArr' [ngValue]=\"item\">{{item.text}}</option>\n            </select>\n          </div>\n        </div>\n      </div>\n      <div class=\"col-md-12 col-sm-12 col-xs-12 col-lg-12 content\" *ngIf=\"filterBy === 'list'\">\n        <div class='border-top-ddd border-left-ddd border-right-ddd'>\n          <div class=\"padding-5 bg-f7f7f7\">List of Values\n            <div class=\"pull-right right-buffer-10\">\n              <i class='fa cursor-pointer' (click)='checkSelection()' [class.fa-check-square-o]='selectAll' [class.padding-right-2]='!selectAll'\n                [class.fa-square-o]='!selectAll'></i>\n            </div>\n          </div>\n        </div>\n        <div class=\"mdg-filter-stack-container overflow-y border-ddd\">\n          <div class=\"border-bottom-ddd padding-5 mdg-filter-cell\" *ngFor=\"let col of values\" [class.text-bold]='col.checked' title=\"{{ col.value | format:column }}\">\n            <div>\n              <i class='fa fa-reorder cursor-move font-10'></i>\n            </div>\n            <div class=\"mdg-filter-cell-value\">{{ col.value | format:column }}</div>\n            <div>\n              <i class='fa cursor-pointer' (click)='addFilter(col)' [class.fa-check-square-o]='col.checked' [class.fa-square-o]='!col.checked'></i>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"col-md-12 col-sm-12 col-xs-12 col-lg-12\">\n        <hr class=\"buffer-5-0\">\n        <div class='row'>\n          <div class=\"col-xs-12 text-lg-right text-md-right text-sm-right\">\n            <button class='btn btn-sm btn-primary right-buffer-10' (click)='applyFilter()'>Apply</button>\n            <button class='btn btn-sm btn-default' (click)='showFilter = false'>Cancel</button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n"}]}],"members":{"updateFilters":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":143,"character":3}}]}],"onKeydownHandler":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":156,"character":3},"arguments":["document:keydown.escape",["$event"]]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":162,"character":29},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵc"}]}],"copyObject":[{"__symbolic":"method"}],"copyColumn":[{"__symbolic":"method"}],"ShowFilter":[{"__symbolic":"method"}],"getWeeks":[{"__symbolic":"method"}],"getMonths":[{"__symbolic":"method"}],"getQuarters":[{"__symbolic":"method"}],"getQuarter":[{"__symbolic":"method"}],"getQuarterDates":[{"__symbolic":"method"}],"updateValue":[{"__symbolic":"method"}],"selectSort":[{"__symbolic":"method"}],"checkAllSelected":[{"__symbolic":"method"}],"addFilter":[{"__symbolic":"method"}],"checkSelection":[{"__symbolic":"method"}],"applyFilter":[{"__symbolic":"method"}],"getDisplayDate":[{"__symbolic":"method"}],"detectChanges":[{"__symbolic":"method"}]}},"ɵh":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":20,"character":1},"arguments":[{"selector":"mdg-pivotdrawer","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":22,"character":19},"member":"OnPush"},"template":"<mdg-filter #filter (updateFilters)='onUpdateFilters($event)'></mdg-filter>\n  <mdg-formatter #formatter [formattedFields]='formattedFields' (updateFormat)='onUpdateFormatter($event)'>\n  </mdg-formatter>\n  <mdg-datefilter #datefilter (updateFilters)='onUpdateFilters($event)'></mdg-datefilter>\n  <mdg-detail #detail [columns]='columns' [selectedColumns]='selectedColumns' [selectedRows]='selectedRows' [selectedValues]='selectedValues'></mdg-detail>\n  <div class=\"mdg-filter-items-container\" *ngIf=\"selectedFColumns.length > 0 && !processingData && chartType === 'grid' && pivotConfig.showAdditionalFilter\">\n      <div class='mdg-filter-title'>\n          <h3>Filters : </h3>\n      </div>\n      <div *ngFor=\"let col of selectedFColumns\" class='btn btn-sm bn-default mdg-filter-item' (click)='showAddFilter(col)'>\n          <span class=\"mdg-filter pull-left\" [style.font-size]='col.header.fontSize + \"px\"' [style.font-style]='col.header.fontStyle' [style.font-weight]='col.header.fontWeight' [class.text-right]='col.header.textAlign === \"right\"' [class.text-center]='col.header.textAlign === \"center\"'>{{col.displayName}}</span>\n          <i class=\"mdg-filter fa fa-filter\"></i>\n      </div>\n  </div>\n  <div class='mdg-pivot-container-div data-loader-wrap' [class.mdg-filter-visible]='selectedFColumns.length > 0'>\n      <div *ngIf=\"processingData && chartType === 'grid'\" [style.height]='tableHeight'>\n          <div *ngIf=\"processingData\" class=\"data-loader\">\n              <div class=\"lds-css\">\n                  <div class=\"lds-double-ring\">\n                      <div></div>\n                      <div></div>\n                  </div>\n                  <div class=\"clearfix\"></div>\n              </div>\n          </div>\n      </div>\n      <table [class.hidden]=\"data.length <= 0 || processingData || chartType !== 'grid' || (rowKeys.length <= 0 && colKeys.length <= 0)\">\n          <tr>\n              <td>\n                  <table>\n                      <tr>\n                          <td>\n                              <table class=\"mdg-pivot\">\n                                  <thead>\n                                      <tr>\n                                          <th class=\"mdg-sr-cell\"></th>\n                                          <ng-container *ngIf=\"selectedRows.length < 6\">\n                                              <th class=\"text-center\" *ngFor=\"let col of selectedRows; let i = index\">{{i + 1}}</th>\n                                              <th class=\"text-center\" *ngIf=\"selectedColumns.length > 0\">\n                                                  {{selectedRows.length + 1}}</th>\n                                          </ng-container>\n                                      </tr>\n                                      <tr *ngFor=\"let col of selectedColumns; let j = index\">\n                                          <th class=\"mdg-sr-cell\">{{j + 1}}</th>\n                                          <ng-container *ngIf=\"selectedRows.length < 6\">\n                                              <th class=\"title-cell\" *ngIf=\"j === 0 && selectedRows.length !== 0\" colSpan=\"{{selectedRows.length}}\" rowSpan=\"{{selectedColumns.length}}\">\n                                              </th>\n                                              <th class=\"title-cell\" [style.font-size]='col.header.fontSize + \"px\"' [style.font-style]='col.header.fontStyle' [style.font-weight]='col.header.fontWeight' [title]=\"col.displayName\">\n                                                  <span class=\"mdg-filter\" [class.text-right]='col.header.textAlign === \"right\"' [class.text-center]='col.header.textAlign === \"center\"'>{{col.displayName}}</span>\n                                                  <i *ngIf=\"pivotConfig.showColumnFilter\" class=\"mdg-filter fa fa-filter\" (click)='showFilter(col)'></i>\n                                              </th>\n                                          </ng-container>\n                                      </tr>\n                                      <tr *ngIf=\"selectedRows.length !== 0\">\n                                          <th class=\"mdg-sr-cell\">{{selectedColumns.length + 1}}</th>\n                                          <ng-container *ngIf=\"selectedRows.length < 6\">\n                                              <th class=\"title-cell\" [style.font-size]='col.header.fontSize + \"px\"' [style.font-style]='col.header.fontStyle' [style.font-weight]='col.header.fontWeight' *ngFor=\"let col of selectedRows; let j = index\" [title]=\"col.displayName\">\n                                                  <span class=\"mdg-filter\" [class.text-right]='col.header.textAlign === \"right\"' [class.text-center]='col.header.textAlign === \"center\"'>{{col.displayName}}</span>\n                                                  <i *ngIf=\"pivotConfig.showColumnFilter\" class=\"mdg-filter fa fa-filter\" (click)='showFilter(col)'></i>\n                                              </th>\n                                              <ng-container *ngIf=\"selectedColumns.length > 0\">\n                                                  <th class=\"title-cell\"></th>\n                                              </ng-container>\n                                          </ng-container>\n                                      </tr>\n                                      <tr *ngIf=\"selectedRows.length === 0 && valLength > 1\">\n                                          <th class=\"mdg-sr-cell\">{{selectedColumns.length + 1}}</th>\n                                          <ng-container *ngIf=\"selectedColumns.length > 0 && selectedRows.length < 6\">\n                                              <th class=\"title-cell\"></th>\n                                          </ng-container>\n                                      </tr>\n                                  </thead>\n                              </table>\n                          </td>\n                          <td>\n                              <div #hScroll class=\"pivot-values right-10 border-right-d9d9d9\" [style.left]='getLeft()'>\n                                  <table class=\"mdg-pivot right-buffer-10\">\n                                      <thead>\n                                          <tr>\n                                              <ng-container *ngIf=\"selectedRows.length > 5\">\n                                                  <th class=\"text-center\" *ngFor=\"let col of selectedRows; let i = index\">\n                                                      {{i + 1}}</th>\n                                                  <th class=\"text-center\" *ngIf=\"selectedColumns.length > 0\">\n                                                      {{selectedRows.length + 1}}</th>\n                                              </ng-container>\n                                              <ng-container *ngIf=\"selectedRows.length < 6\">\n                                                  <th class=\"width-0 no-padding no-border\"></th>\n                                              </ng-container>\n                                              <ng-container *ngFor=\"let colKey of colKeys; let i = index\">\n                                                  <th class=\"text-center\" *ngFor=\"let col of selectedValues; let j = index;\">\n                                                      {{selectedRows.length + 2 + (selectedValues.length * i) + j}}</th>\n                                              </ng-container>\n                                              <th class=\"text-center\" *ngFor=\"let col of selectedValues; let j = index;\">\n                                                  {{selectedRows.length + 2 + (colKeys.length * selectedValues.length) + j}}\n                                              </th>\n                                          </tr>\n                                          <tr *ngFor=\"let col of selectedColumns; let j = index\">\n                                              <ng-container *ngIf=\"selectedRows.length > 5\">\n                                                  <th class=\"title-cell\" *ngIf=\"j === 0 && selectedRows.length !== 0\" colSpan=\"{{selectedRows.length}}\" rowSpan=\"{{selectedColumns.length}}\"></th>\n                                                  <th class=\"title-cell\" [title]=\"col.displayName\">\n                                                      <span class=\"mdg-filter\" [style.font-size]='col.header.fontSize + \"px\"' [style.font-style]='col.header.fontStyle' [style.font-weight]='col.header.fontWeight' [class.text-right]='col.header.textAlign === \"right\"' [class.text-center]='col.header.textAlign === \"center\"'>{{col.displayName}}</span>\n                                                      <i *ngIf=\"pivotConfig.showColumnFilter\" class=\"mdg-filter fa fa-filter\" (click)='showFilter(col)'></i>\n                                                  </th>\n                                              </ng-container>\n                                              <ng-container *ngIf=\"selectedRows.length < 6\">\n                                                  <th class=\"width-0 no-padding no-border\"></th>\n                                              </ng-container>\n                                              <ng-container *ngFor=\"let colKey of colKeys; let i = index\">\n                                                  <th class=\"title-value title-format\" [ngStyle]='getColHeaderStyle(colKey, j)' *ngIf=\"getSpanSize(colKeys, i, j) !== -1\" [colSpan]='getSpanSize(colKeys, i, j) * valLength' title=\"{{getHeaderText(colKey[j]) | format:col}}\" (click)='showColFormatter(col, colKey, j)'\n                                                      [rowSpan]='(j === (selectedColumns.length - 1) && selectedRows.length !== 0 && valLength === 1) ? 2 : 1 '>{{getHeaderText(colKey[j]) | format:col}}\n                                                  </th>\n                                              </ng-container>\n                                              <ng-container *ngIf=\"j === 0\">\n                                                  <th class=\"title-value title-format\" *ngFor=\"let sVal of selectedValues\" title='{{getHeaderText(sVal.column.valueField ? sVal.column.displayName : \"Total \" + sVal.mathFn.Name + \" of \" + sVal.column.displayName)}}'\n                                                      [rowSpan]=\"selectedColumns.length + (selectedRows.length === 0 && valLength <= 1 ? 0 : 1)\" (click)='showFormatter(sVal.column, sVal.column.valueField ? sVal.column.displayName : \"Total \" + sVal.mathFn.Name + \" of \" + sVal.column.displayName)'\n                                                      [ngStyle]='getHeaderStyle(sVal.column.valueField ? sVal.column.displayName : \"Total \" + sVal.mathFn.Name + \" of \" + sVal.column.displayName)'>\n                                                      {{getHeaderText(sVal.column.valueField ? sVal.column.displayName : \"Total \" + sVal.mathFn.Name + \" of \" + sVal.column.displayName)}}\n                                                  </th>\n                                              </ng-container>\n                                          </tr>\n                                          <tr *ngIf=\"selectedRows.length !== 0\">\n                                              <ng-container *ngIf=\"selectedRows.length > 5\">\n                                                  <th class=\"title-cell\" *ngFor=\"let col of selectedRows; let j = index\" [title]=\"col.displayName\">\n                                                      <span class=\"mdg-filter\" [style.font-size]='col.header.fontSize + \"px\"' [style.font-style]='col.header.fontStyle' [style.font-weight]='col.header.fontWeight' [class.text-right]='col.header.textAlign === \"right\"' [class.text-center]='col.header.textAlign === \"center\"'>{{col.displayName}}</span>\n                                                      <i *ngIf=\"pivotConfig.showColumnFilter\" class=\"mdg-filter fa fa-filter\" (click)='showFilter(col)'></i>\n                                                  </th>\n                                                  <ng-container *ngIf=\"selectedColumns.length > 0\">\n                                                      <th class=\"title-cell\"></th>\n                                                  </ng-container>\n                                              </ng-container>\n                                              <ng-container *ngIf=\"selectedRows.length < 6\">\n                                                  <th class=\"width-0 no-padding no-border\"></th>\n                                              </ng-container>\n                                              <ng-container *ngIf=\"selectedColumns.length === 0\">\n                                                  <th class=\"title-value title-format\" title='{{getHeaderText(sVal.column.valueField ? sVal.column.displayName : sVal.mathFn.Name + \" of \" + sVal.column.displayName)}}' [ngStyle]='getHeaderStyle(sVal.column.valueField ? sVal.column.displayName : sVal.mathFn.Name + \" of \" + sVal.column.displayName)'\n                                                      *ngFor=\"let sVal of selectedValues\" (click)='showFormatter(sVal.column, sVal.column.valueField ? sVal.column.displayName : sVal.mathFn.Name + \" of \" + sVal.column.displayName)'>\n                                                      {{getHeaderText(sVal.column.valueField ? sVal.column.displayName : sVal.mathFn.Name + \" of \" + sVal.column.displayName)}}\n                                                  </th>\n                                              </ng-container>\n                                              <ng-container *ngIf=\"valLength > 1\">\n                                                  <ng-container *ngFor=\"let colKey of colKeys\">\n                                                      <th class=\"title-value title-format\" title='{{getHeaderText(sVal.column.valueField ? sVal.column.displayName : sVal.mathFn.Name + \" of \" + sVal.column.displayName)}}' [ngStyle]='getHeaderStyle(sVal.column.valueField ? sVal.column.displayName : sVal.mathFn.Name + \" of \" + sVal.column.displayName)'\n                                                          *ngFor=\"let sVal of selectedValues\" (click)='showFormatter(sVal.column, sVal.column.valueField ? sVal.column.displayName : sVal.mathFn.Name + \" of \" + sVal.column.displayName)'>\n                                                          {{getHeaderText(sVal.column.valueField ? sVal.column.displayName : sVal.mathFn.Name + \" of \" + sVal.column.displayName)}}\n                                                      </th>\n                                                  </ng-container>\n                                              </ng-container>\n                                          </tr>\n                                          <tr *ngIf=\"selectedRows.length === 0 && valLength > 1\">\n                                              <ng-container *ngIf=\"selectedRows.length > 5\">\n                                                  <ng-container *ngIf=\"selectedColumns.length > 0\">\n                                                      <th class=\"title-cell\"></th>\n                                                  </ng-container>\n                                              </ng-container>\n                                              <ng-container *ngIf=\"selectedRows.length < 6\">\n                                                  <th class=\"width-0 no-padding no-border\"></th>\n                                              </ng-container>\n                                              <ng-container *ngIf=\"valLength > 1\">\n                                                  <ng-container *ngFor=\"let colKey of colKeys\">\n                                                      <th class=\"title-value title-format\" title='{{getHeaderText(sVal.column.valueField ? sVal.column.displayName : sVal.mathFn.Name + \" of \" + sVal.column.displayName)}}' [ngStyle]='getHeaderStyle(sVal.column.valueField ? sVal.column.displayName : sVal.mathFn.Name + \" of \" + sVal.column.displayName)'\n                                                          *ngFor=\"let sVal of selectedValues\" (click)='showFormatter(sVal.column, sVal.column.valueField ? sVal.column.displayName : sVal.mathFn.Name + \" of \" + sVal.column.displayName)'>\n                                                          {{getHeaderText(sVal.column.valueField ? sVal.column.displayName : sVal.mathFn.Name + \" of \" + sVal.column.displayName)}}\n                                                      </th>\n                                                  </ng-container>\n                                              </ng-container>\n                                          </tr>\n                                      </thead>\n                                  </table>\n                              </div>\n                          </td>\n                      </tr>\n                  </table>\n              </td>\n          </tr>\n          <tr>\n              <td>\n                  <table>\n                      <tr>\n                          <td>\n                              <div #vScrollL class=\"pivot-values\" [style.top]='getTop()'>\n                                  <table class=\"mdg-pivot bottom-buffer-10\">\n                                      <thead>\n                                          <tr>\n                                              <th class=\"mdg-sr-cell height-0 no-padding no-border\"></th>\n                                              <ng-container *ngIf=\"selectedRows.length && selectedRows.length < 6\">\n                                                  <th class=\"height-0 no-padding no-border\" *ngFor=\"let col of selectedRows; let i = index\"></th>\n                                                  <th class=\"height-0 no-padding no-border\"></th>\n                                              </ng-container>\n                                          </tr>\n                                      </thead>\n                                      <tbody>\n                                          <tr *ngFor=\"let rowKey of rowKeys; let i = index;\">\n                                              <th class=\"mdg-sr-cell\">{{selectedColumns.length + 2 + i}}</th>\n                                              <ng-container *ngIf=\"selectedRows.length && selectedRows.length < 6\">\n                                                  <ng-container *ngFor=\"let rVal of rowKey; let j = index\">\n                                                      <th class=\"title-value\" [style.font-size]='selectedRows[j].cell.fontSize + \"px\"' [style.font-style]='selectedRows[j].cell.fontStyle' [style.font-weight]='selectedRows[j].cell.fontWeight' [class.text-right]='selectedRows[j].cell.textAlign === \"right\"'\n                                                          [class.text-center]='selectedRows[j].cell.textAlign === \"center\"' *ngIf=\"getSpanSize(rowKeys, i, j) !== -1\" title='{{rowKey[j] | format:selectedRows[j]}}' [rowSpan]='getSpanSize(rowKeys, i, j)' [colSpan]='j === selectedRows.length - 1 && selectedColumns.length !== 0 ? 2 : 1'>\n                                                          {{rowKey[j] | format:selectedRows[j]}}</th>\n                                                  </ng-container>\n                                              </ng-container>\n                                          </tr>\n                                          <tr>\n                                              <th class=\"mdg-sr-cell border-bottom-d9d9d9\" *ngIf=\"selectedValues.length > 0\">{{selectedColumns.length + 2 + rowKeys.length}}\n                                              </th>\n                                              <ng-container *ngIf=\"selectedRows.length && selectedRows.length < 6\">\n                                                  <th title=\"{{getHeaderText('Grand Total')}}\" [style.font-size]='selectedRows[0].cell.fontSize + \"px\"' [style.font-style]='selectedRows[0].cell.fontStyle' [style.font-weight]='selectedRows[0].cell.fontWeight' [class.text-right]='selectedRows[0].cell.textAlign === \"right\"'\n                                                      [class.text-center]='selectedRows[0].cell.textAlign === \"center\"' class=\"title-format border-bottom-d9d9d9\" *ngIf=\"selectedValues.length > 0\" (click)=\"showGrandTotalFormatter('Grand Total')\" [colSpan]=\"selectedRows.length + (selectedColumns.length === 0 ? 0 : 1)\"\n                                                      [ngStyle]=\"getGrandTotalStyle('Grand Total')\">{{getHeaderText('Grand Total')}}\n                                                  </th>\n                                              </ng-container>\n                                              <ng-container *ngIf=\"selectedRows.length === 0 && selectedColumns.length > 0 && selectedValues.length > 0\">\n                                                  <th title=\"{{getHeaderText('Grand Total')}}\" [style.font-size]='selectedColumns[0].cell.fontSize + \"px\"' [style.font-style]='selectedColumns[0].cell.fontStyle' [style.font-weight]='selectedColumns[0].cell.fontWeight' [class.text-right]='selectedColumns[0].cell.textAlign === \"right\"'\n                                                      [class.text-center]='selectedColumns[0].cell.textAlign === \"center\"' (click)=\"showGrandTotalFormatter('Grand Total')\" class=\"title-format border-bottom-d9d9d9\" [colSpan]=\"selectedColumns.length\" [ngStyle]=\"getGrandTotalStyle('Grand Total')\">{{getHeaderText('Grand Total')}}\n                                                  </th>\n                                              </ng-container>\n                                          </tr>\n                                      </tbody>\n                                  </table>\n                              </div>\n                          </td>\n                          <td>\n                              <div #vScrollR class=\"pivot-values\" [style.top]='getTop()' [style.left]='getLeft()'>\n                                  <table class=\"mdg-pivot\">\n                                      <thead>\n                                          <tr>\n                                              <ng-container *ngIf=\"selectedRows.length > 5\">\n                                                  <th class=\"height-0 no-padding no-border\" *ngFor=\"let col of selectedRows; let i = index\"></th>\n                                                  <th class=\"height-0 no-padding no-border\" *ngIf=\"selectedColumns.length\"></th>\n                                              </ng-container>\n                                              <ng-container *ngIf=\"selectedRows.length < 6\">\n                                                  <th class=\" mdg-sr-cell height-0 width-0 no-padding no-border\"></th>\n                                              </ng-container>\n                                              <ng-container *ngFor=\"let colKey of colKeys; let i = index\">\n                                                  <th class=\"height-0 no-padding no-border\" *ngFor=\"let col of selectedValues; let j = index;\"></th>\n                                                  <th class=\"height-0 no-padding no-border\" *ngIf=\"selectedValues.length == 0\"></th>\n                                              </ng-container>\n                                              <th class=\"height-0 no-padding no-border\" *ngFor=\"let col of selectedValues; let j = index;\"></th>\n                                          </tr>\n                                      </thead>\n                                      <tbody>\n                                          <tr *ngFor=\"let rowKey of rowKeys; let i = index;\">\n                                              <ng-container *ngIf=\"selectedRows.length && selectedRows.length > 5\">\n                                                  <ng-container *ngFor=\"let rVal of rowKey; let j = index\">\n                                                      <th class=\"title-value\" [style.font-size]='selectedRows[j].fontSize + \"px\"' [style.font-style]='selectedRows[j].fontStyle' [style.font-weight]='selectedRows[j].fontWeight' [class.text-right]='selectedRows[j].textAlign === \"right\"' [class.text-center]='selectedRows[j].textAlign === \"center\"'\n                                                          *ngIf=\"getSpanSize(rowKeys, i, j) !== -1\" title='{{rowKey[j] | format:selectedRows[j]}}' [rowSpan]='getSpanSize(rowKeys, i, j)' [colSpan]='j === selectedRows.length - 1 && selectedColumns.length !== 0 ? 2 : 1'>\n                                                          {{rowKey[j] | format:selectedRows[j]}}</th>\n                                                  </ng-container>\n                                              </ng-container>\n                                              <ng-container *ngIf=\"selectedRows.length && selectedRows.length < 6\">\n                                                  <th class=\"mdg-sr-cell width-0 no-padding no-border\">&nbsp;</th>\n                                              </ng-container>\n                                              <ng-container *ngFor=\"let colKey of colKeys;let j = index\">\n                                                  <ng-container *ngFor=\"let v of selectedValues; let k = index\">\n                                                      <td [ngStyle]='getStyle(colKey)' (dblclick)='ShowDetail($event, rowKey, colKey, v, k)'>\n                                                          {{tree[getKey(rowKey)][getKey(colKey)] !== undefined && tree[getKey(rowKey)][getKey(colKey)][v.column.colName + k] !== undefined ? v.column.valueField ? getAggrFValue(tree[getKey(rowKey)][getKey(colKey)][v.column.colName + k], v.column) : getAggrValue(tree[getKey(rowKey)][getKey(colKey)][v.column.colName\n                                                          + k], v.column.colName, v.mathFn.funcName, v.column) : \"\"}}\n                                                      </td>\n                                                  </ng-container>\n                                              </ng-container>\n                                              <ng-container *ngFor=\"let v of selectedValues\">\n                                                  <td [ngStyle]='getStyle(v.column.valueField ? v.column.displayName : \"Total \" + v.mathFn.Name + \" of \" + v.column.displayName)' (dblclick)='ShowRowDetail($event, rowKey, v)'>\n                                                      {{rowTotals[getKey(rowKey)] !== undefined ? v.column.valueField ? getAggrFValue(rowTotals[getKey(rowKey)], v.column) : getAggrValue(rowTotals[getKey(rowKey)], v.column.colName, v.mathFn.funcName, v.column) : \"\"}}</td>\n                                              </ng-container>\n                                          </tr>\n                                          <tr>\n                                              <ng-container *ngIf=\"selectedRows.length > 5\">\n                                                  <th title=\"{{getHeaderText('Grand Total')}}\" [style.font-size]='selectedRows[0].cell.fontSize + \"px\"' [style.font-style]='selectedRows[0].cell.fontStyle' [style.font-weight]='selectedRows[0].cell.fontWeight' [class.text-right]='selectedRows[0].cell.textAlign === \"right\"'\n                                                      [class.text-center]='selectedRows[0].cell.textAlign === \"center\"' class=\"title-format border-bottom-d9d9d9\" *ngIf=\"selectedValues.length > 0\" (click)=\"showGrandTotalFormatter('Grand Total')\" [colSpan]=\"selectedRows.length + (selectedColumns.length === 0 ? 0 : 1)\"\n                                                      [ngStyle]=\"getHeaderStyle('Grand Total')\">{{getHeaderText('Grand Total')}}\n                                                  </th>\n                                              </ng-container>\n                                              <ng-container *ngIf=\"selectedRows.length < 6\">\n                                                  <th class=\"mdg-sr-cell width-0 no-padding no-border\">&nbsp;</th>\n                                              </ng-container>\n                                              <ng-container *ngFor=\"let colKey of colKeys; let j = index;\">\n                                                  <ng-container *ngFor=\"let v of selectedValues\">\n                                                      <td [ngStyle]=\"getStyle('Grand Total')\" (dblclick)='ShowColDetail($event, colKey, v)'>\n                                                          {{colTotals[getKey(colKey)] !== undefined ? v.column.valueField ? getAggrFValue(colTotals[getKey(colKey)], v.column) : getAggrValue(colTotals[getKey(colKey)], v.column.colName, v.mathFn.funcName, v.column) : \"\"}}</td>\n                                                  </ng-container>\n                                              </ng-container>\n                                              <ng-container *ngFor=\"let v of selectedValues;let k = index\">\n                                                  <td [ngStyle]=\"getStyle('Grand Total')\" (dblclick)='ShowDetail($event, undefined, undefined, v, k)'>\n                                                      {{v.column.valueField ? getAggrFValue(tData, v.column) : getAggrValue(tData, v.column.colName, v.mathFn.funcName, v.column)}}\n                                                  </td>\n                                              </ng-container>\n                                          </tr>\n                                      </tbody>\n                                  </table>\n                              </div>\n                          </td>\n                      </tr>\n                  </table>\n              </td>\n          </tr>\n      </table>\n      <div *ngIf=\"chartType && chartType !== 'grid'\">\n          <div class=\"chart-filter\">\n              <div *ngFor=\"let col of selectedRows\" class='btn btn-sm bn-default mdg-filter-item' (click)='showFilter(col)'>\n                  <i class=\"mdg-filter fa fa-filter\" *ngIf=\"pivotConfig.showColumnFilter\"></i>\n                  <span class=\"mdg-filter pull-left\">{{col.displayName}}</span>\n              </div>\n              <div *ngFor=\"let col of selectedColumns\" class='btn btn-sm bn-default mdg-filter-item' (click)='showFilter(col)'>\n                  <i class=\"mdg-filter fa fa-filter\" *ngIf=\"pivotConfig.showColumnFilter\"></i>\n                  <span class=\"mdg-filter pull-left\">{{col.displayName}}</span>\n              </div>\n              <div *ngFor=\"let col of selectedFColumns\" class='btn btn-sm bn-default mdg-filter-item' (click)='showFilter(col)'>\n                  <i class=\"mdg-filter fa fa-filter\" *ngIf=\"pivotConfig.showColumnFilter\"></i>\n                  <span class=\"mdg-filter pull-left\">{{col.displayName}}</span>\n              </div>\n          </div>\n          <div class='chart-container' *ngIf=\"chartData && chartData.length > 0\">\n              <canvas id=\"mdgChart\" baseChart [datasets]=\"chartData\" [labels]=\"chartLabels\" [options]=\"chartOptions\" [chartType]=\"chartType\"></canvas>\n          </div>\n      </div>\n      <div class=\"mdg-no-record\" *ngIf=\"(data.length === 0 || (rowKeys.length <= 0 && colKeys.length <= 0)) && !processingData\">\n          <h3>{{noRecordsMessage}}</h3>\n      </div>\n      <div class=\"hidden\">\n          <table class=\"mdg-pivot\" *ngIf=\"data.length > 0 && !processingData\">\n              <thead #pivotTableHeader>\n                  <tr *ngFor=\"let col of selectedColumns; let j = index\">\n                      <th class=\"title-cell\" *ngIf=\"j === 0 && selectedRows.length !== 0\" colSpan=\"{{selectedRows.length}}\" rowSpan=\"{{selectedColumns.length}}\"></th>\n                      <th class=\"title-cell\">\n                          <span class=\"mdg-filter pull-left\">{{col.displayName}}</span>\n                          <i *ngIf=\"pivotConfig.showColumnFilter\" class=\"mdg-filter fa fa-filter\" (click)='showFilter(col)'></i>\n                      </th>\n                      <ng-container *ngFor=\"let colKey of colKeys; let i = index\">\n                          <th class=\"title-value\" [class.text-right]='col.headerAlign === \"right\"' [class.text-center]='col.headerAlign === \"center\"' *ngIf=\"getSpanSize(colKeys, i, j) !== -1\" [colSpan]='getSpanSize(colKeys, i, j) * valLength' [rowSpan]='(j === (selectedColumns.length - 1) && selectedRows.length !== 0 && valLength === 1) ? 2 : 1 '>\n                              {{getHeaderText(colKey[j]) | format:col}}</th>\n                      </ng-container>\n                      <ng-container *ngIf=\"j === 0\">\n                          <th class=\"title-value\" [class.text-right]='sVal.column.headerAlign === \"right\"' [class.text-center]='sVal.column.headerAlign === \"center\"' *ngFor=\"let sVal of selectedValues\" [rowSpan]=\"selectedColumns.length + (selectedRows.length === 0 && valLength <= 1 ? 0 : 1)\">\n                              {{getHeaderText(sVal.column.valueField ? sVal.column.displayName : \"Total \" + sVal.mathFn.Name + \" of \" + sVal.column.displayName)}}</th>\n                      </ng-container>\n                  </tr>\n                  <tr *ngIf=\"selectedRows.length !== 0\">\n                      <th class=\"title-cell\" *ngFor=\"let col of selectedRows; let j = index\">\n                          <span class=\"mdg-filter pull-left\">{{col.displayName}}</span>\n                          <i *ngIf=\"pivotConfig.showColumnFilter\" class=\"mdg-filter fa fa-filter\" (click)='showFilter(col)'></i>\n                      </th>\n                      <ng-container *ngIf=\"selectedColumns.length > 0\">\n                          <th class=\"title-cell\"></th>\n                      </ng-container>\n                      <ng-container *ngIf=\"selectedColumns.length === 0\">\n                          <th class=\"title-value\" [class.text-right]='sVal.column.headerAlign === \"right\"' [class.text-center]='sVal.column.headerAlign === \"center\"' *ngFor=\"let sVal of selectedValues\">{{getHeaderText(sVal.column.valueField ? sVal.column.displayName : sVal.mathFn.Name + \" of \" + sVal.column.displayName)}}</th>\n                      </ng-container>\n                      <ng-container *ngIf=\"valLength > 1\">\n                          <ng-container *ngFor=\"let colKey of colKeys\">\n                              <th class=\"title-value\" [class.text-right]='sVal.column.headerAlign === \"right\"' [class.text-center]='sVal.column.headerAlign === \"center\"' *ngFor=\"let sVal of selectedValues\">{{getHeaderText(sVal.column.valueField ? sVal.column.displayName : sVal.mathFn.Name + \" of \" + sVal.column.displayName)}}</th>\n                          </ng-container>\n                      </ng-container>\n                  </tr>\n                  <tr *ngIf=\"selectedRows.length === 0 && valLength > 1\">\n                      <ng-container *ngIf=\"selectedColumns.length > 0\">\n                          <th class=\"title-cell\"></th>\n                      </ng-container>\n                      <ng-container *ngIf=\"valLength > 1\">\n                          <ng-container *ngFor=\"let colKey of colKeys\">\n                              <th class=\"title-value\" [class.text-right]='sVal.column.headerAlign === \"right\"' [class.text-center]='sVal.column.headerAlign === \"center\"' *ngFor=\"let sVal of selectedValues\">{{getHeaderText(sVal.column.valueField ? sVal.column.displayName : sVal.mathFn.Name + \" of \" + sVal.column.displayName)}}</th>\n                          </ng-container>\n                      </ng-container>\n                  </tr>\n              </thead>\n              <tbody #pivotTableBody>\n                  <tr *ngFor=\"let rowKey of rowKeys; let i = index;\">\n                      <ng-container *ngFor=\"let rVal of rowKey; let j = index\">\n                          <th class=\"title-value\" [class.text-right]='selectedRows[j].textAlign === \"right\"' [class.text-center]='selectedRows[j].textAlign === \"center\"' *ngIf=\"getSpanSize(rowKeys, i, j) !== -1\" [rowSpan]='getSpanSize(rowKeys, i, j)' [colSpan]='j === selectedRows.length - 1 && selectedColumns.length !== 0 ? 2 : 1'>\n                              {{rowKey[j] | format:selectedRows[j]}}</th>\n                      </ng-container>\n                      <ng-container *ngFor=\"let colKey of colKeys; let j = index;\">\n                          <ng-container *ngFor=\"let v of selectedValues; let k = index\">\n                              <td [class.text-right]='v.column.textAlign === \"right\"' [class.text-center]='v.column.textAlign === \"center\"' (dblclick)='ShowDetail($event, rowKey, colKey, v, k)'>\n                                  {{tree[getKey(rowKey)][getKey(colKey)] !== undefined && tree[getKey(rowKey)][getKey(colKey)][v.column.colName + k] !== undefined ? v.column.valueField ? getAggrFValue(tree[getKey(rowKey)][getKey(colKey)][v.column.colName + k], v.column) : getAggrValue(tree[getKey(rowKey)][getKey(colKey)][v.column.colName\n                                  + k], v.column.colName, v.mathFn.funcName, v.column) : \"\"}}\n                              </td>\n                          </ng-container>\n                      </ng-container>\n                      <ng-container *ngFor=\"let v of selectedValues\">\n                          <td [class.text-right]='v.column.textAlign === \"right\"' [class.text-center]='v.column.textAlign === \"center\"' (dblclick)='ShowRowDetail($event, rowKey, v)'>\n                              {{rowTotals[getKey(rowKey)] !== undefined ? v.column.valueField ? getAggrFValue(rowTotals[getKey(rowKey)], v.column) : getAggrValue(rowTotals[getKey(rowKey)], v.column.colName, v.mathFn.funcName, v.column) : \"\"}}</td>\n                      </ng-container>\n                  </tr>\n                  <tr>\n                      <th *ngIf=\"selectedValues.length > 0\" [colSpan]=\"selectedRows.length + (selectedColumns.length === 0 ? 0 : 1)\">\n                          <span class=\"mdg-value-filter pull-left\" [ngStyle]=\"getGrandTotalStyle('Grand Total')\">{{getHeaderText('Grand Total')}}</span>\n                      </th>\n                      <ng-container *ngFor=\"let colKey of colKeys;\">\n                          <ng-container *ngFor=\"let v of selectedValues\">\n                              <td [class.text-right]='v.column.textAlign === \"right\"' [class.text-center]='v.column.textAlign === \"center\"' (dblclick)='ShowColDetail($event, colKey, v)'>\n                                  {{colTotals[getKey(colKey)] !== undefined ? v.column.valueField ? getAggrFValue(colTotals[getKey(colKey)], v.column) : getAggrValue(colTotals[getKey(colKey)], v.column.colName, v.mathFn.funcName, v.column) : \"\"}}\n                              </td>\n                          </ng-container>\n                      </ng-container>\n                      <ng-container *ngFor=\"let v of selectedValues;let k = index\">\n                          <td [class.text-right]='v.column.textAlign === \"right\"' [class.text-center]='v.column.textAlign === \"center\"' (dblclick)='ShowDetail($event, undefined, undefined, v, k)'>\n                              {{v.column.valueField ? getAggrFValue(tData, v.column) : getAggrValue(tData, v.column.colName, v.mathFn.funcName, v.column)}}</td>\n                      </ng-container>\n                  </tr>\n              </tbody>\n          </table>\n      </div>\n  </div>"}]}],"members":{"title":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":427,"character":3}}]}],"columns":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":428,"character":3}}]}],"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":429,"character":3}}]}],"distValues":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":430,"character":3}}]}],"formulas":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":431,"character":3}}]}],"selectedColumns":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":432,"character":3}}]}],"selectedRows":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":433,"character":3}}]}],"selectedValues":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":434,"character":3}}]}],"selectedFColumns":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":435,"character":3}}]}],"formattedFields":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":436,"character":3}}]}],"formulaFields":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":437,"character":3}}]}],"filters":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":438,"character":3}}]}],"chartType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":439,"character":3}}]}],"noRecordsMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":440,"character":3}}]}],"pivotConfig":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":441,"character":3}}]}],"loading":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":443,"character":3}}]}],"error":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":444,"character":3}}]}],"filter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":446,"character":3},"arguments":["filter"]}]}],"formatter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":447,"character":3},"arguments":["formatter"]}]}],"datefilter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":448,"character":3},"arguments":["datefilter"]}]}],"detail":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":449,"character":3},"arguments":["detail"]}]}],"pivotTableHeader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":450,"character":3},"arguments":["pivotTableHeader"]}]}],"pivotTableBody":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":451,"character":3},"arguments":["pivotTableBody"]}]}],"hScroll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":452,"character":3},"arguments":["hScroll"]}]}],"vScrollL":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":453,"character":3},"arguments":["vScrollL"]}]}],"vScrollR":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":454,"character":3},"arguments":["vScrollR"]}]}],"chart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":455,"character":3},"arguments":[{"__symbolic":"reference","module":"ng2-charts","name":"BaseChartDirective","line":455,"character":13}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":488,"character":29},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","name":"ɵi"},{"__symbolic":"reference","name":"ɵd"},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":488,"character":169}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"checkInputFilter":[{"__symbolic":"method"}],"getTop":[{"__symbolic":"method"}],"getLeft":[{"__symbolic":"method"}],"isNumeric":[{"__symbolic":"method"}],"updateChartType":[{"__symbolic":"method"}],"setData":[{"__symbolic":"method"}],"updateFilters":[{"__symbolic":"method"}],"filterRecord":[{"__symbolic":"method"}],"formatData":[{"__symbolic":"method"}],"addFormulaField":[{"__symbolic":"method"}],"processRecord":[{"__symbolic":"method"}],"getSpanSize":[{"__symbolic":"method"}],"getKey":[{"__symbolic":"method"}],"getAggrChartFValue":[{"__symbolic":"method"}],"getAggrChartValue":[{"__symbolic":"method"}],"getAggrFValue":[{"__symbolic":"method"}],"getAggrValue":[{"__symbolic":"method"}],"showLoading":[{"__symbolic":"method"}],"drawPivot":[{"__symbolic":"method"}],"SetChartData":[{"__symbolic":"method"}],"getKeyValue":[{"__symbolic":"method"}],"showAddFilter":[{"__symbolic":"method"}],"showFilter":[{"__symbolic":"method"}],"onUpdateFilters":[{"__symbolic":"method"}],"sortKeys":[{"__symbolic":"method"}],"ShowDetail":[{"__symbolic":"method"}],"ShowRowDetail":[{"__symbolic":"method"}],"ShowColDetail":[{"__symbolic":"method"}],"exportReport":[{"__symbolic":"method"}],"printChartToPDF":[{"__symbolic":"method"}],"exportChartToPDF":[{"__symbolic":"method"}],"getChartExportData":[{"__symbolic":"method"}],"preparePDF":[{"__symbolic":"method"}],"onTScroll":[{"__symbolic":"method"}],"onLScroll":[{"__symbolic":"method"}],"onScroll":[{"__symbolic":"method"}],"getValue":[{"__symbolic":"method"}],"showColFormatter":[{"__symbolic":"method"}],"showFormatter":[{"__symbolic":"method"}],"showGrandTotalFormatter":[{"__symbolic":"method"}],"onUpdateFormatter":[{"__symbolic":"method"}],"getColHeaderStyle":[{"__symbolic":"method"}],"getHeaderStyle":[{"__symbolic":"method"}],"getGrandTotalStyle":[{"__symbolic":"method"}],"getHeaderText":[{"__symbolic":"method"}],"getStyle":[{"__symbolic":"method"}],"detectChanges":[{"__symbolic":"method"}]}},"ɵi":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":3,"character":1},"arguments":[{"name":"aggrBy"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵa"}]}],"transform":[{"__symbolic":"method"}],"distinctCount":[{"__symbolic":"method"}],"min":[{"__symbolic":"method"}],"max":[{"__symbolic":"method"}],"sum":[{"__symbolic":"method"}],"avg":[{"__symbolic":"method"}],"percent":[{"__symbolic":"method"}],"product":[{"__symbolic":"method"}],"range":[{"__symbolic":"method"}],"midrange":[{"__symbolic":"method"}],"median":[{"__symbolic":"method"}],"variance":[{"__symbolic":"method"}],"standardDeviation":[{"__symbolic":"method"}],"meanAbsoluteDeviation":[{"__symbolic":"method"}]}},"ɵj":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"mdg-formula","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":9,"character":19},"member":"OnPush"},"template":"<div *ngIf=\"showFormula\" class='mdg-options-container'>\n  <div class=\"mdg-options-popup-container formula-popup\">\n    <div class='row'>\n      <div class=\"col-md-12 col-sm-12 col-xs-12 col-lg-12\">\n        <div class='row'>\n          <div class=\"col-md-12 col-sm-12 col-xs-12\">\n            <h3>Configure your own Formula Field</h3>\n          </div>\n        </div>\n        <hr class=\"buffer-5-0\">\n      </div>\n      <div class=\"col-md-5 col-sm-6 col-xs-12 content\">\n        <div class='border-top-ddd border-left-ddd border-right-ddd'>\n          <div class=\"padding-5 bg-f7f7f7\">List of Field(s)\n          </div>\n        </div>\n        <div class=\"mdg-options-stack-container overflow-y border-ddd\">\n          <ng-container *ngIf=\"data.valueField\">\n            <div class=\"border-bottom-ddd padding-5 formulae\" [class.mdg-selected]='col.column.selected' dnd-draggable [dragData]=\"col\"\n              *ngFor=\"let col of formulaColumns\" title=\"{{col.mathFn.Name + ' of ' + col.column.displayName}}\">\n              <div class='fcontent'>{{col.mathFn.Name + \" of \" + col.column.displayName}}</div>\n              <!-- <div class=\"pull-right\">{{col.colOrder}}</div> -->\n              <div class=\"option\" (click)='showFormulaSelection(col)'>\n                <span>fx</span>\n                <i class='fa fa-angle-down cursor-pointer'></i>\n                <!-- <div class=\"dropdown-content\">\n                <a *ngFor=\"let item of col.mathFns\" (click)='selectFn(col,item,$event)'>{{item.Name}}</a>\n              </div> -->\n              </div>\n            </div>\n          </ng-container>\n          <ng-container *ngIf=\"!data.valueField\">\n            <div class=\"border-bottom-ddd padding-5\" dnd-draggable *ngFor=\"let col of columns\" [dragData]=\"col\" title=\"{{col.displayName}}\">\n              <i class='fa fa-reorder cursor-move font-10'></i> {{col.displayName}}\n            </div>\n          </ng-container>\n        </div>\n      </div>\n      <div class=\"col-md-7 col-sm-6 col-xs-12 content\">\n        <div class=\"row\">\n          <div class=\"col-md-4 col-sm-5 col-xs-12\">\n            <label class=\"padding-5\">Formula Name</label>\n          </div>\n          <div class=\"col-md-8 col-sm-7 col-xs-12\">\n            <input class=\"form-control no-radius\" placeholder=\"Field Name\" [(ngModel)]='data.displayName'>\n          </div>\n        </div>\n        <div class=\"row padding-top-10 padding-bottom-10\">\n          <div class=\"col-md-4 col-sm-5 col-xs-12\">\n            <label class=\"padding-5\">Value Field</label>\n          </div>\n          <div class=\"col-md-8 col-sm-7 col-xs-12\">\n            <label>\n              <input type=\"radio\" name='valueField' [value]=\"true\" [(ngModel)]='data.valueField'> Yes</label>\n            <label>\n              <input type=\"radio\" name='valueField' [value]=\"false\" [(ngModel)]='data.valueField'> No</label>\n          </div>\n          <div class=\"col-xs-12 top-buffer--10\">\n            <small class=\"padding-left-10\">This means, field can be only added as value field. It cannot be used in rows or columns.</small>\n          </div>\n        </div>\n        <div class=\"row\">\n          <div class=\"col-xs-12 padding-top-5\">\n            <button class=\"btn btn-sm btn-default no-radius\" *ngFor=\"let f of formulaArr\" (click)='onFCLick(f)'>{{f}}</button>\n          </div>\n          <div class=\"col-xs-12\">\n            <textarea #feditor dnd-droppable placeholder=\"Formula field editor\" [(ngModel)]='data.formula' (onDropSuccess)=\"onDropped($event)\"\n              class=\"form-control no-radius formula-editor\"></textarea>\n          </div>\n        </div>\n      </div>\n      <div class=\"col-md-12 col-sm-12 col-xs-12 col-lg-12\">\n        <hr class=\"buffer-5-0\">\n        <div class='row'>\n          <div class=\"col-xs-12 text-lg-right text-md-right text-sm-right\">\n            <button class='btn btn-sm btn-primary right-buffer-10' (click)='saveField()'>Save</button>\n            <button class='btn btn-sm btn-default' (click)='showFormula = false'>Cancel</button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<mdg-formulaselector #formulaselector (updateFormula)='onFSUpdateFormula($event)'></mdg-formulaselector>\n"}]}],"members":{"columns":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":99,"character":3}}]}],"formulas":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":100,"character":3}}]}],"updateFormula":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":101,"character":3}}]}],"errorFormula":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":102,"character":3}}]}],"feditor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":104,"character":3},"arguments":["feditor"]}]}],"formulaselector":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":105,"character":3},"arguments":["formulaselector"]}]}],"onKeydownHandler":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":113,"character":3},"arguments":["document:keydown.escape",["$event"]]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":119,"character":29},{"__symbolic":"reference","name":"ɵa"}]}],"updateFormulaFields":[{"__symbolic":"method"}],"showFormulaSelection":[{"__symbolic":"method"}],"onFSUpdateFormula":[{"__symbolic":"method"}],"AddFormula":[{"__symbolic":"method"}],"EditFormula":[{"__symbolic":"method"}],"onFCLick":[{"__symbolic":"method"}],"onDropped":[{"__symbolic":"method"}],"saveField":[{"__symbolic":"method"}],"findFields":[{"__symbolic":"method"}],"detectChanges":[{"__symbolic":"method"}]}},"ɵk":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"mdg-formulaselector","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":6,"character":19},"member":"OnPush"},"template":"<div *ngIf=\"showFormula\" class='mdg-filter-container'>\n  <div class=\"mdg-filter-popup-container\">\n    <div class='row'>\n      <div class=\"col-md-12 col-sm-12 col-xs-12 col-lg-12\">\n        <div class='row'>\n          <div class=\"col-md-12 col-sm-12 col-xs-12\">\n            <h3>Field : {{value.column.displayName}}</h3>\n          </div>\n          <hr class=\"buffer-5-0\">\n          <div class=\"col-md-12 col-sm-12 col-xs-12\">\n            <h3>Formula : {{value.mathFn.Name}}</h3>\n          </div>\n        </div>\n        <hr class=\"buffer-5-0\">\n      </div>\n      <div class=\"col-md-12 col-sm-12 col-xs-12 col-lg-12 content\">\n        <div class='border-top-ddd border-left-ddd border-right-ddd'>\n          <div class=\"padding-5 bg-f7f7f7\">List of Formula(s)\n          </div>\n        </div>\n        <div class=\"mdg-filter-stack-container overflow-y border-ddd\">\n          <div class=\"border-bottom-ddd padding-5 cursor-pointer\" *ngFor=\"let col of value.mathFns\" (click)='selectFormula(col)' title=\"{{col.Name}}\">\n            <i class='fa fa-reorder cursor-move font-10'></i> {{col.Name}}\n          </div>\n        </div>\n      </div>\n      <div class=\"col-md-12 col-sm-12 col-xs-12 col-lg-12\">\n        <hr class=\"buffer-5-0\">\n        <div class='row'>\n          <div class=\"col-xs-12 text-lg-right text-md-right text-sm-right\">\n            <button class='btn btn-sm btn-primary right-buffer-10' (click)='applyFilter()'>Apply</button>\n            <button class='btn btn-sm btn-default' (click)='CancelFormula()'>Cancel</button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n"}]}],"members":{"updateFormula":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":50,"character":3}}]}],"onKeydownHandler":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":53,"character":3},"arguments":["document:keydown.escape",["$event"]]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":59,"character":29}]}],"ShowFormula":[{"__symbolic":"method"}],"selectFormula":[{"__symbolic":"method"}],"applyFilter":[{"__symbolic":"method"}],"CancelFormula":[{"__symbolic":"method"}],"detectChanges":[{"__symbolic":"method"}]}},"ɵl":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":10,"character":1},"arguments":[{"selector":"mdg-detail","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":12,"character":19},"member":"OnPush"},"template":"<div [style.display]=\"showDetail ? '' : 'none'\" class='mdg-options-container'>\n  <div class=\"mdg-options-popup-container\">\n    <div class='row'>\n      <div class=\"col-md-12 col-sm-12 col-xs-12 col-lg-12\">\n        <div class='row'>\n          <div class=\"col-md-6 col-sm-6 col-xs-12 col-lg-6\">\n            <h3>\n              <i class=\"fa fa-fw fa-table\"></i> Details</h3>\n          </div>\n          <div class=\"col-md-6 col-sm-6 col-xs-12 col-lg-6 text-lg-right text-md-right text-sm-right\">\n            <h3 title=\"Close\">\n              <span class=\"cursor-pointer btn btn-default btn-sm no-radius\" (click)='PrintData()' title=\"Export to pdf\">\n                <i class=\"fa fa-fw fa-print\"></i> Print</span>\n              <span class=\"cursor-pointer btn btn-default btn-sm no-radius\" (click)='ExportToPDF()' title=\"Export to pdf\">\n                <i class=\"fa fa-fw fa-file-pdf-o\"></i> PDF</span>\n              <span class=\"cursor-pointer btn btn-default btn-sm no-radius\" (click)='ExportToExcel()' title=\"Export to excel\">\n                <i class=\"fa fa-fw fa-file-excel-o\"></i> Excel</span>\n              <span class=\"cursor-pointer btn btn-default btn-sm no-radius\" (click)='ShowColumnOption()' title=\"Select Columns\">\n                <i class=\"fa fa-fw fa-filter\"></i> Columns</span>\n              <span class=\"cursor-pointer btn btn-default btn-sm no-radius\" (click)='showDetail = false' title=\"Close\">\n                <i class=\"fa fa-fw fa-times\"></i> Close</span>\n              <!-- <span class=\"cursor-pointer\" (click)='showDetail = false'>&times;</span> -->\n            </h3>\n          </div>\n        </div>\n        <div class='row' *ngIf=\"showDetail\">\n          <div class=\"col-md-4 col-sm-4 col-xs-12 col-lg-4 buffer-5-0 font-14\" *ngIf=\"rowVal !== undefined && rowVal !== ''\">\n            <span>\n              <b>\n                <u>Row</u>\n              </b>\n            </span>\n            <div *ngFor=\"let item of iRow; let r = index\">\n              <b>{{selectedRows[r].displayName}} : </b> {{item}}\n            </div>\n          </div>\n          <div class=\"col-md-4 col-sm-4 col-xs-12 col-lg-4 buffer-5-0 font-14\" *ngIf=\"colVal !== undefined && colVal !== ''\">\n            <span>\n              <b>\n                <u>Column</u>\n              </b>\n            </span>\n            <div *ngFor=\"let item of iCol; let c = index\">\n              <b>{{selectedColumns[c].displayName}} : </b> {{item}}\n            </div>\n          </div>\n          <div class=\"col-md-4 col-sm-4 col-xs-12 col-lg-4 buffer-5-0 font-14\">\n            <span>\n              <b>\n                <u>Value</u>\n              </b>\n            </span>\n            <div>\n              <b>{{valVal.column.valueField ? valVal.column.displayName : valVal.mathFn.Name + ' of ' +\n                valVal.column.displayName}} : </b>{{value !== undefined && value !== '' ? value\n              : '[Empty]'}}\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"col-md-12 col-sm-12 col-xs-12 col-lg-12 content mdg-detail-container-div no-padding\">\n        <div #dHeader class=\"mdg-detail-header-div\">\n          <table class=\"mdg-detail\" *ngIf=\"showDetail\">\n            <thead #detailTableHeader>\n              <tr>\n                <th class=\"bg-f7f7f7 font-bold detail-cell\" *ngFor=\"let col of displayColumns\" [title]=\"col.displayName\">{{col.displayName}}</th>\n              </tr>\n            </thead>\n          </table>\n        </div>\n        <div #dBody class=\"mdg-detail-body-div\">\n          <table class=\"mdg-detail\" *ngIf=\"showDetail\">\n            <tbody #detailTableBody>\n              <tr *ngFor=\"let d of data\">\n                <td *ngFor=\"let col of displayColumns\" [title]=\"d[col.colName] | format:col\">{{d[col.colName] |\n                  format:col}}</td>\n              </tr>\n              <tr *ngIf=\"data.length === 0\">\n                <td colspan=\"displayColumns.length\">No Records Found</td>\n              </tr>\n            </tbody>\n          </table>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<mdg-columns #columns (updateColumns)='onUpdateColumns($event)'></mdg-columns>\n"}]}],"members":{"columns":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":104,"character":3}}]}],"selectedColumns":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":105,"character":3}}]}],"selectedRows":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":106,"character":3}}]}],"selectedValues":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":107,"character":3}}]}],"fcolumns":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":109,"character":3},"arguments":["columns"]}]}],"detailTableHeader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":110,"character":3},"arguments":["detailTableHeader"]}]}],"detailTableBody":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":111,"character":3},"arguments":["detailTableBody"]}]}],"dHeader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":112,"character":3},"arguments":["dHeader"]}]}],"dBody":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":113,"character":3},"arguments":["dBody"]}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"onKeydownHandler":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":136,"character":3},"arguments":["document:keydown.escape",["$event"]]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":142,"character":29},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵd"},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":142,"character":121}]}],"onScroll":[{"__symbolic":"method"}],"ShowDetail":[{"__symbolic":"method"}],"ShowColumnOption":[{"__symbolic":"method"}],"onUpdateColumns":[{"__symbolic":"method"}],"ExportToExcel":[{"__symbolic":"method"}],"ExportToPDF":[{"__symbolic":"method"}],"PrintData":[{"__symbolic":"method"}],"preparePDF":[{"__symbolic":"method"}],"detectChanges":[{"__symbolic":"method"}]}},"ɵm":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"mdg-columns","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":6,"character":19},"member":"OnPush"},"template":"<div *ngIf=\"showColumns\" class='mdg-filter-container'>\n  <div class=\"mdg-filter-popup-container\">\n    <div class='row'>\n      <div class=\"col-md-12 col-sm-12 col-xs-12 col-lg-12\">\n        <div class='row'>\n          <div class=\"col-md-6 col-sm-6 col-xs-12 col-lg-6\">\n            <h3>Fields</h3>\n          </div>\n        </div>\n        <hr class=\"buffer-5-0\">\n      </div>\n      <div class=\"col-md-12 col-sm-12 col-xs-12 col-lg-12 content\">\n        <div class='border-top-ddd border-left-ddd border-right-ddd'>\n          <div class=\"padding-5 bg-f7f7f7\">List of Columns\n            <div class=\"pull-right right-buffer-10\">\n              <i class='fa cursor-pointer' (click)='checkSelection()' [class.fa-check-square-o]='selectAll' [class.padding-right-2]='!selectAll'\n                [class.fa-square-o]='!selectAll'></i>\n            </div>\n          </div>\n        </div>\n        <div class=\"mdg-filter-stack-container overflow-y border-ddd\">\n          <div class=\"border-bottom-ddd padding-5 mdg-filter-cell\" *ngFor=\"let col of columns\" [class.text-bold]='col.checked' [title]=\"col.displayName\">\n            <div>\n              <i class='fa fa-reorder cursor-move font-10'></i>\n            </div>\n            <div>{{ col.displayName }}</div>\n            <div>\n              <i class='fa cursor-pointer' (click)='addColumn(col)' [class.fa-check-square-o]='col.checked' [class.fa-square-o]='!col.checked'></i>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"col-md-12 col-sm-12 col-xs-12 col-lg-12\">\n        <hr class=\"buffer-5-0\">\n        <div class='row'>\n          <div class=\"col-xs-12 text-lg-right text-md-right text-sm-right\">\n            <button class='btn btn-sm btn-primary right-buffer-10' (click)='applyColumns()'>Apply</button>\n            <button class='btn btn-sm btn-default' (click)='showColumns = false'>Cancel</button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n"}]}],"members":{"updateColumns":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":55,"character":3}}]}],"onKeydownHandler":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":59,"character":3},"arguments":["document:keydown.escape",["$event"]]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":65,"character":29},{"__symbolic":"reference","name":"ɵa"}]}],"ShowColumns":[{"__symbolic":"method"}],"checkSelection":[{"__symbolic":"method"}],"checkAllSelected":[{"__symbolic":"method"}],"addColumn":[{"__symbolic":"method"}],"applyColumns":[{"__symbolic":"method"}],"getDisplayDate":[{"__symbolic":"method"}],"detectChanges":[{"__symbolic":"method"}]}},"ɵn":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"mdg-format","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":9,"character":19},"member":"OnPush"},"template":"<div *ngIf=\"showFormat\" class='mdg-options-container'>\n  <div class=\"mdg-options-popup-container formula-popup\">\n    <div class='row'>\n      <div class=\"col-md-12 col-sm-12 col-xs-12 col-lg-12\">\n        <div class='row'>\n          <div class=\"col-md-12 col-sm-12 col-xs-12\">\n            <h3>Format Fields</h3>\n          </div>\n        </div>\n        <hr class=\"buffer-5-0\">\n      </div>\n      <div class=\"col-md-3 col-sm-4 col-xs-12 content\">\n        <div class='border-top-ddd border-left-ddd border-right-ddd'>\n          <div class=\"padding-5 bg-f7f7f7\">List of Field(s)\n          </div>\n        </div>\n        <div class=\"mdg-options-stack-container overflow-y border-ddd\">\n          <div class=\"border-bottom-ddd padding-5 cursor-pointer\" *ngFor=\"let col of selectedRows\" (click)='selectColumn(col)' title=\"{{col.displayName}}\">\n            <i class='fa fa-reorder cursor-move font-10'></i> {{col.displayName}}\n          </div>\n          <div class=\"border-bottom-ddd padding-5 cursor-pointer\" *ngFor=\"let col of selectedColumns\" (click)='selectColumn(col)' title=\"{{col.displayName}}\">\n            <i class='fa fa-reorder cursor-move font-10'></i> {{col.displayName}}\n          </div>\n          <div class=\"border-bottom-ddd padding-5 cursor-pointer\" *ngFor=\"let col of selectedValues\" (click)='selectColumn(col.column)' title=\"{{col.column.displayName}}\">\n            <i class='fa fa-reorder cursor-move font-10'></i> {{col.column.displayName}}\n          </div>\n        </div>\n      </div>\n      <div class=\"col-md-9 col-sm-8 col-xs-12 content\">\n        <div class='row'>\n          <div class=\"col-md-12 col-sm-12 col-xs-12\">\n            <h3>Field : {{data.displayName}}</h3>\n          </div>\n        </div>\n        <hr class=\"margin-5-0\">\n\n        <div class=\"col-md-6 col-sm-6 col-xs-12 col-lg-6\">\n          <div class='row'>\n            <div class=\"col-md-12 col-sm-12 col-xs-12 col-lg-12\">\n              <h4 class=\"no-margin\">Header Style</h4>\n            </div>\n          </div>\n          <hr class=\"buffer-5-0\">\n          <div class=\"row padding-10\">\n            <div class=\"col-md-4 col-sm-5 col-xs-12 no-padding\">\n              <label class=\"padding-5\">Text Align</label>\n            </div>\n            <div class=\"col-md-8 col-sm-7 col-xs-12 no-padding\">\n              <select class=\"form-control no-radius\" placeholder=\"Text Align\" [(ngModel)]='data.header.textAlign'>\n                <option disabled='disabled' selected> Select Align</option>\n                <option value=\"left\">Left</option>\n                <option value=\"center\">Center</option>\n                <option value=\"right\">Right</option>\n              </select>\n            </div>\n          </div>\n          <div class=\"row padding-10\">\n            <div class=\"col-md-4 col-sm-5 col-xs-12 no-padding\">\n              <label class=\"padding-5\">Font Size</label>\n            </div>\n            <div class=\"col-md-8 col-sm-7 col-xs-12 no-padding\">\n              <input class=\"form-control no-radius\" placeholder=\"Font Size\" [(ngModel)]='data.header.fontSize' type=\"number\">\n            </div>\n          </div>\n          <div class=\"row padding-10\">\n            <div class=\"col-md-4 col-sm-5 col-xs-12 no-padding\">\n              <label class=\"padding-5\">Font Weight</label>\n            </div>\n            <div class=\"col-md-8 col-sm-7 col-xs-12 no-padding\">\n              <select class=\"form-control no-radius\" placeholder=\"Font Weight\" [(ngModel)]='data.header.fontWeight'>\n                <option disabled='disabled' selected> Select Option</option>\n                <option value=\"normal\">Normal</option>\n                <option value=\"100\">100</option>\n                <option value=\"200\">200</option>\n                <option value=\"300\">300</option>\n                <option value=\"400\">400</option>\n                <option value=\"500\">500</option>\n                <option value=\"600\">600</option>\n                <option value=\"700\">700</option>\n                <option value=\"800\">800</option>\n                <option value=\"900\">900</option>\n                <option value=\"bold\">Bold</option>\n                <option value=\"bolder\">Bolder</option>\n                <option value=\"lighter\">Lighter</option>\n              </select>\n            </div>\n          </div>\n          <div class=\"row padding-10\">\n            <div class=\"col-md-4 col-sm-5 col-xs-12 no-padding\">\n              <label class=\"padding-5\">Font Style</label>\n            </div>\n            <div class=\"col-md-8 col-sm-7 col-xs-12 no-padding\">\n              <select class=\"form-control no-radius\" placeholder=\"Font Style\" [(ngModel)]='data.header.fontStyle'>\n                <option disabled='disabled' selected> Select Option</option>\n                <option value=\"normal\">Normal</option>\n                <option value=\"italic\">Italic</option>\n                <option value=\"oblique\">Oblique</option>\n              </select>\n            </div>\n          </div>\n          <div class=\"row padding-10\">\n            <div class=\"col-md-4 col-sm-5 col-xs-12 no-padding\">\n              <label class=\"padding-5\">Text Orientation</label>\n            </div>\n            <div class=\"col-md-8 col-sm-7 col-xs-12 no-padding\">\n              <select class=\"form-control no-radius\" placeholder=\"Text Orientation\" [(ngModel)]='data.header.textOrientation'>\n                <option disabled='disabled' selected> Select Option</option>\n                <option value=\"unset\">Unset</option>\n                <option value=\"mixed\">Mixed</option>\n                <option value=\"sideways\">Sideways</option>\n                <option value=\"sideways-right\">Sideways Right</option>\n                <option value=\"upright\">Up Right</option>\n              </select>\n            </div>\n          </div>\n          <div class=\"row padding-10\" *ngIf=\"data.dataType === 'number'\">\n            <div class=\"col-md-4 col-sm-5 col-xs-12 no-padding\">\n              <label class=\"padding-5\">Thousand separator</label>\n            </div>\n            <div class=\"col-md-8 col-sm-7 col-xs-12 no-padding\">\n              <select class=\"form-control no-radius\" placeholder=\"Thousand separator\" [(ngModel)]='data.thousandSepartor'>\n                <option disabled='disabled' selected> Select Separator</option>\n                <option value=\" \">(Space)</option>\n                <option value=\",\">,</option>\n              </select>\n            </div>\n          </div>\n          <div class=\"row padding-10\" *ngIf=\"data.dataType === 'number'\">\n            <div class=\"col-md-4 col-sm-5 col-xs-12 no-padding\">\n              <label class=\"padding-5\">Currency symbol</label>\n            </div>\n            <div class=\"col-md-8 col-sm-7 col-xs-12 no-padding\">\n              <input class=\"form-control no-radius\" placeholder=\"Currency Symbol\" [(ngModel)]='data.currencySymbol'>\n            </div>\n          </div>\n          <div class=\"row padding-10\" *ngIf=\"data.dataType === 'date'\">\n            <div class=\"col-md-4 col-sm-5 col-xs-12 no-padding\">\n              <label class=\"padding-5\">Date Format</label>\n            </div>\n            <div class=\"col-md-8 col-sm-7 col-xs-12 no-padding\">\n              <select class=\"form-control no-radius\" placeholder=\"dateFormat\" [(ngModel)]='data.dateFormat'>\n                <option disabled='disabled' selected> Select Date Format</option>\n                <option value='dd/MM/yy'>dd/mm/yy</option>\n                <option value='dd/MM/yyyy'>dd/mm/yyyy</option>\n                <option value='d/M/yy'>d/m/yy</option>\n                <option value='d/M/yyyy'>d/m/yyyy</option>\n                <option value='ddMMyy'>ddmmyy</option>\n                <option value='ddMMyyyy'>ddmmyyyy</option>\n                <option value='ddMMMyy'>ddmmmyy</option>\n                <option value='ddMMMyyyy'>ddmmmyyyy</option>\n                <option value='dd-MMM-yy'>dd-mmm-yy</option>\n                <option value='dd-MMM-yyyy'>dd-mmm-yyyy</option>\n                <option value='dMMMyy'>dmmmyy</option>\n                <option value='dMMMyyyy'>dmmmyyyy</option>\n                <option value='d-MMM-yy'>d-mmm-yy</option>\n                <option value='d-MMM-yyyy'>d-mmm-yyyy</option>\n                <option value='d-MMMM-yy'>d-mmmm-yy</option>\n                <option value='d-MMMM-yyyy'>d-mmmm-yyyy</option>\n                <option value='yyMMdd'>yymmdd</option>\n                <option value='yyyyMMdd'>yyyymmdd</option>\n                <option value='yy/MM/dd'>yy/mm/dd</option>\n                <option value='yyyy/MM/dd'>yyyy/mm/dd</option>\n                <option value='MMddyy'>mmddyy</option>\n                <option value='MMddyyyy'>mmddyyyy</option>\n                <option value='MM/dd/yy'>mm/dd/yy</option>\n                <option value='MM/dd/yyyy'>mm/dd/yyyy</option>\n                <option value='MMM-dd-yy'>mmm-dd-yy</option>\n                <option value='MMM-dd-yyyy'>mmm-dd-yyyy</option>\n                <option value='yyyy-MM-dd'>yyyy-mm-dd</option>\n                <option value='MMM-yy'>mmm-yy</option>\n              </select>\n            </div>\n          </div>\n        </div>\n        <div class=\"col-md-6 col-sm-6 col-xs-12 col-lg-6\">\n          <div class='row'>\n            <div class=\"col-md-12 col-sm-12 col-xs-12 col-lg-12\">\n              <h4 class=\"no-margin\">Cell Style</h4>\n            </div>\n          </div>\n          <hr class=\"buffer-5-0\">\n          <div class=\"row padding-10\">\n            <div class=\"col-md-4 col-sm-5 col-xs-12 no-padding\">\n              <label class=\"padding-5\">Text Align</label>\n            </div>\n            <div class=\"col-md-8 col-sm-7 col-xs-12 no-padding\">\n              <select class=\"form-control no-radius\" placeholder=\"Text Align\" [(ngModel)]='data.cell.textAlign'>\n                <option disabled='disabled' selected> Select Align</option>\n                <option value=\"left\">Left</option>\n                <option value=\"center\">Center</option>\n                <option value=\"right\">Right</option>\n              </select>\n            </div>\n          </div>\n          <div class=\"row padding-10\">\n            <div class=\"col-md-4 col-sm-5 col-xs-12 no-padding\">\n              <label class=\"padding-5\">Font Size</label>\n            </div>\n            <div class=\"col-md-8 col-sm-7 col-xs-12 no-padding\">\n              <input class=\"form-control no-radius\" placeholder=\"Font Size\" [(ngModel)]='data.cell.fontSize' type=\"number\">\n            </div>\n          </div>\n          <div class=\"row padding-10\">\n            <div class=\"col-md-4 col-sm-5 col-xs-12 no-padding\">\n              <label class=\"padding-5\">Font Weight</label>\n            </div>\n            <div class=\"col-md-8 col-sm-7 col-xs-12 no-padding\">\n              <select class=\"form-control no-radius\" placeholder=\"Font Weight\" [(ngModel)]='data.cell.fontWeight'>\n                <option disabled='disabled' selected> Select Option</option>\n                <option value=\"normal\">Normal</option>\n                <option value=\"100\">100</option>\n                <option value=\"200\">200</option>\n                <option value=\"300\">300</option>\n                <option value=\"400\">400</option>\n                <option value=\"500\">500</option>\n                <option value=\"600\">600</option>\n                <option value=\"700\">700</option>\n                <option value=\"800\">800</option>\n                <option value=\"900\">900</option>\n                <option value=\"bold\">Bold</option>\n                <option value=\"bolder\">Bolder</option>\n                <option value=\"lighter\">Lighter</option>\n              </select>\n            </div>\n          </div>\n          <div class=\"row padding-10\">\n            <div class=\"col-md-4 col-sm-5 col-xs-12 no-padding\">\n              <label class=\"padding-5\">Font Style</label>\n            </div>\n            <div class=\"col-md-8 col-sm-7 col-xs-12 no-padding\">\n              <select class=\"form-control no-radius\" placeholder=\"Font Style\" [(ngModel)]='data.cell.fontStyle'>\n                <option disabled='disabled' selected> Select Option</option>\n                <option value=\"normal\">Normal</option>\n                <option value=\"italic\">Italic</option>\n                <option value=\"oblique\">Oblique</option>\n              </select>\n            </div>\n          </div>\n          <div class=\"row padding-10\">\n            <div class=\"col-md-4 col-sm-5 col-xs-12 no-padding\">\n              <label class=\"padding-5\">Text Orientation</label>\n            </div>\n            <div class=\"col-md-8 col-sm-7 col-xs-12 no-padding\">\n              <select class=\"form-control no-radius\" placeholder=\"Text Orientation\" [(ngModel)]='data.cell.textOrientation'>\n                <option disabled='disabled' selected> Select Option</option>\n                <option value=\"unset\">Unset</option>\n                <option value=\"mixed\">Mixed</option>\n                <option value=\"sideways\">Sideways</option>\n                <option value=\"sideways-right\">Sideways Right</option>\n                <option value=\"upright\">Up Right</option>\n              </select>\n            </div>\n          </div>\n          <div class=\"row padding-10\" *ngIf=\"data.dataType === 'number'\">\n            <div class=\"col-md-4 col-sm-5 col-xs-12 no-padding\">\n              <label class=\"padding-5\">Decimal places</label>\n            </div>\n            <div class=\"col-md-8 col-sm-7 col-xs-12 no-padding\">\n              <select class=\"form-control no-radius\" placeholder=\"Decimal places\" [(ngModel)]='data.decimalPlaces'>\n                <option disabled='disabled' selected> Select Decimal Places</option>\n                <option value=\"0\">0</option>\n                <option value=\"1\">1</option>\n                <option value=\"2\">2</option>\n                <option value=\"3\">3</option>\n                <option value=\"4\">4</option>\n                <option value=\"5\">5</option>\n                <option value=\"6\">6</option>\n                <option value=\"7\">7</option>\n                <option value=\"8\">8</option>\n                <option value=\"9\">9</option>\n              </select>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"col-md-12 col-sm-12 col-xs-12 col-lg-12\">\n        <hr class=\"buffer-5-0\">\n        <div class='row'>\n          <div class=\"col-xs-12 text-lg-right text-md-right text-sm-right\">\n            <button class='btn btn-sm btn-primary right-buffer-10' (click)='saveFormat()'>Save</button>\n            <button class='btn btn-sm btn-default' (click)='cancelFormat()'>Cancel</button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n"}]}],"members":{"updateFormat":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":309,"character":3}}]}],"error":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":310,"character":3}}]}],"onKeydownHandler":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":315,"character":3},"arguments":["document:keydown.escape",["$event"]]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":321,"character":29},{"__symbolic":"reference","name":"ɵa"}]}],"ShowFormat":[{"__symbolic":"method"}],"selectColumn":[{"__symbolic":"method"}],"saveFormat":[{"__symbolic":"method"}],"cancelFormat":[{"__symbolic":"method"}],"detectChanges":[{"__symbolic":"method"}]}},"ɵo":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"mdg-formatter","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":7,"character":19},"member":"OnPush"},"template":"<div *ngIf=\"showFormatter\" class='mdg-filter-container'>\n    <div class=\"mdg-formatter-popup-container\">\n      <div class='row'>\n        <div class=\"col-md-12 col-sm-12 col-xs-12 col-lg-12\">\n          <div class='row'>\n            <div class=\"col-md-12 col-sm-12 col-xs-12 col-lg-12\">\n              <h3 class=\"no-margin\">Field : {{data.fieldValue}} | <small>{{selectedColumn.displayName}}</small></h3>\n            </div>\n          </div>\n          <hr class=\"buffer-5-0\">\n        </div>\n        <div class=\"col-md-12 col-sm-12 col-xs-12 col-lg-12\">\n          <div class=\"row padding-10\">\n            <div class=\"col-md-2 col-sm-4 col-xs-12 no-padding\">\n              <label class=\"padding-5\">Display Text </label>\n            </div>\n            <div class=\"col-md-10 col-sm-8 col-xs-12 no-padding\">\n              <input class=\"form-control no-radius\" placeholder=\"Display Text\" maxlength=\"150\" [(ngModel)]='data.displayName'>\n            </div>\n          </div>\n          <hr class=\"buffer-5-0\">\n        </div>\n        <div class=\"col-md-6 col-sm-6 col-xs-12 col-lg-6\">\n          <div class='row'>\n            <div class=\"col-md-12 col-sm-12 col-xs-12 col-lg-12\">\n              <h4 class=\"no-margin\">Header Style</h4>\n            </div>\n          </div>\n          <hr class=\"buffer-5-0\">\n          <div class=\"row padding-10\">\n            <div class=\"col-md-4 col-sm-5 col-xs-12 no-padding\">\n              <label class=\"padding-5\">Text Align</label>\n            </div>\n            <div class=\"col-md-8 col-sm-7 col-xs-12 no-padding\">\n              <select class=\"form-control no-radius\" placeholder=\"Header Align\" [(ngModel)]='data.header.textAlign'>\n                <option disabled='disabled' selected> Select Align</option>\n                <option value=\"left\">Left</option>\n                <option value=\"center\">Center</option>\n                <option value=\"right\">Right</option>\n              </select>\n            </div>\n          </div>\n          <div class=\"row padding-10\">\n            <div class=\"col-md-4 col-sm-5 col-xs-12 no-padding\">\n              <label class=\"padding-5\">Font Size</label>\n            </div>\n            <div class=\"col-md-8 col-sm-7 col-xs-12 no-padding\">\n              <input class=\"form-control no-radius\" placeholder=\"Font Size\" [(ngModel)]='data.header.fontSize' type=\"number\">\n            </div>\n          </div>\n          <div class=\"row padding-10\">\n            <div class=\"col-md-4 col-sm-5 col-xs-12 no-padding\">\n              <label class=\"padding-5\">Font Weight</label>\n            </div>\n            <div class=\"col-md-8 col-sm-7 col-xs-12 no-padding\">\n              <select class=\"form-control no-radius\" placeholder=\"Font Weight\" [(ngModel)]='data.header.fontWeight'>\n                <option disabled='disabled' selected> Select Option</option>\n                <option value=\"normal\">Normal</option>\n                <option value=\"100\">100</option>\n                <option value=\"200\">200</option>\n                <option value=\"300\">300</option>\n                <option value=\"400\">400</option>\n                <option value=\"500\">500</option>\n                <option value=\"600\">600</option>\n                <option value=\"700\">700</option>\n                <option value=\"800\">800</option>\n                <option value=\"900\">900</option>\n                <option value=\"bold\">Bold</option>\n                <option value=\"bolder\">Bolder</option>\n                <option value=\"lighter\">Lighter</option>\n              </select>\n            </div>\n          </div>\n          <div class=\"row padding-10\">\n            <div class=\"col-md-4 col-sm-5 col-xs-12 no-padding\">\n              <label class=\"padding-5\">Font Style</label>\n            </div>\n            <div class=\"col-md-8 col-sm-7 col-xs-12 no-padding\">\n              <select class=\"form-control no-radius\" placeholder=\"Font Style\" [(ngModel)]='data.header.fontStyle'>\n                <option disabled='disabled' selected> Select Option</option>\n                <option value=\"normal\">Normal</option>\n                <option value=\"italic\">Italic</option>\n                <option value=\"oblique\">Oblique</option>\n              </select>\n            </div>\n          </div>\n          <div class=\"row padding-10\">\n            <div class=\"col-md-4 col-sm-5 col-xs-12 no-padding\">\n              <label class=\"padding-5\">Text Orientation</label>\n            </div>\n            <div class=\"col-md-8 col-sm-7 col-xs-12 no-padding\">\n              <select class=\"form-control no-radius\" placeholder=\"Text Orientation\" [(ngModel)]='data.header.textOrientation'>\n                <option disabled='disabled' selected> Select Option</option>\n                <option value=\"unset\">Unset</option>\n                <option value=\"mixed\">Mixed</option>\n                <option value=\"sideways\">Sideways</option>\n                <option value=\"sideways-right\">Sideways Right</option>\n                <option value=\"upright\">Up Right</option>\n              </select>\n            </div>\n          </div>\n        </div>\n        <div class=\"col-md-6 col-sm-6 col-xs-12 col-lg-6\">\n          <div class='row'>\n            <div class=\"col-md-12 col-sm-12 col-xs-12 col-lg-12\">\n              <h4 class=\"no-margin\">Cell Style</h4>\n            </div>\n          </div>\n          <hr class=\"buffer-5-0\">\n          <div class=\"row padding-10\">\n            <div class=\"col-md-4 col-sm-5 col-xs-12 no-padding\">\n              <label class=\"padding-5\">Text Align</label>\n            </div>\n            <div class=\"col-md-8 col-sm-7 col-xs-12 no-padding\">\n              <select class=\"form-control no-radius\" placeholder=\"Header Align\" [(ngModel)]='data.cell.textAlign'>\n                <option disabled='disabled' selected> Select Align</option>\n                <option value=\"left\">Left</option>\n                <option value=\"center\">Center</option>\n                <option value=\"right\">Right</option>\n              </select>\n            </div>\n          </div>\n          <div class=\"row padding-10\">\n            <div class=\"col-md-4 col-sm-5 col-xs-12 no-padding\">\n              <label class=\"padding-5\">Font Size</label>\n            </div>\n            <div class=\"col-md-8 col-sm-7 col-xs-12 no-padding\">\n              <input class=\"form-control no-radius\" placeholder=\"Font Size\" [(ngModel)]='data.cell.fontSize' type=\"number\">\n            </div>\n          </div>\n          <div class=\"row padding-10\">\n            <div class=\"col-md-4 col-sm-5 col-xs-12 no-padding\">\n              <label class=\"padding-5\">Font Weight</label>\n            </div>\n            <div class=\"col-md-8 col-sm-7 col-xs-12 no-padding\">\n              <select class=\"form-control no-radius\" placeholder=\"Font Weight\" [(ngModel)]='data.cell.fontWeight'>\n                <option disabled='disabled' selected> Select Option</option>\n                <option value=\"normal\">Normal</option>\n                <option value=\"100\">100</option>\n                <option value=\"200\">200</option>\n                <option value=\"300\">300</option>\n                <option value=\"400\">400</option>\n                <option value=\"500\">500</option>\n                <option value=\"600\">600</option>\n                <option value=\"700\">700</option>\n                <option value=\"800\">800</option>\n                <option value=\"900\">900</option>\n                <option value=\"bold\">Bold</option>\n                <option value=\"bolder\">Bolder</option>\n                <option value=\"lighter\">Lighter</option>\n              </select>\n            </div>\n          </div>\n          <div class=\"row padding-10\">\n            <div class=\"col-md-4 col-sm-5 col-xs-12 no-padding\">\n              <label class=\"padding-5\">Font Style</label>\n            </div>\n            <div class=\"col-md-8 col-sm-7 col-xs-12 no-padding\">\n              <select class=\"form-control no-radius\" placeholder=\"Font Style\" [(ngModel)]='data.cell.fontStyle'>\n                <option disabled='disabled' selected> Select Option</option>\n                <option value=\"normal\">Normal</option>\n                <option value=\"italic\">Italic</option>\n                <option value=\"oblique\">Oblique</option>\n              </select>\n            </div>\n          </div>\n          <div class=\"row padding-10\">\n            <div class=\"col-md-4 col-sm-5 col-xs-12 no-padding\">\n              <label class=\"padding-5\">Text Orientation</label>\n            </div>\n            <div class=\"col-md-8 col-sm-7 col-xs-12 no-padding\">\n              <select class=\"form-control no-radius\" placeholder=\"Text Orientation\" [(ngModel)]='data.cell.textOrientation'>\n                <option disabled='disabled' selected> Select Option</option>\n                <option value=\"unset\">Unset</option>\n                <option value=\"mixed\">Mixed</option>\n                <option value=\"sideways\">Sideways</option>\n                <option value=\"sideways-right\">Sideways Right</option>\n                <option value=\"upright\">Up Right</option>\n              </select>\n            </div>\n          </div>\n        </div>\n        <div class=\"col-md-12 col-sm-12 col-xs-12 col-lg-12\">\n          <hr class=\"buffer-5-0\">\n          <div class='row'>\n            <div class=\"col-xs-12 text-lg-right text-md-right text-sm-right\">\n              <button class='btn btn-sm btn-primary right-buffer-10' (click)='saveFormat()'>Apply</button>\n              <button class='btn btn-sm btn-default' (click)='cancelFormat()'>Cancel</button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  "}]}],"members":{"formattedFields":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":209,"character":3}}]}],"updateFormat":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":210,"character":3}}]}],"onKeydownHandler":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":215,"character":3},"arguments":["document:keydown.escape",["$event"]]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":221,"character":29},{"__symbolic":"reference","name":"ɵa"}]}],"ShowFormat":[{"__symbolic":"method"}],"saveFormat":[{"__symbolic":"method"}],"cancelFormat":[{"__symbolic":"method"}],"detectChanges":[{"__symbolic":"method"}]}},"ɵp":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"mdg-save","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":5,"character":19},"member":"OnPush"},"template":"<div *ngIf=\"showSaveOption\" class='mdg-filter-container'>\n  <div class=\"mdg-filter-popup-container\">\n    <div class='row'>\n      <div class=\"col-md-12 col-sm-12 col-xs-12 col-lg-12\">\n        <h3>Save Pivot Report</h3>\n      </div>\n    </div>\n    <hr class=\"buffer-5-0\">\n    <div class='row'>\n      <div class=\"col-md-12 col-sm-12 col-xs-12 col-lg-12\">\n        <label>Format Name : </label>\n      </div>\n      <div class=\"col-md-12 col-sm-12 col-xs-12 col-lg-12\">\n        <input class=\"form-control no-radius\" [(ngModel)]='data.formatName' maxlength=\"150\">\n      </div>\n    </div>\n    <div class='row'>\n      <div class=\"col-md-12 col-sm-12 col-xs-12 col-lg-12\">\n        <label>Report Title : </label>\n      </div>\n      <div class=\"col-md-12 col-sm-12 col-xs-12 col-lg-12\">\n        <input class=\"form-control no-radius\" [(ngModel)]='data.reportTitle' maxlength=\"150\">\n      </div>\n    </div>\n    <div class='row'>\n      <div class=\"col-md-6 col-sm-6 col-xs-6 col-lg-6 padding-top-bottom-10\">\n        <label>Show Option :\n          <input type=\"checkbox\" class=\"no-radius\" [(ngModel)]='data.showOptions'>\n        </label>\n      </div>\n      <div class=\"col-md-6 col-sm-6 col-xs-6 col-lg-6 padding-top-bottom-10\">\n        <label>Show Filter :\n          <input type=\"checkbox\" class=\"no-radius\" [(ngModel)]='data.showFilter'>\n        </label>\n      </div>\n      <div class=\"col-md-6 col-sm-6 col-xs-6 col-lg-6 padding-top-bottom-10\">\n        <label>Show Additional Filter :\n          <input type=\"checkbox\" class=\"no-radius\" [(ngModel)]='data.showAdditionalFilter'>\n        </label>\n      </div>\n      <div class=\"col-md-6 col-sm-6 col-xs-6 col-lg-6 padding-top-bottom-10\">\n        <label>Show Column Filter :\n          <input type=\"checkbox\" class=\"no-radius\" [(ngModel)]='data.showColumnFilter'>\n        </label>\n      </div>\n      <div class=\"col-md-6 col-sm-6 col-xs-6 col-lg-6 padding-top-bottom-10\">\n        <label>Show Format :\n          <input type=\"checkbox\" class=\"no-radius\" [(ngModel)]='data.showFormat'>\n        </label>\n      </div>\n      <div class=\"col-md-6 col-sm-6 col-xs-6 col-lg-6 padding-top-bottom-10\">\n        <label>Show Save :\n          <input type=\"checkbox\" class=\"no-radius\" [(ngModel)]='data.showSave'>\n        </label>\n      </div>\n      <div class=\"col-md-6 col-sm-6 col-xs-6 col-lg-6 padding-top-bottom-10\">\n        <label>Show Export :\n          <input type=\"checkbox\" class=\"no-radius\" [(ngModel)]='data.showExport'>\n        </label>\n      </div>\n      <div class=\"col-md-6 col-sm-6 col-xs-6 col-lg-6 padding-top-bottom-10\">\n        <label>Show Print :\n          <input type=\"checkbox\" class=\"no-radius\" [(ngModel)]='data.showPrint'>\n        </label>\n      </div>\n    </div>\n    <div class='row'>\n      <div class=\"col-md-12 col-sm-12 col-xs-12 col-lg-12\">\n        <h3>Pivot Formats</h3>\n      </div>\n    </div>\n    <hr class=\"buffer-5-0\">\n    <div class='row'>\n      <div class=\"col-md-6 col-sm-6 col-xs-6 col-lg-6 padding-top-bottom-10\">\n        <label>Line Chart :\n          <input type=\"checkbox\" class=\"no-radius\" [(ngModel)]='data.lineChart'>\n        </label>\n      </div>\n      <div class=\"col-md-6 col-sm-6 col-xs-6 col-lg-6 padding-top-bottom-10\">\n        <label>Bar Chart :\n          <input type=\"checkbox\" class=\"no-radius\" [(ngModel)]='data.barChart'>\n        </label>\n      </div>\n      <div class=\"col-md-6 col-sm-6 col-xs-6 col-lg-6 padding-top-bottom-10\">\n        <label>Doughnut Chart :\n          <input type=\"checkbox\" class=\"no-radius\" [(ngModel)]='data.doughnutChart'>\n        </label>\n      </div>\n      <div class=\"col-md-6 col-sm-6 col-xs-6 col-lg-6 padding-top-bottom-10\">\n        <label>Radar Chart :\n          <input type=\"checkbox\" class=\"no-radius\" [(ngModel)]='data.radarChart'>\n        </label>\n      </div>\n      <div class=\"col-md-6 col-sm-6 col-xs-6 col-lg-6 padding-top-bottom-10\">\n        <label>Pie Chart :\n          <input type=\"checkbox\" class=\"no-radius\" [(ngModel)]='data.pieChart'>\n        </label>\n      </div>\n      <div class=\"col-md-6 col-sm-6 col-xs-6 col-lg-6 padding-top-bottom-10\">\n        <label>Polar Area Chart :\n          <input type=\"checkbox\" class=\"no-radius\" [(ngModel)]='data.polarAreaChart'>\n        </label>\n      </div>\n    </div>\n    <div class='row'>\n      <div class=\"col-md-12 col-sm-12 col-xs-12 col-lg-12\">\n        <hr class=\"buffer-5-0\">\n        <div class='row'>\n          <div class=\"col-xs-12 text-lg-right text-md-right text-sm-right\">\n            <button class='btn btn-sm btn-primary right-buffer-10' (click)='SaveReport()'>Save</button>\n            <button class='btn btn-sm btn-default' (click)='showSaveOption = false'>Cancel</button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n"}]}],"members":{"saveReport":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":128,"character":3}}]}],"saveError":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":129,"character":3}}]}],"onKeydownHandler":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":134,"character":3},"arguments":["document:keydown.escape",["$event"]]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":140,"character":29}]}],"ShowSaveOption":[{"__symbolic":"method"}],"SaveReport":[{"__symbolic":"method"}],"detectChanges":[{"__symbolic":"method"}]}},"ɵq":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":3,"character":1},"arguments":[{"name":"groupBy"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"ɵr":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":2,"character":1},"arguments":[{"name":"sumPipe"}]}],"members":{"transform":[{"__symbolic":"method"}]}}},"origins":{"MdgPivotComponent":"./lib/mdg-pivot.component","MdgPivotModule":"./lib/mdg-pivot.module","ɵa":"./lib/Services/Helper.Service","ɵb":"./lib/pipe/distinct.pipe","ɵc":"./lib/pipe/sort.pipe","ɵd":"./lib/pipe/format.pipe","ɵe":"./lib/component/toolbar/mdg.toolbar","ɵf":"./lib/Component/Filter/MDG.Filter","ɵg":"./lib/Component/Filter/MDG.DateFilter","ɵh":"./lib/component/pivot/mdg.pivotdrawer","ɵi":"./lib/pipe/aggr.pipe","ɵj":"./lib/component/toolbar/mdg.formula","ɵk":"./lib/component/formula/mdg.formulaselector","ɵl":"./lib/Component/detail/MDG.Detail","ɵm":"./lib/Component/detail/MDG.Columns","ɵn":"./lib/component/toolbar/mdg.format","ɵo":"./lib/component/toolbar/mdg.formatter","ɵp":"./lib/component/toolbar/mdg.save","ɵq":"./lib/pipe/group.pipe","ɵr":"./lib/pipe/sum.pipe"},"importAs":"mdg-pivot"}