@one-paragon/angular-utilities 2.7.6 → 2.7.8
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,14 +1174,32 @@ 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 }] }] } });
|
|
1193
1184
|
|
|
1185
|
+
class CustomHeaderDirective {
|
|
1186
|
+
constructor() {
|
|
1187
|
+
this.templateRef = inject(TemplateRef);
|
|
1188
|
+
this.$customHeader = input.required({ ...(ngDevMode ? { debugName: "$customHeader" } : {}), alias: 'customHeader' });
|
|
1189
|
+
this.$inited = signal(false, ...(ngDevMode ? [{ debugName: "$inited" }] : []));
|
|
1190
|
+
this.template = () => this.templateRef;
|
|
1191
|
+
}
|
|
1192
|
+
ngOnInit() {
|
|
1193
|
+
this.$inited.set(true);
|
|
1194
|
+
}
|
|
1195
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CustomHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1196
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.0", type: CustomHeaderDirective, isStandalone: true, selector: "[customHeader]", inputs: { $customHeader: { classPropertyName: "$customHeader", publicName: "customHeader", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
|
|
1197
|
+
}
|
|
1198
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CustomHeaderDirective, decorators: [{
|
|
1199
|
+
type: Directive,
|
|
1200
|
+
args: [{ selector: '[customHeader]' }]
|
|
1201
|
+
}], propDecorators: { $customHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "customHeader", required: true }] }] } });
|
|
1202
|
+
|
|
1194
1203
|
// Usage examples:
|
|
1195
1204
|
// <!-- Custom group row for all groupings -->
|
|
1196
1205
|
// <div *customGroupRow="let group">
|
|
@@ -1224,11 +1233,11 @@ class CustomGroupRowDirective {
|
|
|
1224
1233
|
* Useful when multiple custom group rows could apply to the same grouping.
|
|
1225
1234
|
*/
|
|
1226
1235
|
this.$priority = input(0, { ...(ngDevMode ? { debugName: "$priority" } : {}), alias: 'customGroupRowPriority' });
|
|
1227
|
-
this.$inited = signal(false,
|
|
1236
|
+
this.$inited = signal(false, ...(ngDevMode ? [{ debugName: "$inited" }] : []));
|
|
1228
1237
|
/**
|
|
1229
1238
|
* Gets the grouping key(s) this directive applies to, or null for all groupings
|
|
1230
1239
|
*/
|
|
1231
|
-
this.$groupingKey = computed(() => this.$customGroupRow(),
|
|
1240
|
+
this.$groupingKey = computed(() => this.$customGroupRow(), ...(ngDevMode ? [{ debugName: "$groupingKey" }] : []));
|
|
1232
1241
|
/**
|
|
1233
1242
|
* Gets the template reference to use
|
|
1234
1243
|
*/
|
|
@@ -1256,10 +1265,10 @@ class CustomGroupRowDirective {
|
|
|
1256
1265
|
}
|
|
1257
1266
|
return targetKey === groupingKey;
|
|
1258
1267
|
}
|
|
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
|
|
1268
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CustomGroupRowDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1269
|
+
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
1270
|
}
|
|
1262
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1271
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CustomGroupRowDirective, decorators: [{
|
|
1263
1272
|
type: Directive,
|
|
1264
1273
|
args: [{ selector: '[customGroupRow]' }]
|
|
1265
1274
|
}], 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 +1339,10 @@ class ResizeColumnDirective {
|
|
|
1330
1339
|
const newTableWidth = (mouseDownData.startTableWidth + columnChange);
|
|
1331
1340
|
return ({ newTableWidth, newColumnWidth });
|
|
1332
1341
|
}
|
|
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
|
|
1342
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ResizeColumnDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1343
|
+
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
1344
|
}
|
|
1336
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1345
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ResizeColumnDirective, decorators: [{
|
|
1337
1346
|
type: Directive,
|
|
1338
1347
|
args: [{
|
|
1339
1348
|
selector: "[resizeColumn]",
|
|
@@ -1347,15 +1356,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
|
|
|
1347
1356
|
|
|
1348
1357
|
class TableWrapperDirective {
|
|
1349
1358
|
constructor() {
|
|
1350
|
-
this.$registrations = signal([],
|
|
1359
|
+
this.$registrations = signal([], ...(ngDevMode ? [{ debugName: "$registrations" }] : []));
|
|
1351
1360
|
}
|
|
1352
1361
|
register(filter) {
|
|
1353
1362
|
this.$registrations.update(registrations => [...registrations, filter]);
|
|
1354
1363
|
}
|
|
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
|
|
1364
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TableWrapperDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1365
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: TableWrapperDirective, isStandalone: true, selector: "[tbWrapper]", ngImport: i0 }); }
|
|
1357
1366
|
}
|
|
1358
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1367
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TableWrapperDirective, decorators: [{
|
|
1359
1368
|
type: Directive,
|
|
1360
1369
|
args: [{
|
|
1361
1370
|
selector: '[tbWrapper]',
|
|
@@ -1398,10 +1407,10 @@ class TableCustomFilterDirective {
|
|
|
1398
1407
|
constructor() {
|
|
1399
1408
|
this.savable = false;
|
|
1400
1409
|
}
|
|
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
|
|
1410
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TableCustomFilterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1411
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: TableCustomFilterDirective, isStandalone: true, selector: "tb-abstract", ngImport: i0 }); }
|
|
1403
1412
|
}
|
|
1404
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1413
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TableCustomFilterDirective, decorators: [{
|
|
1405
1414
|
type: Directive,
|
|
1406
1415
|
args: [{
|
|
1407
1416
|
selector: 'tb-abstract'
|
|
@@ -1473,10 +1482,10 @@ class TableFilterDirective {
|
|
|
1473
1482
|
});
|
|
1474
1483
|
}
|
|
1475
1484
|
}
|
|
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
|
|
1485
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TableFilterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1486
|
+
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
1487
|
}
|
|
1479
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1488
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TableFilterDirective, decorators: [{
|
|
1480
1489
|
type: Directive,
|
|
1481
1490
|
args: [{
|
|
1482
1491
|
selector: "[tbFilter]",
|
|
@@ -1516,10 +1525,10 @@ class TableFilterStringContainsDirective extends TableFilterDirective {
|
|
|
1516
1525
|
}
|
|
1517
1526
|
super.ngOnChanges(changes);
|
|
1518
1527
|
}
|
|
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
|
|
1528
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TableFilterStringContainsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1529
|
+
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
1530
|
}
|
|
1522
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1531
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TableFilterStringContainsDirective, decorators: [{
|
|
1523
1532
|
type: Directive,
|
|
1524
1533
|
args: [{
|
|
1525
1534
|
selector: '[tbFilterStringContains]',
|
|
@@ -1575,10 +1584,10 @@ class TableCustomFilterDirectiveBase extends TableCustomFilterDirective {
|
|
|
1575
1584
|
this.ready = true;
|
|
1576
1585
|
this.filter$.next(this.filter);
|
|
1577
1586
|
}
|
|
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
|
|
1587
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TableCustomFilterDirectiveBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1588
|
+
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
1589
|
}
|
|
1581
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1590
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TableCustomFilterDirectiveBase, decorators: [{
|
|
1582
1591
|
type: Directive,
|
|
1583
1592
|
args: [{
|
|
1584
1593
|
selector: "[tbCustomFilter]",
|
|
@@ -1613,10 +1622,10 @@ class TbSelectedFilterDirective extends TableCustomFilterDirectiveBase {
|
|
|
1613
1622
|
this.active = this.isActive();
|
|
1614
1623
|
});
|
|
1615
1624
|
}
|
|
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
|
|
1625
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TbSelectedFilterDirective, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1626
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: TbSelectedFilterDirective, isStandalone: true, usesInheritance: true, ngImport: i0 }); }
|
|
1618
1627
|
}
|
|
1619
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1628
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TbSelectedFilterDirective, decorators: [{
|
|
1620
1629
|
type: Directive
|
|
1621
1630
|
}], ctorParameters: () => [{ type: i1.Observable }, { type: undefined }] });
|
|
1622
1631
|
// Checkbox
|
|
@@ -1631,10 +1640,10 @@ class MatCheckboxTbFilterDirective extends TbSelectedFilterDirective {
|
|
|
1631
1640
|
this.matCheckbox = inject(MatCheckbox);
|
|
1632
1641
|
this.matCheckbox = matCheckbox;
|
|
1633
1642
|
}
|
|
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
|
|
1643
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatCheckboxTbFilterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1644
|
+
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
1645
|
}
|
|
1637
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1646
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatCheckboxTbFilterDirective, decorators: [{
|
|
1638
1647
|
type: Directive,
|
|
1639
1648
|
args: [{
|
|
1640
1649
|
selector: 'mat-checkbox[tbCustomFilter]',
|
|
@@ -1657,10 +1666,10 @@ class MatSlideToggleTbFilterDirective extends TbSelectedFilterDirective {
|
|
|
1657
1666
|
ngOnInit() {
|
|
1658
1667
|
super.ngOnInit();
|
|
1659
1668
|
}
|
|
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
|
|
1669
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatSlideToggleTbFilterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1670
|
+
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
1671
|
}
|
|
1663
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1672
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatSlideToggleTbFilterDirective, decorators: [{
|
|
1664
1673
|
type: Directive,
|
|
1665
1674
|
args: [{
|
|
1666
1675
|
selector: 'mat-slide-toggle[tbCustomFilter]',
|
|
@@ -1684,10 +1693,10 @@ class MatRadioButtonTbFilterDirective extends TbSelectedFilterDirective {
|
|
|
1684
1693
|
ngOnInit() {
|
|
1685
1694
|
super.ngOnInit();
|
|
1686
1695
|
}
|
|
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
|
|
1696
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatRadioButtonTbFilterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1697
|
+
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
1698
|
}
|
|
1690
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1699
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatRadioButtonTbFilterDirective, decorators: [{
|
|
1691
1700
|
type: Directive,
|
|
1692
1701
|
args: [{
|
|
1693
1702
|
selector: 'mat-radio-button[tbCustomFilter]',
|
|
@@ -1718,10 +1727,10 @@ class MatOptionTbFilterDirective extends TbSelectedFilterDirective {
|
|
|
1718
1727
|
ngOnInit() {
|
|
1719
1728
|
super.ngOnInit();
|
|
1720
1729
|
}
|
|
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
|
|
1730
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatOptionTbFilterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1731
|
+
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
1732
|
}
|
|
1724
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1733
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatOptionTbFilterDirective, decorators: [{
|
|
1725
1734
|
type: Directive,
|
|
1726
1735
|
args: [{
|
|
1727
1736
|
selector: 'mat-option[tbCustomFilter]',
|
|
@@ -1745,10 +1754,10 @@ class MatButtonToggleFilterDirective extends TbSelectedFilterDirective {
|
|
|
1745
1754
|
ngOnInit() {
|
|
1746
1755
|
super.ngOnInit();
|
|
1747
1756
|
}
|
|
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
|
|
1757
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatButtonToggleFilterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1758
|
+
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
1759
|
}
|
|
1751
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1760
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatButtonToggleFilterDirective, decorators: [{
|
|
1752
1761
|
type: Directive,
|
|
1753
1762
|
args: [{
|
|
1754
1763
|
selector: 'mat-button-toggle[tbCustomFilter]',
|
|
@@ -1763,10 +1772,10 @@ class PhoneNumberPipe {
|
|
|
1763
1772
|
transform(phoneNum) {
|
|
1764
1773
|
return phoneFormatter(phoneNum);
|
|
1765
1774
|
}
|
|
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
|
|
1775
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PhoneNumberPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
1776
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.1.0", ngImport: i0, type: PhoneNumberPipe, isStandalone: true, name: "phone" }); }
|
|
1768
1777
|
}
|
|
1769
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1778
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PhoneNumberPipe, decorators: [{
|
|
1770
1779
|
type: Pipe,
|
|
1771
1780
|
args: [{ name: 'phone' }]
|
|
1772
1781
|
}] });
|
|
@@ -1788,10 +1797,10 @@ class SpaceCasePipe {
|
|
|
1788
1797
|
return this.spaceCase(value);
|
|
1789
1798
|
};
|
|
1790
1799
|
}
|
|
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
|
|
1800
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SpaceCasePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
1801
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.1.0", ngImport: i0, type: SpaceCasePipe, isStandalone: true, name: "spaceCase" }); }
|
|
1793
1802
|
}
|
|
1794
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1803
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SpaceCasePipe, decorators: [{
|
|
1795
1804
|
type: Pipe,
|
|
1796
1805
|
args: [{ name: 'spaceCase' }]
|
|
1797
1806
|
}] });
|
|
@@ -1835,10 +1844,10 @@ class PreventEnterDirective {
|
|
|
1835
1844
|
onKeyDown() {
|
|
1836
1845
|
return false;
|
|
1837
1846
|
}
|
|
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
|
|
1847
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PreventEnterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1848
|
+
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
1849
|
}
|
|
1841
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1850
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PreventEnterDirective, decorators: [{
|
|
1842
1851
|
type: Directive,
|
|
1843
1852
|
args: [{
|
|
1844
1853
|
selector: 'preventEnter',
|
|
@@ -1855,10 +1864,10 @@ class StopPropagationDirective {
|
|
|
1855
1864
|
onMousedown(event) {
|
|
1856
1865
|
event.stopPropagation();
|
|
1857
1866
|
}
|
|
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
|
|
1867
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: StopPropagationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1868
|
+
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
1869
|
}
|
|
1861
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1870
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: StopPropagationDirective, decorators: [{
|
|
1862
1871
|
type: Directive,
|
|
1863
1872
|
args: [{
|
|
1864
1873
|
selector: "[stop-propagation]",
|
|
@@ -1883,10 +1892,10 @@ class AutoFocusDirective {
|
|
|
1883
1892
|
});
|
|
1884
1893
|
}
|
|
1885
1894
|
}
|
|
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
|
|
1895
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AutoFocusDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1896
|
+
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
1897
|
}
|
|
1889
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1898
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AutoFocusDirective, decorators: [{
|
|
1890
1899
|
type: Directive,
|
|
1891
1900
|
args: [{
|
|
1892
1901
|
selector: '[autoFocus]',
|
|
@@ -1902,10 +1911,10 @@ class ClickSubjectDirective extends Subject {
|
|
|
1902
1911
|
set clickSubject(val) {
|
|
1903
1912
|
this._val = val;
|
|
1904
1913
|
}
|
|
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
|
|
1914
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ClickSubjectDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1915
|
+
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
1916
|
}
|
|
1908
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1917
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ClickSubjectDirective, decorators: [{
|
|
1909
1918
|
type: Directive,
|
|
1910
1919
|
args: [{
|
|
1911
1920
|
selector: '[clickSubject]',
|
|
@@ -1923,10 +1932,10 @@ class ClickEmitterDirective extends Subject {
|
|
|
1923
1932
|
constructor() {
|
|
1924
1933
|
super();
|
|
1925
1934
|
}
|
|
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
|
|
1935
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ClickEmitterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1936
|
+
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
1937
|
}
|
|
1929
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1938
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ClickEmitterDirective, decorators: [{
|
|
1930
1939
|
type: Directive,
|
|
1931
1940
|
args: [{
|
|
1932
1941
|
selector: '[clickEmitter]',
|
|
@@ -1950,10 +1959,10 @@ class DialogService {
|
|
|
1950
1959
|
closeAllOpDialogs() {
|
|
1951
1960
|
this.allOpenOpDialogs.forEach(ref => ref.close());
|
|
1952
1961
|
}
|
|
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
|
|
1962
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1963
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DialogService, providedIn: 'root' }); }
|
|
1955
1964
|
}
|
|
1956
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1965
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DialogService, decorators: [{
|
|
1957
1966
|
type: Injectable,
|
|
1958
1967
|
args: [{ providedIn: 'root' }]
|
|
1959
1968
|
}] });
|
|
@@ -1980,10 +1989,10 @@ class DialogWrapper {
|
|
|
1980
1989
|
this.viewContext.$implicit = value;
|
|
1981
1990
|
this.viewContext.opDialog = value;
|
|
1982
1991
|
}
|
|
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
|
|
1992
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DialogWrapper, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1993
|
+
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
1994
|
}
|
|
1986
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1995
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DialogWrapper, decorators: [{
|
|
1987
1996
|
type: Component,
|
|
1988
1997
|
args: [{
|
|
1989
1998
|
selector: 'dialog-wrapper',
|
|
@@ -2109,10 +2118,10 @@ class DialogDirective {
|
|
|
2109
2118
|
static ngTemplateContextGuard(dir, ctx) {
|
|
2110
2119
|
return true;
|
|
2111
2120
|
}
|
|
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
|
|
2121
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DialogDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2122
|
+
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
2123
|
}
|
|
2115
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
2124
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DialogDirective, decorators: [{
|
|
2116
2125
|
type: Directive,
|
|
2117
2126
|
args: [{ selector: '[opDialog]', }]
|
|
2118
2127
|
}], propDecorators: { opDialogClosed: [{
|
|
@@ -2133,7 +2142,7 @@ class StylerDirective {
|
|
|
2133
2142
|
constructor() {
|
|
2134
2143
|
this.el = inject(ElementRef);
|
|
2135
2144
|
this.renderer = inject(Renderer2);
|
|
2136
|
-
this.$stylesApplied = signal({},
|
|
2145
|
+
this.$stylesApplied = signal({}, ...(ngDevMode ? [{ debugName: "$stylesApplied" }] : []));
|
|
2137
2146
|
this.$element = input.required({ ...(ngDevMode ? { debugName: "$element" } : {}), alias: 'element' });
|
|
2138
2147
|
this.$styler = input.required({ ...(ngDevMode ? { debugName: "$styler" } : {}), alias: 'styler' });
|
|
2139
2148
|
this.#stylerEffect = effect(() => {
|
|
@@ -2159,13 +2168,13 @@ class StylerDirective {
|
|
|
2159
2168
|
});
|
|
2160
2169
|
this.$stylesApplied.set(toApply);
|
|
2161
2170
|
});
|
|
2162
|
-
},
|
|
2171
|
+
}, ...(ngDevMode ? [{ debugName: "#stylerEffect" }] : []));
|
|
2163
2172
|
}
|
|
2164
2173
|
#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
|
|
2174
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: StylerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2175
|
+
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
2176
|
}
|
|
2168
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
2177
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: StylerDirective, decorators: [{
|
|
2169
2178
|
type: Directive,
|
|
2170
2179
|
args: [{ selector: '[styler]' }]
|
|
2171
2180
|
}], 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 +2218,10 @@ class MatSlideToggleGroupDirective {
|
|
|
2209
2218
|
return newVal;
|
|
2210
2219
|
}, startValue), startWith$1(startValue));
|
|
2211
2220
|
}
|
|
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
|
|
2221
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatSlideToggleGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2222
|
+
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
2223
|
}
|
|
2215
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
2224
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MatSlideToggleGroupDirective, decorators: [{
|
|
2216
2225
|
type: Directive,
|
|
2217
2226
|
args: [{ selector: '[opMatSlideToggleGroup]',
|
|
2218
2227
|
}]
|
|
@@ -2239,10 +2248,10 @@ class TrimWhitespaceDirective {
|
|
|
2239
2248
|
}
|
|
2240
2249
|
}
|
|
2241
2250
|
}
|
|
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
|
|
2251
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TrimWhitespaceDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2252
|
+
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
2253
|
}
|
|
2245
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
2254
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TrimWhitespaceDirective, decorators: [{
|
|
2246
2255
|
type: Directive,
|
|
2247
2256
|
args: [{
|
|
2248
2257
|
selector: 'input[trimWhitespace]',
|
|
@@ -2261,10 +2270,10 @@ class FunctionPipe {
|
|
|
2261
2270
|
}
|
|
2262
2271
|
return func(...args);
|
|
2263
2272
|
}
|
|
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
|
|
2273
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: FunctionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
2274
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.1.0", ngImport: i0, type: FunctionPipe, isStandalone: true, name: "func" }); }
|
|
2266
2275
|
}
|
|
2267
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
2276
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: FunctionPipe, decorators: [{
|
|
2268
2277
|
type: Pipe,
|
|
2269
2278
|
args: [{
|
|
2270
2279
|
name: 'func',
|
|
@@ -2293,13 +2302,13 @@ class ConditionalClassesDirective {
|
|
|
2293
2302
|
classesNotYetApplied.forEach(c => this.renderer.addClass(this.el.nativeElement, c));
|
|
2294
2303
|
this.classesApplied = toApply;
|
|
2295
2304
|
});
|
|
2296
|
-
},
|
|
2305
|
+
}, ...(ngDevMode ? [{ debugName: "#onClasses" }] : []));
|
|
2297
2306
|
}
|
|
2298
2307
|
#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
|
|
2308
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ConditionalClassesDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2309
|
+
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
2310
|
}
|
|
2302
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
2311
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ConditionalClassesDirective, decorators: [{
|
|
2303
2312
|
type: Directive,
|
|
2304
2313
|
args: [{
|
|
2305
2314
|
selector: '[conditionalClasses]',
|
|
@@ -2307,8 +2316,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
|
|
|
2307
2316
|
}], propDecorators: { $element: [{ type: i0.Input, args: [{ isSignal: true, alias: "element", required: true }] }], $classes: [{ type: i0.Input, args: [{ isSignal: true, alias: "conditionalClasses", required: false }] }] } });
|
|
2308
2317
|
|
|
2309
2318
|
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
|
|
2319
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UtilitiesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
2320
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.0", ngImport: i0, type: UtilitiesModule, imports: [SpaceCasePipe,
|
|
2312
2321
|
PhoneNumberPipe,
|
|
2313
2322
|
FunctionPipe,
|
|
2314
2323
|
StopPropagationDirective,
|
|
@@ -2333,11 +2342,11 @@ class UtilitiesModule {
|
|
|
2333
2342
|
DialogDirective,
|
|
2334
2343
|
MatSlideToggleGroupDirective,
|
|
2335
2344
|
ConditionalClassesDirective] }); }
|
|
2336
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0
|
|
2345
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UtilitiesModule, providers: [
|
|
2337
2346
|
DialogService
|
|
2338
2347
|
] }); }
|
|
2339
2348
|
}
|
|
2340
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
2349
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UtilitiesModule, decorators: [{
|
|
2341
2350
|
type: NgModule,
|
|
2342
2351
|
args: [{
|
|
2343
2352
|
exports: [
|
|
@@ -2476,12 +2485,6 @@ function createTransformer(metaData, config, noIcons = false, forItem = false) {
|
|
|
2476
2485
|
return metaData.mapItem(defaultFunc(value));
|
|
2477
2486
|
};
|
|
2478
2487
|
}
|
|
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
2488
|
if (config.transformers && config.transformers[metaData.fieldType]) {
|
|
2486
2489
|
var transformer = config.transformers[metaData.fieldType];
|
|
2487
2490
|
return (value) => transformer(defaultFunc(value));
|
|
@@ -2800,7 +2803,6 @@ const filterTypeFuncMap = {
|
|
|
2800
2803
|
[FieldType.Date]: DateFilterFuncs,
|
|
2801
2804
|
[FieldType.DateTime]: DateTimeFilterFuncs,
|
|
2802
2805
|
[FieldType.Enum]: EnumFilterFuncs,
|
|
2803
|
-
[FieldType.Link]: StringFilterFuncs,
|
|
2804
2806
|
[FieldType.Number]: NumberFilterFuncs,
|
|
2805
2807
|
[FieldType.PhoneNumber]: StringFilterFuncs,
|
|
2806
2808
|
[FieldType.String]: StringFilterFuncs,
|
|
@@ -2940,7 +2942,6 @@ const mergeMeta = (orig, merge) => {
|
|
|
2940
2942
|
width: merge.width ?? orig.width,
|
|
2941
2943
|
noExport: merge.noExport || orig.noExport,
|
|
2942
2944
|
noFilter: merge.noFilter || orig.noFilter,
|
|
2943
|
-
transform: merge.transform ?? orig.transform,
|
|
2944
2945
|
map: merge.map ?? orig.map,
|
|
2945
2946
|
click: merge.click ?? orig.click,
|
|
2946
2947
|
classes: merge.classes ?? orig.classes,
|
|
@@ -2979,7 +2980,7 @@ class TableStore extends ComponentStore {
|
|
|
2979
2980
|
this.$savableState = computed(() => {
|
|
2980
2981
|
const state = this.state();
|
|
2981
2982
|
return mapSaveableState(state);
|
|
2982
|
-
},
|
|
2983
|
+
}, ...(ngDevMode ? [{ debugName: "$savableState" }] : []));
|
|
2983
2984
|
//#region meta order and hidden
|
|
2984
2985
|
this.showColumn = this.updater((state, key) => ({
|
|
2985
2986
|
...state,
|
|
@@ -3075,7 +3076,7 @@ class TableStore extends ComponentStore {
|
|
|
3075
3076
|
};
|
|
3076
3077
|
};
|
|
3077
3078
|
this.$filters = this.selectSignal(state => state.filters);
|
|
3078
|
-
this.$filtersArray = computed(() => Object.values(this.state().filters) || [],
|
|
3079
|
+
this.$filtersArray = computed(() => Object.values(this.state().filters) || [], ...(ngDevMode ? [{ debugName: "$filtersArray" }] : []));
|
|
3079
3080
|
this.filters$ = this.select(state => state.filters);
|
|
3080
3081
|
this.$getFilter = (filterId) => {
|
|
3081
3082
|
return this.selectSignal(this.$filters, filters => filters[filterId]);
|
|
@@ -3098,7 +3099,7 @@ class TableStore extends ComponentStore {
|
|
|
3098
3099
|
sorted: sortArray,
|
|
3099
3100
|
};
|
|
3100
3101
|
});
|
|
3101
|
-
this.$preSort = computed(() => createPreSort(this.$metaData()),
|
|
3102
|
+
this.$preSort = computed(() => createPreSort(this.$metaData()), ...(ngDevMode ? [{ debugName: "$preSort" }] : []));
|
|
3102
3103
|
this._$selectSorted = this.selectSignal(state => state.sorted, {
|
|
3103
3104
|
equal: sortsAreSame
|
|
3104
3105
|
});
|
|
@@ -3110,7 +3111,7 @@ class TableStore extends ComponentStore {
|
|
|
3110
3111
|
const sortBy = sortLogic?.sortBy === 'use map' ? meta.map : sortLogic?.sortBy;
|
|
3111
3112
|
return ({ ...s, ...sortLogic, sortBy });
|
|
3112
3113
|
});
|
|
3113
|
-
},
|
|
3114
|
+
}, ...(ngDevMode ? [{ debugName: "$selectSorted" }] : []));
|
|
3114
3115
|
this.selectSorted$ = this.select(state => state.sorted).pipe(distinctUntilChanged(sortsAreSame));
|
|
3115
3116
|
this.$getSorts = this.selectSignal(() => this.$initializationState() !== InitializationState.Ready ? [] : this.$selectSorted());
|
|
3116
3117
|
this.sort$ = toObservable(this.$getSorts);
|
|
@@ -3406,10 +3407,10 @@ class TableStore extends ComponentStore {
|
|
|
3406
3407
|
};
|
|
3407
3408
|
}
|
|
3408
3409
|
#$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
|
|
3410
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TableStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
3411
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TableStore }); }
|
|
3411
3412
|
}
|
|
3412
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
3413
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TableStore, decorators: [{
|
|
3413
3414
|
type: Injectable
|
|
3414
3415
|
}], ctorParameters: () => [] });
|
|
3415
3416
|
const resetable = [
|
|
@@ -3441,7 +3442,7 @@ class MultiSortDirective extends MatSort {
|
|
|
3441
3442
|
untracked(() => {
|
|
3442
3443
|
this.state.setSort({ key: sortChange.active, direction: sortChange.direction });
|
|
3443
3444
|
});
|
|
3444
|
-
},
|
|
3445
|
+
}, ...(ngDevMode ? [{ debugName: "#onSortChange" }] : []));
|
|
3445
3446
|
this.#onStateSortUpdate = effect(() => {
|
|
3446
3447
|
const rules = this.state.$getSorts();
|
|
3447
3448
|
if (!rules)
|
|
@@ -3456,14 +3457,14 @@ class MultiSortDirective extends MatSort {
|
|
|
3456
3457
|
this.sortChange.emit(topRule);
|
|
3457
3458
|
}
|
|
3458
3459
|
});
|
|
3459
|
-
},
|
|
3460
|
+
}, ...(ngDevMode ? [{ debugName: "#onStateSortUpdate" }] : []));
|
|
3460
3461
|
}
|
|
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
|
|
3462
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MultiSortDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3463
|
+
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
3464
|
{ provide: MatSort, useExisting: MultiSortDirective }
|
|
3464
3465
|
], exportAs: ["multiSort"], usesInheritance: true, ngImport: i0 }); }
|
|
3465
3466
|
}
|
|
3466
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
3467
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MultiSortDirective, decorators: [{
|
|
3467
3468
|
type: Directive,
|
|
3468
3469
|
args: [{
|
|
3469
3470
|
selector: '[multiSort]',
|
|
@@ -3525,14 +3526,14 @@ class InFilterComponent {
|
|
|
3525
3526
|
this.ref.markForCheck();
|
|
3526
3527
|
this.onChange(this.value);
|
|
3527
3528
|
}
|
|
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
|
|
3529
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: InFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3530
|
+
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
3531
|
provide: NG_VALUE_ACCESSOR,
|
|
3531
3532
|
useExisting: InFilterComponent,
|
|
3532
3533
|
multi: true
|
|
3533
3534
|
}], 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
3535
|
}
|
|
3535
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
3536
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: InFilterComponent, decorators: [{
|
|
3536
3537
|
type: Component,
|
|
3537
3538
|
args: [{ selector: 'lib-in-filter', changeDetection: ChangeDetectionStrategy.OnPush, providers: [{
|
|
3538
3539
|
provide: NG_VALUE_ACCESSOR,
|
|
@@ -3548,7 +3549,7 @@ class InListFilterComponent {
|
|
|
3548
3549
|
this.ref = inject(ChangeDetectorRef);
|
|
3549
3550
|
this.tableState = inject(TableStore);
|
|
3550
3551
|
this.$values = input([], { ...(ngDevMode ? { debugName: "$values" } : {}), alias: 'values' });
|
|
3551
|
-
this.#e = effect(() => this.writeValue(this.$values()),
|
|
3552
|
+
this.#e = effect(() => this.writeValue(this.$values()), ...(ngDevMode ? [{ debugName: "#e" }] : []));
|
|
3552
3553
|
this.value = [];
|
|
3553
3554
|
this.FieldType = FieldType;
|
|
3554
3555
|
this.includes = (value, values) => {
|
|
@@ -3557,19 +3558,19 @@ class InListFilterComponent {
|
|
|
3557
3558
|
this.onChange = (_) => { };
|
|
3558
3559
|
this.onTouched = () => { };
|
|
3559
3560
|
this.$key = input.required({ ...(ngDevMode ? { debugName: "$key" } : {}), alias: 'key' });
|
|
3560
|
-
this.$selectedKeys = signal([],
|
|
3561
|
-
this.$metaData = computed(() => this.tableState.$getMetaData(this.$key())(),
|
|
3561
|
+
this.$selectedKeys = signal([], ...(ngDevMode ? [{ debugName: "$selectedKeys" }] : []));
|
|
3562
|
+
this.$metaData = computed(() => this.tableState.$getMetaData(this.$key())(), ...(ngDevMode ? [{ debugName: "$metaData" }] : []));
|
|
3562
3563
|
this.$allValues = computed(() => {
|
|
3563
3564
|
const filterable = this.$metaData()?.additional?.filterOptions?.filterableValues;
|
|
3564
3565
|
return filterable === 'all values' || filterable?.allValues === true;
|
|
3565
|
-
},
|
|
3566
|
+
}, ...(ngDevMode ? [{ debugName: "$allValues" }] : []));
|
|
3566
3567
|
this.$specialBlank = computed(() => {
|
|
3567
3568
|
const specialBlank = this.tableState.selectSignal(s => s.allFilters)()[this.$metaData().key]?.find(k => isBlankValueFilter(k));
|
|
3568
3569
|
if (!specialBlank)
|
|
3569
3570
|
return;
|
|
3570
3571
|
return { key: specialBlank, value: 'BLANK' };
|
|
3571
|
-
},
|
|
3572
|
-
this.$specialBlankSelected = computed(() => this.$selectedKeys().some(k => isBlankValueFilter(k.value)),
|
|
3572
|
+
}, ...(ngDevMode ? [{ debugName: "$specialBlank" }] : []));
|
|
3573
|
+
this.$specialBlankSelected = computed(() => this.$selectedKeys().some(k => isBlankValueFilter(k.value)), ...(ngDevMode ? [{ debugName: "$specialBlankSelected" }] : []));
|
|
3573
3574
|
this.$keyValues = computed(() => {
|
|
3574
3575
|
const metaData = this.$metaData();
|
|
3575
3576
|
if (this.$allValues()) {
|
|
@@ -3582,7 +3583,7 @@ class InListFilterComponent {
|
|
|
3582
3583
|
return Object.entries(metaData.additional.enumMap).map(([key, value]) => ({ key: value, value: +key }));
|
|
3583
3584
|
}
|
|
3584
3585
|
return [];
|
|
3585
|
-
},
|
|
3586
|
+
}, ...(ngDevMode ? [{ debugName: "$keyValues" }] : []));
|
|
3586
3587
|
}
|
|
3587
3588
|
#e;
|
|
3588
3589
|
writeValue(obj) {
|
|
@@ -3615,8 +3616,8 @@ class InListFilterComponent {
|
|
|
3615
3616
|
}
|
|
3616
3617
|
return val.key;
|
|
3617
3618
|
}
|
|
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
|
|
3619
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: InListFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3620
|
+
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
3621
|
provide: NG_VALUE_ACCESSOR,
|
|
3621
3622
|
useExisting: InListFilterComponent,
|
|
3622
3623
|
multi: true
|
|
@@ -3689,7 +3690,7 @@ class InListFilterComponent {
|
|
|
3689
3690
|
}
|
|
3690
3691
|
`, 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
3692
|
}
|
|
3692
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
3693
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: InListFilterComponent, decorators: [{
|
|
3693
3694
|
type: Component,
|
|
3694
3695
|
args: [{ selector: 'tb-in-list-filter', template: `
|
|
3695
3696
|
@if($specialBlank(); as specialBlank)
|
|
@@ -3774,16 +3775,16 @@ class DateFilterComponent {
|
|
|
3774
3775
|
this.$info = input.required({ ...(ngDevMode ? { debugName: "$info" } : {}), alias: 'info' });
|
|
3775
3776
|
this.$currentFilterType = input.required({ ...(ngDevMode ? { debugName: "$currentFilterType" } : {}), alias: 'currentFilterType' });
|
|
3776
3777
|
this.state = inject(TableStore);
|
|
3777
|
-
this.$metaData = computed(() => this.state.$getMetaData(this.$info()?.key)(),
|
|
3778
|
+
this.$metaData = computed(() => this.state.$getMetaData(this.$info()?.key)(), ...(ngDevMode ? [{ debugName: "$metaData" }] : []));
|
|
3778
3779
|
this.$allValuesInMeta = computed(() => {
|
|
3779
3780
|
const filterable = this.$metaData()?.additional?.filterOptions?.filterableValues;
|
|
3780
3781
|
return filterable === 'all values' || filterable?.allValues === true;
|
|
3781
|
-
},
|
|
3782
|
+
}, ...(ngDevMode ? [{ debugName: "$allValuesInMeta" }] : []));
|
|
3782
3783
|
}
|
|
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
|
|
3784
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DateFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3785
|
+
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
3786
|
}
|
|
3786
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
3787
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DateFilterComponent, decorators: [{
|
|
3787
3788
|
type: Component,
|
|
3788
3789
|
args: [{ selector: 'tb-date-filter', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], imports: [
|
|
3789
3790
|
MatInputModule, FormsModule, MatDatepickerModule, InFilterComponent, InListFilterComponent
|
|
@@ -3797,16 +3798,16 @@ class NumberFilterComponent {
|
|
|
3797
3798
|
this.$currentFilterType = input.required({ ...(ngDevMode ? { debugName: "$currentFilterType" } : {}), alias: 'currentFilterType' });
|
|
3798
3799
|
this.$info = input.required({ ...(ngDevMode ? { debugName: "$info" } : {}), alias: 'info' });
|
|
3799
3800
|
this.state = inject(TableStore);
|
|
3800
|
-
this.$metaData = computed(() => this.state.$getMetaData(this.$info()?.key)(),
|
|
3801
|
+
this.$metaData = computed(() => this.state.$getMetaData(this.$info()?.key)(), ...(ngDevMode ? [{ debugName: "$metaData" }] : []));
|
|
3801
3802
|
this.$allValuesInMeta = computed(() => {
|
|
3802
3803
|
const filterable = this.$metaData()?.additional?.filterOptions?.filterableValues;
|
|
3803
3804
|
return filterable === 'all values' || filterable?.allValues === true;
|
|
3804
|
-
},
|
|
3805
|
+
}, ...(ngDevMode ? [{ debugName: "$allValuesInMeta" }] : []));
|
|
3805
3806
|
}
|
|
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
|
|
3807
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NumberFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3808
|
+
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
3809
|
}
|
|
3809
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
3810
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NumberFilterComponent, decorators: [{
|
|
3810
3811
|
type: Component,
|
|
3811
3812
|
args: [{ selector: 'tb-number-filter', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], imports: [
|
|
3812
3813
|
MatInputModule, FormsModule, InFilterComponent, InListFilterComponent
|
|
@@ -3820,16 +3821,16 @@ class DateTimeFilterComponent {
|
|
|
3820
3821
|
this.$info = input.required({ ...(ngDevMode ? { debugName: "$info" } : {}), alias: 'info' });
|
|
3821
3822
|
this.$currentFilterType = input.required({ ...(ngDevMode ? { debugName: "$currentFilterType" } : {}), alias: 'currentFilterType' });
|
|
3822
3823
|
this.state = inject(TableStore);
|
|
3823
|
-
this.$metaData = computed(() => this.state.$getMetaData(this.$info()?.key)(),
|
|
3824
|
+
this.$metaData = computed(() => this.state.$getMetaData(this.$info()?.key)(), ...(ngDevMode ? [{ debugName: "$metaData" }] : []));
|
|
3824
3825
|
this.$allValuesInMeta = computed(() => {
|
|
3825
3826
|
const filterable = this.$metaData()?.additional?.filterOptions?.filterableValues;
|
|
3826
3827
|
return filterable === 'all values' || filterable?.allValues === true;
|
|
3827
|
-
},
|
|
3828
|
+
}, ...(ngDevMode ? [{ debugName: "$allValuesInMeta" }] : []));
|
|
3828
3829
|
}
|
|
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
|
|
3830
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DateTimeFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3831
|
+
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
3832
|
}
|
|
3832
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
3833
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DateTimeFilterComponent, decorators: [{
|
|
3833
3834
|
type: Component,
|
|
3834
3835
|
args: [{ selector: 'tb-date-time-filter', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], imports: [
|
|
3835
3836
|
FormsModule, InFilterComponent, InListFilterComponent
|
|
@@ -3844,18 +3845,18 @@ class FilterComponent {
|
|
|
3844
3845
|
this.FieldType = FieldType;
|
|
3845
3846
|
this.$filter = input.required({ ...(ngDevMode ? { debugName: "$filter" } : {}), alias: 'filter',
|
|
3846
3847
|
transform: (f) => ({ ...f }) });
|
|
3847
|
-
this.$metaData = computed(() => this.state.$getMetaData(this.$filter()?.key)(),
|
|
3848
|
+
this.$metaData = computed(() => this.state.$getMetaData(this.$filter()?.key)(), ...(ngDevMode ? [{ debugName: "$metaData" }] : []));
|
|
3848
3849
|
this.$allValuesInMeta = computed(() => {
|
|
3849
3850
|
const filterable = this.$metaData()?.additional?.filterOptions?.filterableValues;
|
|
3850
3851
|
return filterable === 'all values' || filterable?.allValues === true;
|
|
3851
|
-
},
|
|
3852
|
+
}, ...(ngDevMode ? [{ debugName: "$allValuesInMeta" }] : []));
|
|
3852
3853
|
this.close$ = new Subject();
|
|
3853
3854
|
this.done$ = new Subject();
|
|
3854
3855
|
this.close = outputFromObservable(this.close$);
|
|
3855
3856
|
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],
|
|
3857
|
+
this.$enteredFilterType = signal(undefined, ...(ngDevMode ? [{ debugName: "$enteredFilterType" }] : []));
|
|
3858
|
+
this.$currentFilterType = computed(() => this.$enteredFilterType() || this.$filter()?.filterType, ...(ngDevMode ? [{ debugName: "$currentFilterType" }] : []));
|
|
3859
|
+
this.$availableFilterTypes = computed(() => this.filterTypes[this.$filter()?.fieldType], ...(ngDevMode ? [{ debugName: "$availableFilterTypes" }] : []));
|
|
3859
3860
|
}
|
|
3860
3861
|
onEnter(filter, event) {
|
|
3861
3862
|
event.preventDefault();
|
|
@@ -3868,17 +3869,17 @@ class FilterComponent {
|
|
|
3868
3869
|
this.state.addFilter({ ...filter });
|
|
3869
3870
|
this.done$.next();
|
|
3870
3871
|
}
|
|
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 }); }
|
|
3872
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: FilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3873
|
+
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
3874
|
}
|
|
3874
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
3875
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: FilterComponent, decorators: [{
|
|
3875
3876
|
type: Component,
|
|
3876
3877
|
args: [{ selector: 'tb-filter', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
3877
3878
|
MatCardModule, FormsModule, SpaceCasePipe, MatButtonModule, MatTooltipModule, MatIconModule,
|
|
3878
3879
|
MatInputModule, MatSelectModule, NumberFilterComponent,
|
|
3879
3880
|
DateFilterComponent, DateTimeFilterComponent, MatRadioModule, InFilterComponent, InListFilterComponent,
|
|
3880
3881
|
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.
|
|
3882
|
+
], 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
3883
|
}], 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
3884
|
|
|
3884
3885
|
class GenColDisplayerComponent {
|
|
@@ -3888,7 +3889,7 @@ class GenColDisplayerComponent {
|
|
|
3888
3889
|
key: md.key,
|
|
3889
3890
|
displayName: md.displayName,
|
|
3890
3891
|
isVisible: !this.tableState.$hiddenKeys().includes(md.key)
|
|
3891
|
-
})),
|
|
3892
|
+
})), ...(ngDevMode ? [{ debugName: "$columns" }] : []));
|
|
3892
3893
|
}
|
|
3893
3894
|
reset(displayCols) {
|
|
3894
3895
|
displayCols.forEach(c => c.isVisible = true);
|
|
@@ -3904,10 +3905,10 @@ class GenColDisplayerComponent {
|
|
|
3904
3905
|
emit(displayCols) {
|
|
3905
3906
|
this.tableState.setHiddenColumns(displayCols.map(c => ({ key: c.key, visible: c.isVisible })));
|
|
3906
3907
|
}
|
|
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
|
|
3908
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: GenColDisplayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3909
|
+
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
3910
|
}
|
|
3910
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
3911
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: GenColDisplayerComponent, decorators: [{
|
|
3911
3912
|
type: Component,
|
|
3912
3913
|
args: [{ selector: 'tb-col-displayer', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
3913
3914
|
MatTooltipModule, MatIconModule, MatButtonModule, MatMenuModule, StopPropagationDirective,
|
|
@@ -3917,17 +3918,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
|
|
|
3917
3918
|
|
|
3918
3919
|
class WrapperFilterStore {
|
|
3919
3920
|
constructor() {
|
|
3920
|
-
this.$filters = signal([],
|
|
3921
|
+
this.$filters = signal([], ...(ngDevMode ? [{ debugName: "$filters" }] : []));
|
|
3921
3922
|
this.clearAll = () => this.$filters.set([]);
|
|
3922
3923
|
this.deleteByIndex = (index) => this.$filters.update(filters => filters.toSpliced(index, 1));
|
|
3923
3924
|
this.addFilter = (filter) => {
|
|
3924
3925
|
this.$filters.update(filters => [...filters, filter]);
|
|
3925
3926
|
};
|
|
3926
3927
|
}
|
|
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
|
|
3928
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: WrapperFilterStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
3929
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: WrapperFilterStore }); }
|
|
3929
3930
|
}
|
|
3930
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
3931
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: WrapperFilterStore, decorators: [{
|
|
3931
3932
|
type: Injectable
|
|
3932
3933
|
}] });
|
|
3933
3934
|
|
|
@@ -3938,7 +3939,7 @@ class GenFilterDisplayerComponent {
|
|
|
3938
3939
|
this.$filterCols = computed(() => {
|
|
3939
3940
|
const mds = this.tableState.$metaDataArray();
|
|
3940
3941
|
return mds.filter(m => m.fieldType !== FieldType.Hidden && (m.fieldType !== FieldType.NotMapped || m.filterLogic?.filterBy) && !m.noFilter);
|
|
3941
|
-
},
|
|
3942
|
+
}, ...(ngDevMode ? [{ debugName: "$filterCols" }] : []));
|
|
3942
3943
|
}
|
|
3943
3944
|
addFilter(metaData) {
|
|
3944
3945
|
this.filterStore.addFilter({
|
|
@@ -3946,10 +3947,10 @@ class GenFilterDisplayerComponent {
|
|
|
3946
3947
|
fieldType: metaData.filterLogic?.filterType || metaData.fieldType,
|
|
3947
3948
|
});
|
|
3948
3949
|
}
|
|
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
|
|
3950
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: GenFilterDisplayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3951
|
+
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
3952
|
}
|
|
3952
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
3953
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: GenFilterDisplayerComponent, decorators: [{
|
|
3953
3954
|
type: Component,
|
|
3954
3955
|
args: [{ selector: 'tb-filter-displayer', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
3955
3956
|
MatButtonModule, MatMenuModule, MatTooltipModule, StopPropagationDirective, MatIconModule,
|
|
@@ -3962,10 +3963,10 @@ class KeyDisplayPipe {
|
|
|
3962
3963
|
this.tableState = inject(TableStore);
|
|
3963
3964
|
this.transform = (key) => computed(() => this.tableState.$getMetaData(key)()?.displayName || spaceCase(key));
|
|
3964
3965
|
}
|
|
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
|
|
3966
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: KeyDisplayPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
3967
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.1.0", ngImport: i0, type: KeyDisplayPipe, isStandalone: true, name: "keyDisplay" }); }
|
|
3967
3968
|
}
|
|
3968
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
3969
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: KeyDisplayPipe, decorators: [{
|
|
3969
3970
|
type: Pipe,
|
|
3970
3971
|
args: [{ name: 'keyDisplay' }]
|
|
3971
3972
|
}] });
|
|
@@ -3977,10 +3978,10 @@ class FormatFilterTypePipe {
|
|
|
3977
3978
|
}
|
|
3978
3979
|
return filterType;
|
|
3979
3980
|
}
|
|
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
|
|
3981
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: FormatFilterTypePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
3982
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.1.0", ngImport: i0, type: FormatFilterTypePipe, isStandalone: true, name: "formatFilterType" }); }
|
|
3982
3983
|
}
|
|
3983
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
3984
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: FormatFilterTypePipe, decorators: [{
|
|
3984
3985
|
type: Pipe,
|
|
3985
3986
|
args: [{ name: 'formatFilterType' }]
|
|
3986
3987
|
}] });
|
|
@@ -3992,10 +3993,10 @@ class FormatFilterValuePipe {
|
|
|
3992
3993
|
transform(value, key, filterType) {
|
|
3993
3994
|
return computed(() => transform(value, this.tableState.$getMetaData(key)(), filterType));
|
|
3994
3995
|
}
|
|
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
|
|
3996
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: FormatFilterValuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
3997
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.1.0", ngImport: i0, type: FormatFilterValuePipe, isStandalone: true, name: "formatFilterValue" }); }
|
|
3997
3998
|
}
|
|
3998
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
3999
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: FormatFilterValuePipe, decorators: [{
|
|
3999
4000
|
type: Pipe,
|
|
4000
4001
|
args: [{ name: 'formatFilterValue' }]
|
|
4001
4002
|
}] });
|
|
@@ -4054,8 +4055,8 @@ class FilterChipsComponent {
|
|
|
4054
4055
|
constructor() {
|
|
4055
4056
|
this.tableState = inject(TableStore);
|
|
4056
4057
|
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),
|
|
4058
|
+
this.$filters = computed(() => this.tableState.$filtersArray().filter(f => isFilterInfo(f) && !f._isExternallyManaged), ...(ngDevMode ? [{ debugName: "$filters" }] : []));
|
|
4059
|
+
this.$certainCustomFilters = computed(() => this.tableState.$filtersArray().filter(f => isCustomFilter(f) && f.chipLabel), ...(ngDevMode ? [{ debugName: "$certainCustomFilters" }] : []));
|
|
4059
4060
|
this.$currentFilters = this.filterStore.$filters;
|
|
4060
4061
|
}
|
|
4061
4062
|
deleteByIndex(index) {
|
|
@@ -4067,10 +4068,10 @@ class FilterChipsComponent {
|
|
|
4067
4068
|
clearAll() {
|
|
4068
4069
|
this.filterStore.clearAll();
|
|
4069
4070
|
}
|
|
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
|
|
4071
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: FilterChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4072
|
+
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
4073
|
}
|
|
4073
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
4074
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: FilterChipsComponent, decorators: [{
|
|
4074
4075
|
type: Component,
|
|
4075
4076
|
args: [{ selector: 'lib-filter-list', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
4076
4077
|
MatButtonModule, MatTooltipModule, MatIconModule, FilterComponent,
|
|
@@ -4080,14 +4081,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
|
|
|
4080
4081
|
|
|
4081
4082
|
class RouterLinkColumnComponent {
|
|
4082
4083
|
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
|
|
4084
|
+
this.additional = input.required(...(ngDevMode ? [{ debugName: "additional" }] : []));
|
|
4085
|
+
this.element = input.required(...(ngDevMode ? [{ debugName: "element" }] : []));
|
|
4086
|
+
this.queryParams = computed(() => this.additional().routerLinkOptions.queryParams(this.element()), ...(ngDevMode ? [{ debugName: "queryParams" }] : []));
|
|
4087
|
+
this.routerLinkOptions = computed(() => this.additional().routerLinkOptions, ...(ngDevMode ? [{ debugName: "routerLinkOptions" }] : []));
|
|
4088
|
+
this.link = input.required(...(ngDevMode ? [{ debugName: "link" }] : []));
|
|
4089
|
+
}
|
|
4090
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: RouterLinkColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4091
|
+
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
4092
|
<a target="{{additional().target}}"
|
|
4092
4093
|
[routerLink]=" [link()]"
|
|
4093
4094
|
[queryParams]="queryParams()"
|
|
@@ -4099,7 +4100,7 @@ class RouterLinkColumnComponent {
|
|
|
4099
4100
|
</a>
|
|
4100
4101
|
`, 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
4102
|
}
|
|
4102
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
4103
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: RouterLinkColumnComponent, decorators: [{
|
|
4103
4104
|
type: Component,
|
|
4104
4105
|
args: [{
|
|
4105
4106
|
selector: "tb-router-link-column",
|
|
@@ -4122,18 +4123,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
|
|
|
4122
4123
|
}], 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
4124
|
class LinkColumnComponent {
|
|
4124
4125
|
constructor() {
|
|
4125
|
-
this.element = input.required(
|
|
4126
|
-
this.additional = input.required(
|
|
4127
|
-
this.link = input.required(
|
|
4126
|
+
this.element = input.required(...(ngDevMode ? [{ debugName: "element" }] : []));
|
|
4127
|
+
this.additional = input.required(...(ngDevMode ? [{ debugName: "additional" }] : []));
|
|
4128
|
+
this.link = input.required(...(ngDevMode ? [{ debugName: "link" }] : []));
|
|
4128
4129
|
}
|
|
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
|
|
4130
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: LinkColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4131
|
+
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
4132
|
<a target="{{additional().target}}" href="{{link()}}">
|
|
4132
4133
|
<ng-content></ng-content>
|
|
4133
4134
|
</a>
|
|
4134
4135
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4135
4136
|
}
|
|
4136
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
4137
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: LinkColumnComponent, decorators: [{
|
|
4137
4138
|
type: Component,
|
|
4138
4139
|
args: [{
|
|
4139
4140
|
selector: "tb-link-column",
|
|
@@ -4148,18 +4149,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
|
|
|
4148
4149
|
|
|
4149
4150
|
class ArrayCommaColumnComponent {
|
|
4150
4151
|
constructor() {
|
|
4151
|
-
this.value = input.required(
|
|
4152
|
-
this.additional = input(3,
|
|
4153
|
-
this.displayArray = computed(() => (this.value() || []).slice(0, this.additional()),
|
|
4152
|
+
this.value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
4153
|
+
this.additional = input(3, ...(ngDevMode ? [{ debugName: "additional" }] : []));
|
|
4154
|
+
this.displayArray = computed(() => (this.value() || []).slice(0, this.additional()), ...(ngDevMode ? [{ debugName: "displayArray" }] : []));
|
|
4154
4155
|
}
|
|
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
|
|
4156
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ArrayCommaColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4157
|
+
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
4158
|
@for(val of displayArray(); track $index){
|
|
4158
4159
|
{{val + (!$last ? ',' : '')}}
|
|
4159
4160
|
}
|
|
4160
4161
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4161
4162
|
}
|
|
4162
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
4163
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ArrayCommaColumnComponent, decorators: [{
|
|
4163
4164
|
type: Component,
|
|
4164
4165
|
args: [{
|
|
4165
4166
|
selector: 'tb-comma-array-column',
|
|
@@ -4173,19 +4174,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
|
|
|
4173
4174
|
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], additional: [{ type: i0.Input, args: [{ isSignal: true, alias: "additional", required: false }] }] } });
|
|
4174
4175
|
class ArrayNewLineColumnComponent {
|
|
4175
4176
|
constructor() {
|
|
4176
|
-
this.value = input.required(
|
|
4177
|
-
this.additional = input(3,
|
|
4178
|
-
this.displayArray = computed(() => (this.value() || []).slice(0, this.additional()),
|
|
4177
|
+
this.value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
4178
|
+
this.additional = input(3, ...(ngDevMode ? [{ debugName: "additional" }] : []));
|
|
4179
|
+
this.displayArray = computed(() => (this.value() || []).slice(0, this.additional()), ...(ngDevMode ? [{ debugName: "displayArray" }] : []));
|
|
4179
4180
|
}
|
|
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
|
|
4181
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ArrayNewLineColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4182
|
+
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
4183
|
@for(val of displayArray(); track $index){
|
|
4183
4184
|
{{val}}
|
|
4184
4185
|
@if(!$last){ <br/> }
|
|
4185
4186
|
}
|
|
4186
4187
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4187
4188
|
}
|
|
4188
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
4189
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ArrayNewLineColumnComponent, decorators: [{
|
|
4189
4190
|
type: Component,
|
|
4190
4191
|
args: [{
|
|
4191
4192
|
selector: 'tb-new-line-array-column',
|
|
@@ -4211,10 +4212,10 @@ class InitializationComponent {
|
|
|
4211
4212
|
this.$defaultTemplate = viewChild.required('default');
|
|
4212
4213
|
this.$defaultWithIcon = viewChild.required('defaultWithIcon');
|
|
4213
4214
|
}
|
|
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
|
|
4215
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: InitializationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4216
|
+
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
4217
|
}
|
|
4217
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
4218
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: InitializationComponent, decorators: [{
|
|
4218
4219
|
type: Component,
|
|
4219
4220
|
args: [{ selector: 'initialization', imports: [
|
|
4220
4221
|
LinkColumnComponent, ArrayCommaColumnComponent, MatIcon,
|
|
@@ -4243,7 +4244,7 @@ class TableTemplateService {
|
|
|
4243
4244
|
return this.initializationComponentInstance.$imageUrlTemplate();
|
|
4244
4245
|
}
|
|
4245
4246
|
const useIcon = metaData.useIcon || (metaData.fieldType === FieldType.Boolean && metaData.useIcon !== false);
|
|
4246
|
-
if (metaData.
|
|
4247
|
+
if (metaData.additional?.link) {
|
|
4247
4248
|
const router = metaData.additional?.link?.useRouterLink;
|
|
4248
4249
|
if (router) {
|
|
4249
4250
|
return useIcon
|
|
@@ -4259,10 +4260,10 @@ class TableTemplateService {
|
|
|
4259
4260
|
}
|
|
4260
4261
|
return this.initializationComponentInstance.$defaultTemplate();
|
|
4261
4262
|
}
|
|
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
|
|
4263
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TableTemplateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
4264
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TableTemplateService, providedIn: 'root' }); }
|
|
4264
4265
|
}
|
|
4265
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
4266
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TableTemplateService, decorators: [{
|
|
4266
4267
|
type: Injectable,
|
|
4267
4268
|
args: [{ providedIn: 'root' }]
|
|
4268
4269
|
}] });
|
|
@@ -4274,18 +4275,17 @@ class ColumnHeaderMenuComponent {
|
|
|
4274
4275
|
this.FieldType = FieldType;
|
|
4275
4276
|
this.FilterType = FilterType;
|
|
4276
4277
|
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(),
|
|
4278
|
+
this.$fieldType = computed(() => this.$metaData().fieldType, ...(ngDevMode ? [{ debugName: "$fieldType" }] : []));
|
|
4279
|
+
this.$filterFieldType = computed(() => this.$metaData().filterLogic?.filterType || this.$fieldType(), ...(ngDevMode ? [{ debugName: "$filterFieldType" }] : []));
|
|
4279
4280
|
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,
|
|
4281
|
+
.find(f => f.key === this.$metaData().key && f.filterType === this.$currentFilterType())?.filterValue, ...(ngDevMode ? [{ debugName: "$filterValue" }] : []));
|
|
4282
|
+
this.$trigger = viewChild(MatMenuTrigger, ...(ngDevMode ? [{ debugName: "$trigger" }] : []));
|
|
4282
4283
|
this.$metaFilterType = computed(() => {
|
|
4283
4284
|
if (this.$metaData().additional?.filterOptions?.filterableValues) {
|
|
4284
4285
|
return FilterType.In;
|
|
4285
4286
|
}
|
|
4286
4287
|
switch (this.$filterFieldType()) {
|
|
4287
4288
|
case FieldType.String:
|
|
4288
|
-
case FieldType.Link:
|
|
4289
4289
|
case FieldType.PhoneNumber:
|
|
4290
4290
|
case FieldType.Array:
|
|
4291
4291
|
case FieldType.Unknown:
|
|
@@ -4302,9 +4302,9 @@ class ColumnHeaderMenuComponent {
|
|
|
4302
4302
|
return FilterType.In;
|
|
4303
4303
|
default: return FilterType.StringContains;
|
|
4304
4304
|
}
|
|
4305
|
-
},
|
|
4306
|
-
this.$currentFilterType = linkedSignal(() => this.$metaFilterType(),
|
|
4307
|
-
this.$key = computed(() => this.$metaData().key || crypto.randomUUID(),
|
|
4305
|
+
}, ...(ngDevMode ? [{ debugName: "$metaFilterType" }] : []));
|
|
4306
|
+
this.$currentFilterType = linkedSignal(() => this.$metaFilterType(), ...(ngDevMode ? [{ debugName: "$currentFilterType" }] : []));
|
|
4307
|
+
this.$key = computed(() => this.$metaData().key || crypto.randomUUID(), ...(ngDevMode ? [{ debugName: "$key" }] : []));
|
|
4308
4308
|
this.addFilter$ = new Subject();
|
|
4309
4309
|
}
|
|
4310
4310
|
hideField(key) {
|
|
@@ -4344,16 +4344,16 @@ class ColumnHeaderMenuComponent {
|
|
|
4344
4344
|
fieldType: metaData.filterLogic?.filterType || metaData.fieldType,
|
|
4345
4345
|
});
|
|
4346
4346
|
}
|
|
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 }); }
|
|
4347
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ColumnHeaderMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4348
|
+
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
4349
|
}
|
|
4350
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
4350
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ColumnHeaderMenuComponent, decorators: [{
|
|
4351
4351
|
type: Component,
|
|
4352
4352
|
args: [{ selector: 'tb-header-menu', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
4353
4353
|
MatMenuModule, MatIconModule, MatButtonModule, FormsModule, InListFilterComponent,
|
|
4354
4354
|
MatInputModule, MatTooltipModule, StopPropagationDirective, MatRadioModule, MatDatepickerModule,
|
|
4355
4355
|
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.
|
|
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.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
4357
|
}], propDecorators: { $metaData: [{ type: i0.Input, args: [{ isSignal: true, alias: "metaData", required: true }] }], $trigger: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatMenuTrigger), { isSignal: true }] }] } });
|
|
4358
4358
|
|
|
4359
4359
|
class ColumnTotalPipe {
|
|
@@ -4364,10 +4364,10 @@ class ColumnTotalPipe {
|
|
|
4364
4364
|
return sumBy(dataToCalculate, metaData.key);
|
|
4365
4365
|
}
|
|
4366
4366
|
}
|
|
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
|
|
4367
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ColumnTotalPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
4368
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.1.0", ngImport: i0, type: ColumnTotalPipe, isStandalone: true, name: "columnTotal" }); }
|
|
4369
4369
|
}
|
|
4370
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
4370
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ColumnTotalPipe, decorators: [{
|
|
4371
4371
|
type: Pipe,
|
|
4372
4372
|
args: [{
|
|
4373
4373
|
name: 'columnTotal',
|
|
@@ -4428,9 +4428,9 @@ class ColumnBuilderComponent {
|
|
|
4428
4428
|
this.templateService = inject(TableTemplateService);
|
|
4429
4429
|
this.tableConfig = inject(TableBuilderConfigToken);
|
|
4430
4430
|
this.injector = inject(Injector);
|
|
4431
|
-
this.$columnDef = viewChild(MatColumnDef,
|
|
4432
|
-
this.$bodyTemplate = viewChild('body',
|
|
4433
|
-
this.$metaData = signal(undefined,
|
|
4431
|
+
this.$columnDef = viewChild(MatColumnDef, ...(ngDevMode ? [{ debugName: "$columnDef" }] : []));
|
|
4432
|
+
this.$bodyTemplate = viewChild('body', ...(ngDevMode ? [{ debugName: "$bodyTemplate" }] : []));
|
|
4433
|
+
this.$metaData = signal(undefined, ...(ngDevMode ? [{ debugName: "$metaData" }] : []));
|
|
4434
4434
|
this.$additional = computed(() => {
|
|
4435
4435
|
const metaData = this.$metaData();
|
|
4436
4436
|
if (!metaData)
|
|
@@ -4443,30 +4443,31 @@ class ColumnBuilderComponent {
|
|
|
4443
4443
|
return metaData.additional?.limit || this.tableConfig?.arrayDefaults?.limit;
|
|
4444
4444
|
}
|
|
4445
4445
|
return undefined;
|
|
4446
|
-
},
|
|
4447
|
-
this.$customCell = signal(undefined,
|
|
4446
|
+
}, ...(ngDevMode ? [{ debugName: "$additional" }] : []));
|
|
4447
|
+
this.$customCell = signal(undefined, ...(ngDevMode ? [{ debugName: "$customCell" }] : []));
|
|
4448
|
+
this.$customHeader = signal(undefined, ...(ngDevMode ? [{ debugName: "$customHeader" }] : []));
|
|
4448
4449
|
this.$transform = computed(() => {
|
|
4449
4450
|
const metaData = this.$metaData();
|
|
4450
4451
|
if (!metaData)
|
|
4451
4452
|
return;
|
|
4452
4453
|
return createTransformer(metaData, this.config);
|
|
4453
|
-
},
|
|
4454
|
+
}, ...(ngDevMode ? [{ debugName: "$transform" }] : []));
|
|
4454
4455
|
this.$innerTemplate = computed(() => {
|
|
4455
4456
|
const metaData = this.$metaData();
|
|
4456
4457
|
if (!metaData)
|
|
4457
4458
|
return;
|
|
4458
4459
|
return metaData.template || this.$customCell()?.$templateRef() || this.templateService.getTemplate(metaData);
|
|
4459
|
-
},
|
|
4460
|
+
}, ...(ngDevMode ? [{ debugName: "$innerTemplate" }] : []));
|
|
4460
4461
|
this.$showFilters = computed(() => {
|
|
4461
4462
|
const metaData = this.$metaData();
|
|
4462
4463
|
if (!metaData)
|
|
4463
4464
|
return;
|
|
4464
4465
|
const settings = this.state.$tableSettings();
|
|
4465
4466
|
return !(settings.hideColumnHeaderFilters || metaData.noFilter);
|
|
4466
|
-
},
|
|
4467
|
+
}, ...(ngDevMode ? [{ debugName: "$showFilters" }] : []));
|
|
4467
4468
|
this.$outerTemplate = computed(() => {
|
|
4468
4469
|
return this.$customCell()?.columnDef?.cell?.template ?? this.$bodyTemplate();
|
|
4469
|
-
},
|
|
4470
|
+
}, ...(ngDevMode ? [{ debugName: "$outerTemplate" }] : []));
|
|
4470
4471
|
this.$classes = computed(() => {
|
|
4471
4472
|
const metaData = this.$metaData();
|
|
4472
4473
|
if (!metaData)
|
|
@@ -4478,13 +4479,13 @@ class ColumnBuilderComponent {
|
|
|
4478
4479
|
});
|
|
4479
4480
|
}
|
|
4480
4481
|
return metaData.classes;
|
|
4481
|
-
},
|
|
4482
|
+
}, ...(ngDevMode ? [{ debugName: "$classes" }] : []));
|
|
4482
4483
|
this.$styles = computed(() => {
|
|
4483
4484
|
const metaData = this.$metaData();
|
|
4484
4485
|
if (!metaData)
|
|
4485
4486
|
return;
|
|
4486
4487
|
return columnStyles(metaData, this.state.$getUserDefinedWidth(metaData.key)(), this.state.$tableSettingsMinWidth());
|
|
4487
|
-
},
|
|
4488
|
+
}, ...(ngDevMode ? [{ debugName: "$styles" }] : []));
|
|
4488
4489
|
this.viewInited = false;
|
|
4489
4490
|
this.onViewInit = () => { };
|
|
4490
4491
|
this.whenViewInited = (callback) => {
|
|
@@ -4518,12 +4519,12 @@ class ColumnBuilderComponent {
|
|
|
4518
4519
|
metaData.click(element, key, event);
|
|
4519
4520
|
}
|
|
4520
4521
|
}
|
|
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
|
|
4522
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ColumnBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4523
|
+
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 customHeader = $customHeader();\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 @let headerTemplate = customHeader?.template();\r\n @if(!headerTemplate && !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 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 <ng-container\r\n *ngTemplateOutlet=\"headerTemplate; context: { $implicit: metaData, metaData: metaData, styles: styles?.header } \" />\r\n </div>\r\n }\r\n @else if(metaData.fieldType === FieldType.NotMapped || metaData.noSort)\r\n {\r\n <ng-container\r\n *ngTemplateOutlet=\"headerTemplate; context: { $implicit: metaData, metaData: metaData, styles: styles?.header } \" />\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\r\n *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
4524
|
{ provide: CDK_DROP_LIST, useExisting: CdkDropList },
|
|
4524
4525
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4525
4526
|
}
|
|
4526
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
4527
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ColumnBuilderComponent, decorators: [{
|
|
4527
4528
|
type: Component,
|
|
4528
4529
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [
|
|
4529
4530
|
{ provide: CDK_DROP_LIST, useExisting: CdkDropList },
|
|
@@ -4531,7 +4532,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
|
|
|
4531
4532
|
MatTableModule, NgTemplateOutlet, ResizeColumnDirective, FunctionPipe, StylerDirective,
|
|
4532
4533
|
ConditionalClassesDirective, DragDropModule, MatSortModule, SpaceCasePipe, ColumnHeaderMenuComponent,
|
|
4533
4534
|
MatTooltipModule, ColumnTotalPipe, CurrencyPipe, DecimalPipe
|
|
4534
|
-
], 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"] }]
|
|
4535
|
+
], template: "@let metaData = $metaData();\r\n@let customCell = $customCell();\r\n@let customHeader = $customHeader();\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 @let headerTemplate = customHeader?.template();\r\n @if(!headerTemplate && !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 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 <ng-container\r\n *ngTemplateOutlet=\"headerTemplate; context: { $implicit: metaData, metaData: metaData, styles: styles?.header } \" />\r\n </div>\r\n }\r\n @else if(metaData.fieldType === FieldType.NotMapped || metaData.noSort)\r\n {\r\n <ng-container\r\n *ngTemplateOutlet=\"headerTemplate; context: { $implicit: metaData, metaData: metaData, styles: styles?.header } \" />\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\r\n *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"] }]
|
|
4535
4536
|
}], propDecorators: { $columnDef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatColumnDef), { isSignal: true }] }], $bodyTemplate: [{ type: i0.ViewChild, args: ['body', { isSignal: true }] }] } });
|
|
4536
4537
|
|
|
4537
4538
|
// If we are only sorting due to a change in the Sorts[] we can 'optimize'. If the sort array was first by column a asc then by column b desc then by column c asc,
|
|
@@ -4573,10 +4574,10 @@ class DataStore extends ComponentStore {
|
|
|
4573
4574
|
constructor() {
|
|
4574
4575
|
super({ ...defaultDataState });
|
|
4575
4576
|
}
|
|
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
|
|
4577
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DataStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
4578
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DataStore }); }
|
|
4578
4579
|
}
|
|
4579
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
4580
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: DataStore, decorators: [{
|
|
4580
4581
|
type: Injectable
|
|
4581
4582
|
}], ctorParameters: () => [] });
|
|
4582
4583
|
|
|
@@ -4740,13 +4741,13 @@ class GenericTableComponent {
|
|
|
4740
4741
|
this._injector = inject(Injector);
|
|
4741
4742
|
this.tableContainer = inject(TableContainerComponent, { optional: true });
|
|
4742
4743
|
this.smallFooter = 10;
|
|
4743
|
-
this.$headerRow = viewChild(MatHeaderRowDef,
|
|
4744
|
-
this.$footerRow = viewChild(MatFooterRowDef,
|
|
4745
|
-
this.$table = viewChild(MatTable,
|
|
4746
|
-
this.$dropList = viewChild(CdkDropList,
|
|
4744
|
+
this.$headerRow = viewChild(MatHeaderRowDef, ...(ngDevMode ? [{ debugName: "$headerRow" }] : []));
|
|
4745
|
+
this.$footerRow = viewChild(MatFooterRowDef, ...(ngDevMode ? [{ debugName: "$footerRow" }] : []));
|
|
4746
|
+
this.$table = viewChild(MatTable, ...(ngDevMode ? [{ debugName: "$table" }] : []));
|
|
4747
|
+
this.$dropList = viewChild(CdkDropList, ...(ngDevMode ? [{ debugName: "$dropList" }] : []));
|
|
4747
4748
|
this.selection$ = output({ alias: 'selection' });
|
|
4748
4749
|
this.$displayData = input.required({ ...(ngDevMode ? { debugName: "$displayData" } : {}), alias: 'displayData' });
|
|
4749
|
-
this.$displayDataLength = computed(() => this.$displayData().length,
|
|
4750
|
+
this.$displayDataLength = computed(() => this.$displayData().length, ...(ngDevMode ? [{ debugName: "$displayDataLength" }] : []));
|
|
4750
4751
|
this.$data = input.required({ ...(ngDevMode ? { debugName: "$data" } : {}), alias: 'data' });
|
|
4751
4752
|
this.$rows = input([], { ...(ngDevMode ? { debugName: "$rows" } : {}), alias: 'rows' });
|
|
4752
4753
|
this.$columnInfos = input.required({ ...(ngDevMode ? { debugName: "$columnInfos" } : {}), alias: 'columnInfos' });
|
|
@@ -4762,7 +4763,7 @@ class GenericTableComponent {
|
|
|
4762
4763
|
keys.unshift('index');
|
|
4763
4764
|
}
|
|
4764
4765
|
return keys;
|
|
4765
|
-
},
|
|
4766
|
+
}, ...(ngDevMode ? [{ debugName: "$keys" }] : []));
|
|
4766
4767
|
this.keys$ = toObservable(this.$keys);
|
|
4767
4768
|
this.$trackBy = input(undefined, { ...(ngDevMode ? { debugName: "$trackBy" } : {}), alias: 'trackBy' });
|
|
4768
4769
|
this.$trackByFunction = computed(() => {
|
|
@@ -4774,17 +4775,17 @@ class GenericTableComponent {
|
|
|
4774
4775
|
return `${item.level}-${item[initIndexSymbol]}`;
|
|
4775
4776
|
return typeof trackBy === 'function' ? trackBy(item) : item[trackBy];
|
|
4776
4777
|
});
|
|
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),
|
|
4778
|
+
}, ...(ngDevMode ? [{ debugName: "$trackByFunction" }] : []));
|
|
4779
|
+
this.$hasFooterMeta = computed(() => this.state.$metaDataArray().some(md => !!md.additional?.footer), ...(ngDevMode ? [{ debugName: "$hasFooterMeta" }] : []));
|
|
4780
|
+
this.$hasCustomFooter = computed(() => this.$columnInfos()?.some(ci => !!ci.customCell?.columnDef?.footerCell), ...(ngDevMode ? [{ debugName: "$hasCustomFooter" }] : []));
|
|
4780
4781
|
this.$footerRowStyle = computed(() => {
|
|
4781
4782
|
const hasData = !!this.$displayDataLength();
|
|
4782
4783
|
const metaFooter = this.$hasFooterMeta();
|
|
4783
4784
|
const customFooter = this.$hasCustomFooter();
|
|
4784
4785
|
const hasSelectionColumn = this.state.$props().selectionColumn;
|
|
4785
4786
|
return customFooter || hasSelectionColumn || (hasData && metaFooter) ? 'regular-footer' : hasData ? 'no-footer' : 'small-footer';
|
|
4786
|
-
},
|
|
4787
|
-
this.$showFooterRow = computed(() => this.$footerRowStyle() !== 'no-footer',
|
|
4787
|
+
}, ...(ngDevMode ? [{ debugName: "$footerRowStyle" }] : []));
|
|
4788
|
+
this.$showFooterRow = computed(() => this.$footerRowStyle() !== 'no-footer', ...(ngDevMode ? [{ debugName: "$showFooterRow" }] : []));
|
|
4788
4789
|
this.injector = Injector.create({
|
|
4789
4790
|
providers: [
|
|
4790
4791
|
{ provide: MatTable, useFactory: () => this.$table() },
|
|
@@ -4792,10 +4793,10 @@ class GenericTableComponent {
|
|
|
4792
4793
|
],
|
|
4793
4794
|
parent: this._injector
|
|
4794
4795
|
});
|
|
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,
|
|
4796
|
+
this.$hasIndexColumn = computed(() => this.state.selectSignal(state => state.props.indexColumn)(), ...(ngDevMode ? [{ debugName: "$hasIndexColumn" }] : []));
|
|
4797
|
+
this.$columns = signal({}, ...(ngDevMode ? [{ debugName: "$columns" }] : []));
|
|
4798
|
+
this.$showHeader = computed(() => !this.state.$tableSettings().hideColumnHeader, ...(ngDevMode ? [{ debugName: "$showHeader" }] : []));
|
|
4799
|
+
this.$paginatorHeight = signal(0, ...(ngDevMode ? [{ debugName: "$paginatorHeight" }] : []));
|
|
4799
4800
|
this.r = new ResizeObserver(entries => this.$paginatorHeight.set(entries[0]?.contentRect.height || 0));
|
|
4800
4801
|
this.#rr = effect((cleanup) => {
|
|
4801
4802
|
const paginatorWrapper = this.tableContainer?.$paginatorWrapper();
|
|
@@ -4803,9 +4804,9 @@ class GenericTableComponent {
|
|
|
4803
4804
|
return;
|
|
4804
4805
|
this.r.observe(paginatorWrapper.nativeElement);
|
|
4805
4806
|
cleanup(() => { this.r.disconnect(); });
|
|
4806
|
-
},
|
|
4807
|
+
}, ...(ngDevMode ? [{ debugName: "#rr" }] : []));
|
|
4807
4808
|
this.$offset = this.dataStore.selectSignal(s => s.virtualScrollOffset);
|
|
4808
|
-
this.$footerOffset = computed(() => this.$useVirtualScroll() ? this.$offset() : this.$paginatorHeight(),
|
|
4809
|
+
this.$footerOffset = computed(() => this.$useVirtualScroll() ? this.$offset() : this.$paginatorHeight(), ...(ngDevMode ? [{ debugName: "$footerOffset" }] : []));
|
|
4809
4810
|
this.#buildColumnsEffect = effect(() => {
|
|
4810
4811
|
const columnInfos = this.$columnInfos() || [];
|
|
4811
4812
|
const table = this.$table();
|
|
@@ -4821,7 +4822,7 @@ class GenericTableComponent {
|
|
|
4821
4822
|
});
|
|
4822
4823
|
columnInfos.forEach(ci => this.buildColumn(ci));
|
|
4823
4824
|
});
|
|
4824
|
-
},
|
|
4825
|
+
}, ...(ngDevMode ? [{ debugName: "#buildColumnsEffect" }] : []));
|
|
4825
4826
|
this.#buildRowsEffect = effect(() => {
|
|
4826
4827
|
const table = this.$table();
|
|
4827
4828
|
const rows = this.$rows();
|
|
@@ -4835,7 +4836,7 @@ class GenericTableComponent {
|
|
|
4835
4836
|
table.addRowDef(row);
|
|
4836
4837
|
});
|
|
4837
4838
|
});
|
|
4838
|
-
},
|
|
4839
|
+
}, ...(ngDevMode ? [{ debugName: "#buildRowsEffect" }] : []));
|
|
4839
4840
|
this.#buildHeaderRowEffect = effect(() => {
|
|
4840
4841
|
const headerRow = this.$headerRow();
|
|
4841
4842
|
const showHeader = this.$showHeader();
|
|
@@ -4846,7 +4847,7 @@ class GenericTableComponent {
|
|
|
4846
4847
|
else if (headerRow && table)
|
|
4847
4848
|
table.removeHeaderRowDef(headerRow);
|
|
4848
4849
|
});
|
|
4849
|
-
},
|
|
4850
|
+
}, ...(ngDevMode ? [{ debugName: "#buildHeaderRowEffect" }] : []));
|
|
4850
4851
|
this.#buildFooterEffect = effect(() => {
|
|
4851
4852
|
const footerRow = this.$footerRow();
|
|
4852
4853
|
const showFooter = this.$showFooterRow();
|
|
@@ -4857,9 +4858,9 @@ class GenericTableComponent {
|
|
|
4857
4858
|
else if (footerRow && table)
|
|
4858
4859
|
table.removeFooterRowDef(footerRow);
|
|
4859
4860
|
});
|
|
4860
|
-
},
|
|
4861
|
-
this.$usePaginator = computed(() => this.state.$tableSettings().usePaginator,
|
|
4862
|
-
this.$useVirtualScroll = computed(() => this.state.$viewType().includes('virtual'),
|
|
4861
|
+
}, ...(ngDevMode ? [{ debugName: "#buildFooterEffect" }] : []));
|
|
4862
|
+
this.$usePaginator = computed(() => this.state.$tableSettings().usePaginator, ...(ngDevMode ? [{ debugName: "$usePaginator" }] : []));
|
|
4863
|
+
this.$useVirtualScroll = computed(() => this.state.$viewType().includes('virtual'), ...(ngDevMode ? [{ debugName: "$useVirtualScroll" }] : []));
|
|
4863
4864
|
this.$virtualStart = this.dataStore.selectSignal(d => d.virtualEnds.start);
|
|
4864
4865
|
this.$offsetIndex = computed(() => {
|
|
4865
4866
|
const virtualStart = this.$virtualStart();
|
|
@@ -4872,8 +4873,8 @@ class GenericTableComponent {
|
|
|
4872
4873
|
return pageSize * currentPage;
|
|
4873
4874
|
}
|
|
4874
4875
|
return 0;
|
|
4875
|
-
},
|
|
4876
|
-
this.$hasSelectColumn = computed(() => this.state.selectSignal(state => state.props.selectionColumn)(),
|
|
4876
|
+
}, ...(ngDevMode ? [{ debugName: "$offsetIndex" }] : []));
|
|
4877
|
+
this.$hasSelectColumn = computed(() => this.state.selectSignal(state => state.props.selectionColumn)(), ...(ngDevMode ? [{ debugName: "$hasSelectColumn" }] : []));
|
|
4877
4878
|
this.$selection = computed(() => {
|
|
4878
4879
|
const trackBy = this.$trackBy();
|
|
4879
4880
|
if (trackBy) {
|
|
@@ -4889,7 +4890,7 @@ class GenericTableComponent {
|
|
|
4889
4890
|
this.checkForPreviousSelection(model);
|
|
4890
4891
|
});
|
|
4891
4892
|
return model;
|
|
4892
|
-
},
|
|
4893
|
+
}, ...(ngDevMode ? [{ debugName: "$selection" }] : []));
|
|
4893
4894
|
this.selectionChange$ = toObservable(this.$selection).pipe(switchMap(s => s.changed));
|
|
4894
4895
|
this.$selectionChange = toSignal(this.selectionChange$);
|
|
4895
4896
|
this.onSelectionChangeEffect = effect(() => {
|
|
@@ -4897,20 +4898,20 @@ class GenericTableComponent {
|
|
|
4897
4898
|
if (!selectionChange)
|
|
4898
4899
|
return;
|
|
4899
4900
|
untracked(() => this.selection$.emit(selectionChange));
|
|
4900
|
-
},
|
|
4901
|
+
}, ...(ngDevMode ? [{ debugName: "onSelectionChangeEffect" }] : []));
|
|
4901
4902
|
this.$isAllSelected = computed(() => {
|
|
4902
4903
|
this.$selectionChange();
|
|
4903
4904
|
const selected = this.$selection()?.selected;
|
|
4904
4905
|
if (!selected?.length)
|
|
4905
4906
|
return false;
|
|
4906
4907
|
return this.$selectableData()?.length === selected.length;
|
|
4907
|
-
},
|
|
4908
|
+
}, ...(ngDevMode ? [{ debugName: "$isAllSelected" }] : []));
|
|
4908
4909
|
this.$masterToggleChecked = this.$isAllSelected;
|
|
4909
4910
|
this.$masterToggleIndeterminate = computed(() => {
|
|
4910
4911
|
this.$selectionChange();
|
|
4911
4912
|
return !!this.$selection()?.selected.length && !this.$masterToggleChecked();
|
|
4912
|
-
},
|
|
4913
|
-
this.$paginated = computed(() => this.state.$viewType() === 'virtual paginator' || this.state.$viewType() === 'paginator',
|
|
4913
|
+
}, ...(ngDevMode ? [{ debugName: "$masterToggleIndeterminate" }] : []));
|
|
4914
|
+
this.$paginated = computed(() => this.state.$viewType() === 'virtual paginator' || this.state.$viewType() === 'paginator', ...(ngDevMode ? [{ debugName: "$paginated" }] : []));
|
|
4914
4915
|
this.$selectableData = computed(() => {
|
|
4915
4916
|
const isGrouped = !!this.state.$groupByData().length;
|
|
4916
4917
|
this.state.$expandGroups();
|
|
@@ -4927,7 +4928,7 @@ class GenericTableComponent {
|
|
|
4927
4928
|
return this.$data();
|
|
4928
4929
|
}
|
|
4929
4930
|
return [];
|
|
4930
|
-
},
|
|
4931
|
+
}, ...(ngDevMode ? [{ debugName: "$selectableData" }] : []));
|
|
4931
4932
|
this.$selectAllMessage = computed(() => {
|
|
4932
4933
|
if (this.$isAllSelected())
|
|
4933
4934
|
return `Deselect all ${this.$selection().selected.length} selected`;
|
|
@@ -4937,7 +4938,7 @@ class GenericTableComponent {
|
|
|
4937
4938
|
message += ' on this page';
|
|
4938
4939
|
}
|
|
4939
4940
|
return message;
|
|
4940
|
-
},
|
|
4941
|
+
}, ...(ngDevMode ? [{ debugName: "$selectAllMessage" }] : []));
|
|
4941
4942
|
this.#onSelectableDataChangeEffect = effect(() => {
|
|
4942
4943
|
const selectableData = this.$selectableData();
|
|
4943
4944
|
untracked(() => {
|
|
@@ -4954,7 +4955,7 @@ class GenericTableComponent {
|
|
|
4954
4955
|
const removed = selected.filter(trackByFunc);
|
|
4955
4956
|
this.$selection().deselect(...removed);
|
|
4956
4957
|
});
|
|
4957
|
-
},
|
|
4958
|
+
}, ...(ngDevMode ? [{ debugName: "#onSelectableDataChangeEffect" }] : []));
|
|
4958
4959
|
this.$tableWidth = linkedSignal({ ...(ngDevMode ? { debugName: "$tableWidth" } : {}), source: this.state.$getUserDefinedTableWidth,
|
|
4959
4960
|
computation: (currentUserDefinedWidth, { source: previousUserDefinedWidth } = { value: null, source: 0 }) => {
|
|
4960
4961
|
if (currentUserDefinedWidth) {
|
|
@@ -4995,7 +4996,7 @@ class GenericTableComponent {
|
|
|
4995
4996
|
return parseTbSizeToPixels(notPersistedTableSettings.rowHeight) + 'px';
|
|
4996
4997
|
}
|
|
4997
4998
|
return undefined;
|
|
4998
|
-
},
|
|
4999
|
+
}, ...(ngDevMode ? [{ debugName: "$rowHeight" }] : []));
|
|
4999
5000
|
this.$headerHeight = computed(() => {
|
|
5000
5001
|
if (this.state.$userDefinedHeaderHeight()) {
|
|
5001
5002
|
return this.state.$userDefinedHeaderHeight() + 'px';
|
|
@@ -5009,14 +5010,14 @@ class GenericTableComponent {
|
|
|
5009
5010
|
return parseTbSizeToPixels(notPersistedTableSettings.headerHeight) + 'px';
|
|
5010
5011
|
}
|
|
5011
5012
|
return undefined;
|
|
5012
|
-
},
|
|
5013
|
+
}, ...(ngDevMode ? [{ debugName: "$headerHeight" }] : []));
|
|
5013
5014
|
this.$groupHeaderHeight = computed(() => {
|
|
5014
5015
|
const groupHeaderHeight = this.state.$notPersistedTableSettings().groupHeaderHeight;
|
|
5015
5016
|
if (groupHeaderHeight) {
|
|
5016
5017
|
return parseTbSizeToPixels(groupHeaderHeight) + 'px';
|
|
5017
5018
|
}
|
|
5018
5019
|
return this.$rowHeight();
|
|
5019
|
-
},
|
|
5020
|
+
}, ...(ngDevMode ? [{ debugName: "$groupHeaderHeight" }] : []));
|
|
5020
5021
|
this.$footerHeight = computed(() => {
|
|
5021
5022
|
const footerStyle = this.$footerRowStyle();
|
|
5022
5023
|
switch (footerStyle) {
|
|
@@ -5027,10 +5028,10 @@ class GenericTableComponent {
|
|
|
5027
5028
|
default:
|
|
5028
5029
|
return '0px';
|
|
5029
5030
|
}
|
|
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 || {},
|
|
5031
|
+
}, ...(ngDevMode ? [{ debugName: "$footerHeight" }] : []));
|
|
5032
|
+
this.$stickyFooter = computed(() => this.state.$props().stickyFooter || this.state.$isVirtual(), ...(ngDevMode ? [{ debugName: "$stickyFooter" }] : []));
|
|
5033
|
+
this.$rowStyles = computed(() => this.state.$tableSettings().rowStyles || {}, ...(ngDevMode ? [{ debugName: "$rowStyles" }] : []));
|
|
5034
|
+
this.$rowClasses = computed(() => this.state.$tableSettings().rowClasses || {}, ...(ngDevMode ? [{ debugName: "$rowClasses" }] : []));
|
|
5034
5035
|
this.allOfGroupSelected = (uniqueName) => computed(() => {
|
|
5035
5036
|
//make sure signal is marked dirty when selection or over all data changes
|
|
5036
5037
|
this.$selectionChange();
|
|
@@ -5086,8 +5087,8 @@ class GenericTableComponent {
|
|
|
5086
5087
|
this.$selectFilterKey = computed(() => {
|
|
5087
5088
|
const selectFilter = Object.keys(this.state.$filters()).find(key => key.startsWith('header-column-select'));
|
|
5088
5089
|
return selectFilter;
|
|
5089
|
-
},
|
|
5090
|
-
this.$hasSelectFilter = computed(() => !!this.$selectFilterKey(),
|
|
5090
|
+
}, ...(ngDevMode ? [{ debugName: "$selectFilterKey" }] : []));
|
|
5091
|
+
this.$hasSelectFilter = computed(() => !!this.$selectFilterKey(), ...(ngDevMode ? [{ debugName: "$hasSelectFilter" }] : []));
|
|
5091
5092
|
this._onSelect = effect(() => {
|
|
5092
5093
|
const selectionChange = this.$selectionChange();
|
|
5093
5094
|
untracked(() => {
|
|
@@ -5097,7 +5098,7 @@ class GenericTableComponent {
|
|
|
5097
5098
|
this.state.removeFilter(selectFilterKey);
|
|
5098
5099
|
this.addSelectFilter(true);
|
|
5099
5100
|
});
|
|
5100
|
-
},
|
|
5101
|
+
}, ...(ngDevMode ? [{ debugName: "_onSelect" }] : []));
|
|
5101
5102
|
}
|
|
5102
5103
|
#rr;
|
|
5103
5104
|
drop(event) {
|
|
@@ -5133,6 +5134,7 @@ class GenericTableComponent {
|
|
|
5133
5134
|
injector: this.injector
|
|
5134
5135
|
});
|
|
5135
5136
|
component.instance.$customCell.set(column.customCell);
|
|
5137
|
+
component.instance.$customHeader.set(column.customHeader);
|
|
5136
5138
|
component.instance.setMetaData(column.metaData);
|
|
5137
5139
|
component.instance.$data = this.$data;
|
|
5138
5140
|
component.instance.whenViewInited(() => {
|
|
@@ -5189,10 +5191,10 @@ class GenericTableComponent {
|
|
|
5189
5191
|
notSavable: true,
|
|
5190
5192
|
});
|
|
5191
5193
|
}
|
|
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 }); }
|
|
5194
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: GenericTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5195
|
+
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
5196
|
}
|
|
5195
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
5197
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: GenericTableComponent, decorators: [{
|
|
5196
5198
|
type: Component,
|
|
5197
5199
|
args: [{ selector: 'tb-generic-table', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
5198
5200
|
MatTableModule, DragDropModule, MatCheckboxModule, MatButtonModule, MatIconModule, NgTemplateOutlet,
|
|
@@ -5220,11 +5222,10 @@ class ExportToCsvService {
|
|
|
5220
5222
|
this.datePipe = inject(DatePipe);
|
|
5221
5223
|
this.$exportSettings = computed(() => {
|
|
5222
5224
|
const globalSettings = this.config?.defaultTableSettings?.tableSettings?.exportSettings
|
|
5223
|
-
|| this.config?.export
|
|
5224
5225
|
|| {};
|
|
5225
5226
|
const tableSettings = (this.state.$notPersistedTableSettings()?.exportSettings || {});
|
|
5226
5227
|
return merge$1({}, globalSettings, tableSettings);
|
|
5227
|
-
},
|
|
5228
|
+
}, ...(ngDevMode ? [{ debugName: "$exportSettings" }] : []));
|
|
5228
5229
|
this.exportToCsv = (data) => {
|
|
5229
5230
|
const hiddenKeys = this.state.selectSignal(s => s.hiddenKeys)();
|
|
5230
5231
|
const meta = this.state.$metaDataArray().filter(md => !md.noExport && !hiddenKeys.includes(md.key));
|
|
@@ -5258,12 +5259,8 @@ class ExportToCsvService {
|
|
|
5258
5259
|
return metaExport.mapForExport(row);
|
|
5259
5260
|
const exportForCol = merge$1({}, this.$exportSettings(), metaExport);
|
|
5260
5261
|
let val = getFactory(meta.key)(row);
|
|
5261
|
-
if (val == null
|
|
5262
|
+
if (val == null)
|
|
5262
5263
|
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
5264
|
if (meta.additional?.link && exportForCol.mapLink === 'as link' || exportForCol.mapLink === 'as excel') {
|
|
5268
5265
|
let mapper = this.state.$getLinkInfo(meta)()?.link;
|
|
5269
5266
|
if (mapper) {
|
|
@@ -5300,8 +5297,6 @@ class ExportToCsvService {
|
|
|
5300
5297
|
const style = meta.additional.arrayStyle ?? this.config.arrayDefaults?.arrayStyle;
|
|
5301
5298
|
const limit = meta.additional.limit ?? this.config.arrayDefaults?.limit;
|
|
5302
5299
|
return val.slice(0, limit).join(style === ArrayStyle.NewLine ? '\n' : ', ');
|
|
5303
|
-
case FieldType.Expression:
|
|
5304
|
-
return meta.transform(row);
|
|
5305
5300
|
case FieldType.Enum:
|
|
5306
5301
|
return exportForCol?.mapEnumToString ? spaceCase(meta.additional.enumMap[val]) : val;
|
|
5307
5302
|
}
|
|
@@ -5320,16 +5315,16 @@ class ExportToCsvService {
|
|
|
5320
5315
|
}
|
|
5321
5316
|
return this.datePipe.transform(val, dateFormat);
|
|
5322
5317
|
}
|
|
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
|
|
5318
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ExportToCsvService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
5319
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ExportToCsvService }); }
|
|
5325
5320
|
}
|
|
5326
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
5321
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ExportToCsvService, decorators: [{
|
|
5327
5322
|
type: Injectable
|
|
5328
5323
|
}] });
|
|
5329
5324
|
|
|
5330
5325
|
function createLinkCreatorDict(metaDatas) {
|
|
5331
5326
|
return metaDatas.reduce((acc, md) => {
|
|
5332
|
-
if (md.additional?.link
|
|
5327
|
+
if (md.additional?.link) {
|
|
5333
5328
|
acc[md.key] = createLinkCreator(md);
|
|
5334
5329
|
}
|
|
5335
5330
|
return acc;
|
|
@@ -5538,10 +5533,10 @@ class TableBuilderStateStore extends ComponentStore {
|
|
|
5538
5533
|
this.deleteLocalProfilesState({ key, stateKey });
|
|
5539
5534
|
};
|
|
5540
5535
|
}
|
|
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
|
|
5536
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TableBuilderStateStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
5537
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TableBuilderStateStore, providedIn: 'root' }); }
|
|
5543
5538
|
}
|
|
5544
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
5539
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TableBuilderStateStore, decorators: [{
|
|
5545
5540
|
type: Injectable,
|
|
5546
5541
|
args: [{ providedIn: 'root' }]
|
|
5547
5542
|
}], ctorParameters: () => [] });
|
|
@@ -5761,13 +5756,13 @@ class PaginatorComponent {
|
|
|
5761
5756
|
constructor() {
|
|
5762
5757
|
this.state = inject(TableStore);
|
|
5763
5758
|
this.data = inject(DataStore);
|
|
5764
|
-
this.$paginator = viewChild(MatPaginator,
|
|
5759
|
+
this.$paginator = viewChild(MatPaginator, ...(ngDevMode ? [{ debugName: "$paginator" }] : []));
|
|
5765
5760
|
this.$dataLength = this.data.selectSignal(d => d.sortedFilteredDataLength);
|
|
5766
5761
|
this.$viewableDataLength = this.data.selectSignal(d => d.sortedFilteredGroupedDataLength);
|
|
5767
5762
|
this.pageEvent$ = toObservable(this.$paginator).pipe(notNull(), switchMap(p => p.page));
|
|
5768
5763
|
this.$pageEvent = toSignal(this.pageEvent$);
|
|
5769
|
-
this.$pageIndexChangeEvent = computed(() => this.$pageEvent()?.pageIndex,
|
|
5770
|
-
this.$pageSizeChangeEvent = computed(() => this.$pageEvent()?.pageSize,
|
|
5764
|
+
this.$pageIndexChangeEvent = computed(() => this.$pageEvent()?.pageIndex, ...(ngDevMode ? [{ debugName: "$pageIndexChangeEvent" }] : []));
|
|
5765
|
+
this.$pageSizeChangeEvent = computed(() => this.$pageEvent()?.pageSize, ...(ngDevMode ? [{ debugName: "$pageSizeChangeEvent" }] : []));
|
|
5771
5766
|
this.$currentPageData = computed(() => {
|
|
5772
5767
|
const pageEvent = this.$pageEvent();
|
|
5773
5768
|
if (!pageEvent)
|
|
@@ -5780,20 +5775,20 @@ class PaginatorComponent {
|
|
|
5780
5775
|
const pageDetails = mapPaginationEventToCurrentPageDetails(pageEvent);
|
|
5781
5776
|
const dataLength = this.$dataLength();
|
|
5782
5777
|
return ({ ...pageDetails, total: dataLength });
|
|
5783
|
-
},
|
|
5778
|
+
}, ...(ngDevMode ? [{ debugName: "$currentPageData" }] : []));
|
|
5784
5779
|
this.#onPageIndexEffect = effect(() => {
|
|
5785
5780
|
const index = this.$pageIndexChangeEvent();
|
|
5786
5781
|
if (index === undefined)
|
|
5787
5782
|
return;
|
|
5788
5783
|
untracked(() => this.state.setCurrentPage(index));
|
|
5789
|
-
},
|
|
5784
|
+
}, ...(ngDevMode ? [{ debugName: "#onPageIndexEffect" }] : []));
|
|
5790
5785
|
this.#onPageSizeEffect = effect(() => {
|
|
5791
5786
|
const size = this.$pageSizeChangeEvent();
|
|
5792
5787
|
const initialized = this.state.$initializationState() >= InitializationState.Ready;
|
|
5793
5788
|
if (!size || !initialized)
|
|
5794
5789
|
return;
|
|
5795
5790
|
untracked(() => this.state.setUserDefinedPageSize(size));
|
|
5796
|
-
},
|
|
5791
|
+
}, ...(ngDevMode ? [{ debugName: "#onPageSizeEffect" }] : []));
|
|
5797
5792
|
this.#onMetaPageSizeEffect = effect(() => {
|
|
5798
5793
|
const paginator = this.$paginator();
|
|
5799
5794
|
if (!paginator)
|
|
@@ -5801,7 +5796,7 @@ class PaginatorComponent {
|
|
|
5801
5796
|
const metaPageSize = this.state.$pageSize();
|
|
5802
5797
|
const initialized = this.state.$initializationState() >= InitializationState.Ready;
|
|
5803
5798
|
untracked(() => initialized && paginator._changePageSize(metaPageSize));
|
|
5804
|
-
},
|
|
5799
|
+
}, ...(ngDevMode ? [{ debugName: "#onMetaPageSizeEffect" }] : []));
|
|
5805
5800
|
this.onDataLengthEffect = effect(() => {
|
|
5806
5801
|
const paginator = this.$paginator();
|
|
5807
5802
|
const dataLength = this.$viewableDataLength();
|
|
@@ -5815,8 +5810,8 @@ class PaginatorComponent {
|
|
|
5815
5810
|
}
|
|
5816
5811
|
}
|
|
5817
5812
|
});
|
|
5818
|
-
},
|
|
5819
|
-
this.$collapseFooter = computed(() => this.state.selectSignal(state => state.persistedTableSettings.collapseFooter)(),
|
|
5813
|
+
}, ...(ngDevMode ? [{ debugName: "onDataLengthEffect" }] : []));
|
|
5814
|
+
this.$collapseFooter = computed(() => this.state.selectSignal(state => state.persistedTableSettings.collapseFooter)(), ...(ngDevMode ? [{ debugName: "$collapseFooter" }] : []));
|
|
5820
5815
|
this.$showAllOption = this.state.selectSignal(s => s.notPersistedTableSettings?.paginatorSettings?.includeAllInOptions);
|
|
5821
5816
|
this.$showAll = this.state.$showAll;
|
|
5822
5817
|
}
|
|
@@ -5830,8 +5825,8 @@ class PaginatorComponent {
|
|
|
5830
5825
|
this.state.toggleCollapseFooter({ collapseFooter: true });
|
|
5831
5826
|
}
|
|
5832
5827
|
}
|
|
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
|
|
5828
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5829
|
+
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
5830
|
<div class="paginator-row">
|
|
5836
5831
|
@if($currentPageData(); as pageData)
|
|
5837
5832
|
{
|
|
@@ -5860,7 +5855,7 @@ class PaginatorComponent {
|
|
|
5860
5855
|
</div>
|
|
5861
5856
|
`, 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
5857
|
}
|
|
5863
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
5858
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PaginatorComponent, decorators: [{
|
|
5864
5859
|
type: Component,
|
|
5865
5860
|
args: [{ selector: 'tb-paginator', imports: [MatPaginatorModule, MatButtonModule], template: `
|
|
5866
5861
|
<div class="paginator-row">
|
|
@@ -5906,17 +5901,17 @@ class TableBuilderDataSource extends MatTableDataSource {
|
|
|
5906
5901
|
}
|
|
5907
5902
|
constructor(state, data) {
|
|
5908
5903
|
super([]);
|
|
5909
|
-
this.#$dataSrc = signal([],
|
|
5904
|
+
this.#$dataSrc = signal([], ...(ngDevMode ? [{ debugName: "#$dataSrc" }] : []));
|
|
5910
5905
|
this.$dataSize = signal({ start: 0, end: 0 }, { ...(ngDevMode ? { debugName: "$dataSize" } : {}), equal: (a, b) => a.start === b.start && a.end === b.end });
|
|
5911
5906
|
this._ = effect(() => {
|
|
5912
5907
|
const data = this.#$dataSrc();
|
|
5913
5908
|
const dataSize = this.$dataSize();
|
|
5914
5909
|
untracked(() => this.data = data.slice(dataSize.start, dataSize.end));
|
|
5915
|
-
},
|
|
5910
|
+
}, ...(ngDevMode ? [{ debugName: "_" }] : []));
|
|
5916
5911
|
const $currentPage = state.$currentPage;
|
|
5917
5912
|
const $pageSize = state.$pageSize;
|
|
5918
5913
|
const $virtualEnds = data.selectSignal(d => d.virtualEnds);
|
|
5919
|
-
const $dataLength = computed(() => this.#$dataSrc().length,
|
|
5914
|
+
const $dataLength = computed(() => this.#$dataSrc().length, ...(ngDevMode ? [{ debugName: "$dataLength" }] : []));
|
|
5920
5915
|
this.$dataSize = computed(() => {
|
|
5921
5916
|
const viewType = state.$viewType();
|
|
5922
5917
|
const dataLength = $dataLength();
|
|
@@ -5934,7 +5929,7 @@ class TableBuilderDataSource extends MatTableDataSource {
|
|
|
5934
5929
|
return ({ start: 0, end: dataLength });
|
|
5935
5930
|
}
|
|
5936
5931
|
return ({ start: virtualEnds.start, end: virtualEnds.end });
|
|
5937
|
-
},
|
|
5932
|
+
}, ...(ngDevMode ? [{ debugName: "$dataSize" }] : []));
|
|
5938
5933
|
}
|
|
5939
5934
|
connect() {
|
|
5940
5935
|
return super.connect();
|
|
@@ -5980,12 +5975,12 @@ class GroupByListComponent {
|
|
|
5980
5975
|
name: dict[gbk.key].displayName || gbk.key,
|
|
5981
5976
|
sort: this.tableStore.getGroupBySortDirection(gbk.key)(),
|
|
5982
5977
|
}));
|
|
5983
|
-
},
|
|
5978
|
+
}, ...(ngDevMode ? [{ debugName: "$groups" }] : []));
|
|
5984
5979
|
}
|
|
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
|
|
5980
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: GroupByListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5981
|
+
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
5982
|
}
|
|
5988
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
5983
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: GroupByListComponent, decorators: [{
|
|
5989
5984
|
type: Component,
|
|
5990
5985
|
args: [{ selector: 'group-by-list', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
5991
5986
|
MatChipsModule, MatIconModule, SpaceCasePipe, StopPropagationDirective
|
|
@@ -5998,13 +5993,13 @@ class ProfilesMenuComponent {
|
|
|
5998
5993
|
this.tableStore = inject(TableStore);
|
|
5999
5994
|
this.$tableId = input.required({ ...(ngDevMode ? { debugName: "$tableId" } : {}), alias: 'tableId' });
|
|
6000
5995
|
this.$isMatMenuChild = input(false, { ...(ngDevMode ? { debugName: "$isMatMenuChild" } : {}), alias: 'isMatMenuChild' });
|
|
6001
|
-
this.trigger = viewChild('trigger',
|
|
5996
|
+
this.trigger = viewChild('trigger', ...(ngDevMode ? [{ debugName: "trigger" }] : []));
|
|
6002
5997
|
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())(),
|
|
5998
|
+
this.allProfilesPanelOpened = signal(false, ...(ngDevMode ? [{ debugName: "allProfilesPanelOpened" }] : []));
|
|
5999
|
+
this.newProfilePanelOpened = signal(false, ...(ngDevMode ? [{ debugName: "newProfilePanelOpened" }] : []));
|
|
6000
|
+
this.$currentProfile = computed(() => this.stateService.$selectLocalProfileCurrentKey(this.$tableId())(), ...(ngDevMode ? [{ debugName: "$currentProfile" }] : []));
|
|
6001
|
+
this.$defaultProfile = computed(() => this.stateService.$selectLocalProfileDefaultKey(this.$tableId())(), ...(ngDevMode ? [{ debugName: "$defaultProfile" }] : []));
|
|
6002
|
+
this.$keys = computed(() => this.stateService.$selectLocalProfileKeys(this.$tableId())(), ...(ngDevMode ? [{ debugName: "$keys" }] : []));
|
|
6008
6003
|
this.defaultName = 'My Profile';
|
|
6009
6004
|
this.position$ = new Subject();
|
|
6010
6005
|
this.setPosition = (e) => {
|
|
@@ -6032,10 +6027,10 @@ class ProfilesMenuComponent {
|
|
|
6032
6027
|
unsetDefault() {
|
|
6033
6028
|
this.stateService.unsetDefaultFromLocalAndStorage(this.$tableId());
|
|
6034
6029
|
}
|
|
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
|
|
6030
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ProfilesMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6031
|
+
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
6032
|
}
|
|
6038
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
6033
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ProfilesMenuComponent, decorators: [{
|
|
6039
6034
|
type: Component,
|
|
6040
6035
|
args: [{ selector: 'tb-profiles-menu', imports: [MatIcon, MatTooltip, MatIconButton, MatMenuModule, MatButton, MatInput,
|
|
6041
6036
|
MatCheckbox, StopPropagationDirective, MatInputModule, FormsModule
|
|
@@ -6052,7 +6047,7 @@ class SortMenuComponentStore extends ComponentStore {
|
|
|
6052
6047
|
return;
|
|
6053
6048
|
this.tableState.$selectSorted();
|
|
6054
6049
|
untracked(() => this.setStateFromTableStore());
|
|
6055
|
-
},
|
|
6050
|
+
}, ...(ngDevMode ? [{ debugName: "setStoreStateEffect" }] : []));
|
|
6056
6051
|
this.setStateFromTableStore = () => {
|
|
6057
6052
|
const metaData = this.tableState.$metaData();
|
|
6058
6053
|
const sorted = [...this.tableState.$selectSorted()].map(s => ({
|
|
@@ -6078,10 +6073,10 @@ class SortMenuComponentStore extends ComponentStore {
|
|
|
6078
6073
|
this.setStateFromTableStore();
|
|
6079
6074
|
};
|
|
6080
6075
|
}
|
|
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
|
|
6076
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SortMenuComponentStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
6077
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SortMenuComponentStore }); }
|
|
6083
6078
|
}
|
|
6084
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
6079
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SortMenuComponentStore, decorators: [{
|
|
6085
6080
|
type: Injectable
|
|
6086
6081
|
}], ctorParameters: () => [] });
|
|
6087
6082
|
|
|
@@ -6090,9 +6085,9 @@ class SortMenuComponent {
|
|
|
6090
6085
|
this.SortDirection = SortDirection;
|
|
6091
6086
|
this.tableState = inject(TableStore);
|
|
6092
6087
|
this.store = inject(SortMenuComponentStore);
|
|
6093
|
-
this.$sorted = computed(() => [...this.store.$sorted()],
|
|
6094
|
-
this.$notSorted = computed(() => [...this.store.$notSorted()],
|
|
6095
|
-
this.$dirty = signal(false,
|
|
6088
|
+
this.$sorted = computed(() => [...this.store.$sorted()], ...(ngDevMode ? [{ debugName: "$sorted" }] : []));
|
|
6089
|
+
this.$notSorted = computed(() => [...this.store.$notSorted()], ...(ngDevMode ? [{ debugName: "$notSorted" }] : []));
|
|
6090
|
+
this.$dirty = signal(false, ...(ngDevMode ? [{ debugName: "$dirty" }] : []));
|
|
6096
6091
|
this.apply = () => {
|
|
6097
6092
|
this.$dirty.set(false);
|
|
6098
6093
|
this.tableState.setAllSort(this.store.$sorted());
|
|
@@ -6135,10 +6130,10 @@ class SortMenuComponent {
|
|
|
6135
6130
|
this.$dirty.set(true);
|
|
6136
6131
|
this.store.setDirection(sort);
|
|
6137
6132
|
}
|
|
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
|
|
6133
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SortMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6134
|
+
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
6135
|
}
|
|
6141
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
6136
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: SortMenuComponent, decorators: [{
|
|
6142
6137
|
type: Component,
|
|
6143
6138
|
args: [{ selector: 'tb-sort-menu', providers: [SortMenuComponentStore], changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
6144
6139
|
MatTooltipModule, MatButtonModule, MatIconModule, MatMenuModule, StopPropagationDirective, DragDropModule,
|
|
@@ -6156,7 +6151,7 @@ class ResetMenuComponent {
|
|
|
6156
6151
|
return Object.values(this.state.$filters())
|
|
6157
6152
|
.filter(f => (isCustomFilter(f) && f.active) || f.filterValue != undefined)
|
|
6158
6153
|
.length;
|
|
6159
|
-
},
|
|
6154
|
+
}, ...(ngDevMode ? [{ debugName: "$filtersSet" }] : []));
|
|
6160
6155
|
this.$sortSet = computed(() => {
|
|
6161
6156
|
const sorts = this.state.$selectSorted();
|
|
6162
6157
|
if (!sorts.length)
|
|
@@ -6165,14 +6160,14 @@ class ResetMenuComponent {
|
|
|
6165
6160
|
if (!preSorts.length)
|
|
6166
6161
|
return true;
|
|
6167
6162
|
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,
|
|
6163
|
+
}, ...(ngDevMode ? [{ debugName: "$sortSet" }] : []));
|
|
6164
|
+
this.$groupBySet = computed(() => this.state.$groupByData().length || this.state.$userDefinedNoGroups(), ...(ngDevMode ? [{ debugName: "$groupBySet" }] : []));
|
|
6165
|
+
this.$hiddenSet = computed(() => this.state.$hiddenKeys().length, ...(ngDevMode ? [{ debugName: "$hiddenSet" }] : []));
|
|
6166
|
+
this.$orderSet = computed(() => Object.keys(this.state.$userDefinedOrder()).length, ...(ngDevMode ? [{ debugName: "$orderSet" }] : []));
|
|
6167
|
+
this.$widthsSet = computed(() => Object.keys(this.state.$getUserDefinedWidths()).length, ...(ngDevMode ? [{ debugName: "$widthsSet" }] : []));
|
|
6173
6168
|
this.$rowHeightSet = this.state.$userDefinedRowHeight;
|
|
6174
6169
|
this.headerHeightSet = this.state.$userDefinedHeaderHeight;
|
|
6175
|
-
this.pageSizeSet = computed(() => this.state.$userDefinedPageSize() && this.state.$userDefinedPageSize() !== this.state.selectSignal(s => s.pageSize)(),
|
|
6170
|
+
this.pageSizeSet = computed(() => this.state.$userDefinedPageSize() && this.state.$userDefinedPageSize() !== this.state.selectSignal(s => s.pageSize)(), ...(ngDevMode ? [{ debugName: "pageSizeSet" }] : []));
|
|
6176
6171
|
this.showAllSet = this.state.selectSignal(s => s.userDefined.showAll);
|
|
6177
6172
|
this.$set = computed(() => {
|
|
6178
6173
|
const arr = [];
|
|
@@ -6207,7 +6202,7 @@ class ResetMenuComponent {
|
|
|
6207
6202
|
arr.push('Show All');
|
|
6208
6203
|
}
|
|
6209
6204
|
return arr;
|
|
6210
|
-
},
|
|
6205
|
+
}, ...(ngDevMode ? [{ debugName: "$set" }] : []));
|
|
6211
6206
|
this.resetable = resetable;
|
|
6212
6207
|
}
|
|
6213
6208
|
resetState() {
|
|
@@ -6219,10 +6214,10 @@ class ResetMenuComponent {
|
|
|
6219
6214
|
reset(s) {
|
|
6220
6215
|
this.state.resetPart(s);
|
|
6221
6216
|
}
|
|
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
|
|
6217
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ResetMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6218
|
+
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
6219
|
}
|
|
6225
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
6220
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ResetMenuComponent, decorators: [{
|
|
6226
6221
|
type: Component,
|
|
6227
6222
|
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
6223
|
}], propDecorators: { menu: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatMenu), { isSignal: true }] }], onStateReset$: [{ type: i0.Output, args: ["onStateReset"] }] } });
|
|
@@ -6233,8 +6228,8 @@ class TableHeaderMenuComponent {
|
|
|
6233
6228
|
this.exportToCsvService = inject(ExportToCsvService);
|
|
6234
6229
|
this.tableContainer = inject(TableContainerComponent);
|
|
6235
6230
|
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,
|
|
6231
|
+
this.$rowHeightNum = computed(() => +(this.tableContainer.$genericTable()?.$rowHeight()?.replace('px', '') || 0) || undefined, ...(ngDevMode ? [{ debugName: "$rowHeightNum" }] : []));
|
|
6232
|
+
this.$headerHeightNum = computed(() => +(this.tableContainer.$genericTable()?.$headerHeight()?.replace('px', '') || 0) || undefined, ...(ngDevMode ? [{ debugName: "$headerHeightNum" }] : []));
|
|
6238
6233
|
}
|
|
6239
6234
|
exportToCsv() {
|
|
6240
6235
|
this.exportToCsvService.exportToCsv(this.tableContainer.$data());
|
|
@@ -6249,10 +6244,10 @@ class TableHeaderMenuComponent {
|
|
|
6249
6244
|
if (v === 'header')
|
|
6250
6245
|
this.state.setUserDefinedHeaderHeight(+element.value);
|
|
6251
6246
|
}
|
|
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
|
|
6247
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TableHeaderMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6248
|
+
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
6249
|
}
|
|
6255
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
6250
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TableHeaderMenuComponent, decorators: [{
|
|
6256
6251
|
type: Component,
|
|
6257
6252
|
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
6253
|
}], propDecorators: { menu: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatMenu), { isSignal: true }] }] } });
|
|
@@ -6280,7 +6275,7 @@ class TableVirtualScrollStrategy {
|
|
|
6280
6275
|
return;
|
|
6281
6276
|
this.updateContent('data length');
|
|
6282
6277
|
});
|
|
6283
|
-
},
|
|
6278
|
+
}, ...(ngDevMode ? [{ debugName: "#onDataLengthChange" }] : []));
|
|
6284
6279
|
this.#onHeaderChange = effect(() => {
|
|
6285
6280
|
const headerHeightChange = this.$headerHeightChange();
|
|
6286
6281
|
untracked(() => {
|
|
@@ -6288,7 +6283,7 @@ class TableVirtualScrollStrategy {
|
|
|
6288
6283
|
return;
|
|
6289
6284
|
this.updateContent('header height');
|
|
6290
6285
|
});
|
|
6291
|
-
},
|
|
6286
|
+
}, ...(ngDevMode ? [{ debugName: "#onHeaderChange" }] : []));
|
|
6292
6287
|
this.#onRowChange = effect(() => {
|
|
6293
6288
|
const rowHeightChange = this.$rowHeightChange();
|
|
6294
6289
|
untracked(() => {
|
|
@@ -6296,8 +6291,8 @@ class TableVirtualScrollStrategy {
|
|
|
6296
6291
|
return;
|
|
6297
6292
|
this.updateContent('row height');
|
|
6298
6293
|
});
|
|
6299
|
-
},
|
|
6300
|
-
this.$currentRange = signal({ start: 0, end: 0 },
|
|
6294
|
+
}, ...(ngDevMode ? [{ debugName: "#onRowChange" }] : []));
|
|
6295
|
+
this.$currentRange = signal({ start: 0, end: 0 }, ...(ngDevMode ? [{ debugName: "$currentRange" }] : []));
|
|
6301
6296
|
this.$rowHeight = scrollContainer.computedRowHeight;
|
|
6302
6297
|
this.$headerHeight = scrollContainer.computedHeaderHeight;
|
|
6303
6298
|
this.viewport = scrollContainer.viewport;
|
|
@@ -6371,7 +6366,7 @@ class VirtualScrollContainer {
|
|
|
6371
6366
|
this.state = inject(TableStore);
|
|
6372
6367
|
this.dataStore = inject(DataStore);
|
|
6373
6368
|
this.viewport = viewChild.required(CdkVirtualScrollViewport);
|
|
6374
|
-
this.genericTable = contentChild(GenericTableComponent,
|
|
6369
|
+
this.genericTable = contentChild(GenericTableComponent, ...(ngDevMode ? [{ debugName: "genericTable" }] : []));
|
|
6375
6370
|
this.tableContainer = inject(TableContainerComponent);
|
|
6376
6371
|
this.defaultOptions = new VirtualScrollOptions();
|
|
6377
6372
|
this.$usePaginator = this.state.selectSignal(s => s.notPersistedTableSettings.usePaginator);
|
|
@@ -6387,8 +6382,8 @@ class VirtualScrollContainer {
|
|
|
6387
6382
|
return this.state.$tableSettings().virtualSettings;
|
|
6388
6383
|
else
|
|
6389
6384
|
return undefined;
|
|
6390
|
-
},
|
|
6391
|
-
this.$optionsSet = computed(() => !!this.$virtualScrollOptions(),
|
|
6385
|
+
}, ...(ngDevMode ? [{ debugName: "$virtualScrollOptions" }] : []));
|
|
6386
|
+
this.$optionsSet = computed(() => !!this.$virtualScrollOptions(), ...(ngDevMode ? [{ debugName: "$optionsSet" }] : []));
|
|
6392
6387
|
this.$dataLength = computed(() => {
|
|
6393
6388
|
const paginated = this.$usePaginator() && !this.$showAll();
|
|
6394
6389
|
const pageSize = this.$pageSize();
|
|
@@ -6397,7 +6392,7 @@ class VirtualScrollContainer {
|
|
|
6397
6392
|
if (paginated)
|
|
6398
6393
|
return Math.min(dataLen - (pageNumber * pageSize), pageSize);
|
|
6399
6394
|
return dataLen;
|
|
6400
|
-
},
|
|
6395
|
+
}, ...(ngDevMode ? [{ debugName: "$dataLength" }] : []));
|
|
6401
6396
|
this.#setViewportEffect = effect(() => {
|
|
6402
6397
|
const viewport = this.viewport();
|
|
6403
6398
|
const options = this.$optionsSet();
|
|
@@ -6406,7 +6401,7 @@ class VirtualScrollContainer {
|
|
|
6406
6401
|
this.setSize(this.viewport().elementRef, 'initial');
|
|
6407
6402
|
}
|
|
6408
6403
|
});
|
|
6409
|
-
},
|
|
6404
|
+
}, ...(ngDevMode ? [{ debugName: "#setViewportEffect" }] : []));
|
|
6410
6405
|
this.#onRenderedRangeEffect = effect(() => {
|
|
6411
6406
|
const renderedRange = this.$renderedRange();
|
|
6412
6407
|
const viewport = this.viewport();
|
|
@@ -6423,7 +6418,7 @@ class VirtualScrollContainer {
|
|
|
6423
6418
|
return;
|
|
6424
6419
|
this.setSize(viewport.elementRef, 'rendered range');
|
|
6425
6420
|
});
|
|
6426
|
-
},
|
|
6421
|
+
}, ...(ngDevMode ? [{ debugName: "#onRenderedRangeEffect" }] : []));
|
|
6427
6422
|
this.resizeHandler = () => {
|
|
6428
6423
|
if (this.viewport() && this.$virtualScrollOptions()?.dynamicHeight) {
|
|
6429
6424
|
this.setSize(this.viewport().elementRef, 'resize');
|
|
@@ -6433,23 +6428,23 @@ class VirtualScrollContainer {
|
|
|
6433
6428
|
const virtualScrollOptions = this.state.$tableSettings().virtualSettings;
|
|
6434
6429
|
const rowHeight = this.state.$userDefinedRowHeight() || virtualScrollOptions?.rowHeight || this.state.$tableSettings().rowHeight || this.defaultOptions.rowHeight;
|
|
6435
6430
|
return parseTbSizeToPixels(rowHeight) || 0;
|
|
6436
|
-
},
|
|
6431
|
+
}, ...(ngDevMode ? [{ debugName: "computedRowHeight" }] : []));
|
|
6437
6432
|
this.computedHeaderHeight = computed(() => {
|
|
6438
6433
|
if (this.state.$tableSettings().hideHeader)
|
|
6439
6434
|
return 0;
|
|
6440
6435
|
const virtualScrollOptions = this.state.$tableSettings().virtualSettings;
|
|
6441
6436
|
const headerHeight = this.state.$userDefinedHeaderHeight() || virtualScrollOptions?.headerHeight || this.state.$tableSettings().headerHeight || this.defaultOptions.headerHeight;
|
|
6442
6437
|
return parseTbSizeToPixels(headerHeight) || 0;
|
|
6443
|
-
},
|
|
6438
|
+
}, ...(ngDevMode ? [{ debugName: "computedHeaderHeight" }] : []));
|
|
6444
6439
|
this.computedFooterHeight = computed(() => {
|
|
6445
6440
|
return parseFloat(this.genericTable()?.$footerHeight()?.replace('px', '') || '0');
|
|
6446
|
-
},
|
|
6441
|
+
}, ...(ngDevMode ? [{ debugName: "computedFooterHeight" }] : []));
|
|
6447
6442
|
this.computedBuffer = computed(() => {
|
|
6448
6443
|
const virtualScrollOptions = this.state.$tableSettings().virtualSettings;
|
|
6449
6444
|
if (!virtualScrollOptions.dynamicalHeightBuffer)
|
|
6450
6445
|
return 0;
|
|
6451
6446
|
return parseTbSizeToPixels(virtualScrollOptions.dynamicalHeightBuffer) || 0;
|
|
6452
|
-
},
|
|
6447
|
+
}, ...(ngDevMode ? [{ debugName: "computedBuffer" }] : []));
|
|
6453
6448
|
this.scrollStrategy = new TableVirtualScrollStrategy(this, this.dataStore);
|
|
6454
6449
|
addEventListener('resize', this.resizeHandler);
|
|
6455
6450
|
}
|
|
@@ -6515,8 +6510,8 @@ class VirtualScrollContainer {
|
|
|
6515
6510
|
const virtualScrollOffset = this.viewport()?.getOffsetToRenderedContentStart() ?? 0;
|
|
6516
6511
|
this.dataStore.patchState({ virtualScrollOffset });
|
|
6517
6512
|
}
|
|
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
|
|
6513
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: VirtualScrollContainer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6514
|
+
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
6515
|
<cdk-virtual-scroll-viewport>
|
|
6521
6516
|
<ng-content/>
|
|
6522
6517
|
</cdk-virtual-scroll-viewport>
|
|
@@ -6528,7 +6523,7 @@ class VirtualScrollContainer {
|
|
|
6528
6523
|
},
|
|
6529
6524
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6530
6525
|
}
|
|
6531
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
6526
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: VirtualScrollContainer, decorators: [{
|
|
6532
6527
|
type: Component,
|
|
6533
6528
|
args: [{
|
|
6534
6529
|
selector: 'tb-virtual-scroll-container',
|
|
@@ -6562,13 +6557,14 @@ class TableContainerComponent {
|
|
|
6562
6557
|
this.dataSource = new TableBuilderDataSource(this.state, this.dataStore);
|
|
6563
6558
|
this.$filterDirectives = contentChildren(TableFilterDirective, { ...(ngDevMode ? { debugName: "$filterDirectives" } : {}), descendants: true });
|
|
6564
6559
|
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.$
|
|
6560
|
+
this.$paginatorComponent = viewChild(PaginatorComponent, ...(ngDevMode ? [{ debugName: "$paginatorComponent" }] : []));
|
|
6561
|
+
this.$paginatorWrapper = viewChild('paginatorWrapper', ...(ngDevMode ? [{ debugName: "$paginatorWrapper" }] : []));
|
|
6562
|
+
this.$genericTable = viewChild(GenericTableComponent, ...(ngDevMode ? [{ debugName: "$genericTable" }] : []));
|
|
6563
|
+
this._$customRows = contentChildren((MatRowDef), ...(ngDevMode ? [{ debugName: "_$customRows" }] : []));
|
|
6564
|
+
this.$customRows = computed(() => [...this._$customRows()], ...(ngDevMode ? [{ debugName: "$customRows" }] : []));
|
|
6565
|
+
this.$customCells = contentChildren(CustomCellDirective, ...(ngDevMode ? [{ debugName: "$customCells" }] : []));
|
|
6566
|
+
this.$customHeaders = contentChildren(CustomHeaderDirective, ...(ngDevMode ? [{ debugName: "$customHeaders" }] : []));
|
|
6567
|
+
this.$customGroupRows = contentChildren(CustomGroupRowDirective, ...(ngDevMode ? [{ debugName: "$customGroupRows" }] : []));
|
|
6572
6568
|
this.$menu = viewChild.required(MatMenu);
|
|
6573
6569
|
this.menuInjector = Injector.create({
|
|
6574
6570
|
providers: [{ provide: MatMenu, useFactory: () => this.$menu() }],
|
|
@@ -6578,7 +6574,7 @@ class TableContainerComponent {
|
|
|
6578
6574
|
this.$tableIdInput = input(undefined, { ...(ngDevMode ? { debugName: "$tableIdInput" } : {}), alias: 'tableId' });
|
|
6579
6575
|
this.$trackByInput = input(undefined, { ...(ngDevMode ? { debugName: "$trackByInput" } : {}), alias: 'trackBy' });
|
|
6580
6576
|
this.$inputFilters = input([], { ...(ngDevMode ? { debugName: "$inputFilters" } : {}), alias: 'inputFilters' });
|
|
6581
|
-
this.$filterInfoInputs = computed(() => this.$inputFilters().filter(i => !isFunction(i)),
|
|
6577
|
+
this.$filterInfoInputs = computed(() => this.$inputFilters().filter(i => !isFunction(i)), ...(ngDevMode ? [{ debugName: "$filterInfoInputs" }] : []));
|
|
6582
6578
|
this.$indexColumnInput = input(false, { ...(ngDevMode ? { debugName: "$indexColumnInput" } : {}), alias: 'indexColumn' });
|
|
6583
6579
|
this.$selectionColumnInput = input(false, { ...(ngDevMode ? { debugName: "$selectionColumnInput" } : {}), alias: 'selectionColumn' });
|
|
6584
6580
|
this.$stickyHeaderInput = input(true, { ...(ngDevMode ? { debugName: "$stickyHeaderInput" } : {}), alias: 'stickyHeader' });
|
|
@@ -6591,14 +6587,14 @@ class TableContainerComponent {
|
|
|
6591
6587
|
this.onStateReset$ = output({ alias: 'onStateReset' });
|
|
6592
6588
|
this.onSaveState$ = output({ alias: 'onSaveState' });
|
|
6593
6589
|
this.state$ = outputFromObservable(toObservable(this.state.$savableState), { alias: 'state' });
|
|
6594
|
-
this.$data = computed(() => this.$sortedAndFilteredData()?.value || [],
|
|
6590
|
+
this.$data = computed(() => this.$sortedAndFilteredData()?.value || [], ...(ngDevMode ? [{ debugName: "$data" }] : []));
|
|
6595
6591
|
this.data$ = outputFromObservable(toObservable(this.$data), { alias: 'data' });
|
|
6596
6592
|
/**
|
|
6597
6593
|
* Will be different than $data if grouping is applied
|
|
6598
6594
|
*/
|
|
6599
|
-
this.$sortedAndFilteredAndGroupedData = computed(() => this.$filteredSortedAndGrouped()?.displayData || [],
|
|
6595
|
+
this.$sortedAndFilteredAndGroupedData = computed(() => this.$filteredSortedAndGrouped()?.displayData || [], ...(ngDevMode ? [{ debugName: "$sortedAndFilteredAndGroupedData" }] : []));
|
|
6600
6596
|
this.sortedAndFilteredAndGroupedData$ = outputFromObservable(toObservable(this.$sortedAndFilteredAndGroupedData), { alias: 'sortedAndFilteredAndGroupedData' });
|
|
6601
|
-
this.$displayData = computed(() => this.$tableBuilder() && this.$filteredSortedAndGrouped()?.displayData,
|
|
6597
|
+
this.$displayData = computed(() => this.$tableBuilder() && this.$filteredSortedAndGrouped()?.displayData, ...(ngDevMode ? [{ debugName: "$displayData" }] : []));
|
|
6602
6598
|
this.expandAllGroups = () => {
|
|
6603
6599
|
const groupHeaders = getAllGroupHeaderNames(this.$displayData());
|
|
6604
6600
|
this.state.expandOfGroup(groupHeaders.map(g => ({ groupKey: g.groupKey, uniqueNameOfHeadersToExpand: g.headers })));
|
|
@@ -6612,25 +6608,26 @@ class TableContainerComponent {
|
|
|
6612
6608
|
this.$myColumns = computed(() => {
|
|
6613
6609
|
return this.state.$metaDataArray().map(metaData => ({
|
|
6614
6610
|
metaData,
|
|
6615
|
-
customCell: this.$customCells().filter(cc => cc.$inited()).find(cc => cc.$customCell() === metaData.key)
|
|
6611
|
+
customCell: this.$customCells().filter(cc => cc.$inited()).find(cc => cc.$customCell() === metaData.key),
|
|
6612
|
+
customHeader: this.$customHeaders().filter(ch => ch.$inited()).find(ch => ch.$customHeader() === metaData.key)
|
|
6616
6613
|
}));
|
|
6617
|
-
},
|
|
6614
|
+
}, ...(ngDevMode ? [{ debugName: "$myColumns" }] : []));
|
|
6618
6615
|
this.$useVirtual = this.state.$isVirtual;
|
|
6619
6616
|
this.$collapsedFooter = this.state.$footerCollapsed;
|
|
6620
6617
|
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,
|
|
6618
|
+
this.$displayDataLength = computed(() => this.$displayData()?.length || 0, ...(ngDevMode ? [{ debugName: "$displayDataLength" }] : []));
|
|
6619
|
+
this.$tableBuilderSettings = computed(() => this.$tableBuilder().$settings(), ...(ngDevMode ? [{ debugName: "$tableBuilderSettings" }] : []));
|
|
6620
|
+
this.$trackBy = computed(() => this.$trackByInput() || this.$tableBuilderSettings()?.tableSettings?.trackBy, ...(ngDevMode ? [{ debugName: "$trackBy" }] : []));
|
|
6621
|
+
this.$tableId = computed(() => this.$tableIdInput() || this.$tableBuilderSettings()?.tableSettings?.tableId, ...(ngDevMode ? [{ debugName: "$tableId" }] : []));
|
|
6622
|
+
this.$includeSelectionColumn = computed(() => this.$selectionColumnInput() || !!this.$tableBuilderSettings()?.tableSettings?.includeSelectionColumn, ...(ngDevMode ? [{ debugName: "$includeSelectionColumn" }] : []));
|
|
6623
|
+
this.$includeIndexColumn = computed(() => this.$indexColumnInput() || !!this.$tableBuilderSettings()?.tableSettings?.includeIndexColumn, ...(ngDevMode ? [{ debugName: "$includeIndexColumn" }] : []));
|
|
6627
6624
|
this.$stickyHeader = computed(() => {
|
|
6628
6625
|
const settings = this.$tableBuilderSettings()?.columnHeaderSettings?.stickyHeaderRow;
|
|
6629
6626
|
if (settings != null) {
|
|
6630
6627
|
return settings;
|
|
6631
6628
|
}
|
|
6632
6629
|
return this.$stickyHeaderInput();
|
|
6633
|
-
},
|
|
6630
|
+
}, ...(ngDevMode ? [{ debugName: "$stickyHeader" }] : []));
|
|
6634
6631
|
this.$stickyFooter = computed(() => {
|
|
6635
6632
|
if (this.$stickyFooterInput() != null) {
|
|
6636
6633
|
return !!this.$stickyFooterInput();
|
|
@@ -6639,7 +6636,7 @@ class TableContainerComponent {
|
|
|
6639
6636
|
return !!this.$tableBuilderSettings()?.columnFooterSettings?.stickyFooterRow;
|
|
6640
6637
|
}
|
|
6641
6638
|
return this.config.defaultTableSettings?.columnFooterSettings?.stickyFooterRow || false;
|
|
6642
|
-
},
|
|
6639
|
+
}, ...(ngDevMode ? [{ debugName: "$stickyFooter" }] : []));
|
|
6643
6640
|
this.$props = computed(() => {
|
|
6644
6641
|
const indexColumn = this.$includeIndexColumn();
|
|
6645
6642
|
const selectionColumn = this.$includeSelectionColumn();
|
|
@@ -6649,7 +6646,7 @@ class TableContainerComponent {
|
|
|
6649
6646
|
const groupHeaderHeight = this.$groupHeaderHeight();
|
|
6650
6647
|
const customGroupRows = this.$customGroupRows().filter(cgr => cgr.$inited());
|
|
6651
6648
|
return ({ indexColumn, selectionColumn, isSticky: stickHeader, stickyFooter, groupHeaderTemplate, groupHeaderHeight, customGroupRows });
|
|
6652
|
-
},
|
|
6649
|
+
}, ...(ngDevMode ? [{ debugName: "$props" }] : []));
|
|
6653
6650
|
this.#initTableBuilder = effect(() => {
|
|
6654
6651
|
const tb = this.$tableBuilder();
|
|
6655
6652
|
untracked(() => {
|
|
@@ -6658,7 +6655,7 @@ class TableContainerComponent {
|
|
|
6658
6655
|
tb._container.set(this);
|
|
6659
6656
|
}
|
|
6660
6657
|
});
|
|
6661
|
-
},
|
|
6658
|
+
}, ...(ngDevMode ? [{ debugName: "#initTableBuilder" }] : []));
|
|
6662
6659
|
this.#initializeTableSettingsFromTableBuilderAndPersistedStateEffect = effect(() => {
|
|
6663
6660
|
const metaLoaded = this.$isInitializationState(InitializationState.MetaDataLoaded)();
|
|
6664
6661
|
if (!metaLoaded)
|
|
@@ -6673,14 +6670,14 @@ class TableContainerComponent {
|
|
|
6673
6670
|
}
|
|
6674
6671
|
this.state.setInitializationState(InitializationState.Ready);
|
|
6675
6672
|
});
|
|
6676
|
-
},
|
|
6673
|
+
}, ...(ngDevMode ? [{ debugName: "#initializeTableSettingsFromTableBuilderAndPersistedStateEffect" }] : []));
|
|
6677
6674
|
this.#setPageSizeFromInputEffect = effect(() => {
|
|
6678
6675
|
const pageSize = this.$pageSize();
|
|
6679
6676
|
const userDefinedPageSize = this.state.$userDefinedPageSize();
|
|
6680
6677
|
if (pageSize && !userDefinedPageSize) {
|
|
6681
6678
|
untracked(() => this.state.setPageSize(pageSize));
|
|
6682
6679
|
}
|
|
6683
|
-
},
|
|
6680
|
+
}, ...(ngDevMode ? [{ debugName: "#setPageSizeFromInputEffect" }] : []));
|
|
6684
6681
|
this.#patchedFilters = [];
|
|
6685
6682
|
this.#patchSavableFilterDirectivesFromPersistedStateEffect = effect(() => {
|
|
6686
6683
|
const loaded = this.$isInitializationState(InitializationState.TableSettingsLoaded)();
|
|
@@ -6696,7 +6693,7 @@ class TableContainerComponent {
|
|
|
6696
6693
|
this.state.addFilter(f.filter$);
|
|
6697
6694
|
});
|
|
6698
6695
|
});
|
|
6699
|
-
},
|
|
6696
|
+
}, ...(ngDevMode ? [{ debugName: "#patchSavableFilterDirectivesFromPersistedStateEffect" }] : []));
|
|
6700
6697
|
this.#patchSavableFilterInputsFromPersistedStateEffect = effect(() => {
|
|
6701
6698
|
const loaded = this.$isInitializationState(InitializationState.TableSettingsLoaded)();
|
|
6702
6699
|
const inputFilters = this.$filterInfoInputs();
|
|
@@ -6717,11 +6714,11 @@ class TableContainerComponent {
|
|
|
6717
6714
|
this.#patchedFilters.push(f.filterId);
|
|
6718
6715
|
});
|
|
6719
6716
|
});
|
|
6720
|
-
},
|
|
6717
|
+
}, ...(ngDevMode ? [{ debugName: "#patchSavableFilterInputsFromPersistedStateEffect" }] : []));
|
|
6721
6718
|
this.#addPropsToStoreFromInputsEffect = effect(() => {
|
|
6722
6719
|
const props = this.$props();
|
|
6723
6720
|
untracked(() => this.state.setProps(props));
|
|
6724
|
-
},
|
|
6721
|
+
}, ...(ngDevMode ? [{ debugName: "#addPropsToStoreFromInputsEffect" }] : []));
|
|
6725
6722
|
this.#addMetaDataToStoreEffect = effect(() => {
|
|
6726
6723
|
const allMetaDatas = this.$allMetaDatas();
|
|
6727
6724
|
if (!allMetaDatas)
|
|
@@ -6730,7 +6727,7 @@ class TableContainerComponent {
|
|
|
6730
6727
|
this.state.setMetaData(allMetaDatas);
|
|
6731
6728
|
this.state.setLinkMaps(createLinkCreatorDict(allMetaDatas));
|
|
6732
6729
|
});
|
|
6733
|
-
},
|
|
6730
|
+
}, ...(ngDevMode ? [{ debugName: "#addMetaDataToStoreEffect" }] : []));
|
|
6734
6731
|
this.#setFilteredDataLengthEffect = effect(() => {
|
|
6735
6732
|
const tableBuilder = this.$tableBuilder();
|
|
6736
6733
|
const data = this.$sortedAndFilteredData();
|
|
@@ -6739,7 +6736,7 @@ class TableContainerComponent {
|
|
|
6739
6736
|
untracked(() => {
|
|
6740
6737
|
this.dataStore.patchState({ sortedFilteredDataLength: data.value.length });
|
|
6741
6738
|
});
|
|
6742
|
-
},
|
|
6739
|
+
}, ...(ngDevMode ? [{ debugName: "#setFilteredDataLengthEffect" }] : []));
|
|
6743
6740
|
this.#setDataSourceDataEffect = effect(() => {
|
|
6744
6741
|
const tableBuilder = this.$tableBuilder();
|
|
6745
6742
|
const flat = this.$filteredSortedAndGrouped();
|
|
@@ -6750,7 +6747,7 @@ class TableContainerComponent {
|
|
|
6750
6747
|
this.dataSource.setData(data);
|
|
6751
6748
|
this.dataStore.patchState({ sortedFilteredGroupedDataLength: data.length });
|
|
6752
6749
|
});
|
|
6753
|
-
},
|
|
6750
|
+
}, ...(ngDevMode ? [{ debugName: "#setDataSourceDataEffect" }] : []));
|
|
6754
6751
|
this.#destroyRef = inject(DestroyRef).onDestroy(() => {
|
|
6755
6752
|
const tableId = this.$tableId();
|
|
6756
6753
|
if (tableId) {
|
|
@@ -6763,14 +6760,14 @@ class TableContainerComponent {
|
|
|
6763
6760
|
return this.stateService.$selectLocalTableStateForView(tableId)();
|
|
6764
6761
|
}
|
|
6765
6762
|
return undefined;
|
|
6766
|
-
},
|
|
6763
|
+
}, ...(ngDevMode ? [{ debugName: "$persistedState" }] : []));
|
|
6767
6764
|
this.$allFilterDirectives = computed(() => {
|
|
6768
6765
|
if (this.wrapper) {
|
|
6769
6766
|
return [...this.$filterDirectives(), ...this.$customFilterDirectives(), ...this.wrapper.$registrations()];
|
|
6770
6767
|
}
|
|
6771
6768
|
return [...this.$filterDirectives(), ...this.$customFilterDirectives()];
|
|
6772
|
-
},
|
|
6773
|
-
this.$tableBuilderMetaData = computed(() => this.$tableBuilder()?.$metaData(),
|
|
6769
|
+
}, ...(ngDevMode ? [{ debugName: "$allFilterDirectives" }] : []));
|
|
6770
|
+
this.$tableBuilderMetaData = computed(() => this.$tableBuilder()?.$metaData(), ...(ngDevMode ? [{ debugName: "$tableBuilderMetaData" }] : []));
|
|
6774
6771
|
this.$allMetaDatas = computed(() => {
|
|
6775
6772
|
const tableBuilderMetaData = this.$tableBuilderMetaData();
|
|
6776
6773
|
if (!tableBuilderMetaData)
|
|
@@ -6778,7 +6775,7 @@ class TableContainerComponent {
|
|
|
6778
6775
|
const customCellMetaDatas = this.$customCells().filter(cc => cc.$inited()).map(cc => cc.$metaData()).filter(d => !!d);
|
|
6779
6776
|
const mappedCustomCellMetaDatas = customCellMetaDatas.map(md => mergeCustomCellMetaData(md, tableBuilderMetaData.find(item => item.key === md.key)));
|
|
6780
6777
|
return [...tableBuilderMetaData, ...mappedCustomCellMetaDatas];
|
|
6781
|
-
},
|
|
6778
|
+
}, ...(ngDevMode ? [{ debugName: "$allMetaDatas" }] : []));
|
|
6782
6779
|
this.$allMetaDataTimeStamped = linkedSignal({ ...(ngDevMode ? { debugName: "$allMetaDataTimeStamped" } : {}), source: this.$allMetaDatas,
|
|
6783
6780
|
computation: (curr, previous) => {
|
|
6784
6781
|
return { timestamp: Date.now(), value: curr || [], previous: previous?.value.value || [] };
|
|
@@ -6793,7 +6790,7 @@ class TableContainerComponent {
|
|
|
6793
6790
|
const mapped = buildInAllValuesFilter(this.config, allMeta.previous, allMeta.value, data.value, allMeta.timestamp, data.timestamp, currentAll);
|
|
6794
6791
|
this.state.patchState({ allFilters: mapped });
|
|
6795
6792
|
});
|
|
6796
|
-
},
|
|
6793
|
+
}, ...(ngDevMode ? [{ debugName: "#setUpAllValuesFilters" }] : []));
|
|
6797
6794
|
this.$preds = computed(() => {
|
|
6798
6795
|
const predicateInputFilters = this.$inputFilters().filter(isFunction);
|
|
6799
6796
|
const notSavableFilterDirectives = this.$allFilterDirectives()
|
|
@@ -6802,7 +6799,7 @@ class TableContainerComponent {
|
|
|
6802
6799
|
.filter(d => !!d && needsFilterCreation(d))
|
|
6803
6800
|
.map(d => createFilterFunc(d));
|
|
6804
6801
|
return [...predicateInputFilters, ...notSavableFilterDirectives];
|
|
6805
|
-
},
|
|
6802
|
+
}, ...(ngDevMode ? [{ debugName: "$preds" }] : []));
|
|
6806
6803
|
this.$predicateFiltersState = linkedSignal({ ...(ngDevMode ? { debugName: "$predicateFiltersState" } : {}), source: this.$preds,
|
|
6807
6804
|
computation: (curr, previous) => {
|
|
6808
6805
|
if (!previous?.value)
|
|
@@ -6819,7 +6816,7 @@ class TableContainerComponent {
|
|
|
6819
6816
|
if (!this.$isInitializationState(InitializationState.Ready)())
|
|
6820
6817
|
return undefined;
|
|
6821
6818
|
return ({ value: updateFilterState(this.$savableFiltersState(), this.$predicateFiltersState()), timestamp: Date.now() });
|
|
6822
|
-
},
|
|
6819
|
+
}, ...(ngDevMode ? [{ debugName: "$allFilterStatesTimeStamped" }] : []));
|
|
6823
6820
|
this.$sortStateTimeStamped = linkedSignal({ ...(ngDevMode ? { debugName: "$sortStateTimeStamped" } : {}), source: computed(() => this.$isInitializationState(InitializationState.Ready)() && this.state.$getSorts()),
|
|
6824
6821
|
computation: (curr, prev) => {
|
|
6825
6822
|
if (!curr)
|
|
@@ -6828,7 +6825,7 @@ class TableContainerComponent {
|
|
|
6828
6825
|
return ({ value: updateSortState(initialSortState, curr), timestamp: Date.now() });
|
|
6829
6826
|
return ({ value: updateSortState(prev.value.value, curr), timestamp: Date.now() });
|
|
6830
6827
|
} });
|
|
6831
|
-
this.$allData = computed(() => (this.$tableBuilder()?.$initialized() && this.$tableBuilder()?.$data()) || [],
|
|
6828
|
+
this.$allData = computed(() => (this.$tableBuilder()?.$initialized() && this.$tableBuilder()?.$data()) || [], ...(ngDevMode ? [{ debugName: "$allData" }] : []));
|
|
6832
6829
|
this.$allDataTimeStamped = computed(() => {
|
|
6833
6830
|
const data = this.$allData();
|
|
6834
6831
|
if (!data)
|
|
@@ -6837,7 +6834,7 @@ class TableContainerComponent {
|
|
|
6837
6834
|
value: data,
|
|
6838
6835
|
timestamp: Date.now()
|
|
6839
6836
|
});
|
|
6840
|
-
},
|
|
6837
|
+
}, ...(ngDevMode ? [{ debugName: "$allDataTimeStamped" }] : []));
|
|
6841
6838
|
this.$allTimeStamped = computed(() => {
|
|
6842
6839
|
const data = this.$allDataTimeStamped();
|
|
6843
6840
|
const sort = this.$sortStateTimeStamped();
|
|
@@ -6849,7 +6846,7 @@ class TableContainerComponent {
|
|
|
6849
6846
|
sort,
|
|
6850
6847
|
filter
|
|
6851
6848
|
});
|
|
6852
|
-
},
|
|
6849
|
+
}, ...(ngDevMode ? [{ debugName: "$allTimeStamped" }] : []));
|
|
6853
6850
|
this.$sortedAndFilteredData = linkedSignal({ ...(ngDevMode ? { debugName: "$sortedAndFilteredData" } : {}), source: this.$allTimeStamped,
|
|
6854
6851
|
computation: (values, prev) => {
|
|
6855
6852
|
const init = this.$isInitializationState(InitializationState.Ready);
|
|
@@ -6860,9 +6857,9 @@ class TableContainerComponent {
|
|
|
6860
6857
|
const filteredData = sortAndFilterData(data, filter, sort, !prev?.value, val);
|
|
6861
6858
|
return ({ value: filteredData, timestamp: Date.now() });
|
|
6862
6859
|
} });
|
|
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() }),
|
|
6860
|
+
this.$timestampedGroups = computed(() => ({ value: this.state.$groupByData(), timestamp: Date.now() }), ...(ngDevMode ? [{ debugName: "$timestampedGroups" }] : []));
|
|
6861
|
+
this.$timestampedExpanded = computed(() => ({ value: this.state.$expandGroups(), timestamp: Date.now() }), ...(ngDevMode ? [{ debugName: "$timestampedExpanded" }] : []));
|
|
6862
|
+
this.$timestampedGroupSortUpdated = computed(() => ({ value: this.state.$sortedGroupsUpdates(), timestamp: Date.now() }), ...(ngDevMode ? [{ debugName: "$timestampedGroupSortUpdated" }] : []));
|
|
6866
6863
|
this.$dataAndGroupsTimestamped = computed(() => {
|
|
6867
6864
|
const data = this.$sortedAndFilteredData();
|
|
6868
6865
|
const groups = this.$timestampedGroups();
|
|
@@ -6876,7 +6873,7 @@ class TableContainerComponent {
|
|
|
6876
6873
|
expanded,
|
|
6877
6874
|
groupSorts,
|
|
6878
6875
|
});
|
|
6879
|
-
},
|
|
6876
|
+
}, ...(ngDevMode ? [{ debugName: "$dataAndGroupsTimestamped" }] : []));
|
|
6880
6877
|
this.$filteredSortedAndGrouped = linkedSignal({ ...(ngDevMode ? { debugName: "$filteredSortedAndGrouped" } : {}), source: this.$dataAndGroupsTimestamped,
|
|
6881
6878
|
computation: (curr, prev) => {
|
|
6882
6879
|
if (!curr)
|
|
@@ -6909,10 +6906,10 @@ class TableContainerComponent {
|
|
|
6909
6906
|
#destroyRef;
|
|
6910
6907
|
#setUpAllValuesFilters;
|
|
6911
6908
|
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 }); }
|
|
6909
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TableContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6910
|
+
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: "$customHeaders", predicate: CustomHeaderDirective, 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
6911
|
}
|
|
6915
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
6912
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TableContainerComponent, decorators: [{
|
|
6916
6913
|
type: Component,
|
|
6917
6914
|
args: [{ selector: 'tb-table-container', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TableStore, ExportToCsvService, WrapperFilterStore, DataStore], imports: [
|
|
6918
6915
|
NgTemplateOutlet,
|
|
@@ -6921,7 +6918,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
|
|
|
6921
6918
|
SortMenuComponent, GenericTableComponent, ProfilesMenuComponent, TableHeaderMenuComponent,
|
|
6922
6919
|
MatButtonModule, MatMenuModule, MatIconModule, MatTooltipModule, VirtualScrollContainer,
|
|
6923
6920
|
], 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"] }]
|
|
6924
|
-
}], propDecorators: { $filterDirectives: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TableFilterDirective), { ...{ descendants: true }, isSignal: true }] }], $customFilterDirectives: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TableCustomFilterDirective), { ...{ descendants: true }, isSignal: true }] }], $paginatorComponent: [{ type: i0.ViewChild, args: [i0.forwardRef(() => PaginatorComponent), { isSignal: true }] }], $paginatorWrapper: [{ type: i0.ViewChild, args: ['paginatorWrapper', { isSignal: true }] }], $genericTable: [{ type: i0.ViewChild, args: [i0.forwardRef(() => GenericTableComponent), { isSignal: true }] }], _$customRows: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MatRowDef), { isSignal: true }] }], $customCells: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => CustomCellDirective), { isSignal: true }] }], $customGroupRows: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => CustomGroupRowDirective), { isSignal: true }] }], $menu: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatMenu), { isSignal: true }] }], $tableBuilder: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableBuilder", required: true }] }], $tableIdInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableId", required: false }] }], $trackByInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackBy", required: false }] }], $inputFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputFilters", required: false }] }], $indexColumnInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "indexColumn", required: false }] }], $selectionColumnInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionColumn", required: false }] }], $stickyHeaderInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeader", required: false }] }], $stickyFooterInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyFooter", required: false }] }], $groupHeaderTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupHeaderTemplate", required: false }] }], $groupHeaderHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupHeaderHeight", required: false }] }], $pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], selection$: [{ type: i0.Output, args: ["selection"] }], onStateReset$: [{ type: i0.Output, args: ["onStateReset"] }], onSaveState$: [{ type: i0.Output, args: ["onSaveState"] }], state$: [{ type: i0.Output, args: ["state"] }], data$: [{ type: i0.Output, args: ["data"] }], sortedAndFilteredAndGroupedData$: [{ type: i0.Output, args: ["sortedAndFilteredAndGroupedData"] }] } });
|
|
6921
|
+
}], propDecorators: { $filterDirectives: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TableFilterDirective), { ...{ descendants: true }, isSignal: true }] }], $customFilterDirectives: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TableCustomFilterDirective), { ...{ descendants: true }, isSignal: true }] }], $paginatorComponent: [{ type: i0.ViewChild, args: [i0.forwardRef(() => PaginatorComponent), { isSignal: true }] }], $paginatorWrapper: [{ type: i0.ViewChild, args: ['paginatorWrapper', { isSignal: true }] }], $genericTable: [{ type: i0.ViewChild, args: [i0.forwardRef(() => GenericTableComponent), { isSignal: true }] }], _$customRows: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MatRowDef), { isSignal: true }] }], $customCells: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => CustomCellDirective), { isSignal: true }] }], $customHeaders: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => CustomHeaderDirective), { isSignal: true }] }], $customGroupRows: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => CustomGroupRowDirective), { isSignal: true }] }], $menu: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatMenu), { isSignal: true }] }], $tableBuilder: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableBuilder", required: true }] }], $tableIdInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableId", required: false }] }], $trackByInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackBy", required: false }] }], $inputFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputFilters", required: false }] }], $indexColumnInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "indexColumn", required: false }] }], $selectionColumnInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionColumn", required: false }] }], $stickyHeaderInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeader", required: false }] }], $stickyFooterInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyFooter", required: false }] }], $groupHeaderTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupHeaderTemplate", required: false }] }], $groupHeaderHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupHeaderHeight", required: false }] }], $pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], selection$: [{ type: i0.Output, args: ["selection"] }], onStateReset$: [{ type: i0.Output, args: ["onStateReset"] }], onSaveState$: [{ type: i0.Output, args: ["onSaveState"] }], state$: [{ type: i0.Output, args: ["state"] }], data$: [{ type: i0.Output, args: ["data"] }], sortedAndFilteredAndGroupedData$: [{ type: i0.Output, args: ["sortedAndFilteredAndGroupedData"] }] } });
|
|
6925
6922
|
function isFunction(a) {
|
|
6926
6923
|
return typeof a === 'function';
|
|
6927
6924
|
}
|
|
@@ -6935,28 +6932,31 @@ class TableBuilderModule {
|
|
|
6935
6932
|
]
|
|
6936
6933
|
};
|
|
6937
6934
|
}
|
|
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
|
|
6935
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TableBuilderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
6936
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.0", ngImport: i0, type: TableBuilderModule, imports: [TableContainerComponent,
|
|
6940
6937
|
CustomCellDirective,
|
|
6938
|
+
CustomHeaderDirective,
|
|
6941
6939
|
CustomGroupRowDirective,
|
|
6942
6940
|
TableFilterDirective,
|
|
6943
6941
|
TableFilterStringContainsDirective,
|
|
6944
6942
|
TableWrapperDirective], exports: [TableContainerComponent,
|
|
6945
6943
|
CustomCellDirective,
|
|
6944
|
+
CustomHeaderDirective,
|
|
6946
6945
|
CustomGroupRowDirective,
|
|
6947
6946
|
TableFilterStringContainsDirective,
|
|
6948
6947
|
TableWrapperDirective,
|
|
6949
6948
|
UtilitiesModule] }); }
|
|
6950
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0
|
|
6949
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TableBuilderModule, providers: [
|
|
6951
6950
|
MultiSortDirective,
|
|
6952
6951
|
], imports: [TableContainerComponent, UtilitiesModule] }); }
|
|
6953
6952
|
}
|
|
6954
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
6953
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TableBuilderModule, decorators: [{
|
|
6955
6954
|
type: NgModule,
|
|
6956
6955
|
args: [{
|
|
6957
6956
|
imports: [
|
|
6958
6957
|
TableContainerComponent,
|
|
6959
6958
|
CustomCellDirective,
|
|
6959
|
+
CustomHeaderDirective,
|
|
6960
6960
|
CustomGroupRowDirective,
|
|
6961
6961
|
TableFilterDirective,
|
|
6962
6962
|
TableFilterStringContainsDirective,
|
|
@@ -6965,6 +6965,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
|
|
|
6965
6965
|
exports: [
|
|
6966
6966
|
TableContainerComponent,
|
|
6967
6967
|
CustomCellDirective,
|
|
6968
|
+
CustomHeaderDirective,
|
|
6968
6969
|
CustomGroupRowDirective,
|
|
6969
6970
|
TableFilterStringContainsDirective,
|
|
6970
6971
|
TableWrapperDirective,
|
|
@@ -7008,21 +7009,21 @@ class TableBuilder {
|
|
|
7008
7009
|
this.data = data;
|
|
7009
7010
|
this.metaData = metaData;
|
|
7010
7011
|
this.settings = settings;
|
|
7011
|
-
this._container = signal(undefined,
|
|
7012
|
+
this._container = signal(undefined, ...(ngDevMode ? [{ debugName: "_container" }] : []));
|
|
7012
7013
|
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,
|
|
7014
|
+
this.$metaData = computed(() => this.$initialized() ? this.#$metaData() : undefined, ...(ngDevMode ? [{ debugName: "$metaData" }] : []));
|
|
7015
|
+
this.$settings = computed(() => this.$initialized() ? this.#$settings() : undefined, ...(ngDevMode ? [{ debugName: "$settings" }] : []));
|
|
7016
|
+
this.#$metaNeedsPrep = signal(false, ...(ngDevMode ? [{ debugName: "#$metaNeedsPrep" }] : []));
|
|
7017
|
+
this.#$dataIsObservable = signal(false, ...(ngDevMode ? [{ debugName: "#$dataIsObservable" }] : []));
|
|
7018
|
+
this.#$settingsIsObservable = signal(false, ...(ngDevMode ? [{ debugName: "#$settingsIsObservable" }] : []));
|
|
7019
|
+
this.#$needsPrep = computed(() => this.#$dataIsObservable() || this.#$metaNeedsPrep() || this.#$settingsIsObservable(), ...(ngDevMode ? [{ debugName: "#$needsPrep" }] : []));
|
|
7020
|
+
this.$initialized = signal(false, ...(ngDevMode ? [{ debugName: "$initialized" }] : []));
|
|
7020
7021
|
this.#dataCleaners = computed(() => {
|
|
7021
7022
|
const metaData = this.$metaData();
|
|
7022
7023
|
if (!metaData)
|
|
7023
7024
|
return undefined;
|
|
7024
7025
|
return createDataCleaners(metaData);
|
|
7025
|
-
},
|
|
7026
|
+
}, ...(ngDevMode ? [{ debugName: "#dataCleaners" }] : []));
|
|
7026
7027
|
this.$data = computed(() => {
|
|
7027
7028
|
const data = this.#$data();
|
|
7028
7029
|
const cleaners = this.#dataCleaners();
|
|
@@ -7034,7 +7035,7 @@ class TableBuilder {
|
|
|
7034
7035
|
return cleaned;
|
|
7035
7036
|
});
|
|
7036
7037
|
return cleanedData;
|
|
7037
|
-
},
|
|
7038
|
+
}, ...(ngDevMode ? [{ debugName: "$data" }] : []));
|
|
7038
7039
|
if (isObservable(data)) {
|
|
7039
7040
|
this.#$dataIsObservable.set(true);
|
|
7040
7041
|
}
|
|
@@ -7077,7 +7078,7 @@ class TableBuilder {
|
|
|
7077
7078
|
this.#$metaData = toSignal(this.metaData, { injector, initialValue: [] });
|
|
7078
7079
|
}
|
|
7079
7080
|
else {
|
|
7080
|
-
this.#$metaData = computed(() => this.createMetaData(this.#$data()[0]),
|
|
7081
|
+
this.#$metaData = computed(() => this.createMetaData(this.#$data()[0]), ...(ngDevMode ? [{ debugName: "#$metaData" }] : []));
|
|
7081
7082
|
}
|
|
7082
7083
|
}
|
|
7083
7084
|
this.$initialized.set(true);
|
|
@@ -7137,12 +7138,12 @@ function actionStatusReducer(state = initialState, action) {
|
|
|
7137
7138
|
}
|
|
7138
7139
|
|
|
7139
7140
|
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
|
|
7141
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgrxExtModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
7142
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.0", ngImport: i0, type: NgrxExtModule, imports: [CommonModule, i1$9.StoreFeatureModule] }); }
|
|
7143
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgrxExtModule, imports: [CommonModule,
|
|
7143
7144
|
StoreModule.forFeature('ActionStatus', actionStatusReducer)] }); }
|
|
7144
7145
|
}
|
|
7145
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
7146
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: NgrxExtModule, decorators: [{
|
|
7146
7147
|
type: NgModule,
|
|
7147
7148
|
args: [{
|
|
7148
7149
|
declarations: [],
|
|
@@ -7160,10 +7161,10 @@ class ActionStateSpinnerComponent {
|
|
|
7160
7161
|
ngOnInit() {
|
|
7161
7162
|
this.serverActionStatus$ = this.status$.pipe(delayOn(a => a.status === serverStatusTypes.inProgress, 500));
|
|
7162
7163
|
}
|
|
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
|
|
7164
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ActionStateSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7165
|
+
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
7166
|
}
|
|
7166
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
7167
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ActionStateSpinnerComponent, decorators: [{
|
|
7167
7168
|
type: Component,
|
|
7168
7169
|
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
7170
|
}], propDecorators: { status$: [{
|
|
@@ -7171,11 +7172,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
|
|
|
7171
7172
|
}] } });
|
|
7172
7173
|
|
|
7173
7174
|
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
|
|
7175
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ActionStateUiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
7176
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.0", ngImport: i0, type: ActionStateUiModule, imports: [ActionStateSpinnerComponent], exports: [ActionStateSpinnerComponent] }); }
|
|
7177
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ActionStateUiModule, imports: [ActionStateSpinnerComponent] }); }
|
|
7177
7178
|
}
|
|
7178
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
7179
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ActionStateUiModule, decorators: [{
|
|
7179
7180
|
type: NgModule,
|
|
7180
7181
|
args: [{
|
|
7181
7182
|
imports: [
|
|
@@ -7231,8 +7232,9 @@ const createActionableResultSelector = (selectorFactory, action, dispatchIf = de
|
|
|
7231
7232
|
};
|
|
7232
7233
|
const createActionResultSelector = (options) => {
|
|
7233
7234
|
const id = crypto.randomUUID();
|
|
7235
|
+
const dispatchCheck = options.dispatchIf || defaultFilter;
|
|
7234
7236
|
const slctr = (...props) => createSelector(options.selectorFactory(...props), (selected) => {
|
|
7235
|
-
const needsDispatch = (
|
|
7237
|
+
const needsDispatch = dispatchCheck(selected);
|
|
7236
7238
|
if (needsDispatch && !_cache.isInCache(id, ...props)) {
|
|
7237
7239
|
queueMicrotask(() => runInInjectionContext(options.injector || _ei, () => {
|
|
7238
7240
|
options.action(...[...props, selected])();
|
|
@@ -7318,5 +7320,5 @@ function setUpStoreFactoryOld(store, env) {
|
|
|
7318
7320
|
* Generated bundle index. Do not edit.
|
|
7319
7321
|
*/
|
|
7320
7322
|
|
|
7321
|
-
export { ActionStateSpinnerComponent, ActionStateUiModule, ActionStatus, AppStatusState, ArrayStyle, AutoFocusDirective, CancellationToken, ClickEmitterDirective, ClickSubjectDirective, ConditionalClassesDirective, CreateTableBuilder, CustomCellDirective, CustomGroupRowDirective, DateFilterComponent, DefaultVirtualScrollOptions, DialogDirective, DialogService, DialogWrapper, FieldType, FilterChipsComponent, FilterComponent, FilterType, FunctionPipe, GenColDisplayerComponent, GenFilterDisplayerComponent, GeneralTableSettings, GenericTableComponent, GroupByListComponent, HttpErrorStateDirective, HttpInProgressStateDirective, HttpNotStartedStateDirective, HttpRequestModule, HttpRequestStateDirective, RequestStateFactory as HttpRequestStateFactory, RequestStateStore as HttpRequestStateStore, RequestStatus as HttpRequestStatus, RequestStrategy as HttpRequestStrategy, HttpSuccessStateDirective, MatButtonToggleFilterDirective, MatCheckboxTbFilterDirective, MatOptionTbFilterDirective, MatRadioButtonTbFilterDirective, MatSlideToggleGroupDirective, MatSlideToggleTbFilterDirective, MatTableObservableDataSource, MultiSortDirective, NgrxExtModule, NotPersistedTableSettings, PaginatorComponent, PaginatorOptions, PersistedTableSettings, PhoneNumberPipe, PreventEnterDirective, RequestStateFactory, RequestStateStore, RequestStateStoreConfigToken, RequestStatus, RequestStrategy, ResizeColumnDirective, SortDirection, SpaceCaseMapping, SpaceCasePipe, StopPropagationDirective, StylerDirective, Subjectifier, Subscriber, TableBuilder, TableBuilderConfigToken, TableBuilderModule, TableColumnFooterSettings, TableColumnHeaderSettings, TableContainerComponent, TableCustomFilterDirective, TableCustomFilterDirectiveBase, TableFilterDirective, TableFilterStringContainsDirective, TableSettings, TableWrapperDirective, TableWrapperFooterSettings, TableWrapperHeaderSettings, Target, TbSelectedFilterDirective, TrimWhitespaceDirective, UtilitiesModule, VirtualScrollOptions, actionStatusReducer, chainRequest, clearActionableSelectorRequestCache, combineArrays, createActionResultSelector, createActionSelector, createActionableResultSelector, createActionableSelector, createFailure, createFilterFunc, createFilterFuncs, createRequestor, createSuccess, defaultFilter, defaultShareReplay, delayOn, filterArray, filterTypeMap, getAllGroupHeaderNames, getAllGroupHeaderNamesByKeys, getRequestorBody, getRequestorStatus, getStatusState, httpRequest, httpRequestor, inProgress, initialGroupByState, initialState, isCustomFilter, isDataGroup, isErrorState, isFilterInfo, isGroupHeader, isSuccessOrErrorState, isSuccessState, mapArray, mapError, mapGroupHeader, metaDataArrToDict, needsFilterCreation, notNull, notStarted, onWait, onceWhen, parseTbSizeToPixels, phoneFormatter, previousAndCurrent, provideActionableSelector, provideTableBuilder, selectAll, selectEntities, selectEntity, selectIds, selectTotal, serverStatusTypes, setCustomGroupBy, setUpStoreFactory, setUpStoreFactoryOld, skipOneWhen, sortsAreSame, spaceCase, startWithIfEmpty, statusAdapter, statusIsSuccessOrInProgress, subscriber, switchOff, tapError, tapSuccess, updateGroupByState, wrapInArr };
|
|
7323
|
+
export { ActionStateSpinnerComponent, ActionStateUiModule, ActionStatus, AppStatusState, ArrayStyle, AutoFocusDirective, CancellationToken, ClickEmitterDirective, ClickSubjectDirective, ConditionalClassesDirective, CreateTableBuilder, CustomCellDirective, CustomGroupRowDirective, CustomHeaderDirective, DateFilterComponent, DefaultVirtualScrollOptions, DialogDirective, DialogService, DialogWrapper, FieldType, FilterChipsComponent, FilterComponent, FilterType, FunctionPipe, GenColDisplayerComponent, GenFilterDisplayerComponent, GeneralTableSettings, GenericTableComponent, GroupByListComponent, HttpErrorStateDirective, HttpInProgressStateDirective, HttpNotStartedStateDirective, HttpRequestModule, HttpRequestStateDirective, RequestStateFactory as HttpRequestStateFactory, RequestStateStore as HttpRequestStateStore, RequestStatus as HttpRequestStatus, RequestStrategy as HttpRequestStrategy, HttpSuccessStateDirective, MatButtonToggleFilterDirective, MatCheckboxTbFilterDirective, MatOptionTbFilterDirective, MatRadioButtonTbFilterDirective, MatSlideToggleGroupDirective, MatSlideToggleTbFilterDirective, MatTableObservableDataSource, MultiSortDirective, NgrxExtModule, NotPersistedTableSettings, PaginatorComponent, PaginatorOptions, PersistedTableSettings, PhoneNumberPipe, PreventEnterDirective, RequestStateFactory, RequestStateStore, RequestStateStoreConfigToken, RequestStatus, RequestStrategy, ResizeColumnDirective, SortDirection, SpaceCaseMapping, SpaceCasePipe, StopPropagationDirective, StylerDirective, Subjectifier, Subscriber, TableBuilder, TableBuilderConfigToken, TableBuilderModule, TableColumnFooterSettings, TableColumnHeaderSettings, TableContainerComponent, TableCustomFilterDirective, TableCustomFilterDirectiveBase, TableFilterDirective, TableFilterStringContainsDirective, TableSettings, TableWrapperDirective, TableWrapperFooterSettings, TableWrapperHeaderSettings, Target, TbSelectedFilterDirective, TrimWhitespaceDirective, UtilitiesModule, VirtualScrollOptions, actionStatusReducer, chainRequest, clearActionableSelectorRequestCache, combineArrays, createActionResultSelector, createActionSelector, createActionableResultSelector, createActionableSelector, createFailure, createFilterFunc, createFilterFuncs, createRequestor, createSuccess, defaultFilter, defaultShareReplay, delayOn, filterArray, filterTypeMap, getAllGroupHeaderNames, getAllGroupHeaderNamesByKeys, getRequestorBody, getRequestorStatus, getStatusState, httpRequest, httpRequestor, inProgress, initialGroupByState, initialState, isCustomFilter, isDataGroup, isErrorState, isFilterInfo, isGroupHeader, isSuccessOrErrorState, isSuccessState, mapArray, mapError, mapGroupHeader, metaDataArrToDict, needsFilterCreation, notNull, notStarted, onWait, onceWhen, parseTbSizeToPixels, phoneFormatter, previousAndCurrent, provideActionableSelector, provideTableBuilder, selectAll, selectEntities, selectEntity, selectIds, selectTotal, serverStatusTypes, setCustomGroupBy, setUpStoreFactory, setUpStoreFactoryOld, skipOneWhen, sortsAreSame, spaceCase, startWithIfEmpty, statusAdapter, statusIsSuccessOrInProgress, subscriber, switchOff, tapError, tapSuccess, updateGroupByState, wrapInArr };
|
|
7322
7324
|
//# sourceMappingURL=one-paragon-angular-utilities.mjs.map
|