@resolveio/client-lib-core 1.0.0 → 1.0.2
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/esm2020/lib/core.module.mjs +13 -6
- package/esm2020/lib/models/dialog.model.mjs +1 -1
- package/esm2020/lib/widgets/dialog/dialog.select-array-objs.content.mjs +200 -0
- package/esm2020/lib/widgets/dialog/dialog.service.mjs +10 -1
- package/fesm2015/resolveio-client-lib-core.mjs +284 -77
- package/fesm2015/resolveio-client-lib-core.mjs.map +1 -1
- package/fesm2020/resolveio-client-lib-core.mjs +284 -77
- package/fesm2020/resolveio-client-lib-core.mjs.map +1 -1
- package/lib/core.module.d.ts +10 -8
- package/lib/models/dialog.model.d.ts +5 -0
- package/lib/widgets/dialog/dialog.select-array-objs.content.d.ts +23 -0
- package/lib/widgets/dialog/dialog.service.d.ts +2 -1
- package/package.json +1 -1
|
@@ -3380,6 +3380,272 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImpor
|
|
|
3380
3380
|
}]
|
|
3381
3381
|
}], ctorParameters: function () { return [{ type: i1$3.NgbActiveModal }, { type: i2.FormBuilder }]; } });
|
|
3382
3382
|
|
|
3383
|
+
class CollapseTableComponent {
|
|
3384
|
+
constructor(_resizeService, _account) {
|
|
3385
|
+
this._resizeService = _resizeService;
|
|
3386
|
+
this._account = _account;
|
|
3387
|
+
this.headerFixed = false;
|
|
3388
|
+
this.secondaryColor = false;
|
|
3389
|
+
this.tertiaryColor = false;
|
|
3390
|
+
this.windowSize = window.innerWidth;
|
|
3391
|
+
this.windowSizeSubscription = null;
|
|
3392
|
+
}
|
|
3393
|
+
ngOnInit() {
|
|
3394
|
+
this.windowSizeSubscription = this._resizeService.onResize$.subscribe((val) => {
|
|
3395
|
+
this.windowSize = val.innerWidth;
|
|
3396
|
+
});
|
|
3397
|
+
if (this._account.getUser() && this._account.getUser().settings) {
|
|
3398
|
+
document.documentElement.style.setProperty('--primary-table-color', this._account.getUser().settings.table_color);
|
|
3399
|
+
document.documentElement.style.setProperty('--primary-table-font-color', this._account.getUser().settings.table_font_color);
|
|
3400
|
+
document.documentElement.style.setProperty('--font-size', this._account.getUser().settings.font_size + 'px');
|
|
3401
|
+
document.documentElement.style.setProperty('--secondary-table-color', this._account.getUser().settings.secondary_table_color);
|
|
3402
|
+
document.documentElement.style.setProperty('--secondary-table-font-color', this._account.getUser().settings.secondary_table_font_color);
|
|
3403
|
+
document.documentElement.style.setProperty('--tertiary-table-color', this._account.getUser().settings.tertiary_table_color);
|
|
3404
|
+
document.documentElement.style.setProperty('--tertiary-table-font-color', this._account.getUser().settings.tertiary_table_font_color);
|
|
3405
|
+
}
|
|
3406
|
+
}
|
|
3407
|
+
ngOnDestroy() {
|
|
3408
|
+
this.windowSizeSubscription.unsubscribe();
|
|
3409
|
+
}
|
|
3410
|
+
onClick(event) {
|
|
3411
|
+
// if (event.target.localName === 'th') {
|
|
3412
|
+
// console.log('You Clicked Header: ' + event.target.innerHTML);
|
|
3413
|
+
// }
|
|
3414
|
+
}
|
|
3415
|
+
getCollapseClass() {
|
|
3416
|
+
let res = ['table'];
|
|
3417
|
+
if (this.secondaryColor) {
|
|
3418
|
+
res.push('collapseTable-sec');
|
|
3419
|
+
}
|
|
3420
|
+
else if (this.tertiaryColor) {
|
|
3421
|
+
res.push('collapseTable-tert');
|
|
3422
|
+
}
|
|
3423
|
+
else {
|
|
3424
|
+
res.push('collapseTable');
|
|
3425
|
+
}
|
|
3426
|
+
// if (this.tableFixed) {
|
|
3427
|
+
// res.push('fixed');
|
|
3428
|
+
// }
|
|
3429
|
+
// else if (this.headerFixed) {
|
|
3430
|
+
// res.push('headerFixed');
|
|
3431
|
+
// }
|
|
3432
|
+
return res;
|
|
3433
|
+
}
|
|
3434
|
+
getPrimaryColor() {
|
|
3435
|
+
return this._account.getUser() ? this._account.getUser().settings.table_color : '#3b3ee3';
|
|
3436
|
+
}
|
|
3437
|
+
}
|
|
3438
|
+
CollapseTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CollapseTableComponent, deps: [{ token: ResizeService }, { token: AccountManagerService }], target: i0.ɵɵFactoryTarget.Component });
|
|
3439
|
+
CollapseTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: CollapseTableComponent, selector: "collapse-table", inputs: { collapseSize: "collapseSize", tableFixed: "tableFixed", headerFixed: "headerFixed", secondaryColor: "secondaryColor", tertiaryColor: "tertiaryColor" }, ngImport: i0, template: "<style>\n ::ng-deep :root {\n --primary-table-color: #3b3ee3;\n --primary-table-font-color: white;\n --font-size: 12px;\n --secondary-table-color: #87ceeb;\n --secondary-table-font-color: #000000;\n --tertiary-table-color: #ff4500;\n --tertiary-table-font-color: #000000;\n }\n\n\t:host /deep/ .collapseTable {\n border: 1px solid #ccc;\n margin: 0;\n padding: 0;\n width: 100%;\n /*table-layout: fixed;*/ \n }\n :host /deep/ .collapseTable tr {\n border: 1px solid #ddd;\n padding: 0.35em;\n }\n :host /deep/ .collapseTable th, :host /deep/ .collapseTable td {\n padding: 0.625em;\n text-align: center;\n vertical-align: middle;\n }\n :host /deep/ .collapseTable th {\n letter-spacing: 0.1em;\n text-transform: uppercase;\n background-color: var(--primary-table-color);\n color: var(--primary-table-font-color);\n font-size: var(--font-size);\n position: sticky;\n z-index: 10;\n top: 0;\n } \n :host /deep/ .collapseTable-sec {\n border: 1px solid #ccc;\n margin: 0;\n padding: 0;\n width: 100%;\n }\n :host /deep/ .collapseTable-sec tr {\n border: 1px solid #ddd;\n padding: 0.35em;\n }\n :host /deep/ .collapseTable-sec th, :host /deep/ .collapseTable-sec td {\n padding: 0.625em;\n text-align: center;\n }\n :host /deep/ .collapseTable-sec th {\n letter-spacing: 0.1em;\n text-transform: uppercase;\n background-color: var(--secondary-table-color);\n color: var(--secondary-table-font-color);\n font-size: var(--font-size);\n position: sticky;\n z-index: 10;\n top: 0;\n } \n :host /deep/ .collapseTable-tert {\n border: 1px solid #ccc;\n margin: 0;\n padding: 0;\n width: 100%;\n }\n :host /deep/ .collapseTable-tert tr {\n border: 1px solid #ddd;\n padding: 0.35em;\n }\n :host /deep/ .collapseTable-tert th, :host /deep/ .collapseTable-tert td {\n padding: 0.625em;\n text-align: center;\n }\n :host /deep/ .collapseTable-tert th {\n letter-spacing: 0.1em;\n text-transform: uppercase;\n background-color: var(--tertiary-table-color);\n color: var(--tertiary-table-font-color);\n font-size: var(--font-size);\n position: sticky;\n z-index: 10;\n top: 0;\n }\n \n .fixed {\n table-layout: fixed;\n }\n\n :host /deep/ .headerFixed thead, :host /deep/ .headerFixed tbody tr {\n display:table;\n width:100%;\n table-layout:fixed;\n }\n\n .hide {\n display: none;\n }\n</style>\n\n<div class=\"table-responsive-xl\">\n <table [ngClass]=\"getCollapseClass()\" [style.border]=\"secondaryColor || tertiaryColor ? '3px solid black' : 'none'\" cellspacing=\"0\" cellpadding=\"0\">\n <ng-content></ng-content>\n </table>\n</div>", styles: ["\n ::ng-deep :root {\n --primary-table-color: #3b3ee3;\n --primary-table-font-color: white;\n --font-size: 12px;\n --secondary-table-color: #87ceeb;\n --secondary-table-font-color: #000000;\n --tertiary-table-color: #ff4500;\n --tertiary-table-font-color: #000000;\n }\n\n\t:host /deep/ .collapseTable {\n border: 1px solid #ccc;\n margin: 0;\n padding: 0;\n width: 100%;\n /*table-layout: fixed;*/ \n }\n :host /deep/ .collapseTable tr {\n border: 1px solid #ddd;\n padding: 0.35em;\n }\n :host /deep/ .collapseTable th, :host /deep/ .collapseTable td {\n padding: 0.625em;\n text-align: center;\n vertical-align: middle;\n }\n :host /deep/ .collapseTable th {\n letter-spacing: 0.1em;\n text-transform: uppercase;\n background-color: var(--primary-table-color);\n color: var(--primary-table-font-color);\n font-size: var(--font-size);\n position: sticky;\n z-index: 10;\n top: 0;\n } \n :host /deep/ .collapseTable-sec {\n border: 1px solid #ccc;\n margin: 0;\n padding: 0;\n width: 100%;\n }\n :host /deep/ .collapseTable-sec tr {\n border: 1px solid #ddd;\n padding: 0.35em;\n }\n :host /deep/ .collapseTable-sec th, :host /deep/ .collapseTable-sec td {\n padding: 0.625em;\n text-align: center;\n }\n :host /deep/ .collapseTable-sec th {\n letter-spacing: 0.1em;\n text-transform: uppercase;\n background-color: var(--secondary-table-color);\n color: var(--secondary-table-font-color);\n font-size: var(--font-size);\n position: sticky;\n z-index: 10;\n top: 0;\n } \n :host /deep/ .collapseTable-tert {\n border: 1px solid #ccc;\n margin: 0;\n padding: 0;\n width: 100%;\n }\n :host /deep/ .collapseTable-tert tr {\n border: 1px solid #ddd;\n padding: 0.35em;\n }\n :host /deep/ .collapseTable-tert th, :host /deep/ .collapseTable-tert td {\n padding: 0.625em;\n text-align: center;\n }\n :host /deep/ .collapseTable-tert th {\n letter-spacing: 0.1em;\n text-transform: uppercase;\n background-color: var(--tertiary-table-color);\n color: var(--tertiary-table-font-color);\n font-size: var(--font-size);\n position: sticky;\n z-index: 10;\n top: 0;\n }\n \n .fixed {\n table-layout: fixed;\n }\n\n :host /deep/ .headerFixed thead, :host /deep/ .headerFixed tbody tr {\n display:table;\n width:100%;\n table-layout:fixed;\n }\n\n .hide {\n display: none;\n }\n"], directives: [{ type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
3440
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CollapseTableComponent, decorators: [{
|
|
3441
|
+
type: Component,
|
|
3442
|
+
args: [{ selector: 'collapse-table', template: "<style>\n ::ng-deep :root {\n --primary-table-color: #3b3ee3;\n --primary-table-font-color: white;\n --font-size: 12px;\n --secondary-table-color: #87ceeb;\n --secondary-table-font-color: #000000;\n --tertiary-table-color: #ff4500;\n --tertiary-table-font-color: #000000;\n }\n\n\t:host /deep/ .collapseTable {\n border: 1px solid #ccc;\n margin: 0;\n padding: 0;\n width: 100%;\n /*table-layout: fixed;*/ \n }\n :host /deep/ .collapseTable tr {\n border: 1px solid #ddd;\n padding: 0.35em;\n }\n :host /deep/ .collapseTable th, :host /deep/ .collapseTable td {\n padding: 0.625em;\n text-align: center;\n vertical-align: middle;\n }\n :host /deep/ .collapseTable th {\n letter-spacing: 0.1em;\n text-transform: uppercase;\n background-color: var(--primary-table-color);\n color: var(--primary-table-font-color);\n font-size: var(--font-size);\n position: sticky;\n z-index: 10;\n top: 0;\n } \n :host /deep/ .collapseTable-sec {\n border: 1px solid #ccc;\n margin: 0;\n padding: 0;\n width: 100%;\n }\n :host /deep/ .collapseTable-sec tr {\n border: 1px solid #ddd;\n padding: 0.35em;\n }\n :host /deep/ .collapseTable-sec th, :host /deep/ .collapseTable-sec td {\n padding: 0.625em;\n text-align: center;\n }\n :host /deep/ .collapseTable-sec th {\n letter-spacing: 0.1em;\n text-transform: uppercase;\n background-color: var(--secondary-table-color);\n color: var(--secondary-table-font-color);\n font-size: var(--font-size);\n position: sticky;\n z-index: 10;\n top: 0;\n } \n :host /deep/ .collapseTable-tert {\n border: 1px solid #ccc;\n margin: 0;\n padding: 0;\n width: 100%;\n }\n :host /deep/ .collapseTable-tert tr {\n border: 1px solid #ddd;\n padding: 0.35em;\n }\n :host /deep/ .collapseTable-tert th, :host /deep/ .collapseTable-tert td {\n padding: 0.625em;\n text-align: center;\n }\n :host /deep/ .collapseTable-tert th {\n letter-spacing: 0.1em;\n text-transform: uppercase;\n background-color: var(--tertiary-table-color);\n color: var(--tertiary-table-font-color);\n font-size: var(--font-size);\n position: sticky;\n z-index: 10;\n top: 0;\n }\n \n .fixed {\n table-layout: fixed;\n }\n\n :host /deep/ .headerFixed thead, :host /deep/ .headerFixed tbody tr {\n display:table;\n width:100%;\n table-layout:fixed;\n }\n\n .hide {\n display: none;\n }\n</style>\n\n<div class=\"table-responsive-xl\">\n <table [ngClass]=\"getCollapseClass()\" [style.border]=\"secondaryColor || tertiaryColor ? '3px solid black' : 'none'\" cellspacing=\"0\" cellpadding=\"0\">\n <ng-content></ng-content>\n </table>\n</div>" }]
|
|
3443
|
+
}], ctorParameters: function () { return [{ type: ResizeService }, { type: AccountManagerService }]; }, propDecorators: { collapseSize: [{
|
|
3444
|
+
type: Input
|
|
3445
|
+
}], tableFixed: [{
|
|
3446
|
+
type: Input
|
|
3447
|
+
}], headerFixed: [{
|
|
3448
|
+
type: Input
|
|
3449
|
+
}], secondaryColor: [{
|
|
3450
|
+
type: Input
|
|
3451
|
+
}], tertiaryColor: [{
|
|
3452
|
+
type: Input
|
|
3453
|
+
}] } });
|
|
3454
|
+
|
|
3455
|
+
// tslint:disable-next-line:component-class-suffix
|
|
3456
|
+
class DialogSelectArrayObjsContent {
|
|
3457
|
+
constructor(_activeModal) {
|
|
3458
|
+
this._activeModal = _activeModal;
|
|
3459
|
+
this.title = '';
|
|
3460
|
+
this.objects = [];
|
|
3461
|
+
this.multiple = false;
|
|
3462
|
+
this.allowNone = false;
|
|
3463
|
+
this.selectedIndex = null;
|
|
3464
|
+
this.selectedItem = null;
|
|
3465
|
+
this.selectedIndexes = [];
|
|
3466
|
+
this.selectedItems = [];
|
|
3467
|
+
}
|
|
3468
|
+
ngAfterViewInit() {
|
|
3469
|
+
setTimeout(() => {
|
|
3470
|
+
let foundElement = this.recursiveFindFirstElement(this.allElements.nativeElement);
|
|
3471
|
+
if (foundElement) {
|
|
3472
|
+
foundElement.focus();
|
|
3473
|
+
}
|
|
3474
|
+
else {
|
|
3475
|
+
this.close.nativeElement.focus();
|
|
3476
|
+
this.close.nativeElement.blur();
|
|
3477
|
+
}
|
|
3478
|
+
}, 100);
|
|
3479
|
+
this.objects.forEach((obj, objIdx) => {
|
|
3480
|
+
if (obj.selected) {
|
|
3481
|
+
this.selectedIndexes.push(objIdx);
|
|
3482
|
+
this.selectedItems.push(obj);
|
|
3483
|
+
}
|
|
3484
|
+
});
|
|
3485
|
+
}
|
|
3486
|
+
recursiveFindFirstElement(element) {
|
|
3487
|
+
let foundElement = null;
|
|
3488
|
+
let htmlCol = element.children;
|
|
3489
|
+
for (let i = 0; i < Object.keys(htmlCol).length; i++) {
|
|
3490
|
+
let key = Object.keys(htmlCol)[i];
|
|
3491
|
+
let htmlElem = htmlCol[key];
|
|
3492
|
+
if (htmlElem.children && htmlElem.children.length) {
|
|
3493
|
+
foundElement = this.recursiveFindFirstElement(htmlElem);
|
|
3494
|
+
}
|
|
3495
|
+
else if (htmlElem.tagName === 'BUTTON' && htmlElem.classList.contains('close')) {
|
|
3496
|
+
return null;
|
|
3497
|
+
}
|
|
3498
|
+
else if ((htmlElem.tagName === 'BUTTON' || htmlElem.tagName === 'INPUT' || htmlElem.tagName === 'SELECT' || htmlElem.tagName === 'TEXTAREA') && !htmlElem.hidden && !htmlElem.disabled) {
|
|
3499
|
+
return htmlElem;
|
|
3500
|
+
}
|
|
3501
|
+
if (foundElement) {
|
|
3502
|
+
break;
|
|
3503
|
+
}
|
|
3504
|
+
}
|
|
3505
|
+
return foundElement;
|
|
3506
|
+
}
|
|
3507
|
+
onSelectItem(index) {
|
|
3508
|
+
if (!this.multiple) {
|
|
3509
|
+
if (this.objects[index] === this.selectedItem) {
|
|
3510
|
+
this.selectedItem = null;
|
|
3511
|
+
this.selectedIndex = null;
|
|
3512
|
+
}
|
|
3513
|
+
else {
|
|
3514
|
+
this.selectedItem = this.objects[index];
|
|
3515
|
+
this.selectedIndex = index;
|
|
3516
|
+
}
|
|
3517
|
+
}
|
|
3518
|
+
else {
|
|
3519
|
+
if (this.selectedItems.some(a => a.value === this.objects[index].value)) {
|
|
3520
|
+
this.selectedIndexes.splice(this.selectedIndexes.indexOf(index), 1);
|
|
3521
|
+
this.selectedItems.splice(this.selectedItems.map(a => a.value).indexOf(this.objects[index].value), 1);
|
|
3522
|
+
}
|
|
3523
|
+
else {
|
|
3524
|
+
this.selectedIndexes.push(index);
|
|
3525
|
+
this.selectedItems.push(this.objects[index]);
|
|
3526
|
+
}
|
|
3527
|
+
}
|
|
3528
|
+
}
|
|
3529
|
+
}
|
|
3530
|
+
DialogSelectArrayObjsContent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: DialogSelectArrayObjsContent, deps: [{ token: i1$3.NgbActiveModal }], target: i0.ɵɵFactoryTarget.Component });
|
|
3531
|
+
DialogSelectArrayObjsContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: DialogSelectArrayObjsContent, selector: "ng-component", inputs: { title: "title", objects: "objects", multiple: "multiple", allowNone: "allowNone" }, viewQueries: [{ propertyName: "close", first: true, predicate: ["close"], descendants: true }, { propertyName: "allElements", first: true, predicate: ["allElements"], descendants: true }], ngImport: i0, template: `
|
|
3532
|
+
<style>
|
|
3533
|
+
collapse-table tr:hover {
|
|
3534
|
+
background-color: lightblue;
|
|
3535
|
+
cursor: pointer;
|
|
3536
|
+
}
|
|
3537
|
+
|
|
3538
|
+
.selected {
|
|
3539
|
+
background-color: lightblue;
|
|
3540
|
+
}
|
|
3541
|
+
|
|
3542
|
+
collapse-table {
|
|
3543
|
+
width: 100%;
|
|
3544
|
+
}
|
|
3545
|
+
</style>
|
|
3546
|
+
<div #allElements>
|
|
3547
|
+
<div class="modal-header">
|
|
3548
|
+
<h4 class="modal-title"><i class="fa fa-question-circle" style="color: blue; font-size: 0.85em" aria-hidden="true"></i> {{ title }}</h4>
|
|
3549
|
+
<button type="button" class="close" aria-label="Close" (click)="_activeModal.dismiss()" #close>
|
|
3550
|
+
<span aria-hidden="true">×</span>
|
|
3551
|
+
</button>
|
|
3552
|
+
</div>
|
|
3553
|
+
<div class="modal-body">
|
|
3554
|
+
<div style="height: 60vh; overflow-y: auto">
|
|
3555
|
+
<collapse-table collapseSize="900">
|
|
3556
|
+
<thead>
|
|
3557
|
+
<tr>
|
|
3558
|
+
<th>List</th>
|
|
3559
|
+
</tr>
|
|
3560
|
+
</thead>
|
|
3561
|
+
<tbody>
|
|
3562
|
+
<tr *ngFor="let object of objects; let i = index" (click)="onSelectItem(i)" [ngClass]="{'selected' : i === selectedIndex || selectedIndexes.includes(i)}">
|
|
3563
|
+
<td>{{object.text}}</td>
|
|
3564
|
+
</tr>
|
|
3565
|
+
</tbody>
|
|
3566
|
+
</collapse-table>
|
|
3567
|
+
</div>
|
|
3568
|
+
</div>
|
|
3569
|
+
<div class="modal-footer">
|
|
3570
|
+
<ng-container *ngIf="!allowNone">
|
|
3571
|
+
<button type="button" [ngClass]="['btn', (selectedItem || selectedItems.length) ? 'btn-success' : 'btn-danger']" [disabled]="!selectedItem && !selectedItems.length" (click)="_activeModal.close(selectedItem || selectedItems)">Submit</button>
|
|
3572
|
+
</ng-container>
|
|
3573
|
+
<ng-container *ngIf="allowNone">
|
|
3574
|
+
<button type="button" class="btn btn-success" (click)="_activeModal.close(selectedItem || selectedItems)">Submit</button>
|
|
3575
|
+
</ng-container>
|
|
3576
|
+
<button type="button" class="btn btn-secondary" (click)="_activeModal.dismiss()">Cancel</button>
|
|
3577
|
+
</div>
|
|
3578
|
+
</div>
|
|
3579
|
+
`, isInline: true, styles: ["\n\t\t\tcollapse-table tr:hover {\n\t\t\t\tbackground-color: lightblue;\n\t\t\t\tcursor: pointer;\n\t\t\t}\n\n\t\t\t.selected {\n\t\t\t\tbackground-color: lightblue;\n\t\t\t}\n\n\t\t\tcollapse-table {\n\t\t\t\twidth: 100%;\n\t\t\t}\n\t\t"], components: [{ type: CollapseTableComponent, selector: "collapse-table", inputs: ["collapseSize", "tableFixed", "headerFixed", "secondaryColor", "tertiaryColor"] }], directives: [{ type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
3580
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: DialogSelectArrayObjsContent, decorators: [{
|
|
3581
|
+
type: Component,
|
|
3582
|
+
args: [{
|
|
3583
|
+
template: `
|
|
3584
|
+
<style>
|
|
3585
|
+
collapse-table tr:hover {
|
|
3586
|
+
background-color: lightblue;
|
|
3587
|
+
cursor: pointer;
|
|
3588
|
+
}
|
|
3589
|
+
|
|
3590
|
+
.selected {
|
|
3591
|
+
background-color: lightblue;
|
|
3592
|
+
}
|
|
3593
|
+
|
|
3594
|
+
collapse-table {
|
|
3595
|
+
width: 100%;
|
|
3596
|
+
}
|
|
3597
|
+
</style>
|
|
3598
|
+
<div #allElements>
|
|
3599
|
+
<div class="modal-header">
|
|
3600
|
+
<h4 class="modal-title"><i class="fa fa-question-circle" style="color: blue; font-size: 0.85em" aria-hidden="true"></i> {{ title }}</h4>
|
|
3601
|
+
<button type="button" class="close" aria-label="Close" (click)="_activeModal.dismiss()" #close>
|
|
3602
|
+
<span aria-hidden="true">×</span>
|
|
3603
|
+
</button>
|
|
3604
|
+
</div>
|
|
3605
|
+
<div class="modal-body">
|
|
3606
|
+
<div style="height: 60vh; overflow-y: auto">
|
|
3607
|
+
<collapse-table collapseSize="900">
|
|
3608
|
+
<thead>
|
|
3609
|
+
<tr>
|
|
3610
|
+
<th>List</th>
|
|
3611
|
+
</tr>
|
|
3612
|
+
</thead>
|
|
3613
|
+
<tbody>
|
|
3614
|
+
<tr *ngFor="let object of objects; let i = index" (click)="onSelectItem(i)" [ngClass]="{'selected' : i === selectedIndex || selectedIndexes.includes(i)}">
|
|
3615
|
+
<td>{{object.text}}</td>
|
|
3616
|
+
</tr>
|
|
3617
|
+
</tbody>
|
|
3618
|
+
</collapse-table>
|
|
3619
|
+
</div>
|
|
3620
|
+
</div>
|
|
3621
|
+
<div class="modal-footer">
|
|
3622
|
+
<ng-container *ngIf="!allowNone">
|
|
3623
|
+
<button type="button" [ngClass]="['btn', (selectedItem || selectedItems.length) ? 'btn-success' : 'btn-danger']" [disabled]="!selectedItem && !selectedItems.length" (click)="_activeModal.close(selectedItem || selectedItems)">Submit</button>
|
|
3624
|
+
</ng-container>
|
|
3625
|
+
<ng-container *ngIf="allowNone">
|
|
3626
|
+
<button type="button" class="btn btn-success" (click)="_activeModal.close(selectedItem || selectedItems)">Submit</button>
|
|
3627
|
+
</ng-container>
|
|
3628
|
+
<button type="button" class="btn btn-secondary" (click)="_activeModal.dismiss()">Cancel</button>
|
|
3629
|
+
</div>
|
|
3630
|
+
</div>
|
|
3631
|
+
`
|
|
3632
|
+
}]
|
|
3633
|
+
}], ctorParameters: function () { return [{ type: i1$3.NgbActiveModal }]; }, propDecorators: { title: [{
|
|
3634
|
+
type: Input
|
|
3635
|
+
}], objects: [{
|
|
3636
|
+
type: Input
|
|
3637
|
+
}], multiple: [{
|
|
3638
|
+
type: Input
|
|
3639
|
+
}], allowNone: [{
|
|
3640
|
+
type: Input
|
|
3641
|
+
}], close: [{
|
|
3642
|
+
type: ViewChild,
|
|
3643
|
+
args: ['close', { static: false }]
|
|
3644
|
+
}], allElements: [{
|
|
3645
|
+
type: ViewChild,
|
|
3646
|
+
args: ['allElements', { static: false }]
|
|
3647
|
+
}] } });
|
|
3648
|
+
|
|
3383
3649
|
class DialogService {
|
|
3384
3650
|
constructor(modalService) {
|
|
3385
3651
|
this.modalService = modalService;
|
|
@@ -3432,6 +3698,14 @@ class DialogService {
|
|
|
3432
3698
|
const modalRef = this.openDialog(DialogRegisterContent);
|
|
3433
3699
|
return modalRef.result;
|
|
3434
3700
|
}
|
|
3701
|
+
selectWithArrayObjs(title, objects, multiple = false, allowNone = false) {
|
|
3702
|
+
const modalRef = this.openDialog(DialogSelectArrayObjsContent);
|
|
3703
|
+
modalRef.componentInstance.title = title;
|
|
3704
|
+
modalRef.componentInstance.objects = objects;
|
|
3705
|
+
modalRef.componentInstance.multiple = multiple;
|
|
3706
|
+
modalRef.componentInstance.allowNone = allowNone;
|
|
3707
|
+
return modalRef.result;
|
|
3708
|
+
}
|
|
3435
3709
|
}
|
|
3436
3710
|
DialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: DialogService, deps: [{ token: i1$3.NgbModal }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
3437
3711
|
DialogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: DialogService });
|
|
@@ -4894,78 +5168,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImpor
|
|
|
4894
5168
|
}]
|
|
4895
5169
|
}] });
|
|
4896
5170
|
|
|
4897
|
-
class CollapseTableComponent {
|
|
4898
|
-
constructor(_resizeService, _account) {
|
|
4899
|
-
this._resizeService = _resizeService;
|
|
4900
|
-
this._account = _account;
|
|
4901
|
-
this.headerFixed = false;
|
|
4902
|
-
this.secondaryColor = false;
|
|
4903
|
-
this.tertiaryColor = false;
|
|
4904
|
-
this.windowSize = window.innerWidth;
|
|
4905
|
-
this.windowSizeSubscription = null;
|
|
4906
|
-
}
|
|
4907
|
-
ngOnInit() {
|
|
4908
|
-
this.windowSizeSubscription = this._resizeService.onResize$.subscribe((val) => {
|
|
4909
|
-
this.windowSize = val.innerWidth;
|
|
4910
|
-
});
|
|
4911
|
-
if (this._account.getUser() && this._account.getUser().settings) {
|
|
4912
|
-
document.documentElement.style.setProperty('--primary-table-color', this._account.getUser().settings.table_color);
|
|
4913
|
-
document.documentElement.style.setProperty('--primary-table-font-color', this._account.getUser().settings.table_font_color);
|
|
4914
|
-
document.documentElement.style.setProperty('--font-size', this._account.getUser().settings.font_size + 'px');
|
|
4915
|
-
document.documentElement.style.setProperty('--secondary-table-color', this._account.getUser().settings.secondary_table_color);
|
|
4916
|
-
document.documentElement.style.setProperty('--secondary-table-font-color', this._account.getUser().settings.secondary_table_font_color);
|
|
4917
|
-
document.documentElement.style.setProperty('--tertiary-table-color', this._account.getUser().settings.tertiary_table_color);
|
|
4918
|
-
document.documentElement.style.setProperty('--tertiary-table-font-color', this._account.getUser().settings.tertiary_table_font_color);
|
|
4919
|
-
}
|
|
4920
|
-
}
|
|
4921
|
-
ngOnDestroy() {
|
|
4922
|
-
this.windowSizeSubscription.unsubscribe();
|
|
4923
|
-
}
|
|
4924
|
-
onClick(event) {
|
|
4925
|
-
// if (event.target.localName === 'th') {
|
|
4926
|
-
// console.log('You Clicked Header: ' + event.target.innerHTML);
|
|
4927
|
-
// }
|
|
4928
|
-
}
|
|
4929
|
-
getCollapseClass() {
|
|
4930
|
-
let res = ['table'];
|
|
4931
|
-
if (this.secondaryColor) {
|
|
4932
|
-
res.push('collapseTable-sec');
|
|
4933
|
-
}
|
|
4934
|
-
else if (this.tertiaryColor) {
|
|
4935
|
-
res.push('collapseTable-tert');
|
|
4936
|
-
}
|
|
4937
|
-
else {
|
|
4938
|
-
res.push('collapseTable');
|
|
4939
|
-
}
|
|
4940
|
-
// if (this.tableFixed) {
|
|
4941
|
-
// res.push('fixed');
|
|
4942
|
-
// }
|
|
4943
|
-
// else if (this.headerFixed) {
|
|
4944
|
-
// res.push('headerFixed');
|
|
4945
|
-
// }
|
|
4946
|
-
return res;
|
|
4947
|
-
}
|
|
4948
|
-
getPrimaryColor() {
|
|
4949
|
-
return this._account.getUser() ? this._account.getUser().settings.table_color : '#3b3ee3';
|
|
4950
|
-
}
|
|
4951
|
-
}
|
|
4952
|
-
CollapseTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CollapseTableComponent, deps: [{ token: ResizeService }, { token: AccountManagerService }], target: i0.ɵɵFactoryTarget.Component });
|
|
4953
|
-
CollapseTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: CollapseTableComponent, selector: "collapse-table", inputs: { collapseSize: "collapseSize", tableFixed: "tableFixed", headerFixed: "headerFixed", secondaryColor: "secondaryColor", tertiaryColor: "tertiaryColor" }, ngImport: i0, template: "<style>\n ::ng-deep :root {\n --primary-table-color: #3b3ee3;\n --primary-table-font-color: white;\n --font-size: 12px;\n --secondary-table-color: #87ceeb;\n --secondary-table-font-color: #000000;\n --tertiary-table-color: #ff4500;\n --tertiary-table-font-color: #000000;\n }\n\n\t:host /deep/ .collapseTable {\n border: 1px solid #ccc;\n margin: 0;\n padding: 0;\n width: 100%;\n /*table-layout: fixed;*/ \n }\n :host /deep/ .collapseTable tr {\n border: 1px solid #ddd;\n padding: 0.35em;\n }\n :host /deep/ .collapseTable th, :host /deep/ .collapseTable td {\n padding: 0.625em;\n text-align: center;\n vertical-align: middle;\n }\n :host /deep/ .collapseTable th {\n letter-spacing: 0.1em;\n text-transform: uppercase;\n background-color: var(--primary-table-color);\n color: var(--primary-table-font-color);\n font-size: var(--font-size);\n position: sticky;\n z-index: 10;\n top: 0;\n } \n :host /deep/ .collapseTable-sec {\n border: 1px solid #ccc;\n margin: 0;\n padding: 0;\n width: 100%;\n }\n :host /deep/ .collapseTable-sec tr {\n border: 1px solid #ddd;\n padding: 0.35em;\n }\n :host /deep/ .collapseTable-sec th, :host /deep/ .collapseTable-sec td {\n padding: 0.625em;\n text-align: center;\n }\n :host /deep/ .collapseTable-sec th {\n letter-spacing: 0.1em;\n text-transform: uppercase;\n background-color: var(--secondary-table-color);\n color: var(--secondary-table-font-color);\n font-size: var(--font-size);\n position: sticky;\n z-index: 10;\n top: 0;\n } \n :host /deep/ .collapseTable-tert {\n border: 1px solid #ccc;\n margin: 0;\n padding: 0;\n width: 100%;\n }\n :host /deep/ .collapseTable-tert tr {\n border: 1px solid #ddd;\n padding: 0.35em;\n }\n :host /deep/ .collapseTable-tert th, :host /deep/ .collapseTable-tert td {\n padding: 0.625em;\n text-align: center;\n }\n :host /deep/ .collapseTable-tert th {\n letter-spacing: 0.1em;\n text-transform: uppercase;\n background-color: var(--tertiary-table-color);\n color: var(--tertiary-table-font-color);\n font-size: var(--font-size);\n position: sticky;\n z-index: 10;\n top: 0;\n }\n \n .fixed {\n table-layout: fixed;\n }\n\n :host /deep/ .headerFixed thead, :host /deep/ .headerFixed tbody tr {\n display:table;\n width:100%;\n table-layout:fixed;\n }\n\n .hide {\n display: none;\n }\n</style>\n\n<div class=\"table-responsive-xl\">\n <table [ngClass]=\"getCollapseClass()\" [style.border]=\"secondaryColor || tertiaryColor ? '3px solid black' : 'none'\" cellspacing=\"0\" cellpadding=\"0\">\n <ng-content></ng-content>\n </table>\n</div>", styles: ["\n ::ng-deep :root {\n --primary-table-color: #3b3ee3;\n --primary-table-font-color: white;\n --font-size: 12px;\n --secondary-table-color: #87ceeb;\n --secondary-table-font-color: #000000;\n --tertiary-table-color: #ff4500;\n --tertiary-table-font-color: #000000;\n }\n\n\t:host /deep/ .collapseTable {\n border: 1px solid #ccc;\n margin: 0;\n padding: 0;\n width: 100%;\n /*table-layout: fixed;*/ \n }\n :host /deep/ .collapseTable tr {\n border: 1px solid #ddd;\n padding: 0.35em;\n }\n :host /deep/ .collapseTable th, :host /deep/ .collapseTable td {\n padding: 0.625em;\n text-align: center;\n vertical-align: middle;\n }\n :host /deep/ .collapseTable th {\n letter-spacing: 0.1em;\n text-transform: uppercase;\n background-color: var(--primary-table-color);\n color: var(--primary-table-font-color);\n font-size: var(--font-size);\n position: sticky;\n z-index: 10;\n top: 0;\n } \n :host /deep/ .collapseTable-sec {\n border: 1px solid #ccc;\n margin: 0;\n padding: 0;\n width: 100%;\n }\n :host /deep/ .collapseTable-sec tr {\n border: 1px solid #ddd;\n padding: 0.35em;\n }\n :host /deep/ .collapseTable-sec th, :host /deep/ .collapseTable-sec td {\n padding: 0.625em;\n text-align: center;\n }\n :host /deep/ .collapseTable-sec th {\n letter-spacing: 0.1em;\n text-transform: uppercase;\n background-color: var(--secondary-table-color);\n color: var(--secondary-table-font-color);\n font-size: var(--font-size);\n position: sticky;\n z-index: 10;\n top: 0;\n } \n :host /deep/ .collapseTable-tert {\n border: 1px solid #ccc;\n margin: 0;\n padding: 0;\n width: 100%;\n }\n :host /deep/ .collapseTable-tert tr {\n border: 1px solid #ddd;\n padding: 0.35em;\n }\n :host /deep/ .collapseTable-tert th, :host /deep/ .collapseTable-tert td {\n padding: 0.625em;\n text-align: center;\n }\n :host /deep/ .collapseTable-tert th {\n letter-spacing: 0.1em;\n text-transform: uppercase;\n background-color: var(--tertiary-table-color);\n color: var(--tertiary-table-font-color);\n font-size: var(--font-size);\n position: sticky;\n z-index: 10;\n top: 0;\n }\n \n .fixed {\n table-layout: fixed;\n }\n\n :host /deep/ .headerFixed thead, :host /deep/ .headerFixed tbody tr {\n display:table;\n width:100%;\n table-layout:fixed;\n }\n\n .hide {\n display: none;\n }\n"], directives: [{ type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
4954
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CollapseTableComponent, decorators: [{
|
|
4955
|
-
type: Component,
|
|
4956
|
-
args: [{ selector: 'collapse-table', template: "<style>\n ::ng-deep :root {\n --primary-table-color: #3b3ee3;\n --primary-table-font-color: white;\n --font-size: 12px;\n --secondary-table-color: #87ceeb;\n --secondary-table-font-color: #000000;\n --tertiary-table-color: #ff4500;\n --tertiary-table-font-color: #000000;\n }\n\n\t:host /deep/ .collapseTable {\n border: 1px solid #ccc;\n margin: 0;\n padding: 0;\n width: 100%;\n /*table-layout: fixed;*/ \n }\n :host /deep/ .collapseTable tr {\n border: 1px solid #ddd;\n padding: 0.35em;\n }\n :host /deep/ .collapseTable th, :host /deep/ .collapseTable td {\n padding: 0.625em;\n text-align: center;\n vertical-align: middle;\n }\n :host /deep/ .collapseTable th {\n letter-spacing: 0.1em;\n text-transform: uppercase;\n background-color: var(--primary-table-color);\n color: var(--primary-table-font-color);\n font-size: var(--font-size);\n position: sticky;\n z-index: 10;\n top: 0;\n } \n :host /deep/ .collapseTable-sec {\n border: 1px solid #ccc;\n margin: 0;\n padding: 0;\n width: 100%;\n }\n :host /deep/ .collapseTable-sec tr {\n border: 1px solid #ddd;\n padding: 0.35em;\n }\n :host /deep/ .collapseTable-sec th, :host /deep/ .collapseTable-sec td {\n padding: 0.625em;\n text-align: center;\n }\n :host /deep/ .collapseTable-sec th {\n letter-spacing: 0.1em;\n text-transform: uppercase;\n background-color: var(--secondary-table-color);\n color: var(--secondary-table-font-color);\n font-size: var(--font-size);\n position: sticky;\n z-index: 10;\n top: 0;\n } \n :host /deep/ .collapseTable-tert {\n border: 1px solid #ccc;\n margin: 0;\n padding: 0;\n width: 100%;\n }\n :host /deep/ .collapseTable-tert tr {\n border: 1px solid #ddd;\n padding: 0.35em;\n }\n :host /deep/ .collapseTable-tert th, :host /deep/ .collapseTable-tert td {\n padding: 0.625em;\n text-align: center;\n }\n :host /deep/ .collapseTable-tert th {\n letter-spacing: 0.1em;\n text-transform: uppercase;\n background-color: var(--tertiary-table-color);\n color: var(--tertiary-table-font-color);\n font-size: var(--font-size);\n position: sticky;\n z-index: 10;\n top: 0;\n }\n \n .fixed {\n table-layout: fixed;\n }\n\n :host /deep/ .headerFixed thead, :host /deep/ .headerFixed tbody tr {\n display:table;\n width:100%;\n table-layout:fixed;\n }\n\n .hide {\n display: none;\n }\n</style>\n\n<div class=\"table-responsive-xl\">\n <table [ngClass]=\"getCollapseClass()\" [style.border]=\"secondaryColor || tertiaryColor ? '3px solid black' : 'none'\" cellspacing=\"0\" cellpadding=\"0\">\n <ng-content></ng-content>\n </table>\n</div>" }]
|
|
4957
|
-
}], ctorParameters: function () { return [{ type: ResizeService }, { type: AccountManagerService }]; }, propDecorators: { collapseSize: [{
|
|
4958
|
-
type: Input
|
|
4959
|
-
}], tableFixed: [{
|
|
4960
|
-
type: Input
|
|
4961
|
-
}], headerFixed: [{
|
|
4962
|
-
type: Input
|
|
4963
|
-
}], secondaryColor: [{
|
|
4964
|
-
type: Input
|
|
4965
|
-
}], tertiaryColor: [{
|
|
4966
|
-
type: Input
|
|
4967
|
-
}] } });
|
|
4968
|
-
|
|
4969
5171
|
class CollapseTableModule {
|
|
4970
5172
|
}
|
|
4971
5173
|
CollapseTableModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CollapseTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
@@ -6743,10 +6945,12 @@ CoreModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13
|
|
|
6743
6945
|
DialogSelectDateTimeContent,
|
|
6744
6946
|
DialogSelectDataLabelsContent,
|
|
6745
6947
|
DialogLoginContent,
|
|
6746
|
-
DialogRegisterContent
|
|
6948
|
+
DialogRegisterContent,
|
|
6949
|
+
DialogSelectArrayObjsContent], imports: [SharedModule,
|
|
6747
6950
|
HttpClientModule,
|
|
6748
6951
|
NgbModule, i1$1.ToastrModule, i1.NgxLocalStorageModule, UserSettingsModule,
|
|
6749
|
-
BrowserAnimationsModule
|
|
6952
|
+
BrowserAnimationsModule,
|
|
6953
|
+
CollapseTableModule], exports: [CoreComponent,
|
|
6750
6954
|
HomeComponent,
|
|
6751
6955
|
LoggerComponent,
|
|
6752
6956
|
NavbarMainComponent,
|
|
@@ -6782,7 +6986,8 @@ CoreModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13
|
|
|
6782
6986
|
prefix: 'ResolveIO'
|
|
6783
6987
|
}),
|
|
6784
6988
|
UserSettingsModule,
|
|
6785
|
-
BrowserAnimationsModule
|
|
6989
|
+
BrowserAnimationsModule,
|
|
6990
|
+
CollapseTableModule
|
|
6786
6991
|
]] });
|
|
6787
6992
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CoreModule, decorators: [{
|
|
6788
6993
|
type: NgModule,
|
|
@@ -6796,7 +7001,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImpor
|
|
|
6796
7001
|
prefix: 'ResolveIO'
|
|
6797
7002
|
}),
|
|
6798
7003
|
UserSettingsModule,
|
|
6799
|
-
BrowserAnimationsModule
|
|
7004
|
+
BrowserAnimationsModule,
|
|
7005
|
+
CollapseTableModule
|
|
6800
7006
|
],
|
|
6801
7007
|
declarations: [
|
|
6802
7008
|
CoreComponent,
|
|
@@ -6816,7 +7022,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImpor
|
|
|
6816
7022
|
DialogSelectDateTimeContent,
|
|
6817
7023
|
DialogSelectDataLabelsContent,
|
|
6818
7024
|
DialogLoginContent,
|
|
6819
|
-
DialogRegisterContent
|
|
7025
|
+
DialogRegisterContent,
|
|
7026
|
+
DialogSelectArrayObjsContent
|
|
6820
7027
|
],
|
|
6821
7028
|
providers: [
|
|
6822
7029
|
CoreService,
|