ngx-deebodata 0.2.9 → 0.3.1

package/fesm2022/ngx-deebodata.mjs

@@ -4,7 +4,7 @@ import * as i4$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i4 from '@angular/common';
 import { CommonModule, DecimalPipe } from '@angular/common';
-import { Subject, Subscription, finalize } from 'rxjs';
+import { Subject, timer, Subscription, finalize } from 'rxjs';
 import * as i2 from '@angular/common/http';
 
 class CommonService {
@@ -373,8 +373,12 @@ class DataTableService {
     currFilData = [];
     currMapping = {};
     mapperWorkerId = 1;
-    dTblHeight = 500;
+    dTblHeight = signal(500, ...(ngDevMode ? [{ debugName: "dTblHeight" }] : /* istanbul ignore next */ []));
+    listenForScroll = signal(true, ...(ngDevMode ? [{ debugName: "listenForScroll" }] : /* istanbul ignore next */ []));
+    lockCellFocus = signal(false, ...(ngDevMode ? [{ debugName: "lockCellFocus" }] : /* istanbul ignore next */ []));
     defltRHgt = "50px";
+    defltRHgtNum = 50;
+    mouseIsDown = false;
     isSorting = signal(false, ...(ngDevMode ? [{ debugName: "isSorting" }] : /* istanbul ignore next */ []));
     isFiltering = signal(false, ...(ngDevMode ? [{ debugName: "isFiltering" }] : /* istanbul ignore next */ []));
     showCharts = signal(false, ...(ngDevMode ? [{ debugName: "showCharts" }] : /* istanbul ignore next */ []));
@@ -966,7 +970,8 @@ class TableDragService {
     }
     currDataRow;
     currColForDataRow;
-    dTblHeight = 500;
+    handleTblHtTO = null;
+    tblHgtDiff = 0;
     currColumnEdit = "";
     listenForMouseUp = false;
     listenForSelectStart = false;
@@ -1108,6 +1113,7 @@ class TableDragService {
                     if (rootCol) {
                         this.dataTableService.currColumnEdit = rootCol;
                         this.colDragStartFrmCellTracker = { col: rootCol, row: null, xstart: useX, ystart: null, resized: false };
+                        this.dataTableService.listenForScroll.set(false);
                         this.listenForMouseUp = true;
                     }
                 }
@@ -1119,6 +1125,7 @@ class TableDragService {
                     this.currDataRow = document.getElementById(col.getAttribute("data-index"));
                 }
                 this.colDragStartFrmCellTracker = { col: null, row: this.currDataRow, xstart: null, ystart: e.offsetY, resized: false };
+                this.dataTableService.listenForScroll.set(false);
                 this.listenForMouseUp = true;
             }
         }
@@ -1196,9 +1203,11 @@ class TableDragService {
             let max = 1000;
             if (isNaN(max))
                 max = 700;
-            const tblWant = Math.min((this.dTblHeight + useHgt), max);
-            this.dTblHeight = Math.floor(Math.max(tblWant, 100));
-            this.dTblHeightOutput.next(this.dTblHeight);
+            const tblWant = Math.min((this.dataTableService.dTblHeight() + useHgt), max);
+            const finalHgt = Math.floor(Math.max(tblWant, 100));
+            this.tblHgtDiff += (finalHgt - this.dataTableService.dTblHeight());
+            this.dataTableService.dTblHeight.set(finalHgt);
+            this.dTblHeightOutput.next(finalHgt);
         }
         catch (err) { }
     }
@@ -1724,6 +1733,9 @@ class DataCellComponent {
     elCol = "";
     cellStyle = {};
     setCellEditScrlActionTO = null;
+    text = "";
+    html = "";
+    minimized = false;
     rawText;
     cell;
     rowId = ""; //starts with dataTableRow
@@ -1748,6 +1760,8 @@ class DataCellComponent {
                 if (this.cell.visible && !this.ready)
                     this.handleSettingText();
             }
+            if (this.cell.visible && (changes["cell"] || changes["text"] || changes["html"]))
+                this.handleSettingText();
         }
     }
     ngOnInit() {
@@ -1777,24 +1791,28 @@ class DataCellComponent {
             this.cellElem.nativeElement.setAttribute("data-symbol", sym);
         }
     }
-    handleSettingText() {
+    handleSettingText(force) {
         if (this.cell.text || (this.cell.html && !/<img/g.test(this.cell.html)))
-            return this.setCellText();
+            return this.setCellText(force);
         if (this.cell.html)
-            setTimeout(() => { this.setCellText(); }, 100);
+            timer(100).subscribe(() => { this.setCellText(force); });
     }
-    setCellText() {
+    setCellText(force) {
         const cell = this.cellElem.nativeElement;
-        if (this.cell.text && !cell.textContent)
-            cell.textContent = this.cell.text;
-        if (this.cell.html && !cell.innerHTML) {
-            cell.innerHTML = this.cell.html;
-            if (/ \<a/g.test(this.cell.html) || /a\> /g.test(this.cell.html))
+        if (this.text && (!cell.textContent || force)) {
+            cell.textContent = this.text;
+            cell.style.removeProperty("display");
+        }
+        if (this.html && (!cell.innerHTML || force)) {
+            cell.innerHTML = this.html;
+            if (/ \<a/g.test(this.html) || /a\> /g.test(this.html))
                 cell.style.display = "inline-block";
+            else
+                cell.style.removeProperty("display");
         }
         this.ready = true;
-        if (this.cell.html) {
-            setTimeout(() => {
+        if (this.html && !this.ready) {
+            timer(0).subscribe(() => {
                 const ancOIm = (document.querySelector("#" + this.rowId + " .data-cell-" + this.elCol + " a") ||
                     document.querySelector("#" + this.rowId + " .data-cell-" + this.elCol + " img"));
                 if (ancOIm) {
@@ -1852,14 +1870,15 @@ class DataCellComponent {
         return text;
     }
     setToEditAfterTO() {
-        this.setCellEditScrlActionTO = setTimeout(() => {
+        this.setCellEditScrlActionTO = timer(100).subscribe(() => {
             if (this.dataTableService.currEditCol === this.cell.column)
                 this.setCellToEdit(true);
-        }, 100);
+            timer(0).subscribe(() => { this.dataTableService.autoScrollOnEdit = false; });
+        });
     }
     setCellToEdit(noHScrl) {
-        if (this.tblDragService.didResizeOnEvent || !this.cell.editable) {
-            if (!this.cell.editable) {
+        if (this.tblDragService.didResizeOnEvent || this.dataTableService.lockCellFocus() || !this.cell.editable) {
+            if (!this.cell.editable && !this.dataTableService.lockCellFocus()) {
                 this.dataTableService.clearAllFocused();
                 this.dataTableService.clearDCellFcsd();
                 this.clearVEditFocus.emit("");
@@ -1873,6 +1892,8 @@ class DataCellComponent {
         const cell = this.cellElem.nativeElement;
         if (this.cell.minimized)
             return cell.blur();
+        if (!this.canEdit && !this.cell.html)
+            this.dataTableService.lockCellFocus.set(true);
         this.dataTableService.currEditCol = this.cell.column;
         this.dataTableService.currEditIndex = parseInt(this.rowId.replace(/^dataTableRow/, ""));
         const cellWid = parseInt(this.dataTableService.useColWid?.replace(/px/g, "") || "250");
@@ -1893,7 +1914,7 @@ class DataCellComponent {
         this.dataTableService.clearAllFocused();
         this.dataTableService.clearDCellFcsd();
         this.setCellEditScrlActionTO = null;
-        setTimeout(() => this.dataTableService.autoScrollOnEdit = false);
+        timer(0).subscribe(() => this.dataTableService.autoScrollOnEdit = false);
         if (this.needsVal()) {
             const okText = this.validateRawText(this.cell.rawText, this.cell.column, this.cell.dataType);
             if (this.cell.rawText && !okText)
@@ -1904,15 +1925,17 @@ class DataCellComponent {
                     cell.blur();
                     return this.dataTableService.clearAllFocused();
                 }
-                setTimeout(() => { if (this.dataTableService.currEditCol === this.cell.column)
-                    cell.focus(); }, 45);
-                setTimeout(() => { if (this.dataTableService.currEditCol === this.cell.column)
-                    cell.classList.add("focused-el"); }, 150);
+                timer(45).subscribe(() => { if (this.dataTableService.currEditCol === this.cell.column) {
+                    cell.focus();
+                } });
+                timer(150).subscribe(() => { if (this.dataTableService.currEditCol === this.cell.column) {
+                    cell.classList.add("focused-el");
+                } });
             }
             return;
         }
         this.clearVEditFocus.emit("");
-        setTimeout(() => {
+        timer(0).subscribe(() => {
             const fCellDragger = document.getElementsByClassName("focused-cell-dragger")[0];
             const par = fCellDragger?.parentElement;
             if (fCellDragger && par) {
@@ -1992,12 +2015,18 @@ class DataCellComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: DataCellComponent, deps: [{ token: TableDragService }, { token: DataTableService }, { token: CommonService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", type: DataCellComponent, isStandalone: true, selector: "app-data-cell", inputs: { rawText: "rawText", cell: "cell", rowId: "rowId", colWid: "colWid", rowHeight: "rowHeight", noColResize: "noColResize", columnValClass: "columnValClass" }, outputs: { width: "width", height: "height", edit: "edit", dragListen: "dragListen", validateEditFocus: "validateEditFocus", clearVEditFocus: "clearVEditFocus" }, viewQueries: [{ propertyName: "cellElem", first: true, predicate: ["cellEl"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div #cellEl [attr.contenteditable]=\"canEdit\" [ngStyle]=\"cellStyle\" class=\"data-cell data-cell-{{elCol}}{{rightAlign}}{{symbolCls}}{{columnValClass}}\" \r\n[ngClass]=\"{ 'col-item-freeze': cell.freeze, 'col-header-minimized': cell.minimized, 'holding-check': cell.column === dataTableService.firstCol }\"\r\n(mousemove)=\"tblDragService.checkItemBorderCursor($event, noColResize)\" (mousemove)=\"tblDragService.handleCellSizeAdjust($event, elCol)\"\r\n(mousedown)=\"tblDragService.handleCellSizeAdjust($event, elCol)\" (focus)=\"setCellToEdit()\" (blur)=\"emitEdit($event)\" [tabindex]=\"cell.minimized ? -1 : 0\"\r\n[attr.data-index]=\"rowId\" (dblclick)=\"handleColResDblClick(cell.column)\" (keydown.tab)=\"checkValEditOpts($event)\"\r\n></div>", styles: [".data-cell.col-header-minimized{border-bottom:none!important;border-right:none!important}::ng-deep img{max-width:100px!important;height:auto;margin:0;vertical-align:middle}\n", "@charset \"UTF-8\";@font-face{font-family:Roboto Condensed;src:url(https://d2ffvluimla00s.cloudfront.net/RobotoCondensed-VariableFont_wght.ttf) format(\"ttf\")}@font-face{font-family:Material Icons;font-style:normal;font-weight:400;src:url(https://d2ffvluimla00s.cloudfront.net/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format(\"woff2\")}.deebo-data-grid-section{font-family:Roboto Condensed,Arial,Helvetica,sans-serif}:host{--accent-color:rgb(50, 50, 50);--grid-color:rgb(199, 199, 199);--pad-left-base: 33px;--row-num-width: 75px;--reg-font-size: 17px }.relly{position:relative}.hide{display:none!important;max-height:0;max-width:0;top:0;left:0;opacity:0}.ovy{overflow:auto}.no-ovy-y{overflow-y:hidden!important}.pad-top-sm{padding-top:4px!important}.pad-top-ten{padding-top:10px!important}.pad-top-teen{padding-top:17px}.pad-top-thirty,.pad-top-trey{padding-top:33px}.pad-top-much{padding-top:75px}.o-visible{overflow:visible}.dontwrap{white-space:nowrap}.inline-b{display:inline-block}.inline{display:inline}.half-wid{width:50%;vertical-align:top;display:inline-block}.qtr-wid{width:25%;vertical-align:top;display:inline-block}.third-wid{width:33.3%;vertical-align:top;display:inline-block}.two-third-wid{width:66.6%;vertical-align:top;display:inline-block}.three-qtr-wid{width:75%;vertical-align:top;display:inline-block}.v-top{vertical-align:top!important}.v-mid{vertical-align:middle!important}.v-bot{vertical-align:bottom!important}.lg-text{font-size:larger}.xlg-text{font-size:x-large!important}.md-text{font-size:var(--reg-font-size)!important}.small-text{font-size:small}.tiny-text{font-size:x-small}.invisible{visibility:hidden}.flex-center{display:flex;justify-content:center;align-items:center}.flex-item{flex:1 1 auto}.o-x-hidden{overflow-x:hidden!important}.no-weight{font-weight:400!important}.semi-heavy{font-weight:500!important}.heavy{font-weight:700!important}.marauto{margin:0 auto}.center{text-align:center}.left{text-align:left}.right{text-align:right}.btn-reset{border:none;color:#fff;padding:7px 11px;background:maroon}.error-message{color:maroon;font-weight:500}.success{color:green;font-weight:500}.neutral{color:var(--accent-color)}input,select{border:none;padding:4px;border-radius:3px;box-sizing:border-box;font-family:Roboto Condensed,Arial,Helvetica,sans-serif;box-shadow:0 0 1px 1px #afafaf;-moz-box-shadow:0 0 1px 1px #afafaf;-webkit-box-shadow:0 0 1px 1px #afafaf}input[type=radio],input[type=checkbox]{cursor:pointer;box-shadow:none!important;-moz-box-shadow:none!important;-webkit-box-shadow:none!important}button{cursor:pointer}button:focus,input:focus,select:focus,textarea:focus,a:focus{outline-width:0}button:disabled,input:disabled,select:disabled{opacity:.5;cursor:not-allowed}.prevent{opacity:.5;cursor:not-allowed;pointer-events:none}.controls{text-align:right;padding:16px 11px 6px 1px;max-width:100%;clear:both;overflow-x:auto;white-space:nowrap}.controls button{font-size:var(--reg-font-size);margin-right:31px;vertical-align:middle}.controls button span{vertical-align:middle}.controls button:last-of-type{margin-right:0}.data-table{margin-top:11px;overflow:hidden;box-shadow:0 -1px 3px 1px var(--grid-color);-moz-box-shadow:0 -1px 3px 1px var(--grid-color);-webkit-box-shadow:0 -1px 3px 1px var(--grid-color)}.sel-rows-checked{color:#00a8f399!important}.save-hilite{padding:2px 4px;border-radius:3px;background:#ebebeb;box-shadow:0 0 3px 1px var(--accent-color);-moz-box-shadow:0 0px 3px 1px var(--accent-color);-webkit-box-shadow:0 0px 3px 1px var(--accent-color)}.btn-ctrl-sel-rows,.btn-export-or-print{border:none;padding:3px 4px;border-radius:3px;background:#f5f5f5;vertical-align:middle;box-shadow:0 0 2px 1px var(--accent-color);-moz-box-shadow:0 0 2px 1px var(--accent-color);-webkit-box-shadow:0 0 2px 1px var(--accent-color)}.deebo-dd-contain-div:last-of-type{margin-right:0!important}.btn-export{width:100%;text-transform:uppercase}.btn-export:hover{text-decoration:underline}.btn-ctrl-sel-rows:hover,.btn-export-or-print:hover{background:#ebebeb;box-shadow:0 0 6px 2px gray;-moz-box-shadow:0 0 6px 2px gray;-webkit-box-shadow:0 0 6px 2px gray}.btn-center-selected{padding:2px 4px;border-radius:5px;background:#f5f5f5;box-shadow:0 0 6px 2px gray;-moz-box-shadow:0 0 6px 2px gray;-webkit-box-shadow:0 0 6px 2px gray}.btn-ctrl-sel-rows .material-icons{font-size:18px;font-weight:600;vertical-align:middle}.btn-ctrl-sel-rows .material-icons:not(.error-message){color:var(--accent-color)}.data-table-headers{cursor:pointer;white-space:nowrap;border-bottom:1px solid var(--grid-color)}.data-table-row{white-space:nowrap}.data-table-row:hover,.data-table-row .col-item-freeze:hover{background:#f3f3f3}.data-row-selected{background:#d6d6d6!important}.table-working{opacity:.1;pointer-events:none}.select-row-check{left:9px;z-index:10;cursor:pointer;margin:0;position:absolute;padding:0!important}.gb-row-num{left:2px;z-index:10;cursor:pointer;margin:0;font-size:x-small;position:absolute;padding:0!important}.mock-html{width:50%;height:18px;margin:0 auto;border-radius:11px;background:var(--grid-color)}.abs-right{top:7px;right:7px;position:absolute}.has-symbol:after{content:attr(data-symbol);padding-left:3px}.has-symbol-b:before{content:attr(data-symbol);padding-right:3px}.data-table-row-no-data{font-size:xx-large;color:gray;font-weight:500;text-shadow:-1px -1px var(--accent-color)}.data-row-selected .col-item-freeze,.data-row-selected .data-cell,.data-row-selected:hover,.data-row-selected .col-item-freeze:hover,.data-row-selected .data-cell:hover{background:#d6d6d6!important}.data-table-headers .col-item-freeze:first-of-type{border-bottom:1px solid var(--grid-color)}.col-header{z-index:2;width:125px;overflow:auto;cursor:grab;padding:7px 3px;text-align:center;position:relative;box-sizing:border-box;display:inline-block;vertical-align:top;white-space:pre-wrap;word-wrap:break-word;background:#fafafa;border-right:1px solid var(--grid-color)}.col-header button,.col-header span,.col-header select{cursor:pointer;vertical-align:middle}.col-header input{vertical-align:middle}.col-header-img-container{overflow-y:hidden;text-align:center;display:inline-block;vertical-align:middle;background-size:cover;background-position:center;background-repeat:no-repeat}.col-header-minimized{width:0!important;height:0!important;padding:0!important;overflow:hidden!important;border-bottom:none!important;border-right:none!important;transition:width .3s ease}.btn-maximize-col{border:none;border-radius:5px;background:#f5f5f5;box-shadow:0 0 3px 2px gray;font-size:var(--reg-font-size);margin-right:27px;padding:4px}.no-btn{border:none;background:none}.col-item-freeze{left:0;z-index:3;position:sticky;background:#fff;box-shadow:2px 0 3px 0 var(--grid-color);-moz-box-shadow:2px 0px 3px 0px var(--grid-color);-webkit-box-shadow:2px 0px 3px 0px var(--grid-color)}.col-header input,.select-filter{width:40%;margin:11px 0 1px}.sel-fil-container{z-index:5}.edit-input-option-cont{left:0;right:0}.edit-input-opt button{width:100%;font-size:15px;padding:11px 0 11px 17px;text-align:left!important}.selfil-opt-contain,.edit-input-option-cont{overflow:auto;max-height:240px;border-radius:5px;position:absolute;background:#fff;box-shadow:0 1px 3px 1px var(--grid-color);-moz-box-shadow:0 1px 3px 1px var(--grid-color);-webkit-box-shadow:0 1px 3px 1px var(--grid-color)}.selfil-div,.edit-input-opt{cursor:pointer;text-align:left;border-bottom:1px solid var(--grid-color)}.selfil-div:hover,.edit-input-opt:hover{background:#ebebeb}.selfil-div:last-of-type,.edit-input-opt:last-of-type{border-bottom:none}.selfil-div label{width:calc(100% - 22px);font-size:15px;cursor:pointer;padding:11px;display:inline-block}.selfil-div label input[type=checkbox]{margin-right:11px;vertical-align:middle}.select-filter-comparator{width:36px;z-index:3;opacity:0;position:relative;margin:11px 0 1px 15px}.btn-fil-comp{top:2px;left:-36px;border:none;position:absolute;background:#fafafa}.btn-fil-comp i{color:var(--accent-color)}@media screen and (min-width:960px){.col-header input,.select-filter,.select-filter-comparator{margin-top:7px;margin-bottom:1px}}.data-cell{width:125px;padding:11px 6px 11px 17px;overflow:auto;font-size:15px;word-wrap:break-word;white-space:pre-line;vertical-align:top;box-sizing:border-box;display:inline-flex;align-items:center;border-right:1px solid var(--grid-color);border-bottom:1px solid var(--grid-color)}input.edit-input{border-radius:0}.data-cell:focus,input.edit-input:focus{outline:1px solid #00a8f3}.dragger-cell-focused{background:#00a8f333;border-left:1px solid #00a8f3;border-right:1px solid #00a8f3!important}.focused-cell-dragger{width:9px;height:9px;cursor:crosshair;position:absolute;background:#00a8f3;box-shadow:0 0 1px 1px var(--accent-color);-moz-box-shadow:0 0 1px 1px var(--accent-color);-webkit-box-shadow:0 0 1px 1px var(--accent-color)}.holding-check{padding-left:44px}.data-cell-riiight{padding:11px 17px 11px 6px;justify-content:right}.data-cell-ceeenter{padding:11px 6px;justify-content:center!important}.cell-og-link{line-height:0;visibility:hidden}.cell-og-link:before{visibility:visible;content:attr(data-title)}.moveable-col{cursor:col-resize!important}.moveable-row{cursor:row-resize!important}.data-sort-arr{cursor:pointer;margin-left:11px;border:none;background:none;padding:0 0 0 2px;color:var(--accent-color)}.data-sort-arr .material-icons{font-size:20px}.data-col-info{left:10px;top:12px;padding:0;border:none;cursor:pointer;background:none;position:absolute;color:var(--accent-color)}.data-col-info .material-icons{font-size:16px}.sort-order-indicator{font-weight:600;vertical-align:middle;font-size:16px}.btn-min-col{cursor:pointer;top:0;right:2px;font-size:20px;border:none;background:none;position:absolute;padding:0 2px 5px 0;color:var(--accent-color)}.btn-min-col-hide{z-index:0;visibility:hidden;pointer-events:none}.btn-freeze-col{float:left;border:none;cursor:pointer;background:none}.btn-freeze-col .material-icons{font-size:16px;color:var(--accent-color)}.hidden-cols{max-width:100%;overflow-x:auto;clear:both;white-space:nowrap;padding:17px 15px 5px 4px}.hidden-cols button:first-of-type:before{content:\"Hidden Columns\";font-size:12px;font-weight:600;padding-right:11px;vertical-align:middle}.col-header span{word-wrap:break-word;vertical-align:middle;font-size:var(--reg-font-size)}.o-ins-div span,.o-ins-div i{vertical-align:middle;font-size:16px}.aux-chip{text-align:center;padding-bottom:33px;word-wrap:break-word;white-space:pre-wrap}.insights{padding:17px 15px}.insight-field{min-height:100px;padding:21px 0;font-size:large;white-space:pre-wrap;word-wrap:break-word;border-bottom:1px solid lightgray}@media screen and (max-width:760px){.insight-field:first-of-type{padding-top:7px}}@media screen and (min-width:760px){.insight-field-row{border-bottom:1px solid lightgray}.insight-field,.aux-chip{width:50%;vertical-align:top;display:inline-block;border-bottom:none}}@media screen and (min-width:1024px){.insight-field,.aux-chip{width:33%}}.chart-label-cont{padding-top:10px;text-align:center}.pie-piece-label{padding-top:5px;margin-right:27px;display:inline-block}.pie-piece-label-sq{width:11px;height:11px;margin:0 0 0 2px;display:inline-block;vertical-align:middle}.pie-piece-label span{font-size:small}.pie-piece-label span:before{font-size:smaller;padding-right:4px;font-weight:600;content:attr(data-percent)}.pie-layover{border-radius:50%;background:#fff;position:absolute;padding:5px!important;display:flex;font-size:17px;align-items:center;overflow:hidden;box-sizing:border-box;justify-content:center;color:var(--accent-color)}.pie-layover div{font-weight:500;padding:0!important}.ins-even-dist-ct{font-size:24px;font-weight:500}.line-graph-container{padding:11px 0 33px 7px!important;box-sizing:border-box;margin-left:11px}.lg-title-cont{padding:0!important;text-align:center;margin:17px 11px}.lg-n-marker-cont{width:60px;position:relative;padding:0!important;box-sizing:border-box;display:inline-block;vertical-align:top}.lg-n-marker-cont:before{top:45%;left:-37px;display:block;position:absolute;white-space:nowrap;color:var(--grid-color);content:attr(data-column);transform:rotate(-90deg)}.lg-n-marker,.lg-n-marker-h{padding:0 11px 0 0!important;font-size:small;position:relative;text-align:right;white-space:nowrap;box-sizing:border-box}.line-graph{width:calc(92% - 60px);position:relative;box-sizing:border-box;display:inline-block;vertical-align:top;padding:0!important;border-left:1px solid var(--accent-color);border-bottom:1px solid var(--accent-color)}.lg-lbl-x{left:0;right:0;bottom:-45px;font-size:small;font-weight:500;text-align:center;position:absolute;padding:0!important}.btn-line-graph-opts{margin:0;padding:4px;background:none;border-top:1px solid var(--accent-color);border-left:1px solid var(--accent-color);border-bottom:1px solid var(--accent-color)}.sp-line-graph-title{margin-top:7px;font-size:large;text-decoration:underline}.lg-dt-marker,.lg-dt-marker-h,.vd-n-marker,.vd-n-marker-h{bottom:-22px;font-size:small;position:absolute;text-align:center;padding:0!important;display:inline-block;box-sizing:border-box}.lg-dt-marker-h,.vd-n-marker-h{visibility:hidden}.lg-dt-marker.visible-marker{margin-left:21px}.lg-n-marker-h{height:0;visibility:hidden}.visible-marker{z-index:2;font-weight:600;background:#fff;height:unset!important;padding:1px 2px!important;visibility:visible!important;box-shadow:0 0 2px 1px #afafaf;-moz-box-shadow:0 0 2px 1px #afafaf;-webkit-box-shadow:0 0 2px 1px #afafaf}.visible-marker:before{font-weight:600}.lg-dt-marker:before{top:-15px;left:0;content:\"|\";position:absolute}.vd-n-marker:before{top:-15px;left:50%;content:\"|\";left:calc(50% - 2px);position:absolute}.lg-n-marker:before{top:-4px;right:-3px;content:\"-\";font-weight:600;font-size:large;position:absolute;background:#fff}.btn-line-graph-opts:hover{background:#d6d6d6;transition:background .3s ease}.btn-line-graph-opts:last-of-type{border-right:1px solid var(--accent-color)}.btn-lg-sel{color:#fff!important;background:var(--accent-color);box-shadow:0 0 2px 1px #afafaf;-moz-box-shadow:0 0 2px 1px #afafaf;-webkit-box-shadow:0 0 2px 1px #afafaf}.btn-lg-sel:hover{background:var(--accent-color)}.lg-plot{height:8px;width:8px;opacity:.3;cursor:pointer;border-radius:50%;position:absolute;padding:0!important;background:var(--accent-color)}.lg-plot:hover{z-index:100;opacity:1!important}.lg-plot:hover:after{padding:3px;display:inline-block;font-size:small;border-radius:5px;margin:0 0 0 25px;font-weight:700;content:attr(data-number);background:#fff!important;box-shadow:0 0 2px 1px #afafaf;-moz-box-shadow:0 0 2px 1px #afafaf;-webkit-box-shadow:0 0 2px 1px #afafaf}.lg-plot-opq{opacity:0;background:#fff}.lg-plot-opq:hover{opacity:1!important;background:var(--grid-color);transition:opacity .2s ease}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:\"liga\";-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", type: DataCellComponent, isStandalone: true, selector: "app-data-cell", inputs: { text: "text", html: "html", minimized: "minimized", rawText: "rawText", cell: "cell", rowId: "rowId", colWid: "colWid", rowHeight: "rowHeight", noColResize: "noColResize", columnValClass: "columnValClass" }, outputs: { width: "width", height: "height", edit: "edit", dragListen: "dragListen", validateEditFocus: "validateEditFocus", clearVEditFocus: "clearVEditFocus" }, viewQueries: [{ propertyName: "cellElem", first: true, predicate: ["cellEl"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div #cellEl [attr.contenteditable]=\"canEdit\" [ngStyle]=\"cellStyle\" class=\"data-cell data-cell-{{elCol}}{{rightAlign}}{{symbolCls}}{{columnValClass}}\" \r\n[ngClass]=\"{ 'col-item-freeze': cell.freeze, 'col-header-minimized': minimized, 'holding-check': cell.column === dataTableService.firstCol }\"\r\n(mousemove)=\"tblDragService.checkItemBorderCursor($event, noColResize)\" (mousemove)=\"tblDragService.handleCellSizeAdjust($event, elCol)\"\r\n(mousedown)=\"tblDragService.handleCellSizeAdjust($event, elCol)\" (focus)=\"setCellToEdit()\" (blur)=\"emitEdit($event)\" [tabindex]=\"minimized ? -1 : 0\"\r\n[attr.data-index]=\"rowId\" (dblclick)=\"handleColResDblClick(cell.column)\" (keydown.tab)=\"checkValEditOpts($event)\" [textContent]=\"text\" [innerHTML]=\"html\"\r\n></div>", styles: [".data-cell.col-header-minimized{border-bottom:none!important;border-right:none!important}::ng-deep img{max-width:100px!important;height:auto;margin:0;vertical-align:middle}\n", "@charset \"UTF-8\";@font-face{font-family:Roboto Condensed;src:url(https://d2ffvluimla00s.cloudfront.net/RobotoCondensed-VariableFont_wght.ttf) format(\"ttf\")}@font-face{font-family:Material Icons;font-style:normal;font-weight:400;src:url(https://d2ffvluimla00s.cloudfront.net/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format(\"woff2\")}.deebo-data-grid-section{font-family:Roboto Condensed,Arial,Helvetica,sans-serif}:host{--accent-color:rgb(50, 50, 50);--grid-color:rgb(199, 199, 199);--pad-left-base: 33px;--row-num-width: 75px;--reg-font-size: 17px }.relly{position:relative}.hide{display:none!important;max-height:0;max-width:0;top:0;left:0;opacity:0}.ovy{overflow:auto}.no-ovy-y{overflow-y:hidden!important}.pad-top-sm{padding-top:4px!important}.pad-top-ten{padding-top:10px!important}.pad-top-teen{padding-top:17px}.pad-top-thirty,.pad-top-trey{padding-top:33px}.pad-top-much{padding-top:75px}.o-visible{overflow:visible}.dontwrap{white-space:nowrap}.inline-b{display:inline-block}.inline{display:inline}.half-wid{width:50%;vertical-align:top;display:inline-block}.qtr-wid{width:25%;vertical-align:top;display:inline-block}.third-wid{width:33.3%;vertical-align:top;display:inline-block}.two-third-wid{width:66.6%;vertical-align:top;display:inline-block}.three-qtr-wid{width:75%;vertical-align:top;display:inline-block}.v-top{vertical-align:top!important}.v-mid{vertical-align:middle!important}.v-bot{vertical-align:bottom!important}.lg-text{font-size:larger}.xlg-text{font-size:x-large!important}.md-text{font-size:var(--reg-font-size)!important}.small-text{font-size:small}.tiny-text{font-size:x-small}.invisible{visibility:hidden}.flex-center{display:flex;justify-content:center;align-items:center}.flex-item{flex:1 1 auto}.o-x-hidden{overflow-x:hidden!important}.no-weight{font-weight:400!important}.semi-heavy{font-weight:500!important}.heavy{font-weight:700!important}.marauto{margin:0 auto}.center{text-align:center}.left{text-align:left}.right{text-align:right}.btn-reset{border:none;color:#fff;padding:7px 11px;background:maroon}.error-message{color:maroon;font-weight:500}.success{color:green;font-weight:500}.neutral{color:var(--accent-color)}input,select{border:none;padding:4px;border-radius:3px;box-sizing:border-box;font-family:Roboto Condensed,Arial,Helvetica,sans-serif;box-shadow:0 0 1px 1px #afafaf;-moz-box-shadow:0 0 1px 1px #afafaf;-webkit-box-shadow:0 0 1px 1px #afafaf}input[type=radio],input[type=checkbox]{cursor:pointer;box-shadow:none!important;-moz-box-shadow:none!important;-webkit-box-shadow:none!important}button{cursor:pointer}button:focus,input:focus,select:focus,textarea:focus,a:focus{outline-width:0}button:disabled,input:disabled,select:disabled{opacity:.5;cursor:not-allowed}.prevent{opacity:.5;cursor:not-allowed;pointer-events:none}.controls{text-align:right;padding:16px 11px 6px 1px;max-width:100%;clear:both;overflow-x:auto;white-space:nowrap}.controls button{font-size:var(--reg-font-size);margin-right:31px;vertical-align:middle}.controls button span{vertical-align:middle}.controls button:last-of-type{margin-right:0}.data-table{margin-top:11px;overflow:hidden;box-shadow:0 -1px 3px 1px var(--grid-color);-moz-box-shadow:0 -1px 3px 1px var(--grid-color);-webkit-box-shadow:0 -1px 3px 1px var(--grid-color)}.sel-rows-checked{color:#00a8f399!important}.save-hilite{padding:2px 4px;border-radius:3px;background:#ebebeb;box-shadow:0 0 3px 1px var(--accent-color);-moz-box-shadow:0 0px 3px 1px var(--accent-color);-webkit-box-shadow:0 0px 3px 1px var(--accent-color)}.btn-ctrl-sel-rows,.btn-export-or-print{border:none;padding:3px 4px;border-radius:3px;background:#f5f5f5;vertical-align:middle;box-shadow:0 0 2px 1px var(--accent-color);-moz-box-shadow:0 0 2px 1px var(--accent-color);-webkit-box-shadow:0 0 2px 1px var(--accent-color)}.deebo-dd-contain-div:last-of-type{margin-right:0!important}.btn-export{width:100%;text-transform:uppercase}.btn-export:hover{text-decoration:underline}.btn-ctrl-sel-rows:hover,.btn-export-or-print:hover{background:#ebebeb;box-shadow:0 0 6px 2px gray;-moz-box-shadow:0 0 6px 2px gray;-webkit-box-shadow:0 0 6px 2px gray}.btn-center-selected{padding:2px 4px;border-radius:5px;background:#f5f5f5;box-shadow:0 0 6px 2px gray;-moz-box-shadow:0 0 6px 2px gray;-webkit-box-shadow:0 0 6px 2px gray}.btn-ctrl-sel-rows .material-icons{font-size:18px;font-weight:600;vertical-align:middle}.btn-ctrl-sel-rows .material-icons:not(.error-message){color:var(--accent-color)}.data-table-headers{cursor:pointer;white-space:nowrap;border-bottom:1px solid var(--grid-color)}.data-table-row{white-space:nowrap}.data-table-row:hover,.data-table-row .col-item-freeze:hover{background:#f3f3f3}.data-row-selected{background:#d6d6d6!important}.table-working{opacity:.1;pointer-events:none}.select-row-check{left:9px;z-index:10;cursor:pointer;margin:0;position:absolute;padding:0!important}.gb-row-num{left:2px;z-index:10;cursor:pointer;margin:0;font-size:x-small;position:absolute;padding:0!important}.mock-html{width:50%;height:18px;margin:0 auto;border-radius:11px;background:var(--grid-color)}.abs-right{top:7px;right:7px;position:absolute}.has-symbol:after{content:attr(data-symbol);padding-left:3px}.has-symbol-b:before{content:attr(data-symbol);padding-right:3px}.data-table-row-no-data{font-size:xx-large;color:gray;font-weight:500;text-shadow:-1px -1px var(--accent-color)}.data-row-selected .col-item-freeze,.data-row-selected .data-cell,.data-row-selected:hover,.data-row-selected .col-item-freeze:hover,.data-row-selected .data-cell:hover{background:#d6d6d6!important}.data-table-headers .col-item-freeze:first-of-type{border-bottom:1px solid var(--grid-color)}.col-header{z-index:2;width:125px;overflow:auto;cursor:grab;padding:7px 3px;text-align:center;position:relative;box-sizing:border-box;display:inline-block;vertical-align:top;white-space:pre-wrap;word-wrap:break-word;background:#fafafa;border-right:1px solid var(--grid-color)}.col-header button,.col-header span,.col-header select{cursor:pointer;vertical-align:middle}.col-header input{vertical-align:middle}.col-header-img-container{overflow-y:hidden;text-align:center;display:inline-block;vertical-align:middle;background-size:cover;background-position:center;background-repeat:no-repeat}.col-header-minimized{width:0!important;height:0!important;padding:0!important;overflow:hidden!important;border-bottom:none!important;border-right:none!important;transition:width .3s ease}.btn-maximize-col{border:none;border-radius:5px;background:#f5f5f5;box-shadow:0 0 3px 2px gray;font-size:var(--reg-font-size);margin-right:27px;padding:4px}.no-btn{border:none;background:none}.col-item-freeze{left:0;z-index:3;position:sticky;background:#fff;box-shadow:2px 0 3px 0 var(--grid-color);-moz-box-shadow:2px 0px 3px 0px var(--grid-color);-webkit-box-shadow:2px 0px 3px 0px var(--grid-color)}.col-header input,.select-filter{width:40%;margin:11px 0 1px}.sel-fil-container{z-index:5}.edit-input-option-cont{left:0;right:0}.edit-input-opt button{width:100%;font-size:15px;padding:11px 0 11px 17px;text-align:left!important}.selfil-opt-contain,.edit-input-option-cont{overflow:auto;max-height:240px;border-radius:5px;position:absolute;background:#fff;box-shadow:0 1px 3px 1px var(--grid-color);-moz-box-shadow:0 1px 3px 1px var(--grid-color);-webkit-box-shadow:0 1px 3px 1px var(--grid-color)}.selfil-div,.edit-input-opt{cursor:pointer;text-align:left;border-bottom:1px solid var(--grid-color)}.selfil-div:hover,.edit-input-opt:hover{background:#ebebeb}.selfil-div:last-of-type,.edit-input-opt:last-of-type{border-bottom:none}.selfil-div label{width:calc(100% - 22px);font-size:15px;cursor:pointer;padding:11px;display:inline-block}.selfil-div label input[type=checkbox]{margin-right:11px;vertical-align:middle}.select-filter-comparator{width:36px;z-index:3;opacity:0;position:relative;margin:11px 0 1px 15px}.btn-fil-comp{top:2px;left:-36px;border:none;position:absolute;background:#fafafa}.btn-fil-comp i{color:var(--accent-color)}@media screen and (min-width:960px){.col-header input,.select-filter,.select-filter-comparator{margin-top:7px;margin-bottom:1px}}.data-cell{width:125px;padding:11px 6px 11px 17px;overflow:auto;font-size:15px;word-wrap:break-word;white-space:pre-line;vertical-align:top;box-sizing:border-box;display:inline-flex;align-items:center;border-right:1px solid var(--grid-color);border-bottom:1px solid var(--grid-color)}input.edit-input{border-radius:0}.data-cell:focus,input.edit-input:focus{outline:1px solid #00a8f3}.dragger-cell-focused{background:#00a8f333;border-left:1px solid #00a8f3;border-right:1px solid #00a8f3!important}.focused-cell-dragger{width:9px;height:9px;cursor:crosshair;position:absolute;background:#00a8f3;box-shadow:0 0 1px 1px var(--accent-color);-moz-box-shadow:0 0 1px 1px var(--accent-color);-webkit-box-shadow:0 0 1px 1px var(--accent-color)}.holding-check{padding-left:44px}.data-cell-riiight{padding:11px 17px 11px 6px;justify-content:right}.data-cell-ceeenter{padding:11px 6px;justify-content:center!important}.cell-og-link{line-height:0;visibility:hidden}.cell-og-link:before{visibility:visible;content:attr(data-title)}.moveable-col{cursor:col-resize!important}.moveable-row{cursor:row-resize!important}.data-sort-arr{cursor:pointer;margin-left:11px;border:none;background:none;padding:0 0 0 2px;color:var(--accent-color)}.data-sort-arr .material-icons{font-size:20px}.data-col-info{left:10px;top:12px;padding:0;border:none;cursor:pointer;background:none;position:absolute;color:var(--accent-color)}.data-col-info .material-icons{font-size:16px}.sort-order-indicator{font-weight:600;vertical-align:middle;font-size:16px}.btn-min-col{cursor:pointer;top:0;right:2px;font-size:20px;border:none;background:none;position:absolute;padding:0 2px 5px 0;color:var(--accent-color)}.btn-min-col-hide{z-index:0;visibility:hidden;pointer-events:none}.btn-freeze-col{float:left;border:none;cursor:pointer;background:none}.btn-freeze-col .material-icons{font-size:16px;color:var(--accent-color)}.hidden-cols{max-width:100%;overflow-x:auto;clear:both;white-space:nowrap;padding:17px 15px 5px 4px}.hidden-cols button:first-of-type:before{content:\"Hidden Columns\";font-size:12px;font-weight:600;padding-right:11px;vertical-align:middle}.col-header span{word-wrap:break-word;vertical-align:middle;font-size:var(--reg-font-size)}.o-ins-div span,.o-ins-div i{vertical-align:middle;font-size:16px}.aux-chip{text-align:center;padding-bottom:33px;word-wrap:break-word;white-space:pre-wrap}.insights{padding:17px 15px}.insight-field{min-height:100px;padding:21px 0;font-size:large;white-space:pre-wrap;word-wrap:break-word;border-bottom:1px solid lightgray}@media screen and (max-width:760px){.insight-field:first-of-type{padding-top:7px}}@media screen and (min-width:760px){.insight-field-row{border-bottom:1px solid lightgray}.insight-field,.aux-chip{width:50%;vertical-align:top;display:inline-block;border-bottom:none}}@media screen and (min-width:1024px){.insight-field,.aux-chip{width:33%}}.chart-label-cont{padding-top:10px;text-align:center}.pie-piece-label{padding-top:5px;margin-right:27px;display:inline-block}.pie-piece-label-sq{width:11px;height:11px;margin:0 0 0 2px;display:inline-block;vertical-align:middle}.pie-piece-label span{font-size:small}.pie-piece-label span:before{font-size:smaller;padding-right:4px;font-weight:600;content:attr(data-percent)}.pie-layover{border-radius:50%;background:#fff;position:absolute;padding:5px!important;display:flex;font-size:17px;align-items:center;overflow:hidden;box-sizing:border-box;justify-content:center;color:var(--accent-color)}.pie-layover div{font-weight:500;padding:0!important}.ins-even-dist-ct{font-size:24px;font-weight:500}.line-graph-container{padding:11px 0 33px 7px!important;box-sizing:border-box;margin-left:11px}.lg-title-cont{padding:0!important;text-align:center;margin:17px 11px}.lg-n-marker-cont{width:60px;position:relative;padding:0!important;box-sizing:border-box;display:inline-block;vertical-align:top}.lg-n-marker-cont:before{top:45%;left:-37px;display:block;position:absolute;white-space:nowrap;color:var(--grid-color);content:attr(data-column);transform:rotate(-90deg)}.lg-n-marker,.lg-n-marker-h{padding:0 11px 0 0!important;font-size:small;position:relative;text-align:right;white-space:nowrap;box-sizing:border-box}.line-graph{width:calc(92% - 60px);position:relative;box-sizing:border-box;display:inline-block;vertical-align:top;padding:0!important;border-left:1px solid var(--accent-color);border-bottom:1px solid var(--accent-color)}.lg-lbl-x{left:0;right:0;bottom:-45px;font-size:small;font-weight:500;text-align:center;position:absolute;padding:0!important}.btn-line-graph-opts{margin:0;padding:4px;background:none;border-top:1px solid var(--accent-color);border-left:1px solid var(--accent-color);border-bottom:1px solid var(--accent-color)}.sp-line-graph-title{margin-top:7px;font-size:large;text-decoration:underline}.lg-dt-marker,.lg-dt-marker-h,.vd-n-marker,.vd-n-marker-h{bottom:-22px;font-size:small;position:absolute;text-align:center;padding:0!important;display:inline-block;box-sizing:border-box}.lg-dt-marker-h,.vd-n-marker-h{visibility:hidden}.lg-dt-marker.visible-marker{margin-left:21px}.lg-n-marker-h{height:0;visibility:hidden}.visible-marker{z-index:2;font-weight:600;background:#fff;height:unset!important;padding:1px 2px!important;visibility:visible!important;box-shadow:0 0 2px 1px #afafaf;-moz-box-shadow:0 0 2px 1px #afafaf;-webkit-box-shadow:0 0 2px 1px #afafaf}.visible-marker:before{font-weight:600}.lg-dt-marker:before{top:-15px;left:0;content:\"|\";position:absolute}.vd-n-marker:before{top:-15px;left:50%;content:\"|\";left:calc(50% - 2px);position:absolute}.lg-n-marker:before{top:-4px;right:-3px;content:\"-\";font-weight:600;font-size:large;position:absolute;background:#fff}.btn-line-graph-opts:hover{background:#d6d6d6;transition:background .3s ease}.btn-line-graph-opts:last-of-type{border-right:1px solid var(--accent-color)}.btn-lg-sel{color:#fff!important;background:var(--accent-color);box-shadow:0 0 2px 1px #afafaf;-moz-box-shadow:0 0 2px 1px #afafaf;-webkit-box-shadow:0 0 2px 1px #afafaf}.btn-lg-sel:hover{background:var(--accent-color)}.lg-plot{height:8px;width:8px;opacity:.3;cursor:pointer;border-radius:50%;position:absolute;padding:0!important;background:var(--accent-color)}.lg-plot:hover{z-index:100;opacity:1!important}.lg-plot:hover:after{padding:3px;display:inline-block;font-size:small;border-radius:5px;margin:0 0 0 25px;font-weight:700;content:attr(data-number);background:#fff!important;box-shadow:0 0 2px 1px #afafaf;-moz-box-shadow:0 0 2px 1px #afafaf;-webkit-box-shadow:0 0 2px 1px #afafaf}.lg-plot-opq{opacity:0;background:#fff}.lg-plot-opq:hover{opacity:1!important;background:var(--grid-color);transition:opacity .2s ease}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:\"liga\";-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: DataCellComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-data-cell', imports: [CommonModule], template: "<div #cellEl [attr.contenteditable]=\"canEdit\" [ngStyle]=\"cellStyle\" class=\"data-cell data-cell-{{elCol}}{{rightAlign}}{{symbolCls}}{{columnValClass}}\" \r\n[ngClass]=\"{ 'col-item-freeze': cell.freeze, 'col-header-minimized': cell.minimized, 'holding-check': cell.column === dataTableService.firstCol }\"\r\n(mousemove)=\"tblDragService.checkItemBorderCursor($event, noColResize)\" (mousemove)=\"tblDragService.handleCellSizeAdjust($event, elCol)\"\r\n(mousedown)=\"tblDragService.handleCellSizeAdjust($event, elCol)\" (focus)=\"setCellToEdit()\" (blur)=\"emitEdit($event)\" [tabindex]=\"cell.minimized ? -1 : 0\"\r\n[attr.data-index]=\"rowId\" (dblclick)=\"handleColResDblClick(cell.column)\" (keydown.tab)=\"checkValEditOpts($event)\"\r\n></div>", styles: [".data-cell.col-header-minimized{border-bottom:none!important;border-right:none!important}::ng-deep img{max-width:100px!important;height:auto;margin:0;vertical-align:middle}\n", "@charset \"UTF-8\";@font-face{font-family:Roboto Condensed;src:url(https://d2ffvluimla00s.cloudfront.net/RobotoCondensed-VariableFont_wght.ttf) format(\"ttf\")}@font-face{font-family:Material Icons;font-style:normal;font-weight:400;src:url(https://d2ffvluimla00s.cloudfront.net/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format(\"woff2\")}.deebo-data-grid-section{font-family:Roboto Condensed,Arial,Helvetica,sans-serif}:host{--accent-color:rgb(50, 50, 50);--grid-color:rgb(199, 199, 199);--pad-left-base: 33px;--row-num-width: 75px;--reg-font-size: 17px }.relly{position:relative}.hide{display:none!important;max-height:0;max-width:0;top:0;left:0;opacity:0}.ovy{overflow:auto}.no-ovy-y{overflow-y:hidden!important}.pad-top-sm{padding-top:4px!important}.pad-top-ten{padding-top:10px!important}.pad-top-teen{padding-top:17px}.pad-top-thirty,.pad-top-trey{padding-top:33px}.pad-top-much{padding-top:75px}.o-visible{overflow:visible}.dontwrap{white-space:nowrap}.inline-b{display:inline-block}.inline{display:inline}.half-wid{width:50%;vertical-align:top;display:inline-block}.qtr-wid{width:25%;vertical-align:top;display:inline-block}.third-wid{width:33.3%;vertical-align:top;display:inline-block}.two-third-wid{width:66.6%;vertical-align:top;display:inline-block}.three-qtr-wid{width:75%;vertical-align:top;display:inline-block}.v-top{vertical-align:top!important}.v-mid{vertical-align:middle!important}.v-bot{vertical-align:bottom!important}.lg-text{font-size:larger}.xlg-text{font-size:x-large!important}.md-text{font-size:var(--reg-font-size)!important}.small-text{font-size:small}.tiny-text{font-size:x-small}.invisible{visibility:hidden}.flex-center{display:flex;justify-content:center;align-items:center}.flex-item{flex:1 1 auto}.o-x-hidden{overflow-x:hidden!important}.no-weight{font-weight:400!important}.semi-heavy{font-weight:500!important}.heavy{font-weight:700!important}.marauto{margin:0 auto}.center{text-align:center}.left{text-align:left}.right{text-align:right}.btn-reset{border:none;color:#fff;padding:7px 11px;background:maroon}.error-message{color:maroon;font-weight:500}.success{color:green;font-weight:500}.neutral{color:var(--accent-color)}input,select{border:none;padding:4px;border-radius:3px;box-sizing:border-box;font-family:Roboto Condensed,Arial,Helvetica,sans-serif;box-shadow:0 0 1px 1px #afafaf;-moz-box-shadow:0 0 1px 1px #afafaf;-webkit-box-shadow:0 0 1px 1px #afafaf}input[type=radio],input[type=checkbox]{cursor:pointer;box-shadow:none!important;-moz-box-shadow:none!important;-webkit-box-shadow:none!important}button{cursor:pointer}button:focus,input:focus,select:focus,textarea:focus,a:focus{outline-width:0}button:disabled,input:disabled,select:disabled{opacity:.5;cursor:not-allowed}.prevent{opacity:.5;cursor:not-allowed;pointer-events:none}.controls{text-align:right;padding:16px 11px 6px 1px;max-width:100%;clear:both;overflow-x:auto;white-space:nowrap}.controls button{font-size:var(--reg-font-size);margin-right:31px;vertical-align:middle}.controls button span{vertical-align:middle}.controls button:last-of-type{margin-right:0}.data-table{margin-top:11px;overflow:hidden;box-shadow:0 -1px 3px 1px var(--grid-color);-moz-box-shadow:0 -1px 3px 1px var(--grid-color);-webkit-box-shadow:0 -1px 3px 1px var(--grid-color)}.sel-rows-checked{color:#00a8f399!important}.save-hilite{padding:2px 4px;border-radius:3px;background:#ebebeb;box-shadow:0 0 3px 1px var(--accent-color);-moz-box-shadow:0 0px 3px 1px var(--accent-color);-webkit-box-shadow:0 0px 3px 1px var(--accent-color)}.btn-ctrl-sel-rows,.btn-export-or-print{border:none;padding:3px 4px;border-radius:3px;background:#f5f5f5;vertical-align:middle;box-shadow:0 0 2px 1px var(--accent-color);-moz-box-shadow:0 0 2px 1px var(--accent-color);-webkit-box-shadow:0 0 2px 1px var(--accent-color)}.deebo-dd-contain-div:last-of-type{margin-right:0!important}.btn-export{width:100%;text-transform:uppercase}.btn-export:hover{text-decoration:underline}.btn-ctrl-sel-rows:hover,.btn-export-or-print:hover{background:#ebebeb;box-shadow:0 0 6px 2px gray;-moz-box-shadow:0 0 6px 2px gray;-webkit-box-shadow:0 0 6px 2px gray}.btn-center-selected{padding:2px 4px;border-radius:5px;background:#f5f5f5;box-shadow:0 0 6px 2px gray;-moz-box-shadow:0 0 6px 2px gray;-webkit-box-shadow:0 0 6px 2px gray}.btn-ctrl-sel-rows .material-icons{font-size:18px;font-weight:600;vertical-align:middle}.btn-ctrl-sel-rows .material-icons:not(.error-message){color:var(--accent-color)}.data-table-headers{cursor:pointer;white-space:nowrap;border-bottom:1px solid var(--grid-color)}.data-table-row{white-space:nowrap}.data-table-row:hover,.data-table-row .col-item-freeze:hover{background:#f3f3f3}.data-row-selected{background:#d6d6d6!important}.table-working{opacity:.1;pointer-events:none}.select-row-check{left:9px;z-index:10;cursor:pointer;margin:0;position:absolute;padding:0!important}.gb-row-num{left:2px;z-index:10;cursor:pointer;margin:0;font-size:x-small;position:absolute;padding:0!important}.mock-html{width:50%;height:18px;margin:0 auto;border-radius:11px;background:var(--grid-color)}.abs-right{top:7px;right:7px;position:absolute}.has-symbol:after{content:attr(data-symbol);padding-left:3px}.has-symbol-b:before{content:attr(data-symbol);padding-right:3px}.data-table-row-no-data{font-size:xx-large;color:gray;font-weight:500;text-shadow:-1px -1px var(--accent-color)}.data-row-selected .col-item-freeze,.data-row-selected .data-cell,.data-row-selected:hover,.data-row-selected .col-item-freeze:hover,.data-row-selected .data-cell:hover{background:#d6d6d6!important}.data-table-headers .col-item-freeze:first-of-type{border-bottom:1px solid var(--grid-color)}.col-header{z-index:2;width:125px;overflow:auto;cursor:grab;padding:7px 3px;text-align:center;position:relative;box-sizing:border-box;display:inline-block;vertical-align:top;white-space:pre-wrap;word-wrap:break-word;background:#fafafa;border-right:1px solid var(--grid-color)}.col-header button,.col-header span,.col-header select{cursor:pointer;vertical-align:middle}.col-header input{vertical-align:middle}.col-header-img-container{overflow-y:hidden;text-align:center;display:inline-block;vertical-align:middle;background-size:cover;background-position:center;background-repeat:no-repeat}.col-header-minimized{width:0!important;height:0!important;padding:0!important;overflow:hidden!important;border-bottom:none!important;border-right:none!important;transition:width .3s ease}.btn-maximize-col{border:none;border-radius:5px;background:#f5f5f5;box-shadow:0 0 3px 2px gray;font-size:var(--reg-font-size);margin-right:27px;padding:4px}.no-btn{border:none;background:none}.col-item-freeze{left:0;z-index:3;position:sticky;background:#fff;box-shadow:2px 0 3px 0 var(--grid-color);-moz-box-shadow:2px 0px 3px 0px var(--grid-color);-webkit-box-shadow:2px 0px 3px 0px var(--grid-color)}.col-header input,.select-filter{width:40%;margin:11px 0 1px}.sel-fil-container{z-index:5}.edit-input-option-cont{left:0;right:0}.edit-input-opt button{width:100%;font-size:15px;padding:11px 0 11px 17px;text-align:left!important}.selfil-opt-contain,.edit-input-option-cont{overflow:auto;max-height:240px;border-radius:5px;position:absolute;background:#fff;box-shadow:0 1px 3px 1px var(--grid-color);-moz-box-shadow:0 1px 3px 1px var(--grid-color);-webkit-box-shadow:0 1px 3px 1px var(--grid-color)}.selfil-div,.edit-input-opt{cursor:pointer;text-align:left;border-bottom:1px solid var(--grid-color)}.selfil-div:hover,.edit-input-opt:hover{background:#ebebeb}.selfil-div:last-of-type,.edit-input-opt:last-of-type{border-bottom:none}.selfil-div label{width:calc(100% - 22px);font-size:15px;cursor:pointer;padding:11px;display:inline-block}.selfil-div label input[type=checkbox]{margin-right:11px;vertical-align:middle}.select-filter-comparator{width:36px;z-index:3;opacity:0;position:relative;margin:11px 0 1px 15px}.btn-fil-comp{top:2px;left:-36px;border:none;position:absolute;background:#fafafa}.btn-fil-comp i{color:var(--accent-color)}@media screen and (min-width:960px){.col-header input,.select-filter,.select-filter-comparator{margin-top:7px;margin-bottom:1px}}.data-cell{width:125px;padding:11px 6px 11px 17px;overflow:auto;font-size:15px;word-wrap:break-word;white-space:pre-line;vertical-align:top;box-sizing:border-box;display:inline-flex;align-items:center;border-right:1px solid var(--grid-color);border-bottom:1px solid var(--grid-color)}input.edit-input{border-radius:0}.data-cell:focus,input.edit-input:focus{outline:1px solid #00a8f3}.dragger-cell-focused{background:#00a8f333;border-left:1px solid #00a8f3;border-right:1px solid #00a8f3!important}.focused-cell-dragger{width:9px;height:9px;cursor:crosshair;position:absolute;background:#00a8f3;box-shadow:0 0 1px 1px var(--accent-color);-moz-box-shadow:0 0 1px 1px var(--accent-color);-webkit-box-shadow:0 0 1px 1px var(--accent-color)}.holding-check{padding-left:44px}.data-cell-riiight{padding:11px 17px 11px 6px;justify-content:right}.data-cell-ceeenter{padding:11px 6px;justify-content:center!important}.cell-og-link{line-height:0;visibility:hidden}.cell-og-link:before{visibility:visible;content:attr(data-title)}.moveable-col{cursor:col-resize!important}.moveable-row{cursor:row-resize!important}.data-sort-arr{cursor:pointer;margin-left:11px;border:none;background:none;padding:0 0 0 2px;color:var(--accent-color)}.data-sort-arr .material-icons{font-size:20px}.data-col-info{left:10px;top:12px;padding:0;border:none;cursor:pointer;background:none;position:absolute;color:var(--accent-color)}.data-col-info .material-icons{font-size:16px}.sort-order-indicator{font-weight:600;vertical-align:middle;font-size:16px}.btn-min-col{cursor:pointer;top:0;right:2px;font-size:20px;border:none;background:none;position:absolute;padding:0 2px 5px 0;color:var(--accent-color)}.btn-min-col-hide{z-index:0;visibility:hidden;pointer-events:none}.btn-freeze-col{float:left;border:none;cursor:pointer;background:none}.btn-freeze-col .material-icons{font-size:16px;color:var(--accent-color)}.hidden-cols{max-width:100%;overflow-x:auto;clear:both;white-space:nowrap;padding:17px 15px 5px 4px}.hidden-cols button:first-of-type:before{content:\"Hidden Columns\";font-size:12px;font-weight:600;padding-right:11px;vertical-align:middle}.col-header span{word-wrap:break-word;vertical-align:middle;font-size:var(--reg-font-size)}.o-ins-div span,.o-ins-div i{vertical-align:middle;font-size:16px}.aux-chip{text-align:center;padding-bottom:33px;word-wrap:break-word;white-space:pre-wrap}.insights{padding:17px 15px}.insight-field{min-height:100px;padding:21px 0;font-size:large;white-space:pre-wrap;word-wrap:break-word;border-bottom:1px solid lightgray}@media screen and (max-width:760px){.insight-field:first-of-type{padding-top:7px}}@media screen and (min-width:760px){.insight-field-row{border-bottom:1px solid lightgray}.insight-field,.aux-chip{width:50%;vertical-align:top;display:inline-block;border-bottom:none}}@media screen and (min-width:1024px){.insight-field,.aux-chip{width:33%}}.chart-label-cont{padding-top:10px;text-align:center}.pie-piece-label{padding-top:5px;margin-right:27px;display:inline-block}.pie-piece-label-sq{width:11px;height:11px;margin:0 0 0 2px;display:inline-block;vertical-align:middle}.pie-piece-label span{font-size:small}.pie-piece-label span:before{font-size:smaller;padding-right:4px;font-weight:600;content:attr(data-percent)}.pie-layover{border-radius:50%;background:#fff;position:absolute;padding:5px!important;display:flex;font-size:17px;align-items:center;overflow:hidden;box-sizing:border-box;justify-content:center;color:var(--accent-color)}.pie-layover div{font-weight:500;padding:0!important}.ins-even-dist-ct{font-size:24px;font-weight:500}.line-graph-container{padding:11px 0 33px 7px!important;box-sizing:border-box;margin-left:11px}.lg-title-cont{padding:0!important;text-align:center;margin:17px 11px}.lg-n-marker-cont{width:60px;position:relative;padding:0!important;box-sizing:border-box;display:inline-block;vertical-align:top}.lg-n-marker-cont:before{top:45%;left:-37px;display:block;position:absolute;white-space:nowrap;color:var(--grid-color);content:attr(data-column);transform:rotate(-90deg)}.lg-n-marker,.lg-n-marker-h{padding:0 11px 0 0!important;font-size:small;position:relative;text-align:right;white-space:nowrap;box-sizing:border-box}.line-graph{width:calc(92% - 60px);position:relative;box-sizing:border-box;display:inline-block;vertical-align:top;padding:0!important;border-left:1px solid var(--accent-color);border-bottom:1px solid var(--accent-color)}.lg-lbl-x{left:0;right:0;bottom:-45px;font-size:small;font-weight:500;text-align:center;position:absolute;padding:0!important}.btn-line-graph-opts{margin:0;padding:4px;background:none;border-top:1px solid var(--accent-color);border-left:1px solid var(--accent-color);border-bottom:1px solid var(--accent-color)}.sp-line-graph-title{margin-top:7px;font-size:large;text-decoration:underline}.lg-dt-marker,.lg-dt-marker-h,.vd-n-marker,.vd-n-marker-h{bottom:-22px;font-size:small;position:absolute;text-align:center;padding:0!important;display:inline-block;box-sizing:border-box}.lg-dt-marker-h,.vd-n-marker-h{visibility:hidden}.lg-dt-marker.visible-marker{margin-left:21px}.lg-n-marker-h{height:0;visibility:hidden}.visible-marker{z-index:2;font-weight:600;background:#fff;height:unset!important;padding:1px 2px!important;visibility:visible!important;box-shadow:0 0 2px 1px #afafaf;-moz-box-shadow:0 0 2px 1px #afafaf;-webkit-box-shadow:0 0 2px 1px #afafaf}.visible-marker:before{font-weight:600}.lg-dt-marker:before{top:-15px;left:0;content:\"|\";position:absolute}.vd-n-marker:before{top:-15px;left:50%;content:\"|\";left:calc(50% - 2px);position:absolute}.lg-n-marker:before{top:-4px;right:-3px;content:\"-\";font-weight:600;font-size:large;position:absolute;background:#fff}.btn-line-graph-opts:hover{background:#d6d6d6;transition:background .3s ease}.btn-line-graph-opts:last-of-type{border-right:1px solid var(--accent-color)}.btn-lg-sel{color:#fff!important;background:var(--accent-color);box-shadow:0 0 2px 1px #afafaf;-moz-box-shadow:0 0 2px 1px #afafaf;-webkit-box-shadow:0 0 2px 1px #afafaf}.btn-lg-sel:hover{background:var(--accent-color)}.lg-plot{height:8px;width:8px;opacity:.3;cursor:pointer;border-radius:50%;position:absolute;padding:0!important;background:var(--accent-color)}.lg-plot:hover{z-index:100;opacity:1!important}.lg-plot:hover:after{padding:3px;display:inline-block;font-size:small;border-radius:5px;margin:0 0 0 25px;font-weight:700;content:attr(data-number);background:#fff!important;box-shadow:0 0 2px 1px #afafaf;-moz-box-shadow:0 0 2px 1px #afafaf;-webkit-box-shadow:0 0 2px 1px #afafaf}.lg-plot-opq{opacity:0;background:#fff}.lg-plot-opq:hover{opacity:1!important;background:var(--grid-color);transition:opacity .2s ease}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:\"liga\";-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}\n"] }]
-        }], ctorParameters: () => [{ type: TableDragService }, { type: DataTableService }, { type: CommonService }], propDecorators: { rawText: [{
+            args: [{ selector: 'app-data-cell', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #cellEl [attr.contenteditable]=\"canEdit\" [ngStyle]=\"cellStyle\" class=\"data-cell data-cell-{{elCol}}{{rightAlign}}{{symbolCls}}{{columnValClass}}\" \r\n[ngClass]=\"{ 'col-item-freeze': cell.freeze, 'col-header-minimized': minimized, 'holding-check': cell.column === dataTableService.firstCol }\"\r\n(mousemove)=\"tblDragService.checkItemBorderCursor($event, noColResize)\" (mousemove)=\"tblDragService.handleCellSizeAdjust($event, elCol)\"\r\n(mousedown)=\"tblDragService.handleCellSizeAdjust($event, elCol)\" (focus)=\"setCellToEdit()\" (blur)=\"emitEdit($event)\" [tabindex]=\"minimized ? -1 : 0\"\r\n[attr.data-index]=\"rowId\" (dblclick)=\"handleColResDblClick(cell.column)\" (keydown.tab)=\"checkValEditOpts($event)\" [textContent]=\"text\" [innerHTML]=\"html\"\r\n></div>", styles: [".data-cell.col-header-minimized{border-bottom:none!important;border-right:none!important}::ng-deep img{max-width:100px!important;height:auto;margin:0;vertical-align:middle}\n", "@charset \"UTF-8\";@font-face{font-family:Roboto Condensed;src:url(https://d2ffvluimla00s.cloudfront.net/RobotoCondensed-VariableFont_wght.ttf) format(\"ttf\")}@font-face{font-family:Material Icons;font-style:normal;font-weight:400;src:url(https://d2ffvluimla00s.cloudfront.net/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format(\"woff2\")}.deebo-data-grid-section{font-family:Roboto Condensed,Arial,Helvetica,sans-serif}:host{--accent-color:rgb(50, 50, 50);--grid-color:rgb(199, 199, 199);--pad-left-base: 33px;--row-num-width: 75px;--reg-font-size: 17px }.relly{position:relative}.hide{display:none!important;max-height:0;max-width:0;top:0;left:0;opacity:0}.ovy{overflow:auto}.no-ovy-y{overflow-y:hidden!important}.pad-top-sm{padding-top:4px!important}.pad-top-ten{padding-top:10px!important}.pad-top-teen{padding-top:17px}.pad-top-thirty,.pad-top-trey{padding-top:33px}.pad-top-much{padding-top:75px}.o-visible{overflow:visible}.dontwrap{white-space:nowrap}.inline-b{display:inline-block}.inline{display:inline}.half-wid{width:50%;vertical-align:top;display:inline-block}.qtr-wid{width:25%;vertical-align:top;display:inline-block}.third-wid{width:33.3%;vertical-align:top;display:inline-block}.two-third-wid{width:66.6%;vertical-align:top;display:inline-block}.three-qtr-wid{width:75%;vertical-align:top;display:inline-block}.v-top{vertical-align:top!important}.v-mid{vertical-align:middle!important}.v-bot{vertical-align:bottom!important}.lg-text{font-size:larger}.xlg-text{font-size:x-large!important}.md-text{font-size:var(--reg-font-size)!important}.small-text{font-size:small}.tiny-text{font-size:x-small}.invisible{visibility:hidden}.flex-center{display:flex;justify-content:center;align-items:center}.flex-item{flex:1 1 auto}.o-x-hidden{overflow-x:hidden!important}.no-weight{font-weight:400!important}.semi-heavy{font-weight:500!important}.heavy{font-weight:700!important}.marauto{margin:0 auto}.center{text-align:center}.left{text-align:left}.right{text-align:right}.btn-reset{border:none;color:#fff;padding:7px 11px;background:maroon}.error-message{color:maroon;font-weight:500}.success{color:green;font-weight:500}.neutral{color:var(--accent-color)}input,select{border:none;padding:4px;border-radius:3px;box-sizing:border-box;font-family:Roboto Condensed,Arial,Helvetica,sans-serif;box-shadow:0 0 1px 1px #afafaf;-moz-box-shadow:0 0 1px 1px #afafaf;-webkit-box-shadow:0 0 1px 1px #afafaf}input[type=radio],input[type=checkbox]{cursor:pointer;box-shadow:none!important;-moz-box-shadow:none!important;-webkit-box-shadow:none!important}button{cursor:pointer}button:focus,input:focus,select:focus,textarea:focus,a:focus{outline-width:0}button:disabled,input:disabled,select:disabled{opacity:.5;cursor:not-allowed}.prevent{opacity:.5;cursor:not-allowed;pointer-events:none}.controls{text-align:right;padding:16px 11px 6px 1px;max-width:100%;clear:both;overflow-x:auto;white-space:nowrap}.controls button{font-size:var(--reg-font-size);margin-right:31px;vertical-align:middle}.controls button span{vertical-align:middle}.controls button:last-of-type{margin-right:0}.data-table{margin-top:11px;overflow:hidden;box-shadow:0 -1px 3px 1px var(--grid-color);-moz-box-shadow:0 -1px 3px 1px var(--grid-color);-webkit-box-shadow:0 -1px 3px 1px var(--grid-color)}.sel-rows-checked{color:#00a8f399!important}.save-hilite{padding:2px 4px;border-radius:3px;background:#ebebeb;box-shadow:0 0 3px 1px var(--accent-color);-moz-box-shadow:0 0px 3px 1px var(--accent-color);-webkit-box-shadow:0 0px 3px 1px var(--accent-color)}.btn-ctrl-sel-rows,.btn-export-or-print{border:none;padding:3px 4px;border-radius:3px;background:#f5f5f5;vertical-align:middle;box-shadow:0 0 2px 1px var(--accent-color);-moz-box-shadow:0 0 2px 1px var(--accent-color);-webkit-box-shadow:0 0 2px 1px var(--accent-color)}.deebo-dd-contain-div:last-of-type{margin-right:0!important}.btn-export{width:100%;text-transform:uppercase}.btn-export:hover{text-decoration:underline}.btn-ctrl-sel-rows:hover,.btn-export-or-print:hover{background:#ebebeb;box-shadow:0 0 6px 2px gray;-moz-box-shadow:0 0 6px 2px gray;-webkit-box-shadow:0 0 6px 2px gray}.btn-center-selected{padding:2px 4px;border-radius:5px;background:#f5f5f5;box-shadow:0 0 6px 2px gray;-moz-box-shadow:0 0 6px 2px gray;-webkit-box-shadow:0 0 6px 2px gray}.btn-ctrl-sel-rows .material-icons{font-size:18px;font-weight:600;vertical-align:middle}.btn-ctrl-sel-rows .material-icons:not(.error-message){color:var(--accent-color)}.data-table-headers{cursor:pointer;white-space:nowrap;border-bottom:1px solid var(--grid-color)}.data-table-row{white-space:nowrap}.data-table-row:hover,.data-table-row .col-item-freeze:hover{background:#f3f3f3}.data-row-selected{background:#d6d6d6!important}.table-working{opacity:.1;pointer-events:none}.select-row-check{left:9px;z-index:10;cursor:pointer;margin:0;position:absolute;padding:0!important}.gb-row-num{left:2px;z-index:10;cursor:pointer;margin:0;font-size:x-small;position:absolute;padding:0!important}.mock-html{width:50%;height:18px;margin:0 auto;border-radius:11px;background:var(--grid-color)}.abs-right{top:7px;right:7px;position:absolute}.has-symbol:after{content:attr(data-symbol);padding-left:3px}.has-symbol-b:before{content:attr(data-symbol);padding-right:3px}.data-table-row-no-data{font-size:xx-large;color:gray;font-weight:500;text-shadow:-1px -1px var(--accent-color)}.data-row-selected .col-item-freeze,.data-row-selected .data-cell,.data-row-selected:hover,.data-row-selected .col-item-freeze:hover,.data-row-selected .data-cell:hover{background:#d6d6d6!important}.data-table-headers .col-item-freeze:first-of-type{border-bottom:1px solid var(--grid-color)}.col-header{z-index:2;width:125px;overflow:auto;cursor:grab;padding:7px 3px;text-align:center;position:relative;box-sizing:border-box;display:inline-block;vertical-align:top;white-space:pre-wrap;word-wrap:break-word;background:#fafafa;border-right:1px solid var(--grid-color)}.col-header button,.col-header span,.col-header select{cursor:pointer;vertical-align:middle}.col-header input{vertical-align:middle}.col-header-img-container{overflow-y:hidden;text-align:center;display:inline-block;vertical-align:middle;background-size:cover;background-position:center;background-repeat:no-repeat}.col-header-minimized{width:0!important;height:0!important;padding:0!important;overflow:hidden!important;border-bottom:none!important;border-right:none!important;transition:width .3s ease}.btn-maximize-col{border:none;border-radius:5px;background:#f5f5f5;box-shadow:0 0 3px 2px gray;font-size:var(--reg-font-size);margin-right:27px;padding:4px}.no-btn{border:none;background:none}.col-item-freeze{left:0;z-index:3;position:sticky;background:#fff;box-shadow:2px 0 3px 0 var(--grid-color);-moz-box-shadow:2px 0px 3px 0px var(--grid-color);-webkit-box-shadow:2px 0px 3px 0px var(--grid-color)}.col-header input,.select-filter{width:40%;margin:11px 0 1px}.sel-fil-container{z-index:5}.edit-input-option-cont{left:0;right:0}.edit-input-opt button{width:100%;font-size:15px;padding:11px 0 11px 17px;text-align:left!important}.selfil-opt-contain,.edit-input-option-cont{overflow:auto;max-height:240px;border-radius:5px;position:absolute;background:#fff;box-shadow:0 1px 3px 1px var(--grid-color);-moz-box-shadow:0 1px 3px 1px var(--grid-color);-webkit-box-shadow:0 1px 3px 1px var(--grid-color)}.selfil-div,.edit-input-opt{cursor:pointer;text-align:left;border-bottom:1px solid var(--grid-color)}.selfil-div:hover,.edit-input-opt:hover{background:#ebebeb}.selfil-div:last-of-type,.edit-input-opt:last-of-type{border-bottom:none}.selfil-div label{width:calc(100% - 22px);font-size:15px;cursor:pointer;padding:11px;display:inline-block}.selfil-div label input[type=checkbox]{margin-right:11px;vertical-align:middle}.select-filter-comparator{width:36px;z-index:3;opacity:0;position:relative;margin:11px 0 1px 15px}.btn-fil-comp{top:2px;left:-36px;border:none;position:absolute;background:#fafafa}.btn-fil-comp i{color:var(--accent-color)}@media screen and (min-width:960px){.col-header input,.select-filter,.select-filter-comparator{margin-top:7px;margin-bottom:1px}}.data-cell{width:125px;padding:11px 6px 11px 17px;overflow:auto;font-size:15px;word-wrap:break-word;white-space:pre-line;vertical-align:top;box-sizing:border-box;display:inline-flex;align-items:center;border-right:1px solid var(--grid-color);border-bottom:1px solid var(--grid-color)}input.edit-input{border-radius:0}.data-cell:focus,input.edit-input:focus{outline:1px solid #00a8f3}.dragger-cell-focused{background:#00a8f333;border-left:1px solid #00a8f3;border-right:1px solid #00a8f3!important}.focused-cell-dragger{width:9px;height:9px;cursor:crosshair;position:absolute;background:#00a8f3;box-shadow:0 0 1px 1px var(--accent-color);-moz-box-shadow:0 0 1px 1px var(--accent-color);-webkit-box-shadow:0 0 1px 1px var(--accent-color)}.holding-check{padding-left:44px}.data-cell-riiight{padding:11px 17px 11px 6px;justify-content:right}.data-cell-ceeenter{padding:11px 6px;justify-content:center!important}.cell-og-link{line-height:0;visibility:hidden}.cell-og-link:before{visibility:visible;content:attr(data-title)}.moveable-col{cursor:col-resize!important}.moveable-row{cursor:row-resize!important}.data-sort-arr{cursor:pointer;margin-left:11px;border:none;background:none;padding:0 0 0 2px;color:var(--accent-color)}.data-sort-arr .material-icons{font-size:20px}.data-col-info{left:10px;top:12px;padding:0;border:none;cursor:pointer;background:none;position:absolute;color:var(--accent-color)}.data-col-info .material-icons{font-size:16px}.sort-order-indicator{font-weight:600;vertical-align:middle;font-size:16px}.btn-min-col{cursor:pointer;top:0;right:2px;font-size:20px;border:none;background:none;position:absolute;padding:0 2px 5px 0;color:var(--accent-color)}.btn-min-col-hide{z-index:0;visibility:hidden;pointer-events:none}.btn-freeze-col{float:left;border:none;cursor:pointer;background:none}.btn-freeze-col .material-icons{font-size:16px;color:var(--accent-color)}.hidden-cols{max-width:100%;overflow-x:auto;clear:both;white-space:nowrap;padding:17px 15px 5px 4px}.hidden-cols button:first-of-type:before{content:\"Hidden Columns\";font-size:12px;font-weight:600;padding-right:11px;vertical-align:middle}.col-header span{word-wrap:break-word;vertical-align:middle;font-size:var(--reg-font-size)}.o-ins-div span,.o-ins-div i{vertical-align:middle;font-size:16px}.aux-chip{text-align:center;padding-bottom:33px;word-wrap:break-word;white-space:pre-wrap}.insights{padding:17px 15px}.insight-field{min-height:100px;padding:21px 0;font-size:large;white-space:pre-wrap;word-wrap:break-word;border-bottom:1px solid lightgray}@media screen and (max-width:760px){.insight-field:first-of-type{padding-top:7px}}@media screen and (min-width:760px){.insight-field-row{border-bottom:1px solid lightgray}.insight-field,.aux-chip{width:50%;vertical-align:top;display:inline-block;border-bottom:none}}@media screen and (min-width:1024px){.insight-field,.aux-chip{width:33%}}.chart-label-cont{padding-top:10px;text-align:center}.pie-piece-label{padding-top:5px;margin-right:27px;display:inline-block}.pie-piece-label-sq{width:11px;height:11px;margin:0 0 0 2px;display:inline-block;vertical-align:middle}.pie-piece-label span{font-size:small}.pie-piece-label span:before{font-size:smaller;padding-right:4px;font-weight:600;content:attr(data-percent)}.pie-layover{border-radius:50%;background:#fff;position:absolute;padding:5px!important;display:flex;font-size:17px;align-items:center;overflow:hidden;box-sizing:border-box;justify-content:center;color:var(--accent-color)}.pie-layover div{font-weight:500;padding:0!important}.ins-even-dist-ct{font-size:24px;font-weight:500}.line-graph-container{padding:11px 0 33px 7px!important;box-sizing:border-box;margin-left:11px}.lg-title-cont{padding:0!important;text-align:center;margin:17px 11px}.lg-n-marker-cont{width:60px;position:relative;padding:0!important;box-sizing:border-box;display:inline-block;vertical-align:top}.lg-n-marker-cont:before{top:45%;left:-37px;display:block;position:absolute;white-space:nowrap;color:var(--grid-color);content:attr(data-column);transform:rotate(-90deg)}.lg-n-marker,.lg-n-marker-h{padding:0 11px 0 0!important;font-size:small;position:relative;text-align:right;white-space:nowrap;box-sizing:border-box}.line-graph{width:calc(92% - 60px);position:relative;box-sizing:border-box;display:inline-block;vertical-align:top;padding:0!important;border-left:1px solid var(--accent-color);border-bottom:1px solid var(--accent-color)}.lg-lbl-x{left:0;right:0;bottom:-45px;font-size:small;font-weight:500;text-align:center;position:absolute;padding:0!important}.btn-line-graph-opts{margin:0;padding:4px;background:none;border-top:1px solid var(--accent-color);border-left:1px solid var(--accent-color);border-bottom:1px solid var(--accent-color)}.sp-line-graph-title{margin-top:7px;font-size:large;text-decoration:underline}.lg-dt-marker,.lg-dt-marker-h,.vd-n-marker,.vd-n-marker-h{bottom:-22px;font-size:small;position:absolute;text-align:center;padding:0!important;display:inline-block;box-sizing:border-box}.lg-dt-marker-h,.vd-n-marker-h{visibility:hidden}.lg-dt-marker.visible-marker{margin-left:21px}.lg-n-marker-h{height:0;visibility:hidden}.visible-marker{z-index:2;font-weight:600;background:#fff;height:unset!important;padding:1px 2px!important;visibility:visible!important;box-shadow:0 0 2px 1px #afafaf;-moz-box-shadow:0 0 2px 1px #afafaf;-webkit-box-shadow:0 0 2px 1px #afafaf}.visible-marker:before{font-weight:600}.lg-dt-marker:before{top:-15px;left:0;content:\"|\";position:absolute}.vd-n-marker:before{top:-15px;left:50%;content:\"|\";left:calc(50% - 2px);position:absolute}.lg-n-marker:before{top:-4px;right:-3px;content:\"-\";font-weight:600;font-size:large;position:absolute;background:#fff}.btn-line-graph-opts:hover{background:#d6d6d6;transition:background .3s ease}.btn-line-graph-opts:last-of-type{border-right:1px solid var(--accent-color)}.btn-lg-sel{color:#fff!important;background:var(--accent-color);box-shadow:0 0 2px 1px #afafaf;-moz-box-shadow:0 0 2px 1px #afafaf;-webkit-box-shadow:0 0 2px 1px #afafaf}.btn-lg-sel:hover{background:var(--accent-color)}.lg-plot{height:8px;width:8px;opacity:.3;cursor:pointer;border-radius:50%;position:absolute;padding:0!important;background:var(--accent-color)}.lg-plot:hover{z-index:100;opacity:1!important}.lg-plot:hover:after{padding:3px;display:inline-block;font-size:small;border-radius:5px;margin:0 0 0 25px;font-weight:700;content:attr(data-number);background:#fff!important;box-shadow:0 0 2px 1px #afafaf;-moz-box-shadow:0 0 2px 1px #afafaf;-webkit-box-shadow:0 0 2px 1px #afafaf}.lg-plot-opq{opacity:0;background:#fff}.lg-plot-opq:hover{opacity:1!important;background:var(--grid-color);transition:opacity .2s ease}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:\"liga\";-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}\n"] }]
+        }], ctorParameters: () => [{ type: TableDragService }, { type: DataTableService }, { type: CommonService }], propDecorators: { text: [{
+                type: Input
+            }], html: [{
+                type: Input
+            }], minimized: [{
+                type: Input
+            }], rawText: [{
                 type: Input
             }], cell: [{
                 type: Input
@@ -2298,15 +2327,8 @@ class RowGroupPanel {
     dataTableService;
     _cd;
     onWindowMouseUp(e) {
-        if (this.open()) {
-            setTimeout(() => {
-                const pEl = this.panelDataGrid?.nativeElement;
-                if (pEl) {
-                    pEl.scrollBy(0, 1);
-                    pEl.scrollBy(0, -1);
-                }
-            });
-        }
+        if (this.open())
+            this.handleScrlBarDrag();
     }
     init = true;
     count = 0;
@@ -2319,14 +2341,20 @@ class RowGroupPanel {
     panelData = [];
     tblTop = 0;
     tblBot = 0;
-    aboveHgt = 0;
-    belowHgt = 0;
+    aboveHgt = signal(0, ...(ngDevMode ? [{ debugName: "aboveHgt" }] : /* istanbul ignore next */ []));
+    belowHgt = signal(0, ...(ngDevMode ? [{ debugName: "belowHgt" }] : /* istanbul ignore next */ []));
     rowNums = [];
     changedIds = [];
     scrollDir = "down";
     lastElRowIndex = 0;
+    transY = signal(0, ...(ngDevMode ? [{ debugName: "transY" }] : /* istanbul ignore next */ []));
+    finishScrollTO = null;
+    valEditFocusTo = null;
     horizRest = input(0, ...(ngDevMode ? [{ debugName: "horizRest" }] : /* istanbul ignore next */ []));
     colOfInt = input("", ...(ngDevMode ? [{ debugName: "colOfInt" }] : /* istanbul ignore next */ []));
+    dtr = "";
+    rowElsPad = 1;
+    doRowsMod = 10;
     groupValue = "";
     useRowWid = "";
     maxCols = 0;
@@ -2355,6 +2383,7 @@ class RowGroupPanel {
         this.uiGroupValue = this.common.titleCase(this.groupValue);
         this.elifyGrouping = this.common.elifyCol(this.groupValue);
         this.count = this.dataTableService.currFilData.filter(d => d[this.dataTableService.currGroup] === this.groupValue).length;
+        this.dtr = this.common.elifyCol(this.groupValue) + "dataTableRow";
         this.dataTableService.gridScrollEndWhileGrouped.subscribe(e => { this.setTblBot(); });
         this.dataTableService.gridEventWhileGrouped.subscribe(e => {
             const nowOpen = this.open();
@@ -2366,17 +2395,17 @@ class RowGroupPanel {
             if (nowOpen)
                 setTimeout(() => { this.openGroup(); });
         }); //just close
-        this.dataTableService.mouseupWhileGrouped.subscribe(e => {
-            if (this.open()) {
-                setTimeout(() => {
-                    const pEl = this.panelDataGrid?.nativeElement;
-                    if (pEl) {
-                        pEl.scrollBy(0, 1);
-                        pEl.scrollBy(0, -1);
-                    }
-                });
-            }
-        });
+        // this.dataTableService.mouseupWhileGrouped.subscribe( e => {
+        //     if(this.open()){
+        //       setTimeout( () => { 
+        //         const pEl = this.panelDataGrid?.nativeElement
+        //         if(pEl){
+        //             pEl.scrollBy(0, 1);
+        //             pEl.scrollBy(0, -1);
+        //         }
+        //       } )
+        //     }
+        // })
         this.init = false;
     }
     openGroup() {
@@ -2385,16 +2414,16 @@ class RowGroupPanel {
             if (!this.open()) {
                 this.rows = [];
                 this.panelData = [];
-                this.aboveHgt = 0;
-                this.belowHgt = 0;
+                this.aboveHgt.set(0);
+                this.belowHgt.set(0);
                 this.rowNums = [];
             }
             else {
                 this.panelData = this.dataTableService.currFilData.filter(d => d[this.dataTableService.currGroup] === this.groupValue);
                 this.count = this.panelData.length;
                 let n = 0;
-                const defNum = parseInt(this.dataTableService.defltRHgt.replace(/[ ]?px/g, ""));
-                const init = Math.max(this.dataTableService.dTblHeight / defNum);
+                const defNum = this.dataTableService.defltRHgtNum;
+                const init = Math.max(400 / defNum) + this.rowElsPad;
                 const addCell = (text, prop, row, visible) => {
                     if (prop && row) {
                         const useProp = this.dataTableService.dataFilSrtTracker[prop];
@@ -2435,42 +2464,45 @@ class RowGroupPanel {
                         horizLim = this.columns.indexOf(lvis) + 1;
                     }
                 }
+                let localRows = [];
                 for (n; n < limit; n++) {
                     const item = this.panelData[n];
                     const index = this.dataTableService.currMapping[n] || this.dataTableService.findObjIndxInData(item);
                     if (index > -1) {
-                        this.rows.push({ id: "dataTableRow" + index, index: index, width: this.useRowWid, cells: [], height: this.dataTableService.defltRHgt });
+                        const row = { id: this.dtr + index, index: index, width: this.useRowWid, cells: [], height: this.dataTableService.defltRHgt };
                         let k = 0;
                         for (k; k < colLen; k++) {
                             const col = this.columns?.[k];
                             if (col)
-                                addCell(item[col], col, this.rows[n], (k <= horizLim));
+                                addCell(item[col], col, row, (k <= horizLim));
                         }
+                        localRows.push(row);
                     }
                 }
+                this.rows = [...localRows];
                 this.setLastRowIndex();
-                setTimeout(() => {
+                timer(250).subscribe(() => {
                     this.setRowNums();
                     if (this.count > init) {
                         let total = 0;
                         let z = this.lastElRowIndex + 1;
                         for (z; z < this.count; z++)
                             total += 1;
-                        this.belowHgt = total * defNum;
+                        this.belowHgt.set(total * defNum);
                     }
                     this.setHorizScrPos();
                     this.openEvt.emit("row-group-panel-" + this.elifyGrouping);
-                    setTimeout(() => {
+                    timer(0).subscribe(() => {
                         this.setTblBot();
-                        const pEl = this.panelDataGrid?.nativeElement;
-                        if (pEl) {
-                            pEl.scrollBy(1, 1);
-                            pEl.scrollBy(0, -1);
-                        }
+                        // const pEl = this.panelDataGrid?.nativeElement
+                        // if(pEl){
+                        //     pEl.scrollBy(1, 1);
+                        //     pEl.scrollBy(0, -1);
+                        // }
                         this.setRowNumPlacement();
                         this._cd.detectChanges();
                     });
-                }, 250);
+                });
             }
         });
     }
@@ -2489,8 +2521,7 @@ class RowGroupPanel {
     }
     setLastRowIndex() {
         const realMax = this.panelData.length - 1;
-        const defNum = parseInt(this.dataTableService.defltRHgt.replace(/[ ]?px/g, ""));
-        const wannabeMax = (this.rows.length - 1) + Math.floor(this.aboveHgt / defNum);
+        const wannabeMax = (this.rows.length - 1) + Math.floor(this.aboveHgt() / this.dataTableService.defltRHgtNum);
         this.lastElRowIndex = Math.min(wannabeMax, realMax);
         return this.lastElRowIndex;
     }
@@ -2538,7 +2569,7 @@ class RowGroupPanel {
                         if (rbds) {
                             const hh = (rbds.height / 2);
                             const top = Math.floor(((rbds.bottom - (hh + radd)) - tTop));
-                            num.style.top = top + "px";
+                            num.style.top = (top - this.transY()) + "px";
                             if (rbds.top < (tTop - 2) || (rbds.bottom > (tTop + tbds.height + 1)) || (dtBody.scrollLeft > 35 && !col1Frozen)) {
                                 num.classList.add("hide");
                                 continue;
@@ -2551,19 +2582,50 @@ class RowGroupPanel {
             }
         }
     }
+    handleScrlBarDrag() {
+        this.dataTableService.mouseIsDown = false;
+        if (!this.finishScrollTO) {
+            timer(0).subscribe(() => { this.completeScroll(); this.dataTableService.listenForScroll.set(true); });
+        }
+        else {
+            this.dataTableService.listenForScroll.set(true);
+        }
+    }
+    setAllRowsDefHgt() {
+        let i = 0;
+        const len = this.rows.length;
+        for (i; i < len; i++)
+            this.setSingleRowHgt(this.dataTableService.defltRHgtNum, this.rows[i].id, true);
+    }
+    completeScroll() {
+        this.isScrolling = false;
+        this.finishScrollTO = null;
+        const dtb = this.panelDataGrid?.nativeElement;
+        if (dtb) {
+            const lfs = this.dataTableService.listenForScroll();
+            this.execVertScrollUp(this.columns, this.columns.length, dtb.scrollTop, true);
+            this.execHorizScroll(dtb.scrollLeft);
+            this.handleScrollEnd();
+            if (lfs && this.rows.some(r => r.height !== this.dataTableService.defltRHgt))
+                this.setAllRowsDefHgt();
+            if (!lfs)
+                timer(0).subscribe(() => { this.dataTableService.listenForScroll.set(true); });
+        }
+    }
     handleScroll(event) {
         const top = event.target.scrollTop;
         const left = event.target.scrollLeft;
         /*horiz scroll*/
-        requestAnimationFrame(() => { this.execHorizScroll(left); });
+        this.execHorizScroll(left);
         /*horiz scroll*/
         /*vert scroll*/
-        if (top === this.verticalRest) {
-            this.isScrolling = false;
+        if (top === this.verticalRest || !this.dataTableService.listenForScroll())
             return this.setRowNumPlacement();
-        }
         this.isScrolling = true;
-        requestAnimationFrame(() => { this.execVertScroll(top); });
+        this.execVertScroll(top);
+        if (this.finishScrollTO)
+            this.finishScrollTO.unsubscribe();
+        this.finishScrollTO = timer(150).subscribe(() => { this.completeScroll(); });
         /*vert scroll*/
     }
     execHorizScroll(left, reverse) {
@@ -2574,26 +2636,27 @@ class RowGroupPanel {
             this.setColsOnVisScreen();
         }
     }
+    fixRowContainer(transY) {
+        this.transY.set(transY);
+    }
     execVertScroll(top) {
         if (top >= this.verticalRest) {
-            this.execVertScrollDown(this.columns, this.columns.length);
-            this.clearAboveFoldRows();
             this.scrollDir = "down";
+            this.execVertScrollDown(this.columns, this.columns.length, top);
         }
         else { //scrolling back up
-            this.execVertScrollUp(this.columns, this.columns.length);
-            this.clearBelowFoldRows();
             this.scrollDir = "up";
+            this.execVertScrollUp(this.columns, this.columns.length, top);
         }
         this.verticalRest = top;
-        this.setRowNumPlacement();
     }
     handleScrollEnd() {
+        this.fixRowContainer(0);
         this.isScrolling = false;
-        setTimeout(() => {
+        timer(0).subscribe(() => {
             this.setColsOnVisScreen();
             this.setRowNumPlacement();
-            setTimeout(() => { this.cleanUpPossibles(); this._cd.detectChanges(); });
+            timer(0).subscribe(() => { this.cleanUpPossibles(); });
         });
     }
     addCell(text, prop, visible) {
@@ -2615,6 +2678,23 @@ class RowGroupPanel {
             specialColClass: (colStyle ? (colStyle + this.common.elifyCol(useTxt.value)) : ""),
         };
     }
+    setCellsOnVertScroll(text, prop, row, vis) {
+        const useProp = this.dataTableService.dataFilSrtTracker[prop];
+        const notNum = (this.dataTableService.figureFilterType(prop) != "number" || /(year|yr|fy)/g.test(prop.toLocaleLowerCase())) ? true : false;
+        const useTxt = this.dataTableService.figureCellText(text, notNum, useProp["colCellSymbol"]);
+        const colStyle = this.dataTableService.getColumnStyle(prop);
+        row.cells = row.cells?.map(c => {
+            if (c.column === prop) {
+                c.visible = vis;
+                c.rawText = text;
+                c.specialColClass = (colStyle ? (colStyle + this.common.elifyCol(useTxt.value)) : "");
+                c.text = useTxt.prop === "textContent" ? useTxt.value : "";
+                c.html = useTxt.prop !== "textContent" ? useTxt.value : "";
+                return c;
+            }
+            return c;
+        });
+    }
     execHorizBodyScroll() {
         let i = 0;
         const clen = this.columns.length;
@@ -2661,11 +2741,11 @@ class RowGroupPanel {
                 }
             }
         }
-        setTimeout(() => {
+        timer(50).subscribe(() => {
             this.dataTableService.setIdealColumnWidth.next(true);
             this.setColsOnVisScreen();
-            setTimeout(() => { this.cleanUpPossibles(); }, 100);
-        }, 50);
+            timer(50).subscribe(() => { this.cleanUpPossibles(); });
+        });
     }
     cleanUpPossibles() {
         let i = 0;
@@ -2691,32 +2771,106 @@ class RowGroupPanel {
             }
         }
     }
-    execVertScrollDown(cols, colLen) {
-        let canAdd = 0;
-        const vlen = this.dataTableService.visibleCols.length;
-        const lastVisInd = this.columns.indexOf(this.dataTableService.visibleCols[(vlen - 1)]) + 1;
-        const bel = this.belowArea?.nativeElement;
-        const bbds = bel?.getBoundingClientRect();
-        if (!bbds)
-            return;
-        const rTop = (bbds?.top - this.verticalRest);
-        const gap = this.tblBot - rTop;
-        const defNum = parseInt(this.dataTableService.defltRHgt.replace(/[ ]?px/g, ""));
-        if (gap > 0) {
+    applyToDomRows(rows, rnums, cols, colLen, lastVisInd, dir, defNum, newRows) {
+        const len = this.rows.length;
+        let nrowsAcctFor = 0;
+        if (dir === "down") {
+            let i = 0;
+            let ahToAdd = 0;
+            let bhToSub = 0;
+            for (i; i < len; i++) {
+                const row = this.rows[i]; //move the top x num of dom rows to the bottom
+                const vrow = rows[i]; //{index: index, data: item}
+                if (vrow && vrow.index !== row.index) {
+                    const index = vrow.index;
+                    const doIt = index > -1;
+                    if (doIt) {
+                        for (let k = (colLen - 1); k >= 0; k--) {
+                            const col = cols[k];
+                            if (col)
+                                this.setCellsOnVertScroll(vrow.data[col], col, row, (k <= lastVisInd)); //prepend
+                        }
+                    }
+                    if (nrowsAcctFor < newRows) {
+                        ahToAdd += defNum;
+                        bhToSub += defNum;
+                    }
+                    if (doIt) {
+                        row.id = this.dtr + index;
+                        row.index = index;
+                    }
+                    nrowsAcctFor++;
+                }
+            }
+            if (ahToAdd)
+                this.aboveHgt.set((this.aboveHgt() + ahToAdd));
+            if (bhToSub)
+                this.belowHgt.set((this.belowHgt() - bhToSub));
+        }
+        else {
+            let v = 0;
+            const ulen = (len - 1);
+            let ahToSub = 0;
+            let bhToAdd = 0;
+            for (var o = ulen; o >= 0; o--) {
+                const row = this.rows[o];
+                const vrow = rows[v]; //{index: index, data: item}
+                if (vrow && vrow.index !== row.index) {
+                    const index = vrow.index;
+                    const doIt = index > -1;
+                    if (doIt) {
+                        for (let k = (colLen - 1); k >= 0; k--) {
+                            const col = cols[k];
+                            if (col)
+                                this.setCellsOnVertScroll(vrow.data[col], col, row, (k <= lastVisInd)); //prepend
+                        }
+                    }
+                    if (nrowsAcctFor < newRows) {
+                        ahToSub += defNum;
+                        bhToAdd += defNum;
+                    }
+                    if (doIt) {
+                        row.id = this.dtr + index;
+                        row.index = index;
+                    }
+                    nrowsAcctFor++;
+                }
+                v++;
+            }
+            if (ahToSub)
+                this.aboveHgt.set((this.aboveHgt() - ahToSub));
+            if (bhToAdd)
+                this.belowHgt.set((this.belowHgt() + bhToAdd));
+        }
+        this.rowNums = [...rnums];
+        this.finishApplyingDomRows();
+    }
+    getLastRowBot() {
+        const els = document.getElementsByClassName("rows-for-" + this.elifyGrouping);
+        return els[els.length - 1].getBoundingClientRect()?.bottom || this.tblBot;
+    }
+    execVertScrollDown(cols, colLen, currTop) {
+        let gap = this.tblBot - this.getLastRowBot();
+        this.fixRowContainer(gap);
+        timer(0).subscribe(() => {
             let h = 0;
+            let rows = [];
+            let canAdd = 0;
+            const maxRows = this.rows.length;
+            const doRows = (!this.isScrolling && (gap == 0 || !this.dataTableService.mouseIsDown)) || currTop % this.doRowsMod === 0;
+            const bel = this.belowArea.nativeElement;
+            const bbds = bel.getBoundingClientRect();
+            const btop = bbds.top;
+            const defNum = this.dataTableService.defltRHgtNum;
             let z = this.lastElRowIndex + 1;
-            const last = document.querySelector("#panelDataGrid" + this.elifyGrouping + " #dataTableRow" + this.lastElRowIndex);
-            if (last && this.dataTableService.elIsBelowFold(last, this.tblBot))
-                return;
             let bhToSub = 0;
             let ahToAdd = 0;
-            const rowsInGap = Math.ceil(gap / defNum);
-            canAdd = z + (rowsInGap);
             let numsToAdd = [];
-            let rowsToAdd = [];
+            const rowsInGap = Math.ceil(gap / defNum);
+            canAdd = z + rowsInGap;
             const goTo = Math.min(this.panelData.length, canAdd);
             for (z; z < goTo; z++) {
-                const wldBeElTop = bbds.top + (defNum * h);
+                const wldBeElTop = btop + (defNum * h);
                 const wldBeElBot = wldBeElTop + defNum;
                 if (wldBeElBot < this.tblTop) {
                     ahToAdd += defNum;
@@ -2725,54 +2879,54 @@ class RowGroupPanel {
                 else {
                     if (wldBeElTop <= this.tblBot) {
                         const item = this.panelData[z];
-                        const index = this.dataTableService.currMapping[z] || this.dataTableService.findObjIndxInData(item);
-                        if (index > -1 && !this.rows.find(r => r.index === index)) {
-                            const nRow = { id: "dataTableRow" + index, index: index, width: this.useRowWid, cells: [], height: this.dataTableService.defltRHgt };
-                            let k = 0;
-                            let cells = [];
-                            for (k; k < colLen; k++) {
-                                const col = cols[k];
-                                const cell = this.addCell(item[col], col, (k <= lastVisInd));
-                                if (typeof cell !== "string")
-                                    cells.push(cell);
-                            }
-                            nRow.cells = [...cells];
-                            rowsToAdd.push(nRow);
-                            numsToAdd.push((z + 1)); //just do it
-                            bhToSub += defNum;
-                        }
+                        const index = this.dataTableService.currMapping[z] || (doRows ? this.dataTableService.findObjIndxInData(item) : -1);
+                        if (rows.length < maxRows)
+                            rows.push({ index: index, data: item, elInd: z });
                     }
                 }
                 h += 1;
             }
-            if (rowsToAdd.length)
-                this.rows = [...this.rows, ...rowsToAdd];
             if (bhToSub)
-                this.belowHgt -= bhToSub;
-            if (this.showRowNumbers)
-                this.rowNums = [...this.rowNums, ...numsToAdd];
+                this.belowHgt.set((this.belowHgt() - bhToSub));
             if (ahToAdd)
-                this.aboveHgt += ahToAdd;
-            this.setLastRowIndex();
-        }
+                this.aboveHgt.set((this.aboveHgt() + ahToAdd));
+            const repl = [...rows].length; //only new rows
+            const needsToFill = maxRows - repl;
+            if (needsToFill) {
+                let f = !rows.length ? this.lastElRowIndex : (rows[0].elInd - 1);
+                let fgoto = f - needsToFill;
+                for (f; f > fgoto; f--) {
+                    const item = this.panelData[f];
+                    const index = this.dataTableService.currMapping[f] || (doRows ? this.dataTableService.findObjIndxInData(item) : -1);
+                    rows.unshift({ index: index, data: item, elInd: f });
+                }
+            }
+            numsToAdd = rows.map(r => (r.elInd + 1));
+            const vlen = this.dataTableService.visibleCols.length;
+            const lastVisInd = cols.indexOf(this.dataTableService.visibleCols[(vlen - 1)]) + 1;
+            this.applyToDomRows(rows, numsToAdd, cols, colLen, lastVisInd, "down", defNum, repl);
+        });
     }
-    execVertScrollUp(cols, colLen) {
-        const vlen = this.dataTableService.visibleCols.length;
-        const lastVisInd = this.columns.indexOf(this.dataTableService.visibleCols[(vlen - 1)]) + 1;
-        const ael = this.aboveArea?.nativeElement;
-        const abds = ael?.getBoundingClientRect();
-        const defNum = parseInt(this.dataTableService.defltRHgt.replace(/[ ]?px/g, ""));
-        const rbot = abds?.bottom || 0;
-        const gap = rbot - this.tblTop;
-        if (gap > 0) {
+    getFirstRowTop() {
+        return document.getElementsByClassName("rows-for-" + this.elifyGrouping)[0]?.getBoundingClientRect().top || this.tblTop;
+    }
+    execVertScrollUp(cols, colLen, currTop, force) {
+        let gap = this.getFirstRowTop() - this.tblTop;
+        this.fixRowContainer(-gap);
+        timer(0).subscribe(() => {
             let h = 0;
-            const rlen = this.rows.length;
-            let z = (this.lastElRowIndex - rlen);
-            if (z < 0)
-                return;
+            let rows = [];
+            const ael = this.aboveArea.nativeElement;
+            const abds = ael.getBoundingClientRect();
+            const rbot = abds.bottom;
+            const maxRows = this.rows.length;
+            const defNum = this.dataTableService.defltRHgtNum;
+            let z = (this.lastElRowIndex - maxRows);
             let bhToAdd = 0;
             let ahToSub = 0;
-            const rowsInGap = Math.ceil(gap / defNum);
+            let numsToAdd = [];
+            const doRows = force || (!this.isScrolling && (gap == 0 || !this.dataTableService.mouseIsDown)) || currTop % this.doRowsMod === 0;
+            const rowsInGap = Math.floor(gap / defNum);
             const min = Math.max(0, (z - rowsInGap));
             for (z; z >= min; z--) {
                 const wldBeElBot = rbot - (defNum * h);
@@ -2784,76 +2938,48 @@ class RowGroupPanel {
                 else {
                     if (wldBeElBot > this.tblTop) {
                         const item = this.panelData[z];
-                        const index = this.dataTableService.currMapping[z] || this.dataTableService.findObjIndxInData(item);
-                        if (index > -1) {
-                            let k = 0;
-                            const nRow = { id: "dataTableRow" + index, index: index, width: this.useRowWid, cells: [], height: this.dataTableService.defltRHgt };
-                            let cells = [];
-                            for (k; k < colLen; k++) {
-                                const col = cols[k];
-                                const cell = this.addCell(item[col], col, (k <= lastVisInd));
-                                if (typeof cell !== "string")
-                                    cells.push(cell);
-                            }
-                            nRow.cells = [...cells];
-                            this.rows = [nRow, ...this.rows];
-                            if (this.showRowNumbers)
-                                this.rowNums = [(z + 1), ...this.rowNums];
-                            ahToSub += defNum;
-                        }
+                        const index = this.dataTableService.currMapping[z] || (doRows ? this.dataTableService.findObjIndxInData(item) : -1);
+                        if (rows.length < maxRows)
+                            rows.push({ index: index, data: item, elInd: z });
                     }
                 }
                 h += 1;
             }
-            if (ahToSub) {
-                this.aboveHgt -= ahToSub;
-            }
+            if (ahToSub)
+                this.aboveHgt.set((this.aboveHgt() - ahToSub));
             if (bhToAdd)
-                this.belowHgt += bhToAdd;
-        }
-    }
-    clearAboveFoldRows() {
-        const els = this.rows.filter(r => this.dataTableService.elIsAboveFold(document.getElementById(r.id), this.tblTop));
-        const justids = els.map(e => e.id);
-        const changes = justids.length;
-        if (changes > 0) {
-            const justindx = els.map((e, i) => i);
-            const defNum = parseInt(this.dataTableService.defltRHgt.replace(/[ ]?px/g, ""));
-            this.rows = this.rows.filter(r => !justids.includes(r.id));
-            if (this.showRowNumbers)
-                this.rowNums = this.rowNums.filter((c, i) => !justindx.includes(i));
-            const item = this.dataTableService.mainData[(this.rows[0]?.index || -1)];
-            if (item)
-                this.aboveHgt = this.dataTableService.findObjIndxInData(item, this.panelData) * defNum;
-        }
-    }
-    clearBelowFoldRows() {
-        const els = this.rows.filter(r => this.dataTableService.elIsBelowFold(document.getElementById(r.id), this.tblBot));
-        const justids = els.map(e => e.id);
-        let changes = justids.length;
-        if (changes > 0) {
-            const defNum = parseInt(this.dataTableService.defltRHgt.replace(/[ ]?px/g, ""));
-            this.rows = this.rows.filter(r => !justids.includes(r.id));
-            if (this.showRowNumbers) {
-                for (let p = (changes - 1); p >= 0; p--)
-                    this.rowNums.pop();
+                this.belowHgt.set((this.belowHgt() + bhToAdd));
+            const repl = [...rows].length; //only new rows
+            const needsToFill = maxRows - repl;
+            if (needsToFill) {
+                let f = (!rows.length ? (this.lastElRowIndex - maxRows) : rows[0].elInd) + 1;
+                let fgoto = f + needsToFill;
+                for (f; f < fgoto; f++) {
+                    const item = this.panelData[f];
+                    const index = this.dataTableService.currMapping[f] || (doRows ? this.dataTableService.findObjIndxInData(item) : -1);
+                    rows.unshift({ index: index, data: item, elInd: f });
+                }
             }
-            const rlen = this.rows.length;
-            const item = this.dataTableService.mainData[(this.rows[(rlen - 1)]?.index || -1)];
-            if (item)
-                this.belowHgt = ((this.panelData.length - 1) - this.dataTableService.findObjIndxInData(item, this.panelData)) * defNum;
-            this.setLastRowIndex();
-        }
+            numsToAdd = rows.map(r => (r.elInd + 1)).sort((a, b) => a - b);
+            const vlen = this.dataTableService.visibleCols.length;
+            const lastVisInd = cols.indexOf(this.dataTableService.visibleCols[(vlen - 1)]) + 1;
+            this.applyToDomRows(rows, numsToAdd, cols, colLen, lastVisInd, "up", defNum, repl);
+        });
+    }
+    finishApplyingDomRows() {
+        this.setRowNumPlacement();
+        this.fixRowContainer(0);
+        this.setLastRowIndex();
     }
     //   execCellEdit(event: any) {//{ element: el, column: this.cell.column, value: val }
     //     this.cellEdit.emit(event)
     //   }
-    setSingleRowHgt(val, row) {
+    setSingleRowHgt(val, row, force) {
         if (val && typeof val === "string")
             val = Math.ceil(parseInt(val));
         const rHgt = val;
         const useHgt = Math.floor(rHgt) + "px";
-        if (typeof row === "string" && this.tblDragService.colDragStartFrmCellTracker.row && this.tblDragService.colDragStartFrmCellTracker.ystart) {
+        if (force || (typeof row === "string" && this.tblDragService.colDragStartFrmCellTracker.row && this.tblDragService.colDragStartFrmCellTracker.ystart)) {
             const drow = this.rows.find(r => r.id === row);
             if (drow)
                 drow.height = useHgt;
@@ -2861,11 +2987,11 @@ class RowGroupPanel {
         setTimeout(() => { this.setRowNumPlacement(); });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: RowGroupPanel, deps: [{ token: CommonService }, { token: TableDragService }, { token: DataTableService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: RowGroupPanel, isStandalone: true, selector: "app-row-group-panel", inputs: { horizRest: { classPropertyName: "horizRest", publicName: "horizRest", isSignal: true, isRequired: false, transformFunction: null }, colOfInt: { classPropertyName: "colOfInt", publicName: "colOfInt", isSignal: true, isRequired: false, transformFunction: null }, groupValue: { classPropertyName: "groupValue", publicName: "groupValue", isSignal: false, isRequired: false, transformFunction: null }, useRowWid: { classPropertyName: "useRowWid", publicName: "useRowWid", isSignal: false, isRequired: false, transformFunction: null }, maxCols: { classPropertyName: "maxCols", publicName: "maxCols", isSignal: false, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: false, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: false, isRequired: false, transformFunction: null }, showRowNumbers: { classPropertyName: "showRowNumbers", publicName: "showRowNumbers", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { openEvt: "openEvt", horizPos: "horizPos", cellEdit: "cellEdit" }, host: { listeners: { "window:mouseup": "onWindowMouseUp($event)" } }, viewQueries: [{ propertyName: "panelDataGrid", first: true, predicate: ["panelDataGrid"], descendants: true }, { propertyName: "aboveArea", first: true, predicate: ["aboveArea"], descendants: true }, { propertyName: "belowArea", first: true, predicate: ["belowArea"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"row-group-panel row-group-panel-{{elifyGrouping}}\" [ngClass]=\"{'open-panel': open(), 'hide': !count}\">\r\n    <button class=\"no-btn\" (click)=\"openGroup()\">\r\n        <span class=\"v-mid md-text\">{{uiGroupValue}} ({{count | number}})</span>&nbsp;\r\n        <i class=\"material-icons v-mid\" aria-hidden=\"false\">{{open() ? \"keyboard_arrow_down\" : \"chevron_right\"}}</i>\r\n    </button>\r\n</div>\r\n@if(showRowNumbers && open()){\r\n    <div class=\"relly\">\r\n        @for(num of rowNums; track $index){\r\n            <span class=\"gb-row-num row-nums-{{elifyGrouping}} invisible\" >{{num | number}}</span>\r\n        }\r\n    </div>\r\n}\r\n@if(open()){\r\n    <div #panelDataGrid [id]=\"'panelDataGrid' + elifyGrouping\" style=\"overflow: auto;margin-top: 3px\" class=\"group-panel-grid panel-height\"\r\n    (scroll)=\"handleScroll($event)\" (scrollend)=\"handleScrollEnd()\">\r\n        <div #aboveArea [style.height]=\"aboveHgt + 'px'\"></div>\r\n        @for(row of rows; track row.index){\r\n            <div [id]=\"row.id\" class=\"data-table-row rows-for-{{elifyGrouping}}\" [attr.data-index]=\"row.index\"\r\n                [ngStyle]=\"{'width': row.width, 'height': row.height}\" >\r\n                @for(cell of row.cells; track cell.column){\r\n                    @if(isScrolling){\r\n                        <div class=\"data-cell data-cell-{{common.elifyCol(cell.column)}}{{cell.specialColClass}}\" [class.data-cell-riiight]=\"cell.dataType === 'number'\"\r\n                        [ngClass]=\"{ 'col-item-freeze': cell.freeze, 'col-header-minimized': cell.minimized, 'holding-check': cell.column === dataTableService.firstCol }\"\r\n                        [ngStyle]=\"{'width': cell.width || dataTableService.useColWid, 'height': row.height}\" >{{cell.text}}@if(cell.html){<div class=\"mock-html\"></div>}</div>\r\n                    } @else {\r\n                        <app-data-cell\r\n                        [cell]=\"cell\" [rowId]=\"row.id\" \r\n                        [noColResize]=\"true\"\r\n                        [rawText]=\"cell.rawText\"\r\n                        [rowHeight]=\"row.height || ''\"\r\n                        [columnValClass]=\"cell.specialColClass\"\r\n                        [colWid]=\"cell.width || dataTableService.useColWid\"\r\n                        (height)=\"setSingleRowHgt($event, row.id)\"\r\n                        ></app-data-cell>\r\n                    }\r\n                }\r\n            </div>\r\n        }\r\n        <div #belowArea [style.height]=\"belowHgt + 'px'\"></div>\r\n        @if(!panelData.length){\r\n            <div \r\n            class=\"data-table-row panel-height flex-center data-table-row-no-data\" style=\"width: 100%; white-space: normal;\">\r\n                <div class=\"center\">Loading...</div>\r\n            </div>\r\n        }\r\n    </div>\r\n}\r\n", styles: [".row-group-panel{padding:17px 11px;border-bottom:1px dotted var(--accent-color)}.open-panel{box-shadow:0 1px 3px 1px var(--grid-color);-moz-box-shadow:0 1px 3px 1px var(--grid-color);-webkit-box-shadow:0 1px 3px 1px var(--grid-color)}.panel-height{min-height:400px;max-height:400px}\n", "@charset \"UTF-8\";@font-face{font-family:Roboto Condensed;src:url(https://d2ffvluimla00s.cloudfront.net/RobotoCondensed-VariableFont_wght.ttf) format(\"ttf\")}@font-face{font-family:Material Icons;font-style:normal;font-weight:400;src:url(https://d2ffvluimla00s.cloudfront.net/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format(\"woff2\")}.deebo-data-grid-section{font-family:Roboto Condensed,Arial,Helvetica,sans-serif}:host{--accent-color:rgb(50, 50, 50);--grid-color:rgb(199, 199, 199);--pad-left-base: 33px;--row-num-width: 75px;--reg-font-size: 17px }.relly{position:relative}.hide{display:none!important;max-height:0;max-width:0;top:0;left:0;opacity:0}.ovy{overflow:auto}.no-ovy-y{overflow-y:hidden!important}.pad-top-sm{padding-top:4px!important}.pad-top-ten{padding-top:10px!important}.pad-top-teen{padding-top:17px}.pad-top-thirty,.pad-top-trey{padding-top:33px}.pad-top-much{padding-top:75px}.o-visible{overflow:visible}.dontwrap{white-space:nowrap}.inline-b{display:inline-block}.inline{display:inline}.half-wid{width:50%;vertical-align:top;display:inline-block}.qtr-wid{width:25%;vertical-align:top;display:inline-block}.third-wid{width:33.3%;vertical-align:top;display:inline-block}.two-third-wid{width:66.6%;vertical-align:top;display:inline-block}.three-qtr-wid{width:75%;vertical-align:top;display:inline-block}.v-top{vertical-align:top!important}.v-mid{vertical-align:middle!important}.v-bot{vertical-align:bottom!important}.lg-text{font-size:larger}.xlg-text{font-size:x-large!important}.md-text{font-size:var(--reg-font-size)!important}.small-text{font-size:small}.tiny-text{font-size:x-small}.invisible{visibility:hidden}.flex-center{display:flex;justify-content:center;align-items:center}.flex-item{flex:1 1 auto}.o-x-hidden{overflow-x:hidden!important}.no-weight{font-weight:400!important}.semi-heavy{font-weight:500!important}.heavy{font-weight:700!important}.marauto{margin:0 auto}.center{text-align:center}.left{text-align:left}.right{text-align:right}.btn-reset{border:none;color:#fff;padding:7px 11px;background:maroon}.error-message{color:maroon;font-weight:500}.success{color:green;font-weight:500}.neutral{color:var(--accent-color)}input,select{border:none;padding:4px;border-radius:3px;box-sizing:border-box;font-family:Roboto Condensed,Arial,Helvetica,sans-serif;box-shadow:0 0 1px 1px #afafaf;-moz-box-shadow:0 0 1px 1px #afafaf;-webkit-box-shadow:0 0 1px 1px #afafaf}input[type=radio],input[type=checkbox]{cursor:pointer;box-shadow:none!important;-moz-box-shadow:none!important;-webkit-box-shadow:none!important}button{cursor:pointer}button:focus,input:focus,select:focus,textarea:focus,a:focus{outline-width:0}button:disabled,input:disabled,select:disabled{opacity:.5;cursor:not-allowed}.prevent{opacity:.5;cursor:not-allowed;pointer-events:none}.controls{text-align:right;padding:16px 11px 6px 1px;max-width:100%;clear:both;overflow-x:auto;white-space:nowrap}.controls button{font-size:var(--reg-font-size);margin-right:31px;vertical-align:middle}.controls button span{vertical-align:middle}.controls button:last-of-type{margin-right:0}.data-table{margin-top:11px;overflow:hidden;box-shadow:0 -1px 3px 1px var(--grid-color);-moz-box-shadow:0 -1px 3px 1px var(--grid-color);-webkit-box-shadow:0 -1px 3px 1px var(--grid-color)}.sel-rows-checked{color:#00a8f399!important}.save-hilite{padding:2px 4px;border-radius:3px;background:#ebebeb;box-shadow:0 0 3px 1px var(--accent-color);-moz-box-shadow:0 0px 3px 1px var(--accent-color);-webkit-box-shadow:0 0px 3px 1px var(--accent-color)}.btn-ctrl-sel-rows,.btn-export-or-print{border:none;padding:3px 4px;border-radius:3px;background:#f5f5f5;vertical-align:middle;box-shadow:0 0 2px 1px var(--accent-color);-moz-box-shadow:0 0 2px 1px var(--accent-color);-webkit-box-shadow:0 0 2px 1px var(--accent-color)}.deebo-dd-contain-div:last-of-type{margin-right:0!important}.btn-export{width:100%;text-transform:uppercase}.btn-export:hover{text-decoration:underline}.btn-ctrl-sel-rows:hover,.btn-export-or-print:hover{background:#ebebeb;box-shadow:0 0 6px 2px gray;-moz-box-shadow:0 0 6px 2px gray;-webkit-box-shadow:0 0 6px 2px gray}.btn-center-selected{padding:2px 4px;border-radius:5px;background:#f5f5f5;box-shadow:0 0 6px 2px gray;-moz-box-shadow:0 0 6px 2px gray;-webkit-box-shadow:0 0 6px 2px gray}.btn-ctrl-sel-rows .material-icons{font-size:18px;font-weight:600;vertical-align:middle}.btn-ctrl-sel-rows .material-icons:not(.error-message){color:var(--accent-color)}.data-table-headers{cursor:pointer;white-space:nowrap;border-bottom:1px solid var(--grid-color)}.data-table-row{white-space:nowrap}.data-table-row:hover,.data-table-row .col-item-freeze:hover{background:#f3f3f3}.data-row-selected{background:#d6d6d6!important}.table-working{opacity:.1;pointer-events:none}.select-row-check{left:9px;z-index:10;cursor:pointer;margin:0;position:absolute;padding:0!important}.gb-row-num{left:2px;z-index:10;cursor:pointer;margin:0;font-size:x-small;position:absolute;padding:0!important}.mock-html{width:50%;height:18px;margin:0 auto;border-radius:11px;background:var(--grid-color)}.abs-right{top:7px;right:7px;position:absolute}.has-symbol:after{content:attr(data-symbol);padding-left:3px}.has-symbol-b:before{content:attr(data-symbol);padding-right:3px}.data-table-row-no-data{font-size:xx-large;color:gray;font-weight:500;text-shadow:-1px -1px var(--accent-color)}.data-row-selected .col-item-freeze,.data-row-selected .data-cell,.data-row-selected:hover,.data-row-selected .col-item-freeze:hover,.data-row-selected .data-cell:hover{background:#d6d6d6!important}.data-table-headers .col-item-freeze:first-of-type{border-bottom:1px solid var(--grid-color)}.col-header{z-index:2;width:125px;overflow:auto;cursor:grab;padding:7px 3px;text-align:center;position:relative;box-sizing:border-box;display:inline-block;vertical-align:top;white-space:pre-wrap;word-wrap:break-word;background:#fafafa;border-right:1px solid var(--grid-color)}.col-header button,.col-header span,.col-header select{cursor:pointer;vertical-align:middle}.col-header input{vertical-align:middle}.col-header-img-container{overflow-y:hidden;text-align:center;display:inline-block;vertical-align:middle;background-size:cover;background-position:center;background-repeat:no-repeat}.col-header-minimized{width:0!important;height:0!important;padding:0!important;overflow:hidden!important;border-bottom:none!important;border-right:none!important;transition:width .3s ease}.btn-maximize-col{border:none;border-radius:5px;background:#f5f5f5;box-shadow:0 0 3px 2px gray;font-size:var(--reg-font-size);margin-right:27px;padding:4px}.no-btn{border:none;background:none}.col-item-freeze{left:0;z-index:3;position:sticky;background:#fff;box-shadow:2px 0 3px 0 var(--grid-color);-moz-box-shadow:2px 0px 3px 0px var(--grid-color);-webkit-box-shadow:2px 0px 3px 0px var(--grid-color)}.col-header input,.select-filter{width:40%;margin:11px 0 1px}.sel-fil-container{z-index:5}.edit-input-option-cont{left:0;right:0}.edit-input-opt button{width:100%;font-size:15px;padding:11px 0 11px 17px;text-align:left!important}.selfil-opt-contain,.edit-input-option-cont{overflow:auto;max-height:240px;border-radius:5px;position:absolute;background:#fff;box-shadow:0 1px 3px 1px var(--grid-color);-moz-box-shadow:0 1px 3px 1px var(--grid-color);-webkit-box-shadow:0 1px 3px 1px var(--grid-color)}.selfil-div,.edit-input-opt{cursor:pointer;text-align:left;border-bottom:1px solid var(--grid-color)}.selfil-div:hover,.edit-input-opt:hover{background:#ebebeb}.selfil-div:last-of-type,.edit-input-opt:last-of-type{border-bottom:none}.selfil-div label{width:calc(100% - 22px);font-size:15px;cursor:pointer;padding:11px;display:inline-block}.selfil-div label input[type=checkbox]{margin-right:11px;vertical-align:middle}.select-filter-comparator{width:36px;z-index:3;opacity:0;position:relative;margin:11px 0 1px 15px}.btn-fil-comp{top:2px;left:-36px;border:none;position:absolute;background:#fafafa}.btn-fil-comp i{color:var(--accent-color)}@media screen and (min-width:960px){.col-header input,.select-filter,.select-filter-comparator{margin-top:7px;margin-bottom:1px}}.data-cell{width:125px;padding:11px 6px 11px 17px;overflow:auto;font-size:15px;word-wrap:break-word;white-space:pre-line;vertical-align:top;box-sizing:border-box;display:inline-flex;align-items:center;border-right:1px solid var(--grid-color);border-bottom:1px solid var(--grid-color)}input.edit-input{border-radius:0}.data-cell:focus,input.edit-input:focus{outline:1px solid #00a8f3}.dragger-cell-focused{background:#00a8f333;border-left:1px solid #00a8f3;border-right:1px solid #00a8f3!important}.focused-cell-dragger{width:9px;height:9px;cursor:crosshair;position:absolute;background:#00a8f3;box-shadow:0 0 1px 1px var(--accent-color);-moz-box-shadow:0 0 1px 1px var(--accent-color);-webkit-box-shadow:0 0 1px 1px var(--accent-color)}.holding-check{padding-left:44px}.data-cell-riiight{padding:11px 17px 11px 6px;justify-content:right}.data-cell-ceeenter{padding:11px 6px;justify-content:center!important}.cell-og-link{line-height:0;visibility:hidden}.cell-og-link:before{visibility:visible;content:attr(data-title)}.moveable-col{cursor:col-resize!important}.moveable-row{cursor:row-resize!important}.data-sort-arr{cursor:pointer;margin-left:11px;border:none;background:none;padding:0 0 0 2px;color:var(--accent-color)}.data-sort-arr .material-icons{font-size:20px}.data-col-info{left:10px;top:12px;padding:0;border:none;cursor:pointer;background:none;position:absolute;color:var(--accent-color)}.data-col-info .material-icons{font-size:16px}.sort-order-indicator{font-weight:600;vertical-align:middle;font-size:16px}.btn-min-col{cursor:pointer;top:0;right:2px;font-size:20px;border:none;background:none;position:absolute;padding:0 2px 5px 0;color:var(--accent-color)}.btn-min-col-hide{z-index:0;visibility:hidden;pointer-events:none}.btn-freeze-col{float:left;border:none;cursor:pointer;background:none}.btn-freeze-col .material-icons{font-size:16px;color:var(--accent-color)}.hidden-cols{max-width:100%;overflow-x:auto;clear:both;white-space:nowrap;padding:17px 15px 5px 4px}.hidden-cols button:first-of-type:before{content:\"Hidden Columns\";font-size:12px;font-weight:600;padding-right:11px;vertical-align:middle}.col-header span{word-wrap:break-word;vertical-align:middle;font-size:var(--reg-font-size)}.o-ins-div span,.o-ins-div i{vertical-align:middle;font-size:16px}.aux-chip{text-align:center;padding-bottom:33px;word-wrap:break-word;white-space:pre-wrap}.insights{padding:17px 15px}.insight-field{min-height:100px;padding:21px 0;font-size:large;white-space:pre-wrap;word-wrap:break-word;border-bottom:1px solid lightgray}@media screen and (max-width:760px){.insight-field:first-of-type{padding-top:7px}}@media screen and (min-width:760px){.insight-field-row{border-bottom:1px solid lightgray}.insight-field,.aux-chip{width:50%;vertical-align:top;display:inline-block;border-bottom:none}}@media screen and (min-width:1024px){.insight-field,.aux-chip{width:33%}}.chart-label-cont{padding-top:10px;text-align:center}.pie-piece-label{padding-top:5px;margin-right:27px;display:inline-block}.pie-piece-label-sq{width:11px;height:11px;margin:0 0 0 2px;display:inline-block;vertical-align:middle}.pie-piece-label span{font-size:small}.pie-piece-label span:before{font-size:smaller;padding-right:4px;font-weight:600;content:attr(data-percent)}.pie-layover{border-radius:50%;background:#fff;position:absolute;padding:5px!important;display:flex;font-size:17px;align-items:center;overflow:hidden;box-sizing:border-box;justify-content:center;color:var(--accent-color)}.pie-layover div{font-weight:500;padding:0!important}.ins-even-dist-ct{font-size:24px;font-weight:500}.line-graph-container{padding:11px 0 33px 7px!important;box-sizing:border-box;margin-left:11px}.lg-title-cont{padding:0!important;text-align:center;margin:17px 11px}.lg-n-marker-cont{width:60px;position:relative;padding:0!important;box-sizing:border-box;display:inline-block;vertical-align:top}.lg-n-marker-cont:before{top:45%;left:-37px;display:block;position:absolute;white-space:nowrap;color:var(--grid-color);content:attr(data-column);transform:rotate(-90deg)}.lg-n-marker,.lg-n-marker-h{padding:0 11px 0 0!important;font-size:small;position:relative;text-align:right;white-space:nowrap;box-sizing:border-box}.line-graph{width:calc(92% - 60px);position:relative;box-sizing:border-box;display:inline-block;vertical-align:top;padding:0!important;border-left:1px solid var(--accent-color);border-bottom:1px solid var(--accent-color)}.lg-lbl-x{left:0;right:0;bottom:-45px;font-size:small;font-weight:500;text-align:center;position:absolute;padding:0!important}.btn-line-graph-opts{margin:0;padding:4px;background:none;border-top:1px solid var(--accent-color);border-left:1px solid var(--accent-color);border-bottom:1px solid var(--accent-color)}.sp-line-graph-title{margin-top:7px;font-size:large;text-decoration:underline}.lg-dt-marker,.lg-dt-marker-h,.vd-n-marker,.vd-n-marker-h{bottom:-22px;font-size:small;position:absolute;text-align:center;padding:0!important;display:inline-block;box-sizing:border-box}.lg-dt-marker-h,.vd-n-marker-h{visibility:hidden}.lg-dt-marker.visible-marker{margin-left:21px}.lg-n-marker-h{height:0;visibility:hidden}.visible-marker{z-index:2;font-weight:600;background:#fff;height:unset!important;padding:1px 2px!important;visibility:visible!important;box-shadow:0 0 2px 1px #afafaf;-moz-box-shadow:0 0 2px 1px #afafaf;-webkit-box-shadow:0 0 2px 1px #afafaf}.visible-marker:before{font-weight:600}.lg-dt-marker:before{top:-15px;left:0;content:\"|\";position:absolute}.vd-n-marker:before{top:-15px;left:50%;content:\"|\";left:calc(50% - 2px);position:absolute}.lg-n-marker:before{top:-4px;right:-3px;content:\"-\";font-weight:600;font-size:large;position:absolute;background:#fff}.btn-line-graph-opts:hover{background:#d6d6d6;transition:background .3s ease}.btn-line-graph-opts:last-of-type{border-right:1px solid var(--accent-color)}.btn-lg-sel{color:#fff!important;background:var(--accent-color);box-shadow:0 0 2px 1px #afafaf;-moz-box-shadow:0 0 2px 1px #afafaf;-webkit-box-shadow:0 0 2px 1px #afafaf}.btn-lg-sel:hover{background:var(--accent-color)}.lg-plot{height:8px;width:8px;opacity:.3;cursor:pointer;border-radius:50%;position:absolute;padding:0!important;background:var(--accent-color)}.lg-plot:hover{z-index:100;opacity:1!important}.lg-plot:hover:after{padding:3px;display:inline-block;font-size:small;border-radius:5px;margin:0 0 0 25px;font-weight:700;content:attr(data-number);background:#fff!important;box-shadow:0 0 2px 1px #afafaf;-moz-box-shadow:0 0 2px 1px #afafaf;-webkit-box-shadow:0 0 2px 1px #afafaf}.lg-plot-opq{opacity:0;background:#fff}.lg-plot-opq:hover{opacity:1!important;background:var(--grid-color);transition:opacity .2s ease}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:\"liga\";-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: DataCellComponent, selector: "app-data-cell", inputs: ["rawText", "cell", "rowId", "colWid", "rowHeight", "noColResize", "columnValClass"], outputs: ["width", "height", "edit", "dragListen", "validateEditFocus", "clearVEditFocus"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: RowGroupPanel, isStandalone: true, selector: "app-row-group-panel", inputs: { horizRest: { classPropertyName: "horizRest", publicName: "horizRest", isSignal: true, isRequired: false, transformFunction: null }, colOfInt: { classPropertyName: "colOfInt", publicName: "colOfInt", isSignal: true, isRequired: false, transformFunction: null }, groupValue: { classPropertyName: "groupValue", publicName: "groupValue", isSignal: false, isRequired: false, transformFunction: null }, useRowWid: { classPropertyName: "useRowWid", publicName: "useRowWid", isSignal: false, isRequired: false, transformFunction: null }, maxCols: { classPropertyName: "maxCols", publicName: "maxCols", isSignal: false, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: false, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: false, isRequired: false, transformFunction: null }, showRowNumbers: { classPropertyName: "showRowNumbers", publicName: "showRowNumbers", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { openEvt: "openEvt", horizPos: "horizPos", cellEdit: "cellEdit" }, host: { listeners: { "window:mouseup": "onWindowMouseUp($event)" } }, viewQueries: [{ propertyName: "panelDataGrid", first: true, predicate: ["panelDataGrid"], descendants: true }, { propertyName: "aboveArea", first: true, predicate: ["aboveArea"], descendants: true }, { propertyName: "belowArea", first: true, predicate: ["belowArea"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"row-group-panel row-group-panel-{{elifyGrouping}}\" [ngClass]=\"{'open-panel': open(), 'hide': !count}\">\r\n    <button class=\"no-btn\" (click)=\"openGroup()\">\r\n        <span class=\"v-mid md-text\">{{uiGroupValue}} ({{count | number}})</span>&nbsp;\r\n        <i class=\"material-icons v-mid\" aria-hidden=\"false\">{{open() ? \"keyboard_arrow_down\" : \"chevron_right\"}}</i>\r\n    </button>\r\n</div>\r\n@if(showRowNumbers && open()){\r\n    <div class=\"relly\">\r\n        @for(num of rowNums; track $index){\r\n            <span class=\"gb-row-num row-nums-{{elifyGrouping}} invisible\" >{{num | number}}</span>\r\n        }\r\n    </div>\r\n}\r\n@if(open()){\r\n    <div #panelDataGrid [id]=\"'panelDataGrid' + elifyGrouping\" style=\"overflow: auto;margin-top: 3px\" class=\"group-panel-grid panel-height\"\r\n    (scroll)=\"handleScroll($event)\" (scrollend)=\"handleScrollEnd()\">\r\n        <div #aboveArea [ngStyle]=\"{'height': aboveHgt() + 'px', 'width': useRowWid}\"></div>\r\n        <div [style.transform]=\"'translateY('+transY()+'px)'\">\r\n            @for(row of rows; track $index){\r\n                <div [id]=\"row.id\" class=\"data-table-row rows-for-{{elifyGrouping}}\" [attr.data-index]=\"row.index\"\r\n                    [ngStyle]=\"{'width': row.width, 'height': row.height}\" >\r\n                    @for(cell of row.cells; track cell.column){\r\n                        <app-data-cell\r\n                        [cell]=\"cell\" [rowId]=\"row.id\" \r\n                        [noColResize]=\"true\"\r\n                        [text]=\"cell.text || ''\"\r\n                        [html]=\"cell.html || ''\"\r\n                        [rawText]=\"cell.rawText\"\r\n                        [minimized]=\"cell.minimized\"\r\n                        [rowHeight]=\"row.height || ''\"\r\n                        [columnValClass]=\"cell.specialColClass\"\r\n                        [colWid]=\"cell.width || dataTableService.useColWid\"\r\n                        (height)=\"setSingleRowHgt($event, row.id)\"\r\n                        ></app-data-cell>\r\n                    }\r\n                </div>\r\n            }\r\n        </div>\r\n        <div #belowArea [ngStyle]=\"{'height': belowHgt() + 'px', 'width': useRowWid}\"></div>\r\n        @if(!panelData.length){\r\n            <div \r\n            class=\"data-table-row panel-height flex-center data-table-row-no-data\" style=\"width: 100%; white-space: normal;\">\r\n                <div class=\"center\">Loading...</div>\r\n            </div>\r\n        }\r\n    </div>\r\n}\r\n", styles: [".row-group-panel{padding:17px 11px;border-bottom:1px dotted var(--accent-color)}.open-panel{box-shadow:0 1px 3px 1px var(--grid-color);-moz-box-shadow:0 1px 3px 1px var(--grid-color);-webkit-box-shadow:0 1px 3px 1px var(--grid-color)}.panel-height{min-height:400px;max-height:400px;border-bottom:1px dotted var(--accent-color)}\n", "@charset \"UTF-8\";@font-face{font-family:Roboto Condensed;src:url(https://d2ffvluimla00s.cloudfront.net/RobotoCondensed-VariableFont_wght.ttf) format(\"ttf\")}@font-face{font-family:Material Icons;font-style:normal;font-weight:400;src:url(https://d2ffvluimla00s.cloudfront.net/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format(\"woff2\")}.deebo-data-grid-section{font-family:Roboto Condensed,Arial,Helvetica,sans-serif}:host{--accent-color:rgb(50, 50, 50);--grid-color:rgb(199, 199, 199);--pad-left-base: 33px;--row-num-width: 75px;--reg-font-size: 17px }.relly{position:relative}.hide{display:none!important;max-height:0;max-width:0;top:0;left:0;opacity:0}.ovy{overflow:auto}.no-ovy-y{overflow-y:hidden!important}.pad-top-sm{padding-top:4px!important}.pad-top-ten{padding-top:10px!important}.pad-top-teen{padding-top:17px}.pad-top-thirty,.pad-top-trey{padding-top:33px}.pad-top-much{padding-top:75px}.o-visible{overflow:visible}.dontwrap{white-space:nowrap}.inline-b{display:inline-block}.inline{display:inline}.half-wid{width:50%;vertical-align:top;display:inline-block}.qtr-wid{width:25%;vertical-align:top;display:inline-block}.third-wid{width:33.3%;vertical-align:top;display:inline-block}.two-third-wid{width:66.6%;vertical-align:top;display:inline-block}.three-qtr-wid{width:75%;vertical-align:top;display:inline-block}.v-top{vertical-align:top!important}.v-mid{vertical-align:middle!important}.v-bot{vertical-align:bottom!important}.lg-text{font-size:larger}.xlg-text{font-size:x-large!important}.md-text{font-size:var(--reg-font-size)!important}.small-text{font-size:small}.tiny-text{font-size:x-small}.invisible{visibility:hidden}.flex-center{display:flex;justify-content:center;align-items:center}.flex-item{flex:1 1 auto}.o-x-hidden{overflow-x:hidden!important}.no-weight{font-weight:400!important}.semi-heavy{font-weight:500!important}.heavy{font-weight:700!important}.marauto{margin:0 auto}.center{text-align:center}.left{text-align:left}.right{text-align:right}.btn-reset{border:none;color:#fff;padding:7px 11px;background:maroon}.error-message{color:maroon;font-weight:500}.success{color:green;font-weight:500}.neutral{color:var(--accent-color)}input,select{border:none;padding:4px;border-radius:3px;box-sizing:border-box;font-family:Roboto Condensed,Arial,Helvetica,sans-serif;box-shadow:0 0 1px 1px #afafaf;-moz-box-shadow:0 0 1px 1px #afafaf;-webkit-box-shadow:0 0 1px 1px #afafaf}input[type=radio],input[type=checkbox]{cursor:pointer;box-shadow:none!important;-moz-box-shadow:none!important;-webkit-box-shadow:none!important}button{cursor:pointer}button:focus,input:focus,select:focus,textarea:focus,a:focus{outline-width:0}button:disabled,input:disabled,select:disabled{opacity:.5;cursor:not-allowed}.prevent{opacity:.5;cursor:not-allowed;pointer-events:none}.controls{text-align:right;padding:16px 11px 6px 1px;max-width:100%;clear:both;overflow-x:auto;white-space:nowrap}.controls button{font-size:var(--reg-font-size);margin-right:31px;vertical-align:middle}.controls button span{vertical-align:middle}.controls button:last-of-type{margin-right:0}.data-table{margin-top:11px;overflow:hidden;box-shadow:0 -1px 3px 1px var(--grid-color);-moz-box-shadow:0 -1px 3px 1px var(--grid-color);-webkit-box-shadow:0 -1px 3px 1px var(--grid-color)}.sel-rows-checked{color:#00a8f399!important}.save-hilite{padding:2px 4px;border-radius:3px;background:#ebebeb;box-shadow:0 0 3px 1px var(--accent-color);-moz-box-shadow:0 0px 3px 1px var(--accent-color);-webkit-box-shadow:0 0px 3px 1px var(--accent-color)}.btn-ctrl-sel-rows,.btn-export-or-print{border:none;padding:3px 4px;border-radius:3px;background:#f5f5f5;vertical-align:middle;box-shadow:0 0 2px 1px var(--accent-color);-moz-box-shadow:0 0 2px 1px var(--accent-color);-webkit-box-shadow:0 0 2px 1px var(--accent-color)}.deebo-dd-contain-div:last-of-type{margin-right:0!important}.btn-export{width:100%;text-transform:uppercase}.btn-export:hover{text-decoration:underline}.btn-ctrl-sel-rows:hover,.btn-export-or-print:hover{background:#ebebeb;box-shadow:0 0 6px 2px gray;-moz-box-shadow:0 0 6px 2px gray;-webkit-box-shadow:0 0 6px 2px gray}.btn-center-selected{padding:2px 4px;border-radius:5px;background:#f5f5f5;box-shadow:0 0 6px 2px gray;-moz-box-shadow:0 0 6px 2px gray;-webkit-box-shadow:0 0 6px 2px gray}.btn-ctrl-sel-rows .material-icons{font-size:18px;font-weight:600;vertical-align:middle}.btn-ctrl-sel-rows .material-icons:not(.error-message){color:var(--accent-color)}.data-table-headers{cursor:pointer;white-space:nowrap;border-bottom:1px solid var(--grid-color)}.data-table-row{white-space:nowrap}.data-table-row:hover,.data-table-row .col-item-freeze:hover{background:#f3f3f3}.data-row-selected{background:#d6d6d6!important}.table-working{opacity:.1;pointer-events:none}.select-row-check{left:9px;z-index:10;cursor:pointer;margin:0;position:absolute;padding:0!important}.gb-row-num{left:2px;z-index:10;cursor:pointer;margin:0;font-size:x-small;position:absolute;padding:0!important}.mock-html{width:50%;height:18px;margin:0 auto;border-radius:11px;background:var(--grid-color)}.abs-right{top:7px;right:7px;position:absolute}.has-symbol:after{content:attr(data-symbol);padding-left:3px}.has-symbol-b:before{content:attr(data-symbol);padding-right:3px}.data-table-row-no-data{font-size:xx-large;color:gray;font-weight:500;text-shadow:-1px -1px var(--accent-color)}.data-row-selected .col-item-freeze,.data-row-selected .data-cell,.data-row-selected:hover,.data-row-selected .col-item-freeze:hover,.data-row-selected .data-cell:hover{background:#d6d6d6!important}.data-table-headers .col-item-freeze:first-of-type{border-bottom:1px solid var(--grid-color)}.col-header{z-index:2;width:125px;overflow:auto;cursor:grab;padding:7px 3px;text-align:center;position:relative;box-sizing:border-box;display:inline-block;vertical-align:top;white-space:pre-wrap;word-wrap:break-word;background:#fafafa;border-right:1px solid var(--grid-color)}.col-header button,.col-header span,.col-header select{cursor:pointer;vertical-align:middle}.col-header input{vertical-align:middle}.col-header-img-container{overflow-y:hidden;text-align:center;display:inline-block;vertical-align:middle;background-size:cover;background-position:center;background-repeat:no-repeat}.col-header-minimized{width:0!important;height:0!important;padding:0!important;overflow:hidden!important;border-bottom:none!important;border-right:none!important;transition:width .3s ease}.btn-maximize-col{border:none;border-radius:5px;background:#f5f5f5;box-shadow:0 0 3px 2px gray;font-size:var(--reg-font-size);margin-right:27px;padding:4px}.no-btn{border:none;background:none}.col-item-freeze{left:0;z-index:3;position:sticky;background:#fff;box-shadow:2px 0 3px 0 var(--grid-color);-moz-box-shadow:2px 0px 3px 0px var(--grid-color);-webkit-box-shadow:2px 0px 3px 0px var(--grid-color)}.col-header input,.select-filter{width:40%;margin:11px 0 1px}.sel-fil-container{z-index:5}.edit-input-option-cont{left:0;right:0}.edit-input-opt button{width:100%;font-size:15px;padding:11px 0 11px 17px;text-align:left!important}.selfil-opt-contain,.edit-input-option-cont{overflow:auto;max-height:240px;border-radius:5px;position:absolute;background:#fff;box-shadow:0 1px 3px 1px var(--grid-color);-moz-box-shadow:0 1px 3px 1px var(--grid-color);-webkit-box-shadow:0 1px 3px 1px var(--grid-color)}.selfil-div,.edit-input-opt{cursor:pointer;text-align:left;border-bottom:1px solid var(--grid-color)}.selfil-div:hover,.edit-input-opt:hover{background:#ebebeb}.selfil-div:last-of-type,.edit-input-opt:last-of-type{border-bottom:none}.selfil-div label{width:calc(100% - 22px);font-size:15px;cursor:pointer;padding:11px;display:inline-block}.selfil-div label input[type=checkbox]{margin-right:11px;vertical-align:middle}.select-filter-comparator{width:36px;z-index:3;opacity:0;position:relative;margin:11px 0 1px 15px}.btn-fil-comp{top:2px;left:-36px;border:none;position:absolute;background:#fafafa}.btn-fil-comp i{color:var(--accent-color)}@media screen and (min-width:960px){.col-header input,.select-filter,.select-filter-comparator{margin-top:7px;margin-bottom:1px}}.data-cell{width:125px;padding:11px 6px 11px 17px;overflow:auto;font-size:15px;word-wrap:break-word;white-space:pre-line;vertical-align:top;box-sizing:border-box;display:inline-flex;align-items:center;border-right:1px solid var(--grid-color);border-bottom:1px solid var(--grid-color)}input.edit-input{border-radius:0}.data-cell:focus,input.edit-input:focus{outline:1px solid #00a8f3}.dragger-cell-focused{background:#00a8f333;border-left:1px solid #00a8f3;border-right:1px solid #00a8f3!important}.focused-cell-dragger{width:9px;height:9px;cursor:crosshair;position:absolute;background:#00a8f3;box-shadow:0 0 1px 1px var(--accent-color);-moz-box-shadow:0 0 1px 1px var(--accent-color);-webkit-box-shadow:0 0 1px 1px var(--accent-color)}.holding-check{padding-left:44px}.data-cell-riiight{padding:11px 17px 11px 6px;justify-content:right}.data-cell-ceeenter{padding:11px 6px;justify-content:center!important}.cell-og-link{line-height:0;visibility:hidden}.cell-og-link:before{visibility:visible;content:attr(data-title)}.moveable-col{cursor:col-resize!important}.moveable-row{cursor:row-resize!important}.data-sort-arr{cursor:pointer;margin-left:11px;border:none;background:none;padding:0 0 0 2px;color:var(--accent-color)}.data-sort-arr .material-icons{font-size:20px}.data-col-info{left:10px;top:12px;padding:0;border:none;cursor:pointer;background:none;position:absolute;color:var(--accent-color)}.data-col-info .material-icons{font-size:16px}.sort-order-indicator{font-weight:600;vertical-align:middle;font-size:16px}.btn-min-col{cursor:pointer;top:0;right:2px;font-size:20px;border:none;background:none;position:absolute;padding:0 2px 5px 0;color:var(--accent-color)}.btn-min-col-hide{z-index:0;visibility:hidden;pointer-events:none}.btn-freeze-col{float:left;border:none;cursor:pointer;background:none}.btn-freeze-col .material-icons{font-size:16px;color:var(--accent-color)}.hidden-cols{max-width:100%;overflow-x:auto;clear:both;white-space:nowrap;padding:17px 15px 5px 4px}.hidden-cols button:first-of-type:before{content:\"Hidden Columns\";font-size:12px;font-weight:600;padding-right:11px;vertical-align:middle}.col-header span{word-wrap:break-word;vertical-align:middle;font-size:var(--reg-font-size)}.o-ins-div span,.o-ins-div i{vertical-align:middle;font-size:16px}.aux-chip{text-align:center;padding-bottom:33px;word-wrap:break-word;white-space:pre-wrap}.insights{padding:17px 15px}.insight-field{min-height:100px;padding:21px 0;font-size:large;white-space:pre-wrap;word-wrap:break-word;border-bottom:1px solid lightgray}@media screen and (max-width:760px){.insight-field:first-of-type{padding-top:7px}}@media screen and (min-width:760px){.insight-field-row{border-bottom:1px solid lightgray}.insight-field,.aux-chip{width:50%;vertical-align:top;display:inline-block;border-bottom:none}}@media screen and (min-width:1024px){.insight-field,.aux-chip{width:33%}}.chart-label-cont{padding-top:10px;text-align:center}.pie-piece-label{padding-top:5px;margin-right:27px;display:inline-block}.pie-piece-label-sq{width:11px;height:11px;margin:0 0 0 2px;display:inline-block;vertical-align:middle}.pie-piece-label span{font-size:small}.pie-piece-label span:before{font-size:smaller;padding-right:4px;font-weight:600;content:attr(data-percent)}.pie-layover{border-radius:50%;background:#fff;position:absolute;padding:5px!important;display:flex;font-size:17px;align-items:center;overflow:hidden;box-sizing:border-box;justify-content:center;color:var(--accent-color)}.pie-layover div{font-weight:500;padding:0!important}.ins-even-dist-ct{font-size:24px;font-weight:500}.line-graph-container{padding:11px 0 33px 7px!important;box-sizing:border-box;margin-left:11px}.lg-title-cont{padding:0!important;text-align:center;margin:17px 11px}.lg-n-marker-cont{width:60px;position:relative;padding:0!important;box-sizing:border-box;display:inline-block;vertical-align:top}.lg-n-marker-cont:before{top:45%;left:-37px;display:block;position:absolute;white-space:nowrap;color:var(--grid-color);content:attr(data-column);transform:rotate(-90deg)}.lg-n-marker,.lg-n-marker-h{padding:0 11px 0 0!important;font-size:small;position:relative;text-align:right;white-space:nowrap;box-sizing:border-box}.line-graph{width:calc(92% - 60px);position:relative;box-sizing:border-box;display:inline-block;vertical-align:top;padding:0!important;border-left:1px solid var(--accent-color);border-bottom:1px solid var(--accent-color)}.lg-lbl-x{left:0;right:0;bottom:-45px;font-size:small;font-weight:500;text-align:center;position:absolute;padding:0!important}.btn-line-graph-opts{margin:0;padding:4px;background:none;border-top:1px solid var(--accent-color);border-left:1px solid var(--accent-color);border-bottom:1px solid var(--accent-color)}.sp-line-graph-title{margin-top:7px;font-size:large;text-decoration:underline}.lg-dt-marker,.lg-dt-marker-h,.vd-n-marker,.vd-n-marker-h{bottom:-22px;font-size:small;position:absolute;text-align:center;padding:0!important;display:inline-block;box-sizing:border-box}.lg-dt-marker-h,.vd-n-marker-h{visibility:hidden}.lg-dt-marker.visible-marker{margin-left:21px}.lg-n-marker-h{height:0;visibility:hidden}.visible-marker{z-index:2;font-weight:600;background:#fff;height:unset!important;padding:1px 2px!important;visibility:visible!important;box-shadow:0 0 2px 1px #afafaf;-moz-box-shadow:0 0 2px 1px #afafaf;-webkit-box-shadow:0 0 2px 1px #afafaf}.visible-marker:before{font-weight:600}.lg-dt-marker:before{top:-15px;left:0;content:\"|\";position:absolute}.vd-n-marker:before{top:-15px;left:50%;content:\"|\";left:calc(50% - 2px);position:absolute}.lg-n-marker:before{top:-4px;right:-3px;content:\"-\";font-weight:600;font-size:large;position:absolute;background:#fff}.btn-line-graph-opts:hover{background:#d6d6d6;transition:background .3s ease}.btn-line-graph-opts:last-of-type{border-right:1px solid var(--accent-color)}.btn-lg-sel{color:#fff!important;background:var(--accent-color);box-shadow:0 0 2px 1px #afafaf;-moz-box-shadow:0 0 2px 1px #afafaf;-webkit-box-shadow:0 0 2px 1px #afafaf}.btn-lg-sel:hover{background:var(--accent-color)}.lg-plot{height:8px;width:8px;opacity:.3;cursor:pointer;border-radius:50%;position:absolute;padding:0!important;background:var(--accent-color)}.lg-plot:hover{z-index:100;opacity:1!important}.lg-plot:hover:after{padding:3px;display:inline-block;font-size:small;border-radius:5px;margin:0 0 0 25px;font-weight:700;content:attr(data-number);background:#fff!important;box-shadow:0 0 2px 1px #afafaf;-moz-box-shadow:0 0 2px 1px #afafaf;-webkit-box-shadow:0 0 2px 1px #afafaf}.lg-plot-opq{opacity:0;background:#fff}.lg-plot-opq:hover{opacity:1!important;background:var(--grid-color);transition:opacity .2s ease}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:\"liga\";-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: DataCellComponent, selector: "app-data-cell", inputs: ["text", "html", "minimized", "rawText", "cell", "rowId", "colWid", "rowHeight", "noColResize", "columnValClass"], outputs: ["width", "height", "edit", "dragListen", "validateEditFocus", "clearVEditFocus"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: RowGroupPanel, decorators: [{
             type: Component,
-            args: [{ selector: 'app-row-group-panel', imports: [CommonModule, DecimalPipe, DataCellComponent], template: "<div class=\"row-group-panel row-group-panel-{{elifyGrouping}}\" [ngClass]=\"{'open-panel': open(), 'hide': !count}\">\r\n    <button class=\"no-btn\" (click)=\"openGroup()\">\r\n        <span class=\"v-mid md-text\">{{uiGroupValue}} ({{count | number}})</span>&nbsp;\r\n        <i class=\"material-icons v-mid\" aria-hidden=\"false\">{{open() ? \"keyboard_arrow_down\" : \"chevron_right\"}}</i>\r\n    </button>\r\n</div>\r\n@if(showRowNumbers && open()){\r\n    <div class=\"relly\">\r\n        @for(num of rowNums; track $index){\r\n            <span class=\"gb-row-num row-nums-{{elifyGrouping}} invisible\" >{{num | number}}</span>\r\n        }\r\n    </div>\r\n}\r\n@if(open()){\r\n    <div #panelDataGrid [id]=\"'panelDataGrid' + elifyGrouping\" style=\"overflow: auto;margin-top: 3px\" class=\"group-panel-grid panel-height\"\r\n    (scroll)=\"handleScroll($event)\" (scrollend)=\"handleScrollEnd()\">\r\n        <div #aboveArea [style.height]=\"aboveHgt + 'px'\"></div>\r\n        @for(row of rows; track row.index){\r\n            <div [id]=\"row.id\" class=\"data-table-row rows-for-{{elifyGrouping}}\" [attr.data-index]=\"row.index\"\r\n                [ngStyle]=\"{'width': row.width, 'height': row.height}\" >\r\n                @for(cell of row.cells; track cell.column){\r\n                    @if(isScrolling){\r\n                        <div class=\"data-cell data-cell-{{common.elifyCol(cell.column)}}{{cell.specialColClass}}\" [class.data-cell-riiight]=\"cell.dataType === 'number'\"\r\n                        [ngClass]=\"{ 'col-item-freeze': cell.freeze, 'col-header-minimized': cell.minimized, 'holding-check': cell.column === dataTableService.firstCol }\"\r\n                        [ngStyle]=\"{'width': cell.width || dataTableService.useColWid, 'height': row.height}\" >{{cell.text}}@if(cell.html){<div class=\"mock-html\"></div>}</div>\r\n                    } @else {\r\n                        <app-data-cell\r\n                        [cell]=\"cell\" [rowId]=\"row.id\" \r\n                        [noColResize]=\"true\"\r\n                        [rawText]=\"cell.rawText\"\r\n                        [rowHeight]=\"row.height || ''\"\r\n                        [columnValClass]=\"cell.specialColClass\"\r\n                        [colWid]=\"cell.width || dataTableService.useColWid\"\r\n                        (height)=\"setSingleRowHgt($event, row.id)\"\r\n                        ></app-data-cell>\r\n                    }\r\n                }\r\n            </div>\r\n        }\r\n        <div #belowArea [style.height]=\"belowHgt + 'px'\"></div>\r\n        @if(!panelData.length){\r\n            <div \r\n            class=\"data-table-row panel-height flex-center data-table-row-no-data\" style=\"width: 100%; white-space: normal;\">\r\n                <div class=\"center\">Loading...</div>\r\n            </div>\r\n        }\r\n    </div>\r\n}\r\n", styles: [".row-group-panel{padding:17px 11px;border-bottom:1px dotted var(--accent-color)}.open-panel{box-shadow:0 1px 3px 1px var(--grid-color);-moz-box-shadow:0 1px 3px 1px var(--grid-color);-webkit-box-shadow:0 1px 3px 1px var(--grid-color)}.panel-height{min-height:400px;max-height:400px}\n", "@charset \"UTF-8\";@font-face{font-family:Roboto Condensed;src:url(https://d2ffvluimla00s.cloudfront.net/RobotoCondensed-VariableFont_wght.ttf) format(\"ttf\")}@font-face{font-family:Material Icons;font-style:normal;font-weight:400;src:url(https://d2ffvluimla00s.cloudfront.net/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format(\"woff2\")}.deebo-data-grid-section{font-family:Roboto Condensed,Arial,Helvetica,sans-serif}:host{--accent-color:rgb(50, 50, 50);--grid-color:rgb(199, 199, 199);--pad-left-base: 33px;--row-num-width: 75px;--reg-font-size: 17px }.relly{position:relative}.hide{display:none!important;max-height:0;max-width:0;top:0;left:0;opacity:0}.ovy{overflow:auto}.no-ovy-y{overflow-y:hidden!important}.pad-top-sm{padding-top:4px!important}.pad-top-ten{padding-top:10px!important}.pad-top-teen{padding-top:17px}.pad-top-thirty,.pad-top-trey{padding-top:33px}.pad-top-much{padding-top:75px}.o-visible{overflow:visible}.dontwrap{white-space:nowrap}.inline-b{display:inline-block}.inline{display:inline}.half-wid{width:50%;vertical-align:top;display:inline-block}.qtr-wid{width:25%;vertical-align:top;display:inline-block}.third-wid{width:33.3%;vertical-align:top;display:inline-block}.two-third-wid{width:66.6%;vertical-align:top;display:inline-block}.three-qtr-wid{width:75%;vertical-align:top;display:inline-block}.v-top{vertical-align:top!important}.v-mid{vertical-align:middle!important}.v-bot{vertical-align:bottom!important}.lg-text{font-size:larger}.xlg-text{font-size:x-large!important}.md-text{font-size:var(--reg-font-size)!important}.small-text{font-size:small}.tiny-text{font-size:x-small}.invisible{visibility:hidden}.flex-center{display:flex;justify-content:center;align-items:center}.flex-item{flex:1 1 auto}.o-x-hidden{overflow-x:hidden!important}.no-weight{font-weight:400!important}.semi-heavy{font-weight:500!important}.heavy{font-weight:700!important}.marauto{margin:0 auto}.center{text-align:center}.left{text-align:left}.right{text-align:right}.btn-reset{border:none;color:#fff;padding:7px 11px;background:maroon}.error-message{color:maroon;font-weight:500}.success{color:green;font-weight:500}.neutral{color:var(--accent-color)}input,select{border:none;padding:4px;border-radius:3px;box-sizing:border-box;font-family:Roboto Condensed,Arial,Helvetica,sans-serif;box-shadow:0 0 1px 1px #afafaf;-moz-box-shadow:0 0 1px 1px #afafaf;-webkit-box-shadow:0 0 1px 1px #afafaf}input[type=radio],input[type=checkbox]{cursor:pointer;box-shadow:none!important;-moz-box-shadow:none!important;-webkit-box-shadow:none!important}button{cursor:pointer}button:focus,input:focus,select:focus,textarea:focus,a:focus{outline-width:0}button:disabled,input:disabled,select:disabled{opacity:.5;cursor:not-allowed}.prevent{opacity:.5;cursor:not-allowed;pointer-events:none}.controls{text-align:right;padding:16px 11px 6px 1px;max-width:100%;clear:both;overflow-x:auto;white-space:nowrap}.controls button{font-size:var(--reg-font-size);margin-right:31px;vertical-align:middle}.controls button span{vertical-align:middle}.controls button:last-of-type{margin-right:0}.data-table{margin-top:11px;overflow:hidden;box-shadow:0 -1px 3px 1px var(--grid-color);-moz-box-shadow:0 -1px 3px 1px var(--grid-color);-webkit-box-shadow:0 -1px 3px 1px var(--grid-color)}.sel-rows-checked{color:#00a8f399!important}.save-hilite{padding:2px 4px;border-radius:3px;background:#ebebeb;box-shadow:0 0 3px 1px var(--accent-color);-moz-box-shadow:0 0px 3px 1px var(--accent-color);-webkit-box-shadow:0 0px 3px 1px var(--accent-color)}.btn-ctrl-sel-rows,.btn-export-or-print{border:none;padding:3px 4px;border-radius:3px;background:#f5f5f5;vertical-align:middle;box-shadow:0 0 2px 1px var(--accent-color);-moz-box-shadow:0 0 2px 1px var(--accent-color);-webkit-box-shadow:0 0 2px 1px var(--accent-color)}.deebo-dd-contain-div:last-of-type{margin-right:0!important}.btn-export{width:100%;text-transform:uppercase}.btn-export:hover{text-decoration:underline}.btn-ctrl-sel-rows:hover,.btn-export-or-print:hover{background:#ebebeb;box-shadow:0 0 6px 2px gray;-moz-box-shadow:0 0 6px 2px gray;-webkit-box-shadow:0 0 6px 2px gray}.btn-center-selected{padding:2px 4px;border-radius:5px;background:#f5f5f5;box-shadow:0 0 6px 2px gray;-moz-box-shadow:0 0 6px 2px gray;-webkit-box-shadow:0 0 6px 2px gray}.btn-ctrl-sel-rows .material-icons{font-size:18px;font-weight:600;vertical-align:middle}.btn-ctrl-sel-rows .material-icons:not(.error-message){color:var(--accent-color)}.data-table-headers{cursor:pointer;white-space:nowrap;border-bottom:1px solid var(--grid-color)}.data-table-row{white-space:nowrap}.data-table-row:hover,.data-table-row .col-item-freeze:hover{background:#f3f3f3}.data-row-selected{background:#d6d6d6!important}.table-working{opacity:.1;pointer-events:none}.select-row-check{left:9px;z-index:10;cursor:pointer;margin:0;position:absolute;padding:0!important}.gb-row-num{left:2px;z-index:10;cursor:pointer;margin:0;font-size:x-small;position:absolute;padding:0!important}.mock-html{width:50%;height:18px;margin:0 auto;border-radius:11px;background:var(--grid-color)}.abs-right{top:7px;right:7px;position:absolute}.has-symbol:after{content:attr(data-symbol);padding-left:3px}.has-symbol-b:before{content:attr(data-symbol);padding-right:3px}.data-table-row-no-data{font-size:xx-large;color:gray;font-weight:500;text-shadow:-1px -1px var(--accent-color)}.data-row-selected .col-item-freeze,.data-row-selected .data-cell,.data-row-selected:hover,.data-row-selected .col-item-freeze:hover,.data-row-selected .data-cell:hover{background:#d6d6d6!important}.data-table-headers .col-item-freeze:first-of-type{border-bottom:1px solid var(--grid-color)}.col-header{z-index:2;width:125px;overflow:auto;cursor:grab;padding:7px 3px;text-align:center;position:relative;box-sizing:border-box;display:inline-block;vertical-align:top;white-space:pre-wrap;word-wrap:break-word;background:#fafafa;border-right:1px solid var(--grid-color)}.col-header button,.col-header span,.col-header select{cursor:pointer;vertical-align:middle}.col-header input{vertical-align:middle}.col-header-img-container{overflow-y:hidden;text-align:center;display:inline-block;vertical-align:middle;background-size:cover;background-position:center;background-repeat:no-repeat}.col-header-minimized{width:0!important;height:0!important;padding:0!important;overflow:hidden!important;border-bottom:none!important;border-right:none!important;transition:width .3s ease}.btn-maximize-col{border:none;border-radius:5px;background:#f5f5f5;box-shadow:0 0 3px 2px gray;font-size:var(--reg-font-size);margin-right:27px;padding:4px}.no-btn{border:none;background:none}.col-item-freeze{left:0;z-index:3;position:sticky;background:#fff;box-shadow:2px 0 3px 0 var(--grid-color);-moz-box-shadow:2px 0px 3px 0px var(--grid-color);-webkit-box-shadow:2px 0px 3px 0px var(--grid-color)}.col-header input,.select-filter{width:40%;margin:11px 0 1px}.sel-fil-container{z-index:5}.edit-input-option-cont{left:0;right:0}.edit-input-opt button{width:100%;font-size:15px;padding:11px 0 11px 17px;text-align:left!important}.selfil-opt-contain,.edit-input-option-cont{overflow:auto;max-height:240px;border-radius:5px;position:absolute;background:#fff;box-shadow:0 1px 3px 1px var(--grid-color);-moz-box-shadow:0 1px 3px 1px var(--grid-color);-webkit-box-shadow:0 1px 3px 1px var(--grid-color)}.selfil-div,.edit-input-opt{cursor:pointer;text-align:left;border-bottom:1px solid var(--grid-color)}.selfil-div:hover,.edit-input-opt:hover{background:#ebebeb}.selfil-div:last-of-type,.edit-input-opt:last-of-type{border-bottom:none}.selfil-div label{width:calc(100% - 22px);font-size:15px;cursor:pointer;padding:11px;display:inline-block}.selfil-div label input[type=checkbox]{margin-right:11px;vertical-align:middle}.select-filter-comparator{width:36px;z-index:3;opacity:0;position:relative;margin:11px 0 1px 15px}.btn-fil-comp{top:2px;left:-36px;border:none;position:absolute;background:#fafafa}.btn-fil-comp i{color:var(--accent-color)}@media screen and (min-width:960px){.col-header input,.select-filter,.select-filter-comparator{margin-top:7px;margin-bottom:1px}}.data-cell{width:125px;padding:11px 6px 11px 17px;overflow:auto;font-size:15px;word-wrap:break-word;white-space:pre-line;vertical-align:top;box-sizing:border-box;display:inline-flex;align-items:center;border-right:1px solid var(--grid-color);border-bottom:1px solid var(--grid-color)}input.edit-input{border-radius:0}.data-cell:focus,input.edit-input:focus{outline:1px solid #00a8f3}.dragger-cell-focused{background:#00a8f333;border-left:1px solid #00a8f3;border-right:1px solid #00a8f3!important}.focused-cell-dragger{width:9px;height:9px;cursor:crosshair;position:absolute;background:#00a8f3;box-shadow:0 0 1px 1px var(--accent-color);-moz-box-shadow:0 0 1px 1px var(--accent-color);-webkit-box-shadow:0 0 1px 1px var(--accent-color)}.holding-check{padding-left:44px}.data-cell-riiight{padding:11px 17px 11px 6px;justify-content:right}.data-cell-ceeenter{padding:11px 6px;justify-content:center!important}.cell-og-link{line-height:0;visibility:hidden}.cell-og-link:before{visibility:visible;content:attr(data-title)}.moveable-col{cursor:col-resize!important}.moveable-row{cursor:row-resize!important}.data-sort-arr{cursor:pointer;margin-left:11px;border:none;background:none;padding:0 0 0 2px;color:var(--accent-color)}.data-sort-arr .material-icons{font-size:20px}.data-col-info{left:10px;top:12px;padding:0;border:none;cursor:pointer;background:none;position:absolute;color:var(--accent-color)}.data-col-info .material-icons{font-size:16px}.sort-order-indicator{font-weight:600;vertical-align:middle;font-size:16px}.btn-min-col{cursor:pointer;top:0;right:2px;font-size:20px;border:none;background:none;position:absolute;padding:0 2px 5px 0;color:var(--accent-color)}.btn-min-col-hide{z-index:0;visibility:hidden;pointer-events:none}.btn-freeze-col{float:left;border:none;cursor:pointer;background:none}.btn-freeze-col .material-icons{font-size:16px;color:var(--accent-color)}.hidden-cols{max-width:100%;overflow-x:auto;clear:both;white-space:nowrap;padding:17px 15px 5px 4px}.hidden-cols button:first-of-type:before{content:\"Hidden Columns\";font-size:12px;font-weight:600;padding-right:11px;vertical-align:middle}.col-header span{word-wrap:break-word;vertical-align:middle;font-size:var(--reg-font-size)}.o-ins-div span,.o-ins-div i{vertical-align:middle;font-size:16px}.aux-chip{text-align:center;padding-bottom:33px;word-wrap:break-word;white-space:pre-wrap}.insights{padding:17px 15px}.insight-field{min-height:100px;padding:21px 0;font-size:large;white-space:pre-wrap;word-wrap:break-word;border-bottom:1px solid lightgray}@media screen and (max-width:760px){.insight-field:first-of-type{padding-top:7px}}@media screen and (min-width:760px){.insight-field-row{border-bottom:1px solid lightgray}.insight-field,.aux-chip{width:50%;vertical-align:top;display:inline-block;border-bottom:none}}@media screen and (min-width:1024px){.insight-field,.aux-chip{width:33%}}.chart-label-cont{padding-top:10px;text-align:center}.pie-piece-label{padding-top:5px;margin-right:27px;display:inline-block}.pie-piece-label-sq{width:11px;height:11px;margin:0 0 0 2px;display:inline-block;vertical-align:middle}.pie-piece-label span{font-size:small}.pie-piece-label span:before{font-size:smaller;padding-right:4px;font-weight:600;content:attr(data-percent)}.pie-layover{border-radius:50%;background:#fff;position:absolute;padding:5px!important;display:flex;font-size:17px;align-items:center;overflow:hidden;box-sizing:border-box;justify-content:center;color:var(--accent-color)}.pie-layover div{font-weight:500;padding:0!important}.ins-even-dist-ct{font-size:24px;font-weight:500}.line-graph-container{padding:11px 0 33px 7px!important;box-sizing:border-box;margin-left:11px}.lg-title-cont{padding:0!important;text-align:center;margin:17px 11px}.lg-n-marker-cont{width:60px;position:relative;padding:0!important;box-sizing:border-box;display:inline-block;vertical-align:top}.lg-n-marker-cont:before{top:45%;left:-37px;display:block;position:absolute;white-space:nowrap;color:var(--grid-color);content:attr(data-column);transform:rotate(-90deg)}.lg-n-marker,.lg-n-marker-h{padding:0 11px 0 0!important;font-size:small;position:relative;text-align:right;white-space:nowrap;box-sizing:border-box}.line-graph{width:calc(92% - 60px);position:relative;box-sizing:border-box;display:inline-block;vertical-align:top;padding:0!important;border-left:1px solid var(--accent-color);border-bottom:1px solid var(--accent-color)}.lg-lbl-x{left:0;right:0;bottom:-45px;font-size:small;font-weight:500;text-align:center;position:absolute;padding:0!important}.btn-line-graph-opts{margin:0;padding:4px;background:none;border-top:1px solid var(--accent-color);border-left:1px solid var(--accent-color);border-bottom:1px solid var(--accent-color)}.sp-line-graph-title{margin-top:7px;font-size:large;text-decoration:underline}.lg-dt-marker,.lg-dt-marker-h,.vd-n-marker,.vd-n-marker-h{bottom:-22px;font-size:small;position:absolute;text-align:center;padding:0!important;display:inline-block;box-sizing:border-box}.lg-dt-marker-h,.vd-n-marker-h{visibility:hidden}.lg-dt-marker.visible-marker{margin-left:21px}.lg-n-marker-h{height:0;visibility:hidden}.visible-marker{z-index:2;font-weight:600;background:#fff;height:unset!important;padding:1px 2px!important;visibility:visible!important;box-shadow:0 0 2px 1px #afafaf;-moz-box-shadow:0 0 2px 1px #afafaf;-webkit-box-shadow:0 0 2px 1px #afafaf}.visible-marker:before{font-weight:600}.lg-dt-marker:before{top:-15px;left:0;content:\"|\";position:absolute}.vd-n-marker:before{top:-15px;left:50%;content:\"|\";left:calc(50% - 2px);position:absolute}.lg-n-marker:before{top:-4px;right:-3px;content:\"-\";font-weight:600;font-size:large;position:absolute;background:#fff}.btn-line-graph-opts:hover{background:#d6d6d6;transition:background .3s ease}.btn-line-graph-opts:last-of-type{border-right:1px solid var(--accent-color)}.btn-lg-sel{color:#fff!important;background:var(--accent-color);box-shadow:0 0 2px 1px #afafaf;-moz-box-shadow:0 0 2px 1px #afafaf;-webkit-box-shadow:0 0 2px 1px #afafaf}.btn-lg-sel:hover{background:var(--accent-color)}.lg-plot{height:8px;width:8px;opacity:.3;cursor:pointer;border-radius:50%;position:absolute;padding:0!important;background:var(--accent-color)}.lg-plot:hover{z-index:100;opacity:1!important}.lg-plot:hover:after{padding:3px;display:inline-block;font-size:small;border-radius:5px;margin:0 0 0 25px;font-weight:700;content:attr(data-number);background:#fff!important;box-shadow:0 0 2px 1px #afafaf;-moz-box-shadow:0 0 2px 1px #afafaf;-webkit-box-shadow:0 0 2px 1px #afafaf}.lg-plot-opq{opacity:0;background:#fff}.lg-plot-opq:hover{opacity:1!important;background:var(--grid-color);transition:opacity .2s ease}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:\"liga\";-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}\n"] }]
+            args: [{ selector: 'app-row-group-panel', imports: [CommonModule, DecimalPipe, DataCellComponent], template: "<div class=\"row-group-panel row-group-panel-{{elifyGrouping}}\" [ngClass]=\"{'open-panel': open(), 'hide': !count}\">\r\n    <button class=\"no-btn\" (click)=\"openGroup()\">\r\n        <span class=\"v-mid md-text\">{{uiGroupValue}} ({{count | number}})</span>&nbsp;\r\n        <i class=\"material-icons v-mid\" aria-hidden=\"false\">{{open() ? \"keyboard_arrow_down\" : \"chevron_right\"}}</i>\r\n    </button>\r\n</div>\r\n@if(showRowNumbers && open()){\r\n    <div class=\"relly\">\r\n        @for(num of rowNums; track $index){\r\n            <span class=\"gb-row-num row-nums-{{elifyGrouping}} invisible\" >{{num | number}}</span>\r\n        }\r\n    </div>\r\n}\r\n@if(open()){\r\n    <div #panelDataGrid [id]=\"'panelDataGrid' + elifyGrouping\" style=\"overflow: auto;margin-top: 3px\" class=\"group-panel-grid panel-height\"\r\n    (scroll)=\"handleScroll($event)\" (scrollend)=\"handleScrollEnd()\">\r\n        <div #aboveArea [ngStyle]=\"{'height': aboveHgt() + 'px', 'width': useRowWid}\"></div>\r\n        <div [style.transform]=\"'translateY('+transY()+'px)'\">\r\n            @for(row of rows; track $index){\r\n                <div [id]=\"row.id\" class=\"data-table-row rows-for-{{elifyGrouping}}\" [attr.data-index]=\"row.index\"\r\n                    [ngStyle]=\"{'width': row.width, 'height': row.height}\" >\r\n                    @for(cell of row.cells; track cell.column){\r\n                        <app-data-cell\r\n                        [cell]=\"cell\" [rowId]=\"row.id\" \r\n                        [noColResize]=\"true\"\r\n                        [text]=\"cell.text || ''\"\r\n                        [html]=\"cell.html || ''\"\r\n                        [rawText]=\"cell.rawText\"\r\n                        [minimized]=\"cell.minimized\"\r\n                        [rowHeight]=\"row.height || ''\"\r\n                        [columnValClass]=\"cell.specialColClass\"\r\n                        [colWid]=\"cell.width || dataTableService.useColWid\"\r\n                        (height)=\"setSingleRowHgt($event, row.id)\"\r\n                        ></app-data-cell>\r\n                    }\r\n                </div>\r\n            }\r\n        </div>\r\n        <div #belowArea [ngStyle]=\"{'height': belowHgt() + 'px', 'width': useRowWid}\"></div>\r\n        @if(!panelData.length){\r\n            <div \r\n            class=\"data-table-row panel-height flex-center data-table-row-no-data\" style=\"width: 100%; white-space: normal;\">\r\n                <div class=\"center\">Loading...</div>\r\n            </div>\r\n        }\r\n    </div>\r\n}\r\n", styles: [".row-group-panel{padding:17px 11px;border-bottom:1px dotted var(--accent-color)}.open-panel{box-shadow:0 1px 3px 1px var(--grid-color);-moz-box-shadow:0 1px 3px 1px var(--grid-color);-webkit-box-shadow:0 1px 3px 1px var(--grid-color)}.panel-height{min-height:400px;max-height:400px;border-bottom:1px dotted var(--accent-color)}\n", "@charset \"UTF-8\";@font-face{font-family:Roboto Condensed;src:url(https://d2ffvluimla00s.cloudfront.net/RobotoCondensed-VariableFont_wght.ttf) format(\"ttf\")}@font-face{font-family:Material Icons;font-style:normal;font-weight:400;src:url(https://d2ffvluimla00s.cloudfront.net/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format(\"woff2\")}.deebo-data-grid-section{font-family:Roboto Condensed,Arial,Helvetica,sans-serif}:host{--accent-color:rgb(50, 50, 50);--grid-color:rgb(199, 199, 199);--pad-left-base: 33px;--row-num-width: 75px;--reg-font-size: 17px }.relly{position:relative}.hide{display:none!important;max-height:0;max-width:0;top:0;left:0;opacity:0}.ovy{overflow:auto}.no-ovy-y{overflow-y:hidden!important}.pad-top-sm{padding-top:4px!important}.pad-top-ten{padding-top:10px!important}.pad-top-teen{padding-top:17px}.pad-top-thirty,.pad-top-trey{padding-top:33px}.pad-top-much{padding-top:75px}.o-visible{overflow:visible}.dontwrap{white-space:nowrap}.inline-b{display:inline-block}.inline{display:inline}.half-wid{width:50%;vertical-align:top;display:inline-block}.qtr-wid{width:25%;vertical-align:top;display:inline-block}.third-wid{width:33.3%;vertical-align:top;display:inline-block}.two-third-wid{width:66.6%;vertical-align:top;display:inline-block}.three-qtr-wid{width:75%;vertical-align:top;display:inline-block}.v-top{vertical-align:top!important}.v-mid{vertical-align:middle!important}.v-bot{vertical-align:bottom!important}.lg-text{font-size:larger}.xlg-text{font-size:x-large!important}.md-text{font-size:var(--reg-font-size)!important}.small-text{font-size:small}.tiny-text{font-size:x-small}.invisible{visibility:hidden}.flex-center{display:flex;justify-content:center;align-items:center}.flex-item{flex:1 1 auto}.o-x-hidden{overflow-x:hidden!important}.no-weight{font-weight:400!important}.semi-heavy{font-weight:500!important}.heavy{font-weight:700!important}.marauto{margin:0 auto}.center{text-align:center}.left{text-align:left}.right{text-align:right}.btn-reset{border:none;color:#fff;padding:7px 11px;background:maroon}.error-message{color:maroon;font-weight:500}.success{color:green;font-weight:500}.neutral{color:var(--accent-color)}input,select{border:none;padding:4px;border-radius:3px;box-sizing:border-box;font-family:Roboto Condensed,Arial,Helvetica,sans-serif;box-shadow:0 0 1px 1px #afafaf;-moz-box-shadow:0 0 1px 1px #afafaf;-webkit-box-shadow:0 0 1px 1px #afafaf}input[type=radio],input[type=checkbox]{cursor:pointer;box-shadow:none!important;-moz-box-shadow:none!important;-webkit-box-shadow:none!important}button{cursor:pointer}button:focus,input:focus,select:focus,textarea:focus,a:focus{outline-width:0}button:disabled,input:disabled,select:disabled{opacity:.5;cursor:not-allowed}.prevent{opacity:.5;cursor:not-allowed;pointer-events:none}.controls{text-align:right;padding:16px 11px 6px 1px;max-width:100%;clear:both;overflow-x:auto;white-space:nowrap}.controls button{font-size:var(--reg-font-size);margin-right:31px;vertical-align:middle}.controls button span{vertical-align:middle}.controls button:last-of-type{margin-right:0}.data-table{margin-top:11px;overflow:hidden;box-shadow:0 -1px 3px 1px var(--grid-color);-moz-box-shadow:0 -1px 3px 1px var(--grid-color);-webkit-box-shadow:0 -1px 3px 1px var(--grid-color)}.sel-rows-checked{color:#00a8f399!important}.save-hilite{padding:2px 4px;border-radius:3px;background:#ebebeb;box-shadow:0 0 3px 1px var(--accent-color);-moz-box-shadow:0 0px 3px 1px var(--accent-color);-webkit-box-shadow:0 0px 3px 1px var(--accent-color)}.btn-ctrl-sel-rows,.btn-export-or-print{border:none;padding:3px 4px;border-radius:3px;background:#f5f5f5;vertical-align:middle;box-shadow:0 0 2px 1px var(--accent-color);-moz-box-shadow:0 0 2px 1px var(--accent-color);-webkit-box-shadow:0 0 2px 1px var(--accent-color)}.deebo-dd-contain-div:last-of-type{margin-right:0!important}.btn-export{width:100%;text-transform:uppercase}.btn-export:hover{text-decoration:underline}.btn-ctrl-sel-rows:hover,.btn-export-or-print:hover{background:#ebebeb;box-shadow:0 0 6px 2px gray;-moz-box-shadow:0 0 6px 2px gray;-webkit-box-shadow:0 0 6px 2px gray}.btn-center-selected{padding:2px 4px;border-radius:5px;background:#f5f5f5;box-shadow:0 0 6px 2px gray;-moz-box-shadow:0 0 6px 2px gray;-webkit-box-shadow:0 0 6px 2px gray}.btn-ctrl-sel-rows .material-icons{font-size:18px;font-weight:600;vertical-align:middle}.btn-ctrl-sel-rows .material-icons:not(.error-message){color:var(--accent-color)}.data-table-headers{cursor:pointer;white-space:nowrap;border-bottom:1px solid var(--grid-color)}.data-table-row{white-space:nowrap}.data-table-row:hover,.data-table-row .col-item-freeze:hover{background:#f3f3f3}.data-row-selected{background:#d6d6d6!important}.table-working{opacity:.1;pointer-events:none}.select-row-check{left:9px;z-index:10;cursor:pointer;margin:0;position:absolute;padding:0!important}.gb-row-num{left:2px;z-index:10;cursor:pointer;margin:0;font-size:x-small;position:absolute;padding:0!important}.mock-html{width:50%;height:18px;margin:0 auto;border-radius:11px;background:var(--grid-color)}.abs-right{top:7px;right:7px;position:absolute}.has-symbol:after{content:attr(data-symbol);padding-left:3px}.has-symbol-b:before{content:attr(data-symbol);padding-right:3px}.data-table-row-no-data{font-size:xx-large;color:gray;font-weight:500;text-shadow:-1px -1px var(--accent-color)}.data-row-selected .col-item-freeze,.data-row-selected .data-cell,.data-row-selected:hover,.data-row-selected .col-item-freeze:hover,.data-row-selected .data-cell:hover{background:#d6d6d6!important}.data-table-headers .col-item-freeze:first-of-type{border-bottom:1px solid var(--grid-color)}.col-header{z-index:2;width:125px;overflow:auto;cursor:grab;padding:7px 3px;text-align:center;position:relative;box-sizing:border-box;display:inline-block;vertical-align:top;white-space:pre-wrap;word-wrap:break-word;background:#fafafa;border-right:1px solid var(--grid-color)}.col-header button,.col-header span,.col-header select{cursor:pointer;vertical-align:middle}.col-header input{vertical-align:middle}.col-header-img-container{overflow-y:hidden;text-align:center;display:inline-block;vertical-align:middle;background-size:cover;background-position:center;background-repeat:no-repeat}.col-header-minimized{width:0!important;height:0!important;padding:0!important;overflow:hidden!important;border-bottom:none!important;border-right:none!important;transition:width .3s ease}.btn-maximize-col{border:none;border-radius:5px;background:#f5f5f5;box-shadow:0 0 3px 2px gray;font-size:var(--reg-font-size);margin-right:27px;padding:4px}.no-btn{border:none;background:none}.col-item-freeze{left:0;z-index:3;position:sticky;background:#fff;box-shadow:2px 0 3px 0 var(--grid-color);-moz-box-shadow:2px 0px 3px 0px var(--grid-color);-webkit-box-shadow:2px 0px 3px 0px var(--grid-color)}.col-header input,.select-filter{width:40%;margin:11px 0 1px}.sel-fil-container{z-index:5}.edit-input-option-cont{left:0;right:0}.edit-input-opt button{width:100%;font-size:15px;padding:11px 0 11px 17px;text-align:left!important}.selfil-opt-contain,.edit-input-option-cont{overflow:auto;max-height:240px;border-radius:5px;position:absolute;background:#fff;box-shadow:0 1px 3px 1px var(--grid-color);-moz-box-shadow:0 1px 3px 1px var(--grid-color);-webkit-box-shadow:0 1px 3px 1px var(--grid-color)}.selfil-div,.edit-input-opt{cursor:pointer;text-align:left;border-bottom:1px solid var(--grid-color)}.selfil-div:hover,.edit-input-opt:hover{background:#ebebeb}.selfil-div:last-of-type,.edit-input-opt:last-of-type{border-bottom:none}.selfil-div label{width:calc(100% - 22px);font-size:15px;cursor:pointer;padding:11px;display:inline-block}.selfil-div label input[type=checkbox]{margin-right:11px;vertical-align:middle}.select-filter-comparator{width:36px;z-index:3;opacity:0;position:relative;margin:11px 0 1px 15px}.btn-fil-comp{top:2px;left:-36px;border:none;position:absolute;background:#fafafa}.btn-fil-comp i{color:var(--accent-color)}@media screen and (min-width:960px){.col-header input,.select-filter,.select-filter-comparator{margin-top:7px;margin-bottom:1px}}.data-cell{width:125px;padding:11px 6px 11px 17px;overflow:auto;font-size:15px;word-wrap:break-word;white-space:pre-line;vertical-align:top;box-sizing:border-box;display:inline-flex;align-items:center;border-right:1px solid var(--grid-color);border-bottom:1px solid var(--grid-color)}input.edit-input{border-radius:0}.data-cell:focus,input.edit-input:focus{outline:1px solid #00a8f3}.dragger-cell-focused{background:#00a8f333;border-left:1px solid #00a8f3;border-right:1px solid #00a8f3!important}.focused-cell-dragger{width:9px;height:9px;cursor:crosshair;position:absolute;background:#00a8f3;box-shadow:0 0 1px 1px var(--accent-color);-moz-box-shadow:0 0 1px 1px var(--accent-color);-webkit-box-shadow:0 0 1px 1px var(--accent-color)}.holding-check{padding-left:44px}.data-cell-riiight{padding:11px 17px 11px 6px;justify-content:right}.data-cell-ceeenter{padding:11px 6px;justify-content:center!important}.cell-og-link{line-height:0;visibility:hidden}.cell-og-link:before{visibility:visible;content:attr(data-title)}.moveable-col{cursor:col-resize!important}.moveable-row{cursor:row-resize!important}.data-sort-arr{cursor:pointer;margin-left:11px;border:none;background:none;padding:0 0 0 2px;color:var(--accent-color)}.data-sort-arr .material-icons{font-size:20px}.data-col-info{left:10px;top:12px;padding:0;border:none;cursor:pointer;background:none;position:absolute;color:var(--accent-color)}.data-col-info .material-icons{font-size:16px}.sort-order-indicator{font-weight:600;vertical-align:middle;font-size:16px}.btn-min-col{cursor:pointer;top:0;right:2px;font-size:20px;border:none;background:none;position:absolute;padding:0 2px 5px 0;color:var(--accent-color)}.btn-min-col-hide{z-index:0;visibility:hidden;pointer-events:none}.btn-freeze-col{float:left;border:none;cursor:pointer;background:none}.btn-freeze-col .material-icons{font-size:16px;color:var(--accent-color)}.hidden-cols{max-width:100%;overflow-x:auto;clear:both;white-space:nowrap;padding:17px 15px 5px 4px}.hidden-cols button:first-of-type:before{content:\"Hidden Columns\";font-size:12px;font-weight:600;padding-right:11px;vertical-align:middle}.col-header span{word-wrap:break-word;vertical-align:middle;font-size:var(--reg-font-size)}.o-ins-div span,.o-ins-div i{vertical-align:middle;font-size:16px}.aux-chip{text-align:center;padding-bottom:33px;word-wrap:break-word;white-space:pre-wrap}.insights{padding:17px 15px}.insight-field{min-height:100px;padding:21px 0;font-size:large;white-space:pre-wrap;word-wrap:break-word;border-bottom:1px solid lightgray}@media screen and (max-width:760px){.insight-field:first-of-type{padding-top:7px}}@media screen and (min-width:760px){.insight-field-row{border-bottom:1px solid lightgray}.insight-field,.aux-chip{width:50%;vertical-align:top;display:inline-block;border-bottom:none}}@media screen and (min-width:1024px){.insight-field,.aux-chip{width:33%}}.chart-label-cont{padding-top:10px;text-align:center}.pie-piece-label{padding-top:5px;margin-right:27px;display:inline-block}.pie-piece-label-sq{width:11px;height:11px;margin:0 0 0 2px;display:inline-block;vertical-align:middle}.pie-piece-label span{font-size:small}.pie-piece-label span:before{font-size:smaller;padding-right:4px;font-weight:600;content:attr(data-percent)}.pie-layover{border-radius:50%;background:#fff;position:absolute;padding:5px!important;display:flex;font-size:17px;align-items:center;overflow:hidden;box-sizing:border-box;justify-content:center;color:var(--accent-color)}.pie-layover div{font-weight:500;padding:0!important}.ins-even-dist-ct{font-size:24px;font-weight:500}.line-graph-container{padding:11px 0 33px 7px!important;box-sizing:border-box;margin-left:11px}.lg-title-cont{padding:0!important;text-align:center;margin:17px 11px}.lg-n-marker-cont{width:60px;position:relative;padding:0!important;box-sizing:border-box;display:inline-block;vertical-align:top}.lg-n-marker-cont:before{top:45%;left:-37px;display:block;position:absolute;white-space:nowrap;color:var(--grid-color);content:attr(data-column);transform:rotate(-90deg)}.lg-n-marker,.lg-n-marker-h{padding:0 11px 0 0!important;font-size:small;position:relative;text-align:right;white-space:nowrap;box-sizing:border-box}.line-graph{width:calc(92% - 60px);position:relative;box-sizing:border-box;display:inline-block;vertical-align:top;padding:0!important;border-left:1px solid var(--accent-color);border-bottom:1px solid var(--accent-color)}.lg-lbl-x{left:0;right:0;bottom:-45px;font-size:small;font-weight:500;text-align:center;position:absolute;padding:0!important}.btn-line-graph-opts{margin:0;padding:4px;background:none;border-top:1px solid var(--accent-color);border-left:1px solid var(--accent-color);border-bottom:1px solid var(--accent-color)}.sp-line-graph-title{margin-top:7px;font-size:large;text-decoration:underline}.lg-dt-marker,.lg-dt-marker-h,.vd-n-marker,.vd-n-marker-h{bottom:-22px;font-size:small;position:absolute;text-align:center;padding:0!important;display:inline-block;box-sizing:border-box}.lg-dt-marker-h,.vd-n-marker-h{visibility:hidden}.lg-dt-marker.visible-marker{margin-left:21px}.lg-n-marker-h{height:0;visibility:hidden}.visible-marker{z-index:2;font-weight:600;background:#fff;height:unset!important;padding:1px 2px!important;visibility:visible!important;box-shadow:0 0 2px 1px #afafaf;-moz-box-shadow:0 0 2px 1px #afafaf;-webkit-box-shadow:0 0 2px 1px #afafaf}.visible-marker:before{font-weight:600}.lg-dt-marker:before{top:-15px;left:0;content:\"|\";position:absolute}.vd-n-marker:before{top:-15px;left:50%;content:\"|\";left:calc(50% - 2px);position:absolute}.lg-n-marker:before{top:-4px;right:-3px;content:\"-\";font-weight:600;font-size:large;position:absolute;background:#fff}.btn-line-graph-opts:hover{background:#d6d6d6;transition:background .3s ease}.btn-line-graph-opts:last-of-type{border-right:1px solid var(--accent-color)}.btn-lg-sel{color:#fff!important;background:var(--accent-color);box-shadow:0 0 2px 1px #afafaf;-moz-box-shadow:0 0 2px 1px #afafaf;-webkit-box-shadow:0 0 2px 1px #afafaf}.btn-lg-sel:hover{background:var(--accent-color)}.lg-plot{height:8px;width:8px;opacity:.3;cursor:pointer;border-radius:50%;position:absolute;padding:0!important;background:var(--accent-color)}.lg-plot:hover{z-index:100;opacity:1!important}.lg-plot:hover:after{padding:3px;display:inline-block;font-size:small;border-radius:5px;margin:0 0 0 25px;font-weight:700;content:attr(data-number);background:#fff!important;box-shadow:0 0 2px 1px #afafaf;-moz-box-shadow:0 0 2px 1px #afafaf;-webkit-box-shadow:0 0 2px 1px #afafaf}.lg-plot-opq{opacity:0;background:#fff}.lg-plot-opq:hover{opacity:1!important;background:var(--grid-color);transition:opacity .2s ease}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:\"liga\";-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}\n"] }]
         }], ctorParameters: () => [{ type: CommonService }, { type: TableDragService }, { type: DataTableService }, { type: i0.ChangeDetectorRef }], propDecorators: { onWindowMouseUp: [{
                 type: HostListener,
                 args: ['window:mouseup', ['$event']]
@@ -4714,7 +4840,6 @@ class NgxDeebodata {
     dataTableService;
     tblDragService;
     common;
-    _cd;
     onWindowClick(e) {
         if (this.listenToWindowCurrFil && this.currFilOpts.length) {
             if (e && e.target && (e.target instanceof Element) && (/selfil-/g.test(e.target.className) || /selfil-/g.test(e.target.id))) {
@@ -4761,6 +4886,10 @@ class NgxDeebodata {
             this.handleDraggerMU(e);
         if (this.currGroupValues().length)
             return this.dataTableService.mouseupWhileGrouped.next(e);
+        this.handleScrlBarDrag();
+    }
+    onWindowMouseDown(e) {
+        this.dataTableService.mouseIsDown = true;
     }
     onWindowMouseMove(e) {
         if (this.listenToCellDraggerMouseMove)
@@ -4787,21 +4916,24 @@ class NgxDeebodata {
     onWindowShiftKeyup(e) {
         this.dataTableService.shiftKeyDown = 1;
     }
-    constructor(dataTableService, tblDragService, common, _cd) {
+    constructor(dataTableService, tblDragService, common) {
         this.dataTableService = dataTableService;
         this.tblDragService = tblDragService;
         this.common = common;
-        this._cd = _cd;
     }
     rows = [];
     aboveHgt = signal(0, ...(ngDevMode ? [{ debugName: "aboveHgt" }] : /* istanbul ignore next */ []));
     belowHgt = signal(0, ...(ngDevMode ? [{ debugName: "belowHgt" }] : /* istanbul ignore next */ []));
+    rnBTop = signal(0, ...(ngDevMode ? [{ debugName: "rnBTop" }] : /* istanbul ignore next */ []));
     dtChecks = [];
-    rowNos = signal([], ...(ngDevMode ? [{ debugName: "rowNos" }] : /* istanbul ignore next */ []));
+    rowNos = [];
     verticalRest = 0;
     horizRest = signal(0, ...(ngDevMode ? [{ debugName: "horizRest" }] : /* istanbul ignore next */ []));
     isScrolling = false;
     useRowWid = "";
+    dtr = "dataTableRow";
+    rowElsPad = 1;
+    doRowsMod = 10;
     currGroupValues = signal([], ...(ngDevMode ? [{ debugName: "currGroupValues" }] : /* istanbul ignore next */ []));
     chartHgt = "";
     chartState = "all";
@@ -4826,6 +4958,10 @@ class NgxDeebodata {
     togSelRows = "Selected Rows";
     maxCols = 0;
     lastElRowIndex = 0;
+    scrollDir = "down";
+    transY = signal(0, ...(ngDevMode ? [{ debugName: "transY" }] : /* istanbul ignore next */ []));
+    finishScrollTO = null;
+    valEditFocusTo = null;
     columnHeaders = [];
     columnNames = [];
     linkCell;
@@ -4858,14 +4994,13 @@ class NgxDeebodata {
     belowArea;
     validatedEdit;
     rowNumHeader;
-    rowNumBody;
     fCellDragger;
     selFilContainer;
     btnTogSelRows;
     dataTableHeaders;
     topLevelDataFilter;
     ngOnChanges(changes) {
-        if (typeof changes !== "undefined" && changes["data"] && this.validationSettled() && !this.dataHasBeenSet() && this.data().length)
+        if (typeof changes !== "undefined" && changes["data"] && this.validationSettled() && !this.dataHasBeenSet() && this.data() && this.data().length)
             this.handleDataInput();
     }
     ngOnInit() {
@@ -4873,10 +5008,12 @@ class NgxDeebodata {
         this.handleValidation();
     }
     execSetters() {
-        if (this.defRowHgt && /\d+px/g.test(this.defRowHgt))
+        if (this.defRowHgt) {
             this.dataTableService.defltRHgt = this.defRowHgt;
+            this.dataTableService.defltRHgtNum = parseInt(this.defRowHgt.replace(/[ ]?(px|vh|\%)/g, ""));
+        }
         if (this.defGridHgt)
-            this.dataTableService.dTblHeight = this.defGridHgt;
+            this.dataTableService.dTblHeight.set(this.defGridHgt);
         if (this.myColumnSymbols)
             this.dataTableService.columnSymbols = [...this.myColumnSymbols];
         if (this.myColumnStyles)
@@ -4895,10 +5032,9 @@ class NgxDeebodata {
         this.buildInitUiDataTable(tdata, this.color1, this.color2); //hex or rgb values work best
         if (!this.dataTableService.errorLoading)
             this.dataTableService.noDataMsg = "No data to display for this configuration.";
-        this.tblDragService.dTblHeightOutput.subscribe(h => this.setTableHeight(h));
+        this.tblDragService.dTblHeightOutput.subscribe(h => this.setTableHeight(h, true));
         this.tblDragService.columnMove.subscribe(c => this.processColMove(c));
         this.dataTableService.currGrouping.subscribe(g => this.processGrouping(g));
-        setTimeout(() => this.setTableHeight(510), 1000); //for demo
         this.dataHasBeenSet.set(true);
     }
     getAllColsAtRuntime(excludeHidden) {
@@ -4969,21 +5105,124 @@ class NgxDeebodata {
             catch (e) { }
         }
     }
-    setTableHeight(h) {
-        this.dataTableService.dTblHeight = h;
+    setTableHeight(h, manual) {
+        this.dataTableService.dTblHeight.set(h);
         setTimeout(() => {
             this.dataTableService.setTblBounds();
             this.chartHgt = this.dataTable.nativeElement.getBoundingClientRect().height + "px";
             if (!this.dataTableService.showCharts() && !this.currGroupValues().length) {
-                const el = this.dataTableBody?.nativeElement;
+                this.dataTableBody?.nativeElement.scrollBy(0, (this.scrollDir === "down" ? 1 : -1));
+                setTimeout(() => { this.setRowSelChecksPlacement(); }, 0);
+            }
+            if (this.currGroupValues().length) {
+                setTimeout(() => { this.dataTableService.gridScrollEndWhileGrouped.next(true); }, 0);
+            }
+            else {
+                if (manual && !this.dataTableService.showCharts()) {
+                    this.dataTableService.listenForScroll.set(false);
+                    if (this.tblDragService.handleTblHtTO)
+                        clearTimeout(this.tblDragService.handleTblHtTO);
+                    this.tblDragService.handleTblHtTO = setTimeout(() => { this.handleRowsOnHeightIncrease(); }, 250);
+                }
+            }
+        }, 0);
+    }
+    handleRowsOnHeightIncrease() {
+        const len = this.rows.length;
+        const defNum = this.dataTableService.defltRHgtNum;
+        const nRows = Math.floor(Math.abs(this.tblDragService.tblHgtDiff) / defNum);
+        const cols = [...this.columnNames];
+        const colLen = cols.length;
+        const vlen = this.dataTableService.visibleCols.length;
+        const lastVisInd = cols.indexOf(this.dataTableService.visibleCols[(vlen - 1)]) + 1;
+        if (this.tblDragService.tblHgtDiff > 0) { //add rows
+            let i = this.lastElRowIndex + 1;
+            let agoto = i + nRows;
+            const xtras = agoto - this.dataTableService.currFilData.length;
+            let bhToSub = 0;
+            let ahToSub = 0;
+            const applyRow = (o, setLast) => {
+                const item = this.dataTableService.currFilData[o];
+                if (item) {
+                    const index = this.dataTableService.currMapping[o] || this.dataTableService.findObjIndxInData(item);
+                    if (!this.rows.find(r => r.id === (this.dtr + index))) {
+                        const row = { id: this.dtr + index, index: index, width: this.useRowWid, cells: [], height: this.dataTableService.defltRHgt };
+                        let k = 0;
+                        for (k; k < colLen; k++) {
+                            const col = cols[k];
+                            if (col)
+                                addCell(item[col], col, row, (k <= lastVisInd));
+                        }
+                        if (setLast) {
+                            this.rows.push(row);
+                            if (bhToSub < this.belowHgt())
+                                bhToSub += defNum;
+                            else
+                                ahToSub += defNum;
+                            this.setLastRowIndex();
+                        }
+                        else {
+                            this.rows.unshift(row);
+                            ahToSub += defNum;
+                        }
+                        if (!this.dtChecks.includes(index))
+                            this.dtChecks.push(index);
+                    }
+                }
+            };
+            const addCell = (text, prop, row, visible) => {
+                if (prop && row) {
+                    const useProp = this.dataTableService.dataFilSrtTracker[prop];
+                    const notNum = (this.dataTableService.figureFilterType(prop) != "number" || /(year|yr|fy)/g.test(prop.toLocaleLowerCase())) ? true : false;
+                    const useTxt = this.dataTableService.figureCellText(text, notNum, this.dataTableService.dataFilSrtTracker[prop]["colCellSymbol"]);
+                    const colStyle = this.dataTableService.getColumnStyle(prop);
+                    row.cells?.push({
+                        column: prop,
+                        freeze: useProp.freeze,
+                        minimized: useProp.minimize,
+                        rawText: text,
+                        visible: visible,
+                        width: useProp.colWidth || this.dataTableService.useColWid,
+                        editable: useTxt.prop === "textContent" ? this.editable : false,
+                        dataType: this.dataTableService.figureFilterType(prop),
+                        text: (useTxt.prop === "textContent" ? useTxt.value : ""),
+                        html: (useTxt.prop !== "textContent" ? useTxt.value : ""),
+                        specialColClass: (colStyle ? (colStyle + this.common.elifyCol(useTxt.value)) : ""),
+                    });
+                }
+            };
+            for (i; i < agoto; i++)
+                applyRow(i, true);
+            if (xtras > 0) {
+                const elsLen = document.getElementsByClassName("data-table-row").length;
+                let x = (this.lastElRowIndex - elsLen) - 1;
+                let xgoto = x - xtras;
+                for (x; x >= xgoto; x--)
+                    applyRow(x);
+            }
+            if (bhToSub)
+                this.belowHgt.set((this.belowHgt() - bhToSub));
+            if (ahToSub)
+                this.aboveHgt.set((this.aboveHgt() - ahToSub));
+        }
+        else {
+            let bhToAdd = 0;
+            const goto = Math.max(0, (len - nRows));
+            for (var o = (len - 1); o >= goto; o--) {
+                let el = this.rows[o];
                 if (el) {
-                    el.scrollBy(0, 1);
-                    el.scrollBy(0, -1);
+                    this.rows = this.rows.filter(r => r.index !== el.index);
+                    this.dtChecks = this.dtChecks.filter(c => c !== el.index);
+                    bhToAdd += defNum;
                 }
-                setTimeout(() => { this.setRowSelChecksPlacement(); });
             }
-            if (this.currGroupValues().length)
-                setTimeout(() => { this.dataTableService.gridScrollEndWhileGrouped.next(true); });
+            if (bhToAdd)
+                this.belowHgt.set((this.belowHgt() + bhToAdd));
+        }
+        setTimeout(() => {
+            this.dataTableService.listenForScroll.set(true);
+            this.setRowNumbers();
+            this.tblDragService.tblHgtDiff = 0;
         });
     }
     openCharts() {
@@ -5027,7 +5266,7 @@ class NgxDeebodata {
                         this.columnHeaders.splice((inAft + 1), 0, addCol);
                 }
             }
-            setTimeout(() => {
+            timer(100).subscribe(() => {
                 let i = 0;
                 const els = document.getElementsByClassName("col-header");
                 const len = els.length;
@@ -5046,9 +5285,10 @@ class NgxDeebodata {
                 if (dtB) {
                     const willSclTo = dtB.scrollLeft;
                     this.renderCurrData(false);
-                    setTimeout(() => { dtB.scrollLeft = willSclTo; });
+                    timer(0).subscribe(() => { dtB.scrollLeft = willSclTo; });
                 }
-            }, 100);
+                this.setHoldingCheckCls();
+            });
         }
         this.clearValidatedEdit(null, true);
     }
@@ -5060,7 +5300,7 @@ class NgxDeebodata {
         this.aboveHgt.set(0);
         this.belowHgt.set(0);
         this.dtChecks = [];
-        this.rowNos.set([]);
+        this.rowNos = [];
         this.clearValidatedEdit(null, true);
         this.dataTableService.currMapping = {};
         this.dataTableService.currSelRows = [];
@@ -5293,12 +5533,25 @@ class NgxDeebodata {
             this.setRowNumbers();
         }
     }
+    cleanRowChecks() {
+        const len = this.dtChecks.length;
+        for (let i = (len - 1); i >= 0; i--) {
+            const chk = this.dtChecks[i];
+            if (this.dtChecks.filter(d => d === chk).length > 1) {
+                const cind = this.dtChecks.lastIndexOf(chk);
+                this.dtChecks = this.dtChecks.filter((d, ind) => ind !== cind);
+            }
+            const accRow = this.rows.find(r => r.index === chk);
+            if (!accRow)
+                this.dtChecks = this.dtChecks.filter(d => d !== chk);
+        }
+    }
     rowNTO = null;
     setRowNumbers() {
         const rlen = this.rows.length;
         if (this.rowNumbers && rlen) {
-            const hasHgt = this.rowNos().filter(r => r.height);
-            let rns = [];
+            const hasHgt = this.rowNos.filter(r => r.height);
+            this.rowNos = [];
             let n = (this.lastElRowIndex + 1) - rlen;
             for (n; n <= this.lastElRowIndex; n++) {
                 let rn = { number: n + 1 };
@@ -5307,13 +5560,18 @@ class NgxDeebodata {
                     if (hh)
                         rn.height = hh.height;
                 }
-                rns.push(rn);
+                this.rowNos.push(rn);
             }
-            this.rowNos.set([...rns]);
-            const r1 = document.getElementById("dataTableRow" + this.rows[0]?.index);
-            if (r1) {
-                const useCalc = -(this.dataTableService.tblTop - r1.getBoundingClientRect().top);
-                this.rowNumBody.nativeElement.style.marginTop = Math.min(useCalc, 0) + "px";
+            const listen = this.dataTableService.listenForScroll();
+            const r1 = document.getElementsByClassName("data-table-row")[0];
+            if (r1 && listen) {
+                const ty = (this.transY() * (this.scrollDir === "down" ? -1 : 1));
+                const useCalc = -(this.dataTableService.tblTop - r1.getBoundingClientRect().top) - ty;
+                this.rnBTop.set(Math.min(useCalc, 0));
+            }
+            else {
+                if (listen)
+                    this.rnBTop.set(0);
             }
         }
     }
@@ -5423,8 +5681,7 @@ class NgxDeebodata {
     }
     setLastRowIndex() {
         const realMax = this.dataTableService.currFilData.length - 1;
-        const defNum = parseInt(this.dataTableService.defltRHgt.replace(/[ ]?px/g, ""));
-        const wannabeMax = (this.rows.length - 1) + Math.floor(this.aboveHgt() / defNum);
+        const wannabeMax = (this.rows.length - 1) + Math.floor(this.aboveHgt() / this.dataTableService.defltRHgtNum);
         this.lastElRowIndex = Math.min(wannabeMax, realMax);
         return this.lastElRowIndex;
     }
@@ -5436,14 +5693,15 @@ class NgxDeebodata {
             const len = data.length;
             const colLen = cols.length;
             this.maxCols = this.setMaxCols();
-            const defNum = parseInt(this.dataTableService.defltRHgt.replace(/[ ]?px/g, ""));
-            const init = Math.max(this.dataTableService.dTblHeight / defNum);
+            const defNum = this.dataTableService.defltRHgtNum;
+            const init = Math.ceil(this.dataTableService.dTblHeight() / defNum) + this.rowElsPad;
             this.dataTableService.useColWid = Math.ceil((this.dataTableBody.nativeElement.getBoundingClientRect().width - 16) / Math.min(colLen, this.maxCols)) + "px";
             for (i; i < colLen; i++) {
                 this.columnHeaders.push({ column: cols[i], width: this.dataTableService.useColWid, hideMinCol: false, freeze: false, minimized: false, dataType: this.dataTableService.figureFilterType(cols[i]) });
                 if (i < this.maxCols)
                     this.dataTableService.visibleCols.push(cols[i]);
             }
+            this.setHoldingCheckCls();
             this.columnNames = this.columnHeaders.map(c => c.column);
             const initVisCols = cols.filter((c, ind) => ind <= (this.maxCols + 1));
             const addCell = (text, prop, row, indx) => {
@@ -5471,25 +5729,29 @@ class NgxDeebodata {
             };
             this.useRowWid = this.getAllColWidth(colLen) + "px";
             const limit = Math.min(init, len);
+            let localRows = [];
             for (n; n < limit; n++) {
-                this.rows.push({ id: "dataTableRow" + n, index: n, width: this.useRowWid, cells: [], height: this.dataTableService.defltRHgt });
+                const row = { id: "dataTableRow" + n, index: n, width: this.useRowWid, cells: [], height: this.dataTableService.defltRHgt };
                 let k = 0;
                 for (k; k < colLen; k++)
-                    addCell(data[n][cols[k]], cols[k], this.rows[n], n);
+                    addCell(data[n][cols[k]], cols[k], row, n);
+                localRows.push(row);
                 this.dataTableService.currMapping[n] = n;
             }
+            this.rows = [...localRows];
             this.setLastRowIndex();
             this.paginatorReady = true;
             this.handleTheme(color1, color2);
             this.handleColAnyDDFilters(data, cols);
-            setTimeout(() => {
+            if (len >= 500000)
+                this.doRowsMod = 15;
+            timer(0).subscribe(() => {
                 this.testHideMinBtn();
                 this.setColHeaderHgt();
-                this.setHoldingCheckCls();
                 this.setRowSelChecksPlacement();
                 this.dataTableService.setTblBounds();
             });
-            setTimeout(() => {
+            timer(250).subscribe(() => {
                 this.dataTableService.setIdealColumnWidth.next(true);
                 if (len > init) {
                     let total = 0;
@@ -5499,13 +5761,9 @@ class NgxDeebodata {
                         this.dataTableService.currMapping[z] = z;
                     }
                     this.belowHgt.set(total * defNum);
-                    setTimeout(() => { if (this.dataTableBody) {
-                        this.dataTableBody.nativeElement.scrollBy(0, 1);
-                        this.dataTableBody.nativeElement.scrollBy(0, -1);
-                    } });
                 }
                 this.setColsOnVisScreen();
-            }, 250);
+            });
             this.getPrimaryKey(cols);
         }
         catch (e) { }
@@ -5733,6 +5991,36 @@ class NgxDeebodata {
         }
         this.dataTableService.visibleCols = [...vCols];
     }
+    handleScrlBarDrag() {
+        this.dataTableService.mouseIsDown = false;
+        if (!this.finishScrollTO && this.dataTableService.currEditIndex === -1) {
+            timer(0).subscribe(() => { this.completeScroll(); this.dataTableService.listenForScroll.set(true); });
+        }
+        else {
+            this.dataTableService.listenForScroll.set(true);
+        }
+    }
+    setAllRowsDefHgt() {
+        let i = 0;
+        const len = this.rows.length;
+        for (i; i < len; i++)
+            this.setSingleRowHgt(this.dataTableService.defltRHgtNum, this.rows[i].id, true);
+    }
+    completeScroll() {
+        this.isScrolling = false;
+        this.finishScrollTO = null;
+        const dtb = this.dataTableBody?.nativeElement;
+        if (dtb) {
+            const lfs = this.dataTableService.listenForScroll();
+            this.execVertScrollUp(this.columnNames, this.columnNames.length, dtb.scrollTop, true);
+            this.execHorizScroll(dtb.scrollLeft);
+            this.handleScrollEnd();
+            if (lfs && this.rows.some(r => r.height !== this.dataTableService.defltRHgt))
+                this.setAllRowsDefHgt();
+            if (!lfs)
+                timer(0).subscribe(() => { this.dataTableService.listenForScroll.set(true); });
+        }
+    }
     handleScroll(event) {
         if (this.currGroupValues().length || this.dataTableService.showCharts())
             return;
@@ -5743,8 +6031,7 @@ class NgxDeebodata {
             this.execHorizScroll(left);
         /*horiz scroll*/
         /*vert scroll*/
-        if (top === this.verticalRest || this.lockVScroll) {
-            this.isScrolling = false;
+        if (top === this.verticalRest || this.lockVScroll || !this.dataTableService.listenForScroll()) {
             if (!this.dataTableService.autoScrollOnEdit)
                 this.clearValidatedEdit();
             return this.setRowSelChecksPlacement();
@@ -5754,6 +6041,9 @@ class NgxDeebodata {
         /*vert scroll*/
         if (top % 2 === 0)
             this.clearValidatedEdit();
+        if (this.finishScrollTO)
+            this.finishScrollTO.unsubscribe();
+        this.finishScrollTO = timer(150).subscribe(() => { this.completeScroll(); });
     }
     execHorizScroll(left) {
         const head = this.dataTableHeaders.nativeElement;
@@ -5766,36 +6056,38 @@ class NgxDeebodata {
         this.horizRest.set(left);
         this.setColsOnVisScreen();
     }
+    fixRowContainer(transY) {
+        this.transY.set(transY);
+    }
     execVertScroll(top) {
         if (top >= this.verticalRest) {
-            this.execVertScrollDown(this.columnNames, this.columnNames.length);
-            this.clearAboveFoldRows();
             this.scrollDir = "down";
+            this.execVertScrollDown(this.columnNames, this.columnNames.length, top);
         }
         else { //scrolling back up
-            this.execVertScrollUp(this.columnNames, this.columnNames.length);
-            this.clearBelowFoldRows();
             this.scrollDir = "up";
+            this.execVertScrollUp(this.columnNames, this.columnNames.length, top);
         }
         this.verticalRest = top;
-        if (this.rowNumbers && top % 2 === 0)
-            this.setRowNumbers();
     }
-    scrollDir = "down";
     handleScrollEnd() {
+        if (!this.dataTableService.listenForScroll())
+            return;
+        this.fixRowContainer(0);
         this.isScrolling = false;
         this.lockVScroll = false;
         if (this.currGroupValues().length)
-            return setTimeout(() => { this.dataTableService.gridScrollEndWhileGrouped.next(true); });
+            return timer(0).subscribe(() => { this.dataTableService.gridScrollEndWhileGrouped.next(true); });
         if (this.dataTableService.showCharts())
             return;
-        setTimeout(() => {
+        timer(0).subscribe(() => {
             this.dataTableService.autoScrollOnEdit = false;
             this.setColsOnVisScreen();
+            this.cleanRowChecks();
             this.setRowSelChecksPlacement();
             if (this.listenToCellDraggerMouseMove)
                 this.settleCellDragger();
-            setTimeout(() => { this.cleanUpPossibles(); this._cd.detectChanges(); });
+            timer(0).subscribe(() => { this.cleanUpPossibles(); });
         });
     }
     addCell(text, prop, visible) {
@@ -5817,6 +6109,23 @@ class NgxDeebodata {
             specialColClass: (colStyle ? (colStyle + this.common.elifyCol(useTxt.value)) : ""),
         };
     }
+    setCellsOnVertScroll(text, prop, row, vis) {
+        const useProp = this.dataTableService.dataFilSrtTracker[prop];
+        const notNum = (this.dataTableService.figureFilterType(prop) != "number" || /(year|yr|fy)/g.test(prop.toLocaleLowerCase())) ? true : false;
+        const useTxt = this.dataTableService.figureCellText(text, notNum, useProp["colCellSymbol"]);
+        const colStyle = this.dataTableService.getColumnStyle(prop);
+        row.cells = row.cells?.map(c => {
+            if (c.column === prop) {
+                c.visible = vis;
+                c.rawText = text;
+                c.specialColClass = (colStyle ? (colStyle + this.common.elifyCol(useTxt.value)) : "");
+                c.text = useTxt.prop === "textContent" ? useTxt.value : "";
+                c.html = useTxt.prop !== "textContent" ? useTxt.value : "";
+                return c;
+            }
+            return c;
+        });
+    }
     execHorizBodyScroll() {
         const allcols = this.getAllColsAtRuntime(null);
         let i = 0;
@@ -5867,11 +6176,11 @@ class NgxDeebodata {
                 }
             }
         }
-        setTimeout(() => {
+        timer(50).subscribe(() => {
             this.dataTableService.setIdealColumnWidth.next(true);
             this.setColsOnVisScreen();
-            setTimeout(() => { this.cleanUpPossibles(); });
-        }, 50);
+            timer(0).subscribe(() => { this.cleanUpPossibles(); });
+        });
     }
     cleanUpPossibles() {
         let i = 0;
@@ -5898,31 +6207,113 @@ class NgxDeebodata {
             }
         }
     }
-    execVertScrollDown(cols, colLen) {
-        let canAdd = 0;
-        const actvCols = this.columnHeaders.map(c => c.column);
-        const vlen = this.dataTableService.visibleCols.length;
-        const lastVisInd = actvCols.indexOf(this.dataTableService.visibleCols[(vlen - 1)]) + 1;
-        const bel = this.belowArea.nativeElement;
-        const bbds = bel.getBoundingClientRect();
-        const rTop = (bbds.top - this.verticalRest);
-        const gap = this.dataTableService.tblBot - rTop;
-        const defNum = parseInt(this.dataTableService.defltRHgt.replace(/[ ]?px/g, ""));
-        if (gap > 0) {
+    applyToDomRows(rows, cols, colLen, lastVisInd, dir, defNum, newRows) {
+        const len = this.rows.length;
+        let nrowsAcctFor = 0;
+        let chks = [];
+        if (dir === "down") {
+            let i = 0;
+            let ahToAdd = 0;
+            let bhToSub = 0;
+            for (i; i < len; i++) {
+                const row = this.rows[i]; //move the top x num of dom rows to the bottom
+                const vrow = rows[i]; //{index: index, data: item}
+                if (vrow && vrow.index !== row.index) {
+                    const index = vrow.index;
+                    const doIt = index > -1;
+                    if (doIt) {
+                        for (let k = (colLen - 1); k >= 0; k--) {
+                            const col = cols[k];
+                            if (col)
+                                this.setCellsOnVertScroll(vrow.data[col], col, row, (k <= lastVisInd)); //prepend
+                        }
+                    }
+                    if (nrowsAcctFor < newRows) {
+                        ahToAdd += defNum;
+                        bhToSub += defNum;
+                    }
+                    if (doIt) {
+                        row.id = this.dtr + index;
+                        row.index = index;
+                        if (!this.dtChecks.includes(index))
+                            chks.push(index);
+                    }
+                    nrowsAcctFor++;
+                }
+            }
+            if (chks.length)
+                this.dtChecks = [...this.dtChecks, ...chks];
+            if (ahToAdd)
+                this.aboveHgt.set((this.aboveHgt() + ahToAdd));
+            if (bhToSub)
+                this.belowHgt.set((this.belowHgt() - bhToSub));
+        }
+        else {
+            let v = 0;
+            const ulen = (len - 1);
+            let ahToSub = 0;
+            let bhToAdd = 0;
+            for (var o = ulen; o >= 0; o--) {
+                const row = this.rows[o];
+                const vrow = rows[v]; //{index: index, data: item}
+                if (vrow && vrow.index !== row.index) {
+                    const index = vrow.index;
+                    const doIt = index > -1;
+                    if (doIt) {
+                        for (let k = (colLen - 1); k >= 0; k--) {
+                            const col = cols[k];
+                            if (col)
+                                this.setCellsOnVertScroll(vrow.data[col], col, row, (k <= lastVisInd)); //prepend
+                        }
+                    }
+                    if (nrowsAcctFor < newRows) {
+                        ahToSub += defNum;
+                        bhToAdd += defNum;
+                    }
+                    if (doIt) {
+                        row.id = this.dtr + index;
+                        row.index = index;
+                        if (!this.dtChecks.includes(index))
+                            chks.push(index);
+                    }
+                    nrowsAcctFor++;
+                }
+                v++;
+            }
+            if (chks.length)
+                this.dtChecks = [...this.dtChecks, ...chks];
+            if (ahToSub)
+                this.aboveHgt.set((this.aboveHgt() - ahToSub));
+            if (bhToAdd)
+                this.belowHgt.set((this.belowHgt() + bhToAdd));
+        }
+        this.finishApplyingDomRows();
+    }
+    getLastRowBot() {
+        const els = document.getElementsByClassName("data-table-row");
+        return els[els.length - 1].getBoundingClientRect()?.bottom || this.dataTableService.tblBot;
+    }
+    execVertScrollDown(cols, colLen, currTop) {
+        let gap = this.dataTableService.tblBot - this.getLastRowBot();
+        this.fixRowContainer(gap);
+        timer(0).subscribe(() => {
             let h = 0;
+            let rows = [];
+            let canAdd = 0;
+            const maxRows = this.rows.length;
+            const doRows = (!this.isScrolling && (gap == 0 || !this.dataTableService.mouseIsDown)) || currTop % this.doRowsMod === 0;
+            const bel = this.belowArea.nativeElement;
+            const bbds = bel.getBoundingClientRect();
+            const btop = bbds.top;
+            const defNum = this.dataTableService.defltRHgtNum;
             let z = this.lastElRowIndex + 1;
-            // const last = document.getElementById("dataTableRow" + this.lastElRowIndex)
-            // if(last && this.dataTableService.elIsBelowFold(last, this.dataTableService.tblBot))
-            //     return;
             let bhToSub = 0;
             let ahToAdd = 0;
             const rowsInGap = Math.ceil(gap / defNum);
-            canAdd = z + (rowsInGap);
-            let chksToAdd = [];
-            let rowsToAdd = [];
+            canAdd = z + rowsInGap;
             const goTo = Math.min(this.dataTableService.currFilData.length, canAdd);
             for (z; z < goTo; z++) {
-                const wldBeElTop = bbds.top + (defNum * h);
+                const wldBeElTop = btop + (defNum * h);
                 const wldBeElBot = wldBeElTop + defNum;
                 if (wldBeElBot < this.dataTableService.tblTop) {
                     ahToAdd += defNum;
@@ -5931,54 +6322,51 @@ class NgxDeebodata {
                 else {
                     if (wldBeElTop <= this.dataTableService.tblBot) {
                         const item = this.dataTableService.currFilData[z];
-                        const index = this.dataTableService.currMapping[z] || this.dataTableService.findObjIndxInData(item);
-                        if (index > -1 && !this.rows.find(r => r.index === index)) {
-                            const nRow = { id: "dataTableRow" + index, index: index, width: this.useRowWid, cells: [], height: this.dataTableService.defltRHgt };
-                            let cells = [];
-                            for (let k = (colLen - 1); k >= 0; k--) {
-                                const col = cols[k];
-                                const cell = this.addCell(item[col], col, (k <= lastVisInd));
-                                if (typeof cell !== "string")
-                                    cells.unshift(cell);
-                            }
-                            nRow.cells = [...cells];
-                            chksToAdd.push(index);
-                            rowsToAdd.push(nRow);
-                            bhToSub += defNum;
-                        }
+                        const index = this.dataTableService.currMapping[z] || (doRows ? this.dataTableService.findObjIndxInData(item) : -1);
+                        if (rows.length < maxRows)
+                            rows.push({ index: index, data: item, elInd: z });
                     }
                 }
                 h += 1;
             }
             if (bhToSub)
-                this.belowHgt.set(Math.max(0, this.belowHgt() - bhToSub));
-            this.rows = [...this.rows, ...rowsToAdd];
+                this.belowHgt.set((this.belowHgt() - bhToSub));
             if (ahToAdd)
-                this.aboveHgt.set(this.aboveHgt() + ahToAdd);
-            if (chksToAdd.length)
-                this.dtChecks = [...this.dtChecks, ...chksToAdd];
-            this.setLastRowIndex();
-        }
+                this.aboveHgt.set((this.aboveHgt() + ahToAdd));
+            const repl = [...rows].length; //only new rows
+            const needsToFill = maxRows - repl;
+            if (needsToFill) {
+                let f = !rows.length ? this.lastElRowIndex : (rows[0].elInd - 1);
+                let fgoto = f - needsToFill;
+                for (f; f > fgoto; f--) {
+                    const item = this.dataTableService.currFilData[f];
+                    const index = this.dataTableService.currMapping[f] || (doRows ? this.dataTableService.findObjIndxInData(item) : -1);
+                    rows.unshift({ index: index, data: item });
+                }
+            }
+            const vlen = this.dataTableService.visibleCols.length;
+            const lastVisInd = cols.indexOf(this.dataTableService.visibleCols[(vlen - 1)]) + 1;
+            this.applyToDomRows(rows, cols, colLen, lastVisInd, "down", defNum, repl);
+        });
     }
-    execVertScrollUp(cols, colLen) {
-        const actvCols = this.columnHeaders.map(c => c.column);
-        const vlen = this.dataTableService.visibleCols.length;
-        const lastVisInd = actvCols.indexOf(this.dataTableService.visibleCols[(vlen - 1)]) + 1;
-        const ael = this.aboveArea.nativeElement;
-        const abds = ael.getBoundingClientRect();
-        const defNum = parseInt(this.dataTableService.defltRHgt.replace(/[ ]?px/g, ""));
-        const rbot = abds.bottom;
-        const gap = rbot - (this.dataTableService.tblTop);
-        if (gap > 0) {
+    getFirstRowTop() {
+        return document.getElementsByClassName("data-table-row")[0]?.getBoundingClientRect().top || this.dataTableService.tblTop;
+    }
+    execVertScrollUp(cols, colLen, currTop, force) {
+        let gap = this.getFirstRowTop() - this.dataTableService.tblTop;
+        this.fixRowContainer(-gap);
+        timer(0).subscribe(() => {
             let h = 0;
-            const rlen = this.rows.length;
-            let z = (this.lastElRowIndex - rlen);
-            if (z < 0)
-                return;
+            let rows = [];
+            const ael = this.aboveArea.nativeElement;
+            const abds = ael.getBoundingClientRect();
+            const rbot = abds.bottom;
+            const maxRows = this.rows.length;
+            const defNum = this.dataTableService.defltRHgtNum;
+            let z = (this.lastElRowIndex - maxRows);
             let bhToAdd = 0;
             let ahToSub = 0;
-            let mRows = [...this.rows];
-            let mChks = [...this.dtChecks];
+            const doRows = force || (!this.isScrolling && (gap == 0 || !this.dataTableService.mouseIsDown)) || currTop % this.doRowsMod === 0;
             const rowsInGap = Math.ceil(gap / defNum);
             const min = Math.max(0, (z - rowsInGap));
             for (z; z >= min; z--) {
@@ -5991,70 +6379,44 @@ class NgxDeebodata {
                 else {
                     if (wldBeElBot > this.dataTableService.tblTop) {
                         const item = this.dataTableService.currFilData[z];
-                        const index = this.dataTableService.currMapping[z] || this.dataTableService.findObjIndxInData(item);
-                        if (index > -1) {
-                            let k = 0;
-                            const nRow = { id: "dataTableRow" + index, index: index, width: this.useRowWid, cells: [], height: this.dataTableService.defltRHgt };
-                            let cells = [];
-                            for (k; k < colLen; k++) {
-                                const col = cols[k];
-                                const cell = this.addCell(item[col], col, (k <= lastVisInd));
-                                if (typeof cell !== "string")
-                                    cells.push(cell);
-                            }
-                            nRow.cells = [...cells];
-                            mRows = [nRow, ...mRows];
-                            mChks = [index, ...mChks];
-                            ahToSub += defNum;
-                        }
+                        const index = this.dataTableService.currMapping[z] || (doRows ? this.dataTableService.findObjIndxInData(item) : -1);
+                        if (rows.length < maxRows)
+                            rows.push({ index: index, data: item, elInd: z });
                     }
                 }
                 h += 1;
             }
             if (ahToSub)
-                this.aboveHgt.set(Math.max(0, (this.aboveHgt() - ahToSub)));
-            this.rows = [...mRows];
-            this.dtChecks = [...mChks];
+                this.aboveHgt.set((this.aboveHgt() - ahToSub));
             if (bhToAdd)
-                this.belowHgt.set(this.belowHgt() + bhToAdd);
-        }
-    }
-    clearAboveFoldRows() {
-        const els = this.rows.filter(r => this.dataTableService.elIsAboveFold(document.getElementById(r.id), (this.dataTableService.tblTop)));
-        const justids = els.map(e => e.id);
-        const justindx = els.map(e => e.index);
-        const changes = justids.length;
-        if (changes > 0) {
-            const defNum = parseInt(this.dataTableService.defltRHgt.replace(/[ ]?px/g, ""));
-            this.rows = this.rows.filter(r => justids.indexOf(r.id) < 0);
-            this.dtChecks = this.dtChecks.filter(c => justindx.indexOf(c) < 0);
-            const item = this.dataTableService.mainData[(this.rows[0]?.index || -1)];
-            if (item)
-                this.aboveHgt.set(Math.max(0, this.dataTableService.findObjIndxInData(item, this.dataTableService.currFilData) * defNum));
-        }
-    }
-    clearBelowFoldRows() {
-        const els = this.rows.filter(r => this.dataTableService.elIsBelowFold(document.getElementById(r.id), this.dataTableService.tblBot));
-        const justids = els.map(e => e.id);
-        const justindx = els.map(e => e.index);
-        let changes = justids.length;
-        if (changes > 0) {
-            const defNum = parseInt(this.dataTableService.defltRHgt.replace(/[ ]?px/g, ""));
-            this.rows = this.rows.filter(r => justids.indexOf(r.id) < 0);
-            this.dtChecks = this.dtChecks.filter(c => justindx.indexOf(c) < 0);
-            const rlen = this.rows.length;
-            const item = this.dataTableService.mainData[(this.rows[(rlen - 1)]?.index || -1)];
-            if (item)
-                this.belowHgt.set(Math.max(0, ((this.dataTableService.currFilData.length - 1) - this.dataTableService.findObjIndxInData(item, this.dataTableService.currFilData)) * defNum));
-            this.setLastRowIndex();
-        }
+                this.belowHgt.set((this.belowHgt() + bhToAdd));
+            const repl = [...rows].length; //only new rows
+            const needsToFill = maxRows - repl;
+            if (needsToFill) {
+                let f = (!rows.length ? (this.lastElRowIndex - maxRows) : rows[0].elInd) + 1;
+                let fgoto = f + needsToFill;
+                for (f; f < fgoto; f++) {
+                    const item = this.dataTableService.currFilData[f];
+                    const index = this.dataTableService.currMapping[f] || (doRows ? this.dataTableService.findObjIndxInData(item) : -1);
+                    rows.unshift({ index: index, data: item });
+                }
+            }
+            const vlen = this.dataTableService.visibleCols.length;
+            const lastVisInd = cols.indexOf(this.dataTableService.visibleCols[(vlen - 1)]) + 1;
+            this.applyToDomRows(rows, cols, colLen, lastVisInd, "up", defNum, repl);
+        });
+    }
+    finishApplyingDomRows() {
+        this.setRowNumbers();
+        this.fixRowContainer(0);
+        this.setLastRowIndex();
+        this.cleanRowChecks();
     }
     jumpToRow(row) {
         if (this.dataTableBody) {
             const ind = row - 1;
             const tbl = this.dataTableBody.nativeElement;
-            const defNum = parseInt(this.dataTableService.defltRHgt.replace(/[ ]?px/g, ""));
-            tbl.scrollTop = ind * defNum;
+            tbl.scrollTop = ind * this.dataTableService.defltRHgtNum;
             setTimeout(() => { this.setRowSelChecksPlacement(true); });
         }
     }
@@ -6067,18 +6429,17 @@ class NgxDeebodata {
             this.dataTableBody.nativeElement.scrollTop = etop - dttop;
         }
     }
-    valEditFocusTo = null;
     handleValidatedCellEditFocus(cellData) {
         this.validatedEditType = cellData.type;
         if (this.valEditFocusTo) {
-            clearTimeout(this.valEditFocusTo);
+            this.valEditFocusTo.unsubscribe();
             this.valEditFocusTo = null;
         }
         if (this.validatedEditType === "text") { //text w/ limited values
             this.currSelEditOpts = this.dataTableService.dataFilSrtTracker[this.dataTableService.currEditCol]["selDDVals"]?.
                 filter((g) => g.value !== "(Select All)").map((s) => ({ ...s, selected: s.value === cellData.value }));
         }
-        this.valEditFocusTo = setTimeout(() => {
+        this.valEditFocusTo = timer(10).subscribe(() => {
             const rel = this.validatedEdit.nativeElement;
             let el;
             const elD = document.querySelector(".relly.edit-input");
@@ -6094,13 +6455,19 @@ class NgxDeebodata {
                 (el || elD).style.height = (cbds.height - 2) + "px";
                 if (el) {
                     el.value = cellData.type === "date" ? new Date(cellData.value)?.toISOString().split("T")[0] : cellData.value;
-                    setTimeout(() => { el.focus(); });
+                    timer(0).subscribe(() => { el.focus(); setTimeout(() => { this.dataTableService.lockCellFocus.set(false); }); });
+                }
+                else {
+                    this.dataTableService.lockCellFocus.set(false);
                 }
                 rel.classList.remove("invisible");
                 this.fCellDragger.nativeElement.style.left = (Math.ceil(cbds.left - rbds.left) + cbds.width - 4) + "px";
                 this.fCellDragger.nativeElement.style.top = (Math.ceil(cbds.bottom - rbds.top) - 4) + "px";
             }
-        }, 50);
+            else {
+                this.dataTableService.lockCellFocus.set(false);
+            }
+        });
     }
     clearFCellDragger() {
         if (!this.dataTableService.autoScrollOnEdit) {
@@ -6138,6 +6505,7 @@ class NgxDeebodata {
     killValEdit() {
         this.validatedEditType = "";
         this.currSelEditOpts = [];
+        this.dataTableService.lockCellFocus.set(false);
         this.validatedEdit.nativeElement.classList.add("invisible");
     }
     handleDraggerMU(e) {
@@ -6175,8 +6543,6 @@ class NgxDeebodata {
                 targRow.dispatchEvent(mouseEvent);
                 targRow.removeEventListener("mousemove", execDragEOnDK);
                 setTimeout(() => { this.listenToCellDraggerMouseMove = false; });
-                if (e.target.getBoundingClientRect().bottom > (this.dataTableService.tblBot - 100))
-                    this.dataTableBody.nativeElement.scrollBy(0, this.dataTableService.dTblHeight / 2);
             }
         }
     }
@@ -6282,11 +6648,11 @@ class NgxDeebodata {
                     row.editedInDrag = true;
                     cell = document.querySelector("#dataTableRow" + dragId + " .data-cell-" + this.common.elifyCol(this.dataTableService.currEditCol));
                 }
-                if (els.length > 1) {
-                    const dir = this.scrollDir === "down" ? 1 : -1;
-                    const toScl = dir * (Math.ceil((e.offsetY || 20)) / 2);
-                    this.dataTableBody.nativeElement.scrollBy(0, toScl);
-                }
+                // if(els.length > 1){
+                //     const dir = this.scrollDir === "down" ? 1 : -1;
+                //     const toScl = dir*(Math.ceil((e.offsetY || 20))/2)
+                //     this.dataTableBody.nativeElement.scrollBy(0, toScl)
+                // }
                 const fCellDragger = document.getElementsByClassName("focused-cell-dragger")[0];
                 const par = fCellDragger?.parentElement;
                 if (cell && fCellDragger && par) {
@@ -6471,7 +6837,7 @@ class NgxDeebodata {
             val = Math.ceil(parseInt(val));
         const rHgt = force ? val : Math.max(val, (parseInt(this.desRowHeight) || Math.ceil(row.getBoundingClientRect().height)));
         const useHgt = Math.floor(rHgt) + "px";
-        if (typeof row === "string" && this.tblDragService.colDragStartFrmCellTracker.row && this.tblDragService.colDragStartFrmCellTracker.ystart) {
+        if (force || (typeof row === "string" && this.tblDragService.colDragStartFrmCellTracker.row && this.tblDragService.colDragStartFrmCellTracker.ystart)) {
             const drow = this.rows.find(r => r.id === row);
             if (drow) {
                 drow.height = useHgt;
@@ -6479,14 +6845,9 @@ class NgxDeebodata {
                     const item = this.dataTableService.mainData[drow?.index];
                     if (item) {
                         const indx = this.dataTableService.findObjIndxInData(item, this.dataTableService.currFilData) + 1;
-                        // const rNum = this.rowNos().find( r => r.number === indx)
-                        // if(rNum)
-                        //     rNum.height = useHgt
-                        this.rowNos.set(this.rowNos().map((r) => {
-                            if (r.number === indx)
-                                r.height = useHgt;
-                            return r;
-                        }));
+                        const rNum = this.rowNos.find(r => r.number === indx);
+                        if (rNum)
+                            rNum.height = useHgt;
                     }
                 }
             }
@@ -6613,8 +6974,9 @@ class NgxDeebodata {
         this.rows = [];
         this.aboveHgt.set(0);
         this.belowHgt.set(0);
-        this.rowNos.set([]);
+        this.rowNos = [];
         this.dtChecks = [];
+        this.doRowsMod = 10;
         this.clearValidatedEdit(null, true);
         this.dataTableService.currMapping = {};
         if (!this.currGroupValues().length) //only if not grouped
@@ -6629,13 +6991,15 @@ class NgxDeebodata {
         }
         this.lastElRowIndex = 0;
         let n = 0;
-        const defNum = parseInt(this.dataTableService.defltRHgt.replace(/[ ]?px/g, ""));
-        const init = Math.max(this.dataTableService.dTblHeight / defNum);
+        const defNum = this.dataTableService.defltRHgtNum;
+        const init = Math.ceil(this.dataTableService.dTblHeight() / defNum) + this.rowElsPad;
         const len = this.dataTableService.currFilData.length;
         if (!len) { //always just add 1
             this.allFilSortInfo.set(this.dataTableService.getAllFilSrtInfo());
             return setTimeout(() => { this.styleEmptyFilDataRow(tbody, tbodyX); });
         }
+        if (len >= 500000)
+            this.doRowsMod = 15;
         if (this.currGroupValues().length) { //don't add to rows here
             if (field)
                 this.columnOfInterest.set(field);
@@ -6691,21 +7055,23 @@ class NgxDeebodata {
             }
             horizLim = Math.max(horizLim, (uCols.map(c => c.column).indexOf(field) + offst));
         }
+        let localRows = [];
         for (n; n < limit; n++) {
             const item = this.dataTableService.currFilData[n];
             const index = !reset ? this.dataTableService.findObjIndxInData(item) : n;
             if (index > -1) {
                 const row = { id: "dataTableRow" + index, index: index, width: this.useRowWid, cells: [], height: this.dataTableService.defltRHgt };
-                this.rows.push(row);
                 let k = 0;
                 for (k; k < colLen; k++) {
                     const col = uCols[k]?.column;
                     if (col)
                         addCell(item[col], col, row, index, (k <= horizLim));
                 }
+                localRows.push(row);
                 this.dataTableService.currMapping[n] = index;
             }
         }
+        this.rows = [...localRows];
         this.setLastRowIndex();
         this.allFilSortInfo.set(this.dataTableService.getAllFilSrtInfo());
         this.dataTableService.mapperWorkerId += 1; //a reset but needs to incr so prev don't affect mapping 
@@ -6734,14 +7100,14 @@ class NgxDeebodata {
                 }
             }
             this.dataTableService.setIdealColumnWidth.next(true);
-            setTimeout(() => { this.setRowSelChecksPlacement(); this.setHoldingCheckCls(); });
+            timer(0).subscribe(() => { this.setRowSelChecksPlacement(); this.setHoldingCheckCls(); });
         }
     }
     styleEmptyFilDataRow(tbody, tbodyX) {
         const row = document.getElementsByClassName("data-table-row-no-data")[0];
         if (row) {
             row.style.width = this.dataTableHeaders.nativeElement.scrollWidth + "px";
-            setTimeout(() => tbody.scrollLeft = tbodyX, 100);
+            timer(100).subscribe(() => { tbody.scrollLeft = tbodyX; });
         }
     }
     freezeColCells(col) {
@@ -6780,17 +7146,17 @@ class NgxDeebodata {
             this.hiddenCols.push(col);
         else
             this.hiddenCols = this.hiddenCols.filter(c => c !== col);
-        setTimeout(() => { this.dataTableService.setTblBounds(); this.testHideMinBtn(); });
-        setTimeout(() => {
+        timer(0).subscribe(() => { this.dataTableService.setTblBounds(); this.testHideMinBtn(); });
+        timer(750).subscribe(() => {
             if (!fullClear || (fullClear && this.hiddenCols.length === 1)) {
                 this.setTableWidthOnChange();
-                setTimeout(() => {
+                timer(0).subscribe(() => {
                     this.dataTableBody.nativeElement.scrollBy(1, 0);
                     this.scrollAllGBPanels();
                     this.setRowSelChecksPlacement();
                 });
             }
-        }, 750);
+        });
     }
     scrollAllGBPanels() {
         let i = 0;
@@ -6908,8 +7274,8 @@ class NgxDeebodata {
         if (this.validationSub)
             this.validationSub.unsubscribe();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: NgxDeebodata, deps: [{ token: DataTableService }, { token: TableDragService }, { token: CommonService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: NgxDeebodata, isStandalone: true, selector: "ngx-deebodata", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, licenseKey: { classPropertyName: "licenseKey", publicName: "licenseKey", isSignal: false, isRequired: false, transformFunction: null }, color1: { classPropertyName: "color1", publicName: "color1", isSignal: false, isRequired: false, transformFunction: null }, color2: { classPropertyName: "color2", publicName: "color2", isSignal: false, isRequired: false, transformFunction: null }, primaryKey: { classPropertyName: "primaryKey", publicName: "primaryKey", isSignal: false, isRequired: false, transformFunction: null }, defRowHgt: { classPropertyName: "defRowHgt", publicName: "defRowHgt", isSignal: false, isRequired: false, transformFunction: null }, defGridHgt: { classPropertyName: "defGridHgt", publicName: "defGridHgt", isSignal: false, isRequired: false, transformFunction: null }, altRowColor: { classPropertyName: "altRowColor", publicName: "altRowColor", isSignal: false, isRequired: false, transformFunction: null }, myColumnSymbols: { classPropertyName: "myColumnSymbols", publicName: "myColumnSymbols", isSignal: false, isRequired: false, transformFunction: null }, myColumnStyles: { classPropertyName: "myColumnStyles", publicName: "myColumnStyles", isSignal: false, isRequired: false, transformFunction: null }, myColumnValueColors: { classPropertyName: "myColumnValueColors", publicName: "myColumnValueColors", isSignal: false, isRequired: false, transformFunction: null }, pieGraphColors: { classPropertyName: "pieGraphColors", publicName: "pieGraphColors", isSignal: false, isRequired: false, transformFunction: null }, removePieCovers: { classPropertyName: "removePieCovers", publicName: "removePieCovers", isSignal: false, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: false, isRequired: false, transformFunction: null }, rowNumbers: { classPropertyName: "rowNumbers", publicName: "rowNumbers", isSignal: false, isRequired: false, transformFunction: null }, forceGrouping: { classPropertyName: "forceGrouping", publicName: "forceGrouping", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { cellEdit: "cellEdit" }, host: { listeners: { "window:click": "onWindowClick($event)", "window:mouseup": "onWindowMouseUp($event)", "window:mousemove": "onWindowMouseMove($event)", "window:selectstart": "onWindowSelectStart($event)", "window:resize": "onWindowResize($event)", "window:scroll": "onWindowScroll($event)", "window:keydown.shift": "onWindowShiftKeydown($event)", "window:keyup.shift": "onWindowShiftKeyup($event)" } }, viewQueries: [{ propertyName: "dataTable", first: true, predicate: ["dataTable"], descendants: true, static: true }, { propertyName: "dataTableBody", first: true, predicate: ["dataTableBody"], descendants: true, static: true }, { propertyName: "aboveArea", first: true, predicate: ["aboveArea"], descendants: true, static: true }, { propertyName: "belowArea", first: true, predicate: ["belowArea"], descendants: true, static: true }, { propertyName: "validatedEdit", first: true, predicate: ["validatedEdit"], descendants: true, static: true }, { propertyName: "rowNumHeader", first: true, predicate: ["rowNumHeader"], descendants: true, static: true }, { propertyName: "rowNumBody", first: true, predicate: ["rowNumBody"], descendants: true, static: true }, { propertyName: "fCellDragger", first: true, predicate: ["fCellDragger"], descendants: true, static: true }, { propertyName: "selFilContainer", first: true, predicate: ["selFilContainer"], descendants: true, static: true }, { propertyName: "btnTogSelRows", first: true, predicate: ["btnTogSelRows"], descendants: true, static: true }, { propertyName: "dataTableHeaders", first: true, predicate: ["dataTableHeaders"], descendants: true, static: true }, { propertyName: "topLevelDataFilter", first: true, predicate: ["topLevelDataFilter"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"deebo-data-grid-section\">\r\n    <div class=\"hidden-cols\">\r\n        @for (hcol of hiddenCols; track hcol) {\r\n            <button type=\"button\" class=\"btn-maximize-col\" (click)=\"maximizeColCells(hcol)\">{{hcol}}</button>\r\n        }\r\n    </div>\r\n    <div class=\"controls\" >\r\n        <input type=\"text\" #topLevelDataFilter autocomplete=\"off\" name=\"topLevelDataFilter\" placeholder=\"Filter any column...\" \r\n        (input)=\"topFilterOnKeyUp($event)\" (keyup)=\"topFilterOnKeyUp($event)\" maxlength=\"255\" [(ngModel)]=\"topLevelFilter\" \r\n        [disabled]=\"dataTableService.showCharts() || !dataTableService.mainData.length || handlingSelRows\" autocomplete=\"off\" />\r\n        @if(currGroupValues().length){\r\n            <button type=\"button\" class=\"no-btn btn-clear-grp\" (click)=\"processGrouping(null)\">\r\n                <i class=\"material-icons error-message heavy v-mid\" aria-hidden=\"false\">close</i>&nbsp;<span class=\"md-text v-mid\">Grouping</span>\r\n            </button>\r\n        }\r\n        <button type=\"button\" class=\"no-btn btn-chart\" (click)=\"openCharts()\" [disabled]=\"dataTableService.showCharts() || !dataTableService.currFilData.length || handlingSelRows || !common.goodLs()\">\r\n            <i class=\"material-icons v-mid\" aria-hidden=\"false\">bar_chart</i>&nbsp;<span class=\"v-mid\">Insights</span>\r\n        </button>\r\n        <button type=\"button\" [disabled]=\"!dataTableService.currSelRows.length || handlingSelRows\" (click)=\"clearSelectedRows()\" class=\"btn-ctrl-sel-rows\">Deselect Rows</button>\r\n        <button #btnTogSelRows type=\"button\" [disabled]=\"!dataTableService.currSelRows.length || handlingSelRows\" (click)=\"toggleSelectedRows()\" class=\"btn-ctrl-sel-rows\">\r\n            <i class=\"material-icons\" aria-hidden=\"false\">check_box_outline_blank</i>&nbsp;<span>{{togSelRows}}</span>\r\n        </button>\r\n        <button [disabled]=\"!topLevelFilter && dataTableService.arefilSrtTrkPropsDefault()\" \r\n        class=\"btn-reset\" (click)=\"resetCurrentData()\" >Reset</button>\r\n    </div>\r\n    @if (!isScrolling){\r\n        <div class=\"relly\" [ngClass]=\"{'dt-checks': rowNumbers, 'hide' : isMultiFiltering() || dataTableService.isFiltering() || \r\n        dataTableService.isSorting() || currGroupValues().length || currSelEditOpts.length }\">\r\n            @for (chk of dtChecks; track $index) {\r\n                <input [id]=\"'checkDataTableRow' + chk\" class=\"select-row-check invisible\" \r\n                [checked]=\"dataTableService.currSelRows.indexOf(chk) > -1\" type=\"checkbox\" [name]=\"'checkDataTableRow' + chk\"\r\n                (click)=\"toggleSingleRowSelected(chk)\" (keyup.enter)=\"toggleSingleRowSelected(chk)\" [value]=\"'dataTableRow' + chk\" >\r\n            }\r\n        </div>\r\n    }\r\n    <div #selFilContainer class=\"relly sel-fil-container\">\r\n        <div class=\"selfil-opt-contain\" [ngStyle]=\"ddFilStyle\">\r\n            @for (opt of currFilOpts; track opt; let i = $index) {\r\n                <div class=\"selfil-div\">\r\n                    <label [for]=\"'selfilOpt' + currDDFilter + i\" class=\"'selfil-lbl-' + currDDFilter\"><input [id]=\"'selfilOpt' + currDDFilter + i\" \r\n                    [class]=\"'selfil-opt-' + currDDFilter\" (input)=\"handleMultiSelFilter(currDDFilter, opt.value, $event.target.checked)\" \r\n                    (click)=\"handleMultiSelFilter(currDDFilter, opt.value, $event.target.checked)\" [name]=\"'selfilOpt' + currDDFilter + i\" \r\n                    [checked]=\"opt.checked\" [value]=\"opt.value\" [disabled]=\"isMultiFiltering()\" type=\"checkbox\" />{{opt.value || \"(Blank)\"}}</label>\r\n                </div>\r\n            }\r\n        </div>\r\n    </div>\r\n    <div #validatedEdit class=\"relly special-edit-container invisible\">\r\n        @if (validatedEditType === 'date'){\r\n            <input id=\"selEditDate\" name=\"selEditDate\" type=\"date\" class=\"edit-input\" \r\n            (change)=\"execCellEdit($event, true)\" (input)=\"execCellEdit($event, true)\" (blur)=\"execCellEdit($event)\" />\r\n        }\r\n        @if (validatedEditType === 'number'){\r\n            <input id=\"selEditNum\" name=\"selEditNum\" type=\"number\" class=\"edit-input\" \r\n            (keyup)=\"execCellEdit($event, true)\" (input)=\"execCellEdit($event, true)\" (blur)=\"execCellEdit($event)\" (keyup.enter)=\"execCellEdit($event)\" />\r\n        }\r\n        @if (validatedEditType === 'text'){\r\n            <div class=\"relly edit-input\">\r\n                <div class=\"edit-input-option-cont\">\r\n                    <div class=\"edit-input-opt\"><button type=\"button\" class=\"no-btn\" (click)=\"execCellEdit($event, false, null)\">-</button></div>\r\n                    @for (opt of currSelEditOpts; track opt.value) {\r\n                        <div class=\"edit-input-opt\"><button type=\"button\" class=\"no-btn\" \r\n                            (click)=\"execCellEdit($event, false, opt.value)\">{{opt.value || \"(Blank)\"}}</button>\r\n                        </div>\r\n                    }\r\n                </div>\r\n            </div>\r\n        }\r\n    </div>\r\n    <div class=\"relly\" style=\"z-index: 6;\">\r\n        <div #fCellDragger tabindex=\"0\" id=\"fCellDragger\" (focus)=\"focusCellDragger()\" (blur)=\"execValClear(true)\"\r\n        (mousedown)=\"focusCellDraggerFromMouseDown()\" (keydown)=\"handleFDragTab($event)\" (keydown)=\"handleDraggerKD($event)\"\r\n        [ngClass]=\"{'hide': dataTableService.currEditIndex < 0, 'focused-cell-dragger': dataTableService.currEditIndex > -1 }\"></div>\r\n    </div>\r\n    @if(dataTableService.showCharts() && common.goodLs()){\r\n        <app-charts-and-graphs \r\n        [height]=\"chartHgt\"\r\n        [state]=\"chartState\"\r\n        [chartColumns]=\"columnsForCharts\"\r\n        (close)=\"closeCharts($event)\"\r\n        ></app-charts-and-graphs>\r\n    }\r\n    <div [ngClass]=\"{'row-numbers': rowNumbers && !dataTableService.showCharts() && !currGroupValues().length, 'hide': !rowNumbers || dataTableService.showCharts() || currGroupValues().length}\" >\r\n        <div #rowNumHeader class=\"row-num-header flex-center\"><div class=\"semi-heavy\">No.</div></div>\r\n        <div style=\"overflow: hidden;\" [style.height]=\"dataTableService.dTblHeight + 'px'\">\r\n            <div #rowNumBody style=\"overflow: auto\">\r\n                @for (num of rowNos(); track num.number) {\r\n                    <div [id]=\"'rn' + num.number\" class=\"flex-center num-row\" [style.height]=\"num.height || dataTableService.defltRHgt\">\r\n                        <div class=\"small-text\">{{num.number | number}}</div>\r\n                    </div>\r\n                }\r\n            </div>\r\n        </div>\r\n    </div><div #dataTable class=\"data-table\" [class.inline-table]=\"rowNumbers && !dataTableService.showCharts() && !currGroupValues().length\">\r\n        <div #dataTableHeaders class=\"data-table-headers\">\r\n            @for (col of columnHeaders; track col.column; let i = $index) {\r\n                <app-data-table-header\r\n                [columnHeader]=\"col\"\r\n                [colWid]=\"dataTableService.useColWid\"\r\n                [hideMinCol]=\"col.hideMinCol\"\r\n                [canFreeze]=\"i === 0 ? true : false\"\r\n                (reset)=\"resetCurrentData($event)\"\r\n                (freeze)=\"freezeColCells($event)\"\r\n                (minimize)=\"minimizeColEls($event)\"\r\n                (filFocus)=\"handleFilFocus($event)\"\r\n                (scrollOnFocus)=\"checkTabHorizScroll($event)\"\r\n                (emitCompFocus)=\"killSelFilOpts(true)\"\r\n                (filSelClick)=\"handleWinClickOnSelFil()\"\r\n                (height)=\"setHeaderHeight($event, true)\"\r\n                (render)=\"renderCurrData(false, $event.field)\"\r\n                (width)=\"handleSingleColResize($event.value, $event.column)\"\r\n                ></app-data-table-header>\r\n            }\r\n        </div>\r\n        <div #dataTableBody id=\"dataTableBody\" style=\"overflow: auto;\" [style.height]=\"dataTableService.dTblHeight + 'px'\" (scroll)=\"handleScroll($event)\"\r\n        [class.table-working]=\"isMultiFiltering() || dataTableService.isFiltering() || dataTableService.isSorting()\" (scrollend)=\"handleScrollEnd()\">\r\n            <div #aboveArea [style.height]=\"aboveHgt() + 'px'\"></div>\r\n            @for(row of rows; track row.index){\r\n                <div [id]=\"row.id\" class=\"data-table-row\" [attr.data-index]=\"row.index\"\r\n                [class.data-row-selected]=\"!dataTableService.displayOnlySelRows && dataTableService.currSelRows.indexOf(row.index) > -1\"\r\n                [ngStyle]=\"{'width': row.width, 'height': row.height}\" >\r\n                    @for(cell of row.cells; track cell.column){\r\n                        @if (isScrolling){\r\n                            <div class=\"data-cell data-cell-{{common.elifyCol(cell.column)}}{{cell.specialColClass}}\" \r\n                            [ngClass]=\"{ 'data-cell-riiight': cell.dataType === 'number', 'col-item-freeze': cell.freeze, 'col-header-minimized': cell.minimized }\"\r\n                            [ngStyle]=\"{'width': cell.width || dataTableService.useColWid, 'height': row.height}\" >{{cell.text}}@if (cell.html){<div class=\"mock-html\"></div>}</div>\r\n                        } @else {\r\n                            <app-data-cell [cell]=\"cell\" \r\n                            [rowId]=\"row.id\" \r\n                            [rawText]=\"cell.rawText\"\r\n                            [rowHeight]=\"row.height || ''\"\r\n                            (edit)=\"execCellEdit($event)\"\r\n                            (mousedown)=\"checkCellEditOnClick()\"\r\n                            [columnValClass]=\"cell.specialColClass\"\r\n                            (dragListen)=\"listenToCellDraggerMouseMove = $event\"\r\n                            [colWid]=\"cell.width || dataTableService.useColWid\"\r\n                            (width)=\"handleSingleColResize($event)\"\r\n                            (height)=\"setSingleRowHgt($event, row.id, true)\"\r\n                            (clearVEditFocus)=\"validatedEditType = $event\"\r\n                            (validateEditFocus)=\"handleValidatedCellEditFocus($event)\"\r\n                            ></app-data-cell>\r\n                        }\r\n                    }\r\n                </div>\r\n            }\r\n            <div #belowArea [style.height]=\"belowHgt() + 'px'\"></div>\r\n            @for(group of currGroupValues(); track group){\r\n                <app-row-group-panel\r\n                [groupValue]=\"group.value\"\r\n                [maxCols]=\"maxCols\"\r\n                [useRowWid]=\"useRowWid\"\r\n                [editable]=\"editable\"\r\n                [horizRest]=\"horizRest()\"\r\n                [columns]=\"columnNames\"\r\n                [showRowNumbers]=\"rowNumbers\"\r\n                [colOfInt]=\"columnOfInterest()\"\r\n                (horizPos)=\"setHorizPos($event)\"\r\n                (cellEdit)=\"execCellEdit($event)\"\r\n                (openEvt)=\"scrollToRowGroup($event)\"\r\n                ></app-row-group-panel>\r\n            }\r\n            @if(!dataTableService.currFilData.length && !currGroupValues().length){\r\n                <div [style.height]=\"dataTableService.dTblHeight + 'px'\" class=\"data-table-row flex-center data-table-row-no-data\" style=\"width: 100%; white-space: normal;\">\r\n                    <div class=\"center\">{{dataTableService.noDataMsg}}</div>\r\n                </div>\r\n            }\r\n        </div>\r\n    </div>\r\n    @if(paginatorReady){\r\n        <app-data-table-paginator\r\n        [filSortStr]=\"allFilSortInfo()\"\r\n        (jumpTo)=\"jumpToRow($event)\"\r\n        [totalRows]=\"dataTableService.currFilData.length\"\r\n        [disableJump]=\"dataTableService.showCharts() || currGroupValues().length > 0 || !dataTableService.currFilData.length || handlingSelRows\"\r\n        ></app-data-table-paginator><!--not an actual paginator-->\r\n    }\r\n    <div class=\"pad-top-thirty right\">\r\n        <div class=\"inline-b deebo-dd-contain-div\">\r\n            @if(canGroupBy().length > 0){\r\n                <app-row-group-menu\r\n                [groups]=\"canGroupBy()\"\r\n                [disableGB]=\"dataTableService.showCharts()\"\r\n                [enableClear]=\"currGroupValues().length ? true : false\"\r\n                ></app-row-group-menu>\r\n            }\r\n        </div><div class=\"inline-b deebo-dd-contain-div\">\r\n            @if(dataTableService.currFilData.length > 0){\r\n                <app-export-component\r\n                [columns]=\"columnHeaders\"\r\n                [disableExport]=\"dataTableService.showCharts()\"\r\n                [count]=\"dataTableService.currFilData.length\">\r\n                </app-export-component>\r\n            }\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host{--accent-color:rgb(50, 50, 50);--grid-color:rgb(199, 199, 199);--pad-left-base: 33px;--row-num-width: 75px;--reg-font-size: 17px }input[name=topLevelDataFilter]{float:left;padding:7px 5px;vertical-align:middle;box-shadow:0 0 1px 1px var(--grid-color);-moz-box-shadow:0 0 1px 1px var(--grid-color);-webkit-box-shadow:0 0 1px 1px var(--grid-color)}.deebo-dd-contain-div{margin:0 31px}.btn-chart,.btn-clear-grp{border-radius:3px}.btn-chart i{font-size:28px;vertical-align:middle;color:var(--accent-color)}.btn-chart:hover,.btn-clear-grp:hover{background:#e9e9e9;transition:background .5s ease}.dt-checks{margin-left:var(--row-num-width)}.row-numbers{margin-top:11px;display:inline-block;width:var(--row-num-width)}.row-num-header{background:#e9e9e9;box-sizing:border-box;border-bottom:1px solid var(--accent-color);border-right:1px solid var(--accent-color);box-shadow:0 -1px 3px 1px var(--grid-color);-moz-box-shadow:0 -1px 3px 1px var(--grid-color);-webkit-box-shadow:0 -1px 3px 1px var(--grid-color)}.num-row{white-space:nowrap;box-sizing:border-box;border-left:1px solid var(--grid-color);border-bottom:1px solid var(--grid-color)}.inline-table{display:inline-block;width:calc(100% - var(--row-num-width))}.special-edit-container{z-index:5;width:0!important;height:0!important}.edit-input{border:none;font-size:15px;box-shadow:none;position:absolute;background:#fff;-moz-box-shadow:none;-webkit-box-shadow:none;box-sizing:border-box}.edit-input[type=number]{text-align:right}.edit-input[type=date]{padding-left:17px}\n", "@charset \"UTF-8\";@font-face{font-family:Roboto Condensed;src:url(https://d2ffvluimla00s.cloudfront.net/RobotoCondensed-VariableFont_wght.ttf) format(\"ttf\")}@font-face{font-family:Material Icons;font-style:normal;font-weight:400;src:url(https://d2ffvluimla00s.cloudfront.net/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format(\"woff2\")}.deebo-data-grid-section{font-family:Roboto Condensed,Arial,Helvetica,sans-serif}:host{--accent-color:rgb(50, 50, 50);--grid-color:rgb(199, 199, 199);--pad-left-base: 33px;--row-num-width: 75px;--reg-font-size: 17px }.relly{position:relative}.hide{display:none!important;max-height:0;max-width:0;top:0;left:0;opacity:0}.ovy{overflow:auto}.no-ovy-y{overflow-y:hidden!important}.pad-top-sm{padding-top:4px!important}.pad-top-ten{padding-top:10px!important}.pad-top-teen{padding-top:17px}.pad-top-thirty,.pad-top-trey{padding-top:33px}.pad-top-much{padding-top:75px}.o-visible{overflow:visible}.dontwrap{white-space:nowrap}.inline-b{display:inline-block}.inline{display:inline}.half-wid{width:50%;vertical-align:top;display:inline-block}.qtr-wid{width:25%;vertical-align:top;display:inline-block}.third-wid{width:33.3%;vertical-align:top;display:inline-block}.two-third-wid{width:66.6%;vertical-align:top;display:inline-block}.three-qtr-wid{width:75%;vertical-align:top;display:inline-block}.v-top{vertical-align:top!important}.v-mid{vertical-align:middle!important}.v-bot{vertical-align:bottom!important}.lg-text{font-size:larger}.xlg-text{font-size:x-large!important}.md-text{font-size:var(--reg-font-size)!important}.small-text{font-size:small}.tiny-text{font-size:x-small}.invisible{visibility:hidden}.flex-center{display:flex;justify-content:center;align-items:center}.flex-item{flex:1 1 auto}.o-x-hidden{overflow-x:hidden!important}.no-weight{font-weight:400!important}.semi-heavy{font-weight:500!important}.heavy{font-weight:700!important}.marauto{margin:0 auto}.center{text-align:center}.left{text-align:left}.right{text-align:right}.btn-reset{border:none;color:#fff;padding:7px 11px;background:maroon}.error-message{color:maroon;font-weight:500}.success{color:green;font-weight:500}.neutral{color:var(--accent-color)}input,select{border:none;padding:4px;border-radius:3px;box-sizing:border-box;font-family:Roboto Condensed,Arial,Helvetica,sans-serif;box-shadow:0 0 1px 1px #afafaf;-moz-box-shadow:0 0 1px 1px #afafaf;-webkit-box-shadow:0 0 1px 1px #afafaf}input[type=radio],input[type=checkbox]{cursor:pointer;box-shadow:none!important;-moz-box-shadow:none!important;-webkit-box-shadow:none!important}button{cursor:pointer}button:focus,input:focus,select:focus,textarea:focus,a:focus{outline-width:0}button:disabled,input:disabled,select:disabled{opacity:.5;cursor:not-allowed}.prevent{opacity:.5;cursor:not-allowed;pointer-events:none}.controls{text-align:right;padding:16px 11px 6px 1px;max-width:100%;clear:both;overflow-x:auto;white-space:nowrap}.controls button{font-size:var(--reg-font-size);margin-right:31px;vertical-align:middle}.controls button span{vertical-align:middle}.controls button:last-of-type{margin-right:0}.data-table{margin-top:11px;overflow:hidden;box-shadow:0 -1px 3px 1px var(--grid-color);-moz-box-shadow:0 -1px 3px 1px var(--grid-color);-webkit-box-shadow:0 -1px 3px 1px var(--grid-color)}.sel-rows-checked{color:#00a8f399!important}.save-hilite{padding:2px 4px;border-radius:3px;background:#ebebeb;box-shadow:0 0 3px 1px var(--accent-color);-moz-box-shadow:0 0px 3px 1px var(--accent-color);-webkit-box-shadow:0 0px 3px 1px var(--accent-color)}.btn-ctrl-sel-rows,.btn-export-or-print{border:none;padding:3px 4px;border-radius:3px;background:#f5f5f5;vertical-align:middle;box-shadow:0 0 2px 1px var(--accent-color);-moz-box-shadow:0 0 2px 1px var(--accent-color);-webkit-box-shadow:0 0 2px 1px var(--accent-color)}.deebo-dd-contain-div:last-of-type{margin-right:0!important}.btn-export{width:100%;text-transform:uppercase}.btn-export:hover{text-decoration:underline}.btn-ctrl-sel-rows:hover,.btn-export-or-print:hover{background:#ebebeb;box-shadow:0 0 6px 2px gray;-moz-box-shadow:0 0 6px 2px gray;-webkit-box-shadow:0 0 6px 2px gray}.btn-center-selected{padding:2px 4px;border-radius:5px;background:#f5f5f5;box-shadow:0 0 6px 2px gray;-moz-box-shadow:0 0 6px 2px gray;-webkit-box-shadow:0 0 6px 2px gray}.btn-ctrl-sel-rows .material-icons{font-size:18px;font-weight:600;vertical-align:middle}.btn-ctrl-sel-rows .material-icons:not(.error-message){color:var(--accent-color)}.data-table-headers{cursor:pointer;white-space:nowrap;border-bottom:1px solid var(--grid-color)}.data-table-row{white-space:nowrap}.data-table-row:hover,.data-table-row .col-item-freeze:hover{background:#f3f3f3}.data-row-selected{background:#d6d6d6!important}.table-working{opacity:.1;pointer-events:none}.select-row-check{left:9px;z-index:10;cursor:pointer;margin:0;position:absolute;padding:0!important}.gb-row-num{left:2px;z-index:10;cursor:pointer;margin:0;font-size:x-small;position:absolute;padding:0!important}.mock-html{width:50%;height:18px;margin:0 auto;border-radius:11px;background:var(--grid-color)}.abs-right{top:7px;right:7px;position:absolute}.has-symbol:after{content:attr(data-symbol);padding-left:3px}.has-symbol-b:before{content:attr(data-symbol);padding-right:3px}.data-table-row-no-data{font-size:xx-large;color:gray;font-weight:500;text-shadow:-1px -1px var(--accent-color)}.data-row-selected .col-item-freeze,.data-row-selected .data-cell,.data-row-selected:hover,.data-row-selected .col-item-freeze:hover,.data-row-selected .data-cell:hover{background:#d6d6d6!important}.data-table-headers .col-item-freeze:first-of-type{border-bottom:1px solid var(--grid-color)}.col-header{z-index:2;width:125px;overflow:auto;cursor:grab;padding:7px 3px;text-align:center;position:relative;box-sizing:border-box;display:inline-block;vertical-align:top;white-space:pre-wrap;word-wrap:break-word;background:#fafafa;border-right:1px solid var(--grid-color)}.col-header button,.col-header span,.col-header select{cursor:pointer;vertical-align:middle}.col-header input{vertical-align:middle}.col-header-img-container{overflow-y:hidden;text-align:center;display:inline-block;vertical-align:middle;background-size:cover;background-position:center;background-repeat:no-repeat}.col-header-minimized{width:0!important;height:0!important;padding:0!important;overflow:hidden!important;border-bottom:none!important;border-right:none!important;transition:width .3s ease}.btn-maximize-col{border:none;border-radius:5px;background:#f5f5f5;box-shadow:0 0 3px 2px gray;font-size:var(--reg-font-size);margin-right:27px;padding:4px}.no-btn{border:none;background:none}.col-item-freeze{left:0;z-index:3;position:sticky;background:#fff;box-shadow:2px 0 3px 0 var(--grid-color);-moz-box-shadow:2px 0px 3px 0px var(--grid-color);-webkit-box-shadow:2px 0px 3px 0px var(--grid-color)}.col-header input,.select-filter{width:40%;margin:11px 0 1px}.sel-fil-container{z-index:5}.edit-input-option-cont{left:0;right:0}.edit-input-opt button{width:100%;font-size:15px;padding:11px 0 11px 17px;text-align:left!important}.selfil-opt-contain,.edit-input-option-cont{overflow:auto;max-height:240px;border-radius:5px;position:absolute;background:#fff;box-shadow:0 1px 3px 1px var(--grid-color);-moz-box-shadow:0 1px 3px 1px var(--grid-color);-webkit-box-shadow:0 1px 3px 1px var(--grid-color)}.selfil-div,.edit-input-opt{cursor:pointer;text-align:left;border-bottom:1px solid var(--grid-color)}.selfil-div:hover,.edit-input-opt:hover{background:#ebebeb}.selfil-div:last-of-type,.edit-input-opt:last-of-type{border-bottom:none}.selfil-div label{width:calc(100% - 22px);font-size:15px;cursor:pointer;padding:11px;display:inline-block}.selfil-div label input[type=checkbox]{margin-right:11px;vertical-align:middle}.select-filter-comparator{width:36px;z-index:3;opacity:0;position:relative;margin:11px 0 1px 15px}.btn-fil-comp{top:2px;left:-36px;border:none;position:absolute;background:#fafafa}.btn-fil-comp i{color:var(--accent-color)}@media screen and (min-width:960px){.col-header input,.select-filter,.select-filter-comparator{margin-top:7px;margin-bottom:1px}}.data-cell{width:125px;padding:11px 6px 11px 17px;overflow:auto;font-size:15px;word-wrap:break-word;white-space:pre-line;vertical-align:top;box-sizing:border-box;display:inline-flex;align-items:center;border-right:1px solid var(--grid-color);border-bottom:1px solid var(--grid-color)}input.edit-input{border-radius:0}.data-cell:focus,input.edit-input:focus{outline:1px solid #00a8f3}.dragger-cell-focused{background:#00a8f333;border-left:1px solid #00a8f3;border-right:1px solid #00a8f3!important}.focused-cell-dragger{width:9px;height:9px;cursor:crosshair;position:absolute;background:#00a8f3;box-shadow:0 0 1px 1px var(--accent-color);-moz-box-shadow:0 0 1px 1px var(--accent-color);-webkit-box-shadow:0 0 1px 1px var(--accent-color)}.holding-check{padding-left:44px}.data-cell-riiight{padding:11px 17px 11px 6px;justify-content:right}.data-cell-ceeenter{padding:11px 6px;justify-content:center!important}.cell-og-link{line-height:0;visibility:hidden}.cell-og-link:before{visibility:visible;content:attr(data-title)}.moveable-col{cursor:col-resize!important}.moveable-row{cursor:row-resize!important}.data-sort-arr{cursor:pointer;margin-left:11px;border:none;background:none;padding:0 0 0 2px;color:var(--accent-color)}.data-sort-arr .material-icons{font-size:20px}.data-col-info{left:10px;top:12px;padding:0;border:none;cursor:pointer;background:none;position:absolute;color:var(--accent-color)}.data-col-info .material-icons{font-size:16px}.sort-order-indicator{font-weight:600;vertical-align:middle;font-size:16px}.btn-min-col{cursor:pointer;top:0;right:2px;font-size:20px;border:none;background:none;position:absolute;padding:0 2px 5px 0;color:var(--accent-color)}.btn-min-col-hide{z-index:0;visibility:hidden;pointer-events:none}.btn-freeze-col{float:left;border:none;cursor:pointer;background:none}.btn-freeze-col .material-icons{font-size:16px;color:var(--accent-color)}.hidden-cols{max-width:100%;overflow-x:auto;clear:both;white-space:nowrap;padding:17px 15px 5px 4px}.hidden-cols button:first-of-type:before{content:\"Hidden Columns\";font-size:12px;font-weight:600;padding-right:11px;vertical-align:middle}.col-header span{word-wrap:break-word;vertical-align:middle;font-size:var(--reg-font-size)}.o-ins-div span,.o-ins-div i{vertical-align:middle;font-size:16px}.aux-chip{text-align:center;padding-bottom:33px;word-wrap:break-word;white-space:pre-wrap}.insights{padding:17px 15px}.insight-field{min-height:100px;padding:21px 0;font-size:large;white-space:pre-wrap;word-wrap:break-word;border-bottom:1px solid lightgray}@media screen and (max-width:760px){.insight-field:first-of-type{padding-top:7px}}@media screen and (min-width:760px){.insight-field-row{border-bottom:1px solid lightgray}.insight-field,.aux-chip{width:50%;vertical-align:top;display:inline-block;border-bottom:none}}@media screen and (min-width:1024px){.insight-field,.aux-chip{width:33%}}.chart-label-cont{padding-top:10px;text-align:center}.pie-piece-label{padding-top:5px;margin-right:27px;display:inline-block}.pie-piece-label-sq{width:11px;height:11px;margin:0 0 0 2px;display:inline-block;vertical-align:middle}.pie-piece-label span{font-size:small}.pie-piece-label span:before{font-size:smaller;padding-right:4px;font-weight:600;content:attr(data-percent)}.pie-layover{border-radius:50%;background:#fff;position:absolute;padding:5px!important;display:flex;font-size:17px;align-items:center;overflow:hidden;box-sizing:border-box;justify-content:center;color:var(--accent-color)}.pie-layover div{font-weight:500;padding:0!important}.ins-even-dist-ct{font-size:24px;font-weight:500}.line-graph-container{padding:11px 0 33px 7px!important;box-sizing:border-box;margin-left:11px}.lg-title-cont{padding:0!important;text-align:center;margin:17px 11px}.lg-n-marker-cont{width:60px;position:relative;padding:0!important;box-sizing:border-box;display:inline-block;vertical-align:top}.lg-n-marker-cont:before{top:45%;left:-37px;display:block;position:absolute;white-space:nowrap;color:var(--grid-color);content:attr(data-column);transform:rotate(-90deg)}.lg-n-marker,.lg-n-marker-h{padding:0 11px 0 0!important;font-size:small;position:relative;text-align:right;white-space:nowrap;box-sizing:border-box}.line-graph{width:calc(92% - 60px);position:relative;box-sizing:border-box;display:inline-block;vertical-align:top;padding:0!important;border-left:1px solid var(--accent-color);border-bottom:1px solid var(--accent-color)}.lg-lbl-x{left:0;right:0;bottom:-45px;font-size:small;font-weight:500;text-align:center;position:absolute;padding:0!important}.btn-line-graph-opts{margin:0;padding:4px;background:none;border-top:1px solid var(--accent-color);border-left:1px solid var(--accent-color);border-bottom:1px solid var(--accent-color)}.sp-line-graph-title{margin-top:7px;font-size:large;text-decoration:underline}.lg-dt-marker,.lg-dt-marker-h,.vd-n-marker,.vd-n-marker-h{bottom:-22px;font-size:small;position:absolute;text-align:center;padding:0!important;display:inline-block;box-sizing:border-box}.lg-dt-marker-h,.vd-n-marker-h{visibility:hidden}.lg-dt-marker.visible-marker{margin-left:21px}.lg-n-marker-h{height:0;visibility:hidden}.visible-marker{z-index:2;font-weight:600;background:#fff;height:unset!important;padding:1px 2px!important;visibility:visible!important;box-shadow:0 0 2px 1px #afafaf;-moz-box-shadow:0 0 2px 1px #afafaf;-webkit-box-shadow:0 0 2px 1px #afafaf}.visible-marker:before{font-weight:600}.lg-dt-marker:before{top:-15px;left:0;content:\"|\";position:absolute}.vd-n-marker:before{top:-15px;left:50%;content:\"|\";left:calc(50% - 2px);position:absolute}.lg-n-marker:before{top:-4px;right:-3px;content:\"-\";font-weight:600;font-size:large;position:absolute;background:#fff}.btn-line-graph-opts:hover{background:#d6d6d6;transition:background .3s ease}.btn-line-graph-opts:last-of-type{border-right:1px solid var(--accent-color)}.btn-lg-sel{color:#fff!important;background:var(--accent-color);box-shadow:0 0 2px 1px #afafaf;-moz-box-shadow:0 0 2px 1px #afafaf;-webkit-box-shadow:0 0 2px 1px #afafaf}.btn-lg-sel:hover{background:var(--accent-color)}.lg-plot{height:8px;width:8px;opacity:.3;cursor:pointer;border-radius:50%;position:absolute;padding:0!important;background:var(--accent-color)}.lg-plot:hover{z-index:100;opacity:1!important}.lg-plot:hover:after{padding:3px;display:inline-block;font-size:small;border-radius:5px;margin:0 0 0 25px;font-weight:700;content:attr(data-number);background:#fff!important;box-shadow:0 0 2px 1px #afafaf;-moz-box-shadow:0 0 2px 1px #afafaf;-webkit-box-shadow:0 0 2px 1px #afafaf}.lg-plot-opq{opacity:0;background:#fff}.lg-plot-opq:hover{opacity:1!important;background:var(--grid-color);transition:opacity .2s ease}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:\"liga\";-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}\n"], dependencies: [{ kind: "component", type: DataTableHeader, selector: "app-data-table-header", inputs: ["colWid", "canFreeze", "hideMinCol", "columnHeader"], outputs: ["sort", "render", "width", "height", "reset", "freeze", "filFocus", "filSelClick", "minimize", "emitCompFocus", "scrollOnFocus"] }, { kind: "component", type: DataCellComponent, selector: "app-data-cell", inputs: ["rawText", "cell", "rowId", "colWid", "rowHeight", "noColResize", "columnValClass"], outputs: ["width", "height", "edit", "dragListen", "validateEditFocus", "clearVEditFocus"] }, { kind: "component", type: DataTablePaginator, selector: "app-data-table-paginator", inputs: ["totalRows", "filSortStr", "disableJump"], outputs: ["jumpTo"] }, { kind: "component", type: ChartsAndGraphs, selector: "app-charts-and-graphs", inputs: ["height", "state", "chartColumns"], outputs: ["close"] }, { kind: "component", type: RowGroupMenu, selector: "app-row-group-menu", inputs: ["groups", "disableGB", "enableClear"] }, { kind: "component", type: RowGroupPanel, selector: "app-row-group-panel", inputs: ["horizRest", "colOfInt", "groupValue", "useRowWid", "maxCols", "editable", "columns", "showRowNumbers"], outputs: ["openEvt", "horizPos", "cellEdit"] }, { kind: "component", type: ExportComponent, selector: "app-export-component", inputs: ["disableExport", "count", "columns"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: DecimalPipe, name: "number" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: NgxDeebodata, deps: [{ token: DataTableService }, { token: TableDragService }, { token: CommonService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: NgxDeebodata, isStandalone: true, selector: "ngx-deebodata", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, licenseKey: { classPropertyName: "licenseKey", publicName: "licenseKey", isSignal: false, isRequired: false, transformFunction: null }, color1: { classPropertyName: "color1", publicName: "color1", isSignal: false, isRequired: false, transformFunction: null }, color2: { classPropertyName: "color2", publicName: "color2", isSignal: false, isRequired: false, transformFunction: null }, primaryKey: { classPropertyName: "primaryKey", publicName: "primaryKey", isSignal: false, isRequired: false, transformFunction: null }, defRowHgt: { classPropertyName: "defRowHgt", publicName: "defRowHgt", isSignal: false, isRequired: false, transformFunction: null }, defGridHgt: { classPropertyName: "defGridHgt", publicName: "defGridHgt", isSignal: false, isRequired: false, transformFunction: null }, altRowColor: { classPropertyName: "altRowColor", publicName: "altRowColor", isSignal: false, isRequired: false, transformFunction: null }, myColumnSymbols: { classPropertyName: "myColumnSymbols", publicName: "myColumnSymbols", isSignal: false, isRequired: false, transformFunction: null }, myColumnStyles: { classPropertyName: "myColumnStyles", publicName: "myColumnStyles", isSignal: false, isRequired: false, transformFunction: null }, myColumnValueColors: { classPropertyName: "myColumnValueColors", publicName: "myColumnValueColors", isSignal: false, isRequired: false, transformFunction: null }, pieGraphColors: { classPropertyName: "pieGraphColors", publicName: "pieGraphColors", isSignal: false, isRequired: false, transformFunction: null }, removePieCovers: { classPropertyName: "removePieCovers", publicName: "removePieCovers", isSignal: false, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: false, isRequired: false, transformFunction: null }, rowNumbers: { classPropertyName: "rowNumbers", publicName: "rowNumbers", isSignal: false, isRequired: false, transformFunction: null }, forceGrouping: { classPropertyName: "forceGrouping", publicName: "forceGrouping", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { cellEdit: "cellEdit" }, host: { listeners: { "window:click": "onWindowClick($event)", "window:mouseup": "onWindowMouseUp($event)", "window:mousedown": "onWindowMouseDown($event)", "window:mousemove": "onWindowMouseMove($event)", "window:selectstart": "onWindowSelectStart($event)", "window:resize": "onWindowResize($event)", "window:scroll": "onWindowScroll($event)", "window:keydown.shift": "onWindowShiftKeydown($event)", "window:keyup.shift": "onWindowShiftKeyup($event)" } }, viewQueries: [{ propertyName: "dataTable", first: true, predicate: ["dataTable"], descendants: true, static: true }, { propertyName: "dataTableBody", first: true, predicate: ["dataTableBody"], descendants: true, static: true }, { propertyName: "aboveArea", first: true, predicate: ["aboveArea"], descendants: true, static: true }, { propertyName: "belowArea", first: true, predicate: ["belowArea"], descendants: true, static: true }, { propertyName: "validatedEdit", first: true, predicate: ["validatedEdit"], descendants: true, static: true }, { propertyName: "rowNumHeader", first: true, predicate: ["rowNumHeader"], descendants: true, static: true }, { propertyName: "fCellDragger", first: true, predicate: ["fCellDragger"], descendants: true, static: true }, { propertyName: "selFilContainer", first: true, predicate: ["selFilContainer"], descendants: true, static: true }, { propertyName: "btnTogSelRows", first: true, predicate: ["btnTogSelRows"], descendants: true, static: true }, { propertyName: "dataTableHeaders", first: true, predicate: ["dataTableHeaders"], descendants: true, static: true }, { propertyName: "topLevelDataFilter", first: true, predicate: ["topLevelDataFilter"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"deebo-data-grid-section\">\r\n    <div class=\"hidden-cols\">\r\n        @for (hcol of hiddenCols; track hcol) {\r\n            <button type=\"button\" class=\"btn-maximize-col\" (click)=\"maximizeColCells(hcol)\">{{hcol}}</button>\r\n        }\r\n    </div>\r\n    <div class=\"controls\" >\r\n        <input type=\"text\" #topLevelDataFilter autocomplete=\"off\" name=\"topLevelDataFilter\" placeholder=\"Filter any column...\" \r\n        (input)=\"topFilterOnKeyUp($event)\" (keyup)=\"topFilterOnKeyUp($event)\" maxlength=\"255\" [(ngModel)]=\"topLevelFilter\" \r\n        [disabled]=\"dataTableService.showCharts() || !dataTableService.mainData.length || handlingSelRows\" autocomplete=\"off\" />\r\n        @if(currGroupValues().length){\r\n            <button type=\"button\" class=\"no-btn btn-clear-grp\" (click)=\"processGrouping(null)\">\r\n                <i class=\"material-icons error-message heavy v-mid\" aria-hidden=\"false\">close</i>&nbsp;<span class=\"md-text v-mid\">Grouping</span>\r\n            </button>\r\n        }\r\n        <button type=\"button\" class=\"no-btn btn-chart\" (click)=\"openCharts()\" [disabled]=\"dataTableService.showCharts() || !dataTableService.currFilData.length || handlingSelRows || !common.goodLs()\">\r\n            <i class=\"material-icons v-mid\" aria-hidden=\"false\">bar_chart</i>&nbsp;<span class=\"v-mid\">Insights</span>\r\n        </button>\r\n        <button type=\"button\" [disabled]=\"!dataTableService.currSelRows.length || handlingSelRows\" (click)=\"clearSelectedRows()\" class=\"btn-ctrl-sel-rows\">Deselect Rows</button>\r\n        <button #btnTogSelRows type=\"button\" [disabled]=\"!dataTableService.currSelRows.length || handlingSelRows\" (click)=\"toggleSelectedRows()\" class=\"btn-ctrl-sel-rows\">\r\n            <i class=\"material-icons\" aria-hidden=\"false\">check_box_outline_blank</i>&nbsp;<span>{{togSelRows}}</span>\r\n        </button>\r\n        <button [disabled]=\"!topLevelFilter && dataTableService.arefilSrtTrkPropsDefault()\" \r\n        class=\"btn-reset\" (click)=\"resetCurrentData()\" >Reset</button>\r\n    </div>\r\n    @if (!isScrolling){\r\n        <div class=\"relly\" [ngClass]=\"{'dt-checks': rowNumbers, 'hide' : isMultiFiltering() || dataTableService.isFiltering() || \r\n        dataTableService.isSorting() || currGroupValues().length || currSelEditOpts.length }\">\r\n            @for (chk of dtChecks; track $index) {\r\n                <input [id]=\"'checkDataTableRow' + chk\" class=\"select-row-check invisible\" \r\n                [checked]=\"dataTableService.currSelRows.indexOf(chk) > -1\" type=\"checkbox\" [name]=\"'checkDataTableRow' + chk\"\r\n                (click)=\"toggleSingleRowSelected(chk)\" (keyup.enter)=\"toggleSingleRowSelected(chk)\" [value]=\"'dataTableRow' + chk\" >\r\n            }\r\n        </div>\r\n    }\r\n    <div #selFilContainer class=\"relly sel-fil-container\">\r\n        <div class=\"selfil-opt-contain\" [ngStyle]=\"ddFilStyle\">\r\n            @for (opt of currFilOpts; track opt; let i = $index) {\r\n                <div class=\"selfil-div\">\r\n                    <label [for]=\"'selfilOpt' + currDDFilter + i\" class=\"'selfil-lbl-' + currDDFilter\"><input [id]=\"'selfilOpt' + currDDFilter + i\" \r\n                    [class]=\"'selfil-opt-' + currDDFilter\" (input)=\"handleMultiSelFilter(currDDFilter, opt.value, $event.target.checked)\" \r\n                    (click)=\"handleMultiSelFilter(currDDFilter, opt.value, $event.target.checked)\" [name]=\"'selfilOpt' + currDDFilter + i\" \r\n                    [checked]=\"opt.checked\" [value]=\"opt.value\" [disabled]=\"isMultiFiltering()\" type=\"checkbox\" />{{opt.value || \"(Blank)\"}}</label>\r\n                </div>\r\n            }\r\n        </div>\r\n    </div>\r\n    <div #validatedEdit class=\"relly special-edit-container invisible\">\r\n        @if (validatedEditType === 'date'){\r\n            <input id=\"selEditDate\" name=\"selEditDate\" type=\"date\" class=\"edit-input\" \r\n            (change)=\"execCellEdit($event, true)\" (input)=\"execCellEdit($event, true)\" (blur)=\"execCellEdit($event)\" />\r\n        }\r\n        @if (validatedEditType === 'number'){\r\n            <input id=\"selEditNum\" name=\"selEditNum\" type=\"number\" class=\"edit-input\" \r\n            (keyup)=\"execCellEdit($event, true)\" (input)=\"execCellEdit($event, true)\" (blur)=\"execCellEdit($event)\" (keyup.enter)=\"execCellEdit($event)\" />\r\n        }\r\n        @if (validatedEditType === 'text'){\r\n            <div class=\"relly edit-input\">\r\n                <div class=\"edit-input-option-cont\">\r\n                    <div class=\"edit-input-opt\"><button type=\"button\" class=\"no-btn\" (click)=\"execCellEdit($event, false, null)\">-</button></div>\r\n                    @for (opt of currSelEditOpts; track opt.value) {\r\n                        <div class=\"edit-input-opt\"><button type=\"button\" class=\"no-btn\" \r\n                            (click)=\"execCellEdit($event, false, opt.value)\">{{opt.value || \"(Blank)\"}}</button>\r\n                        </div>\r\n                    }\r\n                </div>\r\n            </div>\r\n        }\r\n    </div>\r\n    <div class=\"relly\" style=\"z-index: 6;\">\r\n        <div #fCellDragger tabindex=\"0\" id=\"fCellDragger\" (focus)=\"focusCellDragger()\" (blur)=\"execValClear(true)\"\r\n        (mousedown)=\"focusCellDraggerFromMouseDown()\" (keydown)=\"handleFDragTab($event)\" (keydown)=\"handleDraggerKD($event)\"\r\n        [ngClass]=\"{'hide': dataTableService.currEditIndex < 0, 'focused-cell-dragger': dataTableService.currEditIndex > -1 }\"></div>\r\n    </div>\r\n    @if(dataTableService.showCharts() && common.goodLs()){\r\n        <app-charts-and-graphs \r\n        [height]=\"chartHgt\"\r\n        [state]=\"chartState\"\r\n        [chartColumns]=\"columnsForCharts\"\r\n        (close)=\"closeCharts($event)\"\r\n        ></app-charts-and-graphs>\r\n    }\r\n    <div [ngClass]=\"{'row-numbers': rowNumbers && !dataTableService.showCharts() && !currGroupValues().length, 'hide': !rowNumbers || dataTableService.showCharts() || currGroupValues().length}\" >\r\n        <div #rowNumHeader class=\"row-num-header flex-center\"><div class=\"semi-heavy\">No.</div></div>\r\n        <div style=\"overflow: hidden;\" [style.height]=\"dataTableService.dTblHeight() + 'px'\">\r\n            <div [ngStyle]=\"{'overflow': 'auto', 'marginTop': rnBTop() + 'px' }\">\r\n                @for (num of rowNos; track num.number) {\r\n                    <div [id]=\"'rn' + num.number\" class=\"flex-center num-row\" [style.height]=\"num.height || dataTableService.defltRHgt\">\r\n                        <div class=\"small-text\">{{num.number | number}}</div>\r\n                    </div>\r\n                }\r\n            </div>\r\n        </div>\r\n    </div><div #dataTable class=\"data-table\" [class.inline-table]=\"rowNumbers && !dataTableService.showCharts() && !currGroupValues().length\">\r\n        <div #dataTableHeaders class=\"data-table-headers\">\r\n            @for (col of columnHeaders; track col.column; let i = $index) {\r\n                <app-data-table-header\r\n                [columnHeader]=\"col\"\r\n                [colWid]=\"dataTableService.useColWid\"\r\n                [hideMinCol]=\"col.hideMinCol\"\r\n                [canFreeze]=\"i === 0 ? true : false\"\r\n                (reset)=\"resetCurrentData($event)\"\r\n                (freeze)=\"freezeColCells($event)\"\r\n                (minimize)=\"minimizeColEls($event)\"\r\n                (filFocus)=\"handleFilFocus($event)\"\r\n                (scrollOnFocus)=\"checkTabHorizScroll($event)\"\r\n                (emitCompFocus)=\"killSelFilOpts(true)\"\r\n                (filSelClick)=\"handleWinClickOnSelFil()\"\r\n                (height)=\"setHeaderHeight($event, true)\"\r\n                (render)=\"renderCurrData(false, $event.field)\"\r\n                (width)=\"handleSingleColResize($event.value, $event.column)\"\r\n                ></app-data-table-header>\r\n            }\r\n        </div>\r\n        <div #dataTableBody id=\"dataTableBody\" style=\"overflow: auto;\" [style.height]=\"dataTableService.dTblHeight() + 'px'\" (scroll)=\"handleScroll($event)\"\r\n        [class.table-working]=\"isMultiFiltering() || dataTableService.isFiltering() || dataTableService.isSorting()\" (scrollend)=\"handleScrollEnd()\">\r\n            <div #aboveArea [ngStyle]=\"{'height': aboveHgt() + 'px', 'width': useRowWid}\"></div>\r\n            <div [style.transform]=\"'translateY('+transY()+'px)'\">\r\n                @for(row of rows; track $index){\r\n                    <div [id]=\"row.id\" class=\"data-table-row\" [attr.data-index]=\"row.index\"\r\n                    [class.data-row-selected]=\"!dataTableService.displayOnlySelRows && dataTableService.currSelRows.indexOf(row.index) > -1\"\r\n                    [ngStyle]=\"{'width': row.width, 'height': row.height}\" >\r\n                        @for(cell of row.cells; track cell.column){\r\n                            <app-data-cell [cell]=\"cell\" \r\n                            [rowId]=\"row.id\" \r\n                            [text]=\"cell.text || ''\"\r\n                            [html]=\"cell.html || ''\"\r\n                            [rawText]=\"cell.rawText\"\r\n                            [minimized]=\"cell.minimized\"\r\n                            [rowHeight]=\"row.height || ''\"\r\n                            (edit)=\"execCellEdit($event)\"\r\n                            (mousedown)=\"checkCellEditOnClick()\"\r\n                            [columnValClass]=\"cell.specialColClass\"\r\n                            (dragListen)=\"listenToCellDraggerMouseMove = $event\"\r\n                            [colWid]=\"cell.width || dataTableService.useColWid\"\r\n                            (width)=\"handleSingleColResize($event)\"\r\n                            (height)=\"setSingleRowHgt($event, row.id, true)\"\r\n                            (clearVEditFocus)=\"validatedEditType = $event\"\r\n                            (validateEditFocus)=\"handleValidatedCellEditFocus($event)\"\r\n                            ></app-data-cell>\r\n                        }\r\n                    </div>\r\n                }\r\n            </div>\r\n            <div #belowArea [ngStyle]=\"{'height': belowHgt() + 'px', 'width': useRowWid}\"></div>\r\n            @for(group of currGroupValues(); track group){\r\n                <app-row-group-panel\r\n                [groupValue]=\"group.value\"\r\n                [maxCols]=\"maxCols\"\r\n                [useRowWid]=\"useRowWid\"\r\n                [editable]=\"editable\"\r\n                [horizRest]=\"horizRest()\"\r\n                [columns]=\"columnNames\"\r\n                [showRowNumbers]=\"rowNumbers\"\r\n                [colOfInt]=\"columnOfInterest()\"\r\n                (horizPos)=\"setHorizPos($event)\"\r\n                (cellEdit)=\"execCellEdit($event)\"\r\n                (openEvt)=\"scrollToRowGroup($event)\"\r\n                ></app-row-group-panel>\r\n            }\r\n            @if(!dataTableService.currFilData.length && !currGroupValues().length){\r\n                <div [style.height]=\"dataTableService.dTblHeight() + 'px'\" class=\"data-table-row flex-center data-table-row-no-data\" style=\"width: 100%; white-space: normal;\">\r\n                    <div class=\"center\">{{dataTableService.noDataMsg}}</div>\r\n                </div>\r\n            }\r\n        </div>\r\n    </div>\r\n    @if(paginatorReady){\r\n        <app-data-table-paginator\r\n        [filSortStr]=\"allFilSortInfo()\"\r\n        (jumpTo)=\"jumpToRow($event)\"\r\n        [totalRows]=\"dataTableService.currFilData.length\"\r\n        [disableJump]=\"dataTableService.showCharts() || currGroupValues().length > 0 || !dataTableService.currFilData.length || handlingSelRows\"\r\n        ></app-data-table-paginator><!--not an actual paginator-->\r\n    }\r\n    <div class=\"pad-top-thirty right\">\r\n        <div class=\"inline-b deebo-dd-contain-div\">\r\n            @if(canGroupBy().length > 0){\r\n                <app-row-group-menu\r\n                [groups]=\"canGroupBy()\"\r\n                [disableGB]=\"dataTableService.showCharts()\"\r\n                [enableClear]=\"currGroupValues().length ? true : false\"\r\n                ></app-row-group-menu>\r\n            }\r\n        </div><div class=\"inline-b deebo-dd-contain-div\">\r\n            @if(dataTableService.currFilData.length > 0){\r\n                <app-export-component\r\n                [columns]=\"columnHeaders\"\r\n                [disableExport]=\"dataTableService.showCharts()\"\r\n                [count]=\"dataTableService.currFilData.length\">\r\n                </app-export-component>\r\n            }\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host{--accent-color:rgb(50, 50, 50);--grid-color:rgb(199, 199, 199);--pad-left-base: 33px;--row-num-width: 75px;--reg-font-size: 17px }input[name=topLevelDataFilter]{float:left;padding:7px 5px;vertical-align:middle;box-shadow:0 0 1px 1px var(--grid-color);-moz-box-shadow:0 0 1px 1px var(--grid-color);-webkit-box-shadow:0 0 1px 1px var(--grid-color)}.deebo-dd-contain-div{margin:0 31px}.btn-chart,.btn-clear-grp{border-radius:3px}.btn-chart i{font-size:28px;vertical-align:middle;color:var(--accent-color)}.btn-chart:hover,.btn-clear-grp:hover{background:#e9e9e9;transition:background .5s ease}.dt-checks{margin-left:var(--row-num-width)}.row-numbers{margin-top:11px;display:inline-block;width:var(--row-num-width)}.row-num-header{background:#e9e9e9;box-sizing:border-box;border-bottom:1px solid var(--accent-color);border-right:1px solid var(--accent-color);box-shadow:0 -1px 3px 1px var(--grid-color);-moz-box-shadow:0 -1px 3px 1px var(--grid-color);-webkit-box-shadow:0 -1px 3px 1px var(--grid-color)}.num-row{white-space:nowrap;box-sizing:border-box;border-left:1px solid var(--grid-color);border-bottom:1px solid var(--grid-color)}.inline-table{display:inline-block;width:calc(100% - var(--row-num-width))}.special-edit-container{z-index:5;width:0!important;height:0!important}.edit-input{border:none;font-size:15px;box-shadow:none;position:absolute;background:#fff;-moz-box-shadow:none;-webkit-box-shadow:none;box-sizing:border-box}.edit-input[type=number]{text-align:right}.edit-input[type=date]{padding-left:17px}\n", "@charset \"UTF-8\";@font-face{font-family:Roboto Condensed;src:url(https://d2ffvluimla00s.cloudfront.net/RobotoCondensed-VariableFont_wght.ttf) format(\"ttf\")}@font-face{font-family:Material Icons;font-style:normal;font-weight:400;src:url(https://d2ffvluimla00s.cloudfront.net/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format(\"woff2\")}.deebo-data-grid-section{font-family:Roboto Condensed,Arial,Helvetica,sans-serif}:host{--accent-color:rgb(50, 50, 50);--grid-color:rgb(199, 199, 199);--pad-left-base: 33px;--row-num-width: 75px;--reg-font-size: 17px }.relly{position:relative}.hide{display:none!important;max-height:0;max-width:0;top:0;left:0;opacity:0}.ovy{overflow:auto}.no-ovy-y{overflow-y:hidden!important}.pad-top-sm{padding-top:4px!important}.pad-top-ten{padding-top:10px!important}.pad-top-teen{padding-top:17px}.pad-top-thirty,.pad-top-trey{padding-top:33px}.pad-top-much{padding-top:75px}.o-visible{overflow:visible}.dontwrap{white-space:nowrap}.inline-b{display:inline-block}.inline{display:inline}.half-wid{width:50%;vertical-align:top;display:inline-block}.qtr-wid{width:25%;vertical-align:top;display:inline-block}.third-wid{width:33.3%;vertical-align:top;display:inline-block}.two-third-wid{width:66.6%;vertical-align:top;display:inline-block}.three-qtr-wid{width:75%;vertical-align:top;display:inline-block}.v-top{vertical-align:top!important}.v-mid{vertical-align:middle!important}.v-bot{vertical-align:bottom!important}.lg-text{font-size:larger}.xlg-text{font-size:x-large!important}.md-text{font-size:var(--reg-font-size)!important}.small-text{font-size:small}.tiny-text{font-size:x-small}.invisible{visibility:hidden}.flex-center{display:flex;justify-content:center;align-items:center}.flex-item{flex:1 1 auto}.o-x-hidden{overflow-x:hidden!important}.no-weight{font-weight:400!important}.semi-heavy{font-weight:500!important}.heavy{font-weight:700!important}.marauto{margin:0 auto}.center{text-align:center}.left{text-align:left}.right{text-align:right}.btn-reset{border:none;color:#fff;padding:7px 11px;background:maroon}.error-message{color:maroon;font-weight:500}.success{color:green;font-weight:500}.neutral{color:var(--accent-color)}input,select{border:none;padding:4px;border-radius:3px;box-sizing:border-box;font-family:Roboto Condensed,Arial,Helvetica,sans-serif;box-shadow:0 0 1px 1px #afafaf;-moz-box-shadow:0 0 1px 1px #afafaf;-webkit-box-shadow:0 0 1px 1px #afafaf}input[type=radio],input[type=checkbox]{cursor:pointer;box-shadow:none!important;-moz-box-shadow:none!important;-webkit-box-shadow:none!important}button{cursor:pointer}button:focus,input:focus,select:focus,textarea:focus,a:focus{outline-width:0}button:disabled,input:disabled,select:disabled{opacity:.5;cursor:not-allowed}.prevent{opacity:.5;cursor:not-allowed;pointer-events:none}.controls{text-align:right;padding:16px 11px 6px 1px;max-width:100%;clear:both;overflow-x:auto;white-space:nowrap}.controls button{font-size:var(--reg-font-size);margin-right:31px;vertical-align:middle}.controls button span{vertical-align:middle}.controls button:last-of-type{margin-right:0}.data-table{margin-top:11px;overflow:hidden;box-shadow:0 -1px 3px 1px var(--grid-color);-moz-box-shadow:0 -1px 3px 1px var(--grid-color);-webkit-box-shadow:0 -1px 3px 1px var(--grid-color)}.sel-rows-checked{color:#00a8f399!important}.save-hilite{padding:2px 4px;border-radius:3px;background:#ebebeb;box-shadow:0 0 3px 1px var(--accent-color);-moz-box-shadow:0 0px 3px 1px var(--accent-color);-webkit-box-shadow:0 0px 3px 1px var(--accent-color)}.btn-ctrl-sel-rows,.btn-export-or-print{border:none;padding:3px 4px;border-radius:3px;background:#f5f5f5;vertical-align:middle;box-shadow:0 0 2px 1px var(--accent-color);-moz-box-shadow:0 0 2px 1px var(--accent-color);-webkit-box-shadow:0 0 2px 1px var(--accent-color)}.deebo-dd-contain-div:last-of-type{margin-right:0!important}.btn-export{width:100%;text-transform:uppercase}.btn-export:hover{text-decoration:underline}.btn-ctrl-sel-rows:hover,.btn-export-or-print:hover{background:#ebebeb;box-shadow:0 0 6px 2px gray;-moz-box-shadow:0 0 6px 2px gray;-webkit-box-shadow:0 0 6px 2px gray}.btn-center-selected{padding:2px 4px;border-radius:5px;background:#f5f5f5;box-shadow:0 0 6px 2px gray;-moz-box-shadow:0 0 6px 2px gray;-webkit-box-shadow:0 0 6px 2px gray}.btn-ctrl-sel-rows .material-icons{font-size:18px;font-weight:600;vertical-align:middle}.btn-ctrl-sel-rows .material-icons:not(.error-message){color:var(--accent-color)}.data-table-headers{cursor:pointer;white-space:nowrap;border-bottom:1px solid var(--grid-color)}.data-table-row{white-space:nowrap}.data-table-row:hover,.data-table-row .col-item-freeze:hover{background:#f3f3f3}.data-row-selected{background:#d6d6d6!important}.table-working{opacity:.1;pointer-events:none}.select-row-check{left:9px;z-index:10;cursor:pointer;margin:0;position:absolute;padding:0!important}.gb-row-num{left:2px;z-index:10;cursor:pointer;margin:0;font-size:x-small;position:absolute;padding:0!important}.mock-html{width:50%;height:18px;margin:0 auto;border-radius:11px;background:var(--grid-color)}.abs-right{top:7px;right:7px;position:absolute}.has-symbol:after{content:attr(data-symbol);padding-left:3px}.has-symbol-b:before{content:attr(data-symbol);padding-right:3px}.data-table-row-no-data{font-size:xx-large;color:gray;font-weight:500;text-shadow:-1px -1px var(--accent-color)}.data-row-selected .col-item-freeze,.data-row-selected .data-cell,.data-row-selected:hover,.data-row-selected .col-item-freeze:hover,.data-row-selected .data-cell:hover{background:#d6d6d6!important}.data-table-headers .col-item-freeze:first-of-type{border-bottom:1px solid var(--grid-color)}.col-header{z-index:2;width:125px;overflow:auto;cursor:grab;padding:7px 3px;text-align:center;position:relative;box-sizing:border-box;display:inline-block;vertical-align:top;white-space:pre-wrap;word-wrap:break-word;background:#fafafa;border-right:1px solid var(--grid-color)}.col-header button,.col-header span,.col-header select{cursor:pointer;vertical-align:middle}.col-header input{vertical-align:middle}.col-header-img-container{overflow-y:hidden;text-align:center;display:inline-block;vertical-align:middle;background-size:cover;background-position:center;background-repeat:no-repeat}.col-header-minimized{width:0!important;height:0!important;padding:0!important;overflow:hidden!important;border-bottom:none!important;border-right:none!important;transition:width .3s ease}.btn-maximize-col{border:none;border-radius:5px;background:#f5f5f5;box-shadow:0 0 3px 2px gray;font-size:var(--reg-font-size);margin-right:27px;padding:4px}.no-btn{border:none;background:none}.col-item-freeze{left:0;z-index:3;position:sticky;background:#fff;box-shadow:2px 0 3px 0 var(--grid-color);-moz-box-shadow:2px 0px 3px 0px var(--grid-color);-webkit-box-shadow:2px 0px 3px 0px var(--grid-color)}.col-header input,.select-filter{width:40%;margin:11px 0 1px}.sel-fil-container{z-index:5}.edit-input-option-cont{left:0;right:0}.edit-input-opt button{width:100%;font-size:15px;padding:11px 0 11px 17px;text-align:left!important}.selfil-opt-contain,.edit-input-option-cont{overflow:auto;max-height:240px;border-radius:5px;position:absolute;background:#fff;box-shadow:0 1px 3px 1px var(--grid-color);-moz-box-shadow:0 1px 3px 1px var(--grid-color);-webkit-box-shadow:0 1px 3px 1px var(--grid-color)}.selfil-div,.edit-input-opt{cursor:pointer;text-align:left;border-bottom:1px solid var(--grid-color)}.selfil-div:hover,.edit-input-opt:hover{background:#ebebeb}.selfil-div:last-of-type,.edit-input-opt:last-of-type{border-bottom:none}.selfil-div label{width:calc(100% - 22px);font-size:15px;cursor:pointer;padding:11px;display:inline-block}.selfil-div label input[type=checkbox]{margin-right:11px;vertical-align:middle}.select-filter-comparator{width:36px;z-index:3;opacity:0;position:relative;margin:11px 0 1px 15px}.btn-fil-comp{top:2px;left:-36px;border:none;position:absolute;background:#fafafa}.btn-fil-comp i{color:var(--accent-color)}@media screen and (min-width:960px){.col-header input,.select-filter,.select-filter-comparator{margin-top:7px;margin-bottom:1px}}.data-cell{width:125px;padding:11px 6px 11px 17px;overflow:auto;font-size:15px;word-wrap:break-word;white-space:pre-line;vertical-align:top;box-sizing:border-box;display:inline-flex;align-items:center;border-right:1px solid var(--grid-color);border-bottom:1px solid var(--grid-color)}input.edit-input{border-radius:0}.data-cell:focus,input.edit-input:focus{outline:1px solid #00a8f3}.dragger-cell-focused{background:#00a8f333;border-left:1px solid #00a8f3;border-right:1px solid #00a8f3!important}.focused-cell-dragger{width:9px;height:9px;cursor:crosshair;position:absolute;background:#00a8f3;box-shadow:0 0 1px 1px var(--accent-color);-moz-box-shadow:0 0 1px 1px var(--accent-color);-webkit-box-shadow:0 0 1px 1px var(--accent-color)}.holding-check{padding-left:44px}.data-cell-riiight{padding:11px 17px 11px 6px;justify-content:right}.data-cell-ceeenter{padding:11px 6px;justify-content:center!important}.cell-og-link{line-height:0;visibility:hidden}.cell-og-link:before{visibility:visible;content:attr(data-title)}.moveable-col{cursor:col-resize!important}.moveable-row{cursor:row-resize!important}.data-sort-arr{cursor:pointer;margin-left:11px;border:none;background:none;padding:0 0 0 2px;color:var(--accent-color)}.data-sort-arr .material-icons{font-size:20px}.data-col-info{left:10px;top:12px;padding:0;border:none;cursor:pointer;background:none;position:absolute;color:var(--accent-color)}.data-col-info .material-icons{font-size:16px}.sort-order-indicator{font-weight:600;vertical-align:middle;font-size:16px}.btn-min-col{cursor:pointer;top:0;right:2px;font-size:20px;border:none;background:none;position:absolute;padding:0 2px 5px 0;color:var(--accent-color)}.btn-min-col-hide{z-index:0;visibility:hidden;pointer-events:none}.btn-freeze-col{float:left;border:none;cursor:pointer;background:none}.btn-freeze-col .material-icons{font-size:16px;color:var(--accent-color)}.hidden-cols{max-width:100%;overflow-x:auto;clear:both;white-space:nowrap;padding:17px 15px 5px 4px}.hidden-cols button:first-of-type:before{content:\"Hidden Columns\";font-size:12px;font-weight:600;padding-right:11px;vertical-align:middle}.col-header span{word-wrap:break-word;vertical-align:middle;font-size:var(--reg-font-size)}.o-ins-div span,.o-ins-div i{vertical-align:middle;font-size:16px}.aux-chip{text-align:center;padding-bottom:33px;word-wrap:break-word;white-space:pre-wrap}.insights{padding:17px 15px}.insight-field{min-height:100px;padding:21px 0;font-size:large;white-space:pre-wrap;word-wrap:break-word;border-bottom:1px solid lightgray}@media screen and (max-width:760px){.insight-field:first-of-type{padding-top:7px}}@media screen and (min-width:760px){.insight-field-row{border-bottom:1px solid lightgray}.insight-field,.aux-chip{width:50%;vertical-align:top;display:inline-block;border-bottom:none}}@media screen and (min-width:1024px){.insight-field,.aux-chip{width:33%}}.chart-label-cont{padding-top:10px;text-align:center}.pie-piece-label{padding-top:5px;margin-right:27px;display:inline-block}.pie-piece-label-sq{width:11px;height:11px;margin:0 0 0 2px;display:inline-block;vertical-align:middle}.pie-piece-label span{font-size:small}.pie-piece-label span:before{font-size:smaller;padding-right:4px;font-weight:600;content:attr(data-percent)}.pie-layover{border-radius:50%;background:#fff;position:absolute;padding:5px!important;display:flex;font-size:17px;align-items:center;overflow:hidden;box-sizing:border-box;justify-content:center;color:var(--accent-color)}.pie-layover div{font-weight:500;padding:0!important}.ins-even-dist-ct{font-size:24px;font-weight:500}.line-graph-container{padding:11px 0 33px 7px!important;box-sizing:border-box;margin-left:11px}.lg-title-cont{padding:0!important;text-align:center;margin:17px 11px}.lg-n-marker-cont{width:60px;position:relative;padding:0!important;box-sizing:border-box;display:inline-block;vertical-align:top}.lg-n-marker-cont:before{top:45%;left:-37px;display:block;position:absolute;white-space:nowrap;color:var(--grid-color);content:attr(data-column);transform:rotate(-90deg)}.lg-n-marker,.lg-n-marker-h{padding:0 11px 0 0!important;font-size:small;position:relative;text-align:right;white-space:nowrap;box-sizing:border-box}.line-graph{width:calc(92% - 60px);position:relative;box-sizing:border-box;display:inline-block;vertical-align:top;padding:0!important;border-left:1px solid var(--accent-color);border-bottom:1px solid var(--accent-color)}.lg-lbl-x{left:0;right:0;bottom:-45px;font-size:small;font-weight:500;text-align:center;position:absolute;padding:0!important}.btn-line-graph-opts{margin:0;padding:4px;background:none;border-top:1px solid var(--accent-color);border-left:1px solid var(--accent-color);border-bottom:1px solid var(--accent-color)}.sp-line-graph-title{margin-top:7px;font-size:large;text-decoration:underline}.lg-dt-marker,.lg-dt-marker-h,.vd-n-marker,.vd-n-marker-h{bottom:-22px;font-size:small;position:absolute;text-align:center;padding:0!important;display:inline-block;box-sizing:border-box}.lg-dt-marker-h,.vd-n-marker-h{visibility:hidden}.lg-dt-marker.visible-marker{margin-left:21px}.lg-n-marker-h{height:0;visibility:hidden}.visible-marker{z-index:2;font-weight:600;background:#fff;height:unset!important;padding:1px 2px!important;visibility:visible!important;box-shadow:0 0 2px 1px #afafaf;-moz-box-shadow:0 0 2px 1px #afafaf;-webkit-box-shadow:0 0 2px 1px #afafaf}.visible-marker:before{font-weight:600}.lg-dt-marker:before{top:-15px;left:0;content:\"|\";position:absolute}.vd-n-marker:before{top:-15px;left:50%;content:\"|\";left:calc(50% - 2px);position:absolute}.lg-n-marker:before{top:-4px;right:-3px;content:\"-\";font-weight:600;font-size:large;position:absolute;background:#fff}.btn-line-graph-opts:hover{background:#d6d6d6;transition:background .3s ease}.btn-line-graph-opts:last-of-type{border-right:1px solid var(--accent-color)}.btn-lg-sel{color:#fff!important;background:var(--accent-color);box-shadow:0 0 2px 1px #afafaf;-moz-box-shadow:0 0 2px 1px #afafaf;-webkit-box-shadow:0 0 2px 1px #afafaf}.btn-lg-sel:hover{background:var(--accent-color)}.lg-plot{height:8px;width:8px;opacity:.3;cursor:pointer;border-radius:50%;position:absolute;padding:0!important;background:var(--accent-color)}.lg-plot:hover{z-index:100;opacity:1!important}.lg-plot:hover:after{padding:3px;display:inline-block;font-size:small;border-radius:5px;margin:0 0 0 25px;font-weight:700;content:attr(data-number);background:#fff!important;box-shadow:0 0 2px 1px #afafaf;-moz-box-shadow:0 0 2px 1px #afafaf;-webkit-box-shadow:0 0 2px 1px #afafaf}.lg-plot-opq{opacity:0;background:#fff}.lg-plot-opq:hover{opacity:1!important;background:var(--grid-color);transition:opacity .2s ease}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:\"liga\";-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}\n"], dependencies: [{ kind: "component", type: DataTableHeader, selector: "app-data-table-header", inputs: ["colWid", "canFreeze", "hideMinCol", "columnHeader"], outputs: ["sort", "render", "width", "height", "reset", "freeze", "filFocus", "filSelClick", "minimize", "emitCompFocus", "scrollOnFocus"] }, { kind: "component", type: DataCellComponent, selector: "app-data-cell", inputs: ["text", "html", "minimized", "rawText", "cell", "rowId", "colWid", "rowHeight", "noColResize", "columnValClass"], outputs: ["width", "height", "edit", "dragListen", "validateEditFocus", "clearVEditFocus"] }, { kind: "component", type: DataTablePaginator, selector: "app-data-table-paginator", inputs: ["totalRows", "filSortStr", "disableJump"], outputs: ["jumpTo"] }, { kind: "component", type: ChartsAndGraphs, selector: "app-charts-and-graphs", inputs: ["height", "state", "chartColumns"], outputs: ["close"] }, { kind: "component", type: RowGroupMenu, selector: "app-row-group-menu", inputs: ["groups", "disableGB", "enableClear"] }, { kind: "component", type: RowGroupPanel, selector: "app-row-group-panel", inputs: ["horizRest", "colOfInt", "groupValue", "useRowWid", "maxCols", "editable", "columns", "showRowNumbers"], outputs: ["openEvt", "horizPos", "cellEdit"] }, { kind: "component", type: ExportComponent, selector: "app-export-component", inputs: ["disableExport", "count", "columns"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: DecimalPipe, name: "number" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: NgxDeebodata, decorators: [{
             type: Component,
@@ -6924,13 +7290,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                         FormsModule,
                         DecimalPipe,
                         CommonModule,
-                    ], template: "<div class=\"deebo-data-grid-section\">\r\n    <div class=\"hidden-cols\">\r\n        @for (hcol of hiddenCols; track hcol) {\r\n            <button type=\"button\" class=\"btn-maximize-col\" (click)=\"maximizeColCells(hcol)\">{{hcol}}</button>\r\n        }\r\n    </div>\r\n    <div class=\"controls\" >\r\n        <input type=\"text\" #topLevelDataFilter autocomplete=\"off\" name=\"topLevelDataFilter\" placeholder=\"Filter any column...\" \r\n        (input)=\"topFilterOnKeyUp($event)\" (keyup)=\"topFilterOnKeyUp($event)\" maxlength=\"255\" [(ngModel)]=\"topLevelFilter\" \r\n        [disabled]=\"dataTableService.showCharts() || !dataTableService.mainData.length || handlingSelRows\" autocomplete=\"off\" />\r\n        @if(currGroupValues().length){\r\n            <button type=\"button\" class=\"no-btn btn-clear-grp\" (click)=\"processGrouping(null)\">\r\n                <i class=\"material-icons error-message heavy v-mid\" aria-hidden=\"false\">close</i>&nbsp;<span class=\"md-text v-mid\">Grouping</span>\r\n            </button>\r\n        }\r\n        <button type=\"button\" class=\"no-btn btn-chart\" (click)=\"openCharts()\" [disabled]=\"dataTableService.showCharts() || !dataTableService.currFilData.length || handlingSelRows || !common.goodLs()\">\r\n            <i class=\"material-icons v-mid\" aria-hidden=\"false\">bar_chart</i>&nbsp;<span class=\"v-mid\">Insights</span>\r\n        </button>\r\n        <button type=\"button\" [disabled]=\"!dataTableService.currSelRows.length || handlingSelRows\" (click)=\"clearSelectedRows()\" class=\"btn-ctrl-sel-rows\">Deselect Rows</button>\r\n        <button #btnTogSelRows type=\"button\" [disabled]=\"!dataTableService.currSelRows.length || handlingSelRows\" (click)=\"toggleSelectedRows()\" class=\"btn-ctrl-sel-rows\">\r\n            <i class=\"material-icons\" aria-hidden=\"false\">check_box_outline_blank</i>&nbsp;<span>{{togSelRows}}</span>\r\n        </button>\r\n        <button [disabled]=\"!topLevelFilter && dataTableService.arefilSrtTrkPropsDefault()\" \r\n        class=\"btn-reset\" (click)=\"resetCurrentData()\" >Reset</button>\r\n    </div>\r\n    @if (!isScrolling){\r\n        <div class=\"relly\" [ngClass]=\"{'dt-checks': rowNumbers, 'hide' : isMultiFiltering() || dataTableService.isFiltering() || \r\n        dataTableService.isSorting() || currGroupValues().length || currSelEditOpts.length }\">\r\n            @for (chk of dtChecks; track $index) {\r\n                <input [id]=\"'checkDataTableRow' + chk\" class=\"select-row-check invisible\" \r\n                [checked]=\"dataTableService.currSelRows.indexOf(chk) > -1\" type=\"checkbox\" [name]=\"'checkDataTableRow' + chk\"\r\n                (click)=\"toggleSingleRowSelected(chk)\" (keyup.enter)=\"toggleSingleRowSelected(chk)\" [value]=\"'dataTableRow' + chk\" >\r\n            }\r\n        </div>\r\n    }\r\n    <div #selFilContainer class=\"relly sel-fil-container\">\r\n        <div class=\"selfil-opt-contain\" [ngStyle]=\"ddFilStyle\">\r\n            @for (opt of currFilOpts; track opt; let i = $index) {\r\n                <div class=\"selfil-div\">\r\n                    <label [for]=\"'selfilOpt' + currDDFilter + i\" class=\"'selfil-lbl-' + currDDFilter\"><input [id]=\"'selfilOpt' + currDDFilter + i\" \r\n                    [class]=\"'selfil-opt-' + currDDFilter\" (input)=\"handleMultiSelFilter(currDDFilter, opt.value, $event.target.checked)\" \r\n                    (click)=\"handleMultiSelFilter(currDDFilter, opt.value, $event.target.checked)\" [name]=\"'selfilOpt' + currDDFilter + i\" \r\n                    [checked]=\"opt.checked\" [value]=\"opt.value\" [disabled]=\"isMultiFiltering()\" type=\"checkbox\" />{{opt.value || \"(Blank)\"}}</label>\r\n                </div>\r\n            }\r\n        </div>\r\n    </div>\r\n    <div #validatedEdit class=\"relly special-edit-container invisible\">\r\n        @if (validatedEditType === 'date'){\r\n            <input id=\"selEditDate\" name=\"selEditDate\" type=\"date\" class=\"edit-input\" \r\n            (change)=\"execCellEdit($event, true)\" (input)=\"execCellEdit($event, true)\" (blur)=\"execCellEdit($event)\" />\r\n        }\r\n        @if (validatedEditType === 'number'){\r\n            <input id=\"selEditNum\" name=\"selEditNum\" type=\"number\" class=\"edit-input\" \r\n            (keyup)=\"execCellEdit($event, true)\" (input)=\"execCellEdit($event, true)\" (blur)=\"execCellEdit($event)\" (keyup.enter)=\"execCellEdit($event)\" />\r\n        }\r\n        @if (validatedEditType === 'text'){\r\n            <div class=\"relly edit-input\">\r\n                <div class=\"edit-input-option-cont\">\r\n                    <div class=\"edit-input-opt\"><button type=\"button\" class=\"no-btn\" (click)=\"execCellEdit($event, false, null)\">-</button></div>\r\n                    @for (opt of currSelEditOpts; track opt.value) {\r\n                        <div class=\"edit-input-opt\"><button type=\"button\" class=\"no-btn\" \r\n                            (click)=\"execCellEdit($event, false, opt.value)\">{{opt.value || \"(Blank)\"}}</button>\r\n                        </div>\r\n                    }\r\n                </div>\r\n            </div>\r\n        }\r\n    </div>\r\n    <div class=\"relly\" style=\"z-index: 6;\">\r\n        <div #fCellDragger tabindex=\"0\" id=\"fCellDragger\" (focus)=\"focusCellDragger()\" (blur)=\"execValClear(true)\"\r\n        (mousedown)=\"focusCellDraggerFromMouseDown()\" (keydown)=\"handleFDragTab($event)\" (keydown)=\"handleDraggerKD($event)\"\r\n        [ngClass]=\"{'hide': dataTableService.currEditIndex < 0, 'focused-cell-dragger': dataTableService.currEditIndex > -1 }\"></div>\r\n    </div>\r\n    @if(dataTableService.showCharts() && common.goodLs()){\r\n        <app-charts-and-graphs \r\n        [height]=\"chartHgt\"\r\n        [state]=\"chartState\"\r\n        [chartColumns]=\"columnsForCharts\"\r\n        (close)=\"closeCharts($event)\"\r\n        ></app-charts-and-graphs>\r\n    }\r\n    <div [ngClass]=\"{'row-numbers': rowNumbers && !dataTableService.showCharts() && !currGroupValues().length, 'hide': !rowNumbers || dataTableService.showCharts() || currGroupValues().length}\" >\r\n        <div #rowNumHeader class=\"row-num-header flex-center\"><div class=\"semi-heavy\">No.</div></div>\r\n        <div style=\"overflow: hidden;\" [style.height]=\"dataTableService.dTblHeight + 'px'\">\r\n            <div #rowNumBody style=\"overflow: auto\">\r\n                @for (num of rowNos(); track num.number) {\r\n                    <div [id]=\"'rn' + num.number\" class=\"flex-center num-row\" [style.height]=\"num.height || dataTableService.defltRHgt\">\r\n                        <div class=\"small-text\">{{num.number | number}}</div>\r\n                    </div>\r\n                }\r\n            </div>\r\n        </div>\r\n    </div><div #dataTable class=\"data-table\" [class.inline-table]=\"rowNumbers && !dataTableService.showCharts() && !currGroupValues().length\">\r\n        <div #dataTableHeaders class=\"data-table-headers\">\r\n            @for (col of columnHeaders; track col.column; let i = $index) {\r\n                <app-data-table-header\r\n                [columnHeader]=\"col\"\r\n                [colWid]=\"dataTableService.useColWid\"\r\n                [hideMinCol]=\"col.hideMinCol\"\r\n                [canFreeze]=\"i === 0 ? true : false\"\r\n                (reset)=\"resetCurrentData($event)\"\r\n                (freeze)=\"freezeColCells($event)\"\r\n                (minimize)=\"minimizeColEls($event)\"\r\n                (filFocus)=\"handleFilFocus($event)\"\r\n                (scrollOnFocus)=\"checkTabHorizScroll($event)\"\r\n                (emitCompFocus)=\"killSelFilOpts(true)\"\r\n                (filSelClick)=\"handleWinClickOnSelFil()\"\r\n                (height)=\"setHeaderHeight($event, true)\"\r\n                (render)=\"renderCurrData(false, $event.field)\"\r\n                (width)=\"handleSingleColResize($event.value, $event.column)\"\r\n                ></app-data-table-header>\r\n            }\r\n        </div>\r\n        <div #dataTableBody id=\"dataTableBody\" style=\"overflow: auto;\" [style.height]=\"dataTableService.dTblHeight + 'px'\" (scroll)=\"handleScroll($event)\"\r\n        [class.table-working]=\"isMultiFiltering() || dataTableService.isFiltering() || dataTableService.isSorting()\" (scrollend)=\"handleScrollEnd()\">\r\n            <div #aboveArea [style.height]=\"aboveHgt() + 'px'\"></div>\r\n            @for(row of rows; track row.index){\r\n                <div [id]=\"row.id\" class=\"data-table-row\" [attr.data-index]=\"row.index\"\r\n                [class.data-row-selected]=\"!dataTableService.displayOnlySelRows && dataTableService.currSelRows.indexOf(row.index) > -1\"\r\n                [ngStyle]=\"{'width': row.width, 'height': row.height}\" >\r\n                    @for(cell of row.cells; track cell.column){\r\n                        @if (isScrolling){\r\n                            <div class=\"data-cell data-cell-{{common.elifyCol(cell.column)}}{{cell.specialColClass}}\" \r\n                            [ngClass]=\"{ 'data-cell-riiight': cell.dataType === 'number', 'col-item-freeze': cell.freeze, 'col-header-minimized': cell.minimized }\"\r\n                            [ngStyle]=\"{'width': cell.width || dataTableService.useColWid, 'height': row.height}\" >{{cell.text}}@if (cell.html){<div class=\"mock-html\"></div>}</div>\r\n                        } @else {\r\n                            <app-data-cell [cell]=\"cell\" \r\n                            [rowId]=\"row.id\" \r\n                            [rawText]=\"cell.rawText\"\r\n                            [rowHeight]=\"row.height || ''\"\r\n                            (edit)=\"execCellEdit($event)\"\r\n                            (mousedown)=\"checkCellEditOnClick()\"\r\n                            [columnValClass]=\"cell.specialColClass\"\r\n                            (dragListen)=\"listenToCellDraggerMouseMove = $event\"\r\n                            [colWid]=\"cell.width || dataTableService.useColWid\"\r\n                            (width)=\"handleSingleColResize($event)\"\r\n                            (height)=\"setSingleRowHgt($event, row.id, true)\"\r\n                            (clearVEditFocus)=\"validatedEditType = $event\"\r\n                            (validateEditFocus)=\"handleValidatedCellEditFocus($event)\"\r\n                            ></app-data-cell>\r\n                        }\r\n                    }\r\n                </div>\r\n            }\r\n            <div #belowArea [style.height]=\"belowHgt() + 'px'\"></div>\r\n            @for(group of currGroupValues(); track group){\r\n                <app-row-group-panel\r\n                [groupValue]=\"group.value\"\r\n                [maxCols]=\"maxCols\"\r\n                [useRowWid]=\"useRowWid\"\r\n                [editable]=\"editable\"\r\n                [horizRest]=\"horizRest()\"\r\n                [columns]=\"columnNames\"\r\n                [showRowNumbers]=\"rowNumbers\"\r\n                [colOfInt]=\"columnOfInterest()\"\r\n                (horizPos)=\"setHorizPos($event)\"\r\n                (cellEdit)=\"execCellEdit($event)\"\r\n                (openEvt)=\"scrollToRowGroup($event)\"\r\n                ></app-row-group-panel>\r\n            }\r\n            @if(!dataTableService.currFilData.length && !currGroupValues().length){\r\n                <div [style.height]=\"dataTableService.dTblHeight + 'px'\" class=\"data-table-row flex-center data-table-row-no-data\" style=\"width: 100%; white-space: normal;\">\r\n                    <div class=\"center\">{{dataTableService.noDataMsg}}</div>\r\n                </div>\r\n            }\r\n        </div>\r\n    </div>\r\n    @if(paginatorReady){\r\n        <app-data-table-paginator\r\n        [filSortStr]=\"allFilSortInfo()\"\r\n        (jumpTo)=\"jumpToRow($event)\"\r\n        [totalRows]=\"dataTableService.currFilData.length\"\r\n        [disableJump]=\"dataTableService.showCharts() || currGroupValues().length > 0 || !dataTableService.currFilData.length || handlingSelRows\"\r\n        ></app-data-table-paginator><!--not an actual paginator-->\r\n    }\r\n    <div class=\"pad-top-thirty right\">\r\n        <div class=\"inline-b deebo-dd-contain-div\">\r\n            @if(canGroupBy().length > 0){\r\n                <app-row-group-menu\r\n                [groups]=\"canGroupBy()\"\r\n                [disableGB]=\"dataTableService.showCharts()\"\r\n                [enableClear]=\"currGroupValues().length ? true : false\"\r\n                ></app-row-group-menu>\r\n            }\r\n        </div><div class=\"inline-b deebo-dd-contain-div\">\r\n            @if(dataTableService.currFilData.length > 0){\r\n                <app-export-component\r\n                [columns]=\"columnHeaders\"\r\n                [disableExport]=\"dataTableService.showCharts()\"\r\n                [count]=\"dataTableService.currFilData.length\">\r\n                </app-export-component>\r\n            }\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host{--accent-color:rgb(50, 50, 50);--grid-color:rgb(199, 199, 199);--pad-left-base: 33px;--row-num-width: 75px;--reg-font-size: 17px }input[name=topLevelDataFilter]{float:left;padding:7px 5px;vertical-align:middle;box-shadow:0 0 1px 1px var(--grid-color);-moz-box-shadow:0 0 1px 1px var(--grid-color);-webkit-box-shadow:0 0 1px 1px var(--grid-color)}.deebo-dd-contain-div{margin:0 31px}.btn-chart,.btn-clear-grp{border-radius:3px}.btn-chart i{font-size:28px;vertical-align:middle;color:var(--accent-color)}.btn-chart:hover,.btn-clear-grp:hover{background:#e9e9e9;transition:background .5s ease}.dt-checks{margin-left:var(--row-num-width)}.row-numbers{margin-top:11px;display:inline-block;width:var(--row-num-width)}.row-num-header{background:#e9e9e9;box-sizing:border-box;border-bottom:1px solid var(--accent-color);border-right:1px solid var(--accent-color);box-shadow:0 -1px 3px 1px var(--grid-color);-moz-box-shadow:0 -1px 3px 1px var(--grid-color);-webkit-box-shadow:0 -1px 3px 1px var(--grid-color)}.num-row{white-space:nowrap;box-sizing:border-box;border-left:1px solid var(--grid-color);border-bottom:1px solid var(--grid-color)}.inline-table{display:inline-block;width:calc(100% - var(--row-num-width))}.special-edit-container{z-index:5;width:0!important;height:0!important}.edit-input{border:none;font-size:15px;box-shadow:none;position:absolute;background:#fff;-moz-box-shadow:none;-webkit-box-shadow:none;box-sizing:border-box}.edit-input[type=number]{text-align:right}.edit-input[type=date]{padding-left:17px}\n", "@charset \"UTF-8\";@font-face{font-family:Roboto Condensed;src:url(https://d2ffvluimla00s.cloudfront.net/RobotoCondensed-VariableFont_wght.ttf) format(\"ttf\")}@font-face{font-family:Material Icons;font-style:normal;font-weight:400;src:url(https://d2ffvluimla00s.cloudfront.net/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format(\"woff2\")}.deebo-data-grid-section{font-family:Roboto Condensed,Arial,Helvetica,sans-serif}:host{--accent-color:rgb(50, 50, 50);--grid-color:rgb(199, 199, 199);--pad-left-base: 33px;--row-num-width: 75px;--reg-font-size: 17px }.relly{position:relative}.hide{display:none!important;max-height:0;max-width:0;top:0;left:0;opacity:0}.ovy{overflow:auto}.no-ovy-y{overflow-y:hidden!important}.pad-top-sm{padding-top:4px!important}.pad-top-ten{padding-top:10px!important}.pad-top-teen{padding-top:17px}.pad-top-thirty,.pad-top-trey{padding-top:33px}.pad-top-much{padding-top:75px}.o-visible{overflow:visible}.dontwrap{white-space:nowrap}.inline-b{display:inline-block}.inline{display:inline}.half-wid{width:50%;vertical-align:top;display:inline-block}.qtr-wid{width:25%;vertical-align:top;display:inline-block}.third-wid{width:33.3%;vertical-align:top;display:inline-block}.two-third-wid{width:66.6%;vertical-align:top;display:inline-block}.three-qtr-wid{width:75%;vertical-align:top;display:inline-block}.v-top{vertical-align:top!important}.v-mid{vertical-align:middle!important}.v-bot{vertical-align:bottom!important}.lg-text{font-size:larger}.xlg-text{font-size:x-large!important}.md-text{font-size:var(--reg-font-size)!important}.small-text{font-size:small}.tiny-text{font-size:x-small}.invisible{visibility:hidden}.flex-center{display:flex;justify-content:center;align-items:center}.flex-item{flex:1 1 auto}.o-x-hidden{overflow-x:hidden!important}.no-weight{font-weight:400!important}.semi-heavy{font-weight:500!important}.heavy{font-weight:700!important}.marauto{margin:0 auto}.center{text-align:center}.left{text-align:left}.right{text-align:right}.btn-reset{border:none;color:#fff;padding:7px 11px;background:maroon}.error-message{color:maroon;font-weight:500}.success{color:green;font-weight:500}.neutral{color:var(--accent-color)}input,select{border:none;padding:4px;border-radius:3px;box-sizing:border-box;font-family:Roboto Condensed,Arial,Helvetica,sans-serif;box-shadow:0 0 1px 1px #afafaf;-moz-box-shadow:0 0 1px 1px #afafaf;-webkit-box-shadow:0 0 1px 1px #afafaf}input[type=radio],input[type=checkbox]{cursor:pointer;box-shadow:none!important;-moz-box-shadow:none!important;-webkit-box-shadow:none!important}button{cursor:pointer}button:focus,input:focus,select:focus,textarea:focus,a:focus{outline-width:0}button:disabled,input:disabled,select:disabled{opacity:.5;cursor:not-allowed}.prevent{opacity:.5;cursor:not-allowed;pointer-events:none}.controls{text-align:right;padding:16px 11px 6px 1px;max-width:100%;clear:both;overflow-x:auto;white-space:nowrap}.controls button{font-size:var(--reg-font-size);margin-right:31px;vertical-align:middle}.controls button span{vertical-align:middle}.controls button:last-of-type{margin-right:0}.data-table{margin-top:11px;overflow:hidden;box-shadow:0 -1px 3px 1px var(--grid-color);-moz-box-shadow:0 -1px 3px 1px var(--grid-color);-webkit-box-shadow:0 -1px 3px 1px var(--grid-color)}.sel-rows-checked{color:#00a8f399!important}.save-hilite{padding:2px 4px;border-radius:3px;background:#ebebeb;box-shadow:0 0 3px 1px var(--accent-color);-moz-box-shadow:0 0px 3px 1px var(--accent-color);-webkit-box-shadow:0 0px 3px 1px var(--accent-color)}.btn-ctrl-sel-rows,.btn-export-or-print{border:none;padding:3px 4px;border-radius:3px;background:#f5f5f5;vertical-align:middle;box-shadow:0 0 2px 1px var(--accent-color);-moz-box-shadow:0 0 2px 1px var(--accent-color);-webkit-box-shadow:0 0 2px 1px var(--accent-color)}.deebo-dd-contain-div:last-of-type{margin-right:0!important}.btn-export{width:100%;text-transform:uppercase}.btn-export:hover{text-decoration:underline}.btn-ctrl-sel-rows:hover,.btn-export-or-print:hover{background:#ebebeb;box-shadow:0 0 6px 2px gray;-moz-box-shadow:0 0 6px 2px gray;-webkit-box-shadow:0 0 6px 2px gray}.btn-center-selected{padding:2px 4px;border-radius:5px;background:#f5f5f5;box-shadow:0 0 6px 2px gray;-moz-box-shadow:0 0 6px 2px gray;-webkit-box-shadow:0 0 6px 2px gray}.btn-ctrl-sel-rows .material-icons{font-size:18px;font-weight:600;vertical-align:middle}.btn-ctrl-sel-rows .material-icons:not(.error-message){color:var(--accent-color)}.data-table-headers{cursor:pointer;white-space:nowrap;border-bottom:1px solid var(--grid-color)}.data-table-row{white-space:nowrap}.data-table-row:hover,.data-table-row .col-item-freeze:hover{background:#f3f3f3}.data-row-selected{background:#d6d6d6!important}.table-working{opacity:.1;pointer-events:none}.select-row-check{left:9px;z-index:10;cursor:pointer;margin:0;position:absolute;padding:0!important}.gb-row-num{left:2px;z-index:10;cursor:pointer;margin:0;font-size:x-small;position:absolute;padding:0!important}.mock-html{width:50%;height:18px;margin:0 auto;border-radius:11px;background:var(--grid-color)}.abs-right{top:7px;right:7px;position:absolute}.has-symbol:after{content:attr(data-symbol);padding-left:3px}.has-symbol-b:before{content:attr(data-symbol);padding-right:3px}.data-table-row-no-data{font-size:xx-large;color:gray;font-weight:500;text-shadow:-1px -1px var(--accent-color)}.data-row-selected .col-item-freeze,.data-row-selected .data-cell,.data-row-selected:hover,.data-row-selected .col-item-freeze:hover,.data-row-selected .data-cell:hover{background:#d6d6d6!important}.data-table-headers .col-item-freeze:first-of-type{border-bottom:1px solid var(--grid-color)}.col-header{z-index:2;width:125px;overflow:auto;cursor:grab;padding:7px 3px;text-align:center;position:relative;box-sizing:border-box;display:inline-block;vertical-align:top;white-space:pre-wrap;word-wrap:break-word;background:#fafafa;border-right:1px solid var(--grid-color)}.col-header button,.col-header span,.col-header select{cursor:pointer;vertical-align:middle}.col-header input{vertical-align:middle}.col-header-img-container{overflow-y:hidden;text-align:center;display:inline-block;vertical-align:middle;background-size:cover;background-position:center;background-repeat:no-repeat}.col-header-minimized{width:0!important;height:0!important;padding:0!important;overflow:hidden!important;border-bottom:none!important;border-right:none!important;transition:width .3s ease}.btn-maximize-col{border:none;border-radius:5px;background:#f5f5f5;box-shadow:0 0 3px 2px gray;font-size:var(--reg-font-size);margin-right:27px;padding:4px}.no-btn{border:none;background:none}.col-item-freeze{left:0;z-index:3;position:sticky;background:#fff;box-shadow:2px 0 3px 0 var(--grid-color);-moz-box-shadow:2px 0px 3px 0px var(--grid-color);-webkit-box-shadow:2px 0px 3px 0px var(--grid-color)}.col-header input,.select-filter{width:40%;margin:11px 0 1px}.sel-fil-container{z-index:5}.edit-input-option-cont{left:0;right:0}.edit-input-opt button{width:100%;font-size:15px;padding:11px 0 11px 17px;text-align:left!important}.selfil-opt-contain,.edit-input-option-cont{overflow:auto;max-height:240px;border-radius:5px;position:absolute;background:#fff;box-shadow:0 1px 3px 1px var(--grid-color);-moz-box-shadow:0 1px 3px 1px var(--grid-color);-webkit-box-shadow:0 1px 3px 1px var(--grid-color)}.selfil-div,.edit-input-opt{cursor:pointer;text-align:left;border-bottom:1px solid var(--grid-color)}.selfil-div:hover,.edit-input-opt:hover{background:#ebebeb}.selfil-div:last-of-type,.edit-input-opt:last-of-type{border-bottom:none}.selfil-div label{width:calc(100% - 22px);font-size:15px;cursor:pointer;padding:11px;display:inline-block}.selfil-div label input[type=checkbox]{margin-right:11px;vertical-align:middle}.select-filter-comparator{width:36px;z-index:3;opacity:0;position:relative;margin:11px 0 1px 15px}.btn-fil-comp{top:2px;left:-36px;border:none;position:absolute;background:#fafafa}.btn-fil-comp i{color:var(--accent-color)}@media screen and (min-width:960px){.col-header input,.select-filter,.select-filter-comparator{margin-top:7px;margin-bottom:1px}}.data-cell{width:125px;padding:11px 6px 11px 17px;overflow:auto;font-size:15px;word-wrap:break-word;white-space:pre-line;vertical-align:top;box-sizing:border-box;display:inline-flex;align-items:center;border-right:1px solid var(--grid-color);border-bottom:1px solid var(--grid-color)}input.edit-input{border-radius:0}.data-cell:focus,input.edit-input:focus{outline:1px solid #00a8f3}.dragger-cell-focused{background:#00a8f333;border-left:1px solid #00a8f3;border-right:1px solid #00a8f3!important}.focused-cell-dragger{width:9px;height:9px;cursor:crosshair;position:absolute;background:#00a8f3;box-shadow:0 0 1px 1px var(--accent-color);-moz-box-shadow:0 0 1px 1px var(--accent-color);-webkit-box-shadow:0 0 1px 1px var(--accent-color)}.holding-check{padding-left:44px}.data-cell-riiight{padding:11px 17px 11px 6px;justify-content:right}.data-cell-ceeenter{padding:11px 6px;justify-content:center!important}.cell-og-link{line-height:0;visibility:hidden}.cell-og-link:before{visibility:visible;content:attr(data-title)}.moveable-col{cursor:col-resize!important}.moveable-row{cursor:row-resize!important}.data-sort-arr{cursor:pointer;margin-left:11px;border:none;background:none;padding:0 0 0 2px;color:var(--accent-color)}.data-sort-arr .material-icons{font-size:20px}.data-col-info{left:10px;top:12px;padding:0;border:none;cursor:pointer;background:none;position:absolute;color:var(--accent-color)}.data-col-info .material-icons{font-size:16px}.sort-order-indicator{font-weight:600;vertical-align:middle;font-size:16px}.btn-min-col{cursor:pointer;top:0;right:2px;font-size:20px;border:none;background:none;position:absolute;padding:0 2px 5px 0;color:var(--accent-color)}.btn-min-col-hide{z-index:0;visibility:hidden;pointer-events:none}.btn-freeze-col{float:left;border:none;cursor:pointer;background:none}.btn-freeze-col .material-icons{font-size:16px;color:var(--accent-color)}.hidden-cols{max-width:100%;overflow-x:auto;clear:both;white-space:nowrap;padding:17px 15px 5px 4px}.hidden-cols button:first-of-type:before{content:\"Hidden Columns\";font-size:12px;font-weight:600;padding-right:11px;vertical-align:middle}.col-header span{word-wrap:break-word;vertical-align:middle;font-size:var(--reg-font-size)}.o-ins-div span,.o-ins-div i{vertical-align:middle;font-size:16px}.aux-chip{text-align:center;padding-bottom:33px;word-wrap:break-word;white-space:pre-wrap}.insights{padding:17px 15px}.insight-field{min-height:100px;padding:21px 0;font-size:large;white-space:pre-wrap;word-wrap:break-word;border-bottom:1px solid lightgray}@media screen and (max-width:760px){.insight-field:first-of-type{padding-top:7px}}@media screen and (min-width:760px){.insight-field-row{border-bottom:1px solid lightgray}.insight-field,.aux-chip{width:50%;vertical-align:top;display:inline-block;border-bottom:none}}@media screen and (min-width:1024px){.insight-field,.aux-chip{width:33%}}.chart-label-cont{padding-top:10px;text-align:center}.pie-piece-label{padding-top:5px;margin-right:27px;display:inline-block}.pie-piece-label-sq{width:11px;height:11px;margin:0 0 0 2px;display:inline-block;vertical-align:middle}.pie-piece-label span{font-size:small}.pie-piece-label span:before{font-size:smaller;padding-right:4px;font-weight:600;content:attr(data-percent)}.pie-layover{border-radius:50%;background:#fff;position:absolute;padding:5px!important;display:flex;font-size:17px;align-items:center;overflow:hidden;box-sizing:border-box;justify-content:center;color:var(--accent-color)}.pie-layover div{font-weight:500;padding:0!important}.ins-even-dist-ct{font-size:24px;font-weight:500}.line-graph-container{padding:11px 0 33px 7px!important;box-sizing:border-box;margin-left:11px}.lg-title-cont{padding:0!important;text-align:center;margin:17px 11px}.lg-n-marker-cont{width:60px;position:relative;padding:0!important;box-sizing:border-box;display:inline-block;vertical-align:top}.lg-n-marker-cont:before{top:45%;left:-37px;display:block;position:absolute;white-space:nowrap;color:var(--grid-color);content:attr(data-column);transform:rotate(-90deg)}.lg-n-marker,.lg-n-marker-h{padding:0 11px 0 0!important;font-size:small;position:relative;text-align:right;white-space:nowrap;box-sizing:border-box}.line-graph{width:calc(92% - 60px);position:relative;box-sizing:border-box;display:inline-block;vertical-align:top;padding:0!important;border-left:1px solid var(--accent-color);border-bottom:1px solid var(--accent-color)}.lg-lbl-x{left:0;right:0;bottom:-45px;font-size:small;font-weight:500;text-align:center;position:absolute;padding:0!important}.btn-line-graph-opts{margin:0;padding:4px;background:none;border-top:1px solid var(--accent-color);border-left:1px solid var(--accent-color);border-bottom:1px solid var(--accent-color)}.sp-line-graph-title{margin-top:7px;font-size:large;text-decoration:underline}.lg-dt-marker,.lg-dt-marker-h,.vd-n-marker,.vd-n-marker-h{bottom:-22px;font-size:small;position:absolute;text-align:center;padding:0!important;display:inline-block;box-sizing:border-box}.lg-dt-marker-h,.vd-n-marker-h{visibility:hidden}.lg-dt-marker.visible-marker{margin-left:21px}.lg-n-marker-h{height:0;visibility:hidden}.visible-marker{z-index:2;font-weight:600;background:#fff;height:unset!important;padding:1px 2px!important;visibility:visible!important;box-shadow:0 0 2px 1px #afafaf;-moz-box-shadow:0 0 2px 1px #afafaf;-webkit-box-shadow:0 0 2px 1px #afafaf}.visible-marker:before{font-weight:600}.lg-dt-marker:before{top:-15px;left:0;content:\"|\";position:absolute}.vd-n-marker:before{top:-15px;left:50%;content:\"|\";left:calc(50% - 2px);position:absolute}.lg-n-marker:before{top:-4px;right:-3px;content:\"-\";font-weight:600;font-size:large;position:absolute;background:#fff}.btn-line-graph-opts:hover{background:#d6d6d6;transition:background .3s ease}.btn-line-graph-opts:last-of-type{border-right:1px solid var(--accent-color)}.btn-lg-sel{color:#fff!important;background:var(--accent-color);box-shadow:0 0 2px 1px #afafaf;-moz-box-shadow:0 0 2px 1px #afafaf;-webkit-box-shadow:0 0 2px 1px #afafaf}.btn-lg-sel:hover{background:var(--accent-color)}.lg-plot{height:8px;width:8px;opacity:.3;cursor:pointer;border-radius:50%;position:absolute;padding:0!important;background:var(--accent-color)}.lg-plot:hover{z-index:100;opacity:1!important}.lg-plot:hover:after{padding:3px;display:inline-block;font-size:small;border-radius:5px;margin:0 0 0 25px;font-weight:700;content:attr(data-number);background:#fff!important;box-shadow:0 0 2px 1px #afafaf;-moz-box-shadow:0 0 2px 1px #afafaf;-webkit-box-shadow:0 0 2px 1px #afafaf}.lg-plot-opq{opacity:0;background:#fff}.lg-plot-opq:hover{opacity:1!important;background:var(--grid-color);transition:opacity .2s ease}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:\"liga\";-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}\n"] }]
-        }], ctorParameters: () => [{ type: DataTableService }, { type: TableDragService }, { type: CommonService }, { type: i0.ChangeDetectorRef }], propDecorators: { onWindowClick: [{
+                    ], template: "<div class=\"deebo-data-grid-section\">\r\n    <div class=\"hidden-cols\">\r\n        @for (hcol of hiddenCols; track hcol) {\r\n            <button type=\"button\" class=\"btn-maximize-col\" (click)=\"maximizeColCells(hcol)\">{{hcol}}</button>\r\n        }\r\n    </div>\r\n    <div class=\"controls\" >\r\n        <input type=\"text\" #topLevelDataFilter autocomplete=\"off\" name=\"topLevelDataFilter\" placeholder=\"Filter any column...\" \r\n        (input)=\"topFilterOnKeyUp($event)\" (keyup)=\"topFilterOnKeyUp($event)\" maxlength=\"255\" [(ngModel)]=\"topLevelFilter\" \r\n        [disabled]=\"dataTableService.showCharts() || !dataTableService.mainData.length || handlingSelRows\" autocomplete=\"off\" />\r\n        @if(currGroupValues().length){\r\n            <button type=\"button\" class=\"no-btn btn-clear-grp\" (click)=\"processGrouping(null)\">\r\n                <i class=\"material-icons error-message heavy v-mid\" aria-hidden=\"false\">close</i>&nbsp;<span class=\"md-text v-mid\">Grouping</span>\r\n            </button>\r\n        }\r\n        <button type=\"button\" class=\"no-btn btn-chart\" (click)=\"openCharts()\" [disabled]=\"dataTableService.showCharts() || !dataTableService.currFilData.length || handlingSelRows || !common.goodLs()\">\r\n            <i class=\"material-icons v-mid\" aria-hidden=\"false\">bar_chart</i>&nbsp;<span class=\"v-mid\">Insights</span>\r\n        </button>\r\n        <button type=\"button\" [disabled]=\"!dataTableService.currSelRows.length || handlingSelRows\" (click)=\"clearSelectedRows()\" class=\"btn-ctrl-sel-rows\">Deselect Rows</button>\r\n        <button #btnTogSelRows type=\"button\" [disabled]=\"!dataTableService.currSelRows.length || handlingSelRows\" (click)=\"toggleSelectedRows()\" class=\"btn-ctrl-sel-rows\">\r\n            <i class=\"material-icons\" aria-hidden=\"false\">check_box_outline_blank</i>&nbsp;<span>{{togSelRows}}</span>\r\n        </button>\r\n        <button [disabled]=\"!topLevelFilter && dataTableService.arefilSrtTrkPropsDefault()\" \r\n        class=\"btn-reset\" (click)=\"resetCurrentData()\" >Reset</button>\r\n    </div>\r\n    @if (!isScrolling){\r\n        <div class=\"relly\" [ngClass]=\"{'dt-checks': rowNumbers, 'hide' : isMultiFiltering() || dataTableService.isFiltering() || \r\n        dataTableService.isSorting() || currGroupValues().length || currSelEditOpts.length }\">\r\n            @for (chk of dtChecks; track $index) {\r\n                <input [id]=\"'checkDataTableRow' + chk\" class=\"select-row-check invisible\" \r\n                [checked]=\"dataTableService.currSelRows.indexOf(chk) > -1\" type=\"checkbox\" [name]=\"'checkDataTableRow' + chk\"\r\n                (click)=\"toggleSingleRowSelected(chk)\" (keyup.enter)=\"toggleSingleRowSelected(chk)\" [value]=\"'dataTableRow' + chk\" >\r\n            }\r\n        </div>\r\n    }\r\n    <div #selFilContainer class=\"relly sel-fil-container\">\r\n        <div class=\"selfil-opt-contain\" [ngStyle]=\"ddFilStyle\">\r\n            @for (opt of currFilOpts; track opt; let i = $index) {\r\n                <div class=\"selfil-div\">\r\n                    <label [for]=\"'selfilOpt' + currDDFilter + i\" class=\"'selfil-lbl-' + currDDFilter\"><input [id]=\"'selfilOpt' + currDDFilter + i\" \r\n                    [class]=\"'selfil-opt-' + currDDFilter\" (input)=\"handleMultiSelFilter(currDDFilter, opt.value, $event.target.checked)\" \r\n                    (click)=\"handleMultiSelFilter(currDDFilter, opt.value, $event.target.checked)\" [name]=\"'selfilOpt' + currDDFilter + i\" \r\n                    [checked]=\"opt.checked\" [value]=\"opt.value\" [disabled]=\"isMultiFiltering()\" type=\"checkbox\" />{{opt.value || \"(Blank)\"}}</label>\r\n                </div>\r\n            }\r\n        </div>\r\n    </div>\r\n    <div #validatedEdit class=\"relly special-edit-container invisible\">\r\n        @if (validatedEditType === 'date'){\r\n            <input id=\"selEditDate\" name=\"selEditDate\" type=\"date\" class=\"edit-input\" \r\n            (change)=\"execCellEdit($event, true)\" (input)=\"execCellEdit($event, true)\" (blur)=\"execCellEdit($event)\" />\r\n        }\r\n        @if (validatedEditType === 'number'){\r\n            <input id=\"selEditNum\" name=\"selEditNum\" type=\"number\" class=\"edit-input\" \r\n            (keyup)=\"execCellEdit($event, true)\" (input)=\"execCellEdit($event, true)\" (blur)=\"execCellEdit($event)\" (keyup.enter)=\"execCellEdit($event)\" />\r\n        }\r\n        @if (validatedEditType === 'text'){\r\n            <div class=\"relly edit-input\">\r\n                <div class=\"edit-input-option-cont\">\r\n                    <div class=\"edit-input-opt\"><button type=\"button\" class=\"no-btn\" (click)=\"execCellEdit($event, false, null)\">-</button></div>\r\n                    @for (opt of currSelEditOpts; track opt.value) {\r\n                        <div class=\"edit-input-opt\"><button type=\"button\" class=\"no-btn\" \r\n                            (click)=\"execCellEdit($event, false, opt.value)\">{{opt.value || \"(Blank)\"}}</button>\r\n                        </div>\r\n                    }\r\n                </div>\r\n            </div>\r\n        }\r\n    </div>\r\n    <div class=\"relly\" style=\"z-index: 6;\">\r\n        <div #fCellDragger tabindex=\"0\" id=\"fCellDragger\" (focus)=\"focusCellDragger()\" (blur)=\"execValClear(true)\"\r\n        (mousedown)=\"focusCellDraggerFromMouseDown()\" (keydown)=\"handleFDragTab($event)\" (keydown)=\"handleDraggerKD($event)\"\r\n        [ngClass]=\"{'hide': dataTableService.currEditIndex < 0, 'focused-cell-dragger': dataTableService.currEditIndex > -1 }\"></div>\r\n    </div>\r\n    @if(dataTableService.showCharts() && common.goodLs()){\r\n        <app-charts-and-graphs \r\n        [height]=\"chartHgt\"\r\n        [state]=\"chartState\"\r\n        [chartColumns]=\"columnsForCharts\"\r\n        (close)=\"closeCharts($event)\"\r\n        ></app-charts-and-graphs>\r\n    }\r\n    <div [ngClass]=\"{'row-numbers': rowNumbers && !dataTableService.showCharts() && !currGroupValues().length, 'hide': !rowNumbers || dataTableService.showCharts() || currGroupValues().length}\" >\r\n        <div #rowNumHeader class=\"row-num-header flex-center\"><div class=\"semi-heavy\">No.</div></div>\r\n        <div style=\"overflow: hidden;\" [style.height]=\"dataTableService.dTblHeight() + 'px'\">\r\n            <div [ngStyle]=\"{'overflow': 'auto', 'marginTop': rnBTop() + 'px' }\">\r\n                @for (num of rowNos; track num.number) {\r\n                    <div [id]=\"'rn' + num.number\" class=\"flex-center num-row\" [style.height]=\"num.height || dataTableService.defltRHgt\">\r\n                        <div class=\"small-text\">{{num.number | number}}</div>\r\n                    </div>\r\n                }\r\n            </div>\r\n        </div>\r\n    </div><div #dataTable class=\"data-table\" [class.inline-table]=\"rowNumbers && !dataTableService.showCharts() && !currGroupValues().length\">\r\n        <div #dataTableHeaders class=\"data-table-headers\">\r\n            @for (col of columnHeaders; track col.column; let i = $index) {\r\n                <app-data-table-header\r\n                [columnHeader]=\"col\"\r\n                [colWid]=\"dataTableService.useColWid\"\r\n                [hideMinCol]=\"col.hideMinCol\"\r\n                [canFreeze]=\"i === 0 ? true : false\"\r\n                (reset)=\"resetCurrentData($event)\"\r\n                (freeze)=\"freezeColCells($event)\"\r\n                (minimize)=\"minimizeColEls($event)\"\r\n                (filFocus)=\"handleFilFocus($event)\"\r\n                (scrollOnFocus)=\"checkTabHorizScroll($event)\"\r\n                (emitCompFocus)=\"killSelFilOpts(true)\"\r\n                (filSelClick)=\"handleWinClickOnSelFil()\"\r\n                (height)=\"setHeaderHeight($event, true)\"\r\n                (render)=\"renderCurrData(false, $event.field)\"\r\n                (width)=\"handleSingleColResize($event.value, $event.column)\"\r\n                ></app-data-table-header>\r\n            }\r\n        </div>\r\n        <div #dataTableBody id=\"dataTableBody\" style=\"overflow: auto;\" [style.height]=\"dataTableService.dTblHeight() + 'px'\" (scroll)=\"handleScroll($event)\"\r\n        [class.table-working]=\"isMultiFiltering() || dataTableService.isFiltering() || dataTableService.isSorting()\" (scrollend)=\"handleScrollEnd()\">\r\n            <div #aboveArea [ngStyle]=\"{'height': aboveHgt() + 'px', 'width': useRowWid}\"></div>\r\n            <div [style.transform]=\"'translateY('+transY()+'px)'\">\r\n                @for(row of rows; track $index){\r\n                    <div [id]=\"row.id\" class=\"data-table-row\" [attr.data-index]=\"row.index\"\r\n                    [class.data-row-selected]=\"!dataTableService.displayOnlySelRows && dataTableService.currSelRows.indexOf(row.index) > -1\"\r\n                    [ngStyle]=\"{'width': row.width, 'height': row.height}\" >\r\n                        @for(cell of row.cells; track cell.column){\r\n                            <app-data-cell [cell]=\"cell\" \r\n                            [rowId]=\"row.id\" \r\n                            [text]=\"cell.text || ''\"\r\n                            [html]=\"cell.html || ''\"\r\n                            [rawText]=\"cell.rawText\"\r\n                            [minimized]=\"cell.minimized\"\r\n                            [rowHeight]=\"row.height || ''\"\r\n                            (edit)=\"execCellEdit($event)\"\r\n                            (mousedown)=\"checkCellEditOnClick()\"\r\n                            [columnValClass]=\"cell.specialColClass\"\r\n                            (dragListen)=\"listenToCellDraggerMouseMove = $event\"\r\n                            [colWid]=\"cell.width || dataTableService.useColWid\"\r\n                            (width)=\"handleSingleColResize($event)\"\r\n                            (height)=\"setSingleRowHgt($event, row.id, true)\"\r\n                            (clearVEditFocus)=\"validatedEditType = $event\"\r\n                            (validateEditFocus)=\"handleValidatedCellEditFocus($event)\"\r\n                            ></app-data-cell>\r\n                        }\r\n                    </div>\r\n                }\r\n            </div>\r\n            <div #belowArea [ngStyle]=\"{'height': belowHgt() + 'px', 'width': useRowWid}\"></div>\r\n            @for(group of currGroupValues(); track group){\r\n                <app-row-group-panel\r\n                [groupValue]=\"group.value\"\r\n                [maxCols]=\"maxCols\"\r\n                [useRowWid]=\"useRowWid\"\r\n                [editable]=\"editable\"\r\n                [horizRest]=\"horizRest()\"\r\n                [columns]=\"columnNames\"\r\n                [showRowNumbers]=\"rowNumbers\"\r\n                [colOfInt]=\"columnOfInterest()\"\r\n                (horizPos)=\"setHorizPos($event)\"\r\n                (cellEdit)=\"execCellEdit($event)\"\r\n                (openEvt)=\"scrollToRowGroup($event)\"\r\n                ></app-row-group-panel>\r\n            }\r\n            @if(!dataTableService.currFilData.length && !currGroupValues().length){\r\n                <div [style.height]=\"dataTableService.dTblHeight() + 'px'\" class=\"data-table-row flex-center data-table-row-no-data\" style=\"width: 100%; white-space: normal;\">\r\n                    <div class=\"center\">{{dataTableService.noDataMsg}}</div>\r\n                </div>\r\n            }\r\n        </div>\r\n    </div>\r\n    @if(paginatorReady){\r\n        <app-data-table-paginator\r\n        [filSortStr]=\"allFilSortInfo()\"\r\n        (jumpTo)=\"jumpToRow($event)\"\r\n        [totalRows]=\"dataTableService.currFilData.length\"\r\n        [disableJump]=\"dataTableService.showCharts() || currGroupValues().length > 0 || !dataTableService.currFilData.length || handlingSelRows\"\r\n        ></app-data-table-paginator><!--not an actual paginator-->\r\n    }\r\n    <div class=\"pad-top-thirty right\">\r\n        <div class=\"inline-b deebo-dd-contain-div\">\r\n            @if(canGroupBy().length > 0){\r\n                <app-row-group-menu\r\n                [groups]=\"canGroupBy()\"\r\n                [disableGB]=\"dataTableService.showCharts()\"\r\n                [enableClear]=\"currGroupValues().length ? true : false\"\r\n                ></app-row-group-menu>\r\n            }\r\n        </div><div class=\"inline-b deebo-dd-contain-div\">\r\n            @if(dataTableService.currFilData.length > 0){\r\n                <app-export-component\r\n                [columns]=\"columnHeaders\"\r\n                [disableExport]=\"dataTableService.showCharts()\"\r\n                [count]=\"dataTableService.currFilData.length\">\r\n                </app-export-component>\r\n            }\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host{--accent-color:rgb(50, 50, 50);--grid-color:rgb(199, 199, 199);--pad-left-base: 33px;--row-num-width: 75px;--reg-font-size: 17px }input[name=topLevelDataFilter]{float:left;padding:7px 5px;vertical-align:middle;box-shadow:0 0 1px 1px var(--grid-color);-moz-box-shadow:0 0 1px 1px var(--grid-color);-webkit-box-shadow:0 0 1px 1px var(--grid-color)}.deebo-dd-contain-div{margin:0 31px}.btn-chart,.btn-clear-grp{border-radius:3px}.btn-chart i{font-size:28px;vertical-align:middle;color:var(--accent-color)}.btn-chart:hover,.btn-clear-grp:hover{background:#e9e9e9;transition:background .5s ease}.dt-checks{margin-left:var(--row-num-width)}.row-numbers{margin-top:11px;display:inline-block;width:var(--row-num-width)}.row-num-header{background:#e9e9e9;box-sizing:border-box;border-bottom:1px solid var(--accent-color);border-right:1px solid var(--accent-color);box-shadow:0 -1px 3px 1px var(--grid-color);-moz-box-shadow:0 -1px 3px 1px var(--grid-color);-webkit-box-shadow:0 -1px 3px 1px var(--grid-color)}.num-row{white-space:nowrap;box-sizing:border-box;border-left:1px solid var(--grid-color);border-bottom:1px solid var(--grid-color)}.inline-table{display:inline-block;width:calc(100% - var(--row-num-width))}.special-edit-container{z-index:5;width:0!important;height:0!important}.edit-input{border:none;font-size:15px;box-shadow:none;position:absolute;background:#fff;-moz-box-shadow:none;-webkit-box-shadow:none;box-sizing:border-box}.edit-input[type=number]{text-align:right}.edit-input[type=date]{padding-left:17px}\n", "@charset \"UTF-8\";@font-face{font-family:Roboto Condensed;src:url(https://d2ffvluimla00s.cloudfront.net/RobotoCondensed-VariableFont_wght.ttf) format(\"ttf\")}@font-face{font-family:Material Icons;font-style:normal;font-weight:400;src:url(https://d2ffvluimla00s.cloudfront.net/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format(\"woff2\")}.deebo-data-grid-section{font-family:Roboto Condensed,Arial,Helvetica,sans-serif}:host{--accent-color:rgb(50, 50, 50);--grid-color:rgb(199, 199, 199);--pad-left-base: 33px;--row-num-width: 75px;--reg-font-size: 17px }.relly{position:relative}.hide{display:none!important;max-height:0;max-width:0;top:0;left:0;opacity:0}.ovy{overflow:auto}.no-ovy-y{overflow-y:hidden!important}.pad-top-sm{padding-top:4px!important}.pad-top-ten{padding-top:10px!important}.pad-top-teen{padding-top:17px}.pad-top-thirty,.pad-top-trey{padding-top:33px}.pad-top-much{padding-top:75px}.o-visible{overflow:visible}.dontwrap{white-space:nowrap}.inline-b{display:inline-block}.inline{display:inline}.half-wid{width:50%;vertical-align:top;display:inline-block}.qtr-wid{width:25%;vertical-align:top;display:inline-block}.third-wid{width:33.3%;vertical-align:top;display:inline-block}.two-third-wid{width:66.6%;vertical-align:top;display:inline-block}.three-qtr-wid{width:75%;vertical-align:top;display:inline-block}.v-top{vertical-align:top!important}.v-mid{vertical-align:middle!important}.v-bot{vertical-align:bottom!important}.lg-text{font-size:larger}.xlg-text{font-size:x-large!important}.md-text{font-size:var(--reg-font-size)!important}.small-text{font-size:small}.tiny-text{font-size:x-small}.invisible{visibility:hidden}.flex-center{display:flex;justify-content:center;align-items:center}.flex-item{flex:1 1 auto}.o-x-hidden{overflow-x:hidden!important}.no-weight{font-weight:400!important}.semi-heavy{font-weight:500!important}.heavy{font-weight:700!important}.marauto{margin:0 auto}.center{text-align:center}.left{text-align:left}.right{text-align:right}.btn-reset{border:none;color:#fff;padding:7px 11px;background:maroon}.error-message{color:maroon;font-weight:500}.success{color:green;font-weight:500}.neutral{color:var(--accent-color)}input,select{border:none;padding:4px;border-radius:3px;box-sizing:border-box;font-family:Roboto Condensed,Arial,Helvetica,sans-serif;box-shadow:0 0 1px 1px #afafaf;-moz-box-shadow:0 0 1px 1px #afafaf;-webkit-box-shadow:0 0 1px 1px #afafaf}input[type=radio],input[type=checkbox]{cursor:pointer;box-shadow:none!important;-moz-box-shadow:none!important;-webkit-box-shadow:none!important}button{cursor:pointer}button:focus,input:focus,select:focus,textarea:focus,a:focus{outline-width:0}button:disabled,input:disabled,select:disabled{opacity:.5;cursor:not-allowed}.prevent{opacity:.5;cursor:not-allowed;pointer-events:none}.controls{text-align:right;padding:16px 11px 6px 1px;max-width:100%;clear:both;overflow-x:auto;white-space:nowrap}.controls button{font-size:var(--reg-font-size);margin-right:31px;vertical-align:middle}.controls button span{vertical-align:middle}.controls button:last-of-type{margin-right:0}.data-table{margin-top:11px;overflow:hidden;box-shadow:0 -1px 3px 1px var(--grid-color);-moz-box-shadow:0 -1px 3px 1px var(--grid-color);-webkit-box-shadow:0 -1px 3px 1px var(--grid-color)}.sel-rows-checked{color:#00a8f399!important}.save-hilite{padding:2px 4px;border-radius:3px;background:#ebebeb;box-shadow:0 0 3px 1px var(--accent-color);-moz-box-shadow:0 0px 3px 1px var(--accent-color);-webkit-box-shadow:0 0px 3px 1px var(--accent-color)}.btn-ctrl-sel-rows,.btn-export-or-print{border:none;padding:3px 4px;border-radius:3px;background:#f5f5f5;vertical-align:middle;box-shadow:0 0 2px 1px var(--accent-color);-moz-box-shadow:0 0 2px 1px var(--accent-color);-webkit-box-shadow:0 0 2px 1px var(--accent-color)}.deebo-dd-contain-div:last-of-type{margin-right:0!important}.btn-export{width:100%;text-transform:uppercase}.btn-export:hover{text-decoration:underline}.btn-ctrl-sel-rows:hover,.btn-export-or-print:hover{background:#ebebeb;box-shadow:0 0 6px 2px gray;-moz-box-shadow:0 0 6px 2px gray;-webkit-box-shadow:0 0 6px 2px gray}.btn-center-selected{padding:2px 4px;border-radius:5px;background:#f5f5f5;box-shadow:0 0 6px 2px gray;-moz-box-shadow:0 0 6px 2px gray;-webkit-box-shadow:0 0 6px 2px gray}.btn-ctrl-sel-rows .material-icons{font-size:18px;font-weight:600;vertical-align:middle}.btn-ctrl-sel-rows .material-icons:not(.error-message){color:var(--accent-color)}.data-table-headers{cursor:pointer;white-space:nowrap;border-bottom:1px solid var(--grid-color)}.data-table-row{white-space:nowrap}.data-table-row:hover,.data-table-row .col-item-freeze:hover{background:#f3f3f3}.data-row-selected{background:#d6d6d6!important}.table-working{opacity:.1;pointer-events:none}.select-row-check{left:9px;z-index:10;cursor:pointer;margin:0;position:absolute;padding:0!important}.gb-row-num{left:2px;z-index:10;cursor:pointer;margin:0;font-size:x-small;position:absolute;padding:0!important}.mock-html{width:50%;height:18px;margin:0 auto;border-radius:11px;background:var(--grid-color)}.abs-right{top:7px;right:7px;position:absolute}.has-symbol:after{content:attr(data-symbol);padding-left:3px}.has-symbol-b:before{content:attr(data-symbol);padding-right:3px}.data-table-row-no-data{font-size:xx-large;color:gray;font-weight:500;text-shadow:-1px -1px var(--accent-color)}.data-row-selected .col-item-freeze,.data-row-selected .data-cell,.data-row-selected:hover,.data-row-selected .col-item-freeze:hover,.data-row-selected .data-cell:hover{background:#d6d6d6!important}.data-table-headers .col-item-freeze:first-of-type{border-bottom:1px solid var(--grid-color)}.col-header{z-index:2;width:125px;overflow:auto;cursor:grab;padding:7px 3px;text-align:center;position:relative;box-sizing:border-box;display:inline-block;vertical-align:top;white-space:pre-wrap;word-wrap:break-word;background:#fafafa;border-right:1px solid var(--grid-color)}.col-header button,.col-header span,.col-header select{cursor:pointer;vertical-align:middle}.col-header input{vertical-align:middle}.col-header-img-container{overflow-y:hidden;text-align:center;display:inline-block;vertical-align:middle;background-size:cover;background-position:center;background-repeat:no-repeat}.col-header-minimized{width:0!important;height:0!important;padding:0!important;overflow:hidden!important;border-bottom:none!important;border-right:none!important;transition:width .3s ease}.btn-maximize-col{border:none;border-radius:5px;background:#f5f5f5;box-shadow:0 0 3px 2px gray;font-size:var(--reg-font-size);margin-right:27px;padding:4px}.no-btn{border:none;background:none}.col-item-freeze{left:0;z-index:3;position:sticky;background:#fff;box-shadow:2px 0 3px 0 var(--grid-color);-moz-box-shadow:2px 0px 3px 0px var(--grid-color);-webkit-box-shadow:2px 0px 3px 0px var(--grid-color)}.col-header input,.select-filter{width:40%;margin:11px 0 1px}.sel-fil-container{z-index:5}.edit-input-option-cont{left:0;right:0}.edit-input-opt button{width:100%;font-size:15px;padding:11px 0 11px 17px;text-align:left!important}.selfil-opt-contain,.edit-input-option-cont{overflow:auto;max-height:240px;border-radius:5px;position:absolute;background:#fff;box-shadow:0 1px 3px 1px var(--grid-color);-moz-box-shadow:0 1px 3px 1px var(--grid-color);-webkit-box-shadow:0 1px 3px 1px var(--grid-color)}.selfil-div,.edit-input-opt{cursor:pointer;text-align:left;border-bottom:1px solid var(--grid-color)}.selfil-div:hover,.edit-input-opt:hover{background:#ebebeb}.selfil-div:last-of-type,.edit-input-opt:last-of-type{border-bottom:none}.selfil-div label{width:calc(100% - 22px);font-size:15px;cursor:pointer;padding:11px;display:inline-block}.selfil-div label input[type=checkbox]{margin-right:11px;vertical-align:middle}.select-filter-comparator{width:36px;z-index:3;opacity:0;position:relative;margin:11px 0 1px 15px}.btn-fil-comp{top:2px;left:-36px;border:none;position:absolute;background:#fafafa}.btn-fil-comp i{color:var(--accent-color)}@media screen and (min-width:960px){.col-header input,.select-filter,.select-filter-comparator{margin-top:7px;margin-bottom:1px}}.data-cell{width:125px;padding:11px 6px 11px 17px;overflow:auto;font-size:15px;word-wrap:break-word;white-space:pre-line;vertical-align:top;box-sizing:border-box;display:inline-flex;align-items:center;border-right:1px solid var(--grid-color);border-bottom:1px solid var(--grid-color)}input.edit-input{border-radius:0}.data-cell:focus,input.edit-input:focus{outline:1px solid #00a8f3}.dragger-cell-focused{background:#00a8f333;border-left:1px solid #00a8f3;border-right:1px solid #00a8f3!important}.focused-cell-dragger{width:9px;height:9px;cursor:crosshair;position:absolute;background:#00a8f3;box-shadow:0 0 1px 1px var(--accent-color);-moz-box-shadow:0 0 1px 1px var(--accent-color);-webkit-box-shadow:0 0 1px 1px var(--accent-color)}.holding-check{padding-left:44px}.data-cell-riiight{padding:11px 17px 11px 6px;justify-content:right}.data-cell-ceeenter{padding:11px 6px;justify-content:center!important}.cell-og-link{line-height:0;visibility:hidden}.cell-og-link:before{visibility:visible;content:attr(data-title)}.moveable-col{cursor:col-resize!important}.moveable-row{cursor:row-resize!important}.data-sort-arr{cursor:pointer;margin-left:11px;border:none;background:none;padding:0 0 0 2px;color:var(--accent-color)}.data-sort-arr .material-icons{font-size:20px}.data-col-info{left:10px;top:12px;padding:0;border:none;cursor:pointer;background:none;position:absolute;color:var(--accent-color)}.data-col-info .material-icons{font-size:16px}.sort-order-indicator{font-weight:600;vertical-align:middle;font-size:16px}.btn-min-col{cursor:pointer;top:0;right:2px;font-size:20px;border:none;background:none;position:absolute;padding:0 2px 5px 0;color:var(--accent-color)}.btn-min-col-hide{z-index:0;visibility:hidden;pointer-events:none}.btn-freeze-col{float:left;border:none;cursor:pointer;background:none}.btn-freeze-col .material-icons{font-size:16px;color:var(--accent-color)}.hidden-cols{max-width:100%;overflow-x:auto;clear:both;white-space:nowrap;padding:17px 15px 5px 4px}.hidden-cols button:first-of-type:before{content:\"Hidden Columns\";font-size:12px;font-weight:600;padding-right:11px;vertical-align:middle}.col-header span{word-wrap:break-word;vertical-align:middle;font-size:var(--reg-font-size)}.o-ins-div span,.o-ins-div i{vertical-align:middle;font-size:16px}.aux-chip{text-align:center;padding-bottom:33px;word-wrap:break-word;white-space:pre-wrap}.insights{padding:17px 15px}.insight-field{min-height:100px;padding:21px 0;font-size:large;white-space:pre-wrap;word-wrap:break-word;border-bottom:1px solid lightgray}@media screen and (max-width:760px){.insight-field:first-of-type{padding-top:7px}}@media screen and (min-width:760px){.insight-field-row{border-bottom:1px solid lightgray}.insight-field,.aux-chip{width:50%;vertical-align:top;display:inline-block;border-bottom:none}}@media screen and (min-width:1024px){.insight-field,.aux-chip{width:33%}}.chart-label-cont{padding-top:10px;text-align:center}.pie-piece-label{padding-top:5px;margin-right:27px;display:inline-block}.pie-piece-label-sq{width:11px;height:11px;margin:0 0 0 2px;display:inline-block;vertical-align:middle}.pie-piece-label span{font-size:small}.pie-piece-label span:before{font-size:smaller;padding-right:4px;font-weight:600;content:attr(data-percent)}.pie-layover{border-radius:50%;background:#fff;position:absolute;padding:5px!important;display:flex;font-size:17px;align-items:center;overflow:hidden;box-sizing:border-box;justify-content:center;color:var(--accent-color)}.pie-layover div{font-weight:500;padding:0!important}.ins-even-dist-ct{font-size:24px;font-weight:500}.line-graph-container{padding:11px 0 33px 7px!important;box-sizing:border-box;margin-left:11px}.lg-title-cont{padding:0!important;text-align:center;margin:17px 11px}.lg-n-marker-cont{width:60px;position:relative;padding:0!important;box-sizing:border-box;display:inline-block;vertical-align:top}.lg-n-marker-cont:before{top:45%;left:-37px;display:block;position:absolute;white-space:nowrap;color:var(--grid-color);content:attr(data-column);transform:rotate(-90deg)}.lg-n-marker,.lg-n-marker-h{padding:0 11px 0 0!important;font-size:small;position:relative;text-align:right;white-space:nowrap;box-sizing:border-box}.line-graph{width:calc(92% - 60px);position:relative;box-sizing:border-box;display:inline-block;vertical-align:top;padding:0!important;border-left:1px solid var(--accent-color);border-bottom:1px solid var(--accent-color)}.lg-lbl-x{left:0;right:0;bottom:-45px;font-size:small;font-weight:500;text-align:center;position:absolute;padding:0!important}.btn-line-graph-opts{margin:0;padding:4px;background:none;border-top:1px solid var(--accent-color);border-left:1px solid var(--accent-color);border-bottom:1px solid var(--accent-color)}.sp-line-graph-title{margin-top:7px;font-size:large;text-decoration:underline}.lg-dt-marker,.lg-dt-marker-h,.vd-n-marker,.vd-n-marker-h{bottom:-22px;font-size:small;position:absolute;text-align:center;padding:0!important;display:inline-block;box-sizing:border-box}.lg-dt-marker-h,.vd-n-marker-h{visibility:hidden}.lg-dt-marker.visible-marker{margin-left:21px}.lg-n-marker-h{height:0;visibility:hidden}.visible-marker{z-index:2;font-weight:600;background:#fff;height:unset!important;padding:1px 2px!important;visibility:visible!important;box-shadow:0 0 2px 1px #afafaf;-moz-box-shadow:0 0 2px 1px #afafaf;-webkit-box-shadow:0 0 2px 1px #afafaf}.visible-marker:before{font-weight:600}.lg-dt-marker:before{top:-15px;left:0;content:\"|\";position:absolute}.vd-n-marker:before{top:-15px;left:50%;content:\"|\";left:calc(50% - 2px);position:absolute}.lg-n-marker:before{top:-4px;right:-3px;content:\"-\";font-weight:600;font-size:large;position:absolute;background:#fff}.btn-line-graph-opts:hover{background:#d6d6d6;transition:background .3s ease}.btn-line-graph-opts:last-of-type{border-right:1px solid var(--accent-color)}.btn-lg-sel{color:#fff!important;background:var(--accent-color);box-shadow:0 0 2px 1px #afafaf;-moz-box-shadow:0 0 2px 1px #afafaf;-webkit-box-shadow:0 0 2px 1px #afafaf}.btn-lg-sel:hover{background:var(--accent-color)}.lg-plot{height:8px;width:8px;opacity:.3;cursor:pointer;border-radius:50%;position:absolute;padding:0!important;background:var(--accent-color)}.lg-plot:hover{z-index:100;opacity:1!important}.lg-plot:hover:after{padding:3px;display:inline-block;font-size:small;border-radius:5px;margin:0 0 0 25px;font-weight:700;content:attr(data-number);background:#fff!important;box-shadow:0 0 2px 1px #afafaf;-moz-box-shadow:0 0 2px 1px #afafaf;-webkit-box-shadow:0 0 2px 1px #afafaf}.lg-plot-opq{opacity:0;background:#fff}.lg-plot-opq:hover{opacity:1!important;background:var(--grid-color);transition:opacity .2s ease}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:\"liga\";-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}\n"] }]
+        }], ctorParameters: () => [{ type: DataTableService }, { type: TableDragService }, { type: CommonService }], propDecorators: { onWindowClick: [{
                 type: HostListener,
                 args: ['window:click', ['$event']]
             }], onWindowMouseUp: [{
                 type: HostListener,
                 args: ['window:mouseup', ['$event']]
+            }], onWindowMouseDown: [{
+                type: HostListener,
+                args: ['window:mousedown', ['$event']]
             }], onWindowMouseMove: [{
                 type: HostListener,
                 args: ['window:mousemove', ['$event']]
@@ -7000,9 +7369,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
             }], rowNumHeader: [{
                 type: ViewChild,
                 args: ["rowNumHeader", { static: true }]
-            }], rowNumBody: [{
-                type: ViewChild,
-                args: ["rowNumBody", { static: true }]
             }], fCellDragger: [{
                 type: ViewChild,
                 args: ["fCellDragger", { static: true }]