ngx-deebodata 0.0.2 → 0.0.3

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

@@ -1,69 +0,0 @@
-: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;
-}
-
-#skipTo{
-    min-width: 125px
-}
-
-.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: white;
-    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 0.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;
-}

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

@@ -1,24 +0,0 @@
-<div id="tableFooter" class="data-table-footer" (mousemove)="tblDragService.checkPaginatorBorderCursor($event)" 
-(mousemove)="tblDragService.handleTableHeightAdjust($event)" (mousedown)="tblDragService.handleTableHeightAdjust($event)" 
-(mouseup)="tblDragService.handleColResMouseUp($event)">
-    <div class="three-qtr-wid">
-        @if(!common.goodLs()){<span class="v-mid error-message lg-text">{{"Invalid License Key"}} </span>}
-        <div class="inline v-mid semi-heavy lg-text">{{totalRowStr}}</div>&nbsp;<div class="inline v-mid">row{{totalRows === 1 ? "" : "s"}}</div>
-        @if(filSortStr()){
-            <div class="inline v-mid" [innerHTML]="filSortStr()"></div>
-        }
-    </div><div class="qtr-wid right">
-        <label class="skip-lbl" for="skipTo">Jump To Row</label>&nbsp;&nbsp;<div class="skip-to-contain"><input type="number" min="1" [attr.max]="totalRowStr"
-        name="skipTo" id="skipTo" #skipTo placeholder="Jump to..." (input)="handleSkipToPageOnKeyup($event, $any($event).target.value)"
-        (focus)="showSkipToOptions($event)" (click)="showSkipToOptions($event)" (blur)="handleSkipToPageOnKeyup($event, $any($event).target.value)" 
-        (keyup.enter)="handleSkipToPageOnKeyupEnter($any($event).target.value)" (keyup)="handleSkipToPageOnKeyup($event, $any($event).target.value)" 
-        (mouseup)="common.unbindMouseEvent($event)" [disabled]="disableJump" />
-        <div #skipToOptions class="skip-to-options-hide" [class.skip-to-options]="showSkipTo">
-            @for(row of jumpableRows; track row.value){
-                <div (click)="setUpHandleSkipToPage(row.value)"
-                (keyup.enter)="setUpHandleSkipToPage(row.value)"
-                tabIndex="0" >{{row.text}}</div>
-            }
-        </div></div>
-    </div>
-</div>

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

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

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

@@ -1,125 +0,0 @@
-import { Component, ElementRef, EventEmitter, Input, Output, SimpleChanges, HostListener, input, signal } from '@angular/core';
-import { DataTableService } from '../../../services/data-table-service';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { TableDragService } from '../../../services/table-drag-service';
-import { CommonService } from '../../../services/common-service';
-
-@Component({
-  selector: 'app-data-table-paginator',
-  imports: [CommonModule, FormsModule,],
-  templateUrl: './data-table-paginator.html',
-  styleUrls: ['./data-table-paginator.css', '../../../styles.css']
-})
-export class DataTablePaginator {
-
-    @HostListener('window:click', ['$event'])
-    onWindowClick(e: MouseEvent) {
-        if(this.listenToWindowSkipTo && document.getElementsByClassName("skip-to-options").length){
-            if(e && e.target && (e.target instanceof Element) && (/skip/g.test(e.target.className) || /skip/g.test(e.target.id)))
-                return;
-            this.closeSkipOpts()
-        }
-    }
-
-    constructor(public dataTableService: DataTableService,
-                public tblDragService: TableDragService,
-                public common: CommonService,
-                public skipTo: ElementRef,) {
-
-    }
-
-    init = true
-    isKeying = false
-    totalRowStr = "";
-    rowinating = false
-    jumpableRows: any[] = []
-    listenToWindowSkipTo = false
-    showSkipTo: boolean = false;
-    @Input() totalRows: number = 0;
-    filSortStr = input<string>("");
-    @Input() disableJump: boolean = false;
-    @Output("jumpTo") jumpTo: EventEmitter<number> = new EventEmitter(true)
-
-    ngOnChanges(changes: SimpleChanges){
-        if(!this.init && changes){
-            if(changes["totalRows"])
-                this.setUpPagi()
-        }
-    }
-
-    ngOnInit() {
-        this.setUpPagi()
-        this.init = false
-    }
-
-    setUpPagi() {
-        this.handleSkipToDD()
-        this.totalRowStr = this.totalRows.toLocaleString(undefined, { maximumFractionDigits: 0 })
-    }
-
-    //PAGINATOR
-    handleSkipToPage(value: any) {
-        const pnum = parseInt(value.toString())
-        if(value && !isNaN(pnum) && !this.isKeying){
-            this.jumpTo.emit(pnum)
-            this.closeSkipOpts()
-        }
-    }
-
-    setUpHandleSkipToPage(val: any) {//mock option click
-        if(val){
-            const useVal = Math.min(val, this.totalRows)
-            this.skipTo.nativeElement.value = useVal
-            this.handleSkipToPage(useVal)
-        } else {
-          this.closeSkipOpts()
-        }
-    }
-
-    handleSkipToPageOnKeyup(event: any, val: any) {
-        if(event && event.type === "blur" && ((event.relatedTarget && /skip-to-options/g.test(event.relatedTarget.className)) || 
-          (event.relatedTarget && event.relatedTarget.parentElement && /skip-to-options/g.test(event.relatedTarget.parentElement.className)))) return;
-        this.isKeying = true
-        setTimeout( () => { 
-            this.isKeying = false 
-            this.handleSkipToPage(val)
-        })
-    }
-
-    setUpHandleSkipToPageOnEnter(page: any) {
-        this.setUpHandleSkipToPage(page)
-    }
-
-    handleSkipToPageOnKeyupEnter(val: any) {
-        this.handleSkipToPage(val)
-    }
-
-    showSkipToOptions(event: Event) {
-        if(!this.showSkipTo)
-            this.showSkipTo = true;
-        if(event && event.type === "click" && !this.listenToWindowSkipTo)
-            setTimeout( () => { this.listenToWindowSkipTo = true })
-    }
-
-    closeSkipOpts() {
-        this.showSkipTo = false;
-        this.listenToWindowSkipTo = false
-    }
-
-    handleSkipToDD() {
-        this.jumpableRows = []
-        this.jumpableRows.push({ text: "1st Row", value: "1" })
-        if(this.totalRows > 10){
-            const qtr = Math.ceil(this.totalRows/4)
-            const half = Math.ceil(this.totalRows/2)
-            const thrqtr = Math.ceil(this.totalRows*.75)
-            this.jumpableRows.push({ text: "Row " + qtr.toLocaleString(undefined, { maximumFractionDigits: 0 }), value: qtr })
-            this.jumpableRows.push({ text: "Row " + half.toLocaleString(undefined, { maximumFractionDigits: 0 }), value: half })
-            this.jumpableRows.push({ text: "Row " + thrqtr.toLocaleString(undefined, { maximumFractionDigits: 0 }), value: thrqtr })
-        }
-        this.jumpableRows.push({ text: "Last Row", value: this.totalRows })
-    }
-    //PAGINATOR
-
-}

package/src/lib/data-table/data-table-module/export-component/export-component.css

@@ -1,91 +0,0 @@
-: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
-}
-
-.deebo-dd-select-hide{
-    opacity: 0;
-    max-height: 0;
-    min-width: 0;
-    max-width: 0;
-    overflow: hidden;
-}
-
-.deebo-dd-contain{
-    height:36px;
-    border:none;
-    padding: 0 7px;
-    border-radius:3px;
-    display: inline-flex;
-    background: white;
-    vertical-align: middle;
-    box-sizing: border-box;
-    border-bottom: none !important;
-    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);
-    font-family:'Roboto Condensed', Arial, Helvetica, sans-serif
-}
-
-.deebo-dd-selected{
-    position: relative;
-}
-
-.deebo-dd-contain button, .deebo-dd-contain label{
-    padding: 0;
-    overflow: hidden;
-    vertical-align: middle;
-}
-
-.deebo-dd-contain button span, .deebo-dd-contain button i{
-    vertical-align: middle;
-    font-size: var(--reg-font-size);
-}
-
-.deebo-dd-opt{
-    padding: 15px 7px;
-    overflow-x: hidden;
-    text-overflow: ellipsis;
-    border-bottom: 1px solid var(--grid-color);
-}
-
-.deebo-dd-opt button, .deebo-dd-opt div{
-    width: 100%;
-    text-align: left;
-    font-size: var(--reg-font-size);
-}
-
-.btn-deebo-dd i{
-    margin-left: 5px;
-}
-
-.deebo-dd-select{
-    right: 0;/*keeps export dd from flowing off page horiz*/
-    top: -150px;
-    z-index: 10;
-    border-radius: 3px;
-    position: absolute;
-    background: white;
-    opacity: 1 !important;
-    overflow: auto !important;
-    min-height: 120px;
-    white-space: normal;
-    min-width: 200px !important;
-    max-width: 275px !important;
-    max-height: 300px !important;
-    box-shadow:0 0 2px 2px var(--grid-color);
-    -moz-box-shadow:0 0 2px 2px var(--grid-color);
-    -webkit-box-shadow:0 0 2px 2px var(--grid-color);
-    transition: opacity 0.2s ease;
-}
-
-.deebo-dd-opt:hover{
-    background: #ebebeb;
-}
-
-.deebo-dd-opt:last-of-type{
-    border-bottom: none;
-}

package/src/lib/data-table/data-table-module/export-component/export-component.html

@@ -1,16 +0,0 @@
-<div class="relly">
-    <div #ddSelect class="deebo-dd-select-hide deebo-dd-export" [class.deebo-dd-select]="optsOpen">
-        @for(format of formats; track format){
-            <div class="deebo-dd-opt deebo-dd-export">
-                <button type="button" class="no-btn btn-export" (click)="handleExportData(format)" 
-                [disabled]="exporting || !count">{{format}}</button>
-            </div>
-        }
-    </div>
-</div>
-<div class="deebo-dd-contain deebo-dd-export flex-center">
-    <button type="button" class="btn-deebo-dd deebo-dd-export no-btn" (click)="toggleExportOpts()" [disabled]="disableExport()">
-        <span>Export {{count | number}} {{rowsStr}}</span>
-        <i class="material-icons" aria-hidden="false">{{optsOpen ? "keyboard_arrow_up" : "keyboard_arrow_down"}}</i>
-    </button>
-</div>

package/src/lib/data-table/data-table-module/export-component/export-component.spec.ts

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

package/src/lib/data-table/data-table-module/export-component/export-component.ts

@@ -1,206 +0,0 @@
-import { Component, ElementRef, input, Input, SimpleChanges, ViewChild, } from '@angular/core';
-import { DataTableService } from '../../../services/data-table-service';
-import { ColumnHeader } from '../../../interfaces/column-header';
-import { CommonModule, DecimalPipe } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-
-@Component({
-  selector: 'app-export-component',
-  imports: [CommonModule, DecimalPipe, FormsModule],
-  templateUrl: './export-component.html',
-  styleUrls: ['./export-component.css', '../../../styles.css']
-})
-export class ExportComponent {
-
-  constructor(private dataTableService: DataTableService,) {
-
-  }
-
-  init = true
-  rowsStr = "rows"
-  optsOpen = false
-  disableExport = input<boolean>(false)
-  exporting: boolean = false;
-  @Input() count: number = 0
-  @Input() columns: ColumnHeader[] = []
-  formats: string[] =  ["csv" ,"json" ,"psv" ,"tsv"]
-  @ViewChild("ddSelect", { static: true }) ddSelect!: ElementRef<HTMLDivElement>;
-
-  ngOnChanges(changes: SimpleChanges) {
-    if(!this.init && changes){
-        if(changes["count"]?.currentValue)
-            this.rowsStr = this.count === 1 ? "row" : "rows"
-    }
-  }
-
-  ngOnInit() {
-    this.init = false
-    this.dataTableService.closeExportOpts.subscribe( e => this.optsOpen = e)
-  }
-
-  toggleExportOpts() {
-    this.optsOpen = !this.optsOpen
-    if(this.optsOpen){
-        setTimeout( () => {
-            const hgt = this.ddSelect.nativeElement.getBoundingClientRect().height
-            this.dataTableService.listenToCloseExportOpts = true;
-            this.ddSelect.nativeElement.style.top = -(hgt+3) + "px"
-        })
-    }
-  }
-
-  //EXPORT
-  handleExportData(format: string) { 
-      if(!this.dataTableService.mainData || !this.dataTableService.mainDataLen){
-          this.optsOpen = false;
-          this.dataTableService.listenToCloseExportOpts = false
-          return alert("Please generate a table then export data!");
-      }
-      this.exporting = true
-      try{
-          let data; let cType = "application/octet-stream";
-          const dt = new Date().getTime()
-          let rows = this.dataTableService.currFilData.filter( function(d) { return true })
-          const rLen = rows.length
-          const selLen = this.dataTableService.currSelRows.length
-          if(selLen && (selLen !== rLen)){
-              setTimeout( () => { this.endExportOpts() })
-              const sStr = (selLen.toLocaleString(undefined, {maximumFractionDigits:0}) + (" row" + (selLen === 1 ? "" : "s")))
-              const rStr = (rLen.toLocaleString(undefined, {maximumFractionDigits:0}) + (" row" + (rLen === 1 ? "" : "s")))
-              const noun = (selLen === 1 ? "just that one" : "them only")
-              if(!confirm("You've selected " + sStr + " but didn't toggle to export "+noun+", so you're about to export " + rStr + ". Continue?"))
-                  return
-          }
-          if(!rLen){
-              setTimeout( () => { this.endExportOpts() })
-              return alert("Please include some rows to export.")
-          }
-          let c = 0
-          let cols = []
-          const colLen = this.columns.length
-          for(c; c < colLen; c++)
-              cols.push(this.columns[c].column)
-          let title = "MyDataTable"
-          const fName = title + dt
-          if(format === "csv"){
-              cType = "text/csv"
-              data = this.whipToDelimForm(rows, cols, ",")
-              return this.downloadFileExp(data, cType, fName, format)
-          }
-          if(format === "tsv")
-              data = this.whipToDelimForm(rows, cols, '\t')
-          if(format === "psv")
-              data = this.whipToDelimForm(rows, cols, '|')
-          if(data && (format === "tsv" || format === "psv"))
-              return this.downloadFileExp(data, cType, fName, format)
-          if(format === "json"){
-              let n = 0
-              let i = 0
-              let useCols = []
-              const clen = cols.length
-              cType = "application/json"
-              for(n; n < clen; n++){
-                  if(!this.dataTableService.dataFilSrtTracker[cols[n]]["minimize"])
-                      useCols.push(cols[n])
-              }
-              const uLen = useCols.length
-              if(!uLen){
-                  setTimeout( () => { this.endExportOpts() })
-                  return alert("Please select or unhide some columns to export.")
-              }
-              if(uLen === clen){//nothing hidden just strinify
-                  data = JSON.stringify(rows)
-              } else {//we know we have objs by now
-                  let json = []
-                  for(i; i < rLen; i++){
-                      const row = rows[i]
-                      if(row && typeof row === "object"){
-                          let exp: any = {}
-                          for(const prop in row){
-                              if(useCols.indexOf(prop) > -1)
-                                  exp[prop] = row[prop]
-                          }
-                          json.push(exp)
-                      } else {
-                          json.push(row)
-                      }
-                  }
-                  data = JSON.stringify(json)
-              }
-              if(data)
-                  this.downloadFileExp(data, cType, fName, format)
-          }
-      }catch(e){ 
-        setTimeout( () => { this.endExportOpts() })
-      }
-  }
-
-  downloadFileExp(data: any, cType: string, fName: string, format: string) {
-      const blob = new Blob([data], {type: cType})
-      const url = URL.createObjectURL(blob)
-      const link = document.createElement("a");
-      link.setAttribute("href", url);
-      link.setAttribute("download", (fName + "." + format));
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link);
-      URL.revokeObjectURL(url)
-      setTimeout( () => { this.endExportOpts() })
-  }
-
-  endExportOpts() {
-    this.exporting = false;
-    this.optsOpen = false;
-    this.dataTableService.listenToCloseExportOpts = false
-  }
-
-  whipToDelimForm(rows: any[], cols: any[], delim: any) {
-      let text = ""
-      let i = 0; let n =0; let o = 0;
-      const len = rows.length
-      let useCols = []
-      const clen = cols.length
-      for(n; n < clen; n++){
-          if(!this.dataTableService.dataFilSrtTracker[cols[n]]["minimize"])
-              useCols.push(cols[n])
-      }
-      const ulen = useCols.length
-      for(o; o < ulen; o++)
-          text += (useCols[o].replace(/[,\|]/g, "") + (o < (ulen-1) ? delim : ""));//just remove commas in a col header
-      if(!text)
-          return alert("Please select or unhide some columns to export.")
-      text += '\n'
-      for(i; i < len; i++){
-          const row = rows[i]
-          if(typeof row === "object"){
-              let z = 0
-              for(const prop in row){
-                  if(this.dataTableService.dataFilSrtTracker[prop]["minimize"])
-                      continue
-                  const val: any = row[prop]
-                  if(val && typeof val === "string"){
-                      if((delim === "," && /,/g.test(val)) || (delim === "|" && /\|/g.test(val)))
-                          text += ('"' + val + '"' + (z < (ulen-1) ? delim : ""))
-                      else
-                          text += ((val || "null") + (z < (ulen-1) ? delim : ""))
-                  } else
-                      text += ((val || "null") + (z < (ulen-1) ? delim : ""))
-                  z += 1
-              }
-          } else {
-              if(row && typeof row === "string"){
-                  if((delim === "," && /,/g.test(row)) || (delim === "|" && /\|/g.test(row)))
-                      text += ('"' + row + '"')
-                  else
-                      text += (row || "null")
-              } else
-                  text += (row || "null")
-          }
-          if(i < (len-1))
-              text += '\n'
-      }
-      return text
-  }
-  //EXPORT
-
-}

package/src/lib/data-table/data-table-module/ngx-deebodata/ngx-deebodata.css

@@ -1,91 +0,0 @@
-:host{
-    --accent-color:rgb(50, 50, 50);
-    --grid-color:rgb(199, 199, 199);
-    --pad-left-base: 33px;
-    --row-num-width: 75px;
-    --reg-font-size: 17px
-}
-
-input[name=topLevelDataFilter]{
-    float: left;
-    padding: 7px 5px;
-    vertical-align: middle;
-    box-shadow: 0 0 1px 1px var(--grid-color);
-    -moz-box-shadow: 0 0 1px 1px var(--grid-color);
-    -webkit-box-shadow: 0 0 1px 1px var(--grid-color);
-}
-
-.deebo-dd-contain-div{
-    margin: 0 31px;
-}
-
-.btn-chart, .btn-clear-grp{
-    border-radius: 3px;
-}
-
-.btn-chart i{
-    font-size: 28px;
-    vertical-align: middle;
-    color: var(--accent-color);
-}
-
-.btn-chart:hover, .btn-clear-grp:hover{
-    background: #e9e9e9;
-    transition: background 0.5s ease;
-}
-
-.dt-checks{
-    margin-left: var(--row-num-width);
-}
-
-.row-numbers{
-    margin-top: 11px;
-    display: inline-block;
-    width: var(--row-num-width);
-}
-
-.row-num-header{
-    background: #e9e9e9;
-    box-sizing: border-box;
-    border-bottom: 1px solid var(--accent-color);
-    border-right: 1px solid var(--accent-color);
-    box-shadow:0 -1px 3px 1px var(--grid-color);
-    -moz-box-shadow:0 -1px 3px 1px var(--grid-color);
-    -webkit-box-shadow:0 -1px 3px 1px var(--grid-color)
-}
-
-.num-row{
-    white-space:nowrap;
-    box-sizing:border-box;
-    border-left: 1px solid var(--grid-color);
-    border-bottom: 1px solid var(--grid-color);
-}
-
-.inline-table{
-    display: inline-block;
-    width: calc(100% - var(--row-num-width));
-}
-
-.special-edit-container{
-    z-index: 5;
-    height: 0 !important;
-}
-
-.edit-input{
-    border: none;
-    font-size: 15px;
-    box-shadow:none;
-    position: absolute;
-    background: white;
-    -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;
-}