@ngrdt/table 0.0.85 → 0.0.89
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
CHANGED
|
@@ -832,11 +832,11 @@ class RdtTableComponent {
|
|
|
832
832
|
this.renderer.setStyle(col, 'maxWidth', widthPx);
|
|
833
833
|
}
|
|
834
834
|
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 (
|
|
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$1.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.CdkTable, selector: "cdk-table, table[cdk-table]", inputs: ["trackBy", "dataSource", "multiTemplateDataRows", "fixedLayout"], outputs: ["contentChanged"], exportAs: ["cdkTable"] }, { kind: "directive", type: i3.CdkRowDef, selector: "[cdkRowDef]", inputs: ["cdkRowDefColumns", "cdkRowDefWhen"] }, { kind: "directive", type: i3.CdkCellDef, selector: "[cdkCellDef]" }, { kind: "directive", type: i3.CdkHeaderCellDef, selector: "[cdkHeaderCellDef]" }, { kind: "directive", type: i3.CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["cdkColumnDef", "sticky", "stickyEnd"] }, { kind: "directive", type: i3.CdkCell, selector: "cdk-cell, td[cdk-cell]" }, { kind: "component", type: i3.CdkRow, selector: "cdk-row, tr[cdk-row]" }, { kind: "directive", type: i3.CdkHeaderCell, selector: "cdk-header-cell, th[cdk-header-cell]" }, { kind: "component", type: i3.CdkHeaderRow, selector: "cdk-header-row, tr[cdk-header-row]" }, { kind: "directive", type: i3.CdkHeaderRowDef, selector: "[cdkHeaderRowDef]", inputs: ["cdkHeaderRowDef", "cdkHeaderRowDefSticky"] }, { kind: "directive", type: i4.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
836
|
}
|
|
837
837
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: RdtTableComponent, decorators: [{
|
|
838
838
|
type: Component,
|
|
839
|
-
args: [{ selector: 'rdt-table', changeDetection: ChangeDetectionStrategy.OnPush, providers: [RdtTableStore], standalone: false, encapsulation: ViewEncapsulation.None, exportAs: 'rdtTable', 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 (
|
|
839
|
+
args: [{ selector: 'rdt-table', changeDetection: ChangeDetectionStrategy.OnPush, providers: [RdtTableStore], standalone: false, encapsulation: ViewEncapsulation.None, exportAs: 'rdtTable', 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"] }]
|
|
840
840
|
}], propDecorators: { tableEl: [{
|
|
841
841
|
type: ViewChild,
|
|
842
842
|
args: ['tableEl', { static: false, read: ElementRef }]
|