@mediusinc/mng-commons 7.0.0-rc.1 → 7.0.0-rc.2

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.
Files changed (37) hide show
  1. package/core/index.d.ts +24 -4
  2. package/fesm2022/mediusinc-mng-commons-core.mjs +108 -72
  3. package/fesm2022/mediusinc-mng-commons-core.mjs.map +1 -1
  4. package/fesm2022/mediusinc-mng-commons-filter.mjs +16 -0
  5. package/fesm2022/mediusinc-mng-commons-filter.mjs.map +1 -1
  6. package/fesm2022/mediusinc-mng-commons-form-api.mjs.map +1 -1
  7. package/fesm2022/mediusinc-mng-commons-form.mjs +406 -49
  8. package/fesm2022/mediusinc-mng-commons-form.mjs.map +1 -1
  9. package/fesm2022/mediusinc-mng-commons-model-class.mjs.map +1 -1
  10. package/fesm2022/mediusinc-mng-commons-model.mjs.map +1 -1
  11. package/fesm2022/mediusinc-mng-commons-table-api-class.mjs.map +1 -1
  12. package/fesm2022/mediusinc-mng-commons-table-api.mjs.map +1 -1
  13. package/fesm2022/mediusinc-mng-commons-table-column-toggle.component-BQ99oqWO.mjs +30 -0
  14. package/fesm2022/mediusinc-mng-commons-table-column-toggle.component-BQ99oqWO.mjs.map +1 -0
  15. package/fesm2022/mediusinc-mng-commons-table-mediusinc-mng-commons-table-BLuM5Kpu.mjs +2700 -0
  16. package/fesm2022/mediusinc-mng-commons-table-mediusinc-mng-commons-table-BLuM5Kpu.mjs.map +1 -0
  17. package/fesm2022/mediusinc-mng-commons-table.mjs +1 -1
  18. package/fesm2022/mediusinc-mng-commons-tableview-api-class.mjs.map +1 -1
  19. package/fesm2022/mediusinc-mng-commons-tableview-api.mjs +31 -3
  20. package/fesm2022/mediusinc-mng-commons-tableview-api.mjs.map +1 -1
  21. package/fesm2022/mediusinc-mng-commons-tableview.mjs +155 -123
  22. package/fesm2022/mediusinc-mng-commons-tableview.mjs.map +1 -1
  23. package/fesm2022/mediusinc-mng-commons.mjs.map +1 -1
  24. package/filter/index.d.ts +13 -0
  25. package/form/index.d.ts +109 -22
  26. package/i18n/en.json +12 -1
  27. package/i18n/sl.json +12 -1
  28. package/package.json +24 -24
  29. package/table/api/index.d.ts +2 -2
  30. package/table/index.d.ts +97 -29
  31. package/tableview/api/index.d.ts +17 -2
  32. package/tableview/index.d.ts +7 -1
  33. package/version-info.json +6 -6
  34. package/fesm2022/mediusinc-mng-commons-table-column-toggle.component-0Dtv48mq.mjs +0 -30
  35. package/fesm2022/mediusinc-mng-commons-table-column-toggle.component-0Dtv48mq.mjs.map +0 -1
  36. package/fesm2022/mediusinc-mng-commons-table-mediusinc-mng-commons-table-BsAwyXiN.mjs +0 -2417
  37. package/fesm2022/mediusinc-mng-commons-table-mediusinc-mng-commons-table-BsAwyXiN.mjs.map +0 -1
@@ -1,2417 +0,0 @@
1
- import { trigger, transition, style, animate } from '@angular/animations';
2
- import { NgTemplateOutlet, NgClass, DecimalPipe, CurrencyPipe, DatePipe, AsyncPipe } from '@angular/common';
3
- import * as i0 from '@angular/core';
4
- import { InjectionToken, inject, Injector, signal, computed, Injectable, untracked, ElementRef, Renderer2, ChangeDetectorRef, input, booleanAttribute, viewChild, ChangeDetectionStrategy, ViewEncapsulation, Component, LOCALE_ID, Pipe, output, Directive, contentChildren, afterNextRender } from '@angular/core';
5
- import { toSignal, toObservable, takeUntilDestroyed, outputFromObservable } from '@angular/core/rxjs-interop';
6
- import * as i1 from '@angular/forms';
7
- import { FormsModule } from '@angular/forms';
8
- import { TranslatePipe, TranslateService } from '@ngx-translate/core';
9
- import * as i1$1 from 'primeng/api';
10
- import { OverlayService, TranslationKeys, MessageService } from 'primeng/api';
11
- import { DatePicker } from 'primeng/datepicker';
12
- import { DomHandler, ConnectedOverlayScrollHandler } from 'primeng/dom';
13
- import { InputGroup } from 'primeng/inputgroup';
14
- import { InputGroupAddon } from 'primeng/inputgroupaddon';
15
- import { InputNumber } from 'primeng/inputnumber';
16
- import { InputText } from 'primeng/inputtext';
17
- import * as i1$2 from 'primeng/table';
18
- import { TableModule, Table } from 'primeng/table';
19
- import { ToggleSwitch } from 'primeng/toggleswitch';
20
- import { ZIndexUtils } from 'primeng/utils';
21
- import { combineLatest, switchMap, of, Subject, debounceTime, distinctUntilChanged, ReplaySubject, NEVER, BehaviorSubject, skip, filter } from 'rxjs';
22
- import { FilterMatchMode, dateToIsoString, angularDateFormatHasTime, angularDateFormatHasSeconds, fromAngularDateFormatToPrime, fromAngularNumberFormatToFractions, COMMONS_MODULE_CONFIG_IT, effectWithDeps, toObservable as toObservable$1, CommonsService, getI18nTypePropertyKey, RerenderDirective, GetterPipe, TemplatePipe, JsonPathPipe, ComponentDirective, BooleanPipe, EnumPipe, TemplateDirective, findTemplateByName, getI18nErrorParams, getI18nForError, toastMessage, CommonsStorageService, LoggerService, booleanOrUndefinedAttribute, mergeDataListParamsWithDefaults, fromTableLoadToDataListParams, dataListParamsToUrlQuery, fromSubscribeError, getErrorLogLevel, fromUrlQueryToDataListParams, I18nPropertyPipe, ClassMapPipe, CommonsFeatureTypeEnum } from '@mediusinc/mng-commons/core';
23
- import { FilterTypeEnum, FilterDescriptor, FilterDisplayTypeEnum, FilterLookupTypeEnum, FilterLookupDescriptor } from '@mediusinc/mng-commons/filter';
24
- import { DateRangeComponent, AutocompleteComponent, DropdownComponent, InputTrimDirective, NumberRangeComponent, AutocompleteTemplateDirective, DropdownTemplateDirective, DateRangeTemplateDirective, NumberRangeTemplateDirective } from '@mediusinc/mng-commons/form';
25
- import { PrimeNG } from 'primeng/config';
26
- import { tableDescriptor, TableDynamicDescriptorInst, TablePaginationModeEnum, ColumnDisplayTypeEnum, TableSizeEnum } from '@mediusinc/mng-commons/table/api';
27
- import { ButtonDirective, Button } from 'primeng/button';
28
- import { Tooltip } from 'primeng/tooltip';
29
- import { Tag, TagModule } from 'primeng/tag';
30
- import { Checkbox } from 'primeng/checkbox';
31
- import { Message } from 'primeng/message';
32
- import { ToggleButton } from 'primeng/togglebutton';
33
- import { lookupDataProvider } from '@mediusinc/mng-commons/form/api';
34
- import { IconField } from 'primeng/iconfield';
35
- import { InputIcon } from 'primeng/inputicon';
36
- import { Popover } from 'primeng/popover';
37
- import { Skeleton } from 'primeng/skeleton';
38
- import { Router, ActivatedRoute, NavigationStart, NavigationEnd, NavigationCancel, NavigationError } from '@angular/router';
39
- import { getI18nForModel } from '@mediusinc/mng-commons/model';
40
-
41
- function filterGenerateMatchModeOptions(primeConfig, descriptor, cmpSerCfg) {
42
- let options = undefined;
43
- if (descriptor == null || descriptor.filterType === FilterTypeEnum.String) {
44
- options = [
45
- { value: FilterMatchMode.Contains, label: primeConfig.getTranslation(FilterMatchMode.Contains) },
46
- { value: FilterMatchMode.NotContains, label: primeConfig.getTranslation(FilterMatchMode.NotContains) },
47
- { value: FilterMatchMode.Equals, label: primeConfig.getTranslation(FilterMatchMode.Equals) },
48
- { value: FilterMatchMode.NotEquals, label: primeConfig.getTranslation(FilterMatchMode.NotEquals) },
49
- { value: FilterMatchMode.StartsWith, label: primeConfig.getTranslation(FilterMatchMode.StartsWith) },
50
- { value: FilterMatchMode.EndsWith, label: primeConfig.getTranslation(FilterMatchMode.EndsWith) }
51
- ];
52
- }
53
- else if (descriptor.filterType === FilterTypeEnum.Boolean) {
54
- options = [{ value: FilterMatchMode.Equals, label: primeConfig.getTranslation(FilterMatchMode.Equals) }];
55
- }
56
- else if (descriptor.filterType === FilterTypeEnum.Number) {
57
- options = [
58
- { value: FilterMatchMode.Equals, label: primeConfig.getTranslation(FilterMatchMode.Equals) },
59
- { value: FilterMatchMode.NotEquals, label: primeConfig.getTranslation(FilterMatchMode.NotEquals) },
60
- { value: FilterMatchMode.LessThan, label: primeConfig.getTranslation(FilterMatchMode.LessThan) },
61
- { value: FilterMatchMode.LessThanOrEqualTo, label: primeConfig.getTranslation(FilterMatchMode.LessThanOrEqualTo) },
62
- { value: FilterMatchMode.GreaterThan, label: primeConfig.getTranslation(FilterMatchMode.GreaterThan) },
63
- { value: FilterMatchMode.GreaterThanOrEqualTo, label: primeConfig.getTranslation(FilterMatchMode.GreaterThanOrEqualTo) },
64
- { value: FilterMatchMode.Between, label: primeConfig.getTranslation(FilterMatchMode.Between) }
65
- ];
66
- }
67
- else if (descriptor.filterType === FilterTypeEnum.Lookup || descriptor.filterType === FilterTypeEnum.LookupEnum) {
68
- options = [
69
- { value: FilterMatchMode.Equals, label: primeConfig.getTranslation(FilterMatchMode.Equals) },
70
- { value: FilterMatchMode.NotEquals, label: primeConfig.getTranslation(FilterMatchMode.NotEquals) },
71
- { value: FilterMatchMode.In, label: primeConfig.getTranslation(FilterMatchMode.In) },
72
- { value: FilterMatchMode.NotIn, label: primeConfig.getTranslation(FilterMatchMode.NotIn) }
73
- ];
74
- }
75
- else if (descriptor.filterType === FilterTypeEnum.Date) {
76
- if (!descriptor.datePickerShowTime && !descriptor.dateValueNoTime && !cmpSerCfg?.filtersDateOnlyDisabled) {
77
- options = [
78
- { value: FilterMatchMode.Equals, label: primeConfig.getTranslation(FilterMatchMode.Equals) },
79
- { value: FilterMatchMode.NotEquals, label: primeConfig.getTranslation(FilterMatchMode.NotEquals) },
80
- { value: FilterMatchMode.LessThanOrEqualTo, label: primeConfig.getTranslation(FilterMatchMode.LessThanOrEqualTo) },
81
- { value: FilterMatchMode.GreaterThanOrEqualTo, label: primeConfig.getTranslation(FilterMatchMode.GreaterThanOrEqualTo) },
82
- { value: FilterMatchMode.Between, label: primeConfig.getTranslation(FilterMatchMode.Between) }
83
- ];
84
- }
85
- else {
86
- options = [
87
- { value: FilterMatchMode.Equals, label: primeConfig.getTranslation(FilterMatchMode.Equals) },
88
- { value: FilterMatchMode.LessThanOrEqualTo, label: primeConfig.getTranslation(FilterMatchMode.LessThanOrEqualTo) },
89
- { value: FilterMatchMode.GreaterThanOrEqualTo, label: primeConfig.getTranslation(FilterMatchMode.GreaterThanOrEqualTo) },
90
- { value: FilterMatchMode.Between, label: primeConfig.getTranslation(FilterMatchMode.Between) }
91
- ];
92
- }
93
- }
94
- options?.push({ value: FilterMatchMode.Exists, label: primeConfig.getTranslation(FilterMatchMode.Exists) }, { value: FilterMatchMode.DoesNotExist, label: primeConfig.getTranslation(FilterMatchMode.DoesNotExist) });
95
- if (descriptor?.matchModes) {
96
- options = descriptor.matchModes.map(mm => ({ value: mm, label: primeConfig.getTranslation(mm) }));
97
- }
98
- return options || [];
99
- }
100
- /**
101
- * Gets the default match mode for a filter.
102
- *
103
- * @param {FilterDescriptor<any, any>} [descriptor] - The filter descriptor.
104
- * @param {SelectItem[]} [matchModes=[]] - The available match modes options.
105
- *
106
- * @return {FilterMatchModeExtendedType} The default match mode for the filter.
107
- */
108
- function filterGetDefaultMatchMode(descriptor, matchModes = []) {
109
- let defaultMatchMode = FilterMatchMode.Equals;
110
- if (descriptor?.filterType === FilterTypeEnum.String)
111
- defaultMatchMode = FilterMatchMode.StartsWith;
112
- // overwrite type default set in descriptor
113
- if (descriptor?.defaultMatchMode) {
114
- defaultMatchMode = descriptor.defaultMatchMode;
115
- }
116
- // check if default mode exists!
117
- if (matchModes.length > 0 && !matchModes.some(m => m.value === defaultMatchMode)) {
118
- defaultMatchMode = matchModes[0].value;
119
- }
120
- return defaultMatchMode;
121
- }
122
- function filterSetStateOnChange(filter, matchMode, value, filterType, filterDateCfg) {
123
- let displayValue = filter?.displayValue ?? value;
124
- let displayMatchMode = filter?.displayMatchMode ?? matchMode;
125
- // when equals is used on dates with time, the actual filter will be between, but displayed as equals
126
- if (filterType === FilterTypeEnum.Date && !filterDateCfg?.valueNoTime) {
127
- if (matchMode === FilterMatchMode.Between &&
128
- Array.isArray(value) &&
129
- value.length === 2 &&
130
- value.every(v => v instanceof Date || typeof v === 'string' || typeof v === 'number')) {
131
- if (filterAreDatesEqual(value[0], value[1], filterDateCfg)) {
132
- displayMatchMode = FilterMatchMode.Equals;
133
- displayValue = new Date(value[0]);
134
- }
135
- }
136
- else if (matchMode === FilterMatchMode.Equals && !value) {
137
- matchMode = FilterMatchMode.Between;
138
- }
139
- }
140
- if (filterType === FilterTypeEnum.Date && displayValue) {
141
- // display value for calendar cannot be string, convert to date
142
- displayValue = Array.isArray(displayValue)
143
- ? displayValue.map(v => (!(v instanceof Date) ? new Date(v) : v))
144
- : displayValue instanceof Date
145
- ? displayValue
146
- : new Date(displayValue);
147
- }
148
- if (filterType === FilterTypeEnum.Boolean && displayValue != null && typeof displayValue !== 'boolean') {
149
- displayValue = (typeof displayValue === 'string' && displayValue.toLowerCase() === 'true') || displayValue === 1;
150
- }
151
- if (filterType === FilterTypeEnum.Number && displayValue != null && typeof displayValue !== 'number') {
152
- const numValue = +displayValue;
153
- if (!isNaN(numValue)) {
154
- displayValue = numValue;
155
- }
156
- }
157
- return {
158
- ...filter,
159
- matchMode,
160
- value: value,
161
- displayMatchMode,
162
- displayValue
163
- };
164
- }
165
- function filterSetStateOnDisplayChange(filter, displayMatchMode, displayValue, filterType, filterDateCfg) {
166
- let matchMode = displayMatchMode;
167
- let value = displayValue;
168
- if (filterType === FilterTypeEnum.Date) {
169
- if (!filterDateCfg?.valueNoTime && displayValue !== null) {
170
- if (displayMatchMode === FilterMatchMode.Equals) {
171
- if (value instanceof Date || typeof value === 'string' || typeof value === 'number') {
172
- const fromDate = new Date(value);
173
- const toDate = new Date(value);
174
- if (filterDateCfg?.showTime) {
175
- if (filterDateCfg?.showSeconds) {
176
- fromDate.setMilliseconds(0);
177
- toDate.setMilliseconds(999);
178
- }
179
- else {
180
- fromDate.setSeconds(0, 0);
181
- toDate.setSeconds(59, 999);
182
- }
183
- }
184
- else {
185
- fromDate.setHours(0, 0, 0, 0);
186
- toDate.setHours(23, 59, 59, 999);
187
- }
188
- value = [fromDate, toDate];
189
- matchMode = FilterMatchMode.Between;
190
- }
191
- else {
192
- value = null;
193
- }
194
- }
195
- else if (displayMatchMode === FilterMatchMode.Between) {
196
- if (Array.isArray(value) && value.length === 2 && value.every(i => i instanceof Date || typeof i === 'string' || typeof i === 'number')) {
197
- const fromDate = new Date(value[0]);
198
- let toDate = new Date(value[1]);
199
- if (filterAreDatesEqual(fromDate, toDate, filterDateCfg)) {
200
- toDate = new Date(fromDate);
201
- if (filterDateCfg?.showTime) {
202
- if (filterDateCfg?.showSeconds) {
203
- toDate.setSeconds(toDate.getSeconds() + 1);
204
- }
205
- else {
206
- toDate.setMinutes(toDate.getMinutes() + 1);
207
- }
208
- }
209
- else {
210
- toDate.setDate(toDate.getDate() + 1);
211
- }
212
- value = [fromDate, toDate];
213
- matchMode = FilterMatchMode.Between;
214
- }
215
- }
216
- else {
217
- value = null;
218
- }
219
- }
220
- }
221
- const convertDateType = filterDateCfg?.valueNoTime ? 'date' : 'date-time';
222
- const convertDateTimeOpts = {
223
- utc: filterDateCfg?.valueUtc,
224
- noMillis: filterDateCfg?.valueNoMillis,
225
- noTimezone: filterDateCfg?.valueNoTimezone
226
- };
227
- value =
228
- value == null
229
- ? value
230
- : Array.isArray(value)
231
- ? value.filter(i => i != null).map(i => dateToIsoString(i, convertDateType, convertDateTimeOpts))
232
- : dateToIsoString(value, convertDateType, convertDateTimeOpts);
233
- }
234
- if (matchMode === FilterMatchMode.Exists || matchMode === FilterMatchMode.DoesNotExist) {
235
- value = null;
236
- }
237
- return {
238
- ...filter,
239
- displayMatchMode: displayMatchMode,
240
- matchMode: matchMode,
241
- displayValue: displayValue,
242
- value: value,
243
- caseSensitive: filterType === FilterTypeEnum.String ? filter?.caseSensitive : undefined
244
- };
245
- }
246
- function filterAreDatesEqual(fromDate, toDate, filterDateCfg) {
247
- const startDate = dateToIsoString(fromDate);
248
- const endDate = dateToIsoString(toDate);
249
- // 2020-11-02T11:12:12.000
250
- const cmpLength = filterDateCfg?.showTime ? (filterDateCfg?.showSeconds ? 19 : 16) : 10;
251
- return startDate.substring(0, cmpLength) === endDate.substring(0, cmpLength);
252
- }
253
- function filterApplySerializationConfigToCmp(config, cmpSerCfg) {
254
- // set default
255
- cmpSerCfg.dateTimeInUtc = false;
256
- cmpSerCfg.dateTimeWithTimezone = true;
257
- cmpSerCfg.dateTimeWithMillis = true;
258
- cmpSerCfg.filtersDateOnlyDisabled = false;
259
- // set customizations
260
- if (config?.serialization) {
261
- if (config.serialization.dateTimeInUtc !== undefined)
262
- cmpSerCfg.dateTimeInUtc = config.serialization.dateTimeInUtc;
263
- if (config.serialization.dateTimeWithTimezone !== undefined)
264
- cmpSerCfg.dateTimeWithTimezone = config.serialization.dateTimeWithTimezone;
265
- if (config.serialization.dateTimeWithMillis !== undefined)
266
- cmpSerCfg.dateTimeWithMillis = config.serialization.dateTimeWithMillis;
267
- if (config.serialization.filtersDateOnlyDisabled !== undefined)
268
- cmpSerCfg.filtersDateOnlyDisabled = config.serialization.filtersDateOnlyDisabled;
269
- }
270
- }
271
- function filterAdjustDisplayValueOnMatchModeChange(matchMode, value) {
272
- if (matchMode == null || matchMode === FilterMatchMode.Exists || matchMode === FilterMatchMode.DoesNotExist) {
273
- return value; // never change, only change later if something else changes here
274
- }
275
- if (matchMode === FilterMatchMode.Between) {
276
- if (!Array.isArray(value)) {
277
- return value != null ? [value, value] : [];
278
- }
279
- else if (value.length === 0 || value.length === 2) {
280
- return value;
281
- }
282
- else if (value.length === 1) {
283
- return [value[0], value[0]];
284
- }
285
- else {
286
- return [value[0], value[1]];
287
- }
288
- }
289
- if (matchMode === FilterMatchMode.In || matchMode === FilterMatchMode.NotIn) {
290
- return Array.isArray(value) ? value : value == null ? [] : [value];
291
- }
292
- return Array.isArray(value) && value.length > 0 ? value[0] : value;
293
- }
294
- function filterGetDateConfig(descriptor, serCfg) {
295
- if (!descriptor || descriptor.filterType !== FilterTypeEnum.Date) {
296
- return undefined;
297
- }
298
- const showTime = descriptor.datePickerShowTime ?? (descriptor.displayFormatApplyToField && descriptor.displayFormat ? angularDateFormatHasTime(descriptor.displayFormat) : false);
299
- return {
300
- valueNoTime: descriptor.dateValueNoTime || (!serCfg?.filtersDateOnlyDisabled && !showTime),
301
- valueUtc: descriptor.dateValueUtc ?? serCfg?.dateTimeInUtc,
302
- valueNoTimezone: descriptor.dateValueNoTimezone ?? !serCfg?.dateTimeWithTimezone,
303
- valueNoMillis: !serCfg?.dateTimeWithMillis,
304
- format: descriptor.datePickerFormat ?? (descriptor.displayFormatApplyToField && descriptor.displayFormat ? fromAngularDateFormatToPrime(descriptor.displayFormat) : undefined),
305
- showTime: showTime,
306
- showSeconds: showTime &&
307
- (descriptor.datePickerShowSeconds ?? (descriptor.displayFormatApplyToField && descriptor.displayFormat ? angularDateFormatHasSeconds(descriptor.displayFormat) : false))
308
- };
309
- }
310
- function filterGetNumberConfig(descriptor) {
311
- if (!descriptor || descriptor.filterType !== FilterTypeEnum.Number) {
312
- return undefined;
313
- }
314
- const displayCfg = descriptor.displayFormatApplyToField && descriptor.displayFormat ? fromAngularNumberFormatToFractions(descriptor.displayFormat) : undefined;
315
- return {
316
- fractionsMin: descriptor.numberMinFractionDigits ?? displayCfg?.fractionsMin,
317
- fractionsMax: descriptor.numberMaxFractionDigits ?? displayCfg?.fractionsMax
318
- };
319
- }
320
- /**
321
- * Creates an array of filter descriptors from an array of generic filter properties.
322
- *
323
- * @param {FilterGenericProperty[]} properties - The array of filterable properties, their types and options.
324
- * @param {LookupDataProviderInst<string, any, any, 'field'>} [valueLookup] - The lookup data provider for value suggestions.
325
- */
326
- function createFilterDescriptorsFromGeneric(properties, valueLookup) {
327
- return properties.reduce((createdFilterDescriptors, genericFilter) => {
328
- // when no generic value lookup is provided, lookup enum filters are treated as string filters
329
- const filterType = genericFilter.type === FilterTypeEnum.LookupEnum && valueLookup === undefined ? FilterTypeEnum.String : genericFilter.type;
330
- const filterDescriptor = new FilterDescriptor(genericFilter.property).asFilterType(filterType).asGenericFilter();
331
- if ((genericFilter.type === FilterTypeEnum.String || genericFilter.type === FilterTypeEnum.LookupEnum) && valueLookup) {
332
- filterDescriptor.withGenericValueProvider(valueLookup);
333
- }
334
- if (filterDescriptor && genericFilter.opts !== undefined) {
335
- switch (genericFilter.type) {
336
- case FilterTypeEnum.Number:
337
- filterDescriptor.asNumber(genericFilter.opts);
338
- break;
339
- case FilterTypeEnum.Date:
340
- filterDescriptor.asDate(genericFilter.opts);
341
- break;
342
- }
343
- }
344
- if (filterDescriptor) {
345
- createdFilterDescriptors.push(filterDescriptor);
346
- }
347
- return createdFilterDescriptors;
348
- }, []);
349
- }
350
- function isFilterValueBlank(value) {
351
- return value == null || (typeof value === 'string' && value.trim().length === 0) || (Array.isArray(value) && value.length === 0);
352
- }
353
-
354
- const COMMONS_TABLE_FEATURE_CONFIG_IT = new InjectionToken('COMMONS_TABLE_FEATURE_CONFIG');
355
-
356
- class TableMetadataService {
357
- static { this.cmpTypeName = 'TableComponent'; }
358
- #injector;
359
- #translationObserver;
360
- // signal sources
361
- #signalSources;
362
- #descriptor;
363
- #updateDescriptorFromSourceEffect;
364
- #genericFilters;
365
- // search
366
- #searchFieldsFromSignalSource;
367
- #searchFields;
368
- #searchFieldsEffect;
369
- constructor() {
370
- this.#injector = inject(Injector);
371
- this.primeConfig = inject(PrimeNG);
372
- this.moduleConfig = inject(COMMONS_MODULE_CONFIG_IT, { optional: true });
373
- this.tableModuleConfig = inject(COMMONS_TABLE_FEATURE_CONFIG_IT, { optional: true });
374
- this.serializationCfg = {};
375
- this.#translationObserver = toSignal(this.primeConfig.translationObserver);
376
- this.defaultFilterDisplayType = this.tableModuleConfig?.filterDisplayType ?? FilterDisplayTypeEnum.Column;
377
- // signal sources
378
- this.#signalSources = signal({}, ...(ngDevMode ? [{ debugName: "#signalSources" }] : []));
379
- // descriptors
380
- this.descriptorFromSource = computed(() => this.#signalSources().descriptor?.(), ...(ngDevMode ? [{ debugName: "descriptorFromSource" }] : []));
381
- this.#descriptor = signal(tableDescriptor(), ...(ngDevMode ? [{ debugName: "#descriptor" }] : []));
382
- this.descriptor = this.#descriptor.asReadonly();
383
- this.#updateDescriptorFromSourceEffect = effectWithDeps([this.descriptorFromSource], ([d]) => {
384
- if (d != null) {
385
- this.#descriptor.set(d);
386
- }
387
- });
388
- // pagination
389
- this.rowsPerPageOptions = computed(() => {
390
- const descriptor = this.descriptor();
391
- if (Array.isArray(descriptor.rowsPerPageOptions) && descriptor.rowsPerPageOptions.length > 0) {
392
- return descriptor.rowsPerPageOptions;
393
- }
394
- else {
395
- return [25, 50, 100];
396
- }
397
- }, ...(ngDevMode ? [{ debugName: "rowsPerPageOptions" }] : []));
398
- // filters
399
- this.filterDescriptors = computed(() => this.descriptor().filters, ...(ngDevMode ? [{ debugName: "filterDescriptors" }] : []));
400
- this.filters = computed(() => {
401
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
402
- const observer = this.#translationObserver(); // need this one to track language changes
403
- return this.filterDescriptors().map(d => this.mapFilterDescriptorToMetadata(d));
404
- }, ...(ngDevMode ? [{ debugName: "filters" }] : []));
405
- this.genericFilterDescriptor = computed(() => this.descriptor().genericFilter, ...(ngDevMode ? [{ debugName: "genericFilterDescriptor" }] : []));
406
- this.#genericFilters = signal([], ...(ngDevMode ? [{ debugName: "#genericFilters" }] : []));
407
- this.genericFilters = this.#genericFilters.asReadonly();
408
- // search
409
- this.#searchFieldsFromSignalSource = computed(() => this.#signalSources().searchFields?.(), ...(ngDevMode ? [{ debugName: "#searchFieldsFromSignalSource" }] : []));
410
- this.#searchFields = signal([], ...(ngDevMode ? [{ debugName: "#searchFields" }] : []));
411
- this.searchFields = this.#searchFields.asReadonly();
412
- this.#searchFieldsEffect = effectWithDeps([this.descriptor, this.#searchFieldsFromSignalSource], ([descriptor, searchFieldsFromSignalSource]) => {
413
- this.#searchFields.set(searchFieldsFromSignalSource ?? (descriptor.search && descriptor.searchFields ? descriptor.searchFields : this.descriptor().columns.map(c => c.property)));
414
- });
415
- // params
416
- this.defaultParams = computed(() => {
417
- const params = {
418
- offset: 0,
419
- limit: this.rowsPerPageOptions()[0],
420
- sort: this.descriptor()
421
- .sorts.filter(s => s.defaultIsEnabled)
422
- .sort((s1, s2) => (s1.defaultOrder ?? 1000) - (s2.defaultOrder ?? 1000))
423
- .map(s => ({
424
- property: s.property,
425
- ascending: s.defaultIsAscending
426
- })),
427
- filters: {}
428
- };
429
- this.filters()
430
- .filter(f => f.descriptor.hasDefaultValue)
431
- .forEach(f => {
432
- params.filters[f.descriptor.property] = {
433
- value: f.descriptor.defaultValue,
434
- matchMode: f.defaultMatchMode
435
- };
436
- });
437
- return params;
438
- }, ...(ngDevMode ? [{ debugName: "defaultParams" }] : []));
439
- filterApplySerializationConfigToCmp(this.moduleConfig, this.serializationCfg);
440
- combineLatest([toObservable(this.genericFilterDescriptor), toObservable(this.#translationObserver)])
441
- .pipe(switchMap(([genericFilterDescriptor]) => {
442
- if (genericFilterDescriptor) {
443
- const dataProvider = this.genericFilterDescriptor()?.propertyLookup;
444
- const genericFilterService = dataProvider?.serviceType ? this.#injector.get(dataProvider.serviceType) : null;
445
- // fetch filterable properties
446
- return toObservable$1(genericFilterDescriptor.propertyLookup.lookup({}, genericFilterService));
447
- }
448
- return of([]);
449
- }), takeUntilDestroyed())
450
- .subscribe({
451
- next: genericFilters => {
452
- // set descriptors from generic filter data
453
- this.#genericFilters.set(createFilterDescriptorsFromGeneric(genericFilters, this.genericFilterDescriptor()?.valueLookup).map(d => this.mapFilterDescriptorToMetadata(d)));
454
- }
455
- });
456
- }
457
- setSignalSources(descriptor, searchFields) {
458
- this.#signalSources.set({ descriptor, searchFields });
459
- }
460
- setDescriptor(descriptor) {
461
- if (this.descriptorFromSource() instanceof TableDynamicDescriptorInst) {
462
- this.#descriptor.set(descriptor);
463
- }
464
- }
465
- mapFilterDescriptorToMetadata(descriptor) {
466
- const matchModes = filterGenerateMatchModeOptions(this.primeConfig, descriptor, this.serializationCfg);
467
- return {
468
- descriptor: descriptor,
469
- matchModes: matchModes,
470
- defaultMatchMode: filterGetDefaultMatchMode(descriptor, matchModes),
471
- dateConfig: filterGetDateConfig(descriptor, this.serializationCfg),
472
- numberConfig: filterGetNumberConfig(descriptor)
473
- };
474
- }
475
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: TableMetadataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
476
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: TableMetadataService }); }
477
- }
478
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: TableMetadataService, decorators: [{
479
- type: Injectable
480
- }], ctorParameters: () => [] });
481
-
482
- function tableCreateFilterMeta(paramsWithDefaults) {
483
- const primeFilterMeta = {};
484
- // if any filter is present, no default filters should be applied!
485
- if (paramsWithDefaults?.filters) {
486
- Object.entries(paramsWithDefaults.filters).forEach(([key, value]) => {
487
- primeFilterMeta[key] = {
488
- value: value?.value,
489
- matchMode: value?.matchMode,
490
- caseSensitive: value?.caseSensitive
491
- };
492
- });
493
- }
494
- return primeFilterMeta;
495
- }
496
- function tableCreateSortMeta(paramsWithDefaults) {
497
- if (paramsWithDefaults?.sort !== undefined && Array.isArray(paramsWithDefaults?.sort) && paramsWithDefaults?.sort.length > 0) {
498
- return paramsWithDefaults?.sort.map(s => ({
499
- field: s.property,
500
- order: s.ascending ? 1 : -1
501
- }));
502
- }
503
- return undefined;
504
- }
505
-
506
- class TableDataService {
507
- constructor() {
508
- this.#injector = inject(Injector);
509
- this.#commons = inject(CommonsService);
510
- this.#metadata = inject(TableMetadataService);
511
- // signal sources
512
- this.#dataSources = signal({}, ...(ngDevMode ? [{ debugName: "#dataSources" }] : []));
513
- // data sources
514
- this.#manualLoading = computed(() => this.#dataSources()?.manualLoading?.(), ...(ngDevMode ? [{ debugName: "#manualLoading" }] : []));
515
- // results that are set directly via input and are not result of a asynchronous operation (aka data provider)
516
- this.#synchronousResult = computed(() => {
517
- const dataSources = this.#dataSources();
518
- if (dataSources?.dataProvider?.() !== undefined) {
519
- return undefined;
520
- }
521
- if (dataSources?.dataListResult?.() !== undefined) {
522
- return dataSources?.dataListResult();
523
- }
524
- if (dataSources?.arrayItems?.() !== undefined) {
525
- return { data: dataSources.arrayItems(), totalCount: dataSources.arrayItems()?.length ?? 0 };
526
- }
527
- return undefined;
528
- }, ...(ngDevMode ? [{ debugName: "#synchronousResult" }] : []));
529
- this.#dataProvider = computed(() => this.#dataSources()?.dataProvider?.(), ...(ngDevMode ? [{ debugName: "#dataProvider" }] : []));
530
- this.#dataProviderService = computed(() => {
531
- const dataProvider = this.#dataProvider();
532
- return dataProvider?.serviceType ? this.#injector.get(dataProvider.serviceType) : null;
533
- }, ...(ngDevMode ? [{ debugName: "#dataProviderService" }] : []));
534
- this.#synchronousResultEffect = effectWithDeps([this.#synchronousResult], ([res]) => {
535
- if (res != null) {
536
- this.#setData(res.data ?? [], res.totalCount);
537
- }
538
- });
539
- this.#synchronousLoadingEffect = effectWithDeps([this.#synchronousResult, this.#manualLoading], ([res, manualLoading]) => {
540
- if (res != null && manualLoading == null) {
541
- this.#loading.set(false);
542
- }
543
- });
544
- this.#manualLoadingEffect = effectWithDeps([this.#manualLoading], ([manualLoading]) => {
545
- if (manualLoading != null) {
546
- this.#loading.set(manualLoading);
547
- }
548
- });
549
- // pagination
550
- this.#params = signal(undefined, ...(ngDevMode ? [{ debugName: "#params" }] : []));
551
- this.params = this.#params.asReadonly();
552
- this.#sortMeta = signal(undefined, ...(ngDevMode ? [{ debugName: "#sortMeta" }] : []));
553
- this.sortMeta = this.#sortMeta.asReadonly();
554
- this.#filterStates = signal({}, ...(ngDevMode ? [{ debugName: "#filterStates" }] : []));
555
- this.filterStates = this.#filterStates.asReadonly();
556
- this.#isSortAndFilterMetaInitialized = signal(false, ...(ngDevMode ? [{ debugName: "#isSortAndFilterMetaInitialized" }] : []));
557
- this.#defaultParamsEffect = effectWithDeps([this.#metadata.defaultParams], ([defaultParams]) => {
558
- this.#sortMeta.set(tableCreateSortMeta(defaultParams));
559
- this.#filterStates.set(tableCreateFilterMeta(defaultParams));
560
- this.#isSortAndFilterMetaInitialized.set(true);
561
- }, { firstOnly: true });
562
- this.#isSearchMetaInitialized = signal(false, ...(ngDevMode ? [{ debugName: "#isSearchMetaInitialized" }] : []));
563
- this.#searchMeta = signal(undefined, ...(ngDevMode ? [{ debugName: "#searchMeta" }] : []));
564
- this.searchMeta = this.#searchMeta.asReadonly();
565
- this.isAllPaginationMetaInitialized = computed(() => this.#isSortAndFilterMetaInitialized() && this.#isSortAndFilterMetaInitialized(), ...(ngDevMode ? [{ debugName: "isAllPaginationMetaInitialized" }] : []));
566
- this.paginationMode = computed(() => {
567
- const descriptor = this.#metadata.descriptor();
568
- if (descriptor.paginationMode != null) {
569
- // descriptor choice is the strongest - if defined, use this value
570
- return descriptor.paginationMode;
571
- }
572
- else if (this.#dataProvider() != null) {
573
- // when data provider is used, use pagination
574
- return TablePaginationModeEnum.Pagination;
575
- }
576
- else {
577
- return TablePaginationModeEnum.None;
578
- }
579
- }, ...(ngDevMode ? [{ debugName: "paginationMode" }] : []));
580
- this.offset = computed(() => this.params()?.offset ?? 0, ...(ngDevMode ? [{ debugName: "offset" }] : []));
581
- this.rows = computed(() => {
582
- if (this.params()?.limit) {
583
- return this.params()?.limit;
584
- }
585
- const descriptor = this.#metadata.descriptor();
586
- const rowsPerPageOptions = this.#metadata.rowsPerPageOptions();
587
- if (descriptor.defaultNumRows && rowsPerPageOptions.includes(descriptor.defaultNumRows)) {
588
- return descriptor.defaultNumRows;
589
- }
590
- return rowsPerPageOptions[0];
591
- }, ...(ngDevMode ? [{ debugName: "rows" }] : []));
592
- // data
593
- this.#data = signal([], ...(ngDevMode ? [{ debugName: "#data" }] : []));
594
- this.data = this.#data.asReadonly();
595
- this.#count = signal(0, ...(ngDevMode ? [{ debugName: "#count" }] : []));
596
- this.count = this.#count.asReadonly();
597
- this.#loading = signal(false, ...(ngDevMode ? [{ debugName: "#loading" }] : []));
598
- this.loading = this.#loading.asReadonly();
599
- this.selectedItems = signal([], ...(ngDevMode ? [{ debugName: "selectedItems" }] : []));
600
- }
601
- #injector;
602
- #commons;
603
- #metadata;
604
- #primeTable;
605
- // signal sources
606
- #dataSources;
607
- // data sources
608
- #manualLoading;
609
- // results that are set directly via input and are not result of a asynchronous operation (aka data provider)
610
- #synchronousResult;
611
- #dataProvider;
612
- #dataProviderService;
613
- #synchronousResultEffect;
614
- #synchronousLoadingEffect;
615
- #manualLoadingEffect;
616
- #dataProviderSubscription;
617
- // pagination
618
- #params;
619
- #sortMeta;
620
- #filterStates;
621
- #isSortAndFilterMetaInitialized;
622
- #defaultParamsEffect;
623
- #isSearchMetaInitialized;
624
- #searchMeta;
625
- // data
626
- #data;
627
- #count;
628
- #loading;
629
- setDataSources(arrayItems, dataListResult, dataProvider, manualLoading) {
630
- this.#dataSources.set({ arrayItems, dataListResult, dataProvider, manualLoading });
631
- }
632
- setPrimeTable(cmp) {
633
- this.#primeTable = cmp;
634
- }
635
- fetchWithDataProvider(params, onErrorFn) {
636
- const dataProvider = this.#dataProvider();
637
- if (!dataProvider || params.limit === 0) {
638
- return false;
639
- }
640
- this.#dataProviderSubscription?.unsubscribe();
641
- this.#loading.set(true);
642
- this.#dataProviderSubscription = toObservable$1(dataProvider.getAll(params, this.#dataProviderService(), this.#metadata.descriptor().isLocalized ? (this.#commons.appDataLocale() ?? undefined) : undefined)).subscribe({
643
- next: res => {
644
- const descriptorInput = this.#metadata.descriptorFromSource();
645
- if (descriptorInput instanceof TableDynamicDescriptorInst) {
646
- this.#metadata.setDescriptor(descriptorInput.toTableDescriptorFromData(res));
647
- }
648
- this.#setData(res?.data ?? [], res?.totalCount);
649
- this.#loading.set(false);
650
- },
651
- error: err => {
652
- onErrorFn(err);
653
- this.#setData([]);
654
- this.#loading.set(false);
655
- }
656
- });
657
- return true;
658
- }
659
- setParams(params, fromQueryParams = false) {
660
- if (!fromQueryParams && this.compareWithCurrentParams(params)) {
661
- return;
662
- }
663
- this.#params.set(params);
664
- this.#sortMeta.set(tableCreateSortMeta(params));
665
- this.#filterStates.set(tableCreateFilterMeta(params));
666
- this.#isSortAndFilterMetaInitialized.set(true);
667
- if (fromQueryParams && !this.#isSearchMetaInitialized() && params?.search) {
668
- this.#searchMeta.set({ value: params.search, caseSensitive: params.filters?.['global']?.caseSensitive ?? false });
669
- }
670
- this.#isSearchMetaInitialized.set(true);
671
- }
672
- /**
673
- * Updates primeNG component with new filters and triggers data reload (if lazy load) or inline filtering.
674
- * @param key Filter's key
675
- * @param filter Filter's metadata
676
- */
677
- updatePrimeFilter(key, filter) {
678
- if (this.#primeTable) {
679
- this.#primeTable.filters[key] = { ...filter };
680
- this.#primeTable._filter();
681
- }
682
- }
683
- /**
684
- * Compare the given params with the stored params in the DataListService.
685
- *
686
- * @param {DataListParams} params - The params to compare with the stored params.
687
- *
688
- * @return {boolean} - True if the given params match the stored params, otherwise false.
689
- */
690
- compareWithCurrentParams(params) {
691
- return (params.offset === this.offset() &&
692
- params.limit === this.rows() &&
693
- JSON.stringify(tableCreateSortMeta(params)) === JSON.stringify(this.#sortMeta()) &&
694
- JSON.stringify(tableCreateFilterMeta(params)) === JSON.stringify(this.#filterStates()));
695
- }
696
- #setData(data, count) {
697
- this.#data.set([...data]);
698
- this.#count.set(count ?? data.length);
699
- }
700
- ngOnDestroy() {
701
- this.#dataProviderSubscription?.unsubscribe();
702
- }
703
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: TableDataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
704
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: TableDataService }); }
705
- }
706
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: TableDataService, decorators: [{
707
- type: Injectable
708
- }] });
709
-
710
- class FilterService {
711
- #tableData;
712
- #config;
713
- #state;
714
- constructor() {
715
- this.#tableData = inject((TableDataService));
716
- this.#config = signal(undefined, ...(ngDevMode ? [{ debugName: "#config" }] : []));
717
- this.#state = signal(undefined, ...(ngDevMode ? [{ debugName: "#state" }] : []));
718
- this.state = this.#state.asReadonly();
719
- this.isActive = computed(() => this.state()?.matchMode === FilterMatchMode.Exists || this.state()?.matchMode === FilterMatchMode.DoesNotExist || !isFilterValueBlank(this.state()?.value), ...(ngDevMode ? [{ debugName: "isActive" }] : []));
720
- effectWithDeps([this.#config, this.state], ([config, state]) => {
721
- if (config == null) {
722
- return;
723
- }
724
- const currTableFilterState = this.#tableData.filterStates()?.[config.descriptor.property];
725
- if (currTableFilterState && (!state || state.value !== currTableFilterState.value || state.matchMode !== currTableFilterState.matchMode)) {
726
- this.setState(filterSetStateOnChange(currTableFilterState, currTableFilterState.matchMode, currTableFilterState.value, untracked(() => config.descriptor.filterType), untracked(() => config.dateConfig)));
727
- }
728
- });
729
- }
730
- setConfig(config) {
731
- this.#config.set(config);
732
- }
733
- setMatchMode(displayMatchMode) {
734
- const config = this.#config();
735
- if (this.state()?.displayMatchMode === displayMatchMode || config == null) {
736
- return;
737
- }
738
- this.setState(filterSetStateOnDisplayChange(this.state(), displayMatchMode, filterAdjustDisplayValueOnMatchModeChange(displayMatchMode, this.state()?.displayValue), config.descriptor.filterType, config.dateConfig));
739
- }
740
- toggleCaseSensitivity() {
741
- if (this.#config()?.descriptor.filterType === FilterTypeEnum.String) {
742
- this.setState({
743
- ...this.state(),
744
- caseSensitive: !(this.state()?.caseSensitive ?? false)
745
- });
746
- }
747
- }
748
- clear() {
749
- const currConfig = this.#config();
750
- if (currConfig == null) {
751
- return;
752
- }
753
- const config = { value: null, matchMode: currConfig.defaultMatchMode };
754
- // set internal filter constraint
755
- this.setState(filterSetStateOnChange(config, config?.matchMode, config?.value, currConfig.descriptor.filterType, currConfig.dateConfig));
756
- this.#tableData.updatePrimeFilter(currConfig.descriptor.property, config);
757
- }
758
- setDisplayValue(displayValue) {
759
- const config = this.#config();
760
- if (config == null) {
761
- return;
762
- }
763
- this.setState(filterSetStateOnDisplayChange(this.state(), this.state()?.displayMatchMode ?? config.defaultMatchMode, displayValue, config.descriptor.filterType, config.dateConfig));
764
- }
765
- setState(state) {
766
- const currentMetadata = this.#config();
767
- if (currentMetadata == null) {
768
- return;
769
- }
770
- if (state && !state.displayMatchMode)
771
- state.displayMatchMode = state.matchMode;
772
- if (state && !state.displayValue)
773
- state.displayValue = state.value;
774
- this.#state.set(state);
775
- this.#tableData.updatePrimeFilter(currentMetadata.descriptor.property, state);
776
- }
777
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: FilterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
778
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: FilterService }); }
779
- }
780
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: FilterService, decorators: [{
781
- type: Injectable
782
- }], ctorParameters: () => [] });
783
-
784
- /**
785
- * Cannot be on push change detection strategy because of filter updates triggered from route which causes to force update values in force metadata
786
- * and these must be propagated through to this component and beyond to primeNG.
787
- */
788
- class TableFilterComponent {
789
- #el;
790
- #renderer;
791
- #overlayService;
792
- #cd;
793
- #tableMetadata;
794
- #document;
795
- #window;
796
- #overlaySubscription;
797
- #overlay;
798
- #scrollHandler;
799
- #documentClickListener;
800
- #documentResizeListener;
801
- #resetSubscription;
802
- #selfClick;
803
- #overlayEventListener;
804
- #numericValueFromModelChange;
805
- #dateDebounceSubject;
806
- constructor() {
807
- this.lookupTypeDropdown = FilterLookupTypeEnum.Dropdown;
808
- this.lookupTypeAutocomplete = FilterLookupTypeEnum.Autocomplete;
809
- this.FilterTypeEnum = FilterTypeEnum;
810
- this.FilterMatchMode = FilterMatchMode;
811
- this.#el = inject(ElementRef);
812
- this.#renderer = inject(Renderer2);
813
- this.#overlayService = inject(OverlayService);
814
- this.#cd = inject(ChangeDetectorRef);
815
- this.#tableMetadata = inject(TableMetadataService);
816
- this.filter = inject(FilterService);
817
- this.#document = window.document;
818
- this.#window = this.#document.defaultView;
819
- this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
820
- this.model = input.required(...(ngDevMode ? [{ debugName: "model" }] : []));
821
- this.showFilterIcon = input(false, ...(ngDevMode ? [{ debugName: "showFilterIcon", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
822
- this.showTitleAsPlaceholder = input(false, ...(ngDevMode ? [{ debugName: "showTitleAsPlaceholder", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
823
- this.descriptorAsLookup = computed(() => this.config().descriptor instanceof FilterLookupDescriptor ? this.config().descriptor : undefined, ...(ngDevMode ? [{ debugName: "descriptorAsLookup" }] : []));
824
- this.icon = viewChild('icon', ...(ngDevMode ? [{ debugName: "icon" }] : []));
825
- this.matchModes = computed(() => this.config().matchModes, ...(ngDevMode ? [{ debugName: "matchModes" }] : []));
826
- this.isInputDisabled = computed(() => this.filter.state()?.matchMode === FilterMatchMode.Exists || this.filter.state()?.matchMode === FilterMatchMode.DoesNotExist, ...(ngDevMode ? [{ debugName: "isInputDisabled" }] : []));
827
- this.overlayVisible = signal(false, ...(ngDevMode ? [{ debugName: "overlayVisible" }] : []));
828
- // display configs
829
- this.isMultiselect = computed(() => {
830
- const ft = this.filter.state();
831
- const matchMode = ft?.displayMatchMode ?? this.config().defaultMatchMode;
832
- return (matchMode === FilterMatchMode.In || matchMode === FilterMatchMode.NotIn) && (ft?.displayValue == null || Array.isArray(ft.displayValue));
833
- }, ...(ngDevMode ? [{ debugName: "isMultiselect" }] : []));
834
- this.placeholderKey = computed(() => {
835
- const descriptor = this.config().descriptor;
836
- let defaultPlaceholderKey = 'mngTable.typeToFilter';
837
- const descriptorAsLookup = this.descriptorAsLookup();
838
- if (descriptorAsLookup) {
839
- if (descriptorAsLookup.lookupType === FilterLookupTypeEnum.Autocomplete) {
840
- defaultPlaceholderKey = 'mngTable.searchToFilter';
841
- }
842
- else if (descriptorAsLookup.lookupType === FilterLookupTypeEnum.Dropdown) {
843
- defaultPlaceholderKey = 'mngTable.selectToFilter';
844
- }
845
- }
846
- else if (descriptor.filterType === FilterTypeEnum.Boolean) {
847
- defaultPlaceholderKey = 'mngTable.selectToFilter';
848
- }
849
- return this.showTitleAsPlaceholder() ? this.#getPropertyLabelKey(this.config().descriptor) : defaultPlaceholderKey;
850
- }, ...(ngDevMode ? [{ debugName: "placeholderKey" }] : []));
851
- this.booleanOptions = [
852
- { label: 'general.yes', value: true },
853
- { label: 'general.no', value: false }
854
- ];
855
- this.#numericValueFromModelChange = null;
856
- this.#dateDebounceSubject = new Subject();
857
- this.noFilterLabel = signal(this.#tableMetadata.primeConfig.getTranslation(TranslationKeys.NO_FILTER), ...(ngDevMode ? [{ debugName: "noFilterLabel" }] : []));
858
- effectWithDeps([this.config], ([config]) => {
859
- this.filter.setConfig(config);
860
- });
861
- this.#dateDebounceSubject.pipe(debounceTime(500), distinctUntilChanged(), takeUntilDestroyed()).subscribe(v => this.filter.setDisplayValue(v));
862
- }
863
- ngOnDestroy() {
864
- if (this.#overlay) {
865
- this.#renderer.appendChild(this.#el.nativeElement, this.#overlay);
866
- ZIndexUtils.clear(this.#overlay);
867
- this.#onOverlayHide();
868
- }
869
- this.#resetSubscription?.unsubscribe();
870
- this.#overlaySubscription?.unsubscribe();
871
- }
872
- onTextModelChange(event) {
873
- const value = event.target.value;
874
- if (value === '') {
875
- this.filter.setDisplayValue(value);
876
- }
877
- }
878
- onTextInputEnterKeyDown(event) {
879
- const value = event.target.value;
880
- this.filter.setDisplayValue(value);
881
- event.preventDefault();
882
- }
883
- onNumericModelChange(value) {
884
- this.#numericValueFromModelChange = value;
885
- if (value === null) {
886
- this.filter.setDisplayValue(value);
887
- }
888
- }
889
- onNumericInputKeyDown(event) {
890
- if (event.key === 'Enter') {
891
- if (this.filter.state()?.displayMatchMode === FilterMatchMode.Between && Array.isArray(this.#numericValueFromModelChange)) {
892
- const numberValues = this.#numericValueFromModelChange.filter(v => typeof v === 'number');
893
- if (numberValues.length !== 2) {
894
- return;
895
- }
896
- }
897
- this.filter.setDisplayValue(this.#numericValueFromModelChange);
898
- event.preventDefault();
899
- }
900
- }
901
- onDateFilterModelChange(value) {
902
- if (this.filter.state()?.displayMatchMode === FilterMatchMode.Between && Array.isArray(value)) {
903
- const dateValues = value.filter(v => v instanceof Date);
904
- if (dateValues.length !== 2) {
905
- return;
906
- }
907
- }
908
- this.#dateDebounceSubject.next(value);
909
- }
910
- booleanFilter(value) {
911
- this.filter.setDisplayValue(value);
912
- }
913
- autocompleteFilter(value) {
914
- this.filter.setDisplayValue(value);
915
- }
916
- dropdownFilter(value) {
917
- this.filter.setDisplayValue(value);
918
- }
919
- onMatchModeChange(displayMatchMode) {
920
- this.filter.setMatchMode(displayMatchMode);
921
- this.#hideOverlay();
922
- }
923
- onMatchModeKeyDown(event) {
924
- const item = event.target;
925
- switch (event.key) {
926
- case 'ArrowDown':
927
- // eslint-disable-next-line no-case-declarations
928
- const nextItem = this.#findNextMenuModeItem(item);
929
- if (nextItem) {
930
- item.removeAttribute('tabindex');
931
- nextItem.tabIndex = '0';
932
- nextItem.focus();
933
- }
934
- event.preventDefault();
935
- break;
936
- case 'ArrowUp':
937
- // eslint-disable-next-line no-case-declarations
938
- const prevItem = this.#findPrevMenuModeItem(item);
939
- if (prevItem) {
940
- item.removeAttribute('tabindex');
941
- prevItem.tabIndex = '0';
942
- prevItem.focus();
943
- }
944
- event.preventDefault();
945
- break;
946
- }
947
- }
948
- onCaseSensitivityToggle() {
949
- this.filter.toggleCaseSensitivity();
950
- }
951
- clear() {
952
- this.filter.clear();
953
- this.#hideOverlay();
954
- }
955
- toggleMenu(event) {
956
- this.overlayVisible.set(!this.overlayVisible());
957
- event.stopPropagation();
958
- }
959
- onToggleButtonKeyDown(event) {
960
- switch (event.key) {
961
- case 'Escape':
962
- case 'Tab':
963
- this.overlayVisible.set(false);
964
- break;
965
- case 'ArrowDown':
966
- if (this.overlayVisible()) {
967
- const focusable = DomHandler.getFocusableElements(this.#overlay);
968
- if (focusable) {
969
- focusable[0].focus();
970
- }
971
- event.preventDefault();
972
- }
973
- else if (event.altKey) {
974
- this.overlayVisible.set(true);
975
- event.preventDefault();
976
- }
977
- break;
978
- }
979
- }
980
- onEscape() {
981
- this.overlayVisible.set(false);
982
- }
983
- onContentClick() {
984
- this.#selfClick = true;
985
- }
986
- // onOverlayAnimationStart(event: AnimationEvent) {
987
- onOverlayAnimationStart(event) {
988
- switch (event.toState) {
989
- case 'visible':
990
- this.#overlay = event.element;
991
- this.#renderer.appendChild(this.#document.body, this.#overlay);
992
- ZIndexUtils.set('overlay', this.#overlay, this.#tableMetadata.primeConfig.zIndex.overlay);
993
- DomHandler.absolutePosition(this.#overlay, this.icon()?.nativeElement);
994
- this.#bindDocumentClickListener();
995
- this.#bindDocumentResizeListener();
996
- this.#bindScrollListener();
997
- this.#overlayEventListener = (e) => {
998
- if (this.#overlay && this.#overlay.contains(e.target)) {
999
- this.#selfClick = true;
1000
- }
1001
- };
1002
- this.#overlaySubscription = this.#overlayService.clickObservable.subscribe(this.#overlayEventListener);
1003
- break;
1004
- case 'void':
1005
- this.#onOverlayHide();
1006
- this.#overlaySubscription?.unsubscribe();
1007
- break;
1008
- }
1009
- }
1010
- // onOverlayAnimationEnd(event: AnimationEvent) {
1011
- onOverlayAnimationEnd(event) {
1012
- switch (event.toState) {
1013
- case 'void':
1014
- ZIndexUtils.clear(event.element);
1015
- break;
1016
- }
1017
- }
1018
- #findNextMenuModeItem(item) {
1019
- const nextItem = item.nextElementSibling;
1020
- if (nextItem)
1021
- return DomHandler.hasClass(nextItem, 'p-column-filter-separator') ? this.#findNextMenuModeItem(nextItem) : nextItem;
1022
- else
1023
- return item.parentElement?.firstElementChild;
1024
- }
1025
- #findPrevMenuModeItem(item) {
1026
- const prevItem = item.previousElementSibling;
1027
- if (prevItem)
1028
- return DomHandler.hasClass(prevItem, 'p-column-filter-separator') ? this.#findPrevMenuModeItem(prevItem) : prevItem;
1029
- else
1030
- return item.parentElement?.lastElementChild;
1031
- }
1032
- #isOutsideClicked(event) {
1033
- return !(this.#overlay?.isSameNode(event.target) ||
1034
- this.#overlay?.contains(event.target) ||
1035
- this.icon()?.nativeElement.isSameNode(event.target) ||
1036
- this.icon()?.nativeElement.contains(event.target) ||
1037
- DomHandler.hasClass(event.target, 'p-column-filter-add-button') ||
1038
- DomHandler.hasClass(event.target.parentElement, 'p-column-filter-add-button') ||
1039
- DomHandler.hasClass(event.target, 'p-column-filter-remove-button') ||
1040
- DomHandler.hasClass(event.target.parentElement, 'p-column-filter-remove-button'));
1041
- }
1042
- #bindDocumentClickListener() {
1043
- if (!this.#documentClickListener) {
1044
- const documentTarget = this.#el ? this.#el.nativeElement.ownerDocument : 'document';
1045
- this.#documentClickListener = this.#renderer.listen(documentTarget, 'click', event => {
1046
- if (this.overlayVisible() && !this.#selfClick && this.#isOutsideClicked(event)) {
1047
- this.#hideOverlay();
1048
- }
1049
- this.#selfClick = false;
1050
- });
1051
- }
1052
- }
1053
- #unbindDocumentClickListener() {
1054
- if (this.#documentClickListener) {
1055
- this.#documentClickListener();
1056
- this.#documentClickListener = null;
1057
- this.#selfClick = false;
1058
- }
1059
- }
1060
- #bindDocumentResizeListener() {
1061
- if (!this.#documentResizeListener) {
1062
- this.#documentResizeListener = this.#renderer.listen(this.#window, 'resize', () => {
1063
- if (this.overlayVisible() && !DomHandler.isTouchDevice()) {
1064
- this.#hideOverlay();
1065
- }
1066
- });
1067
- }
1068
- }
1069
- #unbindDocumentResizeListener() {
1070
- if (this.#documentResizeListener) {
1071
- this.#documentResizeListener();
1072
- this.#documentResizeListener = null;
1073
- }
1074
- }
1075
- #bindScrollListener() {
1076
- if (!this.#scrollHandler) {
1077
- this.#scrollHandler = new ConnectedOverlayScrollHandler(this.icon()?.nativeElement, () => {
1078
- if (this.overlayVisible()) {
1079
- this.#hideOverlay();
1080
- }
1081
- });
1082
- }
1083
- this.#scrollHandler.bindScrollListener();
1084
- }
1085
- #unbindScrollListener() {
1086
- if (this.#scrollHandler) {
1087
- this.#scrollHandler.unbindScrollListener();
1088
- }
1089
- }
1090
- #hideOverlay() {
1091
- this.overlayVisible.set(false);
1092
- this.#cd.markForCheck();
1093
- }
1094
- #onOverlayHide() {
1095
- this.#unbindDocumentClickListener();
1096
- this.#unbindDocumentResizeListener();
1097
- this.#unbindScrollListener();
1098
- this.#overlay = null;
1099
- }
1100
- #getPropertyLabelKey(filterDescriptor) {
1101
- let labelKey;
1102
- if (filterDescriptor.title !== undefined && !filterDescriptor.titleUseModelBase) {
1103
- labelKey = filterDescriptor.title;
1104
- }
1105
- else {
1106
- labelKey = getI18nTypePropertyKey(this.model().i18nBaseKey, filterDescriptor.title ?? filterDescriptor.property);
1107
- }
1108
- return labelKey;
1109
- }
1110
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: TableFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1111
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: TableFilterComponent, isStandalone: true, selector: "mng-table-filter", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, showFilterIcon: { classPropertyName: "showFilterIcon", publicName: "showFilterIcon", isSignal: true, isRequired: false, transformFunction: null }, showTitleAsPlaceholder: { classPropertyName: "showTitleAsPlaceholder", publicName: "showTitleAsPlaceholder", isSignal: true, isRequired: false, transformFunction: null } }, providers: [FilterService], viewQueries: [{ propertyName: "icon", first: true, predicate: ["icon"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"flex items-center\">\n @let requiredFilterMissing = config().descriptor.isRequired && !filter.isActive();\n @let placeholder = (placeholderKey() | translate) + (config().descriptor.isRequired ? ' *' : '');\n <div\n class=\"flex items-center [&_p-inputgroup-addon]:p-0!\"\n [ngClass]=\"filter.isActive() ? '[&_*]:border-primary-600! [&_*]:bg-primary-50!' : ''\"\n [class.[&_*]:border-red-500!]=\"requiredFilterMissing\"\n [class.mng-filter-required]=\"requiredFilterMissing\">\n @switch (config().descriptor.filterType) {\n @case (FilterTypeEnum.Number) {\n @if (filter.state()?.displayMatchMode === 'between') {\n <mng-number-range\n vertical=\"true\"\n className=\"mng-filter-number\"\n [ngModel]=\"filter.state()?.displayValue\"\n (ngModelChange)=\"onNumericModelChange($event)\"\n (keyDown)=\"onNumericInputKeyDown($event)\"\n [placeholder]=\"placeholder\"\n [useGrouping]=\"config().descriptor.numberUseGrouping\"\n [minFractionDigits]=\"config().numberConfig?.fractionsMin\"\n [maxFractionDigits]=\"config().numberConfig?.fractionsMax\"\n [disabled]=\"isInputDisabled()\"\n [templates]=\"showFilterIcon() ? [numberRangePrependIcon] : []\" />\n } @else {\n <p-inputgroup>\n @if (showFilterIcon()) {\n <p-inputgroup-addon>\n <ng-container *ngTemplateOutlet=\"iconTemplate\"></ng-container>\n </p-inputgroup-addon>\n }\n <p-inputNumber\n inputStyleClass=\"mng-filter-number\"\n [ngModel]=\"filter.state()?.displayValue\"\n (ngModelChange)=\"onNumericModelChange($event)\"\n (onKeyDown)=\"onNumericInputKeyDown($event)\"\n [placeholder]=\"placeholder\"\n [useGrouping]=\"config().descriptor.numberUseGrouping\"\n [minFractionDigits]=\"config().numberConfig?.fractionsMin\"\n [maxFractionDigits]=\"config().numberConfig?.fractionsMax\"\n [disabled]=\"isInputDisabled()\" />\n </p-inputgroup>\n }\n }\n\n @case (FilterTypeEnum.Boolean) {\n <mng-dropdown\n optionsLabelProperty=\"label\"\n optionsValueProperty=\"value\"\n [ngModel]=\"filter.state()?.displayValue\"\n [options]=\"booleanOptions\"\n [optionsLabelTranslate]=\"true\"\n [placeholder]=\"placeholder\"\n [disabled]=\"isInputDisabled()\"\n (valueChange)=\"booleanFilter($event)\"\n [templates]=\"showFilterIcon() ? [dropdownPrependIcon] : []\">\n </mng-dropdown>\n }\n @case (FilterTypeEnum.Date) {\n @if (filter.state()?.displayMatchMode === FilterMatchMode.Between) {\n <mng-date-range\n vertical=\"true\"\n [ngModel]=\"filter.state()?.displayValue\"\n (ngModelChange)=\"onDateFilterModelChange($event)\"\n [showTime]=\"config().dateConfig?.showTime ?? false\"\n [showSeconds]=\"config().dateConfig?.showSeconds ?? false\"\n [dateFormat]=\"config().dateConfig?.format\"\n [placeholder]=\"placeholder\"\n [disabled]=\"isInputDisabled()\"\n [templates]=\"showFilterIcon() ? [dateRangePrependIcon] : []\" />\n } @else {\n <p-inputgroup>\n @if (showFilterIcon()) {\n <p-inputgroup-addon>\n <ng-container *ngTemplateOutlet=\"iconTemplate\"></ng-container>\n </p-inputgroup-addon>\n }\n <p-date-picker\n appendTo=\"body\"\n [ngModel]=\"filter.state()?.displayValue\"\n (ngModelChange)=\"onDateFilterModelChange($event)\"\n [placeholder]=\"placeholder\"\n [showIcon]=\"true\"\n [inputStyle]=\"{borderTopRightRadius: '0', borderBottomRightRadius: '0'}\"\n [showTime]=\"config().dateConfig?.showTime ?? false\"\n [showSeconds]=\"config().dateConfig?.showSeconds ?? false\"\n [dateFormat]=\"config().dateConfig?.format\"\n [firstDayOfWeek]=\"1\">\n </p-date-picker>\n </p-inputgroup>\n }\n }\n @case (FilterTypeEnum.Lookup) {\n <ng-container *ngTemplateOutlet=\"lookupFilter\" />\n }\n @case (FilterTypeEnum.LookupEnum) {\n <ng-container *ngTemplateOutlet=\"lookupFilter\" />\n }\n @default {\n <p-inputgroup>\n @if (showFilterIcon()) {\n <p-inputgroup-addon>\n <ng-container *ngTemplateOutlet=\"iconTemplate\"></ng-container>\n </p-inputgroup-addon>\n }\n <input\n type=\"text\"\n pInputText\n class=\"mng-filter-string\"\n [value]=\"filter.state()?.displayValue ?? ''\"\n [disabled]=\"isInputDisabled()\"\n (input)=\"onTextModelChange($event)\"\n (keydown.enter)=\"onTextInputEnterKeyDown($event)\"\n [attr.placeholder]=\"placeholder\"\n [mngInputTrim]=\"config().descriptor.trimOption\" />\n </p-inputgroup>\n }\n }\n\n <ng-template #lookupFilter>\n @if (descriptorAsLookup(); as lookup) {\n @switch (lookup.lookupType) {\n @case (lookupTypeAutocomplete) {\n <mng-autocomplete\n *mngRerender=\"isMultiselect()\"\n [ngModel]=\"filter.state()?.displayValue\"\n [dataProvider]=\"lookup.dataProvider\"\n [optionsTrackProperty]=\"lookup.optionsValueProperty\"\n [optionsValueProperty]=\"lookup.optionsValueProperty\"\n [optionsLabelProperty]=\"lookup.optionsLabelProperty\"\n [optionsLabelTranslate]=\"lookup.optionsLabelTranslate\"\n [multiselect]=\"isMultiselect()\"\n [autoClear]=\"lookup.autocompleteAutoClear ?? false\"\n [openOnFocus]=\"lookup.autocompleteAutoClear ?? true\"\n [inlineSearch]=\"lookup.autocompleteInlineSearch ?? false\"\n [placeholder]=\"placeholder\"\n [className]=\"lookup.className\"\n [dropdownClassName]=\"lookup.dropdownClassName\"\n [disabled]=\"isInputDisabled()\"\n (valueChange)=\"autocompleteFilter($event)\"\n [searchTrim]=\"config().descriptor.trimOption\"\n [templates]=\"showFilterIcon() ? [autocompletePrependIcon] : []\">\n </mng-autocomplete>\n }\n @case (lookupTypeDropdown) {\n <mng-dropdown\n *mngRerender=\"isMultiselect()\"\n [ngModel]=\"filter.state()?.displayValue\"\n [dataProvider]=\"lookup.dataProvider\"\n [optionsValueProperty]=\"lookup.optionsValueProperty\"\n [optionsLabelProperty]=\"lookup.optionsLabelProperty\"\n [optionsLabelTranslate]=\"lookup.optionsLabelTranslate\"\n [multiselect]=\"isMultiselect()\"\n [placeholder]=\"placeholder\"\n [className]=\"lookup.className\"\n [dropdownClassName]=\"lookup.dropdownClassName\"\n [showClear]=\"false\"\n [changeValueOnBlur]=\"isMultiselect()\"\n [disabled]=\"isInputDisabled()\"\n (valueChange)=\"dropdownFilter($event)\"\n [templates]=\"showFilterIcon() ? [dropdownPrependIcon] : []\">\n </mng-dropdown>\n }\n }\n }\n </ng-template>\n\n <ng-template mngAutocompleteTemplate name=\"prepend\" #autocompletePrependIcon=\"mngAutocompleteTemplate\">\n <ng-container *ngTemplateOutlet=\"iconTemplate\"></ng-container>\n </ng-template>\n <ng-template mngDropdownTemplate name=\"prepend\" #dropdownPrependIcon=\"mngDropdownTemplate\">\n <ng-container *ngTemplateOutlet=\"iconTemplate\"></ng-container>\n </ng-template>\n <ng-template mngDateRangeTemplate name=\"prepend\" #dateRangePrependIcon=\"mngDateRangeTemplate\">\n <ng-container *ngTemplateOutlet=\"iconTemplate\"></ng-container>\n </ng-template>\n <ng-template mngNumberRangeTemplate name=\"prepend\" #numberRangePrependIcon=\"mngNumberRangeTemplate\">\n <ng-container *ngTemplateOutlet=\"iconTemplate\"></ng-container>\n </ng-template>\n\n <ng-template #iconTemplate>\n <button\n #icon\n class=\"cursor-pointer pi pi-filter w-full h-full rounded-tl-md rounded-bl-md hover:bg-slate-50!\"\n [ngClass]=\"{\n 'text-primary-700': filter.isActive(),\n 'text-slate-400': !filter.isActive()\n }\"\n (click)=\"toggleMenu($event)\"\n (keydown)=\"onToggleButtonKeyDown($event)\"></button>\n </ng-template>\n\n @if (overlayVisible()) {\n <div\n class=\"p-datatable-filter-overlay\"\n (click)=\"onContentClick()\"\n [@overlayAnimation]=\"'visible'\"\n (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\"\n (@overlayAnimation.done)=\"onOverlayAnimationEnd($event)\"\n (keydown.escape)=\"onEscape()\">\n <ul class=\"p-datatable-filter-constraint-list\">\n @for (matchMode of matchModes(); track matchMode; let i = $index) {\n <li\n class=\"p-datatable-filter-constraint\"\n [class.p-datatable-filter-constraint-selected]=\"matchMode.value === filter.state()?.displayMatchMode\"\n (click)=\"onMatchModeChange(matchMode.value)\"\n (keydown)=\"onMatchModeKeyDown($event)\"\n (keydown.enter)=\"this.onMatchModeChange(matchMode.value)\"\n [attr.tabindex]=\"i === 0 ? '0' : null\">\n {{ matchMode.label }}\n </li>\n }\n @if (config().descriptor.filterType === FilterTypeEnum.String) {\n <li class=\"p-datatable-filter-constraint-separator\" (keydown)=\"onMatchModeKeyDown($event)\"></li>\n <li\n class=\"p-datatable-filter-constraint\"\n (click)=\"onCaseSensitivityToggle()\"\n (keydown)=\"onMatchModeKeyDown($event)\"\n (keydown.enter)=\"onCaseSensitivityToggle()\">\n <div class=\"flex items-center\">\n <span class=\"mr-2\"> {{ 'mngFilter.caseSensitive' | translate }} </span>\n <p-toggle-switch [ngModel]=\"filter.state()?.caseSensitive || false\" class=\"ml-auto pointer-events-none\"></p-toggle-switch>\n </div>\n </li>\n }\n <li class=\"p-datatable-filter-constraint-separator\" (keydown)=\"onMatchModeKeyDown($event)\"></li>\n <li class=\"p-datatable-filter-constraint\" (click)=\"clear()\" (keydown)=\"onMatchModeKeyDown($event)\" (keydown.enter)=\"clear()\">\n {{ noFilterLabel() }}\n </li>\n </ul>\n </div>\n }\n </div>\n\n @if (!showFilterIcon()) {\n <button\n #icon\n class=\"mng-filter-options cursor-pointer ml-1\"\n [ngClass]=\"{\n 'text-primary': filter.isActive(),\n 'text-slate-400': !filter.isActive()\n }\"\n (click)=\"toggleMenu($event)\"\n (keydown)=\"onToggleButtonKeyDown($event)\">\n <i class=\"pi pi-ellipsis-v\"></i>\n </button>\n }\n</div>\n", styles: [".mng-filter-string{min-width:135px}.mng-filter-number{min-width:165px}.mng-filter-date{min-width:170px}.mng-filter-boolean{min-width:80px}.mng-filter-lookup,.mng-filter-lookupenum{min-width:180px}.mng-filter-required{position:relative}p-tag.mng-filter-required{border:1px solid var(--color-red-500)}.mng-filter-required:after{content:\"\";position:absolute;top:0;right:0;width:1rem;height:1rem;background-color:var(--color-red-500);z-index:1;clip-path:polygon(0 0,100% 0,100% 100%,0 0);border-top-right-radius:var(--p-inputgroup-addon-border-radius)}\n"], dependencies: [{ kind: "ngmodule", type: TableModule }, { kind: "component", type: DateRangeComponent, selector: "mng-date-range", inputs: ["placeholder", "showTime", "showSeconds", "dateFormat", "className", "required", "disabled", "vertical", "templates"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AutocompleteComponent, selector: "mng-autocomplete", inputs: ["dataProvider", "optionsTrackProperty", "optionsValueProperty", "optionsLabelProperty", "optionsLabelTranslate", "inlineSearch", "openOnFocus", "multiselect", "placeholder", "className", "dropdownClassName", "showClear", "autoClear", "selectFirst", "searchTrim", "disabled", "templates"], outputs: ["valueChange", "blur"] }, { kind: "component", type: DropdownComponent, selector: "mng-dropdown", inputs: ["dataProvider", "options", "optionsTrackProperty", "optionsLabelProperty", "optionsLabelTranslate", "optionsValueProperty", "optionsDisabledProperty", "multiselect", "placeholder", "showClear", "selectFirstItem", "className", "dropdownClassName", "changeValueOnBlur", "loading", "disabled", "allowInput", "appendTo", "templates", "inlineSearch", "searchTrim"], outputs: ["valueChange", "blur"] }, { kind: "component", type: InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "autocomplete", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: InputTrimDirective, selector: "[mngInputTrim]", inputs: ["mngInputTrim"] }, { kind: "component", type: NumberRangeComponent, selector: "mng-number-range", inputs: ["placeholder", "useGrouping", "minFractionDigits", "maxFractionDigits", "required", "disabled", "vertical", "templates", "className"], outputs: ["keyDown"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RerenderDirective, selector: "[mngRerender]", inputs: ["mngRerender"] }, { kind: "component", type: DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "component", type: InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "component", type: InputGroupAddon, selector: "p-inputgroup-addon, p-inputGroupAddon", inputs: ["style", "styleClass"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "directive", type: AutocompleteTemplateDirective, selector: "[mngAutocompleteTemplate]", inputs: ["name"], exportAs: ["mngAutocompleteTemplate"] }, { kind: "directive", type: DropdownTemplateDirective, selector: "[mngDropdownTemplate]", inputs: ["name"], exportAs: ["mngDropdownTemplate"] }, { kind: "directive", type: DateRangeTemplateDirective, selector: "[mngDateRangeTemplate]", inputs: ["name"], exportAs: ["mngDateRangeTemplate"] }, { kind: "directive", type: NumberRangeTemplateDirective, selector: "[mngNumberRangeTemplate]", inputs: ["name"], exportAs: ["mngNumberRangeTemplate"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [
1112
- trigger('overlayAnimation', [
1113
- transition(':enter', [style({ opacity: 0, transform: 'scaleY(0.8)' }), animate('.12s cubic-bezier(0, 0, 0.2, 1)')]),
1114
- transition(':leave', [animate('.1s linear', style({ opacity: 0 }))])
1115
- ])
1116
- ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
1117
- }
1118
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: TableFilterComponent, decorators: [{
1119
- type: Component,
1120
- args: [{ selector: 'mng-table-filter', imports: [
1121
- TableModule,
1122
- TranslatePipe,
1123
- DateRangeComponent,
1124
- FormsModule,
1125
- AutocompleteComponent,
1126
- DropdownComponent,
1127
- InputNumber,
1128
- InputText,
1129
- InputTrimDirective,
1130
- NumberRangeComponent,
1131
- NgTemplateOutlet,
1132
- RerenderDirective,
1133
- DatePicker,
1134
- InputGroup,
1135
- InputGroupAddon,
1136
- NgClass,
1137
- ToggleSwitch,
1138
- AutocompleteTemplateDirective,
1139
- DropdownTemplateDirective,
1140
- DateRangeTemplateDirective,
1141
- NumberRangeTemplateDirective
1142
- ], animations: [
1143
- trigger('overlayAnimation', [
1144
- transition(':enter', [style({ opacity: 0, transform: 'scaleY(0.8)' }), animate('.12s cubic-bezier(0, 0, 0.2, 1)')]),
1145
- transition(':leave', [animate('.1s linear', style({ opacity: 0 }))])
1146
- ])
1147
- ], providers: [FilterService], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex items-center\">\n @let requiredFilterMissing = config().descriptor.isRequired && !filter.isActive();\n @let placeholder = (placeholderKey() | translate) + (config().descriptor.isRequired ? ' *' : '');\n <div\n class=\"flex items-center [&_p-inputgroup-addon]:p-0!\"\n [ngClass]=\"filter.isActive() ? '[&_*]:border-primary-600! [&_*]:bg-primary-50!' : ''\"\n [class.[&_*]:border-red-500!]=\"requiredFilterMissing\"\n [class.mng-filter-required]=\"requiredFilterMissing\">\n @switch (config().descriptor.filterType) {\n @case (FilterTypeEnum.Number) {\n @if (filter.state()?.displayMatchMode === 'between') {\n <mng-number-range\n vertical=\"true\"\n className=\"mng-filter-number\"\n [ngModel]=\"filter.state()?.displayValue\"\n (ngModelChange)=\"onNumericModelChange($event)\"\n (keyDown)=\"onNumericInputKeyDown($event)\"\n [placeholder]=\"placeholder\"\n [useGrouping]=\"config().descriptor.numberUseGrouping\"\n [minFractionDigits]=\"config().numberConfig?.fractionsMin\"\n [maxFractionDigits]=\"config().numberConfig?.fractionsMax\"\n [disabled]=\"isInputDisabled()\"\n [templates]=\"showFilterIcon() ? [numberRangePrependIcon] : []\" />\n } @else {\n <p-inputgroup>\n @if (showFilterIcon()) {\n <p-inputgroup-addon>\n <ng-container *ngTemplateOutlet=\"iconTemplate\"></ng-container>\n </p-inputgroup-addon>\n }\n <p-inputNumber\n inputStyleClass=\"mng-filter-number\"\n [ngModel]=\"filter.state()?.displayValue\"\n (ngModelChange)=\"onNumericModelChange($event)\"\n (onKeyDown)=\"onNumericInputKeyDown($event)\"\n [placeholder]=\"placeholder\"\n [useGrouping]=\"config().descriptor.numberUseGrouping\"\n [minFractionDigits]=\"config().numberConfig?.fractionsMin\"\n [maxFractionDigits]=\"config().numberConfig?.fractionsMax\"\n [disabled]=\"isInputDisabled()\" />\n </p-inputgroup>\n }\n }\n\n @case (FilterTypeEnum.Boolean) {\n <mng-dropdown\n optionsLabelProperty=\"label\"\n optionsValueProperty=\"value\"\n [ngModel]=\"filter.state()?.displayValue\"\n [options]=\"booleanOptions\"\n [optionsLabelTranslate]=\"true\"\n [placeholder]=\"placeholder\"\n [disabled]=\"isInputDisabled()\"\n (valueChange)=\"booleanFilter($event)\"\n [templates]=\"showFilterIcon() ? [dropdownPrependIcon] : []\">\n </mng-dropdown>\n }\n @case (FilterTypeEnum.Date) {\n @if (filter.state()?.displayMatchMode === FilterMatchMode.Between) {\n <mng-date-range\n vertical=\"true\"\n [ngModel]=\"filter.state()?.displayValue\"\n (ngModelChange)=\"onDateFilterModelChange($event)\"\n [showTime]=\"config().dateConfig?.showTime ?? false\"\n [showSeconds]=\"config().dateConfig?.showSeconds ?? false\"\n [dateFormat]=\"config().dateConfig?.format\"\n [placeholder]=\"placeholder\"\n [disabled]=\"isInputDisabled()\"\n [templates]=\"showFilterIcon() ? [dateRangePrependIcon] : []\" />\n } @else {\n <p-inputgroup>\n @if (showFilterIcon()) {\n <p-inputgroup-addon>\n <ng-container *ngTemplateOutlet=\"iconTemplate\"></ng-container>\n </p-inputgroup-addon>\n }\n <p-date-picker\n appendTo=\"body\"\n [ngModel]=\"filter.state()?.displayValue\"\n (ngModelChange)=\"onDateFilterModelChange($event)\"\n [placeholder]=\"placeholder\"\n [showIcon]=\"true\"\n [inputStyle]=\"{borderTopRightRadius: '0', borderBottomRightRadius: '0'}\"\n [showTime]=\"config().dateConfig?.showTime ?? false\"\n [showSeconds]=\"config().dateConfig?.showSeconds ?? false\"\n [dateFormat]=\"config().dateConfig?.format\"\n [firstDayOfWeek]=\"1\">\n </p-date-picker>\n </p-inputgroup>\n }\n }\n @case (FilterTypeEnum.Lookup) {\n <ng-container *ngTemplateOutlet=\"lookupFilter\" />\n }\n @case (FilterTypeEnum.LookupEnum) {\n <ng-container *ngTemplateOutlet=\"lookupFilter\" />\n }\n @default {\n <p-inputgroup>\n @if (showFilterIcon()) {\n <p-inputgroup-addon>\n <ng-container *ngTemplateOutlet=\"iconTemplate\"></ng-container>\n </p-inputgroup-addon>\n }\n <input\n type=\"text\"\n pInputText\n class=\"mng-filter-string\"\n [value]=\"filter.state()?.displayValue ?? ''\"\n [disabled]=\"isInputDisabled()\"\n (input)=\"onTextModelChange($event)\"\n (keydown.enter)=\"onTextInputEnterKeyDown($event)\"\n [attr.placeholder]=\"placeholder\"\n [mngInputTrim]=\"config().descriptor.trimOption\" />\n </p-inputgroup>\n }\n }\n\n <ng-template #lookupFilter>\n @if (descriptorAsLookup(); as lookup) {\n @switch (lookup.lookupType) {\n @case (lookupTypeAutocomplete) {\n <mng-autocomplete\n *mngRerender=\"isMultiselect()\"\n [ngModel]=\"filter.state()?.displayValue\"\n [dataProvider]=\"lookup.dataProvider\"\n [optionsTrackProperty]=\"lookup.optionsValueProperty\"\n [optionsValueProperty]=\"lookup.optionsValueProperty\"\n [optionsLabelProperty]=\"lookup.optionsLabelProperty\"\n [optionsLabelTranslate]=\"lookup.optionsLabelTranslate\"\n [multiselect]=\"isMultiselect()\"\n [autoClear]=\"lookup.autocompleteAutoClear ?? false\"\n [openOnFocus]=\"lookup.autocompleteAutoClear ?? true\"\n [inlineSearch]=\"lookup.autocompleteInlineSearch ?? false\"\n [placeholder]=\"placeholder\"\n [className]=\"lookup.className\"\n [dropdownClassName]=\"lookup.dropdownClassName\"\n [disabled]=\"isInputDisabled()\"\n (valueChange)=\"autocompleteFilter($event)\"\n [searchTrim]=\"config().descriptor.trimOption\"\n [templates]=\"showFilterIcon() ? [autocompletePrependIcon] : []\">\n </mng-autocomplete>\n }\n @case (lookupTypeDropdown) {\n <mng-dropdown\n *mngRerender=\"isMultiselect()\"\n [ngModel]=\"filter.state()?.displayValue\"\n [dataProvider]=\"lookup.dataProvider\"\n [optionsValueProperty]=\"lookup.optionsValueProperty\"\n [optionsLabelProperty]=\"lookup.optionsLabelProperty\"\n [optionsLabelTranslate]=\"lookup.optionsLabelTranslate\"\n [multiselect]=\"isMultiselect()\"\n [placeholder]=\"placeholder\"\n [className]=\"lookup.className\"\n [dropdownClassName]=\"lookup.dropdownClassName\"\n [showClear]=\"false\"\n [changeValueOnBlur]=\"isMultiselect()\"\n [disabled]=\"isInputDisabled()\"\n (valueChange)=\"dropdownFilter($event)\"\n [templates]=\"showFilterIcon() ? [dropdownPrependIcon] : []\">\n </mng-dropdown>\n }\n }\n }\n </ng-template>\n\n <ng-template mngAutocompleteTemplate name=\"prepend\" #autocompletePrependIcon=\"mngAutocompleteTemplate\">\n <ng-container *ngTemplateOutlet=\"iconTemplate\"></ng-container>\n </ng-template>\n <ng-template mngDropdownTemplate name=\"prepend\" #dropdownPrependIcon=\"mngDropdownTemplate\">\n <ng-container *ngTemplateOutlet=\"iconTemplate\"></ng-container>\n </ng-template>\n <ng-template mngDateRangeTemplate name=\"prepend\" #dateRangePrependIcon=\"mngDateRangeTemplate\">\n <ng-container *ngTemplateOutlet=\"iconTemplate\"></ng-container>\n </ng-template>\n <ng-template mngNumberRangeTemplate name=\"prepend\" #numberRangePrependIcon=\"mngNumberRangeTemplate\">\n <ng-container *ngTemplateOutlet=\"iconTemplate\"></ng-container>\n </ng-template>\n\n <ng-template #iconTemplate>\n <button\n #icon\n class=\"cursor-pointer pi pi-filter w-full h-full rounded-tl-md rounded-bl-md hover:bg-slate-50!\"\n [ngClass]=\"{\n 'text-primary-700': filter.isActive(),\n 'text-slate-400': !filter.isActive()\n }\"\n (click)=\"toggleMenu($event)\"\n (keydown)=\"onToggleButtonKeyDown($event)\"></button>\n </ng-template>\n\n @if (overlayVisible()) {\n <div\n class=\"p-datatable-filter-overlay\"\n (click)=\"onContentClick()\"\n [@overlayAnimation]=\"'visible'\"\n (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\"\n (@overlayAnimation.done)=\"onOverlayAnimationEnd($event)\"\n (keydown.escape)=\"onEscape()\">\n <ul class=\"p-datatable-filter-constraint-list\">\n @for (matchMode of matchModes(); track matchMode; let i = $index) {\n <li\n class=\"p-datatable-filter-constraint\"\n [class.p-datatable-filter-constraint-selected]=\"matchMode.value === filter.state()?.displayMatchMode\"\n (click)=\"onMatchModeChange(matchMode.value)\"\n (keydown)=\"onMatchModeKeyDown($event)\"\n (keydown.enter)=\"this.onMatchModeChange(matchMode.value)\"\n [attr.tabindex]=\"i === 0 ? '0' : null\">\n {{ matchMode.label }}\n </li>\n }\n @if (config().descriptor.filterType === FilterTypeEnum.String) {\n <li class=\"p-datatable-filter-constraint-separator\" (keydown)=\"onMatchModeKeyDown($event)\"></li>\n <li\n class=\"p-datatable-filter-constraint\"\n (click)=\"onCaseSensitivityToggle()\"\n (keydown)=\"onMatchModeKeyDown($event)\"\n (keydown.enter)=\"onCaseSensitivityToggle()\">\n <div class=\"flex items-center\">\n <span class=\"mr-2\"> {{ 'mngFilter.caseSensitive' | translate }} </span>\n <p-toggle-switch [ngModel]=\"filter.state()?.caseSensitive || false\" class=\"ml-auto pointer-events-none\"></p-toggle-switch>\n </div>\n </li>\n }\n <li class=\"p-datatable-filter-constraint-separator\" (keydown)=\"onMatchModeKeyDown($event)\"></li>\n <li class=\"p-datatable-filter-constraint\" (click)=\"clear()\" (keydown)=\"onMatchModeKeyDown($event)\" (keydown.enter)=\"clear()\">\n {{ noFilterLabel() }}\n </li>\n </ul>\n </div>\n }\n </div>\n\n @if (!showFilterIcon()) {\n <button\n #icon\n class=\"mng-filter-options cursor-pointer ml-1\"\n [ngClass]=\"{\n 'text-primary': filter.isActive(),\n 'text-slate-400': !filter.isActive()\n }\"\n (click)=\"toggleMenu($event)\"\n (keydown)=\"onToggleButtonKeyDown($event)\">\n <i class=\"pi pi-ellipsis-v\"></i>\n </button>\n }\n</div>\n", styles: [".mng-filter-string{min-width:135px}.mng-filter-number{min-width:165px}.mng-filter-date{min-width:170px}.mng-filter-boolean{min-width:80px}.mng-filter-lookup,.mng-filter-lookupenum{min-width:180px}.mng-filter-required{position:relative}p-tag.mng-filter-required{border:1px solid var(--color-red-500)}.mng-filter-required:after{content:\"\";position:absolute;top:0;right:0;width:1rem;height:1rem;background-color:var(--color-red-500);z-index:1;clip-path:polygon(0 0,100% 0,100% 100%,0 0);border-top-right-radius:var(--p-inputgroup-addon-border-radius)}\n"] }]
1148
- }], ctorParameters: () => [] });
1149
-
1150
- var filter_component = /*#__PURE__*/Object.freeze({
1151
- __proto__: null,
1152
- TableFilterComponent: TableFilterComponent
1153
- });
1154
-
1155
- class TableColumnValueComponent {
1156
- constructor() {
1157
- this.columnDisplayTypeString = ColumnDisplayTypeEnum.String;
1158
- this.columnDisplayTypeNumber = ColumnDisplayTypeEnum.Number;
1159
- this.columnDisplayTypeCurrency = ColumnDisplayTypeEnum.Currency;
1160
- this.columnDisplayTypeBoolean = ColumnDisplayTypeEnum.Boolean;
1161
- this.columnDisplayTypeDate = ColumnDisplayTypeEnum.Date;
1162
- this.columnDisplayTypeEnum = ColumnDisplayTypeEnum.Enum;
1163
- this.columnDisplayTypeComponent = ColumnDisplayTypeEnum.Component;
1164
- this.columnDisplayTypeHtml = ColumnDisplayTypeEnum.Html;
1165
- this.elementRef = inject(ElementRef);
1166
- this.messageService = inject(MessageService);
1167
- this.translate = inject(TranslateService);
1168
- this.getterPipe = new GetterPipe();
1169
- this.templatePipe = new TemplatePipe();
1170
- this.jsonPathPipe = new JsonPathPipe();
1171
- this.descriptor = input.required(...(ngDevMode ? [{ debugName: "descriptor" }] : []));
1172
- this.item = input.required(...(ngDevMode ? [{ debugName: "item" }] : []));
1173
- this.styleMaxWidth = computed(() => this.descriptor().maxWidth ?? null, ...(ngDevMode ? [{ debugName: "styleMaxWidth" }] : []));
1174
- this.className = computed(() => {
1175
- let className = 'nowrap';
1176
- if (this.descriptor().columnDisplayType === ColumnDisplayTypeEnum.String && this.descriptor().isMultiline) {
1177
- className += ' multiline';
1178
- }
1179
- return className;
1180
- }, ...(ngDevMode ? [{ debugName: "className" }] : []));
1181
- this.value = computed(() => {
1182
- let value = this.jsonPathPipe.transform(this.item(), `$.${this.descriptor().property}`);
1183
- if (typeof this.descriptor().getter === 'function') {
1184
- value = this.getterPipe.transform(value, this.descriptor().getter, this.item());
1185
- }
1186
- if (this.descriptor().template) {
1187
- value = this.templatePipe.transform(value, this.descriptor().template);
1188
- }
1189
- return value;
1190
- }, ...(ngDevMode ? [{ debugName: "value" }] : []));
1191
- this.currency = computed(() => {
1192
- if (this.descriptor().columnDisplayType === ColumnDisplayTypeEnum.Currency) {
1193
- return this.descriptor().currencyProperty ? this.item()[this.descriptor().currencyProperty] : (this.descriptor().currencyCode ?? 'EUR');
1194
- }
1195
- return;
1196
- }, ...(ngDevMode ? [{ debugName: "currency" }] : []));
1197
- this.hasCopyToClipboard = computed(() => this.descriptor().hasCopyToClipboard && this.value() != null, ...(ngDevMode ? [{ debugName: "hasCopyToClipboard" }] : []));
1198
- this.componentInputs = computed(() => {
1199
- const inputs = {
1200
- value: this.value(),
1201
- item: this.item(),
1202
- descriptor: this.descriptor()
1203
- };
1204
- if (this.descriptor().customComponentInputs) {
1205
- return { ...inputs, ...this.descriptor().customComponentInputs };
1206
- }
1207
- return inputs;
1208
- }, ...(ngDevMode ? [{ debugName: "componentInputs" }] : []));
1209
- }
1210
- copyToClipboard(event) {
1211
- event.stopPropagation();
1212
- let value = this.elementRef.nativeElement.innerText.trim();
1213
- const clipboardValueGetter = this.descriptor().clipboardValueGetter;
1214
- if (clipboardValueGetter) {
1215
- value = clipboardValueGetter(this.value(), this.item());
1216
- }
1217
- navigator.clipboard.writeText(value);
1218
- const title = this.translate.instant('mngTable.copyNotificationTitle');
1219
- const message = this.translate.instant('mngTable.copyNotificationMessage', { value });
1220
- this.messageService.add({ severity: 'info', summary: title, detail: message });
1221
- }
1222
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: TableColumnValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1223
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: TableColumnValueComponent, isStandalone: true, selector: "mng-table-column-value", inputs: { descriptor: { classPropertyName: "descriptor", publicName: "descriptor", isSignal: true, isRequired: true, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class": "className()", "style.max-width.px": "styleMaxWidth()" } }, ngImport: i0, template: "@if (descriptor().localizationExistsProperty && !item()[descriptor().localizationExistsProperty!]) {\n <i class=\"pi pi-exclamation-circle\" [pTooltip]=\"'mngTable.translationMissing' | translate\"></i>\n}\n@switch (descriptor().columnDisplayType) {\n @case (columnDisplayTypeString) {\n @if (descriptor().hasValueAsTooltip) {\n <span [pTooltip]=\"value()\" tooltipPosition=\"left\">{{ value() }}</span>\n } @else {\n {{ value() }}\n }\n }\n @case (columnDisplayTypeHtml) {\n <span [innerHTML]=\"value()\"></span>\n }\n @case (columnDisplayTypeNumber) {\n {{ value() | number: descriptor().displayFormat : descriptor().locale }}\n }\n @case (columnDisplayTypeCurrency) {\n {{ value() | currency: currency() : descriptor().currencyDisplay : descriptor().displayFormat : descriptor().locale }}\n }\n @case (columnDisplayTypeDate) {\n {{ value() | date: descriptor().displayFormat }}\n }\n @case (columnDisplayTypeBoolean) {\n @if (descriptor().booleanAsIcon) {\n <i [class]=\"value() | mngBoolean: descriptor().booleanYes : descriptor().booleanNo : true\"></i>\n } @else {\n {{ value() | mngBoolean: descriptor().booleanYes : descriptor().booleanNo | translate }}\n }\n }\n @case (columnDisplayTypeEnum) {\n {{ value() | mngEnum: descriptor().enum | translate }}\n }\n @case (columnDisplayTypeComponent) {\n <ng-container [mngComponent]=\"descriptor().customComponentType!\" [inputs]=\"componentInputs()\"></ng-container>\n }\n}\n@if (hasCopyToClipboard()) {\n <div class=\"help-buttons\">\n <button pButton type=\"button\" icon=\"pi pi-copy\" class=\"p-button-rounded p-button-info p-button-sm\" (click)=\"copyToClipboard($event)\"></button>\n </div>\n}\n", styles: [":host{display:inline-block;overflow:hidden}:host.nowrap{white-space:nowrap;text-overflow:ellipsis}:host.multiline{white-space:pre-wrap;word-wrap:break-word}.help-buttons{display:none;position:absolute;right:0;top:50%;transform:translateY(-50%)}.help-buttons .p-button{height:1.9rem;width:1.9rem;padding:0}\n"], dependencies: [{ kind: "directive", type: ComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "injectionToken", "inputs", "attachToHost", "parentInjector"], outputs: ["instanceCreated"] }, { kind: "directive", type: ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: BooleanPipe, name: "mngBoolean" }, { kind: "pipe", type: EnumPipe, name: "mngEnum" }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
1224
- }
1225
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: TableColumnValueComponent, decorators: [{
1226
- type: Component,
1227
- args: [{ selector: 'mng-table-column-value', imports: [TranslatePipe, BooleanPipe, EnumPipe, ComponentDirective, DecimalPipe, CurrencyPipe, DatePipe, ButtonDirective, Tooltip], changeDetection: ChangeDetectionStrategy.OnPush, host: { '[class]': 'className()', '[style.max-width.px]': 'styleMaxWidth()' }, template: "@if (descriptor().localizationExistsProperty && !item()[descriptor().localizationExistsProperty!]) {\n <i class=\"pi pi-exclamation-circle\" [pTooltip]=\"'mngTable.translationMissing' | translate\"></i>\n}\n@switch (descriptor().columnDisplayType) {\n @case (columnDisplayTypeString) {\n @if (descriptor().hasValueAsTooltip) {\n <span [pTooltip]=\"value()\" tooltipPosition=\"left\">{{ value() }}</span>\n } @else {\n {{ value() }}\n }\n }\n @case (columnDisplayTypeHtml) {\n <span [innerHTML]=\"value()\"></span>\n }\n @case (columnDisplayTypeNumber) {\n {{ value() | number: descriptor().displayFormat : descriptor().locale }}\n }\n @case (columnDisplayTypeCurrency) {\n {{ value() | currency: currency() : descriptor().currencyDisplay : descriptor().displayFormat : descriptor().locale }}\n }\n @case (columnDisplayTypeDate) {\n {{ value() | date: descriptor().displayFormat }}\n }\n @case (columnDisplayTypeBoolean) {\n @if (descriptor().booleanAsIcon) {\n <i [class]=\"value() | mngBoolean: descriptor().booleanYes : descriptor().booleanNo : true\"></i>\n } @else {\n {{ value() | mngBoolean: descriptor().booleanYes : descriptor().booleanNo | translate }}\n }\n }\n @case (columnDisplayTypeEnum) {\n {{ value() | mngEnum: descriptor().enum | translate }}\n }\n @case (columnDisplayTypeComponent) {\n <ng-container [mngComponent]=\"descriptor().customComponentType!\" [inputs]=\"componentInputs()\"></ng-container>\n }\n}\n@if (hasCopyToClipboard()) {\n <div class=\"help-buttons\">\n <button pButton type=\"button\" icon=\"pi pi-copy\" class=\"p-button-rounded p-button-info p-button-sm\" (click)=\"copyToClipboard($event)\"></button>\n </div>\n}\n", styles: [":host{display:inline-block;overflow:hidden}:host.nowrap{white-space:nowrap;text-overflow:ellipsis}:host.multiline{white-space:pre-wrap;word-wrap:break-word}.help-buttons{display:none;position:absolute;right:0;top:50%;transform:translateY(-50%)}.help-buttons .p-button{height:1.9rem;width:1.9rem;padding:0}\n"] }]
1228
- }] });
1229
-
1230
- class FilterValuePipe {
1231
- constructor() {
1232
- this.locale = inject(LOCALE_ID);
1233
- this.translate = inject(TranslateService);
1234
- this.enumPipe = new EnumPipe();
1235
- this.subject = new ReplaySubject(1);
1236
- }
1237
- transform(value, descriptor) {
1238
- const valTransform = this.prepareValueTransform(value, descriptor);
1239
- this.subscription?.unsubscribe();
1240
- if (valTransform.translate && valTransform.valueArr.length > 0) {
1241
- this.subscription = this.translate.stream(valTransform.valueArr).subscribe((i18n) => {
1242
- this.subject.next(valTransform.valueArr.map(k => i18n[k]).join(', '));
1243
- });
1244
- }
1245
- else {
1246
- this.subject.next(valTransform.valueArr.join(', '));
1247
- }
1248
- return this.subject.asObservable();
1249
- }
1250
- /**
1251
- * If returns a string, this represents i18n key that must go through translation. If translation is not needed, undefined is returned.
1252
- */
1253
- prepareValueTransform(value, descriptor) {
1254
- const result = {
1255
- translate: false,
1256
- valueArr: Array.isArray(value) ? value : [value]
1257
- };
1258
- if (value == null) {
1259
- result.valueArr = [];
1260
- }
1261
- switch (descriptor?.filterType) {
1262
- case FilterTypeEnum.Date:
1263
- // eslint-disable-next-line no-case-declarations
1264
- const datePipe = new DatePipe(this.locale);
1265
- result.valueArr = result.valueArr.map(v => datePipe.transform(v, descriptor.displayFormat, descriptor.locale));
1266
- break;
1267
- case FilterTypeEnum.Number:
1268
- // eslint-disable-next-line no-case-declarations
1269
- const decimalPipe = new DecimalPipe(this.locale);
1270
- result.valueArr = result.valueArr.map(v => decimalPipe.transform(v, descriptor.displayFormat, descriptor.locale));
1271
- break;
1272
- case FilterTypeEnum.Boolean:
1273
- // eslint-disable-next-line no-case-declarations
1274
- const booleanPipe = new BooleanPipe();
1275
- result.valueArr = result.valueArr.map(v => booleanPipe.transform(v));
1276
- result.translate = true;
1277
- break;
1278
- case FilterTypeEnum.LookupEnum:
1279
- // eslint-disable-next-line no-case-declarations
1280
- const enumPipe = new EnumPipe();
1281
- result.valueArr = result.valueArr.map(v => enumPipe.transform(v, descriptor.enum));
1282
- result.translate = true;
1283
- break;
1284
- }
1285
- return result;
1286
- }
1287
- ngOnDestroy() {
1288
- this.subscription?.unsubscribe();
1289
- this.subject.complete();
1290
- }
1291
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: FilterValuePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
1292
- static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.1.7", ngImport: i0, type: FilterValuePipe, isStandalone: true, name: "mngFilterValue" }); }
1293
- }
1294
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: FilterValuePipe, decorators: [{
1295
- type: Pipe,
1296
- args: [{
1297
- name: 'mngFilterValue',
1298
- pure: true
1299
- }]
1300
- }] });
1301
-
1302
- class TableFilterActiveTagComponent {
1303
- constructor() {
1304
- this.FilterMatchMode = FilterMatchMode;
1305
- this.model = input.required(...(ngDevMode ? [{ debugName: "model" }] : []));
1306
- this.filter = input.required(...(ngDevMode ? [{ debugName: "filter" }] : []));
1307
- this.edit = output();
1308
- this.remove = output();
1309
- this.label = computed(() => this.getPropertyLabelKey(this.filter().config.descriptor), ...(ngDevMode ? [{ debugName: "label" }] : []));
1310
- this.matchMode = computed(() => this.filter().displayMatchMode, ...(ngDevMode ? [{ debugName: "matchMode" }] : []));
1311
- this.matchModeSymbol = computed(() => `mngFilterActiveTag.matchMode.${this.matchMode()}`, ...(ngDevMode ? [{ debugName: "matchModeSymbol" }] : []));
1312
- this.value = computed(() => this.filter().displayValue, ...(ngDevMode ? [{ debugName: "value" }] : []));
1313
- this.isActive = computed(() => this.filter()?.matchMode === FilterMatchMode.Exists || this.filter()?.matchMode === FilterMatchMode.DoesNotExist || !isFilterValueBlank(this.value()), ...(ngDevMode ? [{ debugName: "isActive" }] : []));
1314
- }
1315
- onRemove(event) {
1316
- event.stopPropagation();
1317
- this.remove.emit({
1318
- filter: this.filter(),
1319
- event: event
1320
- });
1321
- }
1322
- onEdit(event) {
1323
- this.edit.emit({
1324
- filter: this.filter(),
1325
- event: event
1326
- });
1327
- }
1328
- getPropertyLabelKey(filterDescriptor) {
1329
- if (filterDescriptor.isGenericFilter) {
1330
- return filterDescriptor.property;
1331
- }
1332
- let labelKey;
1333
- if (filterDescriptor.title !== undefined && !filterDescriptor.titleUseModelBase) {
1334
- labelKey = filterDescriptor.title;
1335
- }
1336
- else {
1337
- labelKey = getI18nTypePropertyKey(this.model().i18nBaseKey, filterDescriptor.title ?? filterDescriptor.property);
1338
- }
1339
- return labelKey;
1340
- }
1341
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: TableFilterActiveTagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1342
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: TableFilterActiveTagComponent, isStandalone: true, selector: "mng-table-filter-active-tag", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { edit: "edit", remove: "remove" }, ngImport: i0, template: "<p-tag severity=\"secondary\" styleClass=\"mr-1 mng-tag-outlined\" [class.mng-filter-required]=\"!isActive() && filter().config.descriptor.isRequired\">\n <div class=\"flex items-center gap-2 p-1 cursor-pointer\" (click)=\"onEdit($event)\">\n <span>{{ label() | translate }}</span>\n @if (matchMode() === FilterMatchMode.Between) {\n <span class=\"font-semibold\">{{ value()?.[0] | mngFilterValue: filter().config.descriptor | async }}</span>\n <span class=\"text-primary\">{{ matchModeSymbol() | translate }}</span>\n <span class=\"font-semibold\">{{ value()?.[1] | mngFilterValue: filter().config.descriptor | async }}</span>\n } @else {\n <span class=\"text-primary\">{{ matchModeSymbol() | translate }}</span>\n <span class=\"font-semibold\">{{ value() | mngFilterValue: filter().config.descriptor | async }}</span>\n @if (filter().caseSensitive) {\n <small class=\"border-solid border rounded px-1 text-primary-400\">Aa</small>\n }\n }\n @if (isActive()) {\n <span class=\"pi pi-times text-xs\" (click)=\"onRemove($event)\"></span>\n }\n </div>\n</p-tag>\n", styles: ["mng-table-filter-active-tag.p-tag.p-tag-secondary.mng-tag-outlined{background-color:unset;border:1px solid var(--mng-tag-secondary-outlined-border)}\n"], dependencies: [{ kind: "component", type: Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: FilterValuePipe, name: "mngFilterValue" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
1343
- }
1344
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: TableFilterActiveTagComponent, decorators: [{
1345
- type: Component,
1346
- args: [{ selector: 'mng-table-filter-active-tag', imports: [TranslatePipe, FilterValuePipe, AsyncPipe, Tag], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<p-tag severity=\"secondary\" styleClass=\"mr-1 mng-tag-outlined\" [class.mng-filter-required]=\"!isActive() && filter().config.descriptor.isRequired\">\n <div class=\"flex items-center gap-2 p-1 cursor-pointer\" (click)=\"onEdit($event)\">\n <span>{{ label() | translate }}</span>\n @if (matchMode() === FilterMatchMode.Between) {\n <span class=\"font-semibold\">{{ value()?.[0] | mngFilterValue: filter().config.descriptor | async }}</span>\n <span class=\"text-primary\">{{ matchModeSymbol() | translate }}</span>\n <span class=\"font-semibold\">{{ value()?.[1] | mngFilterValue: filter().config.descriptor | async }}</span>\n } @else {\n <span class=\"text-primary\">{{ matchModeSymbol() | translate }}</span>\n <span class=\"font-semibold\">{{ value() | mngFilterValue: filter().config.descriptor | async }}</span>\n @if (filter().caseSensitive) {\n <small class=\"border-solid border rounded px-1 text-primary-400\">Aa</small>\n }\n }\n @if (isActive()) {\n <span class=\"pi pi-times text-xs\" (click)=\"onRemove($event)\"></span>\n }\n </div>\n</p-tag>\n", styles: ["mng-table-filter-active-tag.p-tag.p-tag-secondary.mng-tag-outlined{background-color:unset;border:1px solid var(--mng-tag-secondary-outlined-border)}\n"] }]
1347
- }] });
1348
-
1349
- var filterActiveTag_component = /*#__PURE__*/Object.freeze({
1350
- __proto__: null,
1351
- TableFilterActiveTagComponent: TableFilterActiveTagComponent
1352
- });
1353
-
1354
- class TableFilterFormComponent {
1355
- constructor() {
1356
- this.lookupTypeDropdown = FilterLookupTypeEnum.Dropdown;
1357
- this.lookupTypeAutocomplete = FilterLookupTypeEnum.Autocomplete;
1358
- this.FilterTypeEnum = FilterTypeEnum;
1359
- this.FilterMatchMode = FilterMatchMode;
1360
- this.elementRef = inject(ElementRef);
1361
- this.translate = inject(TranslateService);
1362
- this.title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
1363
- this.metadata = input.required(...(ngDevMode ? [{ debugName: "metadata" }] : []));
1364
- this.genericDescriptor = input(...(ngDevMode ? [undefined, { debugName: "genericDescriptor" }] : []));
1365
- this.model = input.required(...(ngDevMode ? [{ debugName: "model" }] : []));
1366
- this.filter = input(...(ngDevMode ? [undefined, { debugName: "filter" }] : []));
1367
- this.overlay = input(...(ngDevMode ? [undefined, { debugName: "overlay" }] : []));
1368
- this.disabledProperties = input([], ...(ngDevMode ? [{ debugName: "disabledProperties" }] : []));
1369
- this.enableCaseSensitive = input(true, ...(ngDevMode ? [{ debugName: "enableCaseSensitive" }] : []));
1370
- this.propertySearch = input(false, ...(ngDevMode ? [{ debugName: "propertySearch", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
1371
- this.apply = output();
1372
- this.propertyOptionsWithTranslations = computed(() => {
1373
- const disabledProperties = this.disabledProperties();
1374
- const filter = this.filter();
1375
- return (this.metadata()?.map(d => {
1376
- return {
1377
- property: d.descriptor.property,
1378
- label: d.descriptor.isGenericFilter ? d.descriptor.property : this.getPropertyLabelKey(d.descriptor),
1379
- disabled: !filter && disabledProperties.includes(d.descriptor.property)
1380
- };
1381
- }) ?? []);
1382
- }, ...(ngDevMode ? [{ debugName: "propertyOptionsWithTranslations" }] : []));
1383
- this.selectedFilterMetadata = computed(() => {
1384
- const property = this.propertyModel();
1385
- return this.metadata().find(d => d.descriptor.property === property);
1386
- }, ...(ngDevMode ? [{ debugName: "selectedFilterMetadata" }] : []));
1387
- // change value lookup function to include the property name of the generic filter
1388
- this.genericValueDataProvider = computed(() => {
1389
- const genericValueProvider = this.genericDescriptor()?.valueLookup;
1390
- if (genericValueProvider && genericValueProvider.serviceType) {
1391
- const lookupFn = genericValueProvider.lookup;
1392
- return lookupDataProvider({ service: genericValueProvider.serviceType }).withLookup((params, service, search) => {
1393
- params = {
1394
- ...params,
1395
- filters: {
1396
- ...params?.filters,
1397
- field: {
1398
- value: this.selectedFilterMetadata()?.descriptor.property,
1399
- matchMode: this.selectedFilterMetadata()?.descriptor.filterType === FilterTypeEnum.LookupEnum ? FilterMatchMode.In : FilterMatchMode.StartsWith
1400
- }
1401
- }
1402
- };
1403
- return lookupFn(params, service, search);
1404
- });
1405
- }
1406
- return;
1407
- }, ...(ngDevMode ? [{ debugName: "genericValueDataProvider" }] : []));
1408
- this.selectedDescriptorAsLookup = computed(() => {
1409
- const filterDescriptor = this.selectedFilterMetadata()?.descriptor;
1410
- return filterDescriptor !== undefined &&
1411
- !filterDescriptor.isGenericFilter &&
1412
- (filterDescriptor.filterType === FilterTypeEnum.Lookup || filterDescriptor.filterType === FilterTypeEnum.LookupEnum)
1413
- ? filterDescriptor
1414
- : undefined;
1415
- }, ...(ngDevMode ? [{ debugName: "selectedDescriptorAsLookup" }] : []));
1416
- this.isEdit = computed(() => this.filter() != null, ...(ngDevMode ? [{ debugName: "isEdit" }] : []));
1417
- this.formSubmitted = signal(false, ...(ngDevMode ? [{ debugName: "formSubmitted" }] : []));
1418
- this.formErrorMessage = signal([], ...(ngDevMode ? [{ debugName: "formErrorMessage" }] : []));
1419
- // UI utilities
1420
- this.filterForm = viewChild.required('filterForm');
1421
- // Filter form model and form utilities
1422
- this.propertyModel = signal(null, ...(ngDevMode ? [{ debugName: "propertyModel" }] : []));
1423
- this.matchModeModel = signal(null, ...(ngDevMode ? [{ debugName: "matchModeModel" }] : []));
1424
- this.valueModel = signal(null, ...(ngDevMode ? [{ debugName: "valueModel" }] : []));
1425
- this.caseSensitiveModel = signal(false, ...(ngDevMode ? [{ debugName: "caseSensitiveModel" }] : []));
1426
- this.isMultiselect = computed(() => this.matchModeModel() === FilterMatchMode.In || this.matchModeModel() === FilterMatchMode.NotIn, ...(ngDevMode ? [{ debugName: "isMultiselect" }] : []));
1427
- effectWithDeps([this.filter], ([edit]) => {
1428
- if (edit) {
1429
- this.resetForm({
1430
- property: edit.config.descriptor.property,
1431
- matchMode: edit.displayMatchMode ?? edit.matchMode ?? null,
1432
- value: edit.displayValue ?? edit.value,
1433
- caseSensitive: edit.caseSensitive ?? false
1434
- });
1435
- }
1436
- else {
1437
- this.resetForm();
1438
- }
1439
- });
1440
- effectWithDeps([this.selectedFilterMetadata], ([selectedFilterMetadata]) => {
1441
- const descriptor = selectedFilterMetadata?.descriptor;
1442
- const value = this.valueModel();
1443
- if (value != null) {
1444
- // reset value if filter type and value type mismatch
1445
- if ((descriptor?.filterType === FilterTypeEnum.String && (value === true || value === false || value === 'true' || value === 'false' || value instanceof Date)) ||
1446
- (descriptor?.filterType === FilterTypeEnum.Number && typeof value !== 'number' && isNaN(+value)) ||
1447
- (descriptor?.filterType === FilterTypeEnum.Date && !(value instanceof Date))) {
1448
- this.valueModel.set(null);
1449
- }
1450
- else if (descriptor?.filterType === FilterTypeEnum.Boolean && typeof value !== 'boolean') {
1451
- this.valueModel.set(false);
1452
- }
1453
- }
1454
- const matchModeOptions = selectedFilterMetadata?.matchModes ?? [];
1455
- const matchMode = this.matchModeModel();
1456
- const filterForm = this.filterForm();
1457
- const isEdit = this.isEdit();
1458
- if (matchModeOptions.length > 0 &&
1459
- (!matchMode ||
1460
- (!isEdit && (filterForm.controls['matchMode']?.pristine || filterForm.controls['matchMode']?.untouched)) ||
1461
- !matchModeOptions.find(o => o.value === matchMode))) {
1462
- // reset match mode is needed
1463
- this.matchModeModel.set(filterGetDefaultMatchMode(this.selectedFilterMetadata()?.descriptor, matchModeOptions));
1464
- }
1465
- });
1466
- effectWithDeps([this.matchModeModel], ([matchModeModel]) => this.valueModel.set(filterAdjustDisplayValueOnMatchModeChange(matchModeModel ?? undefined, this.valueModel())));
1467
- toObservable(this.overlay)
1468
- .pipe(switchMap(o => (o ? o.onShow : NEVER)), takeUntilDestroyed())
1469
- .subscribe(() => {
1470
- const formFields = this.elementRef.nativeElement.querySelectorAll('input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [role="combobox"]:not([disabled])');
1471
- const activeEl = document.activeElement;
1472
- const activeInputIdx = activeEl ? [...formFields].findIndex(el => activeEl.isEqualNode(el)) : 0;
1473
- if (activeInputIdx <= 0) {
1474
- formFields[0]?.focus();
1475
- }
1476
- });
1477
- }
1478
- onFormSubmit(form) {
1479
- this.formSubmitted.set(true);
1480
- // mark all as dirty
1481
- for (const key in form.controls) {
1482
- form.controls[key].markAsDirty();
1483
- }
1484
- const property = this.propertyModel();
1485
- const matchMode = this.matchModeModel();
1486
- if (form.invalid || !property || !matchMode) {
1487
- this.formErrorMessage.set([
1488
- {
1489
- severity: 'warn',
1490
- summary: this.translate.instant('mngFilter.messages.invalidFormTitle'),
1491
- detail: this.translate.instant('mngFilter.messages.invalidFormMessage')
1492
- }
1493
- ]);
1494
- return;
1495
- }
1496
- this.apply.emit({
1497
- property: property,
1498
- matchMode: matchMode,
1499
- value: this.valueModel(),
1500
- caseSensitive: this.caseSensitiveModel()
1501
- });
1502
- // resetting the form is done from the parent component (filter-overlay-with-tag) for smoother animations
1503
- }
1504
- resetForm(value) {
1505
- this.filterForm().resetForm(value);
1506
- // somehow have to set case sensitivity manually
1507
- this.caseSensitiveModel.set(value?.caseSensitive ?? false);
1508
- this.formSubmitted.set(false);
1509
- }
1510
- getPropertyLabelKey(filterDescriptor) {
1511
- let labelKey;
1512
- if (filterDescriptor.title !== undefined && !filterDescriptor.titleUseModelBase) {
1513
- labelKey = filterDescriptor.title;
1514
- }
1515
- else {
1516
- labelKey = getI18nTypePropertyKey(this.model().i18nBaseKey, filterDescriptor.title ?? filterDescriptor.property);
1517
- }
1518
- return labelKey;
1519
- }
1520
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: TableFilterFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1521
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: TableFilterFormComponent, isStandalone: true, selector: "mng-table-filter-form", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, metadata: { classPropertyName: "metadata", publicName: "metadata", isSignal: true, isRequired: true, transformFunction: null }, genericDescriptor: { classPropertyName: "genericDescriptor", publicName: "genericDescriptor", isSignal: true, isRequired: false, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, overlay: { classPropertyName: "overlay", publicName: "overlay", isSignal: true, isRequired: false, transformFunction: null }, disabledProperties: { classPropertyName: "disabledProperties", publicName: "disabledProperties", isSignal: true, isRequired: false, transformFunction: null }, enableCaseSensitive: { classPropertyName: "enableCaseSensitive", publicName: "enableCaseSensitive", isSignal: true, isRequired: false, transformFunction: null }, propertySearch: { classPropertyName: "propertySearch", publicName: "propertySearch", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { apply: "apply" }, host: { classAttribute: "flex grow" }, viewQueries: [{ propertyName: "filterForm", first: true, predicate: ["filterForm"], descendants: true, isSignal: true }], ngImport: i0, template: "<div>\n <div>\n <h5>{{ filter() ? ('mngFilter.titleEdit' | translate) : ('mngFilter.titleAdd' | translate) }}</h5>\n </div>\n <form #filterForm=\"ngForm\" (ngSubmit)=\"onFormSubmit(filterForm)\" class=\"flex flex-col items-center lg:flex-row gap-4\">\n <div class=\"w-full lg:w-auto\">\n <mng-dropdown\n name=\"property\"\n id=\"property\"\n tabindex=\"1\"\n #propertyControl=\"ngModel\"\n [(ngModel)]=\"propertyModel\"\n [options]=\"propertyOptionsWithTranslations()\"\n optionsValueProperty=\"property\"\n optionsDisabledProperty=\"disabled\"\n optionsLabelProperty=\"label\"\n [placeholder]=\"'mngFilter.property' | translate\"\n [optionsLabelTranslate]=\"!propertySearch()\"\n [inlineSearch]=\"propertySearch()\"\n required=\"true\"\n className=\"w-full\"\n [disabled]=\"isEdit()\"\n [appendTo]=\"null\" />\n </div>\n <div class=\"w-full lg:w-auto\">\n <mng-dropdown\n name=\"matchMode\"\n id=\"matchMode\"\n [(ngModel)]=\"matchModeModel\"\n className=\"w-full\"\n [options]=\"selectedFilterMetadata()?.matchModes ?? []\"\n [placeholder]=\"'mngFilter.matchMode' | translate\"\n [disabled]=\"!propertyControl.value\"\n class=\"self-end\"\n required=\"true\"\n [appendTo]=\"null\" />\n </div>\n @if (!(matchModeModel() === FilterMatchMode.Exists || matchModeModel() === FilterMatchMode.DoesNotExist)) {\n <div class=\"w-full lg:w-auto flex flex-col\">\n @switch (selectedFilterMetadata()?.descriptor?.filterType) {\n @case (FilterTypeEnum.Number) {\n @if (matchModeModel() === FilterMatchMode.Between) {\n <mng-number-range\n className=\"mng-filter-number\"\n name=\"value\"\n [(ngModel)]=\"valueModel\"\n [placeholder]=\"'mngFilter.value' | translate\"\n [useGrouping]=\"selectedFilterMetadata()?.descriptor?.numberUseGrouping ?? false\"\n [minFractionDigits]=\"selectedFilterMetadata()?.numberConfig?.fractionsMin\"\n [maxFractionDigits]=\"selectedFilterMetadata()?.numberConfig?.fractionsMax\"\n required=\"true\" />\n } @else {\n <p-inputNumber\n inputStyleClass=\"mng-filter-number\"\n name=\"value\"\n [(ngModel)]=\"valueModel\"\n [styleClass]=\"'w-full'\"\n [placeholder]=\"'mngFilter.value' | translate\"\n [useGrouping]=\"selectedFilterMetadata()?.descriptor?.numberUseGrouping\"\n [minFractionDigits]=\"selectedFilterMetadata()?.numberConfig?.fractionsMin\"\n [maxFractionDigits]=\"selectedFilterMetadata()?.numberConfig?.fractionsMax\"\n [disabled]=\"!matchModeModel()\"\n required=\"true\" />\n }\n }\n\n @case (FilterTypeEnum.Boolean) {\n <p-checkbox [(ngModel)]=\"valueModel\" [disabled]=\"!matchModeModel()\" name=\"value\" binary=\"true\" required=\"true\" />\n }\n @case (FilterTypeEnum.Date) {\n @if (matchModeModel() === FilterMatchMode.Between) {\n <mng-date-range\n [(ngModel)]=\"valueModel\"\n name=\"value\"\n [showTime]=\"selectedFilterMetadata()?.dateConfig?.showTime ?? false\"\n [showSeconds]=\"selectedFilterMetadata()?.dateConfig?.showSeconds ?? false\"\n [dateFormat]=\"selectedFilterMetadata()?.dateConfig?.format\"\n [placeholder]=\"'mngFilter.value' | translate\"\n required=\"true\"></mng-date-range>\n } @else {\n <p-date-picker\n appendTo=\"body\"\n name=\"value\"\n [(ngModel)]=\"valueModel\"\n [styleClass]=\"'w-full'\"\n [placeholder]=\"'mngFilter.value' | translate\"\n [showIcon]=\"true\"\n [showTime]=\"selectedFilterMetadata()?.dateConfig?.showTime ?? false\"\n [showSeconds]=\"selectedFilterMetadata()?.dateConfig?.showSeconds ?? false\"\n [dateFormat]=\"selectedFilterMetadata()?.dateConfig?.format\"\n [firstDayOfWeek]=\"1\"\n [disabled]=\"!matchModeModel()\"\n required=\"true\">\n </p-date-picker>\n }\n }\n @case (FilterTypeEnum.Lookup) {\n <ng-container *ngTemplateOutlet=\"lookupFilter\"></ng-container>\n }\n @case (FilterTypeEnum.LookupEnum) {\n <ng-container *ngTemplateOutlet=\"lookupFilter\"></ng-container>\n }\n @default {\n @if (selectedFilterMetadata()?.descriptor?.genericValueProvider && genericValueDataProvider()) {\n <div class=\"flex\">\n <mng-dropdown\n [(ngModel)]=\"valueModel\"\n name=\"value\"\n [dataProvider]=\"genericValueDataProvider()\"\n [className]=\"selectedFilterMetadata()?.descriptor?.className + ' ' + (enableCaseSensitive() ? 'rounded-r-none!' : '')\"\n [dropdownClassName]=\"selectedFilterMetadata()?.descriptor?.dropdownClassName\"\n [placeholder]=\"valueModel() ? undefined : ('mngFilter.value' | translate)\"\n allowInput=\"true\"\n [disabled]=\"!matchModeModel()\"\n [appendTo]=\"null\"\n required=\"true\" />\n @if (enableCaseSensitive()) {\n <p-toggle-button\n [(ngModel)]=\"caseSensitiveModel\"\n [disabled]=\"!matchModeModel()\"\n name=\"caseSensitive\"\n styleClass=\"mng-button-xs mng-toggle-button-addon-right\"\n onLabel=\"Aa\"\n offLabel=\"Aa\" />\n }\n </div>\n } @else {\n <div class=\"flex\">\n <input\n [(ngModel)]=\"valueModel\"\n name=\"value\"\n type=\"text\"\n pInputText\n class=\"mng-filter-string w-full\"\n [class.rounded-r-none!]=\"enableCaseSensitive()\"\n [attr.placeholder]=\"'mngFilter.value' | translate\"\n [mngInputTrim]=\"selectedFilterMetadata()?.descriptor?.trimOption\"\n [disabled]=\"!matchModeModel()\"\n [placeholder]=\"'mngFilter.value' | translate\"\n required=\"true\" />\n @if (enableCaseSensitive()) {\n <p-toggle-button\n [(ngModel)]=\"caseSensitiveModel\"\n [disabled]=\"!matchModeModel()\"\n name=\"caseSensitive\"\n styleClass=\"mng-button-xs mng-toggle-button-addon-right\"\n onLabel=\"Aa\"\n offLabel=\"Aa\" />\n }\n </div>\n }\n }\n }\n <ng-template #lookupFilter>\n @if (selectedDescriptorAsLookup(); as lookupFilterDescriptor) {\n @switch (lookupFilterDescriptor.lookupType) {\n @case (lookupTypeAutocomplete) {\n <mng-autocomplete\n [(ngModel)]=\"valueModel\"\n name=\"value\"\n [dataProvider]=\"lookupFilterDescriptor.dataProvider\"\n [optionsTrackProperty]=\"lookupFilterDescriptor.optionsValueProperty\"\n [optionsValueProperty]=\"lookupFilterDescriptor.optionsValueProperty\"\n [optionsLabelProperty]=\"lookupFilterDescriptor.optionsLabelProperty\"\n [optionsLabelTranslate]=\"lookupFilterDescriptor.optionsLabelTranslate\"\n [multiselect]=\"isMultiselect()\"\n [autoClear]=\"lookupFilterDescriptor.autocompleteAutoClear ?? false\"\n [openOnFocus]=\"lookupFilterDescriptor.autocompleteAutoClear ?? true\"\n [inlineSearch]=\"lookupFilterDescriptor.autocompleteInlineSearch ?? false\"\n [placeholder]=\"'mngFilter.value' | translate\"\n [className]=\"lookupFilterDescriptor.className\"\n [dropdownClassName]=\"lookupFilterDescriptor.dropdownClassName\"\n [searchTrim]=\"selectedFilterMetadata()?.descriptor?.trimOption\"\n [disabled]=\"!matchModeModel()\"\n required=\"true\">\n </mng-autocomplete>\n }\n @case (lookupTypeDropdown) {\n <mng-dropdown\n [(ngModel)]=\"valueModel\"\n name=\"value\"\n [dataProvider]=\"lookupFilterDescriptor.dataProvider\"\n [optionsValueProperty]=\"lookupFilterDescriptor.optionsValueProperty\"\n [optionsLabelProperty]=\"lookupFilterDescriptor.optionsLabelProperty\"\n [optionsLabelTranslate]=\"lookupFilterDescriptor.optionsLabelTranslate\"\n [multiselect]=\"isMultiselect()\"\n [placeholder]=\"'mngFilter.value' | translate\"\n [className]=\"lookupFilterDescriptor.className + ' w-full'\"\n [dropdownClassName]=\"lookupFilterDescriptor.dropdownClassName\"\n showClear=\"false\"\n [disabled]=\"!matchModeModel()\"\n [appendTo]=\"null\"\n required=\"true\">\n </mng-dropdown>\n }\n }\n } @else if (selectedFilterMetadata()?.descriptor?.isGenericFilter && genericValueDataProvider()) {\n <mng-dropdown\n [(ngModel)]=\"valueModel\"\n name=\"value\"\n [dataProvider]=\"genericValueDataProvider()\"\n [placeholder]=\"'mngFilter.value' | translate\"\n showClear=\"false\"\n [disabled]=\"!matchModeModel()\"\n [appendTo]=\"null\"\n required=\"true\">\n </mng-dropdown>\n }\n </ng-template>\n </div>\n }\n <div class=\"flex justify-end\">\n <button pButton type=\"submit\" class=\"self-end\">\n {{ (filter() ? 'general.apply' : 'general.add') | translate }}\n </button>\n </div>\n </form>\n @if (formSubmitted() && filterForm.invalid) {\n @for (message of formErrorMessage(); track message) {\n <p-message [severity]=\"message.severity\" [text]=\"message.detail\" [icon]=\"message.icon\" styleClass=\"mt-2\" />\n }\n }\n</div>\n", styles: [".mng-toggle-button-addon-right{border-color:var(--p-select-border-color)!important;border-left:none!important;border-top-left-radius:0!important;border-bottom-left-radius:0!important;min-width:35px}.mng-toggle-button-addon-right .p-togglebutton-content{padding-left:.25rem;padding-right:.25rem}\n"], dependencies: [{ kind: "component", type: DropdownComponent, selector: "mng-dropdown", inputs: ["dataProvider", "options", "optionsTrackProperty", "optionsLabelProperty", "optionsLabelTranslate", "optionsValueProperty", "optionsDisabledProperty", "multiselect", "placeholder", "showClear", "selectFirstItem", "className", "dropdownClassName", "changeValueOnBlur", "loading", "disabled", "allowInput", "appendTo", "templates", "inlineSearch", "searchTrim"], outputs: ["valueChange", "blur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: InputTrimDirective, selector: "[mngInputTrim]", inputs: ["mngInputTrim"] }, { kind: "component", type: NumberRangeComponent, selector: "mng-number-range", inputs: ["placeholder", "useGrouping", "minFractionDigits", "maxFractionDigits", "required", "disabled", "vertical", "templates", "className"], outputs: ["keyDown"] }, { kind: "component", type: InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "autocomplete", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "component", type: DateRangeComponent, selector: "mng-date-range", inputs: ["placeholder", "showTime", "showSeconds", "dateFormat", "className", "required", "disabled", "vertical", "templates"] }, { kind: "component", type: AutocompleteComponent, selector: "mng-autocomplete", inputs: ["dataProvider", "optionsTrackProperty", "optionsValueProperty", "optionsLabelProperty", "optionsLabelTranslate", "inlineSearch", "openOnFocus", "multiselect", "placeholder", "className", "dropdownClassName", "showClear", "autoClear", "selectFirst", "searchTrim", "disabled", "templates"], outputs: ["valueChange", "blur"] }, { kind: "component", type: Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "component", type: Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ToggleButton, selector: "p-toggleButton, p-togglebutton, p-toggle-button", inputs: ["onLabel", "offLabel", "onIcon", "offIcon", "ariaLabel", "ariaLabelledBy", "styleClass", "inputId", "tabindex", "iconPos", "autofocus", "size", "allowEmpty", "fluid"], outputs: ["onChange"] }, { kind: "component", type: DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "directive", type: ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
1522
- }
1523
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: TableFilterFormComponent, decorators: [{
1524
- type: Component,
1525
- args: [{ selector: 'mng-table-filter-form', imports: [
1526
- DropdownComponent,
1527
- FormsModule,
1528
- TranslatePipe,
1529
- InputTrimDirective,
1530
- NumberRangeComponent,
1531
- InputNumber,
1532
- DateRangeComponent,
1533
- AutocompleteComponent,
1534
- Checkbox,
1535
- Message,
1536
- InputText,
1537
- NgTemplateOutlet,
1538
- ToggleButton,
1539
- DatePicker,
1540
- ButtonDirective
1541
- ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
1542
- class: 'flex grow'
1543
- }, encapsulation: ViewEncapsulation.None, template: "<div>\n <div>\n <h5>{{ filter() ? ('mngFilter.titleEdit' | translate) : ('mngFilter.titleAdd' | translate) }}</h5>\n </div>\n <form #filterForm=\"ngForm\" (ngSubmit)=\"onFormSubmit(filterForm)\" class=\"flex flex-col items-center lg:flex-row gap-4\">\n <div class=\"w-full lg:w-auto\">\n <mng-dropdown\n name=\"property\"\n id=\"property\"\n tabindex=\"1\"\n #propertyControl=\"ngModel\"\n [(ngModel)]=\"propertyModel\"\n [options]=\"propertyOptionsWithTranslations()\"\n optionsValueProperty=\"property\"\n optionsDisabledProperty=\"disabled\"\n optionsLabelProperty=\"label\"\n [placeholder]=\"'mngFilter.property' | translate\"\n [optionsLabelTranslate]=\"!propertySearch()\"\n [inlineSearch]=\"propertySearch()\"\n required=\"true\"\n className=\"w-full\"\n [disabled]=\"isEdit()\"\n [appendTo]=\"null\" />\n </div>\n <div class=\"w-full lg:w-auto\">\n <mng-dropdown\n name=\"matchMode\"\n id=\"matchMode\"\n [(ngModel)]=\"matchModeModel\"\n className=\"w-full\"\n [options]=\"selectedFilterMetadata()?.matchModes ?? []\"\n [placeholder]=\"'mngFilter.matchMode' | translate\"\n [disabled]=\"!propertyControl.value\"\n class=\"self-end\"\n required=\"true\"\n [appendTo]=\"null\" />\n </div>\n @if (!(matchModeModel() === FilterMatchMode.Exists || matchModeModel() === FilterMatchMode.DoesNotExist)) {\n <div class=\"w-full lg:w-auto flex flex-col\">\n @switch (selectedFilterMetadata()?.descriptor?.filterType) {\n @case (FilterTypeEnum.Number) {\n @if (matchModeModel() === FilterMatchMode.Between) {\n <mng-number-range\n className=\"mng-filter-number\"\n name=\"value\"\n [(ngModel)]=\"valueModel\"\n [placeholder]=\"'mngFilter.value' | translate\"\n [useGrouping]=\"selectedFilterMetadata()?.descriptor?.numberUseGrouping ?? false\"\n [minFractionDigits]=\"selectedFilterMetadata()?.numberConfig?.fractionsMin\"\n [maxFractionDigits]=\"selectedFilterMetadata()?.numberConfig?.fractionsMax\"\n required=\"true\" />\n } @else {\n <p-inputNumber\n inputStyleClass=\"mng-filter-number\"\n name=\"value\"\n [(ngModel)]=\"valueModel\"\n [styleClass]=\"'w-full'\"\n [placeholder]=\"'mngFilter.value' | translate\"\n [useGrouping]=\"selectedFilterMetadata()?.descriptor?.numberUseGrouping\"\n [minFractionDigits]=\"selectedFilterMetadata()?.numberConfig?.fractionsMin\"\n [maxFractionDigits]=\"selectedFilterMetadata()?.numberConfig?.fractionsMax\"\n [disabled]=\"!matchModeModel()\"\n required=\"true\" />\n }\n }\n\n @case (FilterTypeEnum.Boolean) {\n <p-checkbox [(ngModel)]=\"valueModel\" [disabled]=\"!matchModeModel()\" name=\"value\" binary=\"true\" required=\"true\" />\n }\n @case (FilterTypeEnum.Date) {\n @if (matchModeModel() === FilterMatchMode.Between) {\n <mng-date-range\n [(ngModel)]=\"valueModel\"\n name=\"value\"\n [showTime]=\"selectedFilterMetadata()?.dateConfig?.showTime ?? false\"\n [showSeconds]=\"selectedFilterMetadata()?.dateConfig?.showSeconds ?? false\"\n [dateFormat]=\"selectedFilterMetadata()?.dateConfig?.format\"\n [placeholder]=\"'mngFilter.value' | translate\"\n required=\"true\"></mng-date-range>\n } @else {\n <p-date-picker\n appendTo=\"body\"\n name=\"value\"\n [(ngModel)]=\"valueModel\"\n [styleClass]=\"'w-full'\"\n [placeholder]=\"'mngFilter.value' | translate\"\n [showIcon]=\"true\"\n [showTime]=\"selectedFilterMetadata()?.dateConfig?.showTime ?? false\"\n [showSeconds]=\"selectedFilterMetadata()?.dateConfig?.showSeconds ?? false\"\n [dateFormat]=\"selectedFilterMetadata()?.dateConfig?.format\"\n [firstDayOfWeek]=\"1\"\n [disabled]=\"!matchModeModel()\"\n required=\"true\">\n </p-date-picker>\n }\n }\n @case (FilterTypeEnum.Lookup) {\n <ng-container *ngTemplateOutlet=\"lookupFilter\"></ng-container>\n }\n @case (FilterTypeEnum.LookupEnum) {\n <ng-container *ngTemplateOutlet=\"lookupFilter\"></ng-container>\n }\n @default {\n @if (selectedFilterMetadata()?.descriptor?.genericValueProvider && genericValueDataProvider()) {\n <div class=\"flex\">\n <mng-dropdown\n [(ngModel)]=\"valueModel\"\n name=\"value\"\n [dataProvider]=\"genericValueDataProvider()\"\n [className]=\"selectedFilterMetadata()?.descriptor?.className + ' ' + (enableCaseSensitive() ? 'rounded-r-none!' : '')\"\n [dropdownClassName]=\"selectedFilterMetadata()?.descriptor?.dropdownClassName\"\n [placeholder]=\"valueModel() ? undefined : ('mngFilter.value' | translate)\"\n allowInput=\"true\"\n [disabled]=\"!matchModeModel()\"\n [appendTo]=\"null\"\n required=\"true\" />\n @if (enableCaseSensitive()) {\n <p-toggle-button\n [(ngModel)]=\"caseSensitiveModel\"\n [disabled]=\"!matchModeModel()\"\n name=\"caseSensitive\"\n styleClass=\"mng-button-xs mng-toggle-button-addon-right\"\n onLabel=\"Aa\"\n offLabel=\"Aa\" />\n }\n </div>\n } @else {\n <div class=\"flex\">\n <input\n [(ngModel)]=\"valueModel\"\n name=\"value\"\n type=\"text\"\n pInputText\n class=\"mng-filter-string w-full\"\n [class.rounded-r-none!]=\"enableCaseSensitive()\"\n [attr.placeholder]=\"'mngFilter.value' | translate\"\n [mngInputTrim]=\"selectedFilterMetadata()?.descriptor?.trimOption\"\n [disabled]=\"!matchModeModel()\"\n [placeholder]=\"'mngFilter.value' | translate\"\n required=\"true\" />\n @if (enableCaseSensitive()) {\n <p-toggle-button\n [(ngModel)]=\"caseSensitiveModel\"\n [disabled]=\"!matchModeModel()\"\n name=\"caseSensitive\"\n styleClass=\"mng-button-xs mng-toggle-button-addon-right\"\n onLabel=\"Aa\"\n offLabel=\"Aa\" />\n }\n </div>\n }\n }\n }\n <ng-template #lookupFilter>\n @if (selectedDescriptorAsLookup(); as lookupFilterDescriptor) {\n @switch (lookupFilterDescriptor.lookupType) {\n @case (lookupTypeAutocomplete) {\n <mng-autocomplete\n [(ngModel)]=\"valueModel\"\n name=\"value\"\n [dataProvider]=\"lookupFilterDescriptor.dataProvider\"\n [optionsTrackProperty]=\"lookupFilterDescriptor.optionsValueProperty\"\n [optionsValueProperty]=\"lookupFilterDescriptor.optionsValueProperty\"\n [optionsLabelProperty]=\"lookupFilterDescriptor.optionsLabelProperty\"\n [optionsLabelTranslate]=\"lookupFilterDescriptor.optionsLabelTranslate\"\n [multiselect]=\"isMultiselect()\"\n [autoClear]=\"lookupFilterDescriptor.autocompleteAutoClear ?? false\"\n [openOnFocus]=\"lookupFilterDescriptor.autocompleteAutoClear ?? true\"\n [inlineSearch]=\"lookupFilterDescriptor.autocompleteInlineSearch ?? false\"\n [placeholder]=\"'mngFilter.value' | translate\"\n [className]=\"lookupFilterDescriptor.className\"\n [dropdownClassName]=\"lookupFilterDescriptor.dropdownClassName\"\n [searchTrim]=\"selectedFilterMetadata()?.descriptor?.trimOption\"\n [disabled]=\"!matchModeModel()\"\n required=\"true\">\n </mng-autocomplete>\n }\n @case (lookupTypeDropdown) {\n <mng-dropdown\n [(ngModel)]=\"valueModel\"\n name=\"value\"\n [dataProvider]=\"lookupFilterDescriptor.dataProvider\"\n [optionsValueProperty]=\"lookupFilterDescriptor.optionsValueProperty\"\n [optionsLabelProperty]=\"lookupFilterDescriptor.optionsLabelProperty\"\n [optionsLabelTranslate]=\"lookupFilterDescriptor.optionsLabelTranslate\"\n [multiselect]=\"isMultiselect()\"\n [placeholder]=\"'mngFilter.value' | translate\"\n [className]=\"lookupFilterDescriptor.className + ' w-full'\"\n [dropdownClassName]=\"lookupFilterDescriptor.dropdownClassName\"\n showClear=\"false\"\n [disabled]=\"!matchModeModel()\"\n [appendTo]=\"null\"\n required=\"true\">\n </mng-dropdown>\n }\n }\n } @else if (selectedFilterMetadata()?.descriptor?.isGenericFilter && genericValueDataProvider()) {\n <mng-dropdown\n [(ngModel)]=\"valueModel\"\n name=\"value\"\n [dataProvider]=\"genericValueDataProvider()\"\n [placeholder]=\"'mngFilter.value' | translate\"\n showClear=\"false\"\n [disabled]=\"!matchModeModel()\"\n [appendTo]=\"null\"\n required=\"true\">\n </mng-dropdown>\n }\n </ng-template>\n </div>\n }\n <div class=\"flex justify-end\">\n <button pButton type=\"submit\" class=\"self-end\">\n {{ (filter() ? 'general.apply' : 'general.add') | translate }}\n </button>\n </div>\n </form>\n @if (formSubmitted() && filterForm.invalid) {\n @for (message of formErrorMessage(); track message) {\n <p-message [severity]=\"message.severity\" [text]=\"message.detail\" [icon]=\"message.icon\" styleClass=\"mt-2\" />\n }\n }\n</div>\n", styles: [".mng-toggle-button-addon-right{border-color:var(--p-select-border-color)!important;border-left:none!important;border-top-left-radius:0!important;border-bottom-left-radius:0!important;min-width:35px}.mng-toggle-button-addon-right .p-togglebutton-content{padding-left:.25rem;padding-right:.25rem}\n"] }]
1544
- }], ctorParameters: () => [] });
1545
-
1546
- class TableHeaderWithFiltersTemplateDirective extends TemplateDirective {
1547
- constructor() {
1548
- super(...arguments);
1549
- this.name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
1550
- }
1551
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: TableHeaderWithFiltersTemplateDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
1552
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.7", type: TableHeaderWithFiltersTemplateDirective, isStandalone: true, selector: "[mngTableHeaderWithFiltersTemplate]", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
1553
- }
1554
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: TableHeaderWithFiltersTemplateDirective, decorators: [{
1555
- type: Directive,
1556
- args: [{
1557
- selector: '[mngTableHeaderWithFiltersTemplate]'
1558
- }]
1559
- }] });
1560
-
1561
- class TableHeaderWithFiltersComponent {
1562
- static { this.SEARCH_WORD_LIMIT_MAX = 4; }
1563
- constructor() {
1564
- this.tableData = inject((TableDataService));
1565
- this.tableConfig = inject(COMMONS_TABLE_FEATURE_CONFIG_IT, { optional: true });
1566
- this.defaultFilterDisplayType = this.tableConfig?.filterDisplayType ?? FilterDisplayTypeEnum.Column;
1567
- this.metadata = input.required(...(ngDevMode ? [{ debugName: "metadata" }] : []));
1568
- this.genericFilterDescriptor = input(...(ngDevMode ? [undefined, { debugName: "genericFilterDescriptor" }] : []));
1569
- this.model = input.required(...(ngDevMode ? [{ debugName: "model" }] : []));
1570
- this.enableSearch = input(false, ...(ngDevMode ? [{ debugName: "enableSearch", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
1571
- this.search = input(...(ngDevMode ? [undefined, { debugName: "search" }] : []));
1572
- this.searchLimitWordMax = input(undefined, ...(ngDevMode ? [{ debugName: "searchLimitWordMax" }] : []));
1573
- this.enableCaseSensitive = input(true, ...(ngDevMode ? [{ debugName: "enableCaseSensitive", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
1574
- this.filterOverlay = viewChild.required(Popover);
1575
- this.filterFormComponent = viewChild(TableFilterFormComponent, ...(ngDevMode ? [{ debugName: "filterFormComponent" }] : []));
1576
- this.templates = contentChildren(TableHeaderWithFiltersTemplateDirective, ...(ngDevMode ? [{ debugName: "templates" }] : []));
1577
- this.titleTemplate = computed(() => findTemplateByName([...this.templates()], 'title'), ...(ngDevMode ? [{ debugName: "titleTemplate" }] : []));
1578
- this.titleRowRightTemplate = computed(() => findTemplateByName([...this.templates()], 'titleRowRight'), ...(ngDevMode ? [{ debugName: "titleRowRightTemplate" }] : []));
1579
- this.overlayFormMetadata = computed(() => this.metadata().filter(f => (f.descriptor.displayType == null && FilterDisplayTypeEnum.OverlayWithTag === this.defaultFilterDisplayType) ||
1580
- f.descriptor.displayType === FilterDisplayTypeEnum.OverlayWithTag), ...(ngDevMode ? [{ debugName: "overlayFormMetadata" }] : []));
1581
- this.directInputMetadata = computed(() => this.metadata().filter(f => (f.descriptor.displayType == null && FilterDisplayTypeEnum.DirectInput === this.defaultFilterDisplayType) ||
1582
- f.descriptor.displayType === FilterDisplayTypeEnum.DirectInput), ...(ngDevMode ? [{ debugName: "directInputMetadata" }] : []));
1583
- this.overlayFormFilters = computed(() => {
1584
- return this.getInitialFilters(this.tableData.filterStates(), this.overlayFormMetadata());
1585
- }, ...(ngDevMode ? [{ debugName: "overlayFormFilters" }] : []));
1586
- this.showOverlayFilterFormButton = computed(() => this.overlayFormMetadata().length > 0, ...(ngDevMode ? [{ debugName: "showOverlayFilterFormButton" }] : []));
1587
- this.activeFilters = computed(() => {
1588
- const filterEntry = this.overlayFormFilters();
1589
- return this.overlayFormMetadata()
1590
- .filter(d => {
1591
- const filter = filterEntry[d.descriptor.property];
1592
- return (filter &&
1593
- filter.matchMode !== undefined &&
1594
- filter.displayMatchMode !== undefined &&
1595
- (filter.matchMode === FilterMatchMode.Exists ||
1596
- filter.matchMode === FilterMatchMode.DoesNotExist ||
1597
- (filter.value !== undefined && filter.displayValue !== undefined)));
1598
- })
1599
- .map(d => filterEntry[d.descriptor.property]);
1600
- }, ...(ngDevMode ? [{ debugName: "activeFilters" }] : []));
1601
- this.activeFilterProperties = computed(() => this.activeFilters().map(f => f.config.descriptor.property), ...(ngDevMode ? [{ debugName: "activeFilterProperties" }] : []));
1602
- this.filterEdit = signal(undefined, ...(ngDevMode ? [{ debugName: "filterEdit" }] : []));
1603
- this.unsetRequiredFilters = computed(() => {
1604
- const activeFilters = this.activeFilters().map(el => el.config.descriptor.property);
1605
- return this.overlayFormMetadata()
1606
- .filter(el => el.descriptor.isRequired && !activeFilters.includes(el.descriptor.property))
1607
- .map(el => {
1608
- return {
1609
- matchMode: el.defaultMatchMode,
1610
- displayMatchMode: el.defaultMatchMode,
1611
- config: el
1612
- };
1613
- });
1614
- }, ...(ngDevMode ? [{ debugName: "unsetRequiredFilters" }] : []));
1615
- // global search model
1616
- this.searchValue = computed(() => this.search()?.value, ...(ngDevMode ? [{ debugName: "searchValue" }] : []));
1617
- this.searchCaseSensitive = computed(() => this.search()?.caseSensitive, ...(ngDevMode ? [{ debugName: "searchCaseSensitive" }] : []));
1618
- this.searchWordLimitMaxError = signal(false, ...(ngDevMode ? [{ debugName: "searchWordLimitMaxError" }] : []));
1619
- this.searchWordLimitMaxCmp = computed(() => {
1620
- const inputLimit = this.searchLimitWordMax();
1621
- if (inputLimit !== undefined) {
1622
- return inputLimit;
1623
- }
1624
- return this.tableConfig?.searchLimitMaxWords !== undefined ? this.tableConfig?.searchLimitMaxWords : TableHeaderWithFiltersComponent.SEARCH_WORD_LIMIT_MAX;
1625
- }, ...(ngDevMode ? [{ debugName: "searchWordLimitMaxCmp" }] : []));
1626
- this.searchValueSubject = new BehaviorSubject(undefined);
1627
- this.searchCaseSensitiveSubject = new BehaviorSubject(undefined);
1628
- // UI utilities
1629
- this.clickedOnFilterEvent = undefined;
1630
- this.FilterTypeEnum = FilterTypeEnum;
1631
- combineLatest([this.searchValueSubject.pipe(debounceTime(500), distinctUntilChanged()), this.searchCaseSensitiveSubject])
1632
- // NOTE: skip is used to ignore propagating the initial value of the subjects
1633
- .pipe(skip(1), takeUntilDestroyed())
1634
- .subscribe(([value, caseSensitive]) => {
1635
- this.updatePrimeTableGlobalFilter(value == null ? (this.search()?.value ?? '') : value, caseSensitive == null ? (this.search()?.caseSensitive ?? undefined) : caseSensitive);
1636
- });
1637
- }
1638
- onFilterFormApply(event) {
1639
- const filterMetadata = this.metadata().find(d => d.descriptor.property === event.property);
1640
- if (!filterMetadata) {
1641
- return;
1642
- }
1643
- const filterData = {
1644
- ...filterSetStateOnDisplayChange({ caseSensitive: event.caseSensitive }, event.matchMode, event.value, filterMetadata.descriptor.filterType, filterMetadata.dateConfig),
1645
- config: filterMetadata
1646
- };
1647
- this.updatePrimeTableFilter(filterData);
1648
- // this keeps the UI updated properly before closing the overlay
1649
- this.filterEdit.set(filterData);
1650
- // Resetting the form is done in the onOverlayHide callback because resetting the
1651
- // values here renders empty inputs for a split second before closing the overlay
1652
- this.filterOverlay().hide();
1653
- }
1654
- onFilterRemove(event) {
1655
- this.updatePrimeTableFilter({
1656
- ...this.overlayFormFilters()[event.filter.config.descriptor.property],
1657
- matchMode: undefined,
1658
- displayMatchMode: undefined,
1659
- value: undefined,
1660
- displayValue: undefined
1661
- });
1662
- }
1663
- onFilterEdit(event) {
1664
- this.onFilterAddOrEdit(event.filter, event.event);
1665
- }
1666
- onFilterAdd(event) {
1667
- this.onFilterAddOrEdit(undefined, event);
1668
- }
1669
- onSearchChange(value) {
1670
- const searchWordLimitMax = this.searchWordLimitMaxCmp();
1671
- if (searchWordLimitMax !== null) {
1672
- const wordCount = value.split(/\s+/).filter(word => word.length > 0).length;
1673
- this.searchWordLimitMaxError.set(wordCount > searchWordLimitMax);
1674
- }
1675
- else {
1676
- this.searchWordLimitMaxError.set(false);
1677
- }
1678
- if (!this.searchWordLimitMaxError()) {
1679
- this.searchValueSubject.next(value);
1680
- }
1681
- }
1682
- onSearchCaseSensitiveChange(value) {
1683
- this.searchCaseSensitiveSubject.next(value);
1684
- }
1685
- onOverlayHide() {
1686
- // resetting the form is done here for a smoother animation
1687
- if (this.filterFormComponent !== undefined) {
1688
- this.filterFormComponent()?.resetForm();
1689
- }
1690
- if (this.clickedOnFilterEvent) {
1691
- // show the overlay again if the user clicked another filter
1692
- setTimeout(() => {
1693
- this.filterEdit.set(this.clickedOnFilterEvent?.filter);
1694
- this.filterOverlay().show(this.clickedOnFilterEvent?.event);
1695
- this.clickedOnFilterEvent = undefined;
1696
- }, 0);
1697
- return;
1698
- }
1699
- else {
1700
- // clean state
1701
- this.filterEdit.set(undefined);
1702
- }
1703
- }
1704
- onFilterAddOrEdit(filter, event) {
1705
- // If user clicks on the same filter or add that is already open, close the overlay
1706
- if (this.filterOverlay().overlayVisible && this.filterEdit()?.config.descriptor.property === filter?.config.descriptor.property) {
1707
- this.filterOverlay().hide();
1708
- return;
1709
- }
1710
- if (this.filterOverlay().overlayVisible) {
1711
- // In case the user clicks another filter, 're-showing' the overlay in
1712
- // the new position is done in the onOverlayHide callback
1713
- this.clickedOnFilterEvent = { event, filter };
1714
- this.filterOverlay().hide();
1715
- }
1716
- else {
1717
- this.filterEdit.set(filter);
1718
- this.filterOverlay().show(event);
1719
- }
1720
- }
1721
- getInitialFilters(filtersInit, metadata) {
1722
- const filtersResult = {};
1723
- if (filtersInit) {
1724
- for (const property in filtersInit) {
1725
- const filterInit = filtersInit[property];
1726
- const filterMetadata = metadata.find(m => m.descriptor.property === property);
1727
- if (!filterMetadata) {
1728
- continue;
1729
- }
1730
- filtersResult[property] = {
1731
- ...filterSetStateOnChange(filterInit, filterInit.matchMode, filterInit.value, filterMetadata.descriptor.filterType, filterMetadata.dateConfig),
1732
- config: filterMetadata
1733
- };
1734
- }
1735
- }
1736
- return filtersResult;
1737
- }
1738
- updatePrimeTableFilter(filter) {
1739
- this.tableData.updatePrimeFilter(filter.config.descriptor.property, filter);
1740
- }
1741
- updatePrimeTableGlobalFilter(searchQuery, caseSensitive = false) {
1742
- // match mode needs to be set for inline search
1743
- this.tableData.updatePrimeFilter('global', { value: searchQuery, matchMode: 'contains', caseSensitive: caseSensitive });
1744
- }
1745
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: TableHeaderWithFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1746
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: TableHeaderWithFiltersComponent, isStandalone: true, selector: "mng-table-header-with-filters", inputs: { metadata: { classPropertyName: "metadata", publicName: "metadata", isSignal: true, isRequired: true, transformFunction: null }, genericFilterDescriptor: { classPropertyName: "genericFilterDescriptor", publicName: "genericFilterDescriptor", isSignal: true, isRequired: false, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, enableSearch: { classPropertyName: "enableSearch", publicName: "enableSearch", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, searchLimitWordMax: { classPropertyName: "searchLimitWordMax", publicName: "searchLimitWordMax", isSignal: true, isRequired: false, transformFunction: null }, enableCaseSensitive: { classPropertyName: "enableCaseSensitive", publicName: "enableCaseSensitive", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "templates", predicate: TableHeaderWithFiltersTemplateDirective, isSignal: true }], viewQueries: [{ propertyName: "filterOverlay", first: true, predicate: Popover, descendants: true, isSignal: true }, { propertyName: "filterFormComponent", first: true, predicate: TableFilterFormComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"flex items-center grow flex-wrap\">\n @if (titleTemplate()) {\n <ng-container *ngTemplateOutlet=\"titleTemplate()\"></ng-container>\n }\n @if (showOverlayFilterFormButton()) {\n <p-button\n rounded=\"true\"\n [severity]=\"activeFilters().length > 0 ? 'primary' : 'secondary'\"\n size=\"small\"\n (click)=\"onFilterAdd($event)\"\n [styleClass]=\"'my-1 mr-2' + (titleTemplate() ? ' ml-3' : '')\">\n <ng-template pTemplate=\"icon\">\n <i class=\"pi pi-filter absolute left-1.5 scale-90\"></i>\n <i class=\"pi pi-plus absolute bottom-1.5 right-0 scale-60\"></i>\n </ng-template>\n </p-button>\n }\n @if (enableSearch()) {\n <div class=\"mng-search mr-3\" [ngClass]=\"{'ml-3': !showOverlayFilterFormButton() && titleTemplate()}\">\n <span class=\"p-input-icon-left w-full\">\n <p-iconfield>\n <p-inputicon class=\"pi pi-search\" />\n <input\n [ngModel]=\"searchValue()\"\n (ngModelChange)=\"onSearchChange($event)\"\n name=\"globalSearch\"\n type=\"text\"\n pInputText\n class=\"search-input w-full\"\n [ngClass]=\"{'ng-invalid': searchWordLimitMaxError()}\"\n [attr.placeholder]=\"'mngFilter.search.input' | translate\"\n [placeholder]=\"'mngFilter.search.input' | translate\" />\n </p-iconfield>\n @if (enableCaseSensitive()) {\n <span class=\"toggle-button-input\">\n <p-toggleButton\n styleClass=\"ml-1 p-1 p-button-sm\"\n [ngModel]=\"searchCaseSensitive()\"\n (ngModelChange)=\"onSearchCaseSensitiveChange($event)\"\n onLabel=\"Aa\"\n offLabel=\"Aa\" />\n </span>\n }\n </span>\n @if (searchWordLimitMaxError()) {\n <small class=\"p-error block\">\n {{ 'mngFilter.search.maxWordsExceededMessage' | translate }}\n </small>\n }\n </div>\n }\n @if (directInputMetadata().length > 0) {\n <div class=\"flex flex-wrap items-center my-1\">\n @for (metadata of directInputMetadata(); track metadata.descriptor.property) {\n @if (metadata.descriptor.filterType !== FilterTypeEnum.Component) {\n @defer (on idle) {\n <mng-table-filter [config]=\"metadata\" [model]=\"model()\" [showFilterIcon]=\"true\" [showTitleAsPlaceholder]=\"true\" class=\"mx-1 my-1\" />\n }\n } @else if (metadata.descriptor.customComponentType) {\n <ng-container [mngComponent]=\"metadata.descriptor.customComponentType\" [inputs]=\"{descriptor: metadata.descriptor}\"></ng-container>\n }\n }\n </div>\n }\n @if (titleRowRightTemplate()) {\n <ng-container *ngTemplateOutlet=\"titleRowRightTemplate()\"></ng-container>\n }\n</div>\n@if (activeFilters().length > 0 || unsetRequiredFilters().length > 0) {\n <div class=\"flex items-center flex-wrap mt-2\">\n @for (filter of unsetRequiredFilters(); track filter.config.descriptor.property) {\n @defer (on viewport) {\n <mng-table-filter-active-tag [model]=\"model()\" [filter]=\"filter\" (edit)=\"onFilterEdit($event)\" (remove)=\"onFilterRemove($event)\" />\n } @placeholder {\n <p-skeleton width=\"10rem\" height=\"2rem\"></p-skeleton>\n }\n }\n @for (filter of activeFilters(); track filter.config.descriptor.property) {\n @defer (on viewport) {\n <mng-table-filter-active-tag [model]=\"model()\" [filter]=\"filter\" (edit)=\"onFilterEdit($event)\" (remove)=\"onFilterRemove($event)\" />\n } @placeholder {\n <p-skeleton width=\"10rem\" height=\"2rem\"></p-skeleton>\n }\n }\n </div>\n}\n<p-popover #op showCloseIcon=\"true\" (onHide)=\"onOverlayHide()\" appendTo=\"body\">\n @defer (on viewport) {\n <mng-table-filter-form\n [model]=\"model()\"\n [metadata]=\"overlayFormMetadata()\"\n [genericDescriptor]=\"genericFilterDescriptor()\"\n [filter]=\"filterEdit()\"\n [disabledProperties]=\"activeFilterProperties()\"\n [propertySearch]=\"genericFilterDescriptor()?.propertySearch\"\n [overlay]=\"op\"\n [enableCaseSensitive]=\"enableCaseSensitive()\"\n (apply)=\"onFilterFormApply($event)\" />\n } @placeholder {\n <p-skeleton width=\"20rem\" height=\"3rem\"></p-skeleton>\n }\n</p-popover>\n", styles: [".toggle-button-input{position:absolute;right:.35rem;top:50%;transform:translateY(-50%)}.mng-search{min-width:20rem}\n"], dependencies: [{ kind: "ngmodule", type: TagModule }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ToggleButton, selector: "p-toggleButton, p-togglebutton, p-toggle-button", inputs: ["onLabel", "offLabel", "onIcon", "offIcon", "ariaLabel", "ariaLabelledBy", "styleClass", "inputId", "tabindex", "iconPos", "autofocus", "size", "allowEmpty", "fluid"], outputs: ["onChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["iconPosition", "styleClass"] }, { kind: "component", type: InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["styleClass"] }, { kind: "component", type: Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: ComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "injectionToken", "inputs", "attachToHost", "parentInjector"], outputs: ["instanceCreated"] }, { kind: "component", type: Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [Promise.resolve().then(function () { return filter_component; }).then(m => m.TableFilterComponent)], () => [Promise.resolve().then(function () { return filterActiveTag_component; }).then(m => m.TableFilterActiveTagComponent)], () => [Promise.resolve().then(function () { return filterActiveTag_component; }).then(m => m.TableFilterActiveTagComponent)], () => [TableFilterFormComponent]] }); }
1747
- }
1748
- i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "20.1.7", ngImport: i0, type: TableHeaderWithFiltersComponent, resolveDeferredDeps: () => [Promise.resolve().then(function () { return filter_component; }).then(m => m.TableFilterComponent), Promise.resolve().then(function () { return filterActiveTag_component; }).then(m => m.TableFilterActiveTagComponent)], resolveMetadata: (TableFilterComponent, TableFilterActiveTagComponent) => ({ decorators: [{
1749
- type: Component,
1750
- args: [{ selector: 'mng-table-header-with-filters', imports: [
1751
- TranslatePipe,
1752
- TagModule,
1753
- TableFilterFormComponent,
1754
- Button,
1755
- TableFilterActiveTagComponent,
1756
- NgTemplateOutlet,
1757
- InputText,
1758
- NgClass,
1759
- ToggleButton,
1760
- FormsModule,
1761
- IconField,
1762
- InputIcon,
1763
- Popover,
1764
- TableFilterComponent,
1765
- ComponentDirective,
1766
- Skeleton
1767
- ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex items-center grow flex-wrap\">\n @if (titleTemplate()) {\n <ng-container *ngTemplateOutlet=\"titleTemplate()\"></ng-container>\n }\n @if (showOverlayFilterFormButton()) {\n <p-button\n rounded=\"true\"\n [severity]=\"activeFilters().length > 0 ? 'primary' : 'secondary'\"\n size=\"small\"\n (click)=\"onFilterAdd($event)\"\n [styleClass]=\"'my-1 mr-2' + (titleTemplate() ? ' ml-3' : '')\">\n <ng-template pTemplate=\"icon\">\n <i class=\"pi pi-filter absolute left-1.5 scale-90\"></i>\n <i class=\"pi pi-plus absolute bottom-1.5 right-0 scale-60\"></i>\n </ng-template>\n </p-button>\n }\n @if (enableSearch()) {\n <div class=\"mng-search mr-3\" [ngClass]=\"{'ml-3': !showOverlayFilterFormButton() && titleTemplate()}\">\n <span class=\"p-input-icon-left w-full\">\n <p-iconfield>\n <p-inputicon class=\"pi pi-search\" />\n <input\n [ngModel]=\"searchValue()\"\n (ngModelChange)=\"onSearchChange($event)\"\n name=\"globalSearch\"\n type=\"text\"\n pInputText\n class=\"search-input w-full\"\n [ngClass]=\"{'ng-invalid': searchWordLimitMaxError()}\"\n [attr.placeholder]=\"'mngFilter.search.input' | translate\"\n [placeholder]=\"'mngFilter.search.input' | translate\" />\n </p-iconfield>\n @if (enableCaseSensitive()) {\n <span class=\"toggle-button-input\">\n <p-toggleButton\n styleClass=\"ml-1 p-1 p-button-sm\"\n [ngModel]=\"searchCaseSensitive()\"\n (ngModelChange)=\"onSearchCaseSensitiveChange($event)\"\n onLabel=\"Aa\"\n offLabel=\"Aa\" />\n </span>\n }\n </span>\n @if (searchWordLimitMaxError()) {\n <small class=\"p-error block\">\n {{ 'mngFilter.search.maxWordsExceededMessage' | translate }}\n </small>\n }\n </div>\n }\n @if (directInputMetadata().length > 0) {\n <div class=\"flex flex-wrap items-center my-1\">\n @for (metadata of directInputMetadata(); track metadata.descriptor.property) {\n @if (metadata.descriptor.filterType !== FilterTypeEnum.Component) {\n @defer (on idle) {\n <mng-table-filter [config]=\"metadata\" [model]=\"model()\" [showFilterIcon]=\"true\" [showTitleAsPlaceholder]=\"true\" class=\"mx-1 my-1\" />\n }\n } @else if (metadata.descriptor.customComponentType) {\n <ng-container [mngComponent]=\"metadata.descriptor.customComponentType\" [inputs]=\"{descriptor: metadata.descriptor}\"></ng-container>\n }\n }\n </div>\n }\n @if (titleRowRightTemplate()) {\n <ng-container *ngTemplateOutlet=\"titleRowRightTemplate()\"></ng-container>\n }\n</div>\n@if (activeFilters().length > 0 || unsetRequiredFilters().length > 0) {\n <div class=\"flex items-center flex-wrap mt-2\">\n @for (filter of unsetRequiredFilters(); track filter.config.descriptor.property) {\n @defer (on viewport) {\n <mng-table-filter-active-tag [model]=\"model()\" [filter]=\"filter\" (edit)=\"onFilterEdit($event)\" (remove)=\"onFilterRemove($event)\" />\n } @placeholder {\n <p-skeleton width=\"10rem\" height=\"2rem\"></p-skeleton>\n }\n }\n @for (filter of activeFilters(); track filter.config.descriptor.property) {\n @defer (on viewport) {\n <mng-table-filter-active-tag [model]=\"model()\" [filter]=\"filter\" (edit)=\"onFilterEdit($event)\" (remove)=\"onFilterRemove($event)\" />\n } @placeholder {\n <p-skeleton width=\"10rem\" height=\"2rem\"></p-skeleton>\n }\n }\n </div>\n}\n<p-popover #op showCloseIcon=\"true\" (onHide)=\"onOverlayHide()\" appendTo=\"body\">\n @defer (on viewport) {\n <mng-table-filter-form\n [model]=\"model()\"\n [metadata]=\"overlayFormMetadata()\"\n [genericDescriptor]=\"genericFilterDescriptor()\"\n [filter]=\"filterEdit()\"\n [disabledProperties]=\"activeFilterProperties()\"\n [propertySearch]=\"genericFilterDescriptor()?.propertySearch\"\n [overlay]=\"op\"\n [enableCaseSensitive]=\"enableCaseSensitive()\"\n (apply)=\"onFilterFormApply($event)\" />\n } @placeholder {\n <p-skeleton width=\"20rem\" height=\"3rem\"></p-skeleton>\n }\n</p-popover>\n", styles: [".toggle-button-input{position:absolute;right:.35rem;top:50%;transform:translateY(-50%)}.mng-search{min-width:20rem}\n"] }]
1768
- }], ctorParameters: () => [], propDecorators: null }) });
1769
-
1770
- /**
1771
- * Generates and displays a notification for a table-related error with localized error messages and details.
1772
- *
1773
- * @param {TranslateService} translate - The service used to handle localization and translations.
1774
- * @param {MessageService} messageService - The service used to manage and display messages.
1775
- * @param {TableDescriptorInst<any>} table - The table descriptor containing table-specific information and model data.
1776
- * @param {Error} error - The error object providing details about the error that occurred.
1777
- * @return {Message | null} The generated message object for the error notification or null if no notification was created.
1778
- */
1779
- function tableNotificationError(translate, messageService, table, error) {
1780
- const params = {
1781
- errorMessage: getI18nForError(translate, error) ?? error.message,
1782
- ...getI18nErrorParams(error)
1783
- };
1784
- const tableErrorTitle = getI18nForModel(translate, table.model, 'table.error.title', { fallbackKey: 'general.error', params }) ?? undefined;
1785
- const tableErrorMessage = getI18nForModel(translate, table.model, 'table.error.message', { fallbackKey: 'general.errorMessage', params }) ?? undefined;
1786
- return toastMessage(tableErrorMessage ?? error.message, 'error', { messageService: messageService, title: tableErrorTitle, icon: 'pi-exclamation-triangle' });
1787
- }
1788
-
1789
- class LocaleDefaultRowClassPipe {
1790
- constructor() {
1791
- this.injector = inject(Injector);
1792
- }
1793
- transform(value, descriptor, item) {
1794
- if (descriptor?.isLocalized) {
1795
- if (item[descriptor.localizationLocaleProperty] === this.injector.get(CommonsService).getDefaultLocale()) {
1796
- return value + ' mng-table-row-localization-default-locale';
1797
- }
1798
- }
1799
- return value ?? '';
1800
- }
1801
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: LocaleDefaultRowClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
1802
- static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.1.7", ngImport: i0, type: LocaleDefaultRowClassPipe, isStandalone: true, name: "mngLocaleDefaultRowClass" }); }
1803
- }
1804
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: LocaleDefaultRowClassPipe, decorators: [{
1805
- type: Pipe,
1806
- args: [{
1807
- name: 'mngLocaleDefaultRowClass',
1808
- pure: true
1809
- }]
1810
- }] });
1811
-
1812
- class TableFilterClassPipe {
1813
- transform(value, filter, isEnabled) {
1814
- const strValue = typeof value === 'string' ? value : '';
1815
- if (isEnabled && filter?.filterType !== undefined) {
1816
- return `${strValue} mng-filter-${FilterTypeEnum[filter.filterType].toLowerCase()}`;
1817
- }
1818
- else {
1819
- return strValue;
1820
- }
1821
- }
1822
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: TableFilterClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
1823
- static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.1.7", ngImport: i0, type: TableFilterClassPipe, isStandalone: true, name: "mngTableFilterClass" }); }
1824
- }
1825
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: TableFilterClassPipe, decorators: [{
1826
- type: Pipe,
1827
- args: [{
1828
- pure: true,
1829
- name: 'mngTableFilterClass'
1830
- }]
1831
- }] });
1832
-
1833
- /**
1834
- * generates table layout preferences key used when saving preferences to localstorage
1835
- * @param typeName string, required
1836
- * @param url string, required
1837
- * @param trackProperty string, not required
1838
- */
1839
- function generateTableLayoutPrefsKey(typeName, url, trackProperty) {
1840
- return `commonsTableLayoutPrefs~~${typeName}~~${trackProperty ?? url.split('?')[0].split('#')[0]}`;
1841
- }
1842
-
1843
- class TablePreferencesService {
1844
- constructor() {
1845
- this.#router = inject(Router);
1846
- this.#storageService = inject(CommonsStorageService);
1847
- this.#metadata = inject(TableMetadataService);
1848
- this.localstorageKey = computed(() => {
1849
- const descriptor = this.#metadata.descriptor();
1850
- return descriptor.model.i18nBaseKey ? generateTableLayoutPrefsKey(descriptor.model.i18nBaseKey, this.#router.url, descriptor.identifier) : null;
1851
- }, ...(ngDevMode ? [{ debugName: "localstorageKey" }] : []));
1852
- this.#layoutPrefsSaveCnt = signal(0, ...(ngDevMode ? [{ debugName: "#layoutPrefsSaveCnt" }] : []));
1853
- this.layoutPreferences = computed(() => {
1854
- const lsKey = this.localstorageKey();
1855
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
1856
- const cnt = this.#layoutPrefsSaveCnt(); // needed to force updates on user changes
1857
- const layoutPrefs = lsKey ? this.#storageService.getItem(TableMetadataService.cmpTypeName, lsKey) : undefined;
1858
- return layoutPrefs ?? { columnWidths: {} };
1859
- }, ...(ngDevMode ? [{ debugName: "layoutPreferences" }] : []));
1860
- // columns
1861
- this.columnsWithPrefs = computed(() => this.#computeColumnsWithLayout(), ...(ngDevMode ? [{ debugName: "columnsWithPrefs" }] : []));
1862
- }
1863
- #router;
1864
- #storageService;
1865
- #metadata;
1866
- #layoutPrefsSaveCnt;
1867
- /**
1868
- * Method is called on column resize
1869
- * @param element event's element
1870
- */
1871
- onColumnResize({ element }) {
1872
- const fieldId = element.id;
1873
- const width = element.offsetWidth;
1874
- const layoutPrefs = this.layoutPreferences();
1875
- const col = this.columnsWithPrefs().find(el => el.descriptor.property === fieldId);
1876
- if (col)
1877
- col.width = width;
1878
- if (!layoutPrefs.columnWidths)
1879
- layoutPrefs.columnWidths = {};
1880
- layoutPrefs.columnWidths[fieldId] = width;
1881
- this.#saveLayoutPreferences(layoutPrefs);
1882
- }
1883
- onColumnToggle(event) {
1884
- const layoutPrefs = this.layoutPreferences();
1885
- const selectedColumns = event.value.map(v => v.descriptor.property);
1886
- layoutPrefs.columnHidden = this.columnsWithPrefs()
1887
- .filter(c => selectedColumns.indexOf(c.descriptor.property) < 0)
1888
- .map(c => c.descriptor.property);
1889
- this.#saveLayoutPreferences(layoutPrefs, true);
1890
- }
1891
- onColumnToggleAll() {
1892
- const layoutPrefs = this.layoutPreferences();
1893
- const columns = [...this.columnsWithPrefs()];
1894
- const isVisible = !this.columnsWithPrefs().some(c => c.isVisible);
1895
- for (const col of columns) {
1896
- if (isVisible !== col.isVisible) {
1897
- col.isVisible = isVisible;
1898
- }
1899
- }
1900
- layoutPrefs.columnHidden = columns.filter(c => !c.isVisible).map(c => c.descriptor.property);
1901
- this.#saveLayoutPreferences(layoutPrefs, true);
1902
- }
1903
- onColumnReorder(event) {
1904
- if (event.dropIndex !== undefined && event.dropIndex >= 0 && event.dragIndex !== undefined && event.dragIndex >= 0 && event.dropIndex !== event.dragIndex) {
1905
- const eventDropIndex = event.dropIndex;
1906
- const eventDragIndex = event.dragIndex;
1907
- const prevVisibleColumns = this.columnsWithPrefs().filter(c => c.isVisible);
1908
- const colAtDrop = prevVisibleColumns[eventDropIndex];
1909
- const colAtDrag = prevVisibleColumns[eventDragIndex];
1910
- const colAtDropIndex = this.columnsWithPrefs().findIndex(el => el.id === colAtDrop.id);
1911
- const colAtDragIndex = this.columnsWithPrefs().findIndex(el => el.id === colAtDrag.id);
1912
- if (colAtDropIndex > -1 && colAtDragIndex > -1) {
1913
- let columns = [...this.columnsWithPrefs()];
1914
- columns.splice(colAtDragIndex, 1);
1915
- const dropIndex = columns.findIndex(el => el.id === colAtDrop.id) + (eventDropIndex > eventDragIndex ? 1 : 0);
1916
- columns = [...columns.slice(0, dropIndex), colAtDrag, ...columns.slice(dropIndex)];
1917
- const layoutPrefs = this.layoutPreferences();
1918
- layoutPrefs.columnOrder = columns.map(el => el.descriptor.property);
1919
- this.#saveLayoutPreferences(layoutPrefs);
1920
- }
1921
- }
1922
- }
1923
- /**
1924
- * Reset column order and column visibility to default settings
1925
- */
1926
- clearLayoutPreferences() {
1927
- const key = this.localstorageKey();
1928
- if (key) {
1929
- this.#storageService.removeItem(TableMetadataService.cmpTypeName, key);
1930
- this.#layoutPrefsSaveCnt.update(v => v + 1);
1931
- }
1932
- }
1933
- #saveLayoutPreferences(layoutPrefs, forceUpdate = false) {
1934
- const key = this.localstorageKey();
1935
- if (key) {
1936
- this.#storageService.setItem(TableMetadataService.cmpTypeName, key, layoutPrefs);
1937
- if (forceUpdate) {
1938
- this.#layoutPrefsSaveCnt.update(v => v + 1);
1939
- }
1940
- }
1941
- }
1942
- #computeColumnsWithLayout() {
1943
- const descriptor = this.#metadata.descriptor();
1944
- const layoutPrefs = this.layoutPreferences();
1945
- // initialize columns with additional properties
1946
- const timestamp = new Date().getTime();
1947
- const columns = descriptor.columns.map(col => ({
1948
- id: `${col.property}-${timestamp}`,
1949
- descriptor: col,
1950
- filter: this.#metadata
1951
- .filters()
1952
- .find(f => f.descriptor.showOnColumn === col.property &&
1953
- ((f.descriptor.displayType == null && this.#metadata.defaultFilterDisplayType === FilterDisplayTypeEnum.Column) ||
1954
- f.descriptor.displayType === FilterDisplayTypeEnum.Column)),
1955
- sort: descriptor.sorts.find(f => f.showOnColumn === col.property),
1956
- disabled: !col.isToggleable,
1957
- isVisible: layoutPrefs.columnHidden ? !layoutPrefs.columnHidden.includes(col.property) : col.isVisible,
1958
- width: layoutPrefs.columnWidths?.[col.property]
1959
- }));
1960
- if (layoutPrefs.columnOrder) {
1961
- for (let i = 0; i < layoutPrefs.columnOrder.length; i++) {
1962
- const colName = layoutPrefs.columnOrder[i];
1963
- const colWithPrefs = columns.find(el => el.descriptor.property === colName);
1964
- if (colWithPrefs) {
1965
- colWithPrefs.orderIdx = i;
1966
- }
1967
- }
1968
- }
1969
- return columns.sort((a, b) => (a.orderIdx !== undefined && b.orderIdx !== undefined ? a.orderIdx - b.orderIdx : 0));
1970
- }
1971
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: TablePreferencesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
1972
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: TablePreferencesService }); }
1973
- }
1974
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: TablePreferencesService, decorators: [{
1975
- type: Injectable
1976
- }] });
1977
-
1978
- class TableRemovableSortDirective {
1979
- #pTable = inject(Table);
1980
- constructor() {
1981
- this.#overrideSortMethod(this.#pTable);
1982
- }
1983
- #overrideSortMethod(pTable) {
1984
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
1985
- pTable.sort = (event) => {
1986
- const originalEvent = event.originalEvent;
1987
- const metaKey = originalEvent.metaKey || originalEvent.ctrlKey;
1988
- const sortMeta = pTable.getSortMeta(event.field);
1989
- if (sortMeta) {
1990
- if (!metaKey) {
1991
- this.#updateSingleSortMeta(pTable, sortMeta, event.field);
1992
- }
1993
- else {
1994
- this.#updateMultiSortMeta(pTable, sortMeta);
1995
- }
1996
- }
1997
- else {
1998
- this.#addNewSortMeta(pTable, metaKey, event.field);
1999
- }
2000
- this.#applySort(pTable);
2001
- if (pTable.isStateful()) {
2002
- pTable.saveState();
2003
- }
2004
- pTable.anchorRowIndex = null;
2005
- };
2006
- }
2007
- #updateSingleSortMeta(pTable, sortMeta, field) {
2008
- if (pTable.multiSortMeta && pTable.multiSortMeta.length > 1) {
2009
- pTable.multiSortMeta = [{ field, order: pTable.defaultSortOrder }];
2010
- }
2011
- else if (sortMeta.order === -1) {
2012
- pTable.multiSortMeta = [];
2013
- }
2014
- else {
2015
- pTable.multiSortMeta = [{ field, order: sortMeta.order * -1 }];
2016
- }
2017
- }
2018
- #updateMultiSortMeta(pTable, sortMeta) {
2019
- pTable.multiSortMeta ??= [];
2020
- for (let i = 0; i < pTable.multiSortMeta.length; i++) {
2021
- if (pTable.multiSortMeta[i].field === sortMeta.field) {
2022
- pTable.multiSortMeta.splice(i, 1);
2023
- }
2024
- }
2025
- if (sortMeta.order === 1) {
2026
- sortMeta.order = sortMeta.order * -1;
2027
- pTable.multiSortMeta?.push(sortMeta);
2028
- }
2029
- }
2030
- #addNewSortMeta(pTable, metaKey, field) {
2031
- if (!metaKey || !pTable.multiSortMeta) {
2032
- pTable.multiSortMeta = [];
2033
- }
2034
- pTable.multiSortMeta?.push({ field, order: pTable.defaultSortOrder });
2035
- }
2036
- #applySort(pTable) {
2037
- if (pTable.multiSortMeta?.length === 0 && !pTable.lazy) {
2038
- pTable.multiSortMeta = this.#defaultMultiSortMeta();
2039
- }
2040
- pTable.sortMultiple();
2041
- }
2042
- #defaultMultiSortMeta() {
2043
- const multiSortMeta = this.#pTable.columns
2044
- ?.filter(column => column.sort._defaultIsEnabled)
2045
- .sort((a, b) => a.sort._defaultOrder - b.sort._defaultOrder)
2046
- .map(column => ({ field: column.sort._property, order: column.sort._defaultIsAscending ? 1 : -1 }));
2047
- if (!multiSortMeta || multiSortMeta.length === 0) {
2048
- return [{ field: this.#pTable.columns?.[0].sort._property, order: 1 }];
2049
- }
2050
- return multiSortMeta;
2051
- }
2052
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: TableRemovableSortDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
2053
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.7", type: TableRemovableSortDirective, isStandalone: true, selector: "[mngRemovableSort]", ngImport: i0 }); }
2054
- }
2055
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: TableRemovableSortDirective, decorators: [{
2056
- type: Directive,
2057
- args: [{
2058
- selector: '[mngRemovableSort]'
2059
- }]
2060
- }], ctorParameters: () => [] });
2061
-
2062
- class TableTemplateDirective extends TemplateDirective {
2063
- constructor() {
2064
- super(...arguments);
2065
- this.name = input.required(...(ngDevMode ? [{ debugName: "name" }] : []));
2066
- }
2067
- // narrow the type of the context using the generic type of the directive.
2068
- static ngTemplateContextGuard(dir, ctx) {
2069
- return true;
2070
- }
2071
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: TableTemplateDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
2072
- static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.7", type: TableTemplateDirective, isStandalone: true, selector: "[mngTableTemplate]", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
2073
- }
2074
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: TableTemplateDirective, decorators: [{
2075
- type: Directive,
2076
- args: [{
2077
- selector: '[mngTableTemplate]'
2078
- }]
2079
- }] });
2080
-
2081
- class TableComponent {
2082
- #primeTableEffect;
2083
- // templates
2084
- #templatesMerged;
2085
- // subscriptions and refs
2086
- #previousDataProvider;
2087
- #dataProviderEagerFirstLoad;
2088
- #dataProviderReloadSubscription;
2089
- #routeQueryParamsSubscription;
2090
- #routerEventsSubscription;
2091
- #afterNextRenderRef;
2092
- constructor() {
2093
- this.filterKeyPrepend = 'f_';
2094
- this.FilterTypeEnum = FilterTypeEnum;
2095
- this.logger = inject(LoggerService).create(TableMetadataService.cmpTypeName);
2096
- this.router = inject(Router);
2097
- this.route = inject(ActivatedRoute);
2098
- this.translate = inject(TranslateService);
2099
- this.messageService = inject(MessageService);
2100
- this.metadata = inject(TableMetadataService);
2101
- this.prefs = inject(TablePreferencesService);
2102
- this.data = inject((TableDataService));
2103
- // descriptor
2104
- this.descriptorInput = input.required(...(ngDevMode ? [{ debugName: "descriptorInput", alias: 'descriptor' }] : [{ alias: 'descriptor' }]));
2105
- // data source inputs
2106
- this.items = input(...(ngDevMode ? [undefined, { debugName: "items" }] : []));
2107
- this.result = input(...(ngDevMode ? [undefined, { debugName: "result" }] : []));
2108
- this.loadingInput = input(undefined, ...(ngDevMode ? [{ debugName: "loadingInput", alias: 'loading', transform: booleanOrUndefinedAttribute }] : [{ alias: 'loading', transform: booleanOrUndefinedAttribute }]));
2109
- this.dataProvider = input(...(ngDevMode ? [undefined, { debugName: "dataProvider" }] : []));
2110
- // extra features input
2111
- this.useQueryParams = input(false, ...(ngDevMode ? [{ debugName: "useQueryParams", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
2112
- this.cellClickEnabled = input(true, ...(ngDevMode ? [{ debugName: "cellClickEnabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
2113
- this.selectionMode = input('multiple', ...(ngDevMode ? [{ debugName: "selectionMode" }] : []));
2114
- this.selectionEnabled = input(false, ...(ngDevMode ? [{ debugName: "selectionEnabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
2115
- this.rowReorderEnabledInput = input(true, ...(ngDevMode ? [{ debugName: "rowReorderEnabledInput", alias: 'rowReorderEnabled', transform: booleanAttribute }] : [{ alias: 'rowReorderEnabled', transform: booleanAttribute }]));
2116
- this.rowReorderEnabled = computed(() => this.rowReorderEnabledInput() && this.metadata.descriptor().rowReorderable, ...(ngDevMode ? [{ debugName: "rowReorderEnabled" }] : []));
2117
- this.expandedRowKeys = computed(() => {
2118
- const descriptor = this.metadata.descriptor();
2119
- if (typeof descriptor.isRowExpanded === 'string') {
2120
- return this.data.data()?.reduce((acc, item) => {
2121
- acc[item[descriptor.trackProperty]] = !!item[descriptor.isRowExpanded];
2122
- return acc;
2123
- }, {});
2124
- }
2125
- else if (typeof descriptor.isRowExpanded === 'function') {
2126
- return this.data.data()?.reduce((acc, item) => {
2127
- acc[item[descriptor.trackProperty]] = descriptor.isRowExpanded(item);
2128
- return acc;
2129
- }, {});
2130
- }
2131
- return {};
2132
- }, ...(ngDevMode ? [{ debugName: "expandedRowKeys" }] : []));
2133
- // styling
2134
- this.columnLastMinWidth = input(...(ngDevMode ? [undefined, { debugName: "columnLastMinWidth" }] : []));
2135
- this.columnsColspan = computed(() => this.visibleColumns().length + (this.hasLastColumn() ? 1 : 0) + (this.selectionEnabled() ? 1 : 0) + (this.rowReorderEnabled() ? 1 : 0), ...(ngDevMode ? [{ debugName: "columnsColspan" }] : []));
2136
- this.hasTitleDisplay = computed(() => this.headerTitleTemplate() || this.metadata.descriptor().title, ...(ngDevMode ? [{ debugName: "hasTitleDisplay" }] : []));
2137
- this.isCaptionVisible = computed(() => this.headerTemplate() || this.hasTitleDisplay() || this.tableHeaderFilters().length > 0 || this.metadata.descriptor().search, ...(ngDevMode ? [{ debugName: "isCaptionVisible" }] : []));
2138
- // component inputs
2139
- this.globalFilterFieldsInput = input(undefined, ...(ngDevMode ? [{ debugName: "globalFilterFieldsInput", alias: 'globalFilterFields' }] : [{ alias: 'globalFilterFields' }]));
2140
- // cell click
2141
- this.cellClickSubject = new Subject();
2142
- this.isCellClickObserved = signal(this.cellClickSubject.observed, ...(ngDevMode ? [{ debugName: "isCellClickObserved" }] : []));
2143
- this.isCellClickEnabled = computed(() => this.cellClickEnabled() && this.isCellClickObserved(), ...(ngDevMode ? [{ debugName: "isCellClickEnabled" }] : []));
2144
- // event outputs
2145
- this.tableLoad = output();
2146
- this.cellClick = outputFromObservable(this.cellClickSubject);
2147
- this.selectionChange = output();
2148
- this.rowReorder = output();
2149
- // content and view queries
2150
- this.templates = input([], ...(ngDevMode ? [{ debugName: "templates" }] : []));
2151
- this.contentTemplates = contentChildren(TableTemplateDirective, ...(ngDevMode ? [{ debugName: "contentTemplates" }] : []));
2152
- this.primeTable = viewChild((Table), ...(ngDevMode ? [{ debugName: "primeTable" }] : []));
2153
- this.#primeTableEffect = effectWithDeps([this.primeTable], ([table]) => this.data.setPrimeTable(table));
2154
- // templates
2155
- this.#templatesMerged = computed(() => [...this.contentTemplates(), ...this.templates()], ...(ngDevMode ? [{ debugName: "#templatesMerged" }] : []));
2156
- this.headerTemplate = computed(() => findTemplateByName([...this.#templatesMerged()], 'header'), ...(ngDevMode ? [{ debugName: "headerTemplate" }] : []));
2157
- this.headerTitleTemplate = computed(() => findTemplateByName([...this.#templatesMerged()], 'headerTitle'), ...(ngDevMode ? [{ debugName: "headerTitleTemplate" }] : []));
2158
- this.titleRowRightTemplate = computed(() => findTemplateByName([...this.#templatesMerged()], 'headerTitleRowRight'), ...(ngDevMode ? [{ debugName: "titleRowRightTemplate" }] : []));
2159
- this.columnCustomLastTemplate = computed(() => findTemplateByName([...this.#templatesMerged()], 'columnCustomLast'), ...(ngDevMode ? [{ debugName: "columnCustomLastTemplate" }] : []));
2160
- this.footerTemplate = computed(() => findTemplateByName([...this.#templatesMerged()], 'footer'), ...(ngDevMode ? [{ debugName: "footerTemplate" }] : []));
2161
- this.rowExpandTemplate = computed(() => findTemplateByName([...this.#templatesMerged()], 'rowExpandContent'), ...(ngDevMode ? [{ debugName: "rowExpandTemplate" }] : []));
2162
- this.columnHeaderTemplate = computed(() => findTemplateByName([...this.#templatesMerged()], 'columnHeader'), ...(ngDevMode ? [{ debugName: "columnHeaderTemplate" }] : []));
2163
- // data provider and items
2164
- this.isLazy = computed(() => this.dataProvider()?.isLazy === true, ...(ngDevMode ? [{ debugName: "isLazy" }] : []));
2165
- this.isPagination = computed(() => this.data.paginationMode() === TablePaginationModeEnum.Pagination, ...(ngDevMode ? [{ debugName: "isPagination" }] : []));
2166
- // visual
2167
- this.className = computed(() => {
2168
- let className = this.metadata.descriptor().className ?? '';
2169
- switch (this.metadata.descriptor().size) {
2170
- case TableSizeEnum.Small:
2171
- className += ' p-datatable-sm';
2172
- break;
2173
- case undefined:
2174
- case TableSizeEnum.Large:
2175
- className += ' p-datatable-lg';
2176
- break;
2177
- }
2178
- if (this.metadata.descriptor().hasGridlines) {
2179
- className += ' p-datatable-gridlines';
2180
- }
2181
- return className;
2182
- }, ...(ngDevMode ? [{ debugName: "className" }] : []));
2183
- // columns
2184
- this.visibleColumns = computed(() => this.prefs.columnsWithPrefs().filter(col => col.isVisible), ...(ngDevMode ? [{ debugName: "visibleColumns" }] : []));
2185
- this.areColumnsReorderable = computed(() => this.prefs.columnsWithPrefs().some(col => col.descriptor.isReorderable), ...(ngDevMode ? [{ debugName: "areColumnsReorderable" }] : []));
2186
- this.areColumnsToggleable = computed(() => this.prefs.columnsWithPrefs().some(col => col.descriptor.isToggleable), ...(ngDevMode ? [{ debugName: "areColumnsToggleable" }] : []));
2187
- // filter, sort
2188
- this.hasColumnFilters = computed(() => (this.metadata.defaultFilterDisplayType === FilterDisplayTypeEnum.OverlayWithTag &&
2189
- this.metadata.filterDescriptors().some(d => d.displayType === FilterDisplayTypeEnum.Column)) ||
2190
- (this.metadata.defaultFilterDisplayType === FilterDisplayTypeEnum.Column && this.metadata.filterDescriptors().some(d => d.displayType == null)), ...(ngDevMode ? [{ debugName: "hasColumnFilters" }] : []));
2191
- this.tableHeaderFilters = computed(() => {
2192
- // statically defined filters AND generic filters
2193
- const filters = this.metadata
2194
- .filters()
2195
- .filter(d => (d.descriptor.displayType == null &&
2196
- [FilterDisplayTypeEnum.OverlayWithTag, FilterDisplayTypeEnum.DirectInput].includes(this.metadata.defaultFilterDisplayType)) ||
2197
- (d.descriptor.displayType != null && [FilterDisplayTypeEnum.OverlayWithTag, FilterDisplayTypeEnum.DirectInput].includes(d.descriptor.displayType)));
2198
- return filters.concat(this.metadata.genericFilters());
2199
- }, ...(ngDevMode ? [{ debugName: "tableHeaderFilters" }] : []));
2200
- this.requiredFiltersMissing = computed(() => {
2201
- const paramsWithDefaults = this.data.params() ?? this.metadata.defaultParams();
2202
- const requiredFilters = this.metadata
2203
- .filters()
2204
- .filter(f => f.descriptor.isRequired)
2205
- .map(f => f.descriptor.property);
2206
- return requiredFilters.some(filterProperty => {
2207
- const filter = paramsWithDefaults.filters?.[filterProperty];
2208
- return (filter === undefined ||
2209
- filter.matchMode === undefined ||
2210
- (!['exists', 'doesNotExist'].includes(filter.matchMode) && isFilterValueBlank(filter.value)));
2211
- });
2212
- }, ...(ngDevMode ? [{ debugName: "requiredFiltersMissing" }] : []));
2213
- this.hasLastColumn = computed(() => this.columnCustomLastTemplate() || this.areColumnsToggleable() || this.areColumnsReorderable(), ...(ngDevMode ? [{ debugName: "hasLastColumn" }] : []));
2214
- // other
2215
- this.navigationOutOfTableInProgress = false;
2216
- this.navigationInTableInProgress = false;
2217
- this.#dataProviderEagerFirstLoad = effectWithDeps([this.dataProvider], ([dataProvider]) => {
2218
- if (dataProvider?.isLazy === false) {
2219
- this.loadTableWithDataProvider(this.metadata.defaultParams());
2220
- }
2221
- else if (this.#previousDataProvider && dataProvider) {
2222
- this.reload();
2223
- }
2224
- this.#previousDataProvider = dataProvider;
2225
- });
2226
- this.#dataProviderReloadSubscription = toObservable(this.dataProvider)
2227
- .pipe(switchMap(dp => dp?.tableReload$ ?? of({})), takeUntilDestroyed())
2228
- .subscribe({
2229
- next: e => {
2230
- this.reload(e);
2231
- }
2232
- });
2233
- this.#routeQueryParamsSubscription = toObservable(this.useQueryParams)
2234
- .pipe(switchMap(useQp => (useQp ? this.route.queryParams : NEVER)), takeUntilDestroyed())
2235
- .subscribe(qp => {
2236
- this.loadTableFromRouteUpdate(qp);
2237
- });
2238
- this.#routerEventsSubscription = toObservable(this.useQueryParams)
2239
- .pipe(switchMap(useQp => (useQp ? this.router.events : NEVER)), filter(e => (e instanceof NavigationStart && e.url.split('?')[0].split('#')[0] !== this.router.url.split('?')[0].split('#')[0]) ||
2240
- e instanceof NavigationEnd ||
2241
- e instanceof NavigationCancel ||
2242
- e instanceof NavigationError), takeUntilDestroyed())
2243
- .subscribe(e => {
2244
- this.navigationOutOfTableInProgress = e instanceof NavigationStart;
2245
- });
2246
- this.#afterNextRenderRef = afterNextRender(() => {
2247
- this.isCellClickObserved.set(this.cellClickSubject.observed);
2248
- });
2249
- this.metadata.setSignalSources(this.descriptorInput, this.globalFilterFieldsInput);
2250
- this.data.setDataSources(this.items, this.result, this.dataProvider, this.loadingInput);
2251
- }
2252
- reload(emitEvent) {
2253
- const params = emitEvent?.params ? emitEvent?.params : emitEvent?.resetParams ? undefined : this.lastParamsWithDefaults;
2254
- const reloadParams = mergeDataListParamsWithDefaults(params ?? {}, this.metadata.defaultParams());
2255
- this.loadTableWithDataProvider(reloadParams, emitEvent?.emitEvent ?? false);
2256
- }
2257
- onTableLazyLoad(event) {
2258
- this.lastLazyLoadEvent = event;
2259
- const params = fromTableLoadToDataListParams(event);
2260
- if (this.useQueryParams()) {
2261
- if (!this.navigationOutOfTableInProgress && !this.navigationInTableInProgress) {
2262
- // this check is necessary: from some reason, primeNG commits one last lazy load event whenever any angular router navigation occurs
2263
- this.navigationInTableInProgress = true;
2264
- const newParams = dataListParamsToUrlQuery(params, this.metadata.defaultParams(), { prependFilterName: this.filterKeyPrepend, skipPresetDefaultsLimit: true });
2265
- const newParamsWithParamsToRemove = { ...newParams };
2266
- const currentQp = this.route.snapshot.queryParams;
2267
- if (currentQp) {
2268
- Object.keys(currentQp)
2269
- .filter(k => (k.startsWith(this.filterKeyPrepend) || ['offset', 'limit', 'sort', 'q'].indexOf(k) >= 0) && newParams[k] === undefined)
2270
- .forEach(k => (newParamsWithParamsToRemove[k] = null));
2271
- }
2272
- this.router
2273
- .navigate([], {
2274
- relativeTo: this.route,
2275
- replaceUrl: true,
2276
- queryParams: newParamsWithParamsToRemove,
2277
- queryParamsHandling: 'merge'
2278
- })
2279
- .then(() => {
2280
- this.navigationInTableInProgress = false;
2281
- });
2282
- }
2283
- }
2284
- else {
2285
- const paramsWithDefaults = mergeDataListParamsWithDefaults(params, this.metadata.defaultParams());
2286
- this.data.setParams(paramsWithDefaults);
2287
- this.loadTableWithDataProvider(paramsWithDefaults);
2288
- }
2289
- }
2290
- onTableFilter(event) {
2291
- if (this.useQueryParams()) {
2292
- return;
2293
- }
2294
- const params = fromTableLoadToDataListParams({ filters: event.filters });
2295
- const paramsWithDefaults = mergeDataListParamsWithDefaults(params, this.metadata.defaultParams());
2296
- // if table doesn't use lazy loading, filter params need to be set here
2297
- // because the onTableLazyLoad event is not emitted
2298
- if (!this.isLazy()) {
2299
- this.data.setParams(paramsWithDefaults);
2300
- }
2301
- }
2302
- onCellClick(event, col, item, idx) {
2303
- if (!this.isCellClickEnabled()) {
2304
- return;
2305
- }
2306
- const tableEvent = {
2307
- column: col,
2308
- rowItem: item,
2309
- rowIndex: idx,
2310
- event: event
2311
- };
2312
- this.cellClickSubject.next(tableEvent);
2313
- }
2314
- onSelectionChange(event) {
2315
- this.data.selectedItems.set(event);
2316
- this.selectionChange.emit(event);
2317
- }
2318
- onRowReorder(event) {
2319
- this.rowReorder.emit(event);
2320
- }
2321
- loadTableWithDataProvider(paramsWithDefaults, emitEvent = true) {
2322
- if (this.requiredFiltersMissing() && this.isLazy()) {
2323
- return;
2324
- }
2325
- const isFetched = this.data.fetchWithDataProvider(paramsWithDefaults, error => {
2326
- tableNotificationError(this.translate, this.messageService, this.metadata.descriptor(), error);
2327
- const commonsError = fromSubscribeError(error, 'TableComponentError', {
2328
- params: paramsWithDefaults
2329
- });
2330
- this.logger.log(commonsError, getErrorLogLevel(commonsError));
2331
- });
2332
- if (isFetched) {
2333
- this.lastParamsWithDefaults = paramsWithDefaults;
2334
- if (emitEvent) {
2335
- const tableEvent = {
2336
- originalEvent: this.lastLazyLoadEvent,
2337
- params: paramsWithDefaults
2338
- };
2339
- this.tableLoad.emit(tableEvent);
2340
- }
2341
- }
2342
- }
2343
- loadTableFromRouteUpdate(urlParams) {
2344
- const paramsWithDefaults = mergeDataListParamsWithDefaults(fromUrlQueryToDataListParams(urlParams, {
2345
- prependFilterName: this.filterKeyPrepend,
2346
- searchAsGlobal: true
2347
- }), this.metadata.defaultParams());
2348
- this.data.setParams(paramsWithDefaults, true);
2349
- this.loadTableWithDataProvider(paramsWithDefaults);
2350
- }
2351
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2352
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: TableComponent, isStandalone: true, selector: "mng-table", inputs: { descriptorInput: { classPropertyName: "descriptorInput", publicName: "descriptor", isSignal: true, isRequired: true, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, result: { classPropertyName: "result", publicName: "result", isSignal: true, isRequired: false, transformFunction: null }, loadingInput: { classPropertyName: "loadingInput", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, dataProvider: { classPropertyName: "dataProvider", publicName: "dataProvider", isSignal: true, isRequired: false, transformFunction: null }, useQueryParams: { classPropertyName: "useQueryParams", publicName: "useQueryParams", isSignal: true, isRequired: false, transformFunction: null }, cellClickEnabled: { classPropertyName: "cellClickEnabled", publicName: "cellClickEnabled", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, selectionEnabled: { classPropertyName: "selectionEnabled", publicName: "selectionEnabled", isSignal: true, isRequired: false, transformFunction: null }, rowReorderEnabledInput: { classPropertyName: "rowReorderEnabledInput", publicName: "rowReorderEnabled", isSignal: true, isRequired: false, transformFunction: null }, columnLastMinWidth: { classPropertyName: "columnLastMinWidth", publicName: "columnLastMinWidth", isSignal: true, isRequired: false, transformFunction: null }, globalFilterFieldsInput: { classPropertyName: "globalFilterFieldsInput", publicName: "globalFilterFields", isSignal: true, isRequired: false, transformFunction: null }, templates: { classPropertyName: "templates", publicName: "templates", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tableLoad: "tableLoad", cellClick: "cellClick", selectionChange: "selectionChange", rowReorder: "rowReorder" }, host: { properties: { "class.mng-table-no-header": "!isCaptionVisible()" } }, providers: [TableMetadataService, TableDataService, TablePreferencesService], queries: [{ propertyName: "contentTemplates", predicate: TableTemplateDirective, isSignal: true }], viewQueries: [{ propertyName: "primeTable", first: true, predicate: (Table), descendants: true, isSignal: true }], ngImport: i0, template: "<div>\n <!-- MUST NOT use observable for value when using virtual scroll - does not work for some reason -->\n @if (data.isAllPaginationMetaInitialized()) {\n <p-table\n [value]=\"requiredFiltersMissing() ? [] : data.data()\"\n [dataKey]=\"metadata.descriptor().trackProperty\"\n [lazy]=\"isLazy()\"\n [loading]=\"data.loading()\"\n [paginator]=\"isPagination()\"\n [rows]=\"data.rows()\"\n [first]=\"data.offset()\"\n [totalRecords]=\"data.count()\"\n [rowsPerPageOptions]=\"metadata.rowsPerPageOptions()\"\n [showCurrentPageReport]=\"true\"\n [currentPageReportTemplate]=\"'mngTable.paginationMsg' | translate\"\n [multiSortMeta]=\"data.sortMeta()\"\n [filters]=\"data.filterStates()\"\n [globalFilterFields]=\"metadata.searchFields()\"\n sortMode=\"multiple\"\n [selection]=\"[]\"\n (selectionChange)=\"onSelectionChange($event)\"\n [selectionMode]=\"selectionEnabled() ? selectionMode() : null\"\n [scrollable]=\"true\"\n scrollHeight=\"flex\"\n [rowHover]=\"metadata.descriptor().hasHover\"\n [styleClass]=\"className()\"\n [resizableColumns]=\"metadata.descriptor().hasResizableColumns\"\n [columnResizeMode]=\"metadata.descriptor().columnResizeMode ?? 'expand'\"\n [reorderableColumns]=\"areColumnsReorderable()\"\n paginatorDropdownAppendTo=\"body\"\n [columns]=\"visibleColumns()\"\n [expandedRowKeys]=\"expandedRowKeys()\"\n (onColResize)=\"prefs.onColumnResize($event)\"\n (onColReorder)=\"prefs.onColumnReorder($event)\"\n (onLazyLoad)=\"onTableLazyLoad($event)\"\n (onFilter)=\"onTableFilter($event)\"\n (onRowReorder)=\"onRowReorder($event)\"\n mngRemovableSort>\n <ng-template #caption>\n @if (isCaptionVisible()) {\n <div class=\"table-header\">\n @if (headerTemplate()) {\n <ng-container *ngTemplateOutlet=\"headerTemplate(); context: {data: data.data(), totalCount: data.count(), table: this}\"></ng-container>\n } @else {\n <mng-table-header-with-filters\n [title]=\"metadata.descriptor().title\"\n [metadata]=\"tableHeaderFilters()\"\n [genericFilterDescriptor]=\"metadata.genericFilterDescriptor()\"\n [model]=\"metadata.descriptor().model\"\n [enableSearch]=\"metadata.descriptor().search\"\n [search]=\"data.searchMeta()\"\n [searchLimitWordMax]=\"metadata.descriptor().searchLimitMaxWords\"\n [enableCaseSensitive]=\"isLazy()\">\n @if (hasTitleDisplay()) {\n <ng-template mngTableHeaderWithFiltersTemplate name=\"title\">\n @if (headerTitleTemplate()) {\n <ng-container\n *ngTemplateOutlet=\"headerTitleTemplate(); context: {data: data.data(), totalCount: data.count(), table: this}\"></ng-container>\n } @else if (metadata.descriptor().title) {\n <h5 class=\"p-0 m-0\">{{ metadata.descriptor().title! | translate }}</h5>\n }\n </ng-template>\n }\n @if (titleRowRightTemplate()) {\n <ng-template mngTableHeaderWithFiltersTemplate name=\"titleRowRight\">\n <ng-container *ngTemplateOutlet=\"titleRowRightTemplate()\"></ng-container>\n </ng-template>\n }\n </mng-table-header-with-filters>\n }\n </div>\n }\n </ng-template>\n <ng-template #header>\n @if (!metadata.descriptor().hideHeader) {\n <tr class=\"mng-table-header\" [class]=\"metadata.descriptor().headerClassName\">\n @if (selectionEnabled()) {\n @if (selectionMode() === 'multiple') {\n <th style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\">\n <p-tableHeaderCheckbox />\n </th>\n } @else {\n <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n <th style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\"></th>\n }\n }\n @if (metadata.descriptor().rowExpandable) {\n <th scope=\"col\" pFrozenColumn [frozen]=\"true\"></th>\n }\n @if (rowReorderEnabled()) {\n <th scope=\"col\"></th>\n }\n @for (col of visibleColumns(); track col.id) {\n <ng-template #sortableColumnTHTemplate>\n @if (columnHeaderTemplate()) {\n <ng-container\n *ngTemplateOutlet=\"\n columnHeaderTemplate();\n context: {data: data.data(), totalCount: data.count(), property: col.descriptor.property, table: this}\n \"></ng-container>\n } @else {\n <div class=\"flex justify-between items-center\">\n {{\n (col.descriptor.title && !col.descriptor.titleUseModelBase\n ? col.descriptor.title\n : (col.descriptor.title ?? col.descriptor.property | mngI18nProperty: metadata.descriptor().model)\n ) | translate\n }}\n <p-sortIcon [field]=\"col.sort?.property\" class=\"flex\"></p-sortIcon>\n </div>\n }\n </ng-template>\n <ng-template #nonSortableColumnTHTemplate>\n @if (columnHeaderTemplate()) {\n <ng-container\n *ngTemplateOutlet=\"\n columnHeaderTemplate();\n context: {data: data.data(), totalCount: data.count(), property: col.descriptor.property, table: this}\n \"></ng-container>\n } @else {\n {{\n (col.descriptor.title && !col.descriptor.titleUseModelBase\n ? col.descriptor.title\n : (col.descriptor.title ?? col.descriptor.property | mngI18nProperty: metadata.descriptor().model)\n ) | translate\n }}\n }\n </ng-template>\n @if (col.descriptor.isReorderable) {\n <th\n pResizableColumn\n pReorderableColumn\n [id]=\"col.descriptor.property\"\n [pSortableColumn]=\"col.sort?.property\"\n [pSortableColumnDisabled]=\"!col.sort\"\n [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n [style.min-width.px]=\"col.width ? null : col.descriptor.minWidth\"\n [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\"\n [class]=\"col.descriptor.headerClassName | mngTableFilterClass: col.filter?.descriptor : hasColumnFilters() && !col.width\">\n <ng-container *ngTemplateOutlet=\"col.sort ? sortableColumnTHTemplate : nonSortableColumnTHTemplate\"></ng-container>\n </th>\n } @else {\n <th\n pResizableColumn\n [id]=\"col.descriptor.property\"\n [pSortableColumn]=\"col.sort?.property\"\n [pSortableColumnDisabled]=\"!col.sort\"\n [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n [style.min-width.px]=\"col.width ? null : col.descriptor.minWidth\"\n [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\"\n [class]=\"col.descriptor.headerClassName | mngTableFilterClass: col.filter?.descriptor : hasColumnFilters() && !col.width\">\n <ng-container *ngTemplateOutlet=\"col.sort ? sortableColumnTHTemplate : nonSortableColumnTHTemplate\"></ng-container>\n </th>\n }\n }\n @if (hasLastColumn()) {\n <th\n [style.min-width.px]=\"columnLastMinWidth()\"\n pFrozenColumn\n [frozen]=\"metadata.descriptor().actionColumnFrozen ?? areColumnsToggleable()\"\n alignFrozen=\"right\"\n class=\"mng-table-column-custom-last text-right!\">\n @if (areColumnsToggleable()) {\n @defer (on idle) {\n <mng-table-column-toggle [columns]=\"visibleColumns()\" />\n }\n }\n </th>\n }\n </tr>\n }\n @if (hasColumnFilters()) {\n <tr class=\"mng-column-filter-row\">\n <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n @if (selectionEnabled()) {\n <th style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\"></th>\n }\n @if (rowReorderEnabled()) {\n <th scope=\"col\"></th>\n }\n @if (metadata.descriptor().rowExpandable) {\n <th scope=\"col\"></th>\n }\n @for (col of visibleColumns(); track col.id) {\n <th\n [class]=\"'px-1! ' + col.filter?.descriptor?.columnClassName | mngTableFilterClass: col.filter?.descriptor : hasColumnFilters() && !col.width\"\n [style.width.px]=\"col.width\"\n [style.width.%]=\"col.width ? null : (col.filter?.descriptor?.columnWidth ?? col.descriptor.width ?? null)\"\n [style.min-width.px]=\"col.width ? null : (col.filter?.descriptor?.columnMinWidth ?? col.descriptor.minWidth)\"\n [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\">\n @if (col.filter && col.filter.descriptor.filterType !== FilterTypeEnum.Component) {\n @defer (on idle) {\n <mng-table-filter [config]=\"col.filter\" [model]=\"metadata.descriptor().model\"></mng-table-filter>\n }\n } @else if (col.filter && col.filter.descriptor.customComponentType) {\n <ng-container [mngComponent]=\"col.filter.descriptor.customComponentType\" [inputs]=\"{descriptor: col.filter.descriptor}\"></ng-container>\n }\n </th>\n }\n @if (hasLastColumn()) {\n <th pFrozenColumn alignFrozen=\"right\" class=\"mng-table-column-custom-last\" [style.min-width.px]=\"columnLastMinWidth()\"></th>\n }\n </tr>\n }\n </ng-template>\n <ng-template #body let-item let-idx=\"rowIndex\" let-expanded=\"expanded\">\n <tr\n [pReorderableRow]=\"idx\"\n [ngClass]=\"\n metadata.descriptor().rowClassName | mngClassMap: metadata.descriptor().rowClassNameMapFn : item | mngLocaleDefaultRowClass: metadata.descriptor() : item\n \">\n @if (selectionEnabled()) {\n @if (selectionMode() === 'multiple') {\n <td style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\">\n <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n </td>\n } @else {\n <td style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\">\n <p-tableRadioButton [value]=\"item\"></p-tableRadioButton>\n </td>\n }\n }\n @if (metadata.descriptor().rowExpandable) {\n <td>\n @let expandProp = metadata.descriptor().rowExpandableProperty;\n @if (!expandProp || item[expandProp]) {\n <button\n pButton\n type=\"button\"\n [pRowToggler]=\"item\"\n rounded=\"true\"\n text=\"true\"\n class=\"mng-button-sm\"\n [icon]=\"expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'\"></button>\n }\n </td>\n }\n @if (rowReorderEnabled()) {\n <td>\n <span class=\"pi pi-bars\" pReorderableRowHandle></span>\n </td>\n }\n @for (col of visibleColumns(); track col.id) {\n <td\n (click)=\"onCellClick($event, col.descriptor, item, idx)\"\n [class]=\"\n col.descriptor.className\n | mngClassMap: col.descriptor.classNameMapFn : item\n | mngTableFilterClass: col.filter?.descriptor : hasColumnFilters() && !col.width\n \"\n [class.clickable]=\"isCellClickEnabled()\"\n [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n [style.min-width.px]=\"col.width ? null : col.descriptor.minWidth\"\n [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\">\n <mng-table-column-value [descriptor]=\"col.descriptor\" [item]=\"item\"></mng-table-column-value>\n </td>\n }\n @if (columnCustomLastTemplate()) {\n <td\n class=\"mng-table-column-custom-last justify-end text-right!\"\n [style.min-width.px]=\"columnLastMinWidth()\"\n pFrozenColumn\n alignFrozen=\"right\"\n [frozen]=\"metadata.descriptor().actionColumnFrozen ?? true\">\n <ng-container\n *ngTemplateOutlet=\"\n columnCustomLastTemplate();\n context: {item: item, index: idx, data: data.data(), totalCount: data.count(), table: this}\n \"></ng-container>\n </td>\n }\n </tr>\n </ng-template>\n <ng-template #expandedrow let-item let-idx=\"rowIndex\">\n @if (metadata.descriptor().rowExpandable) {\n <tr>\n <td></td>\n <td [colSpan]=\"metadata.descriptor().rowExpandableColSpan\">\n @if (metadata.descriptor().rowExpandableComponentType !== undefined) {\n <ng-container [mngComponent]=\"metadata.descriptor().rowExpandableComponentType\" [inputs]=\"{item}\"> </ng-container>\n } @else {\n <ng-container\n *ngTemplateOutlet=\"\n rowExpandTemplate();\n context: {item: item, index: idx, data: data.data(), totalCount: data.count(), table: this}\n \"></ng-container>\n }\n </td>\n </tr>\n }\n </ng-template>\n <ng-template #loadingicon>\n <div class=\"flex flex-col items-center\">\n @if (metadata.descriptor().loadingIcon) {\n <i [class]=\"'text-white text-4xl pi-spin ' + metadata.descriptor().loadingIcon\"></i>\n }\n @if (metadata.descriptor().loadingText) {\n <div class=\"text text-white text-lg font-semibold\" [ngClass]=\"{'mt-3': metadata.descriptor().loadingIcon}\">\n {{ metadata.descriptor().loadingText ?? '' | translate }}\n </div>\n }\n </div>\n </ng-template>\n <ng-template #loadingbody>\n <tr>\n <td [attr.colspan]=\"columnsColspan()\">\n <div class=\"loading-text\"></div>\n <p-skeleton width=\"100%\"></p-skeleton>\n </td>\n </tr>\n </ng-template>\n <ng-template #emptymessage>\n <tr>\n <td [attr.colspan]=\"columnsColspan()\">\n @if (requiredFiltersMissing()) {\n <i class=\"pi pi-exclamation-triangle mr-2\"></i> <strong>{{ 'mngTable.requiredFiltersMissing' | translate }}</strong>\n } @else {\n {{ 'mngTable.noItems' | translate }}\n }\n </td>\n </tr>\n </ng-template>\n @if (footerTemplate()) {\n <ng-template #summary>\n <ng-container *ngTemplateOutlet=\"footerTemplate(); context: {data: data.data(), totalCount: data.count(), table: this}\"></ng-container>\n </ng-template>\n }\n </p-table>\n }\n</div>\n", styles: ["mng-table .p-datatable .p-datatable-header{border-top:0}mng-table .p-datatable:not(.p-datatable-gridlines) .p-datatable-tbody>tr>td{cursor:auto}mng-table .p-datatable:not(.p-datatable-gridlines) .p-datatable-tbody>tr>td.clickable{cursor:pointer}:is(mng-table .p-datatable .p-datatable-thead>tr>th,mng-table .p-datatable .p-datatable-tbody>tr>td):hover mng-table-column-value .help-buttons{display:block}mng-table .p-datatable .p-datatable-thead>tr>th.mng-table-column-custom-last{padding:var(--mng-table-column-head-custom-last, .1rem 1rem)}mng-table .p-datatable .p-datatable-tbody>tr>td{position:relative}mng-table .p-datatable .p-datatable-tbody>tr>td.mng-table-column-custom-last{padding-top:.1rem;padding-bottom:.1rem}mng-table .p-datatable .p-datatable-tbody>tr>td.p-datatable-frozen-column{position:sticky;z-index:1;background:transparent}mng-table .p-datatable.p-datatable-lg .p-datatable-tbody>tr>td.mng-table-column-custom-last{padding:var(--mng-table-column-body-custom-last, .15rem 1rem)}mng-table .p-datatable.p-datatable-sm .p-datatable-tbody>tr>td.mng-table-column-custom-last{padding:var(--mng-table-sm-column-body-custom-last, .05rem 1rem)}mng-table .p-datatable.p-datatable-flex-scrollable .p-datatable-thead>tr>th{overflow:hidden;text-overflow:ellipsis}mng-table .p-datatable.p-datatable-flex-scrollable .p-datatable-tbody>tr>td{overflow:hidden}mng-table .p-datatable .mng-table-row-localization-default-locale{background:var(--p-surface-100)!important}mng-table .mng-table-header>th:not(:first-child):not(:last-child){border-radius:0!important}mng-table .mng-table-header>th:first-child{border-top-right-radius:0!important;border-bottom-right-radius:0!important}mng-table .mng-table-header>th:last-child{border-radius:0!important}mng-table .mng-table-header .mng-table-columns-multiselect{width:36px}mng-table .mng-table-header .mng-table-columns-multiselect .p-multiselect-label-container{width:0}mng-table.mng-table-no-header p-datatable .p-datatable-header{display:none}mng-table.mng-table-header-compact .p-datatable-header{padding:var(--mng-table-header-compact-padding, 0 0 .5rem 0)!important}\n"], dependencies: [{ kind: "directive", type: ComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "injectionToken", "inputs", "attachToHost", "parentInjector"], outputs: ["instanceCreated"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TableColumnValueComponent, selector: "mng-table-column-value", inputs: ["descriptor", "item"] }, { kind: "component", type: TableHeaderWithFiltersComponent, selector: "mng-table-header-with-filters", inputs: ["metadata", "genericFilterDescriptor", "model", "enableSearch", "search", "searchLimitWordMax", "enableCaseSensitive"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i1$2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i1$2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i1$2.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "directive", type: i1$2.RowToggler, selector: "[pRowToggler]", inputs: ["pRowToggler", "pRowTogglerDisabled"] }, { kind: "directive", type: i1$2.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "directive", type: i1$2.ReorderableColumn, selector: "[pReorderableColumn]", inputs: ["pReorderableColumnDisabled"] }, { kind: "component", type: i1$2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i1$2.TableRadioButton, selector: "p-tableRadioButton", inputs: ["value", "disabled", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i1$2.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i1$2.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "directive", type: i1$2.ReorderableRowHandle, selector: "[pReorderableRowHandle]" }, { kind: "directive", type: i1$2.ReorderableRow, selector: "[pReorderableRow]", inputs: ["pReorderableRow", "pReorderableRowDisabled"] }, { kind: "component", type: Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "directive", type: TableRemovableSortDirective, selector: "[mngRemovableSort]" }, { kind: "directive", type: TableHeaderWithFiltersTemplateDirective, selector: "[mngTableHeaderWithFiltersTemplate]", inputs: ["name"] }, { kind: "pipe", type: I18nPropertyPipe, name: "mngI18nProperty" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: ClassMapPipe, name: "mngClassMap" }, { kind: "pipe", type: LocaleDefaultRowClassPipe, name: "mngLocaleDefaultRowClass" }, { kind: "pipe", type: TableFilterClassPipe, name: "mngTableFilterClass" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None, deferBlockDependencies: [() => [import('./mediusinc-mng-commons-table-column-toggle.component-0Dtv48mq.mjs').then(m => m.TableColumnToggleComponent)], () => [Promise.resolve().then(function () { return filter_component; }).then(m => m.TableFilterComponent)]] }); }
2353
- }
2354
- i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "20.1.7", ngImport: i0, type: TableComponent, resolveDeferredDeps: () => [import('./mediusinc-mng-commons-table-column-toggle.component-0Dtv48mq.mjs').then(m => m.TableColumnToggleComponent), Promise.resolve().then(function () { return filter_component; }).then(m => m.TableFilterComponent)], resolveMetadata: (TableColumnToggleComponent, TableFilterComponent) => ({ decorators: [{
2355
- type: Component,
2356
- args: [{ selector: 'mng-table', imports: [
2357
- ComponentDirective,
2358
- I18nPropertyPipe,
2359
- TranslatePipe,
2360
- NgClass,
2361
- NgTemplateOutlet,
2362
- TableColumnValueComponent,
2363
- ClassMapPipe,
2364
- LocaleDefaultRowClassPipe,
2365
- TableFilterComponent,
2366
- TableFilterClassPipe,
2367
- TableHeaderWithFiltersComponent,
2368
- FormsModule,
2369
- TableModule,
2370
- Skeleton,
2371
- TableColumnToggleComponent,
2372
- ButtonDirective,
2373
- TableRemovableSortDirective,
2374
- TableHeaderWithFiltersTemplateDirective
2375
- ], providers: [TableMetadataService, TableDataService, TablePreferencesService], host: {
2376
- '[class.mng-table-no-header]': '!isCaptionVisible()'
2377
- }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div>\n <!-- MUST NOT use observable for value when using virtual scroll - does not work for some reason -->\n @if (data.isAllPaginationMetaInitialized()) {\n <p-table\n [value]=\"requiredFiltersMissing() ? [] : data.data()\"\n [dataKey]=\"metadata.descriptor().trackProperty\"\n [lazy]=\"isLazy()\"\n [loading]=\"data.loading()\"\n [paginator]=\"isPagination()\"\n [rows]=\"data.rows()\"\n [first]=\"data.offset()\"\n [totalRecords]=\"data.count()\"\n [rowsPerPageOptions]=\"metadata.rowsPerPageOptions()\"\n [showCurrentPageReport]=\"true\"\n [currentPageReportTemplate]=\"'mngTable.paginationMsg' | translate\"\n [multiSortMeta]=\"data.sortMeta()\"\n [filters]=\"data.filterStates()\"\n [globalFilterFields]=\"metadata.searchFields()\"\n sortMode=\"multiple\"\n [selection]=\"[]\"\n (selectionChange)=\"onSelectionChange($event)\"\n [selectionMode]=\"selectionEnabled() ? selectionMode() : null\"\n [scrollable]=\"true\"\n scrollHeight=\"flex\"\n [rowHover]=\"metadata.descriptor().hasHover\"\n [styleClass]=\"className()\"\n [resizableColumns]=\"metadata.descriptor().hasResizableColumns\"\n [columnResizeMode]=\"metadata.descriptor().columnResizeMode ?? 'expand'\"\n [reorderableColumns]=\"areColumnsReorderable()\"\n paginatorDropdownAppendTo=\"body\"\n [columns]=\"visibleColumns()\"\n [expandedRowKeys]=\"expandedRowKeys()\"\n (onColResize)=\"prefs.onColumnResize($event)\"\n (onColReorder)=\"prefs.onColumnReorder($event)\"\n (onLazyLoad)=\"onTableLazyLoad($event)\"\n (onFilter)=\"onTableFilter($event)\"\n (onRowReorder)=\"onRowReorder($event)\"\n mngRemovableSort>\n <ng-template #caption>\n @if (isCaptionVisible()) {\n <div class=\"table-header\">\n @if (headerTemplate()) {\n <ng-container *ngTemplateOutlet=\"headerTemplate(); context: {data: data.data(), totalCount: data.count(), table: this}\"></ng-container>\n } @else {\n <mng-table-header-with-filters\n [title]=\"metadata.descriptor().title\"\n [metadata]=\"tableHeaderFilters()\"\n [genericFilterDescriptor]=\"metadata.genericFilterDescriptor()\"\n [model]=\"metadata.descriptor().model\"\n [enableSearch]=\"metadata.descriptor().search\"\n [search]=\"data.searchMeta()\"\n [searchLimitWordMax]=\"metadata.descriptor().searchLimitMaxWords\"\n [enableCaseSensitive]=\"isLazy()\">\n @if (hasTitleDisplay()) {\n <ng-template mngTableHeaderWithFiltersTemplate name=\"title\">\n @if (headerTitleTemplate()) {\n <ng-container\n *ngTemplateOutlet=\"headerTitleTemplate(); context: {data: data.data(), totalCount: data.count(), table: this}\"></ng-container>\n } @else if (metadata.descriptor().title) {\n <h5 class=\"p-0 m-0\">{{ metadata.descriptor().title! | translate }}</h5>\n }\n </ng-template>\n }\n @if (titleRowRightTemplate()) {\n <ng-template mngTableHeaderWithFiltersTemplate name=\"titleRowRight\">\n <ng-container *ngTemplateOutlet=\"titleRowRightTemplate()\"></ng-container>\n </ng-template>\n }\n </mng-table-header-with-filters>\n }\n </div>\n }\n </ng-template>\n <ng-template #header>\n @if (!metadata.descriptor().hideHeader) {\n <tr class=\"mng-table-header\" [class]=\"metadata.descriptor().headerClassName\">\n @if (selectionEnabled()) {\n @if (selectionMode() === 'multiple') {\n <th style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\">\n <p-tableHeaderCheckbox />\n </th>\n } @else {\n <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n <th style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\"></th>\n }\n }\n @if (metadata.descriptor().rowExpandable) {\n <th scope=\"col\" pFrozenColumn [frozen]=\"true\"></th>\n }\n @if (rowReorderEnabled()) {\n <th scope=\"col\"></th>\n }\n @for (col of visibleColumns(); track col.id) {\n <ng-template #sortableColumnTHTemplate>\n @if (columnHeaderTemplate()) {\n <ng-container\n *ngTemplateOutlet=\"\n columnHeaderTemplate();\n context: {data: data.data(), totalCount: data.count(), property: col.descriptor.property, table: this}\n \"></ng-container>\n } @else {\n <div class=\"flex justify-between items-center\">\n {{\n (col.descriptor.title && !col.descriptor.titleUseModelBase\n ? col.descriptor.title\n : (col.descriptor.title ?? col.descriptor.property | mngI18nProperty: metadata.descriptor().model)\n ) | translate\n }}\n <p-sortIcon [field]=\"col.sort?.property\" class=\"flex\"></p-sortIcon>\n </div>\n }\n </ng-template>\n <ng-template #nonSortableColumnTHTemplate>\n @if (columnHeaderTemplate()) {\n <ng-container\n *ngTemplateOutlet=\"\n columnHeaderTemplate();\n context: {data: data.data(), totalCount: data.count(), property: col.descriptor.property, table: this}\n \"></ng-container>\n } @else {\n {{\n (col.descriptor.title && !col.descriptor.titleUseModelBase\n ? col.descriptor.title\n : (col.descriptor.title ?? col.descriptor.property | mngI18nProperty: metadata.descriptor().model)\n ) | translate\n }}\n }\n </ng-template>\n @if (col.descriptor.isReorderable) {\n <th\n pResizableColumn\n pReorderableColumn\n [id]=\"col.descriptor.property\"\n [pSortableColumn]=\"col.sort?.property\"\n [pSortableColumnDisabled]=\"!col.sort\"\n [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n [style.min-width.px]=\"col.width ? null : col.descriptor.minWidth\"\n [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\"\n [class]=\"col.descriptor.headerClassName | mngTableFilterClass: col.filter?.descriptor : hasColumnFilters() && !col.width\">\n <ng-container *ngTemplateOutlet=\"col.sort ? sortableColumnTHTemplate : nonSortableColumnTHTemplate\"></ng-container>\n </th>\n } @else {\n <th\n pResizableColumn\n [id]=\"col.descriptor.property\"\n [pSortableColumn]=\"col.sort?.property\"\n [pSortableColumnDisabled]=\"!col.sort\"\n [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n [style.min-width.px]=\"col.width ? null : col.descriptor.minWidth\"\n [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\"\n [class]=\"col.descriptor.headerClassName | mngTableFilterClass: col.filter?.descriptor : hasColumnFilters() && !col.width\">\n <ng-container *ngTemplateOutlet=\"col.sort ? sortableColumnTHTemplate : nonSortableColumnTHTemplate\"></ng-container>\n </th>\n }\n }\n @if (hasLastColumn()) {\n <th\n [style.min-width.px]=\"columnLastMinWidth()\"\n pFrozenColumn\n [frozen]=\"metadata.descriptor().actionColumnFrozen ?? areColumnsToggleable()\"\n alignFrozen=\"right\"\n class=\"mng-table-column-custom-last text-right!\">\n @if (areColumnsToggleable()) {\n @defer (on idle) {\n <mng-table-column-toggle [columns]=\"visibleColumns()\" />\n }\n }\n </th>\n }\n </tr>\n }\n @if (hasColumnFilters()) {\n <tr class=\"mng-column-filter-row\">\n <!-- We need the line below, because otherwise p-tableRadioButton shifts the rest of the columns in table -->\n @if (selectionEnabled()) {\n <th style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\"></th>\n }\n @if (rowReorderEnabled()) {\n <th scope=\"col\"></th>\n }\n @if (metadata.descriptor().rowExpandable) {\n <th scope=\"col\"></th>\n }\n @for (col of visibleColumns(); track col.id) {\n <th\n [class]=\"'px-1! ' + col.filter?.descriptor?.columnClassName | mngTableFilterClass: col.filter?.descriptor : hasColumnFilters() && !col.width\"\n [style.width.px]=\"col.width\"\n [style.width.%]=\"col.width ? null : (col.filter?.descriptor?.columnWidth ?? col.descriptor.width ?? null)\"\n [style.min-width.px]=\"col.width ? null : (col.filter?.descriptor?.columnMinWidth ?? col.descriptor.minWidth)\"\n [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\">\n @if (col.filter && col.filter.descriptor.filterType !== FilterTypeEnum.Component) {\n @defer (on idle) {\n <mng-table-filter [config]=\"col.filter\" [model]=\"metadata.descriptor().model\"></mng-table-filter>\n }\n } @else if (col.filter && col.filter.descriptor.customComponentType) {\n <ng-container [mngComponent]=\"col.filter.descriptor.customComponentType\" [inputs]=\"{descriptor: col.filter.descriptor}\"></ng-container>\n }\n </th>\n }\n @if (hasLastColumn()) {\n <th pFrozenColumn alignFrozen=\"right\" class=\"mng-table-column-custom-last\" [style.min-width.px]=\"columnLastMinWidth()\"></th>\n }\n </tr>\n }\n </ng-template>\n <ng-template #body let-item let-idx=\"rowIndex\" let-expanded=\"expanded\">\n <tr\n [pReorderableRow]=\"idx\"\n [ngClass]=\"\n metadata.descriptor().rowClassName | mngClassMap: metadata.descriptor().rowClassNameMapFn : item | mngLocaleDefaultRowClass: metadata.descriptor() : item\n \">\n @if (selectionEnabled()) {\n @if (selectionMode() === 'multiple') {\n <td style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\">\n <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n </td>\n } @else {\n <td style=\"min-width: 36px\" pFrozenColumn [frozen]=\"metadata.descriptor().selectionColumnFrozen ?? true\">\n <p-tableRadioButton [value]=\"item\"></p-tableRadioButton>\n </td>\n }\n }\n @if (metadata.descriptor().rowExpandable) {\n <td>\n @let expandProp = metadata.descriptor().rowExpandableProperty;\n @if (!expandProp || item[expandProp]) {\n <button\n pButton\n type=\"button\"\n [pRowToggler]=\"item\"\n rounded=\"true\"\n text=\"true\"\n class=\"mng-button-sm\"\n [icon]=\"expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'\"></button>\n }\n </td>\n }\n @if (rowReorderEnabled()) {\n <td>\n <span class=\"pi pi-bars\" pReorderableRowHandle></span>\n </td>\n }\n @for (col of visibleColumns(); track col.id) {\n <td\n (click)=\"onCellClick($event, col.descriptor, item, idx)\"\n [class]=\"\n col.descriptor.className\n | mngClassMap: col.descriptor.classNameMapFn : item\n | mngTableFilterClass: col.filter?.descriptor : hasColumnFilters() && !col.width\n \"\n [class.clickable]=\"isCellClickEnabled()\"\n [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n [style.min-width.px]=\"col.width ? null : col.descriptor.minWidth\"\n [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\">\n <mng-table-column-value [descriptor]=\"col.descriptor\" [item]=\"item\"></mng-table-column-value>\n </td>\n }\n @if (columnCustomLastTemplate()) {\n <td\n class=\"mng-table-column-custom-last justify-end text-right!\"\n [style.min-width.px]=\"columnLastMinWidth()\"\n pFrozenColumn\n alignFrozen=\"right\"\n [frozen]=\"metadata.descriptor().actionColumnFrozen ?? true\">\n <ng-container\n *ngTemplateOutlet=\"\n columnCustomLastTemplate();\n context: {item: item, index: idx, data: data.data(), totalCount: data.count(), table: this}\n \"></ng-container>\n </td>\n }\n </tr>\n </ng-template>\n <ng-template #expandedrow let-item let-idx=\"rowIndex\">\n @if (metadata.descriptor().rowExpandable) {\n <tr>\n <td></td>\n <td [colSpan]=\"metadata.descriptor().rowExpandableColSpan\">\n @if (metadata.descriptor().rowExpandableComponentType !== undefined) {\n <ng-container [mngComponent]=\"metadata.descriptor().rowExpandableComponentType\" [inputs]=\"{item}\"> </ng-container>\n } @else {\n <ng-container\n *ngTemplateOutlet=\"\n rowExpandTemplate();\n context: {item: item, index: idx, data: data.data(), totalCount: data.count(), table: this}\n \"></ng-container>\n }\n </td>\n </tr>\n }\n </ng-template>\n <ng-template #loadingicon>\n <div class=\"flex flex-col items-center\">\n @if (metadata.descriptor().loadingIcon) {\n <i [class]=\"'text-white text-4xl pi-spin ' + metadata.descriptor().loadingIcon\"></i>\n }\n @if (metadata.descriptor().loadingText) {\n <div class=\"text text-white text-lg font-semibold\" [ngClass]=\"{'mt-3': metadata.descriptor().loadingIcon}\">\n {{ metadata.descriptor().loadingText ?? '' | translate }}\n </div>\n }\n </div>\n </ng-template>\n <ng-template #loadingbody>\n <tr>\n <td [attr.colspan]=\"columnsColspan()\">\n <div class=\"loading-text\"></div>\n <p-skeleton width=\"100%\"></p-skeleton>\n </td>\n </tr>\n </ng-template>\n <ng-template #emptymessage>\n <tr>\n <td [attr.colspan]=\"columnsColspan()\">\n @if (requiredFiltersMissing()) {\n <i class=\"pi pi-exclamation-triangle mr-2\"></i> <strong>{{ 'mngTable.requiredFiltersMissing' | translate }}</strong>\n } @else {\n {{ 'mngTable.noItems' | translate }}\n }\n </td>\n </tr>\n </ng-template>\n @if (footerTemplate()) {\n <ng-template #summary>\n <ng-container *ngTemplateOutlet=\"footerTemplate(); context: {data: data.data(), totalCount: data.count(), table: this}\"></ng-container>\n </ng-template>\n }\n </p-table>\n }\n</div>\n", styles: ["mng-table .p-datatable .p-datatable-header{border-top:0}mng-table .p-datatable:not(.p-datatable-gridlines) .p-datatable-tbody>tr>td{cursor:auto}mng-table .p-datatable:not(.p-datatable-gridlines) .p-datatable-tbody>tr>td.clickable{cursor:pointer}:is(mng-table .p-datatable .p-datatable-thead>tr>th,mng-table .p-datatable .p-datatable-tbody>tr>td):hover mng-table-column-value .help-buttons{display:block}mng-table .p-datatable .p-datatable-thead>tr>th.mng-table-column-custom-last{padding:var(--mng-table-column-head-custom-last, .1rem 1rem)}mng-table .p-datatable .p-datatable-tbody>tr>td{position:relative}mng-table .p-datatable .p-datatable-tbody>tr>td.mng-table-column-custom-last{padding-top:.1rem;padding-bottom:.1rem}mng-table .p-datatable .p-datatable-tbody>tr>td.p-datatable-frozen-column{position:sticky;z-index:1;background:transparent}mng-table .p-datatable.p-datatable-lg .p-datatable-tbody>tr>td.mng-table-column-custom-last{padding:var(--mng-table-column-body-custom-last, .15rem 1rem)}mng-table .p-datatable.p-datatable-sm .p-datatable-tbody>tr>td.mng-table-column-custom-last{padding:var(--mng-table-sm-column-body-custom-last, .05rem 1rem)}mng-table .p-datatable.p-datatable-flex-scrollable .p-datatable-thead>tr>th{overflow:hidden;text-overflow:ellipsis}mng-table .p-datatable.p-datatable-flex-scrollable .p-datatable-tbody>tr>td{overflow:hidden}mng-table .p-datatable .mng-table-row-localization-default-locale{background:var(--p-surface-100)!important}mng-table .mng-table-header>th:not(:first-child):not(:last-child){border-radius:0!important}mng-table .mng-table-header>th:first-child{border-top-right-radius:0!important;border-bottom-right-radius:0!important}mng-table .mng-table-header>th:last-child{border-radius:0!important}mng-table .mng-table-header .mng-table-columns-multiselect{width:36px}mng-table .mng-table-header .mng-table-columns-multiselect .p-multiselect-label-container{width:0}mng-table.mng-table-no-header p-datatable .p-datatable-header{display:none}mng-table.mng-table-header-compact .p-datatable-header{padding:var(--mng-table-header-compact-padding, 0 0 .5rem 0)!important}\n"] }]
2378
- }], ctorParameters: () => [], propDecorators: null }) });
2379
-
2380
- /**
2381
- * Prepares providers for usage of the tableview functionalities.
2382
- *
2383
- * @returns {CommonsFeature} The `CommonsFeature` object with the layout configuration.
2384
- */
2385
- function withTable(config) {
2386
- return {
2387
- type: CommonsFeatureTypeEnum.Table,
2388
- providers: [
2389
- {
2390
- provide: COMMONS_TABLE_FEATURE_CONFIG_IT,
2391
- useValue: config
2392
- }
2393
- ]
2394
- };
2395
- }
2396
- /**
2397
- * Provides a list of providers for configuring a table feature. Useful for lazy-loading table chunk in child (lazy loaded routes).
2398
- *
2399
- * @param {TableFeatureConfig} [config] - An optional configuration object for the table feature.
2400
- */
2401
- function provideTableChild(config) {
2402
- return [
2403
- {
2404
- provide: COMMONS_TABLE_FEATURE_CONFIG_IT,
2405
- useValue: config
2406
- }
2407
- ];
2408
- }
2409
-
2410
- // components
2411
-
2412
- /**
2413
- * Generated bundle index. Do not edit.
2414
- */
2415
-
2416
- export { COMMONS_TABLE_FEATURE_CONFIG_IT as C, FilterService as F, LocaleDefaultRowClassPipe as L, TableMetadataService as T, TablePreferencesService as a, TableFilterComponent as b, TableColumnValueComponent as c, TableFilterActiveTagComponent as d, TableFilterFormComponent as e, TableHeaderWithFiltersComponent as f, TableComponent as g, TableTemplateDirective as h, filterGenerateMatchModeOptions as i, filterGetDefaultMatchMode as j, filterSetStateOnChange as k, filterSetStateOnDisplayChange as l, filterAreDatesEqual as m, filterApplySerializationConfigToCmp as n, filterAdjustDisplayValueOnMatchModeChange as o, filterGetDateConfig as p, filterGetNumberConfig as q, createFilterDescriptorsFromGeneric as r, isFilterValueBlank as s, tableNotificationError as t, generateTableLayoutPrefsKey as u, FilterValuePipe as v, TableFilterClassPipe as w, TableDataService as x, withTable as y, provideTableChild as z };
2417
- //# sourceMappingURL=mediusinc-mng-commons-table-mediusinc-mng-commons-table-BsAwyXiN.mjs.map