@one-paragon/angular-utilities 2.7.1 → 2.7.3
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.
|
@@ -141,10 +141,10 @@ class HttpRequestStateDirective {
|
|
|
141
141
|
static ngTemplateContextGuard(dir, ctx) {
|
|
142
142
|
return true;
|
|
143
143
|
}
|
|
144
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
145
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.
|
|
144
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: HttpRequestStateDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
145
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: HttpRequestStateDirective, isStandalone: true, selector: "[httpRequestState]", inputs: { stateStore: ["httpRequestState", "stateStore"] }, ngImport: i0 }); }
|
|
146
146
|
}
|
|
147
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
147
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: HttpRequestStateDirective, decorators: [{
|
|
148
148
|
type: Directive,
|
|
149
149
|
args: [{ selector: '[httpRequestState]', }]
|
|
150
150
|
}], ctorParameters: () => [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }], propDecorators: { stateStore: [{
|
|
@@ -174,10 +174,10 @@ class HttpStateDirectiveBase {
|
|
|
174
174
|
parent.hooks.push(this.baseRender);
|
|
175
175
|
this.baseRender(parent.ViewContext.state);
|
|
176
176
|
}
|
|
177
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
178
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.
|
|
177
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: HttpStateDirectiveBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
178
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: HttpStateDirectiveBase, isStandalone: true, ngImport: i0 }); }
|
|
179
179
|
}
|
|
180
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
180
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: HttpStateDirectiveBase, decorators: [{
|
|
181
181
|
type: Directive
|
|
182
182
|
}] });
|
|
183
183
|
|
|
@@ -195,10 +195,10 @@ class HttpErrorStateDirective extends HttpStateDirectiveBase {
|
|
|
195
195
|
ngOnInit() {
|
|
196
196
|
super.ngOnInit();
|
|
197
197
|
}
|
|
198
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
199
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.
|
|
198
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: HttpErrorStateDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
199
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: HttpErrorStateDirective, isStandalone: true, selector: "[httpErrorState]", usesInheritance: true, ngImport: i0 }); }
|
|
200
200
|
}
|
|
201
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
201
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: HttpErrorStateDirective, decorators: [{
|
|
202
202
|
type: Directive,
|
|
203
203
|
args: [{ selector: '[httpErrorState]', }]
|
|
204
204
|
}] });
|
|
@@ -217,10 +217,10 @@ class HttpInProgressStateDirective extends HttpStateDirectiveBase {
|
|
|
217
217
|
ngOnInit() {
|
|
218
218
|
super.ngOnInit();
|
|
219
219
|
}
|
|
220
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
221
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.
|
|
220
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: HttpInProgressStateDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
221
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: HttpInProgressStateDirective, isStandalone: true, selector: "[httpInProgressState]", usesInheritance: true, ngImport: i0 }); }
|
|
222
222
|
}
|
|
223
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
223
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: HttpInProgressStateDirective, decorators: [{
|
|
224
224
|
type: Directive,
|
|
225
225
|
args: [{ selector: '[httpInProgressState]', }]
|
|
226
226
|
}] });
|
|
@@ -239,10 +239,10 @@ class HttpNotStartedStateDirective extends HttpStateDirectiveBase {
|
|
|
239
239
|
ngOnInit() {
|
|
240
240
|
super.ngOnInit();
|
|
241
241
|
}
|
|
242
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
243
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.
|
|
242
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: HttpNotStartedStateDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
243
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: HttpNotStartedStateDirective, isStandalone: true, selector: "[httpNotStartedState]", usesInheritance: true, ngImport: i0 }); }
|
|
244
244
|
}
|
|
245
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
245
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: HttpNotStartedStateDirective, decorators: [{
|
|
246
246
|
type: Directive,
|
|
247
247
|
args: [{ selector: '[httpNotStartedState]', }]
|
|
248
248
|
}] });
|
|
@@ -264,10 +264,10 @@ class HttpSuccessStateDirective extends HttpStateDirectiveBase {
|
|
|
264
264
|
static ngTemplateContextGuard(dir, ctx) {
|
|
265
265
|
return true;
|
|
266
266
|
}
|
|
267
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
268
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.
|
|
267
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: HttpSuccessStateDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
268
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: HttpSuccessStateDirective, isStandalone: true, selector: "[httpSuccessState]", inputs: { httpSuccessStateTypeSafety: "httpSuccessStateTypeSafety" }, usesInheritance: true, ngImport: i0 }); }
|
|
269
269
|
}
|
|
270
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
270
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: HttpSuccessStateDirective, decorators: [{
|
|
271
271
|
type: Directive,
|
|
272
272
|
args: [{ selector: '[httpSuccessState]', }]
|
|
273
273
|
}], propDecorators: { httpSuccessStateTypeSafety: [{
|
|
@@ -336,8 +336,8 @@ function chainRequest(httpState$, request, requestParams) {
|
|
|
336
336
|
}
|
|
337
337
|
|
|
338
338
|
class HttpRequestModule {
|
|
339
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
340
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.
|
|
339
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: HttpRequestModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
340
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: HttpRequestModule, imports: [HttpSuccessStateDirective,
|
|
341
341
|
HttpRequestStateDirective,
|
|
342
342
|
HttpErrorStateDirective,
|
|
343
343
|
HttpInProgressStateDirective,
|
|
@@ -346,9 +346,9 @@ class HttpRequestModule {
|
|
|
346
346
|
HttpErrorStateDirective,
|
|
347
347
|
HttpInProgressStateDirective,
|
|
348
348
|
HttpNotStartedStateDirective] }); }
|
|
349
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.
|
|
349
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: HttpRequestModule }); }
|
|
350
350
|
}
|
|
351
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
351
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: HttpRequestModule, decorators: [{
|
|
352
352
|
type: NgModule,
|
|
353
353
|
args: [{
|
|
354
354
|
imports: [
|
|
@@ -485,10 +485,10 @@ class Subscriber {
|
|
|
485
485
|
subscription.unsubscribe();
|
|
486
486
|
});
|
|
487
487
|
}
|
|
488
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
489
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.
|
|
488
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: Subscriber, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
489
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: Subscriber, isStandalone: true, ngImport: i0 }); }
|
|
490
490
|
}
|
|
491
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
491
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: Subscriber, decorators: [{
|
|
492
492
|
type: Directive
|
|
493
493
|
}] });
|
|
494
494
|
function subscriber(obsOrSubOrInjector, actionOrInjector, injector) {
|
|
@@ -521,7 +521,7 @@ function getDestroyRef(obsOrSubOrInjector, actionOrInjector, injector) {
|
|
|
521
521
|
|
|
522
522
|
class RequestStateStore {
|
|
523
523
|
constructor(req, options, project) {
|
|
524
|
-
this._state = signal({ requestParams: null, response: notStarted }, ...(ngDevMode ?
|
|
524
|
+
this._state = signal({ requestParams: null, response: notStarted }, { ...(ngDevMode ? { debugName: "_state" } : {}) });
|
|
525
525
|
this.state = this._state.asReadonly();
|
|
526
526
|
this.injector = inject(Injector);
|
|
527
527
|
this.destroy$ = new Subject();
|
|
@@ -551,24 +551,24 @@ class RequestStateStore {
|
|
|
551
551
|
}
|
|
552
552
|
return this.requestPipeLine(value);
|
|
553
553
|
};
|
|
554
|
-
this.$selectRequestState = computed(() => this.state().response, ...(ngDevMode ?
|
|
555
|
-
this.$selectStatus = computed(() => this.$selectRequestState()?.status, ...(ngDevMode ?
|
|
556
|
-
this.$isSuccess = computed(() => isSuccessState(this.$selectRequestState()), ...(ngDevMode ?
|
|
557
|
-
this.$isError = computed(() => isErrorState(this.$selectRequestState()), ...(ngDevMode ?
|
|
558
|
-
this.$isInProgress = computed(() => this.$selectStatus() === RequestStatus.inProgress, ...(ngDevMode ?
|
|
559
|
-
this.$isNotStarted = computed(() => this.$selectStatus() === RequestStatus.notStarted, ...(ngDevMode ?
|
|
554
|
+
this.$selectRequestState = computed(() => this.state().response, { ...(ngDevMode ? { debugName: "$selectRequestState" } : {}) });
|
|
555
|
+
this.$selectStatus = computed(() => this.$selectRequestState()?.status, { ...(ngDevMode ? { debugName: "$selectStatus" } : {}) });
|
|
556
|
+
this.$isSuccess = computed(() => isSuccessState(this.$selectRequestState()), { ...(ngDevMode ? { debugName: "$isSuccess" } : {}) });
|
|
557
|
+
this.$isError = computed(() => isErrorState(this.$selectRequestState()), { ...(ngDevMode ? { debugName: "$isError" } : {}) });
|
|
558
|
+
this.$isInProgress = computed(() => this.$selectStatus() === RequestStatus.inProgress, { ...(ngDevMode ? { debugName: "$isInProgress" } : {}) });
|
|
559
|
+
this.$isNotStarted = computed(() => this.$selectStatus() === RequestStatus.notStarted, { ...(ngDevMode ? { debugName: "$isNotStarted" } : {}) });
|
|
560
560
|
this.$selectError = computed(() => {
|
|
561
561
|
const state = this.$selectRequestState();
|
|
562
562
|
if (isErrorState(state))
|
|
563
563
|
return state.error;
|
|
564
|
-
}, ...(ngDevMode ?
|
|
564
|
+
}, { ...(ngDevMode ? { debugName: "$selectError" } : {}) });
|
|
565
565
|
this.$selectResponse = computed(() => {
|
|
566
566
|
const state = this.$selectRequestState();
|
|
567
567
|
if (isSuccessState(state)) {
|
|
568
568
|
return state.body;
|
|
569
569
|
}
|
|
570
570
|
return undefined;
|
|
571
|
-
}, ...(ngDevMode ?
|
|
571
|
+
}, { ...(ngDevMode ? { debugName: "$selectResponse" } : {}) });
|
|
572
572
|
this.errorHandled = false;
|
|
573
573
|
this.#onDefaultErrorHandling = (e) => {
|
|
574
574
|
if (this.defaultErrorHandling)
|
|
@@ -609,7 +609,7 @@ class RequestStateStore {
|
|
|
609
609
|
if (allVals)
|
|
610
610
|
return p.map(({ param, isSignal }) => isSignal ? param() : param);
|
|
611
611
|
return undefined;
|
|
612
|
-
}, ...(ngDevMode ?
|
|
612
|
+
}, { ...(ngDevMode ? { debugName: "paramsArr" } : {}) });
|
|
613
613
|
effect(() => {
|
|
614
614
|
const vals = paramsArr();
|
|
615
615
|
untracked(() => {
|
|
@@ -785,10 +785,10 @@ class RequestStateFactory {
|
|
|
785
785
|
this.requestors.push(requestor);
|
|
786
786
|
return requestor;
|
|
787
787
|
}
|
|
788
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
789
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.
|
|
788
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: RequestStateFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
789
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: RequestStateFactory }); }
|
|
790
790
|
}
|
|
791
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
791
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: RequestStateFactory, decorators: [{
|
|
792
792
|
type: Injectable
|
|
793
793
|
}], ctorParameters: () => [] });
|
|
794
794
|
function createRequestor(req, optionsOrProject, options) {
|
|
@@ -1131,20 +1131,20 @@ class CustomCellDirective {
|
|
|
1131
1131
|
constructor() {
|
|
1132
1132
|
this.templateRef = inject(TemplateRef, { optional: true });
|
|
1133
1133
|
this.columnDef = inject(CdkColumnDef, { optional: true });
|
|
1134
|
-
this.$customCell = input.required(...(ngDevMode ?
|
|
1135
|
-
this.$displayName = input(undefined, ...(ngDevMode ?
|
|
1136
|
-
this.$preSort = input(undefined, ...(ngDevMode ?
|
|
1137
|
-
this.$templateRef = input(this.templateRef || undefined, ...(ngDevMode ?
|
|
1138
|
-
this.$customCellOrder = input(undefined, ...(ngDevMode ?
|
|
1139
|
-
this.$customCellWidth = input(undefined, ...(ngDevMode ?
|
|
1134
|
+
this.$customCell = input.required({ ...(ngDevMode ? { debugName: "$customCell" } : {}), alias: 'customCell' });
|
|
1135
|
+
this.$displayName = input(undefined, { ...(ngDevMode ? { debugName: "$displayName" } : {}), alias: 'customCellDisplayName' });
|
|
1136
|
+
this.$preSort = input(undefined, { ...(ngDevMode ? { debugName: "$preSort" } : {}), alias: 'preSort' });
|
|
1137
|
+
this.$templateRef = input(this.templateRef || undefined, { ...(ngDevMode ? { debugName: "$templateRef" } : {}), alias: 'templateRef' });
|
|
1138
|
+
this.$customCellOrder = input(undefined, { ...(ngDevMode ? { debugName: "$customCellOrder" } : {}), alias: 'customCellOrder' });
|
|
1139
|
+
this.$customCellWidth = input(undefined, { ...(ngDevMode ? { debugName: "$customCellWidth" } : {}), alias: 'customCellWidth' });
|
|
1140
1140
|
/**
|
|
1141
1141
|
* for type safety, this is a reference to the table builder instance.
|
|
1142
1142
|
*/
|
|
1143
|
-
this.$customCellTableRef = input(undefined, ...(ngDevMode ?
|
|
1143
|
+
this.$customCellTableRef = input(undefined, { ...(ngDevMode ? { debugName: "$customCellTableRef" } : {}), alias: 'customCellTableRef' });
|
|
1144
1144
|
/**
|
|
1145
1145
|
* true if column not mapped to a property in the data source. Default is false.
|
|
1146
1146
|
*/
|
|
1147
|
-
this.$customCellNotMapped = input(false, ...(ngDevMode ?
|
|
1147
|
+
this.$customCellNotMapped = input(false, { ...(ngDevMode ? { debugName: "$customCellNotMapped" } : {}), alias: 'customCellNotMapped', transform: coerceBooleanProperty });
|
|
1148
1148
|
this.$metaData = computed(() => {
|
|
1149
1149
|
const c = this.$customCell();
|
|
1150
1150
|
if (!c)
|
|
@@ -1159,8 +1159,8 @@ class CustomCellDirective {
|
|
|
1159
1159
|
customCell: true,
|
|
1160
1160
|
noExport: true,
|
|
1161
1161
|
});
|
|
1162
|
-
}, ...(ngDevMode ?
|
|
1163
|
-
this.$inited = signal(false, ...(ngDevMode ?
|
|
1162
|
+
}, { ...(ngDevMode ? { debugName: "$metaData" } : {}) });
|
|
1163
|
+
this.$inited = signal(false, { ...(ngDevMode ? { debugName: "$inited" } : {}) });
|
|
1164
1164
|
}
|
|
1165
1165
|
ngOnInit() {
|
|
1166
1166
|
this.$inited.set(true);
|
|
@@ -1168,10 +1168,10 @@ class CustomCellDirective {
|
|
|
1168
1168
|
static ngTemplateContextGuard(dir, ctx) {
|
|
1169
1169
|
return true;
|
|
1170
1170
|
}
|
|
1171
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
1172
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.
|
|
1171
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: CustomCellDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1172
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.2", type: CustomCellDirective, isStandalone: true, selector: "[customCell]", inputs: { $customCell: { classPropertyName: "$customCell", publicName: "customCell", isSignal: true, isRequired: true, transformFunction: null }, $displayName: { classPropertyName: "$displayName", publicName: "customCellDisplayName", isSignal: true, isRequired: false, transformFunction: null }, $preSort: { classPropertyName: "$preSort", publicName: "preSort", isSignal: true, isRequired: false, transformFunction: null }, $templateRef: { classPropertyName: "$templateRef", publicName: "templateRef", isSignal: true, isRequired: false, transformFunction: null }, $customCellOrder: { classPropertyName: "$customCellOrder", publicName: "customCellOrder", isSignal: true, isRequired: false, transformFunction: null }, $customCellWidth: { classPropertyName: "$customCellWidth", publicName: "customCellWidth", isSignal: true, isRequired: false, transformFunction: null }, $customCellTableRef: { classPropertyName: "$customCellTableRef", publicName: "customCellTableRef", isSignal: true, isRequired: false, transformFunction: null }, $customCellNotMapped: { classPropertyName: "$customCellNotMapped", publicName: "customCellNotMapped", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
|
|
1173
1173
|
}
|
|
1174
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
1174
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: CustomCellDirective, decorators: [{
|
|
1175
1175
|
type: Directive,
|
|
1176
1176
|
args: [{ selector: '[customCell]' }]
|
|
1177
1177
|
}], propDecorators: { $customCell: [{ type: i0.Input, args: [{ isSignal: true, alias: "customCell", required: true }] }], $displayName: [{ type: i0.Input, args: [{ isSignal: true, alias: "customCellDisplayName", required: false }] }], $preSort: [{ type: i0.Input, args: [{ isSignal: true, alias: "preSort", required: false }] }], $templateRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "templateRef", required: false }] }], $customCellOrder: [{ type: i0.Input, args: [{ isSignal: true, alias: "customCellOrder", required: false }] }], $customCellWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "customCellWidth", required: false }] }], $customCellTableRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "customCellTableRef", required: false }] }], $customCellNotMapped: [{ type: i0.Input, args: [{ isSignal: true, alias: "customCellNotMapped", required: false }] }] } });
|
|
@@ -1199,21 +1199,21 @@ class CustomGroupRowDirective {
|
|
|
1199
1199
|
* If not provided (or null), this custom row will apply to all groupings.
|
|
1200
1200
|
* Can be a single Path<T> or an array of Path<T> values.
|
|
1201
1201
|
*/
|
|
1202
|
-
this.$customGroupRow = input(null, ...(ngDevMode ?
|
|
1202
|
+
this.$customGroupRow = input(null, { ...(ngDevMode ? { debugName: "$customGroupRow" } : {}), alias: 'customGroupRow', transform: (val) => val === '' ? null : val });
|
|
1203
1203
|
/**
|
|
1204
1204
|
* For type safety, this is a reference to the table builder instance.
|
|
1205
1205
|
*/
|
|
1206
|
-
this.$customGroupRowTableRef = input(undefined, ...(ngDevMode ?
|
|
1206
|
+
this.$customGroupRowTableRef = input(undefined, { ...(ngDevMode ? { debugName: "$customGroupRowTableRef" } : {}), alias: 'customGroupRowTableRef' });
|
|
1207
1207
|
/**
|
|
1208
1208
|
* Priority order for this custom group row. Higher numbers have higher priority.
|
|
1209
1209
|
* Useful when multiple custom group rows could apply to the same grouping.
|
|
1210
1210
|
*/
|
|
1211
|
-
this.$priority = input(0, ...(ngDevMode ?
|
|
1212
|
-
this.$inited = signal(false, ...(ngDevMode ?
|
|
1211
|
+
this.$priority = input(0, { ...(ngDevMode ? { debugName: "$priority" } : {}), alias: 'customGroupRowPriority' });
|
|
1212
|
+
this.$inited = signal(false, { ...(ngDevMode ? { debugName: "$inited" } : {}) });
|
|
1213
1213
|
/**
|
|
1214
1214
|
* Gets the grouping key(s) this directive applies to, or null for all groupings
|
|
1215
1215
|
*/
|
|
1216
|
-
this.$groupingKey = computed(() => this.$customGroupRow(), ...(ngDevMode ?
|
|
1216
|
+
this.$groupingKey = computed(() => this.$customGroupRow(), { ...(ngDevMode ? { debugName: "$groupingKey" } : {}) });
|
|
1217
1217
|
/**
|
|
1218
1218
|
* Gets the template reference to use
|
|
1219
1219
|
*/
|
|
@@ -1241,10 +1241,10 @@ class CustomGroupRowDirective {
|
|
|
1241
1241
|
}
|
|
1242
1242
|
return targetKey === groupingKey;
|
|
1243
1243
|
}
|
|
1244
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
1245
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.
|
|
1244
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: CustomGroupRowDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1245
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.2", type: CustomGroupRowDirective, isStandalone: true, selector: "[customGroupRow]", inputs: { $customGroupRow: { classPropertyName: "$customGroupRow", publicName: "customGroupRow", isSignal: true, isRequired: false, transformFunction: null }, $customGroupRowTableRef: { classPropertyName: "$customGroupRowTableRef", publicName: "customGroupRowTableRef", isSignal: true, isRequired: false, transformFunction: null }, $priority: { classPropertyName: "$priority", publicName: "customGroupRowPriority", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
|
|
1246
1246
|
}
|
|
1247
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
1247
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: CustomGroupRowDirective, decorators: [{
|
|
1248
1248
|
type: Directive,
|
|
1249
1249
|
args: [{ selector: '[customGroupRow]' }]
|
|
1250
1250
|
}], propDecorators: { $customGroupRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "customGroupRow", required: false }] }], $customGroupRowTableRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "customGroupRowTableRef", required: false }] }], $priority: [{ type: i0.Input, args: [{ isSignal: true, alias: "customGroupRowPriority", required: false }] }] } });
|
|
@@ -1315,10 +1315,10 @@ class ResizeColumnDirective {
|
|
|
1315
1315
|
const newTableWidth = (mouseDownData.startTableWidth + columnChange);
|
|
1316
1316
|
return ({ newTableWidth, newColumnWidth });
|
|
1317
1317
|
}
|
|
1318
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
1319
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0.
|
|
1318
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: ResizeColumnDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1319
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0.2", type: ResizeColumnDirective, isStandalone: true, selector: "[resizeColumn]", inputs: { resizable: ["resizeColumn", "resizable", booleanAttribute], key: "key" }, ngImport: i0 }); }
|
|
1320
1320
|
}
|
|
1321
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
1321
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: ResizeColumnDirective, decorators: [{
|
|
1322
1322
|
type: Directive,
|
|
1323
1323
|
args: [{
|
|
1324
1324
|
selector: "[resizeColumn]",
|
|
@@ -1332,15 +1332,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
|
|
|
1332
1332
|
|
|
1333
1333
|
class TableWrapperDirective {
|
|
1334
1334
|
constructor() {
|
|
1335
|
-
this.$registrations = signal([], ...(ngDevMode ?
|
|
1335
|
+
this.$registrations = signal([], { ...(ngDevMode ? { debugName: "$registrations" } : {}) });
|
|
1336
1336
|
}
|
|
1337
1337
|
register(filter) {
|
|
1338
1338
|
this.$registrations.update(registrations => [...registrations, filter]);
|
|
1339
1339
|
}
|
|
1340
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
1341
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.
|
|
1340
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: TableWrapperDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1341
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: TableWrapperDirective, isStandalone: true, selector: "[tbWrapper]", ngImport: i0 }); }
|
|
1342
1342
|
}
|
|
1343
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
1343
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: TableWrapperDirective, decorators: [{
|
|
1344
1344
|
type: Directive,
|
|
1345
1345
|
args: [{
|
|
1346
1346
|
selector: '[tbWrapper]',
|
|
@@ -1383,10 +1383,10 @@ class TableCustomFilterDirective {
|
|
|
1383
1383
|
constructor() {
|
|
1384
1384
|
this.savable = false;
|
|
1385
1385
|
}
|
|
1386
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
1387
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.
|
|
1386
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: TableCustomFilterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1387
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: TableCustomFilterDirective, isStandalone: true, selector: "tb-abstract", ngImport: i0 }); }
|
|
1388
1388
|
}
|
|
1389
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
1389
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: TableCustomFilterDirective, decorators: [{
|
|
1390
1390
|
type: Directive,
|
|
1391
1391
|
args: [{
|
|
1392
1392
|
selector: 'tb-abstract'
|
|
@@ -1458,10 +1458,10 @@ class TableFilterDirective {
|
|
|
1458
1458
|
});
|
|
1459
1459
|
}
|
|
1460
1460
|
}
|
|
1461
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
1462
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.
|
|
1461
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: TableFilterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1462
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: TableFilterDirective, isStandalone: true, selector: "[tbFilter]", inputs: { filterType: "filterType", key: "key", fieldType: "fieldType", filterId: "filterId", active: "active", filterValue: "filterValue" }, usesOnChanges: true, ngImport: i0 }); }
|
|
1463
1463
|
}
|
|
1464
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
1464
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: TableFilterDirective, decorators: [{
|
|
1465
1465
|
type: Directive,
|
|
1466
1466
|
args: [{
|
|
1467
1467
|
selector: "[tbFilter]",
|
|
@@ -1501,10 +1501,10 @@ class TableFilterStringContainsDirective extends TableFilterDirective {
|
|
|
1501
1501
|
}
|
|
1502
1502
|
super.ngOnChanges(changes);
|
|
1503
1503
|
}
|
|
1504
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
1505
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.
|
|
1504
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: TableFilterStringContainsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1505
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: TableFilterStringContainsDirective, isStandalone: true, selector: "[tbFilterStringContains]", inputs: { key: ["tbFilterStringContains", "key"], filterValue: "filterValue", filterId: "filterId", active: "active" }, providers: [{ provide: TableFilterDirective, useExisting: TableFilterStringContainsDirective }], usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
|
|
1506
1506
|
}
|
|
1507
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
1507
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: TableFilterStringContainsDirective, decorators: [{
|
|
1508
1508
|
type: Directive,
|
|
1509
1509
|
args: [{
|
|
1510
1510
|
selector: '[tbFilterStringContains]',
|
|
@@ -1560,10 +1560,10 @@ class TableCustomFilterDirectiveBase extends TableCustomFilterDirective {
|
|
|
1560
1560
|
this.ready = true;
|
|
1561
1561
|
this.filter$.next(this.filter);
|
|
1562
1562
|
}
|
|
1563
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
1564
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.
|
|
1563
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: TableCustomFilterDirectiveBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1564
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: TableCustomFilterDirectiveBase, isStandalone: true, selector: "[tbCustomFilter]", inputs: { predicate: ["tbCustomFilter", "predicate"], active: "active" }, usesInheritance: true, ngImport: i0 }); }
|
|
1565
1565
|
}
|
|
1566
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
1566
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: TableCustomFilterDirectiveBase, decorators: [{
|
|
1567
1567
|
type: Directive,
|
|
1568
1568
|
args: [{
|
|
1569
1569
|
selector: "[tbCustomFilter]",
|
|
@@ -1598,10 +1598,10 @@ class TbSelectedFilterDirective extends TableCustomFilterDirectiveBase {
|
|
|
1598
1598
|
this.active = this.isActive();
|
|
1599
1599
|
});
|
|
1600
1600
|
}
|
|
1601
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
1602
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.
|
|
1601
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: TbSelectedFilterDirective, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1602
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: TbSelectedFilterDirective, isStandalone: true, usesInheritance: true, ngImport: i0 }); }
|
|
1603
1603
|
}
|
|
1604
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
1604
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: TbSelectedFilterDirective, decorators: [{
|
|
1605
1605
|
type: Directive
|
|
1606
1606
|
}], ctorParameters: () => [{ type: i1.Observable }, { type: undefined }] });
|
|
1607
1607
|
// Checkbox
|
|
@@ -1616,10 +1616,10 @@ class MatCheckboxTbFilterDirective extends TbSelectedFilterDirective {
|
|
|
1616
1616
|
this.matCheckbox = inject(MatCheckbox);
|
|
1617
1617
|
this.matCheckbox = matCheckbox;
|
|
1618
1618
|
}
|
|
1619
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
1620
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.
|
|
1619
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: MatCheckboxTbFilterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1620
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: MatCheckboxTbFilterDirective, isStandalone: true, selector: "mat-checkbox[tbCustomFilter]", inputs: { predicate: ["tbCustomFilter", "predicate"], filterId: "filterId" }, providers: [{ provide: TableCustomFilterDirective, useExisting: MatCheckboxTbFilterDirective }], usesInheritance: true, ngImport: i0 }); }
|
|
1621
1621
|
}
|
|
1622
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
1622
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: MatCheckboxTbFilterDirective, decorators: [{
|
|
1623
1623
|
type: Directive,
|
|
1624
1624
|
args: [{
|
|
1625
1625
|
selector: 'mat-checkbox[tbCustomFilter]',
|
|
@@ -1642,10 +1642,10 @@ class MatSlideToggleTbFilterDirective extends TbSelectedFilterDirective {
|
|
|
1642
1642
|
ngOnInit() {
|
|
1643
1643
|
super.ngOnInit();
|
|
1644
1644
|
}
|
|
1645
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
1646
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.
|
|
1645
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: MatSlideToggleTbFilterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1646
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: MatSlideToggleTbFilterDirective, isStandalone: true, selector: "mat-slide-toggle[tbCustomFilter]", inputs: { predicate: ["tbCustomFilter", "predicate"], filterId: "filterId" }, providers: [{ provide: TableCustomFilterDirective, useExisting: MatSlideToggleTbFilterDirective }], usesInheritance: true, ngImport: i0 }); }
|
|
1647
1647
|
}
|
|
1648
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
1648
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: MatSlideToggleTbFilterDirective, decorators: [{
|
|
1649
1649
|
type: Directive,
|
|
1650
1650
|
args: [{
|
|
1651
1651
|
selector: 'mat-slide-toggle[tbCustomFilter]',
|
|
@@ -1669,10 +1669,10 @@ class MatRadioButtonTbFilterDirective extends TbSelectedFilterDirective {
|
|
|
1669
1669
|
ngOnInit() {
|
|
1670
1670
|
super.ngOnInit();
|
|
1671
1671
|
}
|
|
1672
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
1673
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.
|
|
1672
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: MatRadioButtonTbFilterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1673
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: MatRadioButtonTbFilterDirective, isStandalone: true, selector: "mat-radio-button[tbCustomFilter]", inputs: { predicate: ["tbCustomFilter", "predicate"] }, providers: [{ provide: TableCustomFilterDirective, useExisting: MatRadioButtonTbFilterDirective }], usesInheritance: true, ngImport: i0 }); }
|
|
1674
1674
|
}
|
|
1675
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
1675
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: MatRadioButtonTbFilterDirective, decorators: [{
|
|
1676
1676
|
type: Directive,
|
|
1677
1677
|
args: [{
|
|
1678
1678
|
selector: 'mat-radio-button[tbCustomFilter]',
|
|
@@ -1703,10 +1703,10 @@ class MatOptionTbFilterDirective extends TbSelectedFilterDirective {
|
|
|
1703
1703
|
ngOnInit() {
|
|
1704
1704
|
super.ngOnInit();
|
|
1705
1705
|
}
|
|
1706
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
1707
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.
|
|
1706
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: MatOptionTbFilterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1707
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: MatOptionTbFilterDirective, isStandalone: true, selector: "mat-option[tbCustomFilter]", inputs: { predicate: ["tbCustomFilter", "predicate"], filterId: "filterId" }, providers: [{ provide: TableCustomFilterDirective, useExisting: MatOptionTbFilterDirective }], usesInheritance: true, ngImport: i0 }); }
|
|
1708
1708
|
}
|
|
1709
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
1709
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: MatOptionTbFilterDirective, decorators: [{
|
|
1710
1710
|
type: Directive,
|
|
1711
1711
|
args: [{
|
|
1712
1712
|
selector: 'mat-option[tbCustomFilter]',
|
|
@@ -1730,10 +1730,10 @@ class MatButtonToggleFilterDirective extends TbSelectedFilterDirective {
|
|
|
1730
1730
|
ngOnInit() {
|
|
1731
1731
|
super.ngOnInit();
|
|
1732
1732
|
}
|
|
1733
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
1734
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.
|
|
1733
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: MatButtonToggleFilterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1734
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: MatButtonToggleFilterDirective, isStandalone: true, selector: "mat-button-toggle[tbCustomFilter]", inputs: { predicate: ["tbCustomFilter", "predicate"], filterId: "filterId" }, providers: [{ provide: TableCustomFilterDirective, useExisting: MatButtonToggleFilterDirective }], usesInheritance: true, ngImport: i0 }); }
|
|
1735
1735
|
}
|
|
1736
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
1736
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: MatButtonToggleFilterDirective, decorators: [{
|
|
1737
1737
|
type: Directive,
|
|
1738
1738
|
args: [{
|
|
1739
1739
|
selector: 'mat-button-toggle[tbCustomFilter]',
|
|
@@ -1748,10 +1748,10 @@ class PhoneNumberPipe {
|
|
|
1748
1748
|
transform(phoneNum) {
|
|
1749
1749
|
return phoneFormatter(phoneNum);
|
|
1750
1750
|
}
|
|
1751
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
1752
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.
|
|
1751
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: PhoneNumberPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
1752
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: PhoneNumberPipe, isStandalone: true, name: "phone" }); }
|
|
1753
1753
|
}
|
|
1754
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
1754
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: PhoneNumberPipe, decorators: [{
|
|
1755
1755
|
type: Pipe,
|
|
1756
1756
|
args: [{ name: 'phone' }]
|
|
1757
1757
|
}] });
|
|
@@ -1773,10 +1773,10 @@ class SpaceCasePipe {
|
|
|
1773
1773
|
return this.spaceCase(value);
|
|
1774
1774
|
};
|
|
1775
1775
|
}
|
|
1776
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
1777
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.
|
|
1776
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: SpaceCasePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
1777
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: SpaceCasePipe, isStandalone: true, name: "spaceCase" }); }
|
|
1778
1778
|
}
|
|
1779
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
1779
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: SpaceCasePipe, decorators: [{
|
|
1780
1780
|
type: Pipe,
|
|
1781
1781
|
args: [{ name: 'spaceCase' }]
|
|
1782
1782
|
}] });
|
|
@@ -1820,10 +1820,10 @@ class PreventEnterDirective {
|
|
|
1820
1820
|
onKeyDown() {
|
|
1821
1821
|
return false;
|
|
1822
1822
|
}
|
|
1823
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
1824
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.
|
|
1823
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: PreventEnterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1824
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: PreventEnterDirective, isStandalone: true, selector: "preventEnter", host: { listeners: { "keydown.enter": "onKeyDown()" } }, ngImport: i0 }); }
|
|
1825
1825
|
}
|
|
1826
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
1826
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: PreventEnterDirective, decorators: [{
|
|
1827
1827
|
type: Directive,
|
|
1828
1828
|
args: [{
|
|
1829
1829
|
selector: 'preventEnter',
|
|
@@ -1840,10 +1840,10 @@ class StopPropagationDirective {
|
|
|
1840
1840
|
onMousedown(event) {
|
|
1841
1841
|
event.stopPropagation();
|
|
1842
1842
|
}
|
|
1843
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
1844
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.
|
|
1843
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: StopPropagationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1844
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: StopPropagationDirective, isStandalone: true, selector: "[stop-propagation]", host: { listeners: { "click": "onClick($event)", "mousedown": "onMousedown($event)" } }, ngImport: i0 }); }
|
|
1845
1845
|
}
|
|
1846
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
1846
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: StopPropagationDirective, decorators: [{
|
|
1847
1847
|
type: Directive,
|
|
1848
1848
|
args: [{
|
|
1849
1849
|
selector: "[stop-propagation]",
|
|
@@ -1868,10 +1868,10 @@ class AutoFocusDirective {
|
|
|
1868
1868
|
});
|
|
1869
1869
|
}
|
|
1870
1870
|
}
|
|
1871
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
1872
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.
|
|
1871
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: AutoFocusDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1872
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: AutoFocusDirective, isStandalone: true, selector: "[autoFocus]", inputs: { autoFocus: "autoFocus" }, ngImport: i0 }); }
|
|
1873
1873
|
}
|
|
1874
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
1874
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: AutoFocusDirective, decorators: [{
|
|
1875
1875
|
type: Directive,
|
|
1876
1876
|
args: [{
|
|
1877
1877
|
selector: '[autoFocus]',
|
|
@@ -1887,10 +1887,10 @@ class ClickSubjectDirective extends Subject {
|
|
|
1887
1887
|
set clickSubject(val) {
|
|
1888
1888
|
this._val = val;
|
|
1889
1889
|
}
|
|
1890
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
1891
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.
|
|
1890
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: ClickSubjectDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1891
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: ClickSubjectDirective, isStandalone: true, selector: "[clickSubject]", inputs: { clickSubject: "clickSubject" }, host: { listeners: { "click": "next(this._val)" } }, exportAs: ["clickSubject"], usesInheritance: true, ngImport: i0 }); }
|
|
1892
1892
|
}
|
|
1893
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
1893
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: ClickSubjectDirective, decorators: [{
|
|
1894
1894
|
type: Directive,
|
|
1895
1895
|
args: [{
|
|
1896
1896
|
selector: '[clickSubject]',
|
|
@@ -1908,10 +1908,10 @@ class ClickEmitterDirective extends Subject {
|
|
|
1908
1908
|
constructor() {
|
|
1909
1909
|
super();
|
|
1910
1910
|
}
|
|
1911
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
1912
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.
|
|
1911
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: ClickEmitterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1912
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: ClickEmitterDirective, isStandalone: true, selector: "[clickEmitter]", host: { listeners: { "click": "next(true)" } }, exportAs: ["clickEmitter"], usesInheritance: true, ngImport: i0 }); }
|
|
1913
1913
|
}
|
|
1914
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
1914
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: ClickEmitterDirective, decorators: [{
|
|
1915
1915
|
type: Directive,
|
|
1916
1916
|
args: [{
|
|
1917
1917
|
selector: '[clickEmitter]',
|
|
@@ -1935,10 +1935,10 @@ class DialogService {
|
|
|
1935
1935
|
closeAllOpDialogs() {
|
|
1936
1936
|
this.allOpenOpDialogs.forEach(ref => ref.close());
|
|
1937
1937
|
}
|
|
1938
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
1939
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.
|
|
1938
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: DialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1939
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: DialogService, providedIn: 'root' }); }
|
|
1940
1940
|
}
|
|
1941
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
1941
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: DialogService, decorators: [{
|
|
1942
1942
|
type: Injectable,
|
|
1943
1943
|
args: [{ providedIn: 'root' }]
|
|
1944
1944
|
}] });
|
|
@@ -1965,10 +1965,10 @@ class DialogWrapper {
|
|
|
1965
1965
|
this.viewContext.$implicit = value;
|
|
1966
1966
|
this.viewContext.opDialog = value;
|
|
1967
1967
|
}
|
|
1968
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
1969
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.
|
|
1968
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: DialogWrapper, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1969
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.2", type: DialogWrapper, isStandalone: true, selector: "dialog-wrapper", ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1970
1970
|
}
|
|
1971
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
1971
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: DialogWrapper, decorators: [{
|
|
1972
1972
|
type: Component,
|
|
1973
1973
|
args: [{
|
|
1974
1974
|
selector: 'dialog-wrapper',
|
|
@@ -1996,7 +1996,7 @@ class DialogDirective {
|
|
|
1996
1996
|
* If no width provided or/and height, provide a default in number (of pixels) of the not provided values.
|
|
1997
1997
|
* If no width/height provided at all, will default to 600x400.
|
|
1998
1998
|
*/
|
|
1999
|
-
this.$positionOnScreen = input(false, ...(ngDevMode ?
|
|
1999
|
+
this.$positionOnScreen = input(false, { ...(ngDevMode ? { debugName: "$positionOnScreen" } : {}), alias: 'opDialogPositionOnScreen' });
|
|
2000
2000
|
this._data = new Subject();
|
|
2001
2001
|
this.setDataAndState = (data) => {
|
|
2002
2002
|
if (data) {
|
|
@@ -2094,10 +2094,10 @@ class DialogDirective {
|
|
|
2094
2094
|
static ngTemplateContextGuard(dir, ctx) {
|
|
2095
2095
|
return true;
|
|
2096
2096
|
}
|
|
2097
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
2098
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.
|
|
2097
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: DialogDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2098
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.2", type: DialogDirective, isStandalone: true, selector: "[opDialog]", inputs: { opDialogAddDialogClass: { classPropertyName: "opDialogAddDialogClass", publicName: "opDialogAddDialogClass", isSignal: false, isRequired: false, transformFunction: null }, opDialogConfig: { classPropertyName: "opDialogConfig", publicName: "opDialogConfig", isSignal: false, isRequired: false, transformFunction: null }, setControl: { classPropertyName: "setControl", publicName: "opDialog", isSignal: false, isRequired: false, transformFunction: null }, nativeElement: { classPropertyName: "nativeElement", publicName: "opDialogOrigin", isSignal: false, isRequired: false, transformFunction: null }, $positionOnScreen: { classPropertyName: "$positionOnScreen", publicName: "opDialogPositionOnScreen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opDialogClosed: "opDialogClosed" }, ngImport: i0 }); }
|
|
2099
2099
|
}
|
|
2100
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
2100
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: DialogDirective, decorators: [{
|
|
2101
2101
|
type: Directive,
|
|
2102
2102
|
args: [{ selector: '[opDialog]', }]
|
|
2103
2103
|
}], propDecorators: { opDialogClosed: [{
|
|
@@ -2118,9 +2118,9 @@ class StylerDirective {
|
|
|
2118
2118
|
constructor() {
|
|
2119
2119
|
this.el = inject(ElementRef);
|
|
2120
2120
|
this.renderer = inject(Renderer2);
|
|
2121
|
-
this.$stylesApplied = signal({}, ...(ngDevMode ?
|
|
2122
|
-
this.$element = input.required(...(ngDevMode ?
|
|
2123
|
-
this.$styler = input.required(...(ngDevMode ?
|
|
2121
|
+
this.$stylesApplied = signal({}, { ...(ngDevMode ? { debugName: "$stylesApplied" } : {}) });
|
|
2122
|
+
this.$element = input.required({ ...(ngDevMode ? { debugName: "$element" } : {}), alias: 'element' });
|
|
2123
|
+
this.$styler = input.required({ ...(ngDevMode ? { debugName: "$styler" } : {}), alias: 'styler' });
|
|
2124
2124
|
this.#stylerEffect = effect(() => {
|
|
2125
2125
|
const styles = this.$styler();
|
|
2126
2126
|
untracked(() => {
|
|
@@ -2144,13 +2144,13 @@ class StylerDirective {
|
|
|
2144
2144
|
});
|
|
2145
2145
|
this.$stylesApplied.set(toApply);
|
|
2146
2146
|
});
|
|
2147
|
-
}, ...(ngDevMode ?
|
|
2147
|
+
}, { ...(ngDevMode ? { debugName: "#stylerEffect" } : {}) });
|
|
2148
2148
|
}
|
|
2149
2149
|
#stylerEffect;
|
|
2150
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
2151
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.
|
|
2150
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: StylerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2151
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.2", type: StylerDirective, isStandalone: true, selector: "[styler]", inputs: { $element: { classPropertyName: "$element", publicName: "element", isSignal: true, isRequired: true, transformFunction: null }, $styler: { classPropertyName: "$styler", publicName: "styler", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
|
|
2152
2152
|
}
|
|
2153
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
2153
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: StylerDirective, decorators: [{
|
|
2154
2154
|
type: Directive,
|
|
2155
2155
|
args: [{ selector: '[styler]' }]
|
|
2156
2156
|
}], propDecorators: { $element: [{ type: i0.Input, args: [{ isSignal: true, alias: "element", required: true }] }], $styler: [{ type: i0.Input, args: [{ isSignal: true, alias: "styler", required: true }] }] } });
|
|
@@ -2194,10 +2194,10 @@ class MatSlideToggleGroupDirective {
|
|
|
2194
2194
|
return newVal;
|
|
2195
2195
|
}, startValue), startWith$1(startValue));
|
|
2196
2196
|
}
|
|
2197
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
2198
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.
|
|
2197
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: MatSlideToggleGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2198
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: MatSlideToggleGroupDirective, isStandalone: true, selector: "[opMatSlideToggleGroup]", inputs: { allowMultiple: "allowMultiple" }, outputs: { valueEmitter: "valueEmitter" }, queries: [{ propertyName: "toggles", predicate: MatSlideToggle }], ngImport: i0 }); }
|
|
2199
2199
|
}
|
|
2200
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
2200
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: MatSlideToggleGroupDirective, decorators: [{
|
|
2201
2201
|
type: Directive,
|
|
2202
2202
|
args: [{ selector: '[opMatSlideToggleGroup]',
|
|
2203
2203
|
}]
|
|
@@ -2224,10 +2224,10 @@ class TrimWhitespaceDirective {
|
|
|
2224
2224
|
}
|
|
2225
2225
|
}
|
|
2226
2226
|
}
|
|
2227
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
2228
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.
|
|
2227
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: TrimWhitespaceDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2228
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: TrimWhitespaceDirective, isStandalone: true, selector: "input[trimWhitespace]", host: { listeners: { "blur": "onBlur()" } }, ngImport: i0 }); }
|
|
2229
2229
|
}
|
|
2230
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
2230
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: TrimWhitespaceDirective, decorators: [{
|
|
2231
2231
|
type: Directive,
|
|
2232
2232
|
args: [{
|
|
2233
2233
|
selector: 'input[trimWhitespace]',
|
|
@@ -2246,10 +2246,10 @@ class FunctionPipe {
|
|
|
2246
2246
|
}
|
|
2247
2247
|
return func(...args);
|
|
2248
2248
|
}
|
|
2249
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
2250
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.
|
|
2249
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: FunctionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
2250
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: FunctionPipe, isStandalone: true, name: "func" }); }
|
|
2251
2251
|
}
|
|
2252
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
2252
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: FunctionPipe, decorators: [{
|
|
2253
2253
|
type: Pipe,
|
|
2254
2254
|
args: [{
|
|
2255
2255
|
name: 'func',
|
|
@@ -2260,8 +2260,8 @@ class ConditionalClassesDirective {
|
|
|
2260
2260
|
constructor() {
|
|
2261
2261
|
this.el = inject(ElementRef);
|
|
2262
2262
|
this.renderer = inject(Renderer2);
|
|
2263
|
-
this.$element = input.required(...(ngDevMode ?
|
|
2264
|
-
this.$classes = input(undefined, ...(ngDevMode ?
|
|
2263
|
+
this.$element = input.required({ ...(ngDevMode ? { debugName: "$element" } : {}), alias: 'element' });
|
|
2264
|
+
this.$classes = input(undefined, { ...(ngDevMode ? { debugName: "$classes" } : {}), alias: 'conditionalClasses' });
|
|
2265
2265
|
this.classesApplied = [];
|
|
2266
2266
|
this.#onClasses = effect(() => {
|
|
2267
2267
|
const classes = this.$classes();
|
|
@@ -2278,13 +2278,13 @@ class ConditionalClassesDirective {
|
|
|
2278
2278
|
classesNotYetApplied.forEach(c => this.renderer.addClass(this.el.nativeElement, c));
|
|
2279
2279
|
this.classesApplied = toApply;
|
|
2280
2280
|
});
|
|
2281
|
-
}, ...(ngDevMode ?
|
|
2281
|
+
}, { ...(ngDevMode ? { debugName: "#onClasses" } : {}) });
|
|
2282
2282
|
}
|
|
2283
2283
|
#onClasses;
|
|
2284
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
2285
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.
|
|
2284
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: ConditionalClassesDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2285
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.2", type: ConditionalClassesDirective, isStandalone: true, selector: "[conditionalClasses]", inputs: { $element: { classPropertyName: "$element", publicName: "element", isSignal: true, isRequired: true, transformFunction: null }, $classes: { classPropertyName: "$classes", publicName: "conditionalClasses", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
|
|
2286
2286
|
}
|
|
2287
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
2287
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: ConditionalClassesDirective, decorators: [{
|
|
2288
2288
|
type: Directive,
|
|
2289
2289
|
args: [{
|
|
2290
2290
|
selector: '[conditionalClasses]',
|
|
@@ -2292,8 +2292,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
|
|
|
2292
2292
|
}], propDecorators: { $element: [{ type: i0.Input, args: [{ isSignal: true, alias: "element", required: true }] }], $classes: [{ type: i0.Input, args: [{ isSignal: true, alias: "conditionalClasses", required: false }] }] } });
|
|
2293
2293
|
|
|
2294
2294
|
class UtilitiesModule {
|
|
2295
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
2296
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.
|
|
2295
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: UtilitiesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
2296
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: UtilitiesModule, imports: [SpaceCasePipe,
|
|
2297
2297
|
PhoneNumberPipe,
|
|
2298
2298
|
FunctionPipe,
|
|
2299
2299
|
StopPropagationDirective,
|
|
@@ -2318,11 +2318,11 @@ class UtilitiesModule {
|
|
|
2318
2318
|
DialogDirective,
|
|
2319
2319
|
MatSlideToggleGroupDirective,
|
|
2320
2320
|
ConditionalClassesDirective] }); }
|
|
2321
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.
|
|
2321
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: UtilitiesModule, providers: [
|
|
2322
2322
|
DialogService
|
|
2323
2323
|
] }); }
|
|
2324
2324
|
}
|
|
2325
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
2325
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: UtilitiesModule, decorators: [{
|
|
2326
2326
|
type: NgModule,
|
|
2327
2327
|
args: [{
|
|
2328
2328
|
exports: [
|
|
@@ -2964,7 +2964,7 @@ class TableStore extends ComponentStore {
|
|
|
2964
2964
|
this.$savableState = computed(() => {
|
|
2965
2965
|
const state = this.state();
|
|
2966
2966
|
return mapSaveableState(state);
|
|
2967
|
-
}, ...(ngDevMode ?
|
|
2967
|
+
}, { ...(ngDevMode ? { debugName: "$savableState" } : {}) });
|
|
2968
2968
|
//#region meta order and hidden
|
|
2969
2969
|
this.showColumn = this.updater((state, key) => ({
|
|
2970
2970
|
...state,
|
|
@@ -3060,7 +3060,7 @@ class TableStore extends ComponentStore {
|
|
|
3060
3060
|
};
|
|
3061
3061
|
};
|
|
3062
3062
|
this.$filters = this.selectSignal(state => state.filters);
|
|
3063
|
-
this.$filtersArray = computed(() => Object.values(this.state().filters) || [], ...(ngDevMode ?
|
|
3063
|
+
this.$filtersArray = computed(() => Object.values(this.state().filters) || [], { ...(ngDevMode ? { debugName: "$filtersArray" } : {}) });
|
|
3064
3064
|
this.filters$ = this.select(state => state.filters);
|
|
3065
3065
|
this.$getFilter = (filterId) => {
|
|
3066
3066
|
return this.selectSignal(this.$filters, filters => filters[filterId]);
|
|
@@ -3083,7 +3083,7 @@ class TableStore extends ComponentStore {
|
|
|
3083
3083
|
sorted: sortArray,
|
|
3084
3084
|
};
|
|
3085
3085
|
});
|
|
3086
|
-
this.$preSort = computed(() => createPreSort(this.$metaData()), ...(ngDevMode ?
|
|
3086
|
+
this.$preSort = computed(() => createPreSort(this.$metaData()), { ...(ngDevMode ? { debugName: "$preSort" } : {}) });
|
|
3087
3087
|
this._$selectSorted = this.selectSignal(state => state.sorted, {
|
|
3088
3088
|
equal: sortsAreSame
|
|
3089
3089
|
});
|
|
@@ -3095,7 +3095,7 @@ class TableStore extends ComponentStore {
|
|
|
3095
3095
|
const sortBy = sortLogic?.sortBy === 'use map' ? meta.map : sortLogic?.sortBy;
|
|
3096
3096
|
return ({ ...s, ...sortLogic, sortBy });
|
|
3097
3097
|
});
|
|
3098
|
-
}, ...(ngDevMode ?
|
|
3098
|
+
}, { ...(ngDevMode ? { debugName: "$selectSorted" } : {}) });
|
|
3099
3099
|
this.selectSorted$ = this.select(state => state.sorted).pipe(distinctUntilChanged(sortsAreSame));
|
|
3100
3100
|
this.$getSorts = this.selectSignal(() => this.$initializationState() !== InitializationState.Ready ? [] : this.$selectSorted());
|
|
3101
3101
|
this.sort$ = toObservable(this.$getSorts);
|
|
@@ -3239,6 +3239,17 @@ class TableStore extends ComponentStore {
|
|
|
3239
3239
|
this.$pageSize = this.selectSignal(s => s.userDefined?.pageSize || s.pageSize);
|
|
3240
3240
|
//#endregion page paginator and show all
|
|
3241
3241
|
//#region table settings and props
|
|
3242
|
+
//#region footer
|
|
3243
|
+
this.addFooter = this.updater((state, key) => {
|
|
3244
|
+
const meta = this.$metaData()[key];
|
|
3245
|
+
if (!meta)
|
|
3246
|
+
return state;
|
|
3247
|
+
if (meta.fieldType === FieldType.Currency || meta.fieldType === FieldType.Number) {
|
|
3248
|
+
meta.additional = { ...meta.additional ?? {}, footer: { type: 'sum' } };
|
|
3249
|
+
}
|
|
3250
|
+
return { ...state, metaData: { ...state.metaData, [key]: { ...meta } } };
|
|
3251
|
+
});
|
|
3252
|
+
//#end region footer
|
|
3242
3253
|
this.$tableSettings = this.selectSignal(state => {
|
|
3243
3254
|
const ts = { ...state.persistedTableSettings, ...state.notPersistedTableSettings };
|
|
3244
3255
|
return ts;
|
|
@@ -3380,10 +3391,10 @@ class TableStore extends ComponentStore {
|
|
|
3380
3391
|
};
|
|
3381
3392
|
}
|
|
3382
3393
|
#$groupBy;
|
|
3383
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
3384
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.
|
|
3394
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: TableStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
3395
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: TableStore }); }
|
|
3385
3396
|
}
|
|
3386
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
3397
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: TableStore, decorators: [{
|
|
3387
3398
|
type: Injectable
|
|
3388
3399
|
}], ctorParameters: () => [] });
|
|
3389
3400
|
const resetable = [
|
|
@@ -3415,7 +3426,7 @@ class MultiSortDirective extends MatSort {
|
|
|
3415
3426
|
untracked(() => {
|
|
3416
3427
|
this.state.setSort({ key: sortChange.active, direction: sortChange.direction });
|
|
3417
3428
|
});
|
|
3418
|
-
}, ...(ngDevMode ?
|
|
3429
|
+
}, { ...(ngDevMode ? { debugName: "#onSortChange" } : {}) });
|
|
3419
3430
|
this.#onStateSortUpdate = effect(() => {
|
|
3420
3431
|
const rules = this.state.$getSorts();
|
|
3421
3432
|
if (!rules)
|
|
@@ -3430,14 +3441,14 @@ class MultiSortDirective extends MatSort {
|
|
|
3430
3441
|
this.sortChange.emit(topRule);
|
|
3431
3442
|
}
|
|
3432
3443
|
});
|
|
3433
|
-
}, ...(ngDevMode ?
|
|
3444
|
+
}, { ...(ngDevMode ? { debugName: "#onStateSortUpdate" } : {}) });
|
|
3434
3445
|
}
|
|
3435
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
3436
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.
|
|
3446
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: MultiSortDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3447
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.2", type: MultiSortDirective, isStandalone: true, selector: "[multiSort]", inputs: { disabled: ["matSortDisabled", "disabled"] }, providers: [
|
|
3437
3448
|
{ provide: MatSort, useExisting: MultiSortDirective }
|
|
3438
3449
|
], exportAs: ["multiSort"], usesInheritance: true, ngImport: i0 }); }
|
|
3439
3450
|
}
|
|
3440
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
3451
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: MultiSortDirective, decorators: [{
|
|
3441
3452
|
type: Directive,
|
|
3442
3453
|
args: [{
|
|
3443
3454
|
selector: '[multiSort]',
|
|
@@ -3464,7 +3475,7 @@ class InFilterComponent {
|
|
|
3464
3475
|
constructor() {
|
|
3465
3476
|
this.ref = inject(ChangeDetectorRef);
|
|
3466
3477
|
this.FieldType = FieldType;
|
|
3467
|
-
this.$type = input.required(...(ngDevMode ?
|
|
3478
|
+
this.$type = input.required({ ...(ngDevMode ? { debugName: "$type" } : {}), alias: 'type' });
|
|
3468
3479
|
this.value = [undefined];
|
|
3469
3480
|
this.onChange = (_) => { };
|
|
3470
3481
|
this.onTouched = () => { };
|
|
@@ -3499,14 +3510,14 @@ class InFilterComponent {
|
|
|
3499
3510
|
this.ref.markForCheck();
|
|
3500
3511
|
this.onChange(this.value);
|
|
3501
3512
|
}
|
|
3502
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
3503
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
3513
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: InFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3514
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: InFilterComponent, isStandalone: true, selector: "lib-in-filter", inputs: { $type: { classPropertyName: "$type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null } }, providers: [{
|
|
3504
3515
|
provide: NG_VALUE_ACCESSOR,
|
|
3505
3516
|
useExisting: InFilterComponent,
|
|
3506
3517
|
multi: true
|
|
3507
3518
|
}], ngImport: i0, template: "<div class=inline>\r\n @for (val of value; track $index)\r\n {\r\n <div>\r\n @if($type() === FieldType.Number || $type() === FieldType.Currency)\r\n {\r\n <input type=\"number\" [ngModel]=\"val\"\r\n [readonly]=\"$index + 1 < value.length\" [ngModelOptions]=\"{standalone:true}\"\r\n [autoFocus]=\"$index === value.length - 1\" (ngModelChange)=\"onValueChange($index, $event)\"/>\r\n }\r\n @else if($type() === FieldType.Date)\r\n {\r\n <input matInput name=\"filterValue\" [ngModel]=\"val\" [matDatepicker]=\"cal\"\r\n [readonly]=\"$index + 1 < value.length\" [ngModelOptions]=\"{standalone:true}\"\r\n [autoFocus]=\"$index === value.length - 1\" (dateChange)=\"onValueChange($index, $event.value)\"/>\r\n <mat-datepicker-toggle class=\"small-button date-toggle\" matSuffix preventEnter [for]=\"cal\" />\r\n <mat-datepicker #cal />\r\n }\r\n @else if($type() === FieldType.DateTime)\r\n {\r\n <input type=\"datetime-local\" preventEnter [ngModel]=\"val\"\r\n [readonly]=\"$index + 1 < value.length\" [ngModelOptions]=\"{standalone:true}\"\r\n [autoFocus]=\"$index === value.length - 1\" (ngModelChange)=\"onValueChange($index, $event)\"/>\r\n }\r\n @else\r\n {\r\n <input type=\"string\"\r\n [ngModel]=\"val\" [readonly]=\"$index + 1 < value.length\" [ngModelOptions]=\"{standalone:true}\"\r\n [autoFocus]=\"$index === value.length - 1\" (ngModelChange)=\"onValueChange($index ,$event)\" />\r\n }\r\n </div>\r\n <button [disabled]=\"value.length <= 1\" (click)=\"removeInput($index)\">-</button>\r\n @if ($index === value.length - 1)\r\n {\r\n <button [disabled]=\"val == undefined || val === ''\" (click)=\"addInput()\">+</button>\r\n }\r\n }\r\n</div>\r\n", styles: [".inline{display:inline-block}.small-button{height:18px;width:18px;font-size:18px;padding:0;margin:0}.small-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}button{cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: AutoFocusDirective, selector: "[autoFocus]", inputs: ["autoFocus"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i2$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i2$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3508
3519
|
}
|
|
3509
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
3520
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: InFilterComponent, decorators: [{
|
|
3510
3521
|
type: Component,
|
|
3511
3522
|
args: [{ selector: 'lib-in-filter', changeDetection: ChangeDetectionStrategy.OnPush, providers: [{
|
|
3512
3523
|
provide: NG_VALUE_ACCESSOR,
|
|
@@ -3521,8 +3532,8 @@ class InListFilterComponent {
|
|
|
3521
3532
|
constructor() {
|
|
3522
3533
|
this.ref = inject(ChangeDetectorRef);
|
|
3523
3534
|
this.tableState = inject(TableStore);
|
|
3524
|
-
this.$values = input([], ...(ngDevMode ?
|
|
3525
|
-
this.#e = effect(() => this.writeValue(this.$values()), ...(ngDevMode ?
|
|
3535
|
+
this.$values = input([], { ...(ngDevMode ? { debugName: "$values" } : {}), alias: 'values' });
|
|
3536
|
+
this.#e = effect(() => this.writeValue(this.$values()), { ...(ngDevMode ? { debugName: "#e" } : {}) });
|
|
3526
3537
|
this.value = [];
|
|
3527
3538
|
this.FieldType = FieldType;
|
|
3528
3539
|
this.includes = (value, values) => {
|
|
@@ -3530,20 +3541,20 @@ class InListFilterComponent {
|
|
|
3530
3541
|
};
|
|
3531
3542
|
this.onChange = (_) => { };
|
|
3532
3543
|
this.onTouched = () => { };
|
|
3533
|
-
this.$key = input.required(...(ngDevMode ?
|
|
3534
|
-
this.$selectedKeys = signal([], ...(ngDevMode ?
|
|
3535
|
-
this.$metaData = computed(() => this.tableState.$getMetaData(this.$key())(), ...(ngDevMode ?
|
|
3544
|
+
this.$key = input.required({ ...(ngDevMode ? { debugName: "$key" } : {}), alias: 'key' });
|
|
3545
|
+
this.$selectedKeys = signal([], { ...(ngDevMode ? { debugName: "$selectedKeys" } : {}) });
|
|
3546
|
+
this.$metaData = computed(() => this.tableState.$getMetaData(this.$key())(), { ...(ngDevMode ? { debugName: "$metaData" } : {}) });
|
|
3536
3547
|
this.$allValues = computed(() => {
|
|
3537
3548
|
const filterable = this.$metaData()?.additional?.filterOptions?.filterableValues;
|
|
3538
3549
|
return filterable === 'all values' || filterable?.allValues === true;
|
|
3539
|
-
}, ...(ngDevMode ?
|
|
3550
|
+
}, { ...(ngDevMode ? { debugName: "$allValues" } : {}) });
|
|
3540
3551
|
this.$specialBlank = computed(() => {
|
|
3541
3552
|
const specialBlank = this.tableState.selectSignal(s => s.allFilters)()[this.$metaData().key]?.find(k => isBlankValueFilter(k));
|
|
3542
3553
|
if (!specialBlank)
|
|
3543
3554
|
return;
|
|
3544
3555
|
return { key: specialBlank, value: 'BLANK' };
|
|
3545
|
-
}, ...(ngDevMode ?
|
|
3546
|
-
this.$specialBlankSelected = computed(() => this.$selectedKeys().some(k => isBlankValueFilter(k.value)), ...(ngDevMode ?
|
|
3556
|
+
}, { ...(ngDevMode ? { debugName: "$specialBlank" } : {}) });
|
|
3557
|
+
this.$specialBlankSelected = computed(() => this.$selectedKeys().some(k => isBlankValueFilter(k.value)), { ...(ngDevMode ? { debugName: "$specialBlankSelected" } : {}) });
|
|
3547
3558
|
this.$keyValues = computed(() => {
|
|
3548
3559
|
const metaData = this.$metaData();
|
|
3549
3560
|
if (this.$allValues()) {
|
|
@@ -3556,7 +3567,7 @@ class InListFilterComponent {
|
|
|
3556
3567
|
return Object.entries(metaData.additional.enumMap).map(([key, value]) => ({ key: value, value: +key }));
|
|
3557
3568
|
}
|
|
3558
3569
|
return [];
|
|
3559
|
-
}, ...(ngDevMode ?
|
|
3570
|
+
}, { ...(ngDevMode ? { debugName: "$keyValues" } : {}) });
|
|
3560
3571
|
}
|
|
3561
3572
|
#e;
|
|
3562
3573
|
writeValue(obj) {
|
|
@@ -3589,8 +3600,8 @@ class InListFilterComponent {
|
|
|
3589
3600
|
}
|
|
3590
3601
|
return val.key;
|
|
3591
3602
|
}
|
|
3592
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
3593
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
3603
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: InListFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3604
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: InListFilterComponent, isStandalone: true, selector: "tb-in-list-filter", inputs: { $values: { classPropertyName: "$values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, $key: { classPropertyName: "$key", publicName: "key", isSignal: true, isRequired: true, transformFunction: null } }, providers: [{
|
|
3594
3605
|
provide: NG_VALUE_ACCESSOR,
|
|
3595
3606
|
useExisting: InListFilterComponent,
|
|
3596
3607
|
multi: true
|
|
@@ -3663,7 +3674,7 @@ class InListFilterComponent {
|
|
|
3663
3674
|
}
|
|
3664
3675
|
`, isInline: true, styles: [":host{display:block;max-height:max(50vh,400px);overflow-y:auto}\n"], dependencies: [{ kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i1$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }, { kind: "pipe", type: FunctionPipe, name: "func" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3665
3676
|
}
|
|
3666
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
3677
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: InListFilterComponent, decorators: [{
|
|
3667
3678
|
type: Component,
|
|
3668
3679
|
args: [{ selector: 'tb-in-list-filter', template: `
|
|
3669
3680
|
@if($specialBlank(); as specialBlank)
|
|
@@ -3745,19 +3756,19 @@ class DateFilterComponent {
|
|
|
3745
3756
|
constructor() {
|
|
3746
3757
|
this.FilterType = FilterType;
|
|
3747
3758
|
this.FieldType = FieldType;
|
|
3748
|
-
this.$info = input.required(...(ngDevMode ?
|
|
3749
|
-
this.$currentFilterType = input.required(...(ngDevMode ?
|
|
3759
|
+
this.$info = input.required({ ...(ngDevMode ? { debugName: "$info" } : {}), alias: 'info' });
|
|
3760
|
+
this.$currentFilterType = input.required({ ...(ngDevMode ? { debugName: "$currentFilterType" } : {}), alias: 'currentFilterType' });
|
|
3750
3761
|
this.state = inject(TableStore);
|
|
3751
|
-
this.$metaData = computed(() => this.state.$getMetaData(this.$info()?.key)(), ...(ngDevMode ?
|
|
3762
|
+
this.$metaData = computed(() => this.state.$getMetaData(this.$info()?.key)(), { ...(ngDevMode ? { debugName: "$metaData" } : {}) });
|
|
3752
3763
|
this.$allValuesInMeta = computed(() => {
|
|
3753
3764
|
const filterable = this.$metaData()?.additional?.filterOptions?.filterableValues;
|
|
3754
3765
|
return filterable === 'all values' || filterable?.allValues === true;
|
|
3755
|
-
}, ...(ngDevMode ?
|
|
3766
|
+
}, { ...(ngDevMode ? { debugName: "$allValuesInMeta" } : {}) });
|
|
3756
3767
|
}
|
|
3757
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
3758
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
3768
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: DateFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3769
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: DateFilterComponent, isStandalone: true, selector: "tb-date-filter", inputs: { $info: { classPropertyName: "$info", publicName: "info", isSignal: true, isRequired: true, transformFunction: null }, $currentFilterType: { classPropertyName: "$currentFilterType", publicName: "currentFilterType", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@let currentFilterType = $currentFilterType();\r\n@let info = $info();\r\n\r\n@if (currentFilterType !== FilterType.DateBetween && currentFilterType !== FilterType.IsNull && currentFilterType !== FilterType.In)\r\n{\r\n <mat-form-field>\r\n <input matInput name=\"filterValue\" [ngModel]=\"info.filterValue\" [matDatepicker]=\"cal\"/>\r\n <mat-datepicker-toggle class=\"small-button date-toggle\" matSuffix preventEnter [for]=\"cal\" />\r\n <mat-datepicker #cal />\r\n </mat-form-field>\r\n}\r\n@if(currentFilterType === FilterType.DateBetween)\r\n{\r\n <ng-container ngModelGroup=\"filterValue\">\r\n <mat-form-field class=\"my-filter\" >\r\n <input matInput name=\"Start\" placeholder=\"From\" [ngModel]=\"info.filterValue?.Start\" [matDatepicker]=\"fromVal\"\r\n (click)=\"fromVal.open()\"/>\r\n <mat-datepicker-toggle matSuffix class=\"small-button date-toggle\" preventEnter [for]=\"fromVal\" />\r\n <mat-datepicker #fromVal />\r\n </mat-form-field>\r\n <mat-form-field>\r\n <input matInput name=\"End\" placeholder=\"To\" [ngModel]=\"info.filterValue?.End\" [matDatepicker]=\"toVal\" (click)=\"toVal.open()\"/>\r\n <mat-datepicker-toggle matSuffix class=\"small-button date-toggle\" preventEnter [for]=\"toVal\" />\r\n <mat-datepicker #toVal />\r\n </mat-form-field>\r\n </ng-container>\r\n}\r\n@if(currentFilterType === FilterType.In)\r\n{\r\n @if($allValuesInMeta())\r\n {\r\n <tb-in-list-filter name=\"filterValue\" [key]=\"info.key\" [values]=\"info.filterValue\" [(ngModel)]=\"info.filterValue\" />\r\n }\r\n @else\r\n {\r\n <lib-in-filter name=\"filterValue\" [type]=\"FieldType.Date\" [(ngModel)]=\"info.filterValue\" />\r\n }\r\n}\r\n\r\n", styles: [".filter-name{color:var(tb-filter-name);margin:10px 0;font-weight:600;display:inline-block}.switch{display:inline-block}.head-row{display:flex;width:100%;align-items:center;justify-content:space-between}.filter-row{display:flex;align-items:center;gap:1rem}mat-card.filter-card::ng-deep mat-form-field{width:150px}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.inline{display:inline-block}.small-button{height:18px;width:18px;font-size:18px;padding:0;margin:0}.small-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.cancel-button{font-weight:700}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"], dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgModelGroup, selector: "[ngModelGroup]", inputs: ["ngModelGroup"], exportAs: ["ngModelGroup"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i2$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i2$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: InFilterComponent, selector: "lib-in-filter", inputs: ["type"] }, { kind: "component", type: InListFilterComponent, selector: "tb-in-list-filter", inputs: ["values", "key"] }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3759
3770
|
}
|
|
3760
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
3771
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: DateFilterComponent, decorators: [{
|
|
3761
3772
|
type: Component,
|
|
3762
3773
|
args: [{ selector: 'tb-date-filter', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], imports: [
|
|
3763
3774
|
MatInputModule, FormsModule, MatDatepickerModule, InFilterComponent, InListFilterComponent
|
|
@@ -3768,19 +3779,19 @@ class NumberFilterComponent {
|
|
|
3768
3779
|
constructor() {
|
|
3769
3780
|
this.FilterType = FilterType;
|
|
3770
3781
|
this.FieldType = FieldType;
|
|
3771
|
-
this.$currentFilterType = input.required(...(ngDevMode ?
|
|
3772
|
-
this.$info = input.required(...(ngDevMode ?
|
|
3782
|
+
this.$currentFilterType = input.required({ ...(ngDevMode ? { debugName: "$currentFilterType" } : {}), alias: 'currentFilterType' });
|
|
3783
|
+
this.$info = input.required({ ...(ngDevMode ? { debugName: "$info" } : {}), alias: 'info' });
|
|
3773
3784
|
this.state = inject(TableStore);
|
|
3774
|
-
this.$metaData = computed(() => this.state.$getMetaData(this.$info()?.key)(), ...(ngDevMode ?
|
|
3785
|
+
this.$metaData = computed(() => this.state.$getMetaData(this.$info()?.key)(), { ...(ngDevMode ? { debugName: "$metaData" } : {}) });
|
|
3775
3786
|
this.$allValuesInMeta = computed(() => {
|
|
3776
3787
|
const filterable = this.$metaData()?.additional?.filterOptions?.filterableValues;
|
|
3777
3788
|
return filterable === 'all values' || filterable?.allValues === true;
|
|
3778
|
-
}, ...(ngDevMode ?
|
|
3789
|
+
}, { ...(ngDevMode ? { debugName: "$allValuesInMeta" } : {}) });
|
|
3779
3790
|
}
|
|
3780
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
3781
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
3791
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: NumberFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3792
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: NumberFilterComponent, isStandalone: true, selector: "tb-number-filter", inputs: { $currentFilterType: { classPropertyName: "$currentFilterType", publicName: "currentFilterType", isSignal: true, isRequired: true, transformFunction: null }, $info: { classPropertyName: "$info", publicName: "info", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@let currentFilterType = $currentFilterType();\r\n@let info = $info();\r\n\r\n@if(currentFilterType !== FilterType.NumberBetween && currentFilterType !== FilterType.IsNull && currentFilterType !== FilterType.In)\r\n{\r\n <mat-form-field class=\"my-filter\">\r\n <input matInput name=\"filterValue\" type=\"number\" [ngModel]=\"info.filterValue\"/>\r\n </mat-form-field>\r\n}\r\n@if(currentFilterType === FilterType.NumberBetween)\r\n{\r\n <ng-container ngModelGroup=\"filterValue\" >\r\n <mat-form-field class=\"my-filter\">\r\n <input matInput name=\"Start\" placeholder=\"Start\" type=\"number\" [ngModel]=\"info.filterValue?.Start\"/>\r\n </mat-form-field>\r\n <mat-form-field class=\"my-filter\">\r\n <input matInput name=\"End\" placeholder=\"End\" type=\"number\" [ngModel]=\"info.filterValue?.End\"/>\r\n </mat-form-field>\r\n </ng-container>\r\n}\r\n\r\n@if(currentFilterType === FilterType.In)\r\n{\r\n @if($allValuesInMeta())\r\n {\r\n <tb-in-list-filter name=\"filterValue\" [key]=\"info.key\" [values]=\"info.filterValue\" [(ngModel)]=\"info.filterValue\" />\r\n }\r\n @else\r\n {\r\n <lib-in-filter name=\"filterValue\" [type]=\"FieldType.Date\" [(ngModel)]=\"info.filterValue\" />\r\n }\r\n}\r\n", styles: [".switch{display:inline-block}.my-filter{margin-right:15px}.inline{display:inline-block}\n"], dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgModelGroup, selector: "[ngModelGroup]", inputs: ["ngModelGroup"], exportAs: ["ngModelGroup"] }, { kind: "component", type: InFilterComponent, selector: "lib-in-filter", inputs: ["type"] }, { kind: "component", type: InListFilterComponent, selector: "tb-in-list-filter", inputs: ["values", "key"] }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3782
3793
|
}
|
|
3783
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
3794
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: NumberFilterComponent, decorators: [{
|
|
3784
3795
|
type: Component,
|
|
3785
3796
|
args: [{ selector: 'tb-number-filter', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], imports: [
|
|
3786
3797
|
MatInputModule, FormsModule, InFilterComponent, InListFilterComponent
|
|
@@ -3791,19 +3802,19 @@ class DateTimeFilterComponent {
|
|
|
3791
3802
|
constructor() {
|
|
3792
3803
|
this.FilterType = FilterType;
|
|
3793
3804
|
this.FieldType = FieldType;
|
|
3794
|
-
this.$info = input.required(...(ngDevMode ?
|
|
3795
|
-
this.$currentFilterType = input.required(...(ngDevMode ?
|
|
3805
|
+
this.$info = input.required({ ...(ngDevMode ? { debugName: "$info" } : {}), alias: 'info' });
|
|
3806
|
+
this.$currentFilterType = input.required({ ...(ngDevMode ? { debugName: "$currentFilterType" } : {}), alias: 'currentFilterType' });
|
|
3796
3807
|
this.state = inject(TableStore);
|
|
3797
|
-
this.$metaData = computed(() => this.state.$getMetaData(this.$info()?.key)(), ...(ngDevMode ?
|
|
3808
|
+
this.$metaData = computed(() => this.state.$getMetaData(this.$info()?.key)(), { ...(ngDevMode ? { debugName: "$metaData" } : {}) });
|
|
3798
3809
|
this.$allValuesInMeta = computed(() => {
|
|
3799
3810
|
const filterable = this.$metaData()?.additional?.filterOptions?.filterableValues;
|
|
3800
3811
|
return filterable === 'all values' || filterable?.allValues === true;
|
|
3801
|
-
}, ...(ngDevMode ?
|
|
3812
|
+
}, { ...(ngDevMode ? { debugName: "$allValuesInMeta" } : {}) });
|
|
3802
3813
|
}
|
|
3803
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
3804
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
3814
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: DateTimeFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3815
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: DateTimeFilterComponent, isStandalone: true, selector: "tb-date-time-filter", inputs: { $info: { classPropertyName: "$info", publicName: "info", isSignal: true, isRequired: true, transformFunction: null }, $currentFilterType: { classPropertyName: "$currentFilterType", publicName: "currentFilterType", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@let currentFilterType = $currentFilterType();\r\n@let info = $info();\r\n\r\n@if(currentFilterType !== FilterType.DateTimeBetween && currentFilterType !== FilterType.IsNull && currentFilterType !== FilterType.In)\r\n{\r\n <input type=\"datetime-local\" preventEnter name=\"filterValue\" class=\"op-date-time-input\" [ngModel]=\"info.filterValue\"/>\r\n}\r\n@if(currentFilterType === FilterType.DateTimeBetween)\r\n{\r\n <ng-container ngModelGroup=\"filterValue\">\r\n <input type=\"datetime-local\" preventEnter name=\"Start\" class=\"op-date-time-input\" [ngModel]=\"info.filterValue?.Start\"/>\r\n <input type=\"datetime-local\" preventEnter name=\"End\" class=\"op-date-time-input\" [ngModel]=\"info.filterValue?.End\"/>\r\n </ng-container>\r\n}\r\n@if(currentFilterType === FilterType.In)\r\n{\r\n @if($allValuesInMeta())\r\n {\r\n <tb-in-list-filter name=\"filterValue\" [key]=\"info.key\" [values]=\"info.filterValue\" [(ngModel)]=\"info.filterValue\" />\r\n }\r\n @else\r\n {\r\n <lib-in-filter name=\"filterValue\" [type]=\"FieldType.Date\" [(ngModel)]=\"info.filterValue\" />\r\n }\r\n}", styles: [".filter-name{color:var(tb-filter-name);margin:10px 0;font-weight:600;display:inline-block}.switch{display:inline-block}.head-row{display:flex;width:100%;align-items:center;justify-content:space-between}.filter-row{display:flex;align-items:center;gap:1rem}mat-card.filter-card::ng-deep mat-form-field{width:150px}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.inline{display:inline-block}.small-button{height:18px;width:18px;font-size:18px;padding:0;margin:0}.small-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.cancel-button{font-weight:700}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgModelGroup, selector: "[ngModelGroup]", inputs: ["ngModelGroup"], exportAs: ["ngModelGroup"] }, { kind: "component", type: InFilterComponent, selector: "lib-in-filter", inputs: ["type"] }, { kind: "component", type: InListFilterComponent, selector: "tb-in-list-filter", inputs: ["values", "key"] }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3805
3816
|
}
|
|
3806
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
3817
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: DateTimeFilterComponent, decorators: [{
|
|
3807
3818
|
type: Component,
|
|
3808
3819
|
args: [{ selector: 'tb-date-time-filter', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], imports: [
|
|
3809
3820
|
FormsModule, InFilterComponent, InListFilterComponent
|
|
@@ -3816,23 +3827,20 @@ class FilterComponent {
|
|
|
3816
3827
|
this.filterTypes = filterTypeMap;
|
|
3817
3828
|
this.FilterType = FilterType;
|
|
3818
3829
|
this.FieldType = FieldType;
|
|
3819
|
-
this.$filter = input.required(...(ngDevMode ?
|
|
3820
|
-
|
|
3821
|
-
|
|
3822
|
-
transform: (f) => ({ ...f })
|
|
3823
|
-
}]));
|
|
3824
|
-
this.$metaData = computed(() => this.state.$getMetaData(this.$filter()?.key)(), ...(ngDevMode ? [{ debugName: "$metaData" }] : []));
|
|
3830
|
+
this.$filter = input.required({ ...(ngDevMode ? { debugName: "$filter" } : {}), alias: 'filter',
|
|
3831
|
+
transform: (f) => ({ ...f }) });
|
|
3832
|
+
this.$metaData = computed(() => this.state.$getMetaData(this.$filter()?.key)(), { ...(ngDevMode ? { debugName: "$metaData" } : {}) });
|
|
3825
3833
|
this.$allValuesInMeta = computed(() => {
|
|
3826
3834
|
const filterable = this.$metaData()?.additional?.filterOptions?.filterableValues;
|
|
3827
3835
|
return filterable === 'all values' || filterable?.allValues === true;
|
|
3828
|
-
}, ...(ngDevMode ?
|
|
3836
|
+
}, { ...(ngDevMode ? { debugName: "$allValuesInMeta" } : {}) });
|
|
3829
3837
|
this.close$ = new Subject();
|
|
3830
3838
|
this.done$ = new Subject();
|
|
3831
3839
|
this.close = outputFromObservable(this.close$);
|
|
3832
3840
|
this.done = outputFromObservable(merge(this.done$, this.close$));
|
|
3833
|
-
this.$enteredFilterType = signal(undefined, ...(ngDevMode ?
|
|
3834
|
-
this.$currentFilterType = computed(() => this.$enteredFilterType() || this.$filter()?.filterType, ...(ngDevMode ?
|
|
3835
|
-
this.$availableFilterTypes = computed(() => this.filterTypes[this.$filter()?.fieldType], ...(ngDevMode ?
|
|
3841
|
+
this.$enteredFilterType = signal(undefined, { ...(ngDevMode ? { debugName: "$enteredFilterType" } : {}) });
|
|
3842
|
+
this.$currentFilterType = computed(() => this.$enteredFilterType() || this.$filter()?.filterType, { ...(ngDevMode ? { debugName: "$currentFilterType" } : {}) });
|
|
3843
|
+
this.$availableFilterTypes = computed(() => this.filterTypes[this.$filter()?.fieldType], { ...(ngDevMode ? { debugName: "$availableFilterTypes" } : {}) });
|
|
3836
3844
|
}
|
|
3837
3845
|
onEnter(filter, event) {
|
|
3838
3846
|
event.preventDefault();
|
|
@@ -3845,10 +3853,10 @@ class FilterComponent {
|
|
|
3845
3853
|
this.state.addFilter({ ...filter });
|
|
3846
3854
|
this.done$.next();
|
|
3847
3855
|
}
|
|
3848
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
3849
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: FilterComponent, isStandalone: true, selector: "tb-filter", inputs: { $filter: { classPropertyName: "$filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { close: "close", done: "done" }, ngImport: i0, template: "@let filter = $filter();\r\n@let currentFilterType = $currentFilterType();\r\n\r\n@if (filter)\r\n{\r\n <mat-card appearance=\"outlined\" class=\"filter-card\">\r\n <mat-card-content>\r\n <form #form=\"ngForm\" (keydown.enter)=\"onEnter(form.value,$event)\" (keydown.escape)=\"close$.next()\">\r\n <input type=\"hidden\" name=\"filterId\" [ngModel]=\"filter.filterId\" />\r\n <input type=\"hidden\" name=\"key\" [ngModel]=\"filter.key\" />\r\n <input type=\"hidden\" name=\"fieldType\" [ngModel]=\"filter.fieldType\" />\r\n <div class=\"head-row\" >\r\n <h4 class=\"filter-name\">{{(filter.key | spaceCase)}} Filter</h4>\r\n <button class=\"cancel-button small-button\" color=\"primary\" mat-icon-button type=\"button\" [matTooltip]=\"'Close'\"\r\n (click)=\"close$.next();\">\r\n <mat-icon class=\"cancel-button\" color=\"primary\">close</mat-icon>\r\n </button>\r\n </div>\r\n <div class=\"filter-row\">\r\n <div class=\"inline\">\r\n <mat-form-field class=\"my-filter\" >\r\n <mat-select placeholder=\"Select Filter Type\" name=\"filterType\" [ngModel]=\"$currentFilterType()\" [panelWidth]=\"null\" (ngModelChange)=\"$enteredFilterType.set($event)\">\r\n @for (kvp of filterTypes[filter.fieldType]; track kvp)\r\n {\r\n <mat-option [value]=\"kvp\">\r\n {{ kvp }}\r\n </mat-option>\r\n }\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n @if(\r\n filter.fieldType === FieldType.String\r\n || filter.fieldType === FieldType.Array\r\n || filter.fieldType === FieldType.Link\r\n || filter.fieldType === FieldType.Unknown\r\n || filter.fieldType === FieldType.PhoneNumber)\r\n {\r\n <ng-container *ngTemplateOutlet=\"String\" />\r\n }\r\n @else if(filter.fieldType === FieldType.Number || filter.fieldType === FieldType.Currency)\r\n {\r\n <tb-number-filter [info]=\"filter\" [currentFilterType]=\"currentFilterType!\" />\r\n }\r\n @else if(filter.fieldType === FieldType.Boolean)\r\n {\r\n <ng-container *ngTemplateOutlet=\"Boolean\" />\r\n }\r\n @else if(\r\n filter.fieldType === FieldType.Date\r\n || (\r\n filter.fieldType === FieldType.DateTime\r\n && (currentFilterType === FilterType.DateIsOn || currentFilterType === FilterType.DateIsNotOn || currentFilterType === FilterType.DateTimeAtOrAfter || currentFilterType === FilterType.DateTimeAtOrBefore)\r\n ))\r\n {\r\n <tb-date-filter [info]=\"filter\" [currentFilterType]=\"currentFilterType!\" />\r\n }\r\n @else if(filter.fieldType === FieldType.DateTime)\r\n {\r\n <tb-date-time-filter [info]=\"filter\" [currentFilterType]=\"currentFilterType!\" />\r\n }\r\n @else if(filter.fieldType === FieldType.Enum)\r\n {\r\n <ng-container *ngTemplateOutlet=\"Enum\" />\r\n }\r\n\r\n @if(currentFilterType === FilterType.IsNull)\r\n {\r\n <mat-radio-group name=\"filterValue\" [ngModel]=\"filter.filterValue\">\r\n <mat-radio-button [value]=\"true\">True</mat-radio-button>\r\n <mat-radio-button [value]=\"false\">False</mat-radio-button>\r\n </mat-radio-group>\r\n }\r\n </div>\r\n <button mat-button disableRipple [disabled]=\"form.value.filterValue==undefined || !form.value.filterType\" (click)=\"addFilter(form.value)\">\r\n Apply\r\n </button>\r\n \r\n \r\n <ng-template #String>\r\n @if(currentFilterType !== FilterType.IsNull && currentFilterType !== FilterType.In)\r\n {\r\n <mat-form-field class=\"my-filter\">\r\n <input matInput name=\"filterValue\" [ngModel]=\"filter.filterValue\" />\r\n </mat-form-field>\r\n }\r\n @else if(currentFilterType === FilterType.In)\r\n {\r\n @if($allValuesInMeta())\r\n {\r\n <tb-in-list-filter name=\"filterValue\" [key]=\"filter.key\" [values]=\"filter.filterValue\" [(ngModel)]=\"filter.filterValue\" />\r\n }\r\n @else\r\n {\r\n <lib-in-filter name=\"filterValue\" [type]=\"FieldType.String\" [(ngModel)]=\"filter.filterValue\" />\r\n }\r\n }\r\n </ng-template>\r\n \r\n <ng-template #Boolean >\r\n @if(currentFilterType === FilterType.BooleanEquals)\r\n {\r\n <div class=\"switch\">\r\n <mat-radio-group name=\"filterValue\" [ngModel]=\"filter.filterValue\" >\r\n <mat-radio-button preventEnter [value]=\"true\">True</mat-radio-button>\r\n <mat-radio-button preventEnter [value]=\"false\">False</mat-radio-button>\r\n </mat-radio-group>\r\n </div>\r\n }\r\n </ng-template>\r\n <ng-template #Enum>\r\n @if(currentFilterType === FilterType.In)\r\n {\r\n <tb-in-list-filter name='filterValue' [key]=\"filter.key\" [values]=\"filter.filterValue\" [(ngModel)]=\"filter.filterValue\" />\r\n\r\n }\r\n </ng-template>\r\n </form>\r\n </mat-card-content>\r\n </mat-card>\r\n}\r\n", styles: [".filter-name{color:var(tb-filter-name);margin:10px 0;font-weight:600;display:inline-block}.switch{display:inline-block}.head-row{display:flex;width:100%;align-items:center;justify-content:space-between}.filter-row{display:flex;align-items:center;gap:1rem}mat-card.filter-card::ng-deep mat-form-field{width:150px}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.inline{display:inline-block}.small-button{height:18px;width:18px;font-size:18px;padding:0;margin:0}.small-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.cancel-button{font-weight:700}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$3.MatCardContent, selector: "mat-card-content" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: NumberFilterComponent, selector: "tb-number-filter", inputs: ["currentFilterType", "info"] }, { kind: "component", type: DateFilterComponent, selector: "tb-date-filter", inputs: ["info", "currentFilterType"] }, { kind: "component", type: DateTimeFilterComponent, selector: "tb-date-time-filter", inputs: ["info", "currentFilterType"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i8.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i8.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: InFilterComponent, selector: "lib-in-filter", inputs: ["type"] }, { kind: "component", type: InListFilterComponent, selector: "tb-in-list-filter", inputs: ["values", "key"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3856
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: FilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3857
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: FilterComponent, isStandalone: true, selector: "tb-filter", inputs: { $filter: { classPropertyName: "$filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { close: "close", done: "done" }, ngImport: i0, template: "@let filter = $filter();\r\n@let currentFilterType = $currentFilterType();\r\n\r\n@if (filter)\r\n{\r\n <mat-card appearance=\"outlined\" class=\"filter-card\">\r\n <mat-card-content>\r\n <form #form=\"ngForm\" (keydown.enter)=\"onEnter(form.value,$event)\" (keydown.escape)=\"close$.next()\">\r\n <input type=\"hidden\" name=\"filterId\" [ngModel]=\"filter.filterId\" />\r\n <input type=\"hidden\" name=\"key\" [ngModel]=\"filter.key\" />\r\n <input type=\"hidden\" name=\"fieldType\" [ngModel]=\"filter.fieldType\" />\r\n <div class=\"head-row\" >\r\n <h4 class=\"filter-name\">{{(filter.key | spaceCase)}} Filter</h4>\r\n <button class=\"cancel-button small-button\" color=\"primary\" mat-icon-button type=\"button\" [matTooltip]=\"'Close'\"\r\n (click)=\"close$.next();\">\r\n <mat-icon class=\"cancel-button\" color=\"primary\">close</mat-icon>\r\n </button>\r\n </div>\r\n <div class=\"filter-row\">\r\n <div class=\"inline\">\r\n <mat-form-field class=\"my-filter\" >\r\n <mat-select placeholder=\"Select Filter Type\" name=\"filterType\" [ngModel]=\"$currentFilterType()\" [panelWidth]=\"null\" (ngModelChange)=\"$enteredFilterType.set($event)\">\r\n @for (kvp of filterTypes[filter.fieldType]; track kvp)\r\n {\r\n <mat-option [value]=\"kvp\">\r\n {{ kvp }}\r\n </mat-option>\r\n }\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n @if(\r\n filter.fieldType === FieldType.String\r\n || filter.fieldType === FieldType.Array\r\n || filter.fieldType === FieldType.Link\r\n || filter.fieldType === FieldType.Unknown\r\n || filter.fieldType === FieldType.PhoneNumber)\r\n {\r\n <ng-container *ngTemplateOutlet=\"String\" />\r\n }\r\n @else if(filter.fieldType === FieldType.Number || filter.fieldType === FieldType.Currency)\r\n {\r\n <tb-number-filter [info]=\"filter\" [currentFilterType]=\"currentFilterType!\" />\r\n }\r\n @else if(filter.fieldType === FieldType.Boolean)\r\n {\r\n <ng-container *ngTemplateOutlet=\"Boolean\" />\r\n }\r\n @else if(\r\n filter.fieldType === FieldType.Date\r\n || (\r\n filter.fieldType === FieldType.DateTime\r\n && (currentFilterType === FilterType.DateIsOn || currentFilterType === FilterType.DateIsNotOn || currentFilterType === FilterType.DateTimeAtOrAfter || currentFilterType === FilterType.DateTimeAtOrBefore)\r\n ))\r\n {\r\n <tb-date-filter [info]=\"filter\" [currentFilterType]=\"currentFilterType!\" />\r\n }\r\n @else if(filter.fieldType === FieldType.DateTime)\r\n {\r\n <tb-date-time-filter [info]=\"filter\" [currentFilterType]=\"currentFilterType!\" />\r\n }\r\n @else if(filter.fieldType === FieldType.Enum)\r\n {\r\n <ng-container *ngTemplateOutlet=\"Enum\" />\r\n }\r\n\r\n @if(currentFilterType === FilterType.IsNull)\r\n {\r\n <mat-radio-group name=\"filterValue\" [ngModel]=\"filter.filterValue\">\r\n <mat-radio-button [value]=\"true\">True</mat-radio-button>\r\n <mat-radio-button [value]=\"false\">False</mat-radio-button>\r\n </mat-radio-group>\r\n }\r\n </div>\r\n <button mat-button disableRipple [disabled]=\"form.value.filterValue==undefined || !form.value.filterType\" (click)=\"addFilter(form.value)\">\r\n Apply\r\n </button>\r\n \r\n \r\n <ng-template #String>\r\n @if(currentFilterType !== FilterType.IsNull && currentFilterType !== FilterType.In)\r\n {\r\n <mat-form-field class=\"my-filter\">\r\n <input matInput name=\"filterValue\" [ngModel]=\"filter.filterValue\" />\r\n </mat-form-field>\r\n }\r\n @else if(currentFilterType === FilterType.In)\r\n {\r\n @if($allValuesInMeta())\r\n {\r\n <tb-in-list-filter name=\"filterValue\" [key]=\"filter.key\" [values]=\"filter.filterValue\" [(ngModel)]=\"filter.filterValue\" />\r\n }\r\n @else\r\n {\r\n <lib-in-filter name=\"filterValue\" [type]=\"FieldType.String\" [(ngModel)]=\"filter.filterValue\" />\r\n }\r\n }\r\n </ng-template>\r\n \r\n <ng-template #Boolean >\r\n @if(currentFilterType === FilterType.BooleanEquals)\r\n {\r\n <div class=\"switch\">\r\n <mat-radio-group name=\"filterValue\" [ngModel]=\"filter.filterValue\" >\r\n <mat-radio-button preventEnter [value]=\"true\">True</mat-radio-button>\r\n <mat-radio-button preventEnter [value]=\"false\">False</mat-radio-button>\r\n </mat-radio-group>\r\n </div>\r\n }\r\n </ng-template>\r\n <ng-template #Enum>\r\n @if(currentFilterType === FilterType.In)\r\n {\r\n <tb-in-list-filter name='filterValue' [key]=\"filter.key\" [values]=\"filter.filterValue\" [(ngModel)]=\"filter.filterValue\" />\r\n\r\n }\r\n </ng-template>\r\n </form>\r\n </mat-card-content>\r\n </mat-card>\r\n}\r\n", styles: [".filter-name{color:var(tb-filter-name);margin:10px 0;font-weight:600;display:inline-block}.switch{display:inline-block}.head-row{display:flex;width:100%;align-items:center;justify-content:space-between}.filter-row{display:flex;align-items:center;gap:1rem}mat-card.filter-card::ng-deep mat-form-field{width:150px}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.inline{display:inline-block}.small-button{height:18px;width:18px;font-size:18px;padding:0;margin:0}.small-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.cancel-button{font-weight:700}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$3.MatCardContent, selector: "mat-card-content" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: NumberFilterComponent, selector: "tb-number-filter", inputs: ["currentFilterType", "info"] }, { kind: "component", type: DateFilterComponent, selector: "tb-date-filter", inputs: ["info", "currentFilterType"] }, { kind: "component", type: DateTimeFilterComponent, selector: "tb-date-time-filter", inputs: ["info", "currentFilterType"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i8.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i8.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: InFilterComponent, selector: "lib-in-filter", inputs: ["type"] }, { kind: "component", type: InListFilterComponent, selector: "tb-in-list-filter", inputs: ["values", "key"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3850
3858
|
}
|
|
3851
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
3859
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: FilterComponent, decorators: [{
|
|
3852
3860
|
type: Component,
|
|
3853
3861
|
args: [{ selector: 'tb-filter', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
3854
3862
|
MatCardModule, FormsModule, SpaceCasePipe, MatButtonModule, MatTooltipModule, MatIconModule,
|
|
@@ -3865,7 +3873,7 @@ class GenColDisplayerComponent {
|
|
|
3865
3873
|
key: md.key,
|
|
3866
3874
|
displayName: md.displayName,
|
|
3867
3875
|
isVisible: !this.tableState.$hiddenKeys().includes(md.key)
|
|
3868
|
-
})), ...(ngDevMode ?
|
|
3876
|
+
})), { ...(ngDevMode ? { debugName: "$columns" } : {}) });
|
|
3869
3877
|
}
|
|
3870
3878
|
reset(displayCols) {
|
|
3871
3879
|
displayCols.forEach(c => c.isVisible = true);
|
|
@@ -3881,10 +3889,10 @@ class GenColDisplayerComponent {
|
|
|
3881
3889
|
emit(displayCols) {
|
|
3882
3890
|
this.tableState.setHiddenColumns(displayCols.map(c => ({ key: c.key, visible: c.isVisible })));
|
|
3883
3891
|
}
|
|
3884
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
3885
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
3892
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: GenColDisplayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3893
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: GenColDisplayerComponent, isStandalone: true, selector: "tb-col-displayer", ngImport: i0, template: "@if($columns(); as displayCols)\r\n{\r\n <span matTooltip=\"Show/hide columns\">\r\n <button color=\"primary\" mat-icon-button [matMenuTriggerFor]=\"menu\">\r\n <mat-icon color=\"primary\">visibility_off</mat-icon>\r\n </button>\r\n </span>\r\n <mat-menu #menu=\"matMenu\" class=\"my-mat-menu\">\r\n\r\n <button mat-menu-item>\r\n <span matTooltip=\"Close\">\r\n <button class=\"filter-button\" mat-icon-button>\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </span>\r\n </button>\r\n\r\n <button mat-menu-item stop-propagation>\r\n <span matTooltip=\"Show all columns\">\r\n <button color=\"primary\" mat-icon-button (click)=\"reset(displayCols)\">\r\n <mat-icon color=\"primary\">done_all</mat-icon>\r\n </button>\r\n </span>\r\n\r\n <span matTooltip=\"Hide all columns\">\r\n <button color=\"primary\" mat-icon-button (click)=\"unset(displayCols)\">\r\n <mat-icon color=\"primary\">cancel</mat-icon>\r\n </button>\r\n </span>\r\n </button>\r\n\r\n <div cdkDropList stop-propagation [cdkDropListLockAxis]=\"'y'\" (cdkDropListDropped)=\"drop($event)\">\r\n @for (col of displayCols; track col.key)\r\n {\r\n <button stop-propagation mat-menu-item cdkDrag [class.isHidden]=\"!col.isVisible\" [cdkDragData]=\"col\">\r\n <div style=\"display: flex; align-items: center;\" (click)=\"col.isVisible = !col.isVisible; emit(displayCols)\">\r\n @if(col.isVisible)\r\n {\r\n <button color=\"primary\" mat-icon-button matTooltip=\"Hide Column\" class=\"show-hide\">\r\n <mat-icon color=\"primary\">check_box</mat-icon>\r\n </button>\r\n }\r\n @else\r\n {\r\n <button mat-icon-button matTooltip=\"Show Column\" class=\"show-hide\">\r\n <mat-icon>indeterminate_check_box</mat-icon>\r\n </button>\r\n }\r\n \r\n <p class=\"label\">\r\n {{col.displayName || (col.key | spaceCase) }}\r\n </p>\r\n\r\n </div>\r\n </button>\r\n }\r\n\r\n </div>\r\n </mat-menu>\r\n}", styles: [".show-hide{margin-right:15px;height:24px;width:24px;padding:4px}.label{color:var(tb-col-display-name);text-overflow:ellipsis;overflow:hidden;white-space:nowrap;text-align:left;margin:0;font-size:17px;font-weight:700;display:inline-block;width:66%}.row{margin:0;padding:0}.isHidden{background-color:#d3d3d3;color:#a9a9a9;font-weight:700;font-size:17px;white-space:nowrap}.filter-button{margin-top:10px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.mdc-list-item__primary-text{display:inline-block;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1$4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3886
3894
|
}
|
|
3887
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
3895
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: GenColDisplayerComponent, decorators: [{
|
|
3888
3896
|
type: Component,
|
|
3889
3897
|
args: [{ selector: 'tb-col-displayer', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
3890
3898
|
MatTooltipModule, MatIconModule, MatButtonModule, MatMenuModule, StopPropagationDirective,
|
|
@@ -3894,17 +3902,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
|
|
|
3894
3902
|
|
|
3895
3903
|
class WrapperFilterStore {
|
|
3896
3904
|
constructor() {
|
|
3897
|
-
this.$filters = signal([], ...(ngDevMode ?
|
|
3905
|
+
this.$filters = signal([], { ...(ngDevMode ? { debugName: "$filters" } : {}) });
|
|
3898
3906
|
this.clearAll = () => this.$filters.set([]);
|
|
3899
3907
|
this.deleteByIndex = (index) => this.$filters.update(filters => filters.toSpliced(index, 1));
|
|
3900
3908
|
this.addFilter = (filter) => {
|
|
3901
3909
|
this.$filters.update(filters => [...filters, filter]);
|
|
3902
3910
|
};
|
|
3903
3911
|
}
|
|
3904
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
3905
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.
|
|
3912
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: WrapperFilterStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
3913
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: WrapperFilterStore }); }
|
|
3906
3914
|
}
|
|
3907
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
3915
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: WrapperFilterStore, decorators: [{
|
|
3908
3916
|
type: Injectable
|
|
3909
3917
|
}] });
|
|
3910
3918
|
|
|
@@ -3915,7 +3923,7 @@ class GenFilterDisplayerComponent {
|
|
|
3915
3923
|
this.$filterCols = computed(() => {
|
|
3916
3924
|
const mds = this.tableState.$metaDataArray();
|
|
3917
3925
|
return mds.filter(m => m.fieldType !== FieldType.Hidden && (m.fieldType !== FieldType.NotMapped || m.filterLogic?.filterBy) && !m.noFilter);
|
|
3918
|
-
}, ...(ngDevMode ?
|
|
3926
|
+
}, { ...(ngDevMode ? { debugName: "$filterCols" } : {}) });
|
|
3919
3927
|
}
|
|
3920
3928
|
addFilter(metaData) {
|
|
3921
3929
|
this.filterStore.addFilter({
|
|
@@ -3923,10 +3931,10 @@ class GenFilterDisplayerComponent {
|
|
|
3923
3931
|
fieldType: metaData.filterLogic?.filterType || metaData.fieldType,
|
|
3924
3932
|
});
|
|
3925
3933
|
}
|
|
3926
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
3927
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
3934
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: GenFilterDisplayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3935
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: GenFilterDisplayerComponent, isStandalone: true, selector: "tb-filter-displayer", ngImport: i0, template: "<button color=\"primary\" stop-propagation class=\"filter-button\" mat-icon-button [matMenuTriggerFor]=\"menu\" [matTooltip]=\"'Add Filter'\">\r\n <mat-icon class=\"filter-icon\" color=\"primary\">filter_list</mat-icon>\r\n</button>\r\n<mat-menu #menu=\"matMenu\">\r\n @for (md of $filterCols(); track md.key)\r\n {\r\n <button mat-menu-item (click)=\"addFilter(md)\">\r\n <span class=\"filter-labels\">{{md.displayName || (md.key | spaceCase)}}</span>\r\n </button>\r\n }\r\n</mat-menu>\r\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{font-size:22px;font-weight:700}.cancel-button{margin-right:30px;font-weight:700}.filter-wrapper{margin-top:1em;margin-bottom:1em;float:right}.menu{margin-bottom:10px;width:109.1%}.filter-labels{font-size:17px;font-weight:600}.float{position:absolute;width:fit-content;z-index:101;top:10px;right:180px;max-width:90vw}.d-w{display:flex;flex-direction:row;justify-content:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1$4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3928
3936
|
}
|
|
3929
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
3937
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: GenFilterDisplayerComponent, decorators: [{
|
|
3930
3938
|
type: Component,
|
|
3931
3939
|
args: [{ selector: 'tb-filter-displayer', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
3932
3940
|
MatButtonModule, MatMenuModule, MatTooltipModule, StopPropagationDirective, MatIconModule,
|
|
@@ -3939,10 +3947,10 @@ class KeyDisplayPipe {
|
|
|
3939
3947
|
this.tableState = inject(TableStore);
|
|
3940
3948
|
this.transform = (key) => computed(() => this.tableState.$getMetaData(key)()?.displayName || spaceCase(key));
|
|
3941
3949
|
}
|
|
3942
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
3943
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.
|
|
3950
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: KeyDisplayPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
3951
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: KeyDisplayPipe, isStandalone: true, name: "keyDisplay" }); }
|
|
3944
3952
|
}
|
|
3945
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
3953
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: KeyDisplayPipe, decorators: [{
|
|
3946
3954
|
type: Pipe,
|
|
3947
3955
|
args: [{ name: 'keyDisplay' }]
|
|
3948
3956
|
}] });
|
|
@@ -3954,10 +3962,10 @@ class FormatFilterTypePipe {
|
|
|
3954
3962
|
}
|
|
3955
3963
|
return filterType;
|
|
3956
3964
|
}
|
|
3957
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
3958
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.
|
|
3965
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: FormatFilterTypePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
3966
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: FormatFilterTypePipe, isStandalone: true, name: "formatFilterType" }); }
|
|
3959
3967
|
}
|
|
3960
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
3968
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: FormatFilterTypePipe, decorators: [{
|
|
3961
3969
|
type: Pipe,
|
|
3962
3970
|
args: [{ name: 'formatFilterType' }]
|
|
3963
3971
|
}] });
|
|
@@ -3969,10 +3977,10 @@ class FormatFilterValuePipe {
|
|
|
3969
3977
|
transform(value, key, filterType) {
|
|
3970
3978
|
return computed(() => transform(value, this.tableState.$getMetaData(key)(), filterType));
|
|
3971
3979
|
}
|
|
3972
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
3973
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.
|
|
3980
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: FormatFilterValuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
3981
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: FormatFilterValuePipe, isStandalone: true, name: "formatFilterValue" }); }
|
|
3974
3982
|
}
|
|
3975
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
3983
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: FormatFilterValuePipe, decorators: [{
|
|
3976
3984
|
type: Pipe,
|
|
3977
3985
|
args: [{ name: 'formatFilterValue' }]
|
|
3978
3986
|
}] });
|
|
@@ -4031,8 +4039,8 @@ class FilterChipsComponent {
|
|
|
4031
4039
|
constructor() {
|
|
4032
4040
|
this.tableState = inject(TableStore);
|
|
4033
4041
|
this.filterStore = inject(WrapperFilterStore);
|
|
4034
|
-
this.$filters = computed(() => this.tableState.$filtersArray().filter(f => isFilterInfo(f) && !f._isExternallyManaged), ...(ngDevMode ?
|
|
4035
|
-
this.$certainCustomFilters = computed(() => this.tableState.$filtersArray().filter(f => isCustomFilter(f) && f.chipLabel), ...(ngDevMode ?
|
|
4042
|
+
this.$filters = computed(() => this.tableState.$filtersArray().filter(f => isFilterInfo(f) && !f._isExternallyManaged), { ...(ngDevMode ? { debugName: "$filters" } : {}) });
|
|
4043
|
+
this.$certainCustomFilters = computed(() => this.tableState.$filtersArray().filter(f => isCustomFilter(f) && f.chipLabel), { ...(ngDevMode ? { debugName: "$certainCustomFilters" } : {}) });
|
|
4036
4044
|
this.$currentFilters = this.filterStore.$filters;
|
|
4037
4045
|
}
|
|
4038
4046
|
deleteByIndex(index) {
|
|
@@ -4044,10 +4052,10 @@ class FilterChipsComponent {
|
|
|
4044
4052
|
clearAll() {
|
|
4045
4053
|
this.filterStore.clearAll();
|
|
4046
4054
|
}
|
|
4047
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
4048
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
4055
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: FilterChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4056
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: FilterChipsComponent, isStandalone: true, selector: "lib-filter-list", ngImport: i0, template: "<div class=\"d-w\">\r\n\r\n @if ($currentFilters().length)\r\n {\r\n <button class=\"cancel-button\" mat-icon-button matTooltip=\"Close all Filters Cards\" (click)=\"clearAll()\">\r\n <mat-icon class=\"cancel-button\" color=\"primary\">close</mat-icon>\r\n </button>\r\n <div class=\"float\">\r\n @for (filter of $currentFilters(); track filter.key)\r\n {\r\n <div class=\"filter\">\r\n <tb-filter [filter]=\"filter\" (close)=\"deleteByIndex($index)\" />\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <mat-chip-set>\r\n @for (filter of $filters(); track filter.key)\r\n {\r\n <mat-chip (dblclick)=\"addFilter(filter)\" (removed)=\"tableState.removeFilter(filter.filterId!)\">\r\n {{ (filter.key | keyDisplay)() }} {{filter.filterType | formatFilterType : filter.filterValue}} {{ (filter.filterValue | formatFilterValue: filter.key : filter.filterType)() }}\r\n <mat-icon matChipRemove>cancel</mat-icon>\r\n </mat-chip>\r\n }\r\n @for (filter of $certainCustomFilters(); track filter.filterId)\r\n {\r\n <mat-chip (removed)=\"tableState.removeFilter(filter.filterId!)\">\r\n {{filter.chipLabel}}\r\n <mat-icon matChipRemove>cancel</mat-icon>\r\n </mat-chip>\r\n }\r\n @if (($filters().length + $certainCustomFilters().length) > 1)\r\n {\r\n <mat-chip (removed)=\"tableState.clearFilters()\">\r\n Clear All\r\n <mat-icon matChipRemove>cancel</mat-icon>\r\n </mat-chip>\r\n }\r\n </mat-chip-set>\r\n\r\n</div>\r\n", styles: [".filter{margin:15px;display:inline-block}.filter-button{font-size:22px;font-weight:700}.cancel-button{margin-right:30px;font-weight:700}.filter-wrapper{margin-top:1em;margin-bottom:1em;float:right}.menu{margin-bottom:10px;width:109.1%}.filter-labels{font-size:17px;font-weight:600}.float{position:absolute;width:fit-content;z-index:101;top:10px;right:180px;max-width:90vw}.d-w{display:flex;flex-direction:row;justify-content:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: FilterComponent, selector: "tb-filter", inputs: ["filter"], outputs: ["close", "done"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i4$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: i4$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i4$1.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "pipe", type: KeyDisplayPipe, name: "keyDisplay" }, { kind: "pipe", type: FormatFilterTypePipe, name: "formatFilterType" }, { kind: "pipe", type: FormatFilterValuePipe, name: "formatFilterValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4049
4057
|
}
|
|
4050
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
4058
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: FilterChipsComponent, decorators: [{
|
|
4051
4059
|
type: Component,
|
|
4052
4060
|
args: [{ selector: 'lib-filter-list', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
4053
4061
|
MatButtonModule, MatTooltipModule, MatIconModule, FilterComponent,
|
|
@@ -4057,14 +4065,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
|
|
|
4057
4065
|
|
|
4058
4066
|
class RouterLinkColumnComponent {
|
|
4059
4067
|
constructor() {
|
|
4060
|
-
this.additional = input.required(...(ngDevMode ?
|
|
4061
|
-
this.element = input.required(...(ngDevMode ?
|
|
4062
|
-
this.queryParams = computed(() => this.additional().routerLinkOptions.queryParams(this.element()), ...(ngDevMode ?
|
|
4063
|
-
this.routerLinkOptions = computed(() => this.additional().routerLinkOptions, ...(ngDevMode ?
|
|
4064
|
-
this.link = input.required(...(ngDevMode ?
|
|
4065
|
-
}
|
|
4066
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
4067
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.
|
|
4068
|
+
this.additional = input.required({ ...(ngDevMode ? { debugName: "additional" } : {}) });
|
|
4069
|
+
this.element = input.required({ ...(ngDevMode ? { debugName: "element" } : {}) });
|
|
4070
|
+
this.queryParams = computed(() => this.additional().routerLinkOptions.queryParams(this.element()), { ...(ngDevMode ? { debugName: "queryParams" } : {}) });
|
|
4071
|
+
this.routerLinkOptions = computed(() => this.additional().routerLinkOptions, { ...(ngDevMode ? { debugName: "routerLinkOptions" } : {}) });
|
|
4072
|
+
this.link = input.required({ ...(ngDevMode ? { debugName: "link" } : {}) });
|
|
4073
|
+
}
|
|
4074
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: RouterLinkColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4075
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.2", type: RouterLinkColumnComponent, isStandalone: true, selector: "tb-router-link-column", inputs: { additional: { classPropertyName: "additional", publicName: "additional", isSignal: true, isRequired: true, transformFunction: null }, element: { classPropertyName: "element", publicName: "element", isSignal: true, isRequired: true, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
|
|
4068
4076
|
<a target="{{additional().target}}"
|
|
4069
4077
|
[routerLink]=" [link()]"
|
|
4070
4078
|
[queryParams]="queryParams()"
|
|
@@ -4076,7 +4084,7 @@ class RouterLinkColumnComponent {
|
|
|
4076
4084
|
</a>
|
|
4077
4085
|
`, isInline: true, dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4078
4086
|
}
|
|
4079
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
4087
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: RouterLinkColumnComponent, decorators: [{
|
|
4080
4088
|
type: Component,
|
|
4081
4089
|
args: [{
|
|
4082
4090
|
selector: "tb-router-link-column",
|
|
@@ -4099,18 +4107,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
|
|
|
4099
4107
|
}], propDecorators: { additional: [{ type: i0.Input, args: [{ isSignal: true, alias: "additional", required: true }] }], element: [{ type: i0.Input, args: [{ isSignal: true, alias: "element", required: true }] }], link: [{ type: i0.Input, args: [{ isSignal: true, alias: "link", required: true }] }] } });
|
|
4100
4108
|
class LinkColumnComponent {
|
|
4101
4109
|
constructor() {
|
|
4102
|
-
this.element = input.required(...(ngDevMode ?
|
|
4103
|
-
this.additional = input.required(...(ngDevMode ?
|
|
4104
|
-
this.link = input.required(...(ngDevMode ?
|
|
4110
|
+
this.element = input.required({ ...(ngDevMode ? { debugName: "element" } : {}) });
|
|
4111
|
+
this.additional = input.required({ ...(ngDevMode ? { debugName: "additional" } : {}) });
|
|
4112
|
+
this.link = input.required({ ...(ngDevMode ? { debugName: "link" } : {}) });
|
|
4105
4113
|
}
|
|
4106
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
4107
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.
|
|
4114
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: LinkColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4115
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.2", type: LinkColumnComponent, isStandalone: true, selector: "tb-link-column", inputs: { element: { classPropertyName: "element", publicName: "element", isSignal: true, isRequired: true, transformFunction: null }, additional: { classPropertyName: "additional", publicName: "additional", isSignal: true, isRequired: true, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
|
|
4108
4116
|
<a target="{{additional().target}}" href="{{link()}}">
|
|
4109
4117
|
<ng-content></ng-content>
|
|
4110
4118
|
</a>
|
|
4111
4119
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4112
4120
|
}
|
|
4113
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
4121
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: LinkColumnComponent, decorators: [{
|
|
4114
4122
|
type: Component,
|
|
4115
4123
|
args: [{
|
|
4116
4124
|
selector: "tb-link-column",
|
|
@@ -4125,18 +4133,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
|
|
|
4125
4133
|
|
|
4126
4134
|
class ArrayCommaColumnComponent {
|
|
4127
4135
|
constructor() {
|
|
4128
|
-
this.value = input.required(...(ngDevMode ?
|
|
4129
|
-
this.additional = input(3, ...(ngDevMode ?
|
|
4130
|
-
this.displayArray = computed(() => (this.value() || []).slice(0, this.additional()), ...(ngDevMode ?
|
|
4136
|
+
this.value = input.required({ ...(ngDevMode ? { debugName: "value" } : {}) });
|
|
4137
|
+
this.additional = input(3, { ...(ngDevMode ? { debugName: "additional" } : {}) });
|
|
4138
|
+
this.displayArray = computed(() => (this.value() || []).slice(0, this.additional()), { ...(ngDevMode ? { debugName: "displayArray" } : {}) });
|
|
4131
4139
|
}
|
|
4132
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
4133
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
4140
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: ArrayCommaColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4141
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: ArrayCommaColumnComponent, isStandalone: true, selector: "tb-comma-array-column", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, additional: { classPropertyName: "additional", publicName: "additional", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
|
|
4134
4142
|
@for(val of displayArray(); track $index){
|
|
4135
4143
|
{{val + (!$last ? ',' : '')}}
|
|
4136
4144
|
}
|
|
4137
4145
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4138
4146
|
}
|
|
4139
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
4147
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: ArrayCommaColumnComponent, decorators: [{
|
|
4140
4148
|
type: Component,
|
|
4141
4149
|
args: [{
|
|
4142
4150
|
selector: 'tb-comma-array-column',
|
|
@@ -4150,19 +4158,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
|
|
|
4150
4158
|
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], additional: [{ type: i0.Input, args: [{ isSignal: true, alias: "additional", required: false }] }] } });
|
|
4151
4159
|
class ArrayNewLineColumnComponent {
|
|
4152
4160
|
constructor() {
|
|
4153
|
-
this.value = input.required(...(ngDevMode ?
|
|
4154
|
-
this.additional = input(3, ...(ngDevMode ?
|
|
4155
|
-
this.displayArray = computed(() => (this.value() || []).slice(0, this.additional()), ...(ngDevMode ?
|
|
4161
|
+
this.value = input.required({ ...(ngDevMode ? { debugName: "value" } : {}) });
|
|
4162
|
+
this.additional = input(3, { ...(ngDevMode ? { debugName: "additional" } : {}) });
|
|
4163
|
+
this.displayArray = computed(() => (this.value() || []).slice(0, this.additional()), { ...(ngDevMode ? { debugName: "displayArray" } : {}) });
|
|
4156
4164
|
}
|
|
4157
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
4158
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
4165
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: ArrayNewLineColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4166
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: ArrayNewLineColumnComponent, isStandalone: true, selector: "tb-new-line-array-column", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, additional: { classPropertyName: "additional", publicName: "additional", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
|
|
4159
4167
|
@for(val of displayArray(); track $index){
|
|
4160
4168
|
{{val}}
|
|
4161
4169
|
@if(!$last){ <br/> }
|
|
4162
4170
|
}
|
|
4163
4171
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4164
4172
|
}
|
|
4165
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
4173
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: ArrayNewLineColumnComponent, decorators: [{
|
|
4166
4174
|
type: Component,
|
|
4167
4175
|
args: [{
|
|
4168
4176
|
selector: 'tb-new-line-array-column',
|
|
@@ -4188,10 +4196,10 @@ class InitializationComponent {
|
|
|
4188
4196
|
this.$defaultTemplate = viewChild.required('default');
|
|
4189
4197
|
this.$defaultWithIcon = viewChild.required('defaultWithIcon');
|
|
4190
4198
|
}
|
|
4191
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
4192
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
4199
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: InitializationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4200
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: InitializationComponent, isStandalone: true, selector: "initialization", viewQueries: [{ propertyName: "$linkTemplate", first: true, predicate: ["link"], descendants: true, isSignal: true }, { propertyName: "$routerLinkTemplate", first: true, predicate: ["routerLink"], descendants: true, isSignal: true }, { propertyName: "$linkWithIconTemplate", first: true, predicate: ["linkWithIcon"], descendants: true, isSignal: true }, { propertyName: "$routerLinkWithIconTemplate", first: true, predicate: ["routerLinkWithIcon"], descendants: true, isSignal: true }, { propertyName: "$imageUrlTemplate", first: true, predicate: ["imageUrl"], descendants: true, isSignal: true }, { propertyName: "$arrayNewLineTemplate", first: true, predicate: ["arrayNewLine"], descendants: true, isSignal: true }, { propertyName: "$arrayCommaTemplate", first: true, predicate: ["arrayComma"], descendants: true, isSignal: true }, { propertyName: "$defaultTemplate", first: true, predicate: ["default"], descendants: true, isSignal: true }, { propertyName: "$defaultWithIcon", first: true, predicate: ["defaultWithIcon"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #link let-value='value' let-element='element' let-additional=\"additional\" let-styles=\"innerStyles\">\r\n @let link = additional.link | func : element;\r\n @if(link)\r\n {\r\n <tb-link-column [element]=\"element\" [additional]=\"additional\" [link]=\"$any(link)\">\r\n <span [styler]=\"styles\" [element]=\"element\">{{value}}</span>\r\n </tb-link-column>\r\n }\r\n @else\r\n {\r\n <span [styler]=\"styles\" [element]=\"element\">{{value}}</span>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #routerLink let-value='value' let-element='element' let-additional=\"additional\" let-styles=\"innerStyles\">\r\n @let link = additional.link | func : element;\r\n @if(link)\r\n {\r\n <tb-router-link-column [element]=\"element\" [additional]=\"additional\" [link]=\"$any(link)\">\r\n <span [styler]=\"styles\" [element]=\"element\">{{value}}</span>\r\n </tb-router-link-column>\r\n }\r\n @else\r\n {\r\n <span [styler]=\"styles\" [element]=\"element\">{{value}}</span>\r\n }\r\n\r\n</ng-template>\r\n\r\n<ng-template #linkWithIcon let-value='value' let-element='element' let-additional=\"additional\" let-styles=\"innerStyles\">\r\n @let link = additional.link | func : element;\r\n @if(link)\r\n {\r\n <tb-link-column [element]=\"element\" [additional]=\"additional\" [link]=\"$any(link)\">\r\n <mat-icon [styler]=\"styles\" [element]=\"element\">{{ value}}</mat-icon>\r\n </tb-link-column>\r\n }\r\n @else\r\n {\r\n <span [styler]=\"styles\" [element]=\"element\">{{value}}</span>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #routerLinkWithIcon let-value='value' let-element='element' let-additional=\"additional\" let-styles=\"innerStyles\">\r\n @let link = additional.link | func : element;\r\n @if(link)\r\n {\r\n <tb-link-column [element]=\"element\" [additional]=\"additional\" [link]=\"$any(link)\">\r\n <mat-icon [styler]=\"styles\" [element]=\"element\">{{ value}}</mat-icon>\r\n </tb-link-column>\r\n }\r\n @else\r\n {\r\n <mat-icon [styler]=\"styles\" [element]=\"element\">{{ value}}</mat-icon>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #imageUrl let-value='value'>\r\n <span>\r\n <img height=\"75px\" width=\"75px\" [src]=\"value\" />\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #arrayNewLine let-value='value' let-element='element' let-additional=\"additional\" let-styles=\"innerStyles\">\r\n <tb-new-line-array-column [value]='value' [additional]='additional' [styler]=\"styles\" [element]=\"element\"/>\r\n</ng-template>\r\n\r\n<ng-template #arrayComma let-value='value' let-element='element' let-additional=\"additional\" let-styles=\"innerStyles\">\r\n <tb-comma-array-column [value]='value' [additional]='additional' [styler]=\"styles\" [element]=\"element\"/>\r\n</ng-template>\r\n\r\n<ng-template #default let-value='value' let-element='element' let-styles=\"innerStyles\">\r\n <span [styler]=\"styles\" [element]=\"element\">{{value}}</span>\r\n</ng-template>\r\n\r\n<ng-template #defaultWithIcon let-value='value' let-element='element' let-styles=\"innerStyles\">\r\n <mat-icon [styler]=\"styles\" [element]=\"element\">{{value}}</mat-icon>\r\n</ng-template>\r\n", dependencies: [{ kind: "component", type: LinkColumnComponent, selector: "tb-link-column", inputs: ["element", "additional", "link"] }, { kind: "component", type: ArrayCommaColumnComponent, selector: "tb-comma-array-column", inputs: ["value", "additional"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: RouterLinkColumnComponent, selector: "tb-router-link-column", inputs: ["additional", "element", "link"] }, { kind: "component", type: ArrayNewLineColumnComponent, selector: "tb-new-line-array-column", inputs: ["value", "additional"] }, { kind: "directive", type: StylerDirective, selector: "[styler]", inputs: ["element", "styler"] }, { kind: "pipe", type: FunctionPipe, name: "func" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4193
4201
|
}
|
|
4194
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
4202
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: InitializationComponent, decorators: [{
|
|
4195
4203
|
type: Component,
|
|
4196
4204
|
args: [{ selector: 'initialization', imports: [
|
|
4197
4205
|
LinkColumnComponent, ArrayCommaColumnComponent, MatIcon,
|
|
@@ -4236,10 +4244,10 @@ class TableTemplateService {
|
|
|
4236
4244
|
}
|
|
4237
4245
|
return this.initializationComponentInstance.$defaultTemplate();
|
|
4238
4246
|
}
|
|
4239
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
4240
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.
|
|
4247
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: TableTemplateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
4248
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: TableTemplateService, providedIn: 'root' }); }
|
|
4241
4249
|
}
|
|
4242
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
4250
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: TableTemplateService, decorators: [{
|
|
4243
4251
|
type: Injectable,
|
|
4244
4252
|
args: [{ providedIn: 'root' }]
|
|
4245
4253
|
}] });
|
|
@@ -4250,12 +4258,12 @@ class ColumnHeaderMenuComponent {
|
|
|
4250
4258
|
this.filterStore = inject(WrapperFilterStore, { optional: true });
|
|
4251
4259
|
this.FieldType = FieldType;
|
|
4252
4260
|
this.FilterType = FilterType;
|
|
4253
|
-
this.$metaData = input.required(...(ngDevMode ?
|
|
4254
|
-
this.$fieldType = computed(() => this.$metaData().fieldType, ...(ngDevMode ?
|
|
4255
|
-
this.$filterFieldType = computed(() => this.$metaData().filterLogic?.filterType || this.$fieldType(), ...(ngDevMode ?
|
|
4261
|
+
this.$metaData = input.required({ ...(ngDevMode ? { debugName: "$metaData" } : {}), alias: 'metaData' });
|
|
4262
|
+
this.$fieldType = computed(() => this.$metaData().fieldType, { ...(ngDevMode ? { debugName: "$fieldType" } : {}) });
|
|
4263
|
+
this.$filterFieldType = computed(() => this.$metaData().filterLogic?.filterType || this.$fieldType(), { ...(ngDevMode ? { debugName: "$filterFieldType" } : {}) });
|
|
4256
4264
|
this.$filterValue = computed(() => this.tableState.$filtersArray().filter(isFilterInfo)
|
|
4257
|
-
.find(f => f.key === this.$metaData().key && f.filterType === this.$currentFilterType())?.filterValue, ...(ngDevMode ?
|
|
4258
|
-
this.$trigger = viewChild(MatMenuTrigger, ...(ngDevMode ?
|
|
4265
|
+
.find(f => f.key === this.$metaData().key && f.filterType === this.$currentFilterType())?.filterValue, { ...(ngDevMode ? { debugName: "$filterValue" } : {}) });
|
|
4266
|
+
this.$trigger = viewChild(MatMenuTrigger, { ...(ngDevMode ? { debugName: "$trigger" } : {}) });
|
|
4259
4267
|
this.$metaFilterType = computed(() => {
|
|
4260
4268
|
if (this.$metaData().additional?.filterOptions?.filterableValues) {
|
|
4261
4269
|
return FilterType.In;
|
|
@@ -4279,9 +4287,9 @@ class ColumnHeaderMenuComponent {
|
|
|
4279
4287
|
return FilterType.In;
|
|
4280
4288
|
default: return FilterType.StringContains;
|
|
4281
4289
|
}
|
|
4282
|
-
}, ...(ngDevMode ?
|
|
4283
|
-
this.$currentFilterType = linkedSignal(() => this.$metaFilterType(), ...(ngDevMode ?
|
|
4284
|
-
this.$key = computed(() => this.$metaData().key || crypto.randomUUID(), ...(ngDevMode ?
|
|
4290
|
+
}, { ...(ngDevMode ? { debugName: "$metaFilterType" } : {}) });
|
|
4291
|
+
this.$currentFilterType = linkedSignal(() => this.$metaFilterType(), { ...(ngDevMode ? { debugName: "$currentFilterType" } : {}) });
|
|
4292
|
+
this.$key = computed(() => this.$metaData().key || crypto.randomUUID(), { ...(ngDevMode ? { debugName: "$key" } : {}) });
|
|
4285
4293
|
this.addFilter$ = new Subject();
|
|
4286
4294
|
}
|
|
4287
4295
|
hideField(key) {
|
|
@@ -4321,16 +4329,16 @@ class ColumnHeaderMenuComponent {
|
|
|
4321
4329
|
fieldType: metaData.filterLogic?.filterType || metaData.fieldType,
|
|
4322
4330
|
});
|
|
4323
4331
|
}
|
|
4324
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
4325
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: ColumnHeaderMenuComponent, isStandalone: true, selector: "tb-header-menu", inputs: { $metaData: { classPropertyName: "$metaData", publicName: "metaData", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "$trigger", first: true, predicate: MatMenuTrigger, descendants: true, isSignal: true }], ngImport: i0, template: "@let metaData = $metaData();\r\n@let filterFieldType = $filterFieldType();\r\n@let currentFilterType = $currentFilterType();\r\n\r\n<button #b mat-icon-button class=\"open-menu-icon-button\" disableRipple [matMenuTriggerFor]=\"menu\" [matMenuTriggerRestoreFocus]=\"false\">\r\n <mat-icon class=\"menu-icon\">more_vert</mat-icon>\r\n</button>\r\n<mat-menu #menu=\"matMenu\" >\r\n @if ($fieldType() !== FieldType.NotMapped || !!$metaData().groupByLogic?.groupBy)\r\n {\r\n <button color=\"primary\" mat-menu-item (click)=\"tableState.addGroupByKey(metaData.key)\">\r\n <mat-icon color=\"primary\">group</mat-icon>\r\n <span>Group By</span>\r\n </button>\r\n }\r\n <button color=\"primary\" mat-menu-item (click)=hideField(metaData.key)>\r\n <mat-icon color=\"primary\">visibility_off</mat-icon>\r\n <span>Hide Column</span>\r\n </button>\r\n <div (keydown)=\"$event.stopImmediatePropagation()\">\r\n @let filterValue = $filterValue();\r\n <ng-template matMenuContent>\r\n @if (filterFieldType !== FieldType.NotMapped)\r\n {\r\n <button color=\"primary\" mat-menu-item (click)=\"addFilter(metaData)\">\r\n <mat-icon color=\"primary\">filter_list</mat-icon>\r\n <span>Choose Other Filter</span>\r\n </button>\r\n <ng-form #myForm=\"ngForm\" class=\"tb-header-filter\" (keydown.enter)=\"onEnter(myForm.value, metaData)\">\r\n @if(currentFilterType === FilterType.In)\r\n {\r\n <tb-in-list-filter name=\"filterValue\" [key]=\"metaData.key\" [ngModel]=\"filterValue\" [values]=\"filterValue\" />\r\n }\r\n @else if(filterFieldType === FieldType.Link || filterFieldType === FieldType.String || filterFieldType === FieldType.Array || filterFieldType === FieldType.Unknown || filterFieldType === FieldType.PhoneNumber)\r\n {\r\n <mat-form-field stop-propagation class=\"font auto-width\">\r\n <mat-icon matPrefix class=\"search-icon\">search</mat-icon>\r\n <mat-label>{{currentFilterType === FilterType.StringDoesNotContain ? 'Does Not Contain...' : 'Contains...'}}</mat-label>\r\n <input matInput name=\"filterValue\" [ngModel]=\"undefined\"/>\r\n <span matSuffix [matTooltip]=\"currentFilterType === FilterType.StringDoesNotContain ? 'Contains' : 'Does Not Contain'\">\r\n <button mat-icon-button color=\"primary\" class=\"header-filter-icon-button\" (click)=\"setStringFilterType()\">\r\n <mat-icon [class]=\"{'chosen-icon': currentFilterType === FilterType.StringDoesNotContain }\">\r\n block\r\n </mat-icon>\r\n </button>\r\n </span>\r\n </mat-form-field>\r\n }\r\n @else if (filterFieldType === FieldType.Number || filterFieldType === FieldType.Currency)\r\n {\r\n <mat-form-field class=\"auto-width\" stop-propagation>\r\n <mat-label>{{currentFilterType === FilterType.NumberEquals ? 'Equals...' : currentFilterType === FilterType.NumberLessThan ? 'Less Than...' : 'More Than...'}}</mat-label>\r\n <input matInput type='number' name=\"filterValue\" [ngModel]=\"undefined\" />\r\n <span matPrefix class=\"tb-header-prefix\">\r\n <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.NumberLessThan }\"\r\n (click)=\"setFilterType(FilterType.NumberLessThan)\">\r\n <mat-icon class=\"suffix-icons\"\r\n >\r\n arrow_back_ios</mat-icon>\r\n </button>\r\n <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.NumberGreaterThan }\"\r\n (click)=\"setFilterType(FilterType.NumberGreaterThan)\" >\r\n <mat-icon class=\"suffix-icons\">arrow_forward_ios</mat-icon>\r\n </button>\r\n <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.NumberEquals }\"\r\n (click)=\"setFilterType(FilterType.NumberEquals)\">\r\n <span class=\"suffix-icons\">=</span>\r\n </button>\r\n </span>\r\n </mat-form-field>\r\n }\r\n @else if (filterFieldType === FieldType.Boolean)\r\n {\r\n <div>\r\n <label>\r\n <mat-icon class=\"search-icon\">filter_list</mat-icon>\r\n </label>\r\n <mat-radio-group #ctrl=\"matRadioGroup\" #boolField='ngModel' stop-propagation class=\"font\" name=\"filterValue\" [ngModel]=\"undefined\" >\r\n <mat-radio-button class=\"filter-radio-button\" [value]=\"true\" (click)=\"boolField.control.setValue(true);\">True</mat-radio-button><br/>\r\n <mat-radio-button class=\"filter-radio-button\" [value]=\"false\" (click)=\"boolField.control.setValue(false)\">False</mat-radio-button><br/>\r\n </mat-radio-group>\r\n </div>\r\n }\r\n @else if (filterFieldType === FieldType.Date || filterFieldType === FieldType.DateTime)\r\n {\r\n <mat-form-field class=\"font auto-width\" stop-propagation >\r\n <span matPrefix class=\"tb-header-prefix\">\r\n <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.DateOnOrAfter }\"\r\n (click)=\"setFilterType(FilterType.DateOnOrAfter)\">\r\n <mat-icon class=\"suffix-icons underline\">arrow_forward_ios</mat-icon>\r\n </button>\r\n <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.DateOnOrBefore }\"\r\n (click)=\"setFilterType(FilterType.DateOnOrBefore)\">\r\n <mat-icon class=\"suffix-icons underline\">arrow_back_ios</mat-icon>\r\n </button>\r\n <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.DateIsOn }\"\r\n (click)=\"setFilterType(FilterType.DateIsOn)\">\r\n <span class=\"suffix-icons underline\"> =</span>\r\n </button>\r\n </span>\r\n <mat-label>{{currentFilterType === FilterType.DateIsOn ? 'On...' :\r\n currentFilterType === FilterType.DateOnOrBefore ? 'On or Before...' : 'On or After...'}}</mat-label>\r\n <input matInput name=\"filterValue\" [ngModel]=\"undefined\" [matDatepicker]=\"calendar\"\r\n (click)=\"calendar.open()\"/>\r\n <mat-datepicker-toggle class=\"date-toggle header-filter-icon-button\" matSuffix preventEnter [for]=\"calendar\" />\r\n <mat-datepicker #calendar />\r\n </mat-form-field>\r\n }\r\n <button mat-button disableRipple [disabled]=\"myForm.value.filterValue == undefined\" (click)=\"onEnter(myForm.value, metaData)\">\r\n Apply\r\n </button>\r\n </ng-form>\r\n }\r\n </ng-template>\r\n </div>\r\n\r\n</mat-menu>\r\n\r\n<tb-filter\r\n *opDialog=\"addFilter$; let filter; origin b._elementRef.nativeElement; positionOnScreen { width: 300 }\"\r\n [filter]=\"filter\" (done)=\"addFilter$.next(null)\" />\r\n", styles: [":host{--mat-button-filled-container-height: 24px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 24px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 24px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 24px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 24px;--mat-button-tonal-touch-target-display: none}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.menu-icon{font-size:16px;line-height:16px;vertical-align:top;height:16px;width:16px}.search-icon{margin-right:16px;vertical-align:middle;height:24px;width:24px;color:#0000008a;font-size:21px;line-height:1.125}.font{font-size:14px}.filter-radio-button:first-of-type{padding-left:0}.filter-radio-button{padding:10px 40px;min-width:110px}.auto-width{width:260px;margin:5px;display:block;height:55px}.open-menu-icon-button{height:28px;width:28px;padding:6px}.header-filter-icon-button{height:18px;width:18px;font-size:18px;padding:0;margin:0 2px}.header-filter-icon-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.header-filter-icon-button .chosen-icon,.header-filter-icon-button.chosen-icon ::ng-deep *{height:22px;width:22px;font-size:22px;color:green}mat-icon.mat-icon.suffix-icons.underline{height:20px;text-decoration:underline .1px solid}.chosen-icon mat-icon.mat-icon.suffix-icons.underline{height:24px}::ng-deep .mat-mdc-form-field-icon-prefix:has(.tb-header-prefix),.tb-header-prefix{padding:0;flex-basis:36%}.tb-header-filter ::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}.tb-header-filter ::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"], dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1$4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$4.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i1$4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: InListFilterComponent, selector: "tb-in-list-filter", inputs: ["values", "key"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i8.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i8.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i2$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i2$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: DialogDirective, selector: "[opDialog]", inputs: ["opDialogAddDialogClass", "opDialogConfig", "opDialog", "opDialogOrigin", "opDialogPositionOnScreen"], outputs: ["opDialogClosed"] }, { kind: "component", type: FilterComponent, selector: "tb-filter", inputs: ["filter"], outputs: ["close", "done"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4332
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: ColumnHeaderMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4333
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: ColumnHeaderMenuComponent, isStandalone: true, selector: "tb-header-menu", inputs: { $metaData: { classPropertyName: "$metaData", publicName: "metaData", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "$trigger", first: true, predicate: MatMenuTrigger, descendants: true, isSignal: true }], ngImport: i0, template: "@let metaData = $metaData();\r\n@let filterFieldType = $filterFieldType();\r\n@let currentFilterType = $currentFilterType();\r\n\r\n<button #b mat-icon-button class=\"open-menu-icon-button\" disableRipple [matMenuTriggerFor]=\"menu\" [matMenuTriggerRestoreFocus]=\"false\">\r\n <mat-icon class=\"menu-icon\">more_vert</mat-icon>\r\n</button>\r\n<mat-menu #menu=\"matMenu\" >\r\n @if ($fieldType() !== FieldType.NotMapped || !!$metaData().groupByLogic?.groupBy)\r\n {\r\n <button color=\"primary\" mat-menu-item (click)=\"tableState.addGroupByKey(metaData.key)\">\r\n <mat-icon color=\"primary\">group</mat-icon>\r\n <span>Group By</span>\r\n </button>\r\n }\r\n <button color=\"primary\" mat-menu-item (click)=hideField(metaData.key)>\r\n <mat-icon color=\"primary\">visibility_off</mat-icon>\r\n <span>Hide Column</span>\r\n </button>\r\n @if((metaData.fieldType === FieldType.Number || metaData.fieldType === FieldType.Currency) && !metaData.additional?.footer)\r\n {\r\n <button color=\"primary\" mat-menu-item (click)=\"tableState.addFooter(metaData.key)\">\r\n <mat-icon color=\"primary\">calculate</mat-icon>\r\n <span>Sum</span>\r\n </button>\r\n }\r\n <div (keydown)=\"$event.stopImmediatePropagation()\">\r\n @let filterValue = $filterValue();\r\n <ng-template matMenuContent>\r\n @if (filterFieldType !== FieldType.NotMapped)\r\n {\r\n <button color=\"primary\" mat-menu-item (click)=\"addFilter(metaData)\">\r\n <mat-icon color=\"primary\">filter_list</mat-icon>\r\n <span>Choose Other Filter</span>\r\n </button>\r\n <ng-form #myForm=\"ngForm\" class=\"tb-header-filter\" (keydown.enter)=\"onEnter(myForm.value, metaData)\">\r\n @if(currentFilterType === FilterType.In)\r\n {\r\n <tb-in-list-filter name=\"filterValue\" [key]=\"metaData.key\" [ngModel]=\"filterValue\" [values]=\"filterValue\" />\r\n }\r\n @else if(filterFieldType === FieldType.Link || filterFieldType === FieldType.String || filterFieldType === FieldType.Array || filterFieldType === FieldType.Unknown || filterFieldType === FieldType.PhoneNumber)\r\n {\r\n <mat-form-field stop-propagation class=\"font auto-width\">\r\n <mat-icon matPrefix class=\"search-icon\">search</mat-icon>\r\n <mat-label>{{currentFilterType === FilterType.StringDoesNotContain ? 'Does Not Contain...' : 'Contains...'}}</mat-label>\r\n <input matInput name=\"filterValue\" [ngModel]=\"undefined\"/>\r\n <span matSuffix [matTooltip]=\"currentFilterType === FilterType.StringDoesNotContain ? 'Contains' : 'Does Not Contain'\">\r\n <button mat-icon-button color=\"primary\" class=\"header-filter-icon-button\" (click)=\"setStringFilterType()\">\r\n <mat-icon [class]=\"{'chosen-icon': currentFilterType === FilterType.StringDoesNotContain }\">\r\n block\r\n </mat-icon>\r\n </button>\r\n </span>\r\n </mat-form-field>\r\n }\r\n @else if (filterFieldType === FieldType.Number || filterFieldType === FieldType.Currency)\r\n {\r\n <mat-form-field class=\"auto-width\" stop-propagation>\r\n <mat-label>{{currentFilterType === FilterType.NumberEquals ? 'Equals...' : currentFilterType === FilterType.NumberLessThan ? 'Less Than...' : 'More Than...'}}</mat-label>\r\n <input matInput type='number' name=\"filterValue\" [ngModel]=\"undefined\" />\r\n <span matPrefix class=\"tb-header-prefix\">\r\n <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.NumberLessThan }\"\r\n (click)=\"setFilterType(FilterType.NumberLessThan)\">\r\n <mat-icon class=\"suffix-icons\"\r\n >\r\n arrow_back_ios</mat-icon>\r\n </button>\r\n <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.NumberGreaterThan }\"\r\n (click)=\"setFilterType(FilterType.NumberGreaterThan)\" >\r\n <mat-icon class=\"suffix-icons\">arrow_forward_ios</mat-icon>\r\n </button>\r\n <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.NumberEquals }\"\r\n (click)=\"setFilterType(FilterType.NumberEquals)\">\r\n <span class=\"suffix-icons\">=</span>\r\n </button>\r\n </span>\r\n </mat-form-field>\r\n }\r\n @else if (filterFieldType === FieldType.Boolean)\r\n {\r\n <div>\r\n <label>\r\n <mat-icon class=\"search-icon\">filter_list</mat-icon>\r\n </label>\r\n <mat-radio-group #ctrl=\"matRadioGroup\" #boolField='ngModel' stop-propagation class=\"font\" name=\"filterValue\" [ngModel]=\"undefined\" >\r\n <mat-radio-button class=\"filter-radio-button\" [value]=\"true\" (click)=\"boolField.control.setValue(true);\">True</mat-radio-button><br/>\r\n <mat-radio-button class=\"filter-radio-button\" [value]=\"false\" (click)=\"boolField.control.setValue(false)\">False</mat-radio-button><br/>\r\n </mat-radio-group>\r\n </div>\r\n }\r\n @else if (filterFieldType === FieldType.Date || filterFieldType === FieldType.DateTime)\r\n {\r\n <mat-form-field class=\"font auto-width\" stop-propagation >\r\n <span matPrefix class=\"tb-header-prefix\">\r\n <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.DateOnOrAfter }\"\r\n (click)=\"setFilterType(FilterType.DateOnOrAfter)\">\r\n <mat-icon class=\"suffix-icons underline\">arrow_forward_ios</mat-icon>\r\n </button>\r\n <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.DateOnOrBefore }\"\r\n (click)=\"setFilterType(FilterType.DateOnOrBefore)\">\r\n <mat-icon class=\"suffix-icons underline\">arrow_back_ios</mat-icon>\r\n </button>\r\n <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.DateIsOn }\"\r\n (click)=\"setFilterType(FilterType.DateIsOn)\">\r\n <span class=\"suffix-icons underline\"> =</span>\r\n </button>\r\n </span>\r\n <mat-label>{{currentFilterType === FilterType.DateIsOn ? 'On...' :\r\n currentFilterType === FilterType.DateOnOrBefore ? 'On or Before...' : 'On or After...'}}</mat-label>\r\n <input matInput name=\"filterValue\" [ngModel]=\"undefined\" [matDatepicker]=\"calendar\"\r\n (click)=\"calendar.open()\"/>\r\n <mat-datepicker-toggle class=\"date-toggle header-filter-icon-button\" matSuffix preventEnter [for]=\"calendar\" />\r\n <mat-datepicker #calendar />\r\n </mat-form-field>\r\n }\r\n <button mat-button disableRipple [disabled]=\"myForm.value.filterValue == undefined\" (click)=\"onEnter(myForm.value, metaData)\">\r\n Apply\r\n </button>\r\n </ng-form>\r\n }\r\n </ng-template>\r\n </div>\r\n\r\n</mat-menu>\r\n\r\n<tb-filter\r\n *opDialog=\"addFilter$; let filter; origin b._elementRef.nativeElement; positionOnScreen { width: 300 }\"\r\n [filter]=\"filter\" (done)=\"addFilter$.next(null)\" />\r\n", styles: [":host{--mat-button-filled-container-height: 24px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 24px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 24px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 24px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 24px;--mat-button-tonal-touch-target-display: none}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.menu-icon{font-size:16px;line-height:16px;vertical-align:top;height:16px;width:16px}.search-icon{margin-right:16px;vertical-align:middle;height:24px;width:24px;color:#0000008a;font-size:21px;line-height:1.125}.font{font-size:14px}.filter-radio-button:first-of-type{padding-left:0}.filter-radio-button{padding:10px 40px;min-width:110px}.auto-width{width:260px;margin:5px;display:block;height:55px}.open-menu-icon-button{height:28px;width:28px;padding:6px}.header-filter-icon-button{height:18px;width:18px;font-size:18px;padding:0;margin:0 2px}.header-filter-icon-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.header-filter-icon-button .chosen-icon,.header-filter-icon-button.chosen-icon ::ng-deep *{height:22px;width:22px;font-size:22px;color:green}mat-icon.mat-icon.suffix-icons.underline{height:20px;text-decoration:underline .1px solid}.chosen-icon mat-icon.mat-icon.suffix-icons.underline{height:24px}::ng-deep .mat-mdc-form-field-icon-prefix:has(.tb-header-prefix),.tb-header-prefix{padding:0;flex-basis:36%}.tb-header-filter ::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}.tb-header-filter ::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"], dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1$4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$4.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i1$4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: InListFilterComponent, selector: "tb-in-list-filter", inputs: ["values", "key"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i8.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i8.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i2$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i2$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: DialogDirective, selector: "[opDialog]", inputs: ["opDialogAddDialogClass", "opDialogConfig", "opDialog", "opDialogOrigin", "opDialogPositionOnScreen"], outputs: ["opDialogClosed"] }, { kind: "component", type: FilterComponent, selector: "tb-filter", inputs: ["filter"], outputs: ["close", "done"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4326
4334
|
}
|
|
4327
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
4335
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: ColumnHeaderMenuComponent, decorators: [{
|
|
4328
4336
|
type: Component,
|
|
4329
4337
|
args: [{ selector: 'tb-header-menu', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
4330
4338
|
MatMenuModule, MatIconModule, MatButtonModule, FormsModule, InListFilterComponent,
|
|
4331
4339
|
MatInputModule, MatTooltipModule, StopPropagationDirective, MatRadioModule, MatDatepickerModule,
|
|
4332
4340
|
DialogDirective, FilterComponent
|
|
4333
|
-
], template: "@let metaData = $metaData();\r\n@let filterFieldType = $filterFieldType();\r\n@let currentFilterType = $currentFilterType();\r\n\r\n<button #b mat-icon-button class=\"open-menu-icon-button\" disableRipple [matMenuTriggerFor]=\"menu\" [matMenuTriggerRestoreFocus]=\"false\">\r\n <mat-icon class=\"menu-icon\">more_vert</mat-icon>\r\n</button>\r\n<mat-menu #menu=\"matMenu\" >\r\n @if ($fieldType() !== FieldType.NotMapped || !!$metaData().groupByLogic?.groupBy)\r\n {\r\n <button color=\"primary\" mat-menu-item (click)=\"tableState.addGroupByKey(metaData.key)\">\r\n <mat-icon color=\"primary\">group</mat-icon>\r\n <span>Group By</span>\r\n </button>\r\n }\r\n <button color=\"primary\" mat-menu-item (click)=hideField(metaData.key)>\r\n <mat-icon color=\"primary\">visibility_off</mat-icon>\r\n <span>Hide Column</span>\r\n </button>\r\n <div (keydown)=\"$event.stopImmediatePropagation()\">\r\n @let filterValue = $filterValue();\r\n <ng-template matMenuContent>\r\n @if (filterFieldType !== FieldType.NotMapped)\r\n {\r\n <button color=\"primary\" mat-menu-item (click)=\"addFilter(metaData)\">\r\n <mat-icon color=\"primary\">filter_list</mat-icon>\r\n <span>Choose Other Filter</span>\r\n </button>\r\n <ng-form #myForm=\"ngForm\" class=\"tb-header-filter\" (keydown.enter)=\"onEnter(myForm.value, metaData)\">\r\n @if(currentFilterType === FilterType.In)\r\n {\r\n <tb-in-list-filter name=\"filterValue\" [key]=\"metaData.key\" [ngModel]=\"filterValue\" [values]=\"filterValue\" />\r\n }\r\n @else if(filterFieldType === FieldType.Link || filterFieldType === FieldType.String || filterFieldType === FieldType.Array || filterFieldType === FieldType.Unknown || filterFieldType === FieldType.PhoneNumber)\r\n {\r\n <mat-form-field stop-propagation class=\"font auto-width\">\r\n <mat-icon matPrefix class=\"search-icon\">search</mat-icon>\r\n <mat-label>{{currentFilterType === FilterType.StringDoesNotContain ? 'Does Not Contain...' : 'Contains...'}}</mat-label>\r\n <input matInput name=\"filterValue\" [ngModel]=\"undefined\"/>\r\n <span matSuffix [matTooltip]=\"currentFilterType === FilterType.StringDoesNotContain ? 'Contains' : 'Does Not Contain'\">\r\n <button mat-icon-button color=\"primary\" class=\"header-filter-icon-button\" (click)=\"setStringFilterType()\">\r\n <mat-icon [class]=\"{'chosen-icon': currentFilterType === FilterType.StringDoesNotContain }\">\r\n block\r\n </mat-icon>\r\n </button>\r\n </span>\r\n </mat-form-field>\r\n }\r\n @else if (filterFieldType === FieldType.Number || filterFieldType === FieldType.Currency)\r\n {\r\n <mat-form-field class=\"auto-width\" stop-propagation>\r\n <mat-label>{{currentFilterType === FilterType.NumberEquals ? 'Equals...' : currentFilterType === FilterType.NumberLessThan ? 'Less Than...' : 'More Than...'}}</mat-label>\r\n <input matInput type='number' name=\"filterValue\" [ngModel]=\"undefined\" />\r\n <span matPrefix class=\"tb-header-prefix\">\r\n <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.NumberLessThan }\"\r\n (click)=\"setFilterType(FilterType.NumberLessThan)\">\r\n <mat-icon class=\"suffix-icons\"\r\n >\r\n arrow_back_ios</mat-icon>\r\n </button>\r\n <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.NumberGreaterThan }\"\r\n (click)=\"setFilterType(FilterType.NumberGreaterThan)\" >\r\n <mat-icon class=\"suffix-icons\">arrow_forward_ios</mat-icon>\r\n </button>\r\n <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.NumberEquals }\"\r\n (click)=\"setFilterType(FilterType.NumberEquals)\">\r\n <span class=\"suffix-icons\">=</span>\r\n </button>\r\n </span>\r\n </mat-form-field>\r\n }\r\n @else if (filterFieldType === FieldType.Boolean)\r\n {\r\n <div>\r\n <label>\r\n <mat-icon class=\"search-icon\">filter_list</mat-icon>\r\n </label>\r\n <mat-radio-group #ctrl=\"matRadioGroup\" #boolField='ngModel' stop-propagation class=\"font\" name=\"filterValue\" [ngModel]=\"undefined\" >\r\n <mat-radio-button class=\"filter-radio-button\" [value]=\"true\" (click)=\"boolField.control.setValue(true);\">True</mat-radio-button><br/>\r\n <mat-radio-button class=\"filter-radio-button\" [value]=\"false\" (click)=\"boolField.control.setValue(false)\">False</mat-radio-button><br/>\r\n </mat-radio-group>\r\n </div>\r\n }\r\n @else if (filterFieldType === FieldType.Date || filterFieldType === FieldType.DateTime)\r\n {\r\n <mat-form-field class=\"font auto-width\" stop-propagation >\r\n <span matPrefix class=\"tb-header-prefix\">\r\n <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.DateOnOrAfter }\"\r\n (click)=\"setFilterType(FilterType.DateOnOrAfter)\">\r\n <mat-icon class=\"suffix-icons underline\">arrow_forward_ios</mat-icon>\r\n </button>\r\n <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.DateOnOrBefore }\"\r\n (click)=\"setFilterType(FilterType.DateOnOrBefore)\">\r\n <mat-icon class=\"suffix-icons underline\">arrow_back_ios</mat-icon>\r\n </button>\r\n <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.DateIsOn }\"\r\n (click)=\"setFilterType(FilterType.DateIsOn)\">\r\n <span class=\"suffix-icons underline\"> =</span>\r\n </button>\r\n </span>\r\n <mat-label>{{currentFilterType === FilterType.DateIsOn ? 'On...' :\r\n currentFilterType === FilterType.DateOnOrBefore ? 'On or Before...' : 'On or After...'}}</mat-label>\r\n <input matInput name=\"filterValue\" [ngModel]=\"undefined\" [matDatepicker]=\"calendar\"\r\n (click)=\"calendar.open()\"/>\r\n <mat-datepicker-toggle class=\"date-toggle header-filter-icon-button\" matSuffix preventEnter [for]=\"calendar\" />\r\n <mat-datepicker #calendar />\r\n </mat-form-field>\r\n }\r\n <button mat-button disableRipple [disabled]=\"myForm.value.filterValue == undefined\" (click)=\"onEnter(myForm.value, metaData)\">\r\n Apply\r\n </button>\r\n </ng-form>\r\n }\r\n </ng-template>\r\n </div>\r\n\r\n</mat-menu>\r\n\r\n<tb-filter\r\n *opDialog=\"addFilter$; let filter; origin b._elementRef.nativeElement; positionOnScreen { width: 300 }\"\r\n [filter]=\"filter\" (done)=\"addFilter$.next(null)\" />\r\n", styles: [":host{--mat-button-filled-container-height: 24px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 24px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 24px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 24px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 24px;--mat-button-tonal-touch-target-display: none}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.menu-icon{font-size:16px;line-height:16px;vertical-align:top;height:16px;width:16px}.search-icon{margin-right:16px;vertical-align:middle;height:24px;width:24px;color:#0000008a;font-size:21px;line-height:1.125}.font{font-size:14px}.filter-radio-button:first-of-type{padding-left:0}.filter-radio-button{padding:10px 40px;min-width:110px}.auto-width{width:260px;margin:5px;display:block;height:55px}.open-menu-icon-button{height:28px;width:28px;padding:6px}.header-filter-icon-button{height:18px;width:18px;font-size:18px;padding:0;margin:0 2px}.header-filter-icon-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.header-filter-icon-button .chosen-icon,.header-filter-icon-button.chosen-icon ::ng-deep *{height:22px;width:22px;font-size:22px;color:green}mat-icon.mat-icon.suffix-icons.underline{height:20px;text-decoration:underline .1px solid}.chosen-icon mat-icon.mat-icon.suffix-icons.underline{height:24px}::ng-deep .mat-mdc-form-field-icon-prefix:has(.tb-header-prefix),.tb-header-prefix{padding:0;flex-basis:36%}.tb-header-filter ::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}.tb-header-filter ::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"] }]
|
|
4341
|
+
], template: "@let metaData = $metaData();\r\n@let filterFieldType = $filterFieldType();\r\n@let currentFilterType = $currentFilterType();\r\n\r\n<button #b mat-icon-button class=\"open-menu-icon-button\" disableRipple [matMenuTriggerFor]=\"menu\" [matMenuTriggerRestoreFocus]=\"false\">\r\n <mat-icon class=\"menu-icon\">more_vert</mat-icon>\r\n</button>\r\n<mat-menu #menu=\"matMenu\" >\r\n @if ($fieldType() !== FieldType.NotMapped || !!$metaData().groupByLogic?.groupBy)\r\n {\r\n <button color=\"primary\" mat-menu-item (click)=\"tableState.addGroupByKey(metaData.key)\">\r\n <mat-icon color=\"primary\">group</mat-icon>\r\n <span>Group By</span>\r\n </button>\r\n }\r\n <button color=\"primary\" mat-menu-item (click)=hideField(metaData.key)>\r\n <mat-icon color=\"primary\">visibility_off</mat-icon>\r\n <span>Hide Column</span>\r\n </button>\r\n @if((metaData.fieldType === FieldType.Number || metaData.fieldType === FieldType.Currency) && !metaData.additional?.footer)\r\n {\r\n <button color=\"primary\" mat-menu-item (click)=\"tableState.addFooter(metaData.key)\">\r\n <mat-icon color=\"primary\">calculate</mat-icon>\r\n <span>Sum</span>\r\n </button>\r\n }\r\n <div (keydown)=\"$event.stopImmediatePropagation()\">\r\n @let filterValue = $filterValue();\r\n <ng-template matMenuContent>\r\n @if (filterFieldType !== FieldType.NotMapped)\r\n {\r\n <button color=\"primary\" mat-menu-item (click)=\"addFilter(metaData)\">\r\n <mat-icon color=\"primary\">filter_list</mat-icon>\r\n <span>Choose Other Filter</span>\r\n </button>\r\n <ng-form #myForm=\"ngForm\" class=\"tb-header-filter\" (keydown.enter)=\"onEnter(myForm.value, metaData)\">\r\n @if(currentFilterType === FilterType.In)\r\n {\r\n <tb-in-list-filter name=\"filterValue\" [key]=\"metaData.key\" [ngModel]=\"filterValue\" [values]=\"filterValue\" />\r\n }\r\n @else if(filterFieldType === FieldType.Link || filterFieldType === FieldType.String || filterFieldType === FieldType.Array || filterFieldType === FieldType.Unknown || filterFieldType === FieldType.PhoneNumber)\r\n {\r\n <mat-form-field stop-propagation class=\"font auto-width\">\r\n <mat-icon matPrefix class=\"search-icon\">search</mat-icon>\r\n <mat-label>{{currentFilterType === FilterType.StringDoesNotContain ? 'Does Not Contain...' : 'Contains...'}}</mat-label>\r\n <input matInput name=\"filterValue\" [ngModel]=\"undefined\"/>\r\n <span matSuffix [matTooltip]=\"currentFilterType === FilterType.StringDoesNotContain ? 'Contains' : 'Does Not Contain'\">\r\n <button mat-icon-button color=\"primary\" class=\"header-filter-icon-button\" (click)=\"setStringFilterType()\">\r\n <mat-icon [class]=\"{'chosen-icon': currentFilterType === FilterType.StringDoesNotContain }\">\r\n block\r\n </mat-icon>\r\n </button>\r\n </span>\r\n </mat-form-field>\r\n }\r\n @else if (filterFieldType === FieldType.Number || filterFieldType === FieldType.Currency)\r\n {\r\n <mat-form-field class=\"auto-width\" stop-propagation>\r\n <mat-label>{{currentFilterType === FilterType.NumberEquals ? 'Equals...' : currentFilterType === FilterType.NumberLessThan ? 'Less Than...' : 'More Than...'}}</mat-label>\r\n <input matInput type='number' name=\"filterValue\" [ngModel]=\"undefined\" />\r\n <span matPrefix class=\"tb-header-prefix\">\r\n <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.NumberLessThan }\"\r\n (click)=\"setFilterType(FilterType.NumberLessThan)\">\r\n <mat-icon class=\"suffix-icons\"\r\n >\r\n arrow_back_ios</mat-icon>\r\n </button>\r\n <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.NumberGreaterThan }\"\r\n (click)=\"setFilterType(FilterType.NumberGreaterThan)\" >\r\n <mat-icon class=\"suffix-icons\">arrow_forward_ios</mat-icon>\r\n </button>\r\n <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.NumberEquals }\"\r\n (click)=\"setFilterType(FilterType.NumberEquals)\">\r\n <span class=\"suffix-icons\">=</span>\r\n </button>\r\n </span>\r\n </mat-form-field>\r\n }\r\n @else if (filterFieldType === FieldType.Boolean)\r\n {\r\n <div>\r\n <label>\r\n <mat-icon class=\"search-icon\">filter_list</mat-icon>\r\n </label>\r\n <mat-radio-group #ctrl=\"matRadioGroup\" #boolField='ngModel' stop-propagation class=\"font\" name=\"filterValue\" [ngModel]=\"undefined\" >\r\n <mat-radio-button class=\"filter-radio-button\" [value]=\"true\" (click)=\"boolField.control.setValue(true);\">True</mat-radio-button><br/>\r\n <mat-radio-button class=\"filter-radio-button\" [value]=\"false\" (click)=\"boolField.control.setValue(false)\">False</mat-radio-button><br/>\r\n </mat-radio-group>\r\n </div>\r\n }\r\n @else if (filterFieldType === FieldType.Date || filterFieldType === FieldType.DateTime)\r\n {\r\n <mat-form-field class=\"font auto-width\" stop-propagation >\r\n <span matPrefix class=\"tb-header-prefix\">\r\n <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.DateOnOrAfter }\"\r\n (click)=\"setFilterType(FilterType.DateOnOrAfter)\">\r\n <mat-icon class=\"suffix-icons underline\">arrow_forward_ios</mat-icon>\r\n </button>\r\n <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.DateOnOrBefore }\"\r\n (click)=\"setFilterType(FilterType.DateOnOrBefore)\">\r\n <mat-icon class=\"suffix-icons underline\">arrow_back_ios</mat-icon>\r\n </button>\r\n <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.DateIsOn }\"\r\n (click)=\"setFilterType(FilterType.DateIsOn)\">\r\n <span class=\"suffix-icons underline\"> =</span>\r\n </button>\r\n </span>\r\n <mat-label>{{currentFilterType === FilterType.DateIsOn ? 'On...' :\r\n currentFilterType === FilterType.DateOnOrBefore ? 'On or Before...' : 'On or After...'}}</mat-label>\r\n <input matInput name=\"filterValue\" [ngModel]=\"undefined\" [matDatepicker]=\"calendar\"\r\n (click)=\"calendar.open()\"/>\r\n <mat-datepicker-toggle class=\"date-toggle header-filter-icon-button\" matSuffix preventEnter [for]=\"calendar\" />\r\n <mat-datepicker #calendar />\r\n </mat-form-field>\r\n }\r\n <button mat-button disableRipple [disabled]=\"myForm.value.filterValue == undefined\" (click)=\"onEnter(myForm.value, metaData)\">\r\n Apply\r\n </button>\r\n </ng-form>\r\n }\r\n </ng-template>\r\n </div>\r\n\r\n</mat-menu>\r\n\r\n<tb-filter\r\n *opDialog=\"addFilter$; let filter; origin b._elementRef.nativeElement; positionOnScreen { width: 300 }\"\r\n [filter]=\"filter\" (done)=\"addFilter$.next(null)\" />\r\n", styles: [":host{--mat-button-filled-container-height: 24px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 24px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 24px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 24px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 24px;--mat-button-tonal-touch-target-display: none}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.menu-icon{font-size:16px;line-height:16px;vertical-align:top;height:16px;width:16px}.search-icon{margin-right:16px;vertical-align:middle;height:24px;width:24px;color:#0000008a;font-size:21px;line-height:1.125}.font{font-size:14px}.filter-radio-button:first-of-type{padding-left:0}.filter-radio-button{padding:10px 40px;min-width:110px}.auto-width{width:260px;margin:5px;display:block;height:55px}.open-menu-icon-button{height:28px;width:28px;padding:6px}.header-filter-icon-button{height:18px;width:18px;font-size:18px;padding:0;margin:0 2px}.header-filter-icon-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.header-filter-icon-button .chosen-icon,.header-filter-icon-button.chosen-icon ::ng-deep *{height:22px;width:22px;font-size:22px;color:green}mat-icon.mat-icon.suffix-icons.underline{height:20px;text-decoration:underline .1px solid}.chosen-icon mat-icon.mat-icon.suffix-icons.underline{height:24px}::ng-deep .mat-mdc-form-field-icon-prefix:has(.tb-header-prefix),.tb-header-prefix{padding:0;flex-basis:36%}.tb-header-filter ::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}.tb-header-filter ::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"] }]
|
|
4334
4342
|
}], propDecorators: { $metaData: [{ type: i0.Input, args: [{ isSignal: true, alias: "metaData", required: true }] }], $trigger: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatMenuTrigger), { isSignal: true }] }] } });
|
|
4335
4343
|
|
|
4336
4344
|
class ColumnTotalPipe {
|
|
@@ -4341,10 +4349,10 @@ class ColumnTotalPipe {
|
|
|
4341
4349
|
return sumBy(dataToCalculate, metaData.key);
|
|
4342
4350
|
}
|
|
4343
4351
|
}
|
|
4344
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
4345
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.
|
|
4352
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: ColumnTotalPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
4353
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: ColumnTotalPipe, isStandalone: true, name: "columnTotal" }); }
|
|
4346
4354
|
}
|
|
4347
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
4355
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: ColumnTotalPipe, decorators: [{
|
|
4348
4356
|
type: Pipe,
|
|
4349
4357
|
args: [{
|
|
4350
4358
|
name: 'columnTotal',
|
|
@@ -4405,9 +4413,9 @@ class ColumnBuilderComponent {
|
|
|
4405
4413
|
this.templateService = inject(TableTemplateService);
|
|
4406
4414
|
this.tableConfig = inject(TableBuilderConfigToken);
|
|
4407
4415
|
this.injector = inject(Injector);
|
|
4408
|
-
this.$columnDef = viewChild(MatColumnDef, ...(ngDevMode ?
|
|
4409
|
-
this.$bodyTemplate = viewChild('body', ...(ngDevMode ?
|
|
4410
|
-
this.$metaData = signal(undefined, ...(ngDevMode ?
|
|
4416
|
+
this.$columnDef = viewChild(MatColumnDef, { ...(ngDevMode ? { debugName: "$columnDef" } : {}) });
|
|
4417
|
+
this.$bodyTemplate = viewChild('body', { ...(ngDevMode ? { debugName: "$bodyTemplate" } : {}) });
|
|
4418
|
+
this.$metaData = signal(undefined, { ...(ngDevMode ? { debugName: "$metaData" } : {}) });
|
|
4411
4419
|
this.$additional = computed(() => {
|
|
4412
4420
|
const metaData = this.$metaData();
|
|
4413
4421
|
if (!metaData)
|
|
@@ -4420,30 +4428,30 @@ class ColumnBuilderComponent {
|
|
|
4420
4428
|
return metaData.additional?.limit || this.tableConfig?.arrayDefaults?.limit;
|
|
4421
4429
|
}
|
|
4422
4430
|
return undefined;
|
|
4423
|
-
}, ...(ngDevMode ?
|
|
4424
|
-
this.$customCell = signal(undefined, ...(ngDevMode ?
|
|
4431
|
+
}, { ...(ngDevMode ? { debugName: "$additional" } : {}) });
|
|
4432
|
+
this.$customCell = signal(undefined, { ...(ngDevMode ? { debugName: "$customCell" } : {}) });
|
|
4425
4433
|
this.$transform = computed(() => {
|
|
4426
4434
|
const metaData = this.$metaData();
|
|
4427
4435
|
if (!metaData)
|
|
4428
4436
|
return;
|
|
4429
4437
|
return createTransformer(metaData, this.config);
|
|
4430
|
-
}, ...(ngDevMode ?
|
|
4438
|
+
}, { ...(ngDevMode ? { debugName: "$transform" } : {}) });
|
|
4431
4439
|
this.$innerTemplate = computed(() => {
|
|
4432
4440
|
const metaData = this.$metaData();
|
|
4433
4441
|
if (!metaData)
|
|
4434
4442
|
return;
|
|
4435
4443
|
return metaData.template || this.$customCell()?.$templateRef() || this.templateService.getTemplate(metaData);
|
|
4436
|
-
}, ...(ngDevMode ?
|
|
4444
|
+
}, { ...(ngDevMode ? { debugName: "$innerTemplate" } : {}) });
|
|
4437
4445
|
this.$showFilters = computed(() => {
|
|
4438
4446
|
const metaData = this.$metaData();
|
|
4439
4447
|
if (!metaData)
|
|
4440
4448
|
return;
|
|
4441
4449
|
const settings = this.state.$tableSettings();
|
|
4442
4450
|
return !(settings.hideColumnHeaderFilters || metaData.noFilter);
|
|
4443
|
-
}, ...(ngDevMode ?
|
|
4451
|
+
}, { ...(ngDevMode ? { debugName: "$showFilters" } : {}) });
|
|
4444
4452
|
this.$outerTemplate = computed(() => {
|
|
4445
4453
|
return this.$customCell()?.columnDef?.cell?.template ?? this.$bodyTemplate();
|
|
4446
|
-
}, ...(ngDevMode ?
|
|
4454
|
+
}, { ...(ngDevMode ? { debugName: "$outerTemplate" } : {}) });
|
|
4447
4455
|
this.$classes = computed(() => {
|
|
4448
4456
|
const metaData = this.$metaData();
|
|
4449
4457
|
if (!metaData)
|
|
@@ -4455,13 +4463,13 @@ class ColumnBuilderComponent {
|
|
|
4455
4463
|
});
|
|
4456
4464
|
}
|
|
4457
4465
|
return metaData.classes;
|
|
4458
|
-
}, ...(ngDevMode ?
|
|
4466
|
+
}, { ...(ngDevMode ? { debugName: "$classes" } : {}) });
|
|
4459
4467
|
this.$styles = computed(() => {
|
|
4460
4468
|
const metaData = this.$metaData();
|
|
4461
4469
|
if (!metaData)
|
|
4462
4470
|
return;
|
|
4463
4471
|
return columnStyles(metaData, this.state.$getUserDefinedWidth(metaData.key)(), this.state.$tableSettingsMinWidth());
|
|
4464
|
-
}, ...(ngDevMode ?
|
|
4472
|
+
}, { ...(ngDevMode ? { debugName: "$styles" } : {}) });
|
|
4465
4473
|
this.viewInited = false;
|
|
4466
4474
|
this.onViewInit = () => { };
|
|
4467
4475
|
this.whenViewInited = (callback) => {
|
|
@@ -4495,12 +4503,12 @@ class ColumnBuilderComponent {
|
|
|
4495
4503
|
metaData.click(element, key, event);
|
|
4496
4504
|
}
|
|
4497
4505
|
}
|
|
4498
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
4499
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
4506
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: ColumnBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4507
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: ColumnBuilderComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "$columnDef", first: true, predicate: MatColumnDef, descendants: true, isSignal: true }, { propertyName: "$bodyTemplate", first: true, predicate: ["body"], descendants: true, isSignal: true }], ngImport: i0, template: "@let metaData = $metaData();\r\n@let customCell = $customCell();\r\n@let styles = $styles()!;\r\n\r\n@if(metaData)\r\n{\r\n <ng-container [matColumnDef]=\"metaData.key\">\r\n\r\n <!-- header -->\r\n <ng-template #myHeader matHeaderCellDef>\r\n <mat-header-cell class=\"column-head\" cdkDrag resizeColumn [style]='styles?.header' [key]=\"metaData.key\"\r\n [class]='metaData.additional?.columnPartClasses?.header'>\r\n <div class=\"header-container\" cdkDragHandle>\r\n @if(!customCell?.columnDef?.headerCell)\r\n {\r\n @if((metaData.fieldType !== FieldType.NotMapped || !!metaData.sortLogic?.sortBy) && !metaData.noSort)\r\n {\r\n <div mat-sort-header style=\"width: 100%\">\r\n {{ metaData.displayName ? metaData.displayName : ( metaData.key | spaceCase ) }}\r\n </div>\r\n }\r\n @else if(metaData.fieldType === FieldType.NotMapped || metaData.noSort)\r\n {\r\n <div style=\"width: 100%\">\r\n {{ metaData.displayName ? metaData.displayName : ( metaData.key | spaceCase ) }}\r\n </div>\r\n }\r\n @if($showFilters())\r\n {\r\n <tb-header-menu #menu [metaData]='metaData' />\r\n }\r\n }\r\n @else\r\n {\r\n <ng-container *ngTemplateOutlet=\"customCell!.columnDef!.headerCell.template; context: {metaData: metaData, styles: styles?.header} \" />\r\n }\r\n </div>\r\n </mat-header-cell>\r\n </ng-template>\r\n \r\n <!-- body -->\r\n <ng-container *matCellDef=\"let element;\">\r\n <ng-container *ngTemplateOutlet=\"$outerTemplate()!; context: { metaData: metaData, element: element , styles: styles?.body, $implicit: element }\"/>\r\n </ng-container>\r\n <ng-template #body let-element='element' >\r\n <mat-cell [matTooltip]=\"metaData.toolTip ? (getTooltip | func : element) : ''\" \r\n [conditionalClasses]='metaData.classes' [element]='element' [styler]='styles.body'\r\n (click)='cellClicked(element, metaData.key, $event)' >\r\n <ng-container *ngTemplateOutlet=\"$innerTemplate()!;\r\n context: {\r\n value: ($transform()! | func : element),\r\n element: element,\r\n additional: $additional(),\r\n innerStyles: styles.innerBody,\r\n $implicit: element\r\n }; Injector: injector\" />\r\n </mat-cell>\r\n </ng-template>\r\n \r\n <!-- footer -->\r\n <ng-template matFooterCellDef>\r\n @if(customCell?.columnDef?.footerCell)\r\n {\r\n <ng-container\r\n *ngTemplateOutlet=\"customCell!.columnDef!.footerCell.template;\r\n context: {metaData: metaData, data: $data, styles : styles.footer }\"/>\r\n }\r\n @else\r\n {\r\n @let data = $data();\r\n <mat-footer-cell [style]='styles.footer' [class]='metaData.additional?.columnPartClasses?.footer'>\r\n @if(!!data?.length && metaData.additional?.footer)\r\n {\r\n <span class=\"bold\">\r\n @switch (metaData.fieldType)\r\n {\r\n @case (FieldType.Currency) { {{ data | columnTotal: metaData | currency }} }\r\n @case (FieldType.Number) { {{ data | columnTotal: metaData | number }} }\r\n }\r\n </span>\r\n }\r\n \r\n </mat-footer-cell>\r\n }\r\n </ng-template>\r\n </ng-container>\r\n}", styles: [".header-container{display:flex;flex-direction:row;width:100%;align-items:center}.negative-currency{color:red}.column-head{position:relative}.bold,.group-footer{font-weight:900}.cdk-drag-preview{background:#fff;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:33%;border-right-width:0px}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.drag-handle{color:#add8e6;cursor:move;margin-right:9px}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "directive", type: i1$6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$6.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$6.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i1$6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i1$6.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ResizeColumnDirective, selector: "[resizeColumn]", inputs: ["resizeColumn", "key"] }, { kind: "directive", type: StylerDirective, selector: "[styler]", inputs: ["element", "styler"] }, { kind: "directive", type: ConditionalClassesDirective, selector: "[conditionalClasses]", inputs: ["element", "conditionalClasses"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "component", type: i3$1.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: ColumnHeaderMenuComponent, selector: "tb-header-menu", inputs: ["metaData"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: FunctionPipe, name: "func" }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }, { kind: "pipe", type: ColumnTotalPipe, name: "columnTotal" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DecimalPipe, name: "number" }], viewProviders: [
|
|
4500
4508
|
{ provide: CDK_DROP_LIST, useExisting: CdkDropList },
|
|
4501
4509
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4502
4510
|
}
|
|
4503
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
4511
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: ColumnBuilderComponent, decorators: [{
|
|
4504
4512
|
type: Component,
|
|
4505
4513
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [
|
|
4506
4514
|
{ provide: CDK_DROP_LIST, useExisting: CdkDropList },
|
|
@@ -4550,10 +4558,10 @@ class DataStore extends ComponentStore {
|
|
|
4550
4558
|
constructor() {
|
|
4551
4559
|
super({ ...defaultDataState });
|
|
4552
4560
|
}
|
|
4553
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
4554
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.
|
|
4561
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: DataStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
4562
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: DataStore }); }
|
|
4555
4563
|
}
|
|
4556
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
4564
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: DataStore, decorators: [{
|
|
4557
4565
|
type: Injectable
|
|
4558
4566
|
}], ctorParameters: () => [] });
|
|
4559
4567
|
|
|
@@ -4717,17 +4725,17 @@ class GenericTableComponent {
|
|
|
4717
4725
|
this._injector = inject(Injector);
|
|
4718
4726
|
this.tableContainer = inject(TableContainerComponent, { optional: true });
|
|
4719
4727
|
this.smallFooter = 10;
|
|
4720
|
-
this.$headerRow = viewChild(MatHeaderRowDef, ...(ngDevMode ?
|
|
4721
|
-
this.$footerRow = viewChild(MatFooterRowDef, ...(ngDevMode ?
|
|
4722
|
-
this.$table = viewChild(MatTable, ...(ngDevMode ?
|
|
4723
|
-
this.$dropList = viewChild(CdkDropList, ...(ngDevMode ?
|
|
4728
|
+
this.$headerRow = viewChild(MatHeaderRowDef, { ...(ngDevMode ? { debugName: "$headerRow" } : {}) });
|
|
4729
|
+
this.$footerRow = viewChild(MatFooterRowDef, { ...(ngDevMode ? { debugName: "$footerRow" } : {}) });
|
|
4730
|
+
this.$table = viewChild(MatTable, { ...(ngDevMode ? { debugName: "$table" } : {}) });
|
|
4731
|
+
this.$dropList = viewChild(CdkDropList, { ...(ngDevMode ? { debugName: "$dropList" } : {}) });
|
|
4724
4732
|
this.selection$ = output({ alias: 'selection' });
|
|
4725
|
-
this.$displayData = input.required(...(ngDevMode ?
|
|
4726
|
-
this.$displayDataLength = computed(() => this.$displayData().length, ...(ngDevMode ?
|
|
4727
|
-
this.$data = input.required(...(ngDevMode ?
|
|
4728
|
-
this.$rows = input([], ...(ngDevMode ?
|
|
4729
|
-
this.$columnInfos = input.required(...(ngDevMode ?
|
|
4730
|
-
this.$dataSource = input.required(...(ngDevMode ?
|
|
4733
|
+
this.$displayData = input.required({ ...(ngDevMode ? { debugName: "$displayData" } : {}), alias: 'displayData' });
|
|
4734
|
+
this.$displayDataLength = computed(() => this.$displayData().length, { ...(ngDevMode ? { debugName: "$displayDataLength" } : {}) });
|
|
4735
|
+
this.$data = input.required({ ...(ngDevMode ? { debugName: "$data" } : {}), alias: 'data' });
|
|
4736
|
+
this.$rows = input([], { ...(ngDevMode ? { debugName: "$rows" } : {}), alias: 'rows' });
|
|
4737
|
+
this.$columnInfos = input.required({ ...(ngDevMode ? { debugName: "$columnInfos" } : {}), alias: 'columnInfos' });
|
|
4738
|
+
this.$dataSource = input.required({ ...(ngDevMode ? { debugName: "$dataSource" } : {}), alias: 'dataSource' });
|
|
4731
4739
|
this.$keys = computed(() => {
|
|
4732
4740
|
const displayed = this.state.$orderedVisibleColumns();
|
|
4733
4741
|
const built = this.$columns();
|
|
@@ -4739,9 +4747,9 @@ class GenericTableComponent {
|
|
|
4739
4747
|
keys.unshift('index');
|
|
4740
4748
|
}
|
|
4741
4749
|
return keys;
|
|
4742
|
-
}, ...(ngDevMode ?
|
|
4750
|
+
}, { ...(ngDevMode ? { debugName: "$keys" } : {}) });
|
|
4743
4751
|
this.keys$ = toObservable(this.$keys);
|
|
4744
|
-
this.$trackBy = input(undefined, ...(ngDevMode ?
|
|
4752
|
+
this.$trackBy = input(undefined, { ...(ngDevMode ? { debugName: "$trackBy" } : {}), alias: 'trackBy' });
|
|
4745
4753
|
this.$trackByFunction = computed(() => {
|
|
4746
4754
|
const trackBy = this.$trackBy();
|
|
4747
4755
|
if (!trackBy)
|
|
@@ -4751,17 +4759,17 @@ class GenericTableComponent {
|
|
|
4751
4759
|
return `${item.level}-${item[initIndexSymbol]}`;
|
|
4752
4760
|
return typeof trackBy === 'function' ? trackBy(item) : item[trackBy];
|
|
4753
4761
|
});
|
|
4754
|
-
}, ...(ngDevMode ?
|
|
4755
|
-
this.$hasFooterMeta = computed(() => this.state.$metaDataArray().some(md => !!md.additional?.footer), ...(ngDevMode ?
|
|
4756
|
-
this.$hasCustomFooter = computed(() => this.$columnInfos()?.some(ci => !!ci.customCell?.columnDef?.footerCell), ...(ngDevMode ?
|
|
4762
|
+
}, { ...(ngDevMode ? { debugName: "$trackByFunction" } : {}) });
|
|
4763
|
+
this.$hasFooterMeta = computed(() => this.state.$metaDataArray().some(md => !!md.additional?.footer), { ...(ngDevMode ? { debugName: "$hasFooterMeta" } : {}) });
|
|
4764
|
+
this.$hasCustomFooter = computed(() => this.$columnInfos()?.some(ci => !!ci.customCell?.columnDef?.footerCell), { ...(ngDevMode ? { debugName: "$hasCustomFooter" } : {}) });
|
|
4757
4765
|
this.$footerRowStyle = computed(() => {
|
|
4758
4766
|
const hasData = !!this.$displayDataLength();
|
|
4759
4767
|
const metaFooter = this.$hasFooterMeta();
|
|
4760
4768
|
const customFooter = this.$hasCustomFooter();
|
|
4761
4769
|
const hasSelectionColumn = this.state.$props().selectionColumn;
|
|
4762
4770
|
return customFooter || hasSelectionColumn || (hasData && metaFooter) ? 'regular-footer' : hasData ? 'no-footer' : 'small-footer';
|
|
4763
|
-
}, ...(ngDevMode ?
|
|
4764
|
-
this.$showFooterRow = computed(() => this.$footerRowStyle() !== 'no-footer', ...(ngDevMode ?
|
|
4771
|
+
}, { ...(ngDevMode ? { debugName: "$footerRowStyle" } : {}) });
|
|
4772
|
+
this.$showFooterRow = computed(() => this.$footerRowStyle() !== 'no-footer', { ...(ngDevMode ? { debugName: "$showFooterRow" } : {}) });
|
|
4765
4773
|
this.injector = Injector.create({
|
|
4766
4774
|
providers: [
|
|
4767
4775
|
{ provide: MatTable, useFactory: () => this.$table() },
|
|
@@ -4769,10 +4777,10 @@ class GenericTableComponent {
|
|
|
4769
4777
|
],
|
|
4770
4778
|
parent: this._injector
|
|
4771
4779
|
});
|
|
4772
|
-
this.$hasIndexColumn = computed(() => this.state.selectSignal(state => state.props.indexColumn)(), ...(ngDevMode ?
|
|
4773
|
-
this.$columns = signal({}, ...(ngDevMode ?
|
|
4774
|
-
this.$showHeader = computed(() => !this.state.$tableSettings().hideColumnHeader, ...(ngDevMode ?
|
|
4775
|
-
this.$paginatorHeight = signal(0, ...(ngDevMode ?
|
|
4780
|
+
this.$hasIndexColumn = computed(() => this.state.selectSignal(state => state.props.indexColumn)(), { ...(ngDevMode ? { debugName: "$hasIndexColumn" } : {}) });
|
|
4781
|
+
this.$columns = signal({}, { ...(ngDevMode ? { debugName: "$columns" } : {}) });
|
|
4782
|
+
this.$showHeader = computed(() => !this.state.$tableSettings().hideColumnHeader, { ...(ngDevMode ? { debugName: "$showHeader" } : {}) });
|
|
4783
|
+
this.$paginatorHeight = signal(0, { ...(ngDevMode ? { debugName: "$paginatorHeight" } : {}) });
|
|
4776
4784
|
this.r = new ResizeObserver(entries => this.$paginatorHeight.set(entries[0]?.contentRect.height || 0));
|
|
4777
4785
|
this.#rr = effect((cleanup) => {
|
|
4778
4786
|
const paginatorWrapper = this.tableContainer?.$paginatorWrapper();
|
|
@@ -4780,9 +4788,9 @@ class GenericTableComponent {
|
|
|
4780
4788
|
return;
|
|
4781
4789
|
this.r.observe(paginatorWrapper.nativeElement);
|
|
4782
4790
|
cleanup(() => { this.r.disconnect(); });
|
|
4783
|
-
}, ...(ngDevMode ?
|
|
4791
|
+
}, { ...(ngDevMode ? { debugName: "#rr" } : {}) });
|
|
4784
4792
|
this.$offset = this.dataStore.selectSignal(s => s.virtualScrollOffset);
|
|
4785
|
-
this.$footerOffset = computed(() => this.$offset()
|
|
4793
|
+
this.$footerOffset = computed(() => this.$useVirtualScroll() ? this.$offset() : this.$paginatorHeight(), { ...(ngDevMode ? { debugName: "$footerOffset" } : {}) });
|
|
4786
4794
|
this.#buildColumnsEffect = effect(() => {
|
|
4787
4795
|
const columnInfos = this.$columnInfos() || [];
|
|
4788
4796
|
const table = this.$table();
|
|
@@ -4798,7 +4806,7 @@ class GenericTableComponent {
|
|
|
4798
4806
|
});
|
|
4799
4807
|
columnInfos.forEach(ci => this.buildColumn(ci));
|
|
4800
4808
|
});
|
|
4801
|
-
}, ...(ngDevMode ?
|
|
4809
|
+
}, { ...(ngDevMode ? { debugName: "#buildColumnsEffect" } : {}) });
|
|
4802
4810
|
this.#buildRowsEffect = effect(() => {
|
|
4803
4811
|
const table = this.$table();
|
|
4804
4812
|
const rows = this.$rows();
|
|
@@ -4812,7 +4820,7 @@ class GenericTableComponent {
|
|
|
4812
4820
|
table.addRowDef(row);
|
|
4813
4821
|
});
|
|
4814
4822
|
});
|
|
4815
|
-
}, ...(ngDevMode ?
|
|
4823
|
+
}, { ...(ngDevMode ? { debugName: "#buildRowsEffect" } : {}) });
|
|
4816
4824
|
this.#buildHeaderRowEffect = effect(() => {
|
|
4817
4825
|
const headerRow = this.$headerRow();
|
|
4818
4826
|
const showHeader = this.$showHeader();
|
|
@@ -4823,7 +4831,7 @@ class GenericTableComponent {
|
|
|
4823
4831
|
else if (headerRow && table)
|
|
4824
4832
|
table.removeHeaderRowDef(headerRow);
|
|
4825
4833
|
});
|
|
4826
|
-
}, ...(ngDevMode ?
|
|
4834
|
+
}, { ...(ngDevMode ? { debugName: "#buildHeaderRowEffect" } : {}) });
|
|
4827
4835
|
this.#buildFooterEffect = effect(() => {
|
|
4828
4836
|
const footerRow = this.$footerRow();
|
|
4829
4837
|
const showFooter = this.$showFooterRow();
|
|
@@ -4834,9 +4842,9 @@ class GenericTableComponent {
|
|
|
4834
4842
|
else if (footerRow && table)
|
|
4835
4843
|
table.removeFooterRowDef(footerRow);
|
|
4836
4844
|
});
|
|
4837
|
-
}, ...(ngDevMode ?
|
|
4838
|
-
this.$usePaginator = computed(() => this.state.$tableSettings().usePaginator, ...(ngDevMode ?
|
|
4839
|
-
this.$useVirtualScroll = computed(() => this.state.$viewType().includes('virtual'), ...(ngDevMode ?
|
|
4845
|
+
}, { ...(ngDevMode ? { debugName: "#buildFooterEffect" } : {}) });
|
|
4846
|
+
this.$usePaginator = computed(() => this.state.$tableSettings().usePaginator, { ...(ngDevMode ? { debugName: "$usePaginator" } : {}) });
|
|
4847
|
+
this.$useVirtualScroll = computed(() => this.state.$viewType().includes('virtual'), { ...(ngDevMode ? { debugName: "$useVirtualScroll" } : {}) });
|
|
4840
4848
|
this.$virtualStart = this.dataStore.selectSignal(d => d.virtualEnds.start);
|
|
4841
4849
|
this.$offsetIndex = computed(() => {
|
|
4842
4850
|
const virtualStart = this.$virtualStart();
|
|
@@ -4849,8 +4857,8 @@ class GenericTableComponent {
|
|
|
4849
4857
|
return pageSize * currentPage;
|
|
4850
4858
|
}
|
|
4851
4859
|
return 0;
|
|
4852
|
-
}, ...(ngDevMode ?
|
|
4853
|
-
this.$hasSelectColumn = computed(() => this.state.selectSignal(state => state.props.selectionColumn)(), ...(ngDevMode ?
|
|
4860
|
+
}, { ...(ngDevMode ? { debugName: "$offsetIndex" } : {}) });
|
|
4861
|
+
this.$hasSelectColumn = computed(() => this.state.selectSignal(state => state.props.selectionColumn)(), { ...(ngDevMode ? { debugName: "$hasSelectColumn" } : {}) });
|
|
4854
4862
|
this.$selection = computed(() => {
|
|
4855
4863
|
const trackBy = this.$trackBy();
|
|
4856
4864
|
if (trackBy) {
|
|
@@ -4866,7 +4874,7 @@ class GenericTableComponent {
|
|
|
4866
4874
|
this.checkForPreviousSelection(model);
|
|
4867
4875
|
});
|
|
4868
4876
|
return model;
|
|
4869
|
-
}, ...(ngDevMode ?
|
|
4877
|
+
}, { ...(ngDevMode ? { debugName: "$selection" } : {}) });
|
|
4870
4878
|
this.selectionChange$ = toObservable(this.$selection).pipe(switchMap(s => s.changed));
|
|
4871
4879
|
this.$selectionChange = toSignal(this.selectionChange$);
|
|
4872
4880
|
this.onSelectionChangeEffect = effect(() => {
|
|
@@ -4874,20 +4882,20 @@ class GenericTableComponent {
|
|
|
4874
4882
|
if (!selectionChange)
|
|
4875
4883
|
return;
|
|
4876
4884
|
untracked(() => this.selection$.emit(selectionChange));
|
|
4877
|
-
}, ...(ngDevMode ?
|
|
4885
|
+
}, { ...(ngDevMode ? { debugName: "onSelectionChangeEffect" } : {}) });
|
|
4878
4886
|
this.$isAllSelected = computed(() => {
|
|
4879
4887
|
this.$selectionChange();
|
|
4880
4888
|
const selected = this.$selection()?.selected;
|
|
4881
4889
|
if (!selected?.length)
|
|
4882
4890
|
return false;
|
|
4883
4891
|
return this.$selectableData()?.length === selected.length;
|
|
4884
|
-
}, ...(ngDevMode ?
|
|
4892
|
+
}, { ...(ngDevMode ? { debugName: "$isAllSelected" } : {}) });
|
|
4885
4893
|
this.$masterToggleChecked = this.$isAllSelected;
|
|
4886
4894
|
this.$masterToggleIndeterminate = computed(() => {
|
|
4887
4895
|
this.$selectionChange();
|
|
4888
4896
|
return !!this.$selection()?.selected.length && !this.$masterToggleChecked();
|
|
4889
|
-
}, ...(ngDevMode ?
|
|
4890
|
-
this.$paginated = computed(() => this.state.$viewType() === 'virtual paginator' || this.state.$viewType() === 'paginator', ...(ngDevMode ?
|
|
4897
|
+
}, { ...(ngDevMode ? { debugName: "$masterToggleIndeterminate" } : {}) });
|
|
4898
|
+
this.$paginated = computed(() => this.state.$viewType() === 'virtual paginator' || this.state.$viewType() === 'paginator', { ...(ngDevMode ? { debugName: "$paginated" } : {}) });
|
|
4891
4899
|
this.$selectableData = computed(() => {
|
|
4892
4900
|
const isGrouped = !!this.state.$groupByData().length;
|
|
4893
4901
|
this.state.$expandGroups();
|
|
@@ -4904,7 +4912,7 @@ class GenericTableComponent {
|
|
|
4904
4912
|
return this.$data();
|
|
4905
4913
|
}
|
|
4906
4914
|
return [];
|
|
4907
|
-
}, ...(ngDevMode ?
|
|
4915
|
+
}, { ...(ngDevMode ? { debugName: "$selectableData" } : {}) });
|
|
4908
4916
|
this.$selectAllMessage = computed(() => {
|
|
4909
4917
|
if (this.$isAllSelected())
|
|
4910
4918
|
return `Deselect all ${this.$selection().selected.length} selected`;
|
|
@@ -4914,7 +4922,7 @@ class GenericTableComponent {
|
|
|
4914
4922
|
message += ' on this page';
|
|
4915
4923
|
}
|
|
4916
4924
|
return message;
|
|
4917
|
-
}, ...(ngDevMode ?
|
|
4925
|
+
}, { ...(ngDevMode ? { debugName: "$selectAllMessage" } : {}) });
|
|
4918
4926
|
this.#onSelectableDataChangeEffect = effect(() => {
|
|
4919
4927
|
const selectableData = this.$selectableData();
|
|
4920
4928
|
untracked(() => {
|
|
@@ -4931,34 +4939,20 @@ class GenericTableComponent {
|
|
|
4931
4939
|
const removed = selected.filter(trackByFunc);
|
|
4932
4940
|
this.$selection().deselect(...removed);
|
|
4933
4941
|
});
|
|
4934
|
-
}, ...(ngDevMode ?
|
|
4935
|
-
this.$tableWidth = linkedSignal(...(ngDevMode ?
|
|
4936
|
-
|
|
4937
|
-
|
|
4938
|
-
|
|
4939
|
-
|
|
4940
|
-
|
|
4941
|
-
|
|
4942
|
-
|
|
4943
|
-
|
|
4944
|
-
|
|
4945
|
-
|
|
4946
|
-
}
|
|
4947
|
-
} }] : [{
|
|
4948
|
-
source: this.state.$getUserDefinedTableWidth,
|
|
4949
|
-
computation: (currentUserDefinedWidth, { source: previousUserDefinedWidth } = { value: null, source: 0 }) => {
|
|
4950
|
-
if (currentUserDefinedWidth) {
|
|
4951
|
-
return ({ width: `${currentUserDefinedWidth}px`, minWidth: 'initial' });
|
|
4952
|
-
}
|
|
4953
|
-
if (wasReset()) {
|
|
4954
|
-
return ({ width: 'initial' });
|
|
4955
|
-
}
|
|
4956
|
-
return {};
|
|
4957
|
-
function wasReset() {
|
|
4958
|
-
return (previousUserDefinedWidth ?? 0) >= 0 && currentUserDefinedWidth == null;
|
|
4959
|
-
}
|
|
4942
|
+
}, { ...(ngDevMode ? { debugName: "#onSelectableDataChangeEffect" } : {}) });
|
|
4943
|
+
this.$tableWidth = linkedSignal({ ...(ngDevMode ? { debugName: "$tableWidth" } : {}), source: this.state.$getUserDefinedTableWidth,
|
|
4944
|
+
computation: (currentUserDefinedWidth, { source: previousUserDefinedWidth } = { value: null, source: 0 }) => {
|
|
4945
|
+
if (currentUserDefinedWidth) {
|
|
4946
|
+
return ({ width: `${currentUserDefinedWidth}px`, minWidth: 'initial' });
|
|
4947
|
+
}
|
|
4948
|
+
if (wasReset()) {
|
|
4949
|
+
return ({ width: 'initial' });
|
|
4950
|
+
}
|
|
4951
|
+
return {};
|
|
4952
|
+
function wasReset() {
|
|
4953
|
+
return (previousUserDefinedWidth ?? 0) >= 0 && currentUserDefinedWidth == null;
|
|
4960
4954
|
}
|
|
4961
|
-
}
|
|
4955
|
+
} });
|
|
4962
4956
|
this.getGroupHeaderTransform = (key, val) => computed(() => {
|
|
4963
4957
|
if (val == undefined || val === 'null')
|
|
4964
4958
|
return 'BLANK';
|
|
@@ -4986,7 +4980,7 @@ class GenericTableComponent {
|
|
|
4986
4980
|
return parseTbSizeToPixels(notPersistedTableSettings.rowHeight) + 'px';
|
|
4987
4981
|
}
|
|
4988
4982
|
return undefined;
|
|
4989
|
-
}, ...(ngDevMode ?
|
|
4983
|
+
}, { ...(ngDevMode ? { debugName: "$rowHeight" } : {}) });
|
|
4990
4984
|
this.$headerHeight = computed(() => {
|
|
4991
4985
|
if (this.state.$userDefinedHeaderHeight()) {
|
|
4992
4986
|
return this.state.$userDefinedHeaderHeight() + 'px';
|
|
@@ -5000,14 +4994,14 @@ class GenericTableComponent {
|
|
|
5000
4994
|
return parseTbSizeToPixels(notPersistedTableSettings.headerHeight) + 'px';
|
|
5001
4995
|
}
|
|
5002
4996
|
return undefined;
|
|
5003
|
-
}, ...(ngDevMode ?
|
|
4997
|
+
}, { ...(ngDevMode ? { debugName: "$headerHeight" } : {}) });
|
|
5004
4998
|
this.$groupHeaderHeight = computed(() => {
|
|
5005
4999
|
const groupHeaderHeight = this.state.$notPersistedTableSettings().groupHeaderHeight;
|
|
5006
5000
|
if (groupHeaderHeight) {
|
|
5007
5001
|
return parseTbSizeToPixels(groupHeaderHeight) + 'px';
|
|
5008
5002
|
}
|
|
5009
5003
|
return this.$rowHeight();
|
|
5010
|
-
}, ...(ngDevMode ?
|
|
5004
|
+
}, { ...(ngDevMode ? { debugName: "$groupHeaderHeight" } : {}) });
|
|
5011
5005
|
this.$footerHeight = computed(() => {
|
|
5012
5006
|
const footerStyle = this.$footerRowStyle();
|
|
5013
5007
|
switch (footerStyle) {
|
|
@@ -5018,10 +5012,10 @@ class GenericTableComponent {
|
|
|
5018
5012
|
default:
|
|
5019
5013
|
return '0px';
|
|
5020
5014
|
}
|
|
5021
|
-
}, ...(ngDevMode ?
|
|
5022
|
-
this.$stickyFooter = computed(() => this.state.$props().stickyFooter || this.state.$isVirtual(), ...(ngDevMode ?
|
|
5023
|
-
this.$rowStyles = computed(() => this.state.$tableSettings().rowStyles || {}, ...(ngDevMode ?
|
|
5024
|
-
this.$rowClasses = computed(() => this.state.$tableSettings().rowClasses || {}, ...(ngDevMode ?
|
|
5015
|
+
}, { ...(ngDevMode ? { debugName: "$footerHeight" } : {}) });
|
|
5016
|
+
this.$stickyFooter = computed(() => this.state.$props().stickyFooter || this.state.$isVirtual(), { ...(ngDevMode ? { debugName: "$stickyFooter" } : {}) });
|
|
5017
|
+
this.$rowStyles = computed(() => this.state.$tableSettings().rowStyles || {}, { ...(ngDevMode ? { debugName: "$rowStyles" } : {}) });
|
|
5018
|
+
this.$rowClasses = computed(() => this.state.$tableSettings().rowClasses || {}, { ...(ngDevMode ? { debugName: "$rowClasses" } : {}) });
|
|
5025
5019
|
this.allOfGroupSelected = (uniqueName) => computed(() => {
|
|
5026
5020
|
//make sure signal is marked dirty when selection or over all data changes
|
|
5027
5021
|
this.$selectionChange();
|
|
@@ -5077,8 +5071,8 @@ class GenericTableComponent {
|
|
|
5077
5071
|
this.$selectFilterKey = computed(() => {
|
|
5078
5072
|
const selectFilter = Object.keys(this.state.$filters()).find(key => key.startsWith('header-column-select'));
|
|
5079
5073
|
return selectFilter;
|
|
5080
|
-
}, ...(ngDevMode ?
|
|
5081
|
-
this.$hasSelectFilter = computed(() => !!this.$selectFilterKey(), ...(ngDevMode ?
|
|
5074
|
+
}, { ...(ngDevMode ? { debugName: "$selectFilterKey" } : {}) });
|
|
5075
|
+
this.$hasSelectFilter = computed(() => !!this.$selectFilterKey(), { ...(ngDevMode ? { debugName: "$hasSelectFilter" } : {}) });
|
|
5082
5076
|
this._onSelect = effect(() => {
|
|
5083
5077
|
const selectionChange = this.$selectionChange();
|
|
5084
5078
|
untracked(() => {
|
|
@@ -5088,7 +5082,7 @@ class GenericTableComponent {
|
|
|
5088
5082
|
this.state.removeFilter(selectFilterKey);
|
|
5089
5083
|
this.addSelectFilter(true);
|
|
5090
5084
|
});
|
|
5091
|
-
}, ...(ngDevMode ?
|
|
5085
|
+
}, { ...(ngDevMode ? { debugName: "_onSelect" } : {}) });
|
|
5092
5086
|
}
|
|
5093
5087
|
#rr;
|
|
5094
5088
|
drop(event) {
|
|
@@ -5180,10 +5174,10 @@ class GenericTableComponent {
|
|
|
5180
5174
|
notSavable: true,
|
|
5181
5175
|
});
|
|
5182
5176
|
}
|
|
5183
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
5184
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: GenericTableComponent, isStandalone: true, selector: "tb-generic-table", inputs: { $displayData: { classPropertyName: "$displayData", publicName: "displayData", isSignal: true, isRequired: true, transformFunction: null }, $data: { classPropertyName: "$data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, $rows: { classPropertyName: "$rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, $columnInfos: { classPropertyName: "$columnInfos", publicName: "columnInfos", isSignal: true, isRequired: true, transformFunction: null }, $dataSource: { classPropertyName: "$dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, $trackBy: { classPropertyName: "$trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection$: "selection" }, viewQueries: [{ propertyName: "$headerRow", first: true, predicate: MatHeaderRowDef, descendants: true, isSignal: true }, { propertyName: "$footerRow", first: true, predicate: MatFooterRowDef, descendants: true, isSignal: true }, { propertyName: "$table", first: true, predicate: MatTable, descendants: true, isSignal: true }, { propertyName: "$dropList", first: true, predicate: CdkDropList, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-table\r\n #table\r\n cdkDropList\r\n cdkDropListLockAxis='x'\r\n cdkDropListOrientation=\"horizontal\"\r\n class=\"table-drag-list\"\r\n [dataSource]=\"$dataSource()\"\r\n [trackBy]=\"$trackByFunction()\"\r\n [style]=\"$tableWidth()\"\r\n (cdkDropListDropped)=\"drop($event)\"\r\n>\r\n\r\n <!-- select column -->\r\n <ng-container matColumnDef=\"select\">\r\n @let selection = $selection();\r\n <mat-header-cell *matHeaderCellDef class=\"select-column\">\r\n <mat-checkbox [checked]=\"!!($masterToggleChecked())\"\r\n [indeterminate]=\"$masterToggleIndeterminate()\"\r\n [matTooltip]=\"$selectAllMessage()\"\r\n (change)=\"$event ? masterToggle() : null\" />\r\n <button mat-icon-button class=\"open-menu-icon-button\" disableRipple [matMenuTriggerFor]=\"menu\" [matMenuTriggerRestoreFocus]=\"false\">\r\n <mat-icon class=\"menu-icon\">more_vert</mat-icon>\r\n </button>\r\n <mat-menu #menu=\"matMenu\" >\r\n <button mat-menu-item>\r\n <mat-slide-toggle [checked]=\"$hasSelectFilter()\" (change)=\"addSelectFilter($event.checked)\">\r\n Show Only Selected\r\n </mat-slide-toggle>\r\n </button>\r\n @if(this.$selection().selected.length)\r\n {\r\n <button mat-menu-item (click)=\"$selection().clear()\">\r\n Clear Selection\r\n </button>\r\n }\r\n <button mat-menu-item (click)=\"selectTop(+i.value)\">\r\n Select top \r\n <input #i class=\"input\" stop-propagation type=\"number\" \r\n placeholder=\"Set Size\"\r\n [value]=\"10\"\r\n [min]=\"1\"\r\n [max]=\"dataStore.state().sortedFilteredDataLength\" />\r\n </button>\r\n </mat-menu>\r\n </mat-header-cell>\r\n\r\n <mat-cell *matCellDef=\"let row\" class=\"select-column\">\r\n <mat-checkbox\r\n [checked]=\"selection.isSelected(row)\"\r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"$event ? selection.toggle(row) : null\"/>\r\n </mat-cell>\r\n\r\n <mat-footer-cell *matFooterCellDef class=\"select-column\">\r\n {{ selection.selected.length }}\r\n </mat-footer-cell>\r\n </ng-container>\r\n\r\n\r\n <!-- index column -->\r\n <ng-container matColumnDef=\"index\">\r\n <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" class=\"index-column\">#\r\n </mat-header-cell>\r\n <mat-cell *matCellDef=\"let i = index; let t\" class=\"index-column\">\r\n {{ 1 + i + $offsetIndex() }}\r\n </mat-cell>\r\n <mat-footer-cell *matFooterCellDef class=\"index-column\" />\r\n </ng-container>\r\n\r\n <!-- Grouping -->\r\n <ng-container matColumnDef=\"groupHeader\">\r\n <mat-cell *matCellDef=\"let row\">\r\n @let expanded = (state.$getIsExpanded | func : row.key : row.uniqueName );\r\n @let customTemplate = (getCustomGroupRowTemplate | func : row.key)();\r\n\r\n <!-- Default group row template -->\r\n <div [style.paddingLeft]=\"row.padding + 'px !important'\" [class]=\"'group-cell'\">\r\n @if($hasSelectColumn())\r\n {\r\n @let contains = (allOfGroupSelected | func : row.uniqueName)();\r\n <mat-checkbox [checked]=\"!!contains.containsAll\"\r\n [indeterminate]=\"!!contains.containsSome && !contains.containsAll\"\r\n [matTooltip]=\"toggleGroupMessage | func : contains.length : contains.containsAll\"\r\n (change)=\"$event ? toggleGroup(row.uniqueName, contains.containsAll) : null\" />\r\n }\r\n <button mat-icon-button (click)=\"setExpanded(row.key, row.uniqueName, !expanded());\">\r\n @if (!expanded())\r\n {\r\n <mat-icon>chevron_right</mat-icon>\r\n }\r\n @else\r\n {\r\n <mat-icon>expand_more</mat-icon>\r\n }\r\n </button>\r\n {{ row.custom ? row.groupHeaderDisplay : ((getGroupHeaderTransform | func : row.key : row.groupHeaderDisplay)() + ` (${row.length})`) }}\r\n </div>\r\n @if(customTemplate)\r\n {\r\n <ng-container *ngTemplateOutlet=\"customTemplate; context: { \r\n $implicit: row, \r\n element: row, \r\n expanded: expanded(), \r\n level: row.level, \r\n key: row.key, \r\n uniqueName: row.uniqueName, \r\n groupHeaderDisplay: row.groupHeaderDisplay, \r\n length: row.length, \r\n padding: row.padding \r\n }\" />\r\n }\r\n @else\r\n {\r\n <ng-container *ngTemplateOutlet=\"state.$props().groupHeaderTemplate!; context: { element: row }\" />\r\n }\r\n </mat-cell>\r\n </ng-container>\r\n\r\n <mat-row\r\n *matRowDef=\"let row; columns: $keys(); let i = index\"\r\n [style.height]=\"$rowHeight()\"\r\n [style.min-height]=\"$rowHeight()\"\r\n [styler]=\"$rowStyles()\"\r\n [element]=\"row\"\r\n [conditionalClasses]=\"$rowClasses()\"\r\n (click)=\"rowClicked(row, $event)\"\r\n />\r\n\r\n <!-- group row -->\r\n <mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\"\r\n style=\"background-color: unset;\"\r\n [style.height]=\"state.$props().groupHeaderHeight ? state.$props().groupHeaderHeight + 'px' : $groupHeaderHeight()\"\r\n [style.min-height]=\"state.$props().groupHeaderHeight ? state.$props().groupHeaderHeight + 'px' : $groupHeaderHeight()\"/>\r\n</mat-table>\r\n\r\n<mat-header-row *matHeaderRowDef=\"$keys(); sticky: state.$props().isSticky\" [style.height]=\"$headerHeight()\"\r\n [style.min-height]=\"$headerHeight()\" [style.top.px]=\"($offset()! * -1)\"/>\r\n<mat-footer-row *matFooterRowDef=\"$keys(); sticky: false \" [style.height]=\"$footerHeight()\" [class.sticky-footer]=\"$stickyFooter()\"\r\n [style.min-height]=\"$footerHeight()\"\r\n [style.bottom.px]=\"$stickyFooter() ? ($footerOffset()) : undefined\"/>\r\n", styles: [":host{--mat-paginator-container-size: var(tb-paginator-container-size, initial)}.select-column{min-width:var(--tb-min-select-column-width, 42px)}.index-column{min-width:var(--tb-min-index-column-width, 42px)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}.group-cell{display:flex;align-items:center;width:var(--tb-group-cell-width);min-width:var(--tb-group-cell-min-width);max-width:var(--tb-group-cell-max-width)}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:var(--tb-cell-padding, 0 0 0 .2rem);line-height:var(--tb-cell-line-height, normal)}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}.sticky-footer{position:sticky;z-index:10}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$6.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$6.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i1$6.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i1$6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i1$6.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i1$6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i1$6.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i1$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: StylerDirective, selector: "[styler]", inputs: ["element", "styler"] }, { kind: "directive", type: ConditionalClassesDirective, selector: "[conditionalClasses]", inputs: ["element", "conditionalClasses"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1$4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "pipe", type: FunctionPipe, name: "func" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5177
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: GenericTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5178
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: GenericTableComponent, isStandalone: true, selector: "tb-generic-table", inputs: { $displayData: { classPropertyName: "$displayData", publicName: "displayData", isSignal: true, isRequired: true, transformFunction: null }, $data: { classPropertyName: "$data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, $rows: { classPropertyName: "$rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, $columnInfos: { classPropertyName: "$columnInfos", publicName: "columnInfos", isSignal: true, isRequired: true, transformFunction: null }, $dataSource: { classPropertyName: "$dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, $trackBy: { classPropertyName: "$trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection$: "selection" }, viewQueries: [{ propertyName: "$headerRow", first: true, predicate: MatHeaderRowDef, descendants: true, isSignal: true }, { propertyName: "$footerRow", first: true, predicate: MatFooterRowDef, descendants: true, isSignal: true }, { propertyName: "$table", first: true, predicate: MatTable, descendants: true, isSignal: true }, { propertyName: "$dropList", first: true, predicate: CdkDropList, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-table\r\n #table\r\n cdkDropList\r\n cdkDropListLockAxis='x'\r\n cdkDropListOrientation=\"horizontal\"\r\n class=\"table-drag-list\"\r\n [dataSource]=\"$dataSource()\"\r\n [trackBy]=\"$trackByFunction()\"\r\n [style]=\"$tableWidth()\"\r\n (cdkDropListDropped)=\"drop($event)\"\r\n>\r\n\r\n <!-- select column -->\r\n <ng-container matColumnDef=\"select\">\r\n @let selection = $selection();\r\n <mat-header-cell *matHeaderCellDef class=\"select-column\">\r\n <mat-checkbox [checked]=\"!!($masterToggleChecked())\"\r\n [indeterminate]=\"$masterToggleIndeterminate()\"\r\n [matTooltip]=\"$selectAllMessage()\"\r\n (change)=\"$event ? masterToggle() : null\" />\r\n <button mat-icon-button class=\"open-menu-icon-button\" disableRipple [matMenuTriggerFor]=\"menu\" [matMenuTriggerRestoreFocus]=\"false\">\r\n <mat-icon class=\"menu-icon\">more_vert</mat-icon>\r\n </button>\r\n <mat-menu #menu=\"matMenu\" >\r\n <button mat-menu-item>\r\n <mat-slide-toggle [checked]=\"$hasSelectFilter()\" (change)=\"addSelectFilter($event.checked)\">\r\n Show Only Selected\r\n </mat-slide-toggle>\r\n </button>\r\n @if(this.$selection().selected.length)\r\n {\r\n <button mat-menu-item (click)=\"$selection().clear()\">\r\n Clear Selection\r\n </button>\r\n }\r\n <button mat-menu-item (click)=\"selectTop(+i.value)\">\r\n Select top \r\n <input #i class=\"input\" stop-propagation type=\"number\" \r\n placeholder=\"Set Size\"\r\n [value]=\"10\"\r\n [min]=\"1\"\r\n [max]=\"dataStore.state().sortedFilteredDataLength\" />\r\n </button>\r\n </mat-menu>\r\n </mat-header-cell>\r\n\r\n <mat-cell *matCellDef=\"let row\" class=\"select-column\">\r\n <mat-checkbox\r\n [checked]=\"selection.isSelected(row)\"\r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"$event ? selection.toggle(row) : null\"/>\r\n </mat-cell>\r\n\r\n <mat-footer-cell *matFooterCellDef class=\"select-column\">\r\n {{ selection.selected.length }}\r\n </mat-footer-cell>\r\n </ng-container>\r\n\r\n\r\n <!-- index column -->\r\n <ng-container matColumnDef=\"index\">\r\n <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" class=\"index-column\">#\r\n </mat-header-cell>\r\n <mat-cell *matCellDef=\"let i = index; let t\" class=\"index-column\">\r\n {{ 1 + i + $offsetIndex() }}\r\n </mat-cell>\r\n <mat-footer-cell *matFooterCellDef class=\"index-column\" />\r\n </ng-container>\r\n\r\n <!-- Grouping -->\r\n <ng-container matColumnDef=\"groupHeader\">\r\n <mat-cell *matCellDef=\"let row\">\r\n @let expanded = (state.$getIsExpanded | func : row.key : row.uniqueName );\r\n @let customTemplate = (getCustomGroupRowTemplate | func : row.key)();\r\n\r\n <!-- Default group row template -->\r\n <div [style.paddingLeft]=\"row.padding + 'px !important'\" [class]=\"'group-cell'\">\r\n @if($hasSelectColumn())\r\n {\r\n @let contains = (allOfGroupSelected | func : row.uniqueName)();\r\n <mat-checkbox [checked]=\"!!contains.containsAll\"\r\n [indeterminate]=\"!!contains.containsSome && !contains.containsAll\"\r\n [matTooltip]=\"toggleGroupMessage | func : contains.length : contains.containsAll\"\r\n (change)=\"$event ? toggleGroup(row.uniqueName, contains.containsAll) : null\" />\r\n }\r\n <button mat-icon-button (click)=\"setExpanded(row.key, row.uniqueName, !expanded());\">\r\n @if (!expanded())\r\n {\r\n <mat-icon>chevron_right</mat-icon>\r\n }\r\n @else\r\n {\r\n <mat-icon>expand_more</mat-icon>\r\n }\r\n </button>\r\n {{ row.custom ? row.groupHeaderDisplay : ((getGroupHeaderTransform | func : row.key : row.groupHeaderDisplay)() + ` (${row.length})`) }}\r\n </div>\r\n @if(customTemplate)\r\n {\r\n <ng-container *ngTemplateOutlet=\"customTemplate; context: { \r\n $implicit: row, \r\n element: row, \r\n expanded: expanded(), \r\n level: row.level, \r\n key: row.key, \r\n uniqueName: row.uniqueName, \r\n groupHeaderDisplay: row.groupHeaderDisplay, \r\n length: row.length, \r\n padding: row.padding \r\n }\" />\r\n }\r\n @else\r\n {\r\n <ng-container *ngTemplateOutlet=\"state.$props().groupHeaderTemplate!; context: { element: row }\" />\r\n }\r\n </mat-cell>\r\n </ng-container>\r\n\r\n <mat-row\r\n *matRowDef=\"let row; columns: $keys(); let i = index\"\r\n [style.height]=\"$rowHeight()\"\r\n [style.min-height]=\"$rowHeight()\"\r\n [styler]=\"$rowStyles()\"\r\n [element]=\"row\"\r\n [conditionalClasses]=\"$rowClasses()\"\r\n (click)=\"rowClicked(row, $event)\"\r\n />\r\n\r\n <!-- group row -->\r\n <mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\"\r\n style=\"background-color: unset;\"\r\n [style.height]=\"state.$props().groupHeaderHeight ? state.$props().groupHeaderHeight + 'px' : $groupHeaderHeight()\"\r\n [style.min-height]=\"state.$props().groupHeaderHeight ? state.$props().groupHeaderHeight + 'px' : $groupHeaderHeight()\"/>\r\n</mat-table>\r\n\r\n<mat-header-row *matHeaderRowDef=\"$keys(); sticky: state.$props().isSticky\" [style.height]=\"$headerHeight()\"\r\n [style.min-height]=\"$headerHeight()\" [style.top.px]=\"($offset()! * -1)\"/>\r\n<mat-footer-row *matFooterRowDef=\"$keys(); sticky: false \" [style.height]=\"$footerHeight()\" [class.sticky-footer]=\"$stickyFooter()\"\r\n [style.min-height]=\"$footerHeight()\"\r\n [style.bottom.px]=\"$stickyFooter() ? ($footerOffset()) : undefined\"/>\r\n", styles: [":host{--mat-paginator-container-size: var(tb-paginator-container-size, initial)}.select-column{min-width:var(--tb-min-select-column-width, 42px)}.index-column{min-width:var(--tb-min-index-column-width, 42px)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}.group-cell{display:flex;align-items:center;width:var(--tb-group-cell-width);min-width:var(--tb-group-cell-min-width);max-width:var(--tb-group-cell-max-width)}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:var(--tb-cell-padding, 0 0 0 .2rem);line-height:var(--tb-cell-line-height, normal)}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}.sticky-footer{position:sticky;z-index:10}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$6.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$6.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i1$6.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i1$6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i1$6.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i1$6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i1$6.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i1$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: StylerDirective, selector: "[styler]", inputs: ["element", "styler"] }, { kind: "directive", type: ConditionalClassesDirective, selector: "[conditionalClasses]", inputs: ["element", "conditionalClasses"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1$4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "pipe", type: FunctionPipe, name: "func" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5185
5179
|
}
|
|
5186
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
5180
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: GenericTableComponent, decorators: [{
|
|
5187
5181
|
type: Component,
|
|
5188
5182
|
args: [{ selector: 'tb-generic-table', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
5189
5183
|
MatTableModule, DragDropModule, MatCheckboxModule, MatButtonModule, MatIconModule, NgTemplateOutlet,
|
|
@@ -5215,7 +5209,7 @@ class ExportToCsvService {
|
|
|
5215
5209
|
|| {};
|
|
5216
5210
|
const tableSettings = (this.state.$notPersistedTableSettings()?.exportSettings || {});
|
|
5217
5211
|
return merge$1({}, globalSettings, tableSettings);
|
|
5218
|
-
}, ...(ngDevMode ?
|
|
5212
|
+
}, { ...(ngDevMode ? { debugName: "$exportSettings" } : {}) });
|
|
5219
5213
|
this.exportToCsv = (data) => {
|
|
5220
5214
|
const hiddenKeys = this.state.selectSignal(s => s.hiddenKeys)();
|
|
5221
5215
|
const meta = this.state.$metaDataArray().filter(md => !md.noExport && !hiddenKeys.includes(md.key));
|
|
@@ -5311,10 +5305,10 @@ class ExportToCsvService {
|
|
|
5311
5305
|
}
|
|
5312
5306
|
return this.datePipe.transform(val, dateFormat);
|
|
5313
5307
|
}
|
|
5314
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
5315
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.
|
|
5308
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: ExportToCsvService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
5309
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: ExportToCsvService }); }
|
|
5316
5310
|
}
|
|
5317
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
5311
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: ExportToCsvService, decorators: [{
|
|
5318
5312
|
type: Injectable
|
|
5319
5313
|
}] });
|
|
5320
5314
|
|
|
@@ -5529,10 +5523,10 @@ class TableBuilderStateStore extends ComponentStore {
|
|
|
5529
5523
|
this.deleteLocalProfilesState({ key, stateKey });
|
|
5530
5524
|
};
|
|
5531
5525
|
}
|
|
5532
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
5533
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.
|
|
5526
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: TableBuilderStateStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
5527
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: TableBuilderStateStore, providedIn: 'root' }); }
|
|
5534
5528
|
}
|
|
5535
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
5529
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: TableBuilderStateStore, decorators: [{
|
|
5536
5530
|
type: Injectable,
|
|
5537
5531
|
args: [{ providedIn: 'root' }]
|
|
5538
5532
|
}], ctorParameters: () => [] });
|
|
@@ -5752,13 +5746,13 @@ class PaginatorComponent {
|
|
|
5752
5746
|
constructor() {
|
|
5753
5747
|
this.state = inject(TableStore);
|
|
5754
5748
|
this.data = inject(DataStore);
|
|
5755
|
-
this.$paginator = viewChild(MatPaginator, ...(ngDevMode ?
|
|
5749
|
+
this.$paginator = viewChild(MatPaginator, { ...(ngDevMode ? { debugName: "$paginator" } : {}) });
|
|
5756
5750
|
this.$dataLength = this.data.selectSignal(d => d.sortedFilteredDataLength);
|
|
5757
5751
|
this.$viewableDataLength = this.data.selectSignal(d => d.sortedFilteredGroupedDataLength);
|
|
5758
5752
|
this.pageEvent$ = toObservable(this.$paginator).pipe(notNull(), switchMap(p => p.page));
|
|
5759
5753
|
this.$pageEvent = toSignal(this.pageEvent$);
|
|
5760
|
-
this.$pageIndexChangeEvent = computed(() => this.$pageEvent()?.pageIndex, ...(ngDevMode ?
|
|
5761
|
-
this.$pageSizeChangeEvent = computed(() => this.$pageEvent()?.pageSize, ...(ngDevMode ?
|
|
5754
|
+
this.$pageIndexChangeEvent = computed(() => this.$pageEvent()?.pageIndex, { ...(ngDevMode ? { debugName: "$pageIndexChangeEvent" } : {}) });
|
|
5755
|
+
this.$pageSizeChangeEvent = computed(() => this.$pageEvent()?.pageSize, { ...(ngDevMode ? { debugName: "$pageSizeChangeEvent" } : {}) });
|
|
5762
5756
|
this.$currentPageData = computed(() => {
|
|
5763
5757
|
const pageEvent = this.$pageEvent();
|
|
5764
5758
|
if (!pageEvent)
|
|
@@ -5771,20 +5765,20 @@ class PaginatorComponent {
|
|
|
5771
5765
|
const pageDetails = mapPaginationEventToCurrentPageDetails(pageEvent);
|
|
5772
5766
|
const dataLength = this.$dataLength();
|
|
5773
5767
|
return ({ ...pageDetails, total: dataLength });
|
|
5774
|
-
}, ...(ngDevMode ?
|
|
5768
|
+
}, { ...(ngDevMode ? { debugName: "$currentPageData" } : {}) });
|
|
5775
5769
|
this.#onPageIndexEffect = effect(() => {
|
|
5776
5770
|
const index = this.$pageIndexChangeEvent();
|
|
5777
5771
|
if (index === undefined)
|
|
5778
5772
|
return;
|
|
5779
5773
|
untracked(() => this.state.setCurrentPage(index));
|
|
5780
|
-
}, ...(ngDevMode ?
|
|
5774
|
+
}, { ...(ngDevMode ? { debugName: "#onPageIndexEffect" } : {}) });
|
|
5781
5775
|
this.#onPageSizeEffect = effect(() => {
|
|
5782
5776
|
const size = this.$pageSizeChangeEvent();
|
|
5783
5777
|
const initialized = this.state.$initializationState() >= InitializationState.Ready;
|
|
5784
5778
|
if (!size || !initialized)
|
|
5785
5779
|
return;
|
|
5786
5780
|
untracked(() => this.state.setUserDefinedPageSize(size));
|
|
5787
|
-
}, ...(ngDevMode ?
|
|
5781
|
+
}, { ...(ngDevMode ? { debugName: "#onPageSizeEffect" } : {}) });
|
|
5788
5782
|
this.#onMetaPageSizeEffect = effect(() => {
|
|
5789
5783
|
const paginator = this.$paginator();
|
|
5790
5784
|
if (!paginator)
|
|
@@ -5792,7 +5786,7 @@ class PaginatorComponent {
|
|
|
5792
5786
|
const metaPageSize = this.state.$pageSize();
|
|
5793
5787
|
const initialized = this.state.$initializationState() >= InitializationState.Ready;
|
|
5794
5788
|
untracked(() => initialized && paginator._changePageSize(metaPageSize));
|
|
5795
|
-
}, ...(ngDevMode ?
|
|
5789
|
+
}, { ...(ngDevMode ? { debugName: "#onMetaPageSizeEffect" } : {}) });
|
|
5796
5790
|
this.onDataLengthEffect = effect(() => {
|
|
5797
5791
|
const paginator = this.$paginator();
|
|
5798
5792
|
const dataLength = this.$viewableDataLength();
|
|
@@ -5806,8 +5800,8 @@ class PaginatorComponent {
|
|
|
5806
5800
|
}
|
|
5807
5801
|
}
|
|
5808
5802
|
});
|
|
5809
|
-
}, ...(ngDevMode ?
|
|
5810
|
-
this.$collapseFooter = computed(() => this.state.selectSignal(state => state.persistedTableSettings.collapseFooter)(), ...(ngDevMode ?
|
|
5803
|
+
}, { ...(ngDevMode ? { debugName: "onDataLengthEffect" } : {}) });
|
|
5804
|
+
this.$collapseFooter = computed(() => this.state.selectSignal(state => state.persistedTableSettings.collapseFooter)(), { ...(ngDevMode ? { debugName: "$collapseFooter" } : {}) });
|
|
5811
5805
|
this.$showAllOption = this.state.selectSignal(s => s.notPersistedTableSettings?.paginatorSettings?.includeAllInOptions);
|
|
5812
5806
|
this.$showAll = this.state.$showAll;
|
|
5813
5807
|
}
|
|
@@ -5821,8 +5815,8 @@ class PaginatorComponent {
|
|
|
5821
5815
|
this.state.toggleCollapseFooter({ collapseFooter: true });
|
|
5822
5816
|
}
|
|
5823
5817
|
}
|
|
5824
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
5825
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
5818
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: PaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5819
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: PaginatorComponent, isStandalone: true, selector: "tb-paginator", viewQueries: [{ propertyName: "$paginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
5826
5820
|
<div class="paginator-row">
|
|
5827
5821
|
@if($currentPageData(); as pageData)
|
|
5828
5822
|
{
|
|
@@ -5851,7 +5845,7 @@ class PaginatorComponent {
|
|
|
5851
5845
|
</div>
|
|
5852
5846
|
`, isInline: true, styles: [":host{--mat-paginator-container-size: var(tb-paginator-container-size, initial)}.select-column{min-width:var(--tb-min-select-column-width, 42px)}.index-column{min-width:var(--tb-min-index-column-width, 42px)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}.group-cell{display:flex;align-items:center;width:var(--tb-group-cell-width);min-width:var(--tb-group-cell-min-width);max-width:var(--tb-group-cell-max-width)}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:var(--tb-cell-padding, 0 0 0 .2rem);line-height:var(--tb-cell-line-height, normal)}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}.sticky-footer{position:sticky;z-index:10}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}.paginator-row{display:flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i1$7.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5853
5847
|
}
|
|
5854
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
5848
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: PaginatorComponent, decorators: [{
|
|
5855
5849
|
type: Component,
|
|
5856
5850
|
args: [{ selector: 'tb-paginator', imports: [MatPaginatorModule, MatButtonModule], template: `
|
|
5857
5851
|
<div class="paginator-row">
|
|
@@ -5897,19 +5891,17 @@ class TableBuilderDataSource extends MatTableDataSource {
|
|
|
5897
5891
|
}
|
|
5898
5892
|
constructor(state, data) {
|
|
5899
5893
|
super([]);
|
|
5900
|
-
this.#$dataSrc = signal([], ...(ngDevMode ?
|
|
5901
|
-
this.$dataSize = signal({ start: 0, end: 0 }, ...(ngDevMode ?
|
|
5902
|
-
equal: (a, b) => a.start === b.start && a.end === b.end
|
|
5903
|
-
}]));
|
|
5894
|
+
this.#$dataSrc = signal([], { ...(ngDevMode ? { debugName: "#$dataSrc" } : {}) });
|
|
5895
|
+
this.$dataSize = signal({ start: 0, end: 0 }, { ...(ngDevMode ? { debugName: "$dataSize" } : {}), equal: (a, b) => a.start === b.start && a.end === b.end });
|
|
5904
5896
|
this._ = effect(() => {
|
|
5905
5897
|
const data = this.#$dataSrc();
|
|
5906
5898
|
const dataSize = this.$dataSize();
|
|
5907
5899
|
untracked(() => this.data = data.slice(dataSize.start, dataSize.end));
|
|
5908
|
-
}, ...(ngDevMode ?
|
|
5900
|
+
}, { ...(ngDevMode ? { debugName: "_" } : {}) });
|
|
5909
5901
|
const $currentPage = state.$currentPage;
|
|
5910
5902
|
const $pageSize = state.$pageSize;
|
|
5911
5903
|
const $virtualEnds = data.selectSignal(d => d.virtualEnds);
|
|
5912
|
-
const $dataLength = computed(() => this.#$dataSrc().length, ...(ngDevMode ?
|
|
5904
|
+
const $dataLength = computed(() => this.#$dataSrc().length, { ...(ngDevMode ? { debugName: "$dataLength" } : {}) });
|
|
5913
5905
|
this.$dataSize = computed(() => {
|
|
5914
5906
|
const viewType = state.$viewType();
|
|
5915
5907
|
const dataLength = $dataLength();
|
|
@@ -5927,7 +5919,7 @@ class TableBuilderDataSource extends MatTableDataSource {
|
|
|
5927
5919
|
return ({ start: 0, end: dataLength });
|
|
5928
5920
|
}
|
|
5929
5921
|
return ({ start: virtualEnds.start, end: virtualEnds.end });
|
|
5930
|
-
}, ...(ngDevMode ?
|
|
5922
|
+
}, { ...(ngDevMode ? { debugName: "$dataSize" } : {}) });
|
|
5931
5923
|
}
|
|
5932
5924
|
connect() {
|
|
5933
5925
|
return super.connect();
|
|
@@ -5970,12 +5962,12 @@ class GroupByListComponent {
|
|
|
5970
5962
|
name: dict[gbk.key].displayName || gbk.key,
|
|
5971
5963
|
sort: this.tableStore.getGroupBySortDirection(gbk.key)(),
|
|
5972
5964
|
}));
|
|
5973
|
-
}, ...(ngDevMode ?
|
|
5965
|
+
}, { ...(ngDevMode ? { debugName: "$groups" } : {}) });
|
|
5974
5966
|
}
|
|
5975
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
5976
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
5967
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: GroupByListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5968
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: GroupByListComponent, isStandalone: true, selector: "group-by-list", ngImport: i0, template: "<span class=\"tb-group-label\">Group By:</span>\r\n<mat-chip-set>\r\n @for (groupBy of $groups(); track groupBy.key)\r\n {\r\n @if($index > 0)\r\n {\r\n <mat-icon class=\"nested-arrow\">arrow_right</mat-icon>\r\n }\r\n <mat-chip (removed)=\"tableStore.removeGroupByKey(groupBy.key)\">\r\n <span class=\"chip-c\">\r\n {{groupBy.name | spaceCase}}\r\n <mat-icon stop-propagation class=\"sort-icon\" (click)=\"tableStore.cycleGroupBySortDirection(groupBy.key)\">\r\n @if (groupBy.sort === 'asc'){ arrow_upward }\r\n @else if (groupBy.sort === 'desc') { arrow_downward } \r\n @else { swap_vert }\r\n </mat-icon>\r\n </span>\r\n <mat-icon matChipRemove>cancel</mat-icon>\r\n </mat-chip>\r\n }\r\n</mat-chip-set>\r\n", styles: [".tb-group-label{font-weight:bolder;padding-right:15px}:host{display:flex;padding-left:8px;align-items:center}:host mat-chip-set mat-chip{margin:0}:host mat-chip-set .nested-arrow{display:flex;width:15px;justify-content:center}.chip-c{display:flex;align-items:center}.sort-icon{cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i4$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: i4$1.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i4$1.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5977
5969
|
}
|
|
5978
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
5970
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: GroupByListComponent, decorators: [{
|
|
5979
5971
|
type: Component,
|
|
5980
5972
|
args: [{ selector: 'group-by-list', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
5981
5973
|
MatChipsModule, MatIconModule, SpaceCasePipe, StopPropagationDirective
|
|
@@ -5986,15 +5978,15 @@ class ProfilesMenuComponent {
|
|
|
5986
5978
|
constructor() {
|
|
5987
5979
|
this.stateService = inject(TableBuilderStateStore);
|
|
5988
5980
|
this.tableStore = inject(TableStore);
|
|
5989
|
-
this.$tableId = input.required(...(ngDevMode ?
|
|
5990
|
-
this.$isMatMenuChild = input(false, ...(ngDevMode ?
|
|
5991
|
-
this.trigger = viewChild('trigger', ...(ngDevMode ?
|
|
5981
|
+
this.$tableId = input.required({ ...(ngDevMode ? { debugName: "$tableId" } : {}), alias: 'tableId' });
|
|
5982
|
+
this.$isMatMenuChild = input(false, { ...(ngDevMode ? { debugName: "$isMatMenuChild" } : {}), alias: 'isMatMenuChild' });
|
|
5983
|
+
this.trigger = viewChild('trigger', { ...(ngDevMode ? { debugName: "trigger" } : {}) });
|
|
5992
5984
|
this.menu = viewChild.required(MatMenu);
|
|
5993
|
-
this.allProfilesPanelOpened = signal(false, ...(ngDevMode ?
|
|
5994
|
-
this.newProfilePanelOpened = signal(false, ...(ngDevMode ?
|
|
5995
|
-
this.$currentProfile = computed(() => this.stateService.$selectLocalProfileCurrentKey(this.$tableId())(), ...(ngDevMode ?
|
|
5996
|
-
this.$defaultProfile = computed(() => this.stateService.$selectLocalProfileDefaultKey(this.$tableId())(), ...(ngDevMode ?
|
|
5997
|
-
this.$keys = computed(() => this.stateService.$selectLocalProfileKeys(this.$tableId())(), ...(ngDevMode ?
|
|
5985
|
+
this.allProfilesPanelOpened = signal(false, { ...(ngDevMode ? { debugName: "allProfilesPanelOpened" } : {}) });
|
|
5986
|
+
this.newProfilePanelOpened = signal(false, { ...(ngDevMode ? { debugName: "newProfilePanelOpened" } : {}) });
|
|
5987
|
+
this.$currentProfile = computed(() => this.stateService.$selectLocalProfileCurrentKey(this.$tableId())(), { ...(ngDevMode ? { debugName: "$currentProfile" } : {}) });
|
|
5988
|
+
this.$defaultProfile = computed(() => this.stateService.$selectLocalProfileDefaultKey(this.$tableId())(), { ...(ngDevMode ? { debugName: "$defaultProfile" } : {}) });
|
|
5989
|
+
this.$keys = computed(() => this.stateService.$selectLocalProfileKeys(this.$tableId())(), { ...(ngDevMode ? { debugName: "$keys" } : {}) });
|
|
5998
5990
|
this.defaultName = 'My Profile';
|
|
5999
5991
|
this.position$ = new Subject();
|
|
6000
5992
|
this.setPosition = (e) => {
|
|
@@ -6022,10 +6014,10 @@ class ProfilesMenuComponent {
|
|
|
6022
6014
|
unsetDefault() {
|
|
6023
6015
|
this.stateService.unsetDefaultFromLocalAndStorage(this.$tableId());
|
|
6024
6016
|
}
|
|
6025
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
6026
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
6017
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: ProfilesMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6018
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: ProfilesMenuComponent, isStandalone: true, selector: "tb-profiles-menu", inputs: { $tableId: { classPropertyName: "$tableId", publicName: "tableId", isSignal: true, isRequired: true, transformFunction: null }, $isMatMenuChild: { classPropertyName: "$isMatMenuChild", publicName: "isMatMenuChild", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "menu", first: true, predicate: MatMenu, descendants: true, isSignal: true }], ngImport: i0, template: "@if(!$isMatMenuChild())\r\n{\r\n <button #trigger=\"matMenuTrigger\" color=\"primary\" mat-icon-button [matMenuTriggerFor]=\"menu\" [matTooltip]=\"'Profiles'\">\r\n <mat-icon color=\"primary\">people</mat-icon>\r\n </button>\r\n}\r\n<mat-menu #menu=\"matMenu\" (closed)=\"addedKey.value = null; allProfilesPanelOpened.set(false); newProfilePanelOpened.set(false)\">\r\n @if(!!$currentProfile())\r\n {\r\n <div mat-menu-item mat-stroked-button [matTooltip]=\"'Save Profile'\" (click)=\"saveState($currentProfile()!)\">\r\n <mat-icon color=\"primary\">save</mat-icon>\r\n <span>{{$currentProfile()}}</span>\r\n </div>\r\n }\r\n @else\r\n {\r\n <div class=\"profile-line\">\r\n <button color=\"primary\" class=\"first-in-line first-button\" mat-stroked-button (click)=\"addState(defaultName, m.checked);\">\r\n <mat-icon class=\"save-for-default-icon button-save-icon\" color=\"primary\">save</mat-icon>\r\n <span>Save as <span class=\"current-name\">{{defaultName}}</span> </span>\r\n </button>\r\n <button stop-propagation mat-icon-button [matTooltip]=\"'Toggle Profile Being Created As Default'\" (click)=\"m.toggle()\" >\r\n <mat-icon style=\"color: green;\">{{m.checked ? 'star' : 'star_border'}}</mat-icon>\r\n </button>\r\n <mat-checkbox #m class=\"display-none\" [checked]=\"true\" />\r\n </div>\r\n }\r\n @if (allProfilesPanelOpened()) {<hr class=\"divider\"/>}\r\n <div mat-menu-item stop-propagation [class]=\"{ hide: !$keys().length, 'all-profile-row': true }\" (click)=\"allProfilesPanelOpened.set(!allProfilesPanelOpened())\">\r\n <div class=\"all-profiles\">\r\n <span>All Profiles</span>\r\n <span class=\"arrow\" [class]=\"`${(allProfilesPanelOpened() ? 'all-profile-arrow-close' : 'all-profile-arrow-open')} all-profile-arrow`\"></span>\r\n </div>\r\n </div>\r\n <div [class]=\"{ hide: !allProfilesPanelOpened(), panel: true }\">\r\n @for (key of $keys() ; track key)\r\n {\r\n <div class=\"profile-line\" [class]=\"key === $currentProfile() ? 'current-in-list' : 'not-current-in-list'\">\r\n <button class=\"menu-item first-in-line\" mat-stroked-button [matTooltip]=\"'Select Profile'\" (click)='stateService.setLocalCurrentState({ tableId: $tableId(), currentStateKey: key})'>\r\n <span>{{key}}</span>\r\n </button>\r\n @if(key !== $defaultProfile())\r\n {\r\n <button stop-propagation mat-icon-button [matTooltip]=\"'Toggle Profile Being Default'\" (click)=\"setDefault(key)\">\r\n <mat-icon style=\"color: green;\">star_border</mat-icon>\r\n </button>\r\n }\r\n @else\r\n {\r\n <button stop-propagation mat-icon-button [matTooltip]=\"'Toggle Profile Being Default'\" (click)=\"unsetDefault()\">\r\n <mat-icon style=\"color: green;\">star</mat-icon>\r\n </button>\r\n }\r\n <button color=\"warn\" class=\"last-in-line\" stop-propagation mat-icon-button [matTooltip]=\"'Delete Profile'\" (click)='stateService.deleteProfileFromLocalAndStorage($tableId(), key)'>\r\n <mat-icon color='warn'>delete_forever</mat-icon>\r\n </button>\r\n </div>\r\n }\r\n <hr class=\"divider\"/>\r\n </div>\r\n <div class=\"add-new-profile-row\" mat-menu-item stop-propagation (click)=\"newProfilePanelOpened.set(!newProfilePanelOpened()); addedKey.focus()\">Add New Profile</div>\r\n <div [class]=\"{ hide: !newProfilePanelOpened(), panel: true }\" >\r\n <div class=\"profile-line\" stop-propagation>\r\n <div class=\"new-name-input\">\r\n <i class=\"input-hint\">Enter New Name</i>\r\n <input #addedKey=\"matInput\" matInput [name]=\"'key'\" />\r\n </div>\r\n <button stop-propagation mat-icon-button [matTooltip]=\"'Toggle Profile Being Created As Default'\" (click)=\"m2.toggle()\" >\r\n <mat-icon style=\"color: green;\">{{m2.checked ? 'star' : 'star_border'}}</mat-icon>\r\n </button>\r\n <mat-checkbox #m2 class=\"display-none\" [ngModel]=\"!$defaultProfile()\" />\r\n </div>\r\n <button class=\"add-button\" color=\"primary\" mat-raised-button [matTooltip]=\"'Create New Profile'\" [disabled]=\"!addedKey.value\" (click)=\"addState(addedKey.value, m2.checked); addedKey.value = null\">\r\n Add\r\n </button>\r\n </div>\r\n</mat-menu>\r\n", styles: [":host ::ng-deep .mat-expansion-panel-header{padding:0}.current-name{color:var(tb-current-profile, blue)}.menu-item{display:inline-flex;width:initial;flex-grow:1}.profile-line{display:flex;justify-content:space-between;align-items:center}.first-in-line{--f-b: 2rem;margin-left:var(--mat-menu-item-with-icon-leading-spacing)}.first-in-line.first-button{height:var(--f-b);margin:.2rem}.first-in-line .button-save-icon{height:var(--f-b);width:var(--f-b);font-size:var(--f-b)}.main-save-button{height:4rem;width:4rem;padding:.5rem}.main-save-button mat-icon{height:3rem;width:3rem;font-size:3rem}.save-for-default-icon{margin:0}.display-none{display:none}.last-in-line{padding-right:var(--mat-menu-item-with-icon-trailing-spacing)}.default-cursor{cursor:default}.as-def{padding-left:var(--mat-menu-item-with-icon-leading-spacing)}.divider{margin:.2px 0}.add-key{max-width:8.5rem;margin-left:2px}.add-key ::ng-deep .mdc-text-field{padding:0}.panel{transition:height .1s}.hide{height:0;min-height:0;overflow:hidden}.open-panel-button{width:100%;height:2.5rem}.current-in-list{border-left:3px solid blue;background-color:#0000ff0d}.not-current-in-list{border-left:3px solid rgba(255,255,255,0)}.add-new-profile-row,.all-profile-row{border-top:rgba(128,128,128,.25) solid 1px}.all-profiles{display:flex;justify-content:space-between}.all-profiles:has(.all-profile-arrow-close){align-items:center}.all-profile-arrow{display:inline-block;height:.7rem;width:.7rem;border-color:#000;transform:rotate(-45deg)}.all-profile-arrow-open{border-left:solid 2px;border-bottom:solid 2px}.all-profile-arrow-close{border-right:solid 2px;border-top:solid 2px}.new-name-input{margin-left:3px;display:flex;flex-direction:column}.new-name-input .input-hint{font-size:smaller;font-weight:200;color:gray}.add-button{height:20px;line-height:20px;margin:3px 0 0 3px}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1$4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6027
6019
|
}
|
|
6028
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
6020
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: ProfilesMenuComponent, decorators: [{
|
|
6029
6021
|
type: Component,
|
|
6030
6022
|
args: [{ selector: 'tb-profiles-menu', imports: [MatIcon, MatTooltip, MatIconButton, MatMenuModule, MatButton, MatInput,
|
|
6031
6023
|
MatCheckbox, StopPropagationDirective, MatInputModule, FormsModule
|
|
@@ -6042,7 +6034,7 @@ class SortMenuComponentStore extends ComponentStore {
|
|
|
6042
6034
|
return;
|
|
6043
6035
|
this.tableState.$selectSorted();
|
|
6044
6036
|
untracked(() => this.setStateFromTableStore());
|
|
6045
|
-
}, ...(ngDevMode ?
|
|
6037
|
+
}, { ...(ngDevMode ? { debugName: "setStoreStateEffect" } : {}) });
|
|
6046
6038
|
this.setStateFromTableStore = () => {
|
|
6047
6039
|
const metaData = this.tableState.$metaData();
|
|
6048
6040
|
const sorted = [...this.tableState.$selectSorted()].map(s => ({
|
|
@@ -6068,10 +6060,10 @@ class SortMenuComponentStore extends ComponentStore {
|
|
|
6068
6060
|
this.setStateFromTableStore();
|
|
6069
6061
|
};
|
|
6070
6062
|
}
|
|
6071
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
6072
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.
|
|
6063
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: SortMenuComponentStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
6064
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: SortMenuComponentStore }); }
|
|
6073
6065
|
}
|
|
6074
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
6066
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: SortMenuComponentStore, decorators: [{
|
|
6075
6067
|
type: Injectable
|
|
6076
6068
|
}], ctorParameters: () => [] });
|
|
6077
6069
|
|
|
@@ -6080,9 +6072,9 @@ class SortMenuComponent {
|
|
|
6080
6072
|
this.SortDirection = SortDirection;
|
|
6081
6073
|
this.tableState = inject(TableStore);
|
|
6082
6074
|
this.store = inject(SortMenuComponentStore);
|
|
6083
|
-
this.$sorted = computed(() => [...this.store.$sorted()], ...(ngDevMode ?
|
|
6084
|
-
this.$notSorted = computed(() => [...this.store.$notSorted()], ...(ngDevMode ?
|
|
6085
|
-
this.$dirty = signal(false, ...(ngDevMode ?
|
|
6075
|
+
this.$sorted = computed(() => [...this.store.$sorted()], { ...(ngDevMode ? { debugName: "$sorted" } : {}) });
|
|
6076
|
+
this.$notSorted = computed(() => [...this.store.$notSorted()], { ...(ngDevMode ? { debugName: "$notSorted" } : {}) });
|
|
6077
|
+
this.$dirty = signal(false, { ...(ngDevMode ? { debugName: "$dirty" } : {}) });
|
|
6086
6078
|
this.apply = () => {
|
|
6087
6079
|
this.$dirty.set(false);
|
|
6088
6080
|
this.tableState.setAllSort(this.store.$sorted());
|
|
@@ -6125,10 +6117,10 @@ class SortMenuComponent {
|
|
|
6125
6117
|
this.$dirty.set(true);
|
|
6126
6118
|
this.store.setDirection(sort);
|
|
6127
6119
|
}
|
|
6128
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
6129
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
6120
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: SortMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6121
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: SortMenuComponent, isStandalone: true, selector: "tb-sort-menu", providers: [SortMenuComponentStore], ngImport: i0, template: "@let dirty = $dirty();\r\n@let sorted = $sorted();\r\n@let notSorted = $notSorted();\r\n\r\n<!-- Menu Trigger -->\r\n<span matTooltip=\"Sort\">\r\n <button color=\"primary\" mat-icon-button [matMenuTriggerFor]=\"menu\">\r\n <mat-icon color=\"primary\">swap_vert</mat-icon>\r\n </button>\r\n</span>\r\n\r\n<!-- Menu -->\r\n<mat-menu #menu=\"matMenu\" class=\"my-mat-menu\" (closed)=\"reset()\">\r\n <div mat-menu-item class=\"menu-button\">\r\n <div class=\"close-button-wrapper\">\r\n <span matTooltip=\"Close\">\r\n <mat-icon>close</mat-icon>\r\n </span>\r\n @if(dirty)\r\n {\r\n <span matTooltip=\"Undo\" stop-propagation (click)=\"reset()\">\r\n <mat-icon>undo</mat-icon>\r\n </span>\r\n }\r\n \r\n </div>\r\n </div>\r\n\r\n <!-- Apply Button -->\r\n <div class=\"apply-button-wrapper\">\r\n <button mat-button color=\"primary\" stop-propagation\r\n [class.apply-border]=\"dirty\" [disabled]=\"!dirty\"\r\n (click)=\"apply()\">\r\n Apply @if (dirty) { Unsaved Changes }\r\n </button>\r\n </div>\r\n\r\n <!-- Default Sorting Text -->\r\n @if (!sorted.length)\r\n {\r\n <div class=\"tip\" >\r\n Sorting List\r\n </div>\r\n }\r\n\r\n <!-- Sorted Menu List -->\r\n <div #sortedGroup=\"cdkDropList\"\r\n class=\"list\"\r\n cdkDropList\r\n [cdkDropListConnectedTo]=\"[notSortedGroup]\"\r\n [cdkDropListData]=\"sorted\"\r\n (cdkDropListDropped)=\"dropIntoSorted($event)\">\r\n\r\n <!-- Menu Item Wrapper -->\r\n @for (sort of sorted; track sort.active)\r\n {\r\n <!-- Menu Item Headers -->\r\n @if (sorted.length > 1)\r\n {\r\n <span class=\"description sort-header\">{{$index === 0 ? 'First By' : 'Then By'}}</span>\r\n }\r\n\r\n <!-- Menu Item -->\r\n <div mat-menu-item cdkDrag class=\"menu-item\">\r\n <div class=\"sort-item\">\r\n <span class=\"sorted-name\">\r\n {{sort.displayName || (sort.active | spaceCase)}}\r\n <span class=\"direction-text\">{{sort.direction}}</span>\r\n </span>\r\n\r\n <!-- Sort Direction Buttons -->\r\n <div class=\"up-down-buttons-wrapper\">\r\n <button class=\"up-down-button up-button\" stop-propagation\r\n (click)=\"setDirection({active:sort.active,direction:SortDirection.asc,displayName:sort.displayName})\">\r\n <mat-icon class=\"up-down-icon\" [class]=\"sort.direction !== SortDirection.asc ? 'light-arrow' : 'dark-arrow'\">\r\n arrow_upward\r\n </mat-icon>\r\n </button>\r\n\r\n <button class=\"up-down-button\" stop-propagation\r\n (click)=\"setDirection({active:sort.active,direction:SortDirection.desc,displayName:sort.displayName})\">\r\n <mat-icon class=\"up-down-icon\" [class]=\"sort.direction === SortDirection.asc ? 'light-arrow' : 'dark-arrow'\">\r\n arrow_downward\r\n </mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n\r\n </div>\r\n\r\n <!-- Default Not Sorted Text -->\r\n @if(!notSorted.length)\r\n {\r\n <div class=\"tip\" >\r\n Not Sorted List\r\n </div>\r\n }\r\n\r\n <!-- Not Sorted Menu List -->\r\n <div #notSortedGroup=\"cdkDropList\"\r\n class=\"list\"\r\n cdkDropList\r\n [cdkDropListConnectedTo]=\"[sortedGroup]\"\r\n [cdkDropListData]=\"notSorted\"\r\n (cdkDropListDropped)=\"dropIntoNotSorted($event)\">\r\n @for (sort of notSorted; track sort.active)\r\n {\r\n <div mat-menu-item class=\"menu-item\" cdkDrag>\r\n <span class=\"not-sorted-name\">{{sort.displayName || (sort.active | spaceCase)}}</span>\r\n </div>\r\n }\r\n </div>\r\n</mat-menu>\r\n", styles: [".cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.list{padding:5px 2px;border-bottom:solid 1px #ccc;color:#000000de;background:#fff}.light-arrow{color:#93b1ea78}.dark-arrow{color:#224e9c}.up-down-button{background-color:#fff;border-radius:30%;border-color:#0ff;padding:1px 1px 0;border-width:.5px;cursor:pointer;height:27px}.mat-icon.up-down-icon{margin-right:0;font-size:20px;font-weight:lighter}.sort-item{display:flex;align-items:center;justify-content:space-between}.up-down-buttons-wrapper{margin-left:2rem}.up-button{margin-right:.3rem}.mat-mdc-menu-item.menu-item,.mat-mdc-menu-item.menu-button{min-height:initial;padding:0 3px;line-height:25px;height:30px}.mat-mdc-menu-item.menu-item{cursor:move}.sorted-name{color:#224e9c;font-size:17px;font-weight:700}.not-sorted-name{color:#93b1ea;font-size:17px;font-weight:700}.apply-border{border:#224e9c solid .5px}.apply-border:hover{background-color:#faebd7}.apply-button-wrapper{display:grid;justify-content:center}.sort-header{font-size:10px;font-style:italic}.tip{padding:0 3px;color:#d3d3d3}.direction-text{font-size:small;font-weight:400}.close-button-wrapper{display:flex;flex-direction:row-reverse}\n"], dependencies: [{ kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1$4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6130
6122
|
}
|
|
6131
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
6123
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: SortMenuComponent, decorators: [{
|
|
6132
6124
|
type: Component,
|
|
6133
6125
|
args: [{ selector: 'tb-sort-menu', providers: [SortMenuComponentStore], changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
6134
6126
|
MatTooltipModule, MatButtonModule, MatIconModule, MatMenuModule, StopPropagationDirective, DragDropModule,
|
|
@@ -6146,7 +6138,7 @@ class ResetMenuComponent {
|
|
|
6146
6138
|
return Object.values(this.state.$filters())
|
|
6147
6139
|
.filter(f => (isCustomFilter(f) && f.active) || f.filterValue != undefined)
|
|
6148
6140
|
.length;
|
|
6149
|
-
}, ...(ngDevMode ?
|
|
6141
|
+
}, { ...(ngDevMode ? { debugName: "$filtersSet" } : {}) });
|
|
6150
6142
|
this.$sortSet = computed(() => {
|
|
6151
6143
|
const sorts = this.state.$selectSorted();
|
|
6152
6144
|
if (!sorts.length)
|
|
@@ -6155,14 +6147,14 @@ class ResetMenuComponent {
|
|
|
6155
6147
|
if (!preSorts.length)
|
|
6156
6148
|
return true;
|
|
6157
6149
|
return !sortsAreSame(preSorts, sorts);
|
|
6158
|
-
}, ...(ngDevMode ?
|
|
6159
|
-
this.$groupBySet = computed(() => this.state.$groupByData().length || this.state.$userDefinedNoGroups(), ...(ngDevMode ?
|
|
6160
|
-
this.$hiddenSet = computed(() => this.state.$hiddenKeys().length, ...(ngDevMode ?
|
|
6161
|
-
this.$orderSet = computed(() => Object.keys(this.state.$userDefinedOrder()).length, ...(ngDevMode ?
|
|
6162
|
-
this.$widthsSet = computed(() => Object.keys(this.state.$getUserDefinedWidths()).length, ...(ngDevMode ?
|
|
6150
|
+
}, { ...(ngDevMode ? { debugName: "$sortSet" } : {}) });
|
|
6151
|
+
this.$groupBySet = computed(() => this.state.$groupByData().length || this.state.$userDefinedNoGroups(), { ...(ngDevMode ? { debugName: "$groupBySet" } : {}) });
|
|
6152
|
+
this.$hiddenSet = computed(() => this.state.$hiddenKeys().length, { ...(ngDevMode ? { debugName: "$hiddenSet" } : {}) });
|
|
6153
|
+
this.$orderSet = computed(() => Object.keys(this.state.$userDefinedOrder()).length, { ...(ngDevMode ? { debugName: "$orderSet" } : {}) });
|
|
6154
|
+
this.$widthsSet = computed(() => Object.keys(this.state.$getUserDefinedWidths()).length, { ...(ngDevMode ? { debugName: "$widthsSet" } : {}) });
|
|
6163
6155
|
this.$rowHeightSet = this.state.$userDefinedRowHeight;
|
|
6164
6156
|
this.headerHeightSet = this.state.$userDefinedHeaderHeight;
|
|
6165
|
-
this.pageSizeSet = computed(() => this.state.$userDefinedPageSize() && this.state.$userDefinedPageSize() !== this.state.selectSignal(s => s.pageSize)(), ...(ngDevMode ?
|
|
6157
|
+
this.pageSizeSet = computed(() => this.state.$userDefinedPageSize() && this.state.$userDefinedPageSize() !== this.state.selectSignal(s => s.pageSize)(), { ...(ngDevMode ? { debugName: "pageSizeSet" } : {}) });
|
|
6166
6158
|
this.showAllSet = this.state.selectSignal(s => s.userDefined.showAll);
|
|
6167
6159
|
this.$set = computed(() => {
|
|
6168
6160
|
const arr = [];
|
|
@@ -6197,7 +6189,7 @@ class ResetMenuComponent {
|
|
|
6197
6189
|
arr.push('Show All');
|
|
6198
6190
|
}
|
|
6199
6191
|
return arr;
|
|
6200
|
-
}, ...(ngDevMode ?
|
|
6192
|
+
}, { ...(ngDevMode ? { debugName: "$set" } : {}) });
|
|
6201
6193
|
this.resetable = resetable;
|
|
6202
6194
|
}
|
|
6203
6195
|
resetState() {
|
|
@@ -6209,10 +6201,10 @@ class ResetMenuComponent {
|
|
|
6209
6201
|
reset(s) {
|
|
6210
6202
|
this.state.resetPart(s);
|
|
6211
6203
|
}
|
|
6212
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
6213
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
6204
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: ResetMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6205
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: ResetMenuComponent, isStandalone: true, selector: "lib-reset-menu", outputs: { onStateReset$: "onStateReset" }, viewQueries: [{ propertyName: "menu", first: true, predicate: MatMenu, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-menu #menu2=\"matMenu\">\r\n @if($set().length > 1)\r\n {\r\n <button mat-menu-item (click)=\"state.resetState()\">All</button>\r\n }\r\n @for (item of $set(); track $index)\r\n {\r\n <button mat-menu-item (click)=\"state.resetPart(item)\">Reset {{item}}</button>\r\n }\r\n</mat-menu>", styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1$4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "ngmodule", type: MatButtonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6214
6206
|
}
|
|
6215
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
6207
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: ResetMenuComponent, decorators: [{
|
|
6216
6208
|
type: Component,
|
|
6217
6209
|
args: [{ selector: 'lib-reset-menu', imports: [MatMenuModule, MatButtonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-menu #menu2=\"matMenu\">\r\n @if($set().length > 1)\r\n {\r\n <button mat-menu-item (click)=\"state.resetState()\">All</button>\r\n }\r\n @for (item of $set(); track $index)\r\n {\r\n <button mat-menu-item (click)=\"state.resetPart(item)\">Reset {{item}}</button>\r\n }\r\n</mat-menu>", styles: [":host{display:contents}\n"] }]
|
|
6218
6210
|
}], propDecorators: { menu: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatMenu), { isSignal: true }] }], onStateReset$: [{ type: i0.Output, args: ["onStateReset"] }] } });
|
|
@@ -6223,8 +6215,8 @@ class TableHeaderMenuComponent {
|
|
|
6223
6215
|
this.exportToCsvService = inject(ExportToCsvService);
|
|
6224
6216
|
this.tableContainer = inject(TableContainerComponent);
|
|
6225
6217
|
this.state = this.tableContainer.state;
|
|
6226
|
-
this.$rowHeightNum = computed(() => +(this.tableContainer.$genericTable()?.$rowHeight()?.replace('px', '') || 0) || undefined, ...(ngDevMode ?
|
|
6227
|
-
this.$headerHeightNum = computed(() => +(this.tableContainer.$genericTable()?.$headerHeight()?.replace('px', '') || 0) || undefined, ...(ngDevMode ?
|
|
6218
|
+
this.$rowHeightNum = computed(() => +(this.tableContainer.$genericTable()?.$rowHeight()?.replace('px', '') || 0) || undefined, { ...(ngDevMode ? { debugName: "$rowHeightNum" } : {}) });
|
|
6219
|
+
this.$headerHeightNum = computed(() => +(this.tableContainer.$genericTable()?.$headerHeight()?.replace('px', '') || 0) || undefined, { ...(ngDevMode ? { debugName: "$headerHeightNum" } : {}) });
|
|
6228
6220
|
}
|
|
6229
6221
|
exportToCsv() {
|
|
6230
6222
|
this.exportToCsvService.exportToCsv(this.tableContainer.$data());
|
|
@@ -6239,10 +6231,10 @@ class TableHeaderMenuComponent {
|
|
|
6239
6231
|
if (v === 'header')
|
|
6240
6232
|
this.state.setUserDefinedHeaderHeight(+element.value);
|
|
6241
6233
|
}
|
|
6242
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
6243
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
6234
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: TableHeaderMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6235
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: TableHeaderMenuComponent, isStandalone: true, selector: "lib-table-header-menu", viewQueries: [{ propertyName: "menu", first: true, predicate: MatMenu, descendants: true, isSignal: true }], ngImport: i0, template: "<span [matTooltip]=\"!r.$set().length ? 'Nothing To Reset' : ''\">\r\n <button #d=\"matMenuItem\" mat-menu-item [matMenuTriggerFor]=\"r.menu()\" [disabled]=\"!r.$set().length\">\r\n <mat-icon color=\"primary\">autorenew</mat-icon>\r\n <span>Reset</span>\r\n </button>\r\n</span>\r\n@if (!tableContainer.state.$tableSettings().hideExport)\r\n{\r\n <button mat-menu-item (click)=\"exportToCsv()\">\r\n <mat-icon color=\"primary\">file_download</mat-icon>\r\n <span>Export Table</span>\r\n </button>\r\n}\r\n@if (tableContainer.$tableId(); as tableId)\r\n{\r\n <button stop-propagation mat-menu-item [matMenuTriggerFor]=\"pm.menu()\">\r\n <mat-icon color=\"primary\">people</mat-icon>\r\n <span>Profiles</span>\r\n </button>\r\n <tb-profiles-menu #pm class=\"profiles-menu\" [tableId]=\"tableId\" [isMatMenuChild]=\"true\" />\r\n}\r\n\r\n\r\n<div mat-menu-item>\r\n <div class=\"height-input-wrapper\">\r\n <span>Row Height</span>\r\n <input #i class=\"input\" stop-propagation type=\"number\" \r\n placeholder=\"Set Size\"\r\n [value]=\"$rowHeightNum()\"\r\n [min]=\"10\"\r\n [max]=\"100\" (change)=\"updateHeight('row', i)\" />\r\n </div>\r\n</div>\r\n@if(!state.$tableSettings().hideHeader)\r\n{\r\n <div mat-menu-item>\r\n <div class=\"height-input-wrapper\">\r\n <span>Header Height</span>\r\n <input #i2 class=\"input\" stop-propagation type=\"number\"\r\n placeholder=\"Set Size\"\r\n [value]=\"$headerHeightNum()\"\r\n [min]=\"10\"\r\n [max]=\"100\" (change)=\"updateHeight('header', i2)\"/>\r\n </div>\r\n </div>\r\n}\r\n<lib-reset-menu #r/>\r\n\r\n", styles: [".input{appearance:none;outline:none;background:none;box-shadow:none;margin:0;font:inherit;color:inherit;border:1px solid black;border-radius:4px;width:50px;padding:0 0 0 4px}.input::placeholder{font-size:12px}.height-input-wrapper{display:flex;gap:4px}\n"], dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ProfilesMenuComponent, selector: "tb-profiles-menu", inputs: ["tableId", "isMatMenuChild"] }, { kind: "component", type: ResetMenuComponent, selector: "lib-reset-menu", outputs: ["onStateReset"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6244
6236
|
}
|
|
6245
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
6237
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: TableHeaderMenuComponent, decorators: [{
|
|
6246
6238
|
type: Component,
|
|
6247
6239
|
args: [{ selector: 'lib-table-header-menu', imports: [MatMenuModule, MatIcon, ProfilesMenuComponent, ResetMenuComponent, MatTooltip, StopPropagationDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span [matTooltip]=\"!r.$set().length ? 'Nothing To Reset' : ''\">\r\n <button #d=\"matMenuItem\" mat-menu-item [matMenuTriggerFor]=\"r.menu()\" [disabled]=\"!r.$set().length\">\r\n <mat-icon color=\"primary\">autorenew</mat-icon>\r\n <span>Reset</span>\r\n </button>\r\n</span>\r\n@if (!tableContainer.state.$tableSettings().hideExport)\r\n{\r\n <button mat-menu-item (click)=\"exportToCsv()\">\r\n <mat-icon color=\"primary\">file_download</mat-icon>\r\n <span>Export Table</span>\r\n </button>\r\n}\r\n@if (tableContainer.$tableId(); as tableId)\r\n{\r\n <button stop-propagation mat-menu-item [matMenuTriggerFor]=\"pm.menu()\">\r\n <mat-icon color=\"primary\">people</mat-icon>\r\n <span>Profiles</span>\r\n </button>\r\n <tb-profiles-menu #pm class=\"profiles-menu\" [tableId]=\"tableId\" [isMatMenuChild]=\"true\" />\r\n}\r\n\r\n\r\n<div mat-menu-item>\r\n <div class=\"height-input-wrapper\">\r\n <span>Row Height</span>\r\n <input #i class=\"input\" stop-propagation type=\"number\" \r\n placeholder=\"Set Size\"\r\n [value]=\"$rowHeightNum()\"\r\n [min]=\"10\"\r\n [max]=\"100\" (change)=\"updateHeight('row', i)\" />\r\n </div>\r\n</div>\r\n@if(!state.$tableSettings().hideHeader)\r\n{\r\n <div mat-menu-item>\r\n <div class=\"height-input-wrapper\">\r\n <span>Header Height</span>\r\n <input #i2 class=\"input\" stop-propagation type=\"number\"\r\n placeholder=\"Set Size\"\r\n [value]=\"$headerHeightNum()\"\r\n [min]=\"10\"\r\n [max]=\"100\" (change)=\"updateHeight('header', i2)\"/>\r\n </div>\r\n </div>\r\n}\r\n<lib-reset-menu #r/>\r\n\r\n", styles: [".input{appearance:none;outline:none;background:none;box-shadow:none;margin:0;font:inherit;color:inherit;border:1px solid black;border-radius:4px;width:50px;padding:0 0 0 4px}.input::placeholder{font-size:12px}.height-input-wrapper{display:flex;gap:4px}\n"] }]
|
|
6248
6240
|
}], propDecorators: { menu: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatMenu), { isSignal: true }] }] } });
|
|
@@ -6251,25 +6243,14 @@ class TableVirtualScrollStrategy {
|
|
|
6251
6243
|
constructor(scrollContainer, dataStore) {
|
|
6252
6244
|
this.indexChange = new Subject();
|
|
6253
6245
|
this.scrolledIndexChange = this.indexChange.pipe(distinctUntilChanged());
|
|
6254
|
-
this.$dataLengthChange = linkedSignal(...(ngDevMode ?
|
|
6255
|
-
|
|
6256
|
-
|
|
6257
|
-
|
|
6258
|
-
|
|
6259
|
-
|
|
6260
|
-
|
|
6261
|
-
|
|
6262
|
-
} }] : [{
|
|
6263
|
-
source: () => this.$rowHeight(),
|
|
6264
|
-
computation: (curr, previous) => {
|
|
6265
|
-
return ({ curr, previous: previous == undefined ? curr : previous.source });
|
|
6266
|
-
}
|
|
6267
|
-
}]));
|
|
6268
|
-
this.$headerHeightChange = linkedSignal(...(ngDevMode ? [{ debugName: "$headerHeightChange", source: () => this.$headerHeight(),
|
|
6269
|
-
computation: (curr, previous) => ({ curr, previous: previous == undefined ? curr : previous.source }) }] : [{
|
|
6270
|
-
source: () => this.$headerHeight(),
|
|
6271
|
-
computation: (curr, previous) => ({ curr, previous: previous == undefined ? curr : previous.source })
|
|
6272
|
-
}]));
|
|
6246
|
+
this.$dataLengthChange = linkedSignal({ ...(ngDevMode ? { debugName: "$dataLengthChange" } : {}), source: () => this.$dataLength(),
|
|
6247
|
+
computation: (curr, previous) => ({ curr, previous: previous == undefined ? curr : previous.source }) });
|
|
6248
|
+
this.$rowHeightChange = linkedSignal({ ...(ngDevMode ? { debugName: "$rowHeightChange" } : {}), source: () => this.$rowHeight(),
|
|
6249
|
+
computation: (curr, previous) => {
|
|
6250
|
+
return ({ curr, previous: previous == undefined ? curr : previous.source });
|
|
6251
|
+
} });
|
|
6252
|
+
this.$headerHeightChange = linkedSignal({ ...(ngDevMode ? { debugName: "$headerHeightChange" } : {}), source: () => this.$headerHeight(),
|
|
6253
|
+
computation: (curr, previous) => ({ curr, previous: previous == undefined ? curr : previous.source }) });
|
|
6273
6254
|
this.contentScrolled$ = new Subject();
|
|
6274
6255
|
this.sub = subscriber(this.contentScrolled$.pipe(debounceTime(20), distinctUntilChanged()), offset => {
|
|
6275
6256
|
this.updateContent('scroll');
|
|
@@ -6281,7 +6262,7 @@ class TableVirtualScrollStrategy {
|
|
|
6281
6262
|
return;
|
|
6282
6263
|
this.updateContent('data length');
|
|
6283
6264
|
});
|
|
6284
|
-
}, ...(ngDevMode ?
|
|
6265
|
+
}, { ...(ngDevMode ? { debugName: "#onDataLengthChange" } : {}) });
|
|
6285
6266
|
this.#onHeaderChange = effect(() => {
|
|
6286
6267
|
const headerHeightChange = this.$headerHeightChange();
|
|
6287
6268
|
untracked(() => {
|
|
@@ -6289,7 +6270,7 @@ class TableVirtualScrollStrategy {
|
|
|
6289
6270
|
return;
|
|
6290
6271
|
this.updateContent('header height');
|
|
6291
6272
|
});
|
|
6292
|
-
}, ...(ngDevMode ?
|
|
6273
|
+
}, { ...(ngDevMode ? { debugName: "#onHeaderChange" } : {}) });
|
|
6293
6274
|
this.#onRowChange = effect(() => {
|
|
6294
6275
|
const rowHeightChange = this.$rowHeightChange();
|
|
6295
6276
|
untracked(() => {
|
|
@@ -6297,8 +6278,8 @@ class TableVirtualScrollStrategy {
|
|
|
6297
6278
|
return;
|
|
6298
6279
|
this.updateContent('row height');
|
|
6299
6280
|
});
|
|
6300
|
-
}, ...(ngDevMode ?
|
|
6301
|
-
this.$currentRange = signal({ start: 0, end: 0 }, ...(ngDevMode ?
|
|
6281
|
+
}, { ...(ngDevMode ? { debugName: "#onRowChange" } : {}) });
|
|
6282
|
+
this.$currentRange = signal({ start: 0, end: 0 }, { ...(ngDevMode ? { debugName: "$currentRange" } : {}) });
|
|
6302
6283
|
this.$rowHeight = scrollContainer.computedRowHeight;
|
|
6303
6284
|
this.$headerHeight = scrollContainer.computedHeaderHeight;
|
|
6304
6285
|
this.viewport = scrollContainer.viewport;
|
|
@@ -6372,7 +6353,7 @@ class VirtualScrollContainer {
|
|
|
6372
6353
|
this.state = inject(TableStore);
|
|
6373
6354
|
this.dataStore = inject(DataStore);
|
|
6374
6355
|
this.viewport = viewChild.required(CdkVirtualScrollViewport);
|
|
6375
|
-
this.genericTable = contentChild(GenericTableComponent, ...(ngDevMode ?
|
|
6356
|
+
this.genericTable = contentChild(GenericTableComponent, { ...(ngDevMode ? { debugName: "genericTable" } : {}) });
|
|
6376
6357
|
this.tableContainer = inject(TableContainerComponent);
|
|
6377
6358
|
this.defaultOptions = new VirtualScrollOptions();
|
|
6378
6359
|
this.$usePaginator = this.state.selectSignal(s => s.notPersistedTableSettings.usePaginator);
|
|
@@ -6388,8 +6369,8 @@ class VirtualScrollContainer {
|
|
|
6388
6369
|
return this.state.$tableSettings().virtualSettings;
|
|
6389
6370
|
else
|
|
6390
6371
|
return undefined;
|
|
6391
|
-
}, ...(ngDevMode ?
|
|
6392
|
-
this.$optionsSet = computed(() => !!this.$virtualScrollOptions(), ...(ngDevMode ?
|
|
6372
|
+
}, { ...(ngDevMode ? { debugName: "$virtualScrollOptions" } : {}) });
|
|
6373
|
+
this.$optionsSet = computed(() => !!this.$virtualScrollOptions(), { ...(ngDevMode ? { debugName: "$optionsSet" } : {}) });
|
|
6393
6374
|
this.$dataLength = computed(() => {
|
|
6394
6375
|
const paginated = this.$usePaginator() && !this.$showAll();
|
|
6395
6376
|
const pageSize = this.$pageSize();
|
|
@@ -6398,7 +6379,7 @@ class VirtualScrollContainer {
|
|
|
6398
6379
|
if (paginated)
|
|
6399
6380
|
return Math.min(dataLen - (pageNumber * pageSize), pageSize);
|
|
6400
6381
|
return dataLen;
|
|
6401
|
-
}, ...(ngDevMode ?
|
|
6382
|
+
}, { ...(ngDevMode ? { debugName: "$dataLength" } : {}) });
|
|
6402
6383
|
this.#setViewportEffect = effect(() => {
|
|
6403
6384
|
const viewport = this.viewport();
|
|
6404
6385
|
const options = this.$optionsSet();
|
|
@@ -6407,7 +6388,7 @@ class VirtualScrollContainer {
|
|
|
6407
6388
|
this.setSize(this.viewport().elementRef, 'initial');
|
|
6408
6389
|
}
|
|
6409
6390
|
});
|
|
6410
|
-
}, ...(ngDevMode ?
|
|
6391
|
+
}, { ...(ngDevMode ? { debugName: "#setViewportEffect" } : {}) });
|
|
6411
6392
|
this.#onRenderedRangeEffect = effect(() => {
|
|
6412
6393
|
const renderedRange = this.$renderedRange();
|
|
6413
6394
|
const viewport = this.viewport();
|
|
@@ -6424,7 +6405,7 @@ class VirtualScrollContainer {
|
|
|
6424
6405
|
return;
|
|
6425
6406
|
this.setSize(viewport.elementRef, 'rendered range');
|
|
6426
6407
|
});
|
|
6427
|
-
}, ...(ngDevMode ?
|
|
6408
|
+
}, { ...(ngDevMode ? { debugName: "#onRenderedRangeEffect" } : {}) });
|
|
6428
6409
|
this.resizeHandler = () => {
|
|
6429
6410
|
if (this.viewport() && this.$virtualScrollOptions()?.dynamicHeight) {
|
|
6430
6411
|
this.setSize(this.viewport().elementRef, 'resize');
|
|
@@ -6434,23 +6415,23 @@ class VirtualScrollContainer {
|
|
|
6434
6415
|
const virtualScrollOptions = this.state.$tableSettings().virtualSettings;
|
|
6435
6416
|
const rowHeight = this.state.$userDefinedRowHeight() || virtualScrollOptions?.rowHeight || this.state.$tableSettings().rowHeight || this.defaultOptions.rowHeight;
|
|
6436
6417
|
return parseTbSizeToPixels(rowHeight) || 0;
|
|
6437
|
-
}, ...(ngDevMode ?
|
|
6418
|
+
}, { ...(ngDevMode ? { debugName: "computedRowHeight" } : {}) });
|
|
6438
6419
|
this.computedHeaderHeight = computed(() => {
|
|
6439
6420
|
if (this.state.$tableSettings().hideHeader)
|
|
6440
6421
|
return 0;
|
|
6441
6422
|
const virtualScrollOptions = this.state.$tableSettings().virtualSettings;
|
|
6442
6423
|
const headerHeight = this.state.$userDefinedHeaderHeight() || virtualScrollOptions?.headerHeight || this.state.$tableSettings().headerHeight || this.defaultOptions.headerHeight;
|
|
6443
6424
|
return parseTbSizeToPixels(headerHeight) || 0;
|
|
6444
|
-
}, ...(ngDevMode ?
|
|
6425
|
+
}, { ...(ngDevMode ? { debugName: "computedHeaderHeight" } : {}) });
|
|
6445
6426
|
this.computedFooterHeight = computed(() => {
|
|
6446
6427
|
return parseFloat(this.genericTable()?.$footerHeight()?.replace('px', '') || '0');
|
|
6447
|
-
}, ...(ngDevMode ?
|
|
6428
|
+
}, { ...(ngDevMode ? { debugName: "computedFooterHeight" } : {}) });
|
|
6448
6429
|
this.computedBuffer = computed(() => {
|
|
6449
6430
|
const virtualScrollOptions = this.state.$tableSettings().virtualSettings;
|
|
6450
6431
|
if (!virtualScrollOptions.dynamicalHeightBuffer)
|
|
6451
6432
|
return 0;
|
|
6452
6433
|
return parseTbSizeToPixels(virtualScrollOptions.dynamicalHeightBuffer) || 0;
|
|
6453
|
-
}, ...(ngDevMode ?
|
|
6434
|
+
}, { ...(ngDevMode ? { debugName: "computedBuffer" } : {}) });
|
|
6454
6435
|
this.scrollStrategy = new TableVirtualScrollStrategy(this, this.dataStore);
|
|
6455
6436
|
addEventListener('resize', this.resizeHandler);
|
|
6456
6437
|
}
|
|
@@ -6516,8 +6497,8 @@ class VirtualScrollContainer {
|
|
|
6516
6497
|
const virtualScrollOffset = this.viewport()?.getOffsetToRenderedContentStart() ?? 0;
|
|
6517
6498
|
this.dataStore.patchState({ virtualScrollOffset });
|
|
6518
6499
|
}
|
|
6519
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
6520
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.
|
|
6500
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: VirtualScrollContainer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6501
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.2", type: VirtualScrollContainer, isStandalone: true, selector: "tb-virtual-scroll-container", queries: [{ propertyName: "genericTable", first: true, predicate: GenericTableComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
6521
6502
|
<cdk-virtual-scroll-viewport>
|
|
6522
6503
|
<ng-content/>
|
|
6523
6504
|
</cdk-virtual-scroll-viewport>
|
|
@@ -6529,7 +6510,7 @@ class VirtualScrollContainer {
|
|
|
6529
6510
|
},
|
|
6530
6511
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6531
6512
|
}
|
|
6532
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
6513
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: VirtualScrollContainer, decorators: [{
|
|
6533
6514
|
type: Component,
|
|
6534
6515
|
args: [{
|
|
6535
6516
|
selector: 'tb-virtual-scroll-container',
|
|
@@ -6561,45 +6542,45 @@ class TableContainerComponent {
|
|
|
6561
6542
|
this.exportToCsvService = inject(ExportToCsvService);
|
|
6562
6543
|
this.config = inject(TableBuilderConfigToken);
|
|
6563
6544
|
this.dataSource = new TableBuilderDataSource(this.state, this.dataStore);
|
|
6564
|
-
this.$filterDirectives = contentChildren(TableFilterDirective, ...(ngDevMode ?
|
|
6565
|
-
this.$customFilterDirectives = contentChildren(TableCustomFilterDirective, ...(ngDevMode ?
|
|
6566
|
-
this.$paginatorComponent = viewChild(PaginatorComponent, ...(ngDevMode ?
|
|
6567
|
-
this.$paginatorWrapper = viewChild('paginatorWrapper', ...(ngDevMode ?
|
|
6568
|
-
this.$genericTable = viewChild(GenericTableComponent, ...(ngDevMode ?
|
|
6569
|
-
this._$customRows = contentChildren((MatRowDef), ...(ngDevMode ?
|
|
6570
|
-
this.$customRows = computed(() => [...this._$customRows()], ...(ngDevMode ?
|
|
6571
|
-
this.$customCells = contentChildren(CustomCellDirective, ...(ngDevMode ?
|
|
6572
|
-
this.$customGroupRows = contentChildren(CustomGroupRowDirective, ...(ngDevMode ?
|
|
6545
|
+
this.$filterDirectives = contentChildren(TableFilterDirective, { ...(ngDevMode ? { debugName: "$filterDirectives" } : {}), descendants: true });
|
|
6546
|
+
this.$customFilterDirectives = contentChildren(TableCustomFilterDirective, { ...(ngDevMode ? { debugName: "$customFilterDirectives" } : {}), descendants: true });
|
|
6547
|
+
this.$paginatorComponent = viewChild(PaginatorComponent, { ...(ngDevMode ? { debugName: "$paginatorComponent" } : {}) });
|
|
6548
|
+
this.$paginatorWrapper = viewChild('paginatorWrapper', { ...(ngDevMode ? { debugName: "$paginatorWrapper" } : {}) });
|
|
6549
|
+
this.$genericTable = viewChild(GenericTableComponent, { ...(ngDevMode ? { debugName: "$genericTable" } : {}) });
|
|
6550
|
+
this._$customRows = contentChildren((MatRowDef), { ...(ngDevMode ? { debugName: "_$customRows" } : {}) });
|
|
6551
|
+
this.$customRows = computed(() => [...this._$customRows()], { ...(ngDevMode ? { debugName: "$customRows" } : {}) });
|
|
6552
|
+
this.$customCells = contentChildren(CustomCellDirective, { ...(ngDevMode ? { debugName: "$customCells" } : {}) });
|
|
6553
|
+
this.$customGroupRows = contentChildren(CustomGroupRowDirective, { ...(ngDevMode ? { debugName: "$customGroupRows" } : {}) });
|
|
6573
6554
|
this.$menu = viewChild.required(MatMenu);
|
|
6574
6555
|
this.menuInjector = Injector.create({
|
|
6575
6556
|
providers: [{ provide: MatMenu, useFactory: () => this.$menu() }],
|
|
6576
6557
|
parent: this.injector
|
|
6577
6558
|
});
|
|
6578
|
-
this.$tableBuilder = input.required(...(ngDevMode ?
|
|
6579
|
-
this.$tableIdInput = input(undefined, ...(ngDevMode ?
|
|
6580
|
-
this.$trackByInput = input(undefined, ...(ngDevMode ?
|
|
6581
|
-
this.$inputFilters = input([], ...(ngDevMode ?
|
|
6582
|
-
this.$filterInfoInputs = computed(() => this.$inputFilters().filter(i => !isFunction(i)), ...(ngDevMode ?
|
|
6583
|
-
this.$indexColumnInput = input(false, ...(ngDevMode ?
|
|
6584
|
-
this.$selectionColumnInput = input(false, ...(ngDevMode ?
|
|
6585
|
-
this.$stickyHeaderInput = input(true, ...(ngDevMode ?
|
|
6586
|
-
this.$stickyFooterInput = input(
|
|
6587
|
-
this.$groupHeaderTemplate = input(undefined, ...(ngDevMode ?
|
|
6588
|
-
this.$groupHeaderHeight = input(undefined, ...(ngDevMode ?
|
|
6589
|
-
this.$pageSize = input(undefined, ...(ngDevMode ?
|
|
6559
|
+
this.$tableBuilder = input.required({ ...(ngDevMode ? { debugName: "$tableBuilder" } : {}), alias: 'tableBuilder' });
|
|
6560
|
+
this.$tableIdInput = input(undefined, { ...(ngDevMode ? { debugName: "$tableIdInput" } : {}), alias: 'tableId' });
|
|
6561
|
+
this.$trackByInput = input(undefined, { ...(ngDevMode ? { debugName: "$trackByInput" } : {}), alias: 'trackBy' });
|
|
6562
|
+
this.$inputFilters = input([], { ...(ngDevMode ? { debugName: "$inputFilters" } : {}), alias: 'inputFilters' });
|
|
6563
|
+
this.$filterInfoInputs = computed(() => this.$inputFilters().filter(i => !isFunction(i)), { ...(ngDevMode ? { debugName: "$filterInfoInputs" } : {}) });
|
|
6564
|
+
this.$indexColumnInput = input(false, { ...(ngDevMode ? { debugName: "$indexColumnInput" } : {}), alias: 'indexColumn' });
|
|
6565
|
+
this.$selectionColumnInput = input(false, { ...(ngDevMode ? { debugName: "$selectionColumnInput" } : {}), alias: 'selectionColumn' });
|
|
6566
|
+
this.$stickyHeaderInput = input(true, { ...(ngDevMode ? { debugName: "$stickyHeaderInput" } : {}), alias: 'stickyHeader' });
|
|
6567
|
+
this.$stickyFooterInput = input(undefined, { ...(ngDevMode ? { debugName: "$stickyFooterInput" } : {}), alias: 'stickyFooter' });
|
|
6568
|
+
this.$groupHeaderTemplate = input(undefined, { ...(ngDevMode ? { debugName: "$groupHeaderTemplate" } : {}), alias: 'groupHeaderTemplate' });
|
|
6569
|
+
this.$groupHeaderHeight = input(undefined, { ...(ngDevMode ? { debugName: "$groupHeaderHeight" } : {}), alias: 'groupHeaderHeight' });
|
|
6570
|
+
this.$pageSize = input(undefined, { ...(ngDevMode ? { debugName: "$pageSize" } : {}), alias: 'pageSize' });
|
|
6590
6571
|
this._selection$ = new BehaviorSubject(null);
|
|
6591
6572
|
this.selection$ = outputFromObservable(this._selection$.pipe(notNull()), { alias: 'selection' });
|
|
6592
6573
|
this.onStateReset$ = output({ alias: 'onStateReset' });
|
|
6593
6574
|
this.onSaveState$ = output({ alias: 'onSaveState' });
|
|
6594
6575
|
this.state$ = outputFromObservable(toObservable(this.state.$savableState), { alias: 'state' });
|
|
6595
|
-
this.$data = computed(() => this.$sortedAndFilteredData()?.value || [], ...(ngDevMode ?
|
|
6576
|
+
this.$data = computed(() => this.$sortedAndFilteredData()?.value || [], { ...(ngDevMode ? { debugName: "$data" } : {}) });
|
|
6596
6577
|
this.data$ = outputFromObservable(toObservable(this.$data), { alias: 'data' });
|
|
6597
6578
|
/**
|
|
6598
6579
|
* Will be different than $data if grouping is applied
|
|
6599
6580
|
*/
|
|
6600
|
-
this.$sortedAndFilteredAndGroupedData = computed(() => this.$filteredSortedAndGrouped()?.displayData || [], ...(ngDevMode ?
|
|
6581
|
+
this.$sortedAndFilteredAndGroupedData = computed(() => this.$filteredSortedAndGrouped()?.displayData || [], { ...(ngDevMode ? { debugName: "$sortedAndFilteredAndGroupedData" } : {}) });
|
|
6601
6582
|
this.sortedAndFilteredAndGroupedData$ = outputFromObservable(toObservable(this.$sortedAndFilteredAndGroupedData), { alias: 'sortedAndFilteredAndGroupedData' });
|
|
6602
|
-
this.$displayData = computed(() => this.$tableBuilder() && this.$filteredSortedAndGrouped()?.displayData, ...(ngDevMode ?
|
|
6583
|
+
this.$displayData = computed(() => this.$tableBuilder() && this.$filteredSortedAndGrouped()?.displayData, { ...(ngDevMode ? { debugName: "$displayData" } : {}) });
|
|
6603
6584
|
this.expandAllGroups = () => {
|
|
6604
6585
|
const groupHeaders = getAllGroupHeaderNames(this.$displayData());
|
|
6605
6586
|
this.state.expandOfGroup(groupHeaders.map(g => ({ groupKey: g.groupKey, uniqueNameOfHeadersToExpand: g.headers })));
|
|
@@ -6615,24 +6596,32 @@ class TableContainerComponent {
|
|
|
6615
6596
|
metaData,
|
|
6616
6597
|
customCell: this.$customCells().filter(cc => cc.$inited()).find(cc => cc.$customCell() === metaData.key)
|
|
6617
6598
|
}));
|
|
6618
|
-
}, ...(ngDevMode ?
|
|
6599
|
+
}, { ...(ngDevMode ? { debugName: "$myColumns" } : {}) });
|
|
6619
6600
|
this.$useVirtual = this.state.$isVirtual;
|
|
6620
6601
|
this.$collapsedFooter = this.state.$footerCollapsed;
|
|
6621
6602
|
this.$collapsedHeader = this.state.$headerCollapsed;
|
|
6622
|
-
this.$displayDataLength = computed(() => this.$displayData()?.length || 0, ...(ngDevMode ?
|
|
6623
|
-
this.$tableBuilderSettings = computed(() => this.$tableBuilder().$settings(), ...(ngDevMode ?
|
|
6624
|
-
this.$trackBy = computed(() => this.$trackByInput() || this.$tableBuilderSettings()?.tableSettings?.trackBy, ...(ngDevMode ?
|
|
6625
|
-
this.$tableId = computed(() => this.$tableIdInput() || this.$tableBuilderSettings()?.tableSettings?.tableId, ...(ngDevMode ?
|
|
6626
|
-
this.$includeSelectionColumn = computed(() => this.$selectionColumnInput() || !!this.$tableBuilderSettings()?.tableSettings?.includeSelectionColumn, ...(ngDevMode ?
|
|
6627
|
-
this.$includeIndexColumn = computed(() => this.$indexColumnInput() || !!this.$tableBuilderSettings()?.tableSettings?.includeIndexColumn, ...(ngDevMode ?
|
|
6603
|
+
this.$displayDataLength = computed(() => this.$displayData()?.length || 0, { ...(ngDevMode ? { debugName: "$displayDataLength" } : {}) });
|
|
6604
|
+
this.$tableBuilderSettings = computed(() => this.$tableBuilder().$settings(), { ...(ngDevMode ? { debugName: "$tableBuilderSettings" } : {}) });
|
|
6605
|
+
this.$trackBy = computed(() => this.$trackByInput() || this.$tableBuilderSettings()?.tableSettings?.trackBy, { ...(ngDevMode ? { debugName: "$trackBy" } : {}) });
|
|
6606
|
+
this.$tableId = computed(() => this.$tableIdInput() || this.$tableBuilderSettings()?.tableSettings?.tableId, { ...(ngDevMode ? { debugName: "$tableId" } : {}) });
|
|
6607
|
+
this.$includeSelectionColumn = computed(() => this.$selectionColumnInput() || !!this.$tableBuilderSettings()?.tableSettings?.includeSelectionColumn, { ...(ngDevMode ? { debugName: "$includeSelectionColumn" } : {}) });
|
|
6608
|
+
this.$includeIndexColumn = computed(() => this.$indexColumnInput() || !!this.$tableBuilderSettings()?.tableSettings?.includeIndexColumn, { ...(ngDevMode ? { debugName: "$includeIndexColumn" } : {}) });
|
|
6628
6609
|
this.$stickyHeader = computed(() => {
|
|
6629
6610
|
const settings = this.$tableBuilderSettings()?.columnHeaderSettings?.stickyHeaderRow;
|
|
6630
6611
|
if (settings != null) {
|
|
6631
6612
|
return settings;
|
|
6632
6613
|
}
|
|
6633
6614
|
return this.$stickyHeaderInput();
|
|
6634
|
-
}, ...(ngDevMode ?
|
|
6635
|
-
this.$stickyFooter = computed(() =>
|
|
6615
|
+
}, { ...(ngDevMode ? { debugName: "$stickyHeader" } : {}) });
|
|
6616
|
+
this.$stickyFooter = computed(() => {
|
|
6617
|
+
if (this.$stickyFooterInput() != null) {
|
|
6618
|
+
return !!this.$stickyFooterInput();
|
|
6619
|
+
}
|
|
6620
|
+
if (this.$tableBuilderSettings()?.columnFooterSettings?.stickyFooterRow != null) {
|
|
6621
|
+
return !!this.$tableBuilderSettings()?.columnFooterSettings?.stickyFooterRow;
|
|
6622
|
+
}
|
|
6623
|
+
return this.config.defaultTableSettings?.columnFooterSettings?.stickyFooterRow || false;
|
|
6624
|
+
}, { ...(ngDevMode ? { debugName: "$stickyFooter" } : {}) });
|
|
6636
6625
|
this.$props = computed(() => {
|
|
6637
6626
|
const indexColumn = this.$includeIndexColumn();
|
|
6638
6627
|
const selectionColumn = this.$includeSelectionColumn();
|
|
@@ -6642,7 +6631,7 @@ class TableContainerComponent {
|
|
|
6642
6631
|
const groupHeaderHeight = this.$groupHeaderHeight();
|
|
6643
6632
|
const customGroupRows = this.$customGroupRows().filter(cgr => cgr.$inited());
|
|
6644
6633
|
return ({ indexColumn, selectionColumn, isSticky: stickHeader, stickyFooter, groupHeaderTemplate, groupHeaderHeight, customGroupRows });
|
|
6645
|
-
}, ...(ngDevMode ?
|
|
6634
|
+
}, { ...(ngDevMode ? { debugName: "$props" } : {}) });
|
|
6646
6635
|
this.#initTableBuilder = effect(() => {
|
|
6647
6636
|
const tb = this.$tableBuilder();
|
|
6648
6637
|
untracked(() => {
|
|
@@ -6651,7 +6640,7 @@ class TableContainerComponent {
|
|
|
6651
6640
|
tb._container.set(this);
|
|
6652
6641
|
}
|
|
6653
6642
|
});
|
|
6654
|
-
}, ...(ngDevMode ?
|
|
6643
|
+
}, { ...(ngDevMode ? { debugName: "#initTableBuilder" } : {}) });
|
|
6655
6644
|
this.#initializeTableSettingsFromTableBuilderAndPersistedStateEffect = effect(() => {
|
|
6656
6645
|
const metaLoaded = this.$isInitializationState(InitializationState.MetaDataLoaded)();
|
|
6657
6646
|
if (!metaLoaded)
|
|
@@ -6666,14 +6655,14 @@ class TableContainerComponent {
|
|
|
6666
6655
|
}
|
|
6667
6656
|
this.state.setInitializationState(InitializationState.Ready);
|
|
6668
6657
|
});
|
|
6669
|
-
}, ...(ngDevMode ?
|
|
6658
|
+
}, { ...(ngDevMode ? { debugName: "#initializeTableSettingsFromTableBuilderAndPersistedStateEffect" } : {}) });
|
|
6670
6659
|
this.#setPageSizeFromInputEffect = effect(() => {
|
|
6671
6660
|
const pageSize = this.$pageSize();
|
|
6672
6661
|
const userDefinedPageSize = this.state.$userDefinedPageSize();
|
|
6673
6662
|
if (pageSize && !userDefinedPageSize) {
|
|
6674
6663
|
untracked(() => this.state.setPageSize(pageSize));
|
|
6675
6664
|
}
|
|
6676
|
-
}, ...(ngDevMode ?
|
|
6665
|
+
}, { ...(ngDevMode ? { debugName: "#setPageSizeFromInputEffect" } : {}) });
|
|
6677
6666
|
this.#patchedFilters = [];
|
|
6678
6667
|
this.#patchSavableFilterDirectivesFromPersistedStateEffect = effect(() => {
|
|
6679
6668
|
const loaded = this.$isInitializationState(InitializationState.TableSettingsLoaded)();
|
|
@@ -6689,7 +6678,7 @@ class TableContainerComponent {
|
|
|
6689
6678
|
this.state.addFilter(f.filter$);
|
|
6690
6679
|
});
|
|
6691
6680
|
});
|
|
6692
|
-
}, ...(ngDevMode ?
|
|
6681
|
+
}, { ...(ngDevMode ? { debugName: "#patchSavableFilterDirectivesFromPersistedStateEffect" } : {}) });
|
|
6693
6682
|
this.#patchSavableFilterInputsFromPersistedStateEffect = effect(() => {
|
|
6694
6683
|
const loaded = this.$isInitializationState(InitializationState.TableSettingsLoaded)();
|
|
6695
6684
|
const inputFilters = this.$filterInfoInputs();
|
|
@@ -6710,11 +6699,11 @@ class TableContainerComponent {
|
|
|
6710
6699
|
this.#patchedFilters.push(f.filterId);
|
|
6711
6700
|
});
|
|
6712
6701
|
});
|
|
6713
|
-
}, ...(ngDevMode ?
|
|
6702
|
+
}, { ...(ngDevMode ? { debugName: "#patchSavableFilterInputsFromPersistedStateEffect" } : {}) });
|
|
6714
6703
|
this.#addPropsToStoreFromInputsEffect = effect(() => {
|
|
6715
6704
|
const props = this.$props();
|
|
6716
6705
|
untracked(() => this.state.setProps(props));
|
|
6717
|
-
}, ...(ngDevMode ?
|
|
6706
|
+
}, { ...(ngDevMode ? { debugName: "#addPropsToStoreFromInputsEffect" } : {}) });
|
|
6718
6707
|
this.#addMetaDataToStoreEffect = effect(() => {
|
|
6719
6708
|
const allMetaDatas = this.$allMetaDatas();
|
|
6720
6709
|
if (!allMetaDatas)
|
|
@@ -6723,7 +6712,7 @@ class TableContainerComponent {
|
|
|
6723
6712
|
this.state.setMetaData(allMetaDatas);
|
|
6724
6713
|
this.state.setLinkMaps(createLinkCreatorDict(allMetaDatas));
|
|
6725
6714
|
});
|
|
6726
|
-
}, ...(ngDevMode ?
|
|
6715
|
+
}, { ...(ngDevMode ? { debugName: "#addMetaDataToStoreEffect" } : {}) });
|
|
6727
6716
|
this.#setFilteredDataLengthEffect = effect(() => {
|
|
6728
6717
|
const tableBuilder = this.$tableBuilder();
|
|
6729
6718
|
const data = this.$sortedAndFilteredData();
|
|
@@ -6732,7 +6721,7 @@ class TableContainerComponent {
|
|
|
6732
6721
|
untracked(() => {
|
|
6733
6722
|
this.dataStore.patchState({ sortedFilteredDataLength: data.value.length });
|
|
6734
6723
|
});
|
|
6735
|
-
}, ...(ngDevMode ?
|
|
6724
|
+
}, { ...(ngDevMode ? { debugName: "#setFilteredDataLengthEffect" } : {}) });
|
|
6736
6725
|
this.#setDataSourceDataEffect = effect(() => {
|
|
6737
6726
|
const tableBuilder = this.$tableBuilder();
|
|
6738
6727
|
const flat = this.$filteredSortedAndGrouped();
|
|
@@ -6743,7 +6732,7 @@ class TableContainerComponent {
|
|
|
6743
6732
|
this.dataSource.setData(data);
|
|
6744
6733
|
this.dataStore.patchState({ sortedFilteredGroupedDataLength: data.length });
|
|
6745
6734
|
});
|
|
6746
|
-
}, ...(ngDevMode ?
|
|
6735
|
+
}, { ...(ngDevMode ? { debugName: "#setDataSourceDataEffect" } : {}) });
|
|
6747
6736
|
this.#destroyRef = inject(DestroyRef).onDestroy(() => {
|
|
6748
6737
|
const tableId = this.$tableId();
|
|
6749
6738
|
if (tableId) {
|
|
@@ -6756,14 +6745,14 @@ class TableContainerComponent {
|
|
|
6756
6745
|
return this.stateService.$selectLocalTableStateForView(tableId)();
|
|
6757
6746
|
}
|
|
6758
6747
|
return undefined;
|
|
6759
|
-
}, ...(ngDevMode ?
|
|
6748
|
+
}, { ...(ngDevMode ? { debugName: "$persistedState" } : {}) });
|
|
6760
6749
|
this.$allFilterDirectives = computed(() => {
|
|
6761
6750
|
if (this.wrapper) {
|
|
6762
6751
|
return [...this.$filterDirectives(), ...this.$customFilterDirectives(), ...this.wrapper.$registrations()];
|
|
6763
6752
|
}
|
|
6764
6753
|
return [...this.$filterDirectives(), ...this.$customFilterDirectives()];
|
|
6765
|
-
}, ...(ngDevMode ?
|
|
6766
|
-
this.$tableBuilderMetaData = computed(() => this.$tableBuilder()?.$metaData(), ...(ngDevMode ?
|
|
6754
|
+
}, { ...(ngDevMode ? { debugName: "$allFilterDirectives" } : {}) });
|
|
6755
|
+
this.$tableBuilderMetaData = computed(() => this.$tableBuilder()?.$metaData(), { ...(ngDevMode ? { debugName: "$tableBuilderMetaData" } : {}) });
|
|
6767
6756
|
this.$allMetaDatas = computed(() => {
|
|
6768
6757
|
const tableBuilderMetaData = this.$tableBuilderMetaData();
|
|
6769
6758
|
if (!tableBuilderMetaData)
|
|
@@ -6771,16 +6760,11 @@ class TableContainerComponent {
|
|
|
6771
6760
|
const customCellMetaDatas = this.$customCells().filter(cc => cc.$inited()).map(cc => cc.$metaData()).filter(d => !!d);
|
|
6772
6761
|
const mappedCustomCellMetaDatas = customCellMetaDatas.map(md => mergeCustomCellMetaData(md, tableBuilderMetaData.find(item => item.key === md.key)));
|
|
6773
6762
|
return [...tableBuilderMetaData, ...mappedCustomCellMetaDatas];
|
|
6774
|
-
}, ...(ngDevMode ?
|
|
6775
|
-
this.$allMetaDataTimeStamped = linkedSignal(...(ngDevMode ?
|
|
6776
|
-
|
|
6777
|
-
|
|
6778
|
-
|
|
6779
|
-
source: this.$allMetaDatas,
|
|
6780
|
-
computation: (curr, previous) => {
|
|
6781
|
-
return { timestamp: Date.now(), value: curr || [], previous: previous?.value.value || [] };
|
|
6782
|
-
}
|
|
6783
|
-
}]));
|
|
6763
|
+
}, { ...(ngDevMode ? { debugName: "$allMetaDatas" } : {}) });
|
|
6764
|
+
this.$allMetaDataTimeStamped = linkedSignal({ ...(ngDevMode ? { debugName: "$allMetaDataTimeStamped" } : {}), source: this.$allMetaDatas,
|
|
6765
|
+
computation: (curr, previous) => {
|
|
6766
|
+
return { timestamp: Date.now(), value: curr || [], previous: previous?.value.value || [] };
|
|
6767
|
+
} });
|
|
6784
6768
|
this.#setUpAllValuesFilters = effect(() => {
|
|
6785
6769
|
const data = this.$allDataTimeStamped();
|
|
6786
6770
|
const allMeta = this.$allMetaDataTimeStamped();
|
|
@@ -6791,7 +6775,7 @@ class TableContainerComponent {
|
|
|
6791
6775
|
const mapped = buildInAllValuesFilter(this.config, allMeta.previous, allMeta.value, data.value, allMeta.timestamp, data.timestamp, currentAll);
|
|
6792
6776
|
this.state.patchState({ allFilters: mapped });
|
|
6793
6777
|
});
|
|
6794
|
-
}, ...(ngDevMode ?
|
|
6778
|
+
}, { ...(ngDevMode ? { debugName: "#setUpAllValuesFilters" } : {}) });
|
|
6795
6779
|
this.$preds = computed(() => {
|
|
6796
6780
|
const predicateInputFilters = this.$inputFilters().filter(isFunction);
|
|
6797
6781
|
const notSavableFilterDirectives = this.$allFilterDirectives()
|
|
@@ -6800,56 +6784,33 @@ class TableContainerComponent {
|
|
|
6800
6784
|
.filter(d => !!d && needsFilterCreation(d))
|
|
6801
6785
|
.map(d => createFilterFunc(d));
|
|
6802
6786
|
return [...predicateInputFilters, ...notSavableFilterDirectives];
|
|
6803
|
-
}, ...(ngDevMode ?
|
|
6804
|
-
this.$predicateFiltersState = linkedSignal(...(ngDevMode ?
|
|
6805
|
-
|
|
6806
|
-
|
|
6807
|
-
|
|
6808
|
-
|
|
6809
|
-
|
|
6810
|
-
|
|
6811
|
-
|
|
6812
|
-
|
|
6813
|
-
|
|
6814
|
-
|
|
6815
|
-
|
|
6816
|
-
}]));
|
|
6817
|
-
this.$savableFiltersState = linkedSignal(...(ngDevMode ? [{ debugName: "$savableFiltersState", source: this.state.$filters,
|
|
6818
|
-
computation: (curr, previous) => {
|
|
6819
|
-
if (!previous?.value)
|
|
6820
|
-
return ({ value: updateFilterInfoState({ allFilters: {} }, curr), timestamp: Date.now() });
|
|
6821
|
-
return ({ value: updateFilterInfoState(previous.value.value, curr), timestamp: Date.now() });
|
|
6822
|
-
} }] : [{
|
|
6823
|
-
source: this.state.$filters,
|
|
6824
|
-
computation: (curr, previous) => {
|
|
6825
|
-
if (!previous?.value)
|
|
6826
|
-
return ({ value: updateFilterInfoState({ allFilters: {} }, curr), timestamp: Date.now() });
|
|
6827
|
-
return ({ value: updateFilterInfoState(previous.value.value, curr), timestamp: Date.now() });
|
|
6828
|
-
}
|
|
6829
|
-
}]));
|
|
6787
|
+
}, { ...(ngDevMode ? { debugName: "$preds" } : {}) });
|
|
6788
|
+
this.$predicateFiltersState = linkedSignal({ ...(ngDevMode ? { debugName: "$predicateFiltersState" } : {}), source: this.$preds,
|
|
6789
|
+
computation: (curr, previous) => {
|
|
6790
|
+
if (!previous?.value)
|
|
6791
|
+
return ({ value: updateFilterPredicateState({ allFilters: [] }, curr), timestamp: Date.now() });
|
|
6792
|
+
return ({ value: updateFilterPredicateState(previous.value.value, curr), timestamp: Date.now() });
|
|
6793
|
+
} });
|
|
6794
|
+
this.$savableFiltersState = linkedSignal({ ...(ngDevMode ? { debugName: "$savableFiltersState" } : {}), source: this.state.$filters,
|
|
6795
|
+
computation: (curr, previous) => {
|
|
6796
|
+
if (!previous?.value)
|
|
6797
|
+
return ({ value: updateFilterInfoState({ allFilters: {} }, curr), timestamp: Date.now() });
|
|
6798
|
+
return ({ value: updateFilterInfoState(previous.value.value, curr), timestamp: Date.now() });
|
|
6799
|
+
} });
|
|
6830
6800
|
this.$allFilterStatesTimeStamped = computed(() => {
|
|
6831
6801
|
if (!this.$isInitializationState(InitializationState.Ready)())
|
|
6832
6802
|
return undefined;
|
|
6833
6803
|
return ({ value: updateFilterState(this.$savableFiltersState(), this.$predicateFiltersState()), timestamp: Date.now() });
|
|
6834
|
-
}, ...(ngDevMode ?
|
|
6835
|
-
this.$sortStateTimeStamped = linkedSignal(...(ngDevMode ?
|
|
6836
|
-
|
|
6837
|
-
|
|
6838
|
-
|
|
6839
|
-
|
|
6840
|
-
|
|
6841
|
-
|
|
6842
|
-
|
|
6843
|
-
|
|
6844
|
-
computation: (curr, prev) => {
|
|
6845
|
-
if (!curr)
|
|
6846
|
-
return undefined;
|
|
6847
|
-
if (!prev?.value)
|
|
6848
|
-
return ({ value: updateSortState(initialSortState, curr), timestamp: Date.now() });
|
|
6849
|
-
return ({ value: updateSortState(prev.value.value, curr), timestamp: Date.now() });
|
|
6850
|
-
}
|
|
6851
|
-
}]));
|
|
6852
|
-
this.$allData = computed(() => (this.$tableBuilder()?.$initialized() && this.$tableBuilder()?.$data()) || [], ...(ngDevMode ? [{ debugName: "$allData" }] : []));
|
|
6804
|
+
}, { ...(ngDevMode ? { debugName: "$allFilterStatesTimeStamped" } : {}) });
|
|
6805
|
+
this.$sortStateTimeStamped = linkedSignal({ ...(ngDevMode ? { debugName: "$sortStateTimeStamped" } : {}), source: computed(() => this.$isInitializationState(InitializationState.Ready)() && this.state.$getSorts()),
|
|
6806
|
+
computation: (curr, prev) => {
|
|
6807
|
+
if (!curr)
|
|
6808
|
+
return undefined;
|
|
6809
|
+
if (!prev?.value)
|
|
6810
|
+
return ({ value: updateSortState(initialSortState, curr), timestamp: Date.now() });
|
|
6811
|
+
return ({ value: updateSortState(prev.value.value, curr), timestamp: Date.now() });
|
|
6812
|
+
} });
|
|
6813
|
+
this.$allData = computed(() => (this.$tableBuilder()?.$initialized() && this.$tableBuilder()?.$data()) || [], { ...(ngDevMode ? { debugName: "$allData" } : {}) });
|
|
6853
6814
|
this.$allDataTimeStamped = computed(() => {
|
|
6854
6815
|
const data = this.$allData();
|
|
6855
6816
|
if (!data)
|
|
@@ -6858,7 +6819,7 @@ class TableContainerComponent {
|
|
|
6858
6819
|
value: data,
|
|
6859
6820
|
timestamp: Date.now()
|
|
6860
6821
|
});
|
|
6861
|
-
}, ...(ngDevMode ?
|
|
6822
|
+
}, { ...(ngDevMode ? { debugName: "$allDataTimeStamped" } : {}) });
|
|
6862
6823
|
this.$allTimeStamped = computed(() => {
|
|
6863
6824
|
const data = this.$allDataTimeStamped();
|
|
6864
6825
|
const sort = this.$sortStateTimeStamped();
|
|
@@ -6870,31 +6831,20 @@ class TableContainerComponent {
|
|
|
6870
6831
|
sort,
|
|
6871
6832
|
filter
|
|
6872
6833
|
});
|
|
6873
|
-
}, ...(ngDevMode ?
|
|
6874
|
-
this.$sortedAndFilteredData = linkedSignal(...(ngDevMode ?
|
|
6875
|
-
|
|
6876
|
-
|
|
6877
|
-
|
|
6878
|
-
|
|
6879
|
-
|
|
6880
|
-
|
|
6881
|
-
|
|
6882
|
-
|
|
6883
|
-
|
|
6884
|
-
|
|
6885
|
-
|
|
6886
|
-
|
|
6887
|
-
if (!values || !init)
|
|
6888
|
-
return undefined;
|
|
6889
|
-
const { data, filter, sort } = values;
|
|
6890
|
-
const val = prev?.value?.value || data.value;
|
|
6891
|
-
const filteredData = sortAndFilterData(data, filter, sort, !prev?.value, val);
|
|
6892
|
-
return ({ value: filteredData, timestamp: Date.now() });
|
|
6893
|
-
}
|
|
6894
|
-
}]));
|
|
6895
|
-
this.$timestampedGroups = computed(() => ({ value: this.state.$groupByData(), timestamp: Date.now() }), ...(ngDevMode ? [{ debugName: "$timestampedGroups" }] : []));
|
|
6896
|
-
this.$timestampedExpanded = computed(() => ({ value: this.state.$expandGroups(), timestamp: Date.now() }), ...(ngDevMode ? [{ debugName: "$timestampedExpanded" }] : []));
|
|
6897
|
-
this.$timestampedGroupSortUpdated = computed(() => ({ value: this.state.$sortedGroupsUpdates(), timestamp: Date.now() }), ...(ngDevMode ? [{ debugName: "$timestampedGroupSortUpdated" }] : []));
|
|
6834
|
+
}, { ...(ngDevMode ? { debugName: "$allTimeStamped" } : {}) });
|
|
6835
|
+
this.$sortedAndFilteredData = linkedSignal({ ...(ngDevMode ? { debugName: "$sortedAndFilteredData" } : {}), source: this.$allTimeStamped,
|
|
6836
|
+
computation: (values, prev) => {
|
|
6837
|
+
const init = this.$isInitializationState(InitializationState.Ready);
|
|
6838
|
+
if (!values || !init)
|
|
6839
|
+
return undefined;
|
|
6840
|
+
const { data, filter, sort } = values;
|
|
6841
|
+
const val = prev?.value?.value || data.value;
|
|
6842
|
+
const filteredData = sortAndFilterData(data, filter, sort, !prev?.value, val);
|
|
6843
|
+
return ({ value: filteredData, timestamp: Date.now() });
|
|
6844
|
+
} });
|
|
6845
|
+
this.$timestampedGroups = computed(() => ({ value: this.state.$groupByData(), timestamp: Date.now() }), { ...(ngDevMode ? { debugName: "$timestampedGroups" } : {}) });
|
|
6846
|
+
this.$timestampedExpanded = computed(() => ({ value: this.state.$expandGroups(), timestamp: Date.now() }), { ...(ngDevMode ? { debugName: "$timestampedExpanded" } : {}) });
|
|
6847
|
+
this.$timestampedGroupSortUpdated = computed(() => ({ value: this.state.$sortedGroupsUpdates(), timestamp: Date.now() }), { ...(ngDevMode ? { debugName: "$timestampedGroupSortUpdated" } : {}) });
|
|
6898
6848
|
this.$dataAndGroupsTimestamped = computed(() => {
|
|
6899
6849
|
const data = this.$sortedAndFilteredData();
|
|
6900
6850
|
const groups = this.$timestampedGroups();
|
|
@@ -6908,22 +6858,14 @@ class TableContainerComponent {
|
|
|
6908
6858
|
expanded,
|
|
6909
6859
|
groupSorts,
|
|
6910
6860
|
});
|
|
6911
|
-
}, ...(ngDevMode ?
|
|
6912
|
-
this.$filteredSortedAndGrouped = linkedSignal(...(ngDevMode ?
|
|
6913
|
-
|
|
6914
|
-
|
|
6915
|
-
|
|
6916
|
-
|
|
6917
|
-
|
|
6918
|
-
|
|
6919
|
-
source: this.$dataAndGroupsTimestamped,
|
|
6920
|
-
computation: (curr, prev) => {
|
|
6921
|
-
if (!curr)
|
|
6922
|
-
return undefined;
|
|
6923
|
-
const val = prev?.value?.groupedData || [];
|
|
6924
|
-
return updateGroupByState(val, curr, !prev?.value, this.state.$metaData());
|
|
6925
|
-
}
|
|
6926
|
-
}]));
|
|
6861
|
+
}, { ...(ngDevMode ? { debugName: "$dataAndGroupsTimestamped" } : {}) });
|
|
6862
|
+
this.$filteredSortedAndGrouped = linkedSignal({ ...(ngDevMode ? { debugName: "$filteredSortedAndGrouped" } : {}), source: this.$dataAndGroupsTimestamped,
|
|
6863
|
+
computation: (curr, prev) => {
|
|
6864
|
+
if (!curr)
|
|
6865
|
+
return undefined;
|
|
6866
|
+
const val = prev?.value?.groupedData || [];
|
|
6867
|
+
return updateGroupByState(val, curr, !prev?.value, this.state.$metaData());
|
|
6868
|
+
} });
|
|
6927
6869
|
this.$isInitializationState = (state) => computed(() => this.state.selectSignal(s => s.initializationState >= state)());
|
|
6928
6870
|
this.headerId = TableContainerComponent.headerId;
|
|
6929
6871
|
}
|
|
@@ -6949,10 +6891,10 @@ class TableContainerComponent {
|
|
|
6949
6891
|
#destroyRef;
|
|
6950
6892
|
#setUpAllValuesFilters;
|
|
6951
6893
|
static { this.headerId = 'tb-header-wrapper'; }
|
|
6952
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
6953
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: TableContainerComponent, isStandalone: true, selector: "tb-table-container", inputs: { $tableBuilder: { classPropertyName: "$tableBuilder", publicName: "tableBuilder", isSignal: true, isRequired: true, transformFunction: null }, $tableIdInput: { classPropertyName: "$tableIdInput", publicName: "tableId", isSignal: true, isRequired: false, transformFunction: null }, $trackByInput: { classPropertyName: "$trackByInput", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, $inputFilters: { classPropertyName: "$inputFilters", publicName: "inputFilters", isSignal: true, isRequired: false, transformFunction: null }, $indexColumnInput: { classPropertyName: "$indexColumnInput", publicName: "indexColumn", isSignal: true, isRequired: false, transformFunction: null }, $selectionColumnInput: { classPropertyName: "$selectionColumnInput", publicName: "selectionColumn", isSignal: true, isRequired: false, transformFunction: null }, $stickyHeaderInput: { classPropertyName: "$stickyHeaderInput", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, $stickyFooterInput: { classPropertyName: "$stickyFooterInput", publicName: "stickyFooter", isSignal: true, isRequired: false, transformFunction: null }, $groupHeaderTemplate: { classPropertyName: "$groupHeaderTemplate", publicName: "groupHeaderTemplate", isSignal: true, isRequired: false, transformFunction: null }, $groupHeaderHeight: { classPropertyName: "$groupHeaderHeight", publicName: "groupHeaderHeight", isSignal: true, isRequired: false, transformFunction: null }, $pageSize: { classPropertyName: "$pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection$: "selection", onStateReset$: "onStateReset", onSaveState$: "onSaveState", state$: "state", data$: "data", sortedAndFilteredAndGroupedData$: "sortedAndFilteredAndGroupedData" }, providers: [TableStore, ExportToCsvService, WrapperFilterStore, DataStore], queries: [{ propertyName: "$filterDirectives", predicate: TableFilterDirective, descendants: true, isSignal: true }, { propertyName: "$customFilterDirectives", predicate: TableCustomFilterDirective, descendants: true, isSignal: true }, { propertyName: "_$customRows", predicate: (MatRowDef), isSignal: true }, { propertyName: "$customCells", predicate: CustomCellDirective, isSignal: true }, { propertyName: "$customGroupRows", predicate: CustomGroupRowDirective, isSignal: true }], viewQueries: [{ propertyName: "$paginatorComponent", first: true, predicate: PaginatorComponent, descendants: true, isSignal: true }, { propertyName: "$paginatorWrapper", first: true, predicate: ["paginatorWrapper"], descendants: true, isSignal: true }, { propertyName: "$genericTable", first: true, predicate: GenericTableComponent, descendants: true, isSignal: true }, { propertyName: "$menu", first: true, predicate: MatMenu, descendants: true, isSignal: true }], ngImport: i0, template: "@let tableId = $tableId();\r\n@let tableSettings = state.$tableSettings();\r\n\r\n<ng-content select=\"[before]\" />\r\n<ng-container multiSort>\r\n <div class=\"tb-header-wrapper\" [id]=\"headerId\">\r\n <div class=\"title\">\r\n @if ((!$collapsedHeader()) || tableSettings.showTitleWhenHeaderCollapsed)\r\n {\r\n <ng-content select=\".tb-header-title\"/>\r\n @if (tableSettings.title)\r\n {\r\n @switch (tableSettings.title.level)\r\n {\r\n @case (1) { <h1 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h1>}\r\n @case (2) { <h2 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h2>}\r\n @case (4) { <h4 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h4>}\r\n @case (5) { <h5 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h5>}\r\n @case (6) { <h6 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h6>}\r\n @default { <h3 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h3>}\r\n }\r\n }\r\n }\r\n </div>\r\n @if(state.$groupByData().length)\r\n {\r\n <group-by-list />\r\n }\r\n <div class=\"flx-row-end\">\r\n <lib-filter-list />\r\n @if (!tableSettings.hideHeader)\r\n {\r\n @if (!$collapsedHeader())\r\n {\r\n <ng-container *ngTemplateOutlet=\"headerMenu\"/>\r\n <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\">\r\n <mat-icon>more_vert</mat-icon>\r\n </button>\r\n <mat-menu #mainMenu='matMenu' [xPosition]=\"'before'\">\r\n <lib-table-header-menu #l/>\r\n </mat-menu>\r\n\r\n }\r\n @else\r\n {\r\n <mat-icon color=\"primary\" class=\"flat-menu-button pointer\" [matMenuTriggerFor]=\"mainMenu\">more_horiz</mat-icon>\r\n <mat-menu #mainMenu='matMenu'>\r\n <div class=\"collapsed-head-row\">\r\n <ng-container *ngTemplateOutlet=\"headerMenu; injector menuInjector\"/>\r\n </div>\r\n <lib-table-header-menu />\r\n </mat-menu>\r\n }\r\n <mat-icon class=\"collapse-icon header\" [matTooltip]=\"$collapsedHeader() ? 'expand' : 'collapse'\"\r\n (click)=\"state.toggleCollapseHeader()\">\r\n {{$collapsedHeader() ? 'expand_less' : 'expand_more'}}\r\n </mat-icon>\r\n }\r\n\r\n </div>\r\n </div>\r\n\r\n @if($useVirtual())\r\n {\r\n <tb-virtual-scroll-container class=\"scrollable\">\r\n <tb-generic-table [rows]=\"$customRows()\" [data]=\"$data()!\" [displayData]=\"$filteredSortedAndGrouped()?.displayData || []\"\r\n [columnInfos]='$myColumns()' [trackBy]=\"$trackBy()\" [dataSource]=\"dataSource\" (selection)='_selection$.next($event)' />\r\n </tb-virtual-scroll-container>\r\n }\r\n @else\r\n {\r\n <tb-generic-table [rows]=\"$customRows()\" [data]=\"$data()!\" [displayData]=\"$filteredSortedAndGrouped()?.displayData || []\"\r\n [columnInfos]='$myColumns()' [trackBy]=\"$trackBy()\" [dataSource]=\"dataSource\" (selection)='_selection$.next($event)' />\r\n }\r\n @if(tableSettings.usePaginator)\r\n {\r\n <div #paginatorWrapper class=\"paginator tb-paginator-wrapper\">\r\n <tb-paginator #tbPaginator />\r\n\r\n <mat-icon class=\"collapse-icon footer\" [matTooltip]=\"$collapsedFooter() ? 'expand' : 'collapse'\"\r\n (click)=\"state.toggleCollapseFooter()\">\r\n {{$collapsedFooter() ? 'expand_more' : 'expand_less'}}\r\n </mat-icon>\r\n </div>\r\n }\r\n</ng-container>\r\n\r\n<ng-template #headerMenu>\r\n @if (!tableSettings.hideFilter) {<tb-filter-displayer/>}\r\n @if (!tableSettings.hideColumnSettings) {<tb-col-displayer/>}\r\n @if (!tableSettings.hideSort) {<tb-sort-menu/>}\r\n @if (!!tableId && !$collapsedHeader()) {<tb-profiles-menu [tableId]=\"tableId\"/>}\r\n</ng-template>\r\n", styles: [".tb-header-wrapper{display:flex;flex-direction:row;width:100%}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;margin-left:auto}.flat-menu{line-height:initial;height:initial}.pointer{cursor:pointer}.add-key{width:90%}.paginator{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:#fff;bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.profiles-menu{visibility:hidden;width:0px;height:0px;display:block;overflow:hidden;position:absolute;top:50px}.collapsed-head-row{display:flex;justify-content:space-evenly}::ng-deep tb-generic-table .mat-mdc-row:nth-child(odd):not(.no-stripe){background-color:var(--tb-odd-row-background-color, #cdeefe)}.tb-container-title{padding-left:var(--tb-container-title-padding-left, 10px);margin:var(--tb-container-title-margin, 0)}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}.paginator-row{display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PaginatorComponent, selector: "tb-paginator" }, { kind: "directive", type: MultiSortDirective, selector: "[multiSort]", inputs: ["matSortDisabled"], exportAs: ["multiSort"] }, { kind: "component", type: GroupByListComponent, selector: "group-by-list" }, { kind: "component", type: FilterChipsComponent, selector: "lib-filter-list" }, { kind: "component", type: GenFilterDisplayerComponent, selector: "tb-filter-displayer" }, { kind: "component", type: GenColDisplayerComponent, selector: "tb-col-displayer" }, { kind: "component", type: SortMenuComponent, selector: "tb-sort-menu" }, { kind: "component", type: GenericTableComponent, selector: "tb-generic-table", inputs: ["displayData", "data", "rows", "columnInfos", "dataSource", "trackBy"], outputs: ["selection"] }, { kind: "component", type: ProfilesMenuComponent, selector: "tb-profiles-menu", inputs: ["tableId", "isMatMenuChild"] }, { kind: "component", type: TableHeaderMenuComponent, selector: "lib-table-header-menu" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i1$4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: VirtualScrollContainer, selector: "tb-virtual-scroll-container" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6894
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: TableContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6895
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: TableContainerComponent, isStandalone: true, selector: "tb-table-container", inputs: { $tableBuilder: { classPropertyName: "$tableBuilder", publicName: "tableBuilder", isSignal: true, isRequired: true, transformFunction: null }, $tableIdInput: { classPropertyName: "$tableIdInput", publicName: "tableId", isSignal: true, isRequired: false, transformFunction: null }, $trackByInput: { classPropertyName: "$trackByInput", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, $inputFilters: { classPropertyName: "$inputFilters", publicName: "inputFilters", isSignal: true, isRequired: false, transformFunction: null }, $indexColumnInput: { classPropertyName: "$indexColumnInput", publicName: "indexColumn", isSignal: true, isRequired: false, transformFunction: null }, $selectionColumnInput: { classPropertyName: "$selectionColumnInput", publicName: "selectionColumn", isSignal: true, isRequired: false, transformFunction: null }, $stickyHeaderInput: { classPropertyName: "$stickyHeaderInput", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, $stickyFooterInput: { classPropertyName: "$stickyFooterInput", publicName: "stickyFooter", isSignal: true, isRequired: false, transformFunction: null }, $groupHeaderTemplate: { classPropertyName: "$groupHeaderTemplate", publicName: "groupHeaderTemplate", isSignal: true, isRequired: false, transformFunction: null }, $groupHeaderHeight: { classPropertyName: "$groupHeaderHeight", publicName: "groupHeaderHeight", isSignal: true, isRequired: false, transformFunction: null }, $pageSize: { classPropertyName: "$pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection$: "selection", onStateReset$: "onStateReset", onSaveState$: "onSaveState", state$: "state", data$: "data", sortedAndFilteredAndGroupedData$: "sortedAndFilteredAndGroupedData" }, providers: [TableStore, ExportToCsvService, WrapperFilterStore, DataStore], queries: [{ propertyName: "$filterDirectives", predicate: TableFilterDirective, descendants: true, isSignal: true }, { propertyName: "$customFilterDirectives", predicate: TableCustomFilterDirective, descendants: true, isSignal: true }, { propertyName: "_$customRows", predicate: (MatRowDef), isSignal: true }, { propertyName: "$customCells", predicate: CustomCellDirective, isSignal: true }, { propertyName: "$customGroupRows", predicate: CustomGroupRowDirective, isSignal: true }], viewQueries: [{ propertyName: "$paginatorComponent", first: true, predicate: PaginatorComponent, descendants: true, isSignal: true }, { propertyName: "$paginatorWrapper", first: true, predicate: ["paginatorWrapper"], descendants: true, isSignal: true }, { propertyName: "$genericTable", first: true, predicate: GenericTableComponent, descendants: true, isSignal: true }, { propertyName: "$menu", first: true, predicate: MatMenu, descendants: true, isSignal: true }], ngImport: i0, template: "@let tableId = $tableId();\r\n@let tableSettings = state.$tableSettings();\r\n\r\n<ng-content select=\"[before]\" />\r\n<ng-container multiSort>\r\n <div class=\"tb-header-wrapper\" [id]=\"headerId\">\r\n <div class=\"title\">\r\n @if ((!$collapsedHeader()) || tableSettings.showTitleWhenHeaderCollapsed)\r\n {\r\n <ng-content select=\".tb-header-title\"/>\r\n @if (tableSettings.title)\r\n {\r\n @switch (tableSettings.title.level)\r\n {\r\n @case (1) { <h1 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h1>}\r\n @case (2) { <h2 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h2>}\r\n @case (4) { <h4 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h4>}\r\n @case (5) { <h5 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h5>}\r\n @case (6) { <h6 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h6>}\r\n @default { <h3 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h3>}\r\n }\r\n }\r\n }\r\n </div>\r\n @if(state.$groupByData().length)\r\n {\r\n <group-by-list />\r\n }\r\n <div class=\"flx-row-end\">\r\n <lib-filter-list />\r\n @if (!tableSettings.hideHeader)\r\n {\r\n @if (!$collapsedHeader())\r\n {\r\n <ng-container *ngTemplateOutlet=\"headerMenu\"/>\r\n <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\">\r\n <mat-icon>more_vert</mat-icon>\r\n </button>\r\n <mat-menu #mainMenu='matMenu' [xPosition]=\"'before'\">\r\n <lib-table-header-menu #l/>\r\n </mat-menu>\r\n\r\n }\r\n @else\r\n {\r\n <mat-icon color=\"primary\" class=\"flat-menu-button pointer\" [matMenuTriggerFor]=\"mainMenu\">more_horiz</mat-icon>\r\n <mat-menu #mainMenu='matMenu'>\r\n <div class=\"collapsed-head-row\">\r\n <ng-container *ngTemplateOutlet=\"headerMenu; injector menuInjector\"/>\r\n </div>\r\n <lib-table-header-menu />\r\n </mat-menu>\r\n }\r\n <mat-icon class=\"collapse-icon header\" [matTooltip]=\"$collapsedHeader() ? 'expand' : 'collapse'\"\r\n (click)=\"state.toggleCollapseHeader()\">\r\n {{$collapsedHeader() ? 'expand_less' : 'expand_more'}}\r\n </mat-icon>\r\n }\r\n\r\n </div>\r\n </div>\r\n\r\n @if($useVirtual())\r\n {\r\n <tb-virtual-scroll-container class=\"scrollable\">\r\n <tb-generic-table [rows]=\"$customRows()\" [data]=\"$data()!\" [displayData]=\"$filteredSortedAndGrouped()?.displayData || []\"\r\n [columnInfos]='$myColumns()' [trackBy]=\"$trackBy()\" [dataSource]=\"dataSource\" (selection)='_selection$.next($event)' />\r\n </tb-virtual-scroll-container>\r\n }\r\n @else\r\n {\r\n <tb-generic-table [rows]=\"$customRows()\" [data]=\"$data()!\" [displayData]=\"$filteredSortedAndGrouped()?.displayData || []\"\r\n [columnInfos]='$myColumns()' [trackBy]=\"$trackBy()\" [dataSource]=\"dataSource\" (selection)='_selection$.next($event)' />\r\n }\r\n @if(tableSettings.usePaginator)\r\n {\r\n <div #paginatorWrapper class=\"paginator tb-paginator-wrapper\">\r\n <tb-paginator #tbPaginator />\r\n\r\n <mat-icon class=\"collapse-icon footer\" [matTooltip]=\"$collapsedFooter() ? 'expand' : 'collapse'\"\r\n (click)=\"state.toggleCollapseFooter()\">\r\n {{$collapsedFooter() ? 'expand_more' : 'expand_less'}}\r\n </mat-icon>\r\n </div>\r\n }\r\n</ng-container>\r\n\r\n<ng-template #headerMenu>\r\n @if (!tableSettings.hideFilter) {<tb-filter-displayer/>}\r\n @if (!tableSettings.hideColumnSettings) {<tb-col-displayer/>}\r\n @if (!tableSettings.hideSort) {<tb-sort-menu/>}\r\n @if (!!tableId && !$collapsedHeader()) {<tb-profiles-menu [tableId]=\"tableId\"/>}\r\n</ng-template>\r\n", styles: [".tb-header-wrapper{display:flex;flex-direction:row;width:100%}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;margin-left:auto}.flat-menu{line-height:initial;height:initial}.pointer{cursor:pointer}.add-key{width:90%}.paginator{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:#fff;bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.profiles-menu{visibility:hidden;width:0px;height:0px;display:block;overflow:hidden;position:absolute;top:50px}.collapsed-head-row{display:flex;justify-content:space-evenly}::ng-deep tb-generic-table .mat-mdc-row:nth-child(odd):not(.no-stripe){background-color:var(--tb-odd-row-background-color, #cdeefe)}.tb-container-title{padding-left:var(--tb-container-title-padding-left, 10px);margin:var(--tb-container-title-margin, 0)}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}.paginator-row{display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PaginatorComponent, selector: "tb-paginator" }, { kind: "directive", type: MultiSortDirective, selector: "[multiSort]", inputs: ["matSortDisabled"], exportAs: ["multiSort"] }, { kind: "component", type: GroupByListComponent, selector: "group-by-list" }, { kind: "component", type: FilterChipsComponent, selector: "lib-filter-list" }, { kind: "component", type: GenFilterDisplayerComponent, selector: "tb-filter-displayer" }, { kind: "component", type: GenColDisplayerComponent, selector: "tb-col-displayer" }, { kind: "component", type: SortMenuComponent, selector: "tb-sort-menu" }, { kind: "component", type: GenericTableComponent, selector: "tb-generic-table", inputs: ["displayData", "data", "rows", "columnInfos", "dataSource", "trackBy"], outputs: ["selection"] }, { kind: "component", type: ProfilesMenuComponent, selector: "tb-profiles-menu", inputs: ["tableId", "isMatMenuChild"] }, { kind: "component", type: TableHeaderMenuComponent, selector: "lib-table-header-menu" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i1$4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: VirtualScrollContainer, selector: "tb-virtual-scroll-container" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6954
6896
|
}
|
|
6955
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
6897
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: TableContainerComponent, decorators: [{
|
|
6956
6898
|
type: Component,
|
|
6957
6899
|
args: [{ selector: 'tb-table-container', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TableStore, ExportToCsvService, WrapperFilterStore, DataStore], imports: [
|
|
6958
6900
|
NgTemplateOutlet,
|
|
@@ -6975,8 +6917,8 @@ class TableBuilderModule {
|
|
|
6975
6917
|
]
|
|
6976
6918
|
};
|
|
6977
6919
|
}
|
|
6978
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
6979
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.
|
|
6920
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: TableBuilderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
6921
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: TableBuilderModule, imports: [TableContainerComponent,
|
|
6980
6922
|
CustomCellDirective,
|
|
6981
6923
|
CustomGroupRowDirective,
|
|
6982
6924
|
TableFilterDirective,
|
|
@@ -6987,11 +6929,11 @@ class TableBuilderModule {
|
|
|
6987
6929
|
TableFilterStringContainsDirective,
|
|
6988
6930
|
TableWrapperDirective,
|
|
6989
6931
|
UtilitiesModule] }); }
|
|
6990
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.
|
|
6932
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: TableBuilderModule, providers: [
|
|
6991
6933
|
MultiSortDirective,
|
|
6992
6934
|
], imports: [TableContainerComponent, UtilitiesModule] }); }
|
|
6993
6935
|
}
|
|
6994
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
6936
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: TableBuilderModule, decorators: [{
|
|
6995
6937
|
type: NgModule,
|
|
6996
6938
|
args: [{
|
|
6997
6939
|
imports: [
|
|
@@ -7048,21 +6990,21 @@ class TableBuilder {
|
|
|
7048
6990
|
this.data = data;
|
|
7049
6991
|
this.metaData = metaData;
|
|
7050
6992
|
this.settings = settings;
|
|
7051
|
-
this._container = signal(undefined, ...(ngDevMode ?
|
|
6993
|
+
this._container = signal(undefined, { ...(ngDevMode ? { debugName: "_container" } : {}) });
|
|
7052
6994
|
this.container = this._container.asReadonly();
|
|
7053
|
-
this.$metaData = computed(() => this.$initialized() ? this.#$metaData() : undefined, ...(ngDevMode ?
|
|
7054
|
-
this.$settings = computed(() => this.$initialized() ? this.#$settings() : undefined, ...(ngDevMode ?
|
|
7055
|
-
this.#$metaNeedsPrep = signal(false, ...(ngDevMode ?
|
|
7056
|
-
this.#$dataIsObservable = signal(false, ...(ngDevMode ?
|
|
7057
|
-
this.#$settingsIsObservable = signal(false, ...(ngDevMode ?
|
|
7058
|
-
this.#$needsPrep = computed(() => this.#$dataIsObservable() || this.#$metaNeedsPrep() || this.#$settingsIsObservable(), ...(ngDevMode ?
|
|
7059
|
-
this.$initialized = signal(false, ...(ngDevMode ?
|
|
6995
|
+
this.$metaData = computed(() => this.$initialized() ? this.#$metaData() : undefined, { ...(ngDevMode ? { debugName: "$metaData" } : {}) });
|
|
6996
|
+
this.$settings = computed(() => this.$initialized() ? this.#$settings() : undefined, { ...(ngDevMode ? { debugName: "$settings" } : {}) });
|
|
6997
|
+
this.#$metaNeedsPrep = signal(false, { ...(ngDevMode ? { debugName: "#$metaNeedsPrep" } : {}) });
|
|
6998
|
+
this.#$dataIsObservable = signal(false, { ...(ngDevMode ? { debugName: "#$dataIsObservable" } : {}) });
|
|
6999
|
+
this.#$settingsIsObservable = signal(false, { ...(ngDevMode ? { debugName: "#$settingsIsObservable" } : {}) });
|
|
7000
|
+
this.#$needsPrep = computed(() => this.#$dataIsObservable() || this.#$metaNeedsPrep() || this.#$settingsIsObservable(), { ...(ngDevMode ? { debugName: "#$needsPrep" } : {}) });
|
|
7001
|
+
this.$initialized = signal(false, { ...(ngDevMode ? { debugName: "$initialized" } : {}) });
|
|
7060
7002
|
this.#dataCleaners = computed(() => {
|
|
7061
7003
|
const metaData = this.$metaData();
|
|
7062
7004
|
if (!metaData)
|
|
7063
7005
|
return undefined;
|
|
7064
7006
|
return createDataCleaners(metaData);
|
|
7065
|
-
}, ...(ngDevMode ?
|
|
7007
|
+
}, { ...(ngDevMode ? { debugName: "#dataCleaners" } : {}) });
|
|
7066
7008
|
this.$data = computed(() => {
|
|
7067
7009
|
const data = this.#$data();
|
|
7068
7010
|
const cleaners = this.#dataCleaners();
|
|
@@ -7074,7 +7016,7 @@ class TableBuilder {
|
|
|
7074
7016
|
return cleaned;
|
|
7075
7017
|
});
|
|
7076
7018
|
return cleanedData;
|
|
7077
|
-
}, ...(ngDevMode ?
|
|
7019
|
+
}, { ...(ngDevMode ? { debugName: "$data" } : {}) });
|
|
7078
7020
|
if (isObservable(data)) {
|
|
7079
7021
|
this.#$dataIsObservable.set(true);
|
|
7080
7022
|
}
|
|
@@ -7117,7 +7059,7 @@ class TableBuilder {
|
|
|
7117
7059
|
this.#$metaData = toSignal(this.metaData, { injector, initialValue: [] });
|
|
7118
7060
|
}
|
|
7119
7061
|
else {
|
|
7120
|
-
this.#$metaData = computed(() => this.createMetaData(this.#$data()[0]), ...(ngDevMode ?
|
|
7062
|
+
this.#$metaData = computed(() => this.createMetaData(this.#$data()[0]), { ...(ngDevMode ? { debugName: "#$metaData" } : {}) });
|
|
7121
7063
|
}
|
|
7122
7064
|
}
|
|
7123
7065
|
this.$initialized.set(true);
|
|
@@ -7177,12 +7119,12 @@ function actionStatusReducer(state = initialState, action) {
|
|
|
7177
7119
|
}
|
|
7178
7120
|
|
|
7179
7121
|
class NgrxExtModule {
|
|
7180
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
7181
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.
|
|
7182
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.
|
|
7122
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: NgrxExtModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
7123
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: NgrxExtModule, imports: [CommonModule, i1$9.StoreFeatureModule] }); }
|
|
7124
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: NgrxExtModule, imports: [CommonModule,
|
|
7183
7125
|
StoreModule.forFeature('ActionStatus', actionStatusReducer)] }); }
|
|
7184
7126
|
}
|
|
7185
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
7127
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: NgrxExtModule, decorators: [{
|
|
7186
7128
|
type: NgModule,
|
|
7187
7129
|
args: [{
|
|
7188
7130
|
declarations: [],
|
|
@@ -7200,10 +7142,10 @@ class ActionStateSpinnerComponent {
|
|
|
7200
7142
|
ngOnInit() {
|
|
7201
7143
|
this.serverActionStatus$ = this.status$.pipe(delayOn(a => a.status === serverStatusTypes.inProgress, 500));
|
|
7202
7144
|
}
|
|
7203
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
7204
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
7145
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: ActionStateSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7146
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: ActionStateSpinnerComponent, isStandalone: true, selector: "lib-action-state-spinner", inputs: { status$: "status$" }, ngImport: i0, template: "@if((serverActionStatus$ | async)?.status === serverStatusTypes.inProgress)\r\n{\r\n <div id=\"blocker\">\r\n <mat-spinner class=\"spinner\" [diameter]=\"200\" />\r\n </div>\r\n}\r\n\r\n", styles: ["#blocker{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0e0d0d69;z-index:999999}.spinner{position:absolute;top:50%;left:40%;transform:translate(-50%,-50%)}\n"], dependencies: [{ kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i1$a.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
7205
7147
|
}
|
|
7206
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
7148
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: ActionStateSpinnerComponent, decorators: [{
|
|
7207
7149
|
type: Component,
|
|
7208
7150
|
args: [{ selector: 'lib-action-state-spinner', imports: [AsyncPipe, MatProgressSpinnerModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if((serverActionStatus$ | async)?.status === serverStatusTypes.inProgress)\r\n{\r\n <div id=\"blocker\">\r\n <mat-spinner class=\"spinner\" [diameter]=\"200\" />\r\n </div>\r\n}\r\n\r\n", styles: ["#blocker{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0e0d0d69;z-index:999999}.spinner{position:absolute;top:50%;left:40%;transform:translate(-50%,-50%)}\n"] }]
|
|
7209
7151
|
}], propDecorators: { status$: [{
|
|
@@ -7211,11 +7153,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImpor
|
|
|
7211
7153
|
}] } });
|
|
7212
7154
|
|
|
7213
7155
|
class ActionStateUiModule {
|
|
7214
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
7215
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.
|
|
7216
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.
|
|
7156
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: ActionStateUiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
7157
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: ActionStateUiModule, imports: [ActionStateSpinnerComponent], exports: [ActionStateSpinnerComponent] }); }
|
|
7158
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: ActionStateUiModule, imports: [ActionStateSpinnerComponent] }); }
|
|
7217
7159
|
}
|
|
7218
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
7160
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: ActionStateUiModule, decorators: [{
|
|
7219
7161
|
type: NgModule,
|
|
7220
7162
|
args: [{
|
|
7221
7163
|
imports: [
|