@one-paragon/angular-utilities 2.7.6 → 2.7.7-beta.1
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.1.0", 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.1.0", 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.1.0", 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.1.0", ngImport: i0, type: HttpStateDirectiveBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
178
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", 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.1.0", 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.1.0", ngImport: i0, type: HttpErrorStateDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
199
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", 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.1.0", 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.1.0", ngImport: i0, type: HttpInProgressStateDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
221
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", 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.1.0", 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.1.0", ngImport: i0, type: HttpNotStartedStateDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
243
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", 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.1.0", 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.1.0", ngImport: i0, type: HttpSuccessStateDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
268
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", 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.1.0", 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.1.0", ngImport: i0, type: HttpRequestModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
340
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.0", 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.1.0", 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.1.0", 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.1.0", ngImport: i0, type: Subscriber, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
489
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", 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.1.0", 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 },
|
|
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,
|
|
555
|
-
this.$selectStatus = computed(() => this.$selectRequestState()?.status,
|
|
556
|
-
this.$isSuccess = computed(() => isSuccessState(this.$selectRequestState()),
|
|
557
|
-
this.$isError = computed(() => isErrorState(this.$selectRequestState()),
|
|
558
|
-
this.$isInProgress = computed(() => this.$selectStatus() === RequestStatus.inProgress,
|
|
559
|
-
this.$isNotStarted = computed(() => this.$selectStatus() === RequestStatus.notStarted,
|
|
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
|
-
},
|
|
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
|
-
},
|
|
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
|
-
},
|
|
612
|
+
}, ...(ngDevMode ? [{ debugName: "paramsArr" }] : []));
|
|
613
613
|
effect(() => {
|
|
614
614
|
const vals = paramsArr();
|
|
615
615
|
untracked(() => {
|
|
@@ -795,10 +795,10 @@ class RequestStateFactory {
|
|
|
795
795
|
this.requestors.push(requestor);
|
|
796
796
|
return requestor;
|
|
797
797
|
}
|
|
798
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
799
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0
|
|
798
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: RequestStateFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
799
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: RequestStateFactory }); }
|
|
800
800
|
}
|
|
801
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
801
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: RequestStateFactory, decorators: [{
|
|
802
802
|
type: Injectable
|
|
803
803
|
}], ctorParameters: () => [] });
|
|
804
804
|
function createRequestor(req, optionsOrProject, options) {
|
|
@@ -832,10 +832,6 @@ var FieldType;
|
|
|
832
832
|
(function (FieldType) {
|
|
833
833
|
FieldType[FieldType["Unknown"] = 0] = "Unknown";
|
|
834
834
|
FieldType[FieldType["Date"] = 1] = "Date";
|
|
835
|
-
/**
|
|
836
|
-
* @deprecated If `additional.link` is set the column will be treated as a link.
|
|
837
|
-
*/
|
|
838
|
-
FieldType[FieldType["Link"] = 2] = "Link";
|
|
839
835
|
FieldType[FieldType["ImageUrl"] = 3] = "ImageUrl";
|
|
840
836
|
FieldType[FieldType["Currency"] = 4] = "Currency";
|
|
841
837
|
FieldType[FieldType["Array"] = 5] = "Array";
|
|
@@ -844,11 +840,6 @@ var FieldType;
|
|
|
844
840
|
FieldType[FieldType["String"] = 8] = "String";
|
|
845
841
|
FieldType[FieldType["Boolean"] = 9] = "Boolean";
|
|
846
842
|
FieldType[FieldType["PhoneNumber"] = 10] = "PhoneNumber";
|
|
847
|
-
/**
|
|
848
|
-
* @deprecated For mapped properties use proper type (for sorting and filtering) with `map`.
|
|
849
|
-
* For unmapped properties use `FieldType.NotMapped` with map.
|
|
850
|
-
*/
|
|
851
|
-
FieldType[FieldType["Expression"] = 11] = "Expression";
|
|
852
843
|
FieldType[FieldType["Enum"] = 12] = "Enum";
|
|
853
844
|
FieldType[FieldType["DateTime"] = 13] = "DateTime";
|
|
854
845
|
FieldType[FieldType["NotMapped"] = 14] = "NotMapped";
|
|
@@ -1174,8 +1165,8 @@ class CustomCellDirective {
|
|
|
1174
1165
|
noExport: true,
|
|
1175
1166
|
additional: { styles: this.$customCellCellStyles() },
|
|
1176
1167
|
});
|
|
1177
|
-
},
|
|
1178
|
-
this.$inited = signal(false,
|
|
1168
|
+
}, ...(ngDevMode ? [{ debugName: "$metaData" }] : []));
|
|
1169
|
+
this.$inited = signal(false, ...(ngDevMode ? [{ debugName: "$inited" }] : []));
|
|
1179
1170
|
}
|
|
1180
1171
|
ngOnInit() {
|
|
1181
1172
|
this.$inited.set(true);
|
|
@@ -1183,10 +1174,10 @@ class CustomCellDirective {
|
|
|
1183
1174
|
static ngTemplateContextGuard(dir, ctx) {
|
|
1184
1175
|
return true;
|
|
1185
1176
|
}
|
|
1186
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
1187
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0
|
|
1177
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CustomCellDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1178
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.0", 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 }, $customCellCellStyles: { classPropertyName: "$customCellCellStyles", publicName: "customCellCellStyles", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
|
|
1188
1179
|
}
|
|
1189
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1180
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CustomCellDirective, decorators: [{
|
|
1190
1181
|
type: Directive,
|
|
1191
1182
|
args: [{ selector: '[customCell]' }]
|
|
1192
1183
|
}], 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 }] }], $customCellCellStyles: [{ type: i0.Input, args: [{ isSignal: true, alias: "customCellCellStyles", required: false }] }] } });
|
|
@@ -1224,11 +1215,11 @@ class CustomGroupRowDirective {
|
|
|
1224
1215
|
* Useful when multiple custom group rows could apply to the same grouping.
|
|
1225
1216
|
*/
|
|
1226
1217
|
this.$priority = input(0, { ...(ngDevMode ? { debugName: "$priority" } : {}), alias: 'customGroupRowPriority' });
|
|
1227
|
-
this.$inited = signal(false,
|
|
1218
|
+
this.$inited = signal(false, ...(ngDevMode ? [{ debugName: "$inited" }] : []));
|
|
1228
1219
|
/**
|
|
1229
1220
|
* Gets the grouping key(s) this directive applies to, or null for all groupings
|
|
1230
1221
|
*/
|
|
1231
|
-
this.$groupingKey = computed(() => this.$customGroupRow(),
|
|
1222
|
+
this.$groupingKey = computed(() => this.$customGroupRow(), ...(ngDevMode ? [{ debugName: "$groupingKey" }] : []));
|
|
1232
1223
|
/**
|
|
1233
1224
|
* Gets the template reference to use
|
|
1234
1225
|
*/
|
|
@@ -1256,10 +1247,10 @@ class CustomGroupRowDirective {
|
|
|
1256
1247
|
}
|
|
1257
1248
|
return targetKey === groupingKey;
|
|
1258
1249
|
}
|
|
1259
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
1260
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0
|
|
1250
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CustomGroupRowDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1251
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.0", 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 }); }
|
|
1261
1252
|
}
|
|
1262
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1253
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CustomGroupRowDirective, decorators: [{
|
|
1263
1254
|
type: Directive,
|
|
1264
1255
|
args: [{ selector: '[customGroupRow]' }]
|
|
1265
1256
|
}], 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 }] }] } });
|
|
@@ -1330,10 +1321,10 @@ class ResizeColumnDirective {
|
|
|
1330
1321
|
const newTableWidth = (mouseDownData.startTableWidth + columnChange);
|
|
1331
1322
|
return ({ newTableWidth, newColumnWidth });
|
|
1332
1323
|
}
|
|
1333
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
1334
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0
|
|
1324
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ResizeColumnDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1325
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.1.0", type: ResizeColumnDirective, isStandalone: true, selector: "[resizeColumn]", inputs: { resizable: ["resizeColumn", "resizable", booleanAttribute], key: "key" }, ngImport: i0 }); }
|
|
1335
1326
|
}
|
|
1336
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1327
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ResizeColumnDirective, decorators: [{
|
|
1337
1328
|
type: Directive,
|
|
1338
1329
|
args: [{
|
|
1339
1330
|
selector: "[resizeColumn]",
|
|
@@ -1347,15 +1338,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
|
|
|
1347
1338
|
|
|
1348
1339
|
class TableWrapperDirective {
|
|
1349
1340
|
constructor() {
|
|
1350
|
-
this.$registrations = signal([],
|
|
1341
|
+
this.$registrations = signal([], ...(ngDevMode ? [{ debugName: "$registrations" }] : []));
|
|
1351
1342
|
}
|
|
1352
1343
|
register(filter) {
|
|
1353
1344
|
this.$registrations.update(registrations => [...registrations, filter]);
|
|
1354
1345
|
}
|
|
1355
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
1356
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0
|
|
1346
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TableWrapperDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1347
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: TableWrapperDirective, isStandalone: true, selector: "[tbWrapper]", ngImport: i0 }); }
|
|
1357
1348
|
}
|
|
1358
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1349
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TableWrapperDirective, decorators: [{
|
|
1359
1350
|
type: Directive,
|
|
1360
1351
|
args: [{
|
|
1361
1352
|
selector: '[tbWrapper]',
|
|
@@ -1398,10 +1389,10 @@ class TableCustomFilterDirective {
|
|
|
1398
1389
|
constructor() {
|
|
1399
1390
|
this.savable = false;
|
|
1400
1391
|
}
|
|
1401
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
1402
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0
|
|
1392
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TableCustomFilterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1393
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: TableCustomFilterDirective, isStandalone: true, selector: "tb-abstract", ngImport: i0 }); }
|
|
1403
1394
|
}
|
|
1404
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1395
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TableCustomFilterDirective, decorators: [{
|
|
1405
1396
|
type: Directive,
|
|
1406
1397
|
args: [{
|
|
1407
1398
|
selector: 'tb-abstract'
|
|
@@ -1473,10 +1464,10 @@ class TableFilterDirective {
|
|
|
1473
1464
|
});
|
|
1474
1465
|
}
|
|
1475
1466
|
}
|
|
1476
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
1477
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0
|
|
1467
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TableFilterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1468
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: TableFilterDirective, isStandalone: true, selector: "[tbFilter]", inputs: { filterType: "filterType", key: "key", fieldType: "fieldType", filterId: "filterId", active: "active", filterValue: "filterValue" }, usesOnChanges: true, ngImport: i0 }); }
|
|
1478
1469
|
}
|
|
1479
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1470
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TableFilterDirective, decorators: [{
|
|
1480
1471
|
type: Directive,
|
|
1481
1472
|
args: [{
|
|
1482
1473
|
selector: "[tbFilter]",
|
|
@@ -1516,10 +1507,10 @@ class TableFilterStringContainsDirective extends TableFilterDirective {
|
|
|
1516
1507
|
}
|
|
1517
1508
|
super.ngOnChanges(changes);
|
|
1518
1509
|
}
|
|
1519
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
1520
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0
|
|
1510
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TableFilterStringContainsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1511
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", 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 }); }
|
|
1521
1512
|
}
|
|
1522
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1513
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TableFilterStringContainsDirective, decorators: [{
|
|
1523
1514
|
type: Directive,
|
|
1524
1515
|
args: [{
|
|
1525
1516
|
selector: '[tbFilterStringContains]',
|
|
@@ -1575,10 +1566,10 @@ class TableCustomFilterDirectiveBase extends TableCustomFilterDirective {
|
|
|
1575
1566
|
this.ready = true;
|
|
1576
1567
|
this.filter$.next(this.filter);
|
|
1577
1568
|
}
|
|
1578
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
1579
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0
|
|
1569
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TableCustomFilterDirectiveBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1570
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: TableCustomFilterDirectiveBase, isStandalone: true, selector: "[tbCustomFilter]", inputs: { predicate: ["tbCustomFilter", "predicate"], active: "active" }, usesInheritance: true, ngImport: i0 }); }
|
|
1580
1571
|
}
|
|
1581
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1572
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TableCustomFilterDirectiveBase, decorators: [{
|
|
1582
1573
|
type: Directive,
|
|
1583
1574
|
args: [{
|
|
1584
1575
|
selector: "[tbCustomFilter]",
|
|
@@ -1613,10 +1604,10 @@ class TbSelectedFilterDirective extends TableCustomFilterDirectiveBase {
|
|
|
1613
1604
|
this.active = this.isActive();
|
|
1614
1605
|
});
|
|
1615
1606
|
}
|
|
1616
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
1617
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0
|
|
1607
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TbSelectedFilterDirective, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1608
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: TbSelectedFilterDirective, isStandalone: true, usesInheritance: true, ngImport: i0 }); }
|
|
1618
1609
|
}
|
|
1619
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1610
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TbSelectedFilterDirective, decorators: [{
|
|
1620
1611
|
type: Directive
|
|
1621
1612
|
}], ctorParameters: () => [{ type: i1.Observable }, { type: undefined }] });
|
|
1622
1613
|
// Checkbox
|
|
@@ -1631,10 +1622,10 @@ class MatCheckboxTbFilterDirective extends TbSelectedFilterDirective {
|
|
|
1631
1622
|
this.matCheckbox = inject(MatCheckbox);
|
|
1632
1623
|
this.matCheckbox = matCheckbox;
|
|
1633
1624
|
}
|
|
1634
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
1635
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0
|
|
1625
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatCheckboxTbFilterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1626
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: MatCheckboxTbFilterDirective, isStandalone: true, selector: "mat-checkbox[tbCustomFilter]", inputs: { predicate: ["tbCustomFilter", "predicate"], filterId: "filterId" }, providers: [{ provide: TableCustomFilterDirective, useExisting: MatCheckboxTbFilterDirective }], usesInheritance: true, ngImport: i0 }); }
|
|
1636
1627
|
}
|
|
1637
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1628
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatCheckboxTbFilterDirective, decorators: [{
|
|
1638
1629
|
type: Directive,
|
|
1639
1630
|
args: [{
|
|
1640
1631
|
selector: 'mat-checkbox[tbCustomFilter]',
|
|
@@ -1657,10 +1648,10 @@ class MatSlideToggleTbFilterDirective extends TbSelectedFilterDirective {
|
|
|
1657
1648
|
ngOnInit() {
|
|
1658
1649
|
super.ngOnInit();
|
|
1659
1650
|
}
|
|
1660
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
1661
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0
|
|
1651
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatSlideToggleTbFilterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1652
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: MatSlideToggleTbFilterDirective, isStandalone: true, selector: "mat-slide-toggle[tbCustomFilter]", inputs: { predicate: ["tbCustomFilter", "predicate"], filterId: "filterId" }, providers: [{ provide: TableCustomFilterDirective, useExisting: MatSlideToggleTbFilterDirective }], usesInheritance: true, ngImport: i0 }); }
|
|
1662
1653
|
}
|
|
1663
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1654
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatSlideToggleTbFilterDirective, decorators: [{
|
|
1664
1655
|
type: Directive,
|
|
1665
1656
|
args: [{
|
|
1666
1657
|
selector: 'mat-slide-toggle[tbCustomFilter]',
|
|
@@ -1684,10 +1675,10 @@ class MatRadioButtonTbFilterDirective extends TbSelectedFilterDirective {
|
|
|
1684
1675
|
ngOnInit() {
|
|
1685
1676
|
super.ngOnInit();
|
|
1686
1677
|
}
|
|
1687
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
1688
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0
|
|
1678
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatRadioButtonTbFilterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1679
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: MatRadioButtonTbFilterDirective, isStandalone: true, selector: "mat-radio-button[tbCustomFilter]", inputs: { predicate: ["tbCustomFilter", "predicate"] }, providers: [{ provide: TableCustomFilterDirective, useExisting: MatRadioButtonTbFilterDirective }], usesInheritance: true, ngImport: i0 }); }
|
|
1689
1680
|
}
|
|
1690
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1681
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatRadioButtonTbFilterDirective, decorators: [{
|
|
1691
1682
|
type: Directive,
|
|
1692
1683
|
args: [{
|
|
1693
1684
|
selector: 'mat-radio-button[tbCustomFilter]',
|
|
@@ -1718,10 +1709,10 @@ class MatOptionTbFilterDirective extends TbSelectedFilterDirective {
|
|
|
1718
1709
|
ngOnInit() {
|
|
1719
1710
|
super.ngOnInit();
|
|
1720
1711
|
}
|
|
1721
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
1722
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0
|
|
1712
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatOptionTbFilterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1713
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: MatOptionTbFilterDirective, isStandalone: true, selector: "mat-option[tbCustomFilter]", inputs: { predicate: ["tbCustomFilter", "predicate"], filterId: "filterId" }, providers: [{ provide: TableCustomFilterDirective, useExisting: MatOptionTbFilterDirective }], usesInheritance: true, ngImport: i0 }); }
|
|
1723
1714
|
}
|
|
1724
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1715
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatOptionTbFilterDirective, decorators: [{
|
|
1725
1716
|
type: Directive,
|
|
1726
1717
|
args: [{
|
|
1727
1718
|
selector: 'mat-option[tbCustomFilter]',
|
|
@@ -1745,10 +1736,10 @@ class MatButtonToggleFilterDirective extends TbSelectedFilterDirective {
|
|
|
1745
1736
|
ngOnInit() {
|
|
1746
1737
|
super.ngOnInit();
|
|
1747
1738
|
}
|
|
1748
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
1749
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0
|
|
1739
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatButtonToggleFilterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1740
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: MatButtonToggleFilterDirective, isStandalone: true, selector: "mat-button-toggle[tbCustomFilter]", inputs: { predicate: ["tbCustomFilter", "predicate"], filterId: "filterId" }, providers: [{ provide: TableCustomFilterDirective, useExisting: MatButtonToggleFilterDirective }], usesInheritance: true, ngImport: i0 }); }
|
|
1750
1741
|
}
|
|
1751
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1742
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatButtonToggleFilterDirective, decorators: [{
|
|
1752
1743
|
type: Directive,
|
|
1753
1744
|
args: [{
|
|
1754
1745
|
selector: 'mat-button-toggle[tbCustomFilter]',
|
|
@@ -1763,10 +1754,10 @@ class PhoneNumberPipe {
|
|
|
1763
1754
|
transform(phoneNum) {
|
|
1764
1755
|
return phoneFormatter(phoneNum);
|
|
1765
1756
|
}
|
|
1766
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
1767
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0
|
|
1757
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PhoneNumberPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
1758
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.1.0", ngImport: i0, type: PhoneNumberPipe, isStandalone: true, name: "phone" }); }
|
|
1768
1759
|
}
|
|
1769
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1760
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PhoneNumberPipe, decorators: [{
|
|
1770
1761
|
type: Pipe,
|
|
1771
1762
|
args: [{ name: 'phone' }]
|
|
1772
1763
|
}] });
|
|
@@ -1788,10 +1779,10 @@ class SpaceCasePipe {
|
|
|
1788
1779
|
return this.spaceCase(value);
|
|
1789
1780
|
};
|
|
1790
1781
|
}
|
|
1791
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
1792
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0
|
|
1782
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SpaceCasePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
1783
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.1.0", ngImport: i0, type: SpaceCasePipe, isStandalone: true, name: "spaceCase" }); }
|
|
1793
1784
|
}
|
|
1794
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1785
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SpaceCasePipe, decorators: [{
|
|
1795
1786
|
type: Pipe,
|
|
1796
1787
|
args: [{ name: 'spaceCase' }]
|
|
1797
1788
|
}] });
|
|
@@ -1835,10 +1826,10 @@ class PreventEnterDirective {
|
|
|
1835
1826
|
onKeyDown() {
|
|
1836
1827
|
return false;
|
|
1837
1828
|
}
|
|
1838
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
1839
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0
|
|
1829
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PreventEnterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1830
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: PreventEnterDirective, isStandalone: true, selector: "preventEnter", host: { listeners: { "keydown.enter": "onKeyDown()" } }, ngImport: i0 }); }
|
|
1840
1831
|
}
|
|
1841
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1832
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PreventEnterDirective, decorators: [{
|
|
1842
1833
|
type: Directive,
|
|
1843
1834
|
args: [{
|
|
1844
1835
|
selector: 'preventEnter',
|
|
@@ -1855,10 +1846,10 @@ class StopPropagationDirective {
|
|
|
1855
1846
|
onMousedown(event) {
|
|
1856
1847
|
event.stopPropagation();
|
|
1857
1848
|
}
|
|
1858
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
1859
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0
|
|
1849
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: StopPropagationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1850
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: StopPropagationDirective, isStandalone: true, selector: "[stop-propagation]", host: { listeners: { "click": "onClick($event)", "mousedown": "onMousedown($event)" } }, ngImport: i0 }); }
|
|
1860
1851
|
}
|
|
1861
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1852
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: StopPropagationDirective, decorators: [{
|
|
1862
1853
|
type: Directive,
|
|
1863
1854
|
args: [{
|
|
1864
1855
|
selector: "[stop-propagation]",
|
|
@@ -1883,10 +1874,10 @@ class AutoFocusDirective {
|
|
|
1883
1874
|
});
|
|
1884
1875
|
}
|
|
1885
1876
|
}
|
|
1886
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
1887
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0
|
|
1877
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AutoFocusDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1878
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: AutoFocusDirective, isStandalone: true, selector: "[autoFocus]", inputs: { autoFocus: "autoFocus" }, ngImport: i0 }); }
|
|
1888
1879
|
}
|
|
1889
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1880
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AutoFocusDirective, decorators: [{
|
|
1890
1881
|
type: Directive,
|
|
1891
1882
|
args: [{
|
|
1892
1883
|
selector: '[autoFocus]',
|
|
@@ -1902,10 +1893,10 @@ class ClickSubjectDirective extends Subject {
|
|
|
1902
1893
|
set clickSubject(val) {
|
|
1903
1894
|
this._val = val;
|
|
1904
1895
|
}
|
|
1905
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
1906
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0
|
|
1896
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ClickSubjectDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1897
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: ClickSubjectDirective, isStandalone: true, selector: "[clickSubject]", inputs: { clickSubject: "clickSubject" }, host: { listeners: { "click": "next(this._val)" } }, exportAs: ["clickSubject"], usesInheritance: true, ngImport: i0 }); }
|
|
1907
1898
|
}
|
|
1908
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1899
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ClickSubjectDirective, decorators: [{
|
|
1909
1900
|
type: Directive,
|
|
1910
1901
|
args: [{
|
|
1911
1902
|
selector: '[clickSubject]',
|
|
@@ -1923,10 +1914,10 @@ class ClickEmitterDirective extends Subject {
|
|
|
1923
1914
|
constructor() {
|
|
1924
1915
|
super();
|
|
1925
1916
|
}
|
|
1926
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
1927
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0
|
|
1917
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ClickEmitterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1918
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: ClickEmitterDirective, isStandalone: true, selector: "[clickEmitter]", host: { listeners: { "click": "next(true)" } }, exportAs: ["clickEmitter"], usesInheritance: true, ngImport: i0 }); }
|
|
1928
1919
|
}
|
|
1929
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1920
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ClickEmitterDirective, decorators: [{
|
|
1930
1921
|
type: Directive,
|
|
1931
1922
|
args: [{
|
|
1932
1923
|
selector: '[clickEmitter]',
|
|
@@ -1950,10 +1941,10 @@ class DialogService {
|
|
|
1950
1941
|
closeAllOpDialogs() {
|
|
1951
1942
|
this.allOpenOpDialogs.forEach(ref => ref.close());
|
|
1952
1943
|
}
|
|
1953
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
1954
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0
|
|
1944
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1945
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DialogService, providedIn: 'root' }); }
|
|
1955
1946
|
}
|
|
1956
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1947
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DialogService, decorators: [{
|
|
1957
1948
|
type: Injectable,
|
|
1958
1949
|
args: [{ providedIn: 'root' }]
|
|
1959
1950
|
}] });
|
|
@@ -1980,10 +1971,10 @@ class DialogWrapper {
|
|
|
1980
1971
|
this.viewContext.$implicit = value;
|
|
1981
1972
|
this.viewContext.opDialog = value;
|
|
1982
1973
|
}
|
|
1983
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
1984
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0
|
|
1974
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DialogWrapper, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1975
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: DialogWrapper, isStandalone: true, selector: "dialog-wrapper", ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1985
1976
|
}
|
|
1986
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1977
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DialogWrapper, decorators: [{
|
|
1987
1978
|
type: Component,
|
|
1988
1979
|
args: [{
|
|
1989
1980
|
selector: 'dialog-wrapper',
|
|
@@ -2109,10 +2100,10 @@ class DialogDirective {
|
|
|
2109
2100
|
static ngTemplateContextGuard(dir, ctx) {
|
|
2110
2101
|
return true;
|
|
2111
2102
|
}
|
|
2112
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
2113
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0
|
|
2103
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DialogDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2104
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.0", 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 }); }
|
|
2114
2105
|
}
|
|
2115
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
2106
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DialogDirective, decorators: [{
|
|
2116
2107
|
type: Directive,
|
|
2117
2108
|
args: [{ selector: '[opDialog]', }]
|
|
2118
2109
|
}], propDecorators: { opDialogClosed: [{
|
|
@@ -2133,7 +2124,7 @@ class StylerDirective {
|
|
|
2133
2124
|
constructor() {
|
|
2134
2125
|
this.el = inject(ElementRef);
|
|
2135
2126
|
this.renderer = inject(Renderer2);
|
|
2136
|
-
this.$stylesApplied = signal({},
|
|
2127
|
+
this.$stylesApplied = signal({}, ...(ngDevMode ? [{ debugName: "$stylesApplied" }] : []));
|
|
2137
2128
|
this.$element = input.required({ ...(ngDevMode ? { debugName: "$element" } : {}), alias: 'element' });
|
|
2138
2129
|
this.$styler = input.required({ ...(ngDevMode ? { debugName: "$styler" } : {}), alias: 'styler' });
|
|
2139
2130
|
this.#stylerEffect = effect(() => {
|
|
@@ -2159,13 +2150,13 @@ class StylerDirective {
|
|
|
2159
2150
|
});
|
|
2160
2151
|
this.$stylesApplied.set(toApply);
|
|
2161
2152
|
});
|
|
2162
|
-
},
|
|
2153
|
+
}, ...(ngDevMode ? [{ debugName: "#stylerEffect" }] : []));
|
|
2163
2154
|
}
|
|
2164
2155
|
#stylerEffect;
|
|
2165
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
2166
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0
|
|
2156
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: StylerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2157
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.0", 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 }); }
|
|
2167
2158
|
}
|
|
2168
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
2159
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: StylerDirective, decorators: [{
|
|
2169
2160
|
type: Directive,
|
|
2170
2161
|
args: [{ selector: '[styler]' }]
|
|
2171
2162
|
}], propDecorators: { $element: [{ type: i0.Input, args: [{ isSignal: true, alias: "element", required: true }] }], $styler: [{ type: i0.Input, args: [{ isSignal: true, alias: "styler", required: true }] }] } });
|
|
@@ -2209,10 +2200,10 @@ class MatSlideToggleGroupDirective {
|
|
|
2209
2200
|
return newVal;
|
|
2210
2201
|
}, startValue), startWith$1(startValue));
|
|
2211
2202
|
}
|
|
2212
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
2213
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0
|
|
2203
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatSlideToggleGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2204
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: MatSlideToggleGroupDirective, isStandalone: true, selector: "[opMatSlideToggleGroup]", inputs: { allowMultiple: "allowMultiple" }, outputs: { valueEmitter: "valueEmitter" }, queries: [{ propertyName: "toggles", predicate: MatSlideToggle }], ngImport: i0 }); }
|
|
2214
2205
|
}
|
|
2215
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
2206
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatSlideToggleGroupDirective, decorators: [{
|
|
2216
2207
|
type: Directive,
|
|
2217
2208
|
args: [{ selector: '[opMatSlideToggleGroup]',
|
|
2218
2209
|
}]
|
|
@@ -2239,10 +2230,10 @@ class TrimWhitespaceDirective {
|
|
|
2239
2230
|
}
|
|
2240
2231
|
}
|
|
2241
2232
|
}
|
|
2242
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
2243
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0
|
|
2233
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TrimWhitespaceDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2234
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: TrimWhitespaceDirective, isStandalone: true, selector: "input[trimWhitespace]", host: { listeners: { "blur": "onBlur()" } }, ngImport: i0 }); }
|
|
2244
2235
|
}
|
|
2245
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
2236
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TrimWhitespaceDirective, decorators: [{
|
|
2246
2237
|
type: Directive,
|
|
2247
2238
|
args: [{
|
|
2248
2239
|
selector: 'input[trimWhitespace]',
|
|
@@ -2261,10 +2252,10 @@ class FunctionPipe {
|
|
|
2261
2252
|
}
|
|
2262
2253
|
return func(...args);
|
|
2263
2254
|
}
|
|
2264
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
2265
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0
|
|
2255
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: FunctionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
2256
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.1.0", ngImport: i0, type: FunctionPipe, isStandalone: true, name: "func" }); }
|
|
2266
2257
|
}
|
|
2267
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
2258
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: FunctionPipe, decorators: [{
|
|
2268
2259
|
type: Pipe,
|
|
2269
2260
|
args: [{
|
|
2270
2261
|
name: 'func',
|
|
@@ -2293,13 +2284,13 @@ class ConditionalClassesDirective {
|
|
|
2293
2284
|
classesNotYetApplied.forEach(c => this.renderer.addClass(this.el.nativeElement, c));
|
|
2294
2285
|
this.classesApplied = toApply;
|
|
2295
2286
|
});
|
|
2296
|
-
},
|
|
2287
|
+
}, ...(ngDevMode ? [{ debugName: "#onClasses" }] : []));
|
|
2297
2288
|
}
|
|
2298
2289
|
#onClasses;
|
|
2299
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
2300
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0
|
|
2290
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ConditionalClassesDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2291
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.0", 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 }); }
|
|
2301
2292
|
}
|
|
2302
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
2293
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ConditionalClassesDirective, decorators: [{
|
|
2303
2294
|
type: Directive,
|
|
2304
2295
|
args: [{
|
|
2305
2296
|
selector: '[conditionalClasses]',
|
|
@@ -2307,8 +2298,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
|
|
|
2307
2298
|
}], propDecorators: { $element: [{ type: i0.Input, args: [{ isSignal: true, alias: "element", required: true }] }], $classes: [{ type: i0.Input, args: [{ isSignal: true, alias: "conditionalClasses", required: false }] }] } });
|
|
2308
2299
|
|
|
2309
2300
|
class UtilitiesModule {
|
|
2310
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
2311
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0
|
|
2301
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UtilitiesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
2302
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.0", ngImport: i0, type: UtilitiesModule, imports: [SpaceCasePipe,
|
|
2312
2303
|
PhoneNumberPipe,
|
|
2313
2304
|
FunctionPipe,
|
|
2314
2305
|
StopPropagationDirective,
|
|
@@ -2333,11 +2324,11 @@ class UtilitiesModule {
|
|
|
2333
2324
|
DialogDirective,
|
|
2334
2325
|
MatSlideToggleGroupDirective,
|
|
2335
2326
|
ConditionalClassesDirective] }); }
|
|
2336
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0
|
|
2327
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UtilitiesModule, providers: [
|
|
2337
2328
|
DialogService
|
|
2338
2329
|
] }); }
|
|
2339
2330
|
}
|
|
2340
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
2331
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UtilitiesModule, decorators: [{
|
|
2341
2332
|
type: NgModule,
|
|
2342
2333
|
args: [{
|
|
2343
2334
|
exports: [
|
|
@@ -2476,12 +2467,6 @@ function createTransformer(metaData, config, noIcons = false, forItem = false) {
|
|
|
2476
2467
|
return metaData.mapItem(defaultFunc(value));
|
|
2477
2468
|
};
|
|
2478
2469
|
}
|
|
2479
|
-
if (metaData.transform) {
|
|
2480
|
-
if (isPipe(metaData.transform)) {
|
|
2481
|
-
return (value) => metaData.transform.transform(defaultFunc(value));
|
|
2482
|
-
}
|
|
2483
|
-
return metaData.fieldType === FieldType.Expression ? metaData.transform : (value) => metaData.transform(defaultFunc(value), value);
|
|
2484
|
-
}
|
|
2485
2470
|
if (config.transformers && config.transformers[metaData.fieldType]) {
|
|
2486
2471
|
var transformer = config.transformers[metaData.fieldType];
|
|
2487
2472
|
return (value) => transformer(defaultFunc(value));
|
|
@@ -2800,7 +2785,6 @@ const filterTypeFuncMap = {
|
|
|
2800
2785
|
[FieldType.Date]: DateFilterFuncs,
|
|
2801
2786
|
[FieldType.DateTime]: DateTimeFilterFuncs,
|
|
2802
2787
|
[FieldType.Enum]: EnumFilterFuncs,
|
|
2803
|
-
[FieldType.Link]: StringFilterFuncs,
|
|
2804
2788
|
[FieldType.Number]: NumberFilterFuncs,
|
|
2805
2789
|
[FieldType.PhoneNumber]: StringFilterFuncs,
|
|
2806
2790
|
[FieldType.String]: StringFilterFuncs,
|
|
@@ -2940,7 +2924,6 @@ const mergeMeta = (orig, merge) => {
|
|
|
2940
2924
|
width: merge.width ?? orig.width,
|
|
2941
2925
|
noExport: merge.noExport || orig.noExport,
|
|
2942
2926
|
noFilter: merge.noFilter || orig.noFilter,
|
|
2943
|
-
transform: merge.transform ?? orig.transform,
|
|
2944
2927
|
map: merge.map ?? orig.map,
|
|
2945
2928
|
click: merge.click ?? orig.click,
|
|
2946
2929
|
classes: merge.classes ?? orig.classes,
|
|
@@ -2979,7 +2962,7 @@ class TableStore extends ComponentStore {
|
|
|
2979
2962
|
this.$savableState = computed(() => {
|
|
2980
2963
|
const state = this.state();
|
|
2981
2964
|
return mapSaveableState(state);
|
|
2982
|
-
},
|
|
2965
|
+
}, ...(ngDevMode ? [{ debugName: "$savableState" }] : []));
|
|
2983
2966
|
//#region meta order and hidden
|
|
2984
2967
|
this.showColumn = this.updater((state, key) => ({
|
|
2985
2968
|
...state,
|
|
@@ -3075,7 +3058,7 @@ class TableStore extends ComponentStore {
|
|
|
3075
3058
|
};
|
|
3076
3059
|
};
|
|
3077
3060
|
this.$filters = this.selectSignal(state => state.filters);
|
|
3078
|
-
this.$filtersArray = computed(() => Object.values(this.state().filters) || [],
|
|
3061
|
+
this.$filtersArray = computed(() => Object.values(this.state().filters) || [], ...(ngDevMode ? [{ debugName: "$filtersArray" }] : []));
|
|
3079
3062
|
this.filters$ = this.select(state => state.filters);
|
|
3080
3063
|
this.$getFilter = (filterId) => {
|
|
3081
3064
|
return this.selectSignal(this.$filters, filters => filters[filterId]);
|
|
@@ -3098,7 +3081,7 @@ class TableStore extends ComponentStore {
|
|
|
3098
3081
|
sorted: sortArray,
|
|
3099
3082
|
};
|
|
3100
3083
|
});
|
|
3101
|
-
this.$preSort = computed(() => createPreSort(this.$metaData()),
|
|
3084
|
+
this.$preSort = computed(() => createPreSort(this.$metaData()), ...(ngDevMode ? [{ debugName: "$preSort" }] : []));
|
|
3102
3085
|
this._$selectSorted = this.selectSignal(state => state.sorted, {
|
|
3103
3086
|
equal: sortsAreSame
|
|
3104
3087
|
});
|
|
@@ -3110,7 +3093,7 @@ class TableStore extends ComponentStore {
|
|
|
3110
3093
|
const sortBy = sortLogic?.sortBy === 'use map' ? meta.map : sortLogic?.sortBy;
|
|
3111
3094
|
return ({ ...s, ...sortLogic, sortBy });
|
|
3112
3095
|
});
|
|
3113
|
-
},
|
|
3096
|
+
}, ...(ngDevMode ? [{ debugName: "$selectSorted" }] : []));
|
|
3114
3097
|
this.selectSorted$ = this.select(state => state.sorted).pipe(distinctUntilChanged(sortsAreSame));
|
|
3115
3098
|
this.$getSorts = this.selectSignal(() => this.$initializationState() !== InitializationState.Ready ? [] : this.$selectSorted());
|
|
3116
3099
|
this.sort$ = toObservable(this.$getSorts);
|
|
@@ -3406,10 +3389,10 @@ class TableStore extends ComponentStore {
|
|
|
3406
3389
|
};
|
|
3407
3390
|
}
|
|
3408
3391
|
#$groupBy;
|
|
3409
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
3410
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0
|
|
3392
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TableStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
3393
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TableStore }); }
|
|
3411
3394
|
}
|
|
3412
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
3395
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TableStore, decorators: [{
|
|
3413
3396
|
type: Injectable
|
|
3414
3397
|
}], ctorParameters: () => [] });
|
|
3415
3398
|
const resetable = [
|
|
@@ -3441,7 +3424,7 @@ class MultiSortDirective extends MatSort {
|
|
|
3441
3424
|
untracked(() => {
|
|
3442
3425
|
this.state.setSort({ key: sortChange.active, direction: sortChange.direction });
|
|
3443
3426
|
});
|
|
3444
|
-
},
|
|
3427
|
+
}, ...(ngDevMode ? [{ debugName: "#onSortChange" }] : []));
|
|
3445
3428
|
this.#onStateSortUpdate = effect(() => {
|
|
3446
3429
|
const rules = this.state.$getSorts();
|
|
3447
3430
|
if (!rules)
|
|
@@ -3456,14 +3439,14 @@ class MultiSortDirective extends MatSort {
|
|
|
3456
3439
|
this.sortChange.emit(topRule);
|
|
3457
3440
|
}
|
|
3458
3441
|
});
|
|
3459
|
-
},
|
|
3442
|
+
}, ...(ngDevMode ? [{ debugName: "#onStateSortUpdate" }] : []));
|
|
3460
3443
|
}
|
|
3461
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
3462
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0
|
|
3444
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MultiSortDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3445
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: MultiSortDirective, isStandalone: true, selector: "[multiSort]", inputs: { disabled: ["matSortDisabled", "disabled"] }, providers: [
|
|
3463
3446
|
{ provide: MatSort, useExisting: MultiSortDirective }
|
|
3464
3447
|
], exportAs: ["multiSort"], usesInheritance: true, ngImport: i0 }); }
|
|
3465
3448
|
}
|
|
3466
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
3449
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MultiSortDirective, decorators: [{
|
|
3467
3450
|
type: Directive,
|
|
3468
3451
|
args: [{
|
|
3469
3452
|
selector: '[multiSort]',
|
|
@@ -3525,14 +3508,14 @@ class InFilterComponent {
|
|
|
3525
3508
|
this.ref.markForCheck();
|
|
3526
3509
|
this.onChange(this.value);
|
|
3527
3510
|
}
|
|
3528
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
3529
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0
|
|
3511
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: InFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3512
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: InFilterComponent, isStandalone: true, selector: "lib-in-filter", inputs: { $type: { classPropertyName: "$type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null } }, providers: [{
|
|
3530
3513
|
provide: NG_VALUE_ACCESSOR,
|
|
3531
3514
|
useExisting: InFilterComponent,
|
|
3532
3515
|
multi: true
|
|
3533
3516
|
}], 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 }); }
|
|
3534
3517
|
}
|
|
3535
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
3518
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: InFilterComponent, decorators: [{
|
|
3536
3519
|
type: Component,
|
|
3537
3520
|
args: [{ selector: 'lib-in-filter', changeDetection: ChangeDetectionStrategy.OnPush, providers: [{
|
|
3538
3521
|
provide: NG_VALUE_ACCESSOR,
|
|
@@ -3548,7 +3531,7 @@ class InListFilterComponent {
|
|
|
3548
3531
|
this.ref = inject(ChangeDetectorRef);
|
|
3549
3532
|
this.tableState = inject(TableStore);
|
|
3550
3533
|
this.$values = input([], { ...(ngDevMode ? { debugName: "$values" } : {}), alias: 'values' });
|
|
3551
|
-
this.#e = effect(() => this.writeValue(this.$values()),
|
|
3534
|
+
this.#e = effect(() => this.writeValue(this.$values()), ...(ngDevMode ? [{ debugName: "#e" }] : []));
|
|
3552
3535
|
this.value = [];
|
|
3553
3536
|
this.FieldType = FieldType;
|
|
3554
3537
|
this.includes = (value, values) => {
|
|
@@ -3557,19 +3540,19 @@ class InListFilterComponent {
|
|
|
3557
3540
|
this.onChange = (_) => { };
|
|
3558
3541
|
this.onTouched = () => { };
|
|
3559
3542
|
this.$key = input.required({ ...(ngDevMode ? { debugName: "$key" } : {}), alias: 'key' });
|
|
3560
|
-
this.$selectedKeys = signal([],
|
|
3561
|
-
this.$metaData = computed(() => this.tableState.$getMetaData(this.$key())(),
|
|
3543
|
+
this.$selectedKeys = signal([], ...(ngDevMode ? [{ debugName: "$selectedKeys" }] : []));
|
|
3544
|
+
this.$metaData = computed(() => this.tableState.$getMetaData(this.$key())(), ...(ngDevMode ? [{ debugName: "$metaData" }] : []));
|
|
3562
3545
|
this.$allValues = computed(() => {
|
|
3563
3546
|
const filterable = this.$metaData()?.additional?.filterOptions?.filterableValues;
|
|
3564
3547
|
return filterable === 'all values' || filterable?.allValues === true;
|
|
3565
|
-
},
|
|
3548
|
+
}, ...(ngDevMode ? [{ debugName: "$allValues" }] : []));
|
|
3566
3549
|
this.$specialBlank = computed(() => {
|
|
3567
3550
|
const specialBlank = this.tableState.selectSignal(s => s.allFilters)()[this.$metaData().key]?.find(k => isBlankValueFilter(k));
|
|
3568
3551
|
if (!specialBlank)
|
|
3569
3552
|
return;
|
|
3570
3553
|
return { key: specialBlank, value: 'BLANK' };
|
|
3571
|
-
},
|
|
3572
|
-
this.$specialBlankSelected = computed(() => this.$selectedKeys().some(k => isBlankValueFilter(k.value)),
|
|
3554
|
+
}, ...(ngDevMode ? [{ debugName: "$specialBlank" }] : []));
|
|
3555
|
+
this.$specialBlankSelected = computed(() => this.$selectedKeys().some(k => isBlankValueFilter(k.value)), ...(ngDevMode ? [{ debugName: "$specialBlankSelected" }] : []));
|
|
3573
3556
|
this.$keyValues = computed(() => {
|
|
3574
3557
|
const metaData = this.$metaData();
|
|
3575
3558
|
if (this.$allValues()) {
|
|
@@ -3582,7 +3565,7 @@ class InListFilterComponent {
|
|
|
3582
3565
|
return Object.entries(metaData.additional.enumMap).map(([key, value]) => ({ key: value, value: +key }));
|
|
3583
3566
|
}
|
|
3584
3567
|
return [];
|
|
3585
|
-
},
|
|
3568
|
+
}, ...(ngDevMode ? [{ debugName: "$keyValues" }] : []));
|
|
3586
3569
|
}
|
|
3587
3570
|
#e;
|
|
3588
3571
|
writeValue(obj) {
|
|
@@ -3615,8 +3598,8 @@ class InListFilterComponent {
|
|
|
3615
3598
|
}
|
|
3616
3599
|
return val.key;
|
|
3617
3600
|
}
|
|
3618
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
3619
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0
|
|
3601
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: InListFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3602
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", 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: [{
|
|
3620
3603
|
provide: NG_VALUE_ACCESSOR,
|
|
3621
3604
|
useExisting: InListFilterComponent,
|
|
3622
3605
|
multi: true
|
|
@@ -3689,7 +3672,7 @@ class InListFilterComponent {
|
|
|
3689
3672
|
}
|
|
3690
3673
|
`, 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 }); }
|
|
3691
3674
|
}
|
|
3692
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
3675
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: InListFilterComponent, decorators: [{
|
|
3693
3676
|
type: Component,
|
|
3694
3677
|
args: [{ selector: 'tb-in-list-filter', template: `
|
|
3695
3678
|
@if($specialBlank(); as specialBlank)
|
|
@@ -3774,16 +3757,16 @@ class DateFilterComponent {
|
|
|
3774
3757
|
this.$info = input.required({ ...(ngDevMode ? { debugName: "$info" } : {}), alias: 'info' });
|
|
3775
3758
|
this.$currentFilterType = input.required({ ...(ngDevMode ? { debugName: "$currentFilterType" } : {}), alias: 'currentFilterType' });
|
|
3776
3759
|
this.state = inject(TableStore);
|
|
3777
|
-
this.$metaData = computed(() => this.state.$getMetaData(this.$info()?.key)(),
|
|
3760
|
+
this.$metaData = computed(() => this.state.$getMetaData(this.$info()?.key)(), ...(ngDevMode ? [{ debugName: "$metaData" }] : []));
|
|
3778
3761
|
this.$allValuesInMeta = computed(() => {
|
|
3779
3762
|
const filterable = this.$metaData()?.additional?.filterOptions?.filterableValues;
|
|
3780
3763
|
return filterable === 'all values' || filterable?.allValues === true;
|
|
3781
|
-
},
|
|
3764
|
+
}, ...(ngDevMode ? [{ debugName: "$allValuesInMeta" }] : []));
|
|
3782
3765
|
}
|
|
3783
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
3784
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0
|
|
3766
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DateFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3767
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", 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 }); }
|
|
3785
3768
|
}
|
|
3786
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
3769
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DateFilterComponent, decorators: [{
|
|
3787
3770
|
type: Component,
|
|
3788
3771
|
args: [{ selector: 'tb-date-filter', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], imports: [
|
|
3789
3772
|
MatInputModule, FormsModule, MatDatepickerModule, InFilterComponent, InListFilterComponent
|
|
@@ -3797,16 +3780,16 @@ class NumberFilterComponent {
|
|
|
3797
3780
|
this.$currentFilterType = input.required({ ...(ngDevMode ? { debugName: "$currentFilterType" } : {}), alias: 'currentFilterType' });
|
|
3798
3781
|
this.$info = input.required({ ...(ngDevMode ? { debugName: "$info" } : {}), alias: 'info' });
|
|
3799
3782
|
this.state = inject(TableStore);
|
|
3800
|
-
this.$metaData = computed(() => this.state.$getMetaData(this.$info()?.key)(),
|
|
3783
|
+
this.$metaData = computed(() => this.state.$getMetaData(this.$info()?.key)(), ...(ngDevMode ? [{ debugName: "$metaData" }] : []));
|
|
3801
3784
|
this.$allValuesInMeta = computed(() => {
|
|
3802
3785
|
const filterable = this.$metaData()?.additional?.filterOptions?.filterableValues;
|
|
3803
3786
|
return filterable === 'all values' || filterable?.allValues === true;
|
|
3804
|
-
},
|
|
3787
|
+
}, ...(ngDevMode ? [{ debugName: "$allValuesInMeta" }] : []));
|
|
3805
3788
|
}
|
|
3806
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
3807
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0
|
|
3789
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NumberFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3790
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", 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 }); }
|
|
3808
3791
|
}
|
|
3809
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
3792
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NumberFilterComponent, decorators: [{
|
|
3810
3793
|
type: Component,
|
|
3811
3794
|
args: [{ selector: 'tb-number-filter', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], imports: [
|
|
3812
3795
|
MatInputModule, FormsModule, InFilterComponent, InListFilterComponent
|
|
@@ -3820,16 +3803,16 @@ class DateTimeFilterComponent {
|
|
|
3820
3803
|
this.$info = input.required({ ...(ngDevMode ? { debugName: "$info" } : {}), alias: 'info' });
|
|
3821
3804
|
this.$currentFilterType = input.required({ ...(ngDevMode ? { debugName: "$currentFilterType" } : {}), alias: 'currentFilterType' });
|
|
3822
3805
|
this.state = inject(TableStore);
|
|
3823
|
-
this.$metaData = computed(() => this.state.$getMetaData(this.$info()?.key)(),
|
|
3806
|
+
this.$metaData = computed(() => this.state.$getMetaData(this.$info()?.key)(), ...(ngDevMode ? [{ debugName: "$metaData" }] : []));
|
|
3824
3807
|
this.$allValuesInMeta = computed(() => {
|
|
3825
3808
|
const filterable = this.$metaData()?.additional?.filterOptions?.filterableValues;
|
|
3826
3809
|
return filterable === 'all values' || filterable?.allValues === true;
|
|
3827
|
-
},
|
|
3810
|
+
}, ...(ngDevMode ? [{ debugName: "$allValuesInMeta" }] : []));
|
|
3828
3811
|
}
|
|
3829
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
3830
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0
|
|
3812
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DateTimeFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3813
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", 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 }); }
|
|
3831
3814
|
}
|
|
3832
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
3815
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DateTimeFilterComponent, decorators: [{
|
|
3833
3816
|
type: Component,
|
|
3834
3817
|
args: [{ selector: 'tb-date-time-filter', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], imports: [
|
|
3835
3818
|
FormsModule, InFilterComponent, InListFilterComponent
|
|
@@ -3844,18 +3827,18 @@ class FilterComponent {
|
|
|
3844
3827
|
this.FieldType = FieldType;
|
|
3845
3828
|
this.$filter = input.required({ ...(ngDevMode ? { debugName: "$filter" } : {}), alias: 'filter',
|
|
3846
3829
|
transform: (f) => ({ ...f }) });
|
|
3847
|
-
this.$metaData = computed(() => this.state.$getMetaData(this.$filter()?.key)(),
|
|
3830
|
+
this.$metaData = computed(() => this.state.$getMetaData(this.$filter()?.key)(), ...(ngDevMode ? [{ debugName: "$metaData" }] : []));
|
|
3848
3831
|
this.$allValuesInMeta = computed(() => {
|
|
3849
3832
|
const filterable = this.$metaData()?.additional?.filterOptions?.filterableValues;
|
|
3850
3833
|
return filterable === 'all values' || filterable?.allValues === true;
|
|
3851
|
-
},
|
|
3834
|
+
}, ...(ngDevMode ? [{ debugName: "$allValuesInMeta" }] : []));
|
|
3852
3835
|
this.close$ = new Subject();
|
|
3853
3836
|
this.done$ = new Subject();
|
|
3854
3837
|
this.close = outputFromObservable(this.close$);
|
|
3855
3838
|
this.done = outputFromObservable(merge(this.done$, this.close$));
|
|
3856
|
-
this.$enteredFilterType = signal(undefined,
|
|
3857
|
-
this.$currentFilterType = computed(() => this.$enteredFilterType() || this.$filter()?.filterType,
|
|
3858
|
-
this.$availableFilterTypes = computed(() => this.filterTypes[this.$filter()?.fieldType],
|
|
3839
|
+
this.$enteredFilterType = signal(undefined, ...(ngDevMode ? [{ debugName: "$enteredFilterType" }] : []));
|
|
3840
|
+
this.$currentFilterType = computed(() => this.$enteredFilterType() || this.$filter()?.filterType, ...(ngDevMode ? [{ debugName: "$currentFilterType" }] : []));
|
|
3841
|
+
this.$availableFilterTypes = computed(() => this.filterTypes[this.$filter()?.fieldType], ...(ngDevMode ? [{ debugName: "$availableFilterTypes" }] : []));
|
|
3859
3842
|
}
|
|
3860
3843
|
onEnter(filter, event) {
|
|
3861
3844
|
event.preventDefault();
|
|
@@ -3868,17 +3851,17 @@ class FilterComponent {
|
|
|
3868
3851
|
this.state.addFilter({ ...filter });
|
|
3869
3852
|
this.done$.next();
|
|
3870
3853
|
}
|
|
3871
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
3872
|
-
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 }); }
|
|
3854
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: FilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3855
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.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.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 }); }
|
|
3873
3856
|
}
|
|
3874
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
3857
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: FilterComponent, decorators: [{
|
|
3875
3858
|
type: Component,
|
|
3876
3859
|
args: [{ selector: 'tb-filter', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
3877
3860
|
MatCardModule, FormsModule, SpaceCasePipe, MatButtonModule, MatTooltipModule, MatIconModule,
|
|
3878
3861
|
MatInputModule, MatSelectModule, NumberFilterComponent,
|
|
3879
3862
|
DateFilterComponent, DateTimeFilterComponent, MatRadioModule, InFilterComponent, InListFilterComponent,
|
|
3880
3863
|
NgTemplateOutlet
|
|
3881
|
-
], 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.
|
|
3864
|
+
], 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.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"] }]
|
|
3882
3865
|
}], propDecorators: { $filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: true }] }], close: [{ type: i0.Output, args: ["close"] }], done: [{ type: i0.Output, args: ["done"] }] } });
|
|
3883
3866
|
|
|
3884
3867
|
class GenColDisplayerComponent {
|
|
@@ -3888,7 +3871,7 @@ class GenColDisplayerComponent {
|
|
|
3888
3871
|
key: md.key,
|
|
3889
3872
|
displayName: md.displayName,
|
|
3890
3873
|
isVisible: !this.tableState.$hiddenKeys().includes(md.key)
|
|
3891
|
-
})),
|
|
3874
|
+
})), ...(ngDevMode ? [{ debugName: "$columns" }] : []));
|
|
3892
3875
|
}
|
|
3893
3876
|
reset(displayCols) {
|
|
3894
3877
|
displayCols.forEach(c => c.isVisible = true);
|
|
@@ -3904,10 +3887,10 @@ class GenColDisplayerComponent {
|
|
|
3904
3887
|
emit(displayCols) {
|
|
3905
3888
|
this.tableState.setHiddenColumns(displayCols.map(c => ({ key: c.key, visible: c.isVisible })));
|
|
3906
3889
|
}
|
|
3907
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
3908
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0
|
|
3890
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: GenColDisplayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3891
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", 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 }); }
|
|
3909
3892
|
}
|
|
3910
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
3893
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: GenColDisplayerComponent, decorators: [{
|
|
3911
3894
|
type: Component,
|
|
3912
3895
|
args: [{ selector: 'tb-col-displayer', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
3913
3896
|
MatTooltipModule, MatIconModule, MatButtonModule, MatMenuModule, StopPropagationDirective,
|
|
@@ -3917,17 +3900,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
|
|
|
3917
3900
|
|
|
3918
3901
|
class WrapperFilterStore {
|
|
3919
3902
|
constructor() {
|
|
3920
|
-
this.$filters = signal([],
|
|
3903
|
+
this.$filters = signal([], ...(ngDevMode ? [{ debugName: "$filters" }] : []));
|
|
3921
3904
|
this.clearAll = () => this.$filters.set([]);
|
|
3922
3905
|
this.deleteByIndex = (index) => this.$filters.update(filters => filters.toSpliced(index, 1));
|
|
3923
3906
|
this.addFilter = (filter) => {
|
|
3924
3907
|
this.$filters.update(filters => [...filters, filter]);
|
|
3925
3908
|
};
|
|
3926
3909
|
}
|
|
3927
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
3928
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0
|
|
3910
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: WrapperFilterStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
3911
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: WrapperFilterStore }); }
|
|
3929
3912
|
}
|
|
3930
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
3913
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: WrapperFilterStore, decorators: [{
|
|
3931
3914
|
type: Injectable
|
|
3932
3915
|
}] });
|
|
3933
3916
|
|
|
@@ -3938,7 +3921,7 @@ class GenFilterDisplayerComponent {
|
|
|
3938
3921
|
this.$filterCols = computed(() => {
|
|
3939
3922
|
const mds = this.tableState.$metaDataArray();
|
|
3940
3923
|
return mds.filter(m => m.fieldType !== FieldType.Hidden && (m.fieldType !== FieldType.NotMapped || m.filterLogic?.filterBy) && !m.noFilter);
|
|
3941
|
-
},
|
|
3924
|
+
}, ...(ngDevMode ? [{ debugName: "$filterCols" }] : []));
|
|
3942
3925
|
}
|
|
3943
3926
|
addFilter(metaData) {
|
|
3944
3927
|
this.filterStore.addFilter({
|
|
@@ -3946,10 +3929,10 @@ class GenFilterDisplayerComponent {
|
|
|
3946
3929
|
fieldType: metaData.filterLogic?.filterType || metaData.fieldType,
|
|
3947
3930
|
});
|
|
3948
3931
|
}
|
|
3949
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
3950
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0
|
|
3932
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: GenFilterDisplayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3933
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", 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 }); }
|
|
3951
3934
|
}
|
|
3952
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
3935
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: GenFilterDisplayerComponent, decorators: [{
|
|
3953
3936
|
type: Component,
|
|
3954
3937
|
args: [{ selector: 'tb-filter-displayer', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
3955
3938
|
MatButtonModule, MatMenuModule, MatTooltipModule, StopPropagationDirective, MatIconModule,
|
|
@@ -3962,10 +3945,10 @@ class KeyDisplayPipe {
|
|
|
3962
3945
|
this.tableState = inject(TableStore);
|
|
3963
3946
|
this.transform = (key) => computed(() => this.tableState.$getMetaData(key)()?.displayName || spaceCase(key));
|
|
3964
3947
|
}
|
|
3965
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
3966
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0
|
|
3948
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: KeyDisplayPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
3949
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.1.0", ngImport: i0, type: KeyDisplayPipe, isStandalone: true, name: "keyDisplay" }); }
|
|
3967
3950
|
}
|
|
3968
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
3951
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: KeyDisplayPipe, decorators: [{
|
|
3969
3952
|
type: Pipe,
|
|
3970
3953
|
args: [{ name: 'keyDisplay' }]
|
|
3971
3954
|
}] });
|
|
@@ -3977,10 +3960,10 @@ class FormatFilterTypePipe {
|
|
|
3977
3960
|
}
|
|
3978
3961
|
return filterType;
|
|
3979
3962
|
}
|
|
3980
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
3981
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0
|
|
3963
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: FormatFilterTypePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
3964
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.1.0", ngImport: i0, type: FormatFilterTypePipe, isStandalone: true, name: "formatFilterType" }); }
|
|
3982
3965
|
}
|
|
3983
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
3966
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: FormatFilterTypePipe, decorators: [{
|
|
3984
3967
|
type: Pipe,
|
|
3985
3968
|
args: [{ name: 'formatFilterType' }]
|
|
3986
3969
|
}] });
|
|
@@ -3992,10 +3975,10 @@ class FormatFilterValuePipe {
|
|
|
3992
3975
|
transform(value, key, filterType) {
|
|
3993
3976
|
return computed(() => transform(value, this.tableState.$getMetaData(key)(), filterType));
|
|
3994
3977
|
}
|
|
3995
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
3996
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0
|
|
3978
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: FormatFilterValuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
3979
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.1.0", ngImport: i0, type: FormatFilterValuePipe, isStandalone: true, name: "formatFilterValue" }); }
|
|
3997
3980
|
}
|
|
3998
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
3981
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: FormatFilterValuePipe, decorators: [{
|
|
3999
3982
|
type: Pipe,
|
|
4000
3983
|
args: [{ name: 'formatFilterValue' }]
|
|
4001
3984
|
}] });
|
|
@@ -4054,8 +4037,8 @@ class FilterChipsComponent {
|
|
|
4054
4037
|
constructor() {
|
|
4055
4038
|
this.tableState = inject(TableStore);
|
|
4056
4039
|
this.filterStore = inject(WrapperFilterStore);
|
|
4057
|
-
this.$filters = computed(() => this.tableState.$filtersArray().filter(f => isFilterInfo(f) && !f._isExternallyManaged),
|
|
4058
|
-
this.$certainCustomFilters = computed(() => this.tableState.$filtersArray().filter(f => isCustomFilter(f) && f.chipLabel),
|
|
4040
|
+
this.$filters = computed(() => this.tableState.$filtersArray().filter(f => isFilterInfo(f) && !f._isExternallyManaged), ...(ngDevMode ? [{ debugName: "$filters" }] : []));
|
|
4041
|
+
this.$certainCustomFilters = computed(() => this.tableState.$filtersArray().filter(f => isCustomFilter(f) && f.chipLabel), ...(ngDevMode ? [{ debugName: "$certainCustomFilters" }] : []));
|
|
4059
4042
|
this.$currentFilters = this.filterStore.$filters;
|
|
4060
4043
|
}
|
|
4061
4044
|
deleteByIndex(index) {
|
|
@@ -4067,10 +4050,10 @@ class FilterChipsComponent {
|
|
|
4067
4050
|
clearAll() {
|
|
4068
4051
|
this.filterStore.clearAll();
|
|
4069
4052
|
}
|
|
4070
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
4071
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0
|
|
4053
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: FilterChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4054
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", 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 }); }
|
|
4072
4055
|
}
|
|
4073
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
4056
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: FilterChipsComponent, decorators: [{
|
|
4074
4057
|
type: Component,
|
|
4075
4058
|
args: [{ selector: 'lib-filter-list', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
4076
4059
|
MatButtonModule, MatTooltipModule, MatIconModule, FilterComponent,
|
|
@@ -4080,14 +4063,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
|
|
|
4080
4063
|
|
|
4081
4064
|
class RouterLinkColumnComponent {
|
|
4082
4065
|
constructor() {
|
|
4083
|
-
this.additional = input.required(
|
|
4084
|
-
this.element = input.required(
|
|
4085
|
-
this.queryParams = computed(() => this.additional().routerLinkOptions.queryParams(this.element()),
|
|
4086
|
-
this.routerLinkOptions = computed(() => this.additional().routerLinkOptions,
|
|
4087
|
-
this.link = input.required(
|
|
4088
|
-
}
|
|
4089
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
4090
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0
|
|
4066
|
+
this.additional = input.required(...(ngDevMode ? [{ debugName: "additional" }] : []));
|
|
4067
|
+
this.element = input.required(...(ngDevMode ? [{ debugName: "element" }] : []));
|
|
4068
|
+
this.queryParams = computed(() => this.additional().routerLinkOptions.queryParams(this.element()), ...(ngDevMode ? [{ debugName: "queryParams" }] : []));
|
|
4069
|
+
this.routerLinkOptions = computed(() => this.additional().routerLinkOptions, ...(ngDevMode ? [{ debugName: "routerLinkOptions" }] : []));
|
|
4070
|
+
this.link = input.required(...(ngDevMode ? [{ debugName: "link" }] : []));
|
|
4071
|
+
}
|
|
4072
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: RouterLinkColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4073
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", 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: `
|
|
4091
4074
|
<a target="{{additional().target}}"
|
|
4092
4075
|
[routerLink]=" [link()]"
|
|
4093
4076
|
[queryParams]="queryParams()"
|
|
@@ -4099,7 +4082,7 @@ class RouterLinkColumnComponent {
|
|
|
4099
4082
|
</a>
|
|
4100
4083
|
`, 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 }); }
|
|
4101
4084
|
}
|
|
4102
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
4085
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: RouterLinkColumnComponent, decorators: [{
|
|
4103
4086
|
type: Component,
|
|
4104
4087
|
args: [{
|
|
4105
4088
|
selector: "tb-router-link-column",
|
|
@@ -4122,18 +4105,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
|
|
|
4122
4105
|
}], 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 }] }] } });
|
|
4123
4106
|
class LinkColumnComponent {
|
|
4124
4107
|
constructor() {
|
|
4125
|
-
this.element = input.required(
|
|
4126
|
-
this.additional = input.required(
|
|
4127
|
-
this.link = input.required(
|
|
4108
|
+
this.element = input.required(...(ngDevMode ? [{ debugName: "element" }] : []));
|
|
4109
|
+
this.additional = input.required(...(ngDevMode ? [{ debugName: "additional" }] : []));
|
|
4110
|
+
this.link = input.required(...(ngDevMode ? [{ debugName: "link" }] : []));
|
|
4128
4111
|
}
|
|
4129
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
4130
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0
|
|
4112
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: LinkColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4113
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", 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: `
|
|
4131
4114
|
<a target="{{additional().target}}" href="{{link()}}">
|
|
4132
4115
|
<ng-content></ng-content>
|
|
4133
4116
|
</a>
|
|
4134
4117
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4135
4118
|
}
|
|
4136
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
4119
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: LinkColumnComponent, decorators: [{
|
|
4137
4120
|
type: Component,
|
|
4138
4121
|
args: [{
|
|
4139
4122
|
selector: "tb-link-column",
|
|
@@ -4148,18 +4131,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
|
|
|
4148
4131
|
|
|
4149
4132
|
class ArrayCommaColumnComponent {
|
|
4150
4133
|
constructor() {
|
|
4151
|
-
this.value = input.required(
|
|
4152
|
-
this.additional = input(3,
|
|
4153
|
-
this.displayArray = computed(() => (this.value() || []).slice(0, this.additional()),
|
|
4134
|
+
this.value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
4135
|
+
this.additional = input(3, ...(ngDevMode ? [{ debugName: "additional" }] : []));
|
|
4136
|
+
this.displayArray = computed(() => (this.value() || []).slice(0, this.additional()), ...(ngDevMode ? [{ debugName: "displayArray" }] : []));
|
|
4154
4137
|
}
|
|
4155
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
4156
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0
|
|
4138
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ArrayCommaColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4139
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", 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: `
|
|
4157
4140
|
@for(val of displayArray(); track $index){
|
|
4158
4141
|
{{val + (!$last ? ',' : '')}}
|
|
4159
4142
|
}
|
|
4160
4143
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4161
4144
|
}
|
|
4162
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
4145
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ArrayCommaColumnComponent, decorators: [{
|
|
4163
4146
|
type: Component,
|
|
4164
4147
|
args: [{
|
|
4165
4148
|
selector: 'tb-comma-array-column',
|
|
@@ -4173,19 +4156,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
|
|
|
4173
4156
|
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], additional: [{ type: i0.Input, args: [{ isSignal: true, alias: "additional", required: false }] }] } });
|
|
4174
4157
|
class ArrayNewLineColumnComponent {
|
|
4175
4158
|
constructor() {
|
|
4176
|
-
this.value = input.required(
|
|
4177
|
-
this.additional = input(3,
|
|
4178
|
-
this.displayArray = computed(() => (this.value() || []).slice(0, this.additional()),
|
|
4159
|
+
this.value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
4160
|
+
this.additional = input(3, ...(ngDevMode ? [{ debugName: "additional" }] : []));
|
|
4161
|
+
this.displayArray = computed(() => (this.value() || []).slice(0, this.additional()), ...(ngDevMode ? [{ debugName: "displayArray" }] : []));
|
|
4179
4162
|
}
|
|
4180
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
4181
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0
|
|
4163
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ArrayNewLineColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4164
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", 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: `
|
|
4182
4165
|
@for(val of displayArray(); track $index){
|
|
4183
4166
|
{{val}}
|
|
4184
4167
|
@if(!$last){ <br/> }
|
|
4185
4168
|
}
|
|
4186
4169
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4187
4170
|
}
|
|
4188
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
4171
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ArrayNewLineColumnComponent, decorators: [{
|
|
4189
4172
|
type: Component,
|
|
4190
4173
|
args: [{
|
|
4191
4174
|
selector: 'tb-new-line-array-column',
|
|
@@ -4211,10 +4194,10 @@ class InitializationComponent {
|
|
|
4211
4194
|
this.$defaultTemplate = viewChild.required('default');
|
|
4212
4195
|
this.$defaultWithIcon = viewChild.required('defaultWithIcon');
|
|
4213
4196
|
}
|
|
4214
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
4215
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0
|
|
4197
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: InitializationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4198
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", 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 }); }
|
|
4216
4199
|
}
|
|
4217
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
4200
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: InitializationComponent, decorators: [{
|
|
4218
4201
|
type: Component,
|
|
4219
4202
|
args: [{ selector: 'initialization', imports: [
|
|
4220
4203
|
LinkColumnComponent, ArrayCommaColumnComponent, MatIcon,
|
|
@@ -4243,7 +4226,7 @@ class TableTemplateService {
|
|
|
4243
4226
|
return this.initializationComponentInstance.$imageUrlTemplate();
|
|
4244
4227
|
}
|
|
4245
4228
|
const useIcon = metaData.useIcon || (metaData.fieldType === FieldType.Boolean && metaData.useIcon !== false);
|
|
4246
|
-
if (metaData.
|
|
4229
|
+
if (metaData.additional?.link) {
|
|
4247
4230
|
const router = metaData.additional?.link?.useRouterLink;
|
|
4248
4231
|
if (router) {
|
|
4249
4232
|
return useIcon
|
|
@@ -4259,10 +4242,10 @@ class TableTemplateService {
|
|
|
4259
4242
|
}
|
|
4260
4243
|
return this.initializationComponentInstance.$defaultTemplate();
|
|
4261
4244
|
}
|
|
4262
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
4263
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0
|
|
4245
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TableTemplateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
4246
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TableTemplateService, providedIn: 'root' }); }
|
|
4264
4247
|
}
|
|
4265
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
4248
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TableTemplateService, decorators: [{
|
|
4266
4249
|
type: Injectable,
|
|
4267
4250
|
args: [{ providedIn: 'root' }]
|
|
4268
4251
|
}] });
|
|
@@ -4274,18 +4257,17 @@ class ColumnHeaderMenuComponent {
|
|
|
4274
4257
|
this.FieldType = FieldType;
|
|
4275
4258
|
this.FilterType = FilterType;
|
|
4276
4259
|
this.$metaData = input.required({ ...(ngDevMode ? { debugName: "$metaData" } : {}), alias: 'metaData' });
|
|
4277
|
-
this.$fieldType = computed(() => this.$metaData().fieldType,
|
|
4278
|
-
this.$filterFieldType = computed(() => this.$metaData().filterLogic?.filterType || this.$fieldType(),
|
|
4260
|
+
this.$fieldType = computed(() => this.$metaData().fieldType, ...(ngDevMode ? [{ debugName: "$fieldType" }] : []));
|
|
4261
|
+
this.$filterFieldType = computed(() => this.$metaData().filterLogic?.filterType || this.$fieldType(), ...(ngDevMode ? [{ debugName: "$filterFieldType" }] : []));
|
|
4279
4262
|
this.$filterValue = computed(() => this.tableState.$filtersArray().filter(isFilterInfo)
|
|
4280
|
-
.find(f => f.key === this.$metaData().key && f.filterType === this.$currentFilterType())?.filterValue,
|
|
4281
|
-
this.$trigger = viewChild(MatMenuTrigger,
|
|
4263
|
+
.find(f => f.key === this.$metaData().key && f.filterType === this.$currentFilterType())?.filterValue, ...(ngDevMode ? [{ debugName: "$filterValue" }] : []));
|
|
4264
|
+
this.$trigger = viewChild(MatMenuTrigger, ...(ngDevMode ? [{ debugName: "$trigger" }] : []));
|
|
4282
4265
|
this.$metaFilterType = computed(() => {
|
|
4283
4266
|
if (this.$metaData().additional?.filterOptions?.filterableValues) {
|
|
4284
4267
|
return FilterType.In;
|
|
4285
4268
|
}
|
|
4286
4269
|
switch (this.$filterFieldType()) {
|
|
4287
4270
|
case FieldType.String:
|
|
4288
|
-
case FieldType.Link:
|
|
4289
4271
|
case FieldType.PhoneNumber:
|
|
4290
4272
|
case FieldType.Array:
|
|
4291
4273
|
case FieldType.Unknown:
|
|
@@ -4302,9 +4284,9 @@ class ColumnHeaderMenuComponent {
|
|
|
4302
4284
|
return FilterType.In;
|
|
4303
4285
|
default: return FilterType.StringContains;
|
|
4304
4286
|
}
|
|
4305
|
-
},
|
|
4306
|
-
this.$currentFilterType = linkedSignal(() => this.$metaFilterType(),
|
|
4307
|
-
this.$key = computed(() => this.$metaData().key || crypto.randomUUID(),
|
|
4287
|
+
}, ...(ngDevMode ? [{ debugName: "$metaFilterType" }] : []));
|
|
4288
|
+
this.$currentFilterType = linkedSignal(() => this.$metaFilterType(), ...(ngDevMode ? [{ debugName: "$currentFilterType" }] : []));
|
|
4289
|
+
this.$key = computed(() => this.$metaData().key || crypto.randomUUID(), ...(ngDevMode ? [{ debugName: "$key" }] : []));
|
|
4308
4290
|
this.addFilter$ = new Subject();
|
|
4309
4291
|
}
|
|
4310
4292
|
hideField(key) {
|
|
@@ -4344,16 +4326,16 @@ class ColumnHeaderMenuComponent {
|
|
|
4344
4326
|
fieldType: metaData.filterLogic?.filterType || metaData.fieldType,
|
|
4345
4327
|
});
|
|
4346
4328
|
}
|
|
4347
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
4348
|
-
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 }); }
|
|
4329
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ColumnHeaderMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4330
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.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 @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.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 }); }
|
|
4349
4331
|
}
|
|
4350
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
4332
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ColumnHeaderMenuComponent, decorators: [{
|
|
4351
4333
|
type: Component,
|
|
4352
4334
|
args: [{ selector: 'tb-header-menu', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
4353
4335
|
MatMenuModule, MatIconModule, MatButtonModule, FormsModule, InListFilterComponent,
|
|
4354
4336
|
MatInputModule, MatTooltipModule, StopPropagationDirective, MatRadioModule, MatDatepickerModule,
|
|
4355
4337
|
DialogDirective, FilterComponent
|
|
4356
|
-
], 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.
|
|
4338
|
+
], 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.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"] }]
|
|
4357
4339
|
}], propDecorators: { $metaData: [{ type: i0.Input, args: [{ isSignal: true, alias: "metaData", required: true }] }], $trigger: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatMenuTrigger), { isSignal: true }] }] } });
|
|
4358
4340
|
|
|
4359
4341
|
class ColumnTotalPipe {
|
|
@@ -4364,10 +4346,10 @@ class ColumnTotalPipe {
|
|
|
4364
4346
|
return sumBy(dataToCalculate, metaData.key);
|
|
4365
4347
|
}
|
|
4366
4348
|
}
|
|
4367
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
4368
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0
|
|
4349
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ColumnTotalPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
4350
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.1.0", ngImport: i0, type: ColumnTotalPipe, isStandalone: true, name: "columnTotal" }); }
|
|
4369
4351
|
}
|
|
4370
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
4352
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ColumnTotalPipe, decorators: [{
|
|
4371
4353
|
type: Pipe,
|
|
4372
4354
|
args: [{
|
|
4373
4355
|
name: 'columnTotal',
|
|
@@ -4428,9 +4410,9 @@ class ColumnBuilderComponent {
|
|
|
4428
4410
|
this.templateService = inject(TableTemplateService);
|
|
4429
4411
|
this.tableConfig = inject(TableBuilderConfigToken);
|
|
4430
4412
|
this.injector = inject(Injector);
|
|
4431
|
-
this.$columnDef = viewChild(MatColumnDef,
|
|
4432
|
-
this.$bodyTemplate = viewChild('body',
|
|
4433
|
-
this.$metaData = signal(undefined,
|
|
4413
|
+
this.$columnDef = viewChild(MatColumnDef, ...(ngDevMode ? [{ debugName: "$columnDef" }] : []));
|
|
4414
|
+
this.$bodyTemplate = viewChild('body', ...(ngDevMode ? [{ debugName: "$bodyTemplate" }] : []));
|
|
4415
|
+
this.$metaData = signal(undefined, ...(ngDevMode ? [{ debugName: "$metaData" }] : []));
|
|
4434
4416
|
this.$additional = computed(() => {
|
|
4435
4417
|
const metaData = this.$metaData();
|
|
4436
4418
|
if (!metaData)
|
|
@@ -4443,30 +4425,30 @@ class ColumnBuilderComponent {
|
|
|
4443
4425
|
return metaData.additional?.limit || this.tableConfig?.arrayDefaults?.limit;
|
|
4444
4426
|
}
|
|
4445
4427
|
return undefined;
|
|
4446
|
-
},
|
|
4447
|
-
this.$customCell = signal(undefined,
|
|
4428
|
+
}, ...(ngDevMode ? [{ debugName: "$additional" }] : []));
|
|
4429
|
+
this.$customCell = signal(undefined, ...(ngDevMode ? [{ debugName: "$customCell" }] : []));
|
|
4448
4430
|
this.$transform = computed(() => {
|
|
4449
4431
|
const metaData = this.$metaData();
|
|
4450
4432
|
if (!metaData)
|
|
4451
4433
|
return;
|
|
4452
4434
|
return createTransformer(metaData, this.config);
|
|
4453
|
-
},
|
|
4435
|
+
}, ...(ngDevMode ? [{ debugName: "$transform" }] : []));
|
|
4454
4436
|
this.$innerTemplate = computed(() => {
|
|
4455
4437
|
const metaData = this.$metaData();
|
|
4456
4438
|
if (!metaData)
|
|
4457
4439
|
return;
|
|
4458
4440
|
return metaData.template || this.$customCell()?.$templateRef() || this.templateService.getTemplate(metaData);
|
|
4459
|
-
},
|
|
4441
|
+
}, ...(ngDevMode ? [{ debugName: "$innerTemplate" }] : []));
|
|
4460
4442
|
this.$showFilters = computed(() => {
|
|
4461
4443
|
const metaData = this.$metaData();
|
|
4462
4444
|
if (!metaData)
|
|
4463
4445
|
return;
|
|
4464
4446
|
const settings = this.state.$tableSettings();
|
|
4465
4447
|
return !(settings.hideColumnHeaderFilters || metaData.noFilter);
|
|
4466
|
-
},
|
|
4448
|
+
}, ...(ngDevMode ? [{ debugName: "$showFilters" }] : []));
|
|
4467
4449
|
this.$outerTemplate = computed(() => {
|
|
4468
4450
|
return this.$customCell()?.columnDef?.cell?.template ?? this.$bodyTemplate();
|
|
4469
|
-
},
|
|
4451
|
+
}, ...(ngDevMode ? [{ debugName: "$outerTemplate" }] : []));
|
|
4470
4452
|
this.$classes = computed(() => {
|
|
4471
4453
|
const metaData = this.$metaData();
|
|
4472
4454
|
if (!metaData)
|
|
@@ -4478,13 +4460,13 @@ class ColumnBuilderComponent {
|
|
|
4478
4460
|
});
|
|
4479
4461
|
}
|
|
4480
4462
|
return metaData.classes;
|
|
4481
|
-
},
|
|
4463
|
+
}, ...(ngDevMode ? [{ debugName: "$classes" }] : []));
|
|
4482
4464
|
this.$styles = computed(() => {
|
|
4483
4465
|
const metaData = this.$metaData();
|
|
4484
4466
|
if (!metaData)
|
|
4485
4467
|
return;
|
|
4486
4468
|
return columnStyles(metaData, this.state.$getUserDefinedWidth(metaData.key)(), this.state.$tableSettingsMinWidth());
|
|
4487
|
-
},
|
|
4469
|
+
}, ...(ngDevMode ? [{ debugName: "$styles" }] : []));
|
|
4488
4470
|
this.viewInited = false;
|
|
4489
4471
|
this.onViewInit = () => { };
|
|
4490
4472
|
this.whenViewInited = (callback) => {
|
|
@@ -4518,12 +4500,12 @@ class ColumnBuilderComponent {
|
|
|
4518
4500
|
metaData.click(element, key, event);
|
|
4519
4501
|
}
|
|
4520
4502
|
}
|
|
4521
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
4522
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0
|
|
4503
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ColumnBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4504
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", 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: [
|
|
4523
4505
|
{ provide: CDK_DROP_LIST, useExisting: CdkDropList },
|
|
4524
4506
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4525
4507
|
}
|
|
4526
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
4508
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ColumnBuilderComponent, decorators: [{
|
|
4527
4509
|
type: Component,
|
|
4528
4510
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [
|
|
4529
4511
|
{ provide: CDK_DROP_LIST, useExisting: CdkDropList },
|
|
@@ -4573,10 +4555,10 @@ class DataStore extends ComponentStore {
|
|
|
4573
4555
|
constructor() {
|
|
4574
4556
|
super({ ...defaultDataState });
|
|
4575
4557
|
}
|
|
4576
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
4577
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0
|
|
4558
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DataStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
4559
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DataStore }); }
|
|
4578
4560
|
}
|
|
4579
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
4561
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DataStore, decorators: [{
|
|
4580
4562
|
type: Injectable
|
|
4581
4563
|
}], ctorParameters: () => [] });
|
|
4582
4564
|
|
|
@@ -4740,13 +4722,13 @@ class GenericTableComponent {
|
|
|
4740
4722
|
this._injector = inject(Injector);
|
|
4741
4723
|
this.tableContainer = inject(TableContainerComponent, { optional: true });
|
|
4742
4724
|
this.smallFooter = 10;
|
|
4743
|
-
this.$headerRow = viewChild(MatHeaderRowDef,
|
|
4744
|
-
this.$footerRow = viewChild(MatFooterRowDef,
|
|
4745
|
-
this.$table = viewChild(MatTable,
|
|
4746
|
-
this.$dropList = viewChild(CdkDropList,
|
|
4725
|
+
this.$headerRow = viewChild(MatHeaderRowDef, ...(ngDevMode ? [{ debugName: "$headerRow" }] : []));
|
|
4726
|
+
this.$footerRow = viewChild(MatFooterRowDef, ...(ngDevMode ? [{ debugName: "$footerRow" }] : []));
|
|
4727
|
+
this.$table = viewChild(MatTable, ...(ngDevMode ? [{ debugName: "$table" }] : []));
|
|
4728
|
+
this.$dropList = viewChild(CdkDropList, ...(ngDevMode ? [{ debugName: "$dropList" }] : []));
|
|
4747
4729
|
this.selection$ = output({ alias: 'selection' });
|
|
4748
4730
|
this.$displayData = input.required({ ...(ngDevMode ? { debugName: "$displayData" } : {}), alias: 'displayData' });
|
|
4749
|
-
this.$displayDataLength = computed(() => this.$displayData().length,
|
|
4731
|
+
this.$displayDataLength = computed(() => this.$displayData().length, ...(ngDevMode ? [{ debugName: "$displayDataLength" }] : []));
|
|
4750
4732
|
this.$data = input.required({ ...(ngDevMode ? { debugName: "$data" } : {}), alias: 'data' });
|
|
4751
4733
|
this.$rows = input([], { ...(ngDevMode ? { debugName: "$rows" } : {}), alias: 'rows' });
|
|
4752
4734
|
this.$columnInfos = input.required({ ...(ngDevMode ? { debugName: "$columnInfos" } : {}), alias: 'columnInfos' });
|
|
@@ -4762,7 +4744,7 @@ class GenericTableComponent {
|
|
|
4762
4744
|
keys.unshift('index');
|
|
4763
4745
|
}
|
|
4764
4746
|
return keys;
|
|
4765
|
-
},
|
|
4747
|
+
}, ...(ngDevMode ? [{ debugName: "$keys" }] : []));
|
|
4766
4748
|
this.keys$ = toObservable(this.$keys);
|
|
4767
4749
|
this.$trackBy = input(undefined, { ...(ngDevMode ? { debugName: "$trackBy" } : {}), alias: 'trackBy' });
|
|
4768
4750
|
this.$trackByFunction = computed(() => {
|
|
@@ -4774,17 +4756,17 @@ class GenericTableComponent {
|
|
|
4774
4756
|
return `${item.level}-${item[initIndexSymbol]}`;
|
|
4775
4757
|
return typeof trackBy === 'function' ? trackBy(item) : item[trackBy];
|
|
4776
4758
|
});
|
|
4777
|
-
},
|
|
4778
|
-
this.$hasFooterMeta = computed(() => this.state.$metaDataArray().some(md => !!md.additional?.footer),
|
|
4779
|
-
this.$hasCustomFooter = computed(() => this.$columnInfos()?.some(ci => !!ci.customCell?.columnDef?.footerCell),
|
|
4759
|
+
}, ...(ngDevMode ? [{ debugName: "$trackByFunction" }] : []));
|
|
4760
|
+
this.$hasFooterMeta = computed(() => this.state.$metaDataArray().some(md => !!md.additional?.footer), ...(ngDevMode ? [{ debugName: "$hasFooterMeta" }] : []));
|
|
4761
|
+
this.$hasCustomFooter = computed(() => this.$columnInfos()?.some(ci => !!ci.customCell?.columnDef?.footerCell), ...(ngDevMode ? [{ debugName: "$hasCustomFooter" }] : []));
|
|
4780
4762
|
this.$footerRowStyle = computed(() => {
|
|
4781
4763
|
const hasData = !!this.$displayDataLength();
|
|
4782
4764
|
const metaFooter = this.$hasFooterMeta();
|
|
4783
4765
|
const customFooter = this.$hasCustomFooter();
|
|
4784
4766
|
const hasSelectionColumn = this.state.$props().selectionColumn;
|
|
4785
4767
|
return customFooter || hasSelectionColumn || (hasData && metaFooter) ? 'regular-footer' : hasData ? 'no-footer' : 'small-footer';
|
|
4786
|
-
},
|
|
4787
|
-
this.$showFooterRow = computed(() => this.$footerRowStyle() !== 'no-footer',
|
|
4768
|
+
}, ...(ngDevMode ? [{ debugName: "$footerRowStyle" }] : []));
|
|
4769
|
+
this.$showFooterRow = computed(() => this.$footerRowStyle() !== 'no-footer', ...(ngDevMode ? [{ debugName: "$showFooterRow" }] : []));
|
|
4788
4770
|
this.injector = Injector.create({
|
|
4789
4771
|
providers: [
|
|
4790
4772
|
{ provide: MatTable, useFactory: () => this.$table() },
|
|
@@ -4792,10 +4774,10 @@ class GenericTableComponent {
|
|
|
4792
4774
|
],
|
|
4793
4775
|
parent: this._injector
|
|
4794
4776
|
});
|
|
4795
|
-
this.$hasIndexColumn = computed(() => this.state.selectSignal(state => state.props.indexColumn)(),
|
|
4796
|
-
this.$columns = signal({},
|
|
4797
|
-
this.$showHeader = computed(() => !this.state.$tableSettings().hideColumnHeader,
|
|
4798
|
-
this.$paginatorHeight = signal(0,
|
|
4777
|
+
this.$hasIndexColumn = computed(() => this.state.selectSignal(state => state.props.indexColumn)(), ...(ngDevMode ? [{ debugName: "$hasIndexColumn" }] : []));
|
|
4778
|
+
this.$columns = signal({}, ...(ngDevMode ? [{ debugName: "$columns" }] : []));
|
|
4779
|
+
this.$showHeader = computed(() => !this.state.$tableSettings().hideColumnHeader, ...(ngDevMode ? [{ debugName: "$showHeader" }] : []));
|
|
4780
|
+
this.$paginatorHeight = signal(0, ...(ngDevMode ? [{ debugName: "$paginatorHeight" }] : []));
|
|
4799
4781
|
this.r = new ResizeObserver(entries => this.$paginatorHeight.set(entries[0]?.contentRect.height || 0));
|
|
4800
4782
|
this.#rr = effect((cleanup) => {
|
|
4801
4783
|
const paginatorWrapper = this.tableContainer?.$paginatorWrapper();
|
|
@@ -4803,9 +4785,9 @@ class GenericTableComponent {
|
|
|
4803
4785
|
return;
|
|
4804
4786
|
this.r.observe(paginatorWrapper.nativeElement);
|
|
4805
4787
|
cleanup(() => { this.r.disconnect(); });
|
|
4806
|
-
},
|
|
4788
|
+
}, ...(ngDevMode ? [{ debugName: "#rr" }] : []));
|
|
4807
4789
|
this.$offset = this.dataStore.selectSignal(s => s.virtualScrollOffset);
|
|
4808
|
-
this.$footerOffset = computed(() => this.$useVirtualScroll() ? this.$offset() : this.$paginatorHeight(),
|
|
4790
|
+
this.$footerOffset = computed(() => this.$useVirtualScroll() ? this.$offset() : this.$paginatorHeight(), ...(ngDevMode ? [{ debugName: "$footerOffset" }] : []));
|
|
4809
4791
|
this.#buildColumnsEffect = effect(() => {
|
|
4810
4792
|
const columnInfos = this.$columnInfos() || [];
|
|
4811
4793
|
const table = this.$table();
|
|
@@ -4821,7 +4803,7 @@ class GenericTableComponent {
|
|
|
4821
4803
|
});
|
|
4822
4804
|
columnInfos.forEach(ci => this.buildColumn(ci));
|
|
4823
4805
|
});
|
|
4824
|
-
},
|
|
4806
|
+
}, ...(ngDevMode ? [{ debugName: "#buildColumnsEffect" }] : []));
|
|
4825
4807
|
this.#buildRowsEffect = effect(() => {
|
|
4826
4808
|
const table = this.$table();
|
|
4827
4809
|
const rows = this.$rows();
|
|
@@ -4835,7 +4817,7 @@ class GenericTableComponent {
|
|
|
4835
4817
|
table.addRowDef(row);
|
|
4836
4818
|
});
|
|
4837
4819
|
});
|
|
4838
|
-
},
|
|
4820
|
+
}, ...(ngDevMode ? [{ debugName: "#buildRowsEffect" }] : []));
|
|
4839
4821
|
this.#buildHeaderRowEffect = effect(() => {
|
|
4840
4822
|
const headerRow = this.$headerRow();
|
|
4841
4823
|
const showHeader = this.$showHeader();
|
|
@@ -4846,7 +4828,7 @@ class GenericTableComponent {
|
|
|
4846
4828
|
else if (headerRow && table)
|
|
4847
4829
|
table.removeHeaderRowDef(headerRow);
|
|
4848
4830
|
});
|
|
4849
|
-
},
|
|
4831
|
+
}, ...(ngDevMode ? [{ debugName: "#buildHeaderRowEffect" }] : []));
|
|
4850
4832
|
this.#buildFooterEffect = effect(() => {
|
|
4851
4833
|
const footerRow = this.$footerRow();
|
|
4852
4834
|
const showFooter = this.$showFooterRow();
|
|
@@ -4857,9 +4839,9 @@ class GenericTableComponent {
|
|
|
4857
4839
|
else if (footerRow && table)
|
|
4858
4840
|
table.removeFooterRowDef(footerRow);
|
|
4859
4841
|
});
|
|
4860
|
-
},
|
|
4861
|
-
this.$usePaginator = computed(() => this.state.$tableSettings().usePaginator,
|
|
4862
|
-
this.$useVirtualScroll = computed(() => this.state.$viewType().includes('virtual'),
|
|
4842
|
+
}, ...(ngDevMode ? [{ debugName: "#buildFooterEffect" }] : []));
|
|
4843
|
+
this.$usePaginator = computed(() => this.state.$tableSettings().usePaginator, ...(ngDevMode ? [{ debugName: "$usePaginator" }] : []));
|
|
4844
|
+
this.$useVirtualScroll = computed(() => this.state.$viewType().includes('virtual'), ...(ngDevMode ? [{ debugName: "$useVirtualScroll" }] : []));
|
|
4863
4845
|
this.$virtualStart = this.dataStore.selectSignal(d => d.virtualEnds.start);
|
|
4864
4846
|
this.$offsetIndex = computed(() => {
|
|
4865
4847
|
const virtualStart = this.$virtualStart();
|
|
@@ -4872,8 +4854,8 @@ class GenericTableComponent {
|
|
|
4872
4854
|
return pageSize * currentPage;
|
|
4873
4855
|
}
|
|
4874
4856
|
return 0;
|
|
4875
|
-
},
|
|
4876
|
-
this.$hasSelectColumn = computed(() => this.state.selectSignal(state => state.props.selectionColumn)(),
|
|
4857
|
+
}, ...(ngDevMode ? [{ debugName: "$offsetIndex" }] : []));
|
|
4858
|
+
this.$hasSelectColumn = computed(() => this.state.selectSignal(state => state.props.selectionColumn)(), ...(ngDevMode ? [{ debugName: "$hasSelectColumn" }] : []));
|
|
4877
4859
|
this.$selection = computed(() => {
|
|
4878
4860
|
const trackBy = this.$trackBy();
|
|
4879
4861
|
if (trackBy) {
|
|
@@ -4889,7 +4871,7 @@ class GenericTableComponent {
|
|
|
4889
4871
|
this.checkForPreviousSelection(model);
|
|
4890
4872
|
});
|
|
4891
4873
|
return model;
|
|
4892
|
-
},
|
|
4874
|
+
}, ...(ngDevMode ? [{ debugName: "$selection" }] : []));
|
|
4893
4875
|
this.selectionChange$ = toObservable(this.$selection).pipe(switchMap(s => s.changed));
|
|
4894
4876
|
this.$selectionChange = toSignal(this.selectionChange$);
|
|
4895
4877
|
this.onSelectionChangeEffect = effect(() => {
|
|
@@ -4897,20 +4879,20 @@ class GenericTableComponent {
|
|
|
4897
4879
|
if (!selectionChange)
|
|
4898
4880
|
return;
|
|
4899
4881
|
untracked(() => this.selection$.emit(selectionChange));
|
|
4900
|
-
},
|
|
4882
|
+
}, ...(ngDevMode ? [{ debugName: "onSelectionChangeEffect" }] : []));
|
|
4901
4883
|
this.$isAllSelected = computed(() => {
|
|
4902
4884
|
this.$selectionChange();
|
|
4903
4885
|
const selected = this.$selection()?.selected;
|
|
4904
4886
|
if (!selected?.length)
|
|
4905
4887
|
return false;
|
|
4906
4888
|
return this.$selectableData()?.length === selected.length;
|
|
4907
|
-
},
|
|
4889
|
+
}, ...(ngDevMode ? [{ debugName: "$isAllSelected" }] : []));
|
|
4908
4890
|
this.$masterToggleChecked = this.$isAllSelected;
|
|
4909
4891
|
this.$masterToggleIndeterminate = computed(() => {
|
|
4910
4892
|
this.$selectionChange();
|
|
4911
4893
|
return !!this.$selection()?.selected.length && !this.$masterToggleChecked();
|
|
4912
|
-
},
|
|
4913
|
-
this.$paginated = computed(() => this.state.$viewType() === 'virtual paginator' || this.state.$viewType() === 'paginator',
|
|
4894
|
+
}, ...(ngDevMode ? [{ debugName: "$masterToggleIndeterminate" }] : []));
|
|
4895
|
+
this.$paginated = computed(() => this.state.$viewType() === 'virtual paginator' || this.state.$viewType() === 'paginator', ...(ngDevMode ? [{ debugName: "$paginated" }] : []));
|
|
4914
4896
|
this.$selectableData = computed(() => {
|
|
4915
4897
|
const isGrouped = !!this.state.$groupByData().length;
|
|
4916
4898
|
this.state.$expandGroups();
|
|
@@ -4927,7 +4909,7 @@ class GenericTableComponent {
|
|
|
4927
4909
|
return this.$data();
|
|
4928
4910
|
}
|
|
4929
4911
|
return [];
|
|
4930
|
-
},
|
|
4912
|
+
}, ...(ngDevMode ? [{ debugName: "$selectableData" }] : []));
|
|
4931
4913
|
this.$selectAllMessage = computed(() => {
|
|
4932
4914
|
if (this.$isAllSelected())
|
|
4933
4915
|
return `Deselect all ${this.$selection().selected.length} selected`;
|
|
@@ -4937,7 +4919,7 @@ class GenericTableComponent {
|
|
|
4937
4919
|
message += ' on this page';
|
|
4938
4920
|
}
|
|
4939
4921
|
return message;
|
|
4940
|
-
},
|
|
4922
|
+
}, ...(ngDevMode ? [{ debugName: "$selectAllMessage" }] : []));
|
|
4941
4923
|
this.#onSelectableDataChangeEffect = effect(() => {
|
|
4942
4924
|
const selectableData = this.$selectableData();
|
|
4943
4925
|
untracked(() => {
|
|
@@ -4954,7 +4936,7 @@ class GenericTableComponent {
|
|
|
4954
4936
|
const removed = selected.filter(trackByFunc);
|
|
4955
4937
|
this.$selection().deselect(...removed);
|
|
4956
4938
|
});
|
|
4957
|
-
},
|
|
4939
|
+
}, ...(ngDevMode ? [{ debugName: "#onSelectableDataChangeEffect" }] : []));
|
|
4958
4940
|
this.$tableWidth = linkedSignal({ ...(ngDevMode ? { debugName: "$tableWidth" } : {}), source: this.state.$getUserDefinedTableWidth,
|
|
4959
4941
|
computation: (currentUserDefinedWidth, { source: previousUserDefinedWidth } = { value: null, source: 0 }) => {
|
|
4960
4942
|
if (currentUserDefinedWidth) {
|
|
@@ -4995,7 +4977,7 @@ class GenericTableComponent {
|
|
|
4995
4977
|
return parseTbSizeToPixels(notPersistedTableSettings.rowHeight) + 'px';
|
|
4996
4978
|
}
|
|
4997
4979
|
return undefined;
|
|
4998
|
-
},
|
|
4980
|
+
}, ...(ngDevMode ? [{ debugName: "$rowHeight" }] : []));
|
|
4999
4981
|
this.$headerHeight = computed(() => {
|
|
5000
4982
|
if (this.state.$userDefinedHeaderHeight()) {
|
|
5001
4983
|
return this.state.$userDefinedHeaderHeight() + 'px';
|
|
@@ -5009,14 +4991,14 @@ class GenericTableComponent {
|
|
|
5009
4991
|
return parseTbSizeToPixels(notPersistedTableSettings.headerHeight) + 'px';
|
|
5010
4992
|
}
|
|
5011
4993
|
return undefined;
|
|
5012
|
-
},
|
|
4994
|
+
}, ...(ngDevMode ? [{ debugName: "$headerHeight" }] : []));
|
|
5013
4995
|
this.$groupHeaderHeight = computed(() => {
|
|
5014
4996
|
const groupHeaderHeight = this.state.$notPersistedTableSettings().groupHeaderHeight;
|
|
5015
4997
|
if (groupHeaderHeight) {
|
|
5016
4998
|
return parseTbSizeToPixels(groupHeaderHeight) + 'px';
|
|
5017
4999
|
}
|
|
5018
5000
|
return this.$rowHeight();
|
|
5019
|
-
},
|
|
5001
|
+
}, ...(ngDevMode ? [{ debugName: "$groupHeaderHeight" }] : []));
|
|
5020
5002
|
this.$footerHeight = computed(() => {
|
|
5021
5003
|
const footerStyle = this.$footerRowStyle();
|
|
5022
5004
|
switch (footerStyle) {
|
|
@@ -5027,10 +5009,10 @@ class GenericTableComponent {
|
|
|
5027
5009
|
default:
|
|
5028
5010
|
return '0px';
|
|
5029
5011
|
}
|
|
5030
|
-
},
|
|
5031
|
-
this.$stickyFooter = computed(() => this.state.$props().stickyFooter || this.state.$isVirtual(),
|
|
5032
|
-
this.$rowStyles = computed(() => this.state.$tableSettings().rowStyles || {},
|
|
5033
|
-
this.$rowClasses = computed(() => this.state.$tableSettings().rowClasses || {},
|
|
5012
|
+
}, ...(ngDevMode ? [{ debugName: "$footerHeight" }] : []));
|
|
5013
|
+
this.$stickyFooter = computed(() => this.state.$props().stickyFooter || this.state.$isVirtual(), ...(ngDevMode ? [{ debugName: "$stickyFooter" }] : []));
|
|
5014
|
+
this.$rowStyles = computed(() => this.state.$tableSettings().rowStyles || {}, ...(ngDevMode ? [{ debugName: "$rowStyles" }] : []));
|
|
5015
|
+
this.$rowClasses = computed(() => this.state.$tableSettings().rowClasses || {}, ...(ngDevMode ? [{ debugName: "$rowClasses" }] : []));
|
|
5034
5016
|
this.allOfGroupSelected = (uniqueName) => computed(() => {
|
|
5035
5017
|
//make sure signal is marked dirty when selection or over all data changes
|
|
5036
5018
|
this.$selectionChange();
|
|
@@ -5086,8 +5068,8 @@ class GenericTableComponent {
|
|
|
5086
5068
|
this.$selectFilterKey = computed(() => {
|
|
5087
5069
|
const selectFilter = Object.keys(this.state.$filters()).find(key => key.startsWith('header-column-select'));
|
|
5088
5070
|
return selectFilter;
|
|
5089
|
-
},
|
|
5090
|
-
this.$hasSelectFilter = computed(() => !!this.$selectFilterKey(),
|
|
5071
|
+
}, ...(ngDevMode ? [{ debugName: "$selectFilterKey" }] : []));
|
|
5072
|
+
this.$hasSelectFilter = computed(() => !!this.$selectFilterKey(), ...(ngDevMode ? [{ debugName: "$hasSelectFilter" }] : []));
|
|
5091
5073
|
this._onSelect = effect(() => {
|
|
5092
5074
|
const selectionChange = this.$selectionChange();
|
|
5093
5075
|
untracked(() => {
|
|
@@ -5097,7 +5079,7 @@ class GenericTableComponent {
|
|
|
5097
5079
|
this.state.removeFilter(selectFilterKey);
|
|
5098
5080
|
this.addSelectFilter(true);
|
|
5099
5081
|
});
|
|
5100
|
-
},
|
|
5082
|
+
}, ...(ngDevMode ? [{ debugName: "_onSelect" }] : []));
|
|
5101
5083
|
}
|
|
5102
5084
|
#rr;
|
|
5103
5085
|
drop(event) {
|
|
@@ -5189,10 +5171,10 @@ class GenericTableComponent {
|
|
|
5189
5171
|
notSavable: true,
|
|
5190
5172
|
});
|
|
5191
5173
|
}
|
|
5192
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
5193
|
-
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 }); }
|
|
5174
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: GenericTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5175
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.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 }); }
|
|
5194
5176
|
}
|
|
5195
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
5177
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: GenericTableComponent, decorators: [{
|
|
5196
5178
|
type: Component,
|
|
5197
5179
|
args: [{ selector: 'tb-generic-table', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
5198
5180
|
MatTableModule, DragDropModule, MatCheckboxModule, MatButtonModule, MatIconModule, NgTemplateOutlet,
|
|
@@ -5220,11 +5202,10 @@ class ExportToCsvService {
|
|
|
5220
5202
|
this.datePipe = inject(DatePipe);
|
|
5221
5203
|
this.$exportSettings = computed(() => {
|
|
5222
5204
|
const globalSettings = this.config?.defaultTableSettings?.tableSettings?.exportSettings
|
|
5223
|
-
|| this.config?.export
|
|
5224
5205
|
|| {};
|
|
5225
5206
|
const tableSettings = (this.state.$notPersistedTableSettings()?.exportSettings || {});
|
|
5226
5207
|
return merge$1({}, globalSettings, tableSettings);
|
|
5227
|
-
},
|
|
5208
|
+
}, ...(ngDevMode ? [{ debugName: "$exportSettings" }] : []));
|
|
5228
5209
|
this.exportToCsv = (data) => {
|
|
5229
5210
|
const hiddenKeys = this.state.selectSignal(s => s.hiddenKeys)();
|
|
5230
5211
|
const meta = this.state.$metaDataArray().filter(md => !md.noExport && !hiddenKeys.includes(md.key));
|
|
@@ -5258,12 +5239,8 @@ class ExportToCsvService {
|
|
|
5258
5239
|
return metaExport.mapForExport(row);
|
|
5259
5240
|
const exportForCol = merge$1({}, this.$exportSettings(), metaExport);
|
|
5260
5241
|
let val = getFactory(meta.key)(row);
|
|
5261
|
-
if (val == null
|
|
5242
|
+
if (val == null)
|
|
5262
5243
|
return val;
|
|
5263
|
-
if (meta.transform && meta.fieldType !== FieldType.Expression) {
|
|
5264
|
-
const transform = meta.transform;
|
|
5265
|
-
return isPipe(transform) ? transform.transform(val) : transform(val);
|
|
5266
|
-
}
|
|
5267
5244
|
if (meta.additional?.link && exportForCol.mapLink === 'as link' || exportForCol.mapLink === 'as excel') {
|
|
5268
5245
|
let mapper = this.state.$getLinkInfo(meta)()?.link;
|
|
5269
5246
|
if (mapper) {
|
|
@@ -5300,8 +5277,6 @@ class ExportToCsvService {
|
|
|
5300
5277
|
const style = meta.additional.arrayStyle ?? this.config.arrayDefaults?.arrayStyle;
|
|
5301
5278
|
const limit = meta.additional.limit ?? this.config.arrayDefaults?.limit;
|
|
5302
5279
|
return val.slice(0, limit).join(style === ArrayStyle.NewLine ? '\n' : ', ');
|
|
5303
|
-
case FieldType.Expression:
|
|
5304
|
-
return meta.transform(row);
|
|
5305
5280
|
case FieldType.Enum:
|
|
5306
5281
|
return exportForCol?.mapEnumToString ? spaceCase(meta.additional.enumMap[val]) : val;
|
|
5307
5282
|
}
|
|
@@ -5320,16 +5295,16 @@ class ExportToCsvService {
|
|
|
5320
5295
|
}
|
|
5321
5296
|
return this.datePipe.transform(val, dateFormat);
|
|
5322
5297
|
}
|
|
5323
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
5324
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0
|
|
5298
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ExportToCsvService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
5299
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ExportToCsvService }); }
|
|
5325
5300
|
}
|
|
5326
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
5301
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ExportToCsvService, decorators: [{
|
|
5327
5302
|
type: Injectable
|
|
5328
5303
|
}] });
|
|
5329
5304
|
|
|
5330
5305
|
function createLinkCreatorDict(metaDatas) {
|
|
5331
5306
|
return metaDatas.reduce((acc, md) => {
|
|
5332
|
-
if (md.additional?.link
|
|
5307
|
+
if (md.additional?.link) {
|
|
5333
5308
|
acc[md.key] = createLinkCreator(md);
|
|
5334
5309
|
}
|
|
5335
5310
|
return acc;
|
|
@@ -5538,10 +5513,10 @@ class TableBuilderStateStore extends ComponentStore {
|
|
|
5538
5513
|
this.deleteLocalProfilesState({ key, stateKey });
|
|
5539
5514
|
};
|
|
5540
5515
|
}
|
|
5541
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
5542
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0
|
|
5516
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TableBuilderStateStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
5517
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TableBuilderStateStore, providedIn: 'root' }); }
|
|
5543
5518
|
}
|
|
5544
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
5519
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TableBuilderStateStore, decorators: [{
|
|
5545
5520
|
type: Injectable,
|
|
5546
5521
|
args: [{ providedIn: 'root' }]
|
|
5547
5522
|
}], ctorParameters: () => [] });
|
|
@@ -5761,13 +5736,13 @@ class PaginatorComponent {
|
|
|
5761
5736
|
constructor() {
|
|
5762
5737
|
this.state = inject(TableStore);
|
|
5763
5738
|
this.data = inject(DataStore);
|
|
5764
|
-
this.$paginator = viewChild(MatPaginator,
|
|
5739
|
+
this.$paginator = viewChild(MatPaginator, ...(ngDevMode ? [{ debugName: "$paginator" }] : []));
|
|
5765
5740
|
this.$dataLength = this.data.selectSignal(d => d.sortedFilteredDataLength);
|
|
5766
5741
|
this.$viewableDataLength = this.data.selectSignal(d => d.sortedFilteredGroupedDataLength);
|
|
5767
5742
|
this.pageEvent$ = toObservable(this.$paginator).pipe(notNull(), switchMap(p => p.page));
|
|
5768
5743
|
this.$pageEvent = toSignal(this.pageEvent$);
|
|
5769
|
-
this.$pageIndexChangeEvent = computed(() => this.$pageEvent()?.pageIndex,
|
|
5770
|
-
this.$pageSizeChangeEvent = computed(() => this.$pageEvent()?.pageSize,
|
|
5744
|
+
this.$pageIndexChangeEvent = computed(() => this.$pageEvent()?.pageIndex, ...(ngDevMode ? [{ debugName: "$pageIndexChangeEvent" }] : []));
|
|
5745
|
+
this.$pageSizeChangeEvent = computed(() => this.$pageEvent()?.pageSize, ...(ngDevMode ? [{ debugName: "$pageSizeChangeEvent" }] : []));
|
|
5771
5746
|
this.$currentPageData = computed(() => {
|
|
5772
5747
|
const pageEvent = this.$pageEvent();
|
|
5773
5748
|
if (!pageEvent)
|
|
@@ -5780,20 +5755,20 @@ class PaginatorComponent {
|
|
|
5780
5755
|
const pageDetails = mapPaginationEventToCurrentPageDetails(pageEvent);
|
|
5781
5756
|
const dataLength = this.$dataLength();
|
|
5782
5757
|
return ({ ...pageDetails, total: dataLength });
|
|
5783
|
-
},
|
|
5758
|
+
}, ...(ngDevMode ? [{ debugName: "$currentPageData" }] : []));
|
|
5784
5759
|
this.#onPageIndexEffect = effect(() => {
|
|
5785
5760
|
const index = this.$pageIndexChangeEvent();
|
|
5786
5761
|
if (index === undefined)
|
|
5787
5762
|
return;
|
|
5788
5763
|
untracked(() => this.state.setCurrentPage(index));
|
|
5789
|
-
},
|
|
5764
|
+
}, ...(ngDevMode ? [{ debugName: "#onPageIndexEffect" }] : []));
|
|
5790
5765
|
this.#onPageSizeEffect = effect(() => {
|
|
5791
5766
|
const size = this.$pageSizeChangeEvent();
|
|
5792
5767
|
const initialized = this.state.$initializationState() >= InitializationState.Ready;
|
|
5793
5768
|
if (!size || !initialized)
|
|
5794
5769
|
return;
|
|
5795
5770
|
untracked(() => this.state.setUserDefinedPageSize(size));
|
|
5796
|
-
},
|
|
5771
|
+
}, ...(ngDevMode ? [{ debugName: "#onPageSizeEffect" }] : []));
|
|
5797
5772
|
this.#onMetaPageSizeEffect = effect(() => {
|
|
5798
5773
|
const paginator = this.$paginator();
|
|
5799
5774
|
if (!paginator)
|
|
@@ -5801,7 +5776,7 @@ class PaginatorComponent {
|
|
|
5801
5776
|
const metaPageSize = this.state.$pageSize();
|
|
5802
5777
|
const initialized = this.state.$initializationState() >= InitializationState.Ready;
|
|
5803
5778
|
untracked(() => initialized && paginator._changePageSize(metaPageSize));
|
|
5804
|
-
},
|
|
5779
|
+
}, ...(ngDevMode ? [{ debugName: "#onMetaPageSizeEffect" }] : []));
|
|
5805
5780
|
this.onDataLengthEffect = effect(() => {
|
|
5806
5781
|
const paginator = this.$paginator();
|
|
5807
5782
|
const dataLength = this.$viewableDataLength();
|
|
@@ -5815,8 +5790,8 @@ class PaginatorComponent {
|
|
|
5815
5790
|
}
|
|
5816
5791
|
}
|
|
5817
5792
|
});
|
|
5818
|
-
},
|
|
5819
|
-
this.$collapseFooter = computed(() => this.state.selectSignal(state => state.persistedTableSettings.collapseFooter)(),
|
|
5793
|
+
}, ...(ngDevMode ? [{ debugName: "onDataLengthEffect" }] : []));
|
|
5794
|
+
this.$collapseFooter = computed(() => this.state.selectSignal(state => state.persistedTableSettings.collapseFooter)(), ...(ngDevMode ? [{ debugName: "$collapseFooter" }] : []));
|
|
5820
5795
|
this.$showAllOption = this.state.selectSignal(s => s.notPersistedTableSettings?.paginatorSettings?.includeAllInOptions);
|
|
5821
5796
|
this.$showAll = this.state.$showAll;
|
|
5822
5797
|
}
|
|
@@ -5830,8 +5805,8 @@ class PaginatorComponent {
|
|
|
5830
5805
|
this.state.toggleCollapseFooter({ collapseFooter: true });
|
|
5831
5806
|
}
|
|
5832
5807
|
}
|
|
5833
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
5834
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0
|
|
5808
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5809
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: PaginatorComponent, isStandalone: true, selector: "tb-paginator", viewQueries: [{ propertyName: "$paginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
5835
5810
|
<div class="paginator-row">
|
|
5836
5811
|
@if($currentPageData(); as pageData)
|
|
5837
5812
|
{
|
|
@@ -5860,7 +5835,7 @@ class PaginatorComponent {
|
|
|
5860
5835
|
</div>
|
|
5861
5836
|
`, 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 }); }
|
|
5862
5837
|
}
|
|
5863
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
5838
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PaginatorComponent, decorators: [{
|
|
5864
5839
|
type: Component,
|
|
5865
5840
|
args: [{ selector: 'tb-paginator', imports: [MatPaginatorModule, MatButtonModule], template: `
|
|
5866
5841
|
<div class="paginator-row">
|
|
@@ -5906,17 +5881,17 @@ class TableBuilderDataSource extends MatTableDataSource {
|
|
|
5906
5881
|
}
|
|
5907
5882
|
constructor(state, data) {
|
|
5908
5883
|
super([]);
|
|
5909
|
-
this.#$dataSrc = signal([],
|
|
5884
|
+
this.#$dataSrc = signal([], ...(ngDevMode ? [{ debugName: "#$dataSrc" }] : []));
|
|
5910
5885
|
this.$dataSize = signal({ start: 0, end: 0 }, { ...(ngDevMode ? { debugName: "$dataSize" } : {}), equal: (a, b) => a.start === b.start && a.end === b.end });
|
|
5911
5886
|
this._ = effect(() => {
|
|
5912
5887
|
const data = this.#$dataSrc();
|
|
5913
5888
|
const dataSize = this.$dataSize();
|
|
5914
5889
|
untracked(() => this.data = data.slice(dataSize.start, dataSize.end));
|
|
5915
|
-
},
|
|
5890
|
+
}, ...(ngDevMode ? [{ debugName: "_" }] : []));
|
|
5916
5891
|
const $currentPage = state.$currentPage;
|
|
5917
5892
|
const $pageSize = state.$pageSize;
|
|
5918
5893
|
const $virtualEnds = data.selectSignal(d => d.virtualEnds);
|
|
5919
|
-
const $dataLength = computed(() => this.#$dataSrc().length,
|
|
5894
|
+
const $dataLength = computed(() => this.#$dataSrc().length, ...(ngDevMode ? [{ debugName: "$dataLength" }] : []));
|
|
5920
5895
|
this.$dataSize = computed(() => {
|
|
5921
5896
|
const viewType = state.$viewType();
|
|
5922
5897
|
const dataLength = $dataLength();
|
|
@@ -5934,7 +5909,7 @@ class TableBuilderDataSource extends MatTableDataSource {
|
|
|
5934
5909
|
return ({ start: 0, end: dataLength });
|
|
5935
5910
|
}
|
|
5936
5911
|
return ({ start: virtualEnds.start, end: virtualEnds.end });
|
|
5937
|
-
},
|
|
5912
|
+
}, ...(ngDevMode ? [{ debugName: "$dataSize" }] : []));
|
|
5938
5913
|
}
|
|
5939
5914
|
connect() {
|
|
5940
5915
|
return super.connect();
|
|
@@ -5980,12 +5955,12 @@ class GroupByListComponent {
|
|
|
5980
5955
|
name: dict[gbk.key].displayName || gbk.key,
|
|
5981
5956
|
sort: this.tableStore.getGroupBySortDirection(gbk.key)(),
|
|
5982
5957
|
}));
|
|
5983
|
-
},
|
|
5958
|
+
}, ...(ngDevMode ? [{ debugName: "$groups" }] : []));
|
|
5984
5959
|
}
|
|
5985
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
5986
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0
|
|
5960
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: GroupByListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5961
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", 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 }); }
|
|
5987
5962
|
}
|
|
5988
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
5963
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: GroupByListComponent, decorators: [{
|
|
5989
5964
|
type: Component,
|
|
5990
5965
|
args: [{ selector: 'group-by-list', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
5991
5966
|
MatChipsModule, MatIconModule, SpaceCasePipe, StopPropagationDirective
|
|
@@ -5998,13 +5973,13 @@ class ProfilesMenuComponent {
|
|
|
5998
5973
|
this.tableStore = inject(TableStore);
|
|
5999
5974
|
this.$tableId = input.required({ ...(ngDevMode ? { debugName: "$tableId" } : {}), alias: 'tableId' });
|
|
6000
5975
|
this.$isMatMenuChild = input(false, { ...(ngDevMode ? { debugName: "$isMatMenuChild" } : {}), alias: 'isMatMenuChild' });
|
|
6001
|
-
this.trigger = viewChild('trigger',
|
|
5976
|
+
this.trigger = viewChild('trigger', ...(ngDevMode ? [{ debugName: "trigger" }] : []));
|
|
6002
5977
|
this.menu = viewChild.required(MatMenu);
|
|
6003
|
-
this.allProfilesPanelOpened = signal(false,
|
|
6004
|
-
this.newProfilePanelOpened = signal(false,
|
|
6005
|
-
this.$currentProfile = computed(() => this.stateService.$selectLocalProfileCurrentKey(this.$tableId())(),
|
|
6006
|
-
this.$defaultProfile = computed(() => this.stateService.$selectLocalProfileDefaultKey(this.$tableId())(),
|
|
6007
|
-
this.$keys = computed(() => this.stateService.$selectLocalProfileKeys(this.$tableId())(),
|
|
5978
|
+
this.allProfilesPanelOpened = signal(false, ...(ngDevMode ? [{ debugName: "allProfilesPanelOpened" }] : []));
|
|
5979
|
+
this.newProfilePanelOpened = signal(false, ...(ngDevMode ? [{ debugName: "newProfilePanelOpened" }] : []));
|
|
5980
|
+
this.$currentProfile = computed(() => this.stateService.$selectLocalProfileCurrentKey(this.$tableId())(), ...(ngDevMode ? [{ debugName: "$currentProfile" }] : []));
|
|
5981
|
+
this.$defaultProfile = computed(() => this.stateService.$selectLocalProfileDefaultKey(this.$tableId())(), ...(ngDevMode ? [{ debugName: "$defaultProfile" }] : []));
|
|
5982
|
+
this.$keys = computed(() => this.stateService.$selectLocalProfileKeys(this.$tableId())(), ...(ngDevMode ? [{ debugName: "$keys" }] : []));
|
|
6008
5983
|
this.defaultName = 'My Profile';
|
|
6009
5984
|
this.position$ = new Subject();
|
|
6010
5985
|
this.setPosition = (e) => {
|
|
@@ -6032,10 +6007,10 @@ class ProfilesMenuComponent {
|
|
|
6032
6007
|
unsetDefault() {
|
|
6033
6008
|
this.stateService.unsetDefaultFromLocalAndStorage(this.$tableId());
|
|
6034
6009
|
}
|
|
6035
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
6036
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0
|
|
6010
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ProfilesMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6011
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", 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 }); }
|
|
6037
6012
|
}
|
|
6038
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
6013
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ProfilesMenuComponent, decorators: [{
|
|
6039
6014
|
type: Component,
|
|
6040
6015
|
args: [{ selector: 'tb-profiles-menu', imports: [MatIcon, MatTooltip, MatIconButton, MatMenuModule, MatButton, MatInput,
|
|
6041
6016
|
MatCheckbox, StopPropagationDirective, MatInputModule, FormsModule
|
|
@@ -6052,7 +6027,7 @@ class SortMenuComponentStore extends ComponentStore {
|
|
|
6052
6027
|
return;
|
|
6053
6028
|
this.tableState.$selectSorted();
|
|
6054
6029
|
untracked(() => this.setStateFromTableStore());
|
|
6055
|
-
},
|
|
6030
|
+
}, ...(ngDevMode ? [{ debugName: "setStoreStateEffect" }] : []));
|
|
6056
6031
|
this.setStateFromTableStore = () => {
|
|
6057
6032
|
const metaData = this.tableState.$metaData();
|
|
6058
6033
|
const sorted = [...this.tableState.$selectSorted()].map(s => ({
|
|
@@ -6078,10 +6053,10 @@ class SortMenuComponentStore extends ComponentStore {
|
|
|
6078
6053
|
this.setStateFromTableStore();
|
|
6079
6054
|
};
|
|
6080
6055
|
}
|
|
6081
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
6082
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0
|
|
6056
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SortMenuComponentStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
6057
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SortMenuComponentStore }); }
|
|
6083
6058
|
}
|
|
6084
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
6059
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SortMenuComponentStore, decorators: [{
|
|
6085
6060
|
type: Injectable
|
|
6086
6061
|
}], ctorParameters: () => [] });
|
|
6087
6062
|
|
|
@@ -6090,9 +6065,9 @@ class SortMenuComponent {
|
|
|
6090
6065
|
this.SortDirection = SortDirection;
|
|
6091
6066
|
this.tableState = inject(TableStore);
|
|
6092
6067
|
this.store = inject(SortMenuComponentStore);
|
|
6093
|
-
this.$sorted = computed(() => [...this.store.$sorted()],
|
|
6094
|
-
this.$notSorted = computed(() => [...this.store.$notSorted()],
|
|
6095
|
-
this.$dirty = signal(false,
|
|
6068
|
+
this.$sorted = computed(() => [...this.store.$sorted()], ...(ngDevMode ? [{ debugName: "$sorted" }] : []));
|
|
6069
|
+
this.$notSorted = computed(() => [...this.store.$notSorted()], ...(ngDevMode ? [{ debugName: "$notSorted" }] : []));
|
|
6070
|
+
this.$dirty = signal(false, ...(ngDevMode ? [{ debugName: "$dirty" }] : []));
|
|
6096
6071
|
this.apply = () => {
|
|
6097
6072
|
this.$dirty.set(false);
|
|
6098
6073
|
this.tableState.setAllSort(this.store.$sorted());
|
|
@@ -6135,10 +6110,10 @@ class SortMenuComponent {
|
|
|
6135
6110
|
this.$dirty.set(true);
|
|
6136
6111
|
this.store.setDirection(sort);
|
|
6137
6112
|
}
|
|
6138
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
6139
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0
|
|
6113
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SortMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6114
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", 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 }); }
|
|
6140
6115
|
}
|
|
6141
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
6116
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SortMenuComponent, decorators: [{
|
|
6142
6117
|
type: Component,
|
|
6143
6118
|
args: [{ selector: 'tb-sort-menu', providers: [SortMenuComponentStore], changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
6144
6119
|
MatTooltipModule, MatButtonModule, MatIconModule, MatMenuModule, StopPropagationDirective, DragDropModule,
|
|
@@ -6156,7 +6131,7 @@ class ResetMenuComponent {
|
|
|
6156
6131
|
return Object.values(this.state.$filters())
|
|
6157
6132
|
.filter(f => (isCustomFilter(f) && f.active) || f.filterValue != undefined)
|
|
6158
6133
|
.length;
|
|
6159
|
-
},
|
|
6134
|
+
}, ...(ngDevMode ? [{ debugName: "$filtersSet" }] : []));
|
|
6160
6135
|
this.$sortSet = computed(() => {
|
|
6161
6136
|
const sorts = this.state.$selectSorted();
|
|
6162
6137
|
if (!sorts.length)
|
|
@@ -6165,14 +6140,14 @@ class ResetMenuComponent {
|
|
|
6165
6140
|
if (!preSorts.length)
|
|
6166
6141
|
return true;
|
|
6167
6142
|
return !sortsAreSame(preSorts, sorts);
|
|
6168
|
-
},
|
|
6169
|
-
this.$groupBySet = computed(() => this.state.$groupByData().length || this.state.$userDefinedNoGroups(),
|
|
6170
|
-
this.$hiddenSet = computed(() => this.state.$hiddenKeys().length,
|
|
6171
|
-
this.$orderSet = computed(() => Object.keys(this.state.$userDefinedOrder()).length,
|
|
6172
|
-
this.$widthsSet = computed(() => Object.keys(this.state.$getUserDefinedWidths()).length,
|
|
6143
|
+
}, ...(ngDevMode ? [{ debugName: "$sortSet" }] : []));
|
|
6144
|
+
this.$groupBySet = computed(() => this.state.$groupByData().length || this.state.$userDefinedNoGroups(), ...(ngDevMode ? [{ debugName: "$groupBySet" }] : []));
|
|
6145
|
+
this.$hiddenSet = computed(() => this.state.$hiddenKeys().length, ...(ngDevMode ? [{ debugName: "$hiddenSet" }] : []));
|
|
6146
|
+
this.$orderSet = computed(() => Object.keys(this.state.$userDefinedOrder()).length, ...(ngDevMode ? [{ debugName: "$orderSet" }] : []));
|
|
6147
|
+
this.$widthsSet = computed(() => Object.keys(this.state.$getUserDefinedWidths()).length, ...(ngDevMode ? [{ debugName: "$widthsSet" }] : []));
|
|
6173
6148
|
this.$rowHeightSet = this.state.$userDefinedRowHeight;
|
|
6174
6149
|
this.headerHeightSet = this.state.$userDefinedHeaderHeight;
|
|
6175
|
-
this.pageSizeSet = computed(() => this.state.$userDefinedPageSize() && this.state.$userDefinedPageSize() !== this.state.selectSignal(s => s.pageSize)(),
|
|
6150
|
+
this.pageSizeSet = computed(() => this.state.$userDefinedPageSize() && this.state.$userDefinedPageSize() !== this.state.selectSignal(s => s.pageSize)(), ...(ngDevMode ? [{ debugName: "pageSizeSet" }] : []));
|
|
6176
6151
|
this.showAllSet = this.state.selectSignal(s => s.userDefined.showAll);
|
|
6177
6152
|
this.$set = computed(() => {
|
|
6178
6153
|
const arr = [];
|
|
@@ -6207,7 +6182,7 @@ class ResetMenuComponent {
|
|
|
6207
6182
|
arr.push('Show All');
|
|
6208
6183
|
}
|
|
6209
6184
|
return arr;
|
|
6210
|
-
},
|
|
6185
|
+
}, ...(ngDevMode ? [{ debugName: "$set" }] : []));
|
|
6211
6186
|
this.resetable = resetable;
|
|
6212
6187
|
}
|
|
6213
6188
|
resetState() {
|
|
@@ -6219,10 +6194,10 @@ class ResetMenuComponent {
|
|
|
6219
6194
|
reset(s) {
|
|
6220
6195
|
this.state.resetPart(s);
|
|
6221
6196
|
}
|
|
6222
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
6223
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0
|
|
6197
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ResetMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6198
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", 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 }); }
|
|
6224
6199
|
}
|
|
6225
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
6200
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ResetMenuComponent, decorators: [{
|
|
6226
6201
|
type: Component,
|
|
6227
6202
|
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"] }]
|
|
6228
6203
|
}], propDecorators: { menu: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatMenu), { isSignal: true }] }], onStateReset$: [{ type: i0.Output, args: ["onStateReset"] }] } });
|
|
@@ -6233,8 +6208,8 @@ class TableHeaderMenuComponent {
|
|
|
6233
6208
|
this.exportToCsvService = inject(ExportToCsvService);
|
|
6234
6209
|
this.tableContainer = inject(TableContainerComponent);
|
|
6235
6210
|
this.state = this.tableContainer.state;
|
|
6236
|
-
this.$rowHeightNum = computed(() => +(this.tableContainer.$genericTable()?.$rowHeight()?.replace('px', '') || 0) || undefined,
|
|
6237
|
-
this.$headerHeightNum = computed(() => +(this.tableContainer.$genericTable()?.$headerHeight()?.replace('px', '') || 0) || undefined,
|
|
6211
|
+
this.$rowHeightNum = computed(() => +(this.tableContainer.$genericTable()?.$rowHeight()?.replace('px', '') || 0) || undefined, ...(ngDevMode ? [{ debugName: "$rowHeightNum" }] : []));
|
|
6212
|
+
this.$headerHeightNum = computed(() => +(this.tableContainer.$genericTable()?.$headerHeight()?.replace('px', '') || 0) || undefined, ...(ngDevMode ? [{ debugName: "$headerHeightNum" }] : []));
|
|
6238
6213
|
}
|
|
6239
6214
|
exportToCsv() {
|
|
6240
6215
|
this.exportToCsvService.exportToCsv(this.tableContainer.$data());
|
|
@@ -6249,10 +6224,10 @@ class TableHeaderMenuComponent {
|
|
|
6249
6224
|
if (v === 'header')
|
|
6250
6225
|
this.state.setUserDefinedHeaderHeight(+element.value);
|
|
6251
6226
|
}
|
|
6252
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
6253
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0
|
|
6227
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TableHeaderMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6228
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", 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 }); }
|
|
6254
6229
|
}
|
|
6255
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
6230
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TableHeaderMenuComponent, decorators: [{
|
|
6256
6231
|
type: Component,
|
|
6257
6232
|
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"] }]
|
|
6258
6233
|
}], propDecorators: { menu: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatMenu), { isSignal: true }] }] } });
|
|
@@ -6280,7 +6255,7 @@ class TableVirtualScrollStrategy {
|
|
|
6280
6255
|
return;
|
|
6281
6256
|
this.updateContent('data length');
|
|
6282
6257
|
});
|
|
6283
|
-
},
|
|
6258
|
+
}, ...(ngDevMode ? [{ debugName: "#onDataLengthChange" }] : []));
|
|
6284
6259
|
this.#onHeaderChange = effect(() => {
|
|
6285
6260
|
const headerHeightChange = this.$headerHeightChange();
|
|
6286
6261
|
untracked(() => {
|
|
@@ -6288,7 +6263,7 @@ class TableVirtualScrollStrategy {
|
|
|
6288
6263
|
return;
|
|
6289
6264
|
this.updateContent('header height');
|
|
6290
6265
|
});
|
|
6291
|
-
},
|
|
6266
|
+
}, ...(ngDevMode ? [{ debugName: "#onHeaderChange" }] : []));
|
|
6292
6267
|
this.#onRowChange = effect(() => {
|
|
6293
6268
|
const rowHeightChange = this.$rowHeightChange();
|
|
6294
6269
|
untracked(() => {
|
|
@@ -6296,8 +6271,8 @@ class TableVirtualScrollStrategy {
|
|
|
6296
6271
|
return;
|
|
6297
6272
|
this.updateContent('row height');
|
|
6298
6273
|
});
|
|
6299
|
-
},
|
|
6300
|
-
this.$currentRange = signal({ start: 0, end: 0 },
|
|
6274
|
+
}, ...(ngDevMode ? [{ debugName: "#onRowChange" }] : []));
|
|
6275
|
+
this.$currentRange = signal({ start: 0, end: 0 }, ...(ngDevMode ? [{ debugName: "$currentRange" }] : []));
|
|
6301
6276
|
this.$rowHeight = scrollContainer.computedRowHeight;
|
|
6302
6277
|
this.$headerHeight = scrollContainer.computedHeaderHeight;
|
|
6303
6278
|
this.viewport = scrollContainer.viewport;
|
|
@@ -6371,7 +6346,7 @@ class VirtualScrollContainer {
|
|
|
6371
6346
|
this.state = inject(TableStore);
|
|
6372
6347
|
this.dataStore = inject(DataStore);
|
|
6373
6348
|
this.viewport = viewChild.required(CdkVirtualScrollViewport);
|
|
6374
|
-
this.genericTable = contentChild(GenericTableComponent,
|
|
6349
|
+
this.genericTable = contentChild(GenericTableComponent, ...(ngDevMode ? [{ debugName: "genericTable" }] : []));
|
|
6375
6350
|
this.tableContainer = inject(TableContainerComponent);
|
|
6376
6351
|
this.defaultOptions = new VirtualScrollOptions();
|
|
6377
6352
|
this.$usePaginator = this.state.selectSignal(s => s.notPersistedTableSettings.usePaginator);
|
|
@@ -6387,8 +6362,8 @@ class VirtualScrollContainer {
|
|
|
6387
6362
|
return this.state.$tableSettings().virtualSettings;
|
|
6388
6363
|
else
|
|
6389
6364
|
return undefined;
|
|
6390
|
-
},
|
|
6391
|
-
this.$optionsSet = computed(() => !!this.$virtualScrollOptions(),
|
|
6365
|
+
}, ...(ngDevMode ? [{ debugName: "$virtualScrollOptions" }] : []));
|
|
6366
|
+
this.$optionsSet = computed(() => !!this.$virtualScrollOptions(), ...(ngDevMode ? [{ debugName: "$optionsSet" }] : []));
|
|
6392
6367
|
this.$dataLength = computed(() => {
|
|
6393
6368
|
const paginated = this.$usePaginator() && !this.$showAll();
|
|
6394
6369
|
const pageSize = this.$pageSize();
|
|
@@ -6397,7 +6372,7 @@ class VirtualScrollContainer {
|
|
|
6397
6372
|
if (paginated)
|
|
6398
6373
|
return Math.min(dataLen - (pageNumber * pageSize), pageSize);
|
|
6399
6374
|
return dataLen;
|
|
6400
|
-
},
|
|
6375
|
+
}, ...(ngDevMode ? [{ debugName: "$dataLength" }] : []));
|
|
6401
6376
|
this.#setViewportEffect = effect(() => {
|
|
6402
6377
|
const viewport = this.viewport();
|
|
6403
6378
|
const options = this.$optionsSet();
|
|
@@ -6406,7 +6381,7 @@ class VirtualScrollContainer {
|
|
|
6406
6381
|
this.setSize(this.viewport().elementRef, 'initial');
|
|
6407
6382
|
}
|
|
6408
6383
|
});
|
|
6409
|
-
},
|
|
6384
|
+
}, ...(ngDevMode ? [{ debugName: "#setViewportEffect" }] : []));
|
|
6410
6385
|
this.#onRenderedRangeEffect = effect(() => {
|
|
6411
6386
|
const renderedRange = this.$renderedRange();
|
|
6412
6387
|
const viewport = this.viewport();
|
|
@@ -6423,7 +6398,7 @@ class VirtualScrollContainer {
|
|
|
6423
6398
|
return;
|
|
6424
6399
|
this.setSize(viewport.elementRef, 'rendered range');
|
|
6425
6400
|
});
|
|
6426
|
-
},
|
|
6401
|
+
}, ...(ngDevMode ? [{ debugName: "#onRenderedRangeEffect" }] : []));
|
|
6427
6402
|
this.resizeHandler = () => {
|
|
6428
6403
|
if (this.viewport() && this.$virtualScrollOptions()?.dynamicHeight) {
|
|
6429
6404
|
this.setSize(this.viewport().elementRef, 'resize');
|
|
@@ -6433,23 +6408,23 @@ class VirtualScrollContainer {
|
|
|
6433
6408
|
const virtualScrollOptions = this.state.$tableSettings().virtualSettings;
|
|
6434
6409
|
const rowHeight = this.state.$userDefinedRowHeight() || virtualScrollOptions?.rowHeight || this.state.$tableSettings().rowHeight || this.defaultOptions.rowHeight;
|
|
6435
6410
|
return parseTbSizeToPixels(rowHeight) || 0;
|
|
6436
|
-
},
|
|
6411
|
+
}, ...(ngDevMode ? [{ debugName: "computedRowHeight" }] : []));
|
|
6437
6412
|
this.computedHeaderHeight = computed(() => {
|
|
6438
6413
|
if (this.state.$tableSettings().hideHeader)
|
|
6439
6414
|
return 0;
|
|
6440
6415
|
const virtualScrollOptions = this.state.$tableSettings().virtualSettings;
|
|
6441
6416
|
const headerHeight = this.state.$userDefinedHeaderHeight() || virtualScrollOptions?.headerHeight || this.state.$tableSettings().headerHeight || this.defaultOptions.headerHeight;
|
|
6442
6417
|
return parseTbSizeToPixels(headerHeight) || 0;
|
|
6443
|
-
},
|
|
6418
|
+
}, ...(ngDevMode ? [{ debugName: "computedHeaderHeight" }] : []));
|
|
6444
6419
|
this.computedFooterHeight = computed(() => {
|
|
6445
6420
|
return parseFloat(this.genericTable()?.$footerHeight()?.replace('px', '') || '0');
|
|
6446
|
-
},
|
|
6421
|
+
}, ...(ngDevMode ? [{ debugName: "computedFooterHeight" }] : []));
|
|
6447
6422
|
this.computedBuffer = computed(() => {
|
|
6448
6423
|
const virtualScrollOptions = this.state.$tableSettings().virtualSettings;
|
|
6449
6424
|
if (!virtualScrollOptions.dynamicalHeightBuffer)
|
|
6450
6425
|
return 0;
|
|
6451
6426
|
return parseTbSizeToPixels(virtualScrollOptions.dynamicalHeightBuffer) || 0;
|
|
6452
|
-
},
|
|
6427
|
+
}, ...(ngDevMode ? [{ debugName: "computedBuffer" }] : []));
|
|
6453
6428
|
this.scrollStrategy = new TableVirtualScrollStrategy(this, this.dataStore);
|
|
6454
6429
|
addEventListener('resize', this.resizeHandler);
|
|
6455
6430
|
}
|
|
@@ -6515,8 +6490,8 @@ class VirtualScrollContainer {
|
|
|
6515
6490
|
const virtualScrollOffset = this.viewport()?.getOffsetToRenderedContentStart() ?? 0;
|
|
6516
6491
|
this.dataStore.patchState({ virtualScrollOffset });
|
|
6517
6492
|
}
|
|
6518
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
6519
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0
|
|
6493
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: VirtualScrollContainer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6494
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.0", 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: `
|
|
6520
6495
|
<cdk-virtual-scroll-viewport>
|
|
6521
6496
|
<ng-content/>
|
|
6522
6497
|
</cdk-virtual-scroll-viewport>
|
|
@@ -6528,7 +6503,7 @@ class VirtualScrollContainer {
|
|
|
6528
6503
|
},
|
|
6529
6504
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6530
6505
|
}
|
|
6531
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
6506
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: VirtualScrollContainer, decorators: [{
|
|
6532
6507
|
type: Component,
|
|
6533
6508
|
args: [{
|
|
6534
6509
|
selector: 'tb-virtual-scroll-container',
|
|
@@ -6562,13 +6537,13 @@ class TableContainerComponent {
|
|
|
6562
6537
|
this.dataSource = new TableBuilderDataSource(this.state, this.dataStore);
|
|
6563
6538
|
this.$filterDirectives = contentChildren(TableFilterDirective, { ...(ngDevMode ? { debugName: "$filterDirectives" } : {}), descendants: true });
|
|
6564
6539
|
this.$customFilterDirectives = contentChildren(TableCustomFilterDirective, { ...(ngDevMode ? { debugName: "$customFilterDirectives" } : {}), descendants: true });
|
|
6565
|
-
this.$paginatorComponent = viewChild(PaginatorComponent,
|
|
6566
|
-
this.$paginatorWrapper = viewChild('paginatorWrapper',
|
|
6567
|
-
this.$genericTable = viewChild(GenericTableComponent,
|
|
6568
|
-
this._$customRows = contentChildren((MatRowDef),
|
|
6569
|
-
this.$customRows = computed(() => [...this._$customRows()],
|
|
6570
|
-
this.$customCells = contentChildren(CustomCellDirective,
|
|
6571
|
-
this.$customGroupRows = contentChildren(CustomGroupRowDirective,
|
|
6540
|
+
this.$paginatorComponent = viewChild(PaginatorComponent, ...(ngDevMode ? [{ debugName: "$paginatorComponent" }] : []));
|
|
6541
|
+
this.$paginatorWrapper = viewChild('paginatorWrapper', ...(ngDevMode ? [{ debugName: "$paginatorWrapper" }] : []));
|
|
6542
|
+
this.$genericTable = viewChild(GenericTableComponent, ...(ngDevMode ? [{ debugName: "$genericTable" }] : []));
|
|
6543
|
+
this._$customRows = contentChildren((MatRowDef), ...(ngDevMode ? [{ debugName: "_$customRows" }] : []));
|
|
6544
|
+
this.$customRows = computed(() => [...this._$customRows()], ...(ngDevMode ? [{ debugName: "$customRows" }] : []));
|
|
6545
|
+
this.$customCells = contentChildren(CustomCellDirective, ...(ngDevMode ? [{ debugName: "$customCells" }] : []));
|
|
6546
|
+
this.$customGroupRows = contentChildren(CustomGroupRowDirective, ...(ngDevMode ? [{ debugName: "$customGroupRows" }] : []));
|
|
6572
6547
|
this.$menu = viewChild.required(MatMenu);
|
|
6573
6548
|
this.menuInjector = Injector.create({
|
|
6574
6549
|
providers: [{ provide: MatMenu, useFactory: () => this.$menu() }],
|
|
@@ -6578,7 +6553,7 @@ class TableContainerComponent {
|
|
|
6578
6553
|
this.$tableIdInput = input(undefined, { ...(ngDevMode ? { debugName: "$tableIdInput" } : {}), alias: 'tableId' });
|
|
6579
6554
|
this.$trackByInput = input(undefined, { ...(ngDevMode ? { debugName: "$trackByInput" } : {}), alias: 'trackBy' });
|
|
6580
6555
|
this.$inputFilters = input([], { ...(ngDevMode ? { debugName: "$inputFilters" } : {}), alias: 'inputFilters' });
|
|
6581
|
-
this.$filterInfoInputs = computed(() => this.$inputFilters().filter(i => !isFunction(i)),
|
|
6556
|
+
this.$filterInfoInputs = computed(() => this.$inputFilters().filter(i => !isFunction(i)), ...(ngDevMode ? [{ debugName: "$filterInfoInputs" }] : []));
|
|
6582
6557
|
this.$indexColumnInput = input(false, { ...(ngDevMode ? { debugName: "$indexColumnInput" } : {}), alias: 'indexColumn' });
|
|
6583
6558
|
this.$selectionColumnInput = input(false, { ...(ngDevMode ? { debugName: "$selectionColumnInput" } : {}), alias: 'selectionColumn' });
|
|
6584
6559
|
this.$stickyHeaderInput = input(true, { ...(ngDevMode ? { debugName: "$stickyHeaderInput" } : {}), alias: 'stickyHeader' });
|
|
@@ -6591,14 +6566,14 @@ class TableContainerComponent {
|
|
|
6591
6566
|
this.onStateReset$ = output({ alias: 'onStateReset' });
|
|
6592
6567
|
this.onSaveState$ = output({ alias: 'onSaveState' });
|
|
6593
6568
|
this.state$ = outputFromObservable(toObservable(this.state.$savableState), { alias: 'state' });
|
|
6594
|
-
this.$data = computed(() => this.$sortedAndFilteredData()?.value || [],
|
|
6569
|
+
this.$data = computed(() => this.$sortedAndFilteredData()?.value || [], ...(ngDevMode ? [{ debugName: "$data" }] : []));
|
|
6595
6570
|
this.data$ = outputFromObservable(toObservable(this.$data), { alias: 'data' });
|
|
6596
6571
|
/**
|
|
6597
6572
|
* Will be different than $data if grouping is applied
|
|
6598
6573
|
*/
|
|
6599
|
-
this.$sortedAndFilteredAndGroupedData = computed(() => this.$filteredSortedAndGrouped()?.displayData || [],
|
|
6574
|
+
this.$sortedAndFilteredAndGroupedData = computed(() => this.$filteredSortedAndGrouped()?.displayData || [], ...(ngDevMode ? [{ debugName: "$sortedAndFilteredAndGroupedData" }] : []));
|
|
6600
6575
|
this.sortedAndFilteredAndGroupedData$ = outputFromObservable(toObservable(this.$sortedAndFilteredAndGroupedData), { alias: 'sortedAndFilteredAndGroupedData' });
|
|
6601
|
-
this.$displayData = computed(() => this.$tableBuilder() && this.$filteredSortedAndGrouped()?.displayData,
|
|
6576
|
+
this.$displayData = computed(() => this.$tableBuilder() && this.$filteredSortedAndGrouped()?.displayData, ...(ngDevMode ? [{ debugName: "$displayData" }] : []));
|
|
6602
6577
|
this.expandAllGroups = () => {
|
|
6603
6578
|
const groupHeaders = getAllGroupHeaderNames(this.$displayData());
|
|
6604
6579
|
this.state.expandOfGroup(groupHeaders.map(g => ({ groupKey: g.groupKey, uniqueNameOfHeadersToExpand: g.headers })));
|
|
@@ -6614,23 +6589,23 @@ class TableContainerComponent {
|
|
|
6614
6589
|
metaData,
|
|
6615
6590
|
customCell: this.$customCells().filter(cc => cc.$inited()).find(cc => cc.$customCell() === metaData.key)
|
|
6616
6591
|
}));
|
|
6617
|
-
},
|
|
6592
|
+
}, ...(ngDevMode ? [{ debugName: "$myColumns" }] : []));
|
|
6618
6593
|
this.$useVirtual = this.state.$isVirtual;
|
|
6619
6594
|
this.$collapsedFooter = this.state.$footerCollapsed;
|
|
6620
6595
|
this.$collapsedHeader = this.state.$headerCollapsed;
|
|
6621
|
-
this.$displayDataLength = computed(() => this.$displayData()?.length || 0,
|
|
6622
|
-
this.$tableBuilderSettings = computed(() => this.$tableBuilder().$settings(),
|
|
6623
|
-
this.$trackBy = computed(() => this.$trackByInput() || this.$tableBuilderSettings()?.tableSettings?.trackBy,
|
|
6624
|
-
this.$tableId = computed(() => this.$tableIdInput() || this.$tableBuilderSettings()?.tableSettings?.tableId,
|
|
6625
|
-
this.$includeSelectionColumn = computed(() => this.$selectionColumnInput() || !!this.$tableBuilderSettings()?.tableSettings?.includeSelectionColumn,
|
|
6626
|
-
this.$includeIndexColumn = computed(() => this.$indexColumnInput() || !!this.$tableBuilderSettings()?.tableSettings?.includeIndexColumn,
|
|
6596
|
+
this.$displayDataLength = computed(() => this.$displayData()?.length || 0, ...(ngDevMode ? [{ debugName: "$displayDataLength" }] : []));
|
|
6597
|
+
this.$tableBuilderSettings = computed(() => this.$tableBuilder().$settings(), ...(ngDevMode ? [{ debugName: "$tableBuilderSettings" }] : []));
|
|
6598
|
+
this.$trackBy = computed(() => this.$trackByInput() || this.$tableBuilderSettings()?.tableSettings?.trackBy, ...(ngDevMode ? [{ debugName: "$trackBy" }] : []));
|
|
6599
|
+
this.$tableId = computed(() => this.$tableIdInput() || this.$tableBuilderSettings()?.tableSettings?.tableId, ...(ngDevMode ? [{ debugName: "$tableId" }] : []));
|
|
6600
|
+
this.$includeSelectionColumn = computed(() => this.$selectionColumnInput() || !!this.$tableBuilderSettings()?.tableSettings?.includeSelectionColumn, ...(ngDevMode ? [{ debugName: "$includeSelectionColumn" }] : []));
|
|
6601
|
+
this.$includeIndexColumn = computed(() => this.$indexColumnInput() || !!this.$tableBuilderSettings()?.tableSettings?.includeIndexColumn, ...(ngDevMode ? [{ debugName: "$includeIndexColumn" }] : []));
|
|
6627
6602
|
this.$stickyHeader = computed(() => {
|
|
6628
6603
|
const settings = this.$tableBuilderSettings()?.columnHeaderSettings?.stickyHeaderRow;
|
|
6629
6604
|
if (settings != null) {
|
|
6630
6605
|
return settings;
|
|
6631
6606
|
}
|
|
6632
6607
|
return this.$stickyHeaderInput();
|
|
6633
|
-
},
|
|
6608
|
+
}, ...(ngDevMode ? [{ debugName: "$stickyHeader" }] : []));
|
|
6634
6609
|
this.$stickyFooter = computed(() => {
|
|
6635
6610
|
if (this.$stickyFooterInput() != null) {
|
|
6636
6611
|
return !!this.$stickyFooterInput();
|
|
@@ -6639,7 +6614,7 @@ class TableContainerComponent {
|
|
|
6639
6614
|
return !!this.$tableBuilderSettings()?.columnFooterSettings?.stickyFooterRow;
|
|
6640
6615
|
}
|
|
6641
6616
|
return this.config.defaultTableSettings?.columnFooterSettings?.stickyFooterRow || false;
|
|
6642
|
-
},
|
|
6617
|
+
}, ...(ngDevMode ? [{ debugName: "$stickyFooter" }] : []));
|
|
6643
6618
|
this.$props = computed(() => {
|
|
6644
6619
|
const indexColumn = this.$includeIndexColumn();
|
|
6645
6620
|
const selectionColumn = this.$includeSelectionColumn();
|
|
@@ -6649,7 +6624,7 @@ class TableContainerComponent {
|
|
|
6649
6624
|
const groupHeaderHeight = this.$groupHeaderHeight();
|
|
6650
6625
|
const customGroupRows = this.$customGroupRows().filter(cgr => cgr.$inited());
|
|
6651
6626
|
return ({ indexColumn, selectionColumn, isSticky: stickHeader, stickyFooter, groupHeaderTemplate, groupHeaderHeight, customGroupRows });
|
|
6652
|
-
},
|
|
6627
|
+
}, ...(ngDevMode ? [{ debugName: "$props" }] : []));
|
|
6653
6628
|
this.#initTableBuilder = effect(() => {
|
|
6654
6629
|
const tb = this.$tableBuilder();
|
|
6655
6630
|
untracked(() => {
|
|
@@ -6658,7 +6633,7 @@ class TableContainerComponent {
|
|
|
6658
6633
|
tb._container.set(this);
|
|
6659
6634
|
}
|
|
6660
6635
|
});
|
|
6661
|
-
},
|
|
6636
|
+
}, ...(ngDevMode ? [{ debugName: "#initTableBuilder" }] : []));
|
|
6662
6637
|
this.#initializeTableSettingsFromTableBuilderAndPersistedStateEffect = effect(() => {
|
|
6663
6638
|
const metaLoaded = this.$isInitializationState(InitializationState.MetaDataLoaded)();
|
|
6664
6639
|
if (!metaLoaded)
|
|
@@ -6673,14 +6648,14 @@ class TableContainerComponent {
|
|
|
6673
6648
|
}
|
|
6674
6649
|
this.state.setInitializationState(InitializationState.Ready);
|
|
6675
6650
|
});
|
|
6676
|
-
},
|
|
6651
|
+
}, ...(ngDevMode ? [{ debugName: "#initializeTableSettingsFromTableBuilderAndPersistedStateEffect" }] : []));
|
|
6677
6652
|
this.#setPageSizeFromInputEffect = effect(() => {
|
|
6678
6653
|
const pageSize = this.$pageSize();
|
|
6679
6654
|
const userDefinedPageSize = this.state.$userDefinedPageSize();
|
|
6680
6655
|
if (pageSize && !userDefinedPageSize) {
|
|
6681
6656
|
untracked(() => this.state.setPageSize(pageSize));
|
|
6682
6657
|
}
|
|
6683
|
-
},
|
|
6658
|
+
}, ...(ngDevMode ? [{ debugName: "#setPageSizeFromInputEffect" }] : []));
|
|
6684
6659
|
this.#patchedFilters = [];
|
|
6685
6660
|
this.#patchSavableFilterDirectivesFromPersistedStateEffect = effect(() => {
|
|
6686
6661
|
const loaded = this.$isInitializationState(InitializationState.TableSettingsLoaded)();
|
|
@@ -6696,7 +6671,7 @@ class TableContainerComponent {
|
|
|
6696
6671
|
this.state.addFilter(f.filter$);
|
|
6697
6672
|
});
|
|
6698
6673
|
});
|
|
6699
|
-
},
|
|
6674
|
+
}, ...(ngDevMode ? [{ debugName: "#patchSavableFilterDirectivesFromPersistedStateEffect" }] : []));
|
|
6700
6675
|
this.#patchSavableFilterInputsFromPersistedStateEffect = effect(() => {
|
|
6701
6676
|
const loaded = this.$isInitializationState(InitializationState.TableSettingsLoaded)();
|
|
6702
6677
|
const inputFilters = this.$filterInfoInputs();
|
|
@@ -6717,11 +6692,11 @@ class TableContainerComponent {
|
|
|
6717
6692
|
this.#patchedFilters.push(f.filterId);
|
|
6718
6693
|
});
|
|
6719
6694
|
});
|
|
6720
|
-
},
|
|
6695
|
+
}, ...(ngDevMode ? [{ debugName: "#patchSavableFilterInputsFromPersistedStateEffect" }] : []));
|
|
6721
6696
|
this.#addPropsToStoreFromInputsEffect = effect(() => {
|
|
6722
6697
|
const props = this.$props();
|
|
6723
6698
|
untracked(() => this.state.setProps(props));
|
|
6724
|
-
},
|
|
6699
|
+
}, ...(ngDevMode ? [{ debugName: "#addPropsToStoreFromInputsEffect" }] : []));
|
|
6725
6700
|
this.#addMetaDataToStoreEffect = effect(() => {
|
|
6726
6701
|
const allMetaDatas = this.$allMetaDatas();
|
|
6727
6702
|
if (!allMetaDatas)
|
|
@@ -6730,7 +6705,7 @@ class TableContainerComponent {
|
|
|
6730
6705
|
this.state.setMetaData(allMetaDatas);
|
|
6731
6706
|
this.state.setLinkMaps(createLinkCreatorDict(allMetaDatas));
|
|
6732
6707
|
});
|
|
6733
|
-
},
|
|
6708
|
+
}, ...(ngDevMode ? [{ debugName: "#addMetaDataToStoreEffect" }] : []));
|
|
6734
6709
|
this.#setFilteredDataLengthEffect = effect(() => {
|
|
6735
6710
|
const tableBuilder = this.$tableBuilder();
|
|
6736
6711
|
const data = this.$sortedAndFilteredData();
|
|
@@ -6739,7 +6714,7 @@ class TableContainerComponent {
|
|
|
6739
6714
|
untracked(() => {
|
|
6740
6715
|
this.dataStore.patchState({ sortedFilteredDataLength: data.value.length });
|
|
6741
6716
|
});
|
|
6742
|
-
},
|
|
6717
|
+
}, ...(ngDevMode ? [{ debugName: "#setFilteredDataLengthEffect" }] : []));
|
|
6743
6718
|
this.#setDataSourceDataEffect = effect(() => {
|
|
6744
6719
|
const tableBuilder = this.$tableBuilder();
|
|
6745
6720
|
const flat = this.$filteredSortedAndGrouped();
|
|
@@ -6750,7 +6725,7 @@ class TableContainerComponent {
|
|
|
6750
6725
|
this.dataSource.setData(data);
|
|
6751
6726
|
this.dataStore.patchState({ sortedFilteredGroupedDataLength: data.length });
|
|
6752
6727
|
});
|
|
6753
|
-
},
|
|
6728
|
+
}, ...(ngDevMode ? [{ debugName: "#setDataSourceDataEffect" }] : []));
|
|
6754
6729
|
this.#destroyRef = inject(DestroyRef).onDestroy(() => {
|
|
6755
6730
|
const tableId = this.$tableId();
|
|
6756
6731
|
if (tableId) {
|
|
@@ -6763,14 +6738,14 @@ class TableContainerComponent {
|
|
|
6763
6738
|
return this.stateService.$selectLocalTableStateForView(tableId)();
|
|
6764
6739
|
}
|
|
6765
6740
|
return undefined;
|
|
6766
|
-
},
|
|
6741
|
+
}, ...(ngDevMode ? [{ debugName: "$persistedState" }] : []));
|
|
6767
6742
|
this.$allFilterDirectives = computed(() => {
|
|
6768
6743
|
if (this.wrapper) {
|
|
6769
6744
|
return [...this.$filterDirectives(), ...this.$customFilterDirectives(), ...this.wrapper.$registrations()];
|
|
6770
6745
|
}
|
|
6771
6746
|
return [...this.$filterDirectives(), ...this.$customFilterDirectives()];
|
|
6772
|
-
},
|
|
6773
|
-
this.$tableBuilderMetaData = computed(() => this.$tableBuilder()?.$metaData(),
|
|
6747
|
+
}, ...(ngDevMode ? [{ debugName: "$allFilterDirectives" }] : []));
|
|
6748
|
+
this.$tableBuilderMetaData = computed(() => this.$tableBuilder()?.$metaData(), ...(ngDevMode ? [{ debugName: "$tableBuilderMetaData" }] : []));
|
|
6774
6749
|
this.$allMetaDatas = computed(() => {
|
|
6775
6750
|
const tableBuilderMetaData = this.$tableBuilderMetaData();
|
|
6776
6751
|
if (!tableBuilderMetaData)
|
|
@@ -6778,7 +6753,7 @@ class TableContainerComponent {
|
|
|
6778
6753
|
const customCellMetaDatas = this.$customCells().filter(cc => cc.$inited()).map(cc => cc.$metaData()).filter(d => !!d);
|
|
6779
6754
|
const mappedCustomCellMetaDatas = customCellMetaDatas.map(md => mergeCustomCellMetaData(md, tableBuilderMetaData.find(item => item.key === md.key)));
|
|
6780
6755
|
return [...tableBuilderMetaData, ...mappedCustomCellMetaDatas];
|
|
6781
|
-
},
|
|
6756
|
+
}, ...(ngDevMode ? [{ debugName: "$allMetaDatas" }] : []));
|
|
6782
6757
|
this.$allMetaDataTimeStamped = linkedSignal({ ...(ngDevMode ? { debugName: "$allMetaDataTimeStamped" } : {}), source: this.$allMetaDatas,
|
|
6783
6758
|
computation: (curr, previous) => {
|
|
6784
6759
|
return { timestamp: Date.now(), value: curr || [], previous: previous?.value.value || [] };
|
|
@@ -6793,7 +6768,7 @@ class TableContainerComponent {
|
|
|
6793
6768
|
const mapped = buildInAllValuesFilter(this.config, allMeta.previous, allMeta.value, data.value, allMeta.timestamp, data.timestamp, currentAll);
|
|
6794
6769
|
this.state.patchState({ allFilters: mapped });
|
|
6795
6770
|
});
|
|
6796
|
-
},
|
|
6771
|
+
}, ...(ngDevMode ? [{ debugName: "#setUpAllValuesFilters" }] : []));
|
|
6797
6772
|
this.$preds = computed(() => {
|
|
6798
6773
|
const predicateInputFilters = this.$inputFilters().filter(isFunction);
|
|
6799
6774
|
const notSavableFilterDirectives = this.$allFilterDirectives()
|
|
@@ -6802,7 +6777,7 @@ class TableContainerComponent {
|
|
|
6802
6777
|
.filter(d => !!d && needsFilterCreation(d))
|
|
6803
6778
|
.map(d => createFilterFunc(d));
|
|
6804
6779
|
return [...predicateInputFilters, ...notSavableFilterDirectives];
|
|
6805
|
-
},
|
|
6780
|
+
}, ...(ngDevMode ? [{ debugName: "$preds" }] : []));
|
|
6806
6781
|
this.$predicateFiltersState = linkedSignal({ ...(ngDevMode ? { debugName: "$predicateFiltersState" } : {}), source: this.$preds,
|
|
6807
6782
|
computation: (curr, previous) => {
|
|
6808
6783
|
if (!previous?.value)
|
|
@@ -6819,7 +6794,7 @@ class TableContainerComponent {
|
|
|
6819
6794
|
if (!this.$isInitializationState(InitializationState.Ready)())
|
|
6820
6795
|
return undefined;
|
|
6821
6796
|
return ({ value: updateFilterState(this.$savableFiltersState(), this.$predicateFiltersState()), timestamp: Date.now() });
|
|
6822
|
-
},
|
|
6797
|
+
}, ...(ngDevMode ? [{ debugName: "$allFilterStatesTimeStamped" }] : []));
|
|
6823
6798
|
this.$sortStateTimeStamped = linkedSignal({ ...(ngDevMode ? { debugName: "$sortStateTimeStamped" } : {}), source: computed(() => this.$isInitializationState(InitializationState.Ready)() && this.state.$getSorts()),
|
|
6824
6799
|
computation: (curr, prev) => {
|
|
6825
6800
|
if (!curr)
|
|
@@ -6828,7 +6803,7 @@ class TableContainerComponent {
|
|
|
6828
6803
|
return ({ value: updateSortState(initialSortState, curr), timestamp: Date.now() });
|
|
6829
6804
|
return ({ value: updateSortState(prev.value.value, curr), timestamp: Date.now() });
|
|
6830
6805
|
} });
|
|
6831
|
-
this.$allData = computed(() => (this.$tableBuilder()?.$initialized() && this.$tableBuilder()?.$data()) || [],
|
|
6806
|
+
this.$allData = computed(() => (this.$tableBuilder()?.$initialized() && this.$tableBuilder()?.$data()) || [], ...(ngDevMode ? [{ debugName: "$allData" }] : []));
|
|
6832
6807
|
this.$allDataTimeStamped = computed(() => {
|
|
6833
6808
|
const data = this.$allData();
|
|
6834
6809
|
if (!data)
|
|
@@ -6837,7 +6812,7 @@ class TableContainerComponent {
|
|
|
6837
6812
|
value: data,
|
|
6838
6813
|
timestamp: Date.now()
|
|
6839
6814
|
});
|
|
6840
|
-
},
|
|
6815
|
+
}, ...(ngDevMode ? [{ debugName: "$allDataTimeStamped" }] : []));
|
|
6841
6816
|
this.$allTimeStamped = computed(() => {
|
|
6842
6817
|
const data = this.$allDataTimeStamped();
|
|
6843
6818
|
const sort = this.$sortStateTimeStamped();
|
|
@@ -6849,7 +6824,7 @@ class TableContainerComponent {
|
|
|
6849
6824
|
sort,
|
|
6850
6825
|
filter
|
|
6851
6826
|
});
|
|
6852
|
-
},
|
|
6827
|
+
}, ...(ngDevMode ? [{ debugName: "$allTimeStamped" }] : []));
|
|
6853
6828
|
this.$sortedAndFilteredData = linkedSignal({ ...(ngDevMode ? { debugName: "$sortedAndFilteredData" } : {}), source: this.$allTimeStamped,
|
|
6854
6829
|
computation: (values, prev) => {
|
|
6855
6830
|
const init = this.$isInitializationState(InitializationState.Ready);
|
|
@@ -6860,9 +6835,9 @@ class TableContainerComponent {
|
|
|
6860
6835
|
const filteredData = sortAndFilterData(data, filter, sort, !prev?.value, val);
|
|
6861
6836
|
return ({ value: filteredData, timestamp: Date.now() });
|
|
6862
6837
|
} });
|
|
6863
|
-
this.$timestampedGroups = computed(() => ({ value: this.state.$groupByData(), timestamp: Date.now() }),
|
|
6864
|
-
this.$timestampedExpanded = computed(() => ({ value: this.state.$expandGroups(), timestamp: Date.now() }),
|
|
6865
|
-
this.$timestampedGroupSortUpdated = computed(() => ({ value: this.state.$sortedGroupsUpdates(), timestamp: Date.now() }),
|
|
6838
|
+
this.$timestampedGroups = computed(() => ({ value: this.state.$groupByData(), timestamp: Date.now() }), ...(ngDevMode ? [{ debugName: "$timestampedGroups" }] : []));
|
|
6839
|
+
this.$timestampedExpanded = computed(() => ({ value: this.state.$expandGroups(), timestamp: Date.now() }), ...(ngDevMode ? [{ debugName: "$timestampedExpanded" }] : []));
|
|
6840
|
+
this.$timestampedGroupSortUpdated = computed(() => ({ value: this.state.$sortedGroupsUpdates(), timestamp: Date.now() }), ...(ngDevMode ? [{ debugName: "$timestampedGroupSortUpdated" }] : []));
|
|
6866
6841
|
this.$dataAndGroupsTimestamped = computed(() => {
|
|
6867
6842
|
const data = this.$sortedAndFilteredData();
|
|
6868
6843
|
const groups = this.$timestampedGroups();
|
|
@@ -6876,7 +6851,7 @@ class TableContainerComponent {
|
|
|
6876
6851
|
expanded,
|
|
6877
6852
|
groupSorts,
|
|
6878
6853
|
});
|
|
6879
|
-
},
|
|
6854
|
+
}, ...(ngDevMode ? [{ debugName: "$dataAndGroupsTimestamped" }] : []));
|
|
6880
6855
|
this.$filteredSortedAndGrouped = linkedSignal({ ...(ngDevMode ? { debugName: "$filteredSortedAndGrouped" } : {}), source: this.$dataAndGroupsTimestamped,
|
|
6881
6856
|
computation: (curr, prev) => {
|
|
6882
6857
|
if (!curr)
|
|
@@ -6909,10 +6884,10 @@ class TableContainerComponent {
|
|
|
6909
6884
|
#destroyRef;
|
|
6910
6885
|
#setUpAllValuesFilters;
|
|
6911
6886
|
static { this.headerId = 'tb-header-wrapper'; }
|
|
6912
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
6913
|
-
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 }); }
|
|
6887
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TableContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6888
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.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 }); }
|
|
6914
6889
|
}
|
|
6915
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
6890
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TableContainerComponent, decorators: [{
|
|
6916
6891
|
type: Component,
|
|
6917
6892
|
args: [{ selector: 'tb-table-container', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TableStore, ExportToCsvService, WrapperFilterStore, DataStore], imports: [
|
|
6918
6893
|
NgTemplateOutlet,
|
|
@@ -6935,8 +6910,8 @@ class TableBuilderModule {
|
|
|
6935
6910
|
]
|
|
6936
6911
|
};
|
|
6937
6912
|
}
|
|
6938
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
6939
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0
|
|
6913
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TableBuilderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
6914
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.0", ngImport: i0, type: TableBuilderModule, imports: [TableContainerComponent,
|
|
6940
6915
|
CustomCellDirective,
|
|
6941
6916
|
CustomGroupRowDirective,
|
|
6942
6917
|
TableFilterDirective,
|
|
@@ -6947,11 +6922,11 @@ class TableBuilderModule {
|
|
|
6947
6922
|
TableFilterStringContainsDirective,
|
|
6948
6923
|
TableWrapperDirective,
|
|
6949
6924
|
UtilitiesModule] }); }
|
|
6950
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0
|
|
6925
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TableBuilderModule, providers: [
|
|
6951
6926
|
MultiSortDirective,
|
|
6952
6927
|
], imports: [TableContainerComponent, UtilitiesModule] }); }
|
|
6953
6928
|
}
|
|
6954
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
6929
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TableBuilderModule, decorators: [{
|
|
6955
6930
|
type: NgModule,
|
|
6956
6931
|
args: [{
|
|
6957
6932
|
imports: [
|
|
@@ -7008,21 +6983,21 @@ class TableBuilder {
|
|
|
7008
6983
|
this.data = data;
|
|
7009
6984
|
this.metaData = metaData;
|
|
7010
6985
|
this.settings = settings;
|
|
7011
|
-
this._container = signal(undefined,
|
|
6986
|
+
this._container = signal(undefined, ...(ngDevMode ? [{ debugName: "_container" }] : []));
|
|
7012
6987
|
this.container = this._container.asReadonly();
|
|
7013
|
-
this.$metaData = computed(() => this.$initialized() ? this.#$metaData() : undefined,
|
|
7014
|
-
this.$settings = computed(() => this.$initialized() ? this.#$settings() : undefined,
|
|
7015
|
-
this.#$metaNeedsPrep = signal(false,
|
|
7016
|
-
this.#$dataIsObservable = signal(false,
|
|
7017
|
-
this.#$settingsIsObservable = signal(false,
|
|
7018
|
-
this.#$needsPrep = computed(() => this.#$dataIsObservable() || this.#$metaNeedsPrep() || this.#$settingsIsObservable(),
|
|
7019
|
-
this.$initialized = signal(false,
|
|
6988
|
+
this.$metaData = computed(() => this.$initialized() ? this.#$metaData() : undefined, ...(ngDevMode ? [{ debugName: "$metaData" }] : []));
|
|
6989
|
+
this.$settings = computed(() => this.$initialized() ? this.#$settings() : undefined, ...(ngDevMode ? [{ debugName: "$settings" }] : []));
|
|
6990
|
+
this.#$metaNeedsPrep = signal(false, ...(ngDevMode ? [{ debugName: "#$metaNeedsPrep" }] : []));
|
|
6991
|
+
this.#$dataIsObservable = signal(false, ...(ngDevMode ? [{ debugName: "#$dataIsObservable" }] : []));
|
|
6992
|
+
this.#$settingsIsObservable = signal(false, ...(ngDevMode ? [{ debugName: "#$settingsIsObservable" }] : []));
|
|
6993
|
+
this.#$needsPrep = computed(() => this.#$dataIsObservable() || this.#$metaNeedsPrep() || this.#$settingsIsObservable(), ...(ngDevMode ? [{ debugName: "#$needsPrep" }] : []));
|
|
6994
|
+
this.$initialized = signal(false, ...(ngDevMode ? [{ debugName: "$initialized" }] : []));
|
|
7020
6995
|
this.#dataCleaners = computed(() => {
|
|
7021
6996
|
const metaData = this.$metaData();
|
|
7022
6997
|
if (!metaData)
|
|
7023
6998
|
return undefined;
|
|
7024
6999
|
return createDataCleaners(metaData);
|
|
7025
|
-
},
|
|
7000
|
+
}, ...(ngDevMode ? [{ debugName: "#dataCleaners" }] : []));
|
|
7026
7001
|
this.$data = computed(() => {
|
|
7027
7002
|
const data = this.#$data();
|
|
7028
7003
|
const cleaners = this.#dataCleaners();
|
|
@@ -7034,7 +7009,7 @@ class TableBuilder {
|
|
|
7034
7009
|
return cleaned;
|
|
7035
7010
|
});
|
|
7036
7011
|
return cleanedData;
|
|
7037
|
-
},
|
|
7012
|
+
}, ...(ngDevMode ? [{ debugName: "$data" }] : []));
|
|
7038
7013
|
if (isObservable(data)) {
|
|
7039
7014
|
this.#$dataIsObservable.set(true);
|
|
7040
7015
|
}
|
|
@@ -7077,7 +7052,7 @@ class TableBuilder {
|
|
|
7077
7052
|
this.#$metaData = toSignal(this.metaData, { injector, initialValue: [] });
|
|
7078
7053
|
}
|
|
7079
7054
|
else {
|
|
7080
|
-
this.#$metaData = computed(() => this.createMetaData(this.#$data()[0]),
|
|
7055
|
+
this.#$metaData = computed(() => this.createMetaData(this.#$data()[0]), ...(ngDevMode ? [{ debugName: "#$metaData" }] : []));
|
|
7081
7056
|
}
|
|
7082
7057
|
}
|
|
7083
7058
|
this.$initialized.set(true);
|
|
@@ -7137,12 +7112,12 @@ function actionStatusReducer(state = initialState, action) {
|
|
|
7137
7112
|
}
|
|
7138
7113
|
|
|
7139
7114
|
class NgrxExtModule {
|
|
7140
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
7141
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0
|
|
7142
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0
|
|
7115
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgrxExtModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
7116
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.0", ngImport: i0, type: NgrxExtModule, imports: [CommonModule, i1$9.StoreFeatureModule] }); }
|
|
7117
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgrxExtModule, imports: [CommonModule,
|
|
7143
7118
|
StoreModule.forFeature('ActionStatus', actionStatusReducer)] }); }
|
|
7144
7119
|
}
|
|
7145
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
7120
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgrxExtModule, decorators: [{
|
|
7146
7121
|
type: NgModule,
|
|
7147
7122
|
args: [{
|
|
7148
7123
|
declarations: [],
|
|
@@ -7160,10 +7135,10 @@ class ActionStateSpinnerComponent {
|
|
|
7160
7135
|
ngOnInit() {
|
|
7161
7136
|
this.serverActionStatus$ = this.status$.pipe(delayOn(a => a.status === serverStatusTypes.inProgress, 500));
|
|
7162
7137
|
}
|
|
7163
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
7164
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0
|
|
7138
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ActionStateSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7139
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", 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 }); }
|
|
7165
7140
|
}
|
|
7166
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
7141
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ActionStateSpinnerComponent, decorators: [{
|
|
7167
7142
|
type: Component,
|
|
7168
7143
|
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"] }]
|
|
7169
7144
|
}], propDecorators: { status$: [{
|
|
@@ -7171,11 +7146,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
|
|
|
7171
7146
|
}] } });
|
|
7172
7147
|
|
|
7173
7148
|
class ActionStateUiModule {
|
|
7174
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
7175
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0
|
|
7176
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0
|
|
7149
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ActionStateUiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
7150
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.0", ngImport: i0, type: ActionStateUiModule, imports: [ActionStateSpinnerComponent], exports: [ActionStateSpinnerComponent] }); }
|
|
7151
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ActionStateUiModule, imports: [ActionStateSpinnerComponent] }); }
|
|
7177
7152
|
}
|
|
7178
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
7153
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ActionStateUiModule, decorators: [{
|
|
7179
7154
|
type: NgModule,
|
|
7180
7155
|
args: [{
|
|
7181
7156
|
imports: [
|
|
@@ -7231,8 +7206,9 @@ const createActionableResultSelector = (selectorFactory, action, dispatchIf = de
|
|
|
7231
7206
|
};
|
|
7232
7207
|
const createActionResultSelector = (options) => {
|
|
7233
7208
|
const id = crypto.randomUUID();
|
|
7209
|
+
const dispatchCheck = options.dispatchIf || defaultFilter;
|
|
7234
7210
|
const slctr = (...props) => createSelector(options.selectorFactory(...props), (selected) => {
|
|
7235
|
-
const needsDispatch = (
|
|
7211
|
+
const needsDispatch = dispatchCheck(selected);
|
|
7236
7212
|
if (needsDispatch && !_cache.isInCache(id, ...props)) {
|
|
7237
7213
|
queueMicrotask(() => runInInjectionContext(options.injector || _ei, () => {
|
|
7238
7214
|
options.action(...[...props, selected])();
|