ngx-deebodata-community 0.0.1

package/fesm2022/ngx-deebodata-community.mjs

@@ -0,0 +1,3494 @@
+import * as i0 from '@angular/core';
+import { Injectable, EventEmitter, ViewChild, Output, Input, Component, signal, input, HostListener } from '@angular/core';
+import * as i4 from '@angular/common';
+import { CommonModule, DecimalPipe } from '@angular/common';
+import * as i5 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { Subject } from 'rxjs';
+import * as i2 from '@angular/common/http';
+
+class CommonService {
+    uniSep = "X_";
+    replaceUniSep(val) {
+        return (val && typeof val === "string") ? val.replace(/\X_/g, " ") : (val ? val : null);
+    }
+    elifyCol(col) {
+        return col.replace(/ /g, this.uniSep);
+    }
+    titleCase(str) {
+        if (!str || str === "")
+            return str;
+        return str.replace(/\w\S*/g, (txt) => txt.charAt(0).toUpperCase() + txt.substring(1));
+    }
+    idCol(col) {
+        if (col && (col === "id" || col === "ID" || col === "Id" || /[Z+z+][I+i+][P+p+][ _\-]?/g.test(col)) || /[S+s+][S+s+][N+n+][ _\-]?/g.test(col))
+            return true;
+        return col && typeof col === "string" && col.toLocaleLowerCase().endsWith("id") && /[-_ ][I+i+][D+d+]/g.test(col);
+    }
+    mapLongDate(val) {
+        let dtStr = "";
+        let yrStr = "";
+        const dt = val.match(/\d{1,2}\,/g);
+        const yr = val.match(/ \d{4}/g);
+        if (dt && dt.length)
+            dtStr = dt[(dt.length - 1)];
+        if (yr && yr.length)
+            yrStr = yr[(yr.length - 1)];
+        if (!dt || !yr)
+            return new Date(val);
+        return new Date(yrStr + "," + this.mapTxtMonths(val) + "," + dtStr);
+    }
+    mapTxtMonths(val) {
+        if (/(jan|january)/g.test(val))
+            return "01";
+        if (/(feb|february)/g.test(val))
+            return "02";
+        if (/(mar|march)/g.test(val))
+            return "03";
+        if (/(apr|april)/g.test(val))
+            return "04";
+        if (/may/g.test(val))
+            return "05";
+        if (/(jun|june)/g.test(val))
+            return "06";
+        if (/(jul|july)/g.test(val))
+            return "07";
+        if (/(aug|august)/g.test(val))
+            return "08";
+        if (/(sept|september)/g.test(val))
+            return "09";
+        if (/(oct|october)/g.test(val))
+            return "10";
+        if (/(nov|november)/g.test(val))
+            return "11";
+        if (/(dec|december)/g.test(val))
+            return "12";
+        return "06";
+    }
+    testShortDate(val) {
+        const isDtReg = new RegExp(/\d+(\/|-| )\d+(\/|-| )\d+/);
+        if (val && isDtReg.test(val) && /^\d+$/g.test(val.replace(/(\/|-| )/g, "")) && val.length <= 10)
+            return true;
+        return false;
+    }
+    testISODate(val) {
+        return (val && /\d{4}-[01]\d-[0-3]\d(T|t)[0-2]\d:[0-5]\d:[0-5]\d\.\d+([+-][0-2]\d:[0-5]\d|(Z|z))/.test(val)) ? true : false;
+    }
+    testLongDate(val) {
+        const dtReg = /(jan|january|feb|february|mar|march|apr|april|may|jun|june|jul|july|aug|august|sept|september|oct|october|nov|november|dec|december) \d{1,2}\, \d{4}/;
+        if (val && dtReg.test(val) && val.length < 29)
+            return true;
+        return false;
+    }
+    coerceDate(val) {
+        try {
+            if (!val)
+                return null;
+            if (this.testLongDate(val))
+                return this.mapLongDate(val);
+            const fFour = val.substring(0, 4);
+            const moGuess = val.substring(5, 7);
+            const dtGuess = val.substring(8, 10); //2024-10-30
+            if ((this.testISODate(val.replace(/ /g, "")) || (/^\d+$/g.test(fFour) && /^\d+$/g.test(moGuess) && /^\d+$/g.test(dtGuess))))
+                return new Date(fFour + "," + moGuess + "," + dtGuess);
+            if (/\d{2}(\/|-| )\d{2}(\/|-| )\d{4}/g.test(val)) //10-30-2023
+                return new Date(val.substring(6, 10) + "," + (val.substring(0, 2)) + "," + val.substring(3, 5));
+            if (/\d{2}(\/|-| )\d{1}(\/|-| )\d{4}/g.test(val)) //10-5-2023
+                return new Date(val.substring(5, 9) + "," + (val.substring(0, 2)) + "," + ("0" + val.substring(3, 4)));
+            if (/\d{1}(\/|-| )\d{2}(\/|-| )\d{4}/g.test(val)) //5-26-2025
+                return new Date(val.substring(5, 9) + "," + ("0" + val.substring(0, 1)) + "," + val.substring(2, 4));
+            if (/\d{1}(\/|-| )\d{1}(\/|-| )\d{4}/g.test(val)) //5-6-2025
+                return new Date(val.substring(4, 8) + "," + ("0" + val.substring(0, 1)) + "," + ("0" + val.substring(2, 3)));
+            if (/\d{2}(\/|-| )\d{2}(\/|-| )\d{2}/g.test(val)) //10-30-23
+                return new Date(("20" + val.substring(6, 8)) + "," + (val.substring(0, 2)) + "," + val.substring(3, 5));
+            if (/\d{2}(\/|-| )\d{1}(\/|-| )\d{2}/g.test(val)) //11-6-25
+                return new Date(("20" + val.substring(5, 7)) + "," + (val.substring(0, 2)) + "," + ("0" + val.substring(3, 4)));
+            if (/\d{1}(\/|-| )\d{2}(\/|-| )\d{2}/g.test(val)) //5-16-25
+                return new Date(("20" + val.substring(5, 7)) + "," + ("0" + val.substring(0, 1)) + "," + val.substring(2, 4));
+            if (/\d{1}(\/|-| )\d{1}(\/|-| )\d{2}/g.test(val)) //5-6-25
+                return new Date(("20" + val.substring(4, 6)) + "," + ("0" + val.substring(0, 1)) + "," + ("0" + val.substring(2, 3)));
+            if (/\d{4}(\/|-| )\d{2}(\/|-| )\d{2}/g.test(val)) //2025-12-16
+                return new Date(val.substring(0, 4) + "," + (val.substring(5, 7)) + "," + val.substring(8, 10));
+            if (/\d{4}(\/|-| )\d{2}(\/|-| )\d{1}/g.test(val)) //2025-12-6
+                return new Date(val.substring(0, 4) + "," + (val.substring(5, 7)) + "," + ("0" + val.substring(8, 9)));
+            if (/\d{4}(\/|-| )\d{1}(\/|-| )\d{2}/g.test(val))
+                return new Date(val.substring(0, 4) + "," + ("0" + val.substring(5, 6)) + "," + val.substring(7, 9));
+            if (/\d{4}(\/|-| )\d{1}(\/|-| )\d{1}/g.test(val)) //2025-6-5
+                return new Date(val.substring(0, 4) + "," + ("0" + val.substring(5, 6)) + "," + ("0" + val.substring(7, 8)));
+            return val;
+        }
+        catch (e) {
+            return val;
+        }
+    }
+    isADateObject(val) {
+        return val && typeof val === "object" && typeof val.getTime === "function";
+    }
+    stripSpecChars(word) {
+        try {
+            const okword = word?.trim().replace(/[~_\-]/g, " ").replace(/[`!@#$%^&*()|+=?;:'",.<>\{\}\[\]\\\/]/g, "").replace(/   /g, " ").replace(/  /g, " ").replace(/^\d+/, '').trim();
+            return okword;
+        }
+        catch (e) {
+            return word;
+        }
+    }
+    doBigData(num) {
+        try {
+            let str = num ? num.toLocaleString(undefined, { maximumFractionDigits: 1 }).split(".")[0] : '0';
+            if (num) {
+                let arr = str.split(",");
+                let dec;
+                if (arr.length > 0)
+                    dec = arr[1].substring(0, 1);
+                str = str.
+                    replace(/,\d{3},\d{3},\d{3}/, (dec === "0" ? "B" : ("." + dec + "B"))).
+                    replace(/,\d{3},\d{3}/, (dec === "0" ? "M" : ("." + dec + "M"))).
+                    replace(/,\d{3}/, (dec === "0" ? "K" : ("." + dec + "K")));
+            }
+            return str;
+        }
+        catch (e) {
+            return num ? num.toLocaleString(undefined, { maximumFractionDigits: 1 }).
+                replace(/,\d{3},\d{3},\d{3}/, "B").
+                replace(/,\d{3},\d{3}/, "M").
+                replace(/,\d{3}/, "K") : '0';
+        }
+    }
+    mystartsWith(str, query) {
+        try {
+            var qLen = query.length;
+            return str.substring(0, qLen) === query ? true : false;
+        }
+        catch (e) {
+            return false;
+        }
+    }
+    isEnterKey(event) {
+        if (event) {
+            if (typeof event.key !== "undefined") {
+                return event.key === 'Enter';
+            }
+            else if (typeof event.keyIdentifier !== "undefined") {
+                return event.keyIdentifier === 'Enter';
+            }
+            else if (typeof event.keyCode !== "undefined") {
+                return event.keyCode === 13;
+            }
+            return false;
+        }
+        return false;
+    }
+    isTabKey(event) {
+        if (event) {
+            if (typeof event.key !== "undefined") {
+                return event.key === 'Tab';
+            }
+            else if (typeof event.keyIdentifier !== "undefined") {
+                return event.keyIdentifier === 'Tab';
+            }
+            else if (typeof event.keyCode !== "undefined") {
+                return event.keyCode === 9;
+            }
+            return false;
+        }
+        return false;
+    }
+    keyCanSearch(event) {
+        return (this.isSearchKey(event) ||
+            this.isBackKey(event) ||
+            this.isDeleteKey(event) ||
+            this.isSpaceKey(event));
+    }
+    isSearchKey(event) {
+        if (event && event.key !== undefined) {
+            return /^[A-Za-z0-9, ()&:\-.,#$!@]$/.test(event.key);
+        }
+        else if (event.keyIdentifier !== undefined) {
+            return (/Key([a-zA-Z])/.test(event.keyIdentifier) ||
+                this.mystartsWith(event.keyIdentifier, "Digit") ||
+                this.mystartsWith(event.keyIdentifier, "Numpad"));
+        }
+        else if (event.keyCode !== undefined) {
+            return ((event.keyCode >= 65 && event.keyCode <= 90) ||
+                (event.keyCode >= 48 && event.keyCode <= 57) ||
+                (event.keyCode >= 96 && event.keyCode <= 105));
+        }
+        return false;
+    }
+    isBackKey(event) {
+        if (event && event.key !== undefined) {
+            return event.key === 'Backspace';
+        }
+        else if (event.keyIdentifier !== undefined) {
+            return event.keyIdentifier === 'Backspace';
+        }
+        else if (event.keyCode !== undefined) {
+            return event.keyCode === 8;
+        }
+        return false;
+    }
+    isDeleteKey(event) {
+        if (event && event.key !== undefined) {
+            return event.key === 'Delete';
+        }
+        else if (event.keyIdentifier !== undefined) {
+            return event.keyIdentifier === 'Delete';
+        }
+        else if (event.keyCode !== undefined) {
+            return event.keyCode === 46;
+        }
+        return false;
+    }
+    isSpaceKey(event) {
+        if (event && event.key !== undefined) {
+            return event.key == " ";
+        }
+        else if (event.keyIdentifier !== undefined) {
+            return event.keyIdentifier == " ";
+        }
+        else if (event.keyCode !== undefined) {
+            return event.keyCode === 32;
+        }
+        else if (event.code !== undefined) {
+            return event.code === "Space";
+        }
+        return false;
+    }
+    isDownKey(event) {
+        if (event && event.key !== undefined) {
+            return event.key === 'ArrowDown';
+        }
+        else if (event.keyIdentifier !== undefined) {
+            return event.keyIdentifier === 'ArrowDown';
+        }
+        else if (event.keyCode !== undefined) {
+            return event.keyCode === 40;
+        }
+        return false;
+    }
+    isUpKey(event) {
+        if (event && event.key !== undefined) {
+            return event.key === 'ArrowUp';
+        }
+        else if (event.keyIdentifier !== undefined) {
+            return event.keyIdentifier === 'ArrowUp';
+        }
+        else if (event.keyCode !== undefined) {
+            return event.keyCode === 38;
+        }
+        return false;
+    }
+    dontSan(val) {
+        if (val && (this.testShortDate(val) || this.testISODate(val)))
+            return true;
+        return false;
+    }
+    sanitizeUi(val) {
+        if (val) {
+            if (this.dontSan(val))
+                return val;
+            var entityMap = {
+                '<': '&lt;',
+                '>': '&gt;',
+            };
+            return typeof val === "string" ? val.replace(/[<>]/g, s => {
+                return entityMap[s];
+            }) : val;
+        }
+        else
+            return val === 0 ? val : '';
+    }
+    unbindMouseEvent(e) {
+        e && e.stopPropagation();
+    }
+    getRgbParts(rgb) {
+        try {
+            const clst = rgb.replace(/rgb[\(\)]/g, "").split(",");
+            return { r: parseInt(clst[0].trim()), g: parseInt(clst[1].trim()), b: parseInt(clst[2].trim()) };
+        }
+        catch (e) {
+            return { r: 255, g: 255, b: 255 };
+        }
+    }
+    componentToHex(c) {
+        const hex = c.toString(16);
+        return hex.length == 1 ? "0" + hex : hex;
+    }
+    rgbToHex(r, g, b) {
+        return "#" + this.componentToHex(r) + this.componentToHex(g) + this.componentToHex(b);
+    }
+    hexToRgb(hex) {
+        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+        return result ? {
+            r: parseInt(result[1], 16),
+            g: parseInt(result[2], 16),
+            b: parseInt(result[3], 16)
+        } : null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CommonService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CommonService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: CommonService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class DataTableService {
+    common;
+    http;
+    constructor(common, http) {
+        this.common = common;
+        this.http = http;
+    }
+    sortOrder = [];
+    mainData = [];
+    mainDataLen = 0;
+    tblTop = 0;
+    tblBot = 0;
+    tblLeft = 0;
+    tblRight = 0;
+    dpLim = 1000;
+    currFilData = [];
+    currMapping = {};
+    mapperWorkerId = 1;
+    dTblHeight = 500;
+    defltRHgt = "50px";
+    isSorting = false;
+    isFiltering = false;
+    themeColor1 = null;
+    themeColor2 = null;
+    currEditCol = "";
+    currEditIndex = -1;
+    visibleCols = [];
+    currColumnEdit = null;
+    useColWid = "100px";
+    firstCol = "";
+    primaryKey = "";
+    autoScrollOnEdit = false;
+    setIdealColumnWidth = new Subject();
+    currSelRows = []; //just be an index of mainData
+    displayOnlySelRows = false;
+    noDataMsg = "Loading Demo...";
+    deboTotal = "deebo_total";
+    bgSep = "__forbargX";
+    errorLoading = false;
+    dataFilSrtTracker = {};
+    comparatorOpts = {
+        text: ["Equals", "Not Equal", "Empty", "Not Empty", "Contains"],
+        number: ["Equals", "Not Equal", "Empty", "Not Empty"],
+        date: ["Equals", "Not on", "Empty", "Not Empty"],
+    };
+    badStrings = ["null", "NULL", "Null", "undefined", "UNDEFINED", "Undefined"];
+    /*numeric columns can have a predefined symbol up to 2 characters long,
+    add these based on columns (object properties) coming from your api*/
+    columnSymbols = [
+        { column: "width", symbol: "px" },
+    ];
+    getNewTrackerObj(colName) {
+        const symbol = this.columnSymbols.filter(c => c.column === colName)[0]?.symbol?.substring(0, 2);
+        return {
+            filter: "",
+            comparator: "",
+            sort: null,
+            type: "string",
+            minimize: false,
+            freeze: false,
+            colWidth: null,
+            colCellSymbol: symbol,
+        };
+    }
+    setTblVertBounds() {
+        this.tblBot = (document.getElementById("tableFooter")?.getBoundingClientRect().top || 0);
+        this.tblTop = (document.getElementsByClassName("data-table-headers")[0]?.getBoundingClientRect().bottom || 0);
+    }
+    setTblHorizBounds() {
+        const dtBds = document.getElementsByClassName("data-table")[0]?.getBoundingClientRect();
+        if (dtBds) {
+            this.tblLeft = (dtBds.left || 0) - 200;
+            this.tblRight = (dtBds.right || 0) + 250;
+        }
+    }
+    setTblBounds() {
+        this.setTblVertBounds(); //critical, do it again it's ok
+        this.setTblHorizBounds();
+    }
+    elIsAboveFold(el, top) {
+        if (el) {
+            const elRect = el.getBoundingClientRect();
+            if (el && elRect && elRect.bottom < top)
+                return true;
+            return false;
+        }
+        return false;
+    }
+    elIsBelowFold(el, top) {
+        if (el) {
+            const elRect = el.getBoundingClientRect();
+            if (el && elRect && elRect.top > top)
+                return true;
+            return false;
+        }
+        return false;
+    }
+    buildDataFilSrtTracker(data) {
+        let i = 0;
+        let obj = {};
+        const len = data.length;
+        for (i; i < len; i++)
+            obj[data[i]] = this.getNewTrackerObj(data[i]);
+        return obj;
+    }
+    resetFilSrtTracker() {
+        for (const prop in this.dataFilSrtTracker) {
+            const fsObj = this.dataFilSrtTracker[prop];
+            const oType = fsObj["type"]; //keep
+            const oWid = fsObj["colWidth"]; //keep
+            const sym = fsObj["colCellSymbol"]; //keep
+            const min = false;
+            const compToUse = "";
+            this.dataFilSrtTracker[prop] = { filter: "", comparator: compToUse, sort: null, type: oType, minimize: min,
+                freeze: false, colWidth: oWid, colCellSymbol: sym,
+            };
+        }
+    }
+    figureCellText(text, notNum, symbol) {
+        if (this.common.isADateObject(text))
+            return { prop: "textContent", value: text.toLocaleDateString() };
+        if ((text && this.badStrings.indexOf(text) < 0) || (text === 0)) {
+            if (notNum) {
+                const isProd = true;
+                if (/[<>]/g.test(text) || (!/(blob:)?((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-:]+|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w\-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w\.\/-]*))?)/g.test(text)))
+                    return { prop: "textContent", value: text };
+                let useText = text;
+                const urls = text.matchAll(/(blob:)?((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-:]+|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w\-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w\.\/-]*))?)/g);
+                if (urls) {
+                    try {
+                        let imgs = [];
+                        let ancs = [];
+                        const blobSchm = (isProd ? "blob:https://" : "blob:http://");
+                        const blobUrl = blobSchm + location.host;
+                        let i = 0;
+                        let a = 0;
+                        for (const url of urls) {
+                            const low = (url[0] && typeof url[0] === "string") ? url[0].toLocaleLowerCase() : "";
+                            if ((this.common.mystartsWith(low, "https") || this.common.mystartsWith(low, blobUrl)) && /(blob|\.)/g.test(low)) {
+                                if (imgs.indexOf(url[0]) < 0 && (this.common.mystartsWith(low, blobUrl) ||
+                                    /\.(webp|jpeg|jpg|png|jfif|pjpeg|pjp|avif)/g.test(url[0].toLocaleLowerCase()))) {
+                                    imgs.push(url[0].split("?")[0]);
+                                }
+                                else {
+                                    if (ancs.indexOf(url[0]) < 0)
+                                        ancs.push(url[0] /*.split("?")[0]*/);
+                                }
+                            }
+                        }
+                        const ilen = imgs.length;
+                        const alen = ancs.length;
+                        for (i; i < ilen; i++)
+                            useText = useText.replace(new RegExp(imgs[i], "g"), ' <img src="' + imgs[i] + '" alt="Image in cell data" /> ');
+                        for (a; a < alen; a++) { //only get ones with space at first
+                            const anc = ancs[a];
+                            useText = useText.replace(new RegExp((anc.replace(/\?/g, "\\?") + " "), "g"), (' <a href="' + anc + '" target="_blank">' + anc + '</a> '));
+                            if (useText.endsWith(anc))
+                                useText = useText.replace(new RegExp(" " + anc.replace(/\?/g, "\\?"), "g"), (' <a href="' + anc + '" target="_blank">' + anc + '</a>'));
+                            if (useText === anc)
+                                useText = useText.replace(new RegExp(anc.replace(/\?/g, "\\?"), "g"), ('<a href="' + anc + '" target="_blank">' + anc + '</a>'));
+                        }
+                        if (imgs.length || ancs.length)
+                            return { prop: "innerHTML", value: useText, ancs: ancs };
+                        return { prop: "textContent", value: this.common.sanitizeUi(text) };
+                    }
+                    catch (e) {
+                        return { prop: "textContent", value: this.common.sanitizeUi(text) };
+                    }
+                }
+                return { prop: "textContent", value: this.common.sanitizeUi(text) };
+            }
+            try {
+                const minFracDigs = (symbol && ["$", "€", "£", "¥", "₣", "₹"].indexOf(symbol) > -1) ? 2 : 0;
+                if (typeof text === "number")
+                    return { prop: "textContent", value: text.toLocaleString(undefined, { minimumFractionDigits: minFracDigs, maximumFractionDigits: 2 }) };
+                const numVal = /\./g.test(text) ? parseFloat(text) : parseInt(text);
+                if (!isNaN(numVal))
+                    return { prop: "textContent", value: numVal.toLocaleString(undefined, { minimumFractionDigits: minFracDigs, maximumFractionDigits: 2 }) };
+                return { prop: "textContent", value: this.common.sanitizeUi(text) };
+            }
+            catch (e) {
+                return { prop: "textContent", value: this.common.sanitizeUi(text) };
+            }
+        }
+        return { prop: "textContent", value: " " };
+    }
+    figureFilterType(col) {
+        const item = this.dataFilSrtTracker[col];
+        if (item) {
+            switch (item.type) {
+                case "string":
+                    return "text";
+                case "number":
+                    return "number";
+                case "date":
+                    return "date";
+                default:
+                    return "text";
+            }
+        }
+        return "text";
+    }
+    mapCompToSym(comp) {
+        switch (comp) { //not all comps will get converted
+            case "Equals":
+                return "=";
+            case "Not Equal":
+                return "!=";
+        }
+        return comp;
+    }
+    clearAllFocused() {
+        const els = document.getElementsByClassName("focused-el");
+        const len = els.length;
+        for (var i = (len - 1); i >= 0; i--)
+            els[i].classList.remove("focused-el");
+    }
+    clearDCellFcsd() {
+        const els = document.getElementsByClassName("dragger-cell-focused");
+        const len = els.length;
+        for (let i = (len - 1); i >= 0; i--) {
+            const el = els[i];
+            if (el)
+                el.classList.remove("dragger-cell-focused");
+        }
+    }
+    findObjIndxInData(item, data) {
+        try {
+            if (this.primaryKey)
+                return (data || this.mainData).indexOf((data || this.mainData).find(d => d[this.primaryKey] === item[this.primaryKey]));
+            let i = 0;
+            let eq = 0;
+            const propLen = Object.keys(item).length;
+            const len = (data || this.mainData)?.length;
+            for (i; i < len; i++) {
+                eq = 0;
+                const mD = (data || this.mainData)[i];
+                for (const prop in item) {
+                    if (item[prop] === mD[prop])
+                        eq += 1;
+                    if (eq === propLen) //they all equal
+                        return i;
+                }
+            }
+            return -1;
+        }
+        catch (e) {
+            return -1;
+        }
+    }
+    oneLevelSort(data, sortOrder, obj) {
+        let sortData = data.filter((d) => true);
+        if (sortOrder.length) {
+            const field = sortOrder[0];
+            if (field) {
+                const dir = obj[field]["sort"] === "asc" ? 1 : -1;
+                sortData = sortData.sort((a, b) => {
+                    if (!a[field] && a[field] !== 0)
+                        return 1;
+                    if (!b[field] && b[field] !== 0)
+                        return -1;
+                    if (a[field] > b[field])
+                        return (1 * dir);
+                    if ((a[field] === b[field]) || (JSON.stringify(a[field]) === JSON.stringify(b[field])))
+                        return 0;
+                    return (-1 * dir);
+                });
+            }
+        }
+        return sortData;
+    }
+    doSortOnField(field) {
+        if (!this.sortOrder.length) {
+            this.sortOrder.push(field);
+            this.dataFilSrtTracker[field]["sort"] = "asc";
+        }
+        else {
+            if (this.sortOrder.indexOf(field) > -1) { //clicking already sorted field
+                const currSort = this.dataFilSrtTracker[field]["sort"];
+                switch (currSort) {
+                    case "desc":
+                        this.dataFilSrtTracker[field]["sort"] = null;
+                        this.sortOrder = this.sortOrder.filter((s) => s !== field);
+                        break;
+                    case "asc":
+                        this.dataFilSrtTracker[field]["sort"] = "desc";
+                        break;
+                }
+            }
+            else {
+                const currSrted = this.sortOrder[0];
+                if (currSrted)
+                    this.dataFilSrtTracker[currSrted]["sort"] = null;
+                this.sortOrder = []; //clear wha'ts there
+                this.sortOrder.push(field);
+                this.dataFilSrtTracker[field]["sort"] = "asc";
+            }
+        }
+        this.currFilData = this.oneLevelSort(this.currFilData, this.sortOrder, this.dataFilSrtTracker);
+    }
+    nLevelFilter(data, filterVal, comparator, field) {
+        const sixHrs = (1000 * 60 * 60 * 6);
+        const oneDay = (1000 * 60 * 60 * 24);
+        const symReg = new RegExp(/[$€£₹¥¢\,]/, "g");
+        const isDtReg = new RegExp(/\d+(\/|-)\d+(\/|-)\d+/);
+        if (filterVal && typeof filterVal === "string") {
+            filterVal = filterVal.toLocaleLowerCase();
+            if (!this.common.idCol(field) && !isDtReg.test(filterVal) && !isNaN(parseInt(filterVal.replace(symReg, "")))) //not viewed as num, but can be
+                filterVal = /\./g.test(filterVal) ? parseFloat(filterVal.replace(symReg, "")) : parseInt(filterVal.replace(symReg, ""));
+            if (this.common.testShortDate(filterVal) || this.common.testISODate(filterVal) || this.common.testLongDate(filterVal))
+                filterVal = new Date(filterVal);
+        }
+        return data.filter((d) => {
+            if ((!filterVal && filterVal != "0") && (!comparator || (comparator && comparator !== "Not Empty" && comparator !== "Empty")))
+                return true;
+            let colVal = d[field];
+            if (typeof colVal === "string")
+                colVal = colVal.toLocaleLowerCase();
+            if (!comparator) { //what we did originally
+                if (typeof colVal === "string")
+                    return (colVal == filterVal || colVal.startsWith(filterVal) || colVal.indexOf(filterVal) > -1);
+                if (typeof colVal === "number")
+                    return (colVal == filterVal); //assume equals
+                if (this.common.isADateObject(filterVal) && this.common.isADateObject(colVal))
+                    return Math.abs(colVal.getTime() - filterVal.getTime()) < sixHrs;
+                return colVal == filterVal;
+            }
+            else {
+                if (comparator === "Equals") {
+                    if (this.common.isADateObject(filterVal) && this.common.isADateObject(colVal))
+                        return Math.abs(colVal.getTime() - filterVal.getTime()) < sixHrs;
+                    return colVal == filterVal;
+                }
+                if (comparator === "Not Equal" || comparator === "Not on") {
+                    if (this.common.isADateObject(filterVal) && this.common.isADateObject(colVal))
+                        return Math.abs(colVal.getTime() - filterVal.getTime()) > oneDay;
+                    return colVal != filterVal;
+                }
+                if (comparator === "Contains")
+                    return colVal && ((typeof colVal === "string" && colVal.indexOf(filterVal) > -1) || colVal == filterVal);
+                if (comparator === "Not Empty") {
+                    if (!filterVal && filterVal != "0")
+                        return !!colVal || (colVal === 0); //just return non empty
+                    //treat it like normal filter
+                    if (typeof colVal === "string")
+                        return (colVal == filterVal || colVal.startsWith(filterVal) || colVal.indexOf(filterVal) > -1);
+                    if (typeof colVal === "number")
+                        return (colVal == filterVal || colVal.toString().startsWith(filterVal) || colVal.toString().indexOf(filterVal) > -1);
+                    if (this.common.isADateObject(filterVal) && this.common.isADateObject(colVal))
+                        return Math.abs(colVal.getTime() - filterVal.getTime()) < sixHrs;
+                    return colVal == filterVal;
+                }
+                if (comparator === "Empty")
+                    return (!colVal && colVal !== 0);
+                return false;
+            }
+        }).sort((a, b) => {
+            if (comparator)
+                return 0;
+            const colVal = a[field];
+            if (colVal && typeof colVal === "string")
+                return (colVal.toLocaleLowerCase() == filterVal || colVal.toLocaleLowerCase().startsWith(filterVal)) ? -1 : 1;
+            if (colVal && typeof colVal === "number")
+                return (colVal == filterVal || colVal.toString().startsWith(filterVal)) ? -1 : 1;
+            return 0;
+        });
+    }
+    columnFilter(dataI, field, dataObj, sortOrder, manual) {
+        if (manual && !this.displayOnlySelRows && !dataObj[field].filter && this.arefilSrtTrkPropsDefault(true))
+            return this.currFilData = this.mainData.filter((d) => true);
+        const initData = !this.displayOnlySelRows ? dataI :
+            dataI.filter((d, ind) => { return this.currSelRows.indexOf(ind) > -1; });
+        let dataM = this.nLevelFilter(initData, dataObj[field].filter, dataObj[field].comparator, field);
+        const doWithoutFilt = ["Not Empty", "Empty"];
+        for (const prop in dataObj) {
+            if (field === prop)
+                continue;
+            if (dataObj[prop].filter || (dataObj[prop].comparator && doWithoutFilt.indexOf(dataObj[prop].comparator) > -1))
+                dataM = this.nLevelFilter(dataM, dataObj[prop].filter, dataObj[prop].comparator, prop);
+        }
+        this.currFilData = this.oneLevelSort(dataM, sortOrder, dataObj);
+        return this.currFilData;
+    }
+    getAllFilSrtInfo() {
+        let filinfo = "Filtered By:";
+        let srtinfo = "Sorted By:";
+        const doWithoutFilt = ["Not Empty", "Empty"];
+        const initB = " <span>";
+        for (const prop in this.dataFilSrtTracker) {
+            const obj = this.dataFilSrtTracker[prop];
+            const colNm = this.common.sanitizeUi(this.common.titleCase(prop));
+            if (obj && (obj.filter || (obj.comparator && doWithoutFilt.indexOf(obj.comparator) > -1))) {
+                const comp = this.mapCompToSym(obj.comparator ? obj.comparator : (obj.type === "string" ? "Contains" : "Equals"));
+                let propFilTxt = (initB + colNm + "</span> " + comp);
+                if (obj.filter)
+                    propFilTxt += (initB + this.common.sanitizeUi(obj.filter) + "</span>");
+                if (propFilTxt.endsWith("Equals"))
+                    propFilTxt = "";
+                if (filinfo === "Filtered By:") {
+                    filinfo += propFilTxt;
+                }
+                else {
+                    filinfo += ("," + propFilTxt);
+                }
+            }
+        }
+        let s = 0;
+        const solen = this.sortOrder.length;
+        for (s; s < solen; s++) {
+            const prop = this.sortOrder[s];
+            const obj = this.dataFilSrtTracker[prop];
+            if (obj && obj.sort) {
+                const colNm = this.common.sanitizeUi(this.common.titleCase(prop));
+                const propSrtTxt = (initB + colNm + "</span> " + obj.sort);
+                if (srtinfo === "Sorted By:") {
+                    srtinfo += propSrtTxt;
+                }
+                else {
+                    srtinfo += ("," + propSrtTxt);
+                }
+            }
+        }
+        if (filinfo === "Filtered By:")
+            filinfo = "";
+        if (srtinfo === "Sorted By:")
+            srtinfo = "";
+        if (filinfo && srtinfo)
+            return (" &bull; " + filinfo + " &bull; " + srtinfo);
+        if (filinfo && !srtinfo)
+            return (" &bull; " + filinfo);
+        if (!filinfo && srtinfo)
+            return (" &bull; " + srtinfo);
+        return "";
+    }
+    easyFilter(val, dataI, sortOrder) {
+        const initData = !this.displayOnlySelRows ? dataI :
+            dataI.filter((d, ind) => { return this.currSelRows.indexOf(ind) > -1; });
+        let dataM = this.allDataFilter(val, initData);
+        this.currFilData = this.oneLevelSort(dataM, sortOrder, this.dataFilSrtTracker);
+    }
+    allDataFilter(filterVal, data) {
+        const sixHrs = (1000 * 60 * 60 * 6);
+        const symReg = new RegExp(/[$€£₹¥¢\,]/, "g");
+        const isDtReg = new RegExp(/\d+(\/|-)\d+(\/|-)\d+/);
+        if (filterVal && typeof filterVal === "string") {
+            filterVal = filterVal.toLocaleLowerCase();
+            if (!isDtReg.test(filterVal) && !isNaN(parseInt(filterVal.replace(symReg, "")))) //not viewed as num, but can be
+                filterVal = /\./g.test(filterVal) ? parseFloat(filterVal.replace(symReg, "")) : parseInt(filterVal.replace(symReg, ""));
+            if (this.common.testShortDate(filterVal) || this.common.testISODate(filterVal) || this.common.testLongDate(filterVal))
+                filterVal = new Date(filterVal);
+        }
+        return data.filter((d) => {
+            if (!filterVal && filterVal != "0")
+                return true;
+            for (const prop in d) {
+                let colVal = d[prop];
+                if (typeof colVal === "string")
+                    colVal = colVal.toLocaleLowerCase();
+                if (typeof colVal === "string" && (colVal == filterVal || colVal.startsWith(filterVal) || colVal.indexOf(filterVal) > -1))
+                    return true;
+                if (typeof colVal === "number" && (colVal == filterVal || colVal.toString().startsWith(filterVal) || colVal.toString().indexOf(filterVal) > -1))
+                    return true;
+                if (this.common.isADateObject(filterVal) && this.common.isADateObject(colVal) &&
+                    (Math.abs(colVal.getTime() - filterVal.getTime()) < sixHrs || (colVal == filterVal ||
+                        colVal.startsWith(filterVal) || colVal.indexOf(filterVal) > -1)))
+                    return true;
+                if (colVal == filterVal)
+                    return true;
+            }
+            return false;
+        });
+    }
+    arefilSrtTrkPropsDefault(ignoreColFM) {
+        for (const prop in this.dataFilSrtTracker) {
+            // const elId= prop.replace(/ /g, this.common.uniSep)
+            const obj = this.dataFilSrtTracker[prop];
+            if (obj && (obj.filter || obj.comparator || obj.sort || obj.minimize || obj.freeze)) {
+                const fm = ignoreColFM ? true : (!obj.minimize && !obj.freeze);
+                const defComp = !obj.comparator || ["Equals", "Contains"].indexOf(obj.comparator) > -1;
+                if (!obj.filter && !obj.sort && fm && defComp /*&& document.getElementById("selectComp" + elId) */) {
+                    //let it go
+                }
+                else
+                    return false;
+            }
+        }
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DataTableService, deps: [{ token: CommonService }, { token: i2.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DataTableService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DataTableService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: CommonService }, { type: i2.HttpClient }] });
+
+class TableDragService {
+    dataTableService;
+    common;
+    constructor(dataTableService, common) {
+        this.dataTableService = dataTableService;
+        this.common = common;
+    }
+    currDataRow;
+    currColForDataRow;
+    dTblHeight = 500;
+    currColumnEdit = "";
+    listenForMouseUp = false;
+    listenForSelectStart = false;
+    listenForColMvMouseUp = false;
+    colDragStartFrmHeaderTracker = { col: null, xstart: null, ystart: null, resized: false };
+    colDragStartFrmCellTracker = { col: null, row: null, xstart: null, ystart: null, resized: false };
+    tblDragStartFrmPagiTracker = { row: null, ystart: null, resized: false };
+    didResizeOnEvent = false;
+    colMoving = false;
+    headDims = new Subject();
+    cellDims = new Subject();
+    columnMove = new Subject();
+    dTblHeightOutput = new Subject();
+    checkItemBorderCursor(e, noColResize) {
+        try {
+            if (this.colMoving)
+                return;
+            const el = e.target;
+            if (el instanceof Element && /(col-header|data-cell)/g.test(el.className)) {
+                const offsx = 11;
+                const offsy = 9;
+                const cls = "moveable-col";
+                const rcls = "moveable-row";
+                const bds = el.getBoundingClientRect();
+                if (noColResize) {
+                }
+                else {
+                    if (e.offsetX >= bds.width - offsx) {
+                        el.classList.add(cls);
+                        el.classList.remove(rcls);
+                    }
+                    else {
+                        el.classList.remove(cls);
+                    }
+                }
+                if (e.offsetY >= bds.height - offsy) {
+                    el.classList.add(rcls);
+                    el.classList.remove(cls);
+                }
+                else {
+                    el.classList.remove(rcls);
+                }
+            }
+        }
+        catch (err) { }
+    }
+    checkPaginatorBorderCursor(e) {
+        try {
+            const el = e.target;
+            if (el instanceof Element && /data-table-footer/g.test(el.className)) {
+                const offsy = 9;
+                const rcls = "moveable-row";
+                const bds = el.getBoundingClientRect();
+                if (e.offsetY >= bds.height - offsy) {
+                    el.classList.add(rcls);
+                }
+                else {
+                    el.classList.remove(rcls);
+                }
+            }
+        }
+        catch (err) { }
+    }
+    handleHeaderSizeAdjust(e) {
+        e && e.preventDefault();
+        let col;
+        const cls = "moveable-col";
+        const rcls = "moveable-row";
+        const clist = e.target.classList;
+        if (e.type === "mousedown") {
+            if (e && e.target.id && /columnHeader/g.test(e.target.id))
+                col = e.target;
+            if (e && e.target.parentElement.id && /columnHeader/g.test(e.target.parentElement.id))
+                col = e.target.parentElement;
+            if (col) {
+                const cBds = col.getBoundingClientRect();
+                if (clist.contains(cls)) {
+                    let rootCol;
+                    let useX = e.offsetX;
+                    if (useX > ((cBds.right - cBds.left) / 2)) { //the one we're aiming for IS the target
+                        useX = (useX - cBds.width);
+                        rootCol = col.id.replace(/columnHeader/g, "");
+                    }
+                    else {
+                        if (!col.nextElementSibling && (e.offsetX > ((cBds.right - cBds.left) / 2))) //last and grabbing the end of it
+                            rootCol = col.id.replace(/columnHeader/g, "");
+                        else
+                            rootCol = col.previousElementSibling.id.replace(/columnHeader/g, "");
+                    }
+                    this.dataTableService.currColumnEdit = rootCol;
+                    this.colDragStartFrmHeaderTracker = { col: rootCol, xstart: useX, ystart: null, resized: false };
+                    this.listenForMouseUp = true;
+                }
+                if (clist.contains(rcls)) {
+                    this.dataTableService.currColumnEdit = null;
+                    this.colDragStartFrmHeaderTracker = { col: null, xstart: null, ystart: e.pageY, resized: false };
+                    this.listenForMouseUp = true;
+                }
+                if (!clist.contains(cls) && !clist.contains(rcls)) { //drag column to diff position
+                    let rootCol;
+                    this.colMoving = true;
+                    rootCol = col.id.replace(/columnHeader/g, "");
+                    this.dataTableService.currColumnEdit = rootCol;
+                    this.colDragStartFrmHeaderTracker = { col: rootCol, xstart: null, ystart: null, resized: false };
+                    this.listenForColMvMouseUp = true;
+                }
+            }
+        }
+        if (e.type === "mousemove") {
+            if (!this.colMoving) {
+                if (this.colDragStartFrmHeaderTracker.col && this.dataTableService.currColumnEdit === this.colDragStartFrmHeaderTracker.col)
+                    this.doHeaderWidth(e);
+                if (this.colDragStartFrmHeaderTracker.ystart)
+                    this.doHeaderHeight(e);
+            }
+            else {
+                if (this.listenForColMvMouseUp)
+                    this.handleColMoveMouseUp(e);
+            }
+        }
+    }
+    handleCellSizeAdjust(e, rootCol) {
+        let col;
+        const cls = "moveable-col";
+        const rcls = "moveable-row";
+        const clist = e.target.classList;
+        if (e.type === "mousedown" && /data-cell/g.test(e.target.className)) {
+            if (e && e.target && /data-cell/g.test(e.target.className))
+                col = e.target;
+            if (e && e.target.parentElement && /data-cell/g.test(e.target.parentElement.className))
+                col = e.target.parentElement;
+            if (clist.contains(cls)) {
+                if (col) {
+                    let useX = e.offsetX;
+                    const cBds = col.getBoundingClientRect();
+                    if (useX > ((cBds.right - cBds.left) / 2)) { //the one we're aiming for IS the target
+                        useX = (useX - cBds.width);
+                    }
+                    if (rootCol) {
+                        this.dataTableService.currColumnEdit = rootCol;
+                        this.colDragStartFrmCellTracker = { col: rootCol, row: null, xstart: useX, ystart: null, resized: false };
+                        this.listenForMouseUp = true;
+                    }
+                }
+            }
+            if (clist.contains(rcls)) {
+                this.dataTableService.currColumnEdit = null;
+                if (!this.currDataRow) {
+                    this.currColForDataRow = rootCol; //this lets us process the sub once on a given cell
+                    this.currDataRow = document.getElementById(col.getAttribute("data-index"));
+                }
+                this.colDragStartFrmCellTracker = { col: null, row: this.currDataRow, xstart: null, ystart: e.offsetY, resized: false };
+                this.listenForMouseUp = true;
+            }
+        }
+        if (e.type === "mousemove") {
+            if (this.colDragStartFrmCellTracker.col && this.dataTableService.currColumnEdit === this.colDragStartFrmCellTracker.col)
+                this.doCellWidth(e);
+            if (this.colDragStartFrmCellTracker.row && this.colDragStartFrmCellTracker.ystart)
+                this.doRowHeight(e);
+        }
+    }
+    handleTableHeightAdjust(e) {
+        const rcls = "moveable-row";
+        const clist = e.target.classList;
+        if (e.type === "mousedown" && /data-table-footer/g.test(e.target.className)) {
+            this.listenForSelectStart = true;
+            if (clist.contains(rcls)) {
+                this.tblDragStartFrmPagiTracker = { row: e.target, ystart: e.offsetY, resized: false };
+                this.listenForMouseUp = true;
+            }
+        }
+        if (e.type === "mousemove") {
+            if (this.tblDragStartFrmPagiTracker.row && this.tblDragStartFrmPagiTracker.ystart)
+                this.doTblHeight(e);
+        }
+    }
+    doHeaderWidth(e) {
+        try {
+            const head = document.getElementById("columnHeader" + this.colDragStartFrmHeaderTracker.col);
+            if (head) {
+                const hbds = head?.getBoundingClientRect();
+                const useWid = e.pageX - (hbds.left + window.scrollX);
+                this.colDragStartFrmHeaderTracker.resized = true;
+                this.headDims.next({ prop: "width", value: Math.floor(Math.max(30, useWid)) });
+            }
+        }
+        catch (err) { }
+    }
+    doHeaderHeight(e) {
+        try {
+            const hdrs = document.querySelector(".col-header:not(.col-header-minimized)") || document.getElementById("dataTableHeaders");
+            if (hdrs) {
+                const hdrbds = hdrs.getBoundingClientRect();
+                const useHgt = e.pageY - (hdrbds.top + window.scrollY);
+                this.colDragStartFrmHeaderTracker.resized = true;
+                this.headDims.next({ prop: "height", value: Math.floor(Math.max(30, useHgt)) });
+            }
+        }
+        catch (err) { }
+    }
+    doCellWidth(e) {
+        try {
+            const head = document.getElementById("columnHeader" + this.colDragStartFrmCellTracker.col); //this looks outta place but is ok here
+            if (head) {
+                const useWid = e.pageX - (head.getBoundingClientRect().left + window.scrollX);
+                this.colDragStartFrmCellTracker.resized = true;
+                this.cellDims.next({ prop: "width", value: Math.floor(Math.max(30, useWid)) });
+            }
+        }
+        catch (err) { }
+    }
+    doRowHeight(e) {
+        try {
+            const rowbds = this.colDragStartFrmCellTracker.row.getBoundingClientRect();
+            const useHgt = e.pageY - (rowbds.top + window.scrollY);
+            this.colDragStartFrmCellTracker.resized = true;
+            this.cellDims.next({ row: this.colDragStartFrmCellTracker.row, prop: "height", value: Math.floor(Math.max(30, useHgt)) });
+        }
+        catch (err) { }
+    }
+    doTblHeight(e) {
+        try {
+            const rowbds = this.tblDragStartFrmPagiTracker.row.getBoundingClientRect();
+            const useHgt = e.pageY - (rowbds.bottom + window.scrollY);
+            this.tblDragStartFrmPagiTracker.resized = true;
+            let max = 1000;
+            if (isNaN(max))
+                max = 700;
+            const tblWant = Math.min((this.dTblHeight + useHgt), max);
+            this.dTblHeight = Math.floor(Math.max(tblWant, 100));
+            this.dTblHeightOutput.next(this.dTblHeight);
+        }
+        catch (err) { }
+    }
+    handleColResMouseUp(e) {
+        try {
+            e && e.preventDefault();
+        }
+        catch (e) { }
+        if (this.colMoving)
+            return;
+        this.listenForMouseUp = false;
+        if (this.colDragStartFrmHeaderTracker.ystart)
+            this.doHeaderHeight(e);
+        if (this.colDragStartFrmCellTracker.ystart)
+            this.doRowHeight(e);
+        if (this.colDragStartFrmHeaderTracker.col && this.dataTableService.currColumnEdit === this.colDragStartFrmHeaderTracker.col)
+            this.doHeaderWidth(e);
+        if (this.colDragStartFrmCellTracker.col && this.dataTableService.currColumnEdit === this.colDragStartFrmCellTracker.col)
+            this.doCellWidth(e);
+        if (this.tblDragStartFrmPagiTracker.ystart) {
+            this.doTblHeight(e);
+            this.listenForSelectStart = false;
+        }
+        this.didResizeOnEvent = (this.colDragStartFrmCellTracker.resized ||
+            this.colDragStartFrmHeaderTracker.resized || this.tblDragStartFrmPagiTracker.resized);
+        this.colDragStartFrmHeaderTracker = { col: null, xstart: null, ystart: null, resized: false };
+        this.colDragStartFrmCellTracker = { col: null, row: null, xstart: null, ystart: null, resized: false };
+        this.tblDragStartFrmPagiTracker = { row: null, ystart: null, resized: false };
+        this.currDataRow = null;
+        this.currColForDataRow = null;
+        if (window.getSelection)
+            window.getSelection()?.removeAllRanges();
+        if (this.dataTableService.currColumnEdit) {
+            const prop = this.common.replaceUniSep(this.dataTableService.currColumnEdit);
+            if (this.dataTableService.dataFilSrtTracker[prop] && this.dataTableService.dataFilSrtTracker[prop].colWidth) {
+                const useWid = Math.min(2500, (parseInt(this.dataTableService.dataFilSrtTracker[prop].colWidth.replace(/[ ]?px/g, ""))));
+                this.cellDims.next({ prop: "width", value: (Math.floor(Math.max(50, useWid))) });
+            }
+        }
+        setTimeout(() => {
+            this.dataTableService.currColumnEdit = null;
+            this.didResizeOnEvent = false;
+            if (window.getSelection)
+                window.getSelection()?.removeAllRanges();
+        });
+    }
+    handleColMoveMouseUp(e) {
+        try {
+            e && e.preventDefault();
+        }
+        catch (e) { }
+        const isMUp = e && e.type === "mouseup";
+        if (isMUp) {
+            this.listenForColMvMouseUp = false;
+            this.didResizeOnEvent = true;
+            this.colDragStartFrmHeaderTracker = { col: null, xstart: null, ystart: null, resized: false };
+        }
+        if (this.colMoving) {
+            if (window.getSelection)
+                window.getSelection()?.removeAllRanges();
+            if (this.dataTableService.currColumnEdit) {
+                const colRef = document.getElementById("columnHeader" + this.dataTableService.currColumnEdit);
+                if (colRef) {
+                    let xDrop = e.clientX;
+                    let i = 0;
+                    let lfts = [];
+                    let wantlfts = [];
+                    const cols = document.getElementsByClassName("col-header");
+                    const len = cols.length;
+                    const nwColLft = Math.floor(colRef.getBoundingClientRect().left);
+                    for (i; i < len; i++) {
+                        const col = cols[i];
+                        if (!col.classList.contains("col-header-minimized")) {
+                            const elLft = Math.floor(col.getBoundingClientRect().left);
+                            lfts.push(elLft);
+                            if (col.id !== colRef.id)
+                                wantlfts.push(elLft);
+                        }
+                    }
+                    wantlfts.push(xDrop);
+                    wantlfts = wantlfts.sort((a, b) => a - b);
+                    if (lfts.length && lfts.length === wantlfts.length)
+                        this.columnMove.next({ ls: lfts, nl: nwColLft, wl: wantlfts, x: xDrop });
+                }
+            }
+            if (isMUp) {
+                setTimeout(() => {
+                    this.dataTableService.currColumnEdit = null;
+                    this.didResizeOnEvent = false;
+                    this.colMoving = false;
+                });
+            }
+        }
+    }
+    stopWindowSelection(e) {
+        e.preventDefault();
+        return false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: TableDragService, deps: [{ token: DataTableService }, { token: CommonService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: TableDragService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: TableDragService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: DataTableService }, { type: CommonService }] });
+
+class DataTableHeader {
+    common;
+    tblDragService;
+    dataTableService;
+    constructor(common, tblDragService, dataTableService) {
+        this.common = common;
+        this.tblDragService = tblDragService;
+        this.dataTableService = dataTableService;
+    }
+    init = false;
+    showBtnX = false;
+    autoMaxed = false;
+    text = "";
+    elCol = "";
+    canTabScroll = true;
+    compOpts = [];
+    filterBuildUp = [];
+    colWid = "";
+    canFreeze = false;
+    columnHeader;
+    sort = new EventEmitter();
+    render = new EventEmitter();
+    width = new EventEmitter();
+    height = new EventEmitter();
+    reset = new EventEmitter();
+    freeze = new EventEmitter();
+    scrollOnFocus = new EventEmitter();
+    colHeaderEl;
+    filterInputEl;
+    compSelectEl;
+    ngOnInit() {
+        this.elCol = this.common.elifyCol(this.columnHeader.column);
+        this.text = this.common.titleCase(this.columnHeader.column);
+        this.compOpts = [...this.dataTableService.comparatorOpts[this.columnHeader.dataType]];
+        this.tblDragService.headDims.subscribe(d => { this.updateUiColCellTheme(d.prop, d.value); });
+        this.dataTableService.setIdealColumnWidth.subscribe(c => { this.handleColResDblClick(this.columnHeader.column, true); });
+    }
+    ngAfterViewInit() {
+        if (this.columnHeader.dataType === "date") {
+            setTimeout(() => {
+                this.filterInputEl?.nativeElement.addEventListener("change", e => { this.filterDateOnKeyUp(e); });
+            });
+        }
+    }
+    preventTabScroll() {
+        this.canTabScroll = false;
+    }
+    emitTabFocus(col) {
+        if (this.canTabScroll)
+            this.scrollOnFocus.emit(col);
+    }
+    freezeColOnClick(e, prop) {
+        e && e.stopPropagation();
+        try {
+            const currCol = this.dataTableService.dataFilSrtTracker[prop];
+            if (currCol) {
+                this.dataTableService.dataFilSrtTracker[prop].freeze = !currCol.freeze;
+                const nowVal = this.dataTableService.dataFilSrtTracker[prop].freeze;
+                if (nowVal)
+                    this.columnHeader.freeze = true;
+                else
+                    this.columnHeader.freeze = false;
+                this.freeze.emit(prop);
+            }
+        }
+        catch (e) { }
+    }
+    doSortOnClick(e, col) {
+        e && e.stopPropagation();
+        this.canTabScroll = true;
+        if (!this.dataTableService.isSorting) {
+            this.dataTableService.isSorting = true;
+            setTimeout(() => {
+                this.dataTableService.doSortOnField(col);
+                this.render.emit({ value: (this.dataTableService.dataFilSrtTracker[col].filter || ""), field: col });
+                if (!this.dataTableService.currSelRows.length && this.dataTableService.arefilSrtTrkPropsDefault())
+                    this.reset.emit(col);
+                this.dataTableService.isSorting = false;
+            });
+        }
+    }
+    resetColFilter(event, field) {
+        event && event.stopPropagation();
+        const fil = this.filterInputEl.nativeElement;
+        const comp = this.compSelectEl.nativeElement;
+        if (fil) {
+            fil.value = "";
+            comp.value = "";
+            this.dataTableService.dataFilSrtTracker[field].comparator = null;
+            this.filterOnKeyUp(event, field, "", true);
+        }
+    }
+    filterDateOnKeyUp(event) {
+        const elId = event.target?.id?.replace(/filter/g, "");
+        const field = this.common.replaceUniSep(elId);
+        this.filterOnKeyUp(event, field, event.target.value);
+    }
+    filterOnKeyUp(event, field, val, manual) {
+        const filObj = { value: val, field: field };
+        if (field && !this.dataTableService.isFiltering) {
+            if (!manual && event && event.type !== "change" && !this.common.keyCanSearch(event))
+                return;
+            this.dataTableService.isFiltering = true;
+            this.dataTableService.dataFilSrtTracker[field].filter = val || "";
+            this.dataTableService.columnFilter(this.dataTableService.mainData, field, this.dataTableService.dataFilSrtTracker, this.dataTableService.sortOrder, manual);
+            this.render.emit(filObj);
+            setTimeout(() => {
+                this.dataTableService.isFiltering = false;
+                const buildUpLen = this.filterBuildUp.length;
+                if (buildUpLen) {
+                    const filBld = this.filterBuildUp[(buildUpLen - 1)];
+                    this.filterOnKeyUp(null, filBld.field, filBld.value, true);
+                    this.filterBuildUp = [];
+                    if ((this.dataTableService.dataFilSrtTracker[field].filter ||
+                        (this.dataTableService.dataFilSrtTracker[field].comparator && this.dataTableService.dataFilSrtTracker[field].comparator != "Equals"))) {
+                        this.showBtnX = true;
+                    }
+                    else {
+                        this.showBtnX = false;
+                    }
+                }
+            }, 500);
+            if ((this.dataTableService.dataFilSrtTracker[field].filter ||
+                (this.dataTableService.dataFilSrtTracker[field].comparator && this.dataTableService.dataFilSrtTracker[field].comparator != "Equals"))) {
+                this.showBtnX = true;
+            }
+            else {
+                this.showBtnX = false;
+            }
+            const tlFil = document.getElementsByName("topLevelDataFilter")[0];
+            if (tlFil)
+                tlFil.value = "";
+        }
+        else {
+            if (!this.filterBuildUp.find(f => f.value === val && f.field === field))
+                this.filterBuildUp.push(filObj);
+        }
+    }
+    handleComparatorChange(col, comp) {
+        if (col) {
+            const value = this.dataTableService.dataFilSrtTracker[col].filter;
+            this.dataTableService.dataFilSrtTracker[col].comparator = comp;
+            this.filterOnKeyUp(null, col, (value || ""), true);
+        }
+    }
+    updateUiColCellTheme(cssProp, val, col) {
+        if (cssProp === "height")
+            this.height.emit(val);
+        const prop = col || this.common.replaceUniSep(this.dataTableService.currColumnEdit);
+        if (prop && this.dataTableService.dataFilSrtTracker[prop]) {
+            if (cssProp === "width") {
+                this.dataTableService.dataFilSrtTracker[prop].colWidth = (val || parseInt(this.colWid)).toString();
+                this.width.emit({ column: prop, value: val || parseInt(this.colWid) });
+            }
+        }
+    }
+    handleColResDblClick(prop, auto) {
+        if (this.dataTableService.dataFilSrtTracker[prop] && (!auto || (!this.autoMaxed && this.dataTableService.visibleCols.includes(prop)))) {
+            let i = 0;
+            let wids = [];
+            let useWid = 50;
+            const els = document.getElementsByClassName("data-cell-" + this.common.elifyCol(prop));
+            const nw = els[0]?.getBoundingClientRect().width || 0;
+            const len = els.length;
+            if (len) {
+                for (i; i < len; i++)
+                    wids.push(els[i].scrollWidth);
+                useWid = wids.sort()[(len - 1)];
+                if (useWid && useWid > nw) {
+                    const cswid = Math.ceil(Math.max((useWid + 1), parseInt(this.dataTableService.useColWid.replace(/[ ]?px/g, ""))));
+                    this.updateUiColCellTheme("width", cswid, prop);
+                    this.autoMaxed = true;
+                }
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DataTableHeader, deps: [{ token: CommonService }, { token: TableDragService }, { token: DataTableService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DataTableHeader, isStandalone: true, selector: "app-data-table-header", inputs: { colWid: "colWid", canFreeze: "canFreeze", columnHeader: "columnHeader" }, outputs: { sort: "sort", render: "render", width: "width", height: "height", reset: "reset", freeze: "freeze", scrollOnFocus: "scrollOnFocus" }, viewQueries: [{ propertyName: "colHeaderEl", first: true, predicate: ["colHeader"], descendants: true, static: true }, { propertyName: "filterInputEl", first: true, predicate: ["filterInput"], descendants: true, static: true }, { propertyName: "compSelectEl", first: true, predicate: ["compSelect"], descendants: true, static: true }], ngImport: i0, template: "<div #colHeader [id]=\"'columnHeader' + elCol\" class=\"col-header\" (dblclick)=\"handleColResDblClick(columnHeader.column)\"\r\n[ngClass]=\"{ 'col-item-freeze': columnHeader.freeze, }\"\r\n[ngStyle]=\"{'width': columnHeader.width, 'height': columnHeader.height, 'lineHeight': columnHeader.lineHeight}\"\r\n(mousedown)=\"tblDragService.handleHeaderSizeAdjust($event)\" (mouseup)=\"tblDragService.handleColResMouseUp($event)\"\r\n(mousemove)=\"tblDragService.checkItemBorderCursor($event)\" (mousemove)=\"tblDragService.handleHeaderSizeAdjust($event)\">\r\n    <span (mousemove)=\"common.unbindMouseEvent($event)\" (mousedown)=\"common.unbindMouseEvent($event)\" (mouseup)=\"common.unbindMouseEvent($event)\"\r\n    (click)=\"doSortOnClick($event, columnHeader.column)\" [class.span-disabled]=\"dataTableService.isSorting\">{{text}}</span>\r\n    <button [id]=\"'btnSort' + elCol\" type=\"button\" [disabled]=\"dataTableService.isSorting\" (click)=\"doSortOnClick($event, columnHeader.column)\" class=\"data-sort-arr\"\r\n    (mousemove)=\"common.unbindMouseEvent($event)\" (mousedown)=\"preventTabScroll()\" (mouseup)=\"common.unbindMouseEvent($event)\"\r\n    (focus)=\"emitTabFocus(elCol)\">\r\n        <i class=\"material-icons v-mid\">{{dataTableService.dataFilSrtTracker[columnHeader.column].sort === \"asc\" ? \"arrow_downward\" : \"arrow_upward\"}}</i>\r\n    </button>\r\n    @if(dataTableService.sortOrder.indexOf(columnHeader.column) > -1){\r\n        <sup [class.prevent]=\"dataTableService.isSorting\" (click)=\"doSortOnClick($event, columnHeader.column)\" \r\n         (mousemove)=\"common.unbindMouseEvent($event)\" (mousedown)=\"common.unbindMouseEvent($event)\" (mouseup)=\"common.unbindMouseEvent($event)\" \r\n         class=\"sort-order-indicator\">{{(dataTableService.sortOrder.indexOf(columnHeader.column)+1) | number}}</sup>\r\n    }\r\n    @if(canFreeze){\r\n        <button type=\"button\" (click)=\"freezeColOnClick($event, columnHeader.column)\" class=\"btn-freeze-col\"\r\n        (mousemove)=\"common.unbindMouseEvent($event)\" (mousedown)=\"common.unbindMouseEvent($event)\" (mouseup)=\"common.unbindMouseEvent($event)\" >\r\n            <i class=\"material-icons\">featured_play_list</i>\r\n        </button>\r\n    }\r\n    <br>\r\n    @if(dataTableService.dataFilSrtTracker[columnHeader.column].filter){\r\n        <button type=\"button\" class=\"btn-x-filter\" (click)=\"resetColFilter($event, columnHeader.column)\" \r\n        (mousemove)=\"common.unbindMouseEvent($event)\" (mousedown)=\"common.unbindMouseEvent($event)\" (mouseup)=\"common.unbindMouseEvent($event)\" >&times;</button>\r\n    }\r\n    <input #filterInput [name]=\"'filter' + elCol\" [id]=\"'filter' + elCol\"\r\n    (input)=\"filterOnKeyUp($event, columnHeader.column, $any($event).target.value)\" maxlength=\"255\" autocomplete=\"off\" \r\n    (keyup)=\"filterOnKeyUp($event, columnHeader.column, $any($event).target.value)\" [attr.type]=\"columnHeader.dataType\" \r\n    (mousemove)=\"common.unbindMouseEvent($event)\" (mousedown)=\"common.unbindMouseEvent($event)\" (mouseup)=\"common.unbindMouseEvent($event)\" />\r\n    <select #compSelect [id]=\"'selectComp' + elCol\" [name]=\"'selectComp' + elCol\" [(ngModel)]=\"dataTableService.dataFilSrtTracker[columnHeader.column].comparator\" \r\n    (change)=\"handleComparatorChange(columnHeader.column, $any($event).target.value)\" class=\"select-filter-comparator\"\r\n    (mousemove)=\"common.unbindMouseEvent($event)\" (mousedown)=\"common.unbindMouseEvent($event)\" (mouseup)=\"common.unbindMouseEvent($event)\" >\r\n        <option value=\"\">Comparison?</option>\r\n        @for(opt of compOpts; track opt){\r\n            <option [value]=\"opt\" >{{opt}}</option>\r\n        }\r\n    </select>\r\n    <div class=\"inline relly\" style=\"z-index: 1;\">\r\n        <button class=\"btn-fil-comp\" type=\"button\"\r\n        (mousemove)=\"common.unbindMouseEvent($event)\" (mousedown)=\"common.unbindMouseEvent($event)\" (mouseup)=\"common.unbindMouseEvent($event)\" >\r\n            <i class=\"material-icons\" aria-hidden=\"false\">filter_list</i>\r\n        </button>\r\n    </div>\r\n</div>\r\n", styles: [".btn-x-filter{padding:0;float:left;border:none;color:maroon;background:none;font-weight:600;font-size:x-large;line-height:16px;margin:17px 0 0 3px}.btn-x-filter:hover{background:#fdf3f3}.span-disabled{opacity:.5}\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{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-ctrl-sel-rows: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}.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{font-size:15px;padding:11px 0 11px 17px}.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}.data-cell img{max-width:100px;height:auto;margin:0;vertical-align:middle}.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-freeze-col{float:left;border:none;cursor:pointer;background:none}.btn-freeze-col .material-icons{font-size:16px;color:var(--accent-color)}.col-header span{word-wrap:break-word;vertical-align:middle;font-size:var(--reg-font-size)}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:\"liga\";-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DataTableHeader, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-data-table-header', imports: [CommonModule, FormsModule, DecimalPipe,], template: "<div #colHeader [id]=\"'columnHeader' + elCol\" class=\"col-header\" (dblclick)=\"handleColResDblClick(columnHeader.column)\"\r\n[ngClass]=\"{ 'col-item-freeze': columnHeader.freeze, }\"\r\n[ngStyle]=\"{'width': columnHeader.width, 'height': columnHeader.height, 'lineHeight': columnHeader.lineHeight}\"\r\n(mousedown)=\"tblDragService.handleHeaderSizeAdjust($event)\" (mouseup)=\"tblDragService.handleColResMouseUp($event)\"\r\n(mousemove)=\"tblDragService.checkItemBorderCursor($event)\" (mousemove)=\"tblDragService.handleHeaderSizeAdjust($event)\">\r\n    <span (mousemove)=\"common.unbindMouseEvent($event)\" (mousedown)=\"common.unbindMouseEvent($event)\" (mouseup)=\"common.unbindMouseEvent($event)\"\r\n    (click)=\"doSortOnClick($event, columnHeader.column)\" [class.span-disabled]=\"dataTableService.isSorting\">{{text}}</span>\r\n    <button [id]=\"'btnSort' + elCol\" type=\"button\" [disabled]=\"dataTableService.isSorting\" (click)=\"doSortOnClick($event, columnHeader.column)\" class=\"data-sort-arr\"\r\n    (mousemove)=\"common.unbindMouseEvent($event)\" (mousedown)=\"preventTabScroll()\" (mouseup)=\"common.unbindMouseEvent($event)\"\r\n    (focus)=\"emitTabFocus(elCol)\">\r\n        <i class=\"material-icons v-mid\">{{dataTableService.dataFilSrtTracker[columnHeader.column].sort === \"asc\" ? \"arrow_downward\" : \"arrow_upward\"}}</i>\r\n    </button>\r\n    @if(dataTableService.sortOrder.indexOf(columnHeader.column) > -1){\r\n        <sup [class.prevent]=\"dataTableService.isSorting\" (click)=\"doSortOnClick($event, columnHeader.column)\" \r\n         (mousemove)=\"common.unbindMouseEvent($event)\" (mousedown)=\"common.unbindMouseEvent($event)\" (mouseup)=\"common.unbindMouseEvent($event)\" \r\n         class=\"sort-order-indicator\">{{(dataTableService.sortOrder.indexOf(columnHeader.column)+1) | number}}</sup>\r\n    }\r\n    @if(canFreeze){\r\n        <button type=\"button\" (click)=\"freezeColOnClick($event, columnHeader.column)\" class=\"btn-freeze-col\"\r\n        (mousemove)=\"common.unbindMouseEvent($event)\" (mousedown)=\"common.unbindMouseEvent($event)\" (mouseup)=\"common.unbindMouseEvent($event)\" >\r\n            <i class=\"material-icons\">featured_play_list</i>\r\n        </button>\r\n    }\r\n    <br>\r\n    @if(dataTableService.dataFilSrtTracker[columnHeader.column].filter){\r\n        <button type=\"button\" class=\"btn-x-filter\" (click)=\"resetColFilter($event, columnHeader.column)\" \r\n        (mousemove)=\"common.unbindMouseEvent($event)\" (mousedown)=\"common.unbindMouseEvent($event)\" (mouseup)=\"common.unbindMouseEvent($event)\" >&times;</button>\r\n    }\r\n    <input #filterInput [name]=\"'filter' + elCol\" [id]=\"'filter' + elCol\"\r\n    (input)=\"filterOnKeyUp($event, columnHeader.column, $any($event).target.value)\" maxlength=\"255\" autocomplete=\"off\" \r\n    (keyup)=\"filterOnKeyUp($event, columnHeader.column, $any($event).target.value)\" [attr.type]=\"columnHeader.dataType\" \r\n    (mousemove)=\"common.unbindMouseEvent($event)\" (mousedown)=\"common.unbindMouseEvent($event)\" (mouseup)=\"common.unbindMouseEvent($event)\" />\r\n    <select #compSelect [id]=\"'selectComp' + elCol\" [name]=\"'selectComp' + elCol\" [(ngModel)]=\"dataTableService.dataFilSrtTracker[columnHeader.column].comparator\" \r\n    (change)=\"handleComparatorChange(columnHeader.column, $any($event).target.value)\" class=\"select-filter-comparator\"\r\n    (mousemove)=\"common.unbindMouseEvent($event)\" (mousedown)=\"common.unbindMouseEvent($event)\" (mouseup)=\"common.unbindMouseEvent($event)\" >\r\n        <option value=\"\">Comparison?</option>\r\n        @for(opt of compOpts; track opt){\r\n            <option [value]=\"opt\" >{{opt}}</option>\r\n        }\r\n    </select>\r\n    <div class=\"inline relly\" style=\"z-index: 1;\">\r\n        <button class=\"btn-fil-comp\" type=\"button\"\r\n        (mousemove)=\"common.unbindMouseEvent($event)\" (mousedown)=\"common.unbindMouseEvent($event)\" (mouseup)=\"common.unbindMouseEvent($event)\" >\r\n            <i class=\"material-icons\" aria-hidden=\"false\">filter_list</i>\r\n        </button>\r\n    </div>\r\n</div>\r\n", styles: [".btn-x-filter{padding:0;float:left;border:none;color:maroon;background:none;font-weight:600;font-size:x-large;line-height:16px;margin:17px 0 0 3px}.btn-x-filter:hover{background:#fdf3f3}.span-disabled{opacity:.5}\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{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-ctrl-sel-rows: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}.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{font-size:15px;padding:11px 0 11px 17px}.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}.data-cell img{max-width:100px;height:auto;margin:0;vertical-align:middle}.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-freeze-col{float:left;border:none;cursor:pointer;background:none}.btn-freeze-col .material-icons{font-size:16px;color:var(--accent-color)}.col-header span{word-wrap:break-word;vertical-align:middle;font-size:var(--reg-font-size)}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:\"liga\";-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}\n"] }]
+        }], ctorParameters: () => [{ type: CommonService }, { type: TableDragService }, { type: DataTableService }], propDecorators: { colWid: [{
+                type: Input
+            }], canFreeze: [{
+                type: Input
+            }], columnHeader: [{
+                type: Input
+            }], sort: [{
+                type: Output,
+                args: ["sort"]
+            }], render: [{
+                type: Output,
+                args: ["render"]
+            }], width: [{
+                type: Output,
+                args: ["width"]
+            }], height: [{
+                type: Output,
+                args: ["height"]
+            }], reset: [{
+                type: Output,
+                args: ["reset"]
+            }], freeze: [{
+                type: Output,
+                args: ["freeze"]
+            }], scrollOnFocus: [{
+                type: Output,
+                args: ["scrollOnFocus"]
+            }], colHeaderEl: [{
+                type: ViewChild,
+                args: ['colHeader', { static: true }]
+            }], filterInputEl: [{
+                type: ViewChild,
+                args: ['filterInput', { static: true }]
+            }], compSelectEl: [{
+                type: ViewChild,
+                args: ['compSelect', { static: true }]
+            }] } });
+
+class DataTablePaginator {
+    dataTableService;
+    tblDragService;
+    common;
+    constructor(dataTableService, tblDragService, common) {
+        this.dataTableService = dataTableService;
+        this.tblDragService = tblDragService;
+        this.common = common;
+    }
+    init = true;
+    isKeying = false;
+    totalRowStr = "";
+    rowinating = false;
+    totalRows = 0;
+    filSortStr = "";
+    ngOnChanges(changes) {
+        if (!this.init && changes) {
+            if (changes["totalRows"])
+                this.setUpPagi();
+        }
+    }
+    ngOnInit() {
+        this.setUpPagi();
+        this.init = false;
+    }
+    setUpPagi() {
+        this.totalRowStr = this.totalRows.toLocaleString(undefined, { maximumFractionDigits: 0 });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DataTablePaginator, deps: [{ token: DataTableService }, { token: TableDragService }, { token: CommonService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DataTablePaginator, isStandalone: true, selector: "app-data-table-paginator", inputs: { totalRows: "totalRows", filSortStr: "filSortStr" }, usesOnChanges: 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=\"three-qtr-wid\">\r\n        <div class=\"inline v-mid semi-heavy lg-text\">{{totalRowStr}}</div>&nbsp;<div class=\"inline v-mid\">row{{totalRows === 1 ? \"\" : \"s\"}}</div>\r\n        @if(filSortStr){\r\n            <div class=\"inline v-mid\" [innerHTML]=\"filSortStr\"></div>\r\n        }\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 }.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)}.skip-to-contain{position:relative;display:inline-block;vertical-align:middle}.skip-to-options-hide{opacity:0;max-height:0;min-width:0;max-width:0;overflow:hidden}.skip-to-options{right:0;z-index:10;bottom:33px;border-radius:3px;position:absolute;background:#fff;vertical-align:middle;opacity:1!important;overflow:auto!important;min-width:175px!important;max-width:200px!important;max-height:200px!important;min-height:150px;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);transition:opacity .2s ease}.skip-to-options div{cursor:pointer;padding:15px 7px;text-align:left!important;border-bottom:1px solid var(--grid-color)}.skip-to-options div:hover{text-decoration:underline}.skip-to-options div:last-of-type{border-bottom:none}\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{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-ctrl-sel-rows: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}.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{font-size:15px;padding:11px 0 11px 17px}.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}.data-cell img{max-width:100px;height:auto;margin:0;vertical-align:middle}.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-freeze-col{float:left;border:none;cursor:pointer;background:none}.btn-freeze-col .material-icons{font-size:16px;color:var(--accent-color)}.col-header span{word-wrap:break-word;vertical-align:middle;font-size:var(--reg-font-size)}.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: "ngmodule", type: FormsModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DataTablePaginator, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-data-table-paginator', imports: [CommonModule, FormsModule,], 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=\"three-qtr-wid\">\r\n        <div class=\"inline v-mid semi-heavy lg-text\">{{totalRowStr}}</div>&nbsp;<div class=\"inline v-mid\">row{{totalRows === 1 ? \"\" : \"s\"}}</div>\r\n        @if(filSortStr){\r\n            <div class=\"inline v-mid\" [innerHTML]=\"filSortStr\"></div>\r\n        }\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 }.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)}.skip-to-contain{position:relative;display:inline-block;vertical-align:middle}.skip-to-options-hide{opacity:0;max-height:0;min-width:0;max-width:0;overflow:hidden}.skip-to-options{right:0;z-index:10;bottom:33px;border-radius:3px;position:absolute;background:#fff;vertical-align:middle;opacity:1!important;overflow:auto!important;min-width:175px!important;max-width:200px!important;max-height:200px!important;min-height:150px;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);transition:opacity .2s ease}.skip-to-options div{cursor:pointer;padding:15px 7px;text-align:left!important;border-bottom:1px solid var(--grid-color)}.skip-to-options div:hover{text-decoration:underline}.skip-to-options div:last-of-type{border-bottom:none}\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{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-ctrl-sel-rows: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}.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{font-size:15px;padding:11px 0 11px 17px}.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}.data-cell img{max-width:100px;height:auto;margin:0;vertical-align:middle}.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-freeze-col{float:left;border:none;cursor:pointer;background:none}.btn-freeze-col .material-icons{font-size:16px;color:var(--accent-color)}.col-header span{word-wrap:break-word;vertical-align:middle;font-size:var(--reg-font-size)}.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: { totalRows: [{
+                type: Input
+            }], filSortStr: [{
+                type: Input
+            }] } });
+
+class DataCellComponent {
+    tblDragService;
+    dataTableService;
+    common;
+    constructor(tblDragService, dataTableService, common) {
+        this.tblDragService = tblDragService;
+        this.dataTableService = dataTableService;
+        this.common = common;
+    }
+    init = true;
+    ready = false;
+    canEdit = false;
+    elCol = "";
+    cellStyle = {};
+    setCellEditScrlActionTO = null;
+    rawText;
+    cell;
+    rowId = ""; //starts with dataTableRow
+    colWid = "";
+    rowHeight = "";
+    noColResize = false;
+    width = new EventEmitter();
+    height = new EventEmitter();
+    edit = new EventEmitter();
+    dragListen = new EventEmitter();
+    validateEditFocus = new EventEmitter();
+    clearVEditFocus = new EventEmitter();
+    cellElem;
+    rightAlign = ""; //for numbers, always add a space in front
+    symbolCls = ""; //also for numbers only, always add a space in front
+    ngOnChanges(changes) {
+        if (!this.init) {
+            if (this.cell.visible || changes["rowHeight"]) {
+                if (typeof changes !== "undefined" && (changes["cell"] || changes["rowHeight"] || changes["colWid"]))
+                    this.applyDimensions();
+                if (this.cell.visible && !this.ready)
+                    this.handleSettingText();
+            }
+        }
+    }
+    ngOnInit() {
+        if (this.cell.visible)
+            this.applyDimensions();
+        if (this.cell.column)
+            this.elCol = this.common.elifyCol(this.cell.column);
+        this.rightAlign = this.cell.dataType === "number" ? " data-cell-riiight" : "";
+        this.applySymbol();
+        this.canEdit = this.cell.editable && !this.validateEdit(); //to see if free text edit
+        this.init = false;
+        this.tblDragService.cellDims.subscribe(d => { this.updateUiColCellTheme(d.prop, d.value); });
+    }
+    ngAfterViewInit() {
+        if (this.cell.visible)
+            this.handleSettingText();
+    }
+    validateEdit() {
+        if (!this.cell.html && (["number", "date"].includes(this.cell.dataType)))
+            return true;
+        return false;
+    }
+    applySymbol() {
+        const sym = this.dataTableService.dataFilSrtTracker[this.cell.column]["colCellSymbol"];
+        if (sym) {
+            this.symbolCls = ["$", "€", "£", "¥", "₣", "₹"].indexOf(sym) > -1 ? " has-symbol-b" : " has-symbol";
+            this.cellElem.nativeElement.setAttribute("data-symbol", sym);
+        }
+    }
+    handleSettingText() {
+        if (this.cell.text || (this.cell.html && !/<img/g.test(this.cell.html)))
+            return this.setCellText();
+        if (this.cell.html)
+            setTimeout(() => { this.setCellText(); }, 100);
+    }
+    setCellText() {
+        const cell = this.cellElem.nativeElement;
+        if (this.cell.text && !cell.textContent)
+            cell.textContent = this.cell.text;
+        if (this.cell.html && !cell.innerHTML)
+            cell.innerHTML = this.cell.html;
+        this.ready = true;
+        if (this.cell.html) {
+            setTimeout(() => {
+                const ancOIm = (document.querySelector("#" + this.rowId + " .data-cell-" + this.elCol + " a") ||
+                    document.querySelector("#" + this.rowId + " .data-cell-" + this.elCol + " img"));
+                if (ancOIm) {
+                    ancOIm.addEventListener("mousemove", e => { e && e.stopPropagation(); });
+                    ancOIm.addEventListener("mousedown", e => { e && e.stopPropagation(); });
+                    ancOIm.addEventListener("mouseup", e => { e && e.stopPropagation(); });
+                }
+            });
+        }
+    }
+    applyDimensions() {
+        this.cellStyle = { "width": (this.cell.width || this.colWid), "height": this.rowHeight };
+    }
+    updateUiColCellTheme(cssProp, val) {
+        const rProp = this.common.replaceUniSep(this.tblDragService.currColForDataRow);
+        if (cssProp === "height" && (this.cell.column === this.tblDragService.currColForDataRow || this.cell.column === rProp) &&
+            this.tblDragService.currDataRow.id === this.rowId)
+            this.height.emit(val);
+        const prop = this.common.replaceUniSep(this.dataTableService.currColumnEdit);
+        if (prop && this.dataTableService.dataFilSrtTracker[prop]) {
+            if (cssProp === "width") {
+                this.dataTableService.dataFilSrtTracker[prop].colWidth = (val || parseInt(this.colWid)).toString() + "px";
+                this.width.emit(val || parseInt(this.colWid));
+            }
+        }
+    }
+    handleColResDblClick(prop) {
+        if (this.dataTableService.dataFilSrtTracker[prop]) {
+            let i = 0;
+            let wids = [];
+            let useWid = 50;
+            const elCol = this.common.elifyCol(prop);
+            const els = document.getElementsByClassName("data-cell-" + elCol);
+            const nw = els[0]?.getBoundingClientRect().width || 0;
+            const len = els.length;
+            for (i; i < len; i++)
+                wids.push(els[i].scrollWidth);
+            useWid = wids.sort()[(len - 1)];
+            if (useWid && useWid > nw) {
+                const cswid = (Math.ceil(useWid + 1));
+                this.dataTableService.currColumnEdit = elCol;
+                this.updateUiColCellTheme("width", cswid);
+                setTimeout(() => this.dataTableService.currColumnEdit = null);
+            }
+        }
+    }
+    validateRawText(text, dataType) {
+        if (dataType === "number" && (!text || /[a-zA-Z \/]/g.test(text)))
+            return "";
+        return text;
+    }
+    setToEditAfterTO() {
+        this.setCellEditScrlActionTO = setTimeout(() => {
+            if (this.dataTableService.currEditCol === this.cell.column)
+                this.setCellToEdit(true);
+        }, 100);
+    }
+    setCellToEdit(noHScrl) {
+        if (this.tblDragService.didResizeOnEvent || !this.cell.editable) {
+            if (!this.cell.editable) {
+                this.dataTableService.clearAllFocused();
+                this.dataTableService.clearDCellFcsd();
+                this.clearVEditFocus.emit("");
+                this.dataTableService.currEditCol = "";
+                this.setCellEditScrlActionTO = null;
+                this.dataTableService.autoScrollOnEdit = false;
+                this.dataTableService.currEditIndex = -1;
+            }
+            return; //not editable or was really a drag event, not click
+        }
+        this.dataTableService.currEditCol = this.cell.column;
+        this.dataTableService.currEditIndex = parseInt(this.rowId.replace(/^dataTableRow/, ""));
+        const cell = this.cellElem.nativeElement;
+        const cellWid = parseInt(this.dataTableService.useColWid?.replace(/px/g, "") || "250");
+        if (cell.getBoundingClientRect().right + cellWid >= this.dataTableService.tblRight) {
+            if (!noHScrl) {
+                this.dataTableService.autoScrollOnEdit = true;
+                const grid = document.getElementById("dataTableBody");
+                grid.scrollBy((cellWid + 1), 0);
+            }
+            if (!this.setCellEditScrlActionTO) {
+                return this.setToEditAfterTO();
+            }
+            else {
+                window.clearTimeout(this.setCellEditScrlActionTO);
+            }
+        }
+        this.dataTableService.clearAllFocused();
+        this.dataTableService.clearDCellFcsd();
+        this.setCellEditScrlActionTO = null;
+        setTimeout(() => this.dataTableService.autoScrollOnEdit = false);
+        if (this.needsVal()) {
+            const okText = this.validateRawText(this.cell.rawText, this.cell.dataType);
+            if (this.cell.rawText && !okText)
+                return;
+            this.validateEditFocus.emit({ type: this.cell.dataType, value: okText });
+            return;
+        }
+        this.clearVEditFocus.emit("");
+        setTimeout(() => {
+            const fCellDragger = document.getElementsByClassName("focused-cell-dragger")[0];
+            const par = fCellDragger?.parentElement;
+            if (fCellDragger && par) {
+                const cbds = cell.getBoundingClientRect();
+                const rbds = par.getBoundingClientRect();
+                fCellDragger.style.left = (Math.ceil(cbds.left - rbds.left) + cbds.width - 4) + "px";
+                fCellDragger.style.top = (Math.ceil(cbds.bottom - rbds.top) - 4) + "px";
+            }
+        });
+    }
+    needsVal() {
+        if (!this.cell.html && (["number", "date"].includes(this.cell.dataType)))
+            return true;
+        return false;
+    }
+    emitEdit(event) {
+        if (!this.cell.editable || this.needsVal() /*only for validated edits*/ ||
+            (event.relatedTarget && event.relatedTarget.classList.contains("edit-input")))
+            return;
+        this.execFreeEdit();
+    }
+    execFreeEdit() {
+        const el = this.cellElem.nativeElement;
+        const val = el.textContent;
+        if (val !== this.rawText)
+            this.edit.emit({ column: this.cell.column, value: val });
+        else {
+            setTimeout(() => {
+                const actEl = document.activeElement;
+                if (actEl && actEl.id === "fCellDragger") {
+                    el.classList.add("dragger-cell-focused");
+                    this.dragListen.emit(true);
+                }
+                else {
+                    if (!actEl || (actEl && !/data-cell/g.test(actEl?.className))) {
+                        this.dataTableService.currEditIndex = -1;
+                        const fCellDragger = document.getElementsByClassName("focused-cell-dragger")[0];
+                        if (fCellDragger && !this.dataTableService.autoScrollOnEdit) {
+                            fCellDragger.style.removeProperty("top");
+                            fCellDragger.style.removeProperty("left");
+                        }
+                    }
+                }
+            });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DataCellComponent, deps: [{ token: TableDragService }, { token: DataTableService }, { token: CommonService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.10", type: DataCellComponent, isStandalone: true, selector: "app-data-cell", inputs: { rawText: "rawText", cell: "cell", rowId: "rowId", colWid: "colWid", rowHeight: "rowHeight", noColResize: "noColResize" }, outputs: { width: "width", height: "height", edit: "edit", dragListen: "dragListen", validateEditFocus: "validateEditFocus", clearVEditFocus: "clearVEditFocus" }, viewQueries: [{ propertyName: "cellElem", first: true, predicate: ["cellEl"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div #cellEl [attr.contenteditable]=\"canEdit\" [ngStyle]=\"cellStyle\" class=\"data-cell data-cell-{{elCol}}{{rightAlign}}{{symbolCls}}\" \r\n[ngClass]=\"{ 'col-item-freeze': cell.freeze, 'holding-check': cell.column === dataTableService.firstCol }\" tabindex=\"0\"\r\n(mousemove)=\"tblDragService.checkItemBorderCursor($event, noColResize)\" (mousemove)=\"tblDragService.handleCellSizeAdjust($event, elCol)\"\r\n(mousedown)=\"tblDragService.handleCellSizeAdjust($event, elCol)\" (focus)=\"setCellToEdit()\" (blur)=\"emitEdit($event)\"\r\n[attr.data-index]=\"rowId\" (dblclick)=\"handleColResDblClick(cell.column)\"\r\n></div>", styles: ["@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{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-ctrl-sel-rows: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}.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{font-size:15px;padding:11px 0 11px 17px}.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}.data-cell img{max-width:100px;height:auto;margin:0;vertical-align:middle}.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-freeze-col{float:left;border:none;cursor:pointer;background:none}.btn-freeze-col .material-icons{font-size:16px;color:var(--accent-color)}.col-header span{word-wrap:break-word;vertical-align:middle;font-size:var(--reg-font-size)}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:\"liga\";-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DataCellComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-data-cell', imports: [CommonModule], template: "<div #cellEl [attr.contenteditable]=\"canEdit\" [ngStyle]=\"cellStyle\" class=\"data-cell data-cell-{{elCol}}{{rightAlign}}{{symbolCls}}\" \r\n[ngClass]=\"{ 'col-item-freeze': cell.freeze, 'holding-check': cell.column === dataTableService.firstCol }\" tabindex=\"0\"\r\n(mousemove)=\"tblDragService.checkItemBorderCursor($event, noColResize)\" (mousemove)=\"tblDragService.handleCellSizeAdjust($event, elCol)\"\r\n(mousedown)=\"tblDragService.handleCellSizeAdjust($event, elCol)\" (focus)=\"setCellToEdit()\" (blur)=\"emitEdit($event)\"\r\n[attr.data-index]=\"rowId\" (dblclick)=\"handleColResDblClick(cell.column)\"\r\n></div>", styles: ["@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{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-ctrl-sel-rows: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}.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{font-size:15px;padding:11px 0 11px 17px}.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}.data-cell img{max-width:100px;height:auto;margin:0;vertical-align:middle}.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-freeze-col{float:left;border:none;cursor:pointer;background:none}.btn-freeze-col .material-icons{font-size:16px;color:var(--accent-color)}.col-header span{word-wrap:break-word;vertical-align:middle;font-size:var(--reg-font-size)}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:\"liga\";-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}\n"] }]
+        }], ctorParameters: () => [{ type: TableDragService }, { type: DataTableService }, { type: CommonService }], propDecorators: { rawText: [{
+                type: Input
+            }], cell: [{
+                type: Input
+            }], rowId: [{
+                type: Input
+            }], colWid: [{
+                type: Input
+            }], rowHeight: [{
+                type: Input
+            }], noColResize: [{
+                type: Input
+            }], width: [{
+                type: Output,
+                args: ["width"]
+            }], height: [{
+                type: Output,
+                args: ["height"]
+            }], edit: [{
+                type: Output,
+                args: ["edit"]
+            }], dragListen: [{
+                type: Output,
+                args: ["dragListen"]
+            }], validateEditFocus: [{
+                type: Output,
+                args: ["validateEditFocus"]
+            }], clearVEditFocus: [{
+                type: Output,
+                args: ["clearVEditFocus"]
+            }], cellElem: [{
+                type: ViewChild,
+                args: ['cellEl', { static: true }]
+            }] } });
+
+class NgxDeebodataCommunity {
+    dataTableService;
+    tblDragService;
+    common;
+    onWindowClick(e) {
+        if (this.validatedEditType && (!document.activeElement || (document.activeElement && !document.activeElement.className)))
+            this.clearValidatedEdit(e);
+    }
+    onWindowMouseUp(e) {
+        if (this.tblDragService.listenForMouseUp) {
+            this.tblDragService.handleColResMouseUp(e);
+            this.dataTableBody?.nativeElement.scrollBy(1, 0);
+        }
+        if (this.tblDragService.listenForColMvMouseUp)
+            this.tblDragService.handleColMoveMouseUp(e);
+        if (this.listenToCellDraggerMouseMove) {
+            this.listenToCellDraggerMouseMove = false;
+            this.clearDragEditFlag();
+            try {
+                this.fCellDragger.nativeElement.blur();
+            }
+            catch (e) { }
+        }
+        if (this.listenToCellDraggerMouseUp)
+            this.handleDraggerMU(e);
+        this.handleScrlBarDrag();
+    }
+    onWindowMouseMove(e) {
+        if (this.listenToCellDraggerMouseMove)
+            this.handleCellDraggerEdit(e);
+    }
+    onWindowSelectStart(e) {
+        if (this.listenToCellDraggerMouseMove)
+            e.preventDefault();
+        if (this.tblDragService.listenForSelectStart)
+            this.tblDragService.stopWindowSelection(e);
+    }
+    onWindowResize(e) {
+        this.dataTableService.setTblBounds();
+        this.clearValidatedEdit();
+    }
+    onWindowScroll(e) {
+        this.dataTableService.setTblBounds();
+        this.clearValidatedEdit();
+    }
+    constructor(dataTableService, tblDragService, common) {
+        this.dataTableService = dataTableService;
+        this.tblDragService = tblDragService;
+        this.common = common;
+    }
+    rows = [];
+    aboveHgt = signal(0, ...(ngDevMode ? [{ debugName: "aboveHgt" }] : /* istanbul ignore next */ []));
+    belowHgt = signal(0, ...(ngDevMode ? [{ debugName: "belowHgt" }] : /* istanbul ignore next */ []));
+    dtChecks = [];
+    rowNos = [];
+    verticalRest = 0;
+    horizRest = 0;
+    isScrolling = false;
+    useRowWid = "";
+    paginatorReady = false;
+    handlingSelRows = false;
+    columnOfInterest = "";
+    desRowHeight = "50";
+    listenToCellDraggerMouseMove = false;
+    listenToCellDraggerMouseUp = false;
+    topLevelFilter = "";
+    allFilSortInfo = "";
+    lockVScroll = false;
+    filterBuildUp = [];
+    togSelRows = "Selected Rows";
+    maxCols = 0;
+    lastElRowIndex = 0;
+    columnHeaders = [];
+    columnNames = [];
+    linkCell;
+    linkCells = [];
+    validatedEditType = "";
+    data = input([], ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    color1 = "";
+    color2 = "";
+    primaryKey = "";
+    defRowHgt = "50px";
+    defGridHgt = 500;
+    altRowColor = "#fafafa";
+    myColumnSymbols = [];
+    editable = true;
+    rowNumbers = true;
+    cellEdit = new EventEmitter();
+    dataTable;
+    dataTableBody;
+    aboveArea;
+    belowArea;
+    validatedEdit;
+    rowNumHeader;
+    rowNumBody;
+    fCellDragger;
+    selFilContainer;
+    btnTogSelRows;
+    dataTableHeaders;
+    topLevelDataFilter;
+    ngOnInit() {
+        if (this.defRowHgt && /\d+px/g.test(this.defRowHgt))
+            this.dataTableService.defltRHgt = this.defRowHgt;
+        if (this.defGridHgt)
+            this.dataTableService.dTblHeight = this.defGridHgt;
+        if (this.myColumnSymbols)
+            this.dataTableService.columnSymbols = [...this.myColumnSymbols];
+        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 (!this.dataTableService.errorLoading)
+            this.dataTableService.noDataMsg = "No data to display for this configuration.";
+        this.tblDragService.dTblHeightOutput.subscribe(h => this.setTableHeight(h));
+        this.tblDragService.columnMove.subscribe(c => this.processColMove(c));
+        setTimeout(() => this.setTableHeight(510), 1000); //for demo
+    }
+    getAllColsAtRuntime(excludeHidden) {
+        let cols = (typeof this.dataTableService.mainData[0] === "object" ? Object.keys(this.dataTableService.mainData[0]) :
+            (Object.keys(this.dataTableService.dataFilSrtTracker)));
+        if (!excludeHidden)
+            return cols;
+        return cols.filter((c) => {
+            return !this.dataTableService.dataFilSrtTracker[c].minimize;
+        });
+    }
+    setMaxCols() {
+        const el = this.dataTable.nativeElement;
+        if (el) {
+            const elWid = el.getBoundingClientRect().width;
+            return elWid >= 1024 ? 5 : (elWid > 760 ? 3 : 2);
+        }
+        const wid = window.innerWidth;
+        return wid >= 1024 ? 5 : (wid > 760 ? 3 : 2);
+    }
+    getAllColWidth(colLen) {
+        try {
+            if (!colLen || colLen === 0)
+                return 0;
+            const colWid = parseInt(this.dataTableService.useColWid.replace(/[ ]?px/g, ""));
+            let i = 0;
+            let wid = 0;
+            for (const prop in this.dataTableService.dataFilSrtTracker) {
+                if (this.dataTableService.dataFilSrtTracker[prop].minimize)
+                    continue;
+                i += 1;
+                const ownColWid = this.dataTableService.dataFilSrtTracker[prop].colWidth;
+                wid += (ownColWid ? parseInt(ownColWid.replace(/[ ]?px/g, "")) : colWid);
+            }
+            if (i === colLen)
+                return Math.floor(wid);
+            return Math.floor(colWid * colLen);
+        }
+        catch (e) {
+            try {
+                return Math.floor(parseInt(this.dataTableService.useColWid.replace(/[ ]?px/g, "")) * colLen);
+            }
+            catch (e) {
+                return window.innerWidth;
+            }
+        }
+    }
+    removeAllFreezeCols() {
+        const len = this.columnHeaders.length;
+        const rlen = this.rows.length;
+        for (var i = (len - 1); i >= 0; i--)
+            try {
+                this.columnHeaders[i].freeze = false;
+            }
+            catch (e) { }
+        for (var o = (rlen - 1); o >= 0; o--) {
+            try {
+                const row = this.rows[o];
+                const clen = row.cells?.length;
+                if (clen && clen > 0) {
+                    for (var n = (clen - 1); n >= 0; n--) {
+                        const cell = row.cells?.[n];
+                        if (cell)
+                            cell.freeze = false;
+                    }
+                }
+            }
+            catch (e) { }
+        }
+    }
+    setTableHeight(h) {
+        this.dataTableService.dTblHeight = h;
+        setTimeout(() => {
+            this.dataTableService.setTblBounds();
+            this.dataTableBody?.nativeElement.scrollBy(0, (this.scrollDir === "down" ? 1 : -1));
+            setTimeout(() => { this.setRowSelChecksPlacement(); });
+        });
+    }
+    processColMove(event) {
+        let lfts = event.ls;
+        let nwColLft = event.nl;
+        let wantlfts = event.wl;
+        let xDrop = event.x;
+        const wLf = wantlfts.indexOf(xDrop);
+        if (wLf != lfts.indexOf(nwColLft)) {
+            const inAft = wLf - 1;
+            this.columnHeaders = this.columnHeaders.filter(c => this.common.elifyCol(c.column) !== this.dataTableService.currColumnEdit);
+            const rwCol = this.common.replaceUniSep(this.dataTableService.currColumnEdit);
+            const trkr = this.dataTableService.dataFilSrtTracker[rwCol];
+            const addCol = { column: rwCol, width: (trkr["colWidth"] || this.dataTableService.useColWid),
+                hideMinCol: false, freeze: false, minimized: trkr["minimize"], dataType: this.dataTableService.figureFilterType(rwCol) };
+            if (inAft === -1) { //they want it first
+                this.columnHeaders.unshift(addCol);
+            }
+            else {
+                if (inAft >= (wantlfts.length - 2)) { //last
+                    this.columnHeaders.push(addCol);
+                }
+                else {
+                    if (this.columnHeaders[inAft])
+                        this.columnHeaders.splice((inAft + 1), 0, addCol);
+                }
+            }
+            setTimeout(() => {
+                let i = 0;
+                const els = document.getElementsByClassName("col-header");
+                const len = els.length;
+                this.columnHeaders = [];
+                for (i; i < len; i++) {
+                    const col = this.common.replaceUniSep(els[i].id.replace(/^columnHeader/, ""));
+                    if (!this.columnHeaders.map(c => c.column).includes(col)) {
+                        const trkr = this.dataTableService.dataFilSrtTracker[col];
+                        const addCol = { column: col, width: (trkr["colWidth"] || this.dataTableService.useColWid),
+                            hideMinCol: false, freeze: false, minimized: trkr["minimize"], dataType: this.dataTableService.figureFilterType(col) };
+                        this.columnHeaders.push(addCol);
+                    }
+                }
+                this.columnNames = this.columnHeaders.map(c => c.column);
+                const dtB = this.dataTableBody.nativeElement;
+                if (dtB) {
+                    const willSclTo = dtB.scrollLeft;
+                    this.renderCurrData(false);
+                    setTimeout(() => { dtB.scrollLeft = willSclTo; });
+                }
+            }, 100);
+        }
+        this.clearValidatedEdit(null, true);
+    }
+    setColHeaderHgt() {
+        let z = 0;
+        let i = 0;
+        let x = 0;
+        let hgts = [];
+        const cols = document.getElementsByClassName("col-header");
+        const cLen = this.columnHeaders?.length;
+        for (x; x < cLen; x++) {
+            const col = this.columnHeaders[x];
+            col.height = undefined;
+            col.lineHeight = undefined;
+        }
+        for (z; z < cLen; z++) {
+            if (cols[z])
+                hgts.push(cols[z].getBoundingClientRect().height);
+        }
+        const maxHgt = hgts.sort((a, b) => a > b ? -1 : 1)[0];
+        const useHgt = Math.ceil(maxHgt);
+        for (i; i < cLen; i++) {
+            const col = this.columnHeaders[i];
+            if (col && !col.minimized) {
+                col.height = useHgt + "px";
+                const elCol = cols[i];
+                if (elCol && elCol.firstElementChild && elCol.firstElementChild.getBoundingClientRect().height < 40)
+                    col.lineHeight = Math.floor(((useHgt / 2) - 21)) + "px";
+            }
+        }
+        if (this.dataTableHeaders)
+            this.dataTableHeaders.nativeElement.style.height = useHgt + "px";
+        if (this.rowNumHeader)
+            this.rowNumHeader.nativeElement.style.height = useHgt + "px";
+        setTimeout(() => { this.setRowSelChecksPlacement(); });
+    }
+    renameColSpecChars(data) {
+        if (data && data.some(d => d && typeof d === "object")) {
+            let specCharCols = [];
+            if (data[0] && typeof data[0] === "object") {
+                for (const prop in data[0]) {
+                    if (/[`~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/g.test(prop))
+                        specCharCols.push(prop);
+                }
+                let c = 0;
+                let i = 0;
+                const dlen = data.length;
+                const len = specCharCols.length;
+                for (c; c < len; c++) {
+                    const prop = specCharCols[c];
+                    const okNwNam = this.common.stripSpecChars(prop);
+                    for (i; i < dlen; i++) {
+                        if (data[i] && typeof data[i] === "object") {
+                            const desc = Object.getOwnPropertyDescriptor(data[i], prop);
+                            if (desc) {
+                                try {
+                                    Object.defineProperty(data[i], okNwNam, desc);
+                                    delete data[i][prop];
+                                }
+                                catch (e) { }
+                            }
+                        }
+                    }
+                    i = 0;
+                }
+                return data?.filter(d => true);
+            }
+            return data?.filter(d => true);
+        }
+        return data?.filter(d => true);
+    }
+    scoopOutObjsInObjs(data) {
+        let i = 0;
+        let ndata = [];
+        const len = data?.length;
+        if (data && data.some((d) => { return d && typeof d === "object"; })) {
+            for (i; i < len; i++) {
+                try {
+                    const dta = data[i];
+                    if (dta && typeof dta === "object") {
+                        let nobj = {};
+                        for (const prop in dta) {
+                            const val = dta[prop];
+                            if (val && typeof val === "object" && typeof val.getTime === "undefined" && typeof val.filter === "undefined" && Object.keys(val).length) {
+                                for (const iprp in val)
+                                    nobj[iprp] = val[iprp];
+                            }
+                            else {
+                                nobj[prop] = val;
+                            }
+                        }
+                        ndata.push(nobj);
+                    }
+                }
+                catch (e) { }
+            }
+        }
+        else {
+            ndata = data?.filter((d) => { return true; });
+        }
+        return ndata;
+    }
+    convertNeededCols(data) {
+        data = this.scoopOutObjsInObjs(data);
+        data = this.renameColSpecChars(data);
+        let nData = data?.filter((d) => true);
+        const symReg = new RegExp(/[$€£₹¥¢%\,\"\']/, "g");
+        const isDtReg = new RegExp(/\d+(\/|-)\d+(\/|-)\d+/);
+        let i = 0;
+        const len = data?.length;
+        let allCols = [];
+        if (data && data.some((d) => d && typeof d === "object")) {
+            allCols = this.getDataColumns(data); //gets all possible props in array
+            this.dataTableService.dataFilSrtTracker = this.dataTableService.buildDataFilSrtTracker(allCols);
+            for (i; i < len; i++) {
+                try {
+                    if (data[i] && typeof data[i] === "object") {
+                        for (const prop in data[i]) {
+                            if (!allCols.includes(prop)) {
+                                delete data[i][prop];
+                                continue;
+                            }
+                            const val = data[i][prop];
+                            if (val && typeof val === "string") {
+                                const tval = val.trim();
+                                const low = tval.toLocaleLowerCase();
+                                if (this.common.testLongDate(low))
+                                    nData[i][prop] = this.common.coerceDate(low);
+                                if (!this.common.testLongDate(low) && (this.common.testShortDate(tval) || this.common.testISODate(tval)))
+                                    nData[i][prop] = this.common.coerceDate(tval);
+                                if (this.common.testISODate(tval.replace(/ /g, "")))
+                                    nData[i][prop] = this.common.coerceDate(tval.replace(/ /g, ""));
+                                if (low === "null" || low === "undefined")
+                                    nData[i][prop] = null;
+                                if (!this.common.idCol(prop) && !isDtReg.test(tval) && !/[A-Za-z]/g.test(val) && /^[0-9,]+[\.]{0,1}?[0-9,]*$/g.test(tval.replace(symReg, "")) && !isNaN(parseInt(tval.replace(symReg, "")))) //not viewed as num, but can be
+                                    nData[i][prop] = /\./g.test(val) ? parseFloat(tval.replace(symReg, "")) : parseInt(tval.replace(symReg, ""));
+                            }
+                            if (val && typeof val === "object" && typeof val.getTime === "undefined") /**not dates */
+                                try {
+                                    nData[i][prop] = JSON.stringify(val).replace(/[\[\]{}\"]/g, "").replace(/:/g, ": ").replace(/,/g, ", ").replace(/  /g, " ");
+                                }
+                                catch (e) { }
+                        }
+                        const keys = Object.keys(data[i]);
+                        const diff = allCols.filter((c) => keys.indexOf(c) < 0);
+                        const dLen = diff.length;
+                        if (dLen) { //obj doesn't have all props
+                            let n = 0;
+                            for (n; n < dLen; n++)
+                                nData[i][diff[n]] = "";
+                        }
+                    }
+                }
+                catch (e) { }
+            }
+        }
+        //read data that's already not a string
+        if (allCols && allCols.length) { //array of objs
+            let a = 0;
+            const alen = allCols.length;
+            for (a; a < alen; a++) {
+                const col = allCols[a];
+                const colData = nData?.map((d) => d[col]);
+                if (colData && colData.every((d) => !d))
+                    continue;
+                if (!this.common.idCol(col) && colData && colData.every((d) => !d || typeof d === "number")) {
+                    try {
+                        this.dataTableService.dataFilSrtTracker[col]["type"] = "number";
+                    }
+                    catch (e) { }
+                }
+                if (colData && colData.every((d) => { return !d || this.common.isADateObject(d); })) {
+                    try {
+                        this.dataTableService.dataFilSrtTracker[col]["type"] = "date";
+                    }
+                    catch (e) { }
+                }
+                if (colData && colData.every((d) => !d || typeof d === "boolean")) {
+                    nData = nData.map((d) => {
+                        d[col] = d[col]?.toString() || "false";
+                        return d;
+                    });
+                }
+            }
+        }
+        return nData;
+    }
+    setRowSelChecksPlacement() {
+        let i = 0;
+        const radd = 12;
+        const els = document.getElementsByClassName("select-row-check");
+        const len = els.length;
+        const dtBody = this.dataTableBody.nativeElement;
+        const tbds = dtBody.getBoundingClientRect();
+        const initT = this.initCheckTop();
+        const col1Frozen = document.getElementsByClassName("col-item-freeze").length;
+        for (i; i < len; i++) {
+            const chk = els[i];
+            const row = document.getElementById(chk.value);
+            if (row) {
+                const tTop = tbds.top;
+                const rbds = row.getBoundingClientRect();
+                const hh = (rbds.height / 2);
+                const top = Math.floor(initT + ((rbds.bottom - (hh + radd)) - tTop));
+                chk.style.top = Math.floor(top) + "px";
+                if ((rbds.top + (hh - radd)) < tTop || ((rbds.bottom - (hh - radd)) >= (tTop + tbds.height)) || (dtBody.scrollLeft > 35 && !col1Frozen)) {
+                    chk.classList.add("hide");
+                    continue;
+                }
+                chk.className = "select-row-check";
+            }
+            else {
+                chk.classList.add("hide");
+            }
+        }
+        this.setRowNumbers();
+    }
+    setRowNumbers() {
+        const rlen = this.rows.length;
+        if (this.rowNumbers && rlen) {
+            const hasHgt = this.rowNos.filter(r => r.height);
+            this.rowNos = [];
+            let n = (this.lastElRowIndex + 1) - rlen;
+            for (n; n <= this.lastElRowIndex; n++) {
+                let rn = { number: n + 1 };
+                if (hasHgt.length) {
+                    const hh = hasHgt.find(h => h.number === n + 1);
+                    if (hh)
+                        rn.height = hh.height;
+                }
+                this.rowNos.push(rn);
+            }
+            const r1 = document.getElementById("dataTableRow" + this.rows[0]?.index);
+            if (r1) {
+                const useCalc = -(this.dataTableService.tblTop - r1.getBoundingClientRect().top);
+                this.rowNumBody.nativeElement.style.marginTop = Math.min(useCalc, 0) + "px";
+            }
+        }
+    }
+    initCheckTop() {
+        const headHt = this.dataTableHeaders.nativeElement.getBoundingClientRect().height;
+        return headHt + 17; //dt table marg top is 17
+    }
+    toggleSelectedRows(forceUnsel) {
+        this.handlingSelRows = true;
+        setTimeout(() => {
+            this.dataTableService.displayOnlySelRows = !this.dataTableService.displayOnlySelRows;
+            if (forceUnsel)
+                this.dataTableService.displayOnlySelRows = false;
+            const icn = this.btnTogSelRows.nativeElement.firstElementChild;
+            if (this.dataTableService.displayOnlySelRows) {
+                this.dataTableService.currFilData = this.dataTableService.mainData.
+                    filter((d, ind) => this.dataTableService.currSelRows.indexOf(ind) > -1);
+                if (icn) {
+                    icn.textContent = "check_box";
+                    icn.classList.add("sel-rows-checked");
+                }
+            }
+            else {
+                this.dataTableService.currFilData = this.dataTableService.mainData.filter((d) => true);
+                if (icn) {
+                    icn.classList.remove("sel-rows-checked");
+                    icn.textContent = "check_box_outline_blank";
+                }
+            }
+            if (this.dataTableService.arefilSrtTrkPropsDefault(true)) {
+                this.renderCurrData(false);
+            }
+            else {
+                const col = this.columnHeaders[0].column; //just fil by 1st col
+                const fil = this.dataTableService.dataFilSrtTracker[col].filter;
+                if (col)
+                    this.execFilter(col, (fil || ""));
+            }
+            setTimeout(() => this.handlingSelRows = false);
+        });
+    }
+    toggleSingleRowSelected(useInd) {
+        if (this.tblDragService.didResizeOnEvent)
+            return false;
+        try {
+            if (this.dataTableService.currSelRows.indexOf(useInd) > -1) { //it's already selected
+                this.dataTableService.currSelRows = this.dataTableService.currSelRows.filter((r) => r !== useInd);
+                if (this.dataTableService.displayOnlySelRows) {
+                    const btnTog = this.btnTogSelRows.nativeElement;
+                    btnTog.click();
+                    btnTog.click();
+                    if (!this.dataTableService.currSelRows.length)
+                        btnTog.click();
+                }
+            }
+            else {
+                if (this.dataTableService.currSelRows.indexOf(useInd) < 0)
+                    this.dataTableService.currSelRows.push(useInd);
+            }
+        }
+        catch (e) { }
+        return this.setBtnTogRows(this.dataTableService.currSelRows.length);
+    }
+    setBtnTogRows(amt) {
+        if (amt) {
+            this.togSelRows = amt.toLocaleString(undefined, { maximumFractionDigits: 0 }) + " Selected Row" + (amt == 1 ? "" : "s");
+        }
+        else {
+            this.togSelRows = "Selected Rows";
+        }
+    }
+    clearSelectedRows() {
+        this.handlingSelRows = true;
+        this.dataTableService.currSelRows = [];
+        const fullClear = this.dataTableService.displayOnlySelRows ? true : false;
+        this.dataTableService.displayOnlySelRows = false;
+        this.setBtnTogRows();
+        if (fullClear)
+            return this.toggleSelectedRows(true);
+        setTimeout(() => this.handlingSelRows = false);
+    }
+    getDataColumns(data) {
+        let i = 0;
+        let cols = Object.keys(data[0]);
+        const len = data.length;
+        for (i; i < len; i++) {
+            const obj = data[i];
+            const keys = Object.keys(obj);
+            const notInCols = keys.filter((k) => cols.indexOf(k) < 0);
+            if (typeof obj === "object" && notInCols.length) {
+                let n = 0;
+                const dLen = notInCols.length;
+                for (n; n < dLen; n++)
+                    cols.push(notInCols[n]);
+            }
+        }
+        let f = 0;
+        let fincols = [];
+        const strpdcols = cols.map((c) => this.common.stripSpecChars(c));
+        const slen = strpdcols.length;
+        for (f; f < slen; f++) {
+            const scol = strpdcols[f];
+            if (!fincols.includes(scol))
+                fincols.push(scol);
+        }
+        return fincols;
+    }
+    setLastRowIndex() {
+        const realMax = this.dataTableService.currFilData.length - 1;
+        const defNum = parseInt(this.dataTableService.defltRHgt.replace(/[ ]?px/g, ""));
+        const wannabeMax = (this.rows.length - 1) + Math.floor(this.aboveHgt() / defNum);
+        this.lastElRowIndex = Math.min(wannabeMax, realMax);
+        return this.lastElRowIndex;
+    }
+    buildInitUiDataTable(data, color1, color2) {
+        try {
+            const cols = Object.keys(data[0]);
+            let i = 0;
+            let n = 0;
+            const len = data.length;
+            const colLen = cols.length;
+            this.maxCols = this.setMaxCols();
+            const defNum = parseInt(this.dataTableService.defltRHgt.replace(/[ ]?px/g, ""));
+            const init = Math.max(this.dataTableService.dTblHeight / defNum);
+            this.dataTableService.useColWid = Math.ceil((this.dataTableBody.nativeElement.getBoundingClientRect().width - 16) / Math.min(colLen, this.maxCols)) + "px";
+            for (i; i < colLen; i++) {
+                this.columnHeaders.push({ column: cols[i], width: this.dataTableService.useColWid, hideMinCol: false, freeze: false, minimized: false, dataType: this.dataTableService.figureFilterType(cols[i]) });
+                if (i < this.maxCols)
+                    this.dataTableService.visibleCols.push(cols[i]);
+            }
+            this.columnNames = this.columnHeaders.map(c => c.column);
+            const initVisCols = cols.filter((c, ind) => ind <= (this.maxCols + 1));
+            const addCell = (text, prop, row, indx) => {
+                if (prop && row) {
+                    const notNum = (this.dataTableService.figureFilterType(prop) != "number" || /(year|yr|fy)/g.test(prop.toLocaleLowerCase())) ? true : false;
+                    const useTxt = this.dataTableService.figureCellText(text, notNum, this.dataTableService.dataFilSrtTracker[prop]["colCellSymbol"]);
+                    row.cells?.push({
+                        column: prop,
+                        freeze: false,
+                        minimized: false,
+                        rawText: text,
+                        visible: initVisCols.includes(prop),
+                        width: this.dataTableService.useColWid,
+                        editable: useTxt.prop === "textContent" ? this.editable : false,
+                        dataType: this.dataTableService.figureFilterType(prop),
+                        text: (useTxt.prop === "textContent" ? useTxt.value : ""),
+                        html: (useTxt.prop !== "textContent" ? useTxt.value : ""),
+                    });
+                    this.dataTableService.dataFilSrtTracker[prop].colWidth = this.dataTableService.useColWid;
+                }
+                if (row && prop && row.cells && row.cells.length === 1)
+                    this.dtChecks.push(indx);
+            };
+            this.useRowWid = this.getAllColWidth(colLen) + "px";
+            const limit = Math.min(init, len);
+            for (n; n < limit; n++) {
+                this.rows.push({ id: "dataTableRow" + n, index: n, width: this.useRowWid, cells: [], height: this.dataTableService.defltRHgt });
+                let k = 0;
+                for (k; k < colLen; k++)
+                    addCell(data[n][cols[k]], cols[k], this.rows[n], n);
+                this.dataTableService.currMapping[n] = n;
+            }
+            this.setLastRowIndex();
+            this.paginatorReady = true;
+            this.handleTheme(color1, color2);
+            setTimeout(() => {
+                this.setColHeaderHgt();
+                this.setHoldingCheckCls();
+                this.setRowSelChecksPlacement();
+                this.dataTableService.setTblBounds();
+            });
+            setTimeout(() => {
+                this.dataTableService.setIdealColumnWidth.next(true);
+                if (len > init) {
+                    let total = 0;
+                    let z = this.lastElRowIndex + 1;
+                    for (z; z < len; z++) {
+                        total += 1;
+                        this.dataTableService.currMapping[z] = z;
+                    }
+                    this.belowHgt.set(total * defNum);
+                }
+                this.setColsOnVisScreen();
+            }, 250);
+            this.getPrimaryKey(cols);
+        }
+        catch (e) { }
+    }
+    getPrimaryKey(cols) {
+        let i = 0;
+        const len = cols.length;
+        if (this.primaryKey) { //means they set 1 manually
+            const colData = this.dataTableService.mainData.map((d) => d[this.primaryKey]);
+            if (colData.length && !colData.some((c) => !c)) {
+                const map = new Set(colData);
+                if (map.size === this.dataTableService.mainDataLen) {
+                    this.dataTableService.primaryKey = this.primaryKey;
+                    return this.dataTableService.primaryKey; //they set a good one
+                }
+            }
+        }
+        for (i; i < len; i++) {
+            const col = cols[i];
+            if (this.common.idCol(col)) {
+                const colData = this.dataTableService.mainData.map(d => d[col]);
+                if (colData && !colData.some(c => !c)) { //no null vals
+                    const map = new Set(colData);
+                    if (map.size === this.dataTableService.mainDataLen) { //all unique vals
+                        this.dataTableService.primaryKey = col;
+                        return this.dataTableService.primaryKey;
+                    }
+                }
+            }
+        }
+        return "";
+    }
+    execFilter(field, val) {
+        this.dataTableService.isFiltering = true;
+        this.dataTableService.dataFilSrtTracker[field].filter = val || "";
+        this.dataTableService.columnFilter(this.dataTableService.mainData, field, this.dataTableService.dataFilSrtTracker, this.dataTableService.sortOrder, true);
+        this.renderCurrData(false, field);
+        setTimeout(() => { this.dataTableService.isFiltering = false; }, 500);
+    }
+    topFilterOnKeyUp(event) {
+        if (event && !this.common.keyCanSearch(event))
+            return;
+        if (!this.dataTableService.isFiltering) {
+            this.dataTableService.isFiltering = true;
+            this.dataTableService.easyFilter((this.topLevelFilter || ""), this.dataTableService.mainData, this.dataTableService.sortOrder);
+            if (!this.topLevelFilter && !this.dataTableService.arefilSrtTrkPropsDefault()) {
+                let altField = Object.keys(this.dataTableService.mainData[0])[0];
+                this.dataTableService.columnFilter(this.dataTableService.mainData, altField, this.dataTableService.dataFilSrtTracker, this.dataTableService.sortOrder, false);
+            }
+            this.renderCurrData(false, "topLevelDataFilter");
+            setTimeout(() => {
+                this.dataTableService.isFiltering = false;
+                const buildUpLen = this.filterBuildUp.length;
+                if (buildUpLen) {
+                    this.topFilterOnKeyUp(null);
+                    this.filterBuildUp = [];
+                }
+            }, 500);
+        }
+        else {
+            if (this.filterBuildUp.indexOf(this.topLevelFilter) < 0)
+                this.filterBuildUp.push(this.topLevelFilter);
+        }
+    }
+    setHorizPos(event) {
+        const head = this.dataTableHeaders.nativeElement;
+        if (event > 0)
+            head.style.marginLeft = -event + "px";
+        else
+            head.style.removeProperty("margin-left");
+        this.horizRest = event;
+    }
+    blurContEd() {
+        const actEl = document.activeElement;
+        if (actEl && actEl.getAttribute("contenteditable"))
+            actEl.blur();
+    }
+    setColsOnVisScreen() {
+        const lftPlus = this.rowNumbers ? 75 : 0; //ctrl+f "--row-num-width" in css
+        let i = 0;
+        let vCols = [];
+        const useCols = this.columnHeaders.filter(c => !c.minimized).map(c => c.column);
+        const len = useCols.length;
+        for (i; i < len; i++) {
+            const col = useCols[i];
+            const el = document.getElementById("columnHeader" + this.common.elifyCol(col));
+            if (el) {
+                const elbds = el.getBoundingClientRect();
+                if (elbds.left >= (this.dataTableService.tblLeft - lftPlus) && elbds.right < this.dataTableService.tblRight)
+                    vCols.push(col);
+            }
+        }
+        this.dataTableService.visibleCols = [...vCols];
+    }
+    handleScrlBarDrag() {
+        requestAnimationFrame(() => {
+            if (this.dataTableBody) {
+                const tbl = this.dataTableBody.nativeElement;
+                this.execVertScroll(tbl.scrollTop);
+                if (tbl.scrollLeft !== this.horizRest)
+                    this.execHorizScroll(tbl.scrollLeft);
+                setTimeout(() => { this.setRowSelChecksPlacement(); });
+            }
+        });
+    }
+    handleScroll(event) {
+        const top = event.target.scrollTop;
+        const left = event.target.scrollLeft;
+        /*horiz scroll*/
+        if (left !== this.horizRest)
+            requestAnimationFrame(() => { this.execHorizScroll(left); });
+        /*horiz scroll*/
+        /*vert scroll*/
+        if (top === this.verticalRest || this.lockVScroll) {
+            this.isScrolling = false;
+            if (!this.dataTableService.autoScrollOnEdit)
+                this.clearValidatedEdit();
+            return this.setRowSelChecksPlacement();
+        }
+        this.isScrolling = true;
+        requestAnimationFrame(() => { this.execVertScroll(top); });
+        /*vert scroll*/
+        if (top % 2 === 0)
+            this.clearValidatedEdit();
+    }
+    execHorizScroll(left) {
+        const head = this.dataTableHeaders.nativeElement;
+        if (left > 0)
+            head.style.marginLeft = -left + "px";
+        else
+            head.style.removeProperty("margin-left");
+        this.setColsOnVisScreen();
+        this.execHorizBodyScroll();
+        this.horizRest = left;
+        this.setColsOnVisScreen();
+    }
+    execVertScroll(top) {
+        if (top >= this.verticalRest) {
+            this.execVertScrollDown(this.columnNames, this.columnNames.length);
+            this.clearAboveFoldRows();
+            this.scrollDir = "down";
+        }
+        else { //scrolling back up
+            this.execVertScrollUp(this.columnNames, this.columnNames.length);
+            this.clearBelowFoldRows();
+            this.scrollDir = "up";
+        }
+        this.verticalRest = top;
+        if (this.rowNumbers && top % 2 === 0)
+            this.setRowNumbers();
+    }
+    scrollDir = "down";
+    handleScrollEnd() {
+        this.isScrolling = false;
+        this.lockVScroll = false;
+        setTimeout(() => {
+            this.dataTableService.autoScrollOnEdit = false;
+            this.setColsOnVisScreen();
+            this.setRowSelChecksPlacement();
+            if (this.listenToCellDraggerMouseMove)
+                this.settleCellDragger();
+            setTimeout(() => { this.cleanUpPossibles(); });
+        });
+    }
+    addCell(text, prop, visible) {
+        const useProp = this.dataTableService.dataFilSrtTracker[prop];
+        const notNum = (this.dataTableService.figureFilterType(prop) != "number" || /(year|yr|fy)/g.test(prop.toLocaleLowerCase())) ? true : false;
+        const useTxt = this.dataTableService.figureCellText(text, notNum, useProp["colCellSymbol"]);
+        return {
+            column: prop,
+            rawText: text,
+            editable: useTxt.prop !== "textContent" ? false : this.editable,
+            dataType: this.dataTableService.figureFilterType(prop),
+            freeze: useProp.freeze,
+            visible: visible,
+            minimized: useProp.minimize,
+            width: useProp.colWidth || this.dataTableService.useColWid,
+            text: useTxt.prop === "textContent" ? useTxt.value : "",
+            html: useTxt.prop !== "textContent" ? useTxt.value : "",
+        };
+    }
+    execHorizBodyScroll() {
+        const allcols = this.getAllColsAtRuntime(null);
+        let i = 0;
+        const clen = allcols.length;
+        const rlen = this.rows.length;
+        const lftPlus = this.rowNumbers ? 75 : 0; //ctrl+f "--row-num-width" in css
+        let positions = [];
+        const row0 = this.rows[0];
+        for (let p = (clen - 1); p >= 0; p--) {
+            const col = allcols[p];
+            const elcol = this.common.elifyCol(col);
+            const head = document.getElementById("columnHeader" + elcol);
+            if (head) {
+                const bds = head.getBoundingClientRect();
+                if (bds.left > this.dataTableService.tblRight)
+                    continue;
+                const cell = row0?.cells?.find(c => c.column === col);
+                if (cell) {
+                    if (!cell.visible && (this.dataTableService.visibleCols.includes(col) || (bds.left >= (this.dataTableService.tblLeft - lftPlus) && bds.right < (this.dataTableService.tblRight + lftPlus)))) //visible
+                        positions.push({ col: col, vis: true });
+                    if (cell.visible && !this.dataTableService.visibleCols.includes(col) && !positions.find((p) => p.col === col))
+                        positions.push({ col: col, vis: false });
+                }
+            }
+        }
+        const plen = positions.length;
+        for (i; i < rlen; i++) {
+            let c = 0;
+            const row = this.rows[i];
+            if (row) {
+                for (c; c < plen; c++) {
+                    const pos = positions[c];
+                    if (pos) {
+                        if (pos.vis) {
+                            row.cells = row.cells?.map(c => {
+                                if (c.column === pos.col)
+                                    return this.addCell(c.rawText, pos.col, true);
+                                return c;
+                            });
+                        }
+                        else {
+                            const rCell = row.cells?.find(c => c.column === pos.col);
+                            if (rCell) {
+                                rCell.visible = false;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        setTimeout(() => {
+            this.dataTableService.setIdealColumnWidth.next(true);
+            this.setColsOnVisScreen();
+            setTimeout(() => { this.cleanUpPossibles(); });
+        }, 50);
+    }
+    cleanUpPossibles() {
+        let i = 0;
+        const len = this.rows.length;
+        const lftPlus = this.rowNumbers ? 75 : 0; //ctrl+f "--row-num-width" in css
+        for (i; i < len; i++) {
+            const row = this.rows[i];
+            if (row) {
+                let p = 0;
+                if (row.cells?.length) {
+                    const rclen = row.cells.length;
+                    for (p; p < rclen; p++) {
+                        const cell = row.cells[p];
+                        if (cell) {
+                            const ccol = cell.column;
+                            const el = document.querySelector("#" + row.id + " .data-cell-" + this.common.elifyCol(ccol));
+                            if ((el && el.getBoundingClientRect().right < (this.dataTableService.tblLeft - lftPlus)) && (!el?.innerHTML || !el.getAttribute("style"))) {
+                                row.cells[p].visible = true;
+                                row.cells[p] = { ...this.addCell(cell.rawText, ccol, true) };
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+    execVertScrollDown(cols, colLen) {
+        let canAdd = 0;
+        const actvCols = this.columnHeaders.map(c => c.column);
+        const vlen = this.dataTableService.visibleCols.length;
+        const lastVisInd = actvCols.indexOf(this.dataTableService.visibleCols[(vlen - 1)]) + 1;
+        const bel = this.belowArea.nativeElement;
+        const bbds = bel.getBoundingClientRect();
+        const rTop = (bbds.top - this.verticalRest);
+        const gap = this.dataTableService.tblBot - rTop;
+        const defNum = parseInt(this.dataTableService.defltRHgt.replace(/[ ]?px/g, ""));
+        if (gap > 0) {
+            let h = 0;
+            let z = this.lastElRowIndex + 1;
+            const last = document.getElementById("dataTableRow" + this.lastElRowIndex);
+            if (last && this.dataTableService.elIsBelowFold(last, this.dataTableService.tblBot))
+                return;
+            let bhToSub = 0;
+            let ahToAdd = 0;
+            const rowsInGap = Math.ceil(gap / defNum);
+            canAdd = z + (rowsInGap);
+            let chksToAdd = [];
+            let rowsToAdd = [];
+            const goTo = Math.min(this.dataTableService.currFilData.length, canAdd);
+            for (z; z < goTo; z++) {
+                const wldBeElTop = bbds.top + (defNum * h);
+                const wldBeElBot = wldBeElTop + defNum;
+                if (wldBeElBot < this.dataTableService.tblTop) {
+                    ahToAdd += defNum;
+                    bhToSub += defNum;
+                }
+                else {
+                    if (wldBeElTop <= this.dataTableService.tblBot) {
+                        const item = this.dataTableService.currFilData[z];
+                        const index = this.dataTableService.currMapping[z] || this.dataTableService.findObjIndxInData(item);
+                        if (index > -1 && !this.rows.find(r => r.index === index)) {
+                            const nRow = { id: "dataTableRow" + index, index: index, width: this.useRowWid, cells: [], height: this.dataTableService.defltRHgt };
+                            let cells = [];
+                            for (let k = (colLen - 1); k >= 0; k--) {
+                                const col = cols[k];
+                                const cell = this.addCell(item[col], col, (k <= lastVisInd));
+                                if (typeof cell !== "string")
+                                    cells.unshift(cell);
+                            }
+                            nRow.cells = [...cells];
+                            chksToAdd.push(index);
+                            rowsToAdd.push(nRow);
+                            bhToSub += defNum;
+                        }
+                    }
+                }
+                h += 1;
+            }
+            this.rows = [...this.rows, ...rowsToAdd];
+            if (bhToSub)
+                this.belowHgt.set(Math.max(0, (this.belowHgt() - bhToSub)));
+            if (chksToAdd.length)
+                this.dtChecks = [...this.dtChecks, ...chksToAdd];
+            if (ahToAdd)
+                this.aboveHgt.set(this.aboveHgt() + ahToAdd);
+            this.setLastRowIndex();
+        }
+    }
+    execVertScrollUp(cols, colLen) {
+        const actvCols = this.columnHeaders.map(c => c.column);
+        const vlen = this.dataTableService.visibleCols.length;
+        const lastVisInd = actvCols.indexOf(this.dataTableService.visibleCols[(vlen - 1)]) + 1;
+        const ael = this.aboveArea.nativeElement;
+        const abds = ael.getBoundingClientRect();
+        const defNum = parseInt(this.dataTableService.defltRHgt.replace(/[ ]?px/g, ""));
+        const rbot = abds.bottom;
+        const gap = rbot - (this.dataTableService.tblTop);
+        if (gap > 0) {
+            let h = 0;
+            const rlen = this.rows.length;
+            let z = (this.lastElRowIndex - rlen);
+            if (z < 0)
+                return;
+            let bhToAdd = 0;
+            let ahToSub = 0;
+            const rowsInGap = Math.ceil(gap / defNum);
+            const min = Math.max(0, (z - rowsInGap));
+            for (z; z >= min; z--) {
+                const wldBeElBot = rbot - (defNum * h);
+                const wldBeElTop = wldBeElBot - defNum;
+                if (wldBeElTop > this.dataTableService.tblBot) {
+                    bhToAdd += defNum;
+                    ahToSub += defNum;
+                }
+                else {
+                    if (wldBeElBot > this.dataTableService.tblTop) {
+                        const item = this.dataTableService.currFilData[z];
+                        const index = this.dataTableService.currMapping[z] || this.dataTableService.findObjIndxInData(item);
+                        if (index > -1) {
+                            let k = 0;
+                            const nRow = { id: "dataTableRow" + index, index: index, width: this.useRowWid, cells: [], height: this.dataTableService.defltRHgt };
+                            let cells = [];
+                            for (k; k < colLen; k++) {
+                                const col = cols[k];
+                                const cell = this.addCell(item[col], col, (k <= lastVisInd));
+                                if (typeof cell !== "string")
+                                    cells.push(cell);
+                            }
+                            nRow.cells = [...cells];
+                            this.rows = [nRow, ...this.rows];
+                            this.dtChecks = [index, ...this.dtChecks];
+                            ahToSub += defNum;
+                        }
+                    }
+                }
+                h += 1;
+            }
+            if (ahToSub)
+                this.aboveHgt.set(Math.max(0, (this.aboveHgt() - ahToSub)));
+            if (bhToAdd)
+                this.belowHgt.set(this.belowHgt() + bhToAdd);
+        }
+    }
+    clearAboveFoldRows() {
+        const els = this.rows.filter(r => this.dataTableService.elIsAboveFold(document.getElementById(r.id), (this.dataTableService.tblTop)));
+        const justids = els.map(e => e.id);
+        const justindx = els.map(e => e.index);
+        const changes = justids.length;
+        if (changes > 0) {
+            const defNum = parseInt(this.dataTableService.defltRHgt.replace(/[ ]?px/g, ""));
+            this.rows = this.rows.filter(r => !justids.includes(r.id));
+            this.dtChecks = this.dtChecks.filter(c => !justindx.includes(c));
+            const item = this.dataTableService.mainData[(this.rows[0]?.index || -1)];
+            if (item)
+                this.aboveHgt.set(Math.max(0, this.dataTableService.findObjIndxInData(item, this.dataTableService.currFilData) * defNum));
+        }
+    }
+    clearBelowFoldRows() {
+        const els = this.rows.filter(r => this.dataTableService.elIsBelowFold(document.getElementById(r.id), this.dataTableService.tblBot));
+        const justids = els.map(e => e.id);
+        const justindx = els.map(e => e.index);
+        let changes = justids.length;
+        if (changes > 0) {
+            const defNum = parseInt(this.dataTableService.defltRHgt.replace(/[ ]?px/g, ""));
+            this.rows = this.rows.filter(r => !justids.includes(r.id));
+            this.dtChecks = this.dtChecks.filter(c => !justindx.includes(c));
+            const rlen = this.rows.length;
+            const item = this.dataTableService.mainData[(this.rows[(rlen - 1)]?.index || -1)];
+            if (item)
+                this.belowHgt.set(Math.max(0, ((this.dataTableService.currFilData.length - 1) - this.dataTableService.findObjIndxInData(item, this.dataTableService.currFilData)) * defNum));
+            this.setLastRowIndex();
+        }
+    }
+    jumpToRow(row) {
+        if (this.dataTableBody) {
+            const ind = row - 1;
+            const tbl = this.dataTableBody.nativeElement;
+            const defNum = parseInt(this.dataTableService.defltRHgt.replace(/[ ]?px/g, ""));
+            tbl.scrollTop = ind * defNum;
+            this.execVertScroll(tbl.scrollTop);
+            setTimeout(() => { this.setRowSelChecksPlacement(); });
+        }
+    }
+    valEditFocusTo = null;
+    handleValidatedCellEditFocus(cellData) {
+        this.validatedEditType = cellData.type;
+        if (this.valEditFocusTo) {
+            clearTimeout(this.valEditFocusTo);
+            this.valEditFocusTo = null;
+        }
+        this.valEditFocusTo = setTimeout(() => {
+            const rel = this.validatedEdit.nativeElement;
+            let el;
+            const elD = document.querySelector(".relly.edit-input");
+            if (!elD) //look for the one that's relly (relative) positioned first
+                el = document.getElementsByClassName("edit-input")[0];
+            const cell = document.querySelector("#dataTableRow" + this.dataTableService.currEditIndex + " .data-cell-" + this.common.elifyCol(this.dataTableService.currEditCol));
+            if ((el || elD) && cell) {
+                const rbds = rel.getBoundingClientRect();
+                const cbds = cell.getBoundingClientRect();
+                (el || elD).style.top = (cellData.type === "text" ? (Math.ceil(cbds.bottom - rbds.top) + 1) : (Math.ceil(cbds.top - rbds.top) + 1)) + "px";
+                (el || elD).style.left = (Math.ceil(cbds.left - rbds.left) + 1) + "px";
+                (el || elD).style.width = (cbds.width - 2) + "px";
+                (el || elD).style.height = (cbds.height - 2) + "px";
+                if (el) {
+                    el.value = cellData.type === "date" ? new Date(cellData.value)?.toISOString().split("T")[0] : cellData.value;
+                    setTimeout(() => { el.focus(); });
+                }
+                rel.classList.remove("invisible");
+                this.fCellDragger.nativeElement.style.left = (Math.ceil(cbds.left - rbds.left) + cbds.width - 4) + "px";
+                this.fCellDragger.nativeElement.style.top = (Math.ceil(cbds.bottom - rbds.top) - 4) + "px";
+            }
+        }, 10);
+    }
+    clearFCellDragger() {
+        if (!this.dataTableService.autoScrollOnEdit) {
+            this.fCellDragger.nativeElement.style.removeProperty("top");
+            this.fCellDragger.nativeElement.style.removeProperty("left");
+        }
+    }
+    clearValidatedEdit(e, clearDrag) {
+        if (this.listenToCellDraggerMouseMove)
+            return;
+        if ((e && e.type === "blur") || (e && e.type === "focus" && e.relatedTarget?.id === "fCellDragger")) {
+            setTimeout(() => { this.handleCellDraggerInit(); });
+        }
+        else {
+            this.execValClear(clearDrag);
+        }
+    }
+    execValClear(clearDrag) {
+        this.blurContEd();
+        this.dataTableService.currEditIndex = -1;
+        this.dataTableService.currEditCol = "";
+        this.validatedEditType = "";
+        this.validatedEdit.nativeElement.classList.add("invisible");
+        if (clearDrag)
+            this.clearCellDEdits();
+        setTimeout(() => { this.dataTableService.clearAllFocused(); });
+    }
+    handleDraggerMU(e) {
+        if (e && e.target && e.target.id && e.target.id.startsWith("selEdit"))
+            return;
+        this.listenToCellDraggerMouseUp = false;
+        if (this.listenToCellDraggerMouseMove) {
+            this.listenToCellDraggerMouseMove = false;
+            this.clearCellDEdits();
+        }
+    }
+    handleDraggerKD(e) {
+        const row = document.getElementById("dataTableRow" + this.dataTableService.currEditIndex);
+        if (row && this.dataTableService.currEditCol) {
+            let targRow;
+            let bds;
+            if (e && this.common.isDownKey(e))
+                targRow = row.nextElementSibling;
+            if (e && this.common.isUpKey(e))
+                targRow = row.previousElementSibling;
+            if (targRow) {
+                bds = targRow.getBoundingClientRect();
+                this.listenToCellDraggerMouseMove = true;
+                const execDragEOnDK = (e) => {
+                    this.handleCellDraggerEdit(e);
+                };
+                targRow.addEventListener("mousemove", execDragEOnDK);
+                const mouseEvent = new MouseEvent('mousemove', {
+                    view: window,
+                    bubbles: false,
+                    cancelable: false,
+                    clientX: bds.right, // X-coordinate relative to the viewport
+                    clientY: bds.bottom, // Y-coordinate relative to the viewport
+                });
+                targRow.dispatchEvent(mouseEvent);
+                targRow.removeEventListener("mousemove", execDragEOnDK);
+                setTimeout(() => { this.listenToCellDraggerMouseMove = false; });
+                if (e.target.getBoundingClientRect().bottom > (this.dataTableService.tblBot - 100))
+                    this.dataTableBody.nativeElement.scrollBy(0, this.dataTableService.dTblHeight / 2);
+            }
+        }
+    }
+    clearCellDEdits() {
+        this.clearFCellDragger();
+        this.dataTableService.clearDCellFcsd();
+        this.clearDragEditFlag();
+    }
+    clearDragEditFlag() {
+        this.rows = this.rows.map(r => {
+            if (r.editedInDrag)
+                r.editedInDrag = false;
+            return r;
+        });
+    }
+    handleCellDraggerInit() {
+        const actEl = document.activeElement;
+        if (actEl && actEl.id === "fCellDragger") {
+            this.focusCellDragger();
+        }
+        else {
+            if (!actEl || (actEl && !/data-cell/g.test(actEl?.className)))
+                this.execValClear();
+        }
+    }
+    focusCellDragger() {
+        this.validatedEditType = "";
+        this.validatedEdit.nativeElement.classList.add("invisible");
+        const cell = document.querySelector("#dataTableRow" + this.dataTableService.currEditIndex + " .data-cell-" + this.common.elifyCol(this.dataTableService.currEditCol));
+        if (cell)
+            cell.classList.add("dragger-cell-focused");
+        this.listenToCellDraggerMouseUp = true;
+    }
+    focusCellDraggerFromMouseDown() {
+        this.listenToCellDraggerMouseMove = true;
+    }
+    handleFDragTab(e) {
+        if (e && this.common.isTabKey(e)) {
+            const cell = document.getElementsByClassName("dragger-cell-focused")[0];
+            const nxtCell = cell.parentElement?.nextElementSibling?.firstElementChild;
+            if (cell && nxtCell) {
+                this.dataTableService.autoScrollOnEdit = true;
+                setTimeout(() => { nxtCell.focus(); });
+            }
+        }
+    }
+    settleCellDragger() {
+        const els = document.getElementsByClassName("dragger-cell-focused");
+        const len = els.length;
+        const cell = this.scrollDir === "down" ? els[(len - 1)] : els[0];
+        if (cell) {
+            const fCellDragger = document.getElementsByClassName("focused-cell-dragger")[0];
+            const par = fCellDragger?.parentElement;
+            if (fCellDragger && par) {
+                const cbds = cell.getBoundingClientRect();
+                const rbds = par.getBoundingClientRect();
+                fCellDragger.style.left = (Math.ceil(cbds.left - rbds.left) + cbds.width - 4) + "px";
+                fCellDragger.style.top = (Math.ceil(cbds.bottom - rbds.top) - 4) + "px";
+            }
+        }
+    }
+    handleCellDraggerEdit(e) {
+        if (e && e.target) {
+            let dragId = -1;
+            const targ = e.target;
+            try {
+                if (/dataTableRow/g.test(targ.id)) {
+                    dragId = parseInt(targ.id.replace("dataTableRow", ""));
+                }
+                else {
+                    if (/data-cell/g.test(targ.className))
+                        dragId = parseInt(targ.getAttribute("data-index").replace("dataTableRow", ""));
+                }
+                let cell;
+                const row = this.rows.find(r => r.index === dragId);
+                const els = document.getElementsByClassName("dragger-cell-focused");
+                if (dragId > -1 && (row && !row.editedInDrag)) {
+                    const item = this.dataTableService.mainData[this.dataTableService.currEditIndex];
+                    const val = item[this.dataTableService.currEditCol];
+                    const currEInd = this.dataTableService.findObjIndxInData(item, this.dataTableService.currFilData);
+                    const currDrgInd = this.dataTableService.findObjIndxInData(this.dataTableService.mainData[dragId], this.dataTableService.currFilData);
+                    this.scrollDir = currDrgInd > currEInd ? "down" : "up";
+                    this.dataTableService.currEditIndex = dragId;
+                    this.execCellEdit({ column: this.dataTableService.currEditCol, value: val }, true);
+                    row.editedInDrag = true;
+                    cell = document.querySelector("#dataTableRow" + dragId + " .data-cell-" + this.common.elifyCol(this.dataTableService.currEditCol));
+                }
+                if (els.length > 1) {
+                    const dir = this.scrollDir === "down" ? 1 : -1;
+                    const toScl = dir * (Math.ceil((e.offsetY || 20)) / 2);
+                    this.dataTableBody.nativeElement.scrollBy(0, toScl);
+                }
+                const fCellDragger = document.getElementsByClassName("focused-cell-dragger")[0];
+                const par = fCellDragger?.parentElement;
+                if (cell && fCellDragger && par) {
+                    const cbds = cell.getBoundingClientRect();
+                    const rbds = par.getBoundingClientRect();
+                    fCellDragger.style.left = (Math.ceil(cbds.left - rbds.left) + cbds.width - 4) + "px";
+                    fCellDragger.style.top = (Math.ceil(cbds.bottom - rbds.top) - 4) + "px";
+                }
+                if (!cell) {
+                    const len = els.length;
+                    if (len) {
+                        if (e.clientY > this.dataTableService.tblBot) {
+                            cell = els[(len - 1)];
+                        }
+                        if (e.clientY < this.dataTableService.tblTop) {
+                            cell = els[0];
+                        }
+                        if (cell && fCellDragger && par) {
+                            const cbds = cell.getBoundingClientRect();
+                            const rbds = par.getBoundingClientRect();
+                            fCellDragger.style.left = (Math.ceil(cbds.left - rbds.left) + cbds.width - 4) + "px";
+                            fCellDragger.style.top = (Math.ceil(cbds.bottom - rbds.top) - 4) + "px";
+                        }
+                    }
+                }
+            }
+            catch (e) { }
+        }
+    }
+    validateRawText(text, dataType) {
+        if (dataType === "number" && (!text || /[a-zA-Z \/]/g.test(text)))
+            return "";
+        return text;
+    }
+    execCellEdit(e, noBlur, forceVal /*from dropdown select, normally a string*/) {
+        if (this.dataTableService.currEditIndex > -1) {
+            let cfDIdx;
+            const valEl = document.getElementsByClassName("edit-input")[0];
+            let val = forceVal ? forceVal : (valEl ? valEl.value : e.value);
+            if (val && !this.validateRawText(val, this.validatedEditType)) {
+                if (!noBlur)
+                    this.clearValidatedEdit(e);
+                return;
+            }
+            if (val && typeof val === "string" && this.validatedEditType === "date")
+                val = this.common.coerceDate(val);
+            if (val && typeof val === "string" && this.validatedEditType === "number")
+                val = /\./g.test(val) ? parseFloat(val) : parseInt(val);
+            const realProp = this.dataTableService.currEditCol || e.column;
+            this.dataTableService.mainData[this.dataTableService.currEditIndex][realProp] = val;
+            const item = this.dataTableService.mainData[this.dataTableService.currEditIndex];
+            if (item) {
+                cfDIdx = this.dataTableService.findObjIndxInData(item, this.dataTableService.currFilData);
+                if (cfDIdx > -1)
+                    this.dataTableService.currFilData[cfDIdx][realProp] = val;
+            }
+            let cell;
+            const row = this.rows.find(r => r.index === this.dataTableService.currEditIndex);
+            if (row) {
+                cell = row.cells?.find(c => c.column === this.dataTableService.currEditCol || c.column === e.column);
+                if (cell)
+                    cell.rawText = val;
+            }
+            const dtType = this.dataTableService.figureFilterType(realProp);
+            const notNum = (dtType != "number" || /(year|yr|fy)/g.test(realProp.toLocaleLowerCase())) ? true : false;
+            const useTxt = this.dataTableService.figureCellText(val, notNum);
+            const cellEl = document.querySelector("#dataTableRow" + this.dataTableService.currEditIndex + " .data-cell-" + this.common.elifyCol(realProp));
+            if (cellEl) {
+                if (useTxt.prop === "textContent")
+                    cellEl.textContent = useTxt.value;
+                else
+                    cellEl.innerHTML = useTxt.value;
+                if (cell) {
+                    cell.text = useTxt.prop === "textContent" ? useTxt.value : "";
+                    if (this.listenToCellDraggerMouseMove)
+                        cellEl.classList.add("dragger-cell-focused");
+                }
+            }
+            const rowKey = (this.dataTableService.primaryKey ? this.dataTableService.mainData[this.dataTableService.currEditIndex][this.dataTableService.primaryKey] :
+                this.dataTableService.currEditIndex);
+            const edit = {
+                value: val,
+                column: realProp,
+                row: rowKey,
+            };
+            this.cellEdit.emit(edit);
+            if (!noBlur)
+                this.clearValidatedEdit(e);
+        }
+    }
+    handleSingleColResize(val, column) {
+        if (val && (this.dataTableService.currColumnEdit || column)) {
+            const cols = this.getAllColsAtRuntime(null);
+            const colLen = cols.length;
+            const rawCol = column || this.common.replaceUniSep(this.dataTableService.currColumnEdit);
+            const thecol = this.columnHeaders.find(c => (c && c.column === rawCol));
+            if (thecol) {
+                thecol.width = (val + "px");
+                this.dataTableService.dataFilSrtTracker[thecol.column]["colWidth"] = (val + "px");
+            }
+            let i = 0;
+            const toResize = this.rows.filter(r => r.cells?.length);
+            const len = toResize.length;
+            for (i; i < len; i++) {
+                const ind = toResize[i].index;
+                const row = this.rows.find(r => r.index === ind);
+                if (row) {
+                    row.cells = row.cells?.map(c => {
+                        if (c && c.column === rawCol)
+                            c.width = (val + "px");
+                        return c;
+                    });
+                }
+            }
+            setTimeout(() => {
+                const allColW = this.getAllColWidth(colLen);
+                this.setDataRowWidthsOnMinimize(allColW);
+                this.setRowSelChecksPlacement();
+            });
+            this.clearValidatedEdit();
+        }
+    }
+    setHeaderHeight(val, force) {
+        if (val && typeof val === "string")
+            val = Math.ceil(parseInt(val));
+        const rHgt = force ? val : Math.max(val, parseInt(this.desRowHeight));
+        const useHgt = Math.floor(rHgt) + "px";
+        const row = this.dataTableHeaders.nativeElement;
+        row["style"]["height"] = useHgt;
+        this.columnHeaders.forEach(c => { c.height = useHgt; });
+        if (this.rowNumbers && this.rowNumHeader)
+            this.rowNumHeader.nativeElement.style.height = useHgt;
+        setTimeout(() => { this.setRowSelChecksPlacement(); });
+    }
+    setSingleRowHgt(val, row, force) {
+        if (val && typeof val === "string")
+            val = Math.ceil(parseInt(val));
+        const rHgt = force ? val : Math.max(val, (parseInt(this.desRowHeight) || Math.ceil(row.getBoundingClientRect().height)));
+        const useHgt = Math.floor(rHgt) + "px";
+        if (typeof row === "string" && this.tblDragService.colDragStartFrmCellTracker.row && this.tblDragService.colDragStartFrmCellTracker.ystart) {
+            const drow = this.rows.find(r => r.id === row);
+            if (drow) {
+                drow.height = useHgt;
+                if (this.rowNumbers) {
+                    const item = this.dataTableService.mainData[drow?.index];
+                    if (item) {
+                        const indx = this.dataTableService.findObjIndxInData(item, this.dataTableService.currFilData) + 1;
+                        const rNum = this.rowNos.find(r => r.number === indx);
+                        if (rNum)
+                            rNum.height = useHgt;
+                    }
+                }
+            }
+        }
+        setTimeout(() => { this.setRowSelChecksPlacement(); });
+        this.clearValidatedEdit();
+    }
+    checkTabHorizScroll(id) {
+        const colH = document.getElementById("columnHeader" + id);
+        const dtb = this.dataTableBody.nativeElement;
+        if (colH && dtb) {
+            let left = (colH.getBoundingClientRect().left - 50);
+            if (colH) {
+                left -= (this.rowNumbers ? 75 : 0);
+                dtb.scrollBy(left, 0);
+            }
+        }
+    }
+    handleTheme(co1, co2) {
+        try {
+            let rule1;
+            let rule1a;
+            let rule2;
+            let rule3;
+            let rule4;
+            let rule5;
+            let rule6;
+            if (co1) {
+                this.dataTableService.themeColor1 = co1;
+                rule1 = ".col-header span, .col-header sup, .col-header button .material-icons, " +
+                    ".data-table-footer div, .btn-fil-comp i{color: " + co1 + " !important}";
+                rule1a = ".col-header select, .col-header input:not(input[type=file]){box-shadow:0 0 1px 1px " + co1 + ";" +
+                    "-webkit-box-shadow:0 0 1px 1px " + co1 + "}";
+            }
+            if (co2) {
+                this.dataTableService.themeColor2 = co2;
+                rule2 = ".col-header, .data-table-footer, .btn-fil-comp{background: " + co2 + " !important}";
+                const tblbxSh = "0 -1px 3px 1px ";
+                const tblFbxSh = "0 1px 3px -3px ";
+                if (this.dataTableService.mainDataLen) {
+                    rule2 = ".col-header, .btn-fil-comp{background: " + co2 + " !important}";
+                    rule3 = ".data-table{ box-shadow: " + tblbxSh + co2 + "; -webkit-box-shadow: " + tblbxSh + co2 + "; -moz-box-shadow: " + tblbxSh + co2 + "}";
+                    rule6 = ".data-table-footer{background: " + co2 + "; box-shadow: " + tblFbxSh + co2 + "; -webkit-box-shadow: " + tblFbxSh + co2 + "; -moz-box-shadow: " + tblFbxSh + co2 + "}";
+                }
+                rule5 = ".data-cell{ border-bottom: 1px solid " + co2 + " !important; border-right: 1px solid " + co2 + " !important}";
+            }
+            if (this.altRowColor)
+                rule4 = ".data-table-row:not(.data-row-selected):nth-of-type(odd){background:" + this.altRowColor + "}";
+            if (rule1 || rule1a || rule2 || rule3 || rule4 || rule5 || rule6) {
+                const el = document.createElement("style");
+                document.head.appendChild(el);
+                if (rule1)
+                    el.sheet?.insertRule(rule1);
+                if (rule1a)
+                    el.sheet?.insertRule(rule1a);
+                if (rule2)
+                    el.sheet?.insertRule(rule2);
+                if (rule3)
+                    el.sheet?.insertRule(rule3);
+                if (rule4)
+                    el.sheet?.insertRule(rule4);
+                if (rule5)
+                    el.sheet?.insertRule(rule5);
+                if (rule6)
+                    el.sheet?.insertRule(rule6);
+            }
+        }
+        catch (e) { }
+    }
+    renderCurrData(reset, field) {
+        const thead = this.dataTableHeaders.nativeElement;
+        const tbody = this.dataTableBody.nativeElement;
+        const tbodyX = tbody.scrollLeft;
+        this.rows = [];
+        this.aboveHgt.set(0);
+        this.belowHgt.set(0);
+        this.rowNos = [];
+        this.dtChecks = [];
+        this.clearValidatedEdit(null, true);
+        this.dataTableService.currMapping = {};
+        this.horizRest = 0;
+        tbody.scrollTop = 0;
+        this.verticalRest = 0;
+        let didXScrl = false;
+        if (reset && !field && thead && tbody) {
+            thead.style.marginLeft = "0px";
+            tbody.scrollLeft = 0;
+            this.horizRest = 0;
+        }
+        this.lastElRowIndex = 0;
+        let n = 0;
+        const defNum = parseInt(this.dataTableService.defltRHgt.replace(/[ ]?px/g, ""));
+        const init = Math.max(this.dataTableService.dTblHeight / defNum);
+        const len = this.dataTableService.currFilData.length;
+        if (!len) { //always just add 1
+            this.allFilSortInfo = this.dataTableService.getAllFilSrtInfo();
+            return setTimeout(() => { this.styleEmptyFilDataRow(tbody, tbodyX); });
+        }
+        const uCols = [...this.columnHeaders];
+        const colLen = uCols.length;
+        const addCell = (text, prop, row, indx, visible) => {
+            if (prop && row) {
+                const notNum = (this.dataTableService.figureFilterType(prop) != "number" || /(year|yr|fy)/g.test(prop.toLocaleLowerCase())) ? true : false;
+                const useTxt = this.dataTableService.figureCellText(text, notNum, this.dataTableService.dataFilSrtTracker[prop]["colCellSymbol"]);
+                row.cells?.push({
+                    column: prop,
+                    rawText: text,
+                    visible: visible,
+                    editable: useTxt.prop === "textContent" ? this.editable : false,
+                    dataType: this.dataTableService.figureFilterType(prop),
+                    freeze: this.dataTableService.dataFilSrtTracker[prop].freeze,
+                    minimized: this.dataTableService.dataFilSrtTracker[prop].minimize,
+                    width: this.dataTableService.dataFilSrtTracker[prop].colWidth || this.dataTableService.useColWid,
+                    text: useTxt.prop === "textContent" ? useTxt.value : "",
+                    html: useTxt.prop !== "textContent" ? useTxt.value : "",
+                });
+            }
+            if (row && prop && row.cells && row.cells.length === 1)
+                this.dtChecks.push(indx);
+            if (field && field === prop && !didXScrl) {
+                setTimeout(() => {
+                    tbody.scrollLeft = tbodyX;
+                    if (thead)
+                        thead.style.marginLeft = (-tbodyX + "px");
+                    this.horizRest = tbodyX;
+                }, 100);
+                didXScrl = true;
+            }
+        };
+        this.useRowWid = this.getAllColWidth(colLen) + "px";
+        const limit = Math.min(init, len);
+        this.maxCols = this.setMaxCols();
+        let horizLim = Math.min(this.maxCols, colLen);
+        if (field && field !== "topLevelDataFilter") {
+            let room = 0;
+            let offst = 3;
+            const fhead = document.getElementById("columnHeader" + this.common.elifyCol(field));
+            if (fhead) {
+                const bds = fhead.getBoundingClientRect();
+                room = this.dataTableService.tblRight - bds.right;
+                if (room > 0)
+                    offst = Math.ceil(room / bds.width);
+            }
+            horizLim = Math.max(horizLim, (uCols.map(c => c.column).indexOf(field) + offst));
+        }
+        for (n; n < limit; n++) {
+            const item = this.dataTableService.currFilData[n];
+            const index = !reset ? this.dataTableService.findObjIndxInData(item) : n;
+            if (index > -1) {
+                const row = { id: "dataTableRow" + index, index: index, width: this.useRowWid, cells: [], height: this.dataTableService.defltRHgt };
+                this.rows.push(row);
+                let k = 0;
+                for (k; k < colLen; k++) {
+                    const col = uCols[k]?.column;
+                    if (col)
+                        addCell(item[col], col, row, index, (k <= horizLim));
+                }
+                this.dataTableService.currMapping[n] = index;
+            }
+        }
+        this.setLastRowIndex();
+        this.allFilSortInfo = this.dataTableService.getAllFilSrtInfo();
+        this.dataTableService.mapperWorkerId += 1; //a reset but needs to incr so prev don't affect mapping 
+        if (len) {
+            if (len > init) {
+                let total = 0;
+                let z = this.lastElRowIndex + 1;
+                for (z; z < len; z++) {
+                    total += 1;
+                    if (reset)
+                        this.dataTableService.currMapping[z] = z;
+                }
+                this.belowHgt.set(total * defNum);
+                if (!reset) {
+                    if (typeof Worker !== 'undefined') {
+                        // Create a new
+                        let worker;
+                        worker = new Worker(new URL('../worker.worker.ts', import.meta.url));
+                        worker.onmessage = ({ data }) => {
+                            if (this.dataTableService.mapperWorkerId === data.id)
+                                this.dataTableService.currMapping = { ...data.map };
+                        };
+                        if (worker)
+                            worker.postMessage({ id: this.dataTableService.mapperWorkerId, pk: this.dataTableService.primaryKey, main: this.dataTableService.mainData, curr: this.dataTableService.currFilData });
+                    }
+                }
+            }
+            this.dataTableService.setIdealColumnWidth.next(true);
+            setTimeout(() => { this.setRowSelChecksPlacement(); this.setHoldingCheckCls(); });
+        }
+    }
+    styleEmptyFilDataRow(tbody, tbodyX) {
+        const row = document.getElementsByClassName("data-table-row-no-data")[0];
+        if (row) {
+            row.style.width = this.dataTableHeaders.nativeElement.scrollWidth + "px";
+            setTimeout(() => tbody.scrollLeft = tbodyX, 100);
+        }
+    }
+    freezeColCells(col) {
+        this.rows = this.rows.map(r => {
+            r.cells = r.cells?.map(c => {
+                if (c && c.column === col)
+                    c.freeze = !c.freeze;
+                return c;
+            });
+            return r;
+        });
+    }
+    setTableWidthOnChange() {
+        const cols = this.getAllColsAtRuntime(null);
+        this.maxCols = this.setMaxCols();
+        const colLen = cols.length;
+        setTimeout(() => {
+            this.setDataRowWidthsOnMinimize(this.getAllColWidth(colLen));
+        }, 375);
+        this.setHoldingCheckCls();
+        this.setColsOnVisScreen();
+        setTimeout(() => { this.setColHeaderHgt(); });
+    }
+    setHoldingCheckCls() {
+        this.dataTableService.firstCol = this.columnHeaders.filter(c => !c.minimized)[0].column;
+    }
+    setDataRowWidthsOnMinimize(width) {
+        let i = 0;
+        const wid = width + "px";
+        const rLen = this.rows.length;
+        for (i; i < rLen; i++)
+            this.rows[i].width = wid;
+        this.useRowWid = wid;
+    }
+    clearFilInputs() {
+        let i = 0;
+        const els = document.querySelectorAll(".col-header input");
+        const len = els.length;
+        for (i; i < len; i++) {
+            const el = els[i];
+            if (el)
+                el.value = "";
+        }
+    }
+    resetCurrentData(col) {
+        this.topLevelFilter = "";
+        this.dataTableService.sortOrder = [];
+        this.clearSelectedRows();
+        this.removeAllFreezeCols();
+        this.clearFilInputs();
+        this.resetVisCols();
+        this.allFilSortInfo = "";
+        this.columnOfInterest = "";
+        this.dataTableService.setTblBounds();
+        this.dataTableService.resetFilSrtTracker();
+        this.dataTableService.currFilData = this.dataTableService.mainData.filter(d => { return true; });
+        this.renderCurrData(true, col);
+    }
+    resetVisCols() {
+        let i = 0;
+        this.dataTableService.visibleCols = [];
+        const len = this.columnHeaders.length;
+        for (i; i < len; i++) {
+            if (i < this.maxCols)
+                this.dataTableService.visibleCols.push(this.columnHeaders[i].column);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: NgxDeebodataCommunity, deps: [{ token: DataTableService }, { token: TableDragService }, { token: CommonService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: NgxDeebodataCommunity, isStandalone: true, selector: "ngx-deebodata-community", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, 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 }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: false, isRequired: false, transformFunction: null }, rowNumbers: { classPropertyName: "rowNumbers", publicName: "rowNumbers", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { cellEdit: "cellEdit" }, host: { listeners: { "window:click": "onWindowClick($event)", "window:mouseup": "onWindowMouseUp($event)", "window:mousemove": "onWindowMouseMove($event)", "window:selectstart": "onWindowSelectStart($event)", "window:resize": "onWindowResize($event)", "window:scroll": "onWindowScroll($event)" } }, viewQueries: [{ propertyName: "dataTable", first: true, predicate: ["dataTable"], descendants: true, static: true }, { propertyName: "dataTableBody", first: true, predicate: ["dataTableBody"], descendants: true, static: true }, { propertyName: "aboveArea", first: true, predicate: ["aboveArea"], descendants: true, static: true }, { propertyName: "belowArea", first: true, predicate: ["belowArea"], descendants: true, static: true }, { propertyName: "validatedEdit", first: true, predicate: ["validatedEdit"], descendants: true, static: true }, { propertyName: "rowNumHeader", first: true, predicate: ["rowNumHeader"], descendants: true, static: true }, { propertyName: "rowNumBody", first: true, predicate: ["rowNumBody"], descendants: true, static: true }, { propertyName: "fCellDragger", first: true, predicate: ["fCellDragger"], descendants: true, static: true }, { propertyName: "selFilContainer", first: true, predicate: ["selFilContainer"], descendants: true, static: true }, { propertyName: "btnTogSelRows", first: true, predicate: ["btnTogSelRows"], descendants: true, static: true }, { propertyName: "dataTableHeaders", first: true, predicate: ["dataTableHeaders"], descendants: true, static: true }, { propertyName: "topLevelDataFilter", first: true, predicate: ["topLevelDataFilter"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"deebo-data-grid-section\">\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.mainData.length || handlingSelRows\" autocomplete=\"off\" />\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    <div class=\"relly\" [ngClass]=\"{'dt-checks': rowNumbers, 'hide' : dataTableService.isFiltering || \r\n    dataTableService.isSorting }\">\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    <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    </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    <div [ngClass]=\"{'row-numbers': rowNumbers, 'hide': !rowNumbers}\" >\r\n        <div #rowNumHeader class=\"row-num-header flex-center\"><div class=\"semi-heavy\">No.</div></div>\r\n        <div style=\"overflow: hidden;\" [style.height]=\"dataTableService.dTblHeight + 'px'\">\r\n            <div #rowNumBody style=\"overflow: auto\">\r\n                @for (num of rowNos; track num.number) {\r\n                    <div [id]=\"'rn' + num.number\" class=\"flex-center num-row\" [style.height]=\"num.height || dataTableService.defltRHgt\">\r\n                        <div class=\"small-text\">{{num.number | number}}</div>\r\n                    </div>\r\n                }\r\n            </div>\r\n        </div>\r\n    </div><div #dataTable class=\"data-table\" [class.inline-table]=\"rowNumbers\">\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                [canFreeze]=\"i === 0 ? true : false\"\r\n                (reset)=\"resetCurrentData($event)\"\r\n                (freeze)=\"freezeColCells($event)\"\r\n                (scrollOnFocus)=\"checkTabHorizScroll($event)\"\r\n                (height)=\"setHeaderHeight($event, true)\"\r\n                (render)=\"renderCurrData(false, $event.field)\"\r\n                (width)=\"handleSingleColResize($event.value, $event.column)\"\r\n                ></app-data-table-header>\r\n            }\r\n        </div>\r\n        <div #dataTableBody id=\"dataTableBody\" style=\"overflow: auto;\" [style.height]=\"dataTableService.dTblHeight + 'px'\" (scroll)=\"handleScroll($event)\"\r\n        [class.table-working]=\"dataTableService.isFiltering || dataTableService.isSorting\" (scrollend)=\"handleScrollEnd()\">\r\n            <div #aboveArea [style.height]=\"aboveHgt() + 'px'\"></div>\r\n            @for(row of rows; track row.index){\r\n                <div [id]=\"row.id\" class=\"data-table-row\" [attr.data-index]=\"row.index\"\r\n                [class.data-row-selected]=\"!dataTableService.displayOnlySelRows && dataTableService.currSelRows.indexOf(row.index) > -1\"\r\n                 [ngStyle]=\"{'width': row.width, 'height': row.height}\" >\r\n                    @for(cell of row.cells; track cell.column){\r\n                        @if (isScrolling){\r\n                            <div class=\"data-cell data-cell-{{common.elifyCol(cell.column)}}\" [class.data-cell-riiight]=\"cell.dataType === 'number'\"\r\n                            [ngClass]=\"{ 'col-item-freeze': cell.freeze, 'holding-check': cell.column === dataTableService.firstCol }\"\r\n                            [ngStyle]=\"{'width': cell.width || dataTableService.useColWid, 'height': row.height}\" >{{cell.text}}@if (cell.html){<div class=\"mock-html\"></div>}</div>\r\n                        } @else {\r\n                            <app-data-cell [cell]=\"cell\" \r\n                            [rowId]=\"row.id\" \r\n                            [rawText]=\"cell.rawText\"\r\n                            [rowHeight]=\"row.height || ''\"\r\n                            (edit)=\"execCellEdit($event)\"\r\n                            (dragListen)=\"listenToCellDraggerMouseMove = $event\"\r\n                            [colWid]=\"cell.width || dataTableService.useColWid\"\r\n                            (width)=\"handleSingleColResize($event)\"\r\n                            (height)=\"setSingleRowHgt($event, row.id, true)\"\r\n                            (clearVEditFocus)=\"validatedEditType = $event\"\r\n                            (validateEditFocus)=\"handleValidatedCellEditFocus($event)\"\r\n                            ></app-data-cell>\r\n                        }\r\n                    }\r\n                </div>\r\n            }\r\n            <div #belowArea [style.height]=\"belowHgt() + 'px'\"></div>\r\n            @if(!dataTableService.currFilData.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        [totalRows]=\"dataTableService.currFilData.length\"\r\n        ></app-data-table-paginator><!--not an actual paginator-->\r\n    }\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}.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}.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{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-ctrl-sel-rows: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}.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{font-size:15px;padding:11px 0 11px 17px}.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}.data-cell img{max-width:100px;height:auto;margin:0;vertical-align:middle}.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-freeze-col{float:left;border:none;cursor:pointer;background:none}.btn-freeze-col .material-icons{font-size:16px;color:var(--accent-color)}.col-header span{word-wrap:break-word;vertical-align:middle;font-size:var(--reg-font-size)}.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", "columnHeader"], outputs: ["sort", "render", "width", "height", "reset", "freeze", "scrollOnFocus"] }, { kind: "component", type: DataCellComponent, selector: "app-data-cell", inputs: ["rawText", "cell", "rowId", "colWid", "rowHeight", "noColResize"], outputs: ["width", "height", "edit", "dragListen", "validateEditFocus", "clearVEditFocus"] }, { kind: "component", type: DataTablePaginator, selector: "app-data-table-paginator", inputs: ["totalRows", "filSortStr"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: NgxDeebodataCommunity, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-deebodata-community', imports: [
+                        DataTableHeader,
+                        DataCellComponent,
+                        DataTablePaginator,
+                        CommonModule,
+                        FormsModule,
+                        DecimalPipe,
+                    ], template: "<div class=\"deebo-data-grid-section\">\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.mainData.length || handlingSelRows\" autocomplete=\"off\" />\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    <div class=\"relly\" [ngClass]=\"{'dt-checks': rowNumbers, 'hide' : dataTableService.isFiltering || \r\n    dataTableService.isSorting }\">\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    <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    </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    <div [ngClass]=\"{'row-numbers': rowNumbers, 'hide': !rowNumbers}\" >\r\n        <div #rowNumHeader class=\"row-num-header flex-center\"><div class=\"semi-heavy\">No.</div></div>\r\n        <div style=\"overflow: hidden;\" [style.height]=\"dataTableService.dTblHeight + 'px'\">\r\n            <div #rowNumBody style=\"overflow: auto\">\r\n                @for (num of rowNos; track num.number) {\r\n                    <div [id]=\"'rn' + num.number\" class=\"flex-center num-row\" [style.height]=\"num.height || dataTableService.defltRHgt\">\r\n                        <div class=\"small-text\">{{num.number | number}}</div>\r\n                    </div>\r\n                }\r\n            </div>\r\n        </div>\r\n    </div><div #dataTable class=\"data-table\" [class.inline-table]=\"rowNumbers\">\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                [canFreeze]=\"i === 0 ? true : false\"\r\n                (reset)=\"resetCurrentData($event)\"\r\n                (freeze)=\"freezeColCells($event)\"\r\n                (scrollOnFocus)=\"checkTabHorizScroll($event)\"\r\n                (height)=\"setHeaderHeight($event, true)\"\r\n                (render)=\"renderCurrData(false, $event.field)\"\r\n                (width)=\"handleSingleColResize($event.value, $event.column)\"\r\n                ></app-data-table-header>\r\n            }\r\n        </div>\r\n        <div #dataTableBody id=\"dataTableBody\" style=\"overflow: auto;\" [style.height]=\"dataTableService.dTblHeight + 'px'\" (scroll)=\"handleScroll($event)\"\r\n        [class.table-working]=\"dataTableService.isFiltering || dataTableService.isSorting\" (scrollend)=\"handleScrollEnd()\">\r\n            <div #aboveArea [style.height]=\"aboveHgt() + 'px'\"></div>\r\n            @for(row of rows; track row.index){\r\n                <div [id]=\"row.id\" class=\"data-table-row\" [attr.data-index]=\"row.index\"\r\n                [class.data-row-selected]=\"!dataTableService.displayOnlySelRows && dataTableService.currSelRows.indexOf(row.index) > -1\"\r\n                 [ngStyle]=\"{'width': row.width, 'height': row.height}\" >\r\n                    @for(cell of row.cells; track cell.column){\r\n                        @if (isScrolling){\r\n                            <div class=\"data-cell data-cell-{{common.elifyCol(cell.column)}}\" [class.data-cell-riiight]=\"cell.dataType === 'number'\"\r\n                            [ngClass]=\"{ 'col-item-freeze': cell.freeze, 'holding-check': cell.column === dataTableService.firstCol }\"\r\n                            [ngStyle]=\"{'width': cell.width || dataTableService.useColWid, 'height': row.height}\" >{{cell.text}}@if (cell.html){<div class=\"mock-html\"></div>}</div>\r\n                        } @else {\r\n                            <app-data-cell [cell]=\"cell\" \r\n                            [rowId]=\"row.id\" \r\n                            [rawText]=\"cell.rawText\"\r\n                            [rowHeight]=\"row.height || ''\"\r\n                            (edit)=\"execCellEdit($event)\"\r\n                            (dragListen)=\"listenToCellDraggerMouseMove = $event\"\r\n                            [colWid]=\"cell.width || dataTableService.useColWid\"\r\n                            (width)=\"handleSingleColResize($event)\"\r\n                            (height)=\"setSingleRowHgt($event, row.id, true)\"\r\n                            (clearVEditFocus)=\"validatedEditType = $event\"\r\n                            (validateEditFocus)=\"handleValidatedCellEditFocus($event)\"\r\n                            ></app-data-cell>\r\n                        }\r\n                    }\r\n                </div>\r\n            }\r\n            <div #belowArea [style.height]=\"belowHgt() + 'px'\"></div>\r\n            @if(!dataTableService.currFilData.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        [totalRows]=\"dataTableService.currFilData.length\"\r\n        ></app-data-table-paginator><!--not an actual paginator-->\r\n    }\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}.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}.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{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-ctrl-sel-rows: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}.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{font-size:15px;padding:11px 0 11px 17px}.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}.data-cell img{max-width:100px;height:auto;margin:0;vertical-align:middle}.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-freeze-col{float:left;border:none;cursor:pointer;background:none}.btn-freeze-col .material-icons{font-size:16px;color:var(--accent-color)}.col-header span{word-wrap:break-word;vertical-align:middle;font-size:var(--reg-font-size)}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:\"liga\";-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}\n"] }]
+        }], ctorParameters: () => [{ type: DataTableService }, { type: TableDragService }, { type: CommonService }], propDecorators: { onWindowClick: [{
+                type: HostListener,
+                args: ['window:click', ['$event']]
+            }], onWindowMouseUp: [{
+                type: HostListener,
+                args: ['window:mouseup', ['$event']]
+            }], onWindowMouseMove: [{
+                type: HostListener,
+                args: ['window:mousemove', ['$event']]
+            }], onWindowSelectStart: [{
+                type: HostListener,
+                args: ['window:selectstart', ['$event']]
+            }], onWindowResize: [{
+                type: HostListener,
+                args: ['window:resize', ['$event']]
+            }], onWindowScroll: [{
+                type: HostListener,
+                args: ['window:scroll', ['$event']]
+            }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], color1: [{
+                type: Input
+            }], color2: [{
+                type: Input
+            }], primaryKey: [{
+                type: Input
+            }], defRowHgt: [{
+                type: Input
+            }], defGridHgt: [{
+                type: Input
+            }], altRowColor: [{
+                type: Input
+            }], myColumnSymbols: [{
+                type: Input
+            }], editable: [{
+                type: Input
+            }], rowNumbers: [{
+                type: Input
+            }], cellEdit: [{
+                type: Output,
+                args: ["cellEdit"]
+            }], dataTable: [{
+                type: ViewChild,
+                args: ["dataTable", { static: true }]
+            }], dataTableBody: [{
+                type: ViewChild,
+                args: ["dataTableBody", { static: true }]
+            }], aboveArea: [{
+                type: ViewChild,
+                args: ["aboveArea", { static: true }]
+            }], belowArea: [{
+                type: ViewChild,
+                args: ["belowArea", { static: true }]
+            }], validatedEdit: [{
+                type: ViewChild,
+                args: ["validatedEdit", { static: true }]
+            }], rowNumHeader: [{
+                type: ViewChild,
+                args: ["rowNumHeader", { static: true }]
+            }], rowNumBody: [{
+                type: ViewChild,
+                args: ["rowNumBody", { static: true }]
+            }], fCellDragger: [{
+                type: ViewChild,
+                args: ["fCellDragger", { static: true }]
+            }], selFilContainer: [{
+                type: ViewChild,
+                args: ["selFilContainer", { static: true }]
+            }], btnTogSelRows: [{
+                type: ViewChild,
+                args: ["btnTogSelRows", { static: true }]
+            }], dataTableHeaders: [{
+                type: ViewChild,
+                args: ["dataTableHeaders", { static: true }]
+            }], topLevelDataFilter: [{
+                type: ViewChild,
+                args: ["topLevelDataFilter", { static: true }]
+            }] } });
+
+/*
+ * Public API Surface of ngx-deebodata-community
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NgxDeebodataCommunity };
+//# sourceMappingURL=ngx-deebodata-community.mjs.map