ngx-deebodata 0.1.3 → 0.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +37 -2
- package/fesm2022/ngx-deebodata.mjs +90 -49
- package/fesm2022/ngx-deebodata.mjs.map +1 -1
- package/package.json +4 -4
- package/types/ngx-deebodata.d.ts +20 -4
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { signal, Injectable, EventEmitter, ViewChild, Output, Input, Component, input, HostListener } from '@angular/core';
|
|
2
|
+
import { signal, Injectable, EventEmitter, ViewChild, Output, Input, Component, input, HostListener, ChangeDetectionStrategy } from '@angular/core';
|
|
3
3
|
import * as i4$1 from '@angular/forms';
|
|
4
4
|
import { FormsModule } from '@angular/forms';
|
|
5
5
|
import * as i4 from '@angular/common';
|
|
@@ -194,6 +194,21 @@ class CommonService {
|
|
|
194
194
|
}
|
|
195
195
|
return false;
|
|
196
196
|
}
|
|
197
|
+
isShiftKey(event) {
|
|
198
|
+
if (event) {
|
|
199
|
+
if (typeof event.key !== "undefined") {
|
|
200
|
+
return event.key === 'Shift';
|
|
201
|
+
}
|
|
202
|
+
else if (typeof event.keyIdentifier !== "undefined") {
|
|
203
|
+
return event.keyIdentifier === 'Shift';
|
|
204
|
+
}
|
|
205
|
+
else if (typeof event.keyCode !== "undefined") {
|
|
206
|
+
return event.keyCode === 16;
|
|
207
|
+
}
|
|
208
|
+
return false;
|
|
209
|
+
}
|
|
210
|
+
return false;
|
|
211
|
+
}
|
|
197
212
|
keyCanSearch(event) {
|
|
198
213
|
return (this.isSearchKey(event) ||
|
|
199
214
|
this.isBackKey(event) ||
|
|
@@ -376,6 +391,7 @@ class DataTableService {
|
|
|
376
391
|
autoScrollOnEdit = false;
|
|
377
392
|
listenToCloseExportOpts = false;
|
|
378
393
|
listenToCloseGroupByOpts = false;
|
|
394
|
+
shiftKeyDown = 1;
|
|
379
395
|
currGrouping = new Subject();
|
|
380
396
|
closeExportOpts = new Subject();
|
|
381
397
|
closeGroupByOpts = new Subject();
|
|
@@ -398,12 +414,17 @@ class DataTableService {
|
|
|
398
414
|
badStrings = ["null", "NULL", "Null", "undefined", "UNDEFINED", "Undefined"];
|
|
399
415
|
columnSymbols = [];
|
|
400
416
|
columnStyles = [];
|
|
417
|
+
columnValueColors = [];
|
|
401
418
|
pieGraphColors = [];
|
|
402
419
|
removePieCovers = false;
|
|
403
420
|
getColumnStyle(col) {
|
|
404
421
|
const foundCol = this.columnStyles.find(c => c.column === col)?.column;
|
|
405
422
|
return foundCol ? (" data-cell-" + foundCol + "-") : "";
|
|
406
423
|
}
|
|
424
|
+
getColValColor(column, value) {
|
|
425
|
+
return this.columnValueColors.filter(c => c.column === column)[0]?.
|
|
426
|
+
valueColors.find(vc => vc.value === value)?.color;
|
|
427
|
+
}
|
|
407
428
|
isLocalHost(andSet) {
|
|
408
429
|
const isLocal = (/4200/g.test(location.port) && /localhost/g.test(location.href));
|
|
409
430
|
if (andSet && isLocal)
|
|
@@ -460,11 +481,11 @@ class DataTableService {
|
|
|
460
481
|
}
|
|
461
482
|
return false;
|
|
462
483
|
}
|
|
463
|
-
scrollBodyForTabbing(
|
|
484
|
+
scrollBodyForTabbing(multBy) {
|
|
464
485
|
const dtb = document.getElementById("dataTableBody");
|
|
465
486
|
if (dtb) {
|
|
466
487
|
const scrlBy = parseInt(this.defltRHgt.replace(/[ ]?px/g, ""));
|
|
467
|
-
dtb.scrollBy(0, (
|
|
488
|
+
dtb.scrollBy(0, (multBy * scrlBy));
|
|
468
489
|
}
|
|
469
490
|
}
|
|
470
491
|
chartTopIsInView(column) {
|
|
@@ -1911,14 +1932,17 @@ class DataCellComponent {
|
|
|
1911
1932
|
btn.focus();
|
|
1912
1933
|
}
|
|
1913
1934
|
else {
|
|
1914
|
-
const nxtCell = this.cellElem.nativeElement?.
|
|
1935
|
+
const nxtCell = this.dataTableService.shiftKeyDown === 1 ? this.cellElem.nativeElement?.
|
|
1936
|
+
parentElement?.nextElementSibling?.firstElementChild : this.cellElem.nativeElement?.
|
|
1937
|
+
parentElement?.previousElementSibling?.firstElementChild;
|
|
1915
1938
|
if (nxtCell) {
|
|
1916
1939
|
nxtCell.focus();
|
|
1917
1940
|
}
|
|
1918
1941
|
else {
|
|
1919
1942
|
this.dataTableService.autoScrollOnEdit = true;
|
|
1920
|
-
this.dataTableService.scrollBodyForTabbing();
|
|
1921
|
-
const
|
|
1943
|
+
this.dataTableService.scrollBodyForTabbing(this.dataTableService.shiftKeyDown);
|
|
1944
|
+
const baseRow = parseInt(this.rowId.replace(/^dataTableRow/, ""));
|
|
1945
|
+
const nxtRowCell = document.querySelector("#dataTableRow" + (baseRow + (1 * this.dataTableService.shiftKeyDown)) + " .data-cell:not(.col-header-minimized)");
|
|
1922
1946
|
if (nxtRowCell)
|
|
1923
1947
|
nxtRowCell.focus();
|
|
1924
1948
|
else {
|
|
@@ -3208,7 +3232,7 @@ class PieGraphComponent {
|
|
|
3208
3232
|
this.rmNotes.push(rmNt);
|
|
3209
3233
|
continue;
|
|
3210
3234
|
}
|
|
3211
|
-
const color = colors[props.indexOf(prop)];
|
|
3235
|
+
const color = this.dataTableService.getColValColor(this.column, prop) || colors[props.indexOf(prop)];
|
|
3212
3236
|
data.push({ label: prop, value: counts[prop], color: color });
|
|
3213
3237
|
this.pieLbls.push({ text: this.common.sanitizeUi(prop).replace(/n_a/, "N/A"), background: color, percent: (strPct + "%") });
|
|
3214
3238
|
}
|
|
@@ -3286,6 +3310,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
|
|
|
3286
3310
|
class BarGraphComponent {
|
|
3287
3311
|
common;
|
|
3288
3312
|
dataTableService;
|
|
3313
|
+
_cd;
|
|
3289
3314
|
onWindowResize(e) {
|
|
3290
3315
|
this.handleStatChange(this.selStat(), true);
|
|
3291
3316
|
}
|
|
@@ -3294,7 +3319,6 @@ class BarGraphComponent {
|
|
|
3294
3319
|
xLblWidth = "";
|
|
3295
3320
|
xLabels = [];
|
|
3296
3321
|
maxBarWid = 90;
|
|
3297
|
-
buildingStat = false;
|
|
3298
3322
|
maxYVal = "0";
|
|
3299
3323
|
statData = [];
|
|
3300
3324
|
selStat = signal("avg", ...(ngDevMode ? [{ debugName: "selStat" }] : /* istanbul ignore next */ []));
|
|
@@ -3312,16 +3336,14 @@ class BarGraphComponent {
|
|
|
3312
3336
|
yAxis;
|
|
3313
3337
|
statOptsCont;
|
|
3314
3338
|
barContainer;
|
|
3315
|
-
constructor(common, dataTableService) {
|
|
3339
|
+
constructor(common, dataTableService, _cd) {
|
|
3316
3340
|
this.common = common;
|
|
3317
3341
|
this.dataTableService = dataTableService;
|
|
3342
|
+
this._cd = _cd;
|
|
3318
3343
|
}
|
|
3319
3344
|
ngOnInit() {
|
|
3320
3345
|
this.buildBarGraphWithTwoCols(this.selStat());
|
|
3321
3346
|
}
|
|
3322
|
-
ngAfterContentInit() {
|
|
3323
|
-
setTimeout(() => { this.sizeUpBgDims(); });
|
|
3324
|
-
}
|
|
3325
3347
|
sizeUpBgDims() {
|
|
3326
3348
|
const bgWid = this.innerGB.nativeElement.getBoundingClientRect().width;
|
|
3327
3349
|
const yWid = this.yAxis.nativeElement.getBoundingClientRect().width;
|
|
@@ -3394,7 +3416,6 @@ class BarGraphComponent {
|
|
|
3394
3416
|
this.xLabel.nativeElement.textContent = this.common.sanitizeUi(this.common.titleCase(strCol));
|
|
3395
3417
|
this.buildYAxisBGVals(max);
|
|
3396
3418
|
setTimeout(() => { this.buildBGBars(this.statData, max, sym); });
|
|
3397
|
-
setTimeout(() => { this.buildingStat = false; }, 500);
|
|
3398
3419
|
}
|
|
3399
3420
|
buildBGBars(data, max, sym) {
|
|
3400
3421
|
let i = 0;
|
|
@@ -3408,9 +3429,12 @@ class BarGraphComponent {
|
|
|
3408
3429
|
if (this.dataTableService.themeColor1 && whiteTxt.indexOf(this.dataTableService.themeColor1) < 0)
|
|
3409
3430
|
background = this.dataTableService.themeColor1;
|
|
3410
3431
|
const useIncr = Math.min(this.maxBarWid, (Math.floor((this.innerGB.nativeElement.getBoundingClientRect().width - offY) / this.xLabels.length)));
|
|
3432
|
+
const bgCols = this.column.split(this.dataTableService.bgSep);
|
|
3433
|
+
const strCol = bgCols[0];
|
|
3411
3434
|
for (i; i < len; i++) {
|
|
3412
3435
|
const item = data[i];
|
|
3413
3436
|
const bhgt = item["y"] / max;
|
|
3437
|
+
const ownCol = this.dataTableService.getColValColor(strCol, item["x"]);
|
|
3414
3438
|
const strVal = item["y"].toLocaleString(undefined, { maximumFractionDigits: 2 });
|
|
3415
3439
|
let symb4 = "";
|
|
3416
3440
|
let symaf = "";
|
|
@@ -3422,34 +3446,27 @@ class BarGraphComponent {
|
|
|
3422
3446
|
symaf = sym;
|
|
3423
3447
|
}
|
|
3424
3448
|
const fVal = item["x"] + ': ' + symb4 + strVal + symaf;
|
|
3425
|
-
const bv = { id: item["x"], left: ((i * useIncr) + "px"), heightVal: bhgt, height: "0px", fullValue: fVal, numValue: strVal, background: background };
|
|
3449
|
+
const bv = { id: item["x"], left: ((i * useIncr) + "px"), heightVal: bhgt, height: "0px", fullValue: fVal, numValue: strVal, background: (ownCol || background) };
|
|
3426
3450
|
this.barVals.push(bv);
|
|
3427
3451
|
}
|
|
3428
3452
|
this.handleBGBarHgts(data);
|
|
3429
3453
|
}
|
|
3430
3454
|
handleBGBarHgts(data) {
|
|
3431
3455
|
let i = 0;
|
|
3432
|
-
let show = false;
|
|
3433
3456
|
const len = data.length;
|
|
3434
3457
|
const ybds = this.yAxis.nativeElement.getBoundingClientRect();
|
|
3435
3458
|
const maxHgt = ybds.height;
|
|
3436
|
-
|
|
3437
|
-
const cBds = cont?.getBoundingClientRect();
|
|
3438
|
-
const insTop = document.getElementsByClassName("chart-contain-show")[0]?.scrollTop || 0;
|
|
3439
|
-
if (cBds && (cBds.bottom - (cBds.height / 2)) < (this.dataTableService.tblTop + insTop + this.dataTableService.dTblHeight))
|
|
3440
|
-
show = true;
|
|
3441
|
-
if (show) {
|
|
3459
|
+
setTimeout(() => {
|
|
3442
3460
|
for (i; i < len; i++) {
|
|
3443
3461
|
const item = data[i];
|
|
3444
3462
|
const xvalue = item["x"];
|
|
3445
3463
|
const bv = this.barVals.find(b => b.id === xvalue);
|
|
3446
|
-
if (bv)
|
|
3447
|
-
|
|
3448
|
-
bv.height = (Math.ceil(bv.heightVal * maxHgt) + "px");
|
|
3449
|
-
}, 250);
|
|
3450
|
-
}
|
|
3464
|
+
if (bv)
|
|
3465
|
+
bv.height = (Math.ceil(bv.heightVal * maxHgt) + "px");
|
|
3451
3466
|
}
|
|
3452
|
-
|
|
3467
|
+
this.sizeUpBgDims();
|
|
3468
|
+
this._cd.detectChanges();
|
|
3469
|
+
}, 100);
|
|
3453
3470
|
}
|
|
3454
3471
|
buildYAxisBGVals(max) {
|
|
3455
3472
|
let nts = [];
|
|
@@ -3478,18 +3495,17 @@ class BarGraphComponent {
|
|
|
3478
3495
|
handleStatChange(stat, resize) {
|
|
3479
3496
|
if (this.selStat() === stat && !resize)
|
|
3480
3497
|
return;
|
|
3481
|
-
this.buildingStat = true;
|
|
3482
3498
|
this.maxYVal = "0";
|
|
3483
3499
|
this.selStat.set(stat);
|
|
3484
3500
|
this.numTicks.set([]);
|
|
3485
3501
|
this.barVals = [];
|
|
3486
3502
|
this.xLabels = [];
|
|
3487
3503
|
this.statData = [];
|
|
3504
|
+
this._cd.detectChanges();
|
|
3488
3505
|
if (!resize)
|
|
3489
3506
|
this.title.emit(this.common.titleCase(stat) + " " + this.titleTrail);
|
|
3490
3507
|
setTimeout(() => {
|
|
3491
3508
|
this.buildBarGraphWithTwoCols(stat);
|
|
3492
|
-
setTimeout(() => { this.sizeUpBgDims(); });
|
|
3493
3509
|
});
|
|
3494
3510
|
}
|
|
3495
3511
|
findDataMedian(data, len) {
|
|
@@ -3540,13 +3556,13 @@ class BarGraphComponent {
|
|
|
3540
3556
|
lblMouseOut(el) {
|
|
3541
3557
|
el.classList.remove("lbl-show");
|
|
3542
3558
|
}
|
|
3543
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: BarGraphComponent, deps: [{ token: CommonService }, { token: DataTableService }], target: i0.ɵɵFactoryTarget.Component });
|
|
3544
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: BarGraphComponent, isStandalone: true, selector: "app-bar-graph-component", inputs: { column: "column", data: "data" }, outputs: { title: "title" }, host: { listeners: { "window:resize": "onWindowResize($event)" } }, viewQueries: [{ propertyName: "innerGB", first: true, predicate: ["innerGB"], descendants: true, static: true }, { propertyName: "xLabel", first: true, predicate: ["xLabel"], descendants: true, static: true }, { propertyName: "xValues", first: true, predicate: ["xValues"], descendants: true, static: true }, { propertyName: "yAxis", first: true, predicate: ["yAxis"], descendants: true, static: true }, { propertyName: "statOptsCont", first: true, predicate: ["statOptsCont"], descendants: true, static: true }, { propertyName: "barContainer", first: true, predicate: ["barContainer"], descendants: true, static: true }], ngImport: i0, template: "<div #statOptsCont class=\"center stat-opt-contain\">\r\n @for(stat of statOpts; track stat){\r\n <div [style.width]=\"statBtnWid\" class=\"inline-b center\">\r\n <button class=\"no-btn stat-opt-btn\" (click)=\"handleStatChange(stat)\"\r\n [class.stat-opt-btn-active]=\"selStat() === stat\">{{common.titleCase(stat)}}</button>\r\n </div>\r\n }\r\n</div>\r\n<div #innerGB class=\"inner-bg-contain\">\r\n <div #yAxis class=\"bar-graph-y-cols\" [style.height]=\"((bgDepVarHgt*(numYPlots-1))+17) + 'px'\">\r\n @for(num of numTicks(); track $index){\r\n <div class=\"bg-dep-var\" [class.invisible]=\"num && num === maxYVal\" [attr.data-number]=\"num\">{{(num === '0') ? '' : num}}</div>\r\n }\r\n </div><div #barContainer class=\"bar-graph-real-vals\">\r\n @for(bar of barVals; track bar){\r\n <div [ngStyle]=\"{'width': xLblWidth, 'left': bar.left}\" \r\n class=\"graph-actual-bar\" [attr.data-value]=\"bar.fullValue\">\r\n <div [ngStyle]=\"{'height': bar.height, 'background': bar.background}\"></div>\r\n </div>\r\n }\r\n </div>\r\n <div #xValues class=\"bar-graph-x-cols\">\r\n @for(lbl of xLabels; track lbl){\r\n <div class=\"bg-ind-var center\" [style.width]=\"xLblWidth\" (mouseenter)=\"lblMouseIn($event.target)\" (mouseleave)=\"lblMouseOut($event.target)\">\r\n {{lbl}}</div>\r\n }\r\n </div>\r\n</div>\r\n<div #xLabel class=\"bar-graph-x-label\"></div>", styles: [".inner-bg-contain{position:relative;box-sizing:border-box}.inner-bg-contain:before{top:50%;left:-48px;font-size:x-large;position:absolute;display:block;color:var(--grid-color);content:attr(data-yaxis);transform:rotate(-90deg)}.stat-opt-contain{white-space:nowrap;margin-bottom:27px}.stat-opt-btn{width:100%;padding-bottom:3px;box-sizing:border-box}.stat-opt-btn-active{font-weight:700;border-bottom:2px solid var(--grid-color)}.bar-graph-y-cols{z-index:5;margin-left:5px;overflow:visible;position:relative;vertical-align:top;box-sizing:border-box;display:inline-block;border-right:1px solid var(--grid-color)}.bar-graph-real-vals{position:relative}.bar-graph-x-cols{padding-top:11px;white-space:nowrap;overflow-x:visible;border-top:1px solid var(--grid-color)}.bg-dep-var{overflow:hidden;height:70px;width:100%;display:flex;padding:0 5px;font-size:14px;align-items:end;font-weight:500;justify-content:right;box-sizing:border-box}.bg-dep-var div{word-break:break-all;color:var(--accent-color)}.bg-dep-var:first-of-type{height:17px!important;position:relative;overflow:visible!important}.bg-dep-var:first-of-type:before{top:0;overflow:visible;position:absolute;content:attr(data-number);visibility:visible!important}.bg-dep-var:last-of-type{overflow:visible!important}.bg-dep-var:last-of-type:after{content:attr(data-number);margin-bottom:-7px}.graph-actual-bar{bottom:0;position:absolute;align-items:center;background:#fff}.graph-actual-bar div{height:0;width:80%;margin:0 auto;background:#afafaf;transition:height .3s ease-out}.graph-actual-bar:hover{z-index:10}.graph-actual-bar:hover:before{width:150px;display:block;font-weight:500;font-size:small;white-space:nowrap;background:#fff;padding:1px 2px 3px;content:attr(data-value);border-radius:3px}.bg-ind-var{font-size:small;font-weight:500;overflow:hidden;text-overflow:ellipsis;display:inline-block;color:var(--accent-color);transform:rotate(45deg)}.lbl-show{overflow:visible!important;transition:overflow .2s ease}.bar-graph-x-label{font-size:x-large;font-weight:500;padding-top:17px;text-align:center;overflow-x:hidden}\n", "@charset \"UTF-8\";@font-face{font-family:Roboto Condensed;src:url(https://d2ffvluimla00s.cloudfront.net/RobotoCondensed-VariableFont_wght.ttf) format(\"ttf\")}@font-face{font-family:Material Icons;font-style:normal;font-weight:400;src:url(https://d2ffvluimla00s.cloudfront.net/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format(\"woff2\")}.deebo-data-grid-section{font-family:Roboto Condensed,Arial,Helvetica,sans-serif}:host{--accent-color:rgb(50, 50, 50);--grid-color:rgb(199, 199, 199);--pad-left-base: 33px;--row-num-width: 75px;--reg-font-size: 17px }.relly{position:relative}.hide{display:none!important;max-height:0;max-width:0;top:0;left:0;opacity:0}.ovy{overflow:auto}.no-ovy-y{overflow-y:hidden!important}.pad-top-sm{padding-top:4px!important}.pad-top-ten{padding-top:10px!important}.pad-top-teen{padding-top:17px}.pad-top-thirty,.pad-top-trey{padding-top:33px}.pad-top-much{padding-top:75px}.o-visible{overflow:visible}.dontwrap{white-space:nowrap}.inline-b{display:inline-block}.inline{display:inline}.half-wid{width:50%;vertical-align:top;display:inline-block}.qtr-wid{width:25%;vertical-align:top;display:inline-block}.third-wid{width:33.3%;vertical-align:top;display:inline-block}.two-third-wid{width:66.6%;vertical-align:top;display:inline-block}.three-qtr-wid{width:75%;vertical-align:top;display:inline-block}.v-top{vertical-align:top!important}.v-mid{vertical-align:middle!important}.v-bot{vertical-align:bottom!important}.lg-text{font-size:larger}.xlg-text{font-size:x-large!important}.md-text{font-size:var(--reg-font-size)!important}.small-text{font-size:small}.tiny-text{font-size:x-small}.invisible{visibility:hidden}.flex-center{display:flex;justify-content:center;align-items:center}.flex-item{flex:1 1 auto}.o-x-hidden{overflow-x:hidden!important}.no-weight{font-weight:400!important}.semi-heavy{font-weight:500!important}.heavy{font-weight:700!important}.marauto{margin:0 auto}.center{text-align:center}.left{text-align:left}.right{text-align:right}.btn-reset{border:none;color:#fff;padding:7px 11px;background:maroon}.error-message{color:maroon;font-weight:500}.success{color:green;font-weight:500}.neutral{color:var(--accent-color)}input,select{border:none;padding:4px;border-radius:3px;box-sizing:border-box;font-family:Roboto Condensed,Arial,Helvetica,sans-serif;box-shadow:0 0 1px 1px #afafaf;-moz-box-shadow:0 0 1px 1px #afafaf;-webkit-box-shadow:0 0 1px 1px #afafaf}input[type=radio],input[type=checkbox]{cursor:pointer;box-shadow:none!important;-moz-box-shadow:none!important;-webkit-box-shadow:none!important}button{cursor:pointer}button:focus,input:focus,select:focus,textarea:focus,a:focus{outline-width:0}button:disabled,input:disabled,select:disabled{opacity:.5;cursor:not-allowed}.prevent{opacity:.5;cursor:not-allowed;pointer-events:none}.controls{text-align:right;padding:16px 11px 6px 1px;max-width:100%;clear:both;overflow-x:auto;white-space:nowrap}.controls button{font-size:var(--reg-font-size);margin-right:31px;vertical-align:middle}.controls button span{vertical-align:middle}.controls button:last-of-type{margin-right:0}.data-table{margin-top:11px;overflow:hidden;box-shadow:0 -1px 3px 1px var(--grid-color);-moz-box-shadow:0 -1px 3px 1px var(--grid-color);-webkit-box-shadow:0 -1px 3px 1px var(--grid-color)}.sel-rows-checked{color:#00a8f399!important}.save-hilite{padding:2px 4px;border-radius:3px;background:#ebebeb;box-shadow:0 0 3px 1px var(--accent-color);-moz-box-shadow:0 0px 3px 1px var(--accent-color);-webkit-box-shadow:0 0px 3px 1px var(--accent-color)}.btn-ctrl-sel-rows,.btn-export-or-print{border:none;padding:3px 4px;border-radius:3px;background:#f5f5f5;vertical-align:middle;box-shadow:0 0 2px 1px var(--accent-color);-moz-box-shadow:0 0 2px 1px var(--accent-color);-webkit-box-shadow:0 0 2px 1px var(--accent-color)}.deebo-dd-contain-div:last-of-type{margin-right:0!important}.btn-export{width:100%;text-transform:uppercase}.btn-export:hover{text-decoration:underline}.btn-ctrl-sel-rows:hover,.btn-export-or-print:hover{background:#ebebeb;box-shadow:0 0 6px 2px gray;-moz-box-shadow:0 0 6px 2px gray;-webkit-box-shadow:0 0 6px 2px gray}.btn-center-selected{padding:2px 4px;border-radius:5px;background:#f5f5f5;box-shadow:0 0 6px 2px gray;-moz-box-shadow:0 0 6px 2px gray;-webkit-box-shadow:0 0 6px 2px gray}.btn-ctrl-sel-rows .material-icons{font-size:18px;font-weight:600;vertical-align:middle}.btn-ctrl-sel-rows .material-icons:not(.error-message){color:var(--accent-color)}.data-table-headers{cursor:pointer;white-space:nowrap;border-bottom:1px solid var(--grid-color)}.data-table-row{white-space:nowrap}.data-table-row:hover,.data-table-row .col-item-freeze:hover{background:#f3f3f3}.data-row-selected{background:#d6d6d6!important}.table-working{opacity:.1;pointer-events:none}.select-row-check{left:9px;z-index:10;cursor:pointer;margin:0;position:absolute;padding:0!important}.gb-row-num{left:2px;z-index:10;cursor:pointer;margin:0;font-size:x-small;position:absolute;padding:0!important}.mock-html{width:50%;height:18px;margin:0 auto;border-radius:11px;background:var(--grid-color)}.abs-right{top:7px;right:7px;position:absolute}.has-symbol:after{content:attr(data-symbol);padding-left:3px}.has-symbol-b:before{content:attr(data-symbol);padding-right:3px}.data-table-row-no-data{font-size:xx-large;color:gray;font-weight:500;text-shadow:-1px -1px var(--accent-color)}.data-row-selected .col-item-freeze,.data-row-selected .data-cell,.data-row-selected:hover,.data-row-selected .col-item-freeze:hover,.data-row-selected .data-cell:hover{background:#d6d6d6!important}.data-table-headers .col-item-freeze:first-of-type{border-bottom:1px solid var(--grid-color)}.col-header{z-index:2;width:125px;overflow:auto;cursor:grab;padding:7px 3px;text-align:center;position:relative;box-sizing:border-box;display:inline-block;vertical-align:top;white-space:pre-wrap;word-wrap:break-word;background:#fafafa;border-right:1px solid var(--grid-color)}.col-header button,.col-header span,.col-header select{cursor:pointer;vertical-align:middle}.col-header input{vertical-align:middle}.col-header-img-container{overflow-y:hidden;text-align:center;display:inline-block;vertical-align:middle;background-size:cover;background-position:center;background-repeat:no-repeat}.col-header-minimized{width:0!important;height:0!important;padding:0!important;overflow:hidden!important;border-bottom:none!important;border-right:none!important;transition:width .3s ease}.btn-maximize-col{border:none;border-radius:5px;background:#f5f5f5;box-shadow:0 0 3px 2px gray;font-size:var(--reg-font-size);margin-right:27px;padding:4px}.no-btn{border:none;background:none}.col-item-freeze{left:0;z-index:3;position:sticky;background:#fff;box-shadow:2px 0 3px 0 var(--grid-color);-moz-box-shadow:2px 0px 3px 0px var(--grid-color);-webkit-box-shadow:2px 0px 3px 0px var(--grid-color)}.col-header input,.select-filter{width:40%;margin:11px 0 1px}.sel-fil-container{z-index:5}.edit-input-option-cont{left:0;right:0}.edit-input-opt button{width:100%;font-size:15px;padding:11px 0 11px 17px;text-align:left!important}.selfil-opt-contain,.edit-input-option-cont{overflow:auto;max-height:240px;border-radius:5px;position:absolute;background:#fff;box-shadow:0 1px 3px 1px var(--grid-color);-moz-box-shadow:0 1px 3px 1px var(--grid-color);-webkit-box-shadow:0 1px 3px 1px var(--grid-color)}.selfil-div,.edit-input-opt{cursor:pointer;text-align:left;border-bottom:1px solid var(--grid-color)}.selfil-div:hover,.edit-input-opt:hover{background:#ebebeb}.selfil-div:last-of-type,.edit-input-opt:last-of-type{border-bottom:none}.selfil-div label{width:calc(100% - 22px);font-size:15px;cursor:pointer;padding:11px;display:inline-block}.selfil-div label input[type=checkbox]{margin-right:11px;vertical-align:middle}.select-filter-comparator{width:36px;z-index:3;opacity:0;position:relative;margin:11px 0 1px 15px}.btn-fil-comp{top:2px;left:-36px;border:none;position:absolute;background:#fafafa}.btn-fil-comp i{color:var(--accent-color)}@media screen and (min-width:960px){.col-header input,.select-filter,.select-filter-comparator{margin-top:7px;margin-bottom:1px}}.data-cell{width:125px;padding:11px 6px 11px 17px;overflow:auto;font-size:15px;word-wrap:break-word;white-space:pre-line;vertical-align:top;box-sizing:border-box;display:inline-flex;align-items:center;border-right:1px solid var(--grid-color);border-bottom:1px solid var(--grid-color)}input.edit-input{border-radius:0}.data-cell:focus,input.edit-input:focus{outline:1px solid #00a8f3}.dragger-cell-focused{background:#00a8f333;border-left:1px solid #00a8f3;border-right:1px solid #00a8f3!important}.focused-cell-dragger{width:9px;height:9px;cursor:crosshair;position:absolute;background:#00a8f3;box-shadow:0 0 1px 1px var(--accent-color);-moz-box-shadow:0 0 1px 1px var(--accent-color);-webkit-box-shadow:0 0 1px 1px var(--accent-color)}.holding-check{padding-left:44px}.data-cell-riiight{padding:11px 17px 11px 6px;justify-content:right}.data-cell-ceeenter{padding:11px 6px;justify-content:center!important}.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-min-col{cursor:pointer;top:0;right:2px;font-size:20px;border:none;background:none;position:absolute;padding:0 2px 5px 0;color:var(--accent-color)}.btn-min-col-hide{z-index:0;visibility:hidden;pointer-events:none}.btn-freeze-col{float:left;border:none;cursor:pointer;background:none}.btn-freeze-col .material-icons{font-size:16px;color:var(--accent-color)}.hidden-cols{max-width:100%;overflow-x:auto;clear:both;white-space:nowrap;padding:17px 15px 5px 4px}.hidden-cols button:first-of-type:before{content:\"Hidden Columns\";font-size:12px;font-weight:600;padding-right:11px;vertical-align:middle}.col-header span{word-wrap:break-word;vertical-align:middle;font-size:var(--reg-font-size)}.o-ins-div span,.o-ins-div i{vertical-align:middle;font-size:16px}.aux-chip{text-align:center;padding-bottom:33px;word-wrap:break-word;white-space:pre-wrap}.insights{padding:17px 15px}.insight-field{min-height:100px;padding:21px 0;font-size:large;white-space:pre-wrap;word-wrap:break-word;border-bottom:1px solid lightgray}@media screen and (max-width:760px){.insight-field:first-of-type{padding-top:7px}}@media screen and (min-width:760px){.insight-field-row{border-bottom:1px solid lightgray}.insight-field,.aux-chip{width:50%;vertical-align:top;display:inline-block;border-bottom:none}}@media screen and (min-width:1024px){.insight-field,.aux-chip{width:33%}}.chart-label-cont{padding-top:10px;text-align:center}.pie-piece-label{padding-top:5px;margin-right:27px;display:inline-block}.pie-piece-label-sq{width:11px;height:11px;margin:0 0 0 2px;display:inline-block;vertical-align:middle}.pie-piece-label span{font-size:small}.pie-piece-label span:before{font-size:smaller;padding-right:4px;font-weight:600;content:attr(data-percent)}.pie-layover{border-radius:50%;background:#fff;position:absolute;padding:5px!important;display:flex;font-size:17px;align-items:center;overflow:hidden;box-sizing:border-box;justify-content:center;color:var(--accent-color)}.pie-layover div{font-weight:500;padding:0!important}.ins-even-dist-ct{font-size:24px;font-weight:500}.line-graph-container{padding:11px 0 33px 7px!important;box-sizing:border-box;margin-left:11px}.lg-title-cont{padding:0!important;text-align:center;margin:17px 11px}.lg-n-marker-cont{width:60px;position:relative;padding:0!important;box-sizing:border-box;display:inline-block;vertical-align:top}.lg-n-marker-cont:before{top:45%;left:-37px;display:block;position:absolute;white-space:nowrap;color:var(--grid-color);content:attr(data-column);transform:rotate(-90deg)}.lg-n-marker,.lg-n-marker-h{padding:0 11px 0 0!important;font-size:small;position:relative;text-align:right;white-space:nowrap;box-sizing:border-box}.line-graph{width:calc(92% - 60px);position:relative;box-sizing:border-box;display:inline-block;vertical-align:top;padding:0!important;border-left:1px solid var(--accent-color);border-bottom:1px solid var(--accent-color)}.lg-lbl-x{left:0;right:0;bottom:-45px;font-size:small;font-weight:500;text-align:center;position:absolute;padding:0!important}.btn-line-graph-opts{margin:0;padding:4px;background:none;border-top:1px solid var(--accent-color);border-left:1px solid var(--accent-color);border-bottom:1px solid var(--accent-color)}.sp-line-graph-title{margin-top:7px;font-size:large;text-decoration:underline}.lg-dt-marker,.lg-dt-marker-h,.vd-n-marker,.vd-n-marker-h{bottom:-22px;font-size:small;position:absolute;text-align:center;padding:0!important;display:inline-block;box-sizing:border-box}.lg-dt-marker-h,.vd-n-marker-h{visibility:hidden}.lg-dt-marker.visible-marker{margin-left:21px}.lg-n-marker-h{height:0;visibility:hidden}.visible-marker{z-index:2;font-weight:600;background:#fff;height:unset!important;padding:1px 2px!important;visibility:visible!important;box-shadow:0 0 2px 1px #afafaf;-moz-box-shadow:0 0 2px 1px #afafaf;-webkit-box-shadow:0 0 2px 1px #afafaf}.visible-marker:before{font-weight:600}.lg-dt-marker:before{top:-15px;left:0;content:\"|\";position:absolute}.vd-n-marker:before{top:-15px;left:50%;content:\"|\";left:calc(50% - 2px);position:absolute}.lg-n-marker:before{top:-4px;right:-3px;content:\"-\";font-weight:600;font-size:large;position:absolute;background:#fff}.btn-line-graph-opts:hover{background:#d6d6d6;transition:background .3s ease}.btn-line-graph-opts:last-of-type{border-right:1px solid var(--accent-color)}.btn-lg-sel{color:#fff!important;background:var(--accent-color);box-shadow:0 0 2px 1px #afafaf;-moz-box-shadow:0 0 2px 1px #afafaf;-webkit-box-shadow:0 0 2px 1px #afafaf}.btn-lg-sel:hover{background:var(--accent-color)}.lg-plot{height:8px;width:8px;opacity:.3;cursor:pointer;border-radius:50%;position:absolute;padding:0!important;background:var(--accent-color)}.lg-plot:hover{z-index:100;opacity:1!important}.lg-plot:hover:after{padding:3px;display:inline-block;font-size:small;border-radius:5px;margin:0 0 0 25px;font-weight:700;content:attr(data-number);background:#fff!important;box-shadow:0 0 2px 1px #afafaf;-moz-box-shadow:0 0 2px 1px #afafaf;-webkit-box-shadow:0 0 2px 1px #afafaf}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:\"liga\";-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
3559
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: BarGraphComponent, deps: [{ token: CommonService }, { token: DataTableService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
3560
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: BarGraphComponent, isStandalone: true, selector: "app-bar-graph-component", inputs: { column: "column", data: "data" }, outputs: { title: "title" }, host: { listeners: { "window:resize": "onWindowResize($event)" } }, viewQueries: [{ propertyName: "innerGB", first: true, predicate: ["innerGB"], descendants: true, static: true }, { propertyName: "xLabel", first: true, predicate: ["xLabel"], descendants: true, static: true }, { propertyName: "xValues", first: true, predicate: ["xValues"], descendants: true, static: true }, { propertyName: "yAxis", first: true, predicate: ["yAxis"], descendants: true, static: true }, { propertyName: "statOptsCont", first: true, predicate: ["statOptsCont"], descendants: true, static: true }, { propertyName: "barContainer", first: true, predicate: ["barContainer"], descendants: true, static: true }], ngImport: i0, template: "<div #statOptsCont class=\"center stat-opt-contain\">\r\n @for(stat of statOpts; track stat){\r\n <div [style.width]=\"statBtnWid\" class=\"inline-b center\">\r\n <button class=\"no-btn stat-opt-btn\" (click)=\"handleStatChange(stat)\"\r\n [class.stat-opt-btn-active]=\"selStat() === stat\">{{common.titleCase(stat)}}</button>\r\n </div>\r\n }\r\n</div>\r\n<div #innerGB class=\"inner-bg-contain\">\r\n <div #yAxis class=\"bar-graph-y-cols\" [style.height]=\"((bgDepVarHgt*(numYPlots-1))+17) + 'px'\">\r\n @for(num of numTicks(); track $index){\r\n <div class=\"bg-dep-var\" [class.invisible]=\"num && num === maxYVal\" [attr.data-number]=\"num\">{{(num === '0') ? '' : num}}</div>\r\n }\r\n </div><div #barContainer class=\"bar-graph-real-vals\">\r\n @for(bar of barVals; track bar.id){\r\n <div [ngStyle]=\"{'width': xLblWidth, 'left': bar.left}\" \r\n class=\"graph-actual-bar\" [attr.data-value]=\"bar.fullValue\">\r\n <div [ngStyle]=\"{'height': bar.height, 'background': bar.background}\"></div>\r\n </div>\r\n }\r\n </div>\r\n <div #xValues class=\"bar-graph-x-cols\">\r\n @for(lbl of xLabels; track lbl){\r\n <div class=\"bg-ind-var center\" [style.width]=\"xLblWidth\" (mouseenter)=\"lblMouseIn($event.target)\" (mouseleave)=\"lblMouseOut($event.target)\">\r\n {{lbl}}</div>\r\n }\r\n </div>\r\n</div>\r\n<div #xLabel class=\"bar-graph-x-label\"></div>", styles: [".inner-bg-contain{position:relative;box-sizing:border-box}.inner-bg-contain:before{top:50%;left:-48px;font-size:x-large;position:absolute;display:block;color:var(--grid-color);content:attr(data-yaxis);transform:rotate(-90deg)}.stat-opt-contain{white-space:nowrap;margin-bottom:27px}.stat-opt-btn{width:100%;padding-bottom:3px;box-sizing:border-box}.stat-opt-btn-active{font-weight:700;border-bottom:2px solid var(--grid-color)}.bar-graph-y-cols{z-index:5;margin-left:5px;overflow:visible;position:relative;vertical-align:top;box-sizing:border-box;display:inline-block;border-right:1px solid var(--grid-color)}.bar-graph-real-vals{position:relative}.bar-graph-x-cols{padding-top:11px;white-space:nowrap;overflow-x:visible;border-top:1px solid var(--grid-color)}.bg-dep-var{overflow:hidden;height:70px;width:100%;display:flex;padding:0 5px;font-size:14px;align-items:end;font-weight:500;justify-content:right;box-sizing:border-box}.bg-dep-var div{word-break:break-all;color:var(--accent-color)}.bg-dep-var:first-of-type{height:17px!important;position:relative;overflow:visible!important}.bg-dep-var:first-of-type:before{top:0;overflow:visible;position:absolute;content:attr(data-number);visibility:visible!important}.bg-dep-var:last-of-type{overflow:visible!important}.bg-dep-var:last-of-type:after{content:attr(data-number);margin-bottom:-7px}.graph-actual-bar{bottom:0;position:absolute;align-items:center;background:#fff}.graph-actual-bar div{height:0;width:80%;margin:0 auto;background:#afafaf;transition:height .3s ease-out}.graph-actual-bar:hover{z-index:10}.graph-actual-bar:hover:before{width:150px;display:block;font-weight:500;font-size:small;white-space:nowrap;background:#fff;padding:1px 2px 3px;content:attr(data-value);border-radius:3px}.bg-ind-var{font-size:small;font-weight:500;overflow:hidden;text-overflow:ellipsis;display:inline-block;color:var(--accent-color);transform:rotate(45deg)}.lbl-show{overflow:visible!important;transition:overflow .2s ease}.bar-graph-x-label{font-size:x-large;font-weight:500;padding-top:17px;text-align:center;overflow-x:hidden}\n", "@charset \"UTF-8\";@font-face{font-family:Roboto Condensed;src:url(https://d2ffvluimla00s.cloudfront.net/RobotoCondensed-VariableFont_wght.ttf) format(\"ttf\")}@font-face{font-family:Material Icons;font-style:normal;font-weight:400;src:url(https://d2ffvluimla00s.cloudfront.net/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format(\"woff2\")}.deebo-data-grid-section{font-family:Roboto Condensed,Arial,Helvetica,sans-serif}:host{--accent-color:rgb(50, 50, 50);--grid-color:rgb(199, 199, 199);--pad-left-base: 33px;--row-num-width: 75px;--reg-font-size: 17px }.relly{position:relative}.hide{display:none!important;max-height:0;max-width:0;top:0;left:0;opacity:0}.ovy{overflow:auto}.no-ovy-y{overflow-y:hidden!important}.pad-top-sm{padding-top:4px!important}.pad-top-ten{padding-top:10px!important}.pad-top-teen{padding-top:17px}.pad-top-thirty,.pad-top-trey{padding-top:33px}.pad-top-much{padding-top:75px}.o-visible{overflow:visible}.dontwrap{white-space:nowrap}.inline-b{display:inline-block}.inline{display:inline}.half-wid{width:50%;vertical-align:top;display:inline-block}.qtr-wid{width:25%;vertical-align:top;display:inline-block}.third-wid{width:33.3%;vertical-align:top;display:inline-block}.two-third-wid{width:66.6%;vertical-align:top;display:inline-block}.three-qtr-wid{width:75%;vertical-align:top;display:inline-block}.v-top{vertical-align:top!important}.v-mid{vertical-align:middle!important}.v-bot{vertical-align:bottom!important}.lg-text{font-size:larger}.xlg-text{font-size:x-large!important}.md-text{font-size:var(--reg-font-size)!important}.small-text{font-size:small}.tiny-text{font-size:x-small}.invisible{visibility:hidden}.flex-center{display:flex;justify-content:center;align-items:center}.flex-item{flex:1 1 auto}.o-x-hidden{overflow-x:hidden!important}.no-weight{font-weight:400!important}.semi-heavy{font-weight:500!important}.heavy{font-weight:700!important}.marauto{margin:0 auto}.center{text-align:center}.left{text-align:left}.right{text-align:right}.btn-reset{border:none;color:#fff;padding:7px 11px;background:maroon}.error-message{color:maroon;font-weight:500}.success{color:green;font-weight:500}.neutral{color:var(--accent-color)}input,select{border:none;padding:4px;border-radius:3px;box-sizing:border-box;font-family:Roboto Condensed,Arial,Helvetica,sans-serif;box-shadow:0 0 1px 1px #afafaf;-moz-box-shadow:0 0 1px 1px #afafaf;-webkit-box-shadow:0 0 1px 1px #afafaf}input[type=radio],input[type=checkbox]{cursor:pointer;box-shadow:none!important;-moz-box-shadow:none!important;-webkit-box-shadow:none!important}button{cursor:pointer}button:focus,input:focus,select:focus,textarea:focus,a:focus{outline-width:0}button:disabled,input:disabled,select:disabled{opacity:.5;cursor:not-allowed}.prevent{opacity:.5;cursor:not-allowed;pointer-events:none}.controls{text-align:right;padding:16px 11px 6px 1px;max-width:100%;clear:both;overflow-x:auto;white-space:nowrap}.controls button{font-size:var(--reg-font-size);margin-right:31px;vertical-align:middle}.controls button span{vertical-align:middle}.controls button:last-of-type{margin-right:0}.data-table{margin-top:11px;overflow:hidden;box-shadow:0 -1px 3px 1px var(--grid-color);-moz-box-shadow:0 -1px 3px 1px var(--grid-color);-webkit-box-shadow:0 -1px 3px 1px var(--grid-color)}.sel-rows-checked{color:#00a8f399!important}.save-hilite{padding:2px 4px;border-radius:3px;background:#ebebeb;box-shadow:0 0 3px 1px var(--accent-color);-moz-box-shadow:0 0px 3px 1px var(--accent-color);-webkit-box-shadow:0 0px 3px 1px var(--accent-color)}.btn-ctrl-sel-rows,.btn-export-or-print{border:none;padding:3px 4px;border-radius:3px;background:#f5f5f5;vertical-align:middle;box-shadow:0 0 2px 1px var(--accent-color);-moz-box-shadow:0 0 2px 1px var(--accent-color);-webkit-box-shadow:0 0 2px 1px var(--accent-color)}.deebo-dd-contain-div:last-of-type{margin-right:0!important}.btn-export{width:100%;text-transform:uppercase}.btn-export:hover{text-decoration:underline}.btn-ctrl-sel-rows:hover,.btn-export-or-print:hover{background:#ebebeb;box-shadow:0 0 6px 2px gray;-moz-box-shadow:0 0 6px 2px gray;-webkit-box-shadow:0 0 6px 2px gray}.btn-center-selected{padding:2px 4px;border-radius:5px;background:#f5f5f5;box-shadow:0 0 6px 2px gray;-moz-box-shadow:0 0 6px 2px gray;-webkit-box-shadow:0 0 6px 2px gray}.btn-ctrl-sel-rows .material-icons{font-size:18px;font-weight:600;vertical-align:middle}.btn-ctrl-sel-rows .material-icons:not(.error-message){color:var(--accent-color)}.data-table-headers{cursor:pointer;white-space:nowrap;border-bottom:1px solid var(--grid-color)}.data-table-row{white-space:nowrap}.data-table-row:hover,.data-table-row .col-item-freeze:hover{background:#f3f3f3}.data-row-selected{background:#d6d6d6!important}.table-working{opacity:.1;pointer-events:none}.select-row-check{left:9px;z-index:10;cursor:pointer;margin:0;position:absolute;padding:0!important}.gb-row-num{left:2px;z-index:10;cursor:pointer;margin:0;font-size:x-small;position:absolute;padding:0!important}.mock-html{width:50%;height:18px;margin:0 auto;border-radius:11px;background:var(--grid-color)}.abs-right{top:7px;right:7px;position:absolute}.has-symbol:after{content:attr(data-symbol);padding-left:3px}.has-symbol-b:before{content:attr(data-symbol);padding-right:3px}.data-table-row-no-data{font-size:xx-large;color:gray;font-weight:500;text-shadow:-1px -1px var(--accent-color)}.data-row-selected .col-item-freeze,.data-row-selected .data-cell,.data-row-selected:hover,.data-row-selected .col-item-freeze:hover,.data-row-selected .data-cell:hover{background:#d6d6d6!important}.data-table-headers .col-item-freeze:first-of-type{border-bottom:1px solid var(--grid-color)}.col-header{z-index:2;width:125px;overflow:auto;cursor:grab;padding:7px 3px;text-align:center;position:relative;box-sizing:border-box;display:inline-block;vertical-align:top;white-space:pre-wrap;word-wrap:break-word;background:#fafafa;border-right:1px solid var(--grid-color)}.col-header button,.col-header span,.col-header select{cursor:pointer;vertical-align:middle}.col-header input{vertical-align:middle}.col-header-img-container{overflow-y:hidden;text-align:center;display:inline-block;vertical-align:middle;background-size:cover;background-position:center;background-repeat:no-repeat}.col-header-minimized{width:0!important;height:0!important;padding:0!important;overflow:hidden!important;border-bottom:none!important;border-right:none!important;transition:width .3s ease}.btn-maximize-col{border:none;border-radius:5px;background:#f5f5f5;box-shadow:0 0 3px 2px gray;font-size:var(--reg-font-size);margin-right:27px;padding:4px}.no-btn{border:none;background:none}.col-item-freeze{left:0;z-index:3;position:sticky;background:#fff;box-shadow:2px 0 3px 0 var(--grid-color);-moz-box-shadow:2px 0px 3px 0px var(--grid-color);-webkit-box-shadow:2px 0px 3px 0px var(--grid-color)}.col-header input,.select-filter{width:40%;margin:11px 0 1px}.sel-fil-container{z-index:5}.edit-input-option-cont{left:0;right:0}.edit-input-opt button{width:100%;font-size:15px;padding:11px 0 11px 17px;text-align:left!important}.selfil-opt-contain,.edit-input-option-cont{overflow:auto;max-height:240px;border-radius:5px;position:absolute;background:#fff;box-shadow:0 1px 3px 1px var(--grid-color);-moz-box-shadow:0 1px 3px 1px var(--grid-color);-webkit-box-shadow:0 1px 3px 1px var(--grid-color)}.selfil-div,.edit-input-opt{cursor:pointer;text-align:left;border-bottom:1px solid var(--grid-color)}.selfil-div:hover,.edit-input-opt:hover{background:#ebebeb}.selfil-div:last-of-type,.edit-input-opt:last-of-type{border-bottom:none}.selfil-div label{width:calc(100% - 22px);font-size:15px;cursor:pointer;padding:11px;display:inline-block}.selfil-div label input[type=checkbox]{margin-right:11px;vertical-align:middle}.select-filter-comparator{width:36px;z-index:3;opacity:0;position:relative;margin:11px 0 1px 15px}.btn-fil-comp{top:2px;left:-36px;border:none;position:absolute;background:#fafafa}.btn-fil-comp i{color:var(--accent-color)}@media screen and (min-width:960px){.col-header input,.select-filter,.select-filter-comparator{margin-top:7px;margin-bottom:1px}}.data-cell{width:125px;padding:11px 6px 11px 17px;overflow:auto;font-size:15px;word-wrap:break-word;white-space:pre-line;vertical-align:top;box-sizing:border-box;display:inline-flex;align-items:center;border-right:1px solid var(--grid-color);border-bottom:1px solid var(--grid-color)}input.edit-input{border-radius:0}.data-cell:focus,input.edit-input:focus{outline:1px solid #00a8f3}.dragger-cell-focused{background:#00a8f333;border-left:1px solid #00a8f3;border-right:1px solid #00a8f3!important}.focused-cell-dragger{width:9px;height:9px;cursor:crosshair;position:absolute;background:#00a8f3;box-shadow:0 0 1px 1px var(--accent-color);-moz-box-shadow:0 0 1px 1px var(--accent-color);-webkit-box-shadow:0 0 1px 1px var(--accent-color)}.holding-check{padding-left:44px}.data-cell-riiight{padding:11px 17px 11px 6px;justify-content:right}.data-cell-ceeenter{padding:11px 6px;justify-content:center!important}.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-min-col{cursor:pointer;top:0;right:2px;font-size:20px;border:none;background:none;position:absolute;padding:0 2px 5px 0;color:var(--accent-color)}.btn-min-col-hide{z-index:0;visibility:hidden;pointer-events:none}.btn-freeze-col{float:left;border:none;cursor:pointer;background:none}.btn-freeze-col .material-icons{font-size:16px;color:var(--accent-color)}.hidden-cols{max-width:100%;overflow-x:auto;clear:both;white-space:nowrap;padding:17px 15px 5px 4px}.hidden-cols button:first-of-type:before{content:\"Hidden Columns\";font-size:12px;font-weight:600;padding-right:11px;vertical-align:middle}.col-header span{word-wrap:break-word;vertical-align:middle;font-size:var(--reg-font-size)}.o-ins-div span,.o-ins-div i{vertical-align:middle;font-size:16px}.aux-chip{text-align:center;padding-bottom:33px;word-wrap:break-word;white-space:pre-wrap}.insights{padding:17px 15px}.insight-field{min-height:100px;padding:21px 0;font-size:large;white-space:pre-wrap;word-wrap:break-word;border-bottom:1px solid lightgray}@media screen and (max-width:760px){.insight-field:first-of-type{padding-top:7px}}@media screen and (min-width:760px){.insight-field-row{border-bottom:1px solid lightgray}.insight-field,.aux-chip{width:50%;vertical-align:top;display:inline-block;border-bottom:none}}@media screen and (min-width:1024px){.insight-field,.aux-chip{width:33%}}.chart-label-cont{padding-top:10px;text-align:center}.pie-piece-label{padding-top:5px;margin-right:27px;display:inline-block}.pie-piece-label-sq{width:11px;height:11px;margin:0 0 0 2px;display:inline-block;vertical-align:middle}.pie-piece-label span{font-size:small}.pie-piece-label span:before{font-size:smaller;padding-right:4px;font-weight:600;content:attr(data-percent)}.pie-layover{border-radius:50%;background:#fff;position:absolute;padding:5px!important;display:flex;font-size:17px;align-items:center;overflow:hidden;box-sizing:border-box;justify-content:center;color:var(--accent-color)}.pie-layover div{font-weight:500;padding:0!important}.ins-even-dist-ct{font-size:24px;font-weight:500}.line-graph-container{padding:11px 0 33px 7px!important;box-sizing:border-box;margin-left:11px}.lg-title-cont{padding:0!important;text-align:center;margin:17px 11px}.lg-n-marker-cont{width:60px;position:relative;padding:0!important;box-sizing:border-box;display:inline-block;vertical-align:top}.lg-n-marker-cont:before{top:45%;left:-37px;display:block;position:absolute;white-space:nowrap;color:var(--grid-color);content:attr(data-column);transform:rotate(-90deg)}.lg-n-marker,.lg-n-marker-h{padding:0 11px 0 0!important;font-size:small;position:relative;text-align:right;white-space:nowrap;box-sizing:border-box}.line-graph{width:calc(92% - 60px);position:relative;box-sizing:border-box;display:inline-block;vertical-align:top;padding:0!important;border-left:1px solid var(--accent-color);border-bottom:1px solid var(--accent-color)}.lg-lbl-x{left:0;right:0;bottom:-45px;font-size:small;font-weight:500;text-align:center;position:absolute;padding:0!important}.btn-line-graph-opts{margin:0;padding:4px;background:none;border-top:1px solid var(--accent-color);border-left:1px solid var(--accent-color);border-bottom:1px solid var(--accent-color)}.sp-line-graph-title{margin-top:7px;font-size:large;text-decoration:underline}.lg-dt-marker,.lg-dt-marker-h,.vd-n-marker,.vd-n-marker-h{bottom:-22px;font-size:small;position:absolute;text-align:center;padding:0!important;display:inline-block;box-sizing:border-box}.lg-dt-marker-h,.vd-n-marker-h{visibility:hidden}.lg-dt-marker.visible-marker{margin-left:21px}.lg-n-marker-h{height:0;visibility:hidden}.visible-marker{z-index:2;font-weight:600;background:#fff;height:unset!important;padding:1px 2px!important;visibility:visible!important;box-shadow:0 0 2px 1px #afafaf;-moz-box-shadow:0 0 2px 1px #afafaf;-webkit-box-shadow:0 0 2px 1px #afafaf}.visible-marker:before{font-weight:600}.lg-dt-marker:before{top:-15px;left:0;content:\"|\";position:absolute}.vd-n-marker:before{top:-15px;left:50%;content:\"|\";left:calc(50% - 2px);position:absolute}.lg-n-marker:before{top:-4px;right:-3px;content:\"-\";font-weight:600;font-size:large;position:absolute;background:#fff}.btn-line-graph-opts:hover{background:#d6d6d6;transition:background .3s ease}.btn-line-graph-opts:last-of-type{border-right:1px solid var(--accent-color)}.btn-lg-sel{color:#fff!important;background:var(--accent-color);box-shadow:0 0 2px 1px #afafaf;-moz-box-shadow:0 0 2px 1px #afafaf;-webkit-box-shadow:0 0 2px 1px #afafaf}.btn-lg-sel:hover{background:var(--accent-color)}.lg-plot{height:8px;width:8px;opacity:.3;cursor:pointer;border-radius:50%;position:absolute;padding:0!important;background:var(--accent-color)}.lg-plot:hover{z-index:100;opacity:1!important}.lg-plot:hover:after{padding:3px;display:inline-block;font-size:small;border-radius:5px;margin:0 0 0 25px;font-weight:700;content:attr(data-number);background:#fff!important;box-shadow:0 0 2px 1px #afafaf;-moz-box-shadow:0 0 2px 1px #afafaf;-webkit-box-shadow:0 0 2px 1px #afafaf}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:\"liga\";-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3545
3561
|
}
|
|
3546
3562
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: BarGraphComponent, decorators: [{
|
|
3547
3563
|
type: Component,
|
|
3548
|
-
args: [{ selector: 'app-bar-graph-component', imports: [CommonModule], template: "<div #statOptsCont class=\"center stat-opt-contain\">\r\n @for(stat of statOpts; track stat){\r\n <div [style.width]=\"statBtnWid\" class=\"inline-b center\">\r\n <button class=\"no-btn stat-opt-btn\" (click)=\"handleStatChange(stat)\"\r\n [class.stat-opt-btn-active]=\"selStat() === stat\">{{common.titleCase(stat)}}</button>\r\n </div>\r\n }\r\n</div>\r\n<div #innerGB class=\"inner-bg-contain\">\r\n <div #yAxis class=\"bar-graph-y-cols\" [style.height]=\"((bgDepVarHgt*(numYPlots-1))+17) + 'px'\">\r\n @for(num of numTicks(); track $index){\r\n <div class=\"bg-dep-var\" [class.invisible]=\"num && num === maxYVal\" [attr.data-number]=\"num\">{{(num === '0') ? '' : num}}</div>\r\n }\r\n </div><div #barContainer class=\"bar-graph-real-vals\">\r\n @for(bar of barVals; track bar){\r\n <div [ngStyle]=\"{'width': xLblWidth, 'left': bar.left}\" \r\n class=\"graph-actual-bar\" [attr.data-value]=\"bar.fullValue\">\r\n <div [ngStyle]=\"{'height': bar.height, 'background': bar.background}\"></div>\r\n </div>\r\n }\r\n </div>\r\n <div #xValues class=\"bar-graph-x-cols\">\r\n @for(lbl of xLabels; track lbl){\r\n <div class=\"bg-ind-var center\" [style.width]=\"xLblWidth\" (mouseenter)=\"lblMouseIn($event.target)\" (mouseleave)=\"lblMouseOut($event.target)\">\r\n {{lbl}}</div>\r\n }\r\n </div>\r\n</div>\r\n<div #xLabel class=\"bar-graph-x-label\"></div>", styles: [".inner-bg-contain{position:relative;box-sizing:border-box}.inner-bg-contain:before{top:50%;left:-48px;font-size:x-large;position:absolute;display:block;color:var(--grid-color);content:attr(data-yaxis);transform:rotate(-90deg)}.stat-opt-contain{white-space:nowrap;margin-bottom:27px}.stat-opt-btn{width:100%;padding-bottom:3px;box-sizing:border-box}.stat-opt-btn-active{font-weight:700;border-bottom:2px solid var(--grid-color)}.bar-graph-y-cols{z-index:5;margin-left:5px;overflow:visible;position:relative;vertical-align:top;box-sizing:border-box;display:inline-block;border-right:1px solid var(--grid-color)}.bar-graph-real-vals{position:relative}.bar-graph-x-cols{padding-top:11px;white-space:nowrap;overflow-x:visible;border-top:1px solid var(--grid-color)}.bg-dep-var{overflow:hidden;height:70px;width:100%;display:flex;padding:0 5px;font-size:14px;align-items:end;font-weight:500;justify-content:right;box-sizing:border-box}.bg-dep-var div{word-break:break-all;color:var(--accent-color)}.bg-dep-var:first-of-type{height:17px!important;position:relative;overflow:visible!important}.bg-dep-var:first-of-type:before{top:0;overflow:visible;position:absolute;content:attr(data-number);visibility:visible!important}.bg-dep-var:last-of-type{overflow:visible!important}.bg-dep-var:last-of-type:after{content:attr(data-number);margin-bottom:-7px}.graph-actual-bar{bottom:0;position:absolute;align-items:center;background:#fff}.graph-actual-bar div{height:0;width:80%;margin:0 auto;background:#afafaf;transition:height .3s ease-out}.graph-actual-bar:hover{z-index:10}.graph-actual-bar:hover:before{width:150px;display:block;font-weight:500;font-size:small;white-space:nowrap;background:#fff;padding:1px 2px 3px;content:attr(data-value);border-radius:3px}.bg-ind-var{font-size:small;font-weight:500;overflow:hidden;text-overflow:ellipsis;display:inline-block;color:var(--accent-color);transform:rotate(45deg)}.lbl-show{overflow:visible!important;transition:overflow .2s ease}.bar-graph-x-label{font-size:x-large;font-weight:500;padding-top:17px;text-align:center;overflow-x:hidden}\n", "@charset \"UTF-8\";@font-face{font-family:Roboto Condensed;src:url(https://d2ffvluimla00s.cloudfront.net/RobotoCondensed-VariableFont_wght.ttf) format(\"ttf\")}@font-face{font-family:Material Icons;font-style:normal;font-weight:400;src:url(https://d2ffvluimla00s.cloudfront.net/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format(\"woff2\")}.deebo-data-grid-section{font-family:Roboto Condensed,Arial,Helvetica,sans-serif}:host{--accent-color:rgb(50, 50, 50);--grid-color:rgb(199, 199, 199);--pad-left-base: 33px;--row-num-width: 75px;--reg-font-size: 17px }.relly{position:relative}.hide{display:none!important;max-height:0;max-width:0;top:0;left:0;opacity:0}.ovy{overflow:auto}.no-ovy-y{overflow-y:hidden!important}.pad-top-sm{padding-top:4px!important}.pad-top-ten{padding-top:10px!important}.pad-top-teen{padding-top:17px}.pad-top-thirty,.pad-top-trey{padding-top:33px}.pad-top-much{padding-top:75px}.o-visible{overflow:visible}.dontwrap{white-space:nowrap}.inline-b{display:inline-block}.inline{display:inline}.half-wid{width:50%;vertical-align:top;display:inline-block}.qtr-wid{width:25%;vertical-align:top;display:inline-block}.third-wid{width:33.3%;vertical-align:top;display:inline-block}.two-third-wid{width:66.6%;vertical-align:top;display:inline-block}.three-qtr-wid{width:75%;vertical-align:top;display:inline-block}.v-top{vertical-align:top!important}.v-mid{vertical-align:middle!important}.v-bot{vertical-align:bottom!important}.lg-text{font-size:larger}.xlg-text{font-size:x-large!important}.md-text{font-size:var(--reg-font-size)!important}.small-text{font-size:small}.tiny-text{font-size:x-small}.invisible{visibility:hidden}.flex-center{display:flex;justify-content:center;align-items:center}.flex-item{flex:1 1 auto}.o-x-hidden{overflow-x:hidden!important}.no-weight{font-weight:400!important}.semi-heavy{font-weight:500!important}.heavy{font-weight:700!important}.marauto{margin:0 auto}.center{text-align:center}.left{text-align:left}.right{text-align:right}.btn-reset{border:none;color:#fff;padding:7px 11px;background:maroon}.error-message{color:maroon;font-weight:500}.success{color:green;font-weight:500}.neutral{color:var(--accent-color)}input,select{border:none;padding:4px;border-radius:3px;box-sizing:border-box;font-family:Roboto Condensed,Arial,Helvetica,sans-serif;box-shadow:0 0 1px 1px #afafaf;-moz-box-shadow:0 0 1px 1px #afafaf;-webkit-box-shadow:0 0 1px 1px #afafaf}input[type=radio],input[type=checkbox]{cursor:pointer;box-shadow:none!important;-moz-box-shadow:none!important;-webkit-box-shadow:none!important}button{cursor:pointer}button:focus,input:focus,select:focus,textarea:focus,a:focus{outline-width:0}button:disabled,input:disabled,select:disabled{opacity:.5;cursor:not-allowed}.prevent{opacity:.5;cursor:not-allowed;pointer-events:none}.controls{text-align:right;padding:16px 11px 6px 1px;max-width:100%;clear:both;overflow-x:auto;white-space:nowrap}.controls button{font-size:var(--reg-font-size);margin-right:31px;vertical-align:middle}.controls button span{vertical-align:middle}.controls button:last-of-type{margin-right:0}.data-table{margin-top:11px;overflow:hidden;box-shadow:0 -1px 3px 1px var(--grid-color);-moz-box-shadow:0 -1px 3px 1px var(--grid-color);-webkit-box-shadow:0 -1px 3px 1px var(--grid-color)}.sel-rows-checked{color:#00a8f399!important}.save-hilite{padding:2px 4px;border-radius:3px;background:#ebebeb;box-shadow:0 0 3px 1px var(--accent-color);-moz-box-shadow:0 0px 3px 1px var(--accent-color);-webkit-box-shadow:0 0px 3px 1px var(--accent-color)}.btn-ctrl-sel-rows,.btn-export-or-print{border:none;padding:3px 4px;border-radius:3px;background:#f5f5f5;vertical-align:middle;box-shadow:0 0 2px 1px var(--accent-color);-moz-box-shadow:0 0 2px 1px var(--accent-color);-webkit-box-shadow:0 0 2px 1px var(--accent-color)}.deebo-dd-contain-div:last-of-type{margin-right:0!important}.btn-export{width:100%;text-transform:uppercase}.btn-export:hover{text-decoration:underline}.btn-ctrl-sel-rows:hover,.btn-export-or-print:hover{background:#ebebeb;box-shadow:0 0 6px 2px gray;-moz-box-shadow:0 0 6px 2px gray;-webkit-box-shadow:0 0 6px 2px gray}.btn-center-selected{padding:2px 4px;border-radius:5px;background:#f5f5f5;box-shadow:0 0 6px 2px gray;-moz-box-shadow:0 0 6px 2px gray;-webkit-box-shadow:0 0 6px 2px gray}.btn-ctrl-sel-rows .material-icons{font-size:18px;font-weight:600;vertical-align:middle}.btn-ctrl-sel-rows .material-icons:not(.error-message){color:var(--accent-color)}.data-table-headers{cursor:pointer;white-space:nowrap;border-bottom:1px solid var(--grid-color)}.data-table-row{white-space:nowrap}.data-table-row:hover,.data-table-row .col-item-freeze:hover{background:#f3f3f3}.data-row-selected{background:#d6d6d6!important}.table-working{opacity:.1;pointer-events:none}.select-row-check{left:9px;z-index:10;cursor:pointer;margin:0;position:absolute;padding:0!important}.gb-row-num{left:2px;z-index:10;cursor:pointer;margin:0;font-size:x-small;position:absolute;padding:0!important}.mock-html{width:50%;height:18px;margin:0 auto;border-radius:11px;background:var(--grid-color)}.abs-right{top:7px;right:7px;position:absolute}.has-symbol:after{content:attr(data-symbol);padding-left:3px}.has-symbol-b:before{content:attr(data-symbol);padding-right:3px}.data-table-row-no-data{font-size:xx-large;color:gray;font-weight:500;text-shadow:-1px -1px var(--accent-color)}.data-row-selected .col-item-freeze,.data-row-selected .data-cell,.data-row-selected:hover,.data-row-selected .col-item-freeze:hover,.data-row-selected .data-cell:hover{background:#d6d6d6!important}.data-table-headers .col-item-freeze:first-of-type{border-bottom:1px solid var(--grid-color)}.col-header{z-index:2;width:125px;overflow:auto;cursor:grab;padding:7px 3px;text-align:center;position:relative;box-sizing:border-box;display:inline-block;vertical-align:top;white-space:pre-wrap;word-wrap:break-word;background:#fafafa;border-right:1px solid var(--grid-color)}.col-header button,.col-header span,.col-header select{cursor:pointer;vertical-align:middle}.col-header input{vertical-align:middle}.col-header-img-container{overflow-y:hidden;text-align:center;display:inline-block;vertical-align:middle;background-size:cover;background-position:center;background-repeat:no-repeat}.col-header-minimized{width:0!important;height:0!important;padding:0!important;overflow:hidden!important;border-bottom:none!important;border-right:none!important;transition:width .3s ease}.btn-maximize-col{border:none;border-radius:5px;background:#f5f5f5;box-shadow:0 0 3px 2px gray;font-size:var(--reg-font-size);margin-right:27px;padding:4px}.no-btn{border:none;background:none}.col-item-freeze{left:0;z-index:3;position:sticky;background:#fff;box-shadow:2px 0 3px 0 var(--grid-color);-moz-box-shadow:2px 0px 3px 0px var(--grid-color);-webkit-box-shadow:2px 0px 3px 0px var(--grid-color)}.col-header input,.select-filter{width:40%;margin:11px 0 1px}.sel-fil-container{z-index:5}.edit-input-option-cont{left:0;right:0}.edit-input-opt button{width:100%;font-size:15px;padding:11px 0 11px 17px;text-align:left!important}.selfil-opt-contain,.edit-input-option-cont{overflow:auto;max-height:240px;border-radius:5px;position:absolute;background:#fff;box-shadow:0 1px 3px 1px var(--grid-color);-moz-box-shadow:0 1px 3px 1px var(--grid-color);-webkit-box-shadow:0 1px 3px 1px var(--grid-color)}.selfil-div,.edit-input-opt{cursor:pointer;text-align:left;border-bottom:1px solid var(--grid-color)}.selfil-div:hover,.edit-input-opt:hover{background:#ebebeb}.selfil-div:last-of-type,.edit-input-opt:last-of-type{border-bottom:none}.selfil-div label{width:calc(100% - 22px);font-size:15px;cursor:pointer;padding:11px;display:inline-block}.selfil-div label input[type=checkbox]{margin-right:11px;vertical-align:middle}.select-filter-comparator{width:36px;z-index:3;opacity:0;position:relative;margin:11px 0 1px 15px}.btn-fil-comp{top:2px;left:-36px;border:none;position:absolute;background:#fafafa}.btn-fil-comp i{color:var(--accent-color)}@media screen and (min-width:960px){.col-header input,.select-filter,.select-filter-comparator{margin-top:7px;margin-bottom:1px}}.data-cell{width:125px;padding:11px 6px 11px 17px;overflow:auto;font-size:15px;word-wrap:break-word;white-space:pre-line;vertical-align:top;box-sizing:border-box;display:inline-flex;align-items:center;border-right:1px solid var(--grid-color);border-bottom:1px solid var(--grid-color)}input.edit-input{border-radius:0}.data-cell:focus,input.edit-input:focus{outline:1px solid #00a8f3}.dragger-cell-focused{background:#00a8f333;border-left:1px solid #00a8f3;border-right:1px solid #00a8f3!important}.focused-cell-dragger{width:9px;height:9px;cursor:crosshair;position:absolute;background:#00a8f3;box-shadow:0 0 1px 1px var(--accent-color);-moz-box-shadow:0 0 1px 1px var(--accent-color);-webkit-box-shadow:0 0 1px 1px var(--accent-color)}.holding-check{padding-left:44px}.data-cell-riiight{padding:11px 17px 11px 6px;justify-content:right}.data-cell-ceeenter{padding:11px 6px;justify-content:center!important}.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-min-col{cursor:pointer;top:0;right:2px;font-size:20px;border:none;background:none;position:absolute;padding:0 2px 5px 0;color:var(--accent-color)}.btn-min-col-hide{z-index:0;visibility:hidden;pointer-events:none}.btn-freeze-col{float:left;border:none;cursor:pointer;background:none}.btn-freeze-col .material-icons{font-size:16px;color:var(--accent-color)}.hidden-cols{max-width:100%;overflow-x:auto;clear:both;white-space:nowrap;padding:17px 15px 5px 4px}.hidden-cols button:first-of-type:before{content:\"Hidden Columns\";font-size:12px;font-weight:600;padding-right:11px;vertical-align:middle}.col-header span{word-wrap:break-word;vertical-align:middle;font-size:var(--reg-font-size)}.o-ins-div span,.o-ins-div i{vertical-align:middle;font-size:16px}.aux-chip{text-align:center;padding-bottom:33px;word-wrap:break-word;white-space:pre-wrap}.insights{padding:17px 15px}.insight-field{min-height:100px;padding:21px 0;font-size:large;white-space:pre-wrap;word-wrap:break-word;border-bottom:1px solid lightgray}@media screen and (max-width:760px){.insight-field:first-of-type{padding-top:7px}}@media screen and (min-width:760px){.insight-field-row{border-bottom:1px solid lightgray}.insight-field,.aux-chip{width:50%;vertical-align:top;display:inline-block;border-bottom:none}}@media screen and (min-width:1024px){.insight-field,.aux-chip{width:33%}}.chart-label-cont{padding-top:10px;text-align:center}.pie-piece-label{padding-top:5px;margin-right:27px;display:inline-block}.pie-piece-label-sq{width:11px;height:11px;margin:0 0 0 2px;display:inline-block;vertical-align:middle}.pie-piece-label span{font-size:small}.pie-piece-label span:before{font-size:smaller;padding-right:4px;font-weight:600;content:attr(data-percent)}.pie-layover{border-radius:50%;background:#fff;position:absolute;padding:5px!important;display:flex;font-size:17px;align-items:center;overflow:hidden;box-sizing:border-box;justify-content:center;color:var(--accent-color)}.pie-layover div{font-weight:500;padding:0!important}.ins-even-dist-ct{font-size:24px;font-weight:500}.line-graph-container{padding:11px 0 33px 7px!important;box-sizing:border-box;margin-left:11px}.lg-title-cont{padding:0!important;text-align:center;margin:17px 11px}.lg-n-marker-cont{width:60px;position:relative;padding:0!important;box-sizing:border-box;display:inline-block;vertical-align:top}.lg-n-marker-cont:before{top:45%;left:-37px;display:block;position:absolute;white-space:nowrap;color:var(--grid-color);content:attr(data-column);transform:rotate(-90deg)}.lg-n-marker,.lg-n-marker-h{padding:0 11px 0 0!important;font-size:small;position:relative;text-align:right;white-space:nowrap;box-sizing:border-box}.line-graph{width:calc(92% - 60px);position:relative;box-sizing:border-box;display:inline-block;vertical-align:top;padding:0!important;border-left:1px solid var(--accent-color);border-bottom:1px solid var(--accent-color)}.lg-lbl-x{left:0;right:0;bottom:-45px;font-size:small;font-weight:500;text-align:center;position:absolute;padding:0!important}.btn-line-graph-opts{margin:0;padding:4px;background:none;border-top:1px solid var(--accent-color);border-left:1px solid var(--accent-color);border-bottom:1px solid var(--accent-color)}.sp-line-graph-title{margin-top:7px;font-size:large;text-decoration:underline}.lg-dt-marker,.lg-dt-marker-h,.vd-n-marker,.vd-n-marker-h{bottom:-22px;font-size:small;position:absolute;text-align:center;padding:0!important;display:inline-block;box-sizing:border-box}.lg-dt-marker-h,.vd-n-marker-h{visibility:hidden}.lg-dt-marker.visible-marker{margin-left:21px}.lg-n-marker-h{height:0;visibility:hidden}.visible-marker{z-index:2;font-weight:600;background:#fff;height:unset!important;padding:1px 2px!important;visibility:visible!important;box-shadow:0 0 2px 1px #afafaf;-moz-box-shadow:0 0 2px 1px #afafaf;-webkit-box-shadow:0 0 2px 1px #afafaf}.visible-marker:before{font-weight:600}.lg-dt-marker:before{top:-15px;left:0;content:\"|\";position:absolute}.vd-n-marker:before{top:-15px;left:50%;content:\"|\";left:calc(50% - 2px);position:absolute}.lg-n-marker:before{top:-4px;right:-3px;content:\"-\";font-weight:600;font-size:large;position:absolute;background:#fff}.btn-line-graph-opts:hover{background:#d6d6d6;transition:background .3s ease}.btn-line-graph-opts:last-of-type{border-right:1px solid var(--accent-color)}.btn-lg-sel{color:#fff!important;background:var(--accent-color);box-shadow:0 0 2px 1px #afafaf;-moz-box-shadow:0 0 2px 1px #afafaf;-webkit-box-shadow:0 0 2px 1px #afafaf}.btn-lg-sel:hover{background:var(--accent-color)}.lg-plot{height:8px;width:8px;opacity:.3;cursor:pointer;border-radius:50%;position:absolute;padding:0!important;background:var(--accent-color)}.lg-plot:hover{z-index:100;opacity:1!important}.lg-plot:hover:after{padding:3px;display:inline-block;font-size:small;border-radius:5px;margin:0 0 0 25px;font-weight:700;content:attr(data-number);background:#fff!important;box-shadow:0 0 2px 1px #afafaf;-moz-box-shadow:0 0 2px 1px #afafaf;-webkit-box-shadow:0 0 2px 1px #afafaf}.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"] }]
|
|
3549
|
-
}], ctorParameters: () => [{ type: CommonService }, { type: DataTableService }], propDecorators: { onWindowResize: [{
|
|
3564
|
+
args: [{ selector: 'app-bar-graph-component', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #statOptsCont class=\"center stat-opt-contain\">\r\n @for(stat of statOpts; track stat){\r\n <div [style.width]=\"statBtnWid\" class=\"inline-b center\">\r\n <button class=\"no-btn stat-opt-btn\" (click)=\"handleStatChange(stat)\"\r\n [class.stat-opt-btn-active]=\"selStat() === stat\">{{common.titleCase(stat)}}</button>\r\n </div>\r\n }\r\n</div>\r\n<div #innerGB class=\"inner-bg-contain\">\r\n <div #yAxis class=\"bar-graph-y-cols\" [style.height]=\"((bgDepVarHgt*(numYPlots-1))+17) + 'px'\">\r\n @for(num of numTicks(); track $index){\r\n <div class=\"bg-dep-var\" [class.invisible]=\"num && num === maxYVal\" [attr.data-number]=\"num\">{{(num === '0') ? '' : num}}</div>\r\n }\r\n </div><div #barContainer class=\"bar-graph-real-vals\">\r\n @for(bar of barVals; track bar.id){\r\n <div [ngStyle]=\"{'width': xLblWidth, 'left': bar.left}\" \r\n class=\"graph-actual-bar\" [attr.data-value]=\"bar.fullValue\">\r\n <div [ngStyle]=\"{'height': bar.height, 'background': bar.background}\"></div>\r\n </div>\r\n }\r\n </div>\r\n <div #xValues class=\"bar-graph-x-cols\">\r\n @for(lbl of xLabels; track lbl){\r\n <div class=\"bg-ind-var center\" [style.width]=\"xLblWidth\" (mouseenter)=\"lblMouseIn($event.target)\" (mouseleave)=\"lblMouseOut($event.target)\">\r\n {{lbl}}</div>\r\n }\r\n </div>\r\n</div>\r\n<div #xLabel class=\"bar-graph-x-label\"></div>", styles: [".inner-bg-contain{position:relative;box-sizing:border-box}.inner-bg-contain:before{top:50%;left:-48px;font-size:x-large;position:absolute;display:block;color:var(--grid-color);content:attr(data-yaxis);transform:rotate(-90deg)}.stat-opt-contain{white-space:nowrap;margin-bottom:27px}.stat-opt-btn{width:100%;padding-bottom:3px;box-sizing:border-box}.stat-opt-btn-active{font-weight:700;border-bottom:2px solid var(--grid-color)}.bar-graph-y-cols{z-index:5;margin-left:5px;overflow:visible;position:relative;vertical-align:top;box-sizing:border-box;display:inline-block;border-right:1px solid var(--grid-color)}.bar-graph-real-vals{position:relative}.bar-graph-x-cols{padding-top:11px;white-space:nowrap;overflow-x:visible;border-top:1px solid var(--grid-color)}.bg-dep-var{overflow:hidden;height:70px;width:100%;display:flex;padding:0 5px;font-size:14px;align-items:end;font-weight:500;justify-content:right;box-sizing:border-box}.bg-dep-var div{word-break:break-all;color:var(--accent-color)}.bg-dep-var:first-of-type{height:17px!important;position:relative;overflow:visible!important}.bg-dep-var:first-of-type:before{top:0;overflow:visible;position:absolute;content:attr(data-number);visibility:visible!important}.bg-dep-var:last-of-type{overflow:visible!important}.bg-dep-var:last-of-type:after{content:attr(data-number);margin-bottom:-7px}.graph-actual-bar{bottom:0;position:absolute;align-items:center;background:#fff}.graph-actual-bar div{height:0;width:80%;margin:0 auto;background:#afafaf;transition:height .3s ease-out}.graph-actual-bar:hover{z-index:10}.graph-actual-bar:hover:before{width:150px;display:block;font-weight:500;font-size:small;white-space:nowrap;background:#fff;padding:1px 2px 3px;content:attr(data-value);border-radius:3px}.bg-ind-var{font-size:small;font-weight:500;overflow:hidden;text-overflow:ellipsis;display:inline-block;color:var(--accent-color);transform:rotate(45deg)}.lbl-show{overflow:visible!important;transition:overflow .2s ease}.bar-graph-x-label{font-size:x-large;font-weight:500;padding-top:17px;text-align:center;overflow-x:hidden}\n", "@charset \"UTF-8\";@font-face{font-family:Roboto Condensed;src:url(https://d2ffvluimla00s.cloudfront.net/RobotoCondensed-VariableFont_wght.ttf) format(\"ttf\")}@font-face{font-family:Material Icons;font-style:normal;font-weight:400;src:url(https://d2ffvluimla00s.cloudfront.net/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format(\"woff2\")}.deebo-data-grid-section{font-family:Roboto Condensed,Arial,Helvetica,sans-serif}:host{--accent-color:rgb(50, 50, 50);--grid-color:rgb(199, 199, 199);--pad-left-base: 33px;--row-num-width: 75px;--reg-font-size: 17px }.relly{position:relative}.hide{display:none!important;max-height:0;max-width:0;top:0;left:0;opacity:0}.ovy{overflow:auto}.no-ovy-y{overflow-y:hidden!important}.pad-top-sm{padding-top:4px!important}.pad-top-ten{padding-top:10px!important}.pad-top-teen{padding-top:17px}.pad-top-thirty,.pad-top-trey{padding-top:33px}.pad-top-much{padding-top:75px}.o-visible{overflow:visible}.dontwrap{white-space:nowrap}.inline-b{display:inline-block}.inline{display:inline}.half-wid{width:50%;vertical-align:top;display:inline-block}.qtr-wid{width:25%;vertical-align:top;display:inline-block}.third-wid{width:33.3%;vertical-align:top;display:inline-block}.two-third-wid{width:66.6%;vertical-align:top;display:inline-block}.three-qtr-wid{width:75%;vertical-align:top;display:inline-block}.v-top{vertical-align:top!important}.v-mid{vertical-align:middle!important}.v-bot{vertical-align:bottom!important}.lg-text{font-size:larger}.xlg-text{font-size:x-large!important}.md-text{font-size:var(--reg-font-size)!important}.small-text{font-size:small}.tiny-text{font-size:x-small}.invisible{visibility:hidden}.flex-center{display:flex;justify-content:center;align-items:center}.flex-item{flex:1 1 auto}.o-x-hidden{overflow-x:hidden!important}.no-weight{font-weight:400!important}.semi-heavy{font-weight:500!important}.heavy{font-weight:700!important}.marauto{margin:0 auto}.center{text-align:center}.left{text-align:left}.right{text-align:right}.btn-reset{border:none;color:#fff;padding:7px 11px;background:maroon}.error-message{color:maroon;font-weight:500}.success{color:green;font-weight:500}.neutral{color:var(--accent-color)}input,select{border:none;padding:4px;border-radius:3px;box-sizing:border-box;font-family:Roboto Condensed,Arial,Helvetica,sans-serif;box-shadow:0 0 1px 1px #afafaf;-moz-box-shadow:0 0 1px 1px #afafaf;-webkit-box-shadow:0 0 1px 1px #afafaf}input[type=radio],input[type=checkbox]{cursor:pointer;box-shadow:none!important;-moz-box-shadow:none!important;-webkit-box-shadow:none!important}button{cursor:pointer}button:focus,input:focus,select:focus,textarea:focus,a:focus{outline-width:0}button:disabled,input:disabled,select:disabled{opacity:.5;cursor:not-allowed}.prevent{opacity:.5;cursor:not-allowed;pointer-events:none}.controls{text-align:right;padding:16px 11px 6px 1px;max-width:100%;clear:both;overflow-x:auto;white-space:nowrap}.controls button{font-size:var(--reg-font-size);margin-right:31px;vertical-align:middle}.controls button span{vertical-align:middle}.controls button:last-of-type{margin-right:0}.data-table{margin-top:11px;overflow:hidden;box-shadow:0 -1px 3px 1px var(--grid-color);-moz-box-shadow:0 -1px 3px 1px var(--grid-color);-webkit-box-shadow:0 -1px 3px 1px var(--grid-color)}.sel-rows-checked{color:#00a8f399!important}.save-hilite{padding:2px 4px;border-radius:3px;background:#ebebeb;box-shadow:0 0 3px 1px var(--accent-color);-moz-box-shadow:0 0px 3px 1px var(--accent-color);-webkit-box-shadow:0 0px 3px 1px var(--accent-color)}.btn-ctrl-sel-rows,.btn-export-or-print{border:none;padding:3px 4px;border-radius:3px;background:#f5f5f5;vertical-align:middle;box-shadow:0 0 2px 1px var(--accent-color);-moz-box-shadow:0 0 2px 1px var(--accent-color);-webkit-box-shadow:0 0 2px 1px var(--accent-color)}.deebo-dd-contain-div:last-of-type{margin-right:0!important}.btn-export{width:100%;text-transform:uppercase}.btn-export:hover{text-decoration:underline}.btn-ctrl-sel-rows:hover,.btn-export-or-print:hover{background:#ebebeb;box-shadow:0 0 6px 2px gray;-moz-box-shadow:0 0 6px 2px gray;-webkit-box-shadow:0 0 6px 2px gray}.btn-center-selected{padding:2px 4px;border-radius:5px;background:#f5f5f5;box-shadow:0 0 6px 2px gray;-moz-box-shadow:0 0 6px 2px gray;-webkit-box-shadow:0 0 6px 2px gray}.btn-ctrl-sel-rows .material-icons{font-size:18px;font-weight:600;vertical-align:middle}.btn-ctrl-sel-rows .material-icons:not(.error-message){color:var(--accent-color)}.data-table-headers{cursor:pointer;white-space:nowrap;border-bottom:1px solid var(--grid-color)}.data-table-row{white-space:nowrap}.data-table-row:hover,.data-table-row .col-item-freeze:hover{background:#f3f3f3}.data-row-selected{background:#d6d6d6!important}.table-working{opacity:.1;pointer-events:none}.select-row-check{left:9px;z-index:10;cursor:pointer;margin:0;position:absolute;padding:0!important}.gb-row-num{left:2px;z-index:10;cursor:pointer;margin:0;font-size:x-small;position:absolute;padding:0!important}.mock-html{width:50%;height:18px;margin:0 auto;border-radius:11px;background:var(--grid-color)}.abs-right{top:7px;right:7px;position:absolute}.has-symbol:after{content:attr(data-symbol);padding-left:3px}.has-symbol-b:before{content:attr(data-symbol);padding-right:3px}.data-table-row-no-data{font-size:xx-large;color:gray;font-weight:500;text-shadow:-1px -1px var(--accent-color)}.data-row-selected .col-item-freeze,.data-row-selected .data-cell,.data-row-selected:hover,.data-row-selected .col-item-freeze:hover,.data-row-selected .data-cell:hover{background:#d6d6d6!important}.data-table-headers .col-item-freeze:first-of-type{border-bottom:1px solid var(--grid-color)}.col-header{z-index:2;width:125px;overflow:auto;cursor:grab;padding:7px 3px;text-align:center;position:relative;box-sizing:border-box;display:inline-block;vertical-align:top;white-space:pre-wrap;word-wrap:break-word;background:#fafafa;border-right:1px solid var(--grid-color)}.col-header button,.col-header span,.col-header select{cursor:pointer;vertical-align:middle}.col-header input{vertical-align:middle}.col-header-img-container{overflow-y:hidden;text-align:center;display:inline-block;vertical-align:middle;background-size:cover;background-position:center;background-repeat:no-repeat}.col-header-minimized{width:0!important;height:0!important;padding:0!important;overflow:hidden!important;border-bottom:none!important;border-right:none!important;transition:width .3s ease}.btn-maximize-col{border:none;border-radius:5px;background:#f5f5f5;box-shadow:0 0 3px 2px gray;font-size:var(--reg-font-size);margin-right:27px;padding:4px}.no-btn{border:none;background:none}.col-item-freeze{left:0;z-index:3;position:sticky;background:#fff;box-shadow:2px 0 3px 0 var(--grid-color);-moz-box-shadow:2px 0px 3px 0px var(--grid-color);-webkit-box-shadow:2px 0px 3px 0px var(--grid-color)}.col-header input,.select-filter{width:40%;margin:11px 0 1px}.sel-fil-container{z-index:5}.edit-input-option-cont{left:0;right:0}.edit-input-opt button{width:100%;font-size:15px;padding:11px 0 11px 17px;text-align:left!important}.selfil-opt-contain,.edit-input-option-cont{overflow:auto;max-height:240px;border-radius:5px;position:absolute;background:#fff;box-shadow:0 1px 3px 1px var(--grid-color);-moz-box-shadow:0 1px 3px 1px var(--grid-color);-webkit-box-shadow:0 1px 3px 1px var(--grid-color)}.selfil-div,.edit-input-opt{cursor:pointer;text-align:left;border-bottom:1px solid var(--grid-color)}.selfil-div:hover,.edit-input-opt:hover{background:#ebebeb}.selfil-div:last-of-type,.edit-input-opt:last-of-type{border-bottom:none}.selfil-div label{width:calc(100% - 22px);font-size:15px;cursor:pointer;padding:11px;display:inline-block}.selfil-div label input[type=checkbox]{margin-right:11px;vertical-align:middle}.select-filter-comparator{width:36px;z-index:3;opacity:0;position:relative;margin:11px 0 1px 15px}.btn-fil-comp{top:2px;left:-36px;border:none;position:absolute;background:#fafafa}.btn-fil-comp i{color:var(--accent-color)}@media screen and (min-width:960px){.col-header input,.select-filter,.select-filter-comparator{margin-top:7px;margin-bottom:1px}}.data-cell{width:125px;padding:11px 6px 11px 17px;overflow:auto;font-size:15px;word-wrap:break-word;white-space:pre-line;vertical-align:top;box-sizing:border-box;display:inline-flex;align-items:center;border-right:1px solid var(--grid-color);border-bottom:1px solid var(--grid-color)}input.edit-input{border-radius:0}.data-cell:focus,input.edit-input:focus{outline:1px solid #00a8f3}.dragger-cell-focused{background:#00a8f333;border-left:1px solid #00a8f3;border-right:1px solid #00a8f3!important}.focused-cell-dragger{width:9px;height:9px;cursor:crosshair;position:absolute;background:#00a8f3;box-shadow:0 0 1px 1px var(--accent-color);-moz-box-shadow:0 0 1px 1px var(--accent-color);-webkit-box-shadow:0 0 1px 1px var(--accent-color)}.holding-check{padding-left:44px}.data-cell-riiight{padding:11px 17px 11px 6px;justify-content:right}.data-cell-ceeenter{padding:11px 6px;justify-content:center!important}.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-min-col{cursor:pointer;top:0;right:2px;font-size:20px;border:none;background:none;position:absolute;padding:0 2px 5px 0;color:var(--accent-color)}.btn-min-col-hide{z-index:0;visibility:hidden;pointer-events:none}.btn-freeze-col{float:left;border:none;cursor:pointer;background:none}.btn-freeze-col .material-icons{font-size:16px;color:var(--accent-color)}.hidden-cols{max-width:100%;overflow-x:auto;clear:both;white-space:nowrap;padding:17px 15px 5px 4px}.hidden-cols button:first-of-type:before{content:\"Hidden Columns\";font-size:12px;font-weight:600;padding-right:11px;vertical-align:middle}.col-header span{word-wrap:break-word;vertical-align:middle;font-size:var(--reg-font-size)}.o-ins-div span,.o-ins-div i{vertical-align:middle;font-size:16px}.aux-chip{text-align:center;padding-bottom:33px;word-wrap:break-word;white-space:pre-wrap}.insights{padding:17px 15px}.insight-field{min-height:100px;padding:21px 0;font-size:large;white-space:pre-wrap;word-wrap:break-word;border-bottom:1px solid lightgray}@media screen and (max-width:760px){.insight-field:first-of-type{padding-top:7px}}@media screen and (min-width:760px){.insight-field-row{border-bottom:1px solid lightgray}.insight-field,.aux-chip{width:50%;vertical-align:top;display:inline-block;border-bottom:none}}@media screen and (min-width:1024px){.insight-field,.aux-chip{width:33%}}.chart-label-cont{padding-top:10px;text-align:center}.pie-piece-label{padding-top:5px;margin-right:27px;display:inline-block}.pie-piece-label-sq{width:11px;height:11px;margin:0 0 0 2px;display:inline-block;vertical-align:middle}.pie-piece-label span{font-size:small}.pie-piece-label span:before{font-size:smaller;padding-right:4px;font-weight:600;content:attr(data-percent)}.pie-layover{border-radius:50%;background:#fff;position:absolute;padding:5px!important;display:flex;font-size:17px;align-items:center;overflow:hidden;box-sizing:border-box;justify-content:center;color:var(--accent-color)}.pie-layover div{font-weight:500;padding:0!important}.ins-even-dist-ct{font-size:24px;font-weight:500}.line-graph-container{padding:11px 0 33px 7px!important;box-sizing:border-box;margin-left:11px}.lg-title-cont{padding:0!important;text-align:center;margin:17px 11px}.lg-n-marker-cont{width:60px;position:relative;padding:0!important;box-sizing:border-box;display:inline-block;vertical-align:top}.lg-n-marker-cont:before{top:45%;left:-37px;display:block;position:absolute;white-space:nowrap;color:var(--grid-color);content:attr(data-column);transform:rotate(-90deg)}.lg-n-marker,.lg-n-marker-h{padding:0 11px 0 0!important;font-size:small;position:relative;text-align:right;white-space:nowrap;box-sizing:border-box}.line-graph{width:calc(92% - 60px);position:relative;box-sizing:border-box;display:inline-block;vertical-align:top;padding:0!important;border-left:1px solid var(--accent-color);border-bottom:1px solid var(--accent-color)}.lg-lbl-x{left:0;right:0;bottom:-45px;font-size:small;font-weight:500;text-align:center;position:absolute;padding:0!important}.btn-line-graph-opts{margin:0;padding:4px;background:none;border-top:1px solid var(--accent-color);border-left:1px solid var(--accent-color);border-bottom:1px solid var(--accent-color)}.sp-line-graph-title{margin-top:7px;font-size:large;text-decoration:underline}.lg-dt-marker,.lg-dt-marker-h,.vd-n-marker,.vd-n-marker-h{bottom:-22px;font-size:small;position:absolute;text-align:center;padding:0!important;display:inline-block;box-sizing:border-box}.lg-dt-marker-h,.vd-n-marker-h{visibility:hidden}.lg-dt-marker.visible-marker{margin-left:21px}.lg-n-marker-h{height:0;visibility:hidden}.visible-marker{z-index:2;font-weight:600;background:#fff;height:unset!important;padding:1px 2px!important;visibility:visible!important;box-shadow:0 0 2px 1px #afafaf;-moz-box-shadow:0 0 2px 1px #afafaf;-webkit-box-shadow:0 0 2px 1px #afafaf}.visible-marker:before{font-weight:600}.lg-dt-marker:before{top:-15px;left:0;content:\"|\";position:absolute}.vd-n-marker:before{top:-15px;left:50%;content:\"|\";left:calc(50% - 2px);position:absolute}.lg-n-marker:before{top:-4px;right:-3px;content:\"-\";font-weight:600;font-size:large;position:absolute;background:#fff}.btn-line-graph-opts:hover{background:#d6d6d6;transition:background .3s ease}.btn-line-graph-opts:last-of-type{border-right:1px solid var(--accent-color)}.btn-lg-sel{color:#fff!important;background:var(--accent-color);box-shadow:0 0 2px 1px #afafaf;-moz-box-shadow:0 0 2px 1px #afafaf;-webkit-box-shadow:0 0 2px 1px #afafaf}.btn-lg-sel:hover{background:var(--accent-color)}.lg-plot{height:8px;width:8px;opacity:.3;cursor:pointer;border-radius:50%;position:absolute;padding:0!important;background:var(--accent-color)}.lg-plot:hover{z-index:100;opacity:1!important}.lg-plot:hover:after{padding:3px;display:inline-block;font-size:small;border-radius:5px;margin:0 0 0 25px;font-weight:700;content:attr(data-number);background:#fff!important;box-shadow:0 0 2px 1px #afafaf;-moz-box-shadow:0 0 2px 1px #afafaf;-webkit-box-shadow:0 0 2px 1px #afafaf}.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"] }]
|
|
3565
|
+
}], ctorParameters: () => [{ type: CommonService }, { type: DataTableService }, { type: i0.ChangeDetectorRef }], propDecorators: { onWindowResize: [{
|
|
3550
3566
|
type: HostListener,
|
|
3551
3567
|
args: ['window:resize', ['$event']]
|
|
3552
3568
|
}], column: [{
|
|
@@ -3579,7 +3595,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
|
|
|
3579
3595
|
class LineGraphComponent {
|
|
3580
3596
|
common;
|
|
3581
3597
|
dataTableService;
|
|
3582
|
-
_zone;
|
|
3583
3598
|
onWindowResize(e) {
|
|
3584
3599
|
this.handleStatChange(this.selStat, true);
|
|
3585
3600
|
}
|
|
@@ -3591,7 +3606,6 @@ class LineGraphComponent {
|
|
|
3591
3606
|
dtmrksH = [];
|
|
3592
3607
|
plots = signal([], ...(ngDevMode ? [{ debugName: "plots" }] : /* istanbul ignore next */ []));
|
|
3593
3608
|
contScrollHgt = 0;
|
|
3594
|
-
buildingStat = false;
|
|
3595
3609
|
maxYVal = "0";
|
|
3596
3610
|
statData = [];
|
|
3597
3611
|
valOpts = signal([], ...(ngDevMode ? [{ debugName: "valOpts" }] : /* istanbul ignore next */ []));
|
|
@@ -3620,10 +3634,9 @@ class LineGraphComponent {
|
|
|
3620
3634
|
auxOptsCont;
|
|
3621
3635
|
statOptsCont;
|
|
3622
3636
|
lgCanvas;
|
|
3623
|
-
constructor(common, dataTableService
|
|
3637
|
+
constructor(common, dataTableService) {
|
|
3624
3638
|
this.common = common;
|
|
3625
3639
|
this.dataTableService = dataTableService;
|
|
3626
|
-
this._zone = _zone;
|
|
3627
3640
|
}
|
|
3628
3641
|
ngOnInit() {
|
|
3629
3642
|
const cols = this.column.split(this.dataTableService.bgSep);
|
|
@@ -3675,7 +3688,6 @@ class LineGraphComponent {
|
|
|
3675
3688
|
this.setUseableData(valData, this.selStat);
|
|
3676
3689
|
setTimeout(() => {
|
|
3677
3690
|
this.drawLineGraph(this.useData);
|
|
3678
|
-
this._zone.run(() => { this.buildingStat = false; });
|
|
3679
3691
|
});
|
|
3680
3692
|
}
|
|
3681
3693
|
getYTDNumDays(dtmax) {
|
|
@@ -3714,7 +3726,6 @@ class LineGraphComponent {
|
|
|
3714
3726
|
if (this.selStat === stat && !resize)
|
|
3715
3727
|
return;
|
|
3716
3728
|
this.killPlots("Loading...");
|
|
3717
|
-
this.buildingStat = true;
|
|
3718
3729
|
this.maxYVal = "0";
|
|
3719
3730
|
this.selStat = stat;
|
|
3720
3731
|
if (!resize)
|
|
@@ -3723,14 +3734,12 @@ class LineGraphComponent {
|
|
|
3723
3734
|
}
|
|
3724
3735
|
handleValSelChange(selVal) {
|
|
3725
3736
|
this.killPlots("Loading...");
|
|
3726
|
-
this.buildingStat = true;
|
|
3727
3737
|
this.selDdVal = selVal;
|
|
3728
3738
|
this.maxYVal = "0";
|
|
3729
3739
|
setTimeout(() => { this.buildLg(); });
|
|
3730
3740
|
}
|
|
3731
3741
|
handleTimeDiffChange(topt) {
|
|
3732
3742
|
this.killPlots("Loading...");
|
|
3733
|
-
this.buildingStat = true;
|
|
3734
3743
|
this.selTDOpt = topt;
|
|
3735
3744
|
this.maxYVal = "0";
|
|
3736
3745
|
setTimeout(() => { this.buildLg(); });
|
|
@@ -3792,6 +3801,7 @@ class LineGraphComponent {
|
|
|
3792
3801
|
const lg = this.lineGraph.nativeElement;
|
|
3793
3802
|
const par = this.lgContain.nativeElement;
|
|
3794
3803
|
const canvas = this.lgCanvas.nativeElement;
|
|
3804
|
+
const strODtCol = this.column.split(this.dataTableService.bgSep)[0];
|
|
3795
3805
|
lg.style.width = ((par.getBoundingClientRect().width * 0.92) - lmarg) + "px";
|
|
3796
3806
|
canvas.width = ((par.getBoundingClientRect().width * 0.92) - lmarg);
|
|
3797
3807
|
const dtopts = { year: "2-digit", month: "2-digit", day: "numeric" };
|
|
@@ -4043,6 +4053,17 @@ class LineGraphComponent {
|
|
|
4043
4053
|
}
|
|
4044
4054
|
}
|
|
4045
4055
|
skipped = 0;
|
|
4056
|
+
const ownCol = this.dataTableService.getColValColor(strODtCol, this.selDdVal);
|
|
4057
|
+
if (ownCol) {
|
|
4058
|
+
lgColor = ownCol;
|
|
4059
|
+
useCol = lgColor;
|
|
4060
|
+
if (lgColor.startsWith("#"))
|
|
4061
|
+
useCol = this.common.hexToRgb(lgColor);
|
|
4062
|
+
else
|
|
4063
|
+
useCol = this.common.getRgbParts(lgColor);
|
|
4064
|
+
if (useCol && typeof useCol === "object")
|
|
4065
|
+
lgUndColor = "rgba(" + useCol.r + ", " + useCol.g + ", " + useCol.b + ", 0.2)";
|
|
4066
|
+
}
|
|
4046
4067
|
this.drawCanvasLineGraph(ctx, dx, dy, ptBef.left, (lgbds.height - ptBef.bottom), lgColor, lgUndColor);
|
|
4047
4068
|
}
|
|
4048
4069
|
mkPlts.push(pt);
|
|
@@ -4208,13 +4229,13 @@ class LineGraphComponent {
|
|
|
4208
4229
|
ngOnDestroy() {
|
|
4209
4230
|
this.killPlots();
|
|
4210
4231
|
}
|
|
4211
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: LineGraphComponent, deps: [{ token: CommonService }, { token: DataTableService }
|
|
4232
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: LineGraphComponent, deps: [{ token: CommonService }, { token: DataTableService }], target: i0.ɵɵFactoryTarget.Component });
|
|
4212
4233
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: LineGraphComponent, isStandalone: true, selector: "app-line-graph-component", inputs: { data: "data", numCol: "numCol", column: "column" }, outputs: { title: "title" }, host: { listeners: { "window:resize": "onWindowResize($event)" } }, viewQueries: [{ propertyName: "yAxis", first: true, predicate: ["yAxis"], descendants: true, static: true }, { propertyName: "lineGraph", first: true, predicate: ["lineGraph"], descendants: true, static: true }, { propertyName: "lgContain", first: true, predicate: ["lgContain"], descendants: true, static: true }, { propertyName: "auxOptsCont", first: true, predicate: ["auxOptsCont"], descendants: true, static: true }, { propertyName: "statOptsCont", first: true, predicate: ["statOptsCont"], descendants: true, static: true }, { propertyName: "lgCanvas", first: true, predicate: ["lgCanvas"], descendants: true, static: true }], ngImport: i0, template: "<div #statOptsCont class=\"center stat-opt-contain\">\r\n @for(stat of statOpts; track stat){\r\n <div [style.width]=\"statBtnWid\" class=\"inline-b center\">\r\n <button class=\"no-btn stat-opt-btn\" (click)=\"handleStatChange(stat)\"\r\n [class.stat-opt-btn-active]=\"selStat === stat\">{{common.titleCase(stat)}}</button>\r\n </div>\r\n }\r\n</div>\r\n<div #auxOptsCont style=\"padding-bottom: 17px;\">\r\n <div class=\"qtr-wid center v-mid\">\r\n @if(valOpts().length){\r\n <select [name]=\"'valSel' + common.elifyCol(column)\" [id]=\"'valSel' + common.elifyCol(column)\" [(ngModel)]=\"selDdVal\"\r\n (change)=\"handleValSelChange($any($event).target.value)\" style=\"max-width: 80%\">\r\n @for(o of valOpts(); track o){\r\n <option [value]=\"o\" [selected]=\"o === selDdVal\">{{o}}</option>\r\n }\r\n </select>\r\n }\r\n </div><div class=\"qtr-wid center v-mid\">\r\n <select [name]=\"'timeDiff' + common.elifyCol(column)\" [id]=\"'timeDiff' + common.elifyCol(column)\" \r\n (change)=\"handleTimeDiffChange($any($event).target.value)\" style=\"max-width: 88%\" [(ngModel)]=\"selTDOpt\">\r\n <option value=\"-1\" [selected]=\"selTDOpt === -1\">All time</option>\r\n @for(t of timeDiffOpts; track t.val){\r\n <option [value]=\"t.val\" [selected]=\"t.val === selTDOpt\">{{t.text}}</option>\r\n }\r\n </select>\r\n </div><div class=\"half-wid v-mid center dontwrap {{currentDeltaCls}}\" [innerHTML]=\"currentDelta\"></div>\r\n</div>\r\n<div #lgContain [id]=\"'lineGraph' + common.elifyCol(column)\" class=\"inner-bg-contain\" style=\"margin-bottom: 33px;\">\r\n <div #yAxis class=\"lg-n-marker-cont\" [style.height]=\"totalHgt + 'px'\">\r\n @for(n of naddedtks(); track n.value; let i = $index){\r\n <div class=\"bg-dep-var\" [class.invisible]=\"n.value && n.value === maxYVal\" [attr.data-number]=\"n.value\"\r\n [style.padding-bottom]=\"i < 4 ? (((i*4)+1) + 'px') : '0px'\">\r\n {{(n.value === '0') ? '' : n.value}}\r\n </div>\r\n }\r\n @for(n of nmrks; track n){\r\n <div class=\"lg-n-marker-h\">{{n.value}}</div>\r\n }\r\n </div><div #lineGraph class=\"line-graph\" [style.height]=\"totalHgt + 'px'\">\r\n @for(n of dtmrks; track n){\r\n <div class=\"lg-dt-marker\" [class.visible-marker]=\"n.visible\" [style.left]=\"n.left\">{{n.value}}</div>\r\n }\r\n @for(n of dtmrksH; track n){\r\n <div class=\"lg-dt-marker-h\" [class.visible-marker]=\"n.visible\" [style.left]=\"n.left\">{{n.value}}</div>\r\n }\r\n @if(lblTxt){\r\n <div class=\"lg-lbl-x\">{{lblTxt}}</div>\r\n }\r\n <canvas #lgCanvas class=\"lg-canvas\" [height]=\"totalHgt\"></canvas>\r\n @for(p of plots(); track $index){\r\n <div class=\"lg-plot lg-plot-opq\" [attr.data-number]=\"p.number\" (mouseenter)=\"showDotPlotInfo(p.date, p.number)\" \r\n (mouseleave)=\"hideDotPlotInfo()\" [ngStyle]=\"{'bottom': (p.bottom-4) + 'px', 'left': (p.left-4) + 'px' }\">{{p.value}}</div>\r\n }\r\n @if(!plots().length){\r\n <div class=\"flex-center lg-msg\" [style.height]=\"totalHgt + 'px'\"><div>{{graphMsg}}</div></div>\r\n }\r\n </div>\r\n</div>", styles: [".lg-plot-opq{opacity:0;background:#fff}.lg-plot-opq:hover{opacity:1!important;background:var(--grid-color);transition:opacity .2s ease}.lg-canvas{top:0;left:0;bottom:0;position:absolute}.lg-msg{top:0;left:0;right:0;position:absolute;color:var(--accent-color)}\n", ".inner-bg-contain{position:relative;box-sizing:border-box}.inner-bg-contain:before{top:50%;left:-48px;font-size:x-large;position:absolute;display:block;color:var(--grid-color);content:attr(data-yaxis);transform:rotate(-90deg)}.stat-opt-contain{white-space:nowrap;margin-bottom:27px}.stat-opt-btn{width:100%;padding-bottom:3px;box-sizing:border-box}.stat-opt-btn-active{font-weight:700;border-bottom:2px solid var(--grid-color)}.bar-graph-y-cols{z-index:5;margin-left:5px;overflow:visible;position:relative;vertical-align:top;box-sizing:border-box;display:inline-block;border-right:1px solid var(--grid-color)}.bar-graph-real-vals{position:relative}.bar-graph-x-cols{padding-top:11px;white-space:nowrap;overflow-x:visible;border-top:1px solid var(--grid-color)}.bg-dep-var{overflow:hidden;height:70px;width:100%;display:flex;padding:0 5px;font-size:14px;align-items:end;font-weight:500;justify-content:right;box-sizing:border-box}.bg-dep-var div{word-break:break-all;color:var(--accent-color)}.bg-dep-var:first-of-type{height:17px!important;position:relative;overflow:visible!important}.bg-dep-var:first-of-type:before{top:0;overflow:visible;position:absolute;content:attr(data-number);visibility:visible!important}.bg-dep-var:last-of-type{overflow:visible!important}.bg-dep-var:last-of-type:after{content:attr(data-number);margin-bottom:-7px}.graph-actual-bar{bottom:0;position:absolute;align-items:center;background:#fff}.graph-actual-bar div{height:0;width:80%;margin:0 auto;background:#afafaf;transition:height .3s ease-out}.graph-actual-bar:hover{z-index:10}.graph-actual-bar:hover:before{width:150px;display:block;font-weight:500;font-size:small;white-space:nowrap;background:#fff;padding:1px 2px 3px;content:attr(data-value);border-radius:3px}.bg-ind-var{font-size:small;font-weight:500;overflow:hidden;text-overflow:ellipsis;display:inline-block;color:var(--accent-color);transform:rotate(45deg)}.lbl-show{overflow:visible!important;transition:overflow .2s ease}.bar-graph-x-label{font-size:x-large;font-weight:500;padding-top:17px;text-align:center;overflow-x:hidden}\n", "@charset \"UTF-8\";@font-face{font-family:Roboto Condensed;src:url(https://d2ffvluimla00s.cloudfront.net/RobotoCondensed-VariableFont_wght.ttf) format(\"ttf\")}@font-face{font-family:Material Icons;font-style:normal;font-weight:400;src:url(https://d2ffvluimla00s.cloudfront.net/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format(\"woff2\")}.deebo-data-grid-section{font-family:Roboto Condensed,Arial,Helvetica,sans-serif}:host{--accent-color:rgb(50, 50, 50);--grid-color:rgb(199, 199, 199);--pad-left-base: 33px;--row-num-width: 75px;--reg-font-size: 17px }.relly{position:relative}.hide{display:none!important;max-height:0;max-width:0;top:0;left:0;opacity:0}.ovy{overflow:auto}.no-ovy-y{overflow-y:hidden!important}.pad-top-sm{padding-top:4px!important}.pad-top-ten{padding-top:10px!important}.pad-top-teen{padding-top:17px}.pad-top-thirty,.pad-top-trey{padding-top:33px}.pad-top-much{padding-top:75px}.o-visible{overflow:visible}.dontwrap{white-space:nowrap}.inline-b{display:inline-block}.inline{display:inline}.half-wid{width:50%;vertical-align:top;display:inline-block}.qtr-wid{width:25%;vertical-align:top;display:inline-block}.third-wid{width:33.3%;vertical-align:top;display:inline-block}.two-third-wid{width:66.6%;vertical-align:top;display:inline-block}.three-qtr-wid{width:75%;vertical-align:top;display:inline-block}.v-top{vertical-align:top!important}.v-mid{vertical-align:middle!important}.v-bot{vertical-align:bottom!important}.lg-text{font-size:larger}.xlg-text{font-size:x-large!important}.md-text{font-size:var(--reg-font-size)!important}.small-text{font-size:small}.tiny-text{font-size:x-small}.invisible{visibility:hidden}.flex-center{display:flex;justify-content:center;align-items:center}.flex-item{flex:1 1 auto}.o-x-hidden{overflow-x:hidden!important}.no-weight{font-weight:400!important}.semi-heavy{font-weight:500!important}.heavy{font-weight:700!important}.marauto{margin:0 auto}.center{text-align:center}.left{text-align:left}.right{text-align:right}.btn-reset{border:none;color:#fff;padding:7px 11px;background:maroon}.error-message{color:maroon;font-weight:500}.success{color:green;font-weight:500}.neutral{color:var(--accent-color)}input,select{border:none;padding:4px;border-radius:3px;box-sizing:border-box;font-family:Roboto Condensed,Arial,Helvetica,sans-serif;box-shadow:0 0 1px 1px #afafaf;-moz-box-shadow:0 0 1px 1px #afafaf;-webkit-box-shadow:0 0 1px 1px #afafaf}input[type=radio],input[type=checkbox]{cursor:pointer;box-shadow:none!important;-moz-box-shadow:none!important;-webkit-box-shadow:none!important}button{cursor:pointer}button:focus,input:focus,select:focus,textarea:focus,a:focus{outline-width:0}button:disabled,input:disabled,select:disabled{opacity:.5;cursor:not-allowed}.prevent{opacity:.5;cursor:not-allowed;pointer-events:none}.controls{text-align:right;padding:16px 11px 6px 1px;max-width:100%;clear:both;overflow-x:auto;white-space:nowrap}.controls button{font-size:var(--reg-font-size);margin-right:31px;vertical-align:middle}.controls button span{vertical-align:middle}.controls button:last-of-type{margin-right:0}.data-table{margin-top:11px;overflow:hidden;box-shadow:0 -1px 3px 1px var(--grid-color);-moz-box-shadow:0 -1px 3px 1px var(--grid-color);-webkit-box-shadow:0 -1px 3px 1px var(--grid-color)}.sel-rows-checked{color:#00a8f399!important}.save-hilite{padding:2px 4px;border-radius:3px;background:#ebebeb;box-shadow:0 0 3px 1px var(--accent-color);-moz-box-shadow:0 0px 3px 1px var(--accent-color);-webkit-box-shadow:0 0px 3px 1px var(--accent-color)}.btn-ctrl-sel-rows,.btn-export-or-print{border:none;padding:3px 4px;border-radius:3px;background:#f5f5f5;vertical-align:middle;box-shadow:0 0 2px 1px var(--accent-color);-moz-box-shadow:0 0 2px 1px var(--accent-color);-webkit-box-shadow:0 0 2px 1px var(--accent-color)}.deebo-dd-contain-div:last-of-type{margin-right:0!important}.btn-export{width:100%;text-transform:uppercase}.btn-export:hover{text-decoration:underline}.btn-ctrl-sel-rows:hover,.btn-export-or-print:hover{background:#ebebeb;box-shadow:0 0 6px 2px gray;-moz-box-shadow:0 0 6px 2px gray;-webkit-box-shadow:0 0 6px 2px gray}.btn-center-selected{padding:2px 4px;border-radius:5px;background:#f5f5f5;box-shadow:0 0 6px 2px gray;-moz-box-shadow:0 0 6px 2px gray;-webkit-box-shadow:0 0 6px 2px gray}.btn-ctrl-sel-rows .material-icons{font-size:18px;font-weight:600;vertical-align:middle}.btn-ctrl-sel-rows .material-icons:not(.error-message){color:var(--accent-color)}.data-table-headers{cursor:pointer;white-space:nowrap;border-bottom:1px solid var(--grid-color)}.data-table-row{white-space:nowrap}.data-table-row:hover,.data-table-row .col-item-freeze:hover{background:#f3f3f3}.data-row-selected{background:#d6d6d6!important}.table-working{opacity:.1;pointer-events:none}.select-row-check{left:9px;z-index:10;cursor:pointer;margin:0;position:absolute;padding:0!important}.gb-row-num{left:2px;z-index:10;cursor:pointer;margin:0;font-size:x-small;position:absolute;padding:0!important}.mock-html{width:50%;height:18px;margin:0 auto;border-radius:11px;background:var(--grid-color)}.abs-right{top:7px;right:7px;position:absolute}.has-symbol:after{content:attr(data-symbol);padding-left:3px}.has-symbol-b:before{content:attr(data-symbol);padding-right:3px}.data-table-row-no-data{font-size:xx-large;color:gray;font-weight:500;text-shadow:-1px -1px var(--accent-color)}.data-row-selected .col-item-freeze,.data-row-selected .data-cell,.data-row-selected:hover,.data-row-selected .col-item-freeze:hover,.data-row-selected .data-cell:hover{background:#d6d6d6!important}.data-table-headers .col-item-freeze:first-of-type{border-bottom:1px solid var(--grid-color)}.col-header{z-index:2;width:125px;overflow:auto;cursor:grab;padding:7px 3px;text-align:center;position:relative;box-sizing:border-box;display:inline-block;vertical-align:top;white-space:pre-wrap;word-wrap:break-word;background:#fafafa;border-right:1px solid var(--grid-color)}.col-header button,.col-header span,.col-header select{cursor:pointer;vertical-align:middle}.col-header input{vertical-align:middle}.col-header-img-container{overflow-y:hidden;text-align:center;display:inline-block;vertical-align:middle;background-size:cover;background-position:center;background-repeat:no-repeat}.col-header-minimized{width:0!important;height:0!important;padding:0!important;overflow:hidden!important;border-bottom:none!important;border-right:none!important;transition:width .3s ease}.btn-maximize-col{border:none;border-radius:5px;background:#f5f5f5;box-shadow:0 0 3px 2px gray;font-size:var(--reg-font-size);margin-right:27px;padding:4px}.no-btn{border:none;background:none}.col-item-freeze{left:0;z-index:3;position:sticky;background:#fff;box-shadow:2px 0 3px 0 var(--grid-color);-moz-box-shadow:2px 0px 3px 0px var(--grid-color);-webkit-box-shadow:2px 0px 3px 0px var(--grid-color)}.col-header input,.select-filter{width:40%;margin:11px 0 1px}.sel-fil-container{z-index:5}.edit-input-option-cont{left:0;right:0}.edit-input-opt button{width:100%;font-size:15px;padding:11px 0 11px 17px;text-align:left!important}.selfil-opt-contain,.edit-input-option-cont{overflow:auto;max-height:240px;border-radius:5px;position:absolute;background:#fff;box-shadow:0 1px 3px 1px var(--grid-color);-moz-box-shadow:0 1px 3px 1px var(--grid-color);-webkit-box-shadow:0 1px 3px 1px var(--grid-color)}.selfil-div,.edit-input-opt{cursor:pointer;text-align:left;border-bottom:1px solid var(--grid-color)}.selfil-div:hover,.edit-input-opt:hover{background:#ebebeb}.selfil-div:last-of-type,.edit-input-opt:last-of-type{border-bottom:none}.selfil-div label{width:calc(100% - 22px);font-size:15px;cursor:pointer;padding:11px;display:inline-block}.selfil-div label input[type=checkbox]{margin-right:11px;vertical-align:middle}.select-filter-comparator{width:36px;z-index:3;opacity:0;position:relative;margin:11px 0 1px 15px}.btn-fil-comp{top:2px;left:-36px;border:none;position:absolute;background:#fafafa}.btn-fil-comp i{color:var(--accent-color)}@media screen and (min-width:960px){.col-header input,.select-filter,.select-filter-comparator{margin-top:7px;margin-bottom:1px}}.data-cell{width:125px;padding:11px 6px 11px 17px;overflow:auto;font-size:15px;word-wrap:break-word;white-space:pre-line;vertical-align:top;box-sizing:border-box;display:inline-flex;align-items:center;border-right:1px solid var(--grid-color);border-bottom:1px solid var(--grid-color)}input.edit-input{border-radius:0}.data-cell:focus,input.edit-input:focus{outline:1px solid #00a8f3}.dragger-cell-focused{background:#00a8f333;border-left:1px solid #00a8f3;border-right:1px solid #00a8f3!important}.focused-cell-dragger{width:9px;height:9px;cursor:crosshair;position:absolute;background:#00a8f3;box-shadow:0 0 1px 1px var(--accent-color);-moz-box-shadow:0 0 1px 1px var(--accent-color);-webkit-box-shadow:0 0 1px 1px var(--accent-color)}.holding-check{padding-left:44px}.data-cell-riiight{padding:11px 17px 11px 6px;justify-content:right}.data-cell-ceeenter{padding:11px 6px;justify-content:center!important}.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-min-col{cursor:pointer;top:0;right:2px;font-size:20px;border:none;background:none;position:absolute;padding:0 2px 5px 0;color:var(--accent-color)}.btn-min-col-hide{z-index:0;visibility:hidden;pointer-events:none}.btn-freeze-col{float:left;border:none;cursor:pointer;background:none}.btn-freeze-col .material-icons{font-size:16px;color:var(--accent-color)}.hidden-cols{max-width:100%;overflow-x:auto;clear:both;white-space:nowrap;padding:17px 15px 5px 4px}.hidden-cols button:first-of-type:before{content:\"Hidden Columns\";font-size:12px;font-weight:600;padding-right:11px;vertical-align:middle}.col-header span{word-wrap:break-word;vertical-align:middle;font-size:var(--reg-font-size)}.o-ins-div span,.o-ins-div i{vertical-align:middle;font-size:16px}.aux-chip{text-align:center;padding-bottom:33px;word-wrap:break-word;white-space:pre-wrap}.insights{padding:17px 15px}.insight-field{min-height:100px;padding:21px 0;font-size:large;white-space:pre-wrap;word-wrap:break-word;border-bottom:1px solid lightgray}@media screen and (max-width:760px){.insight-field:first-of-type{padding-top:7px}}@media screen and (min-width:760px){.insight-field-row{border-bottom:1px solid lightgray}.insight-field,.aux-chip{width:50%;vertical-align:top;display:inline-block;border-bottom:none}}@media screen and (min-width:1024px){.insight-field,.aux-chip{width:33%}}.chart-label-cont{padding-top:10px;text-align:center}.pie-piece-label{padding-top:5px;margin-right:27px;display:inline-block}.pie-piece-label-sq{width:11px;height:11px;margin:0 0 0 2px;display:inline-block;vertical-align:middle}.pie-piece-label span{font-size:small}.pie-piece-label span:before{font-size:smaller;padding-right:4px;font-weight:600;content:attr(data-percent)}.pie-layover{border-radius:50%;background:#fff;position:absolute;padding:5px!important;display:flex;font-size:17px;align-items:center;overflow:hidden;box-sizing:border-box;justify-content:center;color:var(--accent-color)}.pie-layover div{font-weight:500;padding:0!important}.ins-even-dist-ct{font-size:24px;font-weight:500}.line-graph-container{padding:11px 0 33px 7px!important;box-sizing:border-box;margin-left:11px}.lg-title-cont{padding:0!important;text-align:center;margin:17px 11px}.lg-n-marker-cont{width:60px;position:relative;padding:0!important;box-sizing:border-box;display:inline-block;vertical-align:top}.lg-n-marker-cont:before{top:45%;left:-37px;display:block;position:absolute;white-space:nowrap;color:var(--grid-color);content:attr(data-column);transform:rotate(-90deg)}.lg-n-marker,.lg-n-marker-h{padding:0 11px 0 0!important;font-size:small;position:relative;text-align:right;white-space:nowrap;box-sizing:border-box}.line-graph{width:calc(92% - 60px);position:relative;box-sizing:border-box;display:inline-block;vertical-align:top;padding:0!important;border-left:1px solid var(--accent-color);border-bottom:1px solid var(--accent-color)}.lg-lbl-x{left:0;right:0;bottom:-45px;font-size:small;font-weight:500;text-align:center;position:absolute;padding:0!important}.btn-line-graph-opts{margin:0;padding:4px;background:none;border-top:1px solid var(--accent-color);border-left:1px solid var(--accent-color);border-bottom:1px solid var(--accent-color)}.sp-line-graph-title{margin-top:7px;font-size:large;text-decoration:underline}.lg-dt-marker,.lg-dt-marker-h,.vd-n-marker,.vd-n-marker-h{bottom:-22px;font-size:small;position:absolute;text-align:center;padding:0!important;display:inline-block;box-sizing:border-box}.lg-dt-marker-h,.vd-n-marker-h{visibility:hidden}.lg-dt-marker.visible-marker{margin-left:21px}.lg-n-marker-h{height:0;visibility:hidden}.visible-marker{z-index:2;font-weight:600;background:#fff;height:unset!important;padding:1px 2px!important;visibility:visible!important;box-shadow:0 0 2px 1px #afafaf;-moz-box-shadow:0 0 2px 1px #afafaf;-webkit-box-shadow:0 0 2px 1px #afafaf}.visible-marker:before{font-weight:600}.lg-dt-marker:before{top:-15px;left:0;content:\"|\";position:absolute}.vd-n-marker:before{top:-15px;left:50%;content:\"|\";left:calc(50% - 2px);position:absolute}.lg-n-marker:before{top:-4px;right:-3px;content:\"-\";font-weight:600;font-size:large;position:absolute;background:#fff}.btn-line-graph-opts:hover{background:#d6d6d6;transition:background .3s ease}.btn-line-graph-opts:last-of-type{border-right:1px solid var(--accent-color)}.btn-lg-sel{color:#fff!important;background:var(--accent-color);box-shadow:0 0 2px 1px #afafaf;-moz-box-shadow:0 0 2px 1px #afafaf;-webkit-box-shadow:0 0 2px 1px #afafaf}.btn-lg-sel:hover{background:var(--accent-color)}.lg-plot{height:8px;width:8px;opacity:.3;cursor:pointer;border-radius:50%;position:absolute;padding:0!important;background:var(--accent-color)}.lg-plot:hover{z-index:100;opacity:1!important}.lg-plot:hover:after{padding:3px;display:inline-block;font-size:small;border-radius:5px;margin:0 0 0 25px;font-weight:700;content:attr(data-number);background:#fff!important;box-shadow:0 0 2px 1px #afafaf;-moz-box-shadow:0 0 2px 1px #afafaf;-webkit-box-shadow:0 0 2px 1px #afafaf}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:\"liga\";-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
4213
4234
|
}
|
|
4214
4235
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: LineGraphComponent, decorators: [{
|
|
4215
4236
|
type: Component,
|
|
4216
4237
|
args: [{ selector: 'app-line-graph-component', imports: [CommonModule, FormsModule], template: "<div #statOptsCont class=\"center stat-opt-contain\">\r\n @for(stat of statOpts; track stat){\r\n <div [style.width]=\"statBtnWid\" class=\"inline-b center\">\r\n <button class=\"no-btn stat-opt-btn\" (click)=\"handleStatChange(stat)\"\r\n [class.stat-opt-btn-active]=\"selStat === stat\">{{common.titleCase(stat)}}</button>\r\n </div>\r\n }\r\n</div>\r\n<div #auxOptsCont style=\"padding-bottom: 17px;\">\r\n <div class=\"qtr-wid center v-mid\">\r\n @if(valOpts().length){\r\n <select [name]=\"'valSel' + common.elifyCol(column)\" [id]=\"'valSel' + common.elifyCol(column)\" [(ngModel)]=\"selDdVal\"\r\n (change)=\"handleValSelChange($any($event).target.value)\" style=\"max-width: 80%\">\r\n @for(o of valOpts(); track o){\r\n <option [value]=\"o\" [selected]=\"o === selDdVal\">{{o}}</option>\r\n }\r\n </select>\r\n }\r\n </div><div class=\"qtr-wid center v-mid\">\r\n <select [name]=\"'timeDiff' + common.elifyCol(column)\" [id]=\"'timeDiff' + common.elifyCol(column)\" \r\n (change)=\"handleTimeDiffChange($any($event).target.value)\" style=\"max-width: 88%\" [(ngModel)]=\"selTDOpt\">\r\n <option value=\"-1\" [selected]=\"selTDOpt === -1\">All time</option>\r\n @for(t of timeDiffOpts; track t.val){\r\n <option [value]=\"t.val\" [selected]=\"t.val === selTDOpt\">{{t.text}}</option>\r\n }\r\n </select>\r\n </div><div class=\"half-wid v-mid center dontwrap {{currentDeltaCls}}\" [innerHTML]=\"currentDelta\"></div>\r\n</div>\r\n<div #lgContain [id]=\"'lineGraph' + common.elifyCol(column)\" class=\"inner-bg-contain\" style=\"margin-bottom: 33px;\">\r\n <div #yAxis class=\"lg-n-marker-cont\" [style.height]=\"totalHgt + 'px'\">\r\n @for(n of naddedtks(); track n.value; let i = $index){\r\n <div class=\"bg-dep-var\" [class.invisible]=\"n.value && n.value === maxYVal\" [attr.data-number]=\"n.value\"\r\n [style.padding-bottom]=\"i < 4 ? (((i*4)+1) + 'px') : '0px'\">\r\n {{(n.value === '0') ? '' : n.value}}\r\n </div>\r\n }\r\n @for(n of nmrks; track n){\r\n <div class=\"lg-n-marker-h\">{{n.value}}</div>\r\n }\r\n </div><div #lineGraph class=\"line-graph\" [style.height]=\"totalHgt + 'px'\">\r\n @for(n of dtmrks; track n){\r\n <div class=\"lg-dt-marker\" [class.visible-marker]=\"n.visible\" [style.left]=\"n.left\">{{n.value}}</div>\r\n }\r\n @for(n of dtmrksH; track n){\r\n <div class=\"lg-dt-marker-h\" [class.visible-marker]=\"n.visible\" [style.left]=\"n.left\">{{n.value}}</div>\r\n }\r\n @if(lblTxt){\r\n <div class=\"lg-lbl-x\">{{lblTxt}}</div>\r\n }\r\n <canvas #lgCanvas class=\"lg-canvas\" [height]=\"totalHgt\"></canvas>\r\n @for(p of plots(); track $index){\r\n <div class=\"lg-plot lg-plot-opq\" [attr.data-number]=\"p.number\" (mouseenter)=\"showDotPlotInfo(p.date, p.number)\" \r\n (mouseleave)=\"hideDotPlotInfo()\" [ngStyle]=\"{'bottom': (p.bottom-4) + 'px', 'left': (p.left-4) + 'px' }\">{{p.value}}</div>\r\n }\r\n @if(!plots().length){\r\n <div class=\"flex-center lg-msg\" [style.height]=\"totalHgt + 'px'\"><div>{{graphMsg}}</div></div>\r\n }\r\n </div>\r\n</div>", styles: [".lg-plot-opq{opacity:0;background:#fff}.lg-plot-opq:hover{opacity:1!important;background:var(--grid-color);transition:opacity .2s ease}.lg-canvas{top:0;left:0;bottom:0;position:absolute}.lg-msg{top:0;left:0;right:0;position:absolute;color:var(--accent-color)}\n", ".inner-bg-contain{position:relative;box-sizing:border-box}.inner-bg-contain:before{top:50%;left:-48px;font-size:x-large;position:absolute;display:block;color:var(--grid-color);content:attr(data-yaxis);transform:rotate(-90deg)}.stat-opt-contain{white-space:nowrap;margin-bottom:27px}.stat-opt-btn{width:100%;padding-bottom:3px;box-sizing:border-box}.stat-opt-btn-active{font-weight:700;border-bottom:2px solid var(--grid-color)}.bar-graph-y-cols{z-index:5;margin-left:5px;overflow:visible;position:relative;vertical-align:top;box-sizing:border-box;display:inline-block;border-right:1px solid var(--grid-color)}.bar-graph-real-vals{position:relative}.bar-graph-x-cols{padding-top:11px;white-space:nowrap;overflow-x:visible;border-top:1px solid var(--grid-color)}.bg-dep-var{overflow:hidden;height:70px;width:100%;display:flex;padding:0 5px;font-size:14px;align-items:end;font-weight:500;justify-content:right;box-sizing:border-box}.bg-dep-var div{word-break:break-all;color:var(--accent-color)}.bg-dep-var:first-of-type{height:17px!important;position:relative;overflow:visible!important}.bg-dep-var:first-of-type:before{top:0;overflow:visible;position:absolute;content:attr(data-number);visibility:visible!important}.bg-dep-var:last-of-type{overflow:visible!important}.bg-dep-var:last-of-type:after{content:attr(data-number);margin-bottom:-7px}.graph-actual-bar{bottom:0;position:absolute;align-items:center;background:#fff}.graph-actual-bar div{height:0;width:80%;margin:0 auto;background:#afafaf;transition:height .3s ease-out}.graph-actual-bar:hover{z-index:10}.graph-actual-bar:hover:before{width:150px;display:block;font-weight:500;font-size:small;white-space:nowrap;background:#fff;padding:1px 2px 3px;content:attr(data-value);border-radius:3px}.bg-ind-var{font-size:small;font-weight:500;overflow:hidden;text-overflow:ellipsis;display:inline-block;color:var(--accent-color);transform:rotate(45deg)}.lbl-show{overflow:visible!important;transition:overflow .2s ease}.bar-graph-x-label{font-size:x-large;font-weight:500;padding-top:17px;text-align:center;overflow-x:hidden}\n", "@charset \"UTF-8\";@font-face{font-family:Roboto Condensed;src:url(https://d2ffvluimla00s.cloudfront.net/RobotoCondensed-VariableFont_wght.ttf) format(\"ttf\")}@font-face{font-family:Material Icons;font-style:normal;font-weight:400;src:url(https://d2ffvluimla00s.cloudfront.net/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format(\"woff2\")}.deebo-data-grid-section{font-family:Roboto Condensed,Arial,Helvetica,sans-serif}:host{--accent-color:rgb(50, 50, 50);--grid-color:rgb(199, 199, 199);--pad-left-base: 33px;--row-num-width: 75px;--reg-font-size: 17px }.relly{position:relative}.hide{display:none!important;max-height:0;max-width:0;top:0;left:0;opacity:0}.ovy{overflow:auto}.no-ovy-y{overflow-y:hidden!important}.pad-top-sm{padding-top:4px!important}.pad-top-ten{padding-top:10px!important}.pad-top-teen{padding-top:17px}.pad-top-thirty,.pad-top-trey{padding-top:33px}.pad-top-much{padding-top:75px}.o-visible{overflow:visible}.dontwrap{white-space:nowrap}.inline-b{display:inline-block}.inline{display:inline}.half-wid{width:50%;vertical-align:top;display:inline-block}.qtr-wid{width:25%;vertical-align:top;display:inline-block}.third-wid{width:33.3%;vertical-align:top;display:inline-block}.two-third-wid{width:66.6%;vertical-align:top;display:inline-block}.three-qtr-wid{width:75%;vertical-align:top;display:inline-block}.v-top{vertical-align:top!important}.v-mid{vertical-align:middle!important}.v-bot{vertical-align:bottom!important}.lg-text{font-size:larger}.xlg-text{font-size:x-large!important}.md-text{font-size:var(--reg-font-size)!important}.small-text{font-size:small}.tiny-text{font-size:x-small}.invisible{visibility:hidden}.flex-center{display:flex;justify-content:center;align-items:center}.flex-item{flex:1 1 auto}.o-x-hidden{overflow-x:hidden!important}.no-weight{font-weight:400!important}.semi-heavy{font-weight:500!important}.heavy{font-weight:700!important}.marauto{margin:0 auto}.center{text-align:center}.left{text-align:left}.right{text-align:right}.btn-reset{border:none;color:#fff;padding:7px 11px;background:maroon}.error-message{color:maroon;font-weight:500}.success{color:green;font-weight:500}.neutral{color:var(--accent-color)}input,select{border:none;padding:4px;border-radius:3px;box-sizing:border-box;font-family:Roboto Condensed,Arial,Helvetica,sans-serif;box-shadow:0 0 1px 1px #afafaf;-moz-box-shadow:0 0 1px 1px #afafaf;-webkit-box-shadow:0 0 1px 1px #afafaf}input[type=radio],input[type=checkbox]{cursor:pointer;box-shadow:none!important;-moz-box-shadow:none!important;-webkit-box-shadow:none!important}button{cursor:pointer}button:focus,input:focus,select:focus,textarea:focus,a:focus{outline-width:0}button:disabled,input:disabled,select:disabled{opacity:.5;cursor:not-allowed}.prevent{opacity:.5;cursor:not-allowed;pointer-events:none}.controls{text-align:right;padding:16px 11px 6px 1px;max-width:100%;clear:both;overflow-x:auto;white-space:nowrap}.controls button{font-size:var(--reg-font-size);margin-right:31px;vertical-align:middle}.controls button span{vertical-align:middle}.controls button:last-of-type{margin-right:0}.data-table{margin-top:11px;overflow:hidden;box-shadow:0 -1px 3px 1px var(--grid-color);-moz-box-shadow:0 -1px 3px 1px var(--grid-color);-webkit-box-shadow:0 -1px 3px 1px var(--grid-color)}.sel-rows-checked{color:#00a8f399!important}.save-hilite{padding:2px 4px;border-radius:3px;background:#ebebeb;box-shadow:0 0 3px 1px var(--accent-color);-moz-box-shadow:0 0px 3px 1px var(--accent-color);-webkit-box-shadow:0 0px 3px 1px var(--accent-color)}.btn-ctrl-sel-rows,.btn-export-or-print{border:none;padding:3px 4px;border-radius:3px;background:#f5f5f5;vertical-align:middle;box-shadow:0 0 2px 1px var(--accent-color);-moz-box-shadow:0 0 2px 1px var(--accent-color);-webkit-box-shadow:0 0 2px 1px var(--accent-color)}.deebo-dd-contain-div:last-of-type{margin-right:0!important}.btn-export{width:100%;text-transform:uppercase}.btn-export:hover{text-decoration:underline}.btn-ctrl-sel-rows:hover,.btn-export-or-print:hover{background:#ebebeb;box-shadow:0 0 6px 2px gray;-moz-box-shadow:0 0 6px 2px gray;-webkit-box-shadow:0 0 6px 2px gray}.btn-center-selected{padding:2px 4px;border-radius:5px;background:#f5f5f5;box-shadow:0 0 6px 2px gray;-moz-box-shadow:0 0 6px 2px gray;-webkit-box-shadow:0 0 6px 2px gray}.btn-ctrl-sel-rows .material-icons{font-size:18px;font-weight:600;vertical-align:middle}.btn-ctrl-sel-rows .material-icons:not(.error-message){color:var(--accent-color)}.data-table-headers{cursor:pointer;white-space:nowrap;border-bottom:1px solid var(--grid-color)}.data-table-row{white-space:nowrap}.data-table-row:hover,.data-table-row .col-item-freeze:hover{background:#f3f3f3}.data-row-selected{background:#d6d6d6!important}.table-working{opacity:.1;pointer-events:none}.select-row-check{left:9px;z-index:10;cursor:pointer;margin:0;position:absolute;padding:0!important}.gb-row-num{left:2px;z-index:10;cursor:pointer;margin:0;font-size:x-small;position:absolute;padding:0!important}.mock-html{width:50%;height:18px;margin:0 auto;border-radius:11px;background:var(--grid-color)}.abs-right{top:7px;right:7px;position:absolute}.has-symbol:after{content:attr(data-symbol);padding-left:3px}.has-symbol-b:before{content:attr(data-symbol);padding-right:3px}.data-table-row-no-data{font-size:xx-large;color:gray;font-weight:500;text-shadow:-1px -1px var(--accent-color)}.data-row-selected .col-item-freeze,.data-row-selected .data-cell,.data-row-selected:hover,.data-row-selected .col-item-freeze:hover,.data-row-selected .data-cell:hover{background:#d6d6d6!important}.data-table-headers .col-item-freeze:first-of-type{border-bottom:1px solid var(--grid-color)}.col-header{z-index:2;width:125px;overflow:auto;cursor:grab;padding:7px 3px;text-align:center;position:relative;box-sizing:border-box;display:inline-block;vertical-align:top;white-space:pre-wrap;word-wrap:break-word;background:#fafafa;border-right:1px solid var(--grid-color)}.col-header button,.col-header span,.col-header select{cursor:pointer;vertical-align:middle}.col-header input{vertical-align:middle}.col-header-img-container{overflow-y:hidden;text-align:center;display:inline-block;vertical-align:middle;background-size:cover;background-position:center;background-repeat:no-repeat}.col-header-minimized{width:0!important;height:0!important;padding:0!important;overflow:hidden!important;border-bottom:none!important;border-right:none!important;transition:width .3s ease}.btn-maximize-col{border:none;border-radius:5px;background:#f5f5f5;box-shadow:0 0 3px 2px gray;font-size:var(--reg-font-size);margin-right:27px;padding:4px}.no-btn{border:none;background:none}.col-item-freeze{left:0;z-index:3;position:sticky;background:#fff;box-shadow:2px 0 3px 0 var(--grid-color);-moz-box-shadow:2px 0px 3px 0px var(--grid-color);-webkit-box-shadow:2px 0px 3px 0px var(--grid-color)}.col-header input,.select-filter{width:40%;margin:11px 0 1px}.sel-fil-container{z-index:5}.edit-input-option-cont{left:0;right:0}.edit-input-opt button{width:100%;font-size:15px;padding:11px 0 11px 17px;text-align:left!important}.selfil-opt-contain,.edit-input-option-cont{overflow:auto;max-height:240px;border-radius:5px;position:absolute;background:#fff;box-shadow:0 1px 3px 1px var(--grid-color);-moz-box-shadow:0 1px 3px 1px var(--grid-color);-webkit-box-shadow:0 1px 3px 1px var(--grid-color)}.selfil-div,.edit-input-opt{cursor:pointer;text-align:left;border-bottom:1px solid var(--grid-color)}.selfil-div:hover,.edit-input-opt:hover{background:#ebebeb}.selfil-div:last-of-type,.edit-input-opt:last-of-type{border-bottom:none}.selfil-div label{width:calc(100% - 22px);font-size:15px;cursor:pointer;padding:11px;display:inline-block}.selfil-div label input[type=checkbox]{margin-right:11px;vertical-align:middle}.select-filter-comparator{width:36px;z-index:3;opacity:0;position:relative;margin:11px 0 1px 15px}.btn-fil-comp{top:2px;left:-36px;border:none;position:absolute;background:#fafafa}.btn-fil-comp i{color:var(--accent-color)}@media screen and (min-width:960px){.col-header input,.select-filter,.select-filter-comparator{margin-top:7px;margin-bottom:1px}}.data-cell{width:125px;padding:11px 6px 11px 17px;overflow:auto;font-size:15px;word-wrap:break-word;white-space:pre-line;vertical-align:top;box-sizing:border-box;display:inline-flex;align-items:center;border-right:1px solid var(--grid-color);border-bottom:1px solid var(--grid-color)}input.edit-input{border-radius:0}.data-cell:focus,input.edit-input:focus{outline:1px solid #00a8f3}.dragger-cell-focused{background:#00a8f333;border-left:1px solid #00a8f3;border-right:1px solid #00a8f3!important}.focused-cell-dragger{width:9px;height:9px;cursor:crosshair;position:absolute;background:#00a8f3;box-shadow:0 0 1px 1px var(--accent-color);-moz-box-shadow:0 0 1px 1px var(--accent-color);-webkit-box-shadow:0 0 1px 1px var(--accent-color)}.holding-check{padding-left:44px}.data-cell-riiight{padding:11px 17px 11px 6px;justify-content:right}.data-cell-ceeenter{padding:11px 6px;justify-content:center!important}.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-min-col{cursor:pointer;top:0;right:2px;font-size:20px;border:none;background:none;position:absolute;padding:0 2px 5px 0;color:var(--accent-color)}.btn-min-col-hide{z-index:0;visibility:hidden;pointer-events:none}.btn-freeze-col{float:left;border:none;cursor:pointer;background:none}.btn-freeze-col .material-icons{font-size:16px;color:var(--accent-color)}.hidden-cols{max-width:100%;overflow-x:auto;clear:both;white-space:nowrap;padding:17px 15px 5px 4px}.hidden-cols button:first-of-type:before{content:\"Hidden Columns\";font-size:12px;font-weight:600;padding-right:11px;vertical-align:middle}.col-header span{word-wrap:break-word;vertical-align:middle;font-size:var(--reg-font-size)}.o-ins-div span,.o-ins-div i{vertical-align:middle;font-size:16px}.aux-chip{text-align:center;padding-bottom:33px;word-wrap:break-word;white-space:pre-wrap}.insights{padding:17px 15px}.insight-field{min-height:100px;padding:21px 0;font-size:large;white-space:pre-wrap;word-wrap:break-word;border-bottom:1px solid lightgray}@media screen and (max-width:760px){.insight-field:first-of-type{padding-top:7px}}@media screen and (min-width:760px){.insight-field-row{border-bottom:1px solid lightgray}.insight-field,.aux-chip{width:50%;vertical-align:top;display:inline-block;border-bottom:none}}@media screen and (min-width:1024px){.insight-field,.aux-chip{width:33%}}.chart-label-cont{padding-top:10px;text-align:center}.pie-piece-label{padding-top:5px;margin-right:27px;display:inline-block}.pie-piece-label-sq{width:11px;height:11px;margin:0 0 0 2px;display:inline-block;vertical-align:middle}.pie-piece-label span{font-size:small}.pie-piece-label span:before{font-size:smaller;padding-right:4px;font-weight:600;content:attr(data-percent)}.pie-layover{border-radius:50%;background:#fff;position:absolute;padding:5px!important;display:flex;font-size:17px;align-items:center;overflow:hidden;box-sizing:border-box;justify-content:center;color:var(--accent-color)}.pie-layover div{font-weight:500;padding:0!important}.ins-even-dist-ct{font-size:24px;font-weight:500}.line-graph-container{padding:11px 0 33px 7px!important;box-sizing:border-box;margin-left:11px}.lg-title-cont{padding:0!important;text-align:center;margin:17px 11px}.lg-n-marker-cont{width:60px;position:relative;padding:0!important;box-sizing:border-box;display:inline-block;vertical-align:top}.lg-n-marker-cont:before{top:45%;left:-37px;display:block;position:absolute;white-space:nowrap;color:var(--grid-color);content:attr(data-column);transform:rotate(-90deg)}.lg-n-marker,.lg-n-marker-h{padding:0 11px 0 0!important;font-size:small;position:relative;text-align:right;white-space:nowrap;box-sizing:border-box}.line-graph{width:calc(92% - 60px);position:relative;box-sizing:border-box;display:inline-block;vertical-align:top;padding:0!important;border-left:1px solid var(--accent-color);border-bottom:1px solid var(--accent-color)}.lg-lbl-x{left:0;right:0;bottom:-45px;font-size:small;font-weight:500;text-align:center;position:absolute;padding:0!important}.btn-line-graph-opts{margin:0;padding:4px;background:none;border-top:1px solid var(--accent-color);border-left:1px solid var(--accent-color);border-bottom:1px solid var(--accent-color)}.sp-line-graph-title{margin-top:7px;font-size:large;text-decoration:underline}.lg-dt-marker,.lg-dt-marker-h,.vd-n-marker,.vd-n-marker-h{bottom:-22px;font-size:small;position:absolute;text-align:center;padding:0!important;display:inline-block;box-sizing:border-box}.lg-dt-marker-h,.vd-n-marker-h{visibility:hidden}.lg-dt-marker.visible-marker{margin-left:21px}.lg-n-marker-h{height:0;visibility:hidden}.visible-marker{z-index:2;font-weight:600;background:#fff;height:unset!important;padding:1px 2px!important;visibility:visible!important;box-shadow:0 0 2px 1px #afafaf;-moz-box-shadow:0 0 2px 1px #afafaf;-webkit-box-shadow:0 0 2px 1px #afafaf}.visible-marker:before{font-weight:600}.lg-dt-marker:before{top:-15px;left:0;content:\"|\";position:absolute}.vd-n-marker:before{top:-15px;left:50%;content:\"|\";left:calc(50% - 2px);position:absolute}.lg-n-marker:before{top:-4px;right:-3px;content:\"-\";font-weight:600;font-size:large;position:absolute;background:#fff}.btn-line-graph-opts:hover{background:#d6d6d6;transition:background .3s ease}.btn-line-graph-opts:last-of-type{border-right:1px solid var(--accent-color)}.btn-lg-sel{color:#fff!important;background:var(--accent-color);box-shadow:0 0 2px 1px #afafaf;-moz-box-shadow:0 0 2px 1px #afafaf;-webkit-box-shadow:0 0 2px 1px #afafaf}.btn-lg-sel:hover{background:var(--accent-color)}.lg-plot{height:8px;width:8px;opacity:.3;cursor:pointer;border-radius:50%;position:absolute;padding:0!important;background:var(--accent-color)}.lg-plot:hover{z-index:100;opacity:1!important}.lg-plot:hover:after{padding:3px;display:inline-block;font-size:small;border-radius:5px;margin:0 0 0 25px;font-weight:700;content:attr(data-number);background:#fff!important;box-shadow:0 0 2px 1px #afafaf;-moz-box-shadow:0 0 2px 1px #afafaf;-webkit-box-shadow:0 0 2px 1px #afafaf}.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"] }]
|
|
4217
|
-
}], ctorParameters: () => [{ type: CommonService }, { type: DataTableService }
|
|
4238
|
+
}], ctorParameters: () => [{ type: CommonService }, { type: DataTableService }], propDecorators: { onWindowResize: [{
|
|
4218
4239
|
type: HostListener,
|
|
4219
4240
|
args: ['window:resize', ['$event']]
|
|
4220
4241
|
}], data: [{
|
|
@@ -4466,7 +4487,7 @@ class ChartsAndGraphs {
|
|
|
4466
4487
|
"</b> row" + (dLen === 1 ? " " : "s ")) + filinfo?.split(", Sorted By")[0].trim());
|
|
4467
4488
|
}
|
|
4468
4489
|
}
|
|
4469
|
-
|
|
4490
|
+
ngAfterContentInit() {
|
|
4470
4491
|
setTimeout(() => {
|
|
4471
4492
|
let r = 0;
|
|
4472
4493
|
let c = 0;
|
|
@@ -4718,6 +4739,12 @@ class NgxDeebodata {
|
|
|
4718
4739
|
this.dataTableService.setTblBounds();
|
|
4719
4740
|
this.clearValidatedEdit();
|
|
4720
4741
|
}
|
|
4742
|
+
onWindowShiftKeydown(e) {
|
|
4743
|
+
this.dataTableService.shiftKeyDown = -1;
|
|
4744
|
+
}
|
|
4745
|
+
onWindowShiftKeyup(e) {
|
|
4746
|
+
this.dataTableService.shiftKeyDown = 1;
|
|
4747
|
+
}
|
|
4721
4748
|
constructor(dataTableService, tblDragService, common) {
|
|
4722
4749
|
this.dataTableService = dataTableService;
|
|
4723
4750
|
this.tblDragService = tblDragService;
|
|
@@ -4775,6 +4802,7 @@ class NgxDeebodata {
|
|
|
4775
4802
|
altRowColor = "";
|
|
4776
4803
|
myColumnSymbols = [];
|
|
4777
4804
|
myColumnStyles = [];
|
|
4805
|
+
myColumnValueColors = [];
|
|
4778
4806
|
pieGraphColors = [];
|
|
4779
4807
|
removePieCovers = false;
|
|
4780
4808
|
editable = true;
|
|
@@ -4810,6 +4838,8 @@ class NgxDeebodata {
|
|
|
4810
4838
|
this.dataTableService.columnSymbols = [...this.myColumnSymbols];
|
|
4811
4839
|
if (this.myColumnStyles)
|
|
4812
4840
|
this.dataTableService.columnStyles = [...this.myColumnStyles];
|
|
4841
|
+
if (this.myColumnValueColors)
|
|
4842
|
+
this.dataTableService.columnValueColors = [...this.myColumnValueColors];
|
|
4813
4843
|
if (this.pieGraphColors)
|
|
4814
4844
|
this.dataTableService.pieGraphColors = [...this.pieGraphColors];
|
|
4815
4845
|
this.dataTableService.removePieCovers = this.removePieCovers;
|
|
@@ -6128,15 +6158,18 @@ class NgxDeebodata {
|
|
|
6128
6158
|
if (e && this.common.isTabKey(e)) {
|
|
6129
6159
|
const cell = document.getElementsByClassName("dragger-cell-focused")[0];
|
|
6130
6160
|
if (cell) {
|
|
6131
|
-
const nxtCell = cell
|
|
6161
|
+
const nxtCell = this.dataTableService.shiftKeyDown === 1 ? cell?.
|
|
6162
|
+
parentElement?.nextElementSibling?.firstElementChild : cell?.
|
|
6163
|
+
parentElement?.previousElementSibling?.firstElementChild;
|
|
6132
6164
|
this.dataTableService.autoScrollOnEdit = true;
|
|
6133
6165
|
if (nxtCell) {
|
|
6134
6166
|
setTimeout(() => { nxtCell.focus(); this.dataTableService.autoScrollOnEdit = false; });
|
|
6135
6167
|
}
|
|
6136
6168
|
else {
|
|
6137
|
-
const nxtRow = cell.parentElement?.parentElement?.nextElementSibling
|
|
6169
|
+
const nxtRow = this.dataTableService.shiftKeyDown === 1 ? cell.parentElement?.parentElement?.nextElementSibling :
|
|
6170
|
+
cell.parentElement?.parentElement?.previousElementSibling;
|
|
6138
6171
|
if (nxtRow) {
|
|
6139
|
-
this.dataTableService.scrollBodyForTabbing();
|
|
6172
|
+
this.dataTableService.scrollBodyForTabbing(this.dataTableService.shiftKeyDown);
|
|
6140
6173
|
const nxtRowCell = document.querySelector("#" + nxtRow.id + " .data-cell:not(.col-header-minimized)");
|
|
6141
6174
|
if (nxtRowCell)
|
|
6142
6175
|
nxtRowCell.focus();
|
|
@@ -6448,7 +6481,7 @@ class NgxDeebodata {
|
|
|
6448
6481
|
rule4 = ".row-group-panel{background: " + co2 + "}";
|
|
6449
6482
|
if (co1)
|
|
6450
6483
|
rule4 = ".row-group-panel{background: " + co2 + "; border-bottom: 1px dotted " + co1 + "}";
|
|
6451
|
-
rule5 = ".data-cell{ border-bottom: 1px solid " + co2 + "; border-right: 1px solid " + co2 + "}";
|
|
6484
|
+
rule5 = ".data-cell{ border-bottom: 1px solid " + co2 + " !important; border-right: 1px solid " + co2 + " !important}";
|
|
6452
6485
|
}
|
|
6453
6486
|
if (this.altRowColor)
|
|
6454
6487
|
rule7 = ".data-table-row:not(.data-row-selected):nth-of-type(even){background:" + this.altRowColor + "}";
|
|
@@ -6813,7 +6846,7 @@ class NgxDeebodata {
|
|
|
6813
6846
|
this.validationSub.unsubscribe();
|
|
6814
6847
|
}
|
|
6815
6848
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: NgxDeebodata, deps: [{ token: DataTableService }, { token: TableDragService }, { token: CommonService }], target: i0.ɵɵFactoryTarget.Component });
|
|
6816
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: NgxDeebodata, isStandalone: true, selector: "ngx-deebodata", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, licenseKey: { classPropertyName: "licenseKey", publicName: "licenseKey", isSignal: false, isRequired: false, transformFunction: null }, color1: { classPropertyName: "color1", publicName: "color1", isSignal: false, isRequired: false, transformFunction: null }, color2: { classPropertyName: "color2", publicName: "color2", isSignal: false, isRequired: false, transformFunction: null }, primaryKey: { classPropertyName: "primaryKey", publicName: "primaryKey", isSignal: false, isRequired: false, transformFunction: null }, defRowHgt: { classPropertyName: "defRowHgt", publicName: "defRowHgt", isSignal: false, isRequired: false, transformFunction: null }, defGridHgt: { classPropertyName: "defGridHgt", publicName: "defGridHgt", isSignal: false, isRequired: false, transformFunction: null }, altRowColor: { classPropertyName: "altRowColor", publicName: "altRowColor", isSignal: false, isRequired: false, transformFunction: null }, myColumnSymbols: { classPropertyName: "myColumnSymbols", publicName: "myColumnSymbols", isSignal: false, isRequired: false, transformFunction: null }, myColumnStyles: { classPropertyName: "myColumnStyles", publicName: "myColumnStyles", isSignal: false, isRequired: false, transformFunction: null }, pieGraphColors: { classPropertyName: "pieGraphColors", publicName: "pieGraphColors", isSignal: false, isRequired: false, transformFunction: null }, removePieCovers: { classPropertyName: "removePieCovers", publicName: "removePieCovers", isSignal: false, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: false, isRequired: false, transformFunction: null }, rowNumbers: { classPropertyName: "rowNumbers", publicName: "rowNumbers", isSignal: false, isRequired: false, transformFunction: null }, forceGrouping: { classPropertyName: "forceGrouping", publicName: "forceGrouping", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { cellEdit: "cellEdit" }, host: { listeners: { "window:click": "onWindowClick($event)", "window:mouseup": "onWindowMouseUp($event)", "window: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=\"hidden-cols\">\r\n @for (hcol of hiddenCols; track hcol) {\r\n <button type=\"button\" class=\"btn-maximize-col\" (click)=\"maximizeColCells(hcol)\">{{hcol}}</button>\r\n }\r\n </div>\r\n <div class=\"controls\" >\r\n <input type=\"text\" #topLevelDataFilter autocomplete=\"off\" name=\"topLevelDataFilter\" placeholder=\"Filter any column...\" \r\n (input)=\"topFilterOnKeyUp($event)\" (keyup)=\"topFilterOnKeyUp($event)\" maxlength=\"255\" [(ngModel)]=\"topLevelFilter\" \r\n [disabled]=\"dataTableService.showCharts() || !dataTableService.mainData.length || handlingSelRows\" autocomplete=\"off\" />\r\n @if(currGroupValues().length){\r\n <button type=\"button\" class=\"no-btn btn-clear-grp\" (click)=\"processGrouping(null)\">\r\n <i class=\"material-icons error-message heavy v-mid\" aria-hidden=\"false\">close</i> <span class=\"md-text v-mid\">Grouping</span>\r\n </button>\r\n }\r\n <button type=\"button\" class=\"no-btn btn-chart\" (click)=\"openCharts()\" [disabled]=\"dataTableService.showCharts() || !dataTableService.currFilData.length || handlingSelRows || !common.goodLs()\">\r\n <i class=\"material-icons v-mid\" aria-hidden=\"false\">bar_chart</i> <span class=\"v-mid\">Insights</span>\r\n </button>\r\n <button type=\"button\" [disabled]=\"!dataTableService.currSelRows.length || handlingSelRows\" (click)=\"clearSelectedRows()\" class=\"btn-ctrl-sel-rows\">Deselect Rows</button>\r\n <button #btnTogSelRows type=\"button\" [disabled]=\"!dataTableService.currSelRows.length || handlingSelRows\" (click)=\"toggleSelectedRows()\" class=\"btn-ctrl-sel-rows\">\r\n <i class=\"material-icons\" aria-hidden=\"false\">check_box_outline_blank</i> <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' : isMultiFiltering() || dataTableService.isFiltering() || \r\n dataTableService.isSorting() || currGroupValues().length || currSelEditOpts.length }\">\r\n @for (chk of dtChecks; track $index) {\r\n <input [id]=\"'checkDataTableRow' + chk\" class=\"select-row-check invisible\" \r\n [checked]=\"dataTableService.currSelRows.indexOf(chk) > -1\" type=\"checkbox\" [name]=\"'checkDataTableRow' + chk\"\r\n (click)=\"toggleSingleRowSelected(chk)\" (keyup.enter)=\"toggleSingleRowSelected(chk)\" [value]=\"'dataTableRow' + chk\" >\r\n }\r\n </div>\r\n <div #selFilContainer class=\"relly sel-fil-container\">\r\n <div class=\"selfil-opt-contain\" [ngStyle]=\"ddFilStyle\">\r\n @for (opt of currFilOpts; track opt; let i = $index) {\r\n <div class=\"selfil-div\">\r\n <label [for]=\"'selfilOpt' + currDDFilter + i\" class=\"'selfil-lbl-' + currDDFilter\"><input [id]=\"'selfilOpt' + currDDFilter + i\" \r\n [class]=\"'selfil-opt-' + currDDFilter\" (input)=\"handleMultiSelFilter(currDDFilter, opt.value, $event.target.checked)\" \r\n (click)=\"handleMultiSelFilter(currDDFilter, opt.value, $event.target.checked)\" [name]=\"'selfilOpt' + currDDFilter + i\" \r\n [checked]=\"opt.checked\" [value]=\"opt.value\" [disabled]=\"isMultiFiltering()\" type=\"checkbox\" />{{opt.value || \"(Blank)\"}}</label>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n <div #validatedEdit class=\"relly special-edit-container invisible\">\r\n @if (validatedEditType === 'date'){\r\n <input id=\"selEditDate\" name=\"selEditDate\" type=\"date\" class=\"edit-input\" \r\n (change)=\"execCellEdit($event, true)\" (input)=\"execCellEdit($event, true)\" (blur)=\"execCellEdit($event)\" />\r\n }\r\n @if (validatedEditType === 'number'){\r\n <input id=\"selEditNum\" name=\"selEditNum\" type=\"number\" class=\"edit-input\" \r\n (keyup)=\"execCellEdit($event, true)\" (input)=\"execCellEdit($event, true)\" (blur)=\"execCellEdit($event)\" (keyup.enter)=\"execCellEdit($event)\" />\r\n }\r\n @if (validatedEditType === 'text'){\r\n <div class=\"relly edit-input\">\r\n <div class=\"edit-input-option-cont\">\r\n <div class=\"edit-input-opt\"><button type=\"button\" class=\"no-btn\" (click)=\"execCellEdit($event, false, null)\">-</button></div>\r\n @for (opt of currSelEditOpts; track opt.value) {\r\n <div class=\"edit-input-opt\"><button type=\"button\" class=\"no-btn\" \r\n (click)=\"execCellEdit($event, false, opt.value)\">{{opt.value || \"(Blank)\"}}</button>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"relly\" style=\"z-index: 6;\">\r\n <div #fCellDragger tabindex=\"0\" id=\"fCellDragger\" (focus)=\"focusCellDragger()\" (blur)=\"execValClear(true)\"\r\n (mousedown)=\"focusCellDraggerFromMouseDown()\" (keydown)=\"handleFDragTab($event)\" (keydown)=\"handleDraggerKD($event)\"\r\n [ngClass]=\"{'hide': dataTableService.currEditIndex < 0, 'focused-cell-dragger': dataTableService.currEditIndex > -1 }\"></div>\r\n </div>\r\n @if(dataTableService.showCharts() && common.goodLs()){\r\n <app-charts-and-graphs \r\n [height]=\"chartHgt\"\r\n [state]=\"chartState\"\r\n [chartColumns]=\"columnsForCharts\"\r\n (close)=\"closeCharts($event)\"\r\n ></app-charts-and-graphs>\r\n }\r\n <div [ngClass]=\"{'row-numbers': rowNumbers && !dataTableService.showCharts() && !currGroupValues().length, 'hide': !rowNumbers || dataTableService.showCharts() || currGroupValues().length}\" >\r\n <div #rowNumHeader class=\"row-num-header flex-center\"><div class=\"semi-heavy\">No.</div></div>\r\n <div style=\"overflow: hidden;\" [style.height]=\"dataTableService.dTblHeight + 'px'\">\r\n <div #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 && !dataTableService.showCharts() && !currGroupValues().length\">\r\n <div #dataTableHeaders class=\"data-table-headers\">\r\n @for (col of columnHeaders; track col.column; let i = $index) {\r\n <app-data-table-header\r\n [columnHeader]=\"col\"\r\n [colWid]=\"dataTableService.useColWid\"\r\n [hideMinCol]=\"col.hideMinCol\"\r\n [canFreeze]=\"i === 0 ? true : false\"\r\n (reset)=\"resetCurrentData($event)\"\r\n (freeze)=\"freezeColCells($event)\"\r\n (minimize)=\"minimizeColEls($event)\"\r\n (filFocus)=\"handleFilFocus($event)\"\r\n (scrollOnFocus)=\"checkTabHorizScroll($event)\"\r\n (emitCompFocus)=\"killSelFilOpts(true)\"\r\n (filSelClick)=\"handleWinClickOnSelFil()\"\r\n (height)=\"setHeaderHeight($event, true)\"\r\n (render)=\"renderCurrData(false, $event.field)\"\r\n (width)=\"handleSingleColResize($event.value, $event.column)\"\r\n ></app-data-table-header>\r\n }\r\n </div>\r\n <div #dataTableBody id=\"dataTableBody\" style=\"overflow: auto;\" [style.height]=\"dataTableService.dTblHeight + 'px'\" (scroll)=\"handleScroll($event)\"\r\n [class.table-working]=\"isMultiFiltering() || 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)}}{{cell.specialColClass}}\" [class.data-cell-riiight]=\"cell.dataType === 'number'\"\r\n [ngClass]=\"{ 'col-item-freeze': cell.freeze, 'col-header-minimized': cell.minimized, '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 (mousedown)=\"checkCellEditOnClick()\"\r\n [columnValClass]=\"cell.specialColClass\"\r\n (dragListen)=\"listenToCellDraggerMouseMove = $event\"\r\n [colWid]=\"cell.width || dataTableService.useColWid\"\r\n (width)=\"handleSingleColResize($event)\"\r\n (height)=\"setSingleRowHgt($event, row.id, true)\"\r\n (clearVEditFocus)=\"validatedEditType = $event\"\r\n (validateEditFocus)=\"handleValidatedCellEditFocus($event)\"\r\n ></app-data-cell>\r\n }\r\n }\r\n </div>\r\n }\r\n <div #belowArea [style.height]=\"belowHgt() + 'px'\"></div>\r\n @for(group of currGroupValues(); track group){\r\n <app-row-group-panel\r\n [groupValue]=\"group.value\"\r\n [maxCols]=\"maxCols\"\r\n [useRowWid]=\"useRowWid\"\r\n [editable]=\"editable\"\r\n [horizRest]=\"horizRest()\"\r\n [columns]=\"columnNames\"\r\n [showRowNumbers]=\"rowNumbers\"\r\n [colOfInt]=\"columnOfInterest()\"\r\n (horizPos)=\"setHorizPos($event)\"\r\n (cellEdit)=\"execCellEdit($event)\"\r\n (openEvt)=\"scrollToRowGroup($event)\"\r\n ></app-row-group-panel>\r\n }\r\n @if(!dataTableService.currFilData.length && !currGroupValues().length){\r\n <div [style.height]=\"dataTableService.dTblHeight + 'px'\" class=\"data-table-row flex-center data-table-row-no-data\" style=\"width: 100%; white-space: normal;\">\r\n <div class=\"center\">{{dataTableService.noDataMsg}}</div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n @if(paginatorReady){\r\n <app-data-table-paginator\r\n [filSortStr]=\"allFilSortInfo()\"\r\n (jumpTo)=\"jumpToRow($event)\"\r\n [totalRows]=\"dataTableService.currFilData.length\"\r\n [disableJump]=\"dataTableService.showCharts() || currGroupValues().length > 0 || !dataTableService.currFilData.length || handlingSelRows\"\r\n ></app-data-table-paginator><!--not an actual paginator-->\r\n }\r\n <div class=\"pad-top-thirty right\">\r\n <div class=\"inline-b deebo-dd-contain-div\">\r\n @if(canGroupBy().length > 0){\r\n <app-row-group-menu\r\n [groups]=\"canGroupBy()\"\r\n [disableGB]=\"dataTableService.showCharts()\"\r\n [enableClear]=\"currGroupValues().length ? true : false\"\r\n ></app-row-group-menu>\r\n }\r\n </div><div class=\"inline-b deebo-dd-contain-div\">\r\n @if(dataTableService.currFilData.length > 0){\r\n <app-export-component\r\n [columns]=\"columnHeaders\"\r\n [disableExport]=\"dataTableService.showCharts()\"\r\n [count]=\"dataTableService.currFilData.length\">\r\n </app-export-component>\r\n }\r\n </div>\r\n </div>\r\n</div>", styles: [":host{--accent-color:rgb(50, 50, 50);--grid-color:rgb(199, 199, 199);--pad-left-base: 33px;--row-num-width: 75px;--reg-font-size: 17px }input[name=topLevelDataFilter]{float:left;padding:7px 5px;vertical-align:middle;box-shadow:0 0 1px 1px var(--grid-color);-moz-box-shadow:0 0 1px 1px var(--grid-color);-webkit-box-shadow:0 0 1px 1px var(--grid-color)}.deebo-dd-contain-div{margin:0 31px}.btn-chart,.btn-clear-grp{border-radius:3px}.btn-chart i{font-size:28px;vertical-align:middle;color:var(--accent-color)}.btn-chart:hover,.btn-clear-grp:hover{background:#e9e9e9;transition:background .5s ease}.dt-checks{margin-left:var(--row-num-width)}.row-numbers{margin-top:11px;display:inline-block;width:var(--row-num-width)}.row-num-header{background:#e9e9e9;box-sizing:border-box;border-bottom:1px solid var(--accent-color);border-right:1px solid var(--accent-color);box-shadow:0 -1px 3px 1px var(--grid-color);-moz-box-shadow:0 -1px 3px 1px var(--grid-color);-webkit-box-shadow:0 -1px 3px 1px var(--grid-color)}.num-row{white-space:nowrap;box-sizing:border-box;border-left:1px solid var(--grid-color);border-bottom:1px solid var(--grid-color)}.inline-table{display:inline-block;width:calc(100% - var(--row-num-width))}.special-edit-container{z-index:5;width:0!important;height:0!important}.edit-input{border:none;font-size:15px;box-shadow:none;position:absolute;background:#fff;-moz-box-shadow:none;-webkit-box-shadow:none;box-sizing:border-box}.edit-input[type=number]{text-align:right}.edit-input[type=date]{padding-left:17px}\n", "@charset \"UTF-8\";@font-face{font-family:Roboto Condensed;src:url(https://d2ffvluimla00s.cloudfront.net/RobotoCondensed-VariableFont_wght.ttf) format(\"ttf\")}@font-face{font-family:Material Icons;font-style:normal;font-weight:400;src:url(https://d2ffvluimla00s.cloudfront.net/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format(\"woff2\")}.deebo-data-grid-section{font-family:Roboto Condensed,Arial,Helvetica,sans-serif}:host{--accent-color:rgb(50, 50, 50);--grid-color:rgb(199, 199, 199);--pad-left-base: 33px;--row-num-width: 75px;--reg-font-size: 17px }.relly{position:relative}.hide{display:none!important;max-height:0;max-width:0;top:0;left:0;opacity:0}.ovy{overflow:auto}.no-ovy-y{overflow-y:hidden!important}.pad-top-sm{padding-top:4px!important}.pad-top-ten{padding-top:10px!important}.pad-top-teen{padding-top:17px}.pad-top-thirty,.pad-top-trey{padding-top:33px}.pad-top-much{padding-top:75px}.o-visible{overflow:visible}.dontwrap{white-space:nowrap}.inline-b{display:inline-block}.inline{display:inline}.half-wid{width:50%;vertical-align:top;display:inline-block}.qtr-wid{width:25%;vertical-align:top;display:inline-block}.third-wid{width:33.3%;vertical-align:top;display:inline-block}.two-third-wid{width:66.6%;vertical-align:top;display:inline-block}.three-qtr-wid{width:75%;vertical-align:top;display:inline-block}.v-top{vertical-align:top!important}.v-mid{vertical-align:middle!important}.v-bot{vertical-align:bottom!important}.lg-text{font-size:larger}.xlg-text{font-size:x-large!important}.md-text{font-size:var(--reg-font-size)!important}.small-text{font-size:small}.tiny-text{font-size:x-small}.invisible{visibility:hidden}.flex-center{display:flex;justify-content:center;align-items:center}.flex-item{flex:1 1 auto}.o-x-hidden{overflow-x:hidden!important}.no-weight{font-weight:400!important}.semi-heavy{font-weight:500!important}.heavy{font-weight:700!important}.marauto{margin:0 auto}.center{text-align:center}.left{text-align:left}.right{text-align:right}.btn-reset{border:none;color:#fff;padding:7px 11px;background:maroon}.error-message{color:maroon;font-weight:500}.success{color:green;font-weight:500}.neutral{color:var(--accent-color)}input,select{border:none;padding:4px;border-radius:3px;box-sizing:border-box;font-family:Roboto Condensed,Arial,Helvetica,sans-serif;box-shadow:0 0 1px 1px #afafaf;-moz-box-shadow:0 0 1px 1px #afafaf;-webkit-box-shadow:0 0 1px 1px #afafaf}input[type=radio],input[type=checkbox]{cursor:pointer;box-shadow:none!important;-moz-box-shadow:none!important;-webkit-box-shadow:none!important}button{cursor:pointer}button:focus,input:focus,select:focus,textarea:focus,a:focus{outline-width:0}button:disabled,input:disabled,select:disabled{opacity:.5;cursor:not-allowed}.prevent{opacity:.5;cursor:not-allowed;pointer-events:none}.controls{text-align:right;padding:16px 11px 6px 1px;max-width:100%;clear:both;overflow-x:auto;white-space:nowrap}.controls button{font-size:var(--reg-font-size);margin-right:31px;vertical-align:middle}.controls button span{vertical-align:middle}.controls button:last-of-type{margin-right:0}.data-table{margin-top:11px;overflow:hidden;box-shadow:0 -1px 3px 1px var(--grid-color);-moz-box-shadow:0 -1px 3px 1px var(--grid-color);-webkit-box-shadow:0 -1px 3px 1px var(--grid-color)}.sel-rows-checked{color:#00a8f399!important}.save-hilite{padding:2px 4px;border-radius:3px;background:#ebebeb;box-shadow:0 0 3px 1px var(--accent-color);-moz-box-shadow:0 0px 3px 1px var(--accent-color);-webkit-box-shadow:0 0px 3px 1px var(--accent-color)}.btn-ctrl-sel-rows,.btn-export-or-print{border:none;padding:3px 4px;border-radius:3px;background:#f5f5f5;vertical-align:middle;box-shadow:0 0 2px 1px var(--accent-color);-moz-box-shadow:0 0 2px 1px var(--accent-color);-webkit-box-shadow:0 0 2px 1px var(--accent-color)}.deebo-dd-contain-div:last-of-type{margin-right:0!important}.btn-export{width:100%;text-transform:uppercase}.btn-export:hover{text-decoration:underline}.btn-ctrl-sel-rows:hover,.btn-export-or-print:hover{background:#ebebeb;box-shadow:0 0 6px 2px gray;-moz-box-shadow:0 0 6px 2px gray;-webkit-box-shadow:0 0 6px 2px gray}.btn-center-selected{padding:2px 4px;border-radius:5px;background:#f5f5f5;box-shadow:0 0 6px 2px gray;-moz-box-shadow:0 0 6px 2px gray;-webkit-box-shadow:0 0 6px 2px gray}.btn-ctrl-sel-rows .material-icons{font-size:18px;font-weight:600;vertical-align:middle}.btn-ctrl-sel-rows .material-icons:not(.error-message){color:var(--accent-color)}.data-table-headers{cursor:pointer;white-space:nowrap;border-bottom:1px solid var(--grid-color)}.data-table-row{white-space:nowrap}.data-table-row:hover,.data-table-row .col-item-freeze:hover{background:#f3f3f3}.data-row-selected{background:#d6d6d6!important}.table-working{opacity:.1;pointer-events:none}.select-row-check{left:9px;z-index:10;cursor:pointer;margin:0;position:absolute;padding:0!important}.gb-row-num{left:2px;z-index:10;cursor:pointer;margin:0;font-size:x-small;position:absolute;padding:0!important}.mock-html{width:50%;height:18px;margin:0 auto;border-radius:11px;background:var(--grid-color)}.abs-right{top:7px;right:7px;position:absolute}.has-symbol:after{content:attr(data-symbol);padding-left:3px}.has-symbol-b:before{content:attr(data-symbol);padding-right:3px}.data-table-row-no-data{font-size:xx-large;color:gray;font-weight:500;text-shadow:-1px -1px var(--accent-color)}.data-row-selected .col-item-freeze,.data-row-selected .data-cell,.data-row-selected:hover,.data-row-selected .col-item-freeze:hover,.data-row-selected .data-cell:hover{background:#d6d6d6!important}.data-table-headers .col-item-freeze:first-of-type{border-bottom:1px solid var(--grid-color)}.col-header{z-index:2;width:125px;overflow:auto;cursor:grab;padding:7px 3px;text-align:center;position:relative;box-sizing:border-box;display:inline-block;vertical-align:top;white-space:pre-wrap;word-wrap:break-word;background:#fafafa;border-right:1px solid var(--grid-color)}.col-header button,.col-header span,.col-header select{cursor:pointer;vertical-align:middle}.col-header input{vertical-align:middle}.col-header-img-container{overflow-y:hidden;text-align:center;display:inline-block;vertical-align:middle;background-size:cover;background-position:center;background-repeat:no-repeat}.col-header-minimized{width:0!important;height:0!important;padding:0!important;overflow:hidden!important;border-bottom:none!important;border-right:none!important;transition:width .3s ease}.btn-maximize-col{border:none;border-radius:5px;background:#f5f5f5;box-shadow:0 0 3px 2px gray;font-size:var(--reg-font-size);margin-right:27px;padding:4px}.no-btn{border:none;background:none}.col-item-freeze{left:0;z-index:3;position:sticky;background:#fff;box-shadow:2px 0 3px 0 var(--grid-color);-moz-box-shadow:2px 0px 3px 0px var(--grid-color);-webkit-box-shadow:2px 0px 3px 0px var(--grid-color)}.col-header input,.select-filter{width:40%;margin:11px 0 1px}.sel-fil-container{z-index:5}.edit-input-option-cont{left:0;right:0}.edit-input-opt button{width:100%;font-size:15px;padding:11px 0 11px 17px;text-align:left!important}.selfil-opt-contain,.edit-input-option-cont{overflow:auto;max-height:240px;border-radius:5px;position:absolute;background:#fff;box-shadow:0 1px 3px 1px var(--grid-color);-moz-box-shadow:0 1px 3px 1px var(--grid-color);-webkit-box-shadow:0 1px 3px 1px var(--grid-color)}.selfil-div,.edit-input-opt{cursor:pointer;text-align:left;border-bottom:1px solid var(--grid-color)}.selfil-div:hover,.edit-input-opt:hover{background:#ebebeb}.selfil-div:last-of-type,.edit-input-opt:last-of-type{border-bottom:none}.selfil-div label{width:calc(100% - 22px);font-size:15px;cursor:pointer;padding:11px;display:inline-block}.selfil-div label input[type=checkbox]{margin-right:11px;vertical-align:middle}.select-filter-comparator{width:36px;z-index:3;opacity:0;position:relative;margin:11px 0 1px 15px}.btn-fil-comp{top:2px;left:-36px;border:none;position:absolute;background:#fafafa}.btn-fil-comp i{color:var(--accent-color)}@media screen and (min-width:960px){.col-header input,.select-filter,.select-filter-comparator{margin-top:7px;margin-bottom:1px}}.data-cell{width:125px;padding:11px 6px 11px 17px;overflow:auto;font-size:15px;word-wrap:break-word;white-space:pre-line;vertical-align:top;box-sizing:border-box;display:inline-flex;align-items:center;border-right:1px solid var(--grid-color);border-bottom:1px solid var(--grid-color)}input.edit-input{border-radius:0}.data-cell:focus,input.edit-input:focus{outline:1px solid #00a8f3}.dragger-cell-focused{background:#00a8f333;border-left:1px solid #00a8f3;border-right:1px solid #00a8f3!important}.focused-cell-dragger{width:9px;height:9px;cursor:crosshair;position:absolute;background:#00a8f3;box-shadow:0 0 1px 1px var(--accent-color);-moz-box-shadow:0 0 1px 1px var(--accent-color);-webkit-box-shadow:0 0 1px 1px var(--accent-color)}.holding-check{padding-left:44px}.data-cell-riiight{padding:11px 17px 11px 6px;justify-content:right}.data-cell-ceeenter{padding:11px 6px;justify-content:center!important}.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-min-col{cursor:pointer;top:0;right:2px;font-size:20px;border:none;background:none;position:absolute;padding:0 2px 5px 0;color:var(--accent-color)}.btn-min-col-hide{z-index:0;visibility:hidden;pointer-events:none}.btn-freeze-col{float:left;border:none;cursor:pointer;background:none}.btn-freeze-col .material-icons{font-size:16px;color:var(--accent-color)}.hidden-cols{max-width:100%;overflow-x:auto;clear:both;white-space:nowrap;padding:17px 15px 5px 4px}.hidden-cols button:first-of-type:before{content:\"Hidden Columns\";font-size:12px;font-weight:600;padding-right:11px;vertical-align:middle}.col-header span{word-wrap:break-word;vertical-align:middle;font-size:var(--reg-font-size)}.o-ins-div span,.o-ins-div i{vertical-align:middle;font-size:16px}.aux-chip{text-align:center;padding-bottom:33px;word-wrap:break-word;white-space:pre-wrap}.insights{padding:17px 15px}.insight-field{min-height:100px;padding:21px 0;font-size:large;white-space:pre-wrap;word-wrap:break-word;border-bottom:1px solid lightgray}@media screen and (max-width:760px){.insight-field:first-of-type{padding-top:7px}}@media screen and (min-width:760px){.insight-field-row{border-bottom:1px solid lightgray}.insight-field,.aux-chip{width:50%;vertical-align:top;display:inline-block;border-bottom:none}}@media screen and (min-width:1024px){.insight-field,.aux-chip{width:33%}}.chart-label-cont{padding-top:10px;text-align:center}.pie-piece-label{padding-top:5px;margin-right:27px;display:inline-block}.pie-piece-label-sq{width:11px;height:11px;margin:0 0 0 2px;display:inline-block;vertical-align:middle}.pie-piece-label span{font-size:small}.pie-piece-label span:before{font-size:smaller;padding-right:4px;font-weight:600;content:attr(data-percent)}.pie-layover{border-radius:50%;background:#fff;position:absolute;padding:5px!important;display:flex;font-size:17px;align-items:center;overflow:hidden;box-sizing:border-box;justify-content:center;color:var(--accent-color)}.pie-layover div{font-weight:500;padding:0!important}.ins-even-dist-ct{font-size:24px;font-weight:500}.line-graph-container{padding:11px 0 33px 7px!important;box-sizing:border-box;margin-left:11px}.lg-title-cont{padding:0!important;text-align:center;margin:17px 11px}.lg-n-marker-cont{width:60px;position:relative;padding:0!important;box-sizing:border-box;display:inline-block;vertical-align:top}.lg-n-marker-cont:before{top:45%;left:-37px;display:block;position:absolute;white-space:nowrap;color:var(--grid-color);content:attr(data-column);transform:rotate(-90deg)}.lg-n-marker,.lg-n-marker-h{padding:0 11px 0 0!important;font-size:small;position:relative;text-align:right;white-space:nowrap;box-sizing:border-box}.line-graph{width:calc(92% - 60px);position:relative;box-sizing:border-box;display:inline-block;vertical-align:top;padding:0!important;border-left:1px solid var(--accent-color);border-bottom:1px solid var(--accent-color)}.lg-lbl-x{left:0;right:0;bottom:-45px;font-size:small;font-weight:500;text-align:center;position:absolute;padding:0!important}.btn-line-graph-opts{margin:0;padding:4px;background:none;border-top:1px solid var(--accent-color);border-left:1px solid var(--accent-color);border-bottom:1px solid var(--accent-color)}.sp-line-graph-title{margin-top:7px;font-size:large;text-decoration:underline}.lg-dt-marker,.lg-dt-marker-h,.vd-n-marker,.vd-n-marker-h{bottom:-22px;font-size:small;position:absolute;text-align:center;padding:0!important;display:inline-block;box-sizing:border-box}.lg-dt-marker-h,.vd-n-marker-h{visibility:hidden}.lg-dt-marker.visible-marker{margin-left:21px}.lg-n-marker-h{height:0;visibility:hidden}.visible-marker{z-index:2;font-weight:600;background:#fff;height:unset!important;padding:1px 2px!important;visibility:visible!important;box-shadow:0 0 2px 1px #afafaf;-moz-box-shadow:0 0 2px 1px #afafaf;-webkit-box-shadow:0 0 2px 1px #afafaf}.visible-marker:before{font-weight:600}.lg-dt-marker:before{top:-15px;left:0;content:\"|\";position:absolute}.vd-n-marker:before{top:-15px;left:50%;content:\"|\";left:calc(50% - 2px);position:absolute}.lg-n-marker:before{top:-4px;right:-3px;content:\"-\";font-weight:600;font-size:large;position:absolute;background:#fff}.btn-line-graph-opts:hover{background:#d6d6d6;transition:background .3s ease}.btn-line-graph-opts:last-of-type{border-right:1px solid var(--accent-color)}.btn-lg-sel{color:#fff!important;background:var(--accent-color);box-shadow:0 0 2px 1px #afafaf;-moz-box-shadow:0 0 2px 1px #afafaf;-webkit-box-shadow:0 0 2px 1px #afafaf}.btn-lg-sel:hover{background:var(--accent-color)}.lg-plot{height:8px;width:8px;opacity:.3;cursor:pointer;border-radius:50%;position:absolute;padding:0!important;background:var(--accent-color)}.lg-plot:hover{z-index:100;opacity:1!important}.lg-plot:hover:after{padding:3px;display:inline-block;font-size:small;border-radius:5px;margin:0 0 0 25px;font-weight:700;content:attr(data-number);background:#fff!important;box-shadow:0 0 2px 1px #afafaf;-moz-box-shadow:0 0 2px 1px #afafaf;-webkit-box-shadow:0 0 2px 1px #afafaf}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:\"liga\";-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}\n"], dependencies: [{ kind: "component", type: DataTableHeader, selector: "app-data-table-header", inputs: ["colWid", "canFreeze", "hideMinCol", "columnHeader"], outputs: ["sort", "render", "width", "height", "reset", "freeze", "filFocus", "filSelClick", "minimize", "emitCompFocus", "scrollOnFocus"] }, { kind: "component", type: DataCellComponent, selector: "app-data-cell", inputs: ["rawText", "cell", "rowId", "colWid", "rowHeight", "noColResize", "columnValClass"], outputs: ["width", "height", "edit", "dragListen", "validateEditFocus", "clearVEditFocus"] }, { kind: "component", type: DataTablePaginator, selector: "app-data-table-paginator", inputs: ["totalRows", "filSortStr", "disableJump"], outputs: ["jumpTo"] }, { kind: "component", type: ChartsAndGraphs, selector: "app-charts-and-graphs", inputs: ["height", "state", "chartColumns"], outputs: ["close"] }, { kind: "component", type: RowGroupMenu, selector: "app-row-group-menu", inputs: ["groups", "disableGB", "enableClear"] }, { kind: "component", type: RowGroupPanel, selector: "app-row-group-panel", inputs: ["horizRest", "colOfInt", "groupValue", "useRowWid", "maxCols", "editable", "columns", "showRowNumbers"], outputs: ["openEvt", "horizPos", "cellEdit"] }, { kind: "component", type: ExportComponent, selector: "app-export-component", inputs: ["disableExport", "count", "columns"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: DecimalPipe, name: "number" }] });
|
|
6849
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: NgxDeebodata, isStandalone: true, selector: "ngx-deebodata", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, licenseKey: { classPropertyName: "licenseKey", publicName: "licenseKey", isSignal: false, isRequired: false, transformFunction: null }, color1: { classPropertyName: "color1", publicName: "color1", isSignal: false, isRequired: false, transformFunction: null }, color2: { classPropertyName: "color2", publicName: "color2", isSignal: false, isRequired: false, transformFunction: null }, primaryKey: { classPropertyName: "primaryKey", publicName: "primaryKey", isSignal: false, isRequired: false, transformFunction: null }, defRowHgt: { classPropertyName: "defRowHgt", publicName: "defRowHgt", isSignal: false, isRequired: false, transformFunction: null }, defGridHgt: { classPropertyName: "defGridHgt", publicName: "defGridHgt", isSignal: false, isRequired: false, transformFunction: null }, altRowColor: { classPropertyName: "altRowColor", publicName: "altRowColor", isSignal: false, isRequired: false, transformFunction: null }, myColumnSymbols: { classPropertyName: "myColumnSymbols", publicName: "myColumnSymbols", isSignal: false, isRequired: false, transformFunction: null }, myColumnStyles: { classPropertyName: "myColumnStyles", publicName: "myColumnStyles", isSignal: false, isRequired: false, transformFunction: null }, myColumnValueColors: { classPropertyName: "myColumnValueColors", publicName: "myColumnValueColors", isSignal: false, isRequired: false, transformFunction: null }, pieGraphColors: { classPropertyName: "pieGraphColors", publicName: "pieGraphColors", isSignal: false, isRequired: false, transformFunction: null }, removePieCovers: { classPropertyName: "removePieCovers", publicName: "removePieCovers", isSignal: false, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: false, isRequired: false, transformFunction: null }, rowNumbers: { classPropertyName: "rowNumbers", publicName: "rowNumbers", isSignal: false, isRequired: false, transformFunction: null }, forceGrouping: { classPropertyName: "forceGrouping", publicName: "forceGrouping", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { cellEdit: "cellEdit" }, host: { listeners: { "window:click": "onWindowClick($event)", "window:mouseup": "onWindowMouseUp($event)", "window:mousemove": "onWindowMouseMove($event)", "window:selectstart": "onWindowSelectStart($event)", "window:resize": "onWindowResize($event)", "window:scroll": "onWindowScroll($event)", "window:keydown.shift": "onWindowShiftKeydown($event)", "window:keyup.shift": "onWindowShiftKeyup($event)" } }, viewQueries: [{ propertyName: "dataTable", first: true, predicate: ["dataTable"], descendants: true, static: true }, { propertyName: "dataTableBody", first: true, predicate: ["dataTableBody"], descendants: true, static: true }, { propertyName: "aboveArea", first: true, predicate: ["aboveArea"], descendants: true, static: true }, { propertyName: "belowArea", first: true, predicate: ["belowArea"], descendants: true, static: true }, { propertyName: "validatedEdit", first: true, predicate: ["validatedEdit"], descendants: true, static: true }, { propertyName: "rowNumHeader", first: true, predicate: ["rowNumHeader"], descendants: true, static: true }, { propertyName: "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=\"hidden-cols\">\r\n @for (hcol of hiddenCols; track hcol) {\r\n <button type=\"button\" class=\"btn-maximize-col\" (click)=\"maximizeColCells(hcol)\">{{hcol}}</button>\r\n }\r\n </div>\r\n <div class=\"controls\" >\r\n <input type=\"text\" #topLevelDataFilter autocomplete=\"off\" name=\"topLevelDataFilter\" placeholder=\"Filter any column...\" \r\n (input)=\"topFilterOnKeyUp($event)\" (keyup)=\"topFilterOnKeyUp($event)\" maxlength=\"255\" [(ngModel)]=\"topLevelFilter\" \r\n [disabled]=\"dataTableService.showCharts() || !dataTableService.mainData.length || handlingSelRows\" autocomplete=\"off\" />\r\n @if(currGroupValues().length){\r\n <button type=\"button\" class=\"no-btn btn-clear-grp\" (click)=\"processGrouping(null)\">\r\n <i class=\"material-icons error-message heavy v-mid\" aria-hidden=\"false\">close</i> <span class=\"md-text v-mid\">Grouping</span>\r\n </button>\r\n }\r\n <button type=\"button\" class=\"no-btn btn-chart\" (click)=\"openCharts()\" [disabled]=\"dataTableService.showCharts() || !dataTableService.currFilData.length || handlingSelRows || !common.goodLs()\">\r\n <i class=\"material-icons v-mid\" aria-hidden=\"false\">bar_chart</i> <span class=\"v-mid\">Insights</span>\r\n </button>\r\n <button type=\"button\" [disabled]=\"!dataTableService.currSelRows.length || handlingSelRows\" (click)=\"clearSelectedRows()\" class=\"btn-ctrl-sel-rows\">Deselect Rows</button>\r\n <button #btnTogSelRows type=\"button\" [disabled]=\"!dataTableService.currSelRows.length || handlingSelRows\" (click)=\"toggleSelectedRows()\" class=\"btn-ctrl-sel-rows\">\r\n <i class=\"material-icons\" aria-hidden=\"false\">check_box_outline_blank</i> <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' : isMultiFiltering() || dataTableService.isFiltering() || \r\n dataTableService.isSorting() || currGroupValues().length || currSelEditOpts.length }\">\r\n @for (chk of dtChecks; track $index) {\r\n <input [id]=\"'checkDataTableRow' + chk\" class=\"select-row-check invisible\" \r\n [checked]=\"dataTableService.currSelRows.indexOf(chk) > -1\" type=\"checkbox\" [name]=\"'checkDataTableRow' + chk\"\r\n (click)=\"toggleSingleRowSelected(chk)\" (keyup.enter)=\"toggleSingleRowSelected(chk)\" [value]=\"'dataTableRow' + chk\" >\r\n }\r\n </div>\r\n <div #selFilContainer class=\"relly sel-fil-container\">\r\n <div class=\"selfil-opt-contain\" [ngStyle]=\"ddFilStyle\">\r\n @for (opt of currFilOpts; track opt; let i = $index) {\r\n <div class=\"selfil-div\">\r\n <label [for]=\"'selfilOpt' + currDDFilter + i\" class=\"'selfil-lbl-' + currDDFilter\"><input [id]=\"'selfilOpt' + currDDFilter + i\" \r\n [class]=\"'selfil-opt-' + currDDFilter\" (input)=\"handleMultiSelFilter(currDDFilter, opt.value, $event.target.checked)\" \r\n (click)=\"handleMultiSelFilter(currDDFilter, opt.value, $event.target.checked)\" [name]=\"'selfilOpt' + currDDFilter + i\" \r\n [checked]=\"opt.checked\" [value]=\"opt.value\" [disabled]=\"isMultiFiltering()\" type=\"checkbox\" />{{opt.value || \"(Blank)\"}}</label>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n <div #validatedEdit class=\"relly special-edit-container invisible\">\r\n @if (validatedEditType === 'date'){\r\n <input id=\"selEditDate\" name=\"selEditDate\" type=\"date\" class=\"edit-input\" \r\n (change)=\"execCellEdit($event, true)\" (input)=\"execCellEdit($event, true)\" (blur)=\"execCellEdit($event)\" />\r\n }\r\n @if (validatedEditType === 'number'){\r\n <input id=\"selEditNum\" name=\"selEditNum\" type=\"number\" class=\"edit-input\" \r\n (keyup)=\"execCellEdit($event, true)\" (input)=\"execCellEdit($event, true)\" (blur)=\"execCellEdit($event)\" (keyup.enter)=\"execCellEdit($event)\" />\r\n }\r\n @if (validatedEditType === 'text'){\r\n <div class=\"relly edit-input\">\r\n <div class=\"edit-input-option-cont\">\r\n <div class=\"edit-input-opt\"><button type=\"button\" class=\"no-btn\" (click)=\"execCellEdit($event, false, null)\">-</button></div>\r\n @for (opt of currSelEditOpts; track opt.value) {\r\n <div class=\"edit-input-opt\"><button type=\"button\" class=\"no-btn\" \r\n (click)=\"execCellEdit($event, false, opt.value)\">{{opt.value || \"(Blank)\"}}</button>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"relly\" style=\"z-index: 6;\">\r\n <div #fCellDragger tabindex=\"0\" id=\"fCellDragger\" (focus)=\"focusCellDragger()\" (blur)=\"execValClear(true)\"\r\n (mousedown)=\"focusCellDraggerFromMouseDown()\" (keydown)=\"handleFDragTab($event)\" (keydown)=\"handleDraggerKD($event)\"\r\n [ngClass]=\"{'hide': dataTableService.currEditIndex < 0, 'focused-cell-dragger': dataTableService.currEditIndex > -1 }\"></div>\r\n </div>\r\n @if(dataTableService.showCharts() && common.goodLs()){\r\n <app-charts-and-graphs \r\n [height]=\"chartHgt\"\r\n [state]=\"chartState\"\r\n [chartColumns]=\"columnsForCharts\"\r\n (close)=\"closeCharts($event)\"\r\n ></app-charts-and-graphs>\r\n }\r\n <div [ngClass]=\"{'row-numbers': rowNumbers && !dataTableService.showCharts() && !currGroupValues().length, 'hide': !rowNumbers || dataTableService.showCharts() || currGroupValues().length}\" >\r\n <div #rowNumHeader class=\"row-num-header flex-center\"><div class=\"semi-heavy\">No.</div></div>\r\n <div style=\"overflow: hidden;\" [style.height]=\"dataTableService.dTblHeight + 'px'\">\r\n <div #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 && !dataTableService.showCharts() && !currGroupValues().length\">\r\n <div #dataTableHeaders class=\"data-table-headers\">\r\n @for (col of columnHeaders; track col.column; let i = $index) {\r\n <app-data-table-header\r\n [columnHeader]=\"col\"\r\n [colWid]=\"dataTableService.useColWid\"\r\n [hideMinCol]=\"col.hideMinCol\"\r\n [canFreeze]=\"i === 0 ? true : false\"\r\n (reset)=\"resetCurrentData($event)\"\r\n (freeze)=\"freezeColCells($event)\"\r\n (minimize)=\"minimizeColEls($event)\"\r\n (filFocus)=\"handleFilFocus($event)\"\r\n (scrollOnFocus)=\"checkTabHorizScroll($event)\"\r\n (emitCompFocus)=\"killSelFilOpts(true)\"\r\n (filSelClick)=\"handleWinClickOnSelFil()\"\r\n (height)=\"setHeaderHeight($event, true)\"\r\n (render)=\"renderCurrData(false, $event.field)\"\r\n (width)=\"handleSingleColResize($event.value, $event.column)\"\r\n ></app-data-table-header>\r\n }\r\n </div>\r\n <div #dataTableBody id=\"dataTableBody\" style=\"overflow: auto;\" [style.height]=\"dataTableService.dTblHeight + 'px'\" (scroll)=\"handleScroll($event)\"\r\n [class.table-working]=\"isMultiFiltering() || 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)}}{{cell.specialColClass}}\" [class.data-cell-riiight]=\"cell.dataType === 'number'\"\r\n [ngClass]=\"{ 'col-item-freeze': cell.freeze, 'col-header-minimized': cell.minimized, '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 (mousedown)=\"checkCellEditOnClick()\"\r\n [columnValClass]=\"cell.specialColClass\"\r\n (dragListen)=\"listenToCellDraggerMouseMove = $event\"\r\n [colWid]=\"cell.width || dataTableService.useColWid\"\r\n (width)=\"handleSingleColResize($event)\"\r\n (height)=\"setSingleRowHgt($event, row.id, true)\"\r\n (clearVEditFocus)=\"validatedEditType = $event\"\r\n (validateEditFocus)=\"handleValidatedCellEditFocus($event)\"\r\n ></app-data-cell>\r\n }\r\n }\r\n </div>\r\n }\r\n <div #belowArea [style.height]=\"belowHgt() + 'px'\"></div>\r\n @for(group of currGroupValues(); track group){\r\n <app-row-group-panel\r\n [groupValue]=\"group.value\"\r\n [maxCols]=\"maxCols\"\r\n [useRowWid]=\"useRowWid\"\r\n [editable]=\"editable\"\r\n [horizRest]=\"horizRest()\"\r\n [columns]=\"columnNames\"\r\n [showRowNumbers]=\"rowNumbers\"\r\n [colOfInt]=\"columnOfInterest()\"\r\n (horizPos)=\"setHorizPos($event)\"\r\n (cellEdit)=\"execCellEdit($event)\"\r\n (openEvt)=\"scrollToRowGroup($event)\"\r\n ></app-row-group-panel>\r\n }\r\n @if(!dataTableService.currFilData.length && !currGroupValues().length){\r\n <div [style.height]=\"dataTableService.dTblHeight + 'px'\" class=\"data-table-row flex-center data-table-row-no-data\" style=\"width: 100%; white-space: normal;\">\r\n <div class=\"center\">{{dataTableService.noDataMsg}}</div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n @if(paginatorReady){\r\n <app-data-table-paginator\r\n [filSortStr]=\"allFilSortInfo()\"\r\n (jumpTo)=\"jumpToRow($event)\"\r\n [totalRows]=\"dataTableService.currFilData.length\"\r\n [disableJump]=\"dataTableService.showCharts() || currGroupValues().length > 0 || !dataTableService.currFilData.length || handlingSelRows\"\r\n ></app-data-table-paginator><!--not an actual paginator-->\r\n }\r\n <div class=\"pad-top-thirty right\">\r\n <div class=\"inline-b deebo-dd-contain-div\">\r\n @if(canGroupBy().length > 0){\r\n <app-row-group-menu\r\n [groups]=\"canGroupBy()\"\r\n [disableGB]=\"dataTableService.showCharts()\"\r\n [enableClear]=\"currGroupValues().length ? true : false\"\r\n ></app-row-group-menu>\r\n }\r\n </div><div class=\"inline-b deebo-dd-contain-div\">\r\n @if(dataTableService.currFilData.length > 0){\r\n <app-export-component\r\n [columns]=\"columnHeaders\"\r\n [disableExport]=\"dataTableService.showCharts()\"\r\n [count]=\"dataTableService.currFilData.length\">\r\n </app-export-component>\r\n }\r\n </div>\r\n </div>\r\n</div>", styles: [":host{--accent-color:rgb(50, 50, 50);--grid-color:rgb(199, 199, 199);--pad-left-base: 33px;--row-num-width: 75px;--reg-font-size: 17px }input[name=topLevelDataFilter]{float:left;padding:7px 5px;vertical-align:middle;box-shadow:0 0 1px 1px var(--grid-color);-moz-box-shadow:0 0 1px 1px var(--grid-color);-webkit-box-shadow:0 0 1px 1px var(--grid-color)}.deebo-dd-contain-div{margin:0 31px}.btn-chart,.btn-clear-grp{border-radius:3px}.btn-chart i{font-size:28px;vertical-align:middle;color:var(--accent-color)}.btn-chart:hover,.btn-clear-grp:hover{background:#e9e9e9;transition:background .5s ease}.dt-checks{margin-left:var(--row-num-width)}.row-numbers{margin-top:11px;display:inline-block;width:var(--row-num-width)}.row-num-header{background:#e9e9e9;box-sizing:border-box;border-bottom:1px solid var(--accent-color);border-right:1px solid var(--accent-color);box-shadow:0 -1px 3px 1px var(--grid-color);-moz-box-shadow:0 -1px 3px 1px var(--grid-color);-webkit-box-shadow:0 -1px 3px 1px var(--grid-color)}.num-row{white-space:nowrap;box-sizing:border-box;border-left:1px solid var(--grid-color);border-bottom:1px solid var(--grid-color)}.inline-table{display:inline-block;width:calc(100% - var(--row-num-width))}.special-edit-container{z-index:5;width:0!important;height:0!important}.edit-input{border:none;font-size:15px;box-shadow:none;position:absolute;background:#fff;-moz-box-shadow:none;-webkit-box-shadow:none;box-sizing:border-box}.edit-input[type=number]{text-align:right}.edit-input[type=date]{padding-left:17px}\n", "@charset \"UTF-8\";@font-face{font-family:Roboto Condensed;src:url(https://d2ffvluimla00s.cloudfront.net/RobotoCondensed-VariableFont_wght.ttf) format(\"ttf\")}@font-face{font-family:Material Icons;font-style:normal;font-weight:400;src:url(https://d2ffvluimla00s.cloudfront.net/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format(\"woff2\")}.deebo-data-grid-section{font-family:Roboto Condensed,Arial,Helvetica,sans-serif}:host{--accent-color:rgb(50, 50, 50);--grid-color:rgb(199, 199, 199);--pad-left-base: 33px;--row-num-width: 75px;--reg-font-size: 17px }.relly{position:relative}.hide{display:none!important;max-height:0;max-width:0;top:0;left:0;opacity:0}.ovy{overflow:auto}.no-ovy-y{overflow-y:hidden!important}.pad-top-sm{padding-top:4px!important}.pad-top-ten{padding-top:10px!important}.pad-top-teen{padding-top:17px}.pad-top-thirty,.pad-top-trey{padding-top:33px}.pad-top-much{padding-top:75px}.o-visible{overflow:visible}.dontwrap{white-space:nowrap}.inline-b{display:inline-block}.inline{display:inline}.half-wid{width:50%;vertical-align:top;display:inline-block}.qtr-wid{width:25%;vertical-align:top;display:inline-block}.third-wid{width:33.3%;vertical-align:top;display:inline-block}.two-third-wid{width:66.6%;vertical-align:top;display:inline-block}.three-qtr-wid{width:75%;vertical-align:top;display:inline-block}.v-top{vertical-align:top!important}.v-mid{vertical-align:middle!important}.v-bot{vertical-align:bottom!important}.lg-text{font-size:larger}.xlg-text{font-size:x-large!important}.md-text{font-size:var(--reg-font-size)!important}.small-text{font-size:small}.tiny-text{font-size:x-small}.invisible{visibility:hidden}.flex-center{display:flex;justify-content:center;align-items:center}.flex-item{flex:1 1 auto}.o-x-hidden{overflow-x:hidden!important}.no-weight{font-weight:400!important}.semi-heavy{font-weight:500!important}.heavy{font-weight:700!important}.marauto{margin:0 auto}.center{text-align:center}.left{text-align:left}.right{text-align:right}.btn-reset{border:none;color:#fff;padding:7px 11px;background:maroon}.error-message{color:maroon;font-weight:500}.success{color:green;font-weight:500}.neutral{color:var(--accent-color)}input,select{border:none;padding:4px;border-radius:3px;box-sizing:border-box;font-family:Roboto Condensed,Arial,Helvetica,sans-serif;box-shadow:0 0 1px 1px #afafaf;-moz-box-shadow:0 0 1px 1px #afafaf;-webkit-box-shadow:0 0 1px 1px #afafaf}input[type=radio],input[type=checkbox]{cursor:pointer;box-shadow:none!important;-moz-box-shadow:none!important;-webkit-box-shadow:none!important}button{cursor:pointer}button:focus,input:focus,select:focus,textarea:focus,a:focus{outline-width:0}button:disabled,input:disabled,select:disabled{opacity:.5;cursor:not-allowed}.prevent{opacity:.5;cursor:not-allowed;pointer-events:none}.controls{text-align:right;padding:16px 11px 6px 1px;max-width:100%;clear:both;overflow-x:auto;white-space:nowrap}.controls button{font-size:var(--reg-font-size);margin-right:31px;vertical-align:middle}.controls button span{vertical-align:middle}.controls button:last-of-type{margin-right:0}.data-table{margin-top:11px;overflow:hidden;box-shadow:0 -1px 3px 1px var(--grid-color);-moz-box-shadow:0 -1px 3px 1px var(--grid-color);-webkit-box-shadow:0 -1px 3px 1px var(--grid-color)}.sel-rows-checked{color:#00a8f399!important}.save-hilite{padding:2px 4px;border-radius:3px;background:#ebebeb;box-shadow:0 0 3px 1px var(--accent-color);-moz-box-shadow:0 0px 3px 1px var(--accent-color);-webkit-box-shadow:0 0px 3px 1px var(--accent-color)}.btn-ctrl-sel-rows,.btn-export-or-print{border:none;padding:3px 4px;border-radius:3px;background:#f5f5f5;vertical-align:middle;box-shadow:0 0 2px 1px var(--accent-color);-moz-box-shadow:0 0 2px 1px var(--accent-color);-webkit-box-shadow:0 0 2px 1px var(--accent-color)}.deebo-dd-contain-div:last-of-type{margin-right:0!important}.btn-export{width:100%;text-transform:uppercase}.btn-export:hover{text-decoration:underline}.btn-ctrl-sel-rows:hover,.btn-export-or-print:hover{background:#ebebeb;box-shadow:0 0 6px 2px gray;-moz-box-shadow:0 0 6px 2px gray;-webkit-box-shadow:0 0 6px 2px gray}.btn-center-selected{padding:2px 4px;border-radius:5px;background:#f5f5f5;box-shadow:0 0 6px 2px gray;-moz-box-shadow:0 0 6px 2px gray;-webkit-box-shadow:0 0 6px 2px gray}.btn-ctrl-sel-rows .material-icons{font-size:18px;font-weight:600;vertical-align:middle}.btn-ctrl-sel-rows .material-icons:not(.error-message){color:var(--accent-color)}.data-table-headers{cursor:pointer;white-space:nowrap;border-bottom:1px solid var(--grid-color)}.data-table-row{white-space:nowrap}.data-table-row:hover,.data-table-row .col-item-freeze:hover{background:#f3f3f3}.data-row-selected{background:#d6d6d6!important}.table-working{opacity:.1;pointer-events:none}.select-row-check{left:9px;z-index:10;cursor:pointer;margin:0;position:absolute;padding:0!important}.gb-row-num{left:2px;z-index:10;cursor:pointer;margin:0;font-size:x-small;position:absolute;padding:0!important}.mock-html{width:50%;height:18px;margin:0 auto;border-radius:11px;background:var(--grid-color)}.abs-right{top:7px;right:7px;position:absolute}.has-symbol:after{content:attr(data-symbol);padding-left:3px}.has-symbol-b:before{content:attr(data-symbol);padding-right:3px}.data-table-row-no-data{font-size:xx-large;color:gray;font-weight:500;text-shadow:-1px -1px var(--accent-color)}.data-row-selected .col-item-freeze,.data-row-selected .data-cell,.data-row-selected:hover,.data-row-selected .col-item-freeze:hover,.data-row-selected .data-cell:hover{background:#d6d6d6!important}.data-table-headers .col-item-freeze:first-of-type{border-bottom:1px solid var(--grid-color)}.col-header{z-index:2;width:125px;overflow:auto;cursor:grab;padding:7px 3px;text-align:center;position:relative;box-sizing:border-box;display:inline-block;vertical-align:top;white-space:pre-wrap;word-wrap:break-word;background:#fafafa;border-right:1px solid var(--grid-color)}.col-header button,.col-header span,.col-header select{cursor:pointer;vertical-align:middle}.col-header input{vertical-align:middle}.col-header-img-container{overflow-y:hidden;text-align:center;display:inline-block;vertical-align:middle;background-size:cover;background-position:center;background-repeat:no-repeat}.col-header-minimized{width:0!important;height:0!important;padding:0!important;overflow:hidden!important;border-bottom:none!important;border-right:none!important;transition:width .3s ease}.btn-maximize-col{border:none;border-radius:5px;background:#f5f5f5;box-shadow:0 0 3px 2px gray;font-size:var(--reg-font-size);margin-right:27px;padding:4px}.no-btn{border:none;background:none}.col-item-freeze{left:0;z-index:3;position:sticky;background:#fff;box-shadow:2px 0 3px 0 var(--grid-color);-moz-box-shadow:2px 0px 3px 0px var(--grid-color);-webkit-box-shadow:2px 0px 3px 0px var(--grid-color)}.col-header input,.select-filter{width:40%;margin:11px 0 1px}.sel-fil-container{z-index:5}.edit-input-option-cont{left:0;right:0}.edit-input-opt button{width:100%;font-size:15px;padding:11px 0 11px 17px;text-align:left!important}.selfil-opt-contain,.edit-input-option-cont{overflow:auto;max-height:240px;border-radius:5px;position:absolute;background:#fff;box-shadow:0 1px 3px 1px var(--grid-color);-moz-box-shadow:0 1px 3px 1px var(--grid-color);-webkit-box-shadow:0 1px 3px 1px var(--grid-color)}.selfil-div,.edit-input-opt{cursor:pointer;text-align:left;border-bottom:1px solid var(--grid-color)}.selfil-div:hover,.edit-input-opt:hover{background:#ebebeb}.selfil-div:last-of-type,.edit-input-opt:last-of-type{border-bottom:none}.selfil-div label{width:calc(100% - 22px);font-size:15px;cursor:pointer;padding:11px;display:inline-block}.selfil-div label input[type=checkbox]{margin-right:11px;vertical-align:middle}.select-filter-comparator{width:36px;z-index:3;opacity:0;position:relative;margin:11px 0 1px 15px}.btn-fil-comp{top:2px;left:-36px;border:none;position:absolute;background:#fafafa}.btn-fil-comp i{color:var(--accent-color)}@media screen and (min-width:960px){.col-header input,.select-filter,.select-filter-comparator{margin-top:7px;margin-bottom:1px}}.data-cell{width:125px;padding:11px 6px 11px 17px;overflow:auto;font-size:15px;word-wrap:break-word;white-space:pre-line;vertical-align:top;box-sizing:border-box;display:inline-flex;align-items:center;border-right:1px solid var(--grid-color);border-bottom:1px solid var(--grid-color)}input.edit-input{border-radius:0}.data-cell:focus,input.edit-input:focus{outline:1px solid #00a8f3}.dragger-cell-focused{background:#00a8f333;border-left:1px solid #00a8f3;border-right:1px solid #00a8f3!important}.focused-cell-dragger{width:9px;height:9px;cursor:crosshair;position:absolute;background:#00a8f3;box-shadow:0 0 1px 1px var(--accent-color);-moz-box-shadow:0 0 1px 1px var(--accent-color);-webkit-box-shadow:0 0 1px 1px var(--accent-color)}.holding-check{padding-left:44px}.data-cell-riiight{padding:11px 17px 11px 6px;justify-content:right}.data-cell-ceeenter{padding:11px 6px;justify-content:center!important}.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-min-col{cursor:pointer;top:0;right:2px;font-size:20px;border:none;background:none;position:absolute;padding:0 2px 5px 0;color:var(--accent-color)}.btn-min-col-hide{z-index:0;visibility:hidden;pointer-events:none}.btn-freeze-col{float:left;border:none;cursor:pointer;background:none}.btn-freeze-col .material-icons{font-size:16px;color:var(--accent-color)}.hidden-cols{max-width:100%;overflow-x:auto;clear:both;white-space:nowrap;padding:17px 15px 5px 4px}.hidden-cols button:first-of-type:before{content:\"Hidden Columns\";font-size:12px;font-weight:600;padding-right:11px;vertical-align:middle}.col-header span{word-wrap:break-word;vertical-align:middle;font-size:var(--reg-font-size)}.o-ins-div span,.o-ins-div i{vertical-align:middle;font-size:16px}.aux-chip{text-align:center;padding-bottom:33px;word-wrap:break-word;white-space:pre-wrap}.insights{padding:17px 15px}.insight-field{min-height:100px;padding:21px 0;font-size:large;white-space:pre-wrap;word-wrap:break-word;border-bottom:1px solid lightgray}@media screen and (max-width:760px){.insight-field:first-of-type{padding-top:7px}}@media screen and (min-width:760px){.insight-field-row{border-bottom:1px solid lightgray}.insight-field,.aux-chip{width:50%;vertical-align:top;display:inline-block;border-bottom:none}}@media screen and (min-width:1024px){.insight-field,.aux-chip{width:33%}}.chart-label-cont{padding-top:10px;text-align:center}.pie-piece-label{padding-top:5px;margin-right:27px;display:inline-block}.pie-piece-label-sq{width:11px;height:11px;margin:0 0 0 2px;display:inline-block;vertical-align:middle}.pie-piece-label span{font-size:small}.pie-piece-label span:before{font-size:smaller;padding-right:4px;font-weight:600;content:attr(data-percent)}.pie-layover{border-radius:50%;background:#fff;position:absolute;padding:5px!important;display:flex;font-size:17px;align-items:center;overflow:hidden;box-sizing:border-box;justify-content:center;color:var(--accent-color)}.pie-layover div{font-weight:500;padding:0!important}.ins-even-dist-ct{font-size:24px;font-weight:500}.line-graph-container{padding:11px 0 33px 7px!important;box-sizing:border-box;margin-left:11px}.lg-title-cont{padding:0!important;text-align:center;margin:17px 11px}.lg-n-marker-cont{width:60px;position:relative;padding:0!important;box-sizing:border-box;display:inline-block;vertical-align:top}.lg-n-marker-cont:before{top:45%;left:-37px;display:block;position:absolute;white-space:nowrap;color:var(--grid-color);content:attr(data-column);transform:rotate(-90deg)}.lg-n-marker,.lg-n-marker-h{padding:0 11px 0 0!important;font-size:small;position:relative;text-align:right;white-space:nowrap;box-sizing:border-box}.line-graph{width:calc(92% - 60px);position:relative;box-sizing:border-box;display:inline-block;vertical-align:top;padding:0!important;border-left:1px solid var(--accent-color);border-bottom:1px solid var(--accent-color)}.lg-lbl-x{left:0;right:0;bottom:-45px;font-size:small;font-weight:500;text-align:center;position:absolute;padding:0!important}.btn-line-graph-opts{margin:0;padding:4px;background:none;border-top:1px solid var(--accent-color);border-left:1px solid var(--accent-color);border-bottom:1px solid var(--accent-color)}.sp-line-graph-title{margin-top:7px;font-size:large;text-decoration:underline}.lg-dt-marker,.lg-dt-marker-h,.vd-n-marker,.vd-n-marker-h{bottom:-22px;font-size:small;position:absolute;text-align:center;padding:0!important;display:inline-block;box-sizing:border-box}.lg-dt-marker-h,.vd-n-marker-h{visibility:hidden}.lg-dt-marker.visible-marker{margin-left:21px}.lg-n-marker-h{height:0;visibility:hidden}.visible-marker{z-index:2;font-weight:600;background:#fff;height:unset!important;padding:1px 2px!important;visibility:visible!important;box-shadow:0 0 2px 1px #afafaf;-moz-box-shadow:0 0 2px 1px #afafaf;-webkit-box-shadow:0 0 2px 1px #afafaf}.visible-marker:before{font-weight:600}.lg-dt-marker:before{top:-15px;left:0;content:\"|\";position:absolute}.vd-n-marker:before{top:-15px;left:50%;content:\"|\";left:calc(50% - 2px);position:absolute}.lg-n-marker:before{top:-4px;right:-3px;content:\"-\";font-weight:600;font-size:large;position:absolute;background:#fff}.btn-line-graph-opts:hover{background:#d6d6d6;transition:background .3s ease}.btn-line-graph-opts:last-of-type{border-right:1px solid var(--accent-color)}.btn-lg-sel{color:#fff!important;background:var(--accent-color);box-shadow:0 0 2px 1px #afafaf;-moz-box-shadow:0 0 2px 1px #afafaf;-webkit-box-shadow:0 0 2px 1px #afafaf}.btn-lg-sel:hover{background:var(--accent-color)}.lg-plot{height:8px;width:8px;opacity:.3;cursor:pointer;border-radius:50%;position:absolute;padding:0!important;background:var(--accent-color)}.lg-plot:hover{z-index:100;opacity:1!important}.lg-plot:hover:after{padding:3px;display:inline-block;font-size:small;border-radius:5px;margin:0 0 0 25px;font-weight:700;content:attr(data-number);background:#fff!important;box-shadow:0 0 2px 1px #afafaf;-moz-box-shadow:0 0 2px 1px #afafaf;-webkit-box-shadow:0 0 2px 1px #afafaf}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:\"liga\";-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}\n"], dependencies: [{ kind: "component", type: DataTableHeader, selector: "app-data-table-header", inputs: ["colWid", "canFreeze", "hideMinCol", "columnHeader"], outputs: ["sort", "render", "width", "height", "reset", "freeze", "filFocus", "filSelClick", "minimize", "emitCompFocus", "scrollOnFocus"] }, { kind: "component", type: DataCellComponent, selector: "app-data-cell", inputs: ["rawText", "cell", "rowId", "colWid", "rowHeight", "noColResize", "columnValClass"], outputs: ["width", "height", "edit", "dragListen", "validateEditFocus", "clearVEditFocus"] }, { kind: "component", type: DataTablePaginator, selector: "app-data-table-paginator", inputs: ["totalRows", "filSortStr", "disableJump"], outputs: ["jumpTo"] }, { kind: "component", type: ChartsAndGraphs, selector: "app-charts-and-graphs", inputs: ["height", "state", "chartColumns"], outputs: ["close"] }, { kind: "component", type: RowGroupMenu, selector: "app-row-group-menu", inputs: ["groups", "disableGB", "enableClear"] }, { kind: "component", type: RowGroupPanel, selector: "app-row-group-panel", inputs: ["horizRest", "colOfInt", "groupValue", "useRowWid", "maxCols", "editable", "columns", "showRowNumbers"], outputs: ["openEvt", "horizPos", "cellEdit"] }, { kind: "component", type: ExportComponent, selector: "app-export-component", inputs: ["disableExport", "count", "columns"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: DecimalPipe, name: "number" }] });
|
|
6817
6850
|
}
|
|
6818
6851
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: NgxDeebodata, decorators: [{
|
|
6819
6852
|
type: Component,
|
|
@@ -6847,6 +6880,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
|
|
|
6847
6880
|
}], onWindowScroll: [{
|
|
6848
6881
|
type: HostListener,
|
|
6849
6882
|
args: ['window:scroll', ['$event']]
|
|
6883
|
+
}], onWindowShiftKeydown: [{
|
|
6884
|
+
type: HostListener,
|
|
6885
|
+
args: ['window:keydown.shift', ['$event']]
|
|
6886
|
+
}], onWindowShiftKeyup: [{
|
|
6887
|
+
type: HostListener,
|
|
6888
|
+
args: ['window:keyup.shift', ['$event']]
|
|
6850
6889
|
}], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], licenseKey: [{
|
|
6851
6890
|
type: Input
|
|
6852
6891
|
}], color1: [{
|
|
@@ -6865,6 +6904,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
|
|
|
6865
6904
|
type: Input
|
|
6866
6905
|
}], myColumnStyles: [{
|
|
6867
6906
|
type: Input
|
|
6907
|
+
}], myColumnValueColors: [{
|
|
6908
|
+
type: Input
|
|
6868
6909
|
}], pieGraphColors: [{
|
|
6869
6910
|
type: Input
|
|
6870
6911
|
}], removePieCovers: [{
|