@dereekb/dbx-web 12.1.13 → 12.2.0
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/esm2022/lib/interaction/popover/popover.content.component.mjs +6 -7
- package/esm2022/lib/interaction/popover/popover.content.module.mjs +2 -2
- package/esm2022/lib/layout/block/block.layout.module.mjs +2 -2
- package/esm2022/lib/layout/block/two.block.component.mjs +6 -7
- package/esm2022/lib/layout/column/column.layout.module.mjs +2 -2
- package/esm2022/lib/layout/column/one/one.column.module.mjs +2 -2
- package/esm2022/lib/layout/column/two/two.column.component.mjs +8 -9
- package/esm2022/lib/layout/column/two/two.column.module.mjs +2 -2
- package/esm2022/lib/screen/index.mjs +3 -1
- package/esm2022/lib/screen/resize.directive.mjs +24 -0
- package/esm2022/lib/screen/resize.mjs +34 -0
- package/esm2022/mapbox/lib/mapbox.layout.component.mjs +6 -8
- package/esm2022/table/lib/table.column.size.directive.mjs +102 -0
- package/esm2022/table/lib/table.component.mjs +25 -3
- package/esm2022/table/lib/table.item.cell.component.mjs +3 -2
- package/fesm2022/dereekb-dbx-web-mapbox.mjs +6 -8
- package/fesm2022/dereekb-dbx-web-mapbox.mjs.map +1 -1
- package/fesm2022/dereekb-dbx-web-table.mjs +125 -6
- package/fesm2022/dereekb-dbx-web-table.mjs.map +1 -1
- package/fesm2022/dereekb-dbx-web.mjs +92 -40
- package/fesm2022/dereekb-dbx-web.mjs.map +1 -1
- package/lib/interaction/popover/popover.content.component.d.ts +1 -1
- package/lib/layout/block/two.block.component.d.ts +1 -1
- package/lib/layout/column/two/two.column.component.d.ts +1 -1
- package/lib/screen/index.d.ts +2 -0
- package/lib/screen/resize.d.ts +19 -0
- package/lib/screen/resize.directive.d.ts +14 -0
- package/mapbox/lib/mapbox.layout.component.d.ts +1 -2
- package/package.json +1 -2
- package/table/lib/table.column.size.directive.d.ts +29 -0
- package/table/lib/table.component.d.ts +1 -0
- package/table/lib/table.item.cell.component.d.ts +1 -0
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { signal, Component, ChangeDetectionStrategy, Injectable, inject, computed, NgModule, input, Directive, effect } from '@angular/core';
|
|
2
|
+
import { signal, Component, ChangeDetectionStrategy, Injectable, inject, computed, NgModule, input, Directive, ElementRef, effect } from '@angular/core';
|
|
3
3
|
import { DatePipe, NgClass } from '@angular/common';
|
|
4
4
|
import { isSameDateDay } from '@dereekb/date';
|
|
5
5
|
import { filterMaybe, beginLoading, valueFromFinishedLoadingState, mapLoadingStateValueWithOperator, asObservable, SubscriptionObject, maybeValueFromObservableOrValue, loadingStateContext } from '@dereekb/rxjs';
|
|
6
6
|
import { ComponentStore } from '@ngrx/component-store';
|
|
7
|
-
import { switchMap, first, tap, map, distinctUntilChanged, shareReplay, combineLatest, of, startWith, filter, throttleTime } from 'rxjs';
|
|
7
|
+
import { switchMap, first, tap, map, distinctUntilChanged, shareReplay, combineLatest, of, startWith, filter, throttleTime, BehaviorSubject } from 'rxjs';
|
|
8
8
|
import * as i1 from '@angular/material/datepicker';
|
|
9
9
|
import { DateRange, MAT_DATE_RANGE_SELECTION_STRATEGY, MatDatepickerModule } from '@angular/material/datepicker';
|
|
10
10
|
import { DateAdapter } from '@angular/material/core';
|
|
@@ -15,7 +15,7 @@ import * as i3 from '@angular/material/button';
|
|
|
15
15
|
import { MatButtonModule } from '@angular/material/button';
|
|
16
16
|
import { toSignal, toObservable } from '@angular/core/rxjs-interop';
|
|
17
17
|
import { DbxInjectionComponent } from '@dereekb/dbx-core';
|
|
18
|
-
import { DbxLoadingComponent } from '@dereekb/dbx-web';
|
|
18
|
+
import { resizeSignal, DbxLoadingComponent } from '@dereekb/dbx-web';
|
|
19
19
|
import { InfiniteScrollDirective } from 'ngx-infinite-scroll';
|
|
20
20
|
import * as i1$1 from '@angular/material/table';
|
|
21
21
|
import { MatTableModule } from '@angular/material/table';
|
|
@@ -480,7 +480,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
480
480
|
|
|
481
481
|
class DbxTableItemCellComponent extends AbstractDbxTableItemDirective {
|
|
482
482
|
column = input();
|
|
483
|
-
|
|
483
|
+
column$ = toObservable(this.column).pipe(filterMaybe());
|
|
484
|
+
config$ = this.tableStore.viewDelegate$.pipe(switchMap((viewDelegate) => combineLatest([this.column$, this.item$]).pipe(map(([column, item]) => viewDelegate.itemCell(column, item)))), maybeValueFromObservableOrValue(), distinctUntilChanged());
|
|
484
485
|
configSignal = toSignal(this.config$);
|
|
485
486
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxTableItemCellComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
486
487
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: DbxTableItemCellComponent, isStandalone: true, selector: "dbx-table-item-cell", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
|
|
@@ -647,6 +648,103 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
647
648
|
}]
|
|
648
649
|
}] });
|
|
649
650
|
|
|
651
|
+
class DbxColumnSizeDirective {
|
|
652
|
+
elementRef = inject(ElementRef);
|
|
653
|
+
resized = resizeSignal(this.elementRef);
|
|
654
|
+
_columnsMap = new BehaviorSubject(new Map());
|
|
655
|
+
columns$ = this._columnsMap.asObservable();
|
|
656
|
+
columnsSignal = toSignal(this.columns$);
|
|
657
|
+
visibleColumnsSignal = computed(() => {
|
|
658
|
+
const resized = this.resized();
|
|
659
|
+
const columnsMap = this.columnsSignal();
|
|
660
|
+
const { width } = resized.newRect;
|
|
661
|
+
let headerColumn;
|
|
662
|
+
let tailColumn;
|
|
663
|
+
const itemColumns = [];
|
|
664
|
+
columnsMap.forEach((column) => {
|
|
665
|
+
const index = column.index();
|
|
666
|
+
switch (index) {
|
|
667
|
+
case 'head':
|
|
668
|
+
headerColumn = column;
|
|
669
|
+
break;
|
|
670
|
+
case 'tail':
|
|
671
|
+
tailColumn = column;
|
|
672
|
+
break;
|
|
673
|
+
default:
|
|
674
|
+
itemColumns[index] = column;
|
|
675
|
+
break;
|
|
676
|
+
}
|
|
677
|
+
});
|
|
678
|
+
const headerColumnWidth = headerColumn?.width || 0;
|
|
679
|
+
const tailColumnWidth = tailColumn?.width || 0;
|
|
680
|
+
let remainingWidth = width - headerColumnWidth;
|
|
681
|
+
let visibleColumns = 1;
|
|
682
|
+
let i = 0;
|
|
683
|
+
while (remainingWidth > 0 && i < itemColumns.length) {
|
|
684
|
+
const nextColumn = itemColumns[i];
|
|
685
|
+
i += 1;
|
|
686
|
+
const columnWidth = nextColumn.width;
|
|
687
|
+
remainingWidth -= columnWidth;
|
|
688
|
+
if (remainingWidth >= 0) {
|
|
689
|
+
visibleColumns += 1;
|
|
690
|
+
}
|
|
691
|
+
}
|
|
692
|
+
// show the tail column
|
|
693
|
+
if (tailColumn != null && visibleColumns === itemColumns.length + 1 && remainingWidth - tailColumnWidth > 0) {
|
|
694
|
+
visibleColumns += 1;
|
|
695
|
+
}
|
|
696
|
+
return visibleColumns;
|
|
697
|
+
});
|
|
698
|
+
addColumn(column) {
|
|
699
|
+
this._columnsMap.value.set(column.index(), column);
|
|
700
|
+
this._columnsMap.next(this._columnsMap.value);
|
|
701
|
+
}
|
|
702
|
+
removeColumn(column) {
|
|
703
|
+
if (this._columnsMap.value.delete(column.index())) {
|
|
704
|
+
this._columnsMap.next(this._columnsMap.value);
|
|
705
|
+
}
|
|
706
|
+
}
|
|
707
|
+
ngOnDestroy() {
|
|
708
|
+
this._columnsMap.complete();
|
|
709
|
+
}
|
|
710
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxColumnSizeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
711
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: DbxColumnSizeDirective, isStandalone: true, selector: "[dbx-column-size]", exportAs: ["dbxColumnSize"], ngImport: i0 });
|
|
712
|
+
}
|
|
713
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxColumnSizeDirective, decorators: [{
|
|
714
|
+
type: Directive,
|
|
715
|
+
args: [{
|
|
716
|
+
exportAs: 'dbxColumnSize',
|
|
717
|
+
selector: '[dbx-column-size]',
|
|
718
|
+
standalone: true
|
|
719
|
+
}]
|
|
720
|
+
}] });
|
|
721
|
+
/**
|
|
722
|
+
* References a specific element and the index of the column.
|
|
723
|
+
*/
|
|
724
|
+
class DbxColumnSizeColumnDirective {
|
|
725
|
+
dbxColumnSizeDirective = inject(DbxColumnSizeDirective);
|
|
726
|
+
elementRef = inject(ElementRef);
|
|
727
|
+
index = input.required({ alias: 'dbx-column-size-column' });
|
|
728
|
+
ngOnInit() {
|
|
729
|
+
this.dbxColumnSizeDirective.addColumn(this);
|
|
730
|
+
}
|
|
731
|
+
ngOnDestroy() {
|
|
732
|
+
this.dbxColumnSizeDirective.removeColumn(this);
|
|
733
|
+
}
|
|
734
|
+
get width() {
|
|
735
|
+
return this.elementRef.nativeElement.clientWidth;
|
|
736
|
+
}
|
|
737
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxColumnSizeColumnDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
738
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.13", type: DbxColumnSizeColumnDirective, isStandalone: true, selector: "[dbx-column-size-column]", inputs: { index: { classPropertyName: "index", publicName: "dbx-column-size-column", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
|
|
739
|
+
}
|
|
740
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxColumnSizeColumnDirective, decorators: [{
|
|
741
|
+
type: Directive,
|
|
742
|
+
args: [{
|
|
743
|
+
selector: '[dbx-column-size-column]',
|
|
744
|
+
standalone: true
|
|
745
|
+
}]
|
|
746
|
+
}] });
|
|
747
|
+
|
|
650
748
|
const DBX_TABLE_ITEMS_COLUMN_NAME = '_items';
|
|
651
749
|
const DBX_TABLE_ACTIONS_COLUMN_NAME = '_actions';
|
|
652
750
|
function isDbxTableViewGroupElement(element) {
|
|
@@ -660,6 +758,7 @@ function isDbxTableViewItemElement(element) {
|
|
|
660
758
|
*/
|
|
661
759
|
class DbxTableViewComponent {
|
|
662
760
|
tableStore = inject((DbxTableStore));
|
|
761
|
+
// readonly table = viewChild.required<MatTable<DbxTableViewElement<T, G>>>(MatTable);
|
|
663
762
|
DEFAULT_TRACK_BY_FUNCTION = (index) => {
|
|
664
763
|
return index;
|
|
665
764
|
};
|
|
@@ -747,6 +846,7 @@ class DbxTableViewComponent {
|
|
|
747
846
|
contextSignal = toSignal(this.context.state$);
|
|
748
847
|
dataLoadingContextSignal = toSignal(this.dataLoadingContext.state$);
|
|
749
848
|
viewDelegateSignal = toSignal(this.tableStore.viewDelegate$);
|
|
849
|
+
elementsSignal = toSignal(this.elements$, { initialValue: [] });
|
|
750
850
|
onScrollDown() {
|
|
751
851
|
this.tableStore.loadMore();
|
|
752
852
|
}
|
|
@@ -769,11 +869,30 @@ class DbxTableViewComponent {
|
|
|
769
869
|
return viewDelegate?.fullSummaryRow != null;
|
|
770
870
|
});
|
|
771
871
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxTableViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
772
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DbxTableViewComponent, isStandalone: true, selector: "dbx-table-view", inputs: { scrollDistance: { classPropertyName: "scrollDistance", publicName: "scrollDistance", isSignal: true, isRequired: false, transformFunction: null }, throttleScroll: { classPropertyName: "throttleScroll", publicName: "throttleScroll", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<dbx-loading [context]=\"context\">\n <dbx-loading class=\"dbx-table-view-loading\" [linear]=\"true\" [context]=\"dataLoadingContext\"></dbx-loading>\n <section class=\"dbx-table-view\" infinite-scroll [infiniteScrollDistance]=\"scrollDistance()\" [infiniteScrollThrottle]=\"throttleScroll()\" [scrollWindow]=\"false\" (scrolled)=\"onScrollDown()\">\n <table class=\"dbx-table-view-table\" mat-table [dataSource]=\"
|
|
872
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DbxTableViewComponent, isStandalone: true, selector: "dbx-table-view", inputs: { scrollDistance: { classPropertyName: "scrollDistance", publicName: "scrollDistance", isSignal: true, isRequired: false, transformFunction: null }, throttleScroll: { classPropertyName: "throttleScroll", publicName: "throttleScroll", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<dbx-loading [context]=\"context\">\n <dbx-loading class=\"dbx-table-view-loading\" [linear]=\"true\" [context]=\"dataLoadingContext\"></dbx-loading>\n <section class=\"dbx-table-view\" dbx-column-size #columnSize=\"dbxColumnSize\" infinite-scroll [infiniteScrollDistance]=\"scrollDistance()\" [infiniteScrollThrottle]=\"throttleScroll()\" [scrollWindow]=\"false\" (scrolled)=\"onScrollDown()\">\n <table class=\"dbx-table-view-table\" mat-table recycleRows [dataSource]=\"elementsSignal()\" [trackBy]=\"trackElementByFunctionSignal()\" multiTemplateDataRows>\n <!-- Groups -->\n <!-- Group Header column -->\n <ng-container matColumnDef=\"groupHeaderColumn\" [sticky]=\"true\">\n <td mat-cell [attr.colspan]=\"columnSize.visibleColumnsSignal()\" *matCellDef=\"let element\">\n <dbx-table-group-header [group]=\"element.group\"></dbx-table-group-header>\n </td>\n </ng-container>\n\n <!-- Group Footer column -->\n <ng-container matColumnDef=\"groupFooterColumn\" [sticky]=\"true\">\n <td mat-cell [attr.colspan]=\"columnSize.visibleColumnsSignal()\" *matCellDef=\"let element\">\n <dbx-table-group-footer [group]=\"element.group\"></dbx-table-group-footer>\n </td>\n </ng-container>\n\n <!-- Items -->\n <!-- Header/Item column -->\n <ng-container [matColumnDef]=\"itemsColumnName\" [sticky]=\"true\">\n <th dbx-column-size-column=\"head\" mat-header-cell *matHeaderCellDef>\n <dbx-table-input-cell></dbx-table-input-cell>\n </th>\n <td mat-cell *matCellDef=\"let element\">\n <dbx-table-item-header [item]=\"element.item\"></dbx-table-item-header>\n </td>\n <td mat-footer-cell *matFooterCellDef>\n <dbx-table-summary-start-cell></dbx-table-summary-start-cell>\n </td>\n </ng-container>\n\n <!-- Column Definitions -->\n @for (column of innerColumnsSignal(); track column.columnName) {\n <ng-container [matColumnDef]=\"column.columnName\" [sticky]=\"false\">\n <th [dbx-column-size-column]=\"$index\" mat-header-cell *matHeaderCellDef>\n <dbx-table-column-header [column]=\"column\"></dbx-table-column-header>\n </th>\n <td mat-cell *matCellDef=\"let element\">\n <dbx-table-item-cell [item]=\"element.item\" [column]=\"column\"></dbx-table-item-cell>\n </td>\n <td mat-footer-cell *matFooterCellDef>\n <dbx-table-column-footer [column]=\"column\"></dbx-table-column-footer>\n </td>\n </ng-container>\n }\n\n <!-- Tail/Action column -->\n <ng-container [matColumnDef]=\"actionsColumnName\" [stickyEnd]=\"true\">\n <th dbx-column-size-column=\"tail\" mat-header-cell *matHeaderCellDef>\n <dbx-table-action-cell></dbx-table-action-cell>\n </th>\n <td mat-cell *matCellDef=\"let element\">\n <dbx-table-item-action [item]=\"element.item\"></dbx-table-item-action>\n </td>\n <td mat-footer-cell *matFooterCellDef>\n <dbx-table-summary-end-cell></dbx-table-summary-end-cell>\n </td>\n </ng-container>\n\n <!-- Table View -->\n <tr mat-header-row *matHeaderRowDef=\"displayedColumnsSignal(); sticky: true\"></tr>\n\n <tr mat-row *matRowDef=\"let row; columns: ['groupHeaderColumn']; when: showGroupHeaderRow\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumnsSignal(); when: showItemRow\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: ['groupFooterColumn']; when: showGroupFooterRow\"></tr>\n\n <tr [ngClass]=\"{ 'dbx-hide': !showFooterRowSignal() }\" mat-footer-row *matFooterRowDef=\"displayedColumnsSignal(); sticky: true\"></tr>\n </table>\n </section>\n <!-- Full summary row -->\n @if (showFullSummaryRowSignal()) {\n <div class=\"mat-mdc-table dbx-table-view-full-summary-row-container\">\n <div class=\"mdc-data-table__cell mat-mdc-row\">\n <dbx-table-full-summary-row></dbx-table-full-summary-row>\n </div>\n </div>\n }\n</dbx-loading>\n", dependencies: [{ kind: "component", type: DbxLoadingComponent, selector: "dbx-loading", inputs: ["padding", "show", "text", "mode", "color", "diameter", "linear", "loading", "error", "context"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$1.MatRecycleRows, selector: "mat-table[recycleRows], table[mat-table][recycleRows]" }, { kind: "directive", type: i1$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$1.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i1$1.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i1$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i1$1.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i1$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i1$1.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "component", type: DbxTableInputCellComponent, selector: "dbx-table-input-cell" }, { kind: "component", type: DbxTableItemHeaderComponent, selector: "dbx-table-item-header" }, { kind: "component", type: DbxTableItemCellComponent, selector: "dbx-table-item-cell", inputs: ["column"] }, { kind: "component", type: DbxTableItemActionComponent, selector: "dbx-table-item-action" }, { kind: "component", type: DbxTableActionCellComponent, selector: "dbx-table-action-cell" }, { kind: "component", type: DbxTableColumnHeaderComponent, selector: "dbx-table-column-header" }, { kind: "component", type: DbxTableColumnFooterComponent, selector: "dbx-table-column-footer" }, { kind: "component", type: DbxTableSummaryStartCellComponent, selector: "dbx-table-summary-start-cell" }, { kind: "component", type: DbxTableSummaryEndCellComponent, selector: "dbx-table-summary-end-cell" }, { kind: "component", type: DbxTableGroupHeaderComponent, selector: "dbx-table-group-header" }, { kind: "component", type: DbxTableGroupFooterComponent, selector: "dbx-table-group-footer" }, { kind: "component", type: DbxTableFullSummaryRowComponent, selector: "dbx-table-full-summary-row" }, { kind: "directive", type: DbxColumnSizeDirective, selector: "[dbx-column-size]", exportAs: ["dbxColumnSize"] }, { kind: "directive", type: DbxColumnSizeColumnDirective, selector: "[dbx-column-size-column]", inputs: ["dbx-column-size-column"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
773
873
|
}
|
|
774
874
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxTableViewComponent, decorators: [{
|
|
775
875
|
type: Component,
|
|
776
|
-
args: [{ selector: 'dbx-table-view', imports: [
|
|
876
|
+
args: [{ selector: 'dbx-table-view', imports: [
|
|
877
|
+
DbxLoadingComponent,
|
|
878
|
+
NgClass,
|
|
879
|
+
InfiniteScrollDirective,
|
|
880
|
+
MatTableModule,
|
|
881
|
+
DbxTableInputCellComponent,
|
|
882
|
+
DbxTableItemHeaderComponent,
|
|
883
|
+
DbxTableItemCellComponent,
|
|
884
|
+
DbxTableItemActionComponent,
|
|
885
|
+
DbxTableActionCellComponent,
|
|
886
|
+
DbxTableColumnHeaderComponent,
|
|
887
|
+
DbxTableColumnFooterComponent,
|
|
888
|
+
DbxTableSummaryStartCellComponent,
|
|
889
|
+
DbxTableSummaryEndCellComponent,
|
|
890
|
+
DbxTableGroupHeaderComponent,
|
|
891
|
+
DbxTableGroupFooterComponent,
|
|
892
|
+
DbxTableFullSummaryRowComponent,
|
|
893
|
+
DbxColumnSizeDirective,
|
|
894
|
+
DbxColumnSizeColumnDirective
|
|
895
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<dbx-loading [context]=\"context\">\n <dbx-loading class=\"dbx-table-view-loading\" [linear]=\"true\" [context]=\"dataLoadingContext\"></dbx-loading>\n <section class=\"dbx-table-view\" dbx-column-size #columnSize=\"dbxColumnSize\" infinite-scroll [infiniteScrollDistance]=\"scrollDistance()\" [infiniteScrollThrottle]=\"throttleScroll()\" [scrollWindow]=\"false\" (scrolled)=\"onScrollDown()\">\n <table class=\"dbx-table-view-table\" mat-table recycleRows [dataSource]=\"elementsSignal()\" [trackBy]=\"trackElementByFunctionSignal()\" multiTemplateDataRows>\n <!-- Groups -->\n <!-- Group Header column -->\n <ng-container matColumnDef=\"groupHeaderColumn\" [sticky]=\"true\">\n <td mat-cell [attr.colspan]=\"columnSize.visibleColumnsSignal()\" *matCellDef=\"let element\">\n <dbx-table-group-header [group]=\"element.group\"></dbx-table-group-header>\n </td>\n </ng-container>\n\n <!-- Group Footer column -->\n <ng-container matColumnDef=\"groupFooterColumn\" [sticky]=\"true\">\n <td mat-cell [attr.colspan]=\"columnSize.visibleColumnsSignal()\" *matCellDef=\"let element\">\n <dbx-table-group-footer [group]=\"element.group\"></dbx-table-group-footer>\n </td>\n </ng-container>\n\n <!-- Items -->\n <!-- Header/Item column -->\n <ng-container [matColumnDef]=\"itemsColumnName\" [sticky]=\"true\">\n <th dbx-column-size-column=\"head\" mat-header-cell *matHeaderCellDef>\n <dbx-table-input-cell></dbx-table-input-cell>\n </th>\n <td mat-cell *matCellDef=\"let element\">\n <dbx-table-item-header [item]=\"element.item\"></dbx-table-item-header>\n </td>\n <td mat-footer-cell *matFooterCellDef>\n <dbx-table-summary-start-cell></dbx-table-summary-start-cell>\n </td>\n </ng-container>\n\n <!-- Column Definitions -->\n @for (column of innerColumnsSignal(); track column.columnName) {\n <ng-container [matColumnDef]=\"column.columnName\" [sticky]=\"false\">\n <th [dbx-column-size-column]=\"$index\" mat-header-cell *matHeaderCellDef>\n <dbx-table-column-header [column]=\"column\"></dbx-table-column-header>\n </th>\n <td mat-cell *matCellDef=\"let element\">\n <dbx-table-item-cell [item]=\"element.item\" [column]=\"column\"></dbx-table-item-cell>\n </td>\n <td mat-footer-cell *matFooterCellDef>\n <dbx-table-column-footer [column]=\"column\"></dbx-table-column-footer>\n </td>\n </ng-container>\n }\n\n <!-- Tail/Action column -->\n <ng-container [matColumnDef]=\"actionsColumnName\" [stickyEnd]=\"true\">\n <th dbx-column-size-column=\"tail\" mat-header-cell *matHeaderCellDef>\n <dbx-table-action-cell></dbx-table-action-cell>\n </th>\n <td mat-cell *matCellDef=\"let element\">\n <dbx-table-item-action [item]=\"element.item\"></dbx-table-item-action>\n </td>\n <td mat-footer-cell *matFooterCellDef>\n <dbx-table-summary-end-cell></dbx-table-summary-end-cell>\n </td>\n </ng-container>\n\n <!-- Table View -->\n <tr mat-header-row *matHeaderRowDef=\"displayedColumnsSignal(); sticky: true\"></tr>\n\n <tr mat-row *matRowDef=\"let row; columns: ['groupHeaderColumn']; when: showGroupHeaderRow\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumnsSignal(); when: showItemRow\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: ['groupFooterColumn']; when: showGroupFooterRow\"></tr>\n\n <tr [ngClass]=\"{ 'dbx-hide': !showFooterRowSignal() }\" mat-footer-row *matFooterRowDef=\"displayedColumnsSignal(); sticky: true\"></tr>\n </table>\n </section>\n <!-- Full summary row -->\n @if (showFullSummaryRowSignal()) {\n <div class=\"mat-mdc-table dbx-table-view-full-summary-row-container\">\n <div class=\"mdc-data-table__cell mat-mdc-row\">\n <dbx-table-full-summary-row></dbx-table-full-summary-row>\n </div>\n </div>\n }\n</dbx-loading>\n" }]
|
|
777
896
|
}] });
|
|
778
897
|
|
|
779
898
|
/**
|