@ngrdt/table 0.0.89 → 0.0.91
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/fesm2022/ngrdt-table.mjs +70 -26
- package/fesm2022/ngrdt-table.mjs.map +1 -1
- package/index.d.ts +15 -2
- package/package.json +5 -5
package/fesm2022/ngrdt-table.mjs
CHANGED
|
@@ -1,22 +1,26 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { computed, untracked, input, Directive, ViewEncapsulation, ChangeDetectionStrategy, Component, inject, linkedSignal, booleanAttribute,
|
|
2
|
+
import { computed, untracked, input, Directive, ViewEncapsulation, ChangeDetectionStrategy, Component, inject, signal, effect, linkedSignal, booleanAttribute, output, Injector, ChangeDetectorRef, Renderer2, afterRenderEffect, ElementRef, ViewChildren, ViewChild, CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
|
|
3
3
|
import { RdtRouterService } from '@ngrdt/router';
|
|
4
4
|
import { signalStore, withState, withHooks, withComputed, withMethods, patchState } from '@ngrx/signals';
|
|
5
5
|
import { withEntities, setAllEntities } from '@ngrx/signals/entities';
|
|
6
|
-
import * as i1$
|
|
6
|
+
import * as i1$2 from '@angular/common';
|
|
7
7
|
import { CommonModule } from '@angular/common';
|
|
8
8
|
import * as i1 from '@angular/forms';
|
|
9
9
|
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
10
|
-
import * as i3 from '@angular/cdk/table';
|
|
10
|
+
import * as i3$1 from '@angular/cdk/table';
|
|
11
11
|
import { CdkTableModule } from '@angular/cdk/table';
|
|
12
|
-
import * as
|
|
13
|
-
import { RdtCheckboxOutletDirective } from '@ngrdt/forms';
|
|
14
|
-
import * as
|
|
12
|
+
import * as i3 from '@ngrdt/forms';
|
|
13
|
+
import { RdtCheckboxOutletDirective, RdtNumericInputOutletDirective, RdtSelectOutletDirective } from '@ngrdt/forms';
|
|
14
|
+
import * as i1$1 from '@ngrdt/icon';
|
|
15
15
|
import { RdtIconRegistryService, RdtIcon, RdtIconOutletDirective } from '@ngrdt/icon';
|
|
16
|
+
import { Subject, of, delay, combineLatest, map } from 'rxjs';
|
|
17
|
+
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
|
|
16
18
|
import { RdtTranslateService } from '@ngrdt/core';
|
|
17
19
|
import { RdtDateUtils, RdtObjectUtils } from '@ngrdt/utils';
|
|
18
|
-
import
|
|
20
|
+
import * as i2 from '@ngrdt/button';
|
|
21
|
+
import { RdtButtonOutletDirective } from '@ngrdt/button';
|
|
19
22
|
import { toObservable } from '@angular/core/rxjs-interop';
|
|
23
|
+
import { ɵEmptyOutletComponent as _EmptyOutletComponent } from '@angular/router';
|
|
20
24
|
import { GovDesignSystemModule } from '@gov-design-system-ce/angular';
|
|
21
25
|
|
|
22
26
|
function isRdtTableMessage(obj) {
|
|
@@ -606,13 +610,44 @@ class RdtTablePaginatorComponent {
|
|
|
606
610
|
to = computed(() => this.store.lastRowIndex() + 1);
|
|
607
611
|
total = computed(() => this.store.totalCount());
|
|
608
612
|
pageSize = computed(() => this.store.pageSize());
|
|
613
|
+
pageSizeModel = signal(this.store.pageSize());
|
|
614
|
+
pageNumberModel = signal(this.store.pageIndex() + 1);
|
|
609
615
|
currentPageNumber = computed(() => this.store.pageIndex() + 1);
|
|
616
|
+
pageNumberChanges$ = new Subject();
|
|
617
|
+
pageSizeChanges$ = new Subject();
|
|
618
|
+
constructor() {
|
|
619
|
+
// Sync pageSizeModel with store pageSize
|
|
620
|
+
effect(() => {
|
|
621
|
+
this.pageSizeModel.set(this.pageSize());
|
|
622
|
+
});
|
|
623
|
+
// Sync pageNumberModel with current page
|
|
624
|
+
effect(() => {
|
|
625
|
+
this.pageNumberModel.set(this.currentPageNumber());
|
|
626
|
+
});
|
|
627
|
+
// Debounced page number changes
|
|
628
|
+
this.pageNumberChanges$
|
|
629
|
+
.pipe(debounceTime(500), distinctUntilChanged())
|
|
630
|
+
.subscribe((newPageNumber) => {
|
|
631
|
+
this.onPageChange(newPageNumber);
|
|
632
|
+
});
|
|
633
|
+
// Debounced page size changes
|
|
634
|
+
this.pageSizeChanges$
|
|
635
|
+
.pipe(debounceTime(500), distinctUntilChanged())
|
|
636
|
+
.subscribe((newPageSize) => {
|
|
637
|
+
this.onPageSizeChange(newPageSize);
|
|
638
|
+
});
|
|
639
|
+
}
|
|
610
640
|
pageSizeOptions = computed(() => this.store.pageSizeOptions().map((opt) => ({ label: `${opt}`, value: opt })));
|
|
611
641
|
pageCount = computed(() => this.store.pageCount());
|
|
612
642
|
skipRightIcon = this.iconRegistry.getIcon(RdtIcon.SkipRight);
|
|
613
643
|
skipDoubleRightIcon = this.iconRegistry.getIcon(RdtIcon.SkipDoubleRight);
|
|
614
644
|
skipLeftIcon = this.iconRegistry.getIcon(RdtIcon.SkipLeft);
|
|
615
645
|
skipDoubleLeftIcon = this.iconRegistry.getIcon(RdtIcon.SkipDoubleLeft);
|
|
646
|
+
dropdownOptions = [
|
|
647
|
+
{ label: 'Option A', value: 'A' },
|
|
648
|
+
{ label: 'Option B', value: 'B' },
|
|
649
|
+
{ label: 'Option C', value: 'C' },
|
|
650
|
+
];
|
|
616
651
|
pageWindow = computed(() => {
|
|
617
652
|
const pageCount = this.pageCount();
|
|
618
653
|
const current = this.currentPageNumber();
|
|
@@ -625,24 +660,32 @@ class RdtTablePaginatorComponent {
|
|
|
625
660
|
}
|
|
626
661
|
return pages;
|
|
627
662
|
});
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
663
|
+
onPageNumberModelChange(newPageNumber) {
|
|
664
|
+
this.pageNumberChanges$.next(newPageNumber);
|
|
665
|
+
}
|
|
666
|
+
onPageSizeModelChange(newPageSize) {
|
|
667
|
+
this.pageSizeChanges$.next(newPageSize);
|
|
668
|
+
}
|
|
669
|
+
onPageSizeChange(pageSize) {
|
|
670
|
+
if (!pageSize || pageSize < 1)
|
|
671
|
+
return;
|
|
672
|
+
this.store.setPagination(pageSize, 0); // Reset to first page
|
|
632
673
|
this.store.fetch();
|
|
633
674
|
}
|
|
634
675
|
onPageChange(pageNumber) {
|
|
676
|
+
if (pageNumber < 1 || pageNumber > this.pageCount())
|
|
677
|
+
return;
|
|
635
678
|
const pageIndex = pageNumber - 1;
|
|
636
679
|
this.store.setPagination(this.pageSize(), pageIndex);
|
|
637
680
|
this.store.fetch();
|
|
638
681
|
}
|
|
639
682
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtTablePaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
640
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: RdtTablePaginatorComponent, isStandalone: false, selector: "rdt-table-paginator", ngImport: i0, template: "@if (store.ready()) {\n<div\n class=\"flex flex-row-reverse flex-wrap-reverse justify-between items-center gap-2\"\n [class.invisible]=\"total() === 0\"\n>\n <div class=\"paginator\">\n <div class=\"paginator-info\">\n Zobrazeno <b>{{ from() }} - {{ to() }} z\u00E1znam\u016F z {{ total() }}</b>\n </div>\n <div class=\"paginator-controls\">\n <
|
|
683
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: RdtTablePaginatorComponent, isStandalone: false, selector: "rdt-table-paginator", ngImport: i0, template: "@if (store.ready()) {\n<div\n class=\"flex flex-row-reverse flex-wrap-reverse justify-between items-center gap-2\"\n [class.invisible]=\"total() === 0\"\n>\n <div class=\"paginator\">\n <div class=\"paginator-info\">\n Zobrazeno <b>{{ from() }} - {{ to() }} z\u00E1znam\u016F z {{ total() }}</b>\n </div>\n <div class=\"paginator-controls\">\n <ng-container\n rdtSelectOutlet\n [(ngModel)]=\"pageSizeModel\"\n (ngModelChange)=\"onPageSizeModelChange($event)\"\n [inputs]=\"{ options: pageSizeOptions() }\"\n ></ng-container>\n <ng-container\n rdtNumericInputOutlet\n [(ngModel)]=\"pageNumberModel\"\n (ngModelChange)=\"onPageNumberModelChange($event)\"\n [inputs]=\"{\n min: 1,\n max: pageCount(),\n step: 1,\n }\"\n ></ng-container>\n <ng-container\n rdtButtonOutlet\n [inputs]=\"{\n icon: skipDoubleLeftIcon,\n rdtDisabled: currentPageNumber() === 1\n }\"\n (click)=\"onPageChange(1)\"\n >\n </ng-container>\n <ng-container\n rdtButtonOutlet\n [inputs]=\"{\n icon: skipLeftIcon,\n rdtDisabled: currentPageNumber() === 1\n }\"\n (click)=\"onPageChange(currentPageNumber() - 1)\"\n >\n </ng-container>\n @for (page of pageWindow(); track $index) {\n <button\n class=\"action-btn\"\n [class.selected]=\"currentPageNumber() === page\"\n [disabled]=\"currentPageNumber() === page\"\n (click)=\"onPageChange(page)\"\n >\n {{ page }}\n </button>\n }\n\n <ng-container\n rdtButtonOutlet\n [inputs]=\"{\n icon: skipRightIcon,\n rdtDisabled: currentPageNumber() === pageCount()\n }\"\n (click)=\"onPageChange(currentPageNumber() + 1)\"\n >\n </ng-container>\n <ng-container\n rdtButtonOutlet\n [inputs]=\"{\n icon: skipDoubleRightIcon,\n rdtDisabled: currentPageNumber() === pageCount()\n }\"\n (click)=\"onPageChange(pageCount())\"\n >\n </ng-container>\n </div>\n </div>\n</div>\n}\n", styles: [".paginator{display:flex;flex-wrap:wrap;justify-content:space-between;margin:1rem 1rem 0}.paginator-controls{display:flex;gap:.5rem;align-items:center}\n"], dependencies: [{ kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.RdtButtonOutletDirective, selector: "[rdtButtonOutlet]", outputs: ["click"], exportAs: ["rdtButtonOutlet"] }, { kind: "directive", type: i3.RdtNumericInputOutletDirective, selector: "[rdtNumericInputOutlet]", exportAs: ["rdtNumericInputOutlet"] }, { kind: "directive", type: i3.RdtSelectOutletDirective, selector: "[rdtSelectOutlet]", exportAs: ["rdtSelectOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
641
684
|
}
|
|
642
685
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtTablePaginatorComponent, decorators: [{
|
|
643
686
|
type: Component,
|
|
644
|
-
args: [{ selector: 'rdt-table-paginator', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, encapsulation: ViewEncapsulation.None, template: "@if (store.ready()) {\n<div\n class=\"flex flex-row-reverse flex-wrap-reverse justify-between items-center gap-2\"\n [class.invisible]=\"total() === 0\"\n>\n <div class=\"paginator\">\n <div class=\"paginator-info\">\n Zobrazeno <b>{{ from() }} - {{ to() }} z\u00E1znam\u016F z {{ total() }}</b>\n </div>\n <div class=\"paginator-controls\">\n <
|
|
645
|
-
}] });
|
|
687
|
+
args: [{ selector: 'rdt-table-paginator', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, encapsulation: ViewEncapsulation.None, template: "@if (store.ready()) {\n<div\n class=\"flex flex-row-reverse flex-wrap-reverse justify-between items-center gap-2\"\n [class.invisible]=\"total() === 0\"\n>\n <div class=\"paginator\">\n <div class=\"paginator-info\">\n Zobrazeno <b>{{ from() }} - {{ to() }} z\u00E1znam\u016F z {{ total() }}</b>\n </div>\n <div class=\"paginator-controls\">\n <ng-container\n rdtSelectOutlet\n [(ngModel)]=\"pageSizeModel\"\n (ngModelChange)=\"onPageSizeModelChange($event)\"\n [inputs]=\"{ options: pageSizeOptions() }\"\n ></ng-container>\n <ng-container\n rdtNumericInputOutlet\n [(ngModel)]=\"pageNumberModel\"\n (ngModelChange)=\"onPageNumberModelChange($event)\"\n [inputs]=\"{\n min: 1,\n max: pageCount(),\n step: 1,\n }\"\n ></ng-container>\n <ng-container\n rdtButtonOutlet\n [inputs]=\"{\n icon: skipDoubleLeftIcon,\n rdtDisabled: currentPageNumber() === 1\n }\"\n (click)=\"onPageChange(1)\"\n >\n </ng-container>\n <ng-container\n rdtButtonOutlet\n [inputs]=\"{\n icon: skipLeftIcon,\n rdtDisabled: currentPageNumber() === 1\n }\"\n (click)=\"onPageChange(currentPageNumber() - 1)\"\n >\n </ng-container>\n @for (page of pageWindow(); track $index) {\n <button\n class=\"action-btn\"\n [class.selected]=\"currentPageNumber() === page\"\n [disabled]=\"currentPageNumber() === page\"\n (click)=\"onPageChange(page)\"\n >\n {{ page }}\n </button>\n }\n\n <ng-container\n rdtButtonOutlet\n [inputs]=\"{\n icon: skipRightIcon,\n rdtDisabled: currentPageNumber() === pageCount()\n }\"\n (click)=\"onPageChange(currentPageNumber() + 1)\"\n >\n </ng-container>\n <ng-container\n rdtButtonOutlet\n [inputs]=\"{\n icon: skipDoubleRightIcon,\n rdtDisabled: currentPageNumber() === pageCount()\n }\"\n (click)=\"onPageChange(pageCount())\"\n >\n </ng-container>\n </div>\n </div>\n</div>\n}\n", styles: [".paginator{display:flex;flex-wrap:wrap;justify-content:space-between;margin:1rem 1rem 0}.paginator-controls{display:flex;gap:.5rem;align-items:center}\n"] }]
|
|
688
|
+
}], ctorParameters: () => [] });
|
|
646
689
|
|
|
647
690
|
class RdtHeaderCellRendererComponent {
|
|
648
691
|
iconRegistry = inject(RdtIconRegistryService);
|
|
@@ -659,7 +702,7 @@ class RdtHeaderCellRendererComponent {
|
|
|
659
702
|
}
|
|
660
703
|
}
|
|
661
704
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtHeaderCellRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
662
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: RdtHeaderCellRendererComponent, isStandalone: false, selector: "rdt-header-cell-renderer", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.sortable-header-cell": "column().sortable" } }, ngImport: i0, template: "@let col = column();\n<div class=\"space-between\">\n <div class=\"table-header\">\n <span\n (click)=\"sort($event)\"\n (keyup.enter)=\"sort($event)\"\n class=\"header-cell-text\"\n [attr.tabindex]=\"col.sortable ? 0 : -1\"\n [attr.role]=\"col.sortable ? 'button' : 'presentation'\"\n >\n {{ col.header }}\n </span>\n </div>\n @if (col.sortable) { @let direction = sortDirection(); @if (direction ===\n 'asc') {\n <button class=\"action-btn\" (click)=\"sort($event)\">\n <ng-container rdtIconOutlet [inputs]=\"{ name: sortAscIcon }\"></ng-container>\n </button>\n } @else if (direction === 'desc') {\n <button class=\"action-btn\" (click)=\"sort($event)\">\n <ng-container\n rdtIconOutlet\n [inputs]=\"{ name: sortDescIcon }\"\n ></ng-container>\n </button>\n } @else {\n <button class=\"action-btn\" (click)=\"sort($event)\">\n <ng-container\n rdtIconOutlet\n [inputs]=\"{ name: sortEnabledIcon }\"\n ></ng-container>\n </button>\n }}\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type:
|
|
705
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: RdtHeaderCellRendererComponent, isStandalone: false, selector: "rdt-header-cell-renderer", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.sortable-header-cell": "column().sortable" } }, ngImport: i0, template: "@let col = column();\n<div class=\"space-between\">\n <div class=\"table-header\">\n <span\n (click)=\"sort($event)\"\n (keyup.enter)=\"sort($event)\"\n class=\"header-cell-text\"\n [attr.tabindex]=\"col.sortable ? 0 : -1\"\n [attr.role]=\"col.sortable ? 'button' : 'presentation'\"\n >\n {{ col.header }}\n </span>\n </div>\n @if (col.sortable) { @let direction = sortDirection(); @if (direction ===\n 'asc') {\n <button class=\"action-btn\" (click)=\"sort($event)\">\n <ng-container rdtIconOutlet [inputs]=\"{ name: sortAscIcon }\"></ng-container>\n </button>\n } @else if (direction === 'desc') {\n <button class=\"action-btn\" (click)=\"sort($event)\">\n <ng-container\n rdtIconOutlet\n [inputs]=\"{ name: sortDescIcon }\"\n ></ng-container>\n </button>\n } @else {\n <button class=\"action-btn\" (click)=\"sort($event)\">\n <ng-container\n rdtIconOutlet\n [inputs]=\"{ name: sortEnabledIcon }\"\n ></ng-container>\n </button>\n }}\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.RdtIconOutletDirective, selector: "[rdtIconOutlet]", exportAs: ["rdtIconOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
663
706
|
}
|
|
664
707
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtHeaderCellRendererComponent, decorators: [{
|
|
665
708
|
type: Component,
|
|
@@ -832,7 +875,7 @@ class RdtTableComponent {
|
|
|
832
875
|
this.renderer.setStyle(col, 'maxWidth', widthPx);
|
|
833
876
|
}
|
|
834
877
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
835
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: RdtTableComponent, isStandalone: false, selector: "rdt-table", inputs: { itemIdFn: { classPropertyName: "itemIdFn", publicName: "itemIdFn", isSignal: true, isRequired: true, transformFunction: null }, colDefsInput: { classPropertyName: "colDefsInput", publicName: "colDefs", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, selectMode: { classPropertyName: "selectMode", publicName: "selectMode", isSignal: true, isRequired: false, transformFunction: null }, showPaginator: { classPropertyName: "showPaginator", publicName: "showPaginator", isSignal: true, isRequired: false, transformFunction: null }, showSelectAll: { classPropertyName: "showSelectAll", publicName: "showSelectAll", isSignal: true, isRequired: false, transformFunction: null }, autoSize: { classPropertyName: "autoSize", publicName: "autoSize", isSignal: true, isRequired: false, transformFunction: null }, displayedColumns: { classPropertyName: "displayedColumns", publicName: "displayedColumns", isSignal: true, isRequired: false, transformFunction: null }, notFoundConfig: { classPropertyName: "notFoundConfig", publicName: "notFoundConfig", isSignal: true, isRequired: false, transformFunction: null }, usesDoubleClickInput: { classPropertyName: "usesDoubleClickInput", publicName: "usesDoubleClick", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowDoubleClick: "rowDoubleClick" }, providers: [RdtTableStore], viewQueries: [{ propertyName: "tableEl", first: true, predicate: ["tableEl"], descendants: true, read: ElementRef }, { propertyName: "headerCells", predicate: ["headerEl"], descendants: true, read: ElementRef }], exportAs: ["rdtTable"], ngImport: i0, template: "@let data = store.entities(); @let loading = store.loading() || !store.ready();\n<div [class]=\"'rdt-table--' + size()\" class=\"rdt-table-wrapper\">\n <table cdk-table [dataSource]=\"loading ? data : data\" slot=\"table\" #tableEl>\n @let colNames = realDisplayedColumns();\n <tr cdk-header-row *cdkHeaderRowDef=\"colNames\"></tr>\n <tr\n cdk-row\n *cdkRowDef=\"let row; columns: colNames\"\n [class.row-selected]=\"store.isSelected(row)\"\n ></tr>\n\n <ng-container [cdkColumnDef]=\"selectKey\" [sticky]=\"true\">\n @let mode = selectMode();\n <th\n cdk-header-cell\n *cdkHeaderCellDef\n class=\"rdt-select-column-header\"\n #headerEl\n >\n @if (showSelectAll() && mode === 'multi') {\n <ng-container\n rdtCheckboxOutlet\n [ngModel]=\"store.selectedAll()\"\n (ngModelChange)=\"selectAll()\"\n ></ng-container>\n }\n </th>\n <td\n cdk-cell\n *cdkCellDef=\"let row; let i = index\"\n class=\"rdt-select-column-cell\"\n >\n <div class=\"rdt-select-column-cell-wrapper\">\n <ng-container\n rdtCheckboxOutlet\n [ngModel]=\"store.isSelected(row)\"\n (ngModelChange)=\"onSelect(row)\"\n ></ng-container>\n </div>\n </td>\n </ng-container>\n\n @for (column of colDefs(); track column.key) {\n <ng-container\n [cdkColumnDef]=\"column.key\"\n [sticky]=\"column.sticky === 'start'\"\n [stickyEnd]=\"column.sticky === 'end'\"\n >\n <th\n cdk-header-cell\n *cdkHeaderCellDef\n [class]=\"column.headerClass\"\n [style]=\"column.headerStyle\"\n [style.min-width]=\"getMinColumnWidth(column)\"\n [style.max-width]=\"getMaxColumnWidth(column)\"\n [style.width]=\"getColumnWidth(column)\"\n #headerEl\n >\n <rdt-header-cell-renderer [column]=\"column\" />\n </th>\n\n <td\n cdk-cell\n *cdkCellDef=\"let row; let i = index\"\n [class]=\"column.cellClass(row)\"\n [style]=\"column.cellStyle(row)\"\n [style.min-width]=\"getMinColumnWidth(column)\"\n [style.max-width]=\"getMaxColumnWidth(column)\"\n [style.width]=\"getColumnWidth(column)\"\n (click.double)=\"onCellDblClick(row, column)\"\n (click.single)=\"onCellClick(row, column)\"\n [style.cursor]=\"getCellCursor(row, column)\"\n >\n <!-- [debounceTime]=\"clickDebounceTime()\" -->\n <ng-container\n *ngComponentOutlet=\"\n column.cellRenderer;\n injector: injector;\n inputs: {\n row: row,\n index: i,\n store: store,\n cellRendererParams: column.cellRendererParams,\n }\n \"\n >\n </ng-container>\n </td>\n </ng-container>\n }\n </table>\n <!-- @if (loading) {\n <div class=\"spinner-wrapper special-content\">\n <rdt-spinner />\n </div>\n } -->\n <!-- @else if (store.fetchError(); as error) {\n <div class=\"error-wrapper special-content\">\n <rdt-table-no-result type=\"error\" [config]=\"error\" />\n </div>\n } @else if (data.length === 0) {\n <rdt-table-no-result type=\"not-found\" [config]=\"notFoundConfig()\" />\n } -->\n</div>\n\n<!-- @if (showPaginator()) { -->\n<rdt-table-paginator />\n<!-- } -->\n", styles: [":root{--rdt-table-height-sm: 250px;--rdt-table-height-md: 350px;--rdt-table-height-lg: 500px;--rdt-table-cell-padding: .25em}table{width:100%}rdt-table .rdt-table--sm .special-content{height:calc(var(--rdt-table-height-sm) - var(--gov-text-xs-font-size) - 2 * var(--rdt-table-cell-padding))}rdt-table .rdt-table--md .special-content{height:calc(var(--rdt-table-height-md) - .75rem + 2 * var(--rdt-table-cell-padding))}rdt-table .rdt-table--lg .special-content{height:calc(var(--rdt-table-height-lg) - .75rem + 2 * var(--rdt-table-cell-padding))}rdt-table thead{z-index:9;position:sticky;top:0}rdt-table .action-btn{border:none;outline:none;border-radius:4px;background-color:#00000006;padding:4px 8px;font-weight:500}rdt-table .action-btn:hover{cursor:pointer;background-color:#00000013}rdt-table .action-btn.selected{background-color:#00000020;color:#000}rdt-table .space-between{display:flex;justify-content:space-between}rdt-table .spinner-wrapper{display:flex;justify-content:center;height:100%;align-items:center}rdt-table .no-records{height:100%}rdt-table .table-header{display:flex;align-items:center;gap:2px}rdt-table td.cdk-table-sticky{background:var(--gov-color-neutral-white)!important}rdt-table td,rdt-table th{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;overflow-wrap:anywhere}rdt-table td{padding:0!important}rdt-table .rdt-select-column-header,rdt-table .rdt-select-column-cell{width:calc(var(--gov-form-checkbox-core-xs-indicator-size, 1rem) + 2 * var(--rdt-table-cell-padding));padding:var(--rdt-table-cell-padding)!important}rdt-table .row-selected td{background-color:var(--gov-color-primary-100)!important}rdt-table .cell-value-base{display:block;width:100%;padding:.25rem .5rem;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: i1$
|
|
878
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: RdtTableComponent, isStandalone: false, selector: "rdt-table", inputs: { itemIdFn: { classPropertyName: "itemIdFn", publicName: "itemIdFn", isSignal: true, isRequired: true, transformFunction: null }, colDefsInput: { classPropertyName: "colDefsInput", publicName: "colDefs", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, selectMode: { classPropertyName: "selectMode", publicName: "selectMode", isSignal: true, isRequired: false, transformFunction: null }, showPaginator: { classPropertyName: "showPaginator", publicName: "showPaginator", isSignal: true, isRequired: false, transformFunction: null }, showSelectAll: { classPropertyName: "showSelectAll", publicName: "showSelectAll", isSignal: true, isRequired: false, transformFunction: null }, autoSize: { classPropertyName: "autoSize", publicName: "autoSize", isSignal: true, isRequired: false, transformFunction: null }, displayedColumns: { classPropertyName: "displayedColumns", publicName: "displayedColumns", isSignal: true, isRequired: false, transformFunction: null }, notFoundConfig: { classPropertyName: "notFoundConfig", publicName: "notFoundConfig", isSignal: true, isRequired: false, transformFunction: null }, usesDoubleClickInput: { classPropertyName: "usesDoubleClickInput", publicName: "usesDoubleClick", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowDoubleClick: "rowDoubleClick" }, providers: [RdtTableStore], viewQueries: [{ propertyName: "tableEl", first: true, predicate: ["tableEl"], descendants: true, read: ElementRef }, { propertyName: "headerCells", predicate: ["headerEl"], descendants: true, read: ElementRef }], exportAs: ["rdtTable"], ngImport: i0, template: "@let data = store.entities(); @let loading = store.loading() || !store.ready();\n<div [class]=\"'rdt-table--' + size()\" class=\"rdt-table-wrapper\">\n <table cdk-table [dataSource]=\"loading ? data : data\" slot=\"table\" #tableEl>\n @let colNames = realDisplayedColumns();\n <tr cdk-header-row *cdkHeaderRowDef=\"colNames\"></tr>\n <tr\n cdk-row\n *cdkRowDef=\"let row; columns: colNames\"\n [class.row-selected]=\"store.isSelected(row)\"\n ></tr>\n\n <ng-container [cdkColumnDef]=\"selectKey\" [sticky]=\"true\">\n @let mode = selectMode();\n <th\n cdk-header-cell\n *cdkHeaderCellDef\n class=\"rdt-select-column-header\"\n #headerEl\n >\n @if (showSelectAll() && mode === 'multi') {\n <ng-container\n rdtCheckboxOutlet\n [ngModel]=\"store.selectedAll()\"\n (ngModelChange)=\"selectAll()\"\n ></ng-container>\n }\n </th>\n <td\n cdk-cell\n *cdkCellDef=\"let row; let i = index\"\n class=\"rdt-select-column-cell\"\n >\n <div class=\"rdt-select-column-cell-wrapper\">\n <ng-container\n rdtCheckboxOutlet\n [ngModel]=\"store.isSelected(row)\"\n (ngModelChange)=\"onSelect(row)\"\n ></ng-container>\n </div>\n </td>\n </ng-container>\n\n @for (column of colDefs(); track column.key) {\n <ng-container\n [cdkColumnDef]=\"column.key\"\n [sticky]=\"column.sticky === 'start'\"\n [stickyEnd]=\"column.sticky === 'end'\"\n >\n <th\n cdk-header-cell\n *cdkHeaderCellDef\n [class]=\"column.headerClass\"\n [style]=\"column.headerStyle\"\n [style.min-width]=\"getMinColumnWidth(column)\"\n [style.max-width]=\"getMaxColumnWidth(column)\"\n [style.width]=\"getColumnWidth(column)\"\n #headerEl\n >\n <rdt-header-cell-renderer [column]=\"column\" />\n </th>\n\n <td\n cdk-cell\n *cdkCellDef=\"let row; let i = index\"\n [class]=\"column.cellClass(row)\"\n [style]=\"column.cellStyle(row)\"\n [style.min-width]=\"getMinColumnWidth(column)\"\n [style.max-width]=\"getMaxColumnWidth(column)\"\n [style.width]=\"getColumnWidth(column)\"\n (click.double)=\"onCellDblClick(row, column)\"\n (click.single)=\"onCellClick(row, column)\"\n [style.cursor]=\"getCellCursor(row, column)\"\n >\n <!-- [debounceTime]=\"clickDebounceTime()\" -->\n <ng-container\n *ngComponentOutlet=\"\n column.cellRenderer;\n injector: injector;\n inputs: {\n row: row,\n index: i,\n store: store,\n cellRendererParams: column.cellRendererParams,\n }\n \"\n >\n </ng-container>\n </td>\n </ng-container>\n }\n </table>\n <!-- @if (loading) {\n <div class=\"spinner-wrapper special-content\">\n <rdt-spinner />\n </div>\n } -->\n <!-- @else if (store.fetchError(); as error) {\n <div class=\"error-wrapper special-content\">\n <rdt-table-no-result type=\"error\" [config]=\"error\" />\n </div>\n } @else if (data.length === 0) {\n <rdt-table-no-result type=\"not-found\" [config]=\"notFoundConfig()\" />\n } -->\n</div>\n\n<!-- @if (showPaginator()) { -->\n<rdt-table-paginator />\n<!-- } -->\n", styles: [":root{--rdt-table-height-sm: 250px;--rdt-table-height-md: 350px;--rdt-table-height-lg: 500px;--rdt-table-cell-padding: .25em}table{width:100%}rdt-table .rdt-table--sm .special-content{height:calc(var(--rdt-table-height-sm) - var(--gov-text-xs-font-size) - 2 * var(--rdt-table-cell-padding))}rdt-table .rdt-table--md .special-content{height:calc(var(--rdt-table-height-md) - .75rem + 2 * var(--rdt-table-cell-padding))}rdt-table .rdt-table--lg .special-content{height:calc(var(--rdt-table-height-lg) - .75rem + 2 * var(--rdt-table-cell-padding))}rdt-table thead{z-index:9;position:sticky;top:0}rdt-table .action-btn{border:none;outline:none;border-radius:4px;background-color:#00000006;padding:4px 8px;font-weight:500}rdt-table .action-btn:hover{cursor:pointer;background-color:#00000013}rdt-table .action-btn.selected{background-color:#00000020;color:#000}rdt-table .space-between{display:flex;justify-content:space-between}rdt-table .spinner-wrapper{display:flex;justify-content:center;height:100%;align-items:center}rdt-table .no-records{height:100%}rdt-table .table-header{display:flex;align-items:center;gap:2px}rdt-table td.cdk-table-sticky{background:var(--gov-color-neutral-white)!important}rdt-table td,rdt-table th{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;overflow-wrap:anywhere}rdt-table td{padding:0!important}rdt-table .rdt-select-column-header,rdt-table .rdt-select-column-cell{width:calc(var(--gov-form-checkbox-core-xs-indicator-size, 1rem) + 2 * var(--rdt-table-cell-padding));padding:var(--rdt-table-cell-padding)!important}rdt-table .row-selected td{background-color:var(--gov-color-primary-100)!important}rdt-table .cell-value-base{display:block;width:100%;padding:.25rem .5rem;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: i1$2.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.CdkTable, selector: "cdk-table, table[cdk-table]", inputs: ["trackBy", "dataSource", "multiTemplateDataRows", "fixedLayout"], outputs: ["contentChanged"], exportAs: ["cdkTable"] }, { kind: "directive", type: i3$1.CdkRowDef, selector: "[cdkRowDef]", inputs: ["cdkRowDefColumns", "cdkRowDefWhen"] }, { kind: "directive", type: i3$1.CdkCellDef, selector: "[cdkCellDef]" }, { kind: "directive", type: i3$1.CdkHeaderCellDef, selector: "[cdkHeaderCellDef]" }, { kind: "directive", type: i3$1.CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["cdkColumnDef", "sticky", "stickyEnd"] }, { kind: "directive", type: i3$1.CdkCell, selector: "cdk-cell, td[cdk-cell]" }, { kind: "component", type: i3$1.CdkRow, selector: "cdk-row, tr[cdk-row]" }, { kind: "directive", type: i3$1.CdkHeaderCell, selector: "cdk-header-cell, th[cdk-header-cell]" }, { kind: "component", type: i3$1.CdkHeaderRow, selector: "cdk-header-row, tr[cdk-header-row]" }, { kind: "directive", type: i3$1.CdkHeaderRowDef, selector: "[cdkHeaderRowDef]", inputs: ["cdkHeaderRowDef", "cdkHeaderRowDefSticky"] }, { kind: "directive", type: i3.RdtCheckboxOutletDirective, selector: "[rdtCheckboxOutlet]", exportAs: ["rdtCheckboxOutlet"] }, { kind: "component", type: RdtTablePaginatorComponent, selector: "rdt-table-paginator" }, { kind: "component", type: RdtHeaderCellRendererComponent, selector: "rdt-header-cell-renderer", inputs: ["column"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
836
879
|
}
|
|
837
880
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtTableComponent, decorators: [{
|
|
838
881
|
type: Component,
|
|
@@ -1035,7 +1078,11 @@ class RdtTableModule {
|
|
|
1035
1078
|
CdkTableModule,
|
|
1036
1079
|
GovDesignSystemModule,
|
|
1037
1080
|
RdtCheckboxOutletDirective,
|
|
1038
|
-
RdtIconOutletDirective
|
|
1081
|
+
RdtIconOutletDirective,
|
|
1082
|
+
RdtButtonOutletDirective,
|
|
1083
|
+
_EmptyOutletComponent,
|
|
1084
|
+
RdtNumericInputOutletDirective,
|
|
1085
|
+
RdtSelectOutletDirective], exports: [RdtTableComponent,
|
|
1039
1086
|
RdtHeaderCellRendererComponent,
|
|
1040
1087
|
RdtTablePaginatorComponent,
|
|
1041
1088
|
RdtTableOfflineDatasourceProviderDirective,
|
|
@@ -1045,7 +1092,8 @@ class RdtTableModule {
|
|
|
1045
1092
|
FormsModule,
|
|
1046
1093
|
ReactiveFormsModule,
|
|
1047
1094
|
CdkTableModule,
|
|
1048
|
-
GovDesignSystemModule
|
|
1095
|
+
GovDesignSystemModule,
|
|
1096
|
+
_EmptyOutletComponent] });
|
|
1049
1097
|
}
|
|
1050
1098
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtTableModule, decorators: [{
|
|
1051
1099
|
type: NgModule,
|
|
@@ -1077,14 +1125,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
|
|
|
1077
1125
|
GovDesignSystemModule,
|
|
1078
1126
|
RdtCheckboxOutletDirective,
|
|
1079
1127
|
RdtIconOutletDirective,
|
|
1080
|
-
|
|
1081
|
-
|
|
1082
|
-
|
|
1083
|
-
|
|
1084
|
-
CsuCheckboxComponent,
|
|
1085
|
-
CsuClickDoubleDirective,
|
|
1086
|
-
CsuSelectComponent,
|
|
1087
|
-
CsuSelectOfflineProviderDirective, */
|
|
1128
|
+
RdtButtonOutletDirective,
|
|
1129
|
+
_EmptyOutletComponent,
|
|
1130
|
+
RdtNumericInputOutletDirective,
|
|
1131
|
+
RdtSelectOutletDirective,
|
|
1088
1132
|
],
|
|
1089
1133
|
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
|
1090
1134
|
}]
|