ngx-deebodata-community 0.0.4 → 0.0.6

package/README.md

@@ -1,7 +1,8 @@
 # NgxDeebodataCommunity
 
-This is an open source data grid with virtual scroll, column resizing, cell editing,  
-tab accessibility, sorting, and filtering. It only uses core Angular modules.
+DeeboData Community for Angular - an open source data grid with virtual scroll,  
+column resizing, cell editing, tab accessibility, sorting, and filtering. It  
+only uses core Angular modules.
 
 ## Usage
 

package/fesm2022/ngx-deebodata-community.mjs

@@ -371,7 +371,7 @@ class DataTableService {
     setIdealColumnWidth = new Subject();
     currSelRows = []; //just be an index of mainData
     displayOnlySelRows = false;
-    noDataMsg = "Loading Demo...";
+    noDataMsg = "Loading...";
     deboTotal = "deebo_total";
     bgSep = "__forbargX";
     errorLoading = false;
@@ -1813,6 +1813,11 @@ class NgxDeebodataCommunity {
     btnTogSelRows;
     dataTableHeaders;
     topLevelDataFilter;
+    dataHasBeenSet = false;
+    ngOnChanges(changes) {
+        if (typeof changes !== "undefined" && changes["data"] && !this.dataHasBeenSet && this.data().length)
+            this.handleDataInput();
+    }
     ngOnInit() {
         if (this.defRowHgt && /\d+px/g.test(this.defRowHgt))
             this.dataTableService.defltRHgt = this.defRowHgt;
@@ -1820,6 +1825,10 @@ class NgxDeebodataCommunity {
             this.dataTableService.dTblHeight = this.defGridHgt;
         if (this.myColumnSymbols)
             this.dataTableService.columnSymbols = [...this.myColumnSymbols];
+        if (this.data.length)
+            this.handleDataInput();
+    }
+    handleDataInput() {
         let tdata = this.convertNeededCols([...this.data()]);
         this.dataTableService.mainData = tdata.filter((d) => true);
         this.dataTableService.currFilData = tdata.filter((d) => true);
@@ -1830,6 +1839,7 @@ class NgxDeebodataCommunity {
         this.tblDragService.dTblHeightOutput.subscribe(h => this.setTableHeight(h));
         this.tblDragService.columnMove.subscribe(c => this.processColMove(c));
         setTimeout(() => this.setTableHeight(510), 1000); //for demo
+        this.dataHasBeenSet = true;
     }
     getAllColsAtRuntime(excludeHidden) {
         let cols = (typeof this.dataTableService.mainData[0] === "object" ? Object.keys(this.dataTableService.mainData[0]) :
@@ -3393,7 +3403,7 @@ class NgxDeebodataCommunity {
         }
     }
     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" }] });
+    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 }], usesOnChanges: 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,