@one-paragon/angular-utilities 2.6.7 → 2.7.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -141,10 +141,10 @@ class HttpRequestStateDirective {
|
|
|
141
141
|
static ngTemplateContextGuard(dir, ctx) {
|
|
142
142
|
return true;
|
|
143
143
|
}
|
|
144
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
145
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
144
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.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.0.0", type: HttpRequestStateDirective, isStandalone: true, selector: "[httpRequestState]", inputs: { stateStore: ["httpRequestState", "stateStore"] }, ngImport: i0 }); }
|
|
146
146
|
}
|
|
147
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
147
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.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: "
|
|
178
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
177
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: HttpStateDirectiveBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
178
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0", type: HttpStateDirectiveBase, isStandalone: true, ngImport: i0 }); }
|
|
179
179
|
}
|
|
180
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
180
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.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: "
|
|
199
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
198
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: HttpErrorStateDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
199
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0", type: HttpErrorStateDirective, isStandalone: true, selector: "[httpErrorState]", usesInheritance: true, ngImport: i0 }); }
|
|
200
200
|
}
|
|
201
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
201
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.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: "
|
|
221
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
220
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: HttpInProgressStateDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
221
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0", type: HttpInProgressStateDirective, isStandalone: true, selector: "[httpInProgressState]", usesInheritance: true, ngImport: i0 }); }
|
|
222
222
|
}
|
|
223
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
223
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.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: "
|
|
243
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
242
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: HttpNotStartedStateDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
243
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0", type: HttpNotStartedStateDirective, isStandalone: true, selector: "[httpNotStartedState]", usesInheritance: true, ngImport: i0 }); }
|
|
244
244
|
}
|
|
245
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
245
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.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: "
|
|
268
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
267
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: HttpSuccessStateDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
268
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0", type: HttpSuccessStateDirective, isStandalone: true, selector: "[httpSuccessState]", inputs: { httpSuccessStateTypeSafety: "httpSuccessStateTypeSafety" }, usesInheritance: true, ngImport: i0 }); }
|
|
269
269
|
}
|
|
270
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
270
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.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: "
|
|
340
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
339
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: HttpRequestModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
340
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.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: "
|
|
349
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: HttpRequestModule }); }
|
|
350
350
|
}
|
|
351
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
351
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.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: "
|
|
489
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
488
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: Subscriber, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
489
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0", type: Subscriber, isStandalone: true, ngImport: i0 }); }
|
|
490
490
|
}
|
|
491
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
491
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.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(() => {
|
|
@@ -785,10 +785,10 @@ class RequestStateFactory {
|
|
|
785
785
|
this.requestors.push(requestor);
|
|
786
786
|
return requestor;
|
|
787
787
|
}
|
|
788
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
789
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
788
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: RequestStateFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
789
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: RequestStateFactory }); }
|
|
790
790
|
}
|
|
791
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
791
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: RequestStateFactory, decorators: [{
|
|
792
792
|
type: Injectable
|
|
793
793
|
}], ctorParameters: () => [] });
|
|
794
794
|
function createRequestor(req, optionsOrProject, options) {
|
|
@@ -1131,20 +1131,20 @@ class CustomCellDirective {
|
|
|
1131
1131
|
constructor() {
|
|
1132
1132
|
this.templateRef = inject(TemplateRef, { optional: true });
|
|
1133
1133
|
this.columnDef = inject(CdkColumnDef, { optional: true });
|
|
1134
|
-
this.$customCell = input.required({ alias: 'customCell' });
|
|
1135
|
-
this.$displayName = input(undefined, { alias: 'customCellDisplayName' });
|
|
1136
|
-
this.$preSort = input(undefined, { alias: 'preSort' });
|
|
1137
|
-
this.$templateRef = input(this.templateRef || undefined, { alias: 'templateRef' });
|
|
1138
|
-
this.$customCellOrder = input(undefined, { alias: 'customCellOrder' });
|
|
1139
|
-
this.$customCellWidth = input(undefined, { alias: 'customCellWidth' });
|
|
1134
|
+
this.$customCell = input.required(...(ngDevMode ? [{ debugName: "$customCell", alias: 'customCell' }] : [{ alias: 'customCell' }]));
|
|
1135
|
+
this.$displayName = input(undefined, ...(ngDevMode ? [{ debugName: "$displayName", alias: 'customCellDisplayName' }] : [{ alias: 'customCellDisplayName' }]));
|
|
1136
|
+
this.$preSort = input(undefined, ...(ngDevMode ? [{ debugName: "$preSort", alias: 'preSort' }] : [{ alias: 'preSort' }]));
|
|
1137
|
+
this.$templateRef = input(this.templateRef || undefined, ...(ngDevMode ? [{ debugName: "$templateRef", alias: 'templateRef' }] : [{ alias: 'templateRef' }]));
|
|
1138
|
+
this.$customCellOrder = input(undefined, ...(ngDevMode ? [{ debugName: "$customCellOrder", alias: 'customCellOrder' }] : [{ alias: 'customCellOrder' }]));
|
|
1139
|
+
this.$customCellWidth = input(undefined, ...(ngDevMode ? [{ debugName: "$customCellWidth", alias: 'customCellWidth' }] : [{ alias: 'customCellWidth' }]));
|
|
1140
1140
|
/**
|
|
1141
1141
|
* for type safety, this is a reference to the table builder instance.
|
|
1142
1142
|
*/
|
|
1143
|
-
this.$customCellTableRef = input(undefined, { alias: 'customCellTableRef' });
|
|
1143
|
+
this.$customCellTableRef = input(undefined, ...(ngDevMode ? [{ debugName: "$customCellTableRef", alias: 'customCellTableRef' }] : [{ alias: 'customCellTableRef' }]));
|
|
1144
1144
|
/**
|
|
1145
1145
|
* true if column not mapped to a property in the data source. Default is false.
|
|
1146
1146
|
*/
|
|
1147
|
-
this.$customCellNotMapped = input(false, { alias: 'customCellNotMapped', transform: coerceBooleanProperty });
|
|
1147
|
+
this.$customCellNotMapped = input(false, ...(ngDevMode ? [{ debugName: "$customCellNotMapped", alias: 'customCellNotMapped', transform: coerceBooleanProperty }] : [{ alias: 'customCellNotMapped', transform: coerceBooleanProperty }]));
|
|
1148
1148
|
this.$metaData = computed(() => {
|
|
1149
1149
|
const c = this.$customCell();
|
|
1150
1150
|
if (!c)
|
|
@@ -1159,8 +1159,8 @@ class CustomCellDirective {
|
|
|
1159
1159
|
customCell: true,
|
|
1160
1160
|
noExport: true,
|
|
1161
1161
|
});
|
|
1162
|
-
});
|
|
1163
|
-
this.$inited = signal(false);
|
|
1162
|
+
}, ...(ngDevMode ? [{ debugName: "$metaData" }] : []));
|
|
1163
|
+
this.$inited = signal(false, ...(ngDevMode ? [{ debugName: "$inited" }] : []));
|
|
1164
1164
|
}
|
|
1165
1165
|
ngOnInit() {
|
|
1166
1166
|
this.$inited.set(true);
|
|
@@ -1168,13 +1168,13 @@ class CustomCellDirective {
|
|
|
1168
1168
|
static ngTemplateContextGuard(dir, ctx) {
|
|
1169
1169
|
return true;
|
|
1170
1170
|
}
|
|
1171
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1172
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "
|
|
1171
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: CustomCellDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1172
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.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 } }, ngImport: i0 }); }
|
|
1173
1173
|
}
|
|
1174
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1174
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: CustomCellDirective, decorators: [{
|
|
1175
1175
|
type: Directive,
|
|
1176
1176
|
args: [{ selector: '[customCell]' }]
|
|
1177
|
-
}] });
|
|
1177
|
+
}], propDecorators: { $customCell: [{ type: i0.Input, args: [{ isSignal: true, alias: "customCell", required: true }] }], $displayName: [{ type: i0.Input, args: [{ isSignal: true, alias: "customCellDisplayName", required: false }] }], $preSort: [{ type: i0.Input, args: [{ isSignal: true, alias: "preSort", required: false }] }], $templateRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "templateRef", required: false }] }], $customCellOrder: [{ type: i0.Input, args: [{ isSignal: true, alias: "customCellOrder", required: false }] }], $customCellWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "customCellWidth", required: false }] }], $customCellTableRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "customCellTableRef", required: false }] }], $customCellNotMapped: [{ type: i0.Input, args: [{ isSignal: true, alias: "customCellNotMapped", required: false }] }] } });
|
|
1178
1178
|
|
|
1179
1179
|
// Usage examples:
|
|
1180
1180
|
// <!-- Custom group row for all groupings -->
|
|
@@ -1199,21 +1199,21 @@ class CustomGroupRowDirective {
|
|
|
1199
1199
|
* If not provided (or null), this custom row will apply to all groupings.
|
|
1200
1200
|
* Can be a single Path<T> or an array of Path<T> values.
|
|
1201
1201
|
*/
|
|
1202
|
-
this.$customGroupRow = input(null, { alias: 'customGroupRow', transform: (val) => val === '' ? null : val });
|
|
1202
|
+
this.$customGroupRow = input(null, ...(ngDevMode ? [{ debugName: "$customGroupRow", alias: 'customGroupRow', transform: (val) => val === '' ? null : val }] : [{ alias: 'customGroupRow', transform: (val) => val === '' ? null : val }]));
|
|
1203
1203
|
/**
|
|
1204
1204
|
* For type safety, this is a reference to the table builder instance.
|
|
1205
1205
|
*/
|
|
1206
|
-
this.$customGroupRowTableRef = input(undefined, { alias: 'customGroupRowTableRef' });
|
|
1206
|
+
this.$customGroupRowTableRef = input(undefined, ...(ngDevMode ? [{ debugName: "$customGroupRowTableRef", alias: 'customGroupRowTableRef' }] : [{ alias: 'customGroupRowTableRef' }]));
|
|
1207
1207
|
/**
|
|
1208
1208
|
* Priority order for this custom group row. Higher numbers have higher priority.
|
|
1209
1209
|
* Useful when multiple custom group rows could apply to the same grouping.
|
|
1210
1210
|
*/
|
|
1211
|
-
this.$priority = input(0, { alias: 'customGroupRowPriority' });
|
|
1212
|
-
this.$inited = signal(false);
|
|
1211
|
+
this.$priority = input(0, ...(ngDevMode ? [{ debugName: "$priority", alias: 'customGroupRowPriority' }] : [{ alias: 'customGroupRowPriority' }]));
|
|
1212
|
+
this.$inited = signal(false, ...(ngDevMode ? [{ debugName: "$inited" }] : []));
|
|
1213
1213
|
/**
|
|
1214
1214
|
* Gets the grouping key(s) this directive applies to, or null for all groupings
|
|
1215
1215
|
*/
|
|
1216
|
-
this.$groupingKey = computed(() => this.$customGroupRow());
|
|
1216
|
+
this.$groupingKey = computed(() => this.$customGroupRow(), ...(ngDevMode ? [{ debugName: "$groupingKey" }] : []));
|
|
1217
1217
|
/**
|
|
1218
1218
|
* Gets the template reference to use
|
|
1219
1219
|
*/
|
|
@@ -1241,13 +1241,13 @@ class CustomGroupRowDirective {
|
|
|
1241
1241
|
}
|
|
1242
1242
|
return targetKey === groupingKey;
|
|
1243
1243
|
}
|
|
1244
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1245
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "
|
|
1244
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: CustomGroupRowDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1245
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.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 }); }
|
|
1246
1246
|
}
|
|
1247
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1247
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: CustomGroupRowDirective, decorators: [{
|
|
1248
1248
|
type: Directive,
|
|
1249
1249
|
args: [{ selector: '[customGroupRow]' }]
|
|
1250
|
-
}] });
|
|
1250
|
+
}], propDecorators: { $customGroupRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "customGroupRow", required: false }] }], $customGroupRowTableRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "customGroupRowTableRef", required: false }] }], $priority: [{ type: i0.Input, args: [{ isSignal: true, alias: "customGroupRowPriority", required: false }] }] } });
|
|
1251
1251
|
|
|
1252
1252
|
class ResizeColumnDirective {
|
|
1253
1253
|
constructor() {
|
|
@@ -1315,10 +1315,10 @@ class ResizeColumnDirective {
|
|
|
1315
1315
|
const newTableWidth = (mouseDownData.startTableWidth + columnChange);
|
|
1316
1316
|
return ({ newTableWidth, newColumnWidth });
|
|
1317
1317
|
}
|
|
1318
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1319
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "
|
|
1318
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ResizeColumnDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1319
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0.0", type: ResizeColumnDirective, isStandalone: true, selector: "[resizeColumn]", inputs: { resizable: ["resizeColumn", "resizable", booleanAttribute], key: "key" }, ngImport: i0 }); }
|
|
1320
1320
|
}
|
|
1321
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1321
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ResizeColumnDirective, decorators: [{
|
|
1322
1322
|
type: Directive,
|
|
1323
1323
|
args: [{
|
|
1324
1324
|
selector: "[resizeColumn]",
|
|
@@ -1332,15 +1332,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImpor
|
|
|
1332
1332
|
|
|
1333
1333
|
class TableWrapperDirective {
|
|
1334
1334
|
constructor() {
|
|
1335
|
-
this.$registrations = signal([]);
|
|
1335
|
+
this.$registrations = signal([], ...(ngDevMode ? [{ debugName: "$registrations" }] : []));
|
|
1336
1336
|
}
|
|
1337
1337
|
register(filter) {
|
|
1338
1338
|
this.$registrations.update(registrations => [...registrations, filter]);
|
|
1339
1339
|
}
|
|
1340
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1341
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1340
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TableWrapperDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1341
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0", type: TableWrapperDirective, isStandalone: true, selector: "[tbWrapper]", ngImport: i0 }); }
|
|
1342
1342
|
}
|
|
1343
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1343
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TableWrapperDirective, decorators: [{
|
|
1344
1344
|
type: Directive,
|
|
1345
1345
|
args: [{
|
|
1346
1346
|
selector: '[tbWrapper]',
|
|
@@ -1383,10 +1383,10 @@ class TableCustomFilterDirective {
|
|
|
1383
1383
|
constructor() {
|
|
1384
1384
|
this.savable = false;
|
|
1385
1385
|
}
|
|
1386
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1387
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1386
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TableCustomFilterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1387
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0", type: TableCustomFilterDirective, isStandalone: true, selector: "tb-abstract", ngImport: i0 }); }
|
|
1388
1388
|
}
|
|
1389
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1389
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TableCustomFilterDirective, decorators: [{
|
|
1390
1390
|
type: Directive,
|
|
1391
1391
|
args: [{
|
|
1392
1392
|
selector: 'tb-abstract'
|
|
@@ -1458,10 +1458,10 @@ class TableFilterDirective {
|
|
|
1458
1458
|
});
|
|
1459
1459
|
}
|
|
1460
1460
|
}
|
|
1461
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1462
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1461
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TableFilterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1462
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0", type: TableFilterDirective, isStandalone: true, selector: "[tbFilter]", inputs: { filterType: "filterType", key: "key", fieldType: "fieldType", filterId: "filterId", active: "active", filterValue: "filterValue" }, usesOnChanges: true, ngImport: i0 }); }
|
|
1463
1463
|
}
|
|
1464
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1464
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TableFilterDirective, decorators: [{
|
|
1465
1465
|
type: Directive,
|
|
1466
1466
|
args: [{
|
|
1467
1467
|
selector: "[tbFilter]",
|
|
@@ -1501,10 +1501,10 @@ class TableFilterStringContainsDirective extends TableFilterDirective {
|
|
|
1501
1501
|
}
|
|
1502
1502
|
super.ngOnChanges(changes);
|
|
1503
1503
|
}
|
|
1504
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1505
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1504
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TableFilterStringContainsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1505
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.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 }); }
|
|
1506
1506
|
}
|
|
1507
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1507
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TableFilterStringContainsDirective, decorators: [{
|
|
1508
1508
|
type: Directive,
|
|
1509
1509
|
args: [{
|
|
1510
1510
|
selector: '[tbFilterStringContains]',
|
|
@@ -1560,10 +1560,10 @@ class TableCustomFilterDirectiveBase extends TableCustomFilterDirective {
|
|
|
1560
1560
|
this.ready = true;
|
|
1561
1561
|
this.filter$.next(this.filter);
|
|
1562
1562
|
}
|
|
1563
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1564
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1563
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TableCustomFilterDirectiveBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1564
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0", type: TableCustomFilterDirectiveBase, isStandalone: true, selector: "[tbCustomFilter]", inputs: { predicate: ["tbCustomFilter", "predicate"], active: "active" }, usesInheritance: true, ngImport: i0 }); }
|
|
1565
1565
|
}
|
|
1566
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1566
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TableCustomFilterDirectiveBase, decorators: [{
|
|
1567
1567
|
type: Directive,
|
|
1568
1568
|
args: [{
|
|
1569
1569
|
selector: "[tbCustomFilter]",
|
|
@@ -1598,10 +1598,10 @@ class TbSelectedFilterDirective extends TableCustomFilterDirectiveBase {
|
|
|
1598
1598
|
this.active = this.isActive();
|
|
1599
1599
|
});
|
|
1600
1600
|
}
|
|
1601
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1602
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1601
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TbSelectedFilterDirective, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1602
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0", type: TbSelectedFilterDirective, isStandalone: true, usesInheritance: true, ngImport: i0 }); }
|
|
1603
1603
|
}
|
|
1604
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1604
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TbSelectedFilterDirective, decorators: [{
|
|
1605
1605
|
type: Directive
|
|
1606
1606
|
}], ctorParameters: () => [{ type: i1.Observable }, { type: undefined }] });
|
|
1607
1607
|
// Checkbox
|
|
@@ -1616,10 +1616,10 @@ class MatCheckboxTbFilterDirective extends TbSelectedFilterDirective {
|
|
|
1616
1616
|
this.matCheckbox = inject(MatCheckbox);
|
|
1617
1617
|
this.matCheckbox = matCheckbox;
|
|
1618
1618
|
}
|
|
1619
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1620
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1619
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: MatCheckboxTbFilterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1620
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0", type: MatCheckboxTbFilterDirective, isStandalone: true, selector: "mat-checkbox[tbCustomFilter]", inputs: { predicate: ["tbCustomFilter", "predicate"], filterId: "filterId" }, providers: [{ provide: TableCustomFilterDirective, useExisting: MatCheckboxTbFilterDirective }], usesInheritance: true, ngImport: i0 }); }
|
|
1621
1621
|
}
|
|
1622
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1622
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: MatCheckboxTbFilterDirective, decorators: [{
|
|
1623
1623
|
type: Directive,
|
|
1624
1624
|
args: [{
|
|
1625
1625
|
selector: 'mat-checkbox[tbCustomFilter]',
|
|
@@ -1642,10 +1642,10 @@ class MatSlideToggleTbFilterDirective extends TbSelectedFilterDirective {
|
|
|
1642
1642
|
ngOnInit() {
|
|
1643
1643
|
super.ngOnInit();
|
|
1644
1644
|
}
|
|
1645
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1646
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1645
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: MatSlideToggleTbFilterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1646
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.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 }); }
|
|
1647
1647
|
}
|
|
1648
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1648
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: MatSlideToggleTbFilterDirective, decorators: [{
|
|
1649
1649
|
type: Directive,
|
|
1650
1650
|
args: [{
|
|
1651
1651
|
selector: 'mat-slide-toggle[tbCustomFilter]',
|
|
@@ -1669,10 +1669,10 @@ class MatRadioButtonTbFilterDirective extends TbSelectedFilterDirective {
|
|
|
1669
1669
|
ngOnInit() {
|
|
1670
1670
|
super.ngOnInit();
|
|
1671
1671
|
}
|
|
1672
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1673
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1672
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: MatRadioButtonTbFilterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1673
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0", type: MatRadioButtonTbFilterDirective, isStandalone: true, selector: "mat-radio-button[tbCustomFilter]", inputs: { predicate: ["tbCustomFilter", "predicate"] }, providers: [{ provide: TableCustomFilterDirective, useExisting: MatRadioButtonTbFilterDirective }], usesInheritance: true, ngImport: i0 }); }
|
|
1674
1674
|
}
|
|
1675
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1675
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: MatRadioButtonTbFilterDirective, decorators: [{
|
|
1676
1676
|
type: Directive,
|
|
1677
1677
|
args: [{
|
|
1678
1678
|
selector: 'mat-radio-button[tbCustomFilter]',
|
|
@@ -1703,10 +1703,10 @@ class MatOptionTbFilterDirective extends TbSelectedFilterDirective {
|
|
|
1703
1703
|
ngOnInit() {
|
|
1704
1704
|
super.ngOnInit();
|
|
1705
1705
|
}
|
|
1706
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1707
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1706
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: MatOptionTbFilterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1707
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0", type: MatOptionTbFilterDirective, isStandalone: true, selector: "mat-option[tbCustomFilter]", inputs: { predicate: ["tbCustomFilter", "predicate"], filterId: "filterId" }, providers: [{ provide: TableCustomFilterDirective, useExisting: MatOptionTbFilterDirective }], usesInheritance: true, ngImport: i0 }); }
|
|
1708
1708
|
}
|
|
1709
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1709
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: MatOptionTbFilterDirective, decorators: [{
|
|
1710
1710
|
type: Directive,
|
|
1711
1711
|
args: [{
|
|
1712
1712
|
selector: 'mat-option[tbCustomFilter]',
|
|
@@ -1730,10 +1730,10 @@ class MatButtonToggleFilterDirective extends TbSelectedFilterDirective {
|
|
|
1730
1730
|
ngOnInit() {
|
|
1731
1731
|
super.ngOnInit();
|
|
1732
1732
|
}
|
|
1733
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1734
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1733
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: MatButtonToggleFilterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1734
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.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 }); }
|
|
1735
1735
|
}
|
|
1736
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1736
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: MatButtonToggleFilterDirective, decorators: [{
|
|
1737
1737
|
type: Directive,
|
|
1738
1738
|
args: [{
|
|
1739
1739
|
selector: 'mat-button-toggle[tbCustomFilter]',
|
|
@@ -1748,10 +1748,10 @@ class PhoneNumberPipe {
|
|
|
1748
1748
|
transform(phoneNum) {
|
|
1749
1749
|
return phoneFormatter(phoneNum);
|
|
1750
1750
|
}
|
|
1751
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1752
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "
|
|
1751
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: PhoneNumberPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
1752
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.0", ngImport: i0, type: PhoneNumberPipe, isStandalone: true, name: "phone" }); }
|
|
1753
1753
|
}
|
|
1754
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1754
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: PhoneNumberPipe, decorators: [{
|
|
1755
1755
|
type: Pipe,
|
|
1756
1756
|
args: [{ name: 'phone' }]
|
|
1757
1757
|
}] });
|
|
@@ -1773,10 +1773,10 @@ class SpaceCasePipe {
|
|
|
1773
1773
|
return this.spaceCase(value);
|
|
1774
1774
|
};
|
|
1775
1775
|
}
|
|
1776
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1777
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "
|
|
1776
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SpaceCasePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
1777
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.0", ngImport: i0, type: SpaceCasePipe, isStandalone: true, name: "spaceCase" }); }
|
|
1778
1778
|
}
|
|
1779
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1779
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SpaceCasePipe, decorators: [{
|
|
1780
1780
|
type: Pipe,
|
|
1781
1781
|
args: [{ name: 'spaceCase' }]
|
|
1782
1782
|
}] });
|
|
@@ -1820,17 +1820,17 @@ class PreventEnterDirective {
|
|
|
1820
1820
|
onKeyDown() {
|
|
1821
1821
|
return false;
|
|
1822
1822
|
}
|
|
1823
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1824
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1823
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: PreventEnterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1824
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0", type: PreventEnterDirective, isStandalone: true, selector: "preventEnter", host: { listeners: { "keydown.enter": "onKeyDown()" } }, ngImport: i0 }); }
|
|
1825
1825
|
}
|
|
1826
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1826
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: PreventEnterDirective, decorators: [{
|
|
1827
1827
|
type: Directive,
|
|
1828
1828
|
args: [{
|
|
1829
1829
|
selector: 'preventEnter',
|
|
1830
1830
|
}]
|
|
1831
1831
|
}], propDecorators: { onKeyDown: [{
|
|
1832
1832
|
type: HostListener,
|
|
1833
|
-
args: ['keydown.enter', [
|
|
1833
|
+
args: ['keydown.enter', []]
|
|
1834
1834
|
}] } });
|
|
1835
1835
|
|
|
1836
1836
|
class StopPropagationDirective {
|
|
@@ -1840,10 +1840,10 @@ class StopPropagationDirective {
|
|
|
1840
1840
|
onMousedown(event) {
|
|
1841
1841
|
event.stopPropagation();
|
|
1842
1842
|
}
|
|
1843
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1844
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1843
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: StopPropagationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1844
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0", type: StopPropagationDirective, isStandalone: true, selector: "[stop-propagation]", host: { listeners: { "click": "onClick($event)", "mousedown": "onMousedown($event)" } }, ngImport: i0 }); }
|
|
1845
1845
|
}
|
|
1846
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1846
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: StopPropagationDirective, decorators: [{
|
|
1847
1847
|
type: Directive,
|
|
1848
1848
|
args: [{
|
|
1849
1849
|
selector: "[stop-propagation]",
|
|
@@ -1868,10 +1868,10 @@ class AutoFocusDirective {
|
|
|
1868
1868
|
});
|
|
1869
1869
|
}
|
|
1870
1870
|
}
|
|
1871
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1872
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1871
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: AutoFocusDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1872
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0", type: AutoFocusDirective, isStandalone: true, selector: "[autoFocus]", inputs: { autoFocus: "autoFocus" }, ngImport: i0 }); }
|
|
1873
1873
|
}
|
|
1874
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1874
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: AutoFocusDirective, decorators: [{
|
|
1875
1875
|
type: Directive,
|
|
1876
1876
|
args: [{
|
|
1877
1877
|
selector: '[autoFocus]',
|
|
@@ -1887,10 +1887,10 @@ class ClickSubjectDirective extends Subject {
|
|
|
1887
1887
|
set clickSubject(val) {
|
|
1888
1888
|
this._val = val;
|
|
1889
1889
|
}
|
|
1890
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1891
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1890
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ClickSubjectDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1891
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0", type: ClickSubjectDirective, isStandalone: true, selector: "[clickSubject]", inputs: { clickSubject: "clickSubject" }, host: { listeners: { "click": "next(this._val)" } }, exportAs: ["clickSubject"], usesInheritance: true, ngImport: i0 }); }
|
|
1892
1892
|
}
|
|
1893
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1893
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ClickSubjectDirective, decorators: [{
|
|
1894
1894
|
type: Directive,
|
|
1895
1895
|
args: [{
|
|
1896
1896
|
selector: '[clickSubject]',
|
|
@@ -1908,10 +1908,10 @@ class ClickEmitterDirective extends Subject {
|
|
|
1908
1908
|
constructor() {
|
|
1909
1909
|
super();
|
|
1910
1910
|
}
|
|
1911
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1912
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1911
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ClickEmitterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1912
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0", type: ClickEmitterDirective, isStandalone: true, selector: "[clickEmitter]", host: { listeners: { "click": "next(true)" } }, exportAs: ["clickEmitter"], usesInheritance: true, ngImport: i0 }); }
|
|
1913
1913
|
}
|
|
1914
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1914
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ClickEmitterDirective, decorators: [{
|
|
1915
1915
|
type: Directive,
|
|
1916
1916
|
args: [{
|
|
1917
1917
|
selector: '[clickEmitter]',
|
|
@@ -1935,10 +1935,10 @@ class DialogService {
|
|
|
1935
1935
|
closeAllOpDialogs() {
|
|
1936
1936
|
this.allOpenOpDialogs.forEach(ref => ref.close());
|
|
1937
1937
|
}
|
|
1938
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1939
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
1938
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: DialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1939
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: DialogService, providedIn: 'root' }); }
|
|
1940
1940
|
}
|
|
1941
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1941
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: DialogService, decorators: [{
|
|
1942
1942
|
type: Injectable,
|
|
1943
1943
|
args: [{ providedIn: 'root' }]
|
|
1944
1944
|
}] });
|
|
@@ -1965,10 +1965,10 @@ class DialogWrapper {
|
|
|
1965
1965
|
this.viewContext.$implicit = value;
|
|
1966
1966
|
this.viewContext.opDialog = value;
|
|
1967
1967
|
}
|
|
1968
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1969
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1968
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: DialogWrapper, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1969
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.0", type: DialogWrapper, isStandalone: true, selector: "dialog-wrapper", ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1970
1970
|
}
|
|
1971
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1971
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: DialogWrapper, decorators: [{
|
|
1972
1972
|
type: Component,
|
|
1973
1973
|
args: [{
|
|
1974
1974
|
selector: 'dialog-wrapper',
|
|
@@ -1996,7 +1996,7 @@ class DialogDirective {
|
|
|
1996
1996
|
* If no width provided or/and height, provide a default in number (of pixels) of the not provided values.
|
|
1997
1997
|
* If no width/height provided at all, will default to 600x400.
|
|
1998
1998
|
*/
|
|
1999
|
-
this.$positionOnScreen = input(false, { alias: 'opDialogPositionOnScreen' });
|
|
1999
|
+
this.$positionOnScreen = input(false, ...(ngDevMode ? [{ debugName: "$positionOnScreen", alias: 'opDialogPositionOnScreen' }] : [{ alias: 'opDialogPositionOnScreen' }]));
|
|
2000
2000
|
this._data = new Subject();
|
|
2001
2001
|
this.setDataAndState = (data) => {
|
|
2002
2002
|
if (data) {
|
|
@@ -2094,10 +2094,10 @@ class DialogDirective {
|
|
|
2094
2094
|
static ngTemplateContextGuard(dir, ctx) {
|
|
2095
2095
|
return true;
|
|
2096
2096
|
}
|
|
2097
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2098
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "
|
|
2097
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: DialogDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2098
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.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 }); }
|
|
2099
2099
|
}
|
|
2100
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2100
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: DialogDirective, decorators: [{
|
|
2101
2101
|
type: Directive,
|
|
2102
2102
|
args: [{ selector: '[opDialog]', }]
|
|
2103
2103
|
}], propDecorators: { opDialogClosed: [{
|
|
@@ -2112,15 +2112,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImpor
|
|
|
2112
2112
|
}], nativeElement: [{
|
|
2113
2113
|
type: Input,
|
|
2114
2114
|
args: ['opDialogOrigin']
|
|
2115
|
-
}] } });
|
|
2115
|
+
}], $positionOnScreen: [{ type: i0.Input, args: [{ isSignal: true, alias: "opDialogPositionOnScreen", required: false }] }] } });
|
|
2116
2116
|
|
|
2117
2117
|
class StylerDirective {
|
|
2118
2118
|
constructor() {
|
|
2119
2119
|
this.el = inject(ElementRef);
|
|
2120
2120
|
this.renderer = inject(Renderer2);
|
|
2121
|
-
this.$stylesApplied = signal({});
|
|
2122
|
-
this.$element = input.required({ alias: 'element' });
|
|
2123
|
-
this.$styler = input.required({ alias: 'styler' });
|
|
2121
|
+
this.$stylesApplied = signal({}, ...(ngDevMode ? [{ debugName: "$stylesApplied" }] : []));
|
|
2122
|
+
this.$element = input.required(...(ngDevMode ? [{ debugName: "$element", alias: 'element' }] : [{ alias: 'element' }]));
|
|
2123
|
+
this.$styler = input.required(...(ngDevMode ? [{ debugName: "$styler", alias: 'styler' }] : [{ alias: 'styler' }]));
|
|
2124
2124
|
this.#stylerEffect = effect(() => {
|
|
2125
2125
|
const styles = this.$styler();
|
|
2126
2126
|
untracked(() => {
|
|
@@ -2144,16 +2144,16 @@ class StylerDirective {
|
|
|
2144
2144
|
});
|
|
2145
2145
|
this.$stylesApplied.set(toApply);
|
|
2146
2146
|
});
|
|
2147
|
-
});
|
|
2147
|
+
}, ...(ngDevMode ? [{ debugName: "#stylerEffect" }] : []));
|
|
2148
2148
|
}
|
|
2149
2149
|
#stylerEffect;
|
|
2150
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2151
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "
|
|
2150
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: StylerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2151
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.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 }); }
|
|
2152
2152
|
}
|
|
2153
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2153
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: StylerDirective, decorators: [{
|
|
2154
2154
|
type: Directive,
|
|
2155
2155
|
args: [{ selector: '[styler]' }]
|
|
2156
|
-
}] });
|
|
2156
|
+
}], propDecorators: { $element: [{ type: i0.Input, args: [{ isSignal: true, alias: "element", required: true }] }], $styler: [{ type: i0.Input, args: [{ isSignal: true, alias: "styler", required: true }] }] } });
|
|
2157
2157
|
|
|
2158
2158
|
class MatSlideToggleGroupDirective {
|
|
2159
2159
|
constructor() {
|
|
@@ -2194,10 +2194,10 @@ class MatSlideToggleGroupDirective {
|
|
|
2194
2194
|
return newVal;
|
|
2195
2195
|
}, startValue), startWith$1(startValue));
|
|
2196
2196
|
}
|
|
2197
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2198
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
2197
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: MatSlideToggleGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2198
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0", type: MatSlideToggleGroupDirective, isStandalone: true, selector: "[opMatSlideToggleGroup]", inputs: { allowMultiple: "allowMultiple" }, outputs: { valueEmitter: "valueEmitter" }, queries: [{ propertyName: "toggles", predicate: MatSlideToggle }], ngImport: i0 }); }
|
|
2199
2199
|
}
|
|
2200
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2200
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: MatSlideToggleGroupDirective, decorators: [{
|
|
2201
2201
|
type: Directive,
|
|
2202
2202
|
args: [{ selector: '[opMatSlideToggleGroup]',
|
|
2203
2203
|
}]
|
|
@@ -2224,10 +2224,10 @@ class TrimWhitespaceDirective {
|
|
|
2224
2224
|
}
|
|
2225
2225
|
}
|
|
2226
2226
|
}
|
|
2227
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2228
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
2227
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TrimWhitespaceDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2228
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0", type: TrimWhitespaceDirective, isStandalone: true, selector: "input[trimWhitespace]", host: { listeners: { "blur": "onBlur()" } }, ngImport: i0 }); }
|
|
2229
2229
|
}
|
|
2230
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2230
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TrimWhitespaceDirective, decorators: [{
|
|
2231
2231
|
type: Directive,
|
|
2232
2232
|
args: [{
|
|
2233
2233
|
selector: 'input[trimWhitespace]',
|
|
@@ -2246,10 +2246,10 @@ class FunctionPipe {
|
|
|
2246
2246
|
}
|
|
2247
2247
|
return func(...args);
|
|
2248
2248
|
}
|
|
2249
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2250
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "
|
|
2249
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: FunctionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
2250
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.0", ngImport: i0, type: FunctionPipe, isStandalone: true, name: "func" }); }
|
|
2251
2251
|
}
|
|
2252
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2252
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: FunctionPipe, decorators: [{
|
|
2253
2253
|
type: Pipe,
|
|
2254
2254
|
args: [{
|
|
2255
2255
|
name: 'func',
|
|
@@ -2260,8 +2260,8 @@ class ConditionalClassesDirective {
|
|
|
2260
2260
|
constructor() {
|
|
2261
2261
|
this.el = inject(ElementRef);
|
|
2262
2262
|
this.renderer = inject(Renderer2);
|
|
2263
|
-
this.$element = input.required({ alias: 'element' });
|
|
2264
|
-
this.$classes = input(undefined, { alias: 'conditionalClasses' });
|
|
2263
|
+
this.$element = input.required(...(ngDevMode ? [{ debugName: "$element", alias: 'element' }] : [{ alias: 'element' }]));
|
|
2264
|
+
this.$classes = input(undefined, ...(ngDevMode ? [{ debugName: "$classes", alias: 'conditionalClasses' }] : [{ alias: 'conditionalClasses' }]));
|
|
2265
2265
|
this.classesApplied = [];
|
|
2266
2266
|
this.#onClasses = effect(() => {
|
|
2267
2267
|
const classes = this.$classes();
|
|
@@ -2278,22 +2278,22 @@ class ConditionalClassesDirective {
|
|
|
2278
2278
|
classesNotYetApplied.forEach(c => this.renderer.addClass(this.el.nativeElement, c));
|
|
2279
2279
|
this.classesApplied = toApply;
|
|
2280
2280
|
});
|
|
2281
|
-
});
|
|
2281
|
+
}, ...(ngDevMode ? [{ debugName: "#onClasses" }] : []));
|
|
2282
2282
|
}
|
|
2283
2283
|
#onClasses;
|
|
2284
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2285
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "
|
|
2284
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ConditionalClassesDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2285
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.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 }); }
|
|
2286
2286
|
}
|
|
2287
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2287
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ConditionalClassesDirective, decorators: [{
|
|
2288
2288
|
type: Directive,
|
|
2289
2289
|
args: [{
|
|
2290
2290
|
selector: '[conditionalClasses]',
|
|
2291
2291
|
}]
|
|
2292
|
-
}] });
|
|
2292
|
+
}], propDecorators: { $element: [{ type: i0.Input, args: [{ isSignal: true, alias: "element", required: true }] }], $classes: [{ type: i0.Input, args: [{ isSignal: true, alias: "conditionalClasses", required: false }] }] } });
|
|
2293
2293
|
|
|
2294
2294
|
class UtilitiesModule {
|
|
2295
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2296
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
2295
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UtilitiesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
2296
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.0", ngImport: i0, type: UtilitiesModule, imports: [SpaceCasePipe,
|
|
2297
2297
|
PhoneNumberPipe,
|
|
2298
2298
|
FunctionPipe,
|
|
2299
2299
|
StopPropagationDirective,
|
|
@@ -2318,11 +2318,11 @@ class UtilitiesModule {
|
|
|
2318
2318
|
DialogDirective,
|
|
2319
2319
|
MatSlideToggleGroupDirective,
|
|
2320
2320
|
ConditionalClassesDirective] }); }
|
|
2321
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
2321
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UtilitiesModule, providers: [
|
|
2322
2322
|
DialogService
|
|
2323
2323
|
] }); }
|
|
2324
2324
|
}
|
|
2325
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2325
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UtilitiesModule, decorators: [{
|
|
2326
2326
|
type: NgModule,
|
|
2327
2327
|
args: [{
|
|
2328
2328
|
exports: [
|
|
@@ -2893,6 +2893,12 @@ function cleanPersistedState(state, pState) {
|
|
|
2893
2893
|
const metas = Object.values(state.metaData);
|
|
2894
2894
|
const filters = Object.values(pState.filters).filter(fltr => isCustomFilter(fltr) || metas.some(m => m.key === fltr.key)).reduce((obj, filter) => {
|
|
2895
2895
|
obj[filter.filterId] = pState.filters[filter.filterId];
|
|
2896
|
+
if (isFilterInfo(filter)) {
|
|
2897
|
+
const metaData = state.metaData[filter.key];
|
|
2898
|
+
if (metaData) {
|
|
2899
|
+
filter.filterBy = metaData.filterLogic?.filterBy === 'use map' ? metaData.map : metaData.filterLogic?.filterBy;
|
|
2900
|
+
}
|
|
2901
|
+
}
|
|
2896
2902
|
return obj;
|
|
2897
2903
|
}, {});
|
|
2898
2904
|
const sorted = pState.sorted.filter(s => metas.some(m => m.key === s.active));
|
|
@@ -2919,7 +2925,6 @@ const mergeMeta = (orig, merge) => {
|
|
|
2919
2925
|
width: merge.width ?? orig.width,
|
|
2920
2926
|
noExport: merge.noExport || orig.noExport,
|
|
2921
2927
|
noFilter: merge.noFilter || orig.noFilter,
|
|
2922
|
-
customCell: merge.customCell ?? orig.customCell,
|
|
2923
2928
|
transform: merge.transform ?? orig.transform,
|
|
2924
2929
|
map: merge.map ?? orig.map,
|
|
2925
2930
|
click: merge.click ?? orig.click,
|
|
@@ -2959,7 +2964,7 @@ class TableStore extends ComponentStore {
|
|
|
2959
2964
|
this.$savableState = computed(() => {
|
|
2960
2965
|
const state = this.state();
|
|
2961
2966
|
return mapSaveableState(state);
|
|
2962
|
-
});
|
|
2967
|
+
}, ...(ngDevMode ? [{ debugName: "$savableState" }] : []));
|
|
2963
2968
|
//#region meta order and hidden
|
|
2964
2969
|
this.showColumn = this.updater((state, key) => ({
|
|
2965
2970
|
...state,
|
|
@@ -3038,6 +3043,8 @@ class TableStore extends ComponentStore {
|
|
|
3038
3043
|
if (!filter.filterId) {
|
|
3039
3044
|
filter.filterId = crypto.randomUUID();
|
|
3040
3045
|
}
|
|
3046
|
+
const metaData = state.metaData[filter.key];
|
|
3047
|
+
filter.filterBy = metaData.filterLogic?.filterBy === 'use map' ? metaData.map : metaData.filterLogic?.filterBy;
|
|
3041
3048
|
filtersObj[filter.filterId] = filter;
|
|
3042
3049
|
return filtersObj;
|
|
3043
3050
|
}, {});
|
|
@@ -3053,7 +3060,7 @@ class TableStore extends ComponentStore {
|
|
|
3053
3060
|
};
|
|
3054
3061
|
};
|
|
3055
3062
|
this.$filters = this.selectSignal(state => state.filters);
|
|
3056
|
-
this.$filtersArray = computed(() => Object.values(this.state().filters) || []);
|
|
3063
|
+
this.$filtersArray = computed(() => Object.values(this.state().filters) || [], ...(ngDevMode ? [{ debugName: "$filtersArray" }] : []));
|
|
3057
3064
|
this.filters$ = this.select(state => state.filters);
|
|
3058
3065
|
this.$getFilter = (filterId) => {
|
|
3059
3066
|
return this.selectSignal(this.$filters, filters => filters[filterId]);
|
|
@@ -3076,7 +3083,7 @@ class TableStore extends ComponentStore {
|
|
|
3076
3083
|
sorted: sortArray,
|
|
3077
3084
|
};
|
|
3078
3085
|
});
|
|
3079
|
-
this.$preSort = computed(() => createPreSort(this.$metaData()));
|
|
3086
|
+
this.$preSort = computed(() => createPreSort(this.$metaData()), ...(ngDevMode ? [{ debugName: "$preSort" }] : []));
|
|
3080
3087
|
this._$selectSorted = this.selectSignal(state => state.sorted, {
|
|
3081
3088
|
equal: sortsAreSame
|
|
3082
3089
|
});
|
|
@@ -3088,7 +3095,7 @@ class TableStore extends ComponentStore {
|
|
|
3088
3095
|
const sortBy = sortLogic?.sortBy === 'use map' ? meta.map : sortLogic?.sortBy;
|
|
3089
3096
|
return ({ ...s, ...sortLogic, sortBy });
|
|
3090
3097
|
});
|
|
3091
|
-
});
|
|
3098
|
+
}, ...(ngDevMode ? [{ debugName: "$selectSorted" }] : []));
|
|
3092
3099
|
this.selectSorted$ = this.select(state => state.sorted).pipe(distinctUntilChanged(sortsAreSame));
|
|
3093
3100
|
this.$getSorts = this.selectSignal(() => this.$initializationState() !== InitializationState.Ready ? [] : this.$selectSorted());
|
|
3094
3101
|
this.sort$ = toObservable(this.$getSorts);
|
|
@@ -3373,10 +3380,10 @@ class TableStore extends ComponentStore {
|
|
|
3373
3380
|
};
|
|
3374
3381
|
}
|
|
3375
3382
|
#$groupBy;
|
|
3376
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3377
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
3383
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TableStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
3384
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TableStore }); }
|
|
3378
3385
|
}
|
|
3379
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3386
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TableStore, decorators: [{
|
|
3380
3387
|
type: Injectable
|
|
3381
3388
|
}], ctorParameters: () => [] });
|
|
3382
3389
|
const resetable = [
|
|
@@ -3408,7 +3415,7 @@ class MultiSortDirective extends MatSort {
|
|
|
3408
3415
|
untracked(() => {
|
|
3409
3416
|
this.state.setSort({ key: sortChange.active, direction: sortChange.direction });
|
|
3410
3417
|
});
|
|
3411
|
-
});
|
|
3418
|
+
}, ...(ngDevMode ? [{ debugName: "#onSortChange" }] : []));
|
|
3412
3419
|
this.#onStateSortUpdate = effect(() => {
|
|
3413
3420
|
const rules = this.state.$getSorts();
|
|
3414
3421
|
if (!rules)
|
|
@@ -3423,14 +3430,14 @@ class MultiSortDirective extends MatSort {
|
|
|
3423
3430
|
this.sortChange.emit(topRule);
|
|
3424
3431
|
}
|
|
3425
3432
|
});
|
|
3426
|
-
});
|
|
3433
|
+
}, ...(ngDevMode ? [{ debugName: "#onStateSortUpdate" }] : []));
|
|
3427
3434
|
}
|
|
3428
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3429
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
3435
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: MultiSortDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3436
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.0", type: MultiSortDirective, isStandalone: true, selector: "[multiSort]", inputs: { disabled: ["matSortDisabled", "disabled"] }, providers: [
|
|
3430
3437
|
{ provide: MatSort, useExisting: MultiSortDirective }
|
|
3431
3438
|
], exportAs: ["multiSort"], usesInheritance: true, ngImport: i0 }); }
|
|
3432
3439
|
}
|
|
3433
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3440
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: MultiSortDirective, decorators: [{
|
|
3434
3441
|
type: Directive,
|
|
3435
3442
|
args: [{
|
|
3436
3443
|
selector: '[multiSort]',
|
|
@@ -3457,7 +3464,7 @@ class InFilterComponent {
|
|
|
3457
3464
|
constructor() {
|
|
3458
3465
|
this.ref = inject(ChangeDetectorRef);
|
|
3459
3466
|
this.FieldType = FieldType;
|
|
3460
|
-
this.$type = input.required({ alias: 'type' });
|
|
3467
|
+
this.$type = input.required(...(ngDevMode ? [{ debugName: "$type", alias: 'type' }] : [{ alias: 'type' }]));
|
|
3461
3468
|
this.value = [undefined];
|
|
3462
3469
|
this.onChange = (_) => { };
|
|
3463
3470
|
this.onTouched = () => { };
|
|
@@ -3492,14 +3499,14 @@ class InFilterComponent {
|
|
|
3492
3499
|
this.ref.markForCheck();
|
|
3493
3500
|
this.onChange(this.value);
|
|
3494
3501
|
}
|
|
3495
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3496
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
3502
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: InFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3503
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: InFilterComponent, isStandalone: true, selector: "lib-in-filter", inputs: { $type: { classPropertyName: "$type", publicName: "type", isSignal: true, isRequired: true, transformFunction: null } }, providers: [{
|
|
3497
3504
|
provide: NG_VALUE_ACCESSOR,
|
|
3498
3505
|
useExisting: InFilterComponent,
|
|
3499
3506
|
multi: true
|
|
3500
3507
|
}], 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 }); }
|
|
3501
3508
|
}
|
|
3502
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3509
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: InFilterComponent, decorators: [{
|
|
3503
3510
|
type: Component,
|
|
3504
3511
|
args: [{ selector: 'lib-in-filter', changeDetection: ChangeDetectionStrategy.OnPush, providers: [{
|
|
3505
3512
|
provide: NG_VALUE_ACCESSOR,
|
|
@@ -3508,14 +3515,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImpor
|
|
|
3508
3515
|
}], imports: [
|
|
3509
3516
|
FormsModule, AutoFocusDirective, MatDatepickerModule
|
|
3510
3517
|
], 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"] }]
|
|
3511
|
-
}], ctorParameters: () => [] });
|
|
3518
|
+
}], ctorParameters: () => [], propDecorators: { $type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: true }] }] } });
|
|
3512
3519
|
|
|
3513
3520
|
class InListFilterComponent {
|
|
3514
3521
|
constructor() {
|
|
3515
3522
|
this.ref = inject(ChangeDetectorRef);
|
|
3516
3523
|
this.tableState = inject(TableStore);
|
|
3517
|
-
this.$values = input([], { alias: 'values' });
|
|
3518
|
-
this.#e = effect(() => this.writeValue(this.$values()));
|
|
3524
|
+
this.$values = input([], ...(ngDevMode ? [{ debugName: "$values", alias: 'values' }] : [{ alias: 'values' }]));
|
|
3525
|
+
this.#e = effect(() => this.writeValue(this.$values()), ...(ngDevMode ? [{ debugName: "#e" }] : []));
|
|
3519
3526
|
this.value = [];
|
|
3520
3527
|
this.FieldType = FieldType;
|
|
3521
3528
|
this.includes = (value, values) => {
|
|
@@ -3523,20 +3530,20 @@ class InListFilterComponent {
|
|
|
3523
3530
|
};
|
|
3524
3531
|
this.onChange = (_) => { };
|
|
3525
3532
|
this.onTouched = () => { };
|
|
3526
|
-
this.$key = input.required({ alias: 'key' });
|
|
3527
|
-
this.$selectedKeys = signal([]);
|
|
3528
|
-
this.$metaData = computed(() => this.tableState.$getMetaData(this.$key())());
|
|
3533
|
+
this.$key = input.required(...(ngDevMode ? [{ debugName: "$key", alias: 'key' }] : [{ alias: 'key' }]));
|
|
3534
|
+
this.$selectedKeys = signal([], ...(ngDevMode ? [{ debugName: "$selectedKeys" }] : []));
|
|
3535
|
+
this.$metaData = computed(() => this.tableState.$getMetaData(this.$key())(), ...(ngDevMode ? [{ debugName: "$metaData" }] : []));
|
|
3529
3536
|
this.$allValues = computed(() => {
|
|
3530
3537
|
const filterable = this.$metaData()?.additional?.filterOptions?.filterableValues;
|
|
3531
3538
|
return filterable === 'all values' || filterable?.allValues === true;
|
|
3532
|
-
});
|
|
3539
|
+
}, ...(ngDevMode ? [{ debugName: "$allValues" }] : []));
|
|
3533
3540
|
this.$specialBlank = computed(() => {
|
|
3534
3541
|
const specialBlank = this.tableState.selectSignal(s => s.allFilters)()[this.$metaData().key]?.find(k => isBlankValueFilter(k));
|
|
3535
3542
|
if (!specialBlank)
|
|
3536
3543
|
return;
|
|
3537
3544
|
return { key: specialBlank, value: 'BLANK' };
|
|
3538
|
-
});
|
|
3539
|
-
this.$specialBlankSelected = computed(() => this.$selectedKeys().some(k => isBlankValueFilter(k.value)));
|
|
3545
|
+
}, ...(ngDevMode ? [{ debugName: "$specialBlank" }] : []));
|
|
3546
|
+
this.$specialBlankSelected = computed(() => this.$selectedKeys().some(k => isBlankValueFilter(k.value)), ...(ngDevMode ? [{ debugName: "$specialBlankSelected" }] : []));
|
|
3540
3547
|
this.$keyValues = computed(() => {
|
|
3541
3548
|
const metaData = this.$metaData();
|
|
3542
3549
|
if (this.$allValues()) {
|
|
@@ -3549,7 +3556,7 @@ class InListFilterComponent {
|
|
|
3549
3556
|
return Object.entries(metaData.additional.enumMap).map(([key, value]) => ({ key: value, value: +key }));
|
|
3550
3557
|
}
|
|
3551
3558
|
return [];
|
|
3552
|
-
});
|
|
3559
|
+
}, ...(ngDevMode ? [{ debugName: "$keyValues" }] : []));
|
|
3553
3560
|
}
|
|
3554
3561
|
#e;
|
|
3555
3562
|
writeValue(obj) {
|
|
@@ -3582,8 +3589,8 @@ class InListFilterComponent {
|
|
|
3582
3589
|
}
|
|
3583
3590
|
return val.key;
|
|
3584
3591
|
}
|
|
3585
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3586
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
3592
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: InListFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3593
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.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: [{
|
|
3587
3594
|
provide: NG_VALUE_ACCESSOR,
|
|
3588
3595
|
useExisting: InListFilterComponent,
|
|
3589
3596
|
multi: true
|
|
@@ -3656,7 +3663,7 @@ class InListFilterComponent {
|
|
|
3656
3663
|
}
|
|
3657
3664
|
`, 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 }); }
|
|
3658
3665
|
}
|
|
3659
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3666
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: InListFilterComponent, decorators: [{
|
|
3660
3667
|
type: Component,
|
|
3661
3668
|
args: [{ selector: 'tb-in-list-filter', template: `
|
|
3662
3669
|
@if($specialBlank(); as specialBlank)
|
|
@@ -3732,76 +3739,76 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImpor
|
|
|
3732
3739
|
}], imports: [
|
|
3733
3740
|
MatCheckboxModule, StopPropagationDirective, SpaceCasePipe, FunctionPipe, DatePipe, CurrencyPipe
|
|
3734
3741
|
], styles: [":host{display:block;max-height:max(50vh,400px);overflow-y:auto}\n"] }]
|
|
3735
|
-
}] });
|
|
3742
|
+
}], propDecorators: { $values: [{ type: i0.Input, args: [{ isSignal: true, alias: "values", required: false }] }], $key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: true }] }] } });
|
|
3736
3743
|
|
|
3737
3744
|
class DateFilterComponent {
|
|
3738
3745
|
constructor() {
|
|
3739
3746
|
this.FilterType = FilterType;
|
|
3740
3747
|
this.FieldType = FieldType;
|
|
3741
|
-
this.$info = input.required({ alias: 'info' });
|
|
3742
|
-
this.$currentFilterType = input.required({ alias: 'currentFilterType' });
|
|
3748
|
+
this.$info = input.required(...(ngDevMode ? [{ debugName: "$info", alias: 'info' }] : [{ alias: 'info' }]));
|
|
3749
|
+
this.$currentFilterType = input.required(...(ngDevMode ? [{ debugName: "$currentFilterType", alias: 'currentFilterType' }] : [{ alias: 'currentFilterType' }]));
|
|
3743
3750
|
this.state = inject(TableStore);
|
|
3744
|
-
this.$metaData = computed(() => this.state.$getMetaData(this.$info()?.key)());
|
|
3751
|
+
this.$metaData = computed(() => this.state.$getMetaData(this.$info()?.key)(), ...(ngDevMode ? [{ debugName: "$metaData" }] : []));
|
|
3745
3752
|
this.$allValuesInMeta = computed(() => {
|
|
3746
3753
|
const filterable = this.$metaData()?.additional?.filterOptions?.filterableValues;
|
|
3747
3754
|
return filterable === 'all values' || filterable?.allValues === true;
|
|
3748
|
-
});
|
|
3755
|
+
}, ...(ngDevMode ? [{ debugName: "$allValuesInMeta" }] : []));
|
|
3749
3756
|
}
|
|
3750
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3751
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
3757
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: DateFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3758
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.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 }); }
|
|
3752
3759
|
}
|
|
3753
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3760
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: DateFilterComponent, decorators: [{
|
|
3754
3761
|
type: Component,
|
|
3755
3762
|
args: [{ selector: 'tb-date-filter', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], imports: [
|
|
3756
3763
|
MatInputModule, FormsModule, MatDatepickerModule, InFilterComponent, InListFilterComponent
|
|
3757
3764
|
], 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"] }]
|
|
3758
|
-
}] });
|
|
3765
|
+
}], propDecorators: { $info: [{ type: i0.Input, args: [{ isSignal: true, alias: "info", required: true }] }], $currentFilterType: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentFilterType", required: true }] }] } });
|
|
3759
3766
|
|
|
3760
3767
|
class NumberFilterComponent {
|
|
3761
3768
|
constructor() {
|
|
3762
3769
|
this.FilterType = FilterType;
|
|
3763
3770
|
this.FieldType = FieldType;
|
|
3764
|
-
this.$currentFilterType = input.required({ alias: 'currentFilterType' });
|
|
3765
|
-
this.$info = input.required({ alias: 'info' });
|
|
3771
|
+
this.$currentFilterType = input.required(...(ngDevMode ? [{ debugName: "$currentFilterType", alias: 'currentFilterType' }] : [{ alias: 'currentFilterType' }]));
|
|
3772
|
+
this.$info = input.required(...(ngDevMode ? [{ debugName: "$info", alias: 'info' }] : [{ alias: 'info' }]));
|
|
3766
3773
|
this.state = inject(TableStore);
|
|
3767
|
-
this.$metaData = computed(() => this.state.$getMetaData(this.$info()?.key)());
|
|
3774
|
+
this.$metaData = computed(() => this.state.$getMetaData(this.$info()?.key)(), ...(ngDevMode ? [{ debugName: "$metaData" }] : []));
|
|
3768
3775
|
this.$allValuesInMeta = computed(() => {
|
|
3769
3776
|
const filterable = this.$metaData()?.additional?.filterOptions?.filterableValues;
|
|
3770
3777
|
return filterable === 'all values' || filterable?.allValues === true;
|
|
3771
|
-
});
|
|
3778
|
+
}, ...(ngDevMode ? [{ debugName: "$allValuesInMeta" }] : []));
|
|
3772
3779
|
}
|
|
3773
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3774
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
3780
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: NumberFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3781
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.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 }); }
|
|
3775
3782
|
}
|
|
3776
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3783
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: NumberFilterComponent, decorators: [{
|
|
3777
3784
|
type: Component,
|
|
3778
3785
|
args: [{ selector: 'tb-number-filter', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], imports: [
|
|
3779
3786
|
MatInputModule, FormsModule, InFilterComponent, InListFilterComponent
|
|
3780
3787
|
], 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"] }]
|
|
3781
|
-
}] });
|
|
3788
|
+
}], propDecorators: { $currentFilterType: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentFilterType", required: true }] }], $info: [{ type: i0.Input, args: [{ isSignal: true, alias: "info", required: true }] }] } });
|
|
3782
3789
|
|
|
3783
3790
|
class DateTimeFilterComponent {
|
|
3784
3791
|
constructor() {
|
|
3785
3792
|
this.FilterType = FilterType;
|
|
3786
3793
|
this.FieldType = FieldType;
|
|
3787
|
-
this.$info = input.required({ alias: 'info' });
|
|
3788
|
-
this.$currentFilterType = input.required({ alias: 'currentFilterType' });
|
|
3794
|
+
this.$info = input.required(...(ngDevMode ? [{ debugName: "$info", alias: 'info' }] : [{ alias: 'info' }]));
|
|
3795
|
+
this.$currentFilterType = input.required(...(ngDevMode ? [{ debugName: "$currentFilterType", alias: 'currentFilterType' }] : [{ alias: 'currentFilterType' }]));
|
|
3789
3796
|
this.state = inject(TableStore);
|
|
3790
|
-
this.$metaData = computed(() => this.state.$getMetaData(this.$info()?.key)());
|
|
3797
|
+
this.$metaData = computed(() => this.state.$getMetaData(this.$info()?.key)(), ...(ngDevMode ? [{ debugName: "$metaData" }] : []));
|
|
3791
3798
|
this.$allValuesInMeta = computed(() => {
|
|
3792
3799
|
const filterable = this.$metaData()?.additional?.filterOptions?.filterableValues;
|
|
3793
3800
|
return filterable === 'all values' || filterable?.allValues === true;
|
|
3794
|
-
});
|
|
3801
|
+
}, ...(ngDevMode ? [{ debugName: "$allValuesInMeta" }] : []));
|
|
3795
3802
|
}
|
|
3796
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3797
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
3803
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: DateTimeFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3804
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.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 }); }
|
|
3798
3805
|
}
|
|
3799
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3806
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: DateTimeFilterComponent, decorators: [{
|
|
3800
3807
|
type: Component,
|
|
3801
3808
|
args: [{ selector: 'tb-date-time-filter', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], imports: [
|
|
3802
3809
|
FormsModule, InFilterComponent, InListFilterComponent
|
|
3803
3810
|
], 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"] }]
|
|
3804
|
-
}] });
|
|
3811
|
+
}], propDecorators: { $info: [{ type: i0.Input, args: [{ isSignal: true, alias: "info", required: true }] }], $currentFilterType: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentFilterType", required: true }] }] } });
|
|
3805
3812
|
|
|
3806
3813
|
class FilterComponent {
|
|
3807
3814
|
constructor() {
|
|
@@ -3809,23 +3816,23 @@ class FilterComponent {
|
|
|
3809
3816
|
this.filterTypes = filterTypeMap;
|
|
3810
3817
|
this.FilterType = FilterType;
|
|
3811
3818
|
this.FieldType = FieldType;
|
|
3812
|
-
this.$filter = input.required({
|
|
3813
|
-
|
|
3814
|
-
|
|
3815
|
-
|
|
3816
|
-
|
|
3819
|
+
this.$filter = input.required(...(ngDevMode ? [{ debugName: "$filter", alias: 'filter',
|
|
3820
|
+
transform: (f) => ({ ...f }) }] : [{
|
|
3821
|
+
alias: 'filter',
|
|
3822
|
+
transform: (f) => ({ ...f })
|
|
3823
|
+
}]));
|
|
3824
|
+
this.$metaData = computed(() => this.state.$getMetaData(this.$filter()?.key)(), ...(ngDevMode ? [{ debugName: "$metaData" }] : []));
|
|
3817
3825
|
this.$allValuesInMeta = computed(() => {
|
|
3818
3826
|
const filterable = this.$metaData()?.additional?.filterOptions?.filterableValues;
|
|
3819
3827
|
return filterable === 'all values' || filterable?.allValues === true;
|
|
3820
|
-
});
|
|
3828
|
+
}, ...(ngDevMode ? [{ debugName: "$allValuesInMeta" }] : []));
|
|
3821
3829
|
this.close$ = new Subject();
|
|
3822
3830
|
this.done$ = new Subject();
|
|
3823
3831
|
this.close = outputFromObservable(this.close$);
|
|
3824
3832
|
this.done = outputFromObservable(merge(this.done$, this.close$));
|
|
3825
|
-
this.$enteredFilterType = signal(undefined);
|
|
3826
|
-
this.$currentFilterType = computed(() => this.$enteredFilterType() || this.$filter()?.filterType);
|
|
3827
|
-
this.$availableFilterTypes = computed(() => this.filterTypes[this.$filter()?.fieldType]);
|
|
3828
|
-
this.$filterBy = computed(() => this.$filter().filterBy);
|
|
3833
|
+
this.$enteredFilterType = signal(undefined, ...(ngDevMode ? [{ debugName: "$enteredFilterType" }] : []));
|
|
3834
|
+
this.$currentFilterType = computed(() => this.$enteredFilterType() || this.$filter()?.filterType, ...(ngDevMode ? [{ debugName: "$currentFilterType" }] : []));
|
|
3835
|
+
this.$availableFilterTypes = computed(() => this.filterTypes[this.$filter()?.fieldType], ...(ngDevMode ? [{ debugName: "$availableFilterTypes" }] : []));
|
|
3829
3836
|
}
|
|
3830
3837
|
onEnter(filter, event) {
|
|
3831
3838
|
event.preventDefault();
|
|
@@ -3835,13 +3842,13 @@ class FilterComponent {
|
|
|
3835
3842
|
}
|
|
3836
3843
|
}
|
|
3837
3844
|
addFilter(filter) {
|
|
3838
|
-
this.state.addFilter({ ...filter
|
|
3845
|
+
this.state.addFilter({ ...filter });
|
|
3839
3846
|
this.done$.next();
|
|
3840
3847
|
}
|
|
3841
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3842
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", 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],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]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3848
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: FilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3849
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: FilterComponent, isStandalone: true, selector: "tb-filter", inputs: { $filter: { classPropertyName: "$filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { close: "close", done: "done" }, ngImport: i0, template: "@let filter = $filter();\r\n@let currentFilterType = $currentFilterType();\r\n\r\n@if (filter)\r\n{\r\n <mat-card appearance=\"outlined\" class=\"filter-card\">\r\n <mat-card-content>\r\n <form #form=\"ngForm\" (keydown.enter)=\"onEnter(form.value,$event)\" (keydown.escape)=\"close$.next()\">\r\n <input type=\"hidden\" name=\"filterId\" [ngModel]=\"filter.filterId\" />\r\n <input type=\"hidden\" name=\"key\" [ngModel]=\"filter.key\" />\r\n <input type=\"hidden\" name=\"fieldType\" [ngModel]=\"filter.fieldType\" />\r\n <div class=\"head-row\" >\r\n <h4 class=\"filter-name\">{{(filter.key | spaceCase)}} Filter</h4>\r\n <button class=\"cancel-button small-button\" color=\"primary\" mat-icon-button type=\"button\" [matTooltip]=\"'Close'\"\r\n (click)=\"close$.next();\">\r\n <mat-icon class=\"cancel-button\" color=\"primary\">close</mat-icon>\r\n </button>\r\n </div>\r\n <div class=\"filter-row\">\r\n <div class=\"inline\">\r\n <mat-form-field class=\"my-filter\" >\r\n <mat-select placeholder=\"Select Filter Type\" name=\"filterType\" [ngModel]=\"$currentFilterType()\" [panelWidth]=\"null\" (ngModelChange)=\"$enteredFilterType.set($event)\">\r\n @for (kvp of filterTypes[filter.fieldType]; track kvp)\r\n {\r\n <mat-option [value]=\"kvp\">\r\n {{ kvp }}\r\n </mat-option>\r\n }\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n @if(\r\n filter.fieldType === FieldType.String\r\n || filter.fieldType === FieldType.Array\r\n || filter.fieldType === FieldType.Link\r\n || filter.fieldType === FieldType.Unknown\r\n || filter.fieldType === FieldType.PhoneNumber)\r\n {\r\n <ng-container *ngTemplateOutlet=\"String\" />\r\n }\r\n @else if(filter.fieldType === FieldType.Number || filter.fieldType === FieldType.Currency)\r\n {\r\n <tb-number-filter [info]=\"filter\" [currentFilterType]=\"currentFilterType!\" />\r\n }\r\n @else if(filter.fieldType === FieldType.Boolean)\r\n {\r\n <ng-container *ngTemplateOutlet=\"Boolean\" />\r\n }\r\n @else if(\r\n filter.fieldType === FieldType.Date\r\n || (\r\n filter.fieldType === FieldType.DateTime\r\n && (currentFilterType === FilterType.DateIsOn || currentFilterType === FilterType.DateIsNotOn || currentFilterType === FilterType.DateTimeAtOrAfter || currentFilterType === FilterType.DateTimeAtOrBefore)\r\n ))\r\n {\r\n <tb-date-filter [info]=\"filter\" [currentFilterType]=\"currentFilterType!\" />\r\n }\r\n @else if(filter.fieldType === FieldType.DateTime)\r\n {\r\n <tb-date-time-filter [info]=\"filter\" [currentFilterType]=\"currentFilterType!\" />\r\n }\r\n @else if(filter.fieldType === FieldType.Enum)\r\n {\r\n <ng-container *ngTemplateOutlet=\"Enum\" />\r\n }\r\n\r\n @if(currentFilterType === FilterType.IsNull)\r\n {\r\n <mat-radio-group name=\"filterValue\" [ngModel]=\"filter.filterValue\">\r\n <mat-radio-button [value]=\"true\">True</mat-radio-button>\r\n <mat-radio-button [value]=\"false\">False</mat-radio-button>\r\n </mat-radio-group>\r\n }\r\n </div>\r\n <button mat-button disableRipple [disabled]=\"form.value.filterValue==undefined || !form.value.filterType\" (click)=\"addFilter(form.value)\">\r\n Apply\r\n </button>\r\n \r\n \r\n <ng-template #String>\r\n @if(currentFilterType !== FilterType.IsNull && currentFilterType !== FilterType.In)\r\n {\r\n <mat-form-field class=\"my-filter\">\r\n <input matInput name=\"filterValue\" [ngModel]=\"filter.filterValue\" />\r\n </mat-form-field>\r\n }\r\n @else if(currentFilterType === FilterType.In)\r\n {\r\n @if($allValuesInMeta())\r\n {\r\n <tb-in-list-filter name=\"filterValue\" [key]=\"filter.key\" [values]=\"filter.filterValue\" [(ngModel)]=\"filter.filterValue\" />\r\n }\r\n @else\r\n {\r\n <lib-in-filter name=\"filterValue\" [type]=\"FieldType.String\" [(ngModel)]=\"filter.filterValue\" />\r\n }\r\n }\r\n </ng-template>\r\n \r\n <ng-template #Boolean >\r\n @if(currentFilterType === FilterType.BooleanEquals)\r\n {\r\n <div class=\"switch\">\r\n <mat-radio-group name=\"filterValue\" [ngModel]=\"filter.filterValue\" >\r\n <mat-radio-button preventEnter [value]=\"true\">True</mat-radio-button>\r\n <mat-radio-button preventEnter [value]=\"false\">False</mat-radio-button>\r\n </mat-radio-group>\r\n </div>\r\n }\r\n </ng-template>\r\n <ng-template #Enum>\r\n @if(currentFilterType === FilterType.In)\r\n {\r\n <tb-in-list-filter name='filterValue' [key]=\"filter.key\" [values]=\"filter.filterValue\" [(ngModel)]=\"filter.filterValue\" />\r\n\r\n }\r\n </ng-template>\r\n </form>\r\n </mat-card-content>\r\n </mat-card>\r\n}\r\n", styles: [".filter-name{color:var(tb-filter-name);margin:10px 0;font-weight:600;display:inline-block}.switch{display:inline-block}.head-row{display:flex;width:100%;align-items:center;justify-content:space-between}.filter-row{display:flex;align-items:center;gap:1rem}mat-card.filter-card::ng-deep mat-form-field{width:150px}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}mat-card.filter-card::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.inline{display:inline-block}.small-button{height:18px;width:18px;font-size:18px;padding:0;margin:0}.small-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.cancel-button{font-weight:700}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$3.MatCardContent, selector: "mat-card-content" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: NumberFilterComponent, selector: "tb-number-filter", inputs: ["currentFilterType", "info"] }, { kind: "component", type: DateFilterComponent, selector: "tb-date-filter", inputs: ["info", "currentFilterType"] }, { kind: "component", type: DateTimeFilterComponent, selector: "tb-date-time-filter", inputs: ["info", "currentFilterType"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i8.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i8.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: InFilterComponent, selector: "lib-in-filter", inputs: ["type"] }, { kind: "component", type: InListFilterComponent, selector: "tb-in-list-filter", inputs: ["values", "key"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3843
3850
|
}
|
|
3844
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3851
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: FilterComponent, decorators: [{
|
|
3845
3852
|
type: Component,
|
|
3846
3853
|
args: [{ selector: 'tb-filter', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
3847
3854
|
MatCardModule, FormsModule, SpaceCasePipe, MatButtonModule, MatTooltipModule, MatIconModule,
|
|
@@ -3849,7 +3856,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImpor
|
|
|
3849
3856
|
DateFilterComponent, DateTimeFilterComponent, MatRadioModule, InFilterComponent, InListFilterComponent,
|
|
3850
3857
|
NgTemplateOutlet
|
|
3851
3858
|
], 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"] }]
|
|
3852
|
-
}] });
|
|
3859
|
+
}], propDecorators: { $filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: true }] }], close: [{ type: i0.Output, args: ["close"] }], done: [{ type: i0.Output, args: ["done"] }] } });
|
|
3853
3860
|
|
|
3854
3861
|
class GenColDisplayerComponent {
|
|
3855
3862
|
constructor() {
|
|
@@ -3858,7 +3865,7 @@ class GenColDisplayerComponent {
|
|
|
3858
3865
|
key: md.key,
|
|
3859
3866
|
displayName: md.displayName,
|
|
3860
3867
|
isVisible: !this.tableState.$hiddenKeys().includes(md.key)
|
|
3861
|
-
})));
|
|
3868
|
+
})), ...(ngDevMode ? [{ debugName: "$columns" }] : []));
|
|
3862
3869
|
}
|
|
3863
3870
|
reset(displayCols) {
|
|
3864
3871
|
displayCols.forEach(c => c.isVisible = true);
|
|
@@ -3874,10 +3881,10 @@ class GenColDisplayerComponent {
|
|
|
3874
3881
|
emit(displayCols) {
|
|
3875
3882
|
this.tableState.setHiddenColumns(displayCols.map(c => ({ key: c.key, visible: c.isVisible })));
|
|
3876
3883
|
}
|
|
3877
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3878
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
3884
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: GenColDisplayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3885
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.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 }); }
|
|
3879
3886
|
}
|
|
3880
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3887
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: GenColDisplayerComponent, decorators: [{
|
|
3881
3888
|
type: Component,
|
|
3882
3889
|
args: [{ selector: 'tb-col-displayer', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
3883
3890
|
MatTooltipModule, MatIconModule, MatButtonModule, MatMenuModule, StopPropagationDirective,
|
|
@@ -3887,17 +3894,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImpor
|
|
|
3887
3894
|
|
|
3888
3895
|
class WrapperFilterStore {
|
|
3889
3896
|
constructor() {
|
|
3890
|
-
this.$filters = signal([]);
|
|
3897
|
+
this.$filters = signal([], ...(ngDevMode ? [{ debugName: "$filters" }] : []));
|
|
3891
3898
|
this.clearAll = () => this.$filters.set([]);
|
|
3892
3899
|
this.deleteByIndex = (index) => this.$filters.update(filters => filters.toSpliced(index, 1));
|
|
3893
3900
|
this.addFilter = (filter) => {
|
|
3894
3901
|
this.$filters.update(filters => [...filters, filter]);
|
|
3895
3902
|
};
|
|
3896
3903
|
}
|
|
3897
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3898
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
3904
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: WrapperFilterStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
3905
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: WrapperFilterStore }); }
|
|
3899
3906
|
}
|
|
3900
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3907
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: WrapperFilterStore, decorators: [{
|
|
3901
3908
|
type: Injectable
|
|
3902
3909
|
}] });
|
|
3903
3910
|
|
|
@@ -3908,19 +3915,18 @@ class GenFilterDisplayerComponent {
|
|
|
3908
3915
|
this.$filterCols = computed(() => {
|
|
3909
3916
|
const mds = this.tableState.$metaDataArray();
|
|
3910
3917
|
return mds.filter(m => m.fieldType !== FieldType.Hidden && (m.fieldType !== FieldType.NotMapped || m.filterLogic?.filterBy) && !m.noFilter);
|
|
3911
|
-
});
|
|
3918
|
+
}, ...(ngDevMode ? [{ debugName: "$filterCols" }] : []));
|
|
3912
3919
|
}
|
|
3913
3920
|
addFilter(metaData) {
|
|
3914
3921
|
this.filterStore.addFilter({
|
|
3915
3922
|
key: metaData.key,
|
|
3916
3923
|
fieldType: metaData.filterLogic?.filterType || metaData.fieldType,
|
|
3917
|
-
filterBy: metaData.filterLogic?.filterBy === 'use map' ? metaData.map : metaData.filterLogic?.filterBy
|
|
3918
3924
|
});
|
|
3919
3925
|
}
|
|
3920
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3921
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
3926
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: GenFilterDisplayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3927
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.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 }); }
|
|
3922
3928
|
}
|
|
3923
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3929
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: GenFilterDisplayerComponent, decorators: [{
|
|
3924
3930
|
type: Component,
|
|
3925
3931
|
args: [{ selector: 'tb-filter-displayer', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
3926
3932
|
MatButtonModule, MatMenuModule, MatTooltipModule, StopPropagationDirective, MatIconModule,
|
|
@@ -3933,10 +3939,10 @@ class KeyDisplayPipe {
|
|
|
3933
3939
|
this.tableState = inject(TableStore);
|
|
3934
3940
|
this.transform = (key) => computed(() => this.tableState.$getMetaData(key)()?.displayName || spaceCase(key));
|
|
3935
3941
|
}
|
|
3936
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3937
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "
|
|
3942
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: KeyDisplayPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
3943
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.0", ngImport: i0, type: KeyDisplayPipe, isStandalone: true, name: "keyDisplay" }); }
|
|
3938
3944
|
}
|
|
3939
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3945
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: KeyDisplayPipe, decorators: [{
|
|
3940
3946
|
type: Pipe,
|
|
3941
3947
|
args: [{ name: 'keyDisplay' }]
|
|
3942
3948
|
}] });
|
|
@@ -3948,10 +3954,10 @@ class FormatFilterTypePipe {
|
|
|
3948
3954
|
}
|
|
3949
3955
|
return filterType;
|
|
3950
3956
|
}
|
|
3951
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3952
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "
|
|
3957
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: FormatFilterTypePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
3958
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.0", ngImport: i0, type: FormatFilterTypePipe, isStandalone: true, name: "formatFilterType" }); }
|
|
3953
3959
|
}
|
|
3954
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3960
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: FormatFilterTypePipe, decorators: [{
|
|
3955
3961
|
type: Pipe,
|
|
3956
3962
|
args: [{ name: 'formatFilterType' }]
|
|
3957
3963
|
}] });
|
|
@@ -3963,10 +3969,10 @@ class FormatFilterValuePipe {
|
|
|
3963
3969
|
transform(value, key, filterType) {
|
|
3964
3970
|
return computed(() => transform(value, this.tableState.$getMetaData(key)(), filterType));
|
|
3965
3971
|
}
|
|
3966
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3967
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "
|
|
3972
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: FormatFilterValuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
3973
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.0", ngImport: i0, type: FormatFilterValuePipe, isStandalone: true, name: "formatFilterValue" }); }
|
|
3968
3974
|
}
|
|
3969
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3975
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: FormatFilterValuePipe, decorators: [{
|
|
3970
3976
|
type: Pipe,
|
|
3971
3977
|
args: [{ name: 'formatFilterValue' }]
|
|
3972
3978
|
}] });
|
|
@@ -4025,8 +4031,8 @@ class FilterChipsComponent {
|
|
|
4025
4031
|
constructor() {
|
|
4026
4032
|
this.tableState = inject(TableStore);
|
|
4027
4033
|
this.filterStore = inject(WrapperFilterStore);
|
|
4028
|
-
this.$filters = computed(() => this.tableState.$filtersArray().filter(f => isFilterInfo(f) && !f._isExternallyManaged));
|
|
4029
|
-
this.$certainCustomFilters = computed(() => this.tableState.$filtersArray().filter(f => isCustomFilter(f) && f.chipLabel));
|
|
4034
|
+
this.$filters = computed(() => this.tableState.$filtersArray().filter(f => isFilterInfo(f) && !f._isExternallyManaged), ...(ngDevMode ? [{ debugName: "$filters" }] : []));
|
|
4035
|
+
this.$certainCustomFilters = computed(() => this.tableState.$filtersArray().filter(f => isCustomFilter(f) && f.chipLabel), ...(ngDevMode ? [{ debugName: "$certainCustomFilters" }] : []));
|
|
4030
4036
|
this.$currentFilters = this.filterStore.$filters;
|
|
4031
4037
|
}
|
|
4032
4038
|
deleteByIndex(index) {
|
|
@@ -4038,10 +4044,10 @@ class FilterChipsComponent {
|
|
|
4038
4044
|
clearAll() {
|
|
4039
4045
|
this.filterStore.clearAll();
|
|
4040
4046
|
}
|
|
4041
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4042
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
4047
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: FilterChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4048
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.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 }); }
|
|
4043
4049
|
}
|
|
4044
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4050
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: FilterChipsComponent, decorators: [{
|
|
4045
4051
|
type: Component,
|
|
4046
4052
|
args: [{ selector: 'lib-filter-list', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
4047
4053
|
MatButtonModule, MatTooltipModule, MatIconModule, FilterComponent,
|
|
@@ -4051,14 +4057,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImpor
|
|
|
4051
4057
|
|
|
4052
4058
|
class RouterLinkColumnComponent {
|
|
4053
4059
|
constructor() {
|
|
4054
|
-
this.additional = input.required();
|
|
4055
|
-
this.element = input.required();
|
|
4056
|
-
this.queryParams = computed(() => this.additional().routerLinkOptions.queryParams(this.element()));
|
|
4057
|
-
this.routerLinkOptions = computed(() => this.additional().routerLinkOptions);
|
|
4058
|
-
this.link = input.required();
|
|
4059
|
-
}
|
|
4060
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4061
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
4060
|
+
this.additional = input.required(...(ngDevMode ? [{ debugName: "additional" }] : []));
|
|
4061
|
+
this.element = input.required(...(ngDevMode ? [{ debugName: "element" }] : []));
|
|
4062
|
+
this.queryParams = computed(() => this.additional().routerLinkOptions.queryParams(this.element()), ...(ngDevMode ? [{ debugName: "queryParams" }] : []));
|
|
4063
|
+
this.routerLinkOptions = computed(() => this.additional().routerLinkOptions, ...(ngDevMode ? [{ debugName: "routerLinkOptions" }] : []));
|
|
4064
|
+
this.link = input.required(...(ngDevMode ? [{ debugName: "link" }] : []));
|
|
4065
|
+
}
|
|
4066
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: RouterLinkColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4067
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.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: `
|
|
4062
4068
|
<a target="{{additional().target}}"
|
|
4063
4069
|
[routerLink]=" [link()]"
|
|
4064
4070
|
[queryParams]="queryParams()"
|
|
@@ -4070,7 +4076,7 @@ class RouterLinkColumnComponent {
|
|
|
4070
4076
|
</a>
|
|
4071
4077
|
`, 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 }); }
|
|
4072
4078
|
}
|
|
4073
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4079
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: RouterLinkColumnComponent, decorators: [{
|
|
4074
4080
|
type: Component,
|
|
4075
4081
|
args: [{
|
|
4076
4082
|
selector: "tb-router-link-column",
|
|
@@ -4090,21 +4096,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImpor
|
|
|
4090
4096
|
</a>
|
|
4091
4097
|
`
|
|
4092
4098
|
}]
|
|
4093
|
-
}] });
|
|
4099
|
+
}], 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 }] }] } });
|
|
4094
4100
|
class LinkColumnComponent {
|
|
4095
4101
|
constructor() {
|
|
4096
|
-
this.element = input.required();
|
|
4097
|
-
this.additional = input.required();
|
|
4098
|
-
this.link = input.required();
|
|
4102
|
+
this.element = input.required(...(ngDevMode ? [{ debugName: "element" }] : []));
|
|
4103
|
+
this.additional = input.required(...(ngDevMode ? [{ debugName: "additional" }] : []));
|
|
4104
|
+
this.link = input.required(...(ngDevMode ? [{ debugName: "link" }] : []));
|
|
4099
4105
|
}
|
|
4100
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4101
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
4106
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: LinkColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4107
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.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: `
|
|
4102
4108
|
<a target="{{additional().target}}" href="{{link()}}">
|
|
4103
4109
|
<ng-content></ng-content>
|
|
4104
4110
|
</a>
|
|
4105
4111
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4106
4112
|
}
|
|
4107
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4113
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: LinkColumnComponent, decorators: [{
|
|
4108
4114
|
type: Component,
|
|
4109
4115
|
args: [{
|
|
4110
4116
|
selector: "tb-link-column",
|
|
@@ -4115,22 +4121,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImpor
|
|
|
4115
4121
|
</a>
|
|
4116
4122
|
`
|
|
4117
4123
|
}]
|
|
4118
|
-
}] });
|
|
4124
|
+
}], propDecorators: { element: [{ type: i0.Input, args: [{ isSignal: true, alias: "element", required: true }] }], additional: [{ type: i0.Input, args: [{ isSignal: true, alias: "additional", required: true }] }], link: [{ type: i0.Input, args: [{ isSignal: true, alias: "link", required: true }] }] } });
|
|
4119
4125
|
|
|
4120
4126
|
class ArrayCommaColumnComponent {
|
|
4121
4127
|
constructor() {
|
|
4122
|
-
this.value = input.required();
|
|
4123
|
-
this.additional = input(3);
|
|
4124
|
-
this.displayArray = computed(() => (this.value() || []).slice(0, this.additional()));
|
|
4128
|
+
this.value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
4129
|
+
this.additional = input(3, ...(ngDevMode ? [{ debugName: "additional" }] : []));
|
|
4130
|
+
this.displayArray = computed(() => (this.value() || []).slice(0, this.additional()), ...(ngDevMode ? [{ debugName: "displayArray" }] : []));
|
|
4125
4131
|
}
|
|
4126
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4127
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
4132
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ArrayCommaColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4133
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.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: `
|
|
4128
4134
|
@for(val of displayArray(); track $index){
|
|
4129
4135
|
{{val + (!$last ? ',' : '')}}
|
|
4130
4136
|
}
|
|
4131
4137
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4132
4138
|
}
|
|
4133
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4139
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ArrayCommaColumnComponent, decorators: [{
|
|
4134
4140
|
type: Component,
|
|
4135
4141
|
args: [{
|
|
4136
4142
|
selector: 'tb-comma-array-column',
|
|
@@ -4141,22 +4147,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImpor
|
|
|
4141
4147
|
`,
|
|
4142
4148
|
changeDetection: ChangeDetectionStrategy.OnPush
|
|
4143
4149
|
}]
|
|
4144
|
-
}] });
|
|
4150
|
+
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], additional: [{ type: i0.Input, args: [{ isSignal: true, alias: "additional", required: false }] }] } });
|
|
4145
4151
|
class ArrayNewLineColumnComponent {
|
|
4146
4152
|
constructor() {
|
|
4147
|
-
this.value = input.required();
|
|
4148
|
-
this.additional = input(3);
|
|
4149
|
-
this.displayArray = computed(() => (this.value() || []).slice(0, this.additional()));
|
|
4153
|
+
this.value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
4154
|
+
this.additional = input(3, ...(ngDevMode ? [{ debugName: "additional" }] : []));
|
|
4155
|
+
this.displayArray = computed(() => (this.value() || []).slice(0, this.additional()), ...(ngDevMode ? [{ debugName: "displayArray" }] : []));
|
|
4150
4156
|
}
|
|
4151
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4152
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
4157
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ArrayNewLineColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4158
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.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: `
|
|
4153
4159
|
@for(val of displayArray(); track $index){
|
|
4154
4160
|
{{val}}
|
|
4155
4161
|
@if(!$last){ <br/> }
|
|
4156
4162
|
}
|
|
4157
4163
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4158
4164
|
}
|
|
4159
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4165
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ArrayNewLineColumnComponent, decorators: [{
|
|
4160
4166
|
type: Component,
|
|
4161
4167
|
args: [{
|
|
4162
4168
|
selector: 'tb-new-line-array-column',
|
|
@@ -4168,7 +4174,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImpor
|
|
|
4168
4174
|
`,
|
|
4169
4175
|
changeDetection: ChangeDetectionStrategy.OnPush
|
|
4170
4176
|
}]
|
|
4171
|
-
}] });
|
|
4177
|
+
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], additional: [{ type: i0.Input, args: [{ isSignal: true, alias: "additional", required: false }] }] } });
|
|
4172
4178
|
|
|
4173
4179
|
class InitializationComponent {
|
|
4174
4180
|
constructor() {
|
|
@@ -4182,17 +4188,17 @@ class InitializationComponent {
|
|
|
4182
4188
|
this.$defaultTemplate = viewChild.required('default');
|
|
4183
4189
|
this.$defaultWithIcon = viewChild.required('defaultWithIcon');
|
|
4184
4190
|
}
|
|
4185
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4186
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
4191
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: InitializationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4192
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.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 }); }
|
|
4187
4193
|
}
|
|
4188
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4194
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: InitializationComponent, decorators: [{
|
|
4189
4195
|
type: Component,
|
|
4190
4196
|
args: [{ selector: 'initialization', imports: [
|
|
4191
4197
|
LinkColumnComponent, ArrayCommaColumnComponent, MatIcon,
|
|
4192
4198
|
RouterLinkColumnComponent, ArrayNewLineColumnComponent,
|
|
4193
4199
|
StylerDirective, FunctionPipe
|
|
4194
4200
|
], changeDetection: ChangeDetectionStrategy.OnPush, 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" }]
|
|
4195
|
-
}] });
|
|
4201
|
+
}], propDecorators: { $linkTemplate: [{ type: i0.ViewChild, args: ['link', { isSignal: true }] }], $routerLinkTemplate: [{ type: i0.ViewChild, args: ['routerLink', { isSignal: true }] }], $linkWithIconTemplate: [{ type: i0.ViewChild, args: ['linkWithIcon', { isSignal: true }] }], $routerLinkWithIconTemplate: [{ type: i0.ViewChild, args: ['routerLinkWithIcon', { isSignal: true }] }], $imageUrlTemplate: [{ type: i0.ViewChild, args: ['imageUrl', { isSignal: true }] }], $arrayNewLineTemplate: [{ type: i0.ViewChild, args: ['arrayNewLine', { isSignal: true }] }], $arrayCommaTemplate: [{ type: i0.ViewChild, args: ['arrayComma', { isSignal: true }] }], $defaultTemplate: [{ type: i0.ViewChild, args: ['default', { isSignal: true }] }], $defaultWithIcon: [{ type: i0.ViewChild, args: ['defaultWithIcon', { isSignal: true }] }] } });
|
|
4196
4202
|
|
|
4197
4203
|
class TableTemplateService {
|
|
4198
4204
|
constructor() {
|
|
@@ -4230,10 +4236,10 @@ class TableTemplateService {
|
|
|
4230
4236
|
}
|
|
4231
4237
|
return this.initializationComponentInstance.$defaultTemplate();
|
|
4232
4238
|
}
|
|
4233
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4234
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
4239
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TableTemplateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
4240
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TableTemplateService, providedIn: 'root' }); }
|
|
4235
4241
|
}
|
|
4236
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4242
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TableTemplateService, decorators: [{
|
|
4237
4243
|
type: Injectable,
|
|
4238
4244
|
args: [{ providedIn: 'root' }]
|
|
4239
4245
|
}] });
|
|
@@ -4244,12 +4250,12 @@ class ColumnHeaderMenuComponent {
|
|
|
4244
4250
|
this.filterStore = inject(WrapperFilterStore, { optional: true });
|
|
4245
4251
|
this.FieldType = FieldType;
|
|
4246
4252
|
this.FilterType = FilterType;
|
|
4247
|
-
this.$metaData = input.required({ alias: 'metaData' });
|
|
4248
|
-
this.$fieldType = computed(() => this.$metaData().fieldType);
|
|
4249
|
-
this.$filterFieldType = computed(() => this.$metaData().filterLogic?.filterType || this.$fieldType());
|
|
4253
|
+
this.$metaData = input.required(...(ngDevMode ? [{ debugName: "$metaData", alias: 'metaData' }] : [{ alias: 'metaData' }]));
|
|
4254
|
+
this.$fieldType = computed(() => this.$metaData().fieldType, ...(ngDevMode ? [{ debugName: "$fieldType" }] : []));
|
|
4255
|
+
this.$filterFieldType = computed(() => this.$metaData().filterLogic?.filterType || this.$fieldType(), ...(ngDevMode ? [{ debugName: "$filterFieldType" }] : []));
|
|
4250
4256
|
this.$filterValue = computed(() => this.tableState.$filtersArray().filter(isFilterInfo)
|
|
4251
|
-
.find(f => f.key === this.$metaData().key && f.filterType === this.$currentFilterType())?.filterValue);
|
|
4252
|
-
this.$trigger = viewChild(MatMenuTrigger);
|
|
4257
|
+
.find(f => f.key === this.$metaData().key && f.filterType === this.$currentFilterType())?.filterValue, ...(ngDevMode ? [{ debugName: "$filterValue" }] : []));
|
|
4258
|
+
this.$trigger = viewChild(MatMenuTrigger, ...(ngDevMode ? [{ debugName: "$trigger" }] : []));
|
|
4253
4259
|
this.$metaFilterType = computed(() => {
|
|
4254
4260
|
if (this.$metaData().additional?.filterOptions?.filterableValues) {
|
|
4255
4261
|
return FilterType.In;
|
|
@@ -4273,9 +4279,9 @@ class ColumnHeaderMenuComponent {
|
|
|
4273
4279
|
return FilterType.In;
|
|
4274
4280
|
default: return FilterType.StringContains;
|
|
4275
4281
|
}
|
|
4276
|
-
});
|
|
4277
|
-
this.$currentFilterType = linkedSignal(() => this.$metaFilterType());
|
|
4278
|
-
this.$key = computed(() => this.$metaData().key || crypto.randomUUID());
|
|
4282
|
+
}, ...(ngDevMode ? [{ debugName: "$metaFilterType" }] : []));
|
|
4283
|
+
this.$currentFilterType = linkedSignal(() => this.$metaFilterType(), ...(ngDevMode ? [{ debugName: "$currentFilterType" }] : []));
|
|
4284
|
+
this.$key = computed(() => this.$metaData().key || crypto.randomUUID(), ...(ngDevMode ? [{ debugName: "$key" }] : []));
|
|
4279
4285
|
this.addFilter$ = new Subject();
|
|
4280
4286
|
}
|
|
4281
4287
|
hideField(key) {
|
|
@@ -4303,7 +4309,6 @@ class ColumnHeaderMenuComponent {
|
|
|
4303
4309
|
filterType: this.$currentFilterType(),
|
|
4304
4310
|
filterValue: filter.filterValue,
|
|
4305
4311
|
key: metaData.key,
|
|
4306
|
-
filterBy: metaData.filterLogic?.filterBy === 'use map' ? metaData.map : metaData.filterLogic?.filterBy
|
|
4307
4312
|
});
|
|
4308
4313
|
this.$trigger().closeMenu();
|
|
4309
4314
|
}
|
|
@@ -4314,20 +4319,19 @@ class ColumnHeaderMenuComponent {
|
|
|
4314
4319
|
this.addFilter$.next({
|
|
4315
4320
|
key: metaData.key,
|
|
4316
4321
|
fieldType: metaData.filterLogic?.filterType || metaData.fieldType,
|
|
4317
|
-
filterBy: metaData.filterLogic?.filterBy === 'use map' ? metaData.map : metaData.filterLogic?.filterBy
|
|
4318
4322
|
});
|
|
4319
4323
|
}
|
|
4320
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4321
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: ColumnHeaderMenuComponent, isStandalone: true, selector: "tb-header-menu", inputs: { $metaData: { classPropertyName: "$metaData", publicName: "metaData", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "$trigger", first: true, predicate: MatMenuTrigger, descendants: true, isSignal: true }], ngImport: i0, template: "@let metaData = $metaData();\r\n@let filterFieldType = $filterFieldType();\r\n@let currentFilterType = $currentFilterType();\r\n\r\n<button #b mat-icon-button class=\"open-menu-icon-button\" disableRipple [matMenuTriggerFor]=\"menu\" [matMenuTriggerRestoreFocus]=\"false\">\r\n <mat-icon class=\"menu-icon\">more_vert</mat-icon>\r\n</button>\r\n<mat-menu #menu=\"matMenu\" >\r\n @if ($fieldType() !== FieldType.NotMapped || !!$metaData().groupByLogic?.groupBy)\r\n {\r\n <button color=\"primary\" mat-menu-item (click)=\"tableState.addGroupByKey(metaData.key)\">\r\n <mat-icon color=\"primary\">group</mat-icon>\r\n <span>Group By</span>\r\n </button>\r\n }\r\n <button color=\"primary\" mat-menu-item (click)=hideField(metaData.key)>\r\n <mat-icon color=\"primary\">visibility_off</mat-icon>\r\n <span>Hide Column</span>\r\n </button>\r\n <div (keydown)=\"$event.stopImmediatePropagation()\">\r\n @let filterValue = $filterValue();\r\n <ng-template matMenuContent>\r\n @if (filterFieldType !== FieldType.NotMapped)\r\n {\r\n <button color=\"primary\" mat-menu-item (click)=\"addFilter(metaData)\">\r\n <mat-icon color=\"primary\">filter_list</mat-icon>\r\n <span>Choose Other Filter</span>\r\n </button>\r\n <ng-form #myForm=\"ngForm\" class=\"tb-header-filter\" (keydown.enter)=\"onEnter(myForm.value, metaData)\">\r\n @if(currentFilterType === FilterType.In)\r\n {\r\n <tb-in-list-filter name=\"filterValue\" [key]=\"metaData.key\" [ngModel]=\"filterValue\" [values]=\"filterValue\" />\r\n }\r\n @else if(filterFieldType === FieldType.Link || filterFieldType === FieldType.String || filterFieldType === FieldType.Array || filterFieldType === FieldType.Unknown || filterFieldType === FieldType.PhoneNumber)\r\n {\r\n <mat-form-field stop-propagation class=\"font auto-width\">\r\n <mat-icon matPrefix class=\"search-icon\">search</mat-icon>\r\n <mat-label>{{currentFilterType === FilterType.StringDoesNotContain ? 'Does Not Contain...' : 'Contains...'}}</mat-label>\r\n <input matInput name=\"filterValue\" [ngModel]=\"undefined\"/>\r\n <span matSuffix [matTooltip]=\"currentFilterType === FilterType.StringDoesNotContain ? 'Contains' : 'Does Not Contain'\">\r\n <button mat-icon-button color=\"primary\" class=\"header-filter-icon-button\" (click)=\"setStringFilterType()\">\r\n <mat-icon [class]=\"{'chosen-icon': currentFilterType === FilterType.StringDoesNotContain }\">\r\n block\r\n </mat-icon>\r\n </button>\r\n </span>\r\n </mat-form-field>\r\n }\r\n @else if (filterFieldType === FieldType.Number || filterFieldType === FieldType.Currency)\r\n {\r\n <mat-form-field class=\"auto-width\" stop-propagation>\r\n <mat-label>{{currentFilterType === FilterType.NumberEquals ? 'Equals...' : currentFilterType === FilterType.NumberLessThan ? 'Less Than...' : 'More Than...'}}</mat-label>\r\n <input matInput type='number' name=\"filterValue\" [ngModel]=\"undefined\" />\r\n <span matPrefix class=\"tb-header-prefix\">\r\n <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.NumberLessThan }\"\r\n (click)=\"setFilterType(FilterType.NumberLessThan)\">\r\n <mat-icon class=\"suffix-icons\"\r\n >\r\n arrow_back_ios</mat-icon>\r\n </button>\r\n <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.NumberGreaterThan }\"\r\n (click)=\"setFilterType(FilterType.NumberGreaterThan)\" >\r\n <mat-icon class=\"suffix-icons\">arrow_forward_ios</mat-icon>\r\n </button>\r\n <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.NumberEquals }\"\r\n (click)=\"setFilterType(FilterType.NumberEquals)\">\r\n <span class=\"suffix-icons\">=</span>\r\n </button>\r\n </span>\r\n </mat-form-field>\r\n }\r\n @else if (filterFieldType === FieldType.Boolean)\r\n {\r\n <div>\r\n <label>\r\n <mat-icon class=\"search-icon\">filter_list</mat-icon>\r\n </label>\r\n <mat-radio-group #ctrl=\"matRadioGroup\" #boolField='ngModel' stop-propagation class=\"font\" name=\"filterValue\" [ngModel]=\"undefined\" >\r\n <mat-radio-button class=\"filter-radio-button\" [value]=\"true\" (click)=\"boolField.control.setValue(true);\">True</mat-radio-button><br/>\r\n <mat-radio-button class=\"filter-radio-button\" [value]=\"false\" (click)=\"boolField.control.setValue(false)\">False</mat-radio-button><br/>\r\n </mat-radio-group>\r\n </div>\r\n }\r\n @else if (filterFieldType === FieldType.Date || filterFieldType === FieldType.DateTime)\r\n {\r\n <mat-form-field class=\"font auto-width\" stop-propagation >\r\n <span matPrefix class=\"tb-header-prefix\">\r\n <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.DateOnOrAfter }\"\r\n (click)=\"setFilterType(FilterType.DateOnOrAfter)\">\r\n <mat-icon class=\"suffix-icons underline\">arrow_forward_ios</mat-icon>\r\n </button>\r\n <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.DateOnOrBefore }\"\r\n (click)=\"setFilterType(FilterType.DateOnOrBefore)\">\r\n <mat-icon class=\"suffix-icons underline\">arrow_back_ios</mat-icon>\r\n </button>\r\n <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.DateIsOn }\"\r\n (click)=\"setFilterType(FilterType.DateIsOn)\">\r\n <span class=\"suffix-icons underline\"> =</span>\r\n </button>\r\n </span>\r\n <mat-label>{{currentFilterType === FilterType.DateIsOn ? 'On...' :\r\n currentFilterType === FilterType.DateOnOrBefore ? 'On or Before...' : 'On or After...'}}</mat-label>\r\n <input matInput name=\"filterValue\" [ngModel]=\"undefined\" [matDatepicker]=\"calendar\"\r\n (click)=\"calendar.open()\"/>\r\n <mat-datepicker-toggle class=\"date-toggle header-filter-icon-button\" matSuffix preventEnter [for]=\"calendar\" />\r\n <mat-datepicker #calendar />\r\n </mat-form-field>\r\n }\r\n <button mat-button disableRipple [disabled]=\"myForm.value.filterValue == undefined\" (click)=\"onEnter(myForm.value, metaData)\">\r\n Apply\r\n </button>\r\n </ng-form>\r\n }\r\n </ng-template>\r\n </div>\r\n\r\n</mat-menu>\r\n\r\n<tb-filter\r\n *opDialog=\"addFilter$; let filter; origin b._elementRef.nativeElement; positionOnScreen { width: 300 }\"\r\n [filter]=\"filter\" (done)=\"addFilter$.next(null)\" />\r\n", styles: [":host{--mat-button-filled-container-height: 24px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 24px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 24px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 24px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 24px;--mat-button-tonal-touch-target-display: none}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.menu-icon{font-size:16px;line-height:16px;vertical-align:top;height:16px;width:16px}.search-icon{margin-right:16px;vertical-align:middle;height:24px;width:24px;color:#0000008a;font-size:21px;line-height:1.125}.font{font-size:14px}.filter-radio-button:first-of-type{padding-left:0}.filter-radio-button{padding:10px 40px;min-width:110px}.auto-width{width:260px;margin:5px;display:block;height:55px}.open-menu-icon-button{height:28px;width:28px;padding:6px}.header-filter-icon-button{height:18px;width:18px;font-size:18px;padding:0;margin:0 2px}.header-filter-icon-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.header-filter-icon-button .chosen-icon,.header-filter-icon-button.chosen-icon ::ng-deep *{height:22px;width:22px;font-size:22px;color:green}mat-icon.mat-icon.suffix-icons.underline{height:20px;text-decoration:underline .1px solid}.chosen-icon mat-icon.mat-icon.suffix-icons.underline{height:24px}::ng-deep .mat-mdc-form-field-icon-prefix:has(.tb-header-prefix),.tb-header-prefix{padding:0;flex-basis:36%}.tb-header-filter ::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}.tb-header-filter ::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"], dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1$4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$4.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i1$4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),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 }); }
|
|
4324
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ColumnHeaderMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4325
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: ColumnHeaderMenuComponent, isStandalone: true, selector: "tb-header-menu", inputs: { $metaData: { classPropertyName: "$metaData", publicName: "metaData", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "$trigger", first: true, predicate: MatMenuTrigger, descendants: true, isSignal: true }], ngImport: i0, template: "@let metaData = $metaData();\r\n@let filterFieldType = $filterFieldType();\r\n@let currentFilterType = $currentFilterType();\r\n\r\n<button #b mat-icon-button class=\"open-menu-icon-button\" disableRipple [matMenuTriggerFor]=\"menu\" [matMenuTriggerRestoreFocus]=\"false\">\r\n <mat-icon class=\"menu-icon\">more_vert</mat-icon>\r\n</button>\r\n<mat-menu #menu=\"matMenu\" >\r\n @if ($fieldType() !== FieldType.NotMapped || !!$metaData().groupByLogic?.groupBy)\r\n {\r\n <button color=\"primary\" mat-menu-item (click)=\"tableState.addGroupByKey(metaData.key)\">\r\n <mat-icon color=\"primary\">group</mat-icon>\r\n <span>Group By</span>\r\n </button>\r\n }\r\n <button color=\"primary\" mat-menu-item (click)=hideField(metaData.key)>\r\n <mat-icon color=\"primary\">visibility_off</mat-icon>\r\n <span>Hide Column</span>\r\n </button>\r\n <div (keydown)=\"$event.stopImmediatePropagation()\">\r\n @let filterValue = $filterValue();\r\n <ng-template matMenuContent>\r\n @if (filterFieldType !== FieldType.NotMapped)\r\n {\r\n <button color=\"primary\" mat-menu-item (click)=\"addFilter(metaData)\">\r\n <mat-icon color=\"primary\">filter_list</mat-icon>\r\n <span>Choose Other Filter</span>\r\n </button>\r\n <ng-form #myForm=\"ngForm\" class=\"tb-header-filter\" (keydown.enter)=\"onEnter(myForm.value, metaData)\">\r\n @if(currentFilterType === FilterType.In)\r\n {\r\n <tb-in-list-filter name=\"filterValue\" [key]=\"metaData.key\" [ngModel]=\"filterValue\" [values]=\"filterValue\" />\r\n }\r\n @else if(filterFieldType === FieldType.Link || filterFieldType === FieldType.String || filterFieldType === FieldType.Array || filterFieldType === FieldType.Unknown || filterFieldType === FieldType.PhoneNumber)\r\n {\r\n <mat-form-field stop-propagation class=\"font auto-width\">\r\n <mat-icon matPrefix class=\"search-icon\">search</mat-icon>\r\n <mat-label>{{currentFilterType === FilterType.StringDoesNotContain ? 'Does Not Contain...' : 'Contains...'}}</mat-label>\r\n <input matInput name=\"filterValue\" [ngModel]=\"undefined\"/>\r\n <span matSuffix [matTooltip]=\"currentFilterType === FilterType.StringDoesNotContain ? 'Contains' : 'Does Not Contain'\">\r\n <button mat-icon-button color=\"primary\" class=\"header-filter-icon-button\" (click)=\"setStringFilterType()\">\r\n <mat-icon [class]=\"{'chosen-icon': currentFilterType === FilterType.StringDoesNotContain }\">\r\n block\r\n </mat-icon>\r\n </button>\r\n </span>\r\n </mat-form-field>\r\n }\r\n @else if (filterFieldType === FieldType.Number || filterFieldType === FieldType.Currency)\r\n {\r\n <mat-form-field class=\"auto-width\" stop-propagation>\r\n <mat-label>{{currentFilterType === FilterType.NumberEquals ? 'Equals...' : currentFilterType === FilterType.NumberLessThan ? 'Less Than...' : 'More Than...'}}</mat-label>\r\n <input matInput type='number' name=\"filterValue\" [ngModel]=\"undefined\" />\r\n <span matPrefix class=\"tb-header-prefix\">\r\n <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.NumberLessThan }\"\r\n (click)=\"setFilterType(FilterType.NumberLessThan)\">\r\n <mat-icon class=\"suffix-icons\"\r\n >\r\n arrow_back_ios</mat-icon>\r\n </button>\r\n <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.NumberGreaterThan }\"\r\n (click)=\"setFilterType(FilterType.NumberGreaterThan)\" >\r\n <mat-icon class=\"suffix-icons\">arrow_forward_ios</mat-icon>\r\n </button>\r\n <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.NumberEquals }\"\r\n (click)=\"setFilterType(FilterType.NumberEquals)\">\r\n <span class=\"suffix-icons\">=</span>\r\n </button>\r\n </span>\r\n </mat-form-field>\r\n }\r\n @else if (filterFieldType === FieldType.Boolean)\r\n {\r\n <div>\r\n <label>\r\n <mat-icon class=\"search-icon\">filter_list</mat-icon>\r\n </label>\r\n <mat-radio-group #ctrl=\"matRadioGroup\" #boolField='ngModel' stop-propagation class=\"font\" name=\"filterValue\" [ngModel]=\"undefined\" >\r\n <mat-radio-button class=\"filter-radio-button\" [value]=\"true\" (click)=\"boolField.control.setValue(true);\">True</mat-radio-button><br/>\r\n <mat-radio-button class=\"filter-radio-button\" [value]=\"false\" (click)=\"boolField.control.setValue(false)\">False</mat-radio-button><br/>\r\n </mat-radio-group>\r\n </div>\r\n }\r\n @else if (filterFieldType === FieldType.Date || filterFieldType === FieldType.DateTime)\r\n {\r\n <mat-form-field class=\"font auto-width\" stop-propagation >\r\n <span matPrefix class=\"tb-header-prefix\">\r\n <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.DateOnOrAfter }\"\r\n (click)=\"setFilterType(FilterType.DateOnOrAfter)\">\r\n <mat-icon class=\"suffix-icons underline\">arrow_forward_ios</mat-icon>\r\n </button>\r\n <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.DateOnOrBefore }\"\r\n (click)=\"setFilterType(FilterType.DateOnOrBefore)\">\r\n <mat-icon class=\"suffix-icons underline\">arrow_back_ios</mat-icon>\r\n </button>\r\n <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.DateIsOn }\"\r\n (click)=\"setFilterType(FilterType.DateIsOn)\">\r\n <span class=\"suffix-icons underline\"> =</span>\r\n </button>\r\n </span>\r\n <mat-label>{{currentFilterType === FilterType.DateIsOn ? 'On...' :\r\n currentFilterType === FilterType.DateOnOrBefore ? 'On or Before...' : 'On or After...'}}</mat-label>\r\n <input matInput name=\"filterValue\" [ngModel]=\"undefined\" [matDatepicker]=\"calendar\"\r\n (click)=\"calendar.open()\"/>\r\n <mat-datepicker-toggle class=\"date-toggle header-filter-icon-button\" matSuffix preventEnter [for]=\"calendar\" />\r\n <mat-datepicker #calendar />\r\n </mat-form-field>\r\n }\r\n <button mat-button disableRipple [disabled]=\"myForm.value.filterValue == undefined\" (click)=\"onEnter(myForm.value, metaData)\">\r\n Apply\r\n </button>\r\n </ng-form>\r\n }\r\n </ng-template>\r\n </div>\r\n\r\n</mat-menu>\r\n\r\n<tb-filter\r\n *opDialog=\"addFilter$; let filter; origin b._elementRef.nativeElement; positionOnScreen { width: 300 }\"\r\n [filter]=\"filter\" (done)=\"addFilter$.next(null)\" />\r\n", styles: [":host{--mat-button-filled-container-height: 24px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 24px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 24px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 24px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 24px;--mat-button-tonal-touch-target-display: none}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.menu-icon{font-size:16px;line-height:16px;vertical-align:top;height:16px;width:16px}.search-icon{margin-right:16px;vertical-align:middle;height:24px;width:24px;color:#0000008a;font-size:21px;line-height:1.125}.font{font-size:14px}.filter-radio-button:first-of-type{padding-left:0}.filter-radio-button{padding:10px 40px;min-width:110px}.auto-width{width:260px;margin:5px;display:block;height:55px}.open-menu-icon-button{height:28px;width:28px;padding:6px}.header-filter-icon-button{height:18px;width:18px;font-size:18px;padding:0;margin:0 2px}.header-filter-icon-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.header-filter-icon-button .chosen-icon,.header-filter-icon-button.chosen-icon ::ng-deep *{height:22px;width:22px;font-size:22px;color:green}mat-icon.mat-icon.suffix-icons.underline{height:20px;text-decoration:underline .1px solid}.chosen-icon mat-icon.mat-icon.suffix-icons.underline{height:24px}::ng-deep .mat-mdc-form-field-icon-prefix:has(.tb-header-prefix),.tb-header-prefix{padding:0;flex-basis:36%}.tb-header-filter ::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}.tb-header-filter ::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"], dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1$4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$4.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i1$4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: InListFilterComponent, selector: "tb-in-list-filter", inputs: ["values", "key"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i8.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i8.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i2$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i2$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: DialogDirective, selector: "[opDialog]", inputs: ["opDialogAddDialogClass", "opDialogConfig", "opDialog", "opDialogOrigin", "opDialogPositionOnScreen"], outputs: ["opDialogClosed"] }, { kind: "component", type: FilterComponent, selector: "tb-filter", inputs: ["filter"], outputs: ["close", "done"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4322
4326
|
}
|
|
4323
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4327
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ColumnHeaderMenuComponent, decorators: [{
|
|
4324
4328
|
type: Component,
|
|
4325
4329
|
args: [{ selector: 'tb-header-menu', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
4326
4330
|
MatMenuModule, MatIconModule, MatButtonModule, FormsModule, InListFilterComponent,
|
|
4327
4331
|
MatInputModule, MatTooltipModule, StopPropagationDirective, MatRadioModule, MatDatepickerModule,
|
|
4328
4332
|
DialogDirective, FilterComponent
|
|
4329
4333
|
], template: "@let metaData = $metaData();\r\n@let filterFieldType = $filterFieldType();\r\n@let currentFilterType = $currentFilterType();\r\n\r\n<button #b mat-icon-button class=\"open-menu-icon-button\" disableRipple [matMenuTriggerFor]=\"menu\" [matMenuTriggerRestoreFocus]=\"false\">\r\n <mat-icon class=\"menu-icon\">more_vert</mat-icon>\r\n</button>\r\n<mat-menu #menu=\"matMenu\" >\r\n @if ($fieldType() !== FieldType.NotMapped || !!$metaData().groupByLogic?.groupBy)\r\n {\r\n <button color=\"primary\" mat-menu-item (click)=\"tableState.addGroupByKey(metaData.key)\">\r\n <mat-icon color=\"primary\">group</mat-icon>\r\n <span>Group By</span>\r\n </button>\r\n }\r\n <button color=\"primary\" mat-menu-item (click)=hideField(metaData.key)>\r\n <mat-icon color=\"primary\">visibility_off</mat-icon>\r\n <span>Hide Column</span>\r\n </button>\r\n <div (keydown)=\"$event.stopImmediatePropagation()\">\r\n @let filterValue = $filterValue();\r\n <ng-template matMenuContent>\r\n @if (filterFieldType !== FieldType.NotMapped)\r\n {\r\n <button color=\"primary\" mat-menu-item (click)=\"addFilter(metaData)\">\r\n <mat-icon color=\"primary\">filter_list</mat-icon>\r\n <span>Choose Other Filter</span>\r\n </button>\r\n <ng-form #myForm=\"ngForm\" class=\"tb-header-filter\" (keydown.enter)=\"onEnter(myForm.value, metaData)\">\r\n @if(currentFilterType === FilterType.In)\r\n {\r\n <tb-in-list-filter name=\"filterValue\" [key]=\"metaData.key\" [ngModel]=\"filterValue\" [values]=\"filterValue\" />\r\n }\r\n @else if(filterFieldType === FieldType.Link || filterFieldType === FieldType.String || filterFieldType === FieldType.Array || filterFieldType === FieldType.Unknown || filterFieldType === FieldType.PhoneNumber)\r\n {\r\n <mat-form-field stop-propagation class=\"font auto-width\">\r\n <mat-icon matPrefix class=\"search-icon\">search</mat-icon>\r\n <mat-label>{{currentFilterType === FilterType.StringDoesNotContain ? 'Does Not Contain...' : 'Contains...'}}</mat-label>\r\n <input matInput name=\"filterValue\" [ngModel]=\"undefined\"/>\r\n <span matSuffix [matTooltip]=\"currentFilterType === FilterType.StringDoesNotContain ? 'Contains' : 'Does Not Contain'\">\r\n <button mat-icon-button color=\"primary\" class=\"header-filter-icon-button\" (click)=\"setStringFilterType()\">\r\n <mat-icon [class]=\"{'chosen-icon': currentFilterType === FilterType.StringDoesNotContain }\">\r\n block\r\n </mat-icon>\r\n </button>\r\n </span>\r\n </mat-form-field>\r\n }\r\n @else if (filterFieldType === FieldType.Number || filterFieldType === FieldType.Currency)\r\n {\r\n <mat-form-field class=\"auto-width\" stop-propagation>\r\n <mat-label>{{currentFilterType === FilterType.NumberEquals ? 'Equals...' : currentFilterType === FilterType.NumberLessThan ? 'Less Than...' : 'More Than...'}}</mat-label>\r\n <input matInput type='number' name=\"filterValue\" [ngModel]=\"undefined\" />\r\n <span matPrefix class=\"tb-header-prefix\">\r\n <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.NumberLessThan }\"\r\n (click)=\"setFilterType(FilterType.NumberLessThan)\">\r\n <mat-icon class=\"suffix-icons\"\r\n >\r\n arrow_back_ios</mat-icon>\r\n </button>\r\n <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.NumberGreaterThan }\"\r\n (click)=\"setFilterType(FilterType.NumberGreaterThan)\" >\r\n <mat-icon class=\"suffix-icons\">arrow_forward_ios</mat-icon>\r\n </button>\r\n <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.NumberEquals }\"\r\n (click)=\"setFilterType(FilterType.NumberEquals)\">\r\n <span class=\"suffix-icons\">=</span>\r\n </button>\r\n </span>\r\n </mat-form-field>\r\n }\r\n @else if (filterFieldType === FieldType.Boolean)\r\n {\r\n <div>\r\n <label>\r\n <mat-icon class=\"search-icon\">filter_list</mat-icon>\r\n </label>\r\n <mat-radio-group #ctrl=\"matRadioGroup\" #boolField='ngModel' stop-propagation class=\"font\" name=\"filterValue\" [ngModel]=\"undefined\" >\r\n <mat-radio-button class=\"filter-radio-button\" [value]=\"true\" (click)=\"boolField.control.setValue(true);\">True</mat-radio-button><br/>\r\n <mat-radio-button class=\"filter-radio-button\" [value]=\"false\" (click)=\"boolField.control.setValue(false)\">False</mat-radio-button><br/>\r\n </mat-radio-group>\r\n </div>\r\n }\r\n @else if (filterFieldType === FieldType.Date || filterFieldType === FieldType.DateTime)\r\n {\r\n <mat-form-field class=\"font auto-width\" stop-propagation >\r\n <span matPrefix class=\"tb-header-prefix\">\r\n <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.DateOnOrAfter }\"\r\n (click)=\"setFilterType(FilterType.DateOnOrAfter)\">\r\n <mat-icon class=\"suffix-icons underline\">arrow_forward_ios</mat-icon>\r\n </button>\r\n <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.DateOnOrBefore }\"\r\n (click)=\"setFilterType(FilterType.DateOnOrBefore)\">\r\n <mat-icon class=\"suffix-icons underline\">arrow_back_ios</mat-icon>\r\n </button>\r\n <button mat-icon-button disableRipple class=\"header-filter-icon-button\" [class]=\"{'chosen-icon': currentFilterType === FilterType.DateIsOn }\"\r\n (click)=\"setFilterType(FilterType.DateIsOn)\">\r\n <span class=\"suffix-icons underline\"> =</span>\r\n </button>\r\n </span>\r\n <mat-label>{{currentFilterType === FilterType.DateIsOn ? 'On...' :\r\n currentFilterType === FilterType.DateOnOrBefore ? 'On or Before...' : 'On or After...'}}</mat-label>\r\n <input matInput name=\"filterValue\" [ngModel]=\"undefined\" [matDatepicker]=\"calendar\"\r\n (click)=\"calendar.open()\"/>\r\n <mat-datepicker-toggle class=\"date-toggle header-filter-icon-button\" matSuffix preventEnter [for]=\"calendar\" />\r\n <mat-datepicker #calendar />\r\n </mat-form-field>\r\n }\r\n <button mat-button disableRipple [disabled]=\"myForm.value.filterValue == undefined\" (click)=\"onEnter(myForm.value, metaData)\">\r\n Apply\r\n </button>\r\n </ng-form>\r\n }\r\n </ng-template>\r\n </div>\r\n\r\n</mat-menu>\r\n\r\n<tb-filter\r\n *opDialog=\"addFilter$; let filter; origin b._elementRef.nativeElement; positionOnScreen { width: 300 }\"\r\n [filter]=\"filter\" (done)=\"addFilter$.next(null)\" />\r\n", styles: [":host{--mat-button-filled-container-height: 24px;--mat-button-filled-touch-target-display: none;--mat-button-outlined-container-height: 24px;--mat-button-outlined-touch-target-display: none;--mat-button-protected-container-height: 24px;--mat-button-protected-touch-target-display: none;--mat-button-text-container-height: 24px;--mat-button-text-touch-target-display: none;--mat-button-tonal-container-height: 24px;--mat-button-tonal-touch-target-display: none}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.menu-icon{font-size:16px;line-height:16px;vertical-align:top;height:16px;width:16px}.search-icon{margin-right:16px;vertical-align:middle;height:24px;width:24px;color:#0000008a;font-size:21px;line-height:1.125}.font{font-size:14px}.filter-radio-button:first-of-type{padding-left:0}.filter-radio-button{padding:10px 40px;min-width:110px}.auto-width{width:260px;margin:5px;display:block;height:55px}.open-menu-icon-button{height:28px;width:28px;padding:6px}.header-filter-icon-button{height:18px;width:18px;font-size:18px;padding:0;margin:0 2px}.header-filter-icon-button ::ng-deep *{line-height:initial;font-size:initial;height:18px;width:18px;font-size:18px;bottom:initial}.header-filter-icon-button .chosen-icon,.header-filter-icon-button.chosen-icon ::ng-deep *{height:22px;width:22px;font-size:22px;color:green}mat-icon.mat-icon.suffix-icons.underline{height:20px;text-decoration:underline .1px solid}.chosen-icon mat-icon.mat-icon.suffix-icons.underline{height:24px}::ng-deep .mat-mdc-form-field-icon-prefix:has(.tb-header-prefix),.tb-header-prefix{padding:0;flex-basis:36%}.tb-header-filter ::ng-deep .mat-mdc-form-field-subscript-wrapper{line-height:0}.tb-header-filter ::ng-deep .mat-mdc-form-field-subscript-wrapper:before{height:0}.date-toggle ::ng-deep svg{position:absolute;left:0;top:0}\n"] }]
|
|
4330
|
-
}] });
|
|
4334
|
+
}], propDecorators: { $metaData: [{ type: i0.Input, args: [{ isSignal: true, alias: "metaData", required: true }] }], $trigger: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatMenuTrigger), { isSignal: true }] }] } });
|
|
4331
4335
|
|
|
4332
4336
|
class ColumnTotalPipe {
|
|
4333
4337
|
transform(data, metaData) {
|
|
@@ -4337,10 +4341,10 @@ class ColumnTotalPipe {
|
|
|
4337
4341
|
return sumBy(dataToCalculate, metaData.key);
|
|
4338
4342
|
}
|
|
4339
4343
|
}
|
|
4340
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4341
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "
|
|
4344
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ColumnTotalPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
4345
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.0", ngImport: i0, type: ColumnTotalPipe, isStandalone: true, name: "columnTotal" }); }
|
|
4342
4346
|
}
|
|
4343
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4347
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ColumnTotalPipe, decorators: [{
|
|
4344
4348
|
type: Pipe,
|
|
4345
4349
|
args: [{
|
|
4346
4350
|
name: 'columnTotal',
|
|
@@ -4401,9 +4405,9 @@ class ColumnBuilderComponent {
|
|
|
4401
4405
|
this.templateService = inject(TableTemplateService);
|
|
4402
4406
|
this.tableConfig = inject(TableBuilderConfigToken);
|
|
4403
4407
|
this.injector = inject(Injector);
|
|
4404
|
-
this.$columnDef = viewChild(MatColumnDef);
|
|
4405
|
-
this.$bodyTemplate = viewChild('body');
|
|
4406
|
-
this.$metaData = signal(undefined);
|
|
4408
|
+
this.$columnDef = viewChild(MatColumnDef, ...(ngDevMode ? [{ debugName: "$columnDef" }] : []));
|
|
4409
|
+
this.$bodyTemplate = viewChild('body', ...(ngDevMode ? [{ debugName: "$bodyTemplate" }] : []));
|
|
4410
|
+
this.$metaData = signal(undefined, ...(ngDevMode ? [{ debugName: "$metaData" }] : []));
|
|
4407
4411
|
this.$additional = computed(() => {
|
|
4408
4412
|
const metaData = this.$metaData();
|
|
4409
4413
|
if (!metaData)
|
|
@@ -4416,30 +4420,30 @@ class ColumnBuilderComponent {
|
|
|
4416
4420
|
return metaData.additional?.limit || this.tableConfig?.arrayDefaults?.limit;
|
|
4417
4421
|
}
|
|
4418
4422
|
return undefined;
|
|
4419
|
-
});
|
|
4420
|
-
this.$customCell = signal(undefined);
|
|
4423
|
+
}, ...(ngDevMode ? [{ debugName: "$additional" }] : []));
|
|
4424
|
+
this.$customCell = signal(undefined, ...(ngDevMode ? [{ debugName: "$customCell" }] : []));
|
|
4421
4425
|
this.$transform = computed(() => {
|
|
4422
4426
|
const metaData = this.$metaData();
|
|
4423
4427
|
if (!metaData)
|
|
4424
4428
|
return;
|
|
4425
4429
|
return createTransformer(metaData, this.config);
|
|
4426
|
-
});
|
|
4430
|
+
}, ...(ngDevMode ? [{ debugName: "$transform" }] : []));
|
|
4427
4431
|
this.$innerTemplate = computed(() => {
|
|
4428
4432
|
const metaData = this.$metaData();
|
|
4429
4433
|
if (!metaData)
|
|
4430
4434
|
return;
|
|
4431
4435
|
return metaData.template || this.$customCell()?.$templateRef() || this.templateService.getTemplate(metaData);
|
|
4432
|
-
});
|
|
4436
|
+
}, ...(ngDevMode ? [{ debugName: "$innerTemplate" }] : []));
|
|
4433
4437
|
this.$showFilters = computed(() => {
|
|
4434
4438
|
const metaData = this.$metaData();
|
|
4435
4439
|
if (!metaData)
|
|
4436
4440
|
return;
|
|
4437
4441
|
const settings = this.state.$tableSettings();
|
|
4438
4442
|
return !(settings.hideColumnHeaderFilters || metaData.noFilter);
|
|
4439
|
-
});
|
|
4443
|
+
}, ...(ngDevMode ? [{ debugName: "$showFilters" }] : []));
|
|
4440
4444
|
this.$outerTemplate = computed(() => {
|
|
4441
4445
|
return this.$customCell()?.columnDef?.cell?.template ?? this.$bodyTemplate();
|
|
4442
|
-
});
|
|
4446
|
+
}, ...(ngDevMode ? [{ debugName: "$outerTemplate" }] : []));
|
|
4443
4447
|
this.$classes = computed(() => {
|
|
4444
4448
|
const metaData = this.$metaData();
|
|
4445
4449
|
if (!metaData)
|
|
@@ -4451,13 +4455,13 @@ class ColumnBuilderComponent {
|
|
|
4451
4455
|
});
|
|
4452
4456
|
}
|
|
4453
4457
|
return metaData.classes;
|
|
4454
|
-
});
|
|
4458
|
+
}, ...(ngDevMode ? [{ debugName: "$classes" }] : []));
|
|
4455
4459
|
this.$styles = computed(() => {
|
|
4456
4460
|
const metaData = this.$metaData();
|
|
4457
4461
|
if (!metaData)
|
|
4458
4462
|
return;
|
|
4459
4463
|
return columnStyles(metaData, this.state.$getUserDefinedWidth(metaData.key)(), this.state.$tableSettingsMinWidth());
|
|
4460
|
-
});
|
|
4464
|
+
}, ...(ngDevMode ? [{ debugName: "$styles" }] : []));
|
|
4461
4465
|
this.viewInited = false;
|
|
4462
4466
|
this.onViewInit = () => { };
|
|
4463
4467
|
this.whenViewInited = (callback) => {
|
|
@@ -4491,12 +4495,12 @@ class ColumnBuilderComponent {
|
|
|
4491
4495
|
metaData.click(element, key, event);
|
|
4492
4496
|
}
|
|
4493
4497
|
}
|
|
4494
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4495
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
4498
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ColumnBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4499
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: ColumnBuilderComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "$columnDef", first: true, predicate: MatColumnDef, descendants: true, isSignal: true }, { propertyName: "$bodyTemplate", first: true, predicate: ["body"], descendants: true, isSignal: true }], ngImport: i0, template: "@let metaData = $metaData();\r\n@let customCell = $customCell();\r\n@let styles = $styles()!;\r\n\r\n@if(metaData)\r\n{\r\n <ng-container [matColumnDef]=\"metaData.key\">\r\n\r\n <!-- header -->\r\n <ng-template #myHeader matHeaderCellDef>\r\n <mat-header-cell class=\"column-head\" cdkDrag resizeColumn [style]='styles?.header' [key]=\"metaData.key\"\r\n [class]='metaData.additional?.columnPartClasses?.header'>\r\n <div class=\"header-container\" cdkDragHandle>\r\n @if(!customCell?.columnDef?.headerCell)\r\n {\r\n @if((metaData.fieldType !== FieldType.NotMapped || !!metaData.sortLogic?.sortBy) && !metaData.noSort)\r\n {\r\n <div mat-sort-header style=\"width: 100%\">\r\n {{ metaData.displayName ? metaData.displayName : ( metaData.key | spaceCase ) }}\r\n </div>\r\n }\r\n @else if(metaData.fieldType === FieldType.NotMapped || metaData.noSort)\r\n {\r\n <div style=\"width: 100%\">\r\n {{ metaData.displayName ? metaData.displayName : ( metaData.key | spaceCase ) }}\r\n </div>\r\n }\r\n @if($showFilters())\r\n {\r\n <tb-header-menu #menu [metaData]='metaData' />\r\n }\r\n }\r\n @else\r\n {\r\n <ng-container *ngTemplateOutlet=\"customCell!.columnDef!.headerCell.template; context: {metaData: metaData, styles: styles?.header} \" />\r\n }\r\n </div>\r\n </mat-header-cell>\r\n </ng-template>\r\n \r\n <!-- body -->\r\n <ng-container *matCellDef=\"let element;\">\r\n <ng-container *ngTemplateOutlet=\"$outerTemplate()!; context: { metaData: metaData, element: element , styles: styles?.body, $implicit: element }\"/>\r\n </ng-container>\r\n <ng-template #body let-element='element' >\r\n <mat-cell [matTooltip]=\"metaData.toolTip ? (getTooltip | func : element) : ''\" \r\n [conditionalClasses]='metaData.classes' [element]='element' [styler]='styles.body'\r\n (click)='cellClicked(element, metaData.key, $event)' >\r\n <ng-container *ngTemplateOutlet=\"$innerTemplate()!;\r\n context: {\r\n value: ($transform()! | func : element),\r\n element: element,\r\n additional: $additional(),\r\n innerStyles: styles.innerBody,\r\n $implicit: element\r\n }; Injector: injector\" />\r\n </mat-cell>\r\n </ng-template>\r\n \r\n <!-- footer -->\r\n <ng-template matFooterCellDef>\r\n @if(customCell?.columnDef?.footerCell)\r\n {\r\n <ng-container\r\n *ngTemplateOutlet=\"customCell!.columnDef!.footerCell.template;\r\n context: {metaData: metaData, data: $data, styles : styles.footer }\"/>\r\n }\r\n @else\r\n {\r\n @let data = $data();\r\n <mat-footer-cell [style]='styles.footer' [class]='metaData.additional?.columnPartClasses?.footer'>\r\n @if(!!data?.length && metaData.additional?.footer)\r\n {\r\n <span class=\"bold\">\r\n @switch (metaData.fieldType)\r\n {\r\n @case (FieldType.Currency) { {{ data | columnTotal: metaData | currency }} }\r\n @case (FieldType.Number) { {{ data | columnTotal: metaData | number }} }\r\n }\r\n </span>\r\n }\r\n \r\n </mat-footer-cell>\r\n }\r\n </ng-template>\r\n </ng-container>\r\n}", styles: [".header-container{display:flex;flex-direction:row;width:100%;align-items:center}.negative-currency{color:red}.column-head{position:relative}.bold,.group-footer{font-weight:900}.cdk-drag-preview{background:#fff;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:33%;border-right-width:0px}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.drag-handle{color:#add8e6;cursor:move;margin-right:9px}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "directive", type: i1$6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$6.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$6.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i1$6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i1$6.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ResizeColumnDirective, selector: "[resizeColumn]", inputs: ["resizeColumn", "key"] }, { kind: "directive", type: StylerDirective, selector: "[styler]", inputs: ["element", "styler"] }, { kind: "directive", type: ConditionalClassesDirective, selector: "[conditionalClasses]", inputs: ["element", "conditionalClasses"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "component", type: i3$1.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: ColumnHeaderMenuComponent, selector: "tb-header-menu", inputs: ["metaData"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: FunctionPipe, name: "func" }, { kind: "pipe", type: SpaceCasePipe, name: "spaceCase" }, { kind: "pipe", type: ColumnTotalPipe, name: "columnTotal" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DecimalPipe, name: "number" }], viewProviders: [
|
|
4496
4500
|
{ provide: CDK_DROP_LIST, useExisting: CdkDropList },
|
|
4497
4501
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4498
4502
|
}
|
|
4499
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4503
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ColumnBuilderComponent, decorators: [{
|
|
4500
4504
|
type: Component,
|
|
4501
4505
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [
|
|
4502
4506
|
{ provide: CDK_DROP_LIST, useExisting: CdkDropList },
|
|
@@ -4504,8 +4508,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImpor
|
|
|
4504
4508
|
MatTableModule, NgTemplateOutlet, ResizeColumnDirective, FunctionPipe, StylerDirective,
|
|
4505
4509
|
ConditionalClassesDirective, DragDropModule, MatSortModule, SpaceCasePipe, ColumnHeaderMenuComponent,
|
|
4506
4510
|
MatTooltipModule, ColumnTotalPipe, CurrencyPipe, DecimalPipe
|
|
4507
|
-
], 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)\r\n {\r\n <div mat-sort-header style=\"width: 100%\"
|
|
4508
|
-
}] });
|
|
4511
|
+
], 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"] }]
|
|
4512
|
+
}], propDecorators: { $columnDef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatColumnDef), { isSignal: true }] }], $bodyTemplate: [{ type: i0.ViewChild, args: ['body', { isSignal: true }] }] } });
|
|
4509
4513
|
|
|
4510
4514
|
// 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,
|
|
4511
4515
|
// and now it is first by column d asc then by column a desc then by column b desc then by column c asc, we dont need to rerun the tail, i.e. for culumn b and c.
|
|
@@ -4546,10 +4550,10 @@ class DataStore extends ComponentStore {
|
|
|
4546
4550
|
constructor() {
|
|
4547
4551
|
super({ ...defaultDataState });
|
|
4548
4552
|
}
|
|
4549
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4550
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
4553
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: DataStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
4554
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: DataStore }); }
|
|
4551
4555
|
}
|
|
4552
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4556
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: DataStore, decorators: [{
|
|
4553
4557
|
type: Injectable
|
|
4554
4558
|
}], ctorParameters: () => [] });
|
|
4555
4559
|
|
|
@@ -4713,17 +4717,17 @@ class GenericTableComponent {
|
|
|
4713
4717
|
this._injector = inject(Injector);
|
|
4714
4718
|
this.tableContainer = inject(TableContainerComponent, { optional: true });
|
|
4715
4719
|
this.smallFooter = 10;
|
|
4716
|
-
this.$headerRow = viewChild(MatHeaderRowDef);
|
|
4717
|
-
this.$footerRow = viewChild(MatFooterRowDef);
|
|
4718
|
-
this.$table = viewChild(MatTable);
|
|
4719
|
-
this.$dropList = viewChild(CdkDropList);
|
|
4720
|
+
this.$headerRow = viewChild(MatHeaderRowDef, ...(ngDevMode ? [{ debugName: "$headerRow" }] : []));
|
|
4721
|
+
this.$footerRow = viewChild(MatFooterRowDef, ...(ngDevMode ? [{ debugName: "$footerRow" }] : []));
|
|
4722
|
+
this.$table = viewChild(MatTable, ...(ngDevMode ? [{ debugName: "$table" }] : []));
|
|
4723
|
+
this.$dropList = viewChild(CdkDropList, ...(ngDevMode ? [{ debugName: "$dropList" }] : []));
|
|
4720
4724
|
this.selection$ = output({ alias: 'selection' });
|
|
4721
|
-
this.$displayData = input.required({ alias: 'displayData' });
|
|
4722
|
-
this.$displayDataLength = computed(() => this.$displayData().length);
|
|
4723
|
-
this.$data = input.required({ alias: 'data' });
|
|
4724
|
-
this.$rows = input([], { alias: 'rows' });
|
|
4725
|
-
this.$columnInfos = input.required({ alias: 'columnInfos' });
|
|
4726
|
-
this.$dataSource = input.required({ alias: 'dataSource' });
|
|
4725
|
+
this.$displayData = input.required(...(ngDevMode ? [{ debugName: "$displayData", alias: 'displayData' }] : [{ alias: 'displayData' }]));
|
|
4726
|
+
this.$displayDataLength = computed(() => this.$displayData().length, ...(ngDevMode ? [{ debugName: "$displayDataLength" }] : []));
|
|
4727
|
+
this.$data = input.required(...(ngDevMode ? [{ debugName: "$data", alias: 'data' }] : [{ alias: 'data' }]));
|
|
4728
|
+
this.$rows = input([], ...(ngDevMode ? [{ debugName: "$rows", alias: 'rows' }] : [{ alias: 'rows' }]));
|
|
4729
|
+
this.$columnInfos = input.required(...(ngDevMode ? [{ debugName: "$columnInfos", alias: 'columnInfos' }] : [{ alias: 'columnInfos' }]));
|
|
4730
|
+
this.$dataSource = input.required(...(ngDevMode ? [{ debugName: "$dataSource", alias: 'dataSource' }] : [{ alias: 'dataSource' }]));
|
|
4727
4731
|
this.$keys = computed(() => {
|
|
4728
4732
|
const displayed = this.state.$orderedVisibleColumns();
|
|
4729
4733
|
const built = this.$columns();
|
|
@@ -4735,9 +4739,9 @@ class GenericTableComponent {
|
|
|
4735
4739
|
keys.unshift('index');
|
|
4736
4740
|
}
|
|
4737
4741
|
return keys;
|
|
4738
|
-
});
|
|
4742
|
+
}, ...(ngDevMode ? [{ debugName: "$keys" }] : []));
|
|
4739
4743
|
this.keys$ = toObservable(this.$keys);
|
|
4740
|
-
this.$trackBy = input(undefined, { alias: 'trackBy' });
|
|
4744
|
+
this.$trackBy = input(undefined, ...(ngDevMode ? [{ debugName: "$trackBy", alias: 'trackBy' }] : [{ alias: 'trackBy' }]));
|
|
4741
4745
|
this.$trackByFunction = computed(() => {
|
|
4742
4746
|
const trackBy = this.$trackBy();
|
|
4743
4747
|
if (!trackBy)
|
|
@@ -4747,17 +4751,17 @@ class GenericTableComponent {
|
|
|
4747
4751
|
return `${item.level}-${item[initIndexSymbol]}`;
|
|
4748
4752
|
return typeof trackBy === 'function' ? trackBy(item) : item[trackBy];
|
|
4749
4753
|
});
|
|
4750
|
-
});
|
|
4751
|
-
this.$hasFooterMeta = computed(() => this.state.$metaDataArray().some(md => !!md.additional?.footer));
|
|
4752
|
-
this.$hasCustomFooter = computed(() => this.$columnInfos()?.some(ci => !!ci.customCell?.columnDef?.footerCell));
|
|
4754
|
+
}, ...(ngDevMode ? [{ debugName: "$trackByFunction" }] : []));
|
|
4755
|
+
this.$hasFooterMeta = computed(() => this.state.$metaDataArray().some(md => !!md.additional?.footer), ...(ngDevMode ? [{ debugName: "$hasFooterMeta" }] : []));
|
|
4756
|
+
this.$hasCustomFooter = computed(() => this.$columnInfos()?.some(ci => !!ci.customCell?.columnDef?.footerCell), ...(ngDevMode ? [{ debugName: "$hasCustomFooter" }] : []));
|
|
4753
4757
|
this.$footerRowStyle = computed(() => {
|
|
4754
4758
|
const hasData = !!this.$displayDataLength();
|
|
4755
4759
|
const metaFooter = this.$hasFooterMeta();
|
|
4756
4760
|
const customFooter = this.$hasCustomFooter();
|
|
4757
4761
|
const hasSelectionColumn = this.state.$props().selectionColumn;
|
|
4758
4762
|
return customFooter || hasSelectionColumn || (hasData && metaFooter) ? 'regular-footer' : hasData ? 'no-footer' : 'small-footer';
|
|
4759
|
-
});
|
|
4760
|
-
this.$showFooterRow = computed(() => this.$footerRowStyle() !== 'no-footer');
|
|
4763
|
+
}, ...(ngDevMode ? [{ debugName: "$footerRowStyle" }] : []));
|
|
4764
|
+
this.$showFooterRow = computed(() => this.$footerRowStyle() !== 'no-footer', ...(ngDevMode ? [{ debugName: "$showFooterRow" }] : []));
|
|
4761
4765
|
this.injector = Injector.create({
|
|
4762
4766
|
providers: [
|
|
4763
4767
|
{ provide: MatTable, useFactory: () => this.$table() },
|
|
@@ -4765,10 +4769,10 @@ class GenericTableComponent {
|
|
|
4765
4769
|
],
|
|
4766
4770
|
parent: this._injector
|
|
4767
4771
|
});
|
|
4768
|
-
this.$hasIndexColumn = computed(() => this.state.selectSignal(state => state.props.indexColumn)());
|
|
4769
|
-
this.$columns = signal({});
|
|
4770
|
-
this.$showHeader = computed(() => !this.state.$tableSettings().hideColumnHeader);
|
|
4771
|
-
this.$paginatorHeight = signal(0);
|
|
4772
|
+
this.$hasIndexColumn = computed(() => this.state.selectSignal(state => state.props.indexColumn)(), ...(ngDevMode ? [{ debugName: "$hasIndexColumn" }] : []));
|
|
4773
|
+
this.$columns = signal({}, ...(ngDevMode ? [{ debugName: "$columns" }] : []));
|
|
4774
|
+
this.$showHeader = computed(() => !this.state.$tableSettings().hideColumnHeader, ...(ngDevMode ? [{ debugName: "$showHeader" }] : []));
|
|
4775
|
+
this.$paginatorHeight = signal(0, ...(ngDevMode ? [{ debugName: "$paginatorHeight" }] : []));
|
|
4772
4776
|
this.r = new ResizeObserver(entries => this.$paginatorHeight.set(entries[0]?.contentRect.height || 0));
|
|
4773
4777
|
this.#rr = effect((cleanup) => {
|
|
4774
4778
|
const paginatorWrapper = this.tableContainer?.$paginatorWrapper();
|
|
@@ -4776,9 +4780,9 @@ class GenericTableComponent {
|
|
|
4776
4780
|
return;
|
|
4777
4781
|
this.r.observe(paginatorWrapper.nativeElement);
|
|
4778
4782
|
cleanup(() => { this.r.disconnect(); });
|
|
4779
|
-
});
|
|
4783
|
+
}, ...(ngDevMode ? [{ debugName: "#rr" }] : []));
|
|
4780
4784
|
this.$offset = this.dataStore.selectSignal(s => s.virtualScrollOffset);
|
|
4781
|
-
this.$footerOffset = computed(() => this.$offset() + this.$paginatorHeight());
|
|
4785
|
+
this.$footerOffset = computed(() => this.$offset() + this.$paginatorHeight(), ...(ngDevMode ? [{ debugName: "$footerOffset" }] : []));
|
|
4782
4786
|
this.#buildColumnsEffect = effect(() => {
|
|
4783
4787
|
const columnInfos = this.$columnInfos() || [];
|
|
4784
4788
|
const table = this.$table();
|
|
@@ -4794,7 +4798,7 @@ class GenericTableComponent {
|
|
|
4794
4798
|
});
|
|
4795
4799
|
columnInfos.forEach(ci => this.buildColumn(ci));
|
|
4796
4800
|
});
|
|
4797
|
-
});
|
|
4801
|
+
}, ...(ngDevMode ? [{ debugName: "#buildColumnsEffect" }] : []));
|
|
4798
4802
|
this.#buildRowsEffect = effect(() => {
|
|
4799
4803
|
const table = this.$table();
|
|
4800
4804
|
const rows = this.$rows();
|
|
@@ -4808,7 +4812,7 @@ class GenericTableComponent {
|
|
|
4808
4812
|
table.addRowDef(row);
|
|
4809
4813
|
});
|
|
4810
4814
|
});
|
|
4811
|
-
});
|
|
4815
|
+
}, ...(ngDevMode ? [{ debugName: "#buildRowsEffect" }] : []));
|
|
4812
4816
|
this.#buildHeaderRowEffect = effect(() => {
|
|
4813
4817
|
const headerRow = this.$headerRow();
|
|
4814
4818
|
const showHeader = this.$showHeader();
|
|
@@ -4819,7 +4823,7 @@ class GenericTableComponent {
|
|
|
4819
4823
|
else if (headerRow && table)
|
|
4820
4824
|
table.removeHeaderRowDef(headerRow);
|
|
4821
4825
|
});
|
|
4822
|
-
});
|
|
4826
|
+
}, ...(ngDevMode ? [{ debugName: "#buildHeaderRowEffect" }] : []));
|
|
4823
4827
|
this.#buildFooterEffect = effect(() => {
|
|
4824
4828
|
const footerRow = this.$footerRow();
|
|
4825
4829
|
const showFooter = this.$showFooterRow();
|
|
@@ -4830,9 +4834,9 @@ class GenericTableComponent {
|
|
|
4830
4834
|
else if (footerRow && table)
|
|
4831
4835
|
table.removeFooterRowDef(footerRow);
|
|
4832
4836
|
});
|
|
4833
|
-
});
|
|
4834
|
-
this.$usePaginator = computed(() => this.state.$tableSettings().usePaginator);
|
|
4835
|
-
this.$useVirtualScroll = computed(() => this.state.$viewType().includes('virtual'));
|
|
4837
|
+
}, ...(ngDevMode ? [{ debugName: "#buildFooterEffect" }] : []));
|
|
4838
|
+
this.$usePaginator = computed(() => this.state.$tableSettings().usePaginator, ...(ngDevMode ? [{ debugName: "$usePaginator" }] : []));
|
|
4839
|
+
this.$useVirtualScroll = computed(() => this.state.$viewType().includes('virtual'), ...(ngDevMode ? [{ debugName: "$useVirtualScroll" }] : []));
|
|
4836
4840
|
this.$virtualStart = this.dataStore.selectSignal(d => d.virtualEnds.start);
|
|
4837
4841
|
this.$offsetIndex = computed(() => {
|
|
4838
4842
|
const virtualStart = this.$virtualStart();
|
|
@@ -4845,8 +4849,8 @@ class GenericTableComponent {
|
|
|
4845
4849
|
return pageSize * currentPage;
|
|
4846
4850
|
}
|
|
4847
4851
|
return 0;
|
|
4848
|
-
});
|
|
4849
|
-
this.$hasSelectColumn = computed(() => this.state.selectSignal(state => state.props.selectionColumn)());
|
|
4852
|
+
}, ...(ngDevMode ? [{ debugName: "$offsetIndex" }] : []));
|
|
4853
|
+
this.$hasSelectColumn = computed(() => this.state.selectSignal(state => state.props.selectionColumn)(), ...(ngDevMode ? [{ debugName: "$hasSelectColumn" }] : []));
|
|
4850
4854
|
this.$selection = computed(() => {
|
|
4851
4855
|
const trackBy = this.$trackBy();
|
|
4852
4856
|
if (trackBy) {
|
|
@@ -4862,7 +4866,7 @@ class GenericTableComponent {
|
|
|
4862
4866
|
this.checkForPreviousSelection(model);
|
|
4863
4867
|
});
|
|
4864
4868
|
return model;
|
|
4865
|
-
});
|
|
4869
|
+
}, ...(ngDevMode ? [{ debugName: "$selection" }] : []));
|
|
4866
4870
|
this.selectionChange$ = toObservable(this.$selection).pipe(switchMap(s => s.changed));
|
|
4867
4871
|
this.$selectionChange = toSignal(this.selectionChange$);
|
|
4868
4872
|
this.onSelectionChangeEffect = effect(() => {
|
|
@@ -4870,20 +4874,20 @@ class GenericTableComponent {
|
|
|
4870
4874
|
if (!selectionChange)
|
|
4871
4875
|
return;
|
|
4872
4876
|
untracked(() => this.selection$.emit(selectionChange));
|
|
4873
|
-
});
|
|
4877
|
+
}, ...(ngDevMode ? [{ debugName: "onSelectionChangeEffect" }] : []));
|
|
4874
4878
|
this.$isAllSelected = computed(() => {
|
|
4875
4879
|
this.$selectionChange();
|
|
4876
4880
|
const selected = this.$selection()?.selected;
|
|
4877
4881
|
if (!selected?.length)
|
|
4878
4882
|
return false;
|
|
4879
4883
|
return this.$selectableData()?.length === selected.length;
|
|
4880
|
-
});
|
|
4884
|
+
}, ...(ngDevMode ? [{ debugName: "$isAllSelected" }] : []));
|
|
4881
4885
|
this.$masterToggleChecked = this.$isAllSelected;
|
|
4882
4886
|
this.$masterToggleIndeterminate = computed(() => {
|
|
4883
4887
|
this.$selectionChange();
|
|
4884
4888
|
return !!this.$selection()?.selected.length && !this.$masterToggleChecked();
|
|
4885
|
-
});
|
|
4886
|
-
this.$paginated = computed(() => this.state.$viewType() === 'virtual paginator' || this.state.$viewType() === 'paginator');
|
|
4889
|
+
}, ...(ngDevMode ? [{ debugName: "$masterToggleIndeterminate" }] : []));
|
|
4890
|
+
this.$paginated = computed(() => this.state.$viewType() === 'virtual paginator' || this.state.$viewType() === 'paginator', ...(ngDevMode ? [{ debugName: "$paginated" }] : []));
|
|
4887
4891
|
this.$selectableData = computed(() => {
|
|
4888
4892
|
const isGrouped = !!this.state.$groupByData().length;
|
|
4889
4893
|
this.state.$expandGroups();
|
|
@@ -4900,7 +4904,7 @@ class GenericTableComponent {
|
|
|
4900
4904
|
return this.$data();
|
|
4901
4905
|
}
|
|
4902
4906
|
return [];
|
|
4903
|
-
});
|
|
4907
|
+
}, ...(ngDevMode ? [{ debugName: "$selectableData" }] : []));
|
|
4904
4908
|
this.$selectAllMessage = computed(() => {
|
|
4905
4909
|
if (this.$isAllSelected())
|
|
4906
4910
|
return `Deselect all ${this.$selection().selected.length} selected`;
|
|
@@ -4910,7 +4914,7 @@ class GenericTableComponent {
|
|
|
4910
4914
|
message += ' on this page';
|
|
4911
4915
|
}
|
|
4912
4916
|
return message;
|
|
4913
|
-
});
|
|
4917
|
+
}, ...(ngDevMode ? [{ debugName: "$selectAllMessage" }] : []));
|
|
4914
4918
|
this.#onSelectableDataChangeEffect = effect(() => {
|
|
4915
4919
|
const selectableData = this.$selectableData();
|
|
4916
4920
|
untracked(() => {
|
|
@@ -4927,22 +4931,34 @@ class GenericTableComponent {
|
|
|
4927
4931
|
const removed = selected.filter(trackByFunc);
|
|
4928
4932
|
this.$selection().deselect(...removed);
|
|
4929
4933
|
});
|
|
4930
|
-
});
|
|
4931
|
-
this.$tableWidth = linkedSignal({
|
|
4932
|
-
|
|
4933
|
-
|
|
4934
|
-
|
|
4935
|
-
|
|
4936
|
-
|
|
4937
|
-
|
|
4938
|
-
|
|
4939
|
-
|
|
4940
|
-
|
|
4941
|
-
|
|
4942
|
-
|
|
4934
|
+
}, ...(ngDevMode ? [{ debugName: "#onSelectableDataChangeEffect" }] : []));
|
|
4935
|
+
this.$tableWidth = linkedSignal(...(ngDevMode ? [{ debugName: "$tableWidth", source: this.state.$getUserDefinedTableWidth,
|
|
4936
|
+
computation: (currentUserDefinedWidth, { source: previousUserDefinedWidth } = { value: null, source: 0 }) => {
|
|
4937
|
+
if (currentUserDefinedWidth) {
|
|
4938
|
+
return ({ width: `${currentUserDefinedWidth}px`, minWidth: 'initial' });
|
|
4939
|
+
}
|
|
4940
|
+
if (wasReset()) {
|
|
4941
|
+
return ({ width: 'initial' });
|
|
4942
|
+
}
|
|
4943
|
+
return {};
|
|
4944
|
+
function wasReset() {
|
|
4945
|
+
return (previousUserDefinedWidth ?? 0) >= 0 && currentUserDefinedWidth == null;
|
|
4946
|
+
}
|
|
4947
|
+
} }] : [{
|
|
4948
|
+
source: this.state.$getUserDefinedTableWidth,
|
|
4949
|
+
computation: (currentUserDefinedWidth, { source: previousUserDefinedWidth } = { value: null, source: 0 }) => {
|
|
4950
|
+
if (currentUserDefinedWidth) {
|
|
4951
|
+
return ({ width: `${currentUserDefinedWidth}px`, minWidth: 'initial' });
|
|
4952
|
+
}
|
|
4953
|
+
if (wasReset()) {
|
|
4954
|
+
return ({ width: 'initial' });
|
|
4955
|
+
}
|
|
4956
|
+
return {};
|
|
4957
|
+
function wasReset() {
|
|
4958
|
+
return (previousUserDefinedWidth ?? 0) >= 0 && currentUserDefinedWidth == null;
|
|
4959
|
+
}
|
|
4943
4960
|
}
|
|
4944
|
-
}
|
|
4945
|
-
});
|
|
4961
|
+
}]));
|
|
4946
4962
|
this.getGroupHeaderTransform = (key, val) => computed(() => {
|
|
4947
4963
|
if (val == undefined || val === 'null')
|
|
4948
4964
|
return 'BLANK';
|
|
@@ -4970,7 +4986,7 @@ class GenericTableComponent {
|
|
|
4970
4986
|
return parseTbSizeToPixels(notPersistedTableSettings.rowHeight) + 'px';
|
|
4971
4987
|
}
|
|
4972
4988
|
return undefined;
|
|
4973
|
-
});
|
|
4989
|
+
}, ...(ngDevMode ? [{ debugName: "$rowHeight" }] : []));
|
|
4974
4990
|
this.$headerHeight = computed(() => {
|
|
4975
4991
|
if (this.state.$userDefinedHeaderHeight()) {
|
|
4976
4992
|
return this.state.$userDefinedHeaderHeight() + 'px';
|
|
@@ -4984,14 +5000,14 @@ class GenericTableComponent {
|
|
|
4984
5000
|
return parseTbSizeToPixels(notPersistedTableSettings.headerHeight) + 'px';
|
|
4985
5001
|
}
|
|
4986
5002
|
return undefined;
|
|
4987
|
-
});
|
|
5003
|
+
}, ...(ngDevMode ? [{ debugName: "$headerHeight" }] : []));
|
|
4988
5004
|
this.$groupHeaderHeight = computed(() => {
|
|
4989
5005
|
const groupHeaderHeight = this.state.$notPersistedTableSettings().groupHeaderHeight;
|
|
4990
5006
|
if (groupHeaderHeight) {
|
|
4991
5007
|
return parseTbSizeToPixels(groupHeaderHeight) + 'px';
|
|
4992
5008
|
}
|
|
4993
5009
|
return this.$rowHeight();
|
|
4994
|
-
});
|
|
5010
|
+
}, ...(ngDevMode ? [{ debugName: "$groupHeaderHeight" }] : []));
|
|
4995
5011
|
this.$footerHeight = computed(() => {
|
|
4996
5012
|
const footerStyle = this.$footerRowStyle();
|
|
4997
5013
|
switch (footerStyle) {
|
|
@@ -5002,10 +5018,10 @@ class GenericTableComponent {
|
|
|
5002
5018
|
default:
|
|
5003
5019
|
return '0px';
|
|
5004
5020
|
}
|
|
5005
|
-
});
|
|
5006
|
-
this.$stickyFooter = computed(() => this.state.$props().stickyFooter || this.state.$isVirtual());
|
|
5007
|
-
this.$rowStyles = computed(() => this.state.$tableSettings().rowStyles || {});
|
|
5008
|
-
this.$rowClasses = computed(() => this.state.$tableSettings().rowClasses || {});
|
|
5021
|
+
}, ...(ngDevMode ? [{ debugName: "$footerHeight" }] : []));
|
|
5022
|
+
this.$stickyFooter = computed(() => this.state.$props().stickyFooter || this.state.$isVirtual(), ...(ngDevMode ? [{ debugName: "$stickyFooter" }] : []));
|
|
5023
|
+
this.$rowStyles = computed(() => this.state.$tableSettings().rowStyles || {}, ...(ngDevMode ? [{ debugName: "$rowStyles" }] : []));
|
|
5024
|
+
this.$rowClasses = computed(() => this.state.$tableSettings().rowClasses || {}, ...(ngDevMode ? [{ debugName: "$rowClasses" }] : []));
|
|
5009
5025
|
this.allOfGroupSelected = (uniqueName) => computed(() => {
|
|
5010
5026
|
//make sure signal is marked dirty when selection or over all data changes
|
|
5011
5027
|
this.$selectionChange();
|
|
@@ -5061,8 +5077,8 @@ class GenericTableComponent {
|
|
|
5061
5077
|
this.$selectFilterKey = computed(() => {
|
|
5062
5078
|
const selectFilter = Object.keys(this.state.$filters()).find(key => key.startsWith('header-column-select'));
|
|
5063
5079
|
return selectFilter;
|
|
5064
|
-
});
|
|
5065
|
-
this.$hasSelectFilter = computed(() => !!this.$selectFilterKey());
|
|
5080
|
+
}, ...(ngDevMode ? [{ debugName: "$selectFilterKey" }] : []));
|
|
5081
|
+
this.$hasSelectFilter = computed(() => !!this.$selectFilterKey(), ...(ngDevMode ? [{ debugName: "$hasSelectFilter" }] : []));
|
|
5066
5082
|
this._onSelect = effect(() => {
|
|
5067
5083
|
const selectionChange = this.$selectionChange();
|
|
5068
5084
|
untracked(() => {
|
|
@@ -5072,7 +5088,7 @@ class GenericTableComponent {
|
|
|
5072
5088
|
this.state.removeFilter(selectFilterKey);
|
|
5073
5089
|
this.addSelectFilter(true);
|
|
5074
5090
|
});
|
|
5075
|
-
});
|
|
5091
|
+
}, ...(ngDevMode ? [{ debugName: "_onSelect" }] : []));
|
|
5076
5092
|
}
|
|
5077
5093
|
#rr;
|
|
5078
5094
|
drop(event) {
|
|
@@ -5164,17 +5180,17 @@ class GenericTableComponent {
|
|
|
5164
5180
|
notSavable: true,
|
|
5165
5181
|
});
|
|
5166
5182
|
}
|
|
5167
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5168
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", 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"], 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: "pipe", type: FunctionPipe, name: "func" }, { 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]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5183
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: GenericTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5184
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: GenericTableComponent, isStandalone: true, selector: "tb-generic-table", inputs: { $displayData: { classPropertyName: "$displayData", publicName: "displayData", isSignal: true, isRequired: true, transformFunction: null }, $data: { classPropertyName: "$data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, $rows: { classPropertyName: "$rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, $columnInfos: { classPropertyName: "$columnInfos", publicName: "columnInfos", isSignal: true, isRequired: true, transformFunction: null }, $dataSource: { classPropertyName: "$dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, $trackBy: { classPropertyName: "$trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection$: "selection" }, viewQueries: [{ propertyName: "$headerRow", first: true, predicate: MatHeaderRowDef, descendants: true, isSignal: true }, { propertyName: "$footerRow", first: true, predicate: MatFooterRowDef, descendants: true, isSignal: true }, { propertyName: "$table", first: true, predicate: MatTable, descendants: true, isSignal: true }, { propertyName: "$dropList", first: true, predicate: CdkDropList, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-table\r\n #table\r\n cdkDropList\r\n cdkDropListLockAxis='x'\r\n cdkDropListOrientation=\"horizontal\"\r\n class=\"table-drag-list\"\r\n [dataSource]=\"$dataSource()\"\r\n [trackBy]=\"$trackByFunction()\"\r\n [style]=\"$tableWidth()\"\r\n (cdkDropListDropped)=\"drop($event)\"\r\n>\r\n\r\n <!-- select column -->\r\n <ng-container matColumnDef=\"select\">\r\n @let selection = $selection();\r\n <mat-header-cell *matHeaderCellDef class=\"select-column\">\r\n <mat-checkbox [checked]=\"!!($masterToggleChecked())\"\r\n [indeterminate]=\"$masterToggleIndeterminate()\"\r\n [matTooltip]=\"$selectAllMessage()\"\r\n (change)=\"$event ? masterToggle() : null\" />\r\n <button mat-icon-button class=\"open-menu-icon-button\" disableRipple [matMenuTriggerFor]=\"menu\" [matMenuTriggerRestoreFocus]=\"false\">\r\n <mat-icon class=\"menu-icon\">more_vert</mat-icon>\r\n </button>\r\n <mat-menu #menu=\"matMenu\" >\r\n <button mat-menu-item>\r\n <mat-slide-toggle [checked]=\"$hasSelectFilter()\" (change)=\"addSelectFilter($event.checked)\">\r\n Show Only Selected\r\n </mat-slide-toggle>\r\n </button>\r\n @if(this.$selection().selected.length)\r\n {\r\n <button mat-menu-item (click)=\"$selection().clear()\">\r\n Clear Selection\r\n </button>\r\n }\r\n <button mat-menu-item (click)=\"selectTop(+i.value)\">\r\n Select top \r\n <input #i class=\"input\" stop-propagation type=\"number\" \r\n placeholder=\"Set Size\"\r\n [value]=\"10\"\r\n [min]=\"1\"\r\n [max]=\"dataStore.state().sortedFilteredDataLength\" />\r\n </button>\r\n </mat-menu>\r\n </mat-header-cell>\r\n\r\n <mat-cell *matCellDef=\"let row\" class=\"select-column\">\r\n <mat-checkbox\r\n [checked]=\"selection.isSelected(row)\"\r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"$event ? selection.toggle(row) : null\"/>\r\n </mat-cell>\r\n\r\n <mat-footer-cell *matFooterCellDef class=\"select-column\">\r\n {{ selection.selected.length }}\r\n </mat-footer-cell>\r\n </ng-container>\r\n\r\n\r\n <!-- index column -->\r\n <ng-container matColumnDef=\"index\">\r\n <mat-header-cell *matHeaderCellDef class=\"f-mat-header-cell\" class=\"index-column\">#\r\n </mat-header-cell>\r\n <mat-cell *matCellDef=\"let i = index; let t\" class=\"index-column\">\r\n {{ 1 + i + $offsetIndex() }}\r\n </mat-cell>\r\n <mat-footer-cell *matFooterCellDef class=\"index-column\" />\r\n </ng-container>\r\n\r\n <!-- Grouping -->\r\n <ng-container matColumnDef=\"groupHeader\">\r\n <mat-cell *matCellDef=\"let row\">\r\n @let expanded = (state.$getIsExpanded | func : row.key : row.uniqueName );\r\n @let customTemplate = (getCustomGroupRowTemplate | func : row.key)();\r\n\r\n <!-- Default group row template -->\r\n <div [style.paddingLeft]=\"row.padding + 'px !important'\" [class]=\"'group-cell'\">\r\n @if($hasSelectColumn())\r\n {\r\n @let contains = (allOfGroupSelected | func : row.uniqueName)();\r\n <mat-checkbox [checked]=\"!!contains.containsAll\"\r\n [indeterminate]=\"!!contains.containsSome && !contains.containsAll\"\r\n [matTooltip]=\"toggleGroupMessage | func : contains.length : contains.containsAll\"\r\n (change)=\"$event ? toggleGroup(row.uniqueName, contains.containsAll) : null\" />\r\n }\r\n <button mat-icon-button (click)=\"setExpanded(row.key, row.uniqueName, !expanded());\">\r\n @if (!expanded())\r\n {\r\n <mat-icon>chevron_right</mat-icon>\r\n }\r\n @else\r\n {\r\n <mat-icon>expand_more</mat-icon>\r\n }\r\n </button>\r\n {{ row.custom ? row.groupHeaderDisplay : ((getGroupHeaderTransform | func : row.key : row.groupHeaderDisplay)() + ` (${row.length})`) }}\r\n </div>\r\n @if(customTemplate)\r\n {\r\n <ng-container *ngTemplateOutlet=\"customTemplate; context: { \r\n $implicit: row, \r\n element: row, \r\n expanded: expanded(), \r\n level: row.level, \r\n key: row.key, \r\n uniqueName: row.uniqueName, \r\n groupHeaderDisplay: row.groupHeaderDisplay, \r\n length: row.length, \r\n padding: row.padding \r\n }\" />\r\n }\r\n @else\r\n {\r\n <ng-container *ngTemplateOutlet=\"state.$props().groupHeaderTemplate!; context: { element: row }\" />\r\n }\r\n </mat-cell>\r\n </ng-container>\r\n\r\n <mat-row\r\n *matRowDef=\"let row; columns: $keys(); let i = index\"\r\n [style.height]=\"$rowHeight()\"\r\n [style.min-height]=\"$rowHeight()\"\r\n [styler]=\"$rowStyles()\"\r\n [element]=\"row\"\r\n [conditionalClasses]=\"$rowClasses()\"\r\n (click)=\"rowClicked(row, $event)\"\r\n />\r\n\r\n <!-- group row -->\r\n <mat-row *matRowDef=\"let row; columns: ['groupHeader']; when: isGroupHeader\"\r\n style=\"background-color: unset;\"\r\n [style.height]=\"state.$props().groupHeaderHeight ? state.$props().groupHeaderHeight + 'px' : $groupHeaderHeight()\"\r\n [style.min-height]=\"state.$props().groupHeaderHeight ? state.$props().groupHeaderHeight + 'px' : $groupHeaderHeight()\"/>\r\n</mat-table>\r\n\r\n<mat-header-row *matHeaderRowDef=\"$keys(); sticky: state.$props().isSticky\" [style.height]=\"$headerHeight()\"\r\n [style.min-height]=\"$headerHeight()\" [style.top.px]=\"($offset()! * -1)\"/>\r\n<mat-footer-row *matFooterRowDef=\"$keys(); sticky: false \" [style.height]=\"$footerHeight()\" [class.sticky-footer]=\"$stickyFooter()\"\r\n [style.min-height]=\"$footerHeight()\"\r\n [style.bottom.px]=\"$stickyFooter() ? ($footerOffset()) : undefined\"/>\r\n", styles: [":host{--mat-paginator-container-size: var(tb-paginator-container-size, initial)}.select-column{min-width:var(--tb-min-select-column-width, 42px)}.index-column{min-width:var(--tb-min-index-column-width, 42px)}.page-amounts{color:#0000008a;font-family:Roboto,Helvetica Neue,sans-serif;font-size:12px;margin-right:.2rem}.group-cell{display:flex;align-items:center;width:var(--tb-group-cell-width);min-width:var(--tb-group-cell-min-width);max-width:var(--tb-group-cell-max-width)}:host::ng-deep .table-drag-list.cdk-drop-list-dragging .drag-header:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}:host::ng-deep .mdc-data-table__cell,:host::ng-deep .mdc-data-table__header-cell{padding:var(--tb-cell-padding, 0 0 0 .2rem);line-height:var(--tb-cell-line-height, normal)}::ng-deep .op-date-time-input{line-height:3rem;font-size:.9rem;font-family:Roboto,Helvetica Neue,sans-serif;padding-left:.2rem;width:12rem}.sticky-footer{position:sticky;z-index:10}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$6.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$6.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i1$6.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i1$6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i1$6.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i1$6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i1$6.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i1$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: StylerDirective, selector: "[styler]", inputs: ["element", "styler"] }, { kind: "directive", type: ConditionalClassesDirective, selector: "[conditionalClasses]", inputs: ["element", "conditionalClasses"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1$4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: StopPropagationDirective, selector: "[stop-propagation]" }, { kind: "pipe", type: FunctionPipe, name: "func" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5169
5185
|
}
|
|
5170
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5186
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: GenericTableComponent, decorators: [{
|
|
5171
5187
|
type: Component,
|
|
5172
5188
|
args: [{ selector: 'tb-generic-table', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
5173
5189
|
MatTableModule, DragDropModule, MatCheckboxModule, MatButtonModule, MatIconModule, NgTemplateOutlet,
|
|
5174
5190
|
MatTooltipModule, FunctionPipe, StylerDirective, ConditionalClassesDirective, MatMenuModule, MatSlideToggle,
|
|
5175
5191
|
StopPropagationDirective
|
|
5176
5192
|
], 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"] }]
|
|
5177
|
-
}] });
|
|
5193
|
+
}], propDecorators: { $headerRow: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatHeaderRowDef), { isSignal: true }] }], $footerRow: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatFooterRowDef), { isSignal: true }] }], $table: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatTable), { isSignal: true }] }], $dropList: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkDropList), { isSignal: true }] }], selection$: [{ type: i0.Output, args: ["selection"] }], $displayData: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayData", required: true }] }], $data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], $rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], $columnInfos: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnInfos", required: true }] }], $dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: true }] }], $trackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackBy", required: false }] }] } });
|
|
5178
5194
|
|
|
5179
5195
|
function downloadData(data, filename, mimeType) {
|
|
5180
5196
|
const url = URL.createObjectURL(new Blob([data], { type: mimeType }));
|
|
@@ -5199,7 +5215,7 @@ class ExportToCsvService {
|
|
|
5199
5215
|
|| {};
|
|
5200
5216
|
const tableSettings = (this.state.$notPersistedTableSettings()?.exportSettings || {});
|
|
5201
5217
|
return merge$1({}, globalSettings, tableSettings);
|
|
5202
|
-
});
|
|
5218
|
+
}, ...(ngDevMode ? [{ debugName: "$exportSettings" }] : []));
|
|
5203
5219
|
this.exportToCsv = (data) => {
|
|
5204
5220
|
const hiddenKeys = this.state.selectSignal(s => s.hiddenKeys)();
|
|
5205
5221
|
const meta = this.state.$metaDataArray().filter(md => !md.noExport && !hiddenKeys.includes(md.key));
|
|
@@ -5295,10 +5311,10 @@ class ExportToCsvService {
|
|
|
5295
5311
|
}
|
|
5296
5312
|
return this.datePipe.transform(val, dateFormat);
|
|
5297
5313
|
}
|
|
5298
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5299
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
5314
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ExportToCsvService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
5315
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ExportToCsvService }); }
|
|
5300
5316
|
}
|
|
5301
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5317
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ExportToCsvService, decorators: [{
|
|
5302
5318
|
type: Injectable
|
|
5303
5319
|
}] });
|
|
5304
5320
|
|
|
@@ -5513,10 +5529,10 @@ class TableBuilderStateStore extends ComponentStore {
|
|
|
5513
5529
|
this.deleteLocalProfilesState({ key, stateKey });
|
|
5514
5530
|
};
|
|
5515
5531
|
}
|
|
5516
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5517
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
5532
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TableBuilderStateStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
5533
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TableBuilderStateStore, providedIn: 'root' }); }
|
|
5518
5534
|
}
|
|
5519
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5535
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TableBuilderStateStore, decorators: [{
|
|
5520
5536
|
type: Injectable,
|
|
5521
5537
|
args: [{ providedIn: 'root' }]
|
|
5522
5538
|
}], ctorParameters: () => [] });
|
|
@@ -5736,13 +5752,13 @@ class PaginatorComponent {
|
|
|
5736
5752
|
constructor() {
|
|
5737
5753
|
this.state = inject(TableStore);
|
|
5738
5754
|
this.data = inject(DataStore);
|
|
5739
|
-
this.$paginator = viewChild(MatPaginator);
|
|
5755
|
+
this.$paginator = viewChild(MatPaginator, ...(ngDevMode ? [{ debugName: "$paginator" }] : []));
|
|
5740
5756
|
this.$dataLength = this.data.selectSignal(d => d.sortedFilteredDataLength);
|
|
5741
5757
|
this.$viewableDataLength = this.data.selectSignal(d => d.sortedFilteredGroupedDataLength);
|
|
5742
5758
|
this.pageEvent$ = toObservable(this.$paginator).pipe(notNull(), switchMap(p => p.page));
|
|
5743
5759
|
this.$pageEvent = toSignal(this.pageEvent$);
|
|
5744
|
-
this.$pageIndexChangeEvent = computed(() => this.$pageEvent()?.pageIndex);
|
|
5745
|
-
this.$pageSizeChangeEvent = computed(() => this.$pageEvent()?.pageSize);
|
|
5760
|
+
this.$pageIndexChangeEvent = computed(() => this.$pageEvent()?.pageIndex, ...(ngDevMode ? [{ debugName: "$pageIndexChangeEvent" }] : []));
|
|
5761
|
+
this.$pageSizeChangeEvent = computed(() => this.$pageEvent()?.pageSize, ...(ngDevMode ? [{ debugName: "$pageSizeChangeEvent" }] : []));
|
|
5746
5762
|
this.$currentPageData = computed(() => {
|
|
5747
5763
|
const pageEvent = this.$pageEvent();
|
|
5748
5764
|
if (!pageEvent)
|
|
@@ -5755,20 +5771,20 @@ class PaginatorComponent {
|
|
|
5755
5771
|
const pageDetails = mapPaginationEventToCurrentPageDetails(pageEvent);
|
|
5756
5772
|
const dataLength = this.$dataLength();
|
|
5757
5773
|
return ({ ...pageDetails, total: dataLength });
|
|
5758
|
-
});
|
|
5774
|
+
}, ...(ngDevMode ? [{ debugName: "$currentPageData" }] : []));
|
|
5759
5775
|
this.#onPageIndexEffect = effect(() => {
|
|
5760
5776
|
const index = this.$pageIndexChangeEvent();
|
|
5761
5777
|
if (index === undefined)
|
|
5762
5778
|
return;
|
|
5763
5779
|
untracked(() => this.state.setCurrentPage(index));
|
|
5764
|
-
});
|
|
5780
|
+
}, ...(ngDevMode ? [{ debugName: "#onPageIndexEffect" }] : []));
|
|
5765
5781
|
this.#onPageSizeEffect = effect(() => {
|
|
5766
5782
|
const size = this.$pageSizeChangeEvent();
|
|
5767
5783
|
const initialized = this.state.$initializationState() >= InitializationState.Ready;
|
|
5768
5784
|
if (!size || !initialized)
|
|
5769
5785
|
return;
|
|
5770
5786
|
untracked(() => this.state.setUserDefinedPageSize(size));
|
|
5771
|
-
});
|
|
5787
|
+
}, ...(ngDevMode ? [{ debugName: "#onPageSizeEffect" }] : []));
|
|
5772
5788
|
this.#onMetaPageSizeEffect = effect(() => {
|
|
5773
5789
|
const paginator = this.$paginator();
|
|
5774
5790
|
if (!paginator)
|
|
@@ -5776,7 +5792,7 @@ class PaginatorComponent {
|
|
|
5776
5792
|
const metaPageSize = this.state.$pageSize();
|
|
5777
5793
|
const initialized = this.state.$initializationState() >= InitializationState.Ready;
|
|
5778
5794
|
untracked(() => initialized && paginator._changePageSize(metaPageSize));
|
|
5779
|
-
});
|
|
5795
|
+
}, ...(ngDevMode ? [{ debugName: "#onMetaPageSizeEffect" }] : []));
|
|
5780
5796
|
this.onDataLengthEffect = effect(() => {
|
|
5781
5797
|
const paginator = this.$paginator();
|
|
5782
5798
|
const dataLength = this.$viewableDataLength();
|
|
@@ -5790,8 +5806,8 @@ class PaginatorComponent {
|
|
|
5790
5806
|
}
|
|
5791
5807
|
}
|
|
5792
5808
|
});
|
|
5793
|
-
});
|
|
5794
|
-
this.$collapseFooter = computed(() => this.state.selectSignal(state => state.persistedTableSettings.collapseFooter)());
|
|
5809
|
+
}, ...(ngDevMode ? [{ debugName: "onDataLengthEffect" }] : []));
|
|
5810
|
+
this.$collapseFooter = computed(() => this.state.selectSignal(state => state.persistedTableSettings.collapseFooter)(), ...(ngDevMode ? [{ debugName: "$collapseFooter" }] : []));
|
|
5795
5811
|
this.$showAllOption = this.state.selectSignal(s => s.notPersistedTableSettings?.paginatorSettings?.includeAllInOptions);
|
|
5796
5812
|
this.$showAll = this.state.$showAll;
|
|
5797
5813
|
}
|
|
@@ -5805,8 +5821,8 @@ class PaginatorComponent {
|
|
|
5805
5821
|
this.state.toggleCollapseFooter({ collapseFooter: true });
|
|
5806
5822
|
}
|
|
5807
5823
|
}
|
|
5808
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5809
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
5824
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: PaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5825
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: PaginatorComponent, isStandalone: true, selector: "tb-paginator", viewQueries: [{ propertyName: "$paginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
5810
5826
|
<div class="paginator-row">
|
|
5811
5827
|
@if($currentPageData(); as pageData)
|
|
5812
5828
|
{
|
|
@@ -5835,7 +5851,7 @@ class PaginatorComponent {
|
|
|
5835
5851
|
</div>
|
|
5836
5852
|
`, 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 }); }
|
|
5837
5853
|
}
|
|
5838
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5854
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: PaginatorComponent, decorators: [{
|
|
5839
5855
|
type: Component,
|
|
5840
5856
|
args: [{ selector: 'tb-paginator', imports: [MatPaginatorModule, MatButtonModule], template: `
|
|
5841
5857
|
<div class="paginator-row">
|
|
@@ -5865,7 +5881,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImpor
|
|
|
5865
5881
|
}
|
|
5866
5882
|
</div>
|
|
5867
5883
|
`, changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
|
|
5868
|
-
}] });
|
|
5884
|
+
}], propDecorators: { $paginator: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatPaginator), { isSignal: true }] }] } });
|
|
5869
5885
|
const mapPaginationEventToCurrentPageDetails = (pageData) => {
|
|
5870
5886
|
return ({
|
|
5871
5887
|
currentStart: (pageData.pageIndex * pageData.pageSize) + 1,
|
|
@@ -5881,19 +5897,19 @@ class TableBuilderDataSource extends MatTableDataSource {
|
|
|
5881
5897
|
}
|
|
5882
5898
|
constructor(state, data) {
|
|
5883
5899
|
super([]);
|
|
5884
|
-
this.#$dataSrc = signal([]);
|
|
5885
|
-
this.$dataSize = signal({ start: 0, end: 0 }, {
|
|
5886
|
-
|
|
5887
|
-
|
|
5900
|
+
this.#$dataSrc = signal([], ...(ngDevMode ? [{ debugName: "#$dataSrc" }] : []));
|
|
5901
|
+
this.$dataSize = signal({ start: 0, end: 0 }, ...(ngDevMode ? [{ debugName: "$dataSize", equal: (a, b) => a.start === b.start && a.end === b.end }] : [{
|
|
5902
|
+
equal: (a, b) => a.start === b.start && a.end === b.end
|
|
5903
|
+
}]));
|
|
5888
5904
|
this._ = effect(() => {
|
|
5889
5905
|
const data = this.#$dataSrc();
|
|
5890
5906
|
const dataSize = this.$dataSize();
|
|
5891
5907
|
untracked(() => this.data = data.slice(dataSize.start, dataSize.end));
|
|
5892
|
-
});
|
|
5908
|
+
}, ...(ngDevMode ? [{ debugName: "_" }] : []));
|
|
5893
5909
|
const $currentPage = state.$currentPage;
|
|
5894
5910
|
const $pageSize = state.$pageSize;
|
|
5895
5911
|
const $virtualEnds = data.selectSignal(d => d.virtualEnds);
|
|
5896
|
-
const $dataLength = computed(() => this.#$dataSrc().length);
|
|
5912
|
+
const $dataLength = computed(() => this.#$dataSrc().length, ...(ngDevMode ? [{ debugName: "$dataLength" }] : []));
|
|
5897
5913
|
this.$dataSize = computed(() => {
|
|
5898
5914
|
const viewType = state.$viewType();
|
|
5899
5915
|
const dataLength = $dataLength();
|
|
@@ -5911,7 +5927,7 @@ class TableBuilderDataSource extends MatTableDataSource {
|
|
|
5911
5927
|
return ({ start: 0, end: dataLength });
|
|
5912
5928
|
}
|
|
5913
5929
|
return ({ start: virtualEnds.start, end: virtualEnds.end });
|
|
5914
|
-
});
|
|
5930
|
+
}, ...(ngDevMode ? [{ debugName: "$dataSize" }] : []));
|
|
5915
5931
|
}
|
|
5916
5932
|
connect() {
|
|
5917
5933
|
return super.connect();
|
|
@@ -5954,12 +5970,12 @@ class GroupByListComponent {
|
|
|
5954
5970
|
name: dict[gbk.key].displayName || gbk.key,
|
|
5955
5971
|
sort: this.tableStore.getGroupBySortDirection(gbk.key)(),
|
|
5956
5972
|
}));
|
|
5957
|
-
});
|
|
5973
|
+
}, ...(ngDevMode ? [{ debugName: "$groups" }] : []));
|
|
5958
5974
|
}
|
|
5959
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5960
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
5975
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: GroupByListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5976
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.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 }); }
|
|
5961
5977
|
}
|
|
5962
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5978
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: GroupByListComponent, decorators: [{
|
|
5963
5979
|
type: Component,
|
|
5964
5980
|
args: [{ selector: 'group-by-list', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
5965
5981
|
MatChipsModule, MatIconModule, SpaceCasePipe, StopPropagationDirective
|
|
@@ -5970,15 +5986,15 @@ class ProfilesMenuComponent {
|
|
|
5970
5986
|
constructor() {
|
|
5971
5987
|
this.stateService = inject(TableBuilderStateStore);
|
|
5972
5988
|
this.tableStore = inject(TableStore);
|
|
5973
|
-
this.$tableId = input.required({ alias: 'tableId' });
|
|
5974
|
-
this.$isMatMenuChild = input(false, { alias: 'isMatMenuChild' });
|
|
5975
|
-
this.trigger = viewChild('trigger');
|
|
5989
|
+
this.$tableId = input.required(...(ngDevMode ? [{ debugName: "$tableId", alias: 'tableId' }] : [{ alias: 'tableId' }]));
|
|
5990
|
+
this.$isMatMenuChild = input(false, ...(ngDevMode ? [{ debugName: "$isMatMenuChild", alias: 'isMatMenuChild' }] : [{ alias: 'isMatMenuChild' }]));
|
|
5991
|
+
this.trigger = viewChild('trigger', ...(ngDevMode ? [{ debugName: "trigger" }] : []));
|
|
5976
5992
|
this.menu = viewChild.required(MatMenu);
|
|
5977
|
-
this.allProfilesPanelOpened = signal(false);
|
|
5978
|
-
this.newProfilePanelOpened = signal(false);
|
|
5979
|
-
this.$currentProfile = computed(() => this.stateService.$selectLocalProfileCurrentKey(this.$tableId())());
|
|
5980
|
-
this.$defaultProfile = computed(() => this.stateService.$selectLocalProfileDefaultKey(this.$tableId())());
|
|
5981
|
-
this.$keys = computed(() => this.stateService.$selectLocalProfileKeys(this.$tableId())());
|
|
5993
|
+
this.allProfilesPanelOpened = signal(false, ...(ngDevMode ? [{ debugName: "allProfilesPanelOpened" }] : []));
|
|
5994
|
+
this.newProfilePanelOpened = signal(false, ...(ngDevMode ? [{ debugName: "newProfilePanelOpened" }] : []));
|
|
5995
|
+
this.$currentProfile = computed(() => this.stateService.$selectLocalProfileCurrentKey(this.$tableId())(), ...(ngDevMode ? [{ debugName: "$currentProfile" }] : []));
|
|
5996
|
+
this.$defaultProfile = computed(() => this.stateService.$selectLocalProfileDefaultKey(this.$tableId())(), ...(ngDevMode ? [{ debugName: "$defaultProfile" }] : []));
|
|
5997
|
+
this.$keys = computed(() => this.stateService.$selectLocalProfileKeys(this.$tableId())(), ...(ngDevMode ? [{ debugName: "$keys" }] : []));
|
|
5982
5998
|
this.defaultName = 'My Profile';
|
|
5983
5999
|
this.position$ = new Subject();
|
|
5984
6000
|
this.setPosition = (e) => {
|
|
@@ -6006,15 +6022,15 @@ class ProfilesMenuComponent {
|
|
|
6006
6022
|
unsetDefault() {
|
|
6007
6023
|
this.stateService.unsetDefaultFromLocalAndStorage(this.$tableId());
|
|
6008
6024
|
}
|
|
6009
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
6010
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
6025
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ProfilesMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6026
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.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 }); }
|
|
6011
6027
|
}
|
|
6012
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
6028
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ProfilesMenuComponent, decorators: [{
|
|
6013
6029
|
type: Component,
|
|
6014
6030
|
args: [{ selector: 'tb-profiles-menu', imports: [MatIcon, MatTooltip, MatIconButton, MatMenuModule, MatButton, MatInput,
|
|
6015
6031
|
MatCheckbox, StopPropagationDirective, MatInputModule, FormsModule
|
|
6016
6032
|
], changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
|
|
6017
|
-
}] });
|
|
6033
|
+
}], propDecorators: { $tableId: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableId", required: true }] }], $isMatMenuChild: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMatMenuChild", required: false }] }], trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], menu: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatMenu), { isSignal: true }] }] } });
|
|
6018
6034
|
|
|
6019
6035
|
class SortMenuComponentStore extends ComponentStore {
|
|
6020
6036
|
constructor() {
|
|
@@ -6026,7 +6042,7 @@ class SortMenuComponentStore extends ComponentStore {
|
|
|
6026
6042
|
return;
|
|
6027
6043
|
this.tableState.$selectSorted();
|
|
6028
6044
|
untracked(() => this.setStateFromTableStore());
|
|
6029
|
-
});
|
|
6045
|
+
}, ...(ngDevMode ? [{ debugName: "setStoreStateEffect" }] : []));
|
|
6030
6046
|
this.setStateFromTableStore = () => {
|
|
6031
6047
|
const metaData = this.tableState.$metaData();
|
|
6032
6048
|
const sorted = [...this.tableState.$selectSorted()].map(s => ({
|
|
@@ -6052,10 +6068,10 @@ class SortMenuComponentStore extends ComponentStore {
|
|
|
6052
6068
|
this.setStateFromTableStore();
|
|
6053
6069
|
};
|
|
6054
6070
|
}
|
|
6055
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
6056
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
6071
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SortMenuComponentStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
6072
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SortMenuComponentStore }); }
|
|
6057
6073
|
}
|
|
6058
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
6074
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SortMenuComponentStore, decorators: [{
|
|
6059
6075
|
type: Injectable
|
|
6060
6076
|
}], ctorParameters: () => [] });
|
|
6061
6077
|
|
|
@@ -6064,9 +6080,9 @@ class SortMenuComponent {
|
|
|
6064
6080
|
this.SortDirection = SortDirection;
|
|
6065
6081
|
this.tableState = inject(TableStore);
|
|
6066
6082
|
this.store = inject(SortMenuComponentStore);
|
|
6067
|
-
this.$sorted = computed(() => [...this.store.$sorted()]);
|
|
6068
|
-
this.$notSorted = computed(() => [...this.store.$notSorted()]);
|
|
6069
|
-
this.$dirty = signal(false);
|
|
6083
|
+
this.$sorted = computed(() => [...this.store.$sorted()], ...(ngDevMode ? [{ debugName: "$sorted" }] : []));
|
|
6084
|
+
this.$notSorted = computed(() => [...this.store.$notSorted()], ...(ngDevMode ? [{ debugName: "$notSorted" }] : []));
|
|
6085
|
+
this.$dirty = signal(false, ...(ngDevMode ? [{ debugName: "$dirty" }] : []));
|
|
6070
6086
|
this.apply = () => {
|
|
6071
6087
|
this.$dirty.set(false);
|
|
6072
6088
|
this.tableState.setAllSort(this.store.$sorted());
|
|
@@ -6109,10 +6125,10 @@ class SortMenuComponent {
|
|
|
6109
6125
|
this.$dirty.set(true);
|
|
6110
6126
|
this.store.setDirection(sort);
|
|
6111
6127
|
}
|
|
6112
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
6113
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
6128
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SortMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6129
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.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 }); }
|
|
6114
6130
|
}
|
|
6115
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
6131
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SortMenuComponent, decorators: [{
|
|
6116
6132
|
type: Component,
|
|
6117
6133
|
args: [{ selector: 'tb-sort-menu', providers: [SortMenuComponentStore], changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
6118
6134
|
MatTooltipModule, MatButtonModule, MatIconModule, MatMenuModule, StopPropagationDirective, DragDropModule,
|
|
@@ -6130,7 +6146,7 @@ class ResetMenuComponent {
|
|
|
6130
6146
|
return Object.values(this.state.$filters())
|
|
6131
6147
|
.filter(f => (isCustomFilter(f) && f.active) || f.filterValue != undefined)
|
|
6132
6148
|
.length;
|
|
6133
|
-
});
|
|
6149
|
+
}, ...(ngDevMode ? [{ debugName: "$filtersSet" }] : []));
|
|
6134
6150
|
this.$sortSet = computed(() => {
|
|
6135
6151
|
const sorts = this.state.$selectSorted();
|
|
6136
6152
|
if (!sorts.length)
|
|
@@ -6139,14 +6155,14 @@ class ResetMenuComponent {
|
|
|
6139
6155
|
if (!preSorts.length)
|
|
6140
6156
|
return true;
|
|
6141
6157
|
return !sortsAreSame(preSorts, sorts);
|
|
6142
|
-
});
|
|
6143
|
-
this.$groupBySet = computed(() => this.state.$groupByData().length || this.state.$userDefinedNoGroups());
|
|
6144
|
-
this.$hiddenSet = computed(() => this.state.$hiddenKeys().length);
|
|
6145
|
-
this.$orderSet = computed(() => Object.keys(this.state.$userDefinedOrder()).length);
|
|
6146
|
-
this.$widthsSet = computed(() => Object.keys(this.state.$getUserDefinedWidths()).length);
|
|
6158
|
+
}, ...(ngDevMode ? [{ debugName: "$sortSet" }] : []));
|
|
6159
|
+
this.$groupBySet = computed(() => this.state.$groupByData().length || this.state.$userDefinedNoGroups(), ...(ngDevMode ? [{ debugName: "$groupBySet" }] : []));
|
|
6160
|
+
this.$hiddenSet = computed(() => this.state.$hiddenKeys().length, ...(ngDevMode ? [{ debugName: "$hiddenSet" }] : []));
|
|
6161
|
+
this.$orderSet = computed(() => Object.keys(this.state.$userDefinedOrder()).length, ...(ngDevMode ? [{ debugName: "$orderSet" }] : []));
|
|
6162
|
+
this.$widthsSet = computed(() => Object.keys(this.state.$getUserDefinedWidths()).length, ...(ngDevMode ? [{ debugName: "$widthsSet" }] : []));
|
|
6147
6163
|
this.$rowHeightSet = this.state.$userDefinedRowHeight;
|
|
6148
6164
|
this.headerHeightSet = this.state.$userDefinedHeaderHeight;
|
|
6149
|
-
this.pageSizeSet = computed(() => this.state.$userDefinedPageSize() && this.state.$userDefinedPageSize() !== this.state.selectSignal(s => s.pageSize)());
|
|
6165
|
+
this.pageSizeSet = computed(() => this.state.$userDefinedPageSize() && this.state.$userDefinedPageSize() !== this.state.selectSignal(s => s.pageSize)(), ...(ngDevMode ? [{ debugName: "pageSizeSet" }] : []));
|
|
6150
6166
|
this.showAllSet = this.state.selectSignal(s => s.userDefined.showAll);
|
|
6151
6167
|
this.$set = computed(() => {
|
|
6152
6168
|
const arr = [];
|
|
@@ -6181,7 +6197,7 @@ class ResetMenuComponent {
|
|
|
6181
6197
|
arr.push('Show All');
|
|
6182
6198
|
}
|
|
6183
6199
|
return arr;
|
|
6184
|
-
});
|
|
6200
|
+
}, ...(ngDevMode ? [{ debugName: "$set" }] : []));
|
|
6185
6201
|
this.resetable = resetable;
|
|
6186
6202
|
}
|
|
6187
6203
|
resetState() {
|
|
@@ -6193,13 +6209,13 @@ class ResetMenuComponent {
|
|
|
6193
6209
|
reset(s) {
|
|
6194
6210
|
this.state.resetPart(s);
|
|
6195
6211
|
}
|
|
6196
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
6197
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
6212
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ResetMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6213
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.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 }); }
|
|
6198
6214
|
}
|
|
6199
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
6215
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ResetMenuComponent, decorators: [{
|
|
6200
6216
|
type: Component,
|
|
6201
6217
|
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"] }]
|
|
6202
|
-
}] });
|
|
6218
|
+
}], propDecorators: { menu: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatMenu), { isSignal: true }] }], onStateReset$: [{ type: i0.Output, args: ["onStateReset"] }] } });
|
|
6203
6219
|
|
|
6204
6220
|
class TableHeaderMenuComponent {
|
|
6205
6221
|
constructor() {
|
|
@@ -6207,8 +6223,8 @@ class TableHeaderMenuComponent {
|
|
|
6207
6223
|
this.exportToCsvService = inject(ExportToCsvService);
|
|
6208
6224
|
this.tableContainer = inject(TableContainerComponent);
|
|
6209
6225
|
this.state = this.tableContainer.state;
|
|
6210
|
-
this.$rowHeightNum = computed(() => +(this.tableContainer.$genericTable()?.$rowHeight()?.replace('px', '') || 0) || undefined);
|
|
6211
|
-
this.$headerHeightNum = computed(() => +(this.tableContainer.$genericTable()?.$headerHeight()?.replace('px', '') || 0) || undefined);
|
|
6226
|
+
this.$rowHeightNum = computed(() => +(this.tableContainer.$genericTable()?.$rowHeight()?.replace('px', '') || 0) || undefined, ...(ngDevMode ? [{ debugName: "$rowHeightNum" }] : []));
|
|
6227
|
+
this.$headerHeightNum = computed(() => +(this.tableContainer.$genericTable()?.$headerHeight()?.replace('px', '') || 0) || undefined, ...(ngDevMode ? [{ debugName: "$headerHeightNum" }] : []));
|
|
6212
6228
|
}
|
|
6213
6229
|
exportToCsv() {
|
|
6214
6230
|
this.exportToCsvService.exportToCsv(this.tableContainer.$data());
|
|
@@ -6223,32 +6239,37 @@ class TableHeaderMenuComponent {
|
|
|
6223
6239
|
if (v === 'header')
|
|
6224
6240
|
this.state.setUserDefinedHeaderHeight(+element.value);
|
|
6225
6241
|
}
|
|
6226
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
6227
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
6242
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TableHeaderMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6243
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.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 }); }
|
|
6228
6244
|
}
|
|
6229
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
6245
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TableHeaderMenuComponent, decorators: [{
|
|
6230
6246
|
type: Component,
|
|
6231
6247
|
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"] }]
|
|
6232
|
-
}] });
|
|
6248
|
+
}], propDecorators: { menu: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatMenu), { isSignal: true }] }] } });
|
|
6233
6249
|
|
|
6234
6250
|
class TableVirtualScrollStrategy {
|
|
6235
6251
|
constructor(scrollContainer, dataStore) {
|
|
6236
6252
|
this.indexChange = new Subject();
|
|
6237
6253
|
this.scrolledIndexChange = this.indexChange.pipe(distinctUntilChanged());
|
|
6238
|
-
this.$dataLengthChange = linkedSignal({
|
|
6239
|
-
|
|
6240
|
-
|
|
6241
|
-
|
|
6242
|
-
|
|
6243
|
-
|
|
6244
|
-
|
|
6245
|
-
|
|
6246
|
-
|
|
6247
|
-
|
|
6248
|
-
|
|
6249
|
-
|
|
6250
|
-
|
|
6251
|
-
|
|
6254
|
+
this.$dataLengthChange = linkedSignal(...(ngDevMode ? [{ debugName: "$dataLengthChange", source: () => this.$dataLength(),
|
|
6255
|
+
computation: (curr, previous) => ({ curr, previous: previous == undefined ? curr : previous.source }) }] : [{
|
|
6256
|
+
source: () => this.$dataLength(),
|
|
6257
|
+
computation: (curr, previous) => ({ curr, previous: previous == undefined ? curr : previous.source })
|
|
6258
|
+
}]));
|
|
6259
|
+
this.$rowHeightChange = linkedSignal(...(ngDevMode ? [{ debugName: "$rowHeightChange", source: () => this.$rowHeight(),
|
|
6260
|
+
computation: (curr, previous) => {
|
|
6261
|
+
return ({ curr, previous: previous == undefined ? curr : previous.source });
|
|
6262
|
+
} }] : [{
|
|
6263
|
+
source: () => this.$rowHeight(),
|
|
6264
|
+
computation: (curr, previous) => {
|
|
6265
|
+
return ({ curr, previous: previous == undefined ? curr : previous.source });
|
|
6266
|
+
}
|
|
6267
|
+
}]));
|
|
6268
|
+
this.$headerHeightChange = linkedSignal(...(ngDevMode ? [{ debugName: "$headerHeightChange", source: () => this.$headerHeight(),
|
|
6269
|
+
computation: (curr, previous) => ({ curr, previous: previous == undefined ? curr : previous.source }) }] : [{
|
|
6270
|
+
source: () => this.$headerHeight(),
|
|
6271
|
+
computation: (curr, previous) => ({ curr, previous: previous == undefined ? curr : previous.source })
|
|
6272
|
+
}]));
|
|
6252
6273
|
this.contentScrolled$ = new Subject();
|
|
6253
6274
|
this.sub = subscriber(this.contentScrolled$.pipe(debounceTime(20), distinctUntilChanged()), offset => {
|
|
6254
6275
|
this.updateContent('scroll');
|
|
@@ -6260,7 +6281,7 @@ class TableVirtualScrollStrategy {
|
|
|
6260
6281
|
return;
|
|
6261
6282
|
this.updateContent('data length');
|
|
6262
6283
|
});
|
|
6263
|
-
});
|
|
6284
|
+
}, ...(ngDevMode ? [{ debugName: "#onDataLengthChange" }] : []));
|
|
6264
6285
|
this.#onHeaderChange = effect(() => {
|
|
6265
6286
|
const headerHeightChange = this.$headerHeightChange();
|
|
6266
6287
|
untracked(() => {
|
|
@@ -6268,7 +6289,7 @@ class TableVirtualScrollStrategy {
|
|
|
6268
6289
|
return;
|
|
6269
6290
|
this.updateContent('header height');
|
|
6270
6291
|
});
|
|
6271
|
-
});
|
|
6292
|
+
}, ...(ngDevMode ? [{ debugName: "#onHeaderChange" }] : []));
|
|
6272
6293
|
this.#onRowChange = effect(() => {
|
|
6273
6294
|
const rowHeightChange = this.$rowHeightChange();
|
|
6274
6295
|
untracked(() => {
|
|
@@ -6276,8 +6297,8 @@ class TableVirtualScrollStrategy {
|
|
|
6276
6297
|
return;
|
|
6277
6298
|
this.updateContent('row height');
|
|
6278
6299
|
});
|
|
6279
|
-
});
|
|
6280
|
-
this.$currentRange = signal({ start: 0, end: 0 });
|
|
6300
|
+
}, ...(ngDevMode ? [{ debugName: "#onRowChange" }] : []));
|
|
6301
|
+
this.$currentRange = signal({ start: 0, end: 0 }, ...(ngDevMode ? [{ debugName: "$currentRange" }] : []));
|
|
6281
6302
|
this.$rowHeight = scrollContainer.computedRowHeight;
|
|
6282
6303
|
this.$headerHeight = scrollContainer.computedHeaderHeight;
|
|
6283
6304
|
this.viewport = scrollContainer.viewport;
|
|
@@ -6351,7 +6372,7 @@ class VirtualScrollContainer {
|
|
|
6351
6372
|
this.state = inject(TableStore);
|
|
6352
6373
|
this.dataStore = inject(DataStore);
|
|
6353
6374
|
this.viewport = viewChild.required(CdkVirtualScrollViewport);
|
|
6354
|
-
this.genericTable = contentChild(GenericTableComponent);
|
|
6375
|
+
this.genericTable = contentChild(GenericTableComponent, ...(ngDevMode ? [{ debugName: "genericTable" }] : []));
|
|
6355
6376
|
this.tableContainer = inject(TableContainerComponent);
|
|
6356
6377
|
this.defaultOptions = new VirtualScrollOptions();
|
|
6357
6378
|
this.$usePaginator = this.state.selectSignal(s => s.notPersistedTableSettings.usePaginator);
|
|
@@ -6367,8 +6388,8 @@ class VirtualScrollContainer {
|
|
|
6367
6388
|
return this.state.$tableSettings().virtualSettings;
|
|
6368
6389
|
else
|
|
6369
6390
|
return undefined;
|
|
6370
|
-
});
|
|
6371
|
-
this.$optionsSet = computed(() => !!this.$virtualScrollOptions());
|
|
6391
|
+
}, ...(ngDevMode ? [{ debugName: "$virtualScrollOptions" }] : []));
|
|
6392
|
+
this.$optionsSet = computed(() => !!this.$virtualScrollOptions(), ...(ngDevMode ? [{ debugName: "$optionsSet" }] : []));
|
|
6372
6393
|
this.$dataLength = computed(() => {
|
|
6373
6394
|
const paginated = this.$usePaginator() && !this.$showAll();
|
|
6374
6395
|
const pageSize = this.$pageSize();
|
|
@@ -6377,7 +6398,7 @@ class VirtualScrollContainer {
|
|
|
6377
6398
|
if (paginated)
|
|
6378
6399
|
return Math.min(dataLen - (pageNumber * pageSize), pageSize);
|
|
6379
6400
|
return dataLen;
|
|
6380
|
-
});
|
|
6401
|
+
}, ...(ngDevMode ? [{ debugName: "$dataLength" }] : []));
|
|
6381
6402
|
this.#setViewportEffect = effect(() => {
|
|
6382
6403
|
const viewport = this.viewport();
|
|
6383
6404
|
const options = this.$optionsSet();
|
|
@@ -6386,7 +6407,7 @@ class VirtualScrollContainer {
|
|
|
6386
6407
|
this.setSize(this.viewport().elementRef, 'initial');
|
|
6387
6408
|
}
|
|
6388
6409
|
});
|
|
6389
|
-
});
|
|
6410
|
+
}, ...(ngDevMode ? [{ debugName: "#setViewportEffect" }] : []));
|
|
6390
6411
|
this.#onRenderedRangeEffect = effect(() => {
|
|
6391
6412
|
const renderedRange = this.$renderedRange();
|
|
6392
6413
|
const viewport = this.viewport();
|
|
@@ -6403,7 +6424,7 @@ class VirtualScrollContainer {
|
|
|
6403
6424
|
return;
|
|
6404
6425
|
this.setSize(viewport.elementRef, 'rendered range');
|
|
6405
6426
|
});
|
|
6406
|
-
});
|
|
6427
|
+
}, ...(ngDevMode ? [{ debugName: "#onRenderedRangeEffect" }] : []));
|
|
6407
6428
|
this.resizeHandler = () => {
|
|
6408
6429
|
if (this.viewport() && this.$virtualScrollOptions()?.dynamicHeight) {
|
|
6409
6430
|
this.setSize(this.viewport().elementRef, 'resize');
|
|
@@ -6413,23 +6434,23 @@ class VirtualScrollContainer {
|
|
|
6413
6434
|
const virtualScrollOptions = this.state.$tableSettings().virtualSettings;
|
|
6414
6435
|
const rowHeight = this.state.$userDefinedRowHeight() || virtualScrollOptions?.rowHeight || this.state.$tableSettings().rowHeight || this.defaultOptions.rowHeight;
|
|
6415
6436
|
return parseTbSizeToPixels(rowHeight) || 0;
|
|
6416
|
-
});
|
|
6437
|
+
}, ...(ngDevMode ? [{ debugName: "computedRowHeight" }] : []));
|
|
6417
6438
|
this.computedHeaderHeight = computed(() => {
|
|
6418
6439
|
if (this.state.$tableSettings().hideHeader)
|
|
6419
6440
|
return 0;
|
|
6420
6441
|
const virtualScrollOptions = this.state.$tableSettings().virtualSettings;
|
|
6421
6442
|
const headerHeight = this.state.$userDefinedHeaderHeight() || virtualScrollOptions?.headerHeight || this.state.$tableSettings().headerHeight || this.defaultOptions.headerHeight;
|
|
6422
6443
|
return parseTbSizeToPixels(headerHeight) || 0;
|
|
6423
|
-
});
|
|
6444
|
+
}, ...(ngDevMode ? [{ debugName: "computedHeaderHeight" }] : []));
|
|
6424
6445
|
this.computedFooterHeight = computed(() => {
|
|
6425
6446
|
return parseFloat(this.genericTable()?.$footerHeight()?.replace('px', '') || '0');
|
|
6426
|
-
});
|
|
6447
|
+
}, ...(ngDevMode ? [{ debugName: "computedFooterHeight" }] : []));
|
|
6427
6448
|
this.computedBuffer = computed(() => {
|
|
6428
6449
|
const virtualScrollOptions = this.state.$tableSettings().virtualSettings;
|
|
6429
6450
|
if (!virtualScrollOptions.dynamicalHeightBuffer)
|
|
6430
6451
|
return 0;
|
|
6431
6452
|
return parseTbSizeToPixels(virtualScrollOptions.dynamicalHeightBuffer) || 0;
|
|
6432
|
-
});
|
|
6453
|
+
}, ...(ngDevMode ? [{ debugName: "computedBuffer" }] : []));
|
|
6433
6454
|
this.scrollStrategy = new TableVirtualScrollStrategy(this, this.dataStore);
|
|
6434
6455
|
addEventListener('resize', this.resizeHandler);
|
|
6435
6456
|
}
|
|
@@ -6495,8 +6516,8 @@ class VirtualScrollContainer {
|
|
|
6495
6516
|
const virtualScrollOffset = this.viewport()?.getOffsetToRenderedContentStart() ?? 0;
|
|
6496
6517
|
this.dataStore.patchState({ virtualScrollOffset });
|
|
6497
6518
|
}
|
|
6498
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
6499
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "
|
|
6519
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: VirtualScrollContainer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6520
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.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: `
|
|
6500
6521
|
<cdk-virtual-scroll-viewport>
|
|
6501
6522
|
<ng-content/>
|
|
6502
6523
|
</cdk-virtual-scroll-viewport>
|
|
@@ -6508,7 +6529,7 @@ class VirtualScrollContainer {
|
|
|
6508
6529
|
},
|
|
6509
6530
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6510
6531
|
}
|
|
6511
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
6532
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: VirtualScrollContainer, decorators: [{
|
|
6512
6533
|
type: Component,
|
|
6513
6534
|
args: [{
|
|
6514
6535
|
selector: 'tb-virtual-scroll-container',
|
|
@@ -6527,7 +6548,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImpor
|
|
|
6527
6548
|
},
|
|
6528
6549
|
],
|
|
6529
6550
|
}]
|
|
6530
|
-
}], ctorParameters: () => [] });
|
|
6551
|
+
}], ctorParameters: () => [], propDecorators: { viewport: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkVirtualScrollViewport), { isSignal: true }] }], genericTable: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GenericTableComponent), { isSignal: true }] }] } });
|
|
6531
6552
|
|
|
6532
6553
|
class TableContainerComponent {
|
|
6533
6554
|
constructor() {
|
|
@@ -6540,45 +6561,45 @@ class TableContainerComponent {
|
|
|
6540
6561
|
this.exportToCsvService = inject(ExportToCsvService);
|
|
6541
6562
|
this.config = inject(TableBuilderConfigToken);
|
|
6542
6563
|
this.dataSource = new TableBuilderDataSource(this.state, this.dataStore);
|
|
6543
|
-
this.$filterDirectives = contentChildren(TableFilterDirective, { descendants: true });
|
|
6544
|
-
this.$customFilterDirectives = contentChildren(TableCustomFilterDirective, { descendants: true });
|
|
6545
|
-
this.$paginatorComponent = viewChild(PaginatorComponent);
|
|
6546
|
-
this.$paginatorWrapper = viewChild('paginatorWrapper');
|
|
6547
|
-
this.$genericTable = viewChild(GenericTableComponent);
|
|
6548
|
-
this._$customRows = contentChildren((MatRowDef));
|
|
6549
|
-
this.$customRows = computed(() => [...this._$customRows()]);
|
|
6550
|
-
this.$customCells = contentChildren(CustomCellDirective);
|
|
6551
|
-
this.$customGroupRows = contentChildren(CustomGroupRowDirective);
|
|
6564
|
+
this.$filterDirectives = contentChildren(TableFilterDirective, ...(ngDevMode ? [{ debugName: "$filterDirectives", descendants: true }] : [{ descendants: true }]));
|
|
6565
|
+
this.$customFilterDirectives = contentChildren(TableCustomFilterDirective, ...(ngDevMode ? [{ debugName: "$customFilterDirectives", descendants: true }] : [{ descendants: true }]));
|
|
6566
|
+
this.$paginatorComponent = viewChild(PaginatorComponent, ...(ngDevMode ? [{ debugName: "$paginatorComponent" }] : []));
|
|
6567
|
+
this.$paginatorWrapper = viewChild('paginatorWrapper', ...(ngDevMode ? [{ debugName: "$paginatorWrapper" }] : []));
|
|
6568
|
+
this.$genericTable = viewChild(GenericTableComponent, ...(ngDevMode ? [{ debugName: "$genericTable" }] : []));
|
|
6569
|
+
this._$customRows = contentChildren((MatRowDef), ...(ngDevMode ? [{ debugName: "_$customRows" }] : []));
|
|
6570
|
+
this.$customRows = computed(() => [...this._$customRows()], ...(ngDevMode ? [{ debugName: "$customRows" }] : []));
|
|
6571
|
+
this.$customCells = contentChildren(CustomCellDirective, ...(ngDevMode ? [{ debugName: "$customCells" }] : []));
|
|
6572
|
+
this.$customGroupRows = contentChildren(CustomGroupRowDirective, ...(ngDevMode ? [{ debugName: "$customGroupRows" }] : []));
|
|
6552
6573
|
this.$menu = viewChild.required(MatMenu);
|
|
6553
6574
|
this.menuInjector = Injector.create({
|
|
6554
6575
|
providers: [{ provide: MatMenu, useFactory: () => this.$menu() }],
|
|
6555
6576
|
parent: this.injector
|
|
6556
6577
|
});
|
|
6557
|
-
this.$tableBuilder = input.required({ alias: 'tableBuilder' });
|
|
6558
|
-
this.$tableIdInput = input(undefined, { alias: 'tableId' });
|
|
6559
|
-
this.$trackByInput = input(undefined, { alias: 'trackBy' });
|
|
6560
|
-
this.$inputFilters = input([], { alias: 'inputFilters' });
|
|
6561
|
-
this.$filterInfoInputs = computed(() => this.$inputFilters().filter(i => !isFunction(i)));
|
|
6562
|
-
this.$indexColumnInput = input(false, { alias: 'indexColumn' });
|
|
6563
|
-
this.$selectionColumnInput = input(false, { alias: 'selectionColumn' });
|
|
6564
|
-
this.$stickyHeaderInput = input(true, { alias: 'stickyHeader' });
|
|
6565
|
-
this.$stickyFooterInput = input(false, { alias: 'stickyFooter' });
|
|
6566
|
-
this.$groupHeaderTemplate = input(undefined, { alias: 'groupHeaderTemplate' });
|
|
6567
|
-
this.$groupHeaderHeight = input(undefined, { alias: 'groupHeaderHeight' });
|
|
6568
|
-
this.$pageSize = input(undefined, { alias: 'pageSize' });
|
|
6578
|
+
this.$tableBuilder = input.required(...(ngDevMode ? [{ debugName: "$tableBuilder", alias: 'tableBuilder' }] : [{ alias: 'tableBuilder' }]));
|
|
6579
|
+
this.$tableIdInput = input(undefined, ...(ngDevMode ? [{ debugName: "$tableIdInput", alias: 'tableId' }] : [{ alias: 'tableId' }]));
|
|
6580
|
+
this.$trackByInput = input(undefined, ...(ngDevMode ? [{ debugName: "$trackByInput", alias: 'trackBy' }] : [{ alias: 'trackBy' }]));
|
|
6581
|
+
this.$inputFilters = input([], ...(ngDevMode ? [{ debugName: "$inputFilters", alias: 'inputFilters' }] : [{ alias: 'inputFilters' }]));
|
|
6582
|
+
this.$filterInfoInputs = computed(() => this.$inputFilters().filter(i => !isFunction(i)), ...(ngDevMode ? [{ debugName: "$filterInfoInputs" }] : []));
|
|
6583
|
+
this.$indexColumnInput = input(false, ...(ngDevMode ? [{ debugName: "$indexColumnInput", alias: 'indexColumn' }] : [{ alias: 'indexColumn' }]));
|
|
6584
|
+
this.$selectionColumnInput = input(false, ...(ngDevMode ? [{ debugName: "$selectionColumnInput", alias: 'selectionColumn' }] : [{ alias: 'selectionColumn' }]));
|
|
6585
|
+
this.$stickyHeaderInput = input(true, ...(ngDevMode ? [{ debugName: "$stickyHeaderInput", alias: 'stickyHeader' }] : [{ alias: 'stickyHeader' }]));
|
|
6586
|
+
this.$stickyFooterInput = input(false, ...(ngDevMode ? [{ debugName: "$stickyFooterInput", alias: 'stickyFooter' }] : [{ alias: 'stickyFooter' }]));
|
|
6587
|
+
this.$groupHeaderTemplate = input(undefined, ...(ngDevMode ? [{ debugName: "$groupHeaderTemplate", alias: 'groupHeaderTemplate' }] : [{ alias: 'groupHeaderTemplate' }]));
|
|
6588
|
+
this.$groupHeaderHeight = input(undefined, ...(ngDevMode ? [{ debugName: "$groupHeaderHeight", alias: 'groupHeaderHeight' }] : [{ alias: 'groupHeaderHeight' }]));
|
|
6589
|
+
this.$pageSize = input(undefined, ...(ngDevMode ? [{ debugName: "$pageSize", alias: 'pageSize' }] : [{ alias: 'pageSize' }]));
|
|
6569
6590
|
this._selection$ = new BehaviorSubject(null);
|
|
6570
6591
|
this.selection$ = outputFromObservable(this._selection$.pipe(notNull()), { alias: 'selection' });
|
|
6571
6592
|
this.onStateReset$ = output({ alias: 'onStateReset' });
|
|
6572
6593
|
this.onSaveState$ = output({ alias: 'onSaveState' });
|
|
6573
6594
|
this.state$ = outputFromObservable(toObservable(this.state.$savableState), { alias: 'state' });
|
|
6574
|
-
this.$data = computed(() => this.$sortedAndFilteredData()?.value || []);
|
|
6595
|
+
this.$data = computed(() => this.$sortedAndFilteredData()?.value || [], ...(ngDevMode ? [{ debugName: "$data" }] : []));
|
|
6575
6596
|
this.data$ = outputFromObservable(toObservable(this.$data), { alias: 'data' });
|
|
6576
6597
|
/**
|
|
6577
6598
|
* Will be different than $data if grouping is applied
|
|
6578
6599
|
*/
|
|
6579
|
-
this.$sortedAndFilteredAndGroupedData = computed(() => this.$filteredSortedAndGrouped()?.displayData || []);
|
|
6600
|
+
this.$sortedAndFilteredAndGroupedData = computed(() => this.$filteredSortedAndGrouped()?.displayData || [], ...(ngDevMode ? [{ debugName: "$sortedAndFilteredAndGroupedData" }] : []));
|
|
6580
6601
|
this.sortedAndFilteredAndGroupedData$ = outputFromObservable(toObservable(this.$sortedAndFilteredAndGroupedData), { alias: 'sortedAndFilteredAndGroupedData' });
|
|
6581
|
-
this.$displayData = computed(() => this.$tableBuilder() && this.$filteredSortedAndGrouped()?.displayData);
|
|
6602
|
+
this.$displayData = computed(() => this.$tableBuilder() && this.$filteredSortedAndGrouped()?.displayData, ...(ngDevMode ? [{ debugName: "$displayData" }] : []));
|
|
6582
6603
|
this.expandAllGroups = () => {
|
|
6583
6604
|
const groupHeaders = getAllGroupHeaderNames(this.$displayData());
|
|
6584
6605
|
this.state.expandOfGroup(groupHeaders.map(g => ({ groupKey: g.groupKey, uniqueNameOfHeadersToExpand: g.headers })));
|
|
@@ -6594,24 +6615,24 @@ class TableContainerComponent {
|
|
|
6594
6615
|
metaData,
|
|
6595
6616
|
customCell: this.$customCells().filter(cc => cc.$inited()).find(cc => cc.$customCell() === metaData.key)
|
|
6596
6617
|
}));
|
|
6597
|
-
});
|
|
6618
|
+
}, ...(ngDevMode ? [{ debugName: "$myColumns" }] : []));
|
|
6598
6619
|
this.$useVirtual = this.state.$isVirtual;
|
|
6599
6620
|
this.$collapsedFooter = this.state.$footerCollapsed;
|
|
6600
6621
|
this.$collapsedHeader = this.state.$headerCollapsed;
|
|
6601
|
-
this.$displayDataLength = computed(() => this.$displayData()?.length || 0);
|
|
6602
|
-
this.$tableBuilderSettings = computed(() => this.$tableBuilder().$settings());
|
|
6603
|
-
this.$trackBy = computed(() => this.$trackByInput() || this.$tableBuilderSettings()?.tableSettings?.trackBy);
|
|
6604
|
-
this.$tableId = computed(() => this.$tableIdInput() || this.$tableBuilderSettings()?.tableSettings?.tableId);
|
|
6605
|
-
this.$includeSelectionColumn = computed(() => this.$selectionColumnInput() || !!this.$tableBuilderSettings()?.tableSettings?.includeSelectionColumn);
|
|
6606
|
-
this.$includeIndexColumn = computed(() => this.$indexColumnInput() || !!this.$tableBuilderSettings()?.tableSettings?.includeIndexColumn);
|
|
6622
|
+
this.$displayDataLength = computed(() => this.$displayData()?.length || 0, ...(ngDevMode ? [{ debugName: "$displayDataLength" }] : []));
|
|
6623
|
+
this.$tableBuilderSettings = computed(() => this.$tableBuilder().$settings(), ...(ngDevMode ? [{ debugName: "$tableBuilderSettings" }] : []));
|
|
6624
|
+
this.$trackBy = computed(() => this.$trackByInput() || this.$tableBuilderSettings()?.tableSettings?.trackBy, ...(ngDevMode ? [{ debugName: "$trackBy" }] : []));
|
|
6625
|
+
this.$tableId = computed(() => this.$tableIdInput() || this.$tableBuilderSettings()?.tableSettings?.tableId, ...(ngDevMode ? [{ debugName: "$tableId" }] : []));
|
|
6626
|
+
this.$includeSelectionColumn = computed(() => this.$selectionColumnInput() || !!this.$tableBuilderSettings()?.tableSettings?.includeSelectionColumn, ...(ngDevMode ? [{ debugName: "$includeSelectionColumn" }] : []));
|
|
6627
|
+
this.$includeIndexColumn = computed(() => this.$indexColumnInput() || !!this.$tableBuilderSettings()?.tableSettings?.includeIndexColumn, ...(ngDevMode ? [{ debugName: "$includeIndexColumn" }] : []));
|
|
6607
6628
|
this.$stickyHeader = computed(() => {
|
|
6608
6629
|
const settings = this.$tableBuilderSettings()?.columnHeaderSettings?.stickyHeaderRow;
|
|
6609
6630
|
if (settings != null) {
|
|
6610
6631
|
return settings;
|
|
6611
6632
|
}
|
|
6612
6633
|
return this.$stickyHeaderInput();
|
|
6613
|
-
});
|
|
6614
|
-
this.$stickyFooter = computed(() => this.$stickyFooterInput() || !!this.$tableBuilderSettings()?.columnFooterSettings?.stickyFooterRow);
|
|
6634
|
+
}, ...(ngDevMode ? [{ debugName: "$stickyHeader" }] : []));
|
|
6635
|
+
this.$stickyFooter = computed(() => this.$stickyFooterInput() || !!this.$tableBuilderSettings()?.columnFooterSettings?.stickyFooterRow, ...(ngDevMode ? [{ debugName: "$stickyFooter" }] : []));
|
|
6615
6636
|
this.$props = computed(() => {
|
|
6616
6637
|
const indexColumn = this.$includeIndexColumn();
|
|
6617
6638
|
const selectionColumn = this.$includeSelectionColumn();
|
|
@@ -6621,7 +6642,7 @@ class TableContainerComponent {
|
|
|
6621
6642
|
const groupHeaderHeight = this.$groupHeaderHeight();
|
|
6622
6643
|
const customGroupRows = this.$customGroupRows().filter(cgr => cgr.$inited());
|
|
6623
6644
|
return ({ indexColumn, selectionColumn, isSticky: stickHeader, stickyFooter, groupHeaderTemplate, groupHeaderHeight, customGroupRows });
|
|
6624
|
-
});
|
|
6645
|
+
}, ...(ngDevMode ? [{ debugName: "$props" }] : []));
|
|
6625
6646
|
this.#initTableBuilder = effect(() => {
|
|
6626
6647
|
const tb = this.$tableBuilder();
|
|
6627
6648
|
untracked(() => {
|
|
@@ -6630,7 +6651,7 @@ class TableContainerComponent {
|
|
|
6630
6651
|
tb._container.set(this);
|
|
6631
6652
|
}
|
|
6632
6653
|
});
|
|
6633
|
-
});
|
|
6654
|
+
}, ...(ngDevMode ? [{ debugName: "#initTableBuilder" }] : []));
|
|
6634
6655
|
this.#initializeTableSettingsFromTableBuilderAndPersistedStateEffect = effect(() => {
|
|
6635
6656
|
const metaLoaded = this.$isInitializationState(InitializationState.MetaDataLoaded)();
|
|
6636
6657
|
if (!metaLoaded)
|
|
@@ -6645,14 +6666,14 @@ class TableContainerComponent {
|
|
|
6645
6666
|
}
|
|
6646
6667
|
this.state.setInitializationState(InitializationState.Ready);
|
|
6647
6668
|
});
|
|
6648
|
-
});
|
|
6669
|
+
}, ...(ngDevMode ? [{ debugName: "#initializeTableSettingsFromTableBuilderAndPersistedStateEffect" }] : []));
|
|
6649
6670
|
this.#setPageSizeFromInputEffect = effect(() => {
|
|
6650
6671
|
const pageSize = this.$pageSize();
|
|
6651
6672
|
const userDefinedPageSize = this.state.$userDefinedPageSize();
|
|
6652
6673
|
if (pageSize && !userDefinedPageSize) {
|
|
6653
6674
|
untracked(() => this.state.setPageSize(pageSize));
|
|
6654
6675
|
}
|
|
6655
|
-
});
|
|
6676
|
+
}, ...(ngDevMode ? [{ debugName: "#setPageSizeFromInputEffect" }] : []));
|
|
6656
6677
|
this.#patchedFilters = [];
|
|
6657
6678
|
this.#patchSavableFilterDirectivesFromPersistedStateEffect = effect(() => {
|
|
6658
6679
|
const loaded = this.$isInitializationState(InitializationState.TableSettingsLoaded)();
|
|
@@ -6668,7 +6689,7 @@ class TableContainerComponent {
|
|
|
6668
6689
|
this.state.addFilter(f.filter$);
|
|
6669
6690
|
});
|
|
6670
6691
|
});
|
|
6671
|
-
});
|
|
6692
|
+
}, ...(ngDevMode ? [{ debugName: "#patchSavableFilterDirectivesFromPersistedStateEffect" }] : []));
|
|
6672
6693
|
this.#patchSavableFilterInputsFromPersistedStateEffect = effect(() => {
|
|
6673
6694
|
const loaded = this.$isInitializationState(InitializationState.TableSettingsLoaded)();
|
|
6674
6695
|
const inputFilters = this.$filterInfoInputs();
|
|
@@ -6689,11 +6710,11 @@ class TableContainerComponent {
|
|
|
6689
6710
|
this.#patchedFilters.push(f.filterId);
|
|
6690
6711
|
});
|
|
6691
6712
|
});
|
|
6692
|
-
});
|
|
6713
|
+
}, ...(ngDevMode ? [{ debugName: "#patchSavableFilterInputsFromPersistedStateEffect" }] : []));
|
|
6693
6714
|
this.#addPropsToStoreFromInputsEffect = effect(() => {
|
|
6694
6715
|
const props = this.$props();
|
|
6695
6716
|
untracked(() => this.state.setProps(props));
|
|
6696
|
-
});
|
|
6717
|
+
}, ...(ngDevMode ? [{ debugName: "#addPropsToStoreFromInputsEffect" }] : []));
|
|
6697
6718
|
this.#addMetaDataToStoreEffect = effect(() => {
|
|
6698
6719
|
const allMetaDatas = this.$allMetaDatas();
|
|
6699
6720
|
if (!allMetaDatas)
|
|
@@ -6702,7 +6723,7 @@ class TableContainerComponent {
|
|
|
6702
6723
|
this.state.setMetaData(allMetaDatas);
|
|
6703
6724
|
this.state.setLinkMaps(createLinkCreatorDict(allMetaDatas));
|
|
6704
6725
|
});
|
|
6705
|
-
});
|
|
6726
|
+
}, ...(ngDevMode ? [{ debugName: "#addMetaDataToStoreEffect" }] : []));
|
|
6706
6727
|
this.#setFilteredDataLengthEffect = effect(() => {
|
|
6707
6728
|
const tableBuilder = this.$tableBuilder();
|
|
6708
6729
|
const data = this.$sortedAndFilteredData();
|
|
@@ -6711,7 +6732,7 @@ class TableContainerComponent {
|
|
|
6711
6732
|
untracked(() => {
|
|
6712
6733
|
this.dataStore.patchState({ sortedFilteredDataLength: data.value.length });
|
|
6713
6734
|
});
|
|
6714
|
-
});
|
|
6735
|
+
}, ...(ngDevMode ? [{ debugName: "#setFilteredDataLengthEffect" }] : []));
|
|
6715
6736
|
this.#setDataSourceDataEffect = effect(() => {
|
|
6716
6737
|
const tableBuilder = this.$tableBuilder();
|
|
6717
6738
|
const flat = this.$filteredSortedAndGrouped();
|
|
@@ -6722,7 +6743,7 @@ class TableContainerComponent {
|
|
|
6722
6743
|
this.dataSource.setData(data);
|
|
6723
6744
|
this.dataStore.patchState({ sortedFilteredGroupedDataLength: data.length });
|
|
6724
6745
|
});
|
|
6725
|
-
});
|
|
6746
|
+
}, ...(ngDevMode ? [{ debugName: "#setDataSourceDataEffect" }] : []));
|
|
6726
6747
|
this.#destroyRef = inject(DestroyRef).onDestroy(() => {
|
|
6727
6748
|
const tableId = this.$tableId();
|
|
6728
6749
|
if (tableId) {
|
|
@@ -6735,14 +6756,14 @@ class TableContainerComponent {
|
|
|
6735
6756
|
return this.stateService.$selectLocalTableStateForView(tableId)();
|
|
6736
6757
|
}
|
|
6737
6758
|
return undefined;
|
|
6738
|
-
});
|
|
6759
|
+
}, ...(ngDevMode ? [{ debugName: "$persistedState" }] : []));
|
|
6739
6760
|
this.$allFilterDirectives = computed(() => {
|
|
6740
6761
|
if (this.wrapper) {
|
|
6741
6762
|
return [...this.$filterDirectives(), ...this.$customFilterDirectives(), ...this.wrapper.$registrations()];
|
|
6742
6763
|
}
|
|
6743
6764
|
return [...this.$filterDirectives(), ...this.$customFilterDirectives()];
|
|
6744
|
-
});
|
|
6745
|
-
this.$tableBuilderMetaData = computed(() => this.$tableBuilder()?.$metaData());
|
|
6765
|
+
}, ...(ngDevMode ? [{ debugName: "$allFilterDirectives" }] : []));
|
|
6766
|
+
this.$tableBuilderMetaData = computed(() => this.$tableBuilder()?.$metaData(), ...(ngDevMode ? [{ debugName: "$tableBuilderMetaData" }] : []));
|
|
6746
6767
|
this.$allMetaDatas = computed(() => {
|
|
6747
6768
|
const tableBuilderMetaData = this.$tableBuilderMetaData();
|
|
6748
6769
|
if (!tableBuilderMetaData)
|
|
@@ -6750,13 +6771,16 @@ class TableContainerComponent {
|
|
|
6750
6771
|
const customCellMetaDatas = this.$customCells().filter(cc => cc.$inited()).map(cc => cc.$metaData()).filter(d => !!d);
|
|
6751
6772
|
const mappedCustomCellMetaDatas = customCellMetaDatas.map(md => mergeCustomCellMetaData(md, tableBuilderMetaData.find(item => item.key === md.key)));
|
|
6752
6773
|
return [...tableBuilderMetaData, ...mappedCustomCellMetaDatas];
|
|
6753
|
-
});
|
|
6754
|
-
this.$allMetaDataTimeStamped = linkedSignal({
|
|
6755
|
-
|
|
6756
|
-
|
|
6757
|
-
|
|
6758
|
-
|
|
6759
|
-
|
|
6774
|
+
}, ...(ngDevMode ? [{ debugName: "$allMetaDatas" }] : []));
|
|
6775
|
+
this.$allMetaDataTimeStamped = linkedSignal(...(ngDevMode ? [{ debugName: "$allMetaDataTimeStamped", source: this.$allMetaDatas,
|
|
6776
|
+
computation: (curr, previous) => {
|
|
6777
|
+
return { timestamp: Date.now(), value: curr || [], previous: previous?.value.value || [] };
|
|
6778
|
+
} }] : [{
|
|
6779
|
+
source: this.$allMetaDatas,
|
|
6780
|
+
computation: (curr, previous) => {
|
|
6781
|
+
return { timestamp: Date.now(), value: curr || [], previous: previous?.value.value || [] };
|
|
6782
|
+
}
|
|
6783
|
+
}]));
|
|
6760
6784
|
this.#setUpAllValuesFilters = effect(() => {
|
|
6761
6785
|
const data = this.$allDataTimeStamped();
|
|
6762
6786
|
const allMeta = this.$allMetaDataTimeStamped();
|
|
@@ -6767,7 +6791,7 @@ class TableContainerComponent {
|
|
|
6767
6791
|
const mapped = buildInAllValuesFilter(this.config, allMeta.previous, allMeta.value, data.value, allMeta.timestamp, data.timestamp, currentAll);
|
|
6768
6792
|
this.state.patchState({ allFilters: mapped });
|
|
6769
6793
|
});
|
|
6770
|
-
});
|
|
6794
|
+
}, ...(ngDevMode ? [{ debugName: "#setUpAllValuesFilters" }] : []));
|
|
6771
6795
|
this.$preds = computed(() => {
|
|
6772
6796
|
const predicateInputFilters = this.$inputFilters().filter(isFunction);
|
|
6773
6797
|
const notSavableFilterDirectives = this.$allFilterDirectives()
|
|
@@ -6776,39 +6800,56 @@ class TableContainerComponent {
|
|
|
6776
6800
|
.filter(d => !!d && needsFilterCreation(d))
|
|
6777
6801
|
.map(d => createFilterFunc(d));
|
|
6778
6802
|
return [...predicateInputFilters, ...notSavableFilterDirectives];
|
|
6779
|
-
});
|
|
6780
|
-
this.$predicateFiltersState = linkedSignal({
|
|
6781
|
-
|
|
6782
|
-
|
|
6783
|
-
|
|
6784
|
-
return ({ value: updateFilterPredicateState(
|
|
6785
|
-
|
|
6786
|
-
|
|
6787
|
-
|
|
6788
|
-
|
|
6789
|
-
|
|
6790
|
-
|
|
6791
|
-
|
|
6792
|
-
|
|
6793
|
-
|
|
6794
|
-
|
|
6795
|
-
|
|
6803
|
+
}, ...(ngDevMode ? [{ debugName: "$preds" }] : []));
|
|
6804
|
+
this.$predicateFiltersState = linkedSignal(...(ngDevMode ? [{ debugName: "$predicateFiltersState", source: this.$preds,
|
|
6805
|
+
computation: (curr, previous) => {
|
|
6806
|
+
if (!previous?.value)
|
|
6807
|
+
return ({ value: updateFilterPredicateState({ allFilters: [] }, curr), timestamp: Date.now() });
|
|
6808
|
+
return ({ value: updateFilterPredicateState(previous.value.value, curr), timestamp: Date.now() });
|
|
6809
|
+
} }] : [{
|
|
6810
|
+
source: this.$preds,
|
|
6811
|
+
computation: (curr, previous) => {
|
|
6812
|
+
if (!previous?.value)
|
|
6813
|
+
return ({ value: updateFilterPredicateState({ allFilters: [] }, curr), timestamp: Date.now() });
|
|
6814
|
+
return ({ value: updateFilterPredicateState(previous.value.value, curr), timestamp: Date.now() });
|
|
6815
|
+
}
|
|
6816
|
+
}]));
|
|
6817
|
+
this.$savableFiltersState = linkedSignal(...(ngDevMode ? [{ debugName: "$savableFiltersState", source: this.state.$filters,
|
|
6818
|
+
computation: (curr, previous) => {
|
|
6819
|
+
if (!previous?.value)
|
|
6820
|
+
return ({ value: updateFilterInfoState({ allFilters: {} }, curr), timestamp: Date.now() });
|
|
6821
|
+
return ({ value: updateFilterInfoState(previous.value.value, curr), timestamp: Date.now() });
|
|
6822
|
+
} }] : [{
|
|
6823
|
+
source: this.state.$filters,
|
|
6824
|
+
computation: (curr, previous) => {
|
|
6825
|
+
if (!previous?.value)
|
|
6826
|
+
return ({ value: updateFilterInfoState({ allFilters: {} }, curr), timestamp: Date.now() });
|
|
6827
|
+
return ({ value: updateFilterInfoState(previous.value.value, curr), timestamp: Date.now() });
|
|
6828
|
+
}
|
|
6829
|
+
}]));
|
|
6796
6830
|
this.$allFilterStatesTimeStamped = computed(() => {
|
|
6797
6831
|
if (!this.$isInitializationState(InitializationState.Ready)())
|
|
6798
6832
|
return undefined;
|
|
6799
6833
|
return ({ value: updateFilterState(this.$savableFiltersState(), this.$predicateFiltersState()), timestamp: Date.now() });
|
|
6800
|
-
});
|
|
6801
|
-
this.$sortStateTimeStamped = linkedSignal({
|
|
6802
|
-
|
|
6803
|
-
|
|
6804
|
-
|
|
6805
|
-
|
|
6806
|
-
|
|
6807
|
-
return ({ value: updateSortState(
|
|
6808
|
-
|
|
6809
|
-
|
|
6810
|
-
|
|
6811
|
-
|
|
6834
|
+
}, ...(ngDevMode ? [{ debugName: "$allFilterStatesTimeStamped" }] : []));
|
|
6835
|
+
this.$sortStateTimeStamped = linkedSignal(...(ngDevMode ? [{ debugName: "$sortStateTimeStamped", source: computed(() => this.$isInitializationState(InitializationState.Ready)() && this.state.$getSorts()),
|
|
6836
|
+
computation: (curr, prev) => {
|
|
6837
|
+
if (!curr)
|
|
6838
|
+
return undefined;
|
|
6839
|
+
if (!prev?.value)
|
|
6840
|
+
return ({ value: updateSortState(initialSortState, curr), timestamp: Date.now() });
|
|
6841
|
+
return ({ value: updateSortState(prev.value.value, curr), timestamp: Date.now() });
|
|
6842
|
+
} }] : [{
|
|
6843
|
+
source: computed(() => this.$isInitializationState(InitializationState.Ready)() && this.state.$getSorts()),
|
|
6844
|
+
computation: (curr, prev) => {
|
|
6845
|
+
if (!curr)
|
|
6846
|
+
return undefined;
|
|
6847
|
+
if (!prev?.value)
|
|
6848
|
+
return ({ value: updateSortState(initialSortState, curr), timestamp: Date.now() });
|
|
6849
|
+
return ({ value: updateSortState(prev.value.value, curr), timestamp: Date.now() });
|
|
6850
|
+
}
|
|
6851
|
+
}]));
|
|
6852
|
+
this.$allData = computed(() => (this.$tableBuilder()?.$initialized() && this.$tableBuilder()?.$data()) || [], ...(ngDevMode ? [{ debugName: "$allData" }] : []));
|
|
6812
6853
|
this.$allDataTimeStamped = computed(() => {
|
|
6813
6854
|
const data = this.$allData();
|
|
6814
6855
|
if (!data)
|
|
@@ -6817,7 +6858,7 @@ class TableContainerComponent {
|
|
|
6817
6858
|
value: data,
|
|
6818
6859
|
timestamp: Date.now()
|
|
6819
6860
|
});
|
|
6820
|
-
});
|
|
6861
|
+
}, ...(ngDevMode ? [{ debugName: "$allDataTimeStamped" }] : []));
|
|
6821
6862
|
this.$allTimeStamped = computed(() => {
|
|
6822
6863
|
const data = this.$allDataTimeStamped();
|
|
6823
6864
|
const sort = this.$sortStateTimeStamped();
|
|
@@ -6829,22 +6870,31 @@ class TableContainerComponent {
|
|
|
6829
6870
|
sort,
|
|
6830
6871
|
filter
|
|
6831
6872
|
});
|
|
6832
|
-
});
|
|
6833
|
-
this.$sortedAndFilteredData = linkedSignal({
|
|
6834
|
-
|
|
6835
|
-
|
|
6836
|
-
|
|
6837
|
-
|
|
6838
|
-
|
|
6839
|
-
|
|
6840
|
-
|
|
6841
|
-
|
|
6842
|
-
|
|
6843
|
-
|
|
6844
|
-
|
|
6845
|
-
|
|
6846
|
-
|
|
6847
|
-
|
|
6873
|
+
}, ...(ngDevMode ? [{ debugName: "$allTimeStamped" }] : []));
|
|
6874
|
+
this.$sortedAndFilteredData = linkedSignal(...(ngDevMode ? [{ debugName: "$sortedAndFilteredData", source: this.$allTimeStamped,
|
|
6875
|
+
computation: (values, prev) => {
|
|
6876
|
+
const init = this.$isInitializationState(InitializationState.Ready);
|
|
6877
|
+
if (!values || !init)
|
|
6878
|
+
return undefined;
|
|
6879
|
+
const { data, filter, sort } = values;
|
|
6880
|
+
const val = prev?.value?.value || data.value;
|
|
6881
|
+
const filteredData = sortAndFilterData(data, filter, sort, !prev?.value, val);
|
|
6882
|
+
return ({ value: filteredData, timestamp: Date.now() });
|
|
6883
|
+
} }] : [{
|
|
6884
|
+
source: this.$allTimeStamped,
|
|
6885
|
+
computation: (values, prev) => {
|
|
6886
|
+
const init = this.$isInitializationState(InitializationState.Ready);
|
|
6887
|
+
if (!values || !init)
|
|
6888
|
+
return undefined;
|
|
6889
|
+
const { data, filter, sort } = values;
|
|
6890
|
+
const val = prev?.value?.value || data.value;
|
|
6891
|
+
const filteredData = sortAndFilterData(data, filter, sort, !prev?.value, val);
|
|
6892
|
+
return ({ value: filteredData, timestamp: Date.now() });
|
|
6893
|
+
}
|
|
6894
|
+
}]));
|
|
6895
|
+
this.$timestampedGroups = computed(() => ({ value: this.state.$groupByData(), timestamp: Date.now() }), ...(ngDevMode ? [{ debugName: "$timestampedGroups" }] : []));
|
|
6896
|
+
this.$timestampedExpanded = computed(() => ({ value: this.state.$expandGroups(), timestamp: Date.now() }), ...(ngDevMode ? [{ debugName: "$timestampedExpanded" }] : []));
|
|
6897
|
+
this.$timestampedGroupSortUpdated = computed(() => ({ value: this.state.$sortedGroupsUpdates(), timestamp: Date.now() }), ...(ngDevMode ? [{ debugName: "$timestampedGroupSortUpdated" }] : []));
|
|
6848
6898
|
this.$dataAndGroupsTimestamped = computed(() => {
|
|
6849
6899
|
const data = this.$sortedAndFilteredData();
|
|
6850
6900
|
const groups = this.$timestampedGroups();
|
|
@@ -6858,16 +6908,22 @@ class TableContainerComponent {
|
|
|
6858
6908
|
expanded,
|
|
6859
6909
|
groupSorts,
|
|
6860
6910
|
});
|
|
6861
|
-
});
|
|
6862
|
-
this.$filteredSortedAndGrouped = linkedSignal({
|
|
6863
|
-
|
|
6864
|
-
|
|
6865
|
-
|
|
6866
|
-
|
|
6867
|
-
|
|
6868
|
-
|
|
6869
|
-
|
|
6870
|
-
|
|
6911
|
+
}, ...(ngDevMode ? [{ debugName: "$dataAndGroupsTimestamped" }] : []));
|
|
6912
|
+
this.$filteredSortedAndGrouped = linkedSignal(...(ngDevMode ? [{ debugName: "$filteredSortedAndGrouped", source: this.$dataAndGroupsTimestamped,
|
|
6913
|
+
computation: (curr, prev) => {
|
|
6914
|
+
if (!curr)
|
|
6915
|
+
return undefined;
|
|
6916
|
+
const val = prev?.value?.groupedData || [];
|
|
6917
|
+
return updateGroupByState(val, curr, !prev?.value, this.state.$metaData());
|
|
6918
|
+
} }] : [{
|
|
6919
|
+
source: this.$dataAndGroupsTimestamped,
|
|
6920
|
+
computation: (curr, prev) => {
|
|
6921
|
+
if (!curr)
|
|
6922
|
+
return undefined;
|
|
6923
|
+
const val = prev?.value?.groupedData || [];
|
|
6924
|
+
return updateGroupByState(val, curr, !prev?.value, this.state.$metaData());
|
|
6925
|
+
}
|
|
6926
|
+
}]));
|
|
6871
6927
|
this.$isInitializationState = (state) => computed(() => this.state.selectSignal(s => s.initializationState >= state)());
|
|
6872
6928
|
this.headerId = TableContainerComponent.headerId;
|
|
6873
6929
|
}
|
|
@@ -6893,10 +6949,10 @@ class TableContainerComponent {
|
|
|
6893
6949
|
#destroyRef;
|
|
6894
6950
|
#setUpAllValuesFilters;
|
|
6895
6951
|
static { this.headerId = 'tb-header-wrapper'; }
|
|
6896
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
6897
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", 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 }); }
|
|
6952
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TableContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6953
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: TableContainerComponent, isStandalone: true, selector: "tb-table-container", inputs: { $tableBuilder: { classPropertyName: "$tableBuilder", publicName: "tableBuilder", isSignal: true, isRequired: true, transformFunction: null }, $tableIdInput: { classPropertyName: "$tableIdInput", publicName: "tableId", isSignal: true, isRequired: false, transformFunction: null }, $trackByInput: { classPropertyName: "$trackByInput", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null }, $inputFilters: { classPropertyName: "$inputFilters", publicName: "inputFilters", isSignal: true, isRequired: false, transformFunction: null }, $indexColumnInput: { classPropertyName: "$indexColumnInput", publicName: "indexColumn", isSignal: true, isRequired: false, transformFunction: null }, $selectionColumnInput: { classPropertyName: "$selectionColumnInput", publicName: "selectionColumn", isSignal: true, isRequired: false, transformFunction: null }, $stickyHeaderInput: { classPropertyName: "$stickyHeaderInput", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, $stickyFooterInput: { classPropertyName: "$stickyFooterInput", publicName: "stickyFooter", isSignal: true, isRequired: false, transformFunction: null }, $groupHeaderTemplate: { classPropertyName: "$groupHeaderTemplate", publicName: "groupHeaderTemplate", isSignal: true, isRequired: false, transformFunction: null }, $groupHeaderHeight: { classPropertyName: "$groupHeaderHeight", publicName: "groupHeaderHeight", isSignal: true, isRequired: false, transformFunction: null }, $pageSize: { classPropertyName: "$pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selection$: "selection", onStateReset$: "onStateReset", onSaveState$: "onSaveState", state$: "state", data$: "data", sortedAndFilteredAndGroupedData$: "sortedAndFilteredAndGroupedData" }, providers: [TableStore, ExportToCsvService, WrapperFilterStore, DataStore], queries: [{ propertyName: "$filterDirectives", predicate: TableFilterDirective, descendants: true, isSignal: true }, { propertyName: "$customFilterDirectives", predicate: TableCustomFilterDirective, descendants: true, isSignal: true }, { propertyName: "_$customRows", predicate: (MatRowDef), isSignal: true }, { propertyName: "$customCells", predicate: CustomCellDirective, isSignal: true }, { propertyName: "$customGroupRows", predicate: CustomGroupRowDirective, isSignal: true }], viewQueries: [{ propertyName: "$paginatorComponent", first: true, predicate: PaginatorComponent, descendants: true, isSignal: true }, { propertyName: "$paginatorWrapper", first: true, predicate: ["paginatorWrapper"], descendants: true, isSignal: true }, { propertyName: "$genericTable", first: true, predicate: GenericTableComponent, descendants: true, isSignal: true }, { propertyName: "$menu", first: true, predicate: MatMenu, descendants: true, isSignal: true }], ngImport: i0, template: "@let tableId = $tableId();\r\n@let tableSettings = state.$tableSettings();\r\n\r\n<ng-content select=\"[before]\" />\r\n<ng-container multiSort>\r\n <div class=\"tb-header-wrapper\" [id]=\"headerId\">\r\n <div class=\"title\">\r\n @if ((!$collapsedHeader()) || tableSettings.showTitleWhenHeaderCollapsed)\r\n {\r\n <ng-content select=\".tb-header-title\"/>\r\n @if (tableSettings.title)\r\n {\r\n @switch (tableSettings.title.level)\r\n {\r\n @case (1) { <h1 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h1>}\r\n @case (2) { <h2 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h2>}\r\n @case (4) { <h4 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h4>}\r\n @case (5) { <h5 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h5>}\r\n @case (6) { <h6 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h6>}\r\n @default { <h3 class=\"tb-container-title\" [style]=\"tableSettings.title.styles\">{{tableSettings.title.text}}</h3>}\r\n }\r\n }\r\n }\r\n </div>\r\n @if(state.$groupByData().length)\r\n {\r\n <group-by-list />\r\n }\r\n <div class=\"flx-row-end\">\r\n <lib-filter-list />\r\n @if (!tableSettings.hideHeader)\r\n {\r\n @if (!$collapsedHeader())\r\n {\r\n <ng-container *ngTemplateOutlet=\"headerMenu\"/>\r\n <button mat-icon-button color='primary' [matMenuTriggerFor]=\"mainMenu\">\r\n <mat-icon>more_vert</mat-icon>\r\n </button>\r\n <mat-menu #mainMenu='matMenu' [xPosition]=\"'before'\">\r\n <lib-table-header-menu #l/>\r\n </mat-menu>\r\n\r\n }\r\n @else\r\n {\r\n <mat-icon color=\"primary\" class=\"flat-menu-button pointer\" [matMenuTriggerFor]=\"mainMenu\">more_horiz</mat-icon>\r\n <mat-menu #mainMenu='matMenu'>\r\n <div class=\"collapsed-head-row\">\r\n <ng-container *ngTemplateOutlet=\"headerMenu; injector menuInjector\"/>\r\n </div>\r\n <lib-table-header-menu />\r\n </mat-menu>\r\n }\r\n <mat-icon class=\"collapse-icon header\" [matTooltip]=\"$collapsedHeader() ? 'expand' : 'collapse'\"\r\n (click)=\"state.toggleCollapseHeader()\">\r\n {{$collapsedHeader() ? 'expand_less' : 'expand_more'}}\r\n </mat-icon>\r\n }\r\n\r\n </div>\r\n </div>\r\n\r\n @if($useVirtual())\r\n {\r\n <tb-virtual-scroll-container class=\"scrollable\">\r\n <tb-generic-table [rows]=\"$customRows()\" [data]=\"$data()!\" [displayData]=\"$filteredSortedAndGrouped()?.displayData || []\"\r\n [columnInfos]='$myColumns()' [trackBy]=\"$trackBy()\" [dataSource]=\"dataSource\" (selection)='_selection$.next($event)' />\r\n </tb-virtual-scroll-container>\r\n }\r\n @else\r\n {\r\n <tb-generic-table [rows]=\"$customRows()\" [data]=\"$data()!\" [displayData]=\"$filteredSortedAndGrouped()?.displayData || []\"\r\n [columnInfos]='$myColumns()' [trackBy]=\"$trackBy()\" [dataSource]=\"dataSource\" (selection)='_selection$.next($event)' />\r\n }\r\n @if(tableSettings.usePaginator)\r\n {\r\n <div #paginatorWrapper class=\"paginator tb-paginator-wrapper\">\r\n <tb-paginator #tbPaginator />\r\n\r\n <mat-icon class=\"collapse-icon footer\" [matTooltip]=\"$collapsedFooter() ? 'expand' : 'collapse'\"\r\n (click)=\"state.toggleCollapseFooter()\">\r\n {{$collapsedFooter() ? 'expand_more' : 'expand_less'}}\r\n </mat-icon>\r\n </div>\r\n }\r\n</ng-container>\r\n\r\n<ng-template #headerMenu>\r\n @if (!tableSettings.hideFilter) {<tb-filter-displayer/>}\r\n @if (!tableSettings.hideColumnSettings) {<tb-col-displayer/>}\r\n @if (!tableSettings.hideSort) {<tb-sort-menu/>}\r\n @if (!!tableId && !$collapsedHeader()) {<tb-profiles-menu [tableId]=\"tableId\"/>}\r\n</ng-template>\r\n", styles: [".tb-header-wrapper{display:flex;flex-direction:row;width:100%}.flx-row-end{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;margin-left:auto}.flat-menu{line-height:initial;height:initial}.pointer{cursor:pointer}.add-key{width:90%}.paginator{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;background-color:#fff;bottom:0;position:sticky;border-top:.5px solid rgba(0,0,0,.12)}.profiles-menu{visibility:hidden;width:0px;height:0px;display:block;overflow:hidden;position:absolute;top:50px}.collapsed-head-row{display:flex;justify-content:space-evenly}::ng-deep tb-generic-table .mat-mdc-row:nth-child(odd):not(.no-stripe){background-color:var(--tb-odd-row-background-color, #cdeefe)}.tb-container-title{padding-left:var(--tb-container-title-padding-left, 10px);margin:var(--tb-container-title-margin, 0)}\n", ".collapse-icon{font-size:16px;height:16px;color:#3f51b5;align-self:flex-start}.collapse-icon:hover{cursor:pointer}.hide{display:none}.paginator-row{display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PaginatorComponent, selector: "tb-paginator" }, { kind: "directive", type: MultiSortDirective, selector: "[multiSort]", inputs: ["matSortDisabled"], exportAs: ["multiSort"] }, { kind: "component", type: GroupByListComponent, selector: "group-by-list" }, { kind: "component", type: FilterChipsComponent, selector: "lib-filter-list" }, { kind: "component", type: GenFilterDisplayerComponent, selector: "tb-filter-displayer" }, { kind: "component", type: GenColDisplayerComponent, selector: "tb-col-displayer" }, { kind: "component", type: SortMenuComponent, selector: "tb-sort-menu" }, { kind: "component", type: GenericTableComponent, selector: "tb-generic-table", inputs: ["displayData", "data", "rows", "columnInfos", "dataSource", "trackBy"], outputs: ["selection"] }, { kind: "component", type: ProfilesMenuComponent, selector: "tb-profiles-menu", inputs: ["tableId", "isMatMenuChild"] }, { kind: "component", type: TableHeaderMenuComponent, selector: "lib-table-header-menu" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i1$4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: VirtualScrollContainer, selector: "tb-virtual-scroll-container" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6898
6954
|
}
|
|
6899
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
6955
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TableContainerComponent, decorators: [{
|
|
6900
6956
|
type: Component,
|
|
6901
6957
|
args: [{ selector: 'tb-table-container', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TableStore, ExportToCsvService, WrapperFilterStore, DataStore], imports: [
|
|
6902
6958
|
NgTemplateOutlet,
|
|
@@ -6905,7 +6961,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImpor
|
|
|
6905
6961
|
SortMenuComponent, GenericTableComponent, ProfilesMenuComponent, TableHeaderMenuComponent,
|
|
6906
6962
|
MatButtonModule, MatMenuModule, MatIconModule, MatTooltipModule, VirtualScrollContainer,
|
|
6907
6963
|
], 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"] }]
|
|
6908
|
-
}] });
|
|
6964
|
+
}], 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"] }] } });
|
|
6909
6965
|
function isFunction(a) {
|
|
6910
6966
|
return typeof a === 'function';
|
|
6911
6967
|
}
|
|
@@ -6919,8 +6975,8 @@ class TableBuilderModule {
|
|
|
6919
6975
|
]
|
|
6920
6976
|
};
|
|
6921
6977
|
}
|
|
6922
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
6923
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
6978
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TableBuilderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
6979
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.0", ngImport: i0, type: TableBuilderModule, imports: [TableContainerComponent,
|
|
6924
6980
|
CustomCellDirective,
|
|
6925
6981
|
CustomGroupRowDirective,
|
|
6926
6982
|
TableFilterDirective,
|
|
@@ -6931,11 +6987,11 @@ class TableBuilderModule {
|
|
|
6931
6987
|
TableFilterStringContainsDirective,
|
|
6932
6988
|
TableWrapperDirective,
|
|
6933
6989
|
UtilitiesModule] }); }
|
|
6934
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
6990
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TableBuilderModule, providers: [
|
|
6935
6991
|
MultiSortDirective,
|
|
6936
6992
|
], imports: [TableContainerComponent, UtilitiesModule] }); }
|
|
6937
6993
|
}
|
|
6938
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
6994
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TableBuilderModule, decorators: [{
|
|
6939
6995
|
type: NgModule,
|
|
6940
6996
|
args: [{
|
|
6941
6997
|
imports: [
|
|
@@ -6992,21 +7048,21 @@ class TableBuilder {
|
|
|
6992
7048
|
this.data = data;
|
|
6993
7049
|
this.metaData = metaData;
|
|
6994
7050
|
this.settings = settings;
|
|
6995
|
-
this._container = signal(undefined);
|
|
7051
|
+
this._container = signal(undefined, ...(ngDevMode ? [{ debugName: "_container" }] : []));
|
|
6996
7052
|
this.container = this._container.asReadonly();
|
|
6997
|
-
this.$metaData = computed(() => this.$initialized() ? this.#$metaData() : undefined);
|
|
6998
|
-
this.$settings = computed(() => this.$initialized() ? this.#$settings() : undefined);
|
|
6999
|
-
this.#$metaNeedsPrep = signal(false);
|
|
7000
|
-
this.#$dataIsObservable = signal(false);
|
|
7001
|
-
this.#$settingsIsObservable = signal(false);
|
|
7002
|
-
this.#$needsPrep = computed(() => this.#$dataIsObservable() || this.#$metaNeedsPrep() || this.#$settingsIsObservable());
|
|
7003
|
-
this.$initialized = signal(false);
|
|
7053
|
+
this.$metaData = computed(() => this.$initialized() ? this.#$metaData() : undefined, ...(ngDevMode ? [{ debugName: "$metaData" }] : []));
|
|
7054
|
+
this.$settings = computed(() => this.$initialized() ? this.#$settings() : undefined, ...(ngDevMode ? [{ debugName: "$settings" }] : []));
|
|
7055
|
+
this.#$metaNeedsPrep = signal(false, ...(ngDevMode ? [{ debugName: "#$metaNeedsPrep" }] : []));
|
|
7056
|
+
this.#$dataIsObservable = signal(false, ...(ngDevMode ? [{ debugName: "#$dataIsObservable" }] : []));
|
|
7057
|
+
this.#$settingsIsObservable = signal(false, ...(ngDevMode ? [{ debugName: "#$settingsIsObservable" }] : []));
|
|
7058
|
+
this.#$needsPrep = computed(() => this.#$dataIsObservable() || this.#$metaNeedsPrep() || this.#$settingsIsObservable(), ...(ngDevMode ? [{ debugName: "#$needsPrep" }] : []));
|
|
7059
|
+
this.$initialized = signal(false, ...(ngDevMode ? [{ debugName: "$initialized" }] : []));
|
|
7004
7060
|
this.#dataCleaners = computed(() => {
|
|
7005
7061
|
const metaData = this.$metaData();
|
|
7006
7062
|
if (!metaData)
|
|
7007
7063
|
return undefined;
|
|
7008
7064
|
return createDataCleaners(metaData);
|
|
7009
|
-
});
|
|
7065
|
+
}, ...(ngDevMode ? [{ debugName: "#dataCleaners" }] : []));
|
|
7010
7066
|
this.$data = computed(() => {
|
|
7011
7067
|
const data = this.#$data();
|
|
7012
7068
|
const cleaners = this.#dataCleaners();
|
|
@@ -7018,7 +7074,7 @@ class TableBuilder {
|
|
|
7018
7074
|
return cleaned;
|
|
7019
7075
|
});
|
|
7020
7076
|
return cleanedData;
|
|
7021
|
-
});
|
|
7077
|
+
}, ...(ngDevMode ? [{ debugName: "$data" }] : []));
|
|
7022
7078
|
if (isObservable(data)) {
|
|
7023
7079
|
this.#$dataIsObservable.set(true);
|
|
7024
7080
|
}
|
|
@@ -7061,7 +7117,7 @@ class TableBuilder {
|
|
|
7061
7117
|
this.#$metaData = toSignal(this.metaData, { injector, initialValue: [] });
|
|
7062
7118
|
}
|
|
7063
7119
|
else {
|
|
7064
|
-
this.#$metaData = computed(() => this.createMetaData(this.#$data()[0]));
|
|
7120
|
+
this.#$metaData = computed(() => this.createMetaData(this.#$data()[0]), ...(ngDevMode ? [{ debugName: "#$metaData" }] : []));
|
|
7065
7121
|
}
|
|
7066
7122
|
}
|
|
7067
7123
|
this.$initialized.set(true);
|
|
@@ -7121,12 +7177,12 @@ function actionStatusReducer(state = initialState, action) {
|
|
|
7121
7177
|
}
|
|
7122
7178
|
|
|
7123
7179
|
class NgrxExtModule {
|
|
7124
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
7125
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
7126
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
7180
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: NgrxExtModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
7181
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.0", ngImport: i0, type: NgrxExtModule, imports: [CommonModule, i1$9.StoreFeatureModule] }); }
|
|
7182
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: NgrxExtModule, imports: [CommonModule,
|
|
7127
7183
|
StoreModule.forFeature('ActionStatus', actionStatusReducer)] }); }
|
|
7128
7184
|
}
|
|
7129
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
7185
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: NgrxExtModule, decorators: [{
|
|
7130
7186
|
type: NgModule,
|
|
7131
7187
|
args: [{
|
|
7132
7188
|
declarations: [],
|
|
@@ -7144,10 +7200,10 @@ class ActionStateSpinnerComponent {
|
|
|
7144
7200
|
ngOnInit() {
|
|
7145
7201
|
this.serverActionStatus$ = this.status$.pipe(delayOn(a => a.status === serverStatusTypes.inProgress, 500));
|
|
7146
7202
|
}
|
|
7147
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
7148
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
7203
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ActionStateSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7204
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.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 }); }
|
|
7149
7205
|
}
|
|
7150
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
7206
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ActionStateSpinnerComponent, decorators: [{
|
|
7151
7207
|
type: Component,
|
|
7152
7208
|
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"] }]
|
|
7153
7209
|
}], propDecorators: { status$: [{
|
|
@@ -7155,11 +7211,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImpor
|
|
|
7155
7211
|
}] } });
|
|
7156
7212
|
|
|
7157
7213
|
class ActionStateUiModule {
|
|
7158
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
7159
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
7160
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
7214
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ActionStateUiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
7215
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.0", ngImport: i0, type: ActionStateUiModule, imports: [ActionStateSpinnerComponent], exports: [ActionStateSpinnerComponent] }); }
|
|
7216
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ActionStateUiModule, imports: [ActionStateSpinnerComponent] }); }
|
|
7161
7217
|
}
|
|
7162
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
7218
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ActionStateUiModule, decorators: [{
|
|
7163
7219
|
type: NgModule,
|
|
7164
7220
|
args: [{
|
|
7165
7221
|
imports: [
|