ngx-deebodata 0.5.1 → 0.5.3

package/fesm2022/ngx-deebodata.mjs

@@ -385,6 +385,9 @@ class DataTableService {
     tblLeft = 0;
     tblRight = 0;
     dpLim = 1000;
+    currPage = 1;
+    rowsPerPage = 25;
+    serverSideTotal = 0;
     currFilData = [];
     currMapping = {};
     mapperWorkerId = 1;
@@ -425,6 +428,9 @@ class DataTableService {
     groupedBoundsChange = new Subject();
     mouseupWhileGrouped = new Subject();
     setIdealColumnWidth = new Subject();
+    renderEvent = new Subject();
+    forcePageOne = new Subject();
+    disablePageButtons = new Subject();
     currSelRows = []; //just be an index of mainData
     displayOnlySelRows = false;
     noDataMsg = "Loading...";
@@ -4890,6 +4896,177 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                 args: ["chartContain", { static: true }]
             }] } });
 
+class RealPaginator {
+    dataTableService;
+    tblDragService;
+    common;
+    lastPage = signal(100, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lastPage" }] : /* istanbul ignore next */ []));
+    // skipDDs: any[] = []
+    omniFilter = input("", /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "omniFilter" }] : /* istanbul ignore next */ []));
+    disableButtons = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disableButtons" }] : /* istanbul ignore next */ []));
+    pageChange = new EventEmitter();
+    btnPageFirst;
+    btnPageBack;
+    btnPageForward;
+    btnPageLast;
+    // @ViewChild("skipTo", { static: true }) skipTo!: ElementRef<HTMLElement>;
+    // @ViewChild("skipToOptions", { static: true }) skipToOptions!: ElementRef<HTMLElement>;
+    paginatorTracker;
+    totalRows;
+    currPage;
+    constructor(dataTableService, tblDragService, common) {
+        this.dataTableService = dataTableService;
+        this.tblDragService = tblDragService;
+        this.common = common;
+    }
+    ngOnInit() {
+        this.setPagi(1);
+        this.dataTableService.renderEvent.subscribe(d => this.setPagi(this.dataTableService.currPage));
+        this.dataTableService.forcePageOne.subscribe(d => this.btnPageFirst.nativeElement.click());
+        this.dataTableService.disablePageButtons.subscribe(d => this.disableButtons.set(d));
+    }
+    getTotal() {
+        if (this.dataTableService.currFilData.length !== this.dataTableService.mainData.length)
+            return this.dataTableService.currFilData.length;
+        return this.dataTableService.serverSideTotal || this.dataTableService.currFilData.length;
+    }
+    setPagi(page) {
+        const r = (this.dataTableService.currPage - 1) * this.dataTableService.rowsPerPage;
+        this.setPageTracker(Math.min(r + this.dataTableService.rowsPerPage, this.getTotal()));
+        const pMax = Math.ceil(this.getTotal() / this.dataTableService.rowsPerPage);
+        this.currPage.nativeElement.textContent = ("Page " + page.toLocaleString(undefined, { maximumFractionDigits: 0 }) + "/" +
+            pMax.toLocaleString(undefined, { maximumFractionDigits: 0 }));
+        // this.skipTo.nativeElement.setAttribute("max", pMax.toString())
+        this.lastPage.set(Math.ceil(this.getTotal() / this.dataTableService.rowsPerPage));
+    }
+    // handleRowsPerPageChange(event: any) {//Only for non server side
+    //     if(event.target.value && !isNaN(parseInt(event.target.value))){
+    //         this.dataTableService.rowsPerPage = parseInt(event.target.value)
+    //         dataUpload.methods.renderCurrData()
+    //         dataUpload.methods.handleSkipToDD(this.dataTableService.currPage)
+    //         const max = Math.ceil(this.dataTableService.currFilData.length/this.rowsPerPage)
+    //         document.getElementById("currPage").textContent = "Page " + (this.dataTableService.currPage?.toLocaleString(undefined, { maximumFractionDigits: 0 })) + 
+    //         ("/" + max.toLocaleString(undefined, { maximumFractionDigits: 0 }))
+    //         document.getElementById("skipTo").setAttribute("max", max)
+    //     }
+    // }
+    // handleSkipToPage(event) {
+    //     if(event && event.type === "blur" && ((event.relatedTarget && /skip-to-options/g.test(event.relatedTarget.className)) || 
+    //       (event.relatedTarget && event.relatedTarget.parentElement && /skip-to-options/g.test(event.relatedTarget.parentElement.className)))) return;
+    //     if(event.target.value && !isNaN(parseInt(event.target.value))){
+    //         let uVal = parseInt(event.target.value)
+    //         if(uVal === this.dataTableService.currPage)
+    //             return
+    //         const max = Math.ceil(this.dataTableService.currFilData.length/this.dataTableService.rowsPerPage)
+    //         if(uVal < 1){
+    //             uVal = 1
+    //             event.target.value = 1
+    //         }
+    //         if(uVal > max){
+    //             uVal = max
+    //             event.target.value = max
+    //         }
+    //         this.dataTableService.currPage = uVal
+    //         dataUpload.methods.renderCurrData()
+    //         const maxStr = max.toLocaleString(undefined, { maximumFractionDigits: 0 })
+    //         document.getElementById("currPage").textContent = ("Page " + (this.dataTableService.currPage?.
+    //         toLocaleString(undefined, { maximumFractionDigits: 0 })) + "/" + maxStr)
+    //         document.getElementById("btnReset").disabled = false
+    //         document.getElementById("skipTo").setAttribute("max", max)
+    //         document.getElementById("skipToOptions").className = "skip-to-options-hide"
+    //     }
+    // }
+    // setUpHandleSkipToPage(e) {//mock option click
+    //     const val = e.target.getAttribute("data-value")
+    //     if(val){
+    //         const max = Math.ceil(this.dataTableService.currFilData.length/this.dataTableService.rowsPerPage)
+    //         const useVal = Math.min(val, max)
+    //         document.getElementById("skipTo").value = useVal
+    //         dataUpload.methods.handleSkipToPage({ target: { value: useVal } })
+    //     } else {
+    //         document.getElementById("skipToOptions").className = "skip-to-options-hide"
+    //     }
+    // }
+    // setUpHandleSkipToPageOnEnter(e) {
+    //     if(common.controller.isEnterKey(e))
+    //         dataUpload.methods.setUpHandleSkipToPage(e)
+    // }
+    // handleSkipToPageOnKeyup(e) {
+    //     if(common.controller.isEnterKey(e))
+    //         dataUpload.methods.handleSkipToPage(e)
+    // }
+    // showSkipToOptions() {
+    //     const len = document.getElementsByClassName("skip-to-options").length
+    //     if(!len){
+    //         document.getElementById("skipToOptions").classList.add("skip-to-options")
+    //         setTimeout( function() { window.addEventListener("click", dataUpload.methods.closeSkipOpts) })
+    //     }
+    // }
+    // closeSkipOpts(e) {
+    //     if(e && e.target && (/skip/g.test(e.target.className) || /skip/g.test(e.target.id)))
+    //         return
+    //     document.getElementById("skipToOptions").className = "skip-to-options-hide"
+    //     window.removeEventListener("click", dataUpload.methods.closeSkipOpts)
+    // }
+    handlePaginatorChange(page) {
+        const max = Math.ceil(this.getTotal() / this.dataTableService.rowsPerPage);
+        this.dataTableService.currPage = Math.max(1, Math.min(page, max));
+        this.setPagi(this.dataTableService.currPage);
+        this.pageChange.emit({ skip: (this.dataTableService.currPage - 1), take: this.dataTableService.rowsPerPage, topLevelFilter: this.omniFilter(), columnConfig: this.getFilTrkerData(), sortOrder: [...this.dataTableService.sortOrder] });
+        // document.getElementById("skipTo").value = this.dataTableService.currPage
+        // document.getElementById("skipTo").setAttribute("max", max)
+        // document.getElementById("btnReset").disabled = false
+    }
+    setPageTracker(len) {
+        const start = ((this.dataTableService.currPage - 1) * (Math.min(this.dataTableService.rowsPerPage, this.getTotal()))) + 1;
+        this.paginatorTracker.nativeElement.textContent = (start?.toLocaleString(undefined, { maximumFractionDigits: 0 }) + "-" +
+            Math.min(len, (start + (this.dataTableService.rowsPerPage - 1))).toLocaleString(undefined, { maximumFractionDigits: 0 }));
+        this.totalRows.nativeElement.textContent = this.getTotal().toLocaleString(undefined, { maximumFractionDigits: 0 });
+    }
+    getFilTrkerData() {
+        let obj = {};
+        for (const prop in this.dataTableService.dataFilSrtTracker) {
+            const trk = this.dataTableService.dataFilSrtTracker[prop];
+            if (trk.filter || trk.sort)
+                obj[prop] = { filter: trk.filter, sort: trk.sort };
+        }
+        return obj;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: RealPaginator, deps: [{ token: DataTableService }, { token: TableDragService }, { token: CommonService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: RealPaginator, isStandalone: true, selector: "lib-real-paginator", inputs: { omniFilter: { classPropertyName: "omniFilter", publicName: "omniFilter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange" }, viewQueries: [{ propertyName: "btnPageFirst", first: true, predicate: ["btnPageFirst"], descendants: true, static: true }, { propertyName: "btnPageBack", first: true, predicate: ["btnPageBack"], descendants: true, static: true }, { propertyName: "btnPageForward", first: true, predicate: ["btnPageForward"], descendants: true, static: true }, { propertyName: "btnPageLast", first: true, predicate: ["btnPageLast"], descendants: true, static: true }, { propertyName: "paginatorTracker", first: true, predicate: ["paginatorTracker"], descendants: true, static: true }, { propertyName: "totalRows", first: true, predicate: ["totalRows"], descendants: true, static: true }, { propertyName: "currPage", first: true, predicate: ["currPage"], descendants: true, static: true }], ngImport: i0, template: "<div id=\"tableFooter\" class=\"data-table-footer\" (mousemove)=\"tblDragService.checkPaginatorBorderCursor($event)\" \r\n(mousemove)=\"tblDragService.handleTableHeightAdjust($event)\" (mousedown)=\"tblDragService.handleTableHeightAdjust($event)\" \r\n(mouseup)=\"tblDragService.handleColResMouseUp($event)\">\r\n    <div class=\"right paginator\">\r\n        <div class=\"three-qtr-wid\">\r\n            @if(!common.goodLs()){<span class=\"v-mid error-message lg-text\">{{\"Invalid License Key\"}} </span>}\r\n            <!-- <label for=\"paginator\">Rows per page</label>&nbsp;\r\n            <select name=\"paginator\" id=\"paginator\" (change)=\"handleRowsPerPageChange($event)\">\r\n                <option value=\"25\" selected>25</option>\r\n                <option value=\"50\">50</option>\r\n                <option value=\"100\">100</option>\r\n            </select>&nbsp;&nbsp;&bull;&nbsp;&nbsp;--><span #paginatorTracker>1-25</span> of <span #totalRows class=\"heavy\"></span>&nbsp;&nbsp;&nbsp; \r\n        </div><div class=\"qtr-wid right\">\r\n            <button type=\"button\" #btnPageFirst class=\"no-btn btn-page-first\" (click)=\"handlePaginatorChange(1)\" [disabled]=\"dataTableService.currPage <= 1 || disableButtons()\"><i class=\"material-icons\" aria-hidden=\"false\">first_page</i></button>&nbsp;\r\n            <button type=\"button\" #btnPageBack class=\"no-btn btn-page-back\" (click)=\"handlePaginatorChange(dataTableService.currPage-1)\" [disabled]=\"dataTableService.currPage <= 1 || disableButtons()\"><i class=\"material-icons\" aria-hidden=\"false\">arrow_back_ios</i></button>&nbsp;<span #currPage>\r\n            Page {{dataTableService.currPage | number}}</span>&nbsp;<button type=\"button\" #btnPageForward class=\"no-btn btn-page-forward\" [disabled]=\"dataTableService.currPage >= lastPage() || disableButtons()\" (click)=\"handlePaginatorChange(dataTableService.currPage+1)\"><i class=\"material-icons\" aria-hidden=\"false\">arrow_forward_ios</i></button>\r\n            &nbsp;<button type=\"button\" #btnPageLast class=\"no-btn btn-page-last\" [disabled]=\"dataTableService.currPage >= lastPage() || disableButtons()\" (click)=\"handlePaginatorChange(lastPage())\"><i class=\"material-icons\" aria-hidden=\"false\">last_page</i></button>\r\n            <!-- &nbsp;&nbsp;<label class=\"skip-lbl\" for=\"skipTo\">Skip To</label>&nbsp;&nbsp;<div class=\"skip-to-contain\"><input type=\"number\" min=\"1\" \r\n            name=\"skipTo\" #skipTo placeholder=\"Skip to\" (blur)=\"handleSkipToPage($even.target.value)\" (input)=\"handleSkipToPage($even.target.value)\" \r\n            (keyup)=\"handleSkipToPageOnKeyup($even.target.value)\" (focus)=\"showSkipToOptions()\" (click)=\"showSkipToOptions()\"/><div #skipToOptions class=\"skip-to-options-hide\">\r\n                <div tabindex=\"0\" [attr.data-value]=\"1\" (click)=\"setUpHandleSkipToPage()\" (keyup)=\"setUpHandleSkipToPageOnEnter()\">1st page</div>\r\n                @for(dd of skipDDs; track $index){\r\n                    <div tabindex=\"0\" [attr.data-value]=\"($index+1)\" (click)=\"setUpHandleSkipToPage()\" (keyup)=\"setUpHandleSkipToPageOnEnter()\">\r\n                        {{($index+1) + \" out of \" + lastPage()}}\r\n                    </div>\r\n                }\r\n                <div tabindex=\"0\" [attr.data-value]=\"lastPage()\" (click)=\"setUpHandleSkipToPage()\" (keyup)=\"setUpHandleSkipToPageOnEnter()\">Last page</div>\r\n            </div></div> -->\r\n        </div>\r\n    </div>\r\n</div>", styles: [".data-table-footer{padding:15px;border-bottom-left-radius:7px;border-bottom-right-radius:7px;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)}.btn-page-back,.btn-page-forward,.btn-page-first,.btn-page-last{padding:0;width:24px;height:24px;border-radius:50%;vertical-align:middle;color:var(--accent-color)}.btn-page-back,.btn-page-forward{margin:0 3px}.btn-page-first{margin:0 3px 0 0}.btn-page-last{margin:0 7px 0 3px}.btn-page-back:hover,.btn-page-forward:hover,.btn-page-first:hover,.btn-page-last:hover{box-shadow:0 0 3px 2px var(--grid-color);-moz-box-shadow:0 0 3px 2px var(--grid-color);-webkit-box-shadow:0 0 3px 2px var(--grid-color)}.btn-page-back{position:relative}.btn-page-back .material-icons{top:0;left:5px;position:absolute}@media screen and (min-width:860px){.btn-page-back,.btn-page-forward{margin:0 7px}.btn-page-first{margin:0 7px 0 0}.btn-page-last{margin:0 15px 0 7px}}\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: "pipe", type: i4.DecimalPipe, name: "number" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: RealPaginator, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-real-paginator', imports: [CommonModule, DecimalPipe], template: "<div id=\"tableFooter\" class=\"data-table-footer\" (mousemove)=\"tblDragService.checkPaginatorBorderCursor($event)\" \r\n(mousemove)=\"tblDragService.handleTableHeightAdjust($event)\" (mousedown)=\"tblDragService.handleTableHeightAdjust($event)\" \r\n(mouseup)=\"tblDragService.handleColResMouseUp($event)\">\r\n    <div class=\"right paginator\">\r\n        <div class=\"three-qtr-wid\">\r\n            @if(!common.goodLs()){<span class=\"v-mid error-message lg-text\">{{\"Invalid License Key\"}} </span>}\r\n            <!-- <label for=\"paginator\">Rows per page</label>&nbsp;\r\n            <select name=\"paginator\" id=\"paginator\" (change)=\"handleRowsPerPageChange($event)\">\r\n                <option value=\"25\" selected>25</option>\r\n                <option value=\"50\">50</option>\r\n                <option value=\"100\">100</option>\r\n            </select>&nbsp;&nbsp;&bull;&nbsp;&nbsp;--><span #paginatorTracker>1-25</span> of <span #totalRows class=\"heavy\"></span>&nbsp;&nbsp;&nbsp; \r\n        </div><div class=\"qtr-wid right\">\r\n            <button type=\"button\" #btnPageFirst class=\"no-btn btn-page-first\" (click)=\"handlePaginatorChange(1)\" [disabled]=\"dataTableService.currPage <= 1 || disableButtons()\"><i class=\"material-icons\" aria-hidden=\"false\">first_page</i></button>&nbsp;\r\n            <button type=\"button\" #btnPageBack class=\"no-btn btn-page-back\" (click)=\"handlePaginatorChange(dataTableService.currPage-1)\" [disabled]=\"dataTableService.currPage <= 1 || disableButtons()\"><i class=\"material-icons\" aria-hidden=\"false\">arrow_back_ios</i></button>&nbsp;<span #currPage>\r\n            Page {{dataTableService.currPage | number}}</span>&nbsp;<button type=\"button\" #btnPageForward class=\"no-btn btn-page-forward\" [disabled]=\"dataTableService.currPage >= lastPage() || disableButtons()\" (click)=\"handlePaginatorChange(dataTableService.currPage+1)\"><i class=\"material-icons\" aria-hidden=\"false\">arrow_forward_ios</i></button>\r\n            &nbsp;<button type=\"button\" #btnPageLast class=\"no-btn btn-page-last\" [disabled]=\"dataTableService.currPage >= lastPage() || disableButtons()\" (click)=\"handlePaginatorChange(lastPage())\"><i class=\"material-icons\" aria-hidden=\"false\">last_page</i></button>\r\n            <!-- &nbsp;&nbsp;<label class=\"skip-lbl\" for=\"skipTo\">Skip To</label>&nbsp;&nbsp;<div class=\"skip-to-contain\"><input type=\"number\" min=\"1\" \r\n            name=\"skipTo\" #skipTo placeholder=\"Skip to\" (blur)=\"handleSkipToPage($even.target.value)\" (input)=\"handleSkipToPage($even.target.value)\" \r\n            (keyup)=\"handleSkipToPageOnKeyup($even.target.value)\" (focus)=\"showSkipToOptions()\" (click)=\"showSkipToOptions()\"/><div #skipToOptions class=\"skip-to-options-hide\">\r\n                <div tabindex=\"0\" [attr.data-value]=\"1\" (click)=\"setUpHandleSkipToPage()\" (keyup)=\"setUpHandleSkipToPageOnEnter()\">1st page</div>\r\n                @for(dd of skipDDs; track $index){\r\n                    <div tabindex=\"0\" [attr.data-value]=\"($index+1)\" (click)=\"setUpHandleSkipToPage()\" (keyup)=\"setUpHandleSkipToPageOnEnter()\">\r\n                        {{($index+1) + \" out of \" + lastPage()}}\r\n                    </div>\r\n                }\r\n                <div tabindex=\"0\" [attr.data-value]=\"lastPage()\" (click)=\"setUpHandleSkipToPage()\" (keyup)=\"setUpHandleSkipToPageOnEnter()\">Last page</div>\r\n            </div></div> -->\r\n        </div>\r\n    </div>\r\n</div>", styles: [".data-table-footer{padding:15px;border-bottom-left-radius:7px;border-bottom-right-radius:7px;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)}.btn-page-back,.btn-page-forward,.btn-page-first,.btn-page-last{padding:0;width:24px;height:24px;border-radius:50%;vertical-align:middle;color:var(--accent-color)}.btn-page-back,.btn-page-forward{margin:0 3px}.btn-page-first{margin:0 3px 0 0}.btn-page-last{margin:0 7px 0 3px}.btn-page-back:hover,.btn-page-forward:hover,.btn-page-first:hover,.btn-page-last:hover{box-shadow:0 0 3px 2px var(--grid-color);-moz-box-shadow:0 0 3px 2px var(--grid-color);-webkit-box-shadow:0 0 3px 2px var(--grid-color)}.btn-page-back{position:relative}.btn-page-back .material-icons{top:0;left:5px;position:absolute}@media screen and (min-width:860px){.btn-page-back,.btn-page-forward{margin:0 7px}.btn-page-first{margin:0 7px 0 0}.btn-page-last{margin:0 15px 0 7px}}\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: { omniFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "omniFilter", required: false }] }], pageChange: [{
+                type: Output,
+                args: ["pageChange"]
+            }], btnPageFirst: [{
+                type: ViewChild,
+                args: ["btnPageFirst", { static: true }]
+            }], btnPageBack: [{
+                type: ViewChild,
+                args: ["btnPageBack", { static: true }]
+            }], btnPageForward: [{
+                type: ViewChild,
+                args: ["btnPageForward", { static: true }]
+            }], btnPageLast: [{
+                type: ViewChild,
+                args: ["btnPageLast", { static: true }]
+            }], paginatorTracker: [{
+                type: ViewChild,
+                args: ["paginatorTracker", { static: true }]
+            }], totalRows: [{
+                type: ViewChild,
+                args: ["totalRows", { static: true }]
+            }], currPage: [{
+                type: ViewChild,
+                args: ["currPage", { static: true }]
+            }] } });
+
 class NgxDeebodata {
     dataTableService;
     tblDragService;
@@ -4940,7 +5117,8 @@ class NgxDeebodata {
             this.handleDraggerMU(e);
         if (this.currGroupValues().length)
             return this.dataTableService.mouseupWhileGrouped.next(e);
-        this.handleScrlBarDrag();
+        if (!this.paginate)
+            this.handleScrlBarDrag();
     }
     onWindowMouseDown(e) {
         this.dataTableService.mouseIsDown = true;
@@ -5039,6 +5217,7 @@ class NgxDeebodata {
     validationSub = new Subscription;
     data = input([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    handlingPageChange = false;
     licenseKey = "";
     color1 = "";
     color2 = "";
@@ -5054,6 +5233,11 @@ class NgxDeebodata {
     editable = true;
     rowNumbers = true;
     forceGrouping = [];
+    paginate = false;
+    rowsPerPage = 25;
+    serverSideTotal = 0;
+    pageLoadMessage = "Loading...";
+    pageChange = new EventEmitter();
     cellEdit = new EventEmitter();
     dataTable;
     dataTableBody;
@@ -5067,8 +5251,12 @@ class NgxDeebodata {
     dataTableHeaders;
     topLevelDataFilter;
     ngOnChanges(changes) {
-        if (typeof changes !== "undefined" && changes["data"] && this.validationSettled() && !this.dataHasBeenSet() && this.data() && this.data().length)
-            this.handleDataInput();
+        if (typeof changes !== "undefined") {
+            if (changes["data"] && this.validationSettled() && !this.dataHasBeenSet() && this.data() && this.data().length)
+                this.handleDataInput(this.paginatorReady);
+            if (changes["serverSideTotal"])
+                this.dataTableService.serverSideTotal = Math.ceil(this.serverSideTotal);
+        }
     }
     ngOnInit() {
         this.execSetters();
@@ -5081,6 +5269,12 @@ class NgxDeebodata {
         }
         if (this.defGridHgt)
             this.dataTableService.dTblHeight.set(this.defGridHgt);
+        if (this.paginate && this.rowsPerPage) {
+            this.dataTableService.rowsPerPage = Math.min(250, Math.ceil(this.rowsPerPage));
+            this.rowNumbers = false; //no row numbers with pagination
+            if (this.serverSideTotal)
+                this.dataTableService.serverSideTotal = Math.ceil(this.serverSideTotal);
+        }
         if (this.myColumnSymbols)
             this.dataTableService.columnSymbols = [...this.myColumnSymbols];
         if (this.myColumnStyles)
@@ -5091,18 +5285,27 @@ class NgxDeebodata {
             this.dataTableService.pieGraphColors = [...this.pieGraphColors];
         this.dataTableService.removePieCovers = this.removePieCovers;
     }
-    handleDataInput() {
+    handleDataInput(onPageChange) {
         let tdata = this.convertNeededCols([...this.data()]);
         this.dataTableService.mainData = tdata.filter((d) => true);
         this.dataTableService.currFilData = tdata.filter((d) => true);
         this.dataTableService.mainDataLen = this.dataTableService.mainData.length;
-        this.buildInitUiDataTable(tdata, this.color1, this.color2); //hex or rgb values work best
+        if (!onPageChange) {
+            this.buildInitUiDataTable(tdata, this.color1, this.color2); //hex or rgb values work best
+        }
+        else {
+            this.renderCurrData(false);
+        }
         if (!this.dataTableService.errorLoading)
             this.dataTableService.noDataMsg = "No data to display for this configuration.";
-        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));
+        if (!onPageChange) {
+            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));
+        }
         this.dataHasBeenSet.set(true);
+        this.handlingPageChange = false;
+        this.dataTableService.disablePageButtons.next(false);
     }
     getAllColsAtRuntime(excludeHidden) {
         let cols = (typeof this.dataTableService.mainData[0] === "object" ? Object.keys(this.dataTableService.mainData[0]) :
@@ -5189,7 +5392,8 @@ class NgxDeebodata {
                     this.dataTableService.listenForScroll.set(false);
                     if (this.tblDragService.handleTblHtTO)
                         clearTimeout(this.tblDragService.handleTblHtTO);
-                    this.tblDragService.handleTblHtTO = setTimeout(() => { this.handleRowsOnHeightIncrease(); }, 250);
+                    if (!this.paginate)
+                        this.tblDragService.handleTblHtTO = setTimeout(() => { this.handleRowsOnHeightIncrease(); }, 250);
                 }
             }
         }, 0);
@@ -5620,6 +5824,8 @@ class NgxDeebodata {
     }
     rowNTO = null;
     setRowNumbers() {
+        if (this.paginate)
+            return;
         const rlen = this.rows.length;
         if (this.rowNumbers && rlen) {
             const hasHgt = this.rowNos.filter(r => r.height);
@@ -5800,7 +6006,7 @@ class NgxDeebodata {
                     this.dtChecks.push(indx);
             };
             this.useRowWid = this.getAllColWidth(colLen) + "px";
-            const limit = Math.min(init, len);
+            const limit = this.paginate ? Math.min(this.dataTableService.rowsPerPage, len) : Math.min(init, len);
             let localRows = [];
             for (n; n < limit; n++) {
                 const row = { id: "dataTableRow" + n, index: n, width: this.useRowWid, cells: [], height: this.dataTableService.defltRHgt };
@@ -5811,10 +6017,12 @@ class NgxDeebodata {
                 this.dataTableService.currMapping[n] = n;
             }
             this.rows = [...localRows];
-            this.setLastRowIndex();
+            if (!this.paginate)
+                this.setLastRowIndex();
             this.paginatorReady = true;
             this.handleTheme(color1, color2);
-            this.handleColAnyDDFilters(data, cols);
+            if (this.serverSideTotal === 0)
+                this.handleColAnyDDFilters(data, cols);
             if (len >= 500000)
                 this.doRowsMod = 15;
             timer(0).subscribe(() => {
@@ -5825,7 +6033,7 @@ class NgxDeebodata {
             });
             timer(250).subscribe(() => {
                 this.dataTableService.setIdealColumnWidth.next(true);
-                if (len > init) {
+                if (!this.paginate && len > init) {
                     let total = 0;
                     let z = this.lastElRowIndex + 1;
                     for (z; z < len; z++) {
@@ -5937,7 +6145,7 @@ class NgxDeebodata {
         const rel = this.selFilContainer.nativeElement;
         this.currDDFilter = this.common.elifyCol(col);
         if (this.common.goodLs()) {
-            const len = this.dataTableService.dataFilSrtTracker[col]["selDDVals"].length;
+            const len = this.dataTableService.dataFilSrtTracker[col]["selDDVals"]?.length;
             for (i; i < len; i++)
                 this.currFilOpts.push(this.dataTableService.dataFilSrtTracker[col]["selDDVals"][i]);
         }
@@ -6105,7 +6313,7 @@ class NgxDeebodata {
             this.execHorizScroll(left);
         /*horiz scroll*/
         /*vert scroll*/
-        if (top === this.verticalRest || this.lockVScroll || !this.dataTableService.listenForScroll()) {
+        if (this.paginate || top === this.verticalRest || this.lockVScroll || !this.dataTableService.listenForScroll()) {
             if (!this.dataTableService.autoScrollOnEdit)
                 this.clearValidatedEdit();
             return this.setRowSelChecksPlacement();
@@ -6161,7 +6369,8 @@ class NgxDeebodata {
             this.setRowSelChecksPlacement();
             if (this.listenToCellDraggerMouseMove)
                 this.settleCellDragger();
-            timer(0).subscribe(() => { this.cleanUpPossibles(); });
+            if (!this.paginate)
+                timer(0).subscribe(() => { this.cleanUpPossibles(); });
         });
     }
     addCell(text, prop, visible) {
@@ -6963,7 +7172,7 @@ class NgxDeebodata {
             let rule7;
             if (co1) {
                 this.dataTableService.themeColor1 = co1;
-                rule1 = ".col-header span, .col-header sup, .col-header button .material-icons, " +
+                rule1 = ".col-header span, .col-header sup, .col-header button .material-icons, .paginator button .material-icons, .paginator label, " +
                     ".row-group-panel button span, .row-group-panel button i, .data-table-footer div, .btn-fil-comp i{color: " + co1 + " !important}";
                 rule1a = ".col-header select, .col-header input:not(input[type=file]), #skipTo{box-shadow:0 0 1px 1px " + co1 + ";" +
                     "-webkit-box-shadow:0 0 1px 1px " + co1 + "}";
@@ -7043,6 +7252,20 @@ class NgxDeebodata {
             }
         }
     }
+    handlePageChange(event) {
+        this.dataTableService.mainData = [];
+        this.dataTableService.currFilData = [];
+        this.dataTableService.mainDataLen = 0;
+        this.handlingPageChange = true;
+        this.rows = [];
+        this.dtChecks = [];
+        this.aboveHgt.set(0);
+        this.belowHgt.set(0);
+        this.clearValidatedEdit(null, true);
+        this.dataHasBeenSet.set(false);
+        this.pageChange.emit(event);
+        this.dataTableService.disablePageButtons.next(true);
+    }
     renderCurrData(reset, field) {
         const thead = this.dataTableHeaders.nativeElement;
         const tbody = this.dataTableBody.nativeElement;
@@ -7066,10 +7289,16 @@ class NgxDeebodata {
             this.horizRest.set(0);
         }
         this.lastElRowIndex = 0;
-        let n = 0;
+        if (this.paginate && this.serverSideTotal > 0) {
+            let ssN = ((this.dataTableService.currPage - 1) * this.dataTableService.rowsPerPage);
+            let ssLen = Math.min(ssN + this.dataTableService.rowsPerPage, this.serverSideTotal);
+            if (ssN > ssLen)
+                this.dataTableService.currPage = 1; //force page 1
+        }
+        let n = (this.paginate && this.serverSideTotal === 0) ? ((this.dataTableService.currPage - 1) * this.dataTableService.rowsPerPage) : 0;
         const defNum = this.dataTableService.defltRHgtNum;
         const init = Math.ceil(this.dataTableService.dTblHeight() / defNum) + this.rowElsPad;
-        const len = this.dataTableService.currFilData.length;
+        const len = this.paginate ? Math.min(n + this.dataTableService.rowsPerPage, this.dataTableService.currFilData.length) : this.dataTableService.currFilData.length;
         if (!len) { //always just add 1
             this.allFilSortInfo.set(this.dataTableService.getAllFilSrtInfo());
             return setTimeout(() => { this.styleEmptyFilDataRow(tbody, tbodyX); });
@@ -7116,7 +7345,7 @@ class NgxDeebodata {
             }
         };
         this.useRowWid = this.getAllColWidth(colLen - this.getMiniColCount()) + "px";
-        const limit = Math.min(init, len);
+        const limit = this.paginate ? len : Math.min(init, len);
         this.maxCols = this.setMaxCols();
         let horizLim = Math.min(this.maxCols, colLen);
         if (field && field !== "topLevelDataFilter") {
@@ -7148,11 +7377,17 @@ class NgxDeebodata {
             }
         }
         this.rows = [...localRows];
-        this.setLastRowIndex();
+        if (!this.paginate)
+            this.setLastRowIndex();
         this.allFilSortInfo.set(this.dataTableService.getAllFilSrtInfo());
         this.dataTableService.mapperWorkerId += 1; //a reset but needs to incr so prev don't affect mapping 
+        if (this.paginate) {
+            this.dataTableService.renderEvent.next(true);
+            if (this.serverSideTotal === 0 && n > len && this.dataTableService.currFilData.length)
+                this.dataTableService.forcePageOne.next(true);
+        }
         if (len) {
-            if (len > init) {
+            if (!this.paginate && len > init) {
                 let total = 0;
                 let z = this.lastElRowIndex + 1;
                 for (z; z < len; z++) {
@@ -7351,7 +7586,7 @@ class NgxDeebodata {
             this.validationSub.unsubscribe();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: NgxDeebodata, deps: [{ token: DataTableService }, { token: TableDragService }, { token: CommonService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", 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\" [ngStyle]=\"{ 'overflowY': 'auto', 'overflowX': currGroupValues().length ? 'hidden' : 'auto' }\" \r\n        [style.height]=\"dataTableService.dTblHeight() + 'px'\" (scroll)=\"handleScroll($event)\" (scrollend)=\"handleScrollEnd()\"\r\n        [class.table-working]=\"isMultiFiltering() || dataTableService.isFiltering() || dataTableService.isSorting()\" >\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]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[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" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", 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 }, paginate: { classPropertyName: "paginate", publicName: "paginate", isSignal: false, isRequired: false, transformFunction: null }, rowsPerPage: { classPropertyName: "rowsPerPage", publicName: "rowsPerPage", isSignal: false, isRequired: false, transformFunction: null }, serverSideTotal: { classPropertyName: "serverSideTotal", publicName: "serverSideTotal", isSignal: false, isRequired: false, transformFunction: null }, pageLoadMessage: { classPropertyName: "pageLoadMessage", publicName: "pageLoadMessage", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", 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        @if(serverSideTotal === 0){\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        }\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\" [ngStyle]=\"{ 'overflowY': 'auto', 'overflowX': currGroupValues().length ? 'hidden' : 'auto' }\" \r\n        [style.height]=\"dataTableService.dTblHeight() + 'px'\" (scroll)=\"handleScroll($event)\" (scrollend)=\"handleScrollEnd()\"\r\n        [class.table-working]=\"isMultiFiltering() || dataTableService.isFiltering() || dataTableService.isSorting()\" >\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(handlingPageChange || (!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\">{{handlingPageChange ? pageLoadMessage : dataTableService.noDataMsg}}</div>\r\n                </div>\r\n            }\r\n        </div>\r\n    </div>\r\n    @if(paginatorReady){\r\n        @if(paginate){\r\n            <lib-real-paginator\r\n            [omniFilter]=\"topLevelFilter\"\r\n            (pageChange)=\"serverSideTotal > 0 ? handlePageChange($event) : renderCurrData(false)\"\r\n            ></lib-real-paginator>\r\n        } @else {\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    }\r\n    <div class=\"pad-top-thirty right\">\r\n        <div class=\"inline-b deebo-dd-contain-div\">\r\n            @if(!paginate && 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]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[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: "component", type: RealPaginator, selector: "lib-real-paginator", inputs: ["omniFilter"], outputs: ["pageChange"] }, { kind: "pipe", type: DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: NgxDeebodata, decorators: [{
             type: Component,
@@ -7366,7 +7601,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         FormsModule,
                         DecimalPipe,
                         CommonModule,
-                    ], changeDetection: ChangeDetectionStrategy.Eager, 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\" [ngStyle]=\"{ 'overflowY': 'auto', 'overflowX': currGroupValues().length ? 'hidden' : 'auto' }\" \r\n        [style.height]=\"dataTableService.dTblHeight() + 'px'\" (scroll)=\"handleScroll($event)\" (scrollend)=\"handleScrollEnd()\"\r\n        [class.table-working]=\"isMultiFiltering() || dataTableService.isFiltering() || dataTableService.isSorting()\" >\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"] }]
+                        RealPaginator,
+                    ], changeDetection: ChangeDetectionStrategy.Eager, 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        @if(serverSideTotal === 0){\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        }\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\" [ngStyle]=\"{ 'overflowY': 'auto', 'overflowX': currGroupValues().length ? 'hidden' : 'auto' }\" \r\n        [style.height]=\"dataTableService.dTblHeight() + 'px'\" (scroll)=\"handleScroll($event)\" (scrollend)=\"handleScrollEnd()\"\r\n        [class.table-working]=\"isMultiFiltering() || dataTableService.isFiltering() || dataTableService.isSorting()\" >\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(handlingPageChange || (!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\">{{handlingPageChange ? pageLoadMessage : dataTableService.noDataMsg}}</div>\r\n                </div>\r\n            }\r\n        </div>\r\n    </div>\r\n    @if(paginatorReady){\r\n        @if(paginate){\r\n            <lib-real-paginator\r\n            [omniFilter]=\"topLevelFilter\"\r\n            (pageChange)=\"serverSideTotal > 0 ? handlePageChange($event) : renderCurrData(false)\"\r\n            ></lib-real-paginator>\r\n        } @else {\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    }\r\n    <div class=\"pad-top-thirty right\">\r\n        <div class=\"inline-b deebo-dd-contain-div\">\r\n            @if(!paginate && 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']]
@@ -7424,6 +7660,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                 type: Input
             }], forceGrouping: [{
                 type: Input
+            }], paginate: [{
+                type: Input
+            }], rowsPerPage: [{
+                type: Input
+            }], serverSideTotal: [{
+                type: Input
+            }], pageLoadMessage: [{
+                type: Input
+            }], pageChange: [{
+                type: Output,
+                args: ["pageChange"]
             }], cellEdit: [{
                 type: Output,
                 args: ["cellEdit"]