@i-cell/ids-angular 0.2.24 → 0.2.25
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/i-cell-ids-angular-accordion.mjs +32 -32
- package/fesm2022/i-cell-ids-angular-accordion.mjs.map +1 -1
- package/fesm2022/i-cell-ids-angular-avatar.mjs +18 -18
- package/fesm2022/i-cell-ids-angular-avatar.mjs.map +1 -1
- package/fesm2022/i-cell-ids-angular-badge.mjs +27 -27
- package/fesm2022/i-cell-ids-angular-badge.mjs.map +1 -1
- package/fesm2022/i-cell-ids-angular-breadcrumb.mjs +45 -45
- package/fesm2022/i-cell-ids-angular-breadcrumb.mjs.map +1 -1
- package/fesm2022/i-cell-ids-angular-button.mjs +19 -19
- package/fesm2022/i-cell-ids-angular-button.mjs.map +1 -1
- package/fesm2022/i-cell-ids-angular-card.mjs +38 -41
- package/fesm2022/i-cell-ids-angular-card.mjs.map +1 -1
- package/fesm2022/i-cell-ids-angular-checkbox.mjs +45 -45
- package/fesm2022/i-cell-ids-angular-checkbox.mjs.map +1 -1
- package/fesm2022/i-cell-ids-angular-chip.mjs +28 -28
- package/fesm2022/i-cell-ids-angular-chip.mjs.map +1 -1
- package/fesm2022/i-cell-ids-angular-core.mjs +18 -20
- package/fesm2022/i-cell-ids-angular-core.mjs.map +1 -1
- package/fesm2022/i-cell-ids-angular-datepicker.mjs +74 -74
- package/fesm2022/i-cell-ids-angular-datepicker.mjs.map +1 -1
- package/fesm2022/i-cell-ids-angular-dialog.mjs +23 -23
- package/fesm2022/i-cell-ids-angular-dialog.mjs.map +1 -1
- package/fesm2022/i-cell-ids-angular-divider.mjs +12 -12
- package/fesm2022/i-cell-ids-angular-divider.mjs.map +1 -1
- package/fesm2022/i-cell-ids-angular-forms.mjs +222 -222
- package/fesm2022/i-cell-ids-angular-forms.mjs.map +1 -1
- package/fesm2022/i-cell-ids-angular-icon-button.mjs +15 -15
- package/fesm2022/i-cell-ids-angular-icon-button.mjs.map +1 -1
- package/fesm2022/i-cell-ids-angular-icon.mjs +15 -15
- package/fesm2022/i-cell-ids-angular-icon.mjs.map +1 -1
- package/fesm2022/i-cell-ids-angular-menu.mjs +18 -18
- package/fesm2022/i-cell-ids-angular-menu.mjs.map +1 -1
- package/fesm2022/i-cell-ids-angular-notification.mjs +26 -26
- package/fesm2022/i-cell-ids-angular-notification.mjs.map +1 -1
- package/fesm2022/i-cell-ids-angular-overlay-panel.mjs +18 -18
- package/fesm2022/i-cell-ids-angular-overlay-panel.mjs.map +1 -1
- package/fesm2022/i-cell-ids-angular-paginator.mjs +34 -34
- package/fesm2022/i-cell-ids-angular-paginator.mjs.map +1 -1
- package/fesm2022/i-cell-ids-angular-radio.mjs +32 -32
- package/fesm2022/i-cell-ids-angular-radio.mjs.map +1 -1
- package/fesm2022/i-cell-ids-angular-segmented-control-toggle.mjs +34 -34
- package/fesm2022/i-cell-ids-angular-segmented-control-toggle.mjs.map +1 -1
- package/fesm2022/i-cell-ids-angular-segmented-control.mjs +34 -34
- package/fesm2022/i-cell-ids-angular-segmented-control.mjs.map +1 -1
- package/fesm2022/i-cell-ids-angular-select.mjs +29 -29
- package/fesm2022/i-cell-ids-angular-select.mjs.map +1 -1
- package/fesm2022/i-cell-ids-angular-side-nav.mjs +41 -41
- package/fesm2022/i-cell-ids-angular-side-nav.mjs.map +1 -1
- package/fesm2022/i-cell-ids-angular-side-sheet.mjs +29 -29
- package/fesm2022/i-cell-ids-angular-side-sheet.mjs.map +1 -1
- package/fesm2022/i-cell-ids-angular-snackbar.mjs +30 -30
- package/fesm2022/i-cell-ids-angular-snackbar.mjs.map +1 -1
- package/fesm2022/i-cell-ids-angular-spinner.mjs +10 -10
- package/fesm2022/i-cell-ids-angular-spinner.mjs.map +1 -1
- package/fesm2022/i-cell-ids-angular-switch.mjs +36 -36
- package/fesm2022/i-cell-ids-angular-switch.mjs.map +1 -1
- package/fesm2022/i-cell-ids-angular-tab.mjs +140 -30
- package/fesm2022/i-cell-ids-angular-tab.mjs.map +1 -1
- package/fesm2022/i-cell-ids-angular-table.mjs +94 -94
- package/fesm2022/i-cell-ids-angular-table.mjs.map +1 -1
- package/fesm2022/i-cell-ids-angular-tag.mjs +20 -20
- package/fesm2022/i-cell-ids-angular-tag.mjs.map +1 -1
- package/fesm2022/i-cell-ids-angular-tooltip.mjs +32 -32
- package/fesm2022/i-cell-ids-angular-tooltip.mjs.map +1 -1
- package/package.json +47 -47
- package/{accordion/index.d.ts → types/i-cell-ids-angular-accordion.d.ts} +1 -1
- package/{avatar/index.d.ts → types/i-cell-ids-angular-avatar.d.ts} +1 -1
- package/{button/index.d.ts → types/i-cell-ids-angular-button.d.ts} +1 -1
- package/{card/index.d.ts → types/i-cell-ids-angular-card.d.ts} +2 -2
- package/{chip/index.d.ts → types/i-cell-ids-angular-chip.d.ts} +5 -5
- package/{core/index.d.ts → types/i-cell-ids-angular-core.d.ts} +2 -2
- package/{datepicker/index.d.ts → types/i-cell-ids-angular-datepicker.d.ts} +1 -1
- package/{divider/index.d.ts → types/i-cell-ids-angular-divider.d.ts} +2 -2
- package/{icon-button/index.d.ts → types/i-cell-ids-angular-icon-button.d.ts} +2 -2
- package/{icon/index.d.ts → types/i-cell-ids-angular-icon.d.ts} +1 -1
- package/{menu/index.d.ts → types/i-cell-ids-angular-menu.d.ts} +1 -1
- package/{notification/index.d.ts → types/i-cell-ids-angular-notification.d.ts} +1 -1
- package/{paginator/index.d.ts → types/i-cell-ids-angular-paginator.d.ts} +1 -1
- package/{radio/index.d.ts → types/i-cell-ids-angular-radio.d.ts} +1 -1
- package/{segmented-control-toggle/index.d.ts → types/i-cell-ids-angular-segmented-control-toggle.d.ts} +1 -1
- package/{segmented-control/index.d.ts → types/i-cell-ids-angular-segmented-control.d.ts} +1 -1
- package/{snackbar/index.d.ts → types/i-cell-ids-angular-snackbar.d.ts} +3 -3
- package/{tab/index.d.ts → types/i-cell-ids-angular-tab.d.ts} +16 -3
- package/{tag/index.d.ts → types/i-cell-ids-angular-tag.d.ts} +1 -1
- /package/{badge/index.d.ts → types/i-cell-ids-angular-badge.d.ts} +0 -0
- /package/{breadcrumb/index.d.ts → types/i-cell-ids-angular-breadcrumb.d.ts} +0 -0
- /package/{checkbox/index.d.ts → types/i-cell-ids-angular-checkbox.d.ts} +0 -0
- /package/{dialog/index.d.ts → types/i-cell-ids-angular-dialog.d.ts} +0 -0
- /package/{forms/index.d.ts → types/i-cell-ids-angular-forms.d.ts} +0 -0
- /package/{overlay-panel/index.d.ts → types/i-cell-ids-angular-overlay-panel.d.ts} +0 -0
- /package/{select/index.d.ts → types/i-cell-ids-angular-select.d.ts} +0 -0
- /package/{side-nav/index.d.ts → types/i-cell-ids-angular-side-nav.d.ts} +0 -0
- /package/{side-sheet/index.d.ts → types/i-cell-ids-angular-side-sheet.d.ts} +0 -0
- /package/{spinner/index.d.ts → types/i-cell-ids-angular-spinner.d.ts} +0 -0
- /package/{switch/index.d.ts → types/i-cell-ids-angular-switch.d.ts} +0 -0
- /package/{table/index.d.ts → types/i-cell-ids-angular-table.d.ts} +0 -0
- /package/{tooltip/index.d.ts → types/i-cell-ids-angular-tooltip.d.ts} +0 -0
- /package/{index.d.ts → types/i-cell-ids-angular.d.ts} +0 -0
|
@@ -2,11 +2,11 @@ import { DEFAULT_PAGE_SIZE } from '@i-cell/ids-angular/paginator';
|
|
|
2
2
|
import { BehaviorSubject, Subject, map, merge, debounceTime, switchMap, Observable, catchError, of, tap, finalize, startWith } from 'rxjs';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
4
|
import { input, Directive, inject, TemplateRef, InjectionToken, Injectable, Optional, SkipSelf, ElementRef, computed, signal, Component, ChangeDetectorRef, viewChildren, contentChildren, contentChild, output, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';
|
|
5
|
-
import {
|
|
5
|
+
import { isString, isTypeDerivedFrom, IdsSize, ComponentBaseWithDefaults, coerceBooleanAttribute } from '@i-cell/ids-angular/core';
|
|
6
6
|
import { NgComponentOutlet, NgTemplateOutlet, NgClass } from '@angular/common';
|
|
7
7
|
import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
8
8
|
import { IdsIconComponent } from '@i-cell/ids-angular/icon';
|
|
9
|
-
import { trigger, state,
|
|
9
|
+
import { trigger, state, style, transition, animate } from '@angular/animations';
|
|
10
10
|
import { SelectionModel } from '@angular/cdk/collections';
|
|
11
11
|
import { CdkCell, CdkCellDef, CdkColumnDef, CdkHeaderCell, CdkHeaderCellDef, CdkHeaderRow, CdkHeaderRowDef, CdkNoDataRow, CdkRow, CdkRowDef, CdkTable } from '@angular/cdk/table';
|
|
12
12
|
import { IdsCheckboxComponent } from '@i-cell/ids-angular/checkbox';
|
|
@@ -114,44 +114,44 @@ class ServerSideDataSource {
|
|
|
114
114
|
|
|
115
115
|
class IdsTableCellRenderer {
|
|
116
116
|
constructor() {
|
|
117
|
-
this.cellValue = input('', ...(ngDevMode ?
|
|
118
|
-
this.colDef = input.required(...(ngDevMode ? [{ debugName: "colDef" }] : []));
|
|
119
|
-
this.rowData = input(...(ngDevMode ? [undefined, { debugName: "rowData" }] : []));
|
|
117
|
+
this.cellValue = input('', { ...(ngDevMode ? { debugName: "cellValue" } : /* istanbul ignore next */ {}), transform: (value) => String(value ?? '') });
|
|
118
|
+
this.colDef = input.required(...(ngDevMode ? [{ debugName: "colDef" }] : /* istanbul ignore next */ []));
|
|
119
|
+
this.rowData = input(...(ngDevMode ? [undefined, { debugName: "rowData" }] : /* istanbul ignore next */ []));
|
|
120
120
|
}
|
|
121
121
|
_isComponentCellRenderer(cellRendererDef) {
|
|
122
122
|
return !!cellRendererDef && !isString(cellRendererDef) && isTypeDerivedFrom(cellRendererDef, IdsTableCellRenderer);
|
|
123
123
|
}
|
|
124
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
125
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "
|
|
124
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: IdsTableCellRenderer, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
125
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: IdsTableCellRenderer, isStandalone: true, inputs: { cellValue: { classPropertyName: "cellValue", publicName: "cellValue", isSignal: true, isRequired: false, transformFunction: null }, colDef: { classPropertyName: "colDef", publicName: "colDef", isSignal: true, isRequired: true, transformFunction: null }, rowData: { classPropertyName: "rowData", publicName: "rowData", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
|
|
126
126
|
}
|
|
127
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
127
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: IdsTableCellRenderer, decorators: [{
|
|
128
128
|
type: Directive
|
|
129
|
-
}] });
|
|
129
|
+
}], propDecorators: { cellValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellValue", required: false }] }], colDef: [{ type: i0.Input, args: [{ isSignal: true, alias: "colDef", required: true }] }], rowData: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowData", required: false }] }] } });
|
|
130
130
|
|
|
131
131
|
class IdsTableCellTemplateDirective {
|
|
132
132
|
constructor() {
|
|
133
|
-
this.templateName = input.required(...(ngDevMode ?
|
|
133
|
+
this.templateName = input.required({ ...(ngDevMode ? { debugName: "templateName" } : /* istanbul ignore next */ {}), alias: 'idsCellTemplate' });
|
|
134
134
|
this.templateRef = inject(TemplateRef);
|
|
135
135
|
}
|
|
136
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
137
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "
|
|
136
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: IdsTableCellTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
137
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: IdsTableCellTemplateDirective, isStandalone: true, selector: "[idsCellTemplate]", inputs: { templateName: { classPropertyName: "templateName", publicName: "idsCellTemplate", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
|
|
138
138
|
}
|
|
139
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
139
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: IdsTableCellTemplateDirective, decorators: [{
|
|
140
140
|
type: Directive,
|
|
141
141
|
args: [{
|
|
142
142
|
selector: '[idsCellTemplate]',
|
|
143
143
|
standalone: true,
|
|
144
144
|
}]
|
|
145
|
-
}] });
|
|
145
|
+
}], propDecorators: { templateName: [{ type: i0.Input, args: [{ isSignal: true, alias: "idsCellTemplate", required: true }] }] } });
|
|
146
146
|
|
|
147
147
|
class IdsTableSortAscIconDirective {
|
|
148
148
|
constructor() {
|
|
149
149
|
this.templateRef = inject((TemplateRef));
|
|
150
150
|
}
|
|
151
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
152
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
151
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: IdsTableSortAscIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
152
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.5", type: IdsTableSortAscIconDirective, isStandalone: true, selector: "ng-template[idsTableSortAscIcon]", ngImport: i0 }); }
|
|
153
153
|
}
|
|
154
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
154
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: IdsTableSortAscIconDirective, decorators: [{
|
|
155
155
|
type: Directive,
|
|
156
156
|
args: [{
|
|
157
157
|
selector: 'ng-template[idsTableSortAscIcon]',
|
|
@@ -162,10 +162,10 @@ class IdsTableSortDescIconDirective {
|
|
|
162
162
|
constructor() {
|
|
163
163
|
this.templateRef = inject((TemplateRef));
|
|
164
164
|
}
|
|
165
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
166
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
165
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: IdsTableSortDescIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
166
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.5", type: IdsTableSortDescIconDirective, isStandalone: true, selector: "ng-template[idsTableSortDescIcon]", ngImport: i0 }); }
|
|
167
167
|
}
|
|
168
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
168
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: IdsTableSortDescIconDirective, decorators: [{
|
|
169
169
|
type: Directive,
|
|
170
170
|
args: [{
|
|
171
171
|
selector: 'ng-template[idsTableSortDescIcon]',
|
|
@@ -176,10 +176,10 @@ class IdsTableSortNoneIconDirective {
|
|
|
176
176
|
constructor() {
|
|
177
177
|
this.templateRef = inject((TemplateRef));
|
|
178
178
|
}
|
|
179
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
180
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
179
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: IdsTableSortNoneIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
180
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.5", type: IdsTableSortNoneIconDirective, isStandalone: true, selector: "ng-template[idsTableSortNoneIcon]", ngImport: i0 }); }
|
|
181
181
|
}
|
|
182
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
182
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: IdsTableSortNoneIconDirective, decorators: [{
|
|
183
183
|
type: Directive,
|
|
184
184
|
args: [{
|
|
185
185
|
selector: 'ng-template[idsTableSortNoneIcon]',
|
|
@@ -262,10 +262,10 @@ class IdsTableIntl {
|
|
|
262
262
|
getColLabel(colDef) {
|
|
263
263
|
return colDef.label || '';
|
|
264
264
|
}
|
|
265
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
266
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
265
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: IdsTableIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
266
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: IdsTableIntl, providedIn: 'root' }); }
|
|
267
267
|
}
|
|
268
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
268
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: IdsTableIntl, decorators: [{
|
|
269
269
|
type: Injectable,
|
|
270
270
|
args: [{ providedIn: 'root' }]
|
|
271
271
|
}] });
|
|
@@ -298,9 +298,9 @@ class IdsCellContentComponent extends IdsTableCellRenderer {
|
|
|
298
298
|
this._intl = inject(IdsTableIntl);
|
|
299
299
|
this._isHeader = this._elementRef.nativeElement.hasAttribute('idsHeaderCellContent');
|
|
300
300
|
this._numberFormat = toSignal(this._intl.changes.pipe(map(() => this._intl.numberFormat), startWith(this._intl.numberFormat)));
|
|
301
|
-
this.externalCellTemplates = input(...(ngDevMode ? [undefined, { debugName: "externalCellTemplates" }] : []));
|
|
302
|
-
this._cellRendererDef = computed(() => (this._isHeader ? this.colDef().headerCellRenderer : this.colDef().cellRenderer), ...(ngDevMode ? [{ debugName: "_cellRendererDef" }] : []));
|
|
303
|
-
this._updateCellContent = signal(true, ...(ngDevMode ? [{ debugName: "_updateCellContent" }] : []));
|
|
301
|
+
this.externalCellTemplates = input(...(ngDevMode ? [undefined, { debugName: "externalCellTemplates" }] : /* istanbul ignore next */ []));
|
|
302
|
+
this._cellRendererDef = computed(() => (this._isHeader ? this.colDef().headerCellRenderer : this.colDef().cellRenderer), ...(ngDevMode ? [{ debugName: "_cellRendererDef" }] : /* istanbul ignore next */ []));
|
|
303
|
+
this._updateCellContent = signal(true, ...(ngDevMode ? [{ debugName: "_updateCellContent" }] : /* istanbul ignore next */ []));
|
|
304
304
|
this._cellValue = computed(() => {
|
|
305
305
|
// Forces recalculation of this computed signal
|
|
306
306
|
this._updateCellContent();
|
|
@@ -315,60 +315,60 @@ class IdsCellContentComponent extends IdsTableCellRenderer {
|
|
|
315
315
|
const valueFn = this.colDef().value ?? (() => '');
|
|
316
316
|
const rawResult = field && Object.hasOwn(rowData, field) ? rowData[field] : valueFn(rowData);
|
|
317
317
|
return rawResult;
|
|
318
|
-
}, ...(ngDevMode ? [{ debugName: "_cellValue" }] : []));
|
|
319
|
-
this._stringCellValue = computed(() => String(this._cellValue() ?? ''), ...(ngDevMode ? [{ debugName: "_stringCellValue" }] : []));
|
|
318
|
+
}, ...(ngDevMode ? [{ debugName: "_cellValue" }] : /* istanbul ignore next */ []));
|
|
319
|
+
this._stringCellValue = computed(() => String(this._cellValue() ?? ''), ...(ngDevMode ? [{ debugName: "_stringCellValue" }] : /* istanbul ignore next */ []));
|
|
320
320
|
this._numericCellValue = computed(() => {
|
|
321
321
|
const stringValue = this._stringCellValue();
|
|
322
322
|
return this._numberFormat()?.format(parseFloat(stringValue)) ?? stringValue;
|
|
323
|
-
}, ...(ngDevMode ? [{ debugName: "_numericCellValue" }] : []));
|
|
323
|
+
}, ...(ngDevMode ? [{ debugName: "_numericCellValue" }] : /* istanbul ignore next */ []));
|
|
324
324
|
this._cellRendererComp = computed(() => {
|
|
325
325
|
const renderer = this._cellRendererDef();
|
|
326
326
|
if (this._isComponentCellRenderer(renderer)) {
|
|
327
327
|
return renderer;
|
|
328
328
|
}
|
|
329
329
|
return null;
|
|
330
|
-
}, ...(ngDevMode ? [{ debugName: "_cellRendererComp" }] : []));
|
|
330
|
+
}, ...(ngDevMode ? [{ debugName: "_cellRendererComp" }] : /* istanbul ignore next */ []));
|
|
331
331
|
this._cellTemplateName = computed(() => {
|
|
332
332
|
if (isString(this._cellRendererDef())) {
|
|
333
333
|
return this._cellRendererDef();
|
|
334
334
|
}
|
|
335
335
|
return undefined;
|
|
336
|
-
}, ...(ngDevMode ? [{ debugName: "_cellTemplateName" }] : []));
|
|
336
|
+
}, ...(ngDevMode ? [{ debugName: "_cellTemplateName" }] : /* istanbul ignore next */ []));
|
|
337
337
|
this._cellTemplate = computed(() => {
|
|
338
338
|
const templateName = this._cellTemplateName();
|
|
339
339
|
const templates = this.externalCellTemplates();
|
|
340
340
|
return isString(templateName) && templates?.has(templateName) ? templates.get(templateName) ?? null : null;
|
|
341
|
-
}, ...(ngDevMode ? [{ debugName: "_cellTemplate" }] : []));
|
|
341
|
+
}, ...(ngDevMode ? [{ debugName: "_cellTemplate" }] : /* istanbul ignore next */ []));
|
|
342
342
|
}
|
|
343
343
|
updateValue() {
|
|
344
344
|
this._updateCellContent.set(!this._updateCellContent());
|
|
345
345
|
}
|
|
346
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
347
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
346
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: IdsCellContentComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
347
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: IdsCellContentComponent, isStandalone: true, selector: "th[idsCellContent],td[idsCellContent],th[idsHeaderCellContent],td[idsHeaderCellContent]", inputs: { externalCellTemplates: { classPropertyName: "externalCellTemplates", publicName: "externalCellTemplates", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "<ng-content select=\"[colStart]\" />\r\n\r\n@if (_cellRendererComp()) {\r\n <ng-container *ngComponentOutlet=\"_cellRendererComp(); inputs: { rowData: rowData(), colDef: colDef(), cellValue: _cellValue() }\" />\r\n} @else {\r\n @switch (_cellTemplateName()) {\r\n @case ('strong') {\r\n <strong class=\"ids-cell-content ids-cell-content__strong\">{{ _cellValue() }}</strong>\r\n }\r\n @case ('numeric') {\r\n <div class=\"ids-cell-content ids-cell-content__numeric\">{{ _numericCellValue() }}</div>\r\n }\r\n @case ('icon') {\r\n <ids-icon\r\n class=\"ids-cell-content ids-cell-content__icon\"\r\n [fontIcon]=\"_stringCellValue()\"\r\n [aria-hidden]=\"true\"\r\n />\r\n }\r\n <!-- TODO: label-description template (needs further discussion) -->\r\n @default {\r\n @let template = _cellTemplate();\r\n @if (template) {\r\n <!-- external template ref -->\r\n <ng-container *ngTemplateOutlet=\"template; context: { $implicit: rowData(), colDef: colDef(), cellValue: _cellValue() }\" />\r\n } @else {\r\n <!-- default basic cell content -->\r\n <div class=\"ids-cell-content ids-cell-content__default\">{{ _cellValue() }}</div>\r\n }\r\n }\r\n }\r\n}\r\n\r\n<ng-content select=\"[colEnd]\" />\r\n", dependencies: [{ kind: "component", type: IdsIconComponent, selector: "ids-icon", inputs: ["size", "sizeCollection", "variant", "fontIcon", "svgIcon", "aria-hidden"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
|
|
348
348
|
}
|
|
349
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
349
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: IdsCellContentComponent, decorators: [{
|
|
350
350
|
type: Component,
|
|
351
351
|
args: [{ selector: 'th[idsCellContent],td[idsCellContent],th[idsHeaderCellContent],td[idsHeaderCellContent]', imports: [
|
|
352
352
|
IdsIconComponent,
|
|
353
353
|
NgComponentOutlet,
|
|
354
354
|
NgTemplateOutlet,
|
|
355
355
|
], template: "<ng-content select=\"[colStart]\" />\r\n\r\n@if (_cellRendererComp()) {\r\n <ng-container *ngComponentOutlet=\"_cellRendererComp(); inputs: { rowData: rowData(), colDef: colDef(), cellValue: _cellValue() }\" />\r\n} @else {\r\n @switch (_cellTemplateName()) {\r\n @case ('strong') {\r\n <strong class=\"ids-cell-content ids-cell-content__strong\">{{ _cellValue() }}</strong>\r\n }\r\n @case ('numeric') {\r\n <div class=\"ids-cell-content ids-cell-content__numeric\">{{ _numericCellValue() }}</div>\r\n }\r\n @case ('icon') {\r\n <ids-icon\r\n class=\"ids-cell-content ids-cell-content__icon\"\r\n [fontIcon]=\"_stringCellValue()\"\r\n [aria-hidden]=\"true\"\r\n />\r\n }\r\n <!-- TODO: label-description template (needs further discussion) -->\r\n @default {\r\n @let template = _cellTemplate();\r\n @if (template) {\r\n <!-- external template ref -->\r\n <ng-container *ngTemplateOutlet=\"template; context: { $implicit: rowData(), colDef: colDef(), cellValue: _cellValue() }\" />\r\n } @else {\r\n <!-- default basic cell content -->\r\n <div class=\"ids-cell-content ids-cell-content__default\">{{ _cellValue() }}</div>\r\n }\r\n }\r\n }\r\n}\r\n\r\n<ng-content select=\"[colEnd]\" />\r\n" }]
|
|
356
|
-
}] });
|
|
356
|
+
}], propDecorators: { externalCellTemplates: [{ type: i0.Input, args: [{ isSignal: true, alias: "externalCellTemplates", required: false }] }] } });
|
|
357
357
|
|
|
358
358
|
class RowInfoHolderDirective {
|
|
359
359
|
constructor() {
|
|
360
|
-
this.rowInfo = input.required(...(ngDevMode ? [{ debugName: "rowInfo" }] : []));
|
|
360
|
+
this.rowInfo = input.required(...(ngDevMode ? [{ debugName: "rowInfo" }] : /* istanbul ignore next */ []));
|
|
361
361
|
}
|
|
362
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
363
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "
|
|
362
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: RowInfoHolderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
363
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.5", type: RowInfoHolderDirective, isStandalone: true, selector: "[rowInfo]", inputs: { rowInfo: { classPropertyName: "rowInfo", publicName: "rowInfo", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
|
|
364
364
|
}
|
|
365
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
365
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: RowInfoHolderDirective, decorators: [{
|
|
366
366
|
type: Directive,
|
|
367
367
|
args: [{
|
|
368
368
|
selector: '[rowInfo]',
|
|
369
369
|
standalone: true,
|
|
370
370
|
}]
|
|
371
|
-
}] });
|
|
371
|
+
}], propDecorators: { rowInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowInfo", required: true }] }] } });
|
|
372
372
|
|
|
373
373
|
const defaultConfig = IDS_TABLE_DEFAULT_CONFIG_FACTORY();
|
|
374
374
|
class IdsTableComponent extends ComponentBaseWithDefaults {
|
|
@@ -384,51 +384,51 @@ class IdsTableComponent extends ComponentBaseWithDefaults {
|
|
|
384
384
|
this._defaultConfig = this._getDefaultConfig(defaultConfig, IDS_TABLE_DEFAULT_CONFIG);
|
|
385
385
|
this._cdRef = inject(ChangeDetectorRef);
|
|
386
386
|
this._intl = inject(IdsTableIntl);
|
|
387
|
-
this._viewCellTemplates = viewChildren(IdsTableCellTemplateDirective, ...(ngDevMode ? [{ debugName: "_viewCellTemplates" }] : []));
|
|
388
|
-
this._rowDataHolders = viewChildren((RowInfoHolderDirective), ...(ngDevMode ? [{ debugName: "_rowDataHolders" }] : []));
|
|
389
|
-
this._selectorCheckboxes = viewChildren(IdsCheckboxComponent, ...(ngDevMode ? [{ debugName: "_selectorCheckboxes" }] : []));
|
|
390
|
-
this._cellContentRenderers = viewChildren((IdsCellContentComponent), ...(ngDevMode ? [{ debugName: "_cellContentRenderers" }] : []));
|
|
391
|
-
this._contentCellTemplates = contentChildren(IdsTableCellTemplateDirective, ...(ngDevMode ? [{ debugName: "_contentCellTemplates" }] : []));
|
|
392
|
-
this._sortAscIconTemplate = contentChild(IdsTableSortAscIconDirective, ...(ngDevMode ? [{ debugName: "_sortAscIconTemplate" }] : []));
|
|
393
|
-
this._sortDescIconTemplate = contentChild(IdsTableSortDescIconDirective, ...(ngDevMode ? [{ debugName: "_sortDescIconTemplate" }] : []));
|
|
394
|
-
this._sortNoneIconTemplate = contentChild(IdsTableSortNoneIconDirective, ...(ngDevMode ? [{ debugName: "_sortNoneIconTemplate" }] : []));
|
|
395
|
-
this.columnDefs = input.required(...(ngDevMode ? [{ debugName: "columnDefs" }] : []));
|
|
396
|
-
this.dataSource = input.required(...(ngDevMode ? [{ debugName: "dataSource" }] : []));
|
|
387
|
+
this._viewCellTemplates = viewChildren(IdsTableCellTemplateDirective, ...(ngDevMode ? [{ debugName: "_viewCellTemplates" }] : /* istanbul ignore next */ []));
|
|
388
|
+
this._rowDataHolders = viewChildren((RowInfoHolderDirective), ...(ngDevMode ? [{ debugName: "_rowDataHolders" }] : /* istanbul ignore next */ []));
|
|
389
|
+
this._selectorCheckboxes = viewChildren(IdsCheckboxComponent, ...(ngDevMode ? [{ debugName: "_selectorCheckboxes" }] : /* istanbul ignore next */ []));
|
|
390
|
+
this._cellContentRenderers = viewChildren((IdsCellContentComponent), ...(ngDevMode ? [{ debugName: "_cellContentRenderers" }] : /* istanbul ignore next */ []));
|
|
391
|
+
this._contentCellTemplates = contentChildren(IdsTableCellTemplateDirective, ...(ngDevMode ? [{ debugName: "_contentCellTemplates" }] : /* istanbul ignore next */ []));
|
|
392
|
+
this._sortAscIconTemplate = contentChild(IdsTableSortAscIconDirective, ...(ngDevMode ? [{ debugName: "_sortAscIconTemplate" }] : /* istanbul ignore next */ []));
|
|
393
|
+
this._sortDescIconTemplate = contentChild(IdsTableSortDescIconDirective, ...(ngDevMode ? [{ debugName: "_sortDescIconTemplate" }] : /* istanbul ignore next */ []));
|
|
394
|
+
this._sortNoneIconTemplate = contentChild(IdsTableSortNoneIconDirective, ...(ngDevMode ? [{ debugName: "_sortNoneIconTemplate" }] : /* istanbul ignore next */ []));
|
|
395
|
+
this.columnDefs = input.required(...(ngDevMode ? [{ debugName: "columnDefs" }] : /* istanbul ignore next */ []));
|
|
396
|
+
this.dataSource = input.required(...(ngDevMode ? [{ debugName: "dataSource" }] : /* istanbul ignore next */ []));
|
|
397
397
|
/** Flag to have sticky header. */
|
|
398
|
-
this.fixedHeader = input(this._defaultConfig.fixedHeader, ...(ngDevMode ?
|
|
398
|
+
this.fixedHeader = input(this._defaultConfig.fixedHeader, { ...(ngDevMode ? { debugName: "fixedHeader" } : /* istanbul ignore next */ {}), transform: coerceBooleanAttribute });
|
|
399
399
|
/** Enable sorting feature */
|
|
400
|
-
this.enableSorting = input(this._defaultConfig.enableSorting, ...(ngDevMode ?
|
|
400
|
+
this.enableSorting = input(this._defaultConfig.enableSorting, { ...(ngDevMode ? { debugName: "enableSorting" } : /* istanbul ignore next */ {}), transform: coerceBooleanAttribute });
|
|
401
401
|
/** Enable master-detail rows */
|
|
402
|
-
this.masterDetail = input(this._defaultConfig.masterDetail, ...(ngDevMode ?
|
|
402
|
+
this.masterDetail = input(this._defaultConfig.masterDetail, { ...(ngDevMode ? { debugName: "masterDetail" } : /* istanbul ignore next */ {}), transform: coerceBooleanAttribute });
|
|
403
403
|
/** Name of the detail row renderer template */
|
|
404
|
-
this.detailTemplateName = input(this._defaultConfig.detailTemplateName, ...(ngDevMode ? [{ debugName: "detailTemplateName" }] : []));
|
|
404
|
+
this.detailTemplateName = input(this._defaultConfig.detailTemplateName, ...(ngDevMode ? [{ debugName: "detailTemplateName" }] : /* istanbul ignore next */ []));
|
|
405
405
|
/** If true the detail cell will not span sticky and stickyEnd columns. If false the detail cell will span the table's full width */
|
|
406
|
-
this.detailStickyColumns = input(this._defaultConfig.detailStickyColumns, ...(ngDevMode ?
|
|
406
|
+
this.detailStickyColumns = input(this._defaultConfig.detailStickyColumns, { ...(ngDevMode ? { debugName: "detailStickyColumns" } : /* istanbul ignore next */ {}), transform: coerceBooleanAttribute });
|
|
407
407
|
/** Whether to show the master-detail column label or not. */
|
|
408
|
-
this.showDetailHeader = input(this._defaultConfig.showDetailHeader, ...(ngDevMode ?
|
|
408
|
+
this.showDetailHeader = input(this._defaultConfig.showDetailHeader, { ...(ngDevMode ? { debugName: "showDetailHeader" } : /* istanbul ignore next */ {}), transform: coerceBooleanAttribute });
|
|
409
409
|
/** Predicate function to decide whether a data row has details or not */
|
|
410
|
-
this.hasDetailRow = input(() => false, ...(ngDevMode ? [{ debugName: "hasDetailRow" }] : []));
|
|
410
|
+
this.hasDetailRow = input(() => false, ...(ngDevMode ? [{ debugName: "hasDetailRow" }] : /* istanbul ignore next */ []));
|
|
411
411
|
/** Enable row selection feature */
|
|
412
|
-
this.enableRowSelection = input(this._defaultConfig.enableRowSelection, ...(ngDevMode ?
|
|
412
|
+
this.enableRowSelection = input(this._defaultConfig.enableRowSelection, { ...(ngDevMode ? { debugName: "enableRowSelection" } : /* istanbul ignore next */ {}), transform: coerceBooleanAttribute });
|
|
413
413
|
/** Clear row selection if the table's content changes */
|
|
414
|
-
this.clearSelectionOnChange = input(this._defaultConfig.clearSelectionOnChange, ...(ngDevMode ?
|
|
414
|
+
this.clearSelectionOnChange = input(this._defaultConfig.clearSelectionOnChange, { ...(ngDevMode ? { debugName: "clearSelectionOnChange" } : /* istanbul ignore next */ {}), transform: coerceBooleanAttribute });
|
|
415
415
|
/** Predicate function to decide whether a row can be selected or not */
|
|
416
|
-
this.isRowSelectable = input(() => true, ...(ngDevMode ? [{ debugName: "isRowSelectable" }] : []));
|
|
416
|
+
this.isRowSelectable = input(() => true, ...(ngDevMode ? [{ debugName: "isRowSelectable" }] : /* istanbul ignore next */ []));
|
|
417
417
|
/** Render "no rows to show" overlay below the table instead of as a row */
|
|
418
|
-
this.noRowsToShowOverlayBelow = input(this._defaultConfig.noRowsToShowOverlayBelow, ...(ngDevMode ?
|
|
418
|
+
this.noRowsToShowOverlayBelow = input(this._defaultConfig.noRowsToShowOverlayBelow, { ...(ngDevMode ? { debugName: "noRowsToShowOverlayBelow" } : /* istanbul ignore next */ {}), transform: coerceBooleanAttribute });
|
|
419
419
|
/** Whether to show a border around the table or not. */
|
|
420
|
-
this.withBorder = input(this._defaultConfig.withBorder, ...(ngDevMode ?
|
|
420
|
+
this.withBorder = input(this._defaultConfig.withBorder, { ...(ngDevMode ? { debugName: "withBorder" } : /* istanbul ignore next */ {}), transform: coerceBooleanAttribute });
|
|
421
421
|
/**
|
|
422
422
|
* The table's appearance type. Availabla options:
|
|
423
423
|
* - "line-division": row backgrounds are uniformly colored and divided by thin border lines
|
|
424
424
|
* - "zebra": the backgrounds of even and odd rows are different colors
|
|
425
425
|
* - "plain": row backgrounds are uniformly colored without border lines
|
|
426
426
|
*/
|
|
427
|
-
this.appearance = input(this._defaultConfig.appearance, ...(ngDevMode ? [{ debugName: "appearance" }] : []));
|
|
427
|
+
this.appearance = input(this._defaultConfig.appearance, ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
|
|
428
428
|
/** The size type of the table. Affects paddings, margins, gaps, typography, etc. */
|
|
429
|
-
this.size = input(this._defaultConfig.size, ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
429
|
+
this.size = input(this._defaultConfig.size, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
430
430
|
/** The color variant of the table. Availabla options: "primary", "secondary", "surface" */
|
|
431
|
-
this.variant = input(this._defaultConfig.variant, ...(ngDevMode ? [{ debugName: "variant" }] : []));
|
|
431
|
+
this.variant = input(this._defaultConfig.variant, ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
432
432
|
/** Emits if the column sorting has changed */
|
|
433
433
|
this.sortChange = output();
|
|
434
434
|
/** Emits if the user clicked a cell */
|
|
@@ -448,9 +448,9 @@ class IdsTableComponent extends ComponentBaseWithDefaults {
|
|
|
448
448
|
default:
|
|
449
449
|
return tableVariant;
|
|
450
450
|
}
|
|
451
|
-
}, ...(ngDevMode ? [{ debugName: "embeddedIconButtonVariant" }] : []));
|
|
452
|
-
this.embeddedIconButtonAppearance = signal(IdsIconButtonAppearance.STANDARD, ...(ngDevMode ? [{ debugName: "embeddedIconButtonAppearance" }] : []));
|
|
453
|
-
this.disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
451
|
+
}, ...(ngDevMode ? [{ debugName: "embeddedIconButtonVariant" }] : /* istanbul ignore next */ []));
|
|
452
|
+
this.embeddedIconButtonAppearance = signal(IdsIconButtonAppearance.STANDARD, ...(ngDevMode ? [{ debugName: "embeddedIconButtonAppearance" }] : /* istanbul ignore next */ []));
|
|
453
|
+
this.disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
454
454
|
//#endregion
|
|
455
455
|
/** Signal that holds the current table contents as an array of objects */
|
|
456
456
|
this.rowData = computed(() => {
|
|
@@ -468,18 +468,18 @@ class IdsTableComponent extends ComponentBaseWithDefaults {
|
|
|
468
468
|
catch {
|
|
469
469
|
return [];
|
|
470
470
|
}
|
|
471
|
-
}, ...(ngDevMode ? [{ debugName: "rowData" }] : []));
|
|
471
|
+
}, ...(ngDevMode ? [{ debugName: "rowData" }] : /* istanbul ignore next */ []));
|
|
472
472
|
/** The row selection model for the table */
|
|
473
473
|
this.rowSelection = new SelectionModel(true, [], true);
|
|
474
474
|
this._expandedRows = new Set();
|
|
475
|
-
this._allRowsExpanded = signal(false, ...(ngDevMode ? [{ debugName: "_allRowsExpanded" }] : []));
|
|
476
|
-
this._sortState = signal(null, ...(ngDevMode ? [{ debugName: "_sortState" }] : []));
|
|
475
|
+
this._allRowsExpanded = signal(false, ...(ngDevMode ? [{ debugName: "_allRowsExpanded" }] : /* istanbul ignore next */ []));
|
|
476
|
+
this._sortState = signal(null, ...(ngDevMode ? [{ debugName: "_sortState" }] : /* istanbul ignore next */ []));
|
|
477
477
|
this._hostClasses = computed(() => this._getHostClasses([
|
|
478
478
|
this.appearance(),
|
|
479
479
|
this.size(),
|
|
480
480
|
this.variant(),
|
|
481
481
|
(this.withBorder() ? 'with-border' : null),
|
|
482
|
-
]), ...(ngDevMode ? [{ debugName: "_hostClasses" }] : []));
|
|
482
|
+
]), ...(ngDevMode ? [{ debugName: "_hostClasses" }] : /* istanbul ignore next */ []));
|
|
483
483
|
this._actualColumns = computed(() => {
|
|
484
484
|
const cols = this.columnDefs()
|
|
485
485
|
// Filter non-visible columns
|
|
@@ -509,10 +509,10 @@ class IdsTableComponent extends ComponentBaseWithDefaults {
|
|
|
509
509
|
cols.unshift('$selectBoxes');
|
|
510
510
|
}
|
|
511
511
|
return cols;
|
|
512
|
-
}, ...(ngDevMode ? [{ debugName: "_actualColumns" }] : []));
|
|
512
|
+
}, ...(ngDevMode ? [{ debugName: "_actualColumns" }] : /* istanbul ignore next */ []));
|
|
513
513
|
this._hiddenColumns = computed(() => this.columnDefs()
|
|
514
514
|
.filter((colDef) => (colDef.visible === false))
|
|
515
|
-
.map((colDef) => ({ ...colDef, visible: true })), ...(ngDevMode ? [{ debugName: "_hiddenColumns" }] : []));
|
|
515
|
+
.map((colDef) => ({ ...colDef, visible: true })), ...(ngDevMode ? [{ debugName: "_hiddenColumns" }] : /* istanbul ignore next */ []));
|
|
516
516
|
this._detailRowTemplates = computed(() => {
|
|
517
517
|
if (!this.detailStickyColumns()) {
|
|
518
518
|
return ['$expandedDetail'];
|
|
@@ -524,7 +524,7 @@ class IdsTableComponent extends ComponentBaseWithDefaults {
|
|
|
524
524
|
...this.columnDefs().filter((colDef) => colDef.stickyEnd).map(() => '$emptyEnd'),
|
|
525
525
|
...(this.masterDetail() ? ['$emptyEnd'] : []),
|
|
526
526
|
];
|
|
527
|
-
}, ...(ngDevMode ? [{ debugName: "_detailRowTemplates" }] : []));
|
|
527
|
+
}, ...(ngDevMode ? [{ debugName: "_detailRowTemplates" }] : /* istanbul ignore next */ []));
|
|
528
528
|
this._detailColSpan = computed(() => {
|
|
529
529
|
const colDefs = this.columnDefs();
|
|
530
530
|
let detailColSpan = colDefs.length;
|
|
@@ -532,7 +532,7 @@ class IdsTableComponent extends ComponentBaseWithDefaults {
|
|
|
532
532
|
detailColSpan = colDefs.filter((def) => (!def.sticky && !def.stickyEnd && def.visible !== false)).length;
|
|
533
533
|
}
|
|
534
534
|
return detailColSpan;
|
|
535
|
-
}, ...(ngDevMode ? [{ debugName: "_detailColSpan" }] : []));
|
|
535
|
+
}, ...(ngDevMode ? [{ debugName: "_detailColSpan" }] : /* istanbul ignore next */ []));
|
|
536
536
|
this._cellTemplatesByName = computed(() => {
|
|
537
537
|
const templateMap = new Map();
|
|
538
538
|
for (const cellTemplate of this._viewCellTemplates()) {
|
|
@@ -542,23 +542,23 @@ class IdsTableComponent extends ComponentBaseWithDefaults {
|
|
|
542
542
|
templateMap.set(cellTemplate.templateName(), cellTemplate.templateRef);
|
|
543
543
|
}
|
|
544
544
|
return templateMap;
|
|
545
|
-
}, ...(ngDevMode ? [{ debugName: "_cellTemplatesByName" }] : []));
|
|
546
|
-
this._defaulDetailTemplate = computed(() => this._viewCellTemplates().find((cellTemplate) => cellTemplate.templateName() === this._defaultMasterDetailTemplateName)?.templateRef, ...(ngDevMode ? [{ debugName: "_defaulDetailTemplate" }] : []));
|
|
547
|
-
this._detailTemplate = computed(() => this._cellTemplatesByName().get(this.detailTemplateName()), ...(ngDevMode ? [{ debugName: "_detailTemplate" }] : []));
|
|
548
|
-
this._hasNoRows = computed(() => this.rowData().length === 0, ...(ngDevMode ? [{ debugName: "_hasNoRows" }] : []));
|
|
549
|
-
this._masterDetailEnabled = computed(() => this.masterDetail() && this._cellTemplatesByName().has(this._defaultMasterDetailTemplateName), ...(ngDevMode ? [{ debugName: "_masterDetailEnabled" }] : []));
|
|
545
|
+
}, ...(ngDevMode ? [{ debugName: "_cellTemplatesByName" }] : /* istanbul ignore next */ []));
|
|
546
|
+
this._defaulDetailTemplate = computed(() => this._viewCellTemplates().find((cellTemplate) => cellTemplate.templateName() === this._defaultMasterDetailTemplateName)?.templateRef, ...(ngDevMode ? [{ debugName: "_defaulDetailTemplate" }] : /* istanbul ignore next */ []));
|
|
547
|
+
this._detailTemplate = computed(() => this._cellTemplatesByName().get(this.detailTemplateName()), ...(ngDevMode ? [{ debugName: "_detailTemplate" }] : /* istanbul ignore next */ []));
|
|
548
|
+
this._hasNoRows = computed(() => this.rowData().length === 0, ...(ngDevMode ? [{ debugName: "_hasNoRows" }] : /* istanbul ignore next */ []));
|
|
549
|
+
this._masterDetailEnabled = computed(() => this.masterDetail() && this._cellTemplatesByName().has(this._defaultMasterDetailTemplateName), ...(ngDevMode ? [{ debugName: "_masterDetailEnabled" }] : /* istanbul ignore next */ []));
|
|
550
550
|
this._unselectableRows = computed(() => {
|
|
551
551
|
const rows = this.rowData();
|
|
552
552
|
return new Set(rows.filter((rowData, index) => !this.isRowSelectable()(index, rowData)));
|
|
553
|
-
}, ...(ngDevMode ? [{ debugName: "_unselectableRows" }] : []));
|
|
553
|
+
}, ...(ngDevMode ? [{ debugName: "_unselectableRows" }] : /* istanbul ignore next */ []));
|
|
554
554
|
this._rowSelectorCheckboxes = computed(() => {
|
|
555
555
|
const disabledRows = this._unselectableRows();
|
|
556
556
|
return this._selectorCheckboxes().filter((component) => {
|
|
557
557
|
const value = component.value();
|
|
558
558
|
return value && !disabledRows.has(value);
|
|
559
559
|
});
|
|
560
|
-
}, ...(ngDevMode ? [{ debugName: "_rowSelectorCheckboxes" }] : []));
|
|
561
|
-
this._selectableRowData = computed(() => this._rowSelectorCheckboxes().map((component) => component.value()), ...(ngDevMode ? [{ debugName: "_selectableRowData" }] : []));
|
|
560
|
+
}, ...(ngDevMode ? [{ debugName: "_rowSelectorCheckboxes" }] : /* istanbul ignore next */ []));
|
|
561
|
+
this._selectableRowData = computed(() => this._rowSelectorCheckboxes().map((component) => component.value()), ...(ngDevMode ? [{ debugName: "_selectableRowData" }] : /* istanbul ignore next */ []));
|
|
562
562
|
this._rowSelectionChange = toSignal(this.rowSelection.changed);
|
|
563
563
|
this._isAllSelected = computed(() => {
|
|
564
564
|
const selectionChange = this._rowSelectionChange();
|
|
@@ -570,8 +570,8 @@ class IdsTableComponent extends ComponentBaseWithDefaults {
|
|
|
570
570
|
const numSelected = selectionChange.source.selected.length;
|
|
571
571
|
const activeRowCount = data.filter((row) => !disabledRows.has(row)).length;
|
|
572
572
|
return numSelected === activeRowCount;
|
|
573
|
-
}, ...(ngDevMode ? [{ debugName: "_isAllSelected" }] : []));
|
|
574
|
-
this._isSelectAllDisabled = computed(() => this._unselectableRows().size === this._selectableRowData().length, ...(ngDevMode ? [{ debugName: "_isSelectAllDisabled" }] : []));
|
|
573
|
+
}, ...(ngDevMode ? [{ debugName: "_isAllSelected" }] : /* istanbul ignore next */ []));
|
|
574
|
+
this._isSelectAllDisabled = computed(() => this._unselectableRows().size === this._selectableRowData().length, ...(ngDevMode ? [{ debugName: "_isSelectAllDisabled" }] : /* istanbul ignore next */ []));
|
|
575
575
|
}
|
|
576
576
|
get _hostName() {
|
|
577
577
|
return 'table';
|
|
@@ -646,8 +646,8 @@ class IdsTableComponent extends ComponentBaseWithDefaults {
|
|
|
646
646
|
}
|
|
647
647
|
this.rowSelection.select(...data);
|
|
648
648
|
}
|
|
649
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
650
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: IdsTableComponent, isStandalone: true, selector: "ids-table", inputs: { columnDefs: { classPropertyName: "columnDefs", publicName: "columnDefs", isSignal: true, isRequired: true, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, fixedHeader: { classPropertyName: "fixedHeader", publicName: "fixedHeader", isSignal: true, isRequired: false, transformFunction: null }, enableSorting: { classPropertyName: "enableSorting", publicName: "enableSorting", isSignal: true, isRequired: false, transformFunction: null }, masterDetail: { classPropertyName: "masterDetail", publicName: "masterDetail", isSignal: true, isRequired: false, transformFunction: null }, detailTemplateName: { classPropertyName: "detailTemplateName", publicName: "detailTemplateName", isSignal: true, isRequired: false, transformFunction: null }, detailStickyColumns: { classPropertyName: "detailStickyColumns", publicName: "detailStickyColumns", isSignal: true, isRequired: false, transformFunction: null }, showDetailHeader: { classPropertyName: "showDetailHeader", publicName: "showDetailHeader", isSignal: true, isRequired: false, transformFunction: null }, hasDetailRow: { classPropertyName: "hasDetailRow", publicName: "hasDetailRow", isSignal: true, isRequired: false, transformFunction: null }, enableRowSelection: { classPropertyName: "enableRowSelection", publicName: "enableRowSelection", isSignal: true, isRequired: false, transformFunction: null }, clearSelectionOnChange: { classPropertyName: "clearSelectionOnChange", publicName: "clearSelectionOnChange", isSignal: true, isRequired: false, transformFunction: null }, isRowSelectable: { classPropertyName: "isRowSelectable", publicName: "isRowSelectable", isSignal: true, isRequired: false, transformFunction: null }, noRowsToShowOverlayBelow: { classPropertyName: "noRowsToShowOverlayBelow", publicName: "noRowsToShowOverlayBelow", isSignal: true, isRequired: false, transformFunction: null }, withBorder: { classPropertyName: "withBorder", publicName: "withBorder", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChange: "sortChange", cellClick: "cellClick", rowClick: "rowClick", rowKeydown: "rowKeydown", contentChanged: "contentChanged" }, providers: [{ provide: IDS_ICON_BUTTON_PARENT, useExisting: IdsTableComponent }], queries: [{ propertyName: "_contentCellTemplates", predicate: IdsTableCellTemplateDirective, isSignal: true }, { propertyName: "_sortAscIconTemplate", first: true, predicate: IdsTableSortAscIconDirective, descendants: true, isSignal: true }, { propertyName: "_sortDescIconTemplate", first: true, predicate: IdsTableSortDescIconDirective, descendants: true, isSignal: true }, { propertyName: "_sortNoneIconTemplate", first: true, predicate: IdsTableSortNoneIconDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "_viewCellTemplates", predicate: IdsTableCellTemplateDirective, descendants: true, isSignal: true }, { propertyName: "_rowDataHolders", predicate: (RowInfoHolderDirective), descendants: true, isSignal: true }, { propertyName: "_selectorCheckboxes", predicate: IdsCheckboxComponent, descendants: true, isSignal: true }, { propertyName: "_cellContentRenderers", predicate: (IdsCellContentComponent), descendants: true, isSignal: true }], exportAs: ["idsTable"], usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/prefer-self-closing-tags -->\n\n<!-- Empty table message template -->\n<ng-template #noRowsToShow>\n <div class=\"ids-table__no-rows-to-show\">\n <ng-content select=\"[idsNoRowsToShow]\">No rows to show</ng-content>\n </div>\n</ng-template>\n\n<!-- Default detail cell template (a table showing the non-visible columns) -->\n<ng-template #defaultDetail let-row let-cols=\"cols\" [idsCellTemplate]=\"_defaultMasterDetailTemplateName\">\n <ids-table appearance=\"zebra\" [dataSource]=\"[row]\" [columnDefs]=\"cols\"></ids-table>\n</ng-template>\n\n<ng-template #defaultSortAscIcon>\n <ids-icon [fontIcon]=\"'chevron-up'\"></ids-icon>\n</ng-template>\n\n<ng-template #defaultSortDescIcon>\n <ids-icon [fontIcon]=\"'chevron-down'\"></ids-icon>\n</ng-template>\n\n<ng-template #defaultSortNoneIcon>\n <ids-icon [fontIcon]=\"'adjustments-horizontal'\"></ids-icon>\n</ng-template>\n\n<!-- TODO: Loading spinner -->\n\n<div class=\"ids-table__horizontal-scroll\">\n <table\n cdk-table\n cdkDropListGroup\n multiTemplateDataRows\n [id]=\"id()\"\n [dataSource]=\"dataSource()\"\n (contentChanged)=\"_tableContentChanged()\"\n >\n <caption><ng-content select=\"[idsTableCaption]\"></ng-content></caption>\n\n <!-- Column and row definitions for row selection -->\n <ng-container cdkColumnDef=\"$selectBoxes\" sticky>\n <th\n *cdkHeaderCellDef\n cdk-header-cell\n scope=\"col\"\n role=\"cell\"\n class=\"ids-table__header-cell ids-table__header-cell--select-all-rows\"\n >\n @let isRowSelected = rowSelection.hasValue();\n @let isTableVariantPrimary = variant() === 'primary';\n <ids-checkbox\n [indeterminate]=\"isRowSelected && !_isAllSelected()\"\n [checked]=\"isRowSelected && _isAllSelected()\"\n [disabled]=\"_isSelectAllDisabled()\"\n [aria-label]=\"_intl.headerSelectorAriaLabel\"\n [variant]=\"isTableVariantPrimary && isRowSelected ? 'light' : 'surface'\"\n (change)=\"$event ? _masterToggle() : null\"\n >\n </ids-checkbox>\n </th>\n <td\n *cdkCellDef=\"let row; let idx = index\"\n cdk-cell\n class=\"ids-table__cell ids-table__cell--row-select\"\n >\n <ids-checkbox\n class=\"ids-table__checkbox--row-selector\"\n [disabled]=\"_unselectableRows().has(row)\"\n [checked]=\"rowSelection.isSelected(row)\"\n [value]=\"row\"\n [aria-label]=\"_intl.rowSelectorAriaLabel\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? rowSelection.toggle(row) : null\"\n >\n </ids-checkbox>\n </td>\n </ng-container>\n\n <!-- Column and row definitions for the master-detail toggle feature -->\n <ng-container cdkColumnDef=\"$masterDetail\" stickyEnd>\n <th\n *cdkHeaderCellDef\n cdk-header-cell\n scope=\"col\"\n class=\"ids-table__header-cell ids-table__header-cell--master-detail-toggle\"\n [class.ids-table__header-cell--master-detail-toggle-expand]=\"showDetailHeader()\"\n >\n @if (showDetailHeader()) {\n <span>{{ _intl.detailHeaderLabel }}</span>\n }\n </th>\n <td\n *cdkCellDef=\"let row; let idx = $index\"\n cdk-cell\n class=\"ids-table__cell ids-table__cell--master-detail-toggle\"\n [class.ids-table__cell--master-detail-toggle-expand]=\"showDetailHeader()\"\n >\n @let hasDetail = hasDetailRow()(idx, row);\n @let rowExpanded = _expandedRows.has(row);\n @if (hasDetail) {\n <button\n type=\"button\"\n idsIconButton\n class=\"ids-table__button--master-detail\"\n [attr.aria-expanded]=\"rowExpanded || false\"\n [attr.aria-label]=\"_intl.getDetailExpandButtonAriaLabel(row) || null\"\n (click)=\"_handleMasterDetailClick(row)\"\n >\n <ids-icon aria-hidden=\"true\" alt=\"\" [fontIcon]=\"rowExpanded ? 'chevron-up' : 'chevron-down'\" />\n </button>\n }\n </td>\n </ng-container>\n <!-- Column definition for the detail cells -->\n <ng-container cdkColumnDef=\"$expandedDetail\">\n <td *cdkCellDef=\"let row; let idx = index\" cdk-cell class=\"ids-table__cell ids-table__detail-cell\" [attr.colspan]=\"_detailColSpan()\">\n <div class=\"ids-table__detail-cell--content-wrapper\" [@detailExpand]=\"_expandedRows.has(row) ? 'expanded' : 'collapsed'\">\n @let isDefaultTemplate = _detailTemplate() === _defaulDetailTemplate();\n @let context = isDefaultTemplate ? { $implicit: row, cols: _hiddenColumns() } : { $implicit: row };\n <ng-container *ngTemplateOutlet=\"_detailTemplate() ?? defaultDetail; context: context\"></ng-container>\n </div>\n </td>\n </ng-container>\n\n <!-- Column definitions for sticky empty cells -->\n <ng-container cdkColumnDef=\"$empty\" sticky>\n <td *cdkCellDef=\"let row; let idx = index\" cdk-cell class=\"ids-table__cell\"></td>\n </ng-container>\n <ng-container cdkColumnDef=\"$emptyEnd\" stickyEnd>\n <td *cdkCellDef=\"let row; let idx = index\" cdk-cell class=\"ids-table__cell\"></td>\n </ng-container>\n\n <!-- Column and row definitions for the actual data -->\n @for (col of columnDefs(); track col.id; let colIndex = $index; let isLast = $last ) {\n <ng-container\n [cdkColumnDef]=\"col.id\"\n [sticky]=\"col.sticky && !col.stickyEnd\"\n [stickyEnd]=\"col.stickyEnd && !col.sticky\"\n >\n @let colSortable = col.sortable && enableSorting();\n @let colNumeric = col.cellRenderer === 'numeric';\n @let orderName = col.orderName || col.field || col.id;\n @let sortDirection = colSortable && _sortState()?.sortBy === orderName ? _sortState()?.direction : null;\n @let nextSortDirection = _getNextSortDirectionFor(orderName);\n <th\n *cdkHeaderCellDef\n cdk-header-cell\n class=\"ids-table__header-cell\"\n idsHeaderCellContent\n scope=\"col\"\n [class.ids-table__header-cell--sortable]=\"colSortable\"\n [class.ids-table__header-cell--numeric]=\"colNumeric\"\n [class]=\"col.columnClasses || ''\"\n [colDef]=\"col\"\n [externalCellTemplates]=\"_cellTemplatesByName()\"\n [id]=\"id() + '-header-' + col.id\"\n >\n @if (colSortable) {\n <button\n type=\"button\"\n idsIconButton\n allowCustomContent\n colEnd\n class=\"ids-table__header-cell--sort-button\"\n [attr.aria-label]=\"_intl.getSortButtonAriaLabel(col, nextSortDirection)\"\n (click)=\"_handleSortClick(orderName)\"\n >\n @switch (sortDirection) {\n @case ('asc') {\n <ng-container *ngTemplateOutlet=\"_sortAscIconTemplate()?.templateRef ?? defaultSortAscIcon\"></ng-container> }\n @case ('desc') {\n <ng-container *ngTemplateOutlet=\"_sortDescIconTemplate()?.templateRef ?? defaultSortDescIcon\"></ng-container> }\n @default {\n <ng-container *ngTemplateOutlet=\"_sortNoneIconTemplate()?.templateRef ?? defaultSortNoneIcon\"></ng-container> }\n }\n </button>\n }\n </th>\n\n @if (col.identifier) {\n <th\n *cdkCellDef=\"let row; let idx = index\"\n cdk-cell\n idsCellContent\n class=\"ids-table__cell ids-table__cell--identifier\"\n role=\"gridcell\"\n scope=\"row\"\n [class]=\"col.cellClasses || ''\"\n [colDef]=\"col\"\n [rowData]=\"row\"\n [externalCellTemplates]=\"_cellTemplatesByName()\"\n (click)=\"_handleCellClick($event, row, col)\"\n ></th>\n } @else {\n <td\n *cdkCellDef=\"let row; let idx = index\"\n cdk-cell\n class=\"ids-table__cell\"\n idsCellContent\n [class]=\"col.cellClasses || ''\"\n [colDef]=\"col\"\n [rowData]=\"row\"\n [externalCellTemplates]=\"_cellTemplatesByName()\"\n (click)=\"_handleCellClick($event, row, col)\"\n ></td>\n }\n </ng-container>\n }\n\n <!-- Header row render definition -->\n <tr *cdkHeaderRowDef=\"_actualColumns(); sticky: fixedHeader()\" cdk-header-row class=\"ids-table__header-row\"></tr>\n\n <!-- Row render definition -->\n <tr\n *cdkRowDef=\"let row; columns: _actualColumns(); let idx = dataIndex\"\n cdk-row\n class=\"ids-table__row\"\n [rowInfo]=\"{ rowData: row, index: idx }\"\n [ngClass]=\"(appearance() !== _appearanceZebra || idx % 2 === 0) ? 'ids-table__row--surface' : 'ids-table__row--secondary'\"\n (click)=\"_handleRowClick($event, row)\"\n (keydown)=\"_handleRowKeyDown($event, row)\"\n ></tr>\n\n <!-- Detail row render definition -->\n @if (masterDetail()) {\n <tr\n *cdkRowDef=\"let row; columns: _detailRowTemplates(); when: hasDetailRow()\"\n cdk-row\n class=\"ids-table__detail-row ids-table__row--surface\"\n [class.ids-table__detail-row--expanded]=\"_expandedRows.has(row) || _allRowsExpanded()\"\n ></tr>\n }\n\n <!-- Empty table message (inside the table) -->\n @if (!noRowsToShowOverlayBelow()) {\n <tr *cdkNoDataRow class=\"ids-table__row\">\n <td class=\"ids-table__cell\" [attr.colspan]=\"_actualColumns().length\">\n <ng-container [ngTemplateOutlet]=\"noRowsToShow\"></ng-container>\n </td>\n </tr>\n }\n </table>\n</div>\n<!-- Empty table message (outside the table) -->\n@if (noRowsToShowOverlayBelow() && _hasNoRows()) {\n <ng-container [ngTemplateOutlet]=\"noRowsToShow\"></ng-container>\n}\n", dependencies: [{ kind: "component", type: IdsTableComponent, selector: "ids-table", inputs: ["columnDefs", "dataSource", "fixedHeader", "enableSorting", "masterDetail", "detailTemplateName", "detailStickyColumns", "showDetailHeader", "hasDetailRow", "enableRowSelection", "clearSelectionOnChange", "isRowSelectable", "noRowsToShowOverlayBelow", "withBorder", "appearance", "size", "variant"], outputs: ["sortChange", "cellClick", "rowClick", "rowKeydown", "contentChanged"], exportAs: ["idsTable"] }, { kind: "component", type: IdsCellContentComponent, selector: "th[idsCellContent],td[idsCellContent],th[idsHeaderCellContent],td[idsHeaderCellContent]", inputs: ["externalCellTemplates"] }, { kind: "component", type: IdsCheckboxComponent, selector: "ids-checkbox", inputs: ["name", "required", "readonly", "size", "tabIndex", "value", "variant", "checked", "indeterminate", "aria-label", "aria-labelledby", "aria-describedby", "disabled"], outputs: ["disabledChange", "change", "indeterminateChange"] }, { kind: "component", type: IdsIconComponent, selector: "ids-icon", inputs: ["size", "sizeCollection", "variant", "fontIcon", "svgIcon", "aria-hidden"] }, { kind: "component", type: IdsIconButtonComponent, selector: "button[idsIconButton], a[idsIconButton]", inputs: ["appearance", "size", "variant", "disabled", "allowCustomContent"] }, { kind: "directive", type: IdsTableCellTemplateDirective, selector: "[idsCellTemplate]", inputs: ["idsCellTemplate"] }, { kind: "directive", type: CdkCell, selector: "cdk-cell, td[cdk-cell]" }, { kind: "directive", type: CdkCellDef, selector: "[cdkCellDef]" }, { kind: "directive", type: CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["cdkColumnDef", "sticky", "stickyEnd"] }, { kind: "directive", type: CdkHeaderCell, selector: "cdk-header-cell, th[cdk-header-cell]" }, { kind: "directive", type: CdkHeaderCellDef, selector: "[cdkHeaderCellDef]" }, { kind: "component", type: CdkHeaderRow, selector: "cdk-header-row, tr[cdk-header-row]" }, { kind: "directive", type: CdkHeaderRowDef, selector: "[cdkHeaderRowDef]", inputs: ["cdkHeaderRowDef", "cdkHeaderRowDefSticky"] }, { kind: "directive", type: CdkNoDataRow, selector: "ng-template[cdkNoDataRow]" }, { kind: "component", type: CdkRow, selector: "cdk-row, tr[cdk-row]" }, { kind: "directive", type: CdkRowDef, selector: "[cdkRowDef]", inputs: ["cdkRowDefColumns", "cdkRowDefWhen"] }, { kind: "component", type: CdkTable, selector: "cdk-table, table[cdk-table]", inputs: ["trackBy", "dataSource", "multiTemplateDataRows", "fixedLayout"], outputs: ["contentChanged"], exportAs: ["cdkTable"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RowInfoHolderDirective, selector: "[rowInfo]", inputs: ["rowInfo"] }], animations: [
|
|
649
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: IdsTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
650
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: IdsTableComponent, isStandalone: true, selector: "ids-table", inputs: { columnDefs: { classPropertyName: "columnDefs", publicName: "columnDefs", isSignal: true, isRequired: true, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, fixedHeader: { classPropertyName: "fixedHeader", publicName: "fixedHeader", isSignal: true, isRequired: false, transformFunction: null }, enableSorting: { classPropertyName: "enableSorting", publicName: "enableSorting", isSignal: true, isRequired: false, transformFunction: null }, masterDetail: { classPropertyName: "masterDetail", publicName: "masterDetail", isSignal: true, isRequired: false, transformFunction: null }, detailTemplateName: { classPropertyName: "detailTemplateName", publicName: "detailTemplateName", isSignal: true, isRequired: false, transformFunction: null }, detailStickyColumns: { classPropertyName: "detailStickyColumns", publicName: "detailStickyColumns", isSignal: true, isRequired: false, transformFunction: null }, showDetailHeader: { classPropertyName: "showDetailHeader", publicName: "showDetailHeader", isSignal: true, isRequired: false, transformFunction: null }, hasDetailRow: { classPropertyName: "hasDetailRow", publicName: "hasDetailRow", isSignal: true, isRequired: false, transformFunction: null }, enableRowSelection: { classPropertyName: "enableRowSelection", publicName: "enableRowSelection", isSignal: true, isRequired: false, transformFunction: null }, clearSelectionOnChange: { classPropertyName: "clearSelectionOnChange", publicName: "clearSelectionOnChange", isSignal: true, isRequired: false, transformFunction: null }, isRowSelectable: { classPropertyName: "isRowSelectable", publicName: "isRowSelectable", isSignal: true, isRequired: false, transformFunction: null }, noRowsToShowOverlayBelow: { classPropertyName: "noRowsToShowOverlayBelow", publicName: "noRowsToShowOverlayBelow", isSignal: true, isRequired: false, transformFunction: null }, withBorder: { classPropertyName: "withBorder", publicName: "withBorder", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChange: "sortChange", cellClick: "cellClick", rowClick: "rowClick", rowKeydown: "rowKeydown", contentChanged: "contentChanged" }, providers: [{ provide: IDS_ICON_BUTTON_PARENT, useExisting: IdsTableComponent }], queries: [{ propertyName: "_contentCellTemplates", predicate: IdsTableCellTemplateDirective, isSignal: true }, { propertyName: "_sortAscIconTemplate", first: true, predicate: IdsTableSortAscIconDirective, descendants: true, isSignal: true }, { propertyName: "_sortDescIconTemplate", first: true, predicate: IdsTableSortDescIconDirective, descendants: true, isSignal: true }, { propertyName: "_sortNoneIconTemplate", first: true, predicate: IdsTableSortNoneIconDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "_viewCellTemplates", predicate: IdsTableCellTemplateDirective, descendants: true, isSignal: true }, { propertyName: "_rowDataHolders", predicate: (RowInfoHolderDirective), descendants: true, isSignal: true }, { propertyName: "_selectorCheckboxes", predicate: IdsCheckboxComponent, descendants: true, isSignal: true }, { propertyName: "_cellContentRenderers", predicate: (IdsCellContentComponent), descendants: true, isSignal: true }], exportAs: ["idsTable"], usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/prefer-self-closing-tags -->\n\n<!-- Empty table message template -->\n<ng-template #noRowsToShow>\n <div class=\"ids-table__no-rows-to-show\">\n <ng-content select=\"[idsNoRowsToShow]\">No rows to show</ng-content>\n </div>\n</ng-template>\n\n<!-- Default detail cell template (a table showing the non-visible columns) -->\n<ng-template #defaultDetail let-row let-cols=\"cols\" [idsCellTemplate]=\"_defaultMasterDetailTemplateName\">\n <ids-table appearance=\"zebra\" [dataSource]=\"[row]\" [columnDefs]=\"cols\"></ids-table>\n</ng-template>\n\n<ng-template #defaultSortAscIcon>\n <ids-icon [fontIcon]=\"'chevron-up'\"></ids-icon>\n</ng-template>\n\n<ng-template #defaultSortDescIcon>\n <ids-icon [fontIcon]=\"'chevron-down'\"></ids-icon>\n</ng-template>\n\n<ng-template #defaultSortNoneIcon>\n <ids-icon [fontIcon]=\"'adjustments-horizontal'\"></ids-icon>\n</ng-template>\n\n<!-- TODO: Loading spinner -->\n\n<div class=\"ids-table__horizontal-scroll\">\n <table\n cdk-table\n cdkDropListGroup\n multiTemplateDataRows\n [id]=\"id()\"\n [dataSource]=\"dataSource()\"\n (contentChanged)=\"_tableContentChanged()\"\n >\n <caption><ng-content select=\"[idsTableCaption]\"></ng-content></caption>\n\n <!-- Column and row definitions for row selection -->\n <ng-container cdkColumnDef=\"$selectBoxes\" sticky>\n <th\n *cdkHeaderCellDef\n cdk-header-cell\n scope=\"col\"\n role=\"cell\"\n class=\"ids-table__header-cell ids-table__header-cell--select-all-rows\"\n >\n @let isRowSelected = rowSelection.hasValue();\n @let isTableVariantPrimary = variant() === 'primary';\n <ids-checkbox\n [indeterminate]=\"isRowSelected && !_isAllSelected()\"\n [checked]=\"isRowSelected && _isAllSelected()\"\n [disabled]=\"_isSelectAllDisabled()\"\n [aria-label]=\"_intl.headerSelectorAriaLabel\"\n [variant]=\"isTableVariantPrimary && isRowSelected ? 'light' : 'surface'\"\n (change)=\"$event ? _masterToggle() : null\"\n >\n </ids-checkbox>\n </th>\n <td\n *cdkCellDef=\"let row; let idx = index\"\n cdk-cell\n class=\"ids-table__cell ids-table__cell--row-select\"\n >\n <ids-checkbox\n class=\"ids-table__checkbox--row-selector\"\n [disabled]=\"_unselectableRows().has(row)\"\n [checked]=\"rowSelection.isSelected(row)\"\n [value]=\"row\"\n [aria-label]=\"_intl.rowSelectorAriaLabel\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? rowSelection.toggle(row) : null\"\n >\n </ids-checkbox>\n </td>\n </ng-container>\n\n <!-- Column and row definitions for the master-detail toggle feature -->\n <ng-container cdkColumnDef=\"$masterDetail\" stickyEnd>\n <th\n *cdkHeaderCellDef\n cdk-header-cell\n scope=\"col\"\n class=\"ids-table__header-cell ids-table__header-cell--master-detail-toggle\"\n [class.ids-table__header-cell--master-detail-toggle-expand]=\"showDetailHeader()\"\n >\n @if (showDetailHeader()) {\n <span>{{ _intl.detailHeaderLabel }}</span>\n }\n </th>\n <td\n *cdkCellDef=\"let row; let idx = $index\"\n cdk-cell\n class=\"ids-table__cell ids-table__cell--master-detail-toggle\"\n [class.ids-table__cell--master-detail-toggle-expand]=\"showDetailHeader()\"\n >\n @let hasDetail = hasDetailRow()(idx, row);\n @let rowExpanded = _expandedRows.has(row);\n @if (hasDetail) {\n <button\n type=\"button\"\n idsIconButton\n class=\"ids-table__button--master-detail\"\n [attr.aria-expanded]=\"rowExpanded || false\"\n [attr.aria-label]=\"_intl.getDetailExpandButtonAriaLabel(row) || null\"\n (click)=\"_handleMasterDetailClick(row)\"\n >\n <ids-icon aria-hidden=\"true\" alt=\"\" [fontIcon]=\"rowExpanded ? 'chevron-up' : 'chevron-down'\" />\n </button>\n }\n </td>\n </ng-container>\n <!-- Column definition for the detail cells -->\n <ng-container cdkColumnDef=\"$expandedDetail\">\n <td *cdkCellDef=\"let row; let idx = index\" cdk-cell class=\"ids-table__cell ids-table__detail-cell\" [attr.colspan]=\"_detailColSpan()\">\n <div class=\"ids-table__detail-cell--content-wrapper\" [@detailExpand]=\"_expandedRows.has(row) ? 'expanded' : 'collapsed'\">\n @let isDefaultTemplate = _detailTemplate() === _defaulDetailTemplate();\n @let context = isDefaultTemplate ? { $implicit: row, cols: _hiddenColumns() } : { $implicit: row };\n <ng-container *ngTemplateOutlet=\"_detailTemplate() ?? defaultDetail; context: context\"></ng-container>\n </div>\n </td>\n </ng-container>\n\n <!-- Column definitions for sticky empty cells -->\n <ng-container cdkColumnDef=\"$empty\" sticky>\n <td *cdkCellDef=\"let row; let idx = index\" cdk-cell class=\"ids-table__cell\"></td>\n </ng-container>\n <ng-container cdkColumnDef=\"$emptyEnd\" stickyEnd>\n <td *cdkCellDef=\"let row; let idx = index\" cdk-cell class=\"ids-table__cell\"></td>\n </ng-container>\n\n <!-- Column and row definitions for the actual data -->\n @for (col of columnDefs(); track col.id; let colIndex = $index; let isLast = $last ) {\n <ng-container\n [cdkColumnDef]=\"col.id\"\n [sticky]=\"col.sticky && !col.stickyEnd\"\n [stickyEnd]=\"col.stickyEnd && !col.sticky\"\n >\n @let colSortable = col.sortable && enableSorting();\n @let colNumeric = col.cellRenderer === 'numeric';\n @let orderName = col.orderName || col.field || col.id;\n @let sortDirection = colSortable && _sortState()?.sortBy === orderName ? _sortState()?.direction : null;\n @let nextSortDirection = _getNextSortDirectionFor(orderName);\n <th\n *cdkHeaderCellDef\n cdk-header-cell\n class=\"ids-table__header-cell\"\n idsHeaderCellContent\n scope=\"col\"\n [class.ids-table__header-cell--sortable]=\"colSortable\"\n [class.ids-table__header-cell--numeric]=\"colNumeric\"\n [class]=\"col.columnClasses || ''\"\n [colDef]=\"col\"\n [externalCellTemplates]=\"_cellTemplatesByName()\"\n [id]=\"id() + '-header-' + col.id\"\n >\n @if (colSortable) {\n <button\n type=\"button\"\n idsIconButton\n allowCustomContent\n colEnd\n class=\"ids-table__header-cell--sort-button\"\n [attr.aria-label]=\"_intl.getSortButtonAriaLabel(col, nextSortDirection)\"\n (click)=\"_handleSortClick(orderName)\"\n >\n @switch (sortDirection) {\n @case ('asc') {\n <ng-container *ngTemplateOutlet=\"_sortAscIconTemplate()?.templateRef ?? defaultSortAscIcon\"></ng-container> }\n @case ('desc') {\n <ng-container *ngTemplateOutlet=\"_sortDescIconTemplate()?.templateRef ?? defaultSortDescIcon\"></ng-container> }\n @default {\n <ng-container *ngTemplateOutlet=\"_sortNoneIconTemplate()?.templateRef ?? defaultSortNoneIcon\"></ng-container> }\n }\n </button>\n }\n </th>\n\n @if (col.identifier) {\n <th\n *cdkCellDef=\"let row; let idx = index\"\n cdk-cell\n idsCellContent\n class=\"ids-table__cell ids-table__cell--identifier\"\n role=\"gridcell\"\n scope=\"row\"\n [class]=\"col.cellClasses || ''\"\n [colDef]=\"col\"\n [rowData]=\"row\"\n [externalCellTemplates]=\"_cellTemplatesByName()\"\n (click)=\"_handleCellClick($event, row, col)\"\n ></th>\n } @else {\n <td\n *cdkCellDef=\"let row; let idx = index\"\n cdk-cell\n class=\"ids-table__cell\"\n idsCellContent\n [class]=\"col.cellClasses || ''\"\n [colDef]=\"col\"\n [rowData]=\"row\"\n [externalCellTemplates]=\"_cellTemplatesByName()\"\n (click)=\"_handleCellClick($event, row, col)\"\n ></td>\n }\n </ng-container>\n }\n\n <!-- Header row render definition -->\n <tr *cdkHeaderRowDef=\"_actualColumns(); sticky: fixedHeader()\" cdk-header-row class=\"ids-table__header-row\"></tr>\n\n <!-- Row render definition -->\n <tr\n *cdkRowDef=\"let row; columns: _actualColumns(); let idx = dataIndex\"\n cdk-row\n class=\"ids-table__row\"\n [rowInfo]=\"{ rowData: row, index: idx }\"\n [ngClass]=\"(appearance() !== _appearanceZebra || idx % 2 === 0) ? 'ids-table__row--surface' : 'ids-table__row--secondary'\"\n (click)=\"_handleRowClick($event, row)\"\n (keydown)=\"_handleRowKeyDown($event, row)\"\n ></tr>\n\n <!-- Detail row render definition -->\n @if (masterDetail()) {\n <tr\n *cdkRowDef=\"let row; columns: _detailRowTemplates(); when: hasDetailRow()\"\n cdk-row\n class=\"ids-table__detail-row ids-table__row--surface\"\n [class.ids-table__detail-row--expanded]=\"_expandedRows.has(row) || _allRowsExpanded()\"\n ></tr>\n }\n\n <!-- Empty table message (inside the table) -->\n @if (!noRowsToShowOverlayBelow()) {\n <tr *cdkNoDataRow class=\"ids-table__row\">\n <td class=\"ids-table__cell\" [attr.colspan]=\"_actualColumns().length\">\n <ng-container [ngTemplateOutlet]=\"noRowsToShow\"></ng-container>\n </td>\n </tr>\n }\n </table>\n</div>\n<!-- Empty table message (outside the table) -->\n@if (noRowsToShowOverlayBelow() && _hasNoRows()) {\n <ng-container [ngTemplateOutlet]=\"noRowsToShow\"></ng-container>\n}\n", dependencies: [{ kind: "component", type: IdsTableComponent, selector: "ids-table", inputs: ["columnDefs", "dataSource", "fixedHeader", "enableSorting", "masterDetail", "detailTemplateName", "detailStickyColumns", "showDetailHeader", "hasDetailRow", "enableRowSelection", "clearSelectionOnChange", "isRowSelectable", "noRowsToShowOverlayBelow", "withBorder", "appearance", "size", "variant"], outputs: ["sortChange", "cellClick", "rowClick", "rowKeydown", "contentChanged"], exportAs: ["idsTable"] }, { kind: "component", type: IdsCellContentComponent, selector: "th[idsCellContent],td[idsCellContent],th[idsHeaderCellContent],td[idsHeaderCellContent]", inputs: ["externalCellTemplates"] }, { kind: "component", type: IdsCheckboxComponent, selector: "ids-checkbox", inputs: ["name", "required", "readonly", "size", "tabIndex", "value", "variant", "checked", "indeterminate", "aria-label", "aria-labelledby", "aria-describedby", "disabled"], outputs: ["disabledChange", "change", "indeterminateChange"] }, { kind: "component", type: IdsIconComponent, selector: "ids-icon", inputs: ["size", "sizeCollection", "variant", "fontIcon", "svgIcon", "aria-hidden"] }, { kind: "component", type: IdsIconButtonComponent, selector: "button[idsIconButton], a[idsIconButton]", inputs: ["appearance", "size", "variant", "disabled", "allowCustomContent"] }, { kind: "directive", type: IdsTableCellTemplateDirective, selector: "[idsCellTemplate]", inputs: ["idsCellTemplate"] }, { kind: "directive", type: CdkCell, selector: "cdk-cell, td[cdk-cell]" }, { kind: "directive", type: CdkCellDef, selector: "[cdkCellDef]" }, { kind: "directive", type: CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["cdkColumnDef", "sticky", "stickyEnd"] }, { kind: "directive", type: CdkHeaderCell, selector: "cdk-header-cell, th[cdk-header-cell]" }, { kind: "directive", type: CdkHeaderCellDef, selector: "[cdkHeaderCellDef]" }, { kind: "component", type: CdkHeaderRow, selector: "cdk-header-row, tr[cdk-header-row]" }, { kind: "directive", type: CdkHeaderRowDef, selector: "[cdkHeaderRowDef]", inputs: ["cdkHeaderRowDef", "cdkHeaderRowDefSticky"] }, { kind: "directive", type: CdkNoDataRow, selector: "ng-template[cdkNoDataRow]" }, { kind: "component", type: CdkRow, selector: "cdk-row, tr[cdk-row]" }, { kind: "directive", type: CdkRowDef, selector: "[cdkRowDef]", inputs: ["cdkRowDefColumns", "cdkRowDefWhen"] }, { kind: "component", type: CdkTable, selector: "cdk-table, table[cdk-table]", inputs: ["trackBy", "dataSource", "multiTemplateDataRows", "fixedLayout", "recycleRows"], outputs: ["contentChanged"], exportAs: ["cdkTable"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RowInfoHolderDirective, selector: "[rowInfo]", inputs: ["rowInfo"] }], animations: [
|
|
651
651
|
trigger('detailExpand', [
|
|
652
652
|
state('collapsed', style({ height: '0px', minHeight: '0', visibility: 'hidden' })),
|
|
653
653
|
state('expanded', style({ height: '*', visibility: 'visible' })),
|
|
@@ -655,7 +655,7 @@ class IdsTableComponent extends ComponentBaseWithDefaults {
|
|
|
655
655
|
]),
|
|
656
656
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
657
657
|
}
|
|
658
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
658
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: IdsTableComponent, decorators: [{
|
|
659
659
|
type: Component,
|
|
660
660
|
args: [{ selector: 'ids-table', imports: [
|
|
661
661
|
IdsCellContentComponent,
|
|
@@ -684,7 +684,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
|
|
|
684
684
|
transition('expanded <=> collapsed', animate('200ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
|
|
685
685
|
]),
|
|
686
686
|
], providers: [{ provide: IDS_ICON_BUTTON_PARENT, useExisting: IdsTableComponent }], exportAs: 'idsTable', template: "<!-- eslint-disable @angular-eslint/template/prefer-self-closing-tags -->\n\n<!-- Empty table message template -->\n<ng-template #noRowsToShow>\n <div class=\"ids-table__no-rows-to-show\">\n <ng-content select=\"[idsNoRowsToShow]\">No rows to show</ng-content>\n </div>\n</ng-template>\n\n<!-- Default detail cell template (a table showing the non-visible columns) -->\n<ng-template #defaultDetail let-row let-cols=\"cols\" [idsCellTemplate]=\"_defaultMasterDetailTemplateName\">\n <ids-table appearance=\"zebra\" [dataSource]=\"[row]\" [columnDefs]=\"cols\"></ids-table>\n</ng-template>\n\n<ng-template #defaultSortAscIcon>\n <ids-icon [fontIcon]=\"'chevron-up'\"></ids-icon>\n</ng-template>\n\n<ng-template #defaultSortDescIcon>\n <ids-icon [fontIcon]=\"'chevron-down'\"></ids-icon>\n</ng-template>\n\n<ng-template #defaultSortNoneIcon>\n <ids-icon [fontIcon]=\"'adjustments-horizontal'\"></ids-icon>\n</ng-template>\n\n<!-- TODO: Loading spinner -->\n\n<div class=\"ids-table__horizontal-scroll\">\n <table\n cdk-table\n cdkDropListGroup\n multiTemplateDataRows\n [id]=\"id()\"\n [dataSource]=\"dataSource()\"\n (contentChanged)=\"_tableContentChanged()\"\n >\n <caption><ng-content select=\"[idsTableCaption]\"></ng-content></caption>\n\n <!-- Column and row definitions for row selection -->\n <ng-container cdkColumnDef=\"$selectBoxes\" sticky>\n <th\n *cdkHeaderCellDef\n cdk-header-cell\n scope=\"col\"\n role=\"cell\"\n class=\"ids-table__header-cell ids-table__header-cell--select-all-rows\"\n >\n @let isRowSelected = rowSelection.hasValue();\n @let isTableVariantPrimary = variant() === 'primary';\n <ids-checkbox\n [indeterminate]=\"isRowSelected && !_isAllSelected()\"\n [checked]=\"isRowSelected && _isAllSelected()\"\n [disabled]=\"_isSelectAllDisabled()\"\n [aria-label]=\"_intl.headerSelectorAriaLabel\"\n [variant]=\"isTableVariantPrimary && isRowSelected ? 'light' : 'surface'\"\n (change)=\"$event ? _masterToggle() : null\"\n >\n </ids-checkbox>\n </th>\n <td\n *cdkCellDef=\"let row; let idx = index\"\n cdk-cell\n class=\"ids-table__cell ids-table__cell--row-select\"\n >\n <ids-checkbox\n class=\"ids-table__checkbox--row-selector\"\n [disabled]=\"_unselectableRows().has(row)\"\n [checked]=\"rowSelection.isSelected(row)\"\n [value]=\"row\"\n [aria-label]=\"_intl.rowSelectorAriaLabel\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? rowSelection.toggle(row) : null\"\n >\n </ids-checkbox>\n </td>\n </ng-container>\n\n <!-- Column and row definitions for the master-detail toggle feature -->\n <ng-container cdkColumnDef=\"$masterDetail\" stickyEnd>\n <th\n *cdkHeaderCellDef\n cdk-header-cell\n scope=\"col\"\n class=\"ids-table__header-cell ids-table__header-cell--master-detail-toggle\"\n [class.ids-table__header-cell--master-detail-toggle-expand]=\"showDetailHeader()\"\n >\n @if (showDetailHeader()) {\n <span>{{ _intl.detailHeaderLabel }}</span>\n }\n </th>\n <td\n *cdkCellDef=\"let row; let idx = $index\"\n cdk-cell\n class=\"ids-table__cell ids-table__cell--master-detail-toggle\"\n [class.ids-table__cell--master-detail-toggle-expand]=\"showDetailHeader()\"\n >\n @let hasDetail = hasDetailRow()(idx, row);\n @let rowExpanded = _expandedRows.has(row);\n @if (hasDetail) {\n <button\n type=\"button\"\n idsIconButton\n class=\"ids-table__button--master-detail\"\n [attr.aria-expanded]=\"rowExpanded || false\"\n [attr.aria-label]=\"_intl.getDetailExpandButtonAriaLabel(row) || null\"\n (click)=\"_handleMasterDetailClick(row)\"\n >\n <ids-icon aria-hidden=\"true\" alt=\"\" [fontIcon]=\"rowExpanded ? 'chevron-up' : 'chevron-down'\" />\n </button>\n }\n </td>\n </ng-container>\n <!-- Column definition for the detail cells -->\n <ng-container cdkColumnDef=\"$expandedDetail\">\n <td *cdkCellDef=\"let row; let idx = index\" cdk-cell class=\"ids-table__cell ids-table__detail-cell\" [attr.colspan]=\"_detailColSpan()\">\n <div class=\"ids-table__detail-cell--content-wrapper\" [@detailExpand]=\"_expandedRows.has(row) ? 'expanded' : 'collapsed'\">\n @let isDefaultTemplate = _detailTemplate() === _defaulDetailTemplate();\n @let context = isDefaultTemplate ? { $implicit: row, cols: _hiddenColumns() } : { $implicit: row };\n <ng-container *ngTemplateOutlet=\"_detailTemplate() ?? defaultDetail; context: context\"></ng-container>\n </div>\n </td>\n </ng-container>\n\n <!-- Column definitions for sticky empty cells -->\n <ng-container cdkColumnDef=\"$empty\" sticky>\n <td *cdkCellDef=\"let row; let idx = index\" cdk-cell class=\"ids-table__cell\"></td>\n </ng-container>\n <ng-container cdkColumnDef=\"$emptyEnd\" stickyEnd>\n <td *cdkCellDef=\"let row; let idx = index\" cdk-cell class=\"ids-table__cell\"></td>\n </ng-container>\n\n <!-- Column and row definitions for the actual data -->\n @for (col of columnDefs(); track col.id; let colIndex = $index; let isLast = $last ) {\n <ng-container\n [cdkColumnDef]=\"col.id\"\n [sticky]=\"col.sticky && !col.stickyEnd\"\n [stickyEnd]=\"col.stickyEnd && !col.sticky\"\n >\n @let colSortable = col.sortable && enableSorting();\n @let colNumeric = col.cellRenderer === 'numeric';\n @let orderName = col.orderName || col.field || col.id;\n @let sortDirection = colSortable && _sortState()?.sortBy === orderName ? _sortState()?.direction : null;\n @let nextSortDirection = _getNextSortDirectionFor(orderName);\n <th\n *cdkHeaderCellDef\n cdk-header-cell\n class=\"ids-table__header-cell\"\n idsHeaderCellContent\n scope=\"col\"\n [class.ids-table__header-cell--sortable]=\"colSortable\"\n [class.ids-table__header-cell--numeric]=\"colNumeric\"\n [class]=\"col.columnClasses || ''\"\n [colDef]=\"col\"\n [externalCellTemplates]=\"_cellTemplatesByName()\"\n [id]=\"id() + '-header-' + col.id\"\n >\n @if (colSortable) {\n <button\n type=\"button\"\n idsIconButton\n allowCustomContent\n colEnd\n class=\"ids-table__header-cell--sort-button\"\n [attr.aria-label]=\"_intl.getSortButtonAriaLabel(col, nextSortDirection)\"\n (click)=\"_handleSortClick(orderName)\"\n >\n @switch (sortDirection) {\n @case ('asc') {\n <ng-container *ngTemplateOutlet=\"_sortAscIconTemplate()?.templateRef ?? defaultSortAscIcon\"></ng-container> }\n @case ('desc') {\n <ng-container *ngTemplateOutlet=\"_sortDescIconTemplate()?.templateRef ?? defaultSortDescIcon\"></ng-container> }\n @default {\n <ng-container *ngTemplateOutlet=\"_sortNoneIconTemplate()?.templateRef ?? defaultSortNoneIcon\"></ng-container> }\n }\n </button>\n }\n </th>\n\n @if (col.identifier) {\n <th\n *cdkCellDef=\"let row; let idx = index\"\n cdk-cell\n idsCellContent\n class=\"ids-table__cell ids-table__cell--identifier\"\n role=\"gridcell\"\n scope=\"row\"\n [class]=\"col.cellClasses || ''\"\n [colDef]=\"col\"\n [rowData]=\"row\"\n [externalCellTemplates]=\"_cellTemplatesByName()\"\n (click)=\"_handleCellClick($event, row, col)\"\n ></th>\n } @else {\n <td\n *cdkCellDef=\"let row; let idx = index\"\n cdk-cell\n class=\"ids-table__cell\"\n idsCellContent\n [class]=\"col.cellClasses || ''\"\n [colDef]=\"col\"\n [rowData]=\"row\"\n [externalCellTemplates]=\"_cellTemplatesByName()\"\n (click)=\"_handleCellClick($event, row, col)\"\n ></td>\n }\n </ng-container>\n }\n\n <!-- Header row render definition -->\n <tr *cdkHeaderRowDef=\"_actualColumns(); sticky: fixedHeader()\" cdk-header-row class=\"ids-table__header-row\"></tr>\n\n <!-- Row render definition -->\n <tr\n *cdkRowDef=\"let row; columns: _actualColumns(); let idx = dataIndex\"\n cdk-row\n class=\"ids-table__row\"\n [rowInfo]=\"{ rowData: row, index: idx }\"\n [ngClass]=\"(appearance() !== _appearanceZebra || idx % 2 === 0) ? 'ids-table__row--surface' : 'ids-table__row--secondary'\"\n (click)=\"_handleRowClick($event, row)\"\n (keydown)=\"_handleRowKeyDown($event, row)\"\n ></tr>\n\n <!-- Detail row render definition -->\n @if (masterDetail()) {\n <tr\n *cdkRowDef=\"let row; columns: _detailRowTemplates(); when: hasDetailRow()\"\n cdk-row\n class=\"ids-table__detail-row ids-table__row--surface\"\n [class.ids-table__detail-row--expanded]=\"_expandedRows.has(row) || _allRowsExpanded()\"\n ></tr>\n }\n\n <!-- Empty table message (inside the table) -->\n @if (!noRowsToShowOverlayBelow()) {\n <tr *cdkNoDataRow class=\"ids-table__row\">\n <td class=\"ids-table__cell\" [attr.colspan]=\"_actualColumns().length\">\n <ng-container [ngTemplateOutlet]=\"noRowsToShow\"></ng-container>\n </td>\n </tr>\n }\n </table>\n</div>\n<!-- Empty table message (outside the table) -->\n@if (noRowsToShowOverlayBelow() && _hasNoRows()) {\n <ng-container [ngTemplateOutlet]=\"noRowsToShow\"></ng-container>\n}\n" }]
|
|
687
|
-
}] });
|
|
687
|
+
}], propDecorators: { _viewCellTemplates: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => IdsTableCellTemplateDirective), { isSignal: true }] }], _rowDataHolders: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => RowInfoHolderDirective), { isSignal: true }] }], _selectorCheckboxes: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => IdsCheckboxComponent), { isSignal: true }] }], _cellContentRenderers: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => IdsCellContentComponent), { isSignal: true }] }], _contentCellTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => IdsTableCellTemplateDirective), { isSignal: true }] }], _sortAscIconTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => IdsTableSortAscIconDirective), { isSignal: true }] }], _sortDescIconTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => IdsTableSortDescIconDirective), { isSignal: true }] }], _sortNoneIconTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => IdsTableSortNoneIconDirective), { isSignal: true }] }], columnDefs: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnDefs", required: true }] }], dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: true }] }], fixedHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "fixedHeader", required: false }] }], enableSorting: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableSorting", required: false }] }], masterDetail: [{ type: i0.Input, args: [{ isSignal: true, alias: "masterDetail", required: false }] }], detailTemplateName: [{ type: i0.Input, args: [{ isSignal: true, alias: "detailTemplateName", required: false }] }], detailStickyColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "detailStickyColumns", required: false }] }], showDetailHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDetailHeader", required: false }] }], hasDetailRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasDetailRow", required: false }] }], enableRowSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableRowSelection", required: false }] }], clearSelectionOnChange: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearSelectionOnChange", required: false }] }], isRowSelectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isRowSelectable", required: false }] }], noRowsToShowOverlayBelow: [{ type: i0.Input, args: [{ isSignal: true, alias: "noRowsToShowOverlayBelow", required: false }] }], withBorder: [{ type: i0.Input, args: [{ isSignal: true, alias: "withBorder", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], cellClick: [{ type: i0.Output, args: ["cellClick"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], rowKeydown: [{ type: i0.Output, args: ["rowKeydown"] }], contentChanged: [{ type: i0.Output, args: ["contentChanged"] }] } });
|
|
688
688
|
|
|
689
689
|
/**
|
|
690
690
|
* Generated bundle index. Do not edit.
|