ngx-deebodata 0.0.2 → 0.0.3

package/src/lib/data-table/data-table-module/data-cell/data-cell.ts

@@ -1,271 +0,0 @@
-import { Component, ElementRef, EventEmitter, Input, Output, SimpleChanges, ViewChild } from '@angular/core';
-import { DataCell } from '../../../interfaces/data-cell';
-import { CommonService } from '../../../services/common-service';
-import { TableDragService } from '../../../services/table-drag-service';
-import { CommonModule } from '@angular/common';
-import { DataTableService } from '../../../services/data-table-service';
-
-@Component({
-  selector: 'app-data-cell',
-  imports: [CommonModule],
-  templateUrl: './data-cell.html',
-  styleUrl: '../../../styles.css'
-})
-export class DataCellComponent {
-
-  constructor(public tblDragService: TableDragService,
-              public dataTableService: DataTableService,
-              private common: CommonService,) {
-
-  }
-
-  init = true
-  ready = false
-  canEdit = false
-  elCol: string = ""
-  cellStyle: any = {}
-  setCellEditScrlActionTO: any = null;
-  @Input() rawText: any;
-  @Input() cell!: DataCell;
-  @Input() rowId: string = "";//starts with dataTableRow
-  @Input() colWid: string = "";
-  @Input() rowHeight: string = "";
-  @Input() noColResize: boolean = false;
-  @Input() columnValClass: string = "";
-  @Output("width") width: EventEmitter<number> = new EventEmitter()
-  @Output("height") height: EventEmitter<any> = new EventEmitter()
-  @Output("edit") edit: EventEmitter<any> = new EventEmitter()
-  @Output("dragListen") dragListen: EventEmitter<any> = new EventEmitter()
-  @Output("validateEditFocus") validateEditFocus: EventEmitter<any> = new EventEmitter()
-  @Output("clearVEditFocus") clearVEditFocus: EventEmitter<any> = new EventEmitter()
-  @ViewChild('cellEl', { static: true }) cellElem!: ElementRef<HTMLElement>
-  rightAlign: string = "";//for numbers, always add a space in front
-  symbolCls: string = "";//also for numbers only, always add a space in front
-
-  ngOnChanges(changes: SimpleChanges) {
-    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(): boolean {
-    if(!this.cell.html && (["number", "date"].includes(this.cell.dataType) || this.dataTableService.dataFilSrtTracker[this.cell.column].selDDVals))
-      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: string, val: number) {
-      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: string) {
-    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: string, col: string, dataType: string): string {
-    if(this.dataTableService.dataFilSrtTracker[col].selDDVals){
-      if(this.dataTableService.dataFilSrtTracker[col].selDDVals.map( (d: any) => d.value).includes(text))
-        return text
-      return "";
-    }
-    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?: boolean) {
-      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 = <HTMLElement>document.getElementById("dataTableBody")
-              grid.scrollBy((cellWid+1), 0)
-          }
-          if(!this.setCellEditScrlActionTO){
-              return this.setToEditAfterTO()
-          } else {
-              window.clearTimeout(this.setCellEditScrlActionTO)
-          }
-      }
-      const ddReClick = cell.classList.contains("focused-el")
-      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.column, this.cell.dataType)
-        if(this.cell.rawText && !okText)
-          return;
-        this.validateEditFocus.emit({type: this.cell.dataType, value: okText})
-        if(this.dataTableService.dataFilSrtTracker[this.cell.column].selDDVals){//only for sel dds
-          if(ddReClick){
-            cell.blur()
-            return this.dataTableService.clearAllFocused()
-          }
-          setTimeout( () => {if(this.dataTableService.currEditCol === this.cell.column) cell.focus() }, 45)
-          setTimeout( () => {if(this.dataTableService.currEditCol === this.cell.column) cell.classList.add("focused-el") }, 150)
-        }
-        return;
-      }
-      this.clearVEditFocus.emit("")
-      setTimeout( () => {
-        const fCellDragger = <HTMLElement>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(): boolean {
-    if(!this.cell.html && (["number", "date"].includes(this.cell.dataType) || this.dataTableService.dataFilSrtTracker[this.cell.column].selDDVals))
-      return true
-    return false
-  }
-
-  emitEdit(event: any) {
-    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 = <HTMLElement>document.getElementsByClassName("focused-cell-dragger")[0]
-              if(fCellDragger && !this.dataTableService.autoScrollOnEdit){
-                fCellDragger.style.removeProperty("top")
-                fCellDragger.style.removeProperty("left")
-              }
-            }
-        }
-      })
-    }
-  }
-
-}

package/src/lib/data-table/data-table-module/data-table-header/data-table-header.css

@@ -1,25 +0,0 @@
-.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: 0.5;
-}
-
-.not-licensed{
-    background-image: url("https://d2ffvluimla00s.cloudfront.net/deebo-water.webp") !important;
-    background-position: right !important;
-    background-repeat: no-repeat !important
-}

package/src/lib/data-table/data-table-module/data-table-header/data-table-header.html

@@ -1,55 +0,0 @@
-<div #colHeader [id]="'columnHeader' + elCol" class="col-header" (dblclick)="handleColResDblClick(columnHeader.column)"
-[ngClass]="{ 'col-item-freeze': columnHeader.freeze, 'col-header-minimized': columnHeader.minimized, 'not-licensed': !common.goodLs() }"
-[ngStyle]="{'width': columnHeader.width, 'height': columnHeader.height, 'lineHeight': columnHeader.lineHeight}"
-(mousedown)="tblDragService.handleHeaderSizeAdjust($event)" (mouseup)="tblDragService.handleColResMouseUp($event)"
-(mousemove)="tblDragService.checkItemBorderCursor($event)" (mousemove)="tblDragService.handleHeaderSizeAdjust($event)">
-    <span (mousemove)="common.unbindMouseEvent($event)" (mousedown)="common.unbindMouseEvent($event)" (mouseup)="common.unbindMouseEvent($event)"
-    (click)="doSortOnClick($event, columnHeader.column)" [class.span-disabled]="dataTableService.isSorting()">{{text}}</span>
-    <button [id]="'btnSort' + elCol" type="button" [disabled]="dataTableService.isSorting()" (click)="doSortOnClick($event, columnHeader.column)" class="data-sort-arr"
-    (mousemove)="common.unbindMouseEvent($event)" (mousedown)="preventTabScroll()" (mouseup)="common.unbindMouseEvent($event)"
-    (focus)="emitTabFocus(elCol)">
-        <i class="material-icons v-mid">{{dataTableService.dataFilSrtTracker[columnHeader.column].sort === "asc" ? "arrow_downward" : "arrow_upward"}}</i>
-    </button>
-    @if(dataTableService.sortOrder.indexOf(columnHeader.column) > -1){
-        <sup [class.prevent]="dataTableService.isSorting()" (click)="doSortOnClick($event, columnHeader.column)" 
-         (mousemove)="common.unbindMouseEvent($event)" (mousedown)="common.unbindMouseEvent($event)" (mouseup)="common.unbindMouseEvent($event)" 
-         class="sort-order-indicator">{{(dataTableService.sortOrder.indexOf(columnHeader.column)+1) | number}}</sup>
-    }
-    @if(common.goodLs()){
-        <button [id]="'btnMin' + elCol" type="button" (click)="minimizeColumn(columnHeader.column)" class="btn-min-col" [class.btn-min-col-hide]="hideMinCol"
-        (mousemove)="common.unbindMouseEvent($event)" (mousedown)="preventTabScroll()" (mouseup)="common.unbindMouseEvent($event)" 
-        (focus)="emitTabFocus(elCol)">
-            <i class="material-icons">minimize</i>
-        </button>
-    }
-    @if(canFreeze){
-        <button type="button" (click)="freezeColOnClick($event, columnHeader.column)" class="btn-freeze-col"
-        (mousemove)="common.unbindMouseEvent($event)" (mousedown)="common.unbindMouseEvent($event)" (mouseup)="common.unbindMouseEvent($event)" >
-            <i class="material-icons">featured_play_list</i>
-        </button>
-    }
-    <br>
-    @if(dataTableService.dataFilSrtTracker[columnHeader.column].filter || dataTableService.hasUnchkdDDVals(dataTableService.dataFilSrtTracker[columnHeader.column]) > 0){
-        <button type="button" class="btn-x-filter" (click)="resetColFilter($event, columnHeader.column)" 
-        (mousemove)="common.unbindMouseEvent($event)" (mousedown)="common.unbindMouseEvent($event)" (mouseup)="common.unbindMouseEvent($event)" >&times;</button>
-    }
-    <input #filterInput [name]="'filter' + elCol" [class.select-filter]="isSelect" [id]="'filter' + elCol"
-    (input)="filterOnKeyUp($event, columnHeader.column, $any($event).target.value)" maxlength="255" autocomplete="off" 
-    (keyup)="filterOnKeyUp($event, columnHeader.column, $any($event).target.value)" [attr.type]="columnHeader.dataType" 
-    (focus)="emitFilterFocus($any($event).target, columnHeader.column)" (click)="emitFilterClick($any($event).target, columnHeader.column)" 
-    (mousemove)="common.unbindMouseEvent($event)" (mousedown)="common.unbindMouseEvent($event)" (mouseup)="common.unbindMouseEvent($event)" />
-    <select #compSelect [id]="'selectComp' + elCol" [name]="'selectComp' + elCol" [(ngModel)]="dataTableService.dataFilSrtTracker[columnHeader.column].comparator" 
-    (change)="handleComparatorChange(columnHeader.column, $any($event).target.value)" class="select-filter-comparator" (focus)="handleCompFocus()"
-    (mousemove)="common.unbindMouseEvent($event)" (mousedown)="common.unbindMouseEvent($event)" (mouseup)="common.unbindMouseEvent($event)" >
-        <option value="">Comparison?</option>
-        @for(opt of compOpts; track opt){
-            <option [value]="opt" [attr.selected]="isSelect && opt === 'Equals'" >{{opt}}</option>
-        }
-    </select>
-    <div class="inline relly" style="z-index: 1;">
-        <button class="btn-fil-comp" type="button"
-        (mousemove)="common.unbindMouseEvent($event)" (mousedown)="common.unbindMouseEvent($event)" (mouseup)="common.unbindMouseEvent($event)" >
-            <i class="material-icons" aria-hidden="false">filter_list</i>
-        </button>
-    </div>
-</div>

package/src/lib/data-table/data-table-module/data-table-header/data-table-header.spec.ts

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { DataTableHeader } from './data-table-header';
-
-describe('DataTableHeader', () => {
-  let component: DataTableHeader;
-  let fixture: ComponentFixture<DataTableHeader>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [DataTableHeader]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(DataTableHeader);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/lib/data-table/data-table-module/data-table-header/data-table-header.ts

@@ -1,261 +0,0 @@
-import { Component, EventEmitter, Input, Output, ViewChild, ElementRef, } from '@angular/core';
-import { ColumnHeader } from '../../../interfaces/column-header';
-import { CommonService } from '../../../services/common-service';
-import { DataTableService } from '../../../services/data-table-service';
-import { FormsModule } from '@angular/forms';
-import { TableDragService } from '../../../services/table-drag-service';
-import { CommonModule, DecimalPipe } from '@angular/common';
-
-export interface columnWidthResize{
-    column: string
-    value: number
-}
-
-@Component({
-  selector: 'app-data-table-header',
-  imports: [CommonModule, FormsModule, DecimalPipe, ],
-  templateUrl: './data-table-header.html',
-  styleUrls: ['./data-table-header.css', '../../../styles.css']
-})
-export class DataTableHeader {
-
-  constructor(public common: CommonService, 
-              public tblDragService: TableDragService,
-              public dataTableService: DataTableService,){
-    
-  }
-
-  init = false;
-  showBtnX = false;
-  isSelect = false
-  autoMaxed = false
-  text: string = ""
-  elCol: string = "";
-  canTabScroll = true
-  compOpts: string[] = []
-  filterBuildUp: any[] = []
-  @Input() colWid: string = "";
-  @Input() canFreeze: boolean = false;
-  @Input() hideMinCol: boolean = false;
-  @Input() columnHeader!: ColumnHeader;
-  @Output("sort") sort: EventEmitter<string> = new EventEmitter()
-  @Output("render") render: EventEmitter<any> = new EventEmitter()
-  @Output("width") width: EventEmitter<columnWidthResize> = new EventEmitter()
-  @Output("height") height: EventEmitter<number> = new EventEmitter()
-  @Output("reset") reset: EventEmitter<string> = new EventEmitter()
-  @Output("freeze") freeze: EventEmitter<string> = new EventEmitter()
-  @Output("filFocus") filFocus: EventEmitter<any> = new EventEmitter()
-  @Output("filSelClick") filSelClick: EventEmitter<any> = new EventEmitter()
-  @Output("minimize") minimize: EventEmitter<string> = new EventEmitter()
-  @Output("emitCompFocus") emitCompFocus: EventEmitter<boolean> = new EventEmitter()
-  @Output("scrollOnFocus") scrollOnFocus: EventEmitter<string> = new EventEmitter()
-  @ViewChild('colHeader', { static: true }) colHeaderEl!: ElementRef<HTMLElement>
-  @ViewChild('filterInput', { static: true }) filterInputEl!: ElementRef<HTMLInputElement>
-  @ViewChild('compSelect', { static: true }) compSelectEl!: ElementRef<HTMLSelectElement>
-
-  ngOnInit() {
-    this.elCol = this.common.elifyCol(this.columnHeader.column)
-    this.text = this.common.titleCase(this.columnHeader.column)
-    this.isSelect = this.dataTableService.dataFilSrtTracker[this.columnHeader.column]?.["selDDVals"]?.length
-    if(this.isSelect){
-      const canComp = ["Equals", "Not Equal", "Empty", "Not Empty",]
-      this.compOpts = this.dataTableService.comparatorOpts[this.columnHeader.dataType].
-      filter( (co: string) => canComp.indexOf(co) > -1 );
-    } else {
-      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.isSelect){
-      setTimeout( () => {
-          this.filterInputEl?.nativeElement.setAttribute("readonly", "true")
-      })
-    }
-    if(this.columnHeader.dataType === "date"){
-        setTimeout( () => {
-            this.filterInputEl?.nativeElement.addEventListener("change", e => { this.filterDateOnKeyUp(e) })
-        })
-    }
-  }
-
-  preventTabScroll() {
-    this.canTabScroll = false
-  }
-
-  emitTabFocus(col: string) {
-    if(this.canTabScroll)
-        this.scrollOnFocus.emit(col)
-  }
-
-  handleCompFocus() {
-    this.emitCompFocus.emit(true)
-  }
-
-  freezeColOnClick(e: any, prop: string) {
-        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){}
-  }
-
-  minimizeColumn(col: string) {
-    this.canTabScroll = true
-    this.dataTableService.dataFilSrtTracker[col].minimize = true
-    this.dataTableService.sortOrder = this.dataTableService.sortOrder.filter( (s: any) => s !== col )
-    this.minimize.emit(col)
-  }
-
-  doSortOnClick(e: any, col: string) {
-    e && e.stopPropagation()
-    this.canTabScroll = true
-    if(!this.dataTableService.isSorting()){
-        this.dataTableService.isSorting.set(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.set(false)
-        })
-    }
-  }
-
-  resetColFilter(event: any, field: string) {
-      event && event.stopPropagation()
-      const fil = this.filterInputEl.nativeElement
-      const comp = this.compSelectEl.nativeElement
-      if(fil){
-          fil.value = "";
-          if(this.isSelect){
-              comp.value = "Equals"
-              this.recheckAllDDOpts(field)
-              this.dataTableService.dataFilSrtTracker[field].comparator = "Equals"
-          } else {
-              comp.value = ""
-              this.dataTableService.dataFilSrtTracker[field].comparator = null
-          }
-          this.filterOnKeyUp(event, field, "", true)
-      }
-  }
-
-  recheckAllDDOpts(prop: string) {
-      this.dataTableService.dataFilSrtTracker[prop]["selDDVals"] = this.dataTableService.dataFilSrtTracker[prop]["selDDVals"].
-      map( function(v: any) {v.checked = true; return v})
-  }
-
-  filterDateOnKeyUp(event: any) {
-    const elId: string = event.target?.id?.replace(/filter/g, "")
-    const field: string = this.common.replaceUniSep(elId)
-    this.filterOnKeyUp(event, field, event.target.value)
-  }
-
-  filTO: any = null;
-
-  filterOnKeyUp(event:any, field: string, val: any, manual?: any) {
-      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.set(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)
-          if(this.filTO){
-            clearTimeout(this.filTO)
-            this.filTO = null
-          }
-        this.filTO = setTimeout( () => { 
-            this.dataTableService.isFiltering.set(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 = <HTMLInputElement>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: string, comp: string) {
-      if(col){
-        const value = this.dataTableService.dataFilSrtTracker[col].filter
-        this.dataTableService.dataFilSrtTracker[col].comparator = comp
-        this.filterOnKeyUp(null, col, (value || ""), true)
-      }
-  }
-
-  updateUiColCellTheme(cssProp: string, val: number, col?: string) {
-    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: string, auto?: boolean) {
-        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
-                }
-            }
-        }
-    }
-
-    emitFilterFocus(target: HTMLInputElement, col: string) {
-        this.filFocus.emit({ target: target, col: col, select: this.isSelect })
-    }
-
-    emitFilterClick(target: HTMLInputElement, col: string) {
-      if(this.isSelect)
-        this.filSelClick.emit({ target: target, col: col})
-    }
-
-}