@one-paragon/angular-utilities 2.6.7 → 2.7.0
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: [
|
|
@@ -2959,7 +2959,7 @@ class TableStore extends ComponentStore {
|
|
|
2959
2959
|
this.$savableState = computed(() => {
|
|
2960
2960
|
const state = this.state();
|
|
2961
2961
|
return mapSaveableState(state);
|
|
2962
|
-
});
|
|
2962
|
+
}, ...(ngDevMode ? [{ debugName: "$savableState" }] : []));
|
|
2963
2963
|
//#region meta order and hidden
|
|
2964
2964
|
this.showColumn = this.updater((state, key) => ({
|
|
2965
2965
|
...state,
|
|
@@ -3053,7 +3053,7 @@ class TableStore extends ComponentStore {
|
|
|
3053
3053
|
};
|
|
3054
3054
|
};
|
|
3055
3055
|
this.$filters = this.selectSignal(state => state.filters);
|
|
3056
|
-
this.$filtersArray = computed(() => Object.values(this.state().filters) || []);
|
|
3056
|
+
this.$filtersArray = computed(() => Object.values(this.state().filters) || [], ...(ngDevMode ? [{ debugName: "$filtersArray" }] : []));
|
|
3057
3057
|
this.filters$ = this.select(state => state.filters);
|
|
3058
3058
|
this.$getFilter = (filterId) => {
|
|
3059
3059
|
return this.selectSignal(this.$filters, filters => filters[filterId]);
|
|
@@ -3076,7 +3076,7 @@ class TableStore extends ComponentStore {
|
|
|
3076
3076
|
sorted: sortArray,
|
|
3077
3077
|
};
|
|
3078
3078
|
});
|
|
3079
|
-
this.$preSort = computed(() => createPreSort(this.$metaData()));
|
|
3079
|
+
this.$preSort = computed(() => createPreSort(this.$metaData()), ...(ngDevMode ? [{ debugName: "$preSort" }] : []));
|
|
3080
3080
|
this._$selectSorted = this.selectSignal(state => state.sorted, {
|
|
3081
3081
|
equal: sortsAreSame
|
|
3082
3082
|
});
|
|
@@ -3088,7 +3088,7 @@ class TableStore extends ComponentStore {
|
|
|
3088
3088
|
const sortBy = sortLogic?.sortBy === 'use map' ? meta.map : sortLogic?.sortBy;
|
|
3089
3089
|
return ({ ...s, ...sortLogic, sortBy });
|
|
3090
3090
|
});
|
|
3091
|
-
});
|
|
3091
|
+
}, ...(ngDevMode ? [{ debugName: "$selectSorted" }] : []));
|
|
3092
3092
|
this.selectSorted$ = this.select(state => state.sorted).pipe(distinctUntilChanged(sortsAreSame));
|
|
3093
3093
|
this.$getSorts = this.selectSignal(() => this.$initializationState() !== InitializationState.Ready ? [] : this.$selectSorted());
|
|
3094
3094
|
this.sort$ = toObservable(this.$getSorts);
|
|
@@ -3373,10 +3373,10 @@ class TableStore extends ComponentStore {
|
|
|
3373
3373
|
};
|
|
3374
3374
|
}
|
|
3375
3375
|
#$groupBy;
|
|
3376
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3377
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
3376
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TableStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
3377
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TableStore }); }
|
|
3378
3378
|
}
|
|
3379
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3379
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TableStore, decorators: [{
|
|
3380
3380
|
type: Injectable
|
|
3381
3381
|
}], ctorParameters: () => [] });
|
|
3382
3382
|
const resetable = [
|
|
@@ -3408,7 +3408,7 @@ class MultiSortDirective extends MatSort {
|
|
|
3408
3408
|
untracked(() => {
|
|
3409
3409
|
this.state.setSort({ key: sortChange.active, direction: sortChange.direction });
|
|
3410
3410
|
});
|
|
3411
|
-
});
|
|
3411
|
+
}, ...(ngDevMode ? [{ debugName: "#onSortChange" }] : []));
|
|
3412
3412
|
this.#onStateSortUpdate = effect(() => {
|
|
3413
3413
|
const rules = this.state.$getSorts();
|
|
3414
3414
|
if (!rules)
|
|
@@ -3423,14 +3423,14 @@ class MultiSortDirective extends MatSort {
|
|
|
3423
3423
|
this.sortChange.emit(topRule);
|
|
3424
3424
|
}
|
|
3425
3425
|
});
|
|
3426
|
-
});
|
|
3426
|
+
}, ...(ngDevMode ? [{ debugName: "#onStateSortUpdate" }] : []));
|
|
3427
3427
|
}
|
|
3428
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3429
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
3428
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: MultiSortDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3429
|
+
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
3430
|
{ provide: MatSort, useExisting: MultiSortDirective }
|
|
3431
3431
|
], exportAs: ["multiSort"], usesInheritance: true, ngImport: i0 }); }
|
|
3432
3432
|
}
|
|
3433
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3433
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: MultiSortDirective, decorators: [{
|
|
3434
3434
|
type: Directive,
|
|
3435
3435
|
args: [{
|
|
3436
3436
|
selector: '[multiSort]',
|
|
@@ -3457,7 +3457,7 @@ class InFilterComponent {
|
|
|
3457
3457
|
constructor() {
|
|
3458
3458
|
this.ref = inject(ChangeDetectorRef);
|
|
3459
3459
|
this.FieldType = FieldType;
|
|
3460
|
-
this.$type = input.required({ alias: 'type' });
|
|
3460
|
+
this.$type = input.required(...(ngDevMode ? [{ debugName: "$type", alias: 'type' }] : [{ alias: 'type' }]));
|
|
3461
3461
|
this.value = [undefined];
|
|
3462
3462
|
this.onChange = (_) => { };
|
|
3463
3463
|
this.onTouched = () => { };
|
|
@@ -3492,14 +3492,14 @@ class InFilterComponent {
|
|
|
3492
3492
|
this.ref.markForCheck();
|
|
3493
3493
|
this.onChange(this.value);
|
|
3494
3494
|
}
|
|
3495
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3496
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
3495
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: InFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3496
|
+
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
3497
|
provide: NG_VALUE_ACCESSOR,
|
|
3498
3498
|
useExisting: InFilterComponent,
|
|
3499
3499
|
multi: true
|
|
3500
3500
|
}], 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
3501
|
}
|
|
3502
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3502
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: InFilterComponent, decorators: [{
|
|
3503
3503
|
type: Component,
|
|
3504
3504
|
args: [{ selector: 'lib-in-filter', changeDetection: ChangeDetectionStrategy.OnPush, providers: [{
|
|
3505
3505
|
provide: NG_VALUE_ACCESSOR,
|
|
@@ -3508,14 +3508,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImpor
|
|
|
3508
3508
|
}], imports: [
|
|
3509
3509
|
FormsModule, AutoFocusDirective, MatDatepickerModule
|
|
3510
3510
|
], 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: () => [] });
|
|
3511
|
+
}], ctorParameters: () => [], propDecorators: { $type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: true }] }] } });
|
|
3512
3512
|
|
|
3513
3513
|
class InListFilterComponent {
|
|
3514
3514
|
constructor() {
|
|
3515
3515
|
this.ref = inject(ChangeDetectorRef);
|
|
3516
3516
|
this.tableState = inject(TableStore);
|
|
3517
|
-
this.$values = input([], { alias: 'values' });
|
|
3518
|
-
this.#e = effect(() => this.writeValue(this.$values()));
|
|
3517
|
+
this.$values = input([], ...(ngDevMode ? [{ debugName: "$values", alias: 'values' }] : [{ alias: 'values' }]));
|
|
3518
|
+
this.#e = effect(() => this.writeValue(this.$values()), ...(ngDevMode ? [{ debugName: "#e" }] : []));
|
|
3519
3519
|
this.value = [];
|
|
3520
3520
|
this.FieldType = FieldType;
|
|
3521
3521
|
this.includes = (value, values) => {
|
|
@@ -3523,20 +3523,20 @@ class InListFilterComponent {
|
|
|
3523
3523
|
};
|
|
3524
3524
|
this.onChange = (_) => { };
|
|
3525
3525
|
this.onTouched = () => { };
|
|
3526
|
-
this.$key = input.required({ alias: 'key' });
|
|
3527
|
-
this.$selectedKeys = signal([]);
|
|
3528
|
-
this.$metaData = computed(() => this.tableState.$getMetaData(this.$key())());
|
|
3526
|
+
this.$key = input.required(...(ngDevMode ? [{ debugName: "$key", alias: 'key' }] : [{ alias: 'key' }]));
|
|
3527
|
+
this.$selectedKeys = signal([], ...(ngDevMode ? [{ debugName: "$selectedKeys" }] : []));
|
|
3528
|
+
this.$metaData = computed(() => this.tableState.$getMetaData(this.$key())(), ...(ngDevMode ? [{ debugName: "$metaData" }] : []));
|
|
3529
3529
|
this.$allValues = computed(() => {
|
|
3530
3530
|
const filterable = this.$metaData()?.additional?.filterOptions?.filterableValues;
|
|
3531
3531
|
return filterable === 'all values' || filterable?.allValues === true;
|
|
3532
|
-
});
|
|
3532
|
+
}, ...(ngDevMode ? [{ debugName: "$allValues" }] : []));
|
|
3533
3533
|
this.$specialBlank = computed(() => {
|
|
3534
3534
|
const specialBlank = this.tableState.selectSignal(s => s.allFilters)()[this.$metaData().key]?.find(k => isBlankValueFilter(k));
|
|
3535
3535
|
if (!specialBlank)
|
|
3536
3536
|
return;
|
|
3537
3537
|
return { key: specialBlank, value: 'BLANK' };
|
|
3538
|
-
});
|
|
3539
|
-
this.$specialBlankSelected = computed(() => this.$selectedKeys().some(k => isBlankValueFilter(k.value)));
|
|
3538
|
+
}, ...(ngDevMode ? [{ debugName: "$specialBlank" }] : []));
|
|
3539
|
+
this.$specialBlankSelected = computed(() => this.$selectedKeys().some(k => isBlankValueFilter(k.value)), ...(ngDevMode ? [{ debugName: "$specialBlankSelected" }] : []));
|
|
3540
3540
|
this.$keyValues = computed(() => {
|
|
3541
3541
|
const metaData = this.$metaData();
|
|
3542
3542
|
if (this.$allValues()) {
|
|
@@ -3549,7 +3549,7 @@ class InListFilterComponent {
|
|
|
3549
3549
|
return Object.entries(metaData.additional.enumMap).map(([key, value]) => ({ key: value, value: +key }));
|
|
3550
3550
|
}
|
|
3551
3551
|
return [];
|
|
3552
|
-
});
|
|
3552
|
+
}, ...(ngDevMode ? [{ debugName: "$keyValues" }] : []));
|
|
3553
3553
|
}
|
|
3554
3554
|
#e;
|
|
3555
3555
|
writeValue(obj) {
|
|
@@ -3582,8 +3582,8 @@ class InListFilterComponent {
|
|
|
3582
3582
|
}
|
|
3583
3583
|
return val.key;
|
|
3584
3584
|
}
|
|
3585
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3586
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
3585
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: InListFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3586
|
+
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
3587
|
provide: NG_VALUE_ACCESSOR,
|
|
3588
3588
|
useExisting: InListFilterComponent,
|
|
3589
3589
|
multi: true
|
|
@@ -3656,7 +3656,7 @@ class InListFilterComponent {
|
|
|
3656
3656
|
}
|
|
3657
3657
|
`, 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
3658
|
}
|
|
3659
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3659
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: InListFilterComponent, decorators: [{
|
|
3660
3660
|
type: Component,
|
|
3661
3661
|
args: [{ selector: 'tb-in-list-filter', template: `
|
|
3662
3662
|
@if($specialBlank(); as specialBlank)
|
|
@@ -3732,76 +3732,76 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImpor
|
|
|
3732
3732
|
}], imports: [
|
|
3733
3733
|
MatCheckboxModule, StopPropagationDirective, SpaceCasePipe, FunctionPipe, DatePipe, CurrencyPipe
|
|
3734
3734
|
], styles: [":host{display:block;max-height:max(50vh,400px);overflow-y:auto}\n"] }]
|
|
3735
|
-
}] });
|
|
3735
|
+
}], propDecorators: { $values: [{ type: i0.Input, args: [{ isSignal: true, alias: "values", required: false }] }], $key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: true }] }] } });
|
|
3736
3736
|
|
|
3737
3737
|
class DateFilterComponent {
|
|
3738
3738
|
constructor() {
|
|
3739
3739
|
this.FilterType = FilterType;
|
|
3740
3740
|
this.FieldType = FieldType;
|
|
3741
|
-
this.$info = input.required({ alias: 'info' });
|
|
3742
|
-
this.$currentFilterType = input.required({ alias: 'currentFilterType' });
|
|
3741
|
+
this.$info = input.required(...(ngDevMode ? [{ debugName: "$info", alias: 'info' }] : [{ alias: 'info' }]));
|
|
3742
|
+
this.$currentFilterType = input.required(...(ngDevMode ? [{ debugName: "$currentFilterType", alias: 'currentFilterType' }] : [{ alias: 'currentFilterType' }]));
|
|
3743
3743
|
this.state = inject(TableStore);
|
|
3744
|
-
this.$metaData = computed(() => this.state.$getMetaData(this.$info()?.key)());
|
|
3744
|
+
this.$metaData = computed(() => this.state.$getMetaData(this.$info()?.key)(), ...(ngDevMode ? [{ debugName: "$metaData" }] : []));
|
|
3745
3745
|
this.$allValuesInMeta = computed(() => {
|
|
3746
3746
|
const filterable = this.$metaData()?.additional?.filterOptions?.filterableValues;
|
|
3747
3747
|
return filterable === 'all values' || filterable?.allValues === true;
|
|
3748
|
-
});
|
|
3748
|
+
}, ...(ngDevMode ? [{ debugName: "$allValuesInMeta" }] : []));
|
|
3749
3749
|
}
|
|
3750
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3751
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
3750
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: DateFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3751
|
+
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
3752
|
}
|
|
3753
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3753
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: DateFilterComponent, decorators: [{
|
|
3754
3754
|
type: Component,
|
|
3755
3755
|
args: [{ selector: 'tb-date-filter', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], imports: [
|
|
3756
3756
|
MatInputModule, FormsModule, MatDatepickerModule, InFilterComponent, InListFilterComponent
|
|
3757
3757
|
], 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
|
-
}] });
|
|
3758
|
+
}], propDecorators: { $info: [{ type: i0.Input, args: [{ isSignal: true, alias: "info", required: true }] }], $currentFilterType: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentFilterType", required: true }] }] } });
|
|
3759
3759
|
|
|
3760
3760
|
class NumberFilterComponent {
|
|
3761
3761
|
constructor() {
|
|
3762
3762
|
this.FilterType = FilterType;
|
|
3763
3763
|
this.FieldType = FieldType;
|
|
3764
|
-
this.$currentFilterType = input.required({ alias: 'currentFilterType' });
|
|
3765
|
-
this.$info = input.required({ alias: 'info' });
|
|
3764
|
+
this.$currentFilterType = input.required(...(ngDevMode ? [{ debugName: "$currentFilterType", alias: 'currentFilterType' }] : [{ alias: 'currentFilterType' }]));
|
|
3765
|
+
this.$info = input.required(...(ngDevMode ? [{ debugName: "$info", alias: 'info' }] : [{ alias: 'info' }]));
|
|
3766
3766
|
this.state = inject(TableStore);
|
|
3767
|
-
this.$metaData = computed(() => this.state.$getMetaData(this.$info()?.key)());
|
|
3767
|
+
this.$metaData = computed(() => this.state.$getMetaData(this.$info()?.key)(), ...(ngDevMode ? [{ debugName: "$metaData" }] : []));
|
|
3768
3768
|
this.$allValuesInMeta = computed(() => {
|
|
3769
3769
|
const filterable = this.$metaData()?.additional?.filterOptions?.filterableValues;
|
|
3770
3770
|
return filterable === 'all values' || filterable?.allValues === true;
|
|
3771
|
-
});
|
|
3771
|
+
}, ...(ngDevMode ? [{ debugName: "$allValuesInMeta" }] : []));
|
|
3772
3772
|
}
|
|
3773
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3774
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
3773
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: NumberFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3774
|
+
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
3775
|
}
|
|
3776
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3776
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: NumberFilterComponent, decorators: [{
|
|
3777
3777
|
type: Component,
|
|
3778
3778
|
args: [{ selector: 'tb-number-filter', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], imports: [
|
|
3779
3779
|
MatInputModule, FormsModule, InFilterComponent, InListFilterComponent
|
|
3780
3780
|
], 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
|
-
}] });
|
|
3781
|
+
}], propDecorators: { $currentFilterType: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentFilterType", required: true }] }], $info: [{ type: i0.Input, args: [{ isSignal: true, alias: "info", required: true }] }] } });
|
|
3782
3782
|
|
|
3783
3783
|
class DateTimeFilterComponent {
|
|
3784
3784
|
constructor() {
|
|
3785
3785
|
this.FilterType = FilterType;
|
|
3786
3786
|
this.FieldType = FieldType;
|
|
3787
|
-
this.$info = input.required({ alias: 'info' });
|
|
3788
|
-
this.$currentFilterType = input.required({ alias: 'currentFilterType' });
|
|
3787
|
+
this.$info = input.required(...(ngDevMode ? [{ debugName: "$info", alias: 'info' }] : [{ alias: 'info' }]));
|
|
3788
|
+
this.$currentFilterType = input.required(...(ngDevMode ? [{ debugName: "$currentFilterType", alias: 'currentFilterType' }] : [{ alias: 'currentFilterType' }]));
|
|
3789
3789
|
this.state = inject(TableStore);
|
|
3790
|
-
this.$metaData = computed(() => this.state.$getMetaData(this.$info()?.key)());
|
|
3790
|
+
this.$metaData = computed(() => this.state.$getMetaData(this.$info()?.key)(), ...(ngDevMode ? [{ debugName: "$metaData" }] : []));
|
|
3791
3791
|
this.$allValuesInMeta = computed(() => {
|
|
3792
3792
|
const filterable = this.$metaData()?.additional?.filterOptions?.filterableValues;
|
|
3793
3793
|
return filterable === 'all values' || filterable?.allValues === true;
|
|
3794
|
-
});
|
|
3794
|
+
}, ...(ngDevMode ? [{ debugName: "$allValuesInMeta" }] : []));
|
|
3795
3795
|
}
|
|
3796
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3797
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
3796
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: DateTimeFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3797
|
+
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
3798
|
}
|
|
3799
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3799
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: DateTimeFilterComponent, decorators: [{
|
|
3800
3800
|
type: Component,
|
|
3801
3801
|
args: [{ selector: 'tb-date-time-filter', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], imports: [
|
|
3802
3802
|
FormsModule, InFilterComponent, InListFilterComponent
|
|
3803
3803
|
], 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
|
-
}] });
|
|
3804
|
+
}], propDecorators: { $info: [{ type: i0.Input, args: [{ isSignal: true, alias: "info", required: true }] }], $currentFilterType: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentFilterType", required: true }] }] } });
|
|
3805
3805
|
|
|
3806
3806
|
class FilterComponent {
|
|
3807
3807
|
constructor() {
|
|
@@ -3809,23 +3809,24 @@ class FilterComponent {
|
|
|
3809
3809
|
this.filterTypes = filterTypeMap;
|
|
3810
3810
|
this.FilterType = FilterType;
|
|
3811
3811
|
this.FieldType = FieldType;
|
|
3812
|
-
this.$filter = input.required({
|
|
3813
|
-
|
|
3814
|
-
|
|
3815
|
-
|
|
3816
|
-
|
|
3812
|
+
this.$filter = input.required(...(ngDevMode ? [{ debugName: "$filter", alias: 'filter',
|
|
3813
|
+
transform: (f) => ({ ...f }) }] : [{
|
|
3814
|
+
alias: 'filter',
|
|
3815
|
+
transform: (f) => ({ ...f })
|
|
3816
|
+
}]));
|
|
3817
|
+
this.$metaData = computed(() => this.state.$getMetaData(this.$filter()?.key)(), ...(ngDevMode ? [{ debugName: "$metaData" }] : []));
|
|
3817
3818
|
this.$allValuesInMeta = computed(() => {
|
|
3818
3819
|
const filterable = this.$metaData()?.additional?.filterOptions?.filterableValues;
|
|
3819
3820
|
return filterable === 'all values' || filterable?.allValues === true;
|
|
3820
|
-
});
|
|
3821
|
+
}, ...(ngDevMode ? [{ debugName: "$allValuesInMeta" }] : []));
|
|
3821
3822
|
this.close$ = new Subject();
|
|
3822
3823
|
this.done$ = new Subject();
|
|
3823
3824
|
this.close = outputFromObservable(this.close$);
|
|
3824
3825
|
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);
|
|
3826
|
+
this.$enteredFilterType = signal(undefined, ...(ngDevMode ? [{ debugName: "$enteredFilterType" }] : []));
|
|
3827
|
+
this.$currentFilterType = computed(() => this.$enteredFilterType() || this.$filter()?.filterType, ...(ngDevMode ? [{ debugName: "$currentFilterType" }] : []));
|
|
3828
|
+
this.$availableFilterTypes = computed(() => this.filterTypes[this.$filter()?.fieldType], ...(ngDevMode ? [{ debugName: "$availableFilterTypes" }] : []));
|
|
3829
|
+
this.$filterBy = computed(() => this.$filter().filterBy, ...(ngDevMode ? [{ debugName: "$filterBy" }] : []));
|
|
3829
3830
|
}
|
|
3830
3831
|
onEnter(filter, event) {
|
|
3831
3832
|
event.preventDefault();
|
|
@@ -3838,10 +3839,10 @@ class FilterComponent {
|
|
|
3838
3839
|
this.state.addFilter({ ...filter, filterBy: this.$filterBy() });
|
|
3839
3840
|
this.done$.next();
|
|
3840
3841
|
}
|
|
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 }); }
|
|
3842
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: FilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3843
|
+
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
3844
|
}
|
|
3844
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3845
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: FilterComponent, decorators: [{
|
|
3845
3846
|
type: Component,
|
|
3846
3847
|
args: [{ selector: 'tb-filter', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
3847
3848
|
MatCardModule, FormsModule, SpaceCasePipe, MatButtonModule, MatTooltipModule, MatIconModule,
|
|
@@ -3849,7 +3850,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImpor
|
|
|
3849
3850
|
DateFilterComponent, DateTimeFilterComponent, MatRadioModule, InFilterComponent, InListFilterComponent,
|
|
3850
3851
|
NgTemplateOutlet
|
|
3851
3852
|
], 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
|
-
}] });
|
|
3853
|
+
}], 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
3854
|
|
|
3854
3855
|
class GenColDisplayerComponent {
|
|
3855
3856
|
constructor() {
|
|
@@ -3858,7 +3859,7 @@ class GenColDisplayerComponent {
|
|
|
3858
3859
|
key: md.key,
|
|
3859
3860
|
displayName: md.displayName,
|
|
3860
3861
|
isVisible: !this.tableState.$hiddenKeys().includes(md.key)
|
|
3861
|
-
})));
|
|
3862
|
+
})), ...(ngDevMode ? [{ debugName: "$columns" }] : []));
|
|
3862
3863
|
}
|
|
3863
3864
|
reset(displayCols) {
|
|
3864
3865
|
displayCols.forEach(c => c.isVisible = true);
|
|
@@ -3874,10 +3875,10 @@ class GenColDisplayerComponent {
|
|
|
3874
3875
|
emit(displayCols) {
|
|
3875
3876
|
this.tableState.setHiddenColumns(displayCols.map(c => ({ key: c.key, visible: c.isVisible })));
|
|
3876
3877
|
}
|
|
3877
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3878
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
3878
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: GenColDisplayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3879
|
+
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
3880
|
}
|
|
3880
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3881
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: GenColDisplayerComponent, decorators: [{
|
|
3881
3882
|
type: Component,
|
|
3882
3883
|
args: [{ selector: 'tb-col-displayer', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
3883
3884
|
MatTooltipModule, MatIconModule, MatButtonModule, MatMenuModule, StopPropagationDirective,
|
|
@@ -3887,17 +3888,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImpor
|
|
|
3887
3888
|
|
|
3888
3889
|
class WrapperFilterStore {
|
|
3889
3890
|
constructor() {
|
|
3890
|
-
this.$filters = signal([]);
|
|
3891
|
+
this.$filters = signal([], ...(ngDevMode ? [{ debugName: "$filters" }] : []));
|
|
3891
3892
|
this.clearAll = () => this.$filters.set([]);
|
|
3892
3893
|
this.deleteByIndex = (index) => this.$filters.update(filters => filters.toSpliced(index, 1));
|
|
3893
3894
|
this.addFilter = (filter) => {
|
|
3894
3895
|
this.$filters.update(filters => [...filters, filter]);
|
|
3895
3896
|
};
|
|
3896
3897
|
}
|
|
3897
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3898
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
3898
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: WrapperFilterStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
3899
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: WrapperFilterStore }); }
|
|
3899
3900
|
}
|
|
3900
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3901
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: WrapperFilterStore, decorators: [{
|
|
3901
3902
|
type: Injectable
|
|
3902
3903
|
}] });
|
|
3903
3904
|
|
|
@@ -3908,7 +3909,7 @@ class GenFilterDisplayerComponent {
|
|
|
3908
3909
|
this.$filterCols = computed(() => {
|
|
3909
3910
|
const mds = this.tableState.$metaDataArray();
|
|
3910
3911
|
return mds.filter(m => m.fieldType !== FieldType.Hidden && (m.fieldType !== FieldType.NotMapped || m.filterLogic?.filterBy) && !m.noFilter);
|
|
3911
|
-
});
|
|
3912
|
+
}, ...(ngDevMode ? [{ debugName: "$filterCols" }] : []));
|
|
3912
3913
|
}
|
|
3913
3914
|
addFilter(metaData) {
|
|
3914
3915
|
this.filterStore.addFilter({
|
|
@@ -3917,10 +3918,10 @@ class GenFilterDisplayerComponent {
|
|
|
3917
3918
|
filterBy: metaData.filterLogic?.filterBy === 'use map' ? metaData.map : metaData.filterLogic?.filterBy
|
|
3918
3919
|
});
|
|
3919
3920
|
}
|
|
3920
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3921
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
3921
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: GenFilterDisplayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3922
|
+
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
3923
|
}
|
|
3923
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3924
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: GenFilterDisplayerComponent, decorators: [{
|
|
3924
3925
|
type: Component,
|
|
3925
3926
|
args: [{ selector: 'tb-filter-displayer', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
3926
3927
|
MatButtonModule, MatMenuModule, MatTooltipModule, StopPropagationDirective, MatIconModule,
|
|
@@ -3933,10 +3934,10 @@ class KeyDisplayPipe {
|
|
|
3933
3934
|
this.tableState = inject(TableStore);
|
|
3934
3935
|
this.transform = (key) => computed(() => this.tableState.$getMetaData(key)()?.displayName || spaceCase(key));
|
|
3935
3936
|
}
|
|
3936
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3937
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "
|
|
3937
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: KeyDisplayPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
3938
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.0", ngImport: i0, type: KeyDisplayPipe, isStandalone: true, name: "keyDisplay" }); }
|
|
3938
3939
|
}
|
|
3939
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3940
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: KeyDisplayPipe, decorators: [{
|
|
3940
3941
|
type: Pipe,
|
|
3941
3942
|
args: [{ name: 'keyDisplay' }]
|
|
3942
3943
|
}] });
|
|
@@ -3948,10 +3949,10 @@ class FormatFilterTypePipe {
|
|
|
3948
3949
|
}
|
|
3949
3950
|
return filterType;
|
|
3950
3951
|
}
|
|
3951
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3952
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "
|
|
3952
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: FormatFilterTypePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
3953
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.0", ngImport: i0, type: FormatFilterTypePipe, isStandalone: true, name: "formatFilterType" }); }
|
|
3953
3954
|
}
|
|
3954
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3955
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: FormatFilterTypePipe, decorators: [{
|
|
3955
3956
|
type: Pipe,
|
|
3956
3957
|
args: [{ name: 'formatFilterType' }]
|
|
3957
3958
|
}] });
|
|
@@ -3963,10 +3964,10 @@ class FormatFilterValuePipe {
|
|
|
3963
3964
|
transform(value, key, filterType) {
|
|
3964
3965
|
return computed(() => transform(value, this.tableState.$getMetaData(key)(), filterType));
|
|
3965
3966
|
}
|
|
3966
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3967
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "
|
|
3967
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: FormatFilterValuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
3968
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.0", ngImport: i0, type: FormatFilterValuePipe, isStandalone: true, name: "formatFilterValue" }); }
|
|
3968
3969
|
}
|
|
3969
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3970
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: FormatFilterValuePipe, decorators: [{
|
|
3970
3971
|
type: Pipe,
|
|
3971
3972
|
args: [{ name: 'formatFilterValue' }]
|
|
3972
3973
|
}] });
|
|
@@ -4025,8 +4026,8 @@ class FilterChipsComponent {
|
|
|
4025
4026
|
constructor() {
|
|
4026
4027
|
this.tableState = inject(TableStore);
|
|
4027
4028
|
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));
|
|
4029
|
+
this.$filters = computed(() => this.tableState.$filtersArray().filter(f => isFilterInfo(f) && !f._isExternallyManaged), ...(ngDevMode ? [{ debugName: "$filters" }] : []));
|
|
4030
|
+
this.$certainCustomFilters = computed(() => this.tableState.$filtersArray().filter(f => isCustomFilter(f) && f.chipLabel), ...(ngDevMode ? [{ debugName: "$certainCustomFilters" }] : []));
|
|
4030
4031
|
this.$currentFilters = this.filterStore.$filters;
|
|
4031
4032
|
}
|
|
4032
4033
|
deleteByIndex(index) {
|
|
@@ -4038,10 +4039,10 @@ class FilterChipsComponent {
|
|
|
4038
4039
|
clearAll() {
|
|
4039
4040
|
this.filterStore.clearAll();
|
|
4040
4041
|
}
|
|
4041
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4042
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
4042
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: FilterChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4043
|
+
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
4044
|
}
|
|
4044
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4045
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: FilterChipsComponent, decorators: [{
|
|
4045
4046
|
type: Component,
|
|
4046
4047
|
args: [{ selector: 'lib-filter-list', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
4047
4048
|
MatButtonModule, MatTooltipModule, MatIconModule, FilterComponent,
|
|
@@ -4051,14 +4052,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImpor
|
|
|
4051
4052
|
|
|
4052
4053
|
class RouterLinkColumnComponent {
|
|
4053
4054
|
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: "
|
|
4055
|
+
this.additional = input.required(...(ngDevMode ? [{ debugName: "additional" }] : []));
|
|
4056
|
+
this.element = input.required(...(ngDevMode ? [{ debugName: "element" }] : []));
|
|
4057
|
+
this.queryParams = computed(() => this.additional().routerLinkOptions.queryParams(this.element()), ...(ngDevMode ? [{ debugName: "queryParams" }] : []));
|
|
4058
|
+
this.routerLinkOptions = computed(() => this.additional().routerLinkOptions, ...(ngDevMode ? [{ debugName: "routerLinkOptions" }] : []));
|
|
4059
|
+
this.link = input.required(...(ngDevMode ? [{ debugName: "link" }] : []));
|
|
4060
|
+
}
|
|
4061
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: RouterLinkColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4062
|
+
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
4063
|
<a target="{{additional().target}}"
|
|
4063
4064
|
[routerLink]=" [link()]"
|
|
4064
4065
|
[queryParams]="queryParams()"
|
|
@@ -4070,7 +4071,7 @@ class RouterLinkColumnComponent {
|
|
|
4070
4071
|
</a>
|
|
4071
4072
|
`, 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
4073
|
}
|
|
4073
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4074
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: RouterLinkColumnComponent, decorators: [{
|
|
4074
4075
|
type: Component,
|
|
4075
4076
|
args: [{
|
|
4076
4077
|
selector: "tb-router-link-column",
|
|
@@ -4090,21 +4091,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImpor
|
|
|
4090
4091
|
</a>
|
|
4091
4092
|
`
|
|
4092
4093
|
}]
|
|
4093
|
-
}] });
|
|
4094
|
+
}], 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
4095
|
class LinkColumnComponent {
|
|
4095
4096
|
constructor() {
|
|
4096
|
-
this.element = input.required();
|
|
4097
|
-
this.additional = input.required();
|
|
4098
|
-
this.link = input.required();
|
|
4097
|
+
this.element = input.required(...(ngDevMode ? [{ debugName: "element" }] : []));
|
|
4098
|
+
this.additional = input.required(...(ngDevMode ? [{ debugName: "additional" }] : []));
|
|
4099
|
+
this.link = input.required(...(ngDevMode ? [{ debugName: "link" }] : []));
|
|
4099
4100
|
}
|
|
4100
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4101
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
4101
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: LinkColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4102
|
+
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
4103
|
<a target="{{additional().target}}" href="{{link()}}">
|
|
4103
4104
|
<ng-content></ng-content>
|
|
4104
4105
|
</a>
|
|
4105
4106
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4106
4107
|
}
|
|
4107
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4108
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: LinkColumnComponent, decorators: [{
|
|
4108
4109
|
type: Component,
|
|
4109
4110
|
args: [{
|
|
4110
4111
|
selector: "tb-link-column",
|
|
@@ -4115,22 +4116,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImpor
|
|
|
4115
4116
|
</a>
|
|
4116
4117
|
`
|
|
4117
4118
|
}]
|
|
4118
|
-
}] });
|
|
4119
|
+
}], 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
4120
|
|
|
4120
4121
|
class ArrayCommaColumnComponent {
|
|
4121
4122
|
constructor() {
|
|
4122
|
-
this.value = input.required();
|
|
4123
|
-
this.additional = input(3);
|
|
4124
|
-
this.displayArray = computed(() => (this.value() || []).slice(0, this.additional()));
|
|
4123
|
+
this.value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
4124
|
+
this.additional = input(3, ...(ngDevMode ? [{ debugName: "additional" }] : []));
|
|
4125
|
+
this.displayArray = computed(() => (this.value() || []).slice(0, this.additional()), ...(ngDevMode ? [{ debugName: "displayArray" }] : []));
|
|
4125
4126
|
}
|
|
4126
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4127
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
4127
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ArrayCommaColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4128
|
+
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
4129
|
@for(val of displayArray(); track $index){
|
|
4129
4130
|
{{val + (!$last ? ',' : '')}}
|
|
4130
4131
|
}
|
|
4131
4132
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4132
4133
|
}
|
|
4133
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4134
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ArrayCommaColumnComponent, decorators: [{
|
|
4134
4135
|
type: Component,
|
|
4135
4136
|
args: [{
|
|
4136
4137
|
selector: 'tb-comma-array-column',
|
|
@@ -4141,22 +4142,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImpor
|
|
|
4141
4142
|
`,
|
|
4142
4143
|
changeDetection: ChangeDetectionStrategy.OnPush
|
|
4143
4144
|
}]
|
|
4144
|
-
}] });
|
|
4145
|
+
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], additional: [{ type: i0.Input, args: [{ isSignal: true, alias: "additional", required: false }] }] } });
|
|
4145
4146
|
class ArrayNewLineColumnComponent {
|
|
4146
4147
|
constructor() {
|
|
4147
|
-
this.value = input.required();
|
|
4148
|
-
this.additional = input(3);
|
|
4149
|
-
this.displayArray = computed(() => (this.value() || []).slice(0, this.additional()));
|
|
4148
|
+
this.value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
4149
|
+
this.additional = input(3, ...(ngDevMode ? [{ debugName: "additional" }] : []));
|
|
4150
|
+
this.displayArray = computed(() => (this.value() || []).slice(0, this.additional()), ...(ngDevMode ? [{ debugName: "displayArray" }] : []));
|
|
4150
4151
|
}
|
|
4151
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4152
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
4152
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ArrayNewLineColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4153
|
+
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
4154
|
@for(val of displayArray(); track $index){
|
|
4154
4155
|
{{val}}
|
|
4155
4156
|
@if(!$last){ <br/> }
|
|
4156
4157
|
}
|
|
4157
4158
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4158
4159
|
}
|
|
4159
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4160
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ArrayNewLineColumnComponent, decorators: [{
|
|
4160
4161
|
type: Component,
|
|
4161
4162
|
args: [{
|
|
4162
4163
|
selector: 'tb-new-line-array-column',
|
|
@@ -4168,7 +4169,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImpor
|
|
|
4168
4169
|
`,
|
|
4169
4170
|
changeDetection: ChangeDetectionStrategy.OnPush
|
|
4170
4171
|
}]
|
|
4171
|
-
}] });
|
|
4172
|
+
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], additional: [{ type: i0.Input, args: [{ isSignal: true, alias: "additional", required: false }] }] } });
|
|
4172
4173
|
|
|
4173
4174
|
class InitializationComponent {
|
|
4174
4175
|
constructor() {
|
|
@@ -4182,17 +4183,17 @@ class InitializationComponent {
|
|
|
4182
4183
|
this.$defaultTemplate = viewChild.required('default');
|
|
4183
4184
|
this.$defaultWithIcon = viewChild.required('defaultWithIcon');
|
|
4184
4185
|
}
|
|
4185
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4186
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
4186
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: InitializationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4187
|
+
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
4188
|
}
|
|
4188
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4189
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: InitializationComponent, decorators: [{
|
|
4189
4190
|
type: Component,
|
|
4190
4191
|
args: [{ selector: 'initialization', imports: [
|
|
4191
4192
|
LinkColumnComponent, ArrayCommaColumnComponent, MatIcon,
|
|
4192
4193
|
RouterLinkColumnComponent, ArrayNewLineColumnComponent,
|
|
4193
4194
|
StylerDirective, FunctionPipe
|
|
4194
4195
|
], 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
|
-
}] });
|
|
4196
|
+
}], 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
4197
|
|
|
4197
4198
|
class TableTemplateService {
|
|
4198
4199
|
constructor() {
|
|
@@ -4230,10 +4231,10 @@ class TableTemplateService {
|
|
|
4230
4231
|
}
|
|
4231
4232
|
return this.initializationComponentInstance.$defaultTemplate();
|
|
4232
4233
|
}
|
|
4233
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4234
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
4234
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TableTemplateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
4235
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TableTemplateService, providedIn: 'root' }); }
|
|
4235
4236
|
}
|
|
4236
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4237
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TableTemplateService, decorators: [{
|
|
4237
4238
|
type: Injectable,
|
|
4238
4239
|
args: [{ providedIn: 'root' }]
|
|
4239
4240
|
}] });
|
|
@@ -4244,12 +4245,12 @@ class ColumnHeaderMenuComponent {
|
|
|
4244
4245
|
this.filterStore = inject(WrapperFilterStore, { optional: true });
|
|
4245
4246
|
this.FieldType = FieldType;
|
|
4246
4247
|
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());
|
|
4248
|
+
this.$metaData = input.required(...(ngDevMode ? [{ debugName: "$metaData", alias: 'metaData' }] : [{ alias: 'metaData' }]));
|
|
4249
|
+
this.$fieldType = computed(() => this.$metaData().fieldType, ...(ngDevMode ? [{ debugName: "$fieldType" }] : []));
|
|
4250
|
+
this.$filterFieldType = computed(() => this.$metaData().filterLogic?.filterType || this.$fieldType(), ...(ngDevMode ? [{ debugName: "$filterFieldType" }] : []));
|
|
4250
4251
|
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);
|
|
4252
|
+
.find(f => f.key === this.$metaData().key && f.filterType === this.$currentFilterType())?.filterValue, ...(ngDevMode ? [{ debugName: "$filterValue" }] : []));
|
|
4253
|
+
this.$trigger = viewChild(MatMenuTrigger, ...(ngDevMode ? [{ debugName: "$trigger" }] : []));
|
|
4253
4254
|
this.$metaFilterType = computed(() => {
|
|
4254
4255
|
if (this.$metaData().additional?.filterOptions?.filterableValues) {
|
|
4255
4256
|
return FilterType.In;
|
|
@@ -4273,9 +4274,9 @@ class ColumnHeaderMenuComponent {
|
|
|
4273
4274
|
return FilterType.In;
|
|
4274
4275
|
default: return FilterType.StringContains;
|
|
4275
4276
|
}
|
|
4276
|
-
});
|
|
4277
|
-
this.$currentFilterType = linkedSignal(() => this.$metaFilterType());
|
|
4278
|
-
this.$key = computed(() => this.$metaData().key || crypto.randomUUID());
|
|
4277
|
+
}, ...(ngDevMode ? [{ debugName: "$metaFilterType" }] : []));
|
|
4278
|
+
this.$currentFilterType = linkedSignal(() => this.$metaFilterType(), ...(ngDevMode ? [{ debugName: "$currentFilterType" }] : []));
|
|
4279
|
+
this.$key = computed(() => this.$metaData().key || crypto.randomUUID(), ...(ngDevMode ? [{ debugName: "$key" }] : []));
|
|
4279
4280
|
this.addFilter$ = new Subject();
|
|
4280
4281
|
}
|
|
4281
4282
|
hideField(key) {
|
|
@@ -4317,17 +4318,17 @@ class ColumnHeaderMenuComponent {
|
|
|
4317
4318
|
filterBy: metaData.filterLogic?.filterBy === 'use map' ? metaData.map : metaData.filterLogic?.filterBy
|
|
4318
4319
|
});
|
|
4319
4320
|
}
|
|
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 }); }
|
|
4321
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ColumnHeaderMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4322
|
+
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
4323
|
}
|
|
4323
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4324
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ColumnHeaderMenuComponent, decorators: [{
|
|
4324
4325
|
type: Component,
|
|
4325
4326
|
args: [{ selector: 'tb-header-menu', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
4326
4327
|
MatMenuModule, MatIconModule, MatButtonModule, FormsModule, InListFilterComponent,
|
|
4327
4328
|
MatInputModule, MatTooltipModule, StopPropagationDirective, MatRadioModule, MatDatepickerModule,
|
|
4328
4329
|
DialogDirective, FilterComponent
|
|
4329
4330
|
], 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
|
-
}] });
|
|
4331
|
+
}], propDecorators: { $metaData: [{ type: i0.Input, args: [{ isSignal: true, alias: "metaData", required: true }] }], $trigger: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatMenuTrigger), { isSignal: true }] }] } });
|
|
4331
4332
|
|
|
4332
4333
|
class ColumnTotalPipe {
|
|
4333
4334
|
transform(data, metaData) {
|
|
@@ -4337,10 +4338,10 @@ class ColumnTotalPipe {
|
|
|
4337
4338
|
return sumBy(dataToCalculate, metaData.key);
|
|
4338
4339
|
}
|
|
4339
4340
|
}
|
|
4340
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4341
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "
|
|
4341
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ColumnTotalPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
4342
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.0", ngImport: i0, type: ColumnTotalPipe, isStandalone: true, name: "columnTotal" }); }
|
|
4342
4343
|
}
|
|
4343
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4344
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ColumnTotalPipe, decorators: [{
|
|
4344
4345
|
type: Pipe,
|
|
4345
4346
|
args: [{
|
|
4346
4347
|
name: 'columnTotal',
|
|
@@ -4401,9 +4402,9 @@ class ColumnBuilderComponent {
|
|
|
4401
4402
|
this.templateService = inject(TableTemplateService);
|
|
4402
4403
|
this.tableConfig = inject(TableBuilderConfigToken);
|
|
4403
4404
|
this.injector = inject(Injector);
|
|
4404
|
-
this.$columnDef = viewChild(MatColumnDef);
|
|
4405
|
-
this.$bodyTemplate = viewChild('body');
|
|
4406
|
-
this.$metaData = signal(undefined);
|
|
4405
|
+
this.$columnDef = viewChild(MatColumnDef, ...(ngDevMode ? [{ debugName: "$columnDef" }] : []));
|
|
4406
|
+
this.$bodyTemplate = viewChild('body', ...(ngDevMode ? [{ debugName: "$bodyTemplate" }] : []));
|
|
4407
|
+
this.$metaData = signal(undefined, ...(ngDevMode ? [{ debugName: "$metaData" }] : []));
|
|
4407
4408
|
this.$additional = computed(() => {
|
|
4408
4409
|
const metaData = this.$metaData();
|
|
4409
4410
|
if (!metaData)
|
|
@@ -4416,30 +4417,30 @@ class ColumnBuilderComponent {
|
|
|
4416
4417
|
return metaData.additional?.limit || this.tableConfig?.arrayDefaults?.limit;
|
|
4417
4418
|
}
|
|
4418
4419
|
return undefined;
|
|
4419
|
-
});
|
|
4420
|
-
this.$customCell = signal(undefined);
|
|
4420
|
+
}, ...(ngDevMode ? [{ debugName: "$additional" }] : []));
|
|
4421
|
+
this.$customCell = signal(undefined, ...(ngDevMode ? [{ debugName: "$customCell" }] : []));
|
|
4421
4422
|
this.$transform = computed(() => {
|
|
4422
4423
|
const metaData = this.$metaData();
|
|
4423
4424
|
if (!metaData)
|
|
4424
4425
|
return;
|
|
4425
4426
|
return createTransformer(metaData, this.config);
|
|
4426
|
-
});
|
|
4427
|
+
}, ...(ngDevMode ? [{ debugName: "$transform" }] : []));
|
|
4427
4428
|
this.$innerTemplate = computed(() => {
|
|
4428
4429
|
const metaData = this.$metaData();
|
|
4429
4430
|
if (!metaData)
|
|
4430
4431
|
return;
|
|
4431
4432
|
return metaData.template || this.$customCell()?.$templateRef() || this.templateService.getTemplate(metaData);
|
|
4432
|
-
});
|
|
4433
|
+
}, ...(ngDevMode ? [{ debugName: "$innerTemplate" }] : []));
|
|
4433
4434
|
this.$showFilters = computed(() => {
|
|
4434
4435
|
const metaData = this.$metaData();
|
|
4435
4436
|
if (!metaData)
|
|
4436
4437
|
return;
|
|
4437
4438
|
const settings = this.state.$tableSettings();
|
|
4438
4439
|
return !(settings.hideColumnHeaderFilters || metaData.noFilter);
|
|
4439
|
-
});
|
|
4440
|
+
}, ...(ngDevMode ? [{ debugName: "$showFilters" }] : []));
|
|
4440
4441
|
this.$outerTemplate = computed(() => {
|
|
4441
4442
|
return this.$customCell()?.columnDef?.cell?.template ?? this.$bodyTemplate();
|
|
4442
|
-
});
|
|
4443
|
+
}, ...(ngDevMode ? [{ debugName: "$outerTemplate" }] : []));
|
|
4443
4444
|
this.$classes = computed(() => {
|
|
4444
4445
|
const metaData = this.$metaData();
|
|
4445
4446
|
if (!metaData)
|
|
@@ -4451,13 +4452,13 @@ class ColumnBuilderComponent {
|
|
|
4451
4452
|
});
|
|
4452
4453
|
}
|
|
4453
4454
|
return metaData.classes;
|
|
4454
|
-
});
|
|
4455
|
+
}, ...(ngDevMode ? [{ debugName: "$classes" }] : []));
|
|
4455
4456
|
this.$styles = computed(() => {
|
|
4456
4457
|
const metaData = this.$metaData();
|
|
4457
4458
|
if (!metaData)
|
|
4458
4459
|
return;
|
|
4459
4460
|
return columnStyles(metaData, this.state.$getUserDefinedWidth(metaData.key)(), this.state.$tableSettingsMinWidth());
|
|
4460
|
-
});
|
|
4461
|
+
}, ...(ngDevMode ? [{ debugName: "$styles" }] : []));
|
|
4461
4462
|
this.viewInited = false;
|
|
4462
4463
|
this.onViewInit = () => { };
|
|
4463
4464
|
this.whenViewInited = (callback) => {
|
|
@@ -4491,12 +4492,12 @@ class ColumnBuilderComponent {
|
|
|
4491
4492
|
metaData.click(element, key, event);
|
|
4492
4493
|
}
|
|
4493
4494
|
}
|
|
4494
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4495
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
4495
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ColumnBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4496
|
+
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)\r\n {\r\n <div mat-sort-header style=\"width: 100%\" [disabled]=\"metaData.noSort\">\r\n {{ metaData.displayName ? metaData.displayName : ( metaData.key | spaceCase ) }}\r\n </div>\r\n }\r\n @else if(metaData.fieldType === FieldType.NotMapped)\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
4497
|
{ provide: CDK_DROP_LIST, useExisting: CdkDropList },
|
|
4497
4498
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4498
4499
|
}
|
|
4499
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4500
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ColumnBuilderComponent, decorators: [{
|
|
4500
4501
|
type: Component,
|
|
4501
4502
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [
|
|
4502
4503
|
{ provide: CDK_DROP_LIST, useExisting: CdkDropList },
|
|
@@ -4505,7 +4506,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImpor
|
|
|
4505
4506
|
ConditionalClassesDirective, DragDropModule, MatSortModule, SpaceCasePipe, ColumnHeaderMenuComponent,
|
|
4506
4507
|
MatTooltipModule, ColumnTotalPipe, CurrencyPipe, DecimalPipe
|
|
4507
4508
|
], 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%\" [disabled]=\"metaData.noSort\">\r\n {{ metaData.displayName ? metaData.displayName : ( metaData.key | spaceCase ) }}\r\n </div>\r\n }\r\n @else if(metaData.fieldType === FieldType.NotMapped)\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"] }]
|
|
4508
|
-
}] });
|
|
4509
|
+
}], propDecorators: { $columnDef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatColumnDef), { isSignal: true }] }], $bodyTemplate: [{ type: i0.ViewChild, args: ['body', { isSignal: true }] }] } });
|
|
4509
4510
|
|
|
4510
4511
|
// 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
4512
|
// 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 +4547,10 @@ class DataStore extends ComponentStore {
|
|
|
4546
4547
|
constructor() {
|
|
4547
4548
|
super({ ...defaultDataState });
|
|
4548
4549
|
}
|
|
4549
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4550
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
4550
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: DataStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
4551
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: DataStore }); }
|
|
4551
4552
|
}
|
|
4552
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4553
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: DataStore, decorators: [{
|
|
4553
4554
|
type: Injectable
|
|
4554
4555
|
}], ctorParameters: () => [] });
|
|
4555
4556
|
|
|
@@ -4713,17 +4714,17 @@ class GenericTableComponent {
|
|
|
4713
4714
|
this._injector = inject(Injector);
|
|
4714
4715
|
this.tableContainer = inject(TableContainerComponent, { optional: true });
|
|
4715
4716
|
this.smallFooter = 10;
|
|
4716
|
-
this.$headerRow = viewChild(MatHeaderRowDef);
|
|
4717
|
-
this.$footerRow = viewChild(MatFooterRowDef);
|
|
4718
|
-
this.$table = viewChild(MatTable);
|
|
4719
|
-
this.$dropList = viewChild(CdkDropList);
|
|
4717
|
+
this.$headerRow = viewChild(MatHeaderRowDef, ...(ngDevMode ? [{ debugName: "$headerRow" }] : []));
|
|
4718
|
+
this.$footerRow = viewChild(MatFooterRowDef, ...(ngDevMode ? [{ debugName: "$footerRow" }] : []));
|
|
4719
|
+
this.$table = viewChild(MatTable, ...(ngDevMode ? [{ debugName: "$table" }] : []));
|
|
4720
|
+
this.$dropList = viewChild(CdkDropList, ...(ngDevMode ? [{ debugName: "$dropList" }] : []));
|
|
4720
4721
|
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' });
|
|
4722
|
+
this.$displayData = input.required(...(ngDevMode ? [{ debugName: "$displayData", alias: 'displayData' }] : [{ alias: 'displayData' }]));
|
|
4723
|
+
this.$displayDataLength = computed(() => this.$displayData().length, ...(ngDevMode ? [{ debugName: "$displayDataLength" }] : []));
|
|
4724
|
+
this.$data = input.required(...(ngDevMode ? [{ debugName: "$data", alias: 'data' }] : [{ alias: 'data' }]));
|
|
4725
|
+
this.$rows = input([], ...(ngDevMode ? [{ debugName: "$rows", alias: 'rows' }] : [{ alias: 'rows' }]));
|
|
4726
|
+
this.$columnInfos = input.required(...(ngDevMode ? [{ debugName: "$columnInfos", alias: 'columnInfos' }] : [{ alias: 'columnInfos' }]));
|
|
4727
|
+
this.$dataSource = input.required(...(ngDevMode ? [{ debugName: "$dataSource", alias: 'dataSource' }] : [{ alias: 'dataSource' }]));
|
|
4727
4728
|
this.$keys = computed(() => {
|
|
4728
4729
|
const displayed = this.state.$orderedVisibleColumns();
|
|
4729
4730
|
const built = this.$columns();
|
|
@@ -4735,9 +4736,9 @@ class GenericTableComponent {
|
|
|
4735
4736
|
keys.unshift('index');
|
|
4736
4737
|
}
|
|
4737
4738
|
return keys;
|
|
4738
|
-
});
|
|
4739
|
+
}, ...(ngDevMode ? [{ debugName: "$keys" }] : []));
|
|
4739
4740
|
this.keys$ = toObservable(this.$keys);
|
|
4740
|
-
this.$trackBy = input(undefined, { alias: 'trackBy' });
|
|
4741
|
+
this.$trackBy = input(undefined, ...(ngDevMode ? [{ debugName: "$trackBy", alias: 'trackBy' }] : [{ alias: 'trackBy' }]));
|
|
4741
4742
|
this.$trackByFunction = computed(() => {
|
|
4742
4743
|
const trackBy = this.$trackBy();
|
|
4743
4744
|
if (!trackBy)
|
|
@@ -4747,17 +4748,17 @@ class GenericTableComponent {
|
|
|
4747
4748
|
return `${item.level}-${item[initIndexSymbol]}`;
|
|
4748
4749
|
return typeof trackBy === 'function' ? trackBy(item) : item[trackBy];
|
|
4749
4750
|
});
|
|
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));
|
|
4751
|
+
}, ...(ngDevMode ? [{ debugName: "$trackByFunction" }] : []));
|
|
4752
|
+
this.$hasFooterMeta = computed(() => this.state.$metaDataArray().some(md => !!md.additional?.footer), ...(ngDevMode ? [{ debugName: "$hasFooterMeta" }] : []));
|
|
4753
|
+
this.$hasCustomFooter = computed(() => this.$columnInfos()?.some(ci => !!ci.customCell?.columnDef?.footerCell), ...(ngDevMode ? [{ debugName: "$hasCustomFooter" }] : []));
|
|
4753
4754
|
this.$footerRowStyle = computed(() => {
|
|
4754
4755
|
const hasData = !!this.$displayDataLength();
|
|
4755
4756
|
const metaFooter = this.$hasFooterMeta();
|
|
4756
4757
|
const customFooter = this.$hasCustomFooter();
|
|
4757
4758
|
const hasSelectionColumn = this.state.$props().selectionColumn;
|
|
4758
4759
|
return customFooter || hasSelectionColumn || (hasData && metaFooter) ? 'regular-footer' : hasData ? 'no-footer' : 'small-footer';
|
|
4759
|
-
});
|
|
4760
|
-
this.$showFooterRow = computed(() => this.$footerRowStyle() !== 'no-footer');
|
|
4760
|
+
}, ...(ngDevMode ? [{ debugName: "$footerRowStyle" }] : []));
|
|
4761
|
+
this.$showFooterRow = computed(() => this.$footerRowStyle() !== 'no-footer', ...(ngDevMode ? [{ debugName: "$showFooterRow" }] : []));
|
|
4761
4762
|
this.injector = Injector.create({
|
|
4762
4763
|
providers: [
|
|
4763
4764
|
{ provide: MatTable, useFactory: () => this.$table() },
|
|
@@ -4765,10 +4766,10 @@ class GenericTableComponent {
|
|
|
4765
4766
|
],
|
|
4766
4767
|
parent: this._injector
|
|
4767
4768
|
});
|
|
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);
|
|
4769
|
+
this.$hasIndexColumn = computed(() => this.state.selectSignal(state => state.props.indexColumn)(), ...(ngDevMode ? [{ debugName: "$hasIndexColumn" }] : []));
|
|
4770
|
+
this.$columns = signal({}, ...(ngDevMode ? [{ debugName: "$columns" }] : []));
|
|
4771
|
+
this.$showHeader = computed(() => !this.state.$tableSettings().hideColumnHeader, ...(ngDevMode ? [{ debugName: "$showHeader" }] : []));
|
|
4772
|
+
this.$paginatorHeight = signal(0, ...(ngDevMode ? [{ debugName: "$paginatorHeight" }] : []));
|
|
4772
4773
|
this.r = new ResizeObserver(entries => this.$paginatorHeight.set(entries[0]?.contentRect.height || 0));
|
|
4773
4774
|
this.#rr = effect((cleanup) => {
|
|
4774
4775
|
const paginatorWrapper = this.tableContainer?.$paginatorWrapper();
|
|
@@ -4776,9 +4777,9 @@ class GenericTableComponent {
|
|
|
4776
4777
|
return;
|
|
4777
4778
|
this.r.observe(paginatorWrapper.nativeElement);
|
|
4778
4779
|
cleanup(() => { this.r.disconnect(); });
|
|
4779
|
-
});
|
|
4780
|
+
}, ...(ngDevMode ? [{ debugName: "#rr" }] : []));
|
|
4780
4781
|
this.$offset = this.dataStore.selectSignal(s => s.virtualScrollOffset);
|
|
4781
|
-
this.$footerOffset = computed(() => this.$offset() + this.$paginatorHeight());
|
|
4782
|
+
this.$footerOffset = computed(() => this.$offset() + this.$paginatorHeight(), ...(ngDevMode ? [{ debugName: "$footerOffset" }] : []));
|
|
4782
4783
|
this.#buildColumnsEffect = effect(() => {
|
|
4783
4784
|
const columnInfos = this.$columnInfos() || [];
|
|
4784
4785
|
const table = this.$table();
|
|
@@ -4794,7 +4795,7 @@ class GenericTableComponent {
|
|
|
4794
4795
|
});
|
|
4795
4796
|
columnInfos.forEach(ci => this.buildColumn(ci));
|
|
4796
4797
|
});
|
|
4797
|
-
});
|
|
4798
|
+
}, ...(ngDevMode ? [{ debugName: "#buildColumnsEffect" }] : []));
|
|
4798
4799
|
this.#buildRowsEffect = effect(() => {
|
|
4799
4800
|
const table = this.$table();
|
|
4800
4801
|
const rows = this.$rows();
|
|
@@ -4808,7 +4809,7 @@ class GenericTableComponent {
|
|
|
4808
4809
|
table.addRowDef(row);
|
|
4809
4810
|
});
|
|
4810
4811
|
});
|
|
4811
|
-
});
|
|
4812
|
+
}, ...(ngDevMode ? [{ debugName: "#buildRowsEffect" }] : []));
|
|
4812
4813
|
this.#buildHeaderRowEffect = effect(() => {
|
|
4813
4814
|
const headerRow = this.$headerRow();
|
|
4814
4815
|
const showHeader = this.$showHeader();
|
|
@@ -4819,7 +4820,7 @@ class GenericTableComponent {
|
|
|
4819
4820
|
else if (headerRow && table)
|
|
4820
4821
|
table.removeHeaderRowDef(headerRow);
|
|
4821
4822
|
});
|
|
4822
|
-
});
|
|
4823
|
+
}, ...(ngDevMode ? [{ debugName: "#buildHeaderRowEffect" }] : []));
|
|
4823
4824
|
this.#buildFooterEffect = effect(() => {
|
|
4824
4825
|
const footerRow = this.$footerRow();
|
|
4825
4826
|
const showFooter = this.$showFooterRow();
|
|
@@ -4830,9 +4831,9 @@ class GenericTableComponent {
|
|
|
4830
4831
|
else if (footerRow && table)
|
|
4831
4832
|
table.removeFooterRowDef(footerRow);
|
|
4832
4833
|
});
|
|
4833
|
-
});
|
|
4834
|
-
this.$usePaginator = computed(() => this.state.$tableSettings().usePaginator);
|
|
4835
|
-
this.$useVirtualScroll = computed(() => this.state.$viewType().includes('virtual'));
|
|
4834
|
+
}, ...(ngDevMode ? [{ debugName: "#buildFooterEffect" }] : []));
|
|
4835
|
+
this.$usePaginator = computed(() => this.state.$tableSettings().usePaginator, ...(ngDevMode ? [{ debugName: "$usePaginator" }] : []));
|
|
4836
|
+
this.$useVirtualScroll = computed(() => this.state.$viewType().includes('virtual'), ...(ngDevMode ? [{ debugName: "$useVirtualScroll" }] : []));
|
|
4836
4837
|
this.$virtualStart = this.dataStore.selectSignal(d => d.virtualEnds.start);
|
|
4837
4838
|
this.$offsetIndex = computed(() => {
|
|
4838
4839
|
const virtualStart = this.$virtualStart();
|
|
@@ -4845,8 +4846,8 @@ class GenericTableComponent {
|
|
|
4845
4846
|
return pageSize * currentPage;
|
|
4846
4847
|
}
|
|
4847
4848
|
return 0;
|
|
4848
|
-
});
|
|
4849
|
-
this.$hasSelectColumn = computed(() => this.state.selectSignal(state => state.props.selectionColumn)());
|
|
4849
|
+
}, ...(ngDevMode ? [{ debugName: "$offsetIndex" }] : []));
|
|
4850
|
+
this.$hasSelectColumn = computed(() => this.state.selectSignal(state => state.props.selectionColumn)(), ...(ngDevMode ? [{ debugName: "$hasSelectColumn" }] : []));
|
|
4850
4851
|
this.$selection = computed(() => {
|
|
4851
4852
|
const trackBy = this.$trackBy();
|
|
4852
4853
|
if (trackBy) {
|
|
@@ -4862,7 +4863,7 @@ class GenericTableComponent {
|
|
|
4862
4863
|
this.checkForPreviousSelection(model);
|
|
4863
4864
|
});
|
|
4864
4865
|
return model;
|
|
4865
|
-
});
|
|
4866
|
+
}, ...(ngDevMode ? [{ debugName: "$selection" }] : []));
|
|
4866
4867
|
this.selectionChange$ = toObservable(this.$selection).pipe(switchMap(s => s.changed));
|
|
4867
4868
|
this.$selectionChange = toSignal(this.selectionChange$);
|
|
4868
4869
|
this.onSelectionChangeEffect = effect(() => {
|
|
@@ -4870,20 +4871,20 @@ class GenericTableComponent {
|
|
|
4870
4871
|
if (!selectionChange)
|
|
4871
4872
|
return;
|
|
4872
4873
|
untracked(() => this.selection$.emit(selectionChange));
|
|
4873
|
-
});
|
|
4874
|
+
}, ...(ngDevMode ? [{ debugName: "onSelectionChangeEffect" }] : []));
|
|
4874
4875
|
this.$isAllSelected = computed(() => {
|
|
4875
4876
|
this.$selectionChange();
|
|
4876
4877
|
const selected = this.$selection()?.selected;
|
|
4877
4878
|
if (!selected?.length)
|
|
4878
4879
|
return false;
|
|
4879
4880
|
return this.$selectableData()?.length === selected.length;
|
|
4880
|
-
});
|
|
4881
|
+
}, ...(ngDevMode ? [{ debugName: "$isAllSelected" }] : []));
|
|
4881
4882
|
this.$masterToggleChecked = this.$isAllSelected;
|
|
4882
4883
|
this.$masterToggleIndeterminate = computed(() => {
|
|
4883
4884
|
this.$selectionChange();
|
|
4884
4885
|
return !!this.$selection()?.selected.length && !this.$masterToggleChecked();
|
|
4885
|
-
});
|
|
4886
|
-
this.$paginated = computed(() => this.state.$viewType() === 'virtual paginator' || this.state.$viewType() === 'paginator');
|
|
4886
|
+
}, ...(ngDevMode ? [{ debugName: "$masterToggleIndeterminate" }] : []));
|
|
4887
|
+
this.$paginated = computed(() => this.state.$viewType() === 'virtual paginator' || this.state.$viewType() === 'paginator', ...(ngDevMode ? [{ debugName: "$paginated" }] : []));
|
|
4887
4888
|
this.$selectableData = computed(() => {
|
|
4888
4889
|
const isGrouped = !!this.state.$groupByData().length;
|
|
4889
4890
|
this.state.$expandGroups();
|
|
@@ -4900,7 +4901,7 @@ class GenericTableComponent {
|
|
|
4900
4901
|
return this.$data();
|
|
4901
4902
|
}
|
|
4902
4903
|
return [];
|
|
4903
|
-
});
|
|
4904
|
+
}, ...(ngDevMode ? [{ debugName: "$selectableData" }] : []));
|
|
4904
4905
|
this.$selectAllMessage = computed(() => {
|
|
4905
4906
|
if (this.$isAllSelected())
|
|
4906
4907
|
return `Deselect all ${this.$selection().selected.length} selected`;
|
|
@@ -4910,7 +4911,7 @@ class GenericTableComponent {
|
|
|
4910
4911
|
message += ' on this page';
|
|
4911
4912
|
}
|
|
4912
4913
|
return message;
|
|
4913
|
-
});
|
|
4914
|
+
}, ...(ngDevMode ? [{ debugName: "$selectAllMessage" }] : []));
|
|
4914
4915
|
this.#onSelectableDataChangeEffect = effect(() => {
|
|
4915
4916
|
const selectableData = this.$selectableData();
|
|
4916
4917
|
untracked(() => {
|
|
@@ -4927,22 +4928,34 @@ class GenericTableComponent {
|
|
|
4927
4928
|
const removed = selected.filter(trackByFunc);
|
|
4928
4929
|
this.$selection().deselect(...removed);
|
|
4929
4930
|
});
|
|
4930
|
-
});
|
|
4931
|
-
this.$tableWidth = linkedSignal({
|
|
4932
|
-
|
|
4933
|
-
|
|
4934
|
-
|
|
4935
|
-
|
|
4936
|
-
|
|
4937
|
-
|
|
4938
|
-
|
|
4939
|
-
|
|
4940
|
-
|
|
4941
|
-
|
|
4942
|
-
|
|
4931
|
+
}, ...(ngDevMode ? [{ debugName: "#onSelectableDataChangeEffect" }] : []));
|
|
4932
|
+
this.$tableWidth = linkedSignal(...(ngDevMode ? [{ debugName: "$tableWidth", source: this.state.$getUserDefinedTableWidth,
|
|
4933
|
+
computation: (currentUserDefinedWidth, { source: previousUserDefinedWidth } = { value: null, source: 0 }) => {
|
|
4934
|
+
if (currentUserDefinedWidth) {
|
|
4935
|
+
return ({ width: `${currentUserDefinedWidth}px`, minWidth: 'initial' });
|
|
4936
|
+
}
|
|
4937
|
+
if (wasReset()) {
|
|
4938
|
+
return ({ width: 'initial' });
|
|
4939
|
+
}
|
|
4940
|
+
return {};
|
|
4941
|
+
function wasReset() {
|
|
4942
|
+
return (previousUserDefinedWidth ?? 0) >= 0 && currentUserDefinedWidth == null;
|
|
4943
|
+
}
|
|
4944
|
+
} }] : [{
|
|
4945
|
+
source: this.state.$getUserDefinedTableWidth,
|
|
4946
|
+
computation: (currentUserDefinedWidth, { source: previousUserDefinedWidth } = { value: null, source: 0 }) => {
|
|
4947
|
+
if (currentUserDefinedWidth) {
|
|
4948
|
+
return ({ width: `${currentUserDefinedWidth}px`, minWidth: 'initial' });
|
|
4949
|
+
}
|
|
4950
|
+
if (wasReset()) {
|
|
4951
|
+
return ({ width: 'initial' });
|
|
4952
|
+
}
|
|
4953
|
+
return {};
|
|
4954
|
+
function wasReset() {
|
|
4955
|
+
return (previousUserDefinedWidth ?? 0) >= 0 && currentUserDefinedWidth == null;
|
|
4956
|
+
}
|
|
4943
4957
|
}
|
|
4944
|
-
}
|
|
4945
|
-
});
|
|
4958
|
+
}]));
|
|
4946
4959
|
this.getGroupHeaderTransform = (key, val) => computed(() => {
|
|
4947
4960
|
if (val == undefined || val === 'null')
|
|
4948
4961
|
return 'BLANK';
|
|
@@ -4970,7 +4983,7 @@ class GenericTableComponent {
|
|
|
4970
4983
|
return parseTbSizeToPixels(notPersistedTableSettings.rowHeight) + 'px';
|
|
4971
4984
|
}
|
|
4972
4985
|
return undefined;
|
|
4973
|
-
});
|
|
4986
|
+
}, ...(ngDevMode ? [{ debugName: "$rowHeight" }] : []));
|
|
4974
4987
|
this.$headerHeight = computed(() => {
|
|
4975
4988
|
if (this.state.$userDefinedHeaderHeight()) {
|
|
4976
4989
|
return this.state.$userDefinedHeaderHeight() + 'px';
|
|
@@ -4984,14 +4997,14 @@ class GenericTableComponent {
|
|
|
4984
4997
|
return parseTbSizeToPixels(notPersistedTableSettings.headerHeight) + 'px';
|
|
4985
4998
|
}
|
|
4986
4999
|
return undefined;
|
|
4987
|
-
});
|
|
5000
|
+
}, ...(ngDevMode ? [{ debugName: "$headerHeight" }] : []));
|
|
4988
5001
|
this.$groupHeaderHeight = computed(() => {
|
|
4989
5002
|
const groupHeaderHeight = this.state.$notPersistedTableSettings().groupHeaderHeight;
|
|
4990
5003
|
if (groupHeaderHeight) {
|
|
4991
5004
|
return parseTbSizeToPixels(groupHeaderHeight) + 'px';
|
|
4992
5005
|
}
|
|
4993
5006
|
return this.$rowHeight();
|
|
4994
|
-
});
|
|
5007
|
+
}, ...(ngDevMode ? [{ debugName: "$groupHeaderHeight" }] : []));
|
|
4995
5008
|
this.$footerHeight = computed(() => {
|
|
4996
5009
|
const footerStyle = this.$footerRowStyle();
|
|
4997
5010
|
switch (footerStyle) {
|
|
@@ -5002,10 +5015,10 @@ class GenericTableComponent {
|
|
|
5002
5015
|
default:
|
|
5003
5016
|
return '0px';
|
|
5004
5017
|
}
|
|
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 || {});
|
|
5018
|
+
}, ...(ngDevMode ? [{ debugName: "$footerHeight" }] : []));
|
|
5019
|
+
this.$stickyFooter = computed(() => this.state.$props().stickyFooter || this.state.$isVirtual(), ...(ngDevMode ? [{ debugName: "$stickyFooter" }] : []));
|
|
5020
|
+
this.$rowStyles = computed(() => this.state.$tableSettings().rowStyles || {}, ...(ngDevMode ? [{ debugName: "$rowStyles" }] : []));
|
|
5021
|
+
this.$rowClasses = computed(() => this.state.$tableSettings().rowClasses || {}, ...(ngDevMode ? [{ debugName: "$rowClasses" }] : []));
|
|
5009
5022
|
this.allOfGroupSelected = (uniqueName) => computed(() => {
|
|
5010
5023
|
//make sure signal is marked dirty when selection or over all data changes
|
|
5011
5024
|
this.$selectionChange();
|
|
@@ -5061,8 +5074,8 @@ class GenericTableComponent {
|
|
|
5061
5074
|
this.$selectFilterKey = computed(() => {
|
|
5062
5075
|
const selectFilter = Object.keys(this.state.$filters()).find(key => key.startsWith('header-column-select'));
|
|
5063
5076
|
return selectFilter;
|
|
5064
|
-
});
|
|
5065
|
-
this.$hasSelectFilter = computed(() => !!this.$selectFilterKey());
|
|
5077
|
+
}, ...(ngDevMode ? [{ debugName: "$selectFilterKey" }] : []));
|
|
5078
|
+
this.$hasSelectFilter = computed(() => !!this.$selectFilterKey(), ...(ngDevMode ? [{ debugName: "$hasSelectFilter" }] : []));
|
|
5066
5079
|
this._onSelect = effect(() => {
|
|
5067
5080
|
const selectionChange = this.$selectionChange();
|
|
5068
5081
|
untracked(() => {
|
|
@@ -5072,7 +5085,7 @@ class GenericTableComponent {
|
|
|
5072
5085
|
this.state.removeFilter(selectFilterKey);
|
|
5073
5086
|
this.addSelectFilter(true);
|
|
5074
5087
|
});
|
|
5075
|
-
});
|
|
5088
|
+
}, ...(ngDevMode ? [{ debugName: "_onSelect" }] : []));
|
|
5076
5089
|
}
|
|
5077
5090
|
#rr;
|
|
5078
5091
|
drop(event) {
|
|
@@ -5164,17 +5177,17 @@ class GenericTableComponent {
|
|
|
5164
5177
|
notSavable: true,
|
|
5165
5178
|
});
|
|
5166
5179
|
}
|
|
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 }); }
|
|
5180
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: GenericTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5181
|
+
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
5182
|
}
|
|
5170
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5183
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: GenericTableComponent, decorators: [{
|
|
5171
5184
|
type: Component,
|
|
5172
5185
|
args: [{ selector: 'tb-generic-table', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
5173
5186
|
MatTableModule, DragDropModule, MatCheckboxModule, MatButtonModule, MatIconModule, NgTemplateOutlet,
|
|
5174
5187
|
MatTooltipModule, FunctionPipe, StylerDirective, ConditionalClassesDirective, MatMenuModule, MatSlideToggle,
|
|
5175
5188
|
StopPropagationDirective
|
|
5176
5189
|
], 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
|
-
}] });
|
|
5190
|
+
}], 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
5191
|
|
|
5179
5192
|
function downloadData(data, filename, mimeType) {
|
|
5180
5193
|
const url = URL.createObjectURL(new Blob([data], { type: mimeType }));
|
|
@@ -5199,7 +5212,7 @@ class ExportToCsvService {
|
|
|
5199
5212
|
|| {};
|
|
5200
5213
|
const tableSettings = (this.state.$notPersistedTableSettings()?.exportSettings || {});
|
|
5201
5214
|
return merge$1({}, globalSettings, tableSettings);
|
|
5202
|
-
});
|
|
5215
|
+
}, ...(ngDevMode ? [{ debugName: "$exportSettings" }] : []));
|
|
5203
5216
|
this.exportToCsv = (data) => {
|
|
5204
5217
|
const hiddenKeys = this.state.selectSignal(s => s.hiddenKeys)();
|
|
5205
5218
|
const meta = this.state.$metaDataArray().filter(md => !md.noExport && !hiddenKeys.includes(md.key));
|
|
@@ -5295,10 +5308,10 @@ class ExportToCsvService {
|
|
|
5295
5308
|
}
|
|
5296
5309
|
return this.datePipe.transform(val, dateFormat);
|
|
5297
5310
|
}
|
|
5298
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5299
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
5311
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ExportToCsvService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
5312
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ExportToCsvService }); }
|
|
5300
5313
|
}
|
|
5301
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5314
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ExportToCsvService, decorators: [{
|
|
5302
5315
|
type: Injectable
|
|
5303
5316
|
}] });
|
|
5304
5317
|
|
|
@@ -5513,10 +5526,10 @@ class TableBuilderStateStore extends ComponentStore {
|
|
|
5513
5526
|
this.deleteLocalProfilesState({ key, stateKey });
|
|
5514
5527
|
};
|
|
5515
5528
|
}
|
|
5516
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5517
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
5529
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TableBuilderStateStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
5530
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TableBuilderStateStore, providedIn: 'root' }); }
|
|
5518
5531
|
}
|
|
5519
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5532
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TableBuilderStateStore, decorators: [{
|
|
5520
5533
|
type: Injectable,
|
|
5521
5534
|
args: [{ providedIn: 'root' }]
|
|
5522
5535
|
}], ctorParameters: () => [] });
|
|
@@ -5736,13 +5749,13 @@ class PaginatorComponent {
|
|
|
5736
5749
|
constructor() {
|
|
5737
5750
|
this.state = inject(TableStore);
|
|
5738
5751
|
this.data = inject(DataStore);
|
|
5739
|
-
this.$paginator = viewChild(MatPaginator);
|
|
5752
|
+
this.$paginator = viewChild(MatPaginator, ...(ngDevMode ? [{ debugName: "$paginator" }] : []));
|
|
5740
5753
|
this.$dataLength = this.data.selectSignal(d => d.sortedFilteredDataLength);
|
|
5741
5754
|
this.$viewableDataLength = this.data.selectSignal(d => d.sortedFilteredGroupedDataLength);
|
|
5742
5755
|
this.pageEvent$ = toObservable(this.$paginator).pipe(notNull(), switchMap(p => p.page));
|
|
5743
5756
|
this.$pageEvent = toSignal(this.pageEvent$);
|
|
5744
|
-
this.$pageIndexChangeEvent = computed(() => this.$pageEvent()?.pageIndex);
|
|
5745
|
-
this.$pageSizeChangeEvent = computed(() => this.$pageEvent()?.pageSize);
|
|
5757
|
+
this.$pageIndexChangeEvent = computed(() => this.$pageEvent()?.pageIndex, ...(ngDevMode ? [{ debugName: "$pageIndexChangeEvent" }] : []));
|
|
5758
|
+
this.$pageSizeChangeEvent = computed(() => this.$pageEvent()?.pageSize, ...(ngDevMode ? [{ debugName: "$pageSizeChangeEvent" }] : []));
|
|
5746
5759
|
this.$currentPageData = computed(() => {
|
|
5747
5760
|
const pageEvent = this.$pageEvent();
|
|
5748
5761
|
if (!pageEvent)
|
|
@@ -5755,20 +5768,20 @@ class PaginatorComponent {
|
|
|
5755
5768
|
const pageDetails = mapPaginationEventToCurrentPageDetails(pageEvent);
|
|
5756
5769
|
const dataLength = this.$dataLength();
|
|
5757
5770
|
return ({ ...pageDetails, total: dataLength });
|
|
5758
|
-
});
|
|
5771
|
+
}, ...(ngDevMode ? [{ debugName: "$currentPageData" }] : []));
|
|
5759
5772
|
this.#onPageIndexEffect = effect(() => {
|
|
5760
5773
|
const index = this.$pageIndexChangeEvent();
|
|
5761
5774
|
if (index === undefined)
|
|
5762
5775
|
return;
|
|
5763
5776
|
untracked(() => this.state.setCurrentPage(index));
|
|
5764
|
-
});
|
|
5777
|
+
}, ...(ngDevMode ? [{ debugName: "#onPageIndexEffect" }] : []));
|
|
5765
5778
|
this.#onPageSizeEffect = effect(() => {
|
|
5766
5779
|
const size = this.$pageSizeChangeEvent();
|
|
5767
5780
|
const initialized = this.state.$initializationState() >= InitializationState.Ready;
|
|
5768
5781
|
if (!size || !initialized)
|
|
5769
5782
|
return;
|
|
5770
5783
|
untracked(() => this.state.setUserDefinedPageSize(size));
|
|
5771
|
-
});
|
|
5784
|
+
}, ...(ngDevMode ? [{ debugName: "#onPageSizeEffect" }] : []));
|
|
5772
5785
|
this.#onMetaPageSizeEffect = effect(() => {
|
|
5773
5786
|
const paginator = this.$paginator();
|
|
5774
5787
|
if (!paginator)
|
|
@@ -5776,7 +5789,7 @@ class PaginatorComponent {
|
|
|
5776
5789
|
const metaPageSize = this.state.$pageSize();
|
|
5777
5790
|
const initialized = this.state.$initializationState() >= InitializationState.Ready;
|
|
5778
5791
|
untracked(() => initialized && paginator._changePageSize(metaPageSize));
|
|
5779
|
-
});
|
|
5792
|
+
}, ...(ngDevMode ? [{ debugName: "#onMetaPageSizeEffect" }] : []));
|
|
5780
5793
|
this.onDataLengthEffect = effect(() => {
|
|
5781
5794
|
const paginator = this.$paginator();
|
|
5782
5795
|
const dataLength = this.$viewableDataLength();
|
|
@@ -5790,8 +5803,8 @@ class PaginatorComponent {
|
|
|
5790
5803
|
}
|
|
5791
5804
|
}
|
|
5792
5805
|
});
|
|
5793
|
-
});
|
|
5794
|
-
this.$collapseFooter = computed(() => this.state.selectSignal(state => state.persistedTableSettings.collapseFooter)());
|
|
5806
|
+
}, ...(ngDevMode ? [{ debugName: "onDataLengthEffect" }] : []));
|
|
5807
|
+
this.$collapseFooter = computed(() => this.state.selectSignal(state => state.persistedTableSettings.collapseFooter)(), ...(ngDevMode ? [{ debugName: "$collapseFooter" }] : []));
|
|
5795
5808
|
this.$showAllOption = this.state.selectSignal(s => s.notPersistedTableSettings?.paginatorSettings?.includeAllInOptions);
|
|
5796
5809
|
this.$showAll = this.state.$showAll;
|
|
5797
5810
|
}
|
|
@@ -5805,8 +5818,8 @@ class PaginatorComponent {
|
|
|
5805
5818
|
this.state.toggleCollapseFooter({ collapseFooter: true });
|
|
5806
5819
|
}
|
|
5807
5820
|
}
|
|
5808
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5809
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
5821
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: PaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5822
|
+
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
5823
|
<div class="paginator-row">
|
|
5811
5824
|
@if($currentPageData(); as pageData)
|
|
5812
5825
|
{
|
|
@@ -5835,7 +5848,7 @@ class PaginatorComponent {
|
|
|
5835
5848
|
</div>
|
|
5836
5849
|
`, 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
5850
|
}
|
|
5838
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5851
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: PaginatorComponent, decorators: [{
|
|
5839
5852
|
type: Component,
|
|
5840
5853
|
args: [{ selector: 'tb-paginator', imports: [MatPaginatorModule, MatButtonModule], template: `
|
|
5841
5854
|
<div class="paginator-row">
|
|
@@ -5865,7 +5878,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImpor
|
|
|
5865
5878
|
}
|
|
5866
5879
|
</div>
|
|
5867
5880
|
`, 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
|
-
}] });
|
|
5881
|
+
}], propDecorators: { $paginator: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatPaginator), { isSignal: true }] }] } });
|
|
5869
5882
|
const mapPaginationEventToCurrentPageDetails = (pageData) => {
|
|
5870
5883
|
return ({
|
|
5871
5884
|
currentStart: (pageData.pageIndex * pageData.pageSize) + 1,
|
|
@@ -5881,19 +5894,19 @@ class TableBuilderDataSource extends MatTableDataSource {
|
|
|
5881
5894
|
}
|
|
5882
5895
|
constructor(state, data) {
|
|
5883
5896
|
super([]);
|
|
5884
|
-
this.#$dataSrc = signal([]);
|
|
5885
|
-
this.$dataSize = signal({ start: 0, end: 0 }, {
|
|
5886
|
-
|
|
5887
|
-
|
|
5897
|
+
this.#$dataSrc = signal([], ...(ngDevMode ? [{ debugName: "#$dataSrc" }] : []));
|
|
5898
|
+
this.$dataSize = signal({ start: 0, end: 0 }, ...(ngDevMode ? [{ debugName: "$dataSize", equal: (a, b) => a.start === b.start && a.end === b.end }] : [{
|
|
5899
|
+
equal: (a, b) => a.start === b.start && a.end === b.end
|
|
5900
|
+
}]));
|
|
5888
5901
|
this._ = effect(() => {
|
|
5889
5902
|
const data = this.#$dataSrc();
|
|
5890
5903
|
const dataSize = this.$dataSize();
|
|
5891
5904
|
untracked(() => this.data = data.slice(dataSize.start, dataSize.end));
|
|
5892
|
-
});
|
|
5905
|
+
}, ...(ngDevMode ? [{ debugName: "_" }] : []));
|
|
5893
5906
|
const $currentPage = state.$currentPage;
|
|
5894
5907
|
const $pageSize = state.$pageSize;
|
|
5895
5908
|
const $virtualEnds = data.selectSignal(d => d.virtualEnds);
|
|
5896
|
-
const $dataLength = computed(() => this.#$dataSrc().length);
|
|
5909
|
+
const $dataLength = computed(() => this.#$dataSrc().length, ...(ngDevMode ? [{ debugName: "$dataLength" }] : []));
|
|
5897
5910
|
this.$dataSize = computed(() => {
|
|
5898
5911
|
const viewType = state.$viewType();
|
|
5899
5912
|
const dataLength = $dataLength();
|
|
@@ -5911,7 +5924,7 @@ class TableBuilderDataSource extends MatTableDataSource {
|
|
|
5911
5924
|
return ({ start: 0, end: dataLength });
|
|
5912
5925
|
}
|
|
5913
5926
|
return ({ start: virtualEnds.start, end: virtualEnds.end });
|
|
5914
|
-
});
|
|
5927
|
+
}, ...(ngDevMode ? [{ debugName: "$dataSize" }] : []));
|
|
5915
5928
|
}
|
|
5916
5929
|
connect() {
|
|
5917
5930
|
return super.connect();
|
|
@@ -5954,12 +5967,12 @@ class GroupByListComponent {
|
|
|
5954
5967
|
name: dict[gbk.key].displayName || gbk.key,
|
|
5955
5968
|
sort: this.tableStore.getGroupBySortDirection(gbk.key)(),
|
|
5956
5969
|
}));
|
|
5957
|
-
});
|
|
5970
|
+
}, ...(ngDevMode ? [{ debugName: "$groups" }] : []));
|
|
5958
5971
|
}
|
|
5959
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
5960
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
5972
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: GroupByListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5973
|
+
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
5974
|
}
|
|
5962
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5975
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: GroupByListComponent, decorators: [{
|
|
5963
5976
|
type: Component,
|
|
5964
5977
|
args: [{ selector: 'group-by-list', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
5965
5978
|
MatChipsModule, MatIconModule, SpaceCasePipe, StopPropagationDirective
|
|
@@ -5970,15 +5983,15 @@ class ProfilesMenuComponent {
|
|
|
5970
5983
|
constructor() {
|
|
5971
5984
|
this.stateService = inject(TableBuilderStateStore);
|
|
5972
5985
|
this.tableStore = inject(TableStore);
|
|
5973
|
-
this.$tableId = input.required({ alias: 'tableId' });
|
|
5974
|
-
this.$isMatMenuChild = input(false, { alias: 'isMatMenuChild' });
|
|
5975
|
-
this.trigger = viewChild('trigger');
|
|
5986
|
+
this.$tableId = input.required(...(ngDevMode ? [{ debugName: "$tableId", alias: 'tableId' }] : [{ alias: 'tableId' }]));
|
|
5987
|
+
this.$isMatMenuChild = input(false, ...(ngDevMode ? [{ debugName: "$isMatMenuChild", alias: 'isMatMenuChild' }] : [{ alias: 'isMatMenuChild' }]));
|
|
5988
|
+
this.trigger = viewChild('trigger', ...(ngDevMode ? [{ debugName: "trigger" }] : []));
|
|
5976
5989
|
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())());
|
|
5990
|
+
this.allProfilesPanelOpened = signal(false, ...(ngDevMode ? [{ debugName: "allProfilesPanelOpened" }] : []));
|
|
5991
|
+
this.newProfilePanelOpened = signal(false, ...(ngDevMode ? [{ debugName: "newProfilePanelOpened" }] : []));
|
|
5992
|
+
this.$currentProfile = computed(() => this.stateService.$selectLocalProfileCurrentKey(this.$tableId())(), ...(ngDevMode ? [{ debugName: "$currentProfile" }] : []));
|
|
5993
|
+
this.$defaultProfile = computed(() => this.stateService.$selectLocalProfileDefaultKey(this.$tableId())(), ...(ngDevMode ? [{ debugName: "$defaultProfile" }] : []));
|
|
5994
|
+
this.$keys = computed(() => this.stateService.$selectLocalProfileKeys(this.$tableId())(), ...(ngDevMode ? [{ debugName: "$keys" }] : []));
|
|
5982
5995
|
this.defaultName = 'My Profile';
|
|
5983
5996
|
this.position$ = new Subject();
|
|
5984
5997
|
this.setPosition = (e) => {
|
|
@@ -6006,15 +6019,15 @@ class ProfilesMenuComponent {
|
|
|
6006
6019
|
unsetDefault() {
|
|
6007
6020
|
this.stateService.unsetDefaultFromLocalAndStorage(this.$tableId());
|
|
6008
6021
|
}
|
|
6009
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
6010
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
6022
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ProfilesMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6023
|
+
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
6024
|
}
|
|
6012
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
6025
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ProfilesMenuComponent, decorators: [{
|
|
6013
6026
|
type: Component,
|
|
6014
6027
|
args: [{ selector: 'tb-profiles-menu', imports: [MatIcon, MatTooltip, MatIconButton, MatMenuModule, MatButton, MatInput,
|
|
6015
6028
|
MatCheckbox, StopPropagationDirective, MatInputModule, FormsModule
|
|
6016
6029
|
], 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
|
-
}] });
|
|
6030
|
+
}], 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
6031
|
|
|
6019
6032
|
class SortMenuComponentStore extends ComponentStore {
|
|
6020
6033
|
constructor() {
|
|
@@ -6026,7 +6039,7 @@ class SortMenuComponentStore extends ComponentStore {
|
|
|
6026
6039
|
return;
|
|
6027
6040
|
this.tableState.$selectSorted();
|
|
6028
6041
|
untracked(() => this.setStateFromTableStore());
|
|
6029
|
-
});
|
|
6042
|
+
}, ...(ngDevMode ? [{ debugName: "setStoreStateEffect" }] : []));
|
|
6030
6043
|
this.setStateFromTableStore = () => {
|
|
6031
6044
|
const metaData = this.tableState.$metaData();
|
|
6032
6045
|
const sorted = [...this.tableState.$selectSorted()].map(s => ({
|
|
@@ -6052,10 +6065,10 @@ class SortMenuComponentStore extends ComponentStore {
|
|
|
6052
6065
|
this.setStateFromTableStore();
|
|
6053
6066
|
};
|
|
6054
6067
|
}
|
|
6055
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
6056
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
6068
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SortMenuComponentStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
6069
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SortMenuComponentStore }); }
|
|
6057
6070
|
}
|
|
6058
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
6071
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SortMenuComponentStore, decorators: [{
|
|
6059
6072
|
type: Injectable
|
|
6060
6073
|
}], ctorParameters: () => [] });
|
|
6061
6074
|
|
|
@@ -6064,9 +6077,9 @@ class SortMenuComponent {
|
|
|
6064
6077
|
this.SortDirection = SortDirection;
|
|
6065
6078
|
this.tableState = inject(TableStore);
|
|
6066
6079
|
this.store = inject(SortMenuComponentStore);
|
|
6067
|
-
this.$sorted = computed(() => [...this.store.$sorted()]);
|
|
6068
|
-
this.$notSorted = computed(() => [...this.store.$notSorted()]);
|
|
6069
|
-
this.$dirty = signal(false);
|
|
6080
|
+
this.$sorted = computed(() => [...this.store.$sorted()], ...(ngDevMode ? [{ debugName: "$sorted" }] : []));
|
|
6081
|
+
this.$notSorted = computed(() => [...this.store.$notSorted()], ...(ngDevMode ? [{ debugName: "$notSorted" }] : []));
|
|
6082
|
+
this.$dirty = signal(false, ...(ngDevMode ? [{ debugName: "$dirty" }] : []));
|
|
6070
6083
|
this.apply = () => {
|
|
6071
6084
|
this.$dirty.set(false);
|
|
6072
6085
|
this.tableState.setAllSort(this.store.$sorted());
|
|
@@ -6109,10 +6122,10 @@ class SortMenuComponent {
|
|
|
6109
6122
|
this.$dirty.set(true);
|
|
6110
6123
|
this.store.setDirection(sort);
|
|
6111
6124
|
}
|
|
6112
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
6113
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
6125
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SortMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6126
|
+
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
6127
|
}
|
|
6115
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
6128
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: SortMenuComponent, decorators: [{
|
|
6116
6129
|
type: Component,
|
|
6117
6130
|
args: [{ selector: 'tb-sort-menu', providers: [SortMenuComponentStore], changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
6118
6131
|
MatTooltipModule, MatButtonModule, MatIconModule, MatMenuModule, StopPropagationDirective, DragDropModule,
|
|
@@ -6130,7 +6143,7 @@ class ResetMenuComponent {
|
|
|
6130
6143
|
return Object.values(this.state.$filters())
|
|
6131
6144
|
.filter(f => (isCustomFilter(f) && f.active) || f.filterValue != undefined)
|
|
6132
6145
|
.length;
|
|
6133
|
-
});
|
|
6146
|
+
}, ...(ngDevMode ? [{ debugName: "$filtersSet" }] : []));
|
|
6134
6147
|
this.$sortSet = computed(() => {
|
|
6135
6148
|
const sorts = this.state.$selectSorted();
|
|
6136
6149
|
if (!sorts.length)
|
|
@@ -6139,14 +6152,14 @@ class ResetMenuComponent {
|
|
|
6139
6152
|
if (!preSorts.length)
|
|
6140
6153
|
return true;
|
|
6141
6154
|
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);
|
|
6155
|
+
}, ...(ngDevMode ? [{ debugName: "$sortSet" }] : []));
|
|
6156
|
+
this.$groupBySet = computed(() => this.state.$groupByData().length || this.state.$userDefinedNoGroups(), ...(ngDevMode ? [{ debugName: "$groupBySet" }] : []));
|
|
6157
|
+
this.$hiddenSet = computed(() => this.state.$hiddenKeys().length, ...(ngDevMode ? [{ debugName: "$hiddenSet" }] : []));
|
|
6158
|
+
this.$orderSet = computed(() => Object.keys(this.state.$userDefinedOrder()).length, ...(ngDevMode ? [{ debugName: "$orderSet" }] : []));
|
|
6159
|
+
this.$widthsSet = computed(() => Object.keys(this.state.$getUserDefinedWidths()).length, ...(ngDevMode ? [{ debugName: "$widthsSet" }] : []));
|
|
6147
6160
|
this.$rowHeightSet = this.state.$userDefinedRowHeight;
|
|
6148
6161
|
this.headerHeightSet = this.state.$userDefinedHeaderHeight;
|
|
6149
|
-
this.pageSizeSet = computed(() => this.state.$userDefinedPageSize() && this.state.$userDefinedPageSize() !== this.state.selectSignal(s => s.pageSize)());
|
|
6162
|
+
this.pageSizeSet = computed(() => this.state.$userDefinedPageSize() && this.state.$userDefinedPageSize() !== this.state.selectSignal(s => s.pageSize)(), ...(ngDevMode ? [{ debugName: "pageSizeSet" }] : []));
|
|
6150
6163
|
this.showAllSet = this.state.selectSignal(s => s.userDefined.showAll);
|
|
6151
6164
|
this.$set = computed(() => {
|
|
6152
6165
|
const arr = [];
|
|
@@ -6181,7 +6194,7 @@ class ResetMenuComponent {
|
|
|
6181
6194
|
arr.push('Show All');
|
|
6182
6195
|
}
|
|
6183
6196
|
return arr;
|
|
6184
|
-
});
|
|
6197
|
+
}, ...(ngDevMode ? [{ debugName: "$set" }] : []));
|
|
6185
6198
|
this.resetable = resetable;
|
|
6186
6199
|
}
|
|
6187
6200
|
resetState() {
|
|
@@ -6193,13 +6206,13 @@ class ResetMenuComponent {
|
|
|
6193
6206
|
reset(s) {
|
|
6194
6207
|
this.state.resetPart(s);
|
|
6195
6208
|
}
|
|
6196
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
6197
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
6209
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ResetMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6210
|
+
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
6211
|
}
|
|
6199
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
6212
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ResetMenuComponent, decorators: [{
|
|
6200
6213
|
type: Component,
|
|
6201
6214
|
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
|
-
}] });
|
|
6215
|
+
}], propDecorators: { menu: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatMenu), { isSignal: true }] }], onStateReset$: [{ type: i0.Output, args: ["onStateReset"] }] } });
|
|
6203
6216
|
|
|
6204
6217
|
class TableHeaderMenuComponent {
|
|
6205
6218
|
constructor() {
|
|
@@ -6207,8 +6220,8 @@ class TableHeaderMenuComponent {
|
|
|
6207
6220
|
this.exportToCsvService = inject(ExportToCsvService);
|
|
6208
6221
|
this.tableContainer = inject(TableContainerComponent);
|
|
6209
6222
|
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);
|
|
6223
|
+
this.$rowHeightNum = computed(() => +(this.tableContainer.$genericTable()?.$rowHeight()?.replace('px', '') || 0) || undefined, ...(ngDevMode ? [{ debugName: "$rowHeightNum" }] : []));
|
|
6224
|
+
this.$headerHeightNum = computed(() => +(this.tableContainer.$genericTable()?.$headerHeight()?.replace('px', '') || 0) || undefined, ...(ngDevMode ? [{ debugName: "$headerHeightNum" }] : []));
|
|
6212
6225
|
}
|
|
6213
6226
|
exportToCsv() {
|
|
6214
6227
|
this.exportToCsvService.exportToCsv(this.tableContainer.$data());
|
|
@@ -6223,32 +6236,37 @@ class TableHeaderMenuComponent {
|
|
|
6223
6236
|
if (v === 'header')
|
|
6224
6237
|
this.state.setUserDefinedHeaderHeight(+element.value);
|
|
6225
6238
|
}
|
|
6226
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
6227
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
6239
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TableHeaderMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6240
|
+
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
6241
|
}
|
|
6229
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
6242
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TableHeaderMenuComponent, decorators: [{
|
|
6230
6243
|
type: Component,
|
|
6231
6244
|
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
|
-
}] });
|
|
6245
|
+
}], propDecorators: { menu: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatMenu), { isSignal: true }] }] } });
|
|
6233
6246
|
|
|
6234
6247
|
class TableVirtualScrollStrategy {
|
|
6235
6248
|
constructor(scrollContainer, dataStore) {
|
|
6236
6249
|
this.indexChange = new Subject();
|
|
6237
6250
|
this.scrolledIndexChange = this.indexChange.pipe(distinctUntilChanged());
|
|
6238
|
-
this.$dataLengthChange = linkedSignal({
|
|
6239
|
-
|
|
6240
|
-
|
|
6241
|
-
|
|
6242
|
-
|
|
6243
|
-
|
|
6244
|
-
|
|
6245
|
-
|
|
6246
|
-
|
|
6247
|
-
|
|
6248
|
-
|
|
6249
|
-
|
|
6250
|
-
|
|
6251
|
-
|
|
6251
|
+
this.$dataLengthChange = linkedSignal(...(ngDevMode ? [{ debugName: "$dataLengthChange", source: () => this.$dataLength(),
|
|
6252
|
+
computation: (curr, previous) => ({ curr, previous: previous == undefined ? curr : previous.source }) }] : [{
|
|
6253
|
+
source: () => this.$dataLength(),
|
|
6254
|
+
computation: (curr, previous) => ({ curr, previous: previous == undefined ? curr : previous.source })
|
|
6255
|
+
}]));
|
|
6256
|
+
this.$rowHeightChange = linkedSignal(...(ngDevMode ? [{ debugName: "$rowHeightChange", source: () => this.$rowHeight(),
|
|
6257
|
+
computation: (curr, previous) => {
|
|
6258
|
+
return ({ curr, previous: previous == undefined ? curr : previous.source });
|
|
6259
|
+
} }] : [{
|
|
6260
|
+
source: () => this.$rowHeight(),
|
|
6261
|
+
computation: (curr, previous) => {
|
|
6262
|
+
return ({ curr, previous: previous == undefined ? curr : previous.source });
|
|
6263
|
+
}
|
|
6264
|
+
}]));
|
|
6265
|
+
this.$headerHeightChange = linkedSignal(...(ngDevMode ? [{ debugName: "$headerHeightChange", source: () => this.$headerHeight(),
|
|
6266
|
+
computation: (curr, previous) => ({ curr, previous: previous == undefined ? curr : previous.source }) }] : [{
|
|
6267
|
+
source: () => this.$headerHeight(),
|
|
6268
|
+
computation: (curr, previous) => ({ curr, previous: previous == undefined ? curr : previous.source })
|
|
6269
|
+
}]));
|
|
6252
6270
|
this.contentScrolled$ = new Subject();
|
|
6253
6271
|
this.sub = subscriber(this.contentScrolled$.pipe(debounceTime(20), distinctUntilChanged()), offset => {
|
|
6254
6272
|
this.updateContent('scroll');
|
|
@@ -6260,7 +6278,7 @@ class TableVirtualScrollStrategy {
|
|
|
6260
6278
|
return;
|
|
6261
6279
|
this.updateContent('data length');
|
|
6262
6280
|
});
|
|
6263
|
-
});
|
|
6281
|
+
}, ...(ngDevMode ? [{ debugName: "#onDataLengthChange" }] : []));
|
|
6264
6282
|
this.#onHeaderChange = effect(() => {
|
|
6265
6283
|
const headerHeightChange = this.$headerHeightChange();
|
|
6266
6284
|
untracked(() => {
|
|
@@ -6268,7 +6286,7 @@ class TableVirtualScrollStrategy {
|
|
|
6268
6286
|
return;
|
|
6269
6287
|
this.updateContent('header height');
|
|
6270
6288
|
});
|
|
6271
|
-
});
|
|
6289
|
+
}, ...(ngDevMode ? [{ debugName: "#onHeaderChange" }] : []));
|
|
6272
6290
|
this.#onRowChange = effect(() => {
|
|
6273
6291
|
const rowHeightChange = this.$rowHeightChange();
|
|
6274
6292
|
untracked(() => {
|
|
@@ -6276,8 +6294,8 @@ class TableVirtualScrollStrategy {
|
|
|
6276
6294
|
return;
|
|
6277
6295
|
this.updateContent('row height');
|
|
6278
6296
|
});
|
|
6279
|
-
});
|
|
6280
|
-
this.$currentRange = signal({ start: 0, end: 0 });
|
|
6297
|
+
}, ...(ngDevMode ? [{ debugName: "#onRowChange" }] : []));
|
|
6298
|
+
this.$currentRange = signal({ start: 0, end: 0 }, ...(ngDevMode ? [{ debugName: "$currentRange" }] : []));
|
|
6281
6299
|
this.$rowHeight = scrollContainer.computedRowHeight;
|
|
6282
6300
|
this.$headerHeight = scrollContainer.computedHeaderHeight;
|
|
6283
6301
|
this.viewport = scrollContainer.viewport;
|
|
@@ -6351,7 +6369,7 @@ class VirtualScrollContainer {
|
|
|
6351
6369
|
this.state = inject(TableStore);
|
|
6352
6370
|
this.dataStore = inject(DataStore);
|
|
6353
6371
|
this.viewport = viewChild.required(CdkVirtualScrollViewport);
|
|
6354
|
-
this.genericTable = contentChild(GenericTableComponent);
|
|
6372
|
+
this.genericTable = contentChild(GenericTableComponent, ...(ngDevMode ? [{ debugName: "genericTable" }] : []));
|
|
6355
6373
|
this.tableContainer = inject(TableContainerComponent);
|
|
6356
6374
|
this.defaultOptions = new VirtualScrollOptions();
|
|
6357
6375
|
this.$usePaginator = this.state.selectSignal(s => s.notPersistedTableSettings.usePaginator);
|
|
@@ -6367,8 +6385,8 @@ class VirtualScrollContainer {
|
|
|
6367
6385
|
return this.state.$tableSettings().virtualSettings;
|
|
6368
6386
|
else
|
|
6369
6387
|
return undefined;
|
|
6370
|
-
});
|
|
6371
|
-
this.$optionsSet = computed(() => !!this.$virtualScrollOptions());
|
|
6388
|
+
}, ...(ngDevMode ? [{ debugName: "$virtualScrollOptions" }] : []));
|
|
6389
|
+
this.$optionsSet = computed(() => !!this.$virtualScrollOptions(), ...(ngDevMode ? [{ debugName: "$optionsSet" }] : []));
|
|
6372
6390
|
this.$dataLength = computed(() => {
|
|
6373
6391
|
const paginated = this.$usePaginator() && !this.$showAll();
|
|
6374
6392
|
const pageSize = this.$pageSize();
|
|
@@ -6377,7 +6395,7 @@ class VirtualScrollContainer {
|
|
|
6377
6395
|
if (paginated)
|
|
6378
6396
|
return Math.min(dataLen - (pageNumber * pageSize), pageSize);
|
|
6379
6397
|
return dataLen;
|
|
6380
|
-
});
|
|
6398
|
+
}, ...(ngDevMode ? [{ debugName: "$dataLength" }] : []));
|
|
6381
6399
|
this.#setViewportEffect = effect(() => {
|
|
6382
6400
|
const viewport = this.viewport();
|
|
6383
6401
|
const options = this.$optionsSet();
|
|
@@ -6386,7 +6404,7 @@ class VirtualScrollContainer {
|
|
|
6386
6404
|
this.setSize(this.viewport().elementRef, 'initial');
|
|
6387
6405
|
}
|
|
6388
6406
|
});
|
|
6389
|
-
});
|
|
6407
|
+
}, ...(ngDevMode ? [{ debugName: "#setViewportEffect" }] : []));
|
|
6390
6408
|
this.#onRenderedRangeEffect = effect(() => {
|
|
6391
6409
|
const renderedRange = this.$renderedRange();
|
|
6392
6410
|
const viewport = this.viewport();
|
|
@@ -6403,7 +6421,7 @@ class VirtualScrollContainer {
|
|
|
6403
6421
|
return;
|
|
6404
6422
|
this.setSize(viewport.elementRef, 'rendered range');
|
|
6405
6423
|
});
|
|
6406
|
-
});
|
|
6424
|
+
}, ...(ngDevMode ? [{ debugName: "#onRenderedRangeEffect" }] : []));
|
|
6407
6425
|
this.resizeHandler = () => {
|
|
6408
6426
|
if (this.viewport() && this.$virtualScrollOptions()?.dynamicHeight) {
|
|
6409
6427
|
this.setSize(this.viewport().elementRef, 'resize');
|
|
@@ -6413,23 +6431,23 @@ class VirtualScrollContainer {
|
|
|
6413
6431
|
const virtualScrollOptions = this.state.$tableSettings().virtualSettings;
|
|
6414
6432
|
const rowHeight = this.state.$userDefinedRowHeight() || virtualScrollOptions?.rowHeight || this.state.$tableSettings().rowHeight || this.defaultOptions.rowHeight;
|
|
6415
6433
|
return parseTbSizeToPixels(rowHeight) || 0;
|
|
6416
|
-
});
|
|
6434
|
+
}, ...(ngDevMode ? [{ debugName: "computedRowHeight" }] : []));
|
|
6417
6435
|
this.computedHeaderHeight = computed(() => {
|
|
6418
6436
|
if (this.state.$tableSettings().hideHeader)
|
|
6419
6437
|
return 0;
|
|
6420
6438
|
const virtualScrollOptions = this.state.$tableSettings().virtualSettings;
|
|
6421
6439
|
const headerHeight = this.state.$userDefinedHeaderHeight() || virtualScrollOptions?.headerHeight || this.state.$tableSettings().headerHeight || this.defaultOptions.headerHeight;
|
|
6422
6440
|
return parseTbSizeToPixels(headerHeight) || 0;
|
|
6423
|
-
});
|
|
6441
|
+
}, ...(ngDevMode ? [{ debugName: "computedHeaderHeight" }] : []));
|
|
6424
6442
|
this.computedFooterHeight = computed(() => {
|
|
6425
6443
|
return parseFloat(this.genericTable()?.$footerHeight()?.replace('px', '') || '0');
|
|
6426
|
-
});
|
|
6444
|
+
}, ...(ngDevMode ? [{ debugName: "computedFooterHeight" }] : []));
|
|
6427
6445
|
this.computedBuffer = computed(() => {
|
|
6428
6446
|
const virtualScrollOptions = this.state.$tableSettings().virtualSettings;
|
|
6429
6447
|
if (!virtualScrollOptions.dynamicalHeightBuffer)
|
|
6430
6448
|
return 0;
|
|
6431
6449
|
return parseTbSizeToPixels(virtualScrollOptions.dynamicalHeightBuffer) || 0;
|
|
6432
|
-
});
|
|
6450
|
+
}, ...(ngDevMode ? [{ debugName: "computedBuffer" }] : []));
|
|
6433
6451
|
this.scrollStrategy = new TableVirtualScrollStrategy(this, this.dataStore);
|
|
6434
6452
|
addEventListener('resize', this.resizeHandler);
|
|
6435
6453
|
}
|
|
@@ -6495,8 +6513,8 @@ class VirtualScrollContainer {
|
|
|
6495
6513
|
const virtualScrollOffset = this.viewport()?.getOffsetToRenderedContentStart() ?? 0;
|
|
6496
6514
|
this.dataStore.patchState({ virtualScrollOffset });
|
|
6497
6515
|
}
|
|
6498
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
6499
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "
|
|
6516
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: VirtualScrollContainer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6517
|
+
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
6518
|
<cdk-virtual-scroll-viewport>
|
|
6501
6519
|
<ng-content/>
|
|
6502
6520
|
</cdk-virtual-scroll-viewport>
|
|
@@ -6508,7 +6526,7 @@ class VirtualScrollContainer {
|
|
|
6508
6526
|
},
|
|
6509
6527
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6510
6528
|
}
|
|
6511
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
6529
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: VirtualScrollContainer, decorators: [{
|
|
6512
6530
|
type: Component,
|
|
6513
6531
|
args: [{
|
|
6514
6532
|
selector: 'tb-virtual-scroll-container',
|
|
@@ -6527,7 +6545,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImpor
|
|
|
6527
6545
|
},
|
|
6528
6546
|
],
|
|
6529
6547
|
}]
|
|
6530
|
-
}], ctorParameters: () => [] });
|
|
6548
|
+
}], ctorParameters: () => [], propDecorators: { viewport: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkVirtualScrollViewport), { isSignal: true }] }], genericTable: [{ type: i0.ContentChild, args: [i0.forwardRef(() => GenericTableComponent), { isSignal: true }] }] } });
|
|
6531
6549
|
|
|
6532
6550
|
class TableContainerComponent {
|
|
6533
6551
|
constructor() {
|
|
@@ -6540,45 +6558,45 @@ class TableContainerComponent {
|
|
|
6540
6558
|
this.exportToCsvService = inject(ExportToCsvService);
|
|
6541
6559
|
this.config = inject(TableBuilderConfigToken);
|
|
6542
6560
|
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);
|
|
6561
|
+
this.$filterDirectives = contentChildren(TableFilterDirective, ...(ngDevMode ? [{ debugName: "$filterDirectives", descendants: true }] : [{ descendants: true }]));
|
|
6562
|
+
this.$customFilterDirectives = contentChildren(TableCustomFilterDirective, ...(ngDevMode ? [{ debugName: "$customFilterDirectives", descendants: true }] : [{ descendants: true }]));
|
|
6563
|
+
this.$paginatorComponent = viewChild(PaginatorComponent, ...(ngDevMode ? [{ debugName: "$paginatorComponent" }] : []));
|
|
6564
|
+
this.$paginatorWrapper = viewChild('paginatorWrapper', ...(ngDevMode ? [{ debugName: "$paginatorWrapper" }] : []));
|
|
6565
|
+
this.$genericTable = viewChild(GenericTableComponent, ...(ngDevMode ? [{ debugName: "$genericTable" }] : []));
|
|
6566
|
+
this._$customRows = contentChildren((MatRowDef), ...(ngDevMode ? [{ debugName: "_$customRows" }] : []));
|
|
6567
|
+
this.$customRows = computed(() => [...this._$customRows()], ...(ngDevMode ? [{ debugName: "$customRows" }] : []));
|
|
6568
|
+
this.$customCells = contentChildren(CustomCellDirective, ...(ngDevMode ? [{ debugName: "$customCells" }] : []));
|
|
6569
|
+
this.$customGroupRows = contentChildren(CustomGroupRowDirective, ...(ngDevMode ? [{ debugName: "$customGroupRows" }] : []));
|
|
6552
6570
|
this.$menu = viewChild.required(MatMenu);
|
|
6553
6571
|
this.menuInjector = Injector.create({
|
|
6554
6572
|
providers: [{ provide: MatMenu, useFactory: () => this.$menu() }],
|
|
6555
6573
|
parent: this.injector
|
|
6556
6574
|
});
|
|
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' });
|
|
6575
|
+
this.$tableBuilder = input.required(...(ngDevMode ? [{ debugName: "$tableBuilder", alias: 'tableBuilder' }] : [{ alias: 'tableBuilder' }]));
|
|
6576
|
+
this.$tableIdInput = input(undefined, ...(ngDevMode ? [{ debugName: "$tableIdInput", alias: 'tableId' }] : [{ alias: 'tableId' }]));
|
|
6577
|
+
this.$trackByInput = input(undefined, ...(ngDevMode ? [{ debugName: "$trackByInput", alias: 'trackBy' }] : [{ alias: 'trackBy' }]));
|
|
6578
|
+
this.$inputFilters = input([], ...(ngDevMode ? [{ debugName: "$inputFilters", alias: 'inputFilters' }] : [{ alias: 'inputFilters' }]));
|
|
6579
|
+
this.$filterInfoInputs = computed(() => this.$inputFilters().filter(i => !isFunction(i)), ...(ngDevMode ? [{ debugName: "$filterInfoInputs" }] : []));
|
|
6580
|
+
this.$indexColumnInput = input(false, ...(ngDevMode ? [{ debugName: "$indexColumnInput", alias: 'indexColumn' }] : [{ alias: 'indexColumn' }]));
|
|
6581
|
+
this.$selectionColumnInput = input(false, ...(ngDevMode ? [{ debugName: "$selectionColumnInput", alias: 'selectionColumn' }] : [{ alias: 'selectionColumn' }]));
|
|
6582
|
+
this.$stickyHeaderInput = input(true, ...(ngDevMode ? [{ debugName: "$stickyHeaderInput", alias: 'stickyHeader' }] : [{ alias: 'stickyHeader' }]));
|
|
6583
|
+
this.$stickyFooterInput = input(false, ...(ngDevMode ? [{ debugName: "$stickyFooterInput", alias: 'stickyFooter' }] : [{ alias: 'stickyFooter' }]));
|
|
6584
|
+
this.$groupHeaderTemplate = input(undefined, ...(ngDevMode ? [{ debugName: "$groupHeaderTemplate", alias: 'groupHeaderTemplate' }] : [{ alias: 'groupHeaderTemplate' }]));
|
|
6585
|
+
this.$groupHeaderHeight = input(undefined, ...(ngDevMode ? [{ debugName: "$groupHeaderHeight", alias: 'groupHeaderHeight' }] : [{ alias: 'groupHeaderHeight' }]));
|
|
6586
|
+
this.$pageSize = input(undefined, ...(ngDevMode ? [{ debugName: "$pageSize", alias: 'pageSize' }] : [{ alias: 'pageSize' }]));
|
|
6569
6587
|
this._selection$ = new BehaviorSubject(null);
|
|
6570
6588
|
this.selection$ = outputFromObservable(this._selection$.pipe(notNull()), { alias: 'selection' });
|
|
6571
6589
|
this.onStateReset$ = output({ alias: 'onStateReset' });
|
|
6572
6590
|
this.onSaveState$ = output({ alias: 'onSaveState' });
|
|
6573
6591
|
this.state$ = outputFromObservable(toObservable(this.state.$savableState), { alias: 'state' });
|
|
6574
|
-
this.$data = computed(() => this.$sortedAndFilteredData()?.value || []);
|
|
6592
|
+
this.$data = computed(() => this.$sortedAndFilteredData()?.value || [], ...(ngDevMode ? [{ debugName: "$data" }] : []));
|
|
6575
6593
|
this.data$ = outputFromObservable(toObservable(this.$data), { alias: 'data' });
|
|
6576
6594
|
/**
|
|
6577
6595
|
* Will be different than $data if grouping is applied
|
|
6578
6596
|
*/
|
|
6579
|
-
this.$sortedAndFilteredAndGroupedData = computed(() => this.$filteredSortedAndGrouped()?.displayData || []);
|
|
6597
|
+
this.$sortedAndFilteredAndGroupedData = computed(() => this.$filteredSortedAndGrouped()?.displayData || [], ...(ngDevMode ? [{ debugName: "$sortedAndFilteredAndGroupedData" }] : []));
|
|
6580
6598
|
this.sortedAndFilteredAndGroupedData$ = outputFromObservable(toObservable(this.$sortedAndFilteredAndGroupedData), { alias: 'sortedAndFilteredAndGroupedData' });
|
|
6581
|
-
this.$displayData = computed(() => this.$tableBuilder() && this.$filteredSortedAndGrouped()?.displayData);
|
|
6599
|
+
this.$displayData = computed(() => this.$tableBuilder() && this.$filteredSortedAndGrouped()?.displayData, ...(ngDevMode ? [{ debugName: "$displayData" }] : []));
|
|
6582
6600
|
this.expandAllGroups = () => {
|
|
6583
6601
|
const groupHeaders = getAllGroupHeaderNames(this.$displayData());
|
|
6584
6602
|
this.state.expandOfGroup(groupHeaders.map(g => ({ groupKey: g.groupKey, uniqueNameOfHeadersToExpand: g.headers })));
|
|
@@ -6594,24 +6612,24 @@ class TableContainerComponent {
|
|
|
6594
6612
|
metaData,
|
|
6595
6613
|
customCell: this.$customCells().filter(cc => cc.$inited()).find(cc => cc.$customCell() === metaData.key)
|
|
6596
6614
|
}));
|
|
6597
|
-
});
|
|
6615
|
+
}, ...(ngDevMode ? [{ debugName: "$myColumns" }] : []));
|
|
6598
6616
|
this.$useVirtual = this.state.$isVirtual;
|
|
6599
6617
|
this.$collapsedFooter = this.state.$footerCollapsed;
|
|
6600
6618
|
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);
|
|
6619
|
+
this.$displayDataLength = computed(() => this.$displayData()?.length || 0, ...(ngDevMode ? [{ debugName: "$displayDataLength" }] : []));
|
|
6620
|
+
this.$tableBuilderSettings = computed(() => this.$tableBuilder().$settings(), ...(ngDevMode ? [{ debugName: "$tableBuilderSettings" }] : []));
|
|
6621
|
+
this.$trackBy = computed(() => this.$trackByInput() || this.$tableBuilderSettings()?.tableSettings?.trackBy, ...(ngDevMode ? [{ debugName: "$trackBy" }] : []));
|
|
6622
|
+
this.$tableId = computed(() => this.$tableIdInput() || this.$tableBuilderSettings()?.tableSettings?.tableId, ...(ngDevMode ? [{ debugName: "$tableId" }] : []));
|
|
6623
|
+
this.$includeSelectionColumn = computed(() => this.$selectionColumnInput() || !!this.$tableBuilderSettings()?.tableSettings?.includeSelectionColumn, ...(ngDevMode ? [{ debugName: "$includeSelectionColumn" }] : []));
|
|
6624
|
+
this.$includeIndexColumn = computed(() => this.$indexColumnInput() || !!this.$tableBuilderSettings()?.tableSettings?.includeIndexColumn, ...(ngDevMode ? [{ debugName: "$includeIndexColumn" }] : []));
|
|
6607
6625
|
this.$stickyHeader = computed(() => {
|
|
6608
6626
|
const settings = this.$tableBuilderSettings()?.columnHeaderSettings?.stickyHeaderRow;
|
|
6609
6627
|
if (settings != null) {
|
|
6610
6628
|
return settings;
|
|
6611
6629
|
}
|
|
6612
6630
|
return this.$stickyHeaderInput();
|
|
6613
|
-
});
|
|
6614
|
-
this.$stickyFooter = computed(() => this.$stickyFooterInput() || !!this.$tableBuilderSettings()?.columnFooterSettings?.stickyFooterRow);
|
|
6631
|
+
}, ...(ngDevMode ? [{ debugName: "$stickyHeader" }] : []));
|
|
6632
|
+
this.$stickyFooter = computed(() => this.$stickyFooterInput() || !!this.$tableBuilderSettings()?.columnFooterSettings?.stickyFooterRow, ...(ngDevMode ? [{ debugName: "$stickyFooter" }] : []));
|
|
6615
6633
|
this.$props = computed(() => {
|
|
6616
6634
|
const indexColumn = this.$includeIndexColumn();
|
|
6617
6635
|
const selectionColumn = this.$includeSelectionColumn();
|
|
@@ -6621,7 +6639,7 @@ class TableContainerComponent {
|
|
|
6621
6639
|
const groupHeaderHeight = this.$groupHeaderHeight();
|
|
6622
6640
|
const customGroupRows = this.$customGroupRows().filter(cgr => cgr.$inited());
|
|
6623
6641
|
return ({ indexColumn, selectionColumn, isSticky: stickHeader, stickyFooter, groupHeaderTemplate, groupHeaderHeight, customGroupRows });
|
|
6624
|
-
});
|
|
6642
|
+
}, ...(ngDevMode ? [{ debugName: "$props" }] : []));
|
|
6625
6643
|
this.#initTableBuilder = effect(() => {
|
|
6626
6644
|
const tb = this.$tableBuilder();
|
|
6627
6645
|
untracked(() => {
|
|
@@ -6630,7 +6648,7 @@ class TableContainerComponent {
|
|
|
6630
6648
|
tb._container.set(this);
|
|
6631
6649
|
}
|
|
6632
6650
|
});
|
|
6633
|
-
});
|
|
6651
|
+
}, ...(ngDevMode ? [{ debugName: "#initTableBuilder" }] : []));
|
|
6634
6652
|
this.#initializeTableSettingsFromTableBuilderAndPersistedStateEffect = effect(() => {
|
|
6635
6653
|
const metaLoaded = this.$isInitializationState(InitializationState.MetaDataLoaded)();
|
|
6636
6654
|
if (!metaLoaded)
|
|
@@ -6645,14 +6663,14 @@ class TableContainerComponent {
|
|
|
6645
6663
|
}
|
|
6646
6664
|
this.state.setInitializationState(InitializationState.Ready);
|
|
6647
6665
|
});
|
|
6648
|
-
});
|
|
6666
|
+
}, ...(ngDevMode ? [{ debugName: "#initializeTableSettingsFromTableBuilderAndPersistedStateEffect" }] : []));
|
|
6649
6667
|
this.#setPageSizeFromInputEffect = effect(() => {
|
|
6650
6668
|
const pageSize = this.$pageSize();
|
|
6651
6669
|
const userDefinedPageSize = this.state.$userDefinedPageSize();
|
|
6652
6670
|
if (pageSize && !userDefinedPageSize) {
|
|
6653
6671
|
untracked(() => this.state.setPageSize(pageSize));
|
|
6654
6672
|
}
|
|
6655
|
-
});
|
|
6673
|
+
}, ...(ngDevMode ? [{ debugName: "#setPageSizeFromInputEffect" }] : []));
|
|
6656
6674
|
this.#patchedFilters = [];
|
|
6657
6675
|
this.#patchSavableFilterDirectivesFromPersistedStateEffect = effect(() => {
|
|
6658
6676
|
const loaded = this.$isInitializationState(InitializationState.TableSettingsLoaded)();
|
|
@@ -6668,7 +6686,7 @@ class TableContainerComponent {
|
|
|
6668
6686
|
this.state.addFilter(f.filter$);
|
|
6669
6687
|
});
|
|
6670
6688
|
});
|
|
6671
|
-
});
|
|
6689
|
+
}, ...(ngDevMode ? [{ debugName: "#patchSavableFilterDirectivesFromPersistedStateEffect" }] : []));
|
|
6672
6690
|
this.#patchSavableFilterInputsFromPersistedStateEffect = effect(() => {
|
|
6673
6691
|
const loaded = this.$isInitializationState(InitializationState.TableSettingsLoaded)();
|
|
6674
6692
|
const inputFilters = this.$filterInfoInputs();
|
|
@@ -6689,11 +6707,11 @@ class TableContainerComponent {
|
|
|
6689
6707
|
this.#patchedFilters.push(f.filterId);
|
|
6690
6708
|
});
|
|
6691
6709
|
});
|
|
6692
|
-
});
|
|
6710
|
+
}, ...(ngDevMode ? [{ debugName: "#patchSavableFilterInputsFromPersistedStateEffect" }] : []));
|
|
6693
6711
|
this.#addPropsToStoreFromInputsEffect = effect(() => {
|
|
6694
6712
|
const props = this.$props();
|
|
6695
6713
|
untracked(() => this.state.setProps(props));
|
|
6696
|
-
});
|
|
6714
|
+
}, ...(ngDevMode ? [{ debugName: "#addPropsToStoreFromInputsEffect" }] : []));
|
|
6697
6715
|
this.#addMetaDataToStoreEffect = effect(() => {
|
|
6698
6716
|
const allMetaDatas = this.$allMetaDatas();
|
|
6699
6717
|
if (!allMetaDatas)
|
|
@@ -6702,7 +6720,7 @@ class TableContainerComponent {
|
|
|
6702
6720
|
this.state.setMetaData(allMetaDatas);
|
|
6703
6721
|
this.state.setLinkMaps(createLinkCreatorDict(allMetaDatas));
|
|
6704
6722
|
});
|
|
6705
|
-
});
|
|
6723
|
+
}, ...(ngDevMode ? [{ debugName: "#addMetaDataToStoreEffect" }] : []));
|
|
6706
6724
|
this.#setFilteredDataLengthEffect = effect(() => {
|
|
6707
6725
|
const tableBuilder = this.$tableBuilder();
|
|
6708
6726
|
const data = this.$sortedAndFilteredData();
|
|
@@ -6711,7 +6729,7 @@ class TableContainerComponent {
|
|
|
6711
6729
|
untracked(() => {
|
|
6712
6730
|
this.dataStore.patchState({ sortedFilteredDataLength: data.value.length });
|
|
6713
6731
|
});
|
|
6714
|
-
});
|
|
6732
|
+
}, ...(ngDevMode ? [{ debugName: "#setFilteredDataLengthEffect" }] : []));
|
|
6715
6733
|
this.#setDataSourceDataEffect = effect(() => {
|
|
6716
6734
|
const tableBuilder = this.$tableBuilder();
|
|
6717
6735
|
const flat = this.$filteredSortedAndGrouped();
|
|
@@ -6722,7 +6740,7 @@ class TableContainerComponent {
|
|
|
6722
6740
|
this.dataSource.setData(data);
|
|
6723
6741
|
this.dataStore.patchState({ sortedFilteredGroupedDataLength: data.length });
|
|
6724
6742
|
});
|
|
6725
|
-
});
|
|
6743
|
+
}, ...(ngDevMode ? [{ debugName: "#setDataSourceDataEffect" }] : []));
|
|
6726
6744
|
this.#destroyRef = inject(DestroyRef).onDestroy(() => {
|
|
6727
6745
|
const tableId = this.$tableId();
|
|
6728
6746
|
if (tableId) {
|
|
@@ -6735,14 +6753,14 @@ class TableContainerComponent {
|
|
|
6735
6753
|
return this.stateService.$selectLocalTableStateForView(tableId)();
|
|
6736
6754
|
}
|
|
6737
6755
|
return undefined;
|
|
6738
|
-
});
|
|
6756
|
+
}, ...(ngDevMode ? [{ debugName: "$persistedState" }] : []));
|
|
6739
6757
|
this.$allFilterDirectives = computed(() => {
|
|
6740
6758
|
if (this.wrapper) {
|
|
6741
6759
|
return [...this.$filterDirectives(), ...this.$customFilterDirectives(), ...this.wrapper.$registrations()];
|
|
6742
6760
|
}
|
|
6743
6761
|
return [...this.$filterDirectives(), ...this.$customFilterDirectives()];
|
|
6744
|
-
});
|
|
6745
|
-
this.$tableBuilderMetaData = computed(() => this.$tableBuilder()?.$metaData());
|
|
6762
|
+
}, ...(ngDevMode ? [{ debugName: "$allFilterDirectives" }] : []));
|
|
6763
|
+
this.$tableBuilderMetaData = computed(() => this.$tableBuilder()?.$metaData(), ...(ngDevMode ? [{ debugName: "$tableBuilderMetaData" }] : []));
|
|
6746
6764
|
this.$allMetaDatas = computed(() => {
|
|
6747
6765
|
const tableBuilderMetaData = this.$tableBuilderMetaData();
|
|
6748
6766
|
if (!tableBuilderMetaData)
|
|
@@ -6750,13 +6768,16 @@ class TableContainerComponent {
|
|
|
6750
6768
|
const customCellMetaDatas = this.$customCells().filter(cc => cc.$inited()).map(cc => cc.$metaData()).filter(d => !!d);
|
|
6751
6769
|
const mappedCustomCellMetaDatas = customCellMetaDatas.map(md => mergeCustomCellMetaData(md, tableBuilderMetaData.find(item => item.key === md.key)));
|
|
6752
6770
|
return [...tableBuilderMetaData, ...mappedCustomCellMetaDatas];
|
|
6753
|
-
});
|
|
6754
|
-
this.$allMetaDataTimeStamped = linkedSignal({
|
|
6755
|
-
|
|
6756
|
-
|
|
6757
|
-
|
|
6758
|
-
|
|
6759
|
-
|
|
6771
|
+
}, ...(ngDevMode ? [{ debugName: "$allMetaDatas" }] : []));
|
|
6772
|
+
this.$allMetaDataTimeStamped = linkedSignal(...(ngDevMode ? [{ debugName: "$allMetaDataTimeStamped", source: this.$allMetaDatas,
|
|
6773
|
+
computation: (curr, previous) => {
|
|
6774
|
+
return { timestamp: Date.now(), value: curr || [], previous: previous?.value.value || [] };
|
|
6775
|
+
} }] : [{
|
|
6776
|
+
source: this.$allMetaDatas,
|
|
6777
|
+
computation: (curr, previous) => {
|
|
6778
|
+
return { timestamp: Date.now(), value: curr || [], previous: previous?.value.value || [] };
|
|
6779
|
+
}
|
|
6780
|
+
}]));
|
|
6760
6781
|
this.#setUpAllValuesFilters = effect(() => {
|
|
6761
6782
|
const data = this.$allDataTimeStamped();
|
|
6762
6783
|
const allMeta = this.$allMetaDataTimeStamped();
|
|
@@ -6767,7 +6788,7 @@ class TableContainerComponent {
|
|
|
6767
6788
|
const mapped = buildInAllValuesFilter(this.config, allMeta.previous, allMeta.value, data.value, allMeta.timestamp, data.timestamp, currentAll);
|
|
6768
6789
|
this.state.patchState({ allFilters: mapped });
|
|
6769
6790
|
});
|
|
6770
|
-
});
|
|
6791
|
+
}, ...(ngDevMode ? [{ debugName: "#setUpAllValuesFilters" }] : []));
|
|
6771
6792
|
this.$preds = computed(() => {
|
|
6772
6793
|
const predicateInputFilters = this.$inputFilters().filter(isFunction);
|
|
6773
6794
|
const notSavableFilterDirectives = this.$allFilterDirectives()
|
|
@@ -6776,39 +6797,56 @@ class TableContainerComponent {
|
|
|
6776
6797
|
.filter(d => !!d && needsFilterCreation(d))
|
|
6777
6798
|
.map(d => createFilterFunc(d));
|
|
6778
6799
|
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
|
-
|
|
6800
|
+
}, ...(ngDevMode ? [{ debugName: "$preds" }] : []));
|
|
6801
|
+
this.$predicateFiltersState = linkedSignal(...(ngDevMode ? [{ debugName: "$predicateFiltersState", source: this.$preds,
|
|
6802
|
+
computation: (curr, previous) => {
|
|
6803
|
+
if (!previous?.value)
|
|
6804
|
+
return ({ value: updateFilterPredicateState({ allFilters: [] }, curr), timestamp: Date.now() });
|
|
6805
|
+
return ({ value: updateFilterPredicateState(previous.value.value, curr), timestamp: Date.now() });
|
|
6806
|
+
} }] : [{
|
|
6807
|
+
source: this.$preds,
|
|
6808
|
+
computation: (curr, previous) => {
|
|
6809
|
+
if (!previous?.value)
|
|
6810
|
+
return ({ value: updateFilterPredicateState({ allFilters: [] }, curr), timestamp: Date.now() });
|
|
6811
|
+
return ({ value: updateFilterPredicateState(previous.value.value, curr), timestamp: Date.now() });
|
|
6812
|
+
}
|
|
6813
|
+
}]));
|
|
6814
|
+
this.$savableFiltersState = linkedSignal(...(ngDevMode ? [{ debugName: "$savableFiltersState", source: this.state.$filters,
|
|
6815
|
+
computation: (curr, previous) => {
|
|
6816
|
+
if (!previous?.value)
|
|
6817
|
+
return ({ value: updateFilterInfoState({ allFilters: {} }, curr), timestamp: Date.now() });
|
|
6818
|
+
return ({ value: updateFilterInfoState(previous.value.value, curr), timestamp: Date.now() });
|
|
6819
|
+
} }] : [{
|
|
6820
|
+
source: this.state.$filters,
|
|
6821
|
+
computation: (curr, previous) => {
|
|
6822
|
+
if (!previous?.value)
|
|
6823
|
+
return ({ value: updateFilterInfoState({ allFilters: {} }, curr), timestamp: Date.now() });
|
|
6824
|
+
return ({ value: updateFilterInfoState(previous.value.value, curr), timestamp: Date.now() });
|
|
6825
|
+
}
|
|
6826
|
+
}]));
|
|
6796
6827
|
this.$allFilterStatesTimeStamped = computed(() => {
|
|
6797
6828
|
if (!this.$isInitializationState(InitializationState.Ready)())
|
|
6798
6829
|
return undefined;
|
|
6799
6830
|
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
|
-
|
|
6831
|
+
}, ...(ngDevMode ? [{ debugName: "$allFilterStatesTimeStamped" }] : []));
|
|
6832
|
+
this.$sortStateTimeStamped = linkedSignal(...(ngDevMode ? [{ debugName: "$sortStateTimeStamped", source: computed(() => this.$isInitializationState(InitializationState.Ready)() && this.state.$getSorts()),
|
|
6833
|
+
computation: (curr, prev) => {
|
|
6834
|
+
if (!curr)
|
|
6835
|
+
return undefined;
|
|
6836
|
+
if (!prev?.value)
|
|
6837
|
+
return ({ value: updateSortState(initialSortState, curr), timestamp: Date.now() });
|
|
6838
|
+
return ({ value: updateSortState(prev.value.value, curr), timestamp: Date.now() });
|
|
6839
|
+
} }] : [{
|
|
6840
|
+
source: computed(() => this.$isInitializationState(InitializationState.Ready)() && this.state.$getSorts()),
|
|
6841
|
+
computation: (curr, prev) => {
|
|
6842
|
+
if (!curr)
|
|
6843
|
+
return undefined;
|
|
6844
|
+
if (!prev?.value)
|
|
6845
|
+
return ({ value: updateSortState(initialSortState, curr), timestamp: Date.now() });
|
|
6846
|
+
return ({ value: updateSortState(prev.value.value, curr), timestamp: Date.now() });
|
|
6847
|
+
}
|
|
6848
|
+
}]));
|
|
6849
|
+
this.$allData = computed(() => (this.$tableBuilder()?.$initialized() && this.$tableBuilder()?.$data()) || [], ...(ngDevMode ? [{ debugName: "$allData" }] : []));
|
|
6812
6850
|
this.$allDataTimeStamped = computed(() => {
|
|
6813
6851
|
const data = this.$allData();
|
|
6814
6852
|
if (!data)
|
|
@@ -6817,7 +6855,7 @@ class TableContainerComponent {
|
|
|
6817
6855
|
value: data,
|
|
6818
6856
|
timestamp: Date.now()
|
|
6819
6857
|
});
|
|
6820
|
-
});
|
|
6858
|
+
}, ...(ngDevMode ? [{ debugName: "$allDataTimeStamped" }] : []));
|
|
6821
6859
|
this.$allTimeStamped = computed(() => {
|
|
6822
6860
|
const data = this.$allDataTimeStamped();
|
|
6823
6861
|
const sort = this.$sortStateTimeStamped();
|
|
@@ -6829,22 +6867,31 @@ class TableContainerComponent {
|
|
|
6829
6867
|
sort,
|
|
6830
6868
|
filter
|
|
6831
6869
|
});
|
|
6832
|
-
});
|
|
6833
|
-
this.$sortedAndFilteredData = linkedSignal({
|
|
6834
|
-
|
|
6835
|
-
|
|
6836
|
-
|
|
6837
|
-
|
|
6838
|
-
|
|
6839
|
-
|
|
6840
|
-
|
|
6841
|
-
|
|
6842
|
-
|
|
6843
|
-
|
|
6844
|
-
|
|
6845
|
-
|
|
6846
|
-
|
|
6847
|
-
|
|
6870
|
+
}, ...(ngDevMode ? [{ debugName: "$allTimeStamped" }] : []));
|
|
6871
|
+
this.$sortedAndFilteredData = linkedSignal(...(ngDevMode ? [{ debugName: "$sortedAndFilteredData", source: this.$allTimeStamped,
|
|
6872
|
+
computation: (values, prev) => {
|
|
6873
|
+
const init = this.$isInitializationState(InitializationState.Ready);
|
|
6874
|
+
if (!values || !init)
|
|
6875
|
+
return undefined;
|
|
6876
|
+
const { data, filter, sort } = values;
|
|
6877
|
+
const val = prev?.value?.value || data.value;
|
|
6878
|
+
const filteredData = sortAndFilterData(data, filter, sort, !prev?.value, val);
|
|
6879
|
+
return ({ value: filteredData, timestamp: Date.now() });
|
|
6880
|
+
} }] : [{
|
|
6881
|
+
source: this.$allTimeStamped,
|
|
6882
|
+
computation: (values, prev) => {
|
|
6883
|
+
const init = this.$isInitializationState(InitializationState.Ready);
|
|
6884
|
+
if (!values || !init)
|
|
6885
|
+
return undefined;
|
|
6886
|
+
const { data, filter, sort } = values;
|
|
6887
|
+
const val = prev?.value?.value || data.value;
|
|
6888
|
+
const filteredData = sortAndFilterData(data, filter, sort, !prev?.value, val);
|
|
6889
|
+
return ({ value: filteredData, timestamp: Date.now() });
|
|
6890
|
+
}
|
|
6891
|
+
}]));
|
|
6892
|
+
this.$timestampedGroups = computed(() => ({ value: this.state.$groupByData(), timestamp: Date.now() }), ...(ngDevMode ? [{ debugName: "$timestampedGroups" }] : []));
|
|
6893
|
+
this.$timestampedExpanded = computed(() => ({ value: this.state.$expandGroups(), timestamp: Date.now() }), ...(ngDevMode ? [{ debugName: "$timestampedExpanded" }] : []));
|
|
6894
|
+
this.$timestampedGroupSortUpdated = computed(() => ({ value: this.state.$sortedGroupsUpdates(), timestamp: Date.now() }), ...(ngDevMode ? [{ debugName: "$timestampedGroupSortUpdated" }] : []));
|
|
6848
6895
|
this.$dataAndGroupsTimestamped = computed(() => {
|
|
6849
6896
|
const data = this.$sortedAndFilteredData();
|
|
6850
6897
|
const groups = this.$timestampedGroups();
|
|
@@ -6858,16 +6905,22 @@ class TableContainerComponent {
|
|
|
6858
6905
|
expanded,
|
|
6859
6906
|
groupSorts,
|
|
6860
6907
|
});
|
|
6861
|
-
});
|
|
6862
|
-
this.$filteredSortedAndGrouped = linkedSignal({
|
|
6863
|
-
|
|
6864
|
-
|
|
6865
|
-
|
|
6866
|
-
|
|
6867
|
-
|
|
6868
|
-
|
|
6869
|
-
|
|
6870
|
-
|
|
6908
|
+
}, ...(ngDevMode ? [{ debugName: "$dataAndGroupsTimestamped" }] : []));
|
|
6909
|
+
this.$filteredSortedAndGrouped = linkedSignal(...(ngDevMode ? [{ debugName: "$filteredSortedAndGrouped", source: this.$dataAndGroupsTimestamped,
|
|
6910
|
+
computation: (curr, prev) => {
|
|
6911
|
+
if (!curr)
|
|
6912
|
+
return undefined;
|
|
6913
|
+
const val = prev?.value?.groupedData || [];
|
|
6914
|
+
return updateGroupByState(val, curr, !prev?.value, this.state.$metaData());
|
|
6915
|
+
} }] : [{
|
|
6916
|
+
source: this.$dataAndGroupsTimestamped,
|
|
6917
|
+
computation: (curr, prev) => {
|
|
6918
|
+
if (!curr)
|
|
6919
|
+
return undefined;
|
|
6920
|
+
const val = prev?.value?.groupedData || [];
|
|
6921
|
+
return updateGroupByState(val, curr, !prev?.value, this.state.$metaData());
|
|
6922
|
+
}
|
|
6923
|
+
}]));
|
|
6871
6924
|
this.$isInitializationState = (state) => computed(() => this.state.selectSignal(s => s.initializationState >= state)());
|
|
6872
6925
|
this.headerId = TableContainerComponent.headerId;
|
|
6873
6926
|
}
|
|
@@ -6893,10 +6946,10 @@ class TableContainerComponent {
|
|
|
6893
6946
|
#destroyRef;
|
|
6894
6947
|
#setUpAllValuesFilters;
|
|
6895
6948
|
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 }); }
|
|
6949
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TableContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6950
|
+
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
6951
|
}
|
|
6899
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
6952
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TableContainerComponent, decorators: [{
|
|
6900
6953
|
type: Component,
|
|
6901
6954
|
args: [{ selector: 'tb-table-container', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TableStore, ExportToCsvService, WrapperFilterStore, DataStore], imports: [
|
|
6902
6955
|
NgTemplateOutlet,
|
|
@@ -6905,7 +6958,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImpor
|
|
|
6905
6958
|
SortMenuComponent, GenericTableComponent, ProfilesMenuComponent, TableHeaderMenuComponent,
|
|
6906
6959
|
MatButtonModule, MatMenuModule, MatIconModule, MatTooltipModule, VirtualScrollContainer,
|
|
6907
6960
|
], 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
|
-
}] });
|
|
6961
|
+
}], 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
6962
|
function isFunction(a) {
|
|
6910
6963
|
return typeof a === 'function';
|
|
6911
6964
|
}
|
|
@@ -6919,8 +6972,8 @@ class TableBuilderModule {
|
|
|
6919
6972
|
]
|
|
6920
6973
|
};
|
|
6921
6974
|
}
|
|
6922
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
6923
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
6975
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TableBuilderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
6976
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.0", ngImport: i0, type: TableBuilderModule, imports: [TableContainerComponent,
|
|
6924
6977
|
CustomCellDirective,
|
|
6925
6978
|
CustomGroupRowDirective,
|
|
6926
6979
|
TableFilterDirective,
|
|
@@ -6931,11 +6984,11 @@ class TableBuilderModule {
|
|
|
6931
6984
|
TableFilterStringContainsDirective,
|
|
6932
6985
|
TableWrapperDirective,
|
|
6933
6986
|
UtilitiesModule] }); }
|
|
6934
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
6987
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TableBuilderModule, providers: [
|
|
6935
6988
|
MultiSortDirective,
|
|
6936
6989
|
], imports: [TableContainerComponent, UtilitiesModule] }); }
|
|
6937
6990
|
}
|
|
6938
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
6991
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: TableBuilderModule, decorators: [{
|
|
6939
6992
|
type: NgModule,
|
|
6940
6993
|
args: [{
|
|
6941
6994
|
imports: [
|
|
@@ -6992,21 +7045,21 @@ class TableBuilder {
|
|
|
6992
7045
|
this.data = data;
|
|
6993
7046
|
this.metaData = metaData;
|
|
6994
7047
|
this.settings = settings;
|
|
6995
|
-
this._container = signal(undefined);
|
|
7048
|
+
this._container = signal(undefined, ...(ngDevMode ? [{ debugName: "_container" }] : []));
|
|
6996
7049
|
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);
|
|
7050
|
+
this.$metaData = computed(() => this.$initialized() ? this.#$metaData() : undefined, ...(ngDevMode ? [{ debugName: "$metaData" }] : []));
|
|
7051
|
+
this.$settings = computed(() => this.$initialized() ? this.#$settings() : undefined, ...(ngDevMode ? [{ debugName: "$settings" }] : []));
|
|
7052
|
+
this.#$metaNeedsPrep = signal(false, ...(ngDevMode ? [{ debugName: "#$metaNeedsPrep" }] : []));
|
|
7053
|
+
this.#$dataIsObservable = signal(false, ...(ngDevMode ? [{ debugName: "#$dataIsObservable" }] : []));
|
|
7054
|
+
this.#$settingsIsObservable = signal(false, ...(ngDevMode ? [{ debugName: "#$settingsIsObservable" }] : []));
|
|
7055
|
+
this.#$needsPrep = computed(() => this.#$dataIsObservable() || this.#$metaNeedsPrep() || this.#$settingsIsObservable(), ...(ngDevMode ? [{ debugName: "#$needsPrep" }] : []));
|
|
7056
|
+
this.$initialized = signal(false, ...(ngDevMode ? [{ debugName: "$initialized" }] : []));
|
|
7004
7057
|
this.#dataCleaners = computed(() => {
|
|
7005
7058
|
const metaData = this.$metaData();
|
|
7006
7059
|
if (!metaData)
|
|
7007
7060
|
return undefined;
|
|
7008
7061
|
return createDataCleaners(metaData);
|
|
7009
|
-
});
|
|
7062
|
+
}, ...(ngDevMode ? [{ debugName: "#dataCleaners" }] : []));
|
|
7010
7063
|
this.$data = computed(() => {
|
|
7011
7064
|
const data = this.#$data();
|
|
7012
7065
|
const cleaners = this.#dataCleaners();
|
|
@@ -7018,7 +7071,7 @@ class TableBuilder {
|
|
|
7018
7071
|
return cleaned;
|
|
7019
7072
|
});
|
|
7020
7073
|
return cleanedData;
|
|
7021
|
-
});
|
|
7074
|
+
}, ...(ngDevMode ? [{ debugName: "$data" }] : []));
|
|
7022
7075
|
if (isObservable(data)) {
|
|
7023
7076
|
this.#$dataIsObservable.set(true);
|
|
7024
7077
|
}
|
|
@@ -7061,7 +7114,7 @@ class TableBuilder {
|
|
|
7061
7114
|
this.#$metaData = toSignal(this.metaData, { injector, initialValue: [] });
|
|
7062
7115
|
}
|
|
7063
7116
|
else {
|
|
7064
|
-
this.#$metaData = computed(() => this.createMetaData(this.#$data()[0]));
|
|
7117
|
+
this.#$metaData = computed(() => this.createMetaData(this.#$data()[0]), ...(ngDevMode ? [{ debugName: "#$metaData" }] : []));
|
|
7065
7118
|
}
|
|
7066
7119
|
}
|
|
7067
7120
|
this.$initialized.set(true);
|
|
@@ -7121,12 +7174,12 @@ function actionStatusReducer(state = initialState, action) {
|
|
|
7121
7174
|
}
|
|
7122
7175
|
|
|
7123
7176
|
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: "
|
|
7177
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: NgrxExtModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
7178
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.0", ngImport: i0, type: NgrxExtModule, imports: [CommonModule, i1$9.StoreFeatureModule] }); }
|
|
7179
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: NgrxExtModule, imports: [CommonModule,
|
|
7127
7180
|
StoreModule.forFeature('ActionStatus', actionStatusReducer)] }); }
|
|
7128
7181
|
}
|
|
7129
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
7182
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: NgrxExtModule, decorators: [{
|
|
7130
7183
|
type: NgModule,
|
|
7131
7184
|
args: [{
|
|
7132
7185
|
declarations: [],
|
|
@@ -7144,10 +7197,10 @@ class ActionStateSpinnerComponent {
|
|
|
7144
7197
|
ngOnInit() {
|
|
7145
7198
|
this.serverActionStatus$ = this.status$.pipe(delayOn(a => a.status === serverStatusTypes.inProgress, 500));
|
|
7146
7199
|
}
|
|
7147
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
7148
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
7200
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ActionStateSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7201
|
+
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
7202
|
}
|
|
7150
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
7203
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ActionStateSpinnerComponent, decorators: [{
|
|
7151
7204
|
type: Component,
|
|
7152
7205
|
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
7206
|
}], propDecorators: { status$: [{
|
|
@@ -7155,11 +7208,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImpor
|
|
|
7155
7208
|
}] } });
|
|
7156
7209
|
|
|
7157
7210
|
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: "
|
|
7211
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ActionStateUiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
7212
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.0", ngImport: i0, type: ActionStateUiModule, imports: [ActionStateSpinnerComponent], exports: [ActionStateSpinnerComponent] }); }
|
|
7213
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ActionStateUiModule, imports: [ActionStateSpinnerComponent] }); }
|
|
7161
7214
|
}
|
|
7162
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
7215
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: ActionStateUiModule, decorators: [{
|
|
7163
7216
|
type: NgModule,
|
|
7164
7217
|
args: [{
|
|
7165
7218
|
imports: [
|