@mediusinc/mng-commons 7.2.0 → 7.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/{mediusinc-mng-commons-table-column-toggle.component-C9kHux4U.mjs → mediusinc-mng-commons-table-column-toggle.component-BZU9-ZJV.mjs} +2 -2
- package/fesm2022/{mediusinc-mng-commons-table-column-toggle.component-C9kHux4U.mjs.map → mediusinc-mng-commons-table-column-toggle.component-BZU9-ZJV.mjs.map} +1 -1
- package/fesm2022/{mediusinc-mng-commons-table-mediusinc-mng-commons-table-BDzq5vNu.mjs → mediusinc-mng-commons-table-mediusinc-mng-commons-table-D-cGtZ6e.mjs} +173 -152
- package/fesm2022/mediusinc-mng-commons-table-mediusinc-mng-commons-table-D-cGtZ6e.mjs.map +1 -0
- package/fesm2022/mediusinc-mng-commons-table.mjs +1 -1
- package/package.json +1 -1
- package/types/mediusinc-mng-commons-table.d.ts +8 -2
- package/version-info.json +5 -5
- package/fesm2022/mediusinc-mng-commons-table-mediusinc-mng-commons-table-BDzq5vNu.mjs.map +0 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { trigger, transition, style, animate } from '@angular/animations';
|
|
2
2
|
import { NgTemplateOutlet, NgClass, getCurrencySymbol, DecimalPipe, CurrencyPipe, DatePipe, AsyncPipe } from '@angular/common';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { forwardRef, input, booleanAttribute, model, signal, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, Injectable, inject, untracked, ElementRef, Renderer2, ChangeDetectorRef, viewChild, LOCALE_ID, Pipe, output, InjectionToken,
|
|
4
|
+
import { forwardRef, input, booleanAttribute, model, signal, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, Injectable, inject, untracked, ElementRef, Renderer2, ChangeDetectorRef, viewChild, LOCALE_ID, Pipe, output, InjectionToken, Directive, contentChildren, HostListener, Injector, DestroyRef, afterNextRender } from '@angular/core';
|
|
5
5
|
import { takeUntilDestroyed, toObservable, toSignal, outputFromObservable } from '@angular/core/rxjs-interop';
|
|
6
6
|
import * as i1 from '@angular/forms';
|
|
7
7
|
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
|
|
@@ -16,8 +16,8 @@ import * as i1$1 from 'primeng/table';
|
|
|
16
16
|
import { TableModule, Table } from 'primeng/table';
|
|
17
17
|
import { ToggleSwitch } from 'primeng/toggleswitch';
|
|
18
18
|
import { ZIndexUtils } from 'primeng/utils';
|
|
19
|
-
import { Subject, debounceTime, distinctUntilChanged, ReplaySubject, switchMap, NEVER,
|
|
20
|
-
import { FilterMatchMode, dateToIsoString, angularDateFormatHasTime, angularDateFormatHasSeconds, fromAngularDateFormatToPrime, fromAngularNumberFormatToFractions, effectWithDeps, getI18nTypePropertyKey, RerenderDirective, GetterPipe, TemplatePipe, JsonPathPipe, ComponentDirective, BooleanPipe, EnumPipe, isMac,
|
|
19
|
+
import { Subject, debounceTime, distinctUntilChanged, ReplaySubject, switchMap, NEVER, BehaviorSubject, combineLatest, skip, of, filter } from 'rxjs';
|
|
20
|
+
import { FilterMatchMode, dateToIsoString, angularDateFormatHasTime, angularDateFormatHasSeconds, fromAngularDateFormatToPrime, fromAngularNumberFormatToFractions, effectWithDeps, getI18nTypePropertyKey, RerenderDirective, GetterPipe, TemplatePipe, JsonPathPipe, ComponentDirective, BooleanPipe, EnumPipe, isMac, TemplateDirective, findTemplateByName, getI18nErrorParams, getI18nForError, toastMessage, CommonsService, COMMONS_MODULE_CONFIG_IT, toObservable as toObservable$1, CommonsStorageService, LoggerService, booleanOrUndefinedAttribute, mergeDataListParamsWithDefaults, fromTableLoadToDataListParams, dataListParamsToUrlQuery, fromSubscribeError, getErrorLogLevel, fromUrlQueryToDataListParams, I18nPropertyPipe, ClassMapPipe, CommonsFeatureTypeEnum } from '@mediusinc/mng-commons/core';
|
|
21
21
|
import { FilterTypeEnum, FilterDescriptor, FilterLookupTypeEnum, FilterLookupDescriptor, FilterDisplayTypeEnum } from '@mediusinc/mng-commons/filter';
|
|
22
22
|
import { InputTrimDirective, DateRangeComponent, AutocompleteComponent, DropdownComponent, NumberRangeComponent, AutocompleteTemplateDirective, DropdownTemplateDirective, DateRangeTemplateDirective, NumberRangeTemplateDirective, DatetimePickerComponent } from '@mediusinc/mng-commons/form';
|
|
23
23
|
import { Chip } from 'primeng/chip';
|
|
@@ -37,9 +37,9 @@ import { InputIcon } from 'primeng/inputicon';
|
|
|
37
37
|
import { Popover } from 'primeng/popover';
|
|
38
38
|
import { Skeleton } from 'primeng/skeleton';
|
|
39
39
|
import { SplitButton } from 'primeng/splitbutton';
|
|
40
|
-
import { PrimeNG } from 'primeng/config';
|
|
41
40
|
import { Router, ActivatedRoute, NavigationStart, NavigationEnd, NavigationCancel, NavigationError } from '@angular/router';
|
|
42
41
|
import { getI18nForModel } from '@mediusinc/mng-commons/model';
|
|
42
|
+
import { PrimeNG } from 'primeng/config';
|
|
43
43
|
|
|
44
44
|
const VALUE_ACCESSOR = {
|
|
45
45
|
provide: NG_VALUE_ACCESSOR,
|
|
@@ -1369,150 +1369,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
1369
1369
|
}, encapsulation: ViewEncapsulation.None, template: "<div>\n <div class=\"flex items-center gap-2\">\n <h5>{{ filter() ? ('mngFilter.titleEdit' | translate) : ('mngFilter.titleAdd' | translate) }}</h5>\n @if (!filter()) {\n <div class=\"text-sm opacity-50 font-normal self-start pt-[2px]\">( {{ addFilterShortcutText }} )</div>\n }\n </div>\n <form #filterForm=\"ngForm\" (ngSubmit)=\"onFormSubmit(filterForm)\" class=\"flex flex-col items-baseline 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.In || matchModeModel() === FilterMatchMode.NotIn) {\n <mng-table-filter-input-multi-value\n name=\"value\"\n [(ngModel)]=\"valueModel\"\n [filterType]=\"selectedFilterMetadata()?.descriptor?.filterType\"\n [disabled]=\"!matchModeModel()\" />\n } @else 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 vertical=\"true\"\n [showTime]=\"selectedFilterMetadata()?.dateConfig?.showTime\"\n [showSeconds]=\"selectedFilterMetadata()?.dateConfig?.showSeconds\"\n [milliseconds]=\"selectedFilterMetadata()?.dateConfig?.showMilliseconds\"\n [primeTimePicker]=\"selectedFilterMetadata()?.dateConfig?.primeTimePicker\"\n [timeSelect]=\"selectedFilterMetadata()?.dateConfig?.timeSelect\"\n [timeSelectInterval]=\"selectedFilterMetadata()?.dateConfig?.timeSelectInterval\"\n [dateFormat]=\"selectedFilterMetadata()?.dateConfig?.format\"\n [placeholder]=\"'mngFilter.value' | translate\"\n required=\"true\" />\n } @else {\n <mng-datetime-picker\n name=\"value\"\n className=\"w-full\"\n [(ngModel)]=\"valueModel\"\n [placeholder]=\"'mngFilter.value' | translate\"\n showIcon=\"true\"\n [time]=\"selectedFilterMetadata()?.dateConfig?.showTime\"\n [seconds]=\"selectedFilterMetadata()?.dateConfig?.showSeconds\"\n [milliseconds]=\"selectedFilterMetadata()?.dateConfig?.showMilliseconds\"\n [primeTimePicker]=\"selectedFilterMetadata()?.dateConfig?.primeTimePicker\"\n [timeSelect]=\"selectedFilterMetadata()?.dateConfig?.timeSelect\"\n [timeSelectInterval]=\"selectedFilterMetadata()?.dateConfig?.timeSelectInterval\"\n [dateFormat]=\"selectedFilterMetadata()?.dateConfig?.format\"\n [disabled]=\"!matchModeModel()\"\n required=\"true\" />\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 if (matchModeModel() === FilterMatchMode.In || matchModeModel() === FilterMatchMode.NotIn) {\n <mng-table-filter-input-multi-value\n name=\"value\"\n [(ngModel)]=\"valueModel\"\n [filterType]=\"selectedFilterMetadata()?.descriptor?.filterType\"\n [enableCaseSensitive]=\"enableCaseSensitive()\"\n [(caseSensitiveModel)]=\"caseSensitiveModel\"\n [inputTrim]=\"selectedFilterMetadata()?.descriptor?.trimOption\"\n [disabled]=\"!matchModeModel()\" />\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.inlineSearch ?? 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 [inlineSearch]=\"lookupFilterDescriptor.inlineSearch ?? false\"\n [allowInput]=\"lookupFilterDescriptor.dropdownAllowInput ?? false\"\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=\"mng-filter-submit-button 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"] }]
|
|
1370
1370
|
}], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], metadata: [{ type: i0.Input, args: [{ isSignal: true, alias: "metadata", required: true }] }], genericDescriptor: [{ type: i0.Input, args: [{ isSignal: true, alias: "genericDescriptor", required: false }] }], model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: true }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], overlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlay", required: false }] }], disabledProperties: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledProperties", required: false }] }], enableCaseSensitive: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableCaseSensitive", required: false }] }], propertySearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "propertySearch", required: false }] }], apply: [{ type: i0.Output, args: ["apply"] }], filterForm: [{ type: i0.ViewChild, args: ['filterForm', { isSignal: true }] }] } });
|
|
1371
1371
|
|
|
1372
|
-
|
|
1373
|
-
|
|
1374
|
-
|
|
1375
|
-
static { this.cmpTypeName = 'TableComponent'; }
|
|
1376
|
-
#injector;
|
|
1377
|
-
#primeConfig;
|
|
1378
|
-
#tableModuleConfig;
|
|
1379
|
-
#translationObserver;
|
|
1380
|
-
// signal sources
|
|
1381
|
-
#signalSources;
|
|
1382
|
-
#descriptor;
|
|
1383
|
-
// eslint-disable-next-line no-unused-private-class-members
|
|
1384
|
-
#updateDescriptorFromSourceEffect;
|
|
1385
|
-
#genericFilters;
|
|
1386
|
-
// search
|
|
1387
|
-
#searchFieldsFromSignalSource;
|
|
1388
|
-
#searchFields;
|
|
1389
|
-
// eslint-disable-next-line no-unused-private-class-members
|
|
1390
|
-
#searchFieldsEffect;
|
|
1391
|
-
constructor() {
|
|
1392
|
-
this.#injector = inject(Injector);
|
|
1393
|
-
this.#primeConfig = inject(PrimeNG);
|
|
1394
|
-
this.moduleConfig = inject(COMMONS_MODULE_CONFIG_IT, { optional: true });
|
|
1395
|
-
this.#tableModuleConfig = inject(COMMONS_TABLE_FEATURE_CONFIG_IT, { optional: true });
|
|
1396
|
-
this.serializationCfg = {};
|
|
1397
|
-
this.#translationObserver = toSignal(this.#primeConfig.translationObserver);
|
|
1398
|
-
// signal sources
|
|
1399
|
-
this.#signalSources = signal({}, ...(ngDevMode ? [{ debugName: "#signalSources" }] : []));
|
|
1400
|
-
// config
|
|
1401
|
-
this.tableConfig = computed(() => ({ ...this.#tableModuleConfig, ...this.#signalSources().featureConfig?.() }), ...(ngDevMode ? [{ debugName: "tableConfig" }] : []));
|
|
1402
|
-
this.defaultFilterDisplayType = computed(() => this.tableConfig()?.filterDisplayType ?? FilterDisplayTypeEnum.OverlayWithTag, ...(ngDevMode ? [{ debugName: "defaultFilterDisplayType" }] : []));
|
|
1403
|
-
// descriptors
|
|
1404
|
-
this.descriptorFromSource = computed(() => this.#signalSources().descriptor?.(), ...(ngDevMode ? [{ debugName: "descriptorFromSource" }] : []));
|
|
1405
|
-
this.#descriptor = signal(tableDescriptor(), ...(ngDevMode ? [{ debugName: "#descriptor" }] : []));
|
|
1406
|
-
this.descriptor = this.#descriptor.asReadonly();
|
|
1407
|
-
// eslint-disable-next-line no-unused-private-class-members
|
|
1408
|
-
this.#updateDescriptorFromSourceEffect = effectWithDeps([this.descriptorFromSource], ([d]) => {
|
|
1409
|
-
if (d != null) {
|
|
1410
|
-
this.#descriptor.set(d);
|
|
1411
|
-
}
|
|
1412
|
-
});
|
|
1413
|
-
// pagination
|
|
1414
|
-
this.rowsPerPageOptions = computed(() => {
|
|
1415
|
-
const rowsPerPageOptions = this.descriptor().rowsPerPageOptions ?? this.tableConfig().rowsPerPageOptions;
|
|
1416
|
-
if (Array.isArray(rowsPerPageOptions) && rowsPerPageOptions.length > 0) {
|
|
1417
|
-
return rowsPerPageOptions;
|
|
1418
|
-
}
|
|
1419
|
-
else {
|
|
1420
|
-
return [25, 50, 100];
|
|
1421
|
-
}
|
|
1422
|
-
}, ...(ngDevMode ? [{ debugName: "rowsPerPageOptions" }] : []));
|
|
1423
|
-
this.defaultRowsPerPage = computed(() => {
|
|
1424
|
-
const defaultNumRows = this.descriptor().defaultNumRows ?? this.tableConfig().defaultNumRows;
|
|
1425
|
-
const rowsPerPageOptions = this.rowsPerPageOptions();
|
|
1426
|
-
if (defaultNumRows && rowsPerPageOptions.includes(defaultNumRows)) {
|
|
1427
|
-
return defaultNumRows;
|
|
1428
|
-
}
|
|
1429
|
-
return rowsPerPageOptions[0];
|
|
1430
|
-
}, ...(ngDevMode ? [{ debugName: "defaultRowsPerPage" }] : []));
|
|
1431
|
-
// filters
|
|
1432
|
-
this.filterDescriptors = computed(() => this.descriptor().filters, ...(ngDevMode ? [{ debugName: "filterDescriptors" }] : []));
|
|
1433
|
-
this.filters = computed(() => {
|
|
1434
|
-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
1435
|
-
const observer = this.#translationObserver(); // need this one to track language changes
|
|
1436
|
-
return this.filterDescriptors().map(d => this.mapFilterDescriptorToConfig(d));
|
|
1437
|
-
}, ...(ngDevMode ? [{ debugName: "filters" }] : []));
|
|
1438
|
-
this.genericFilterDescriptor = computed(() => this.descriptor().genericFilter, ...(ngDevMode ? [{ debugName: "genericFilterDescriptor" }] : []));
|
|
1439
|
-
this.#genericFilters = signal([], ...(ngDevMode ? [{ debugName: "#genericFilters" }] : []));
|
|
1440
|
-
this.genericFilters = this.#genericFilters.asReadonly();
|
|
1441
|
-
// search
|
|
1442
|
-
this.#searchFieldsFromSignalSource = computed(() => this.#signalSources().searchFields?.(), ...(ngDevMode ? [{ debugName: "#searchFieldsFromSignalSource" }] : []));
|
|
1443
|
-
this.#searchFields = signal([], ...(ngDevMode ? [{ debugName: "#searchFields" }] : []));
|
|
1444
|
-
this.searchFields = this.#searchFields.asReadonly();
|
|
1445
|
-
// eslint-disable-next-line no-unused-private-class-members
|
|
1446
|
-
this.#searchFieldsEffect = effectWithDeps([this.descriptor, this.#searchFieldsFromSignalSource], ([descriptor, searchFieldsFromSignalSource]) => {
|
|
1447
|
-
this.#searchFields.set(searchFieldsFromSignalSource ?? (descriptor.search && descriptor.searchFields ? descriptor.searchFields : this.descriptor().columns.map(c => c.property)));
|
|
1448
|
-
});
|
|
1449
|
-
// params
|
|
1450
|
-
this.defaultParams = computed(() => {
|
|
1451
|
-
const descriptor = this.descriptor();
|
|
1452
|
-
const params = {
|
|
1453
|
-
offset: 0,
|
|
1454
|
-
limit: this.defaultRowsPerPage(),
|
|
1455
|
-
sort: this.descriptor()
|
|
1456
|
-
.sorts.filter(s => s.defaultIsEnabled)
|
|
1457
|
-
.sort((s1, s2) => (s1.defaultOrder ?? 1000) - (s2.defaultOrder ?? 1000))
|
|
1458
|
-
.map(s => ({
|
|
1459
|
-
property: s.property,
|
|
1460
|
-
ascending: s.defaultIsAscending
|
|
1461
|
-
})),
|
|
1462
|
-
filters: {}
|
|
1463
|
-
};
|
|
1464
|
-
this.filters()
|
|
1465
|
-
.filter(f => f.descriptor.hasDefaultValue)
|
|
1466
|
-
.forEach(f => {
|
|
1467
|
-
params.filters[f.descriptor.property] = {
|
|
1468
|
-
value: f.descriptor.defaultValue,
|
|
1469
|
-
matchMode: f.defaultMatchMode
|
|
1470
|
-
};
|
|
1471
|
-
});
|
|
1472
|
-
return params;
|
|
1473
|
-
}, ...(ngDevMode ? [{ debugName: "defaultParams" }] : []));
|
|
1474
|
-
filterApplySerializationConfigToCmp(this.moduleConfig, this.serializationCfg);
|
|
1475
|
-
combineLatest([toObservable(this.genericFilterDescriptor), toObservable(this.#translationObserver)])
|
|
1476
|
-
.pipe(switchMap(([genericFilterDescriptor]) => {
|
|
1477
|
-
if (genericFilterDescriptor) {
|
|
1478
|
-
const dataProvider = this.genericFilterDescriptor()?.propertyLookup;
|
|
1479
|
-
const genericFilterService = dataProvider?.serviceType ? this.#injector.get(dataProvider.serviceType) : null;
|
|
1480
|
-
// fetch filterable properties
|
|
1481
|
-
return toObservable$1(genericFilterDescriptor.propertyLookup.lookup({}, genericFilterService));
|
|
1482
|
-
}
|
|
1483
|
-
return of([]);
|
|
1484
|
-
}), takeUntilDestroyed())
|
|
1485
|
-
.subscribe({
|
|
1486
|
-
next: genericFilters => {
|
|
1487
|
-
// set descriptors from generic filter data
|
|
1488
|
-
this.#genericFilters.set(createFilterDescriptorsFromGeneric(genericFilters, this.genericFilterDescriptor()?.valueLookup).map(d => this.mapFilterDescriptorToConfig(d)));
|
|
1489
|
-
}
|
|
1490
|
-
});
|
|
1491
|
-
}
|
|
1492
|
-
setSignalSources(sources) {
|
|
1493
|
-
this.#signalSources.set(sources);
|
|
1494
|
-
}
|
|
1495
|
-
setDescriptor(descriptor) {
|
|
1496
|
-
if (this.descriptorFromSource() instanceof TableDynamicDescriptorInst) {
|
|
1497
|
-
this.#descriptor.set(descriptor);
|
|
1498
|
-
}
|
|
1499
|
-
}
|
|
1500
|
-
mapFilterDescriptorToConfig(descriptor) {
|
|
1501
|
-
const matchModes = filterGenerateMatchModeOptions(this.#primeConfig, descriptor, this.serializationCfg);
|
|
1502
|
-
return {
|
|
1503
|
-
descriptor: descriptor,
|
|
1504
|
-
matchModes: matchModes,
|
|
1505
|
-
defaultMatchMode: filterGetDefaultMatchMode(descriptor, matchModes),
|
|
1506
|
-
dateConfig: filterGetDateConfig(descriptor, this.serializationCfg),
|
|
1507
|
-
numberConfig: filterGetNumberConfig(descriptor)
|
|
1508
|
-
};
|
|
1509
|
-
}
|
|
1510
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TableMetadataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1511
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TableMetadataService }); }
|
|
1372
|
+
class ADataListMetaService {
|
|
1373
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ADataListMetaService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1374
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ADataListMetaService }); }
|
|
1512
1375
|
}
|
|
1513
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type:
|
|
1376
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ADataListMetaService, decorators: [{
|
|
1514
1377
|
type: Injectable
|
|
1515
|
-
}]
|
|
1378
|
+
}] });
|
|
1379
|
+
|
|
1380
|
+
const COMMONS_TABLE_FEATURE_CONFIG_IT = new InjectionToken('COMMONS_TABLE_FEATURE_CONFIG');
|
|
1516
1381
|
|
|
1517
1382
|
class TableHeaderWithFiltersTemplateDirective extends TemplateDirective {
|
|
1518
1383
|
constructor() {
|
|
@@ -1534,7 +1399,7 @@ class TableHeaderWithFiltersComponent {
|
|
|
1534
1399
|
constructor() {
|
|
1535
1400
|
this.translateService = inject(TranslateService);
|
|
1536
1401
|
this.tableData = inject((ADataListService));
|
|
1537
|
-
this.tableMetadata = inject(
|
|
1402
|
+
this.tableMetadata = inject(ADataListMetaService);
|
|
1538
1403
|
this.tableConfig = inject(COMMONS_TABLE_FEATURE_CONFIG_IT, { optional: true });
|
|
1539
1404
|
this.metadata = input.required(...(ngDevMode ? [{ debugName: "metadata" }] : []));
|
|
1540
1405
|
this.genericFilterDescriptor = input(...(ngDevMode ? [undefined, { debugName: "genericFilterDescriptor" }] : []));
|
|
@@ -1930,6 +1795,150 @@ function tableCreateSortState(paramsWithDefaults) {
|
|
|
1930
1795
|
return undefined;
|
|
1931
1796
|
}
|
|
1932
1797
|
|
|
1798
|
+
class TableMetadataService extends ADataListMetaService {
|
|
1799
|
+
static { this.cmpTypeName = 'TableComponent'; }
|
|
1800
|
+
#injector;
|
|
1801
|
+
#primeConfig;
|
|
1802
|
+
#tableModuleConfig;
|
|
1803
|
+
#translationObserver;
|
|
1804
|
+
// signal sources
|
|
1805
|
+
#signalSources;
|
|
1806
|
+
#descriptor;
|
|
1807
|
+
// eslint-disable-next-line no-unused-private-class-members
|
|
1808
|
+
#updateDescriptorFromSourceEffect;
|
|
1809
|
+
#genericFilters;
|
|
1810
|
+
// search
|
|
1811
|
+
#searchFieldsFromSignalSource;
|
|
1812
|
+
#searchFields;
|
|
1813
|
+
// eslint-disable-next-line no-unused-private-class-members
|
|
1814
|
+
#searchFieldsEffect;
|
|
1815
|
+
constructor() {
|
|
1816
|
+
super();
|
|
1817
|
+
this.#injector = inject(Injector);
|
|
1818
|
+
this.#primeConfig = inject(PrimeNG);
|
|
1819
|
+
this.moduleConfig = inject(COMMONS_MODULE_CONFIG_IT, { optional: true });
|
|
1820
|
+
this.#tableModuleConfig = inject(COMMONS_TABLE_FEATURE_CONFIG_IT, { optional: true });
|
|
1821
|
+
this.serializationCfg = {};
|
|
1822
|
+
this.#translationObserver = toSignal(this.#primeConfig.translationObserver);
|
|
1823
|
+
// signal sources
|
|
1824
|
+
this.#signalSources = signal({}, ...(ngDevMode ? [{ debugName: "#signalSources" }] : []));
|
|
1825
|
+
// config
|
|
1826
|
+
this.tableConfig = computed(() => ({ ...this.#tableModuleConfig, ...this.#signalSources().featureConfig?.() }), ...(ngDevMode ? [{ debugName: "tableConfig" }] : []));
|
|
1827
|
+
this.defaultFilterDisplayType = computed(() => this.tableConfig()?.filterDisplayType ?? FilterDisplayTypeEnum.OverlayWithTag, ...(ngDevMode ? [{ debugName: "defaultFilterDisplayType" }] : []));
|
|
1828
|
+
// descriptors
|
|
1829
|
+
this.descriptorFromSource = computed(() => this.#signalSources().descriptor?.(), ...(ngDevMode ? [{ debugName: "descriptorFromSource" }] : []));
|
|
1830
|
+
this.#descriptor = signal(tableDescriptor(), ...(ngDevMode ? [{ debugName: "#descriptor" }] : []));
|
|
1831
|
+
this.descriptor = this.#descriptor.asReadonly();
|
|
1832
|
+
// eslint-disable-next-line no-unused-private-class-members
|
|
1833
|
+
this.#updateDescriptorFromSourceEffect = effectWithDeps([this.descriptorFromSource], ([d]) => {
|
|
1834
|
+
if (d != null) {
|
|
1835
|
+
this.#descriptor.set(d);
|
|
1836
|
+
}
|
|
1837
|
+
});
|
|
1838
|
+
// pagination
|
|
1839
|
+
this.rowsPerPageOptions = computed(() => {
|
|
1840
|
+
const rowsPerPageOptions = this.descriptor().rowsPerPageOptions ?? this.tableConfig().rowsPerPageOptions;
|
|
1841
|
+
if (Array.isArray(rowsPerPageOptions) && rowsPerPageOptions.length > 0) {
|
|
1842
|
+
return rowsPerPageOptions;
|
|
1843
|
+
}
|
|
1844
|
+
else {
|
|
1845
|
+
return [25, 50, 100];
|
|
1846
|
+
}
|
|
1847
|
+
}, ...(ngDevMode ? [{ debugName: "rowsPerPageOptions" }] : []));
|
|
1848
|
+
this.defaultRowsPerPage = computed(() => {
|
|
1849
|
+
const defaultNumRows = this.descriptor().defaultNumRows ?? this.tableConfig().defaultNumRows;
|
|
1850
|
+
const rowsPerPageOptions = this.rowsPerPageOptions();
|
|
1851
|
+
if (defaultNumRows && rowsPerPageOptions.includes(defaultNumRows)) {
|
|
1852
|
+
return defaultNumRows;
|
|
1853
|
+
}
|
|
1854
|
+
return rowsPerPageOptions[0];
|
|
1855
|
+
}, ...(ngDevMode ? [{ debugName: "defaultRowsPerPage" }] : []));
|
|
1856
|
+
// filters
|
|
1857
|
+
this.filterDescriptors = computed(() => this.descriptor().filters, ...(ngDevMode ? [{ debugName: "filterDescriptors" }] : []));
|
|
1858
|
+
this.filters = computed(() => {
|
|
1859
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
1860
|
+
const observer = this.#translationObserver(); // need this one to track language changes
|
|
1861
|
+
return this.filterDescriptors().map(d => this.mapFilterDescriptorToConfig(d));
|
|
1862
|
+
}, ...(ngDevMode ? [{ debugName: "filters" }] : []));
|
|
1863
|
+
this.genericFilterDescriptor = computed(() => this.descriptor().genericFilter, ...(ngDevMode ? [{ debugName: "genericFilterDescriptor" }] : []));
|
|
1864
|
+
this.#genericFilters = signal([], ...(ngDevMode ? [{ debugName: "#genericFilters" }] : []));
|
|
1865
|
+
this.genericFilters = this.#genericFilters.asReadonly();
|
|
1866
|
+
// search
|
|
1867
|
+
this.#searchFieldsFromSignalSource = computed(() => this.#signalSources().searchFields?.(), ...(ngDevMode ? [{ debugName: "#searchFieldsFromSignalSource" }] : []));
|
|
1868
|
+
this.#searchFields = signal([], ...(ngDevMode ? [{ debugName: "#searchFields" }] : []));
|
|
1869
|
+
this.searchFields = this.#searchFields.asReadonly();
|
|
1870
|
+
// eslint-disable-next-line no-unused-private-class-members
|
|
1871
|
+
this.#searchFieldsEffect = effectWithDeps([this.descriptor, this.#searchFieldsFromSignalSource], ([descriptor, searchFieldsFromSignalSource]) => {
|
|
1872
|
+
this.#searchFields.set(searchFieldsFromSignalSource ?? (descriptor.search && descriptor.searchFields ? descriptor.searchFields : this.descriptor().columns.map(c => c.property)));
|
|
1873
|
+
});
|
|
1874
|
+
// params
|
|
1875
|
+
this.defaultParams = computed(() => {
|
|
1876
|
+
const descriptor = this.descriptor();
|
|
1877
|
+
const params = {
|
|
1878
|
+
offset: 0,
|
|
1879
|
+
limit: this.defaultRowsPerPage(),
|
|
1880
|
+
sort: this.descriptor()
|
|
1881
|
+
.sorts.filter(s => s.defaultIsEnabled)
|
|
1882
|
+
.sort((s1, s2) => (s1.defaultOrder ?? 1000) - (s2.defaultOrder ?? 1000))
|
|
1883
|
+
.map(s => ({
|
|
1884
|
+
property: s.property,
|
|
1885
|
+
ascending: s.defaultIsAscending
|
|
1886
|
+
})),
|
|
1887
|
+
filters: {}
|
|
1888
|
+
};
|
|
1889
|
+
this.filters()
|
|
1890
|
+
.filter(f => f.descriptor.hasDefaultValue)
|
|
1891
|
+
.forEach(f => {
|
|
1892
|
+
params.filters[f.descriptor.property] = {
|
|
1893
|
+
value: f.descriptor.defaultValue,
|
|
1894
|
+
matchMode: f.defaultMatchMode
|
|
1895
|
+
};
|
|
1896
|
+
});
|
|
1897
|
+
return params;
|
|
1898
|
+
}, ...(ngDevMode ? [{ debugName: "defaultParams" }] : []));
|
|
1899
|
+
filterApplySerializationConfigToCmp(this.moduleConfig, this.serializationCfg);
|
|
1900
|
+
combineLatest([toObservable(this.genericFilterDescriptor), toObservable(this.#translationObserver)])
|
|
1901
|
+
.pipe(switchMap(([genericFilterDescriptor]) => {
|
|
1902
|
+
if (genericFilterDescriptor) {
|
|
1903
|
+
const dataProvider = this.genericFilterDescriptor()?.propertyLookup;
|
|
1904
|
+
const genericFilterService = dataProvider?.serviceType ? this.#injector.get(dataProvider.serviceType) : null;
|
|
1905
|
+
// fetch filterable properties
|
|
1906
|
+
return toObservable$1(genericFilterDescriptor.propertyLookup.lookup({}, genericFilterService));
|
|
1907
|
+
}
|
|
1908
|
+
return of([]);
|
|
1909
|
+
}), takeUntilDestroyed())
|
|
1910
|
+
.subscribe({
|
|
1911
|
+
next: genericFilters => {
|
|
1912
|
+
// set descriptors from generic filter data
|
|
1913
|
+
this.#genericFilters.set(createFilterDescriptorsFromGeneric(genericFilters, this.genericFilterDescriptor()?.valueLookup).map(d => this.mapFilterDescriptorToConfig(d)));
|
|
1914
|
+
}
|
|
1915
|
+
});
|
|
1916
|
+
}
|
|
1917
|
+
setSignalSources(sources) {
|
|
1918
|
+
this.#signalSources.set(sources);
|
|
1919
|
+
}
|
|
1920
|
+
setDescriptor(descriptor) {
|
|
1921
|
+
if (this.descriptorFromSource() instanceof TableDynamicDescriptorInst) {
|
|
1922
|
+
this.#descriptor.set(descriptor);
|
|
1923
|
+
}
|
|
1924
|
+
}
|
|
1925
|
+
mapFilterDescriptorToConfig(descriptor) {
|
|
1926
|
+
const matchModes = filterGenerateMatchModeOptions(this.#primeConfig, descriptor, this.serializationCfg);
|
|
1927
|
+
return {
|
|
1928
|
+
descriptor: descriptor,
|
|
1929
|
+
matchModes: matchModes,
|
|
1930
|
+
defaultMatchMode: filterGetDefaultMatchMode(descriptor, matchModes),
|
|
1931
|
+
dateConfig: filterGetDateConfig(descriptor, this.serializationCfg),
|
|
1932
|
+
numberConfig: filterGetNumberConfig(descriptor)
|
|
1933
|
+
};
|
|
1934
|
+
}
|
|
1935
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TableMetadataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1936
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TableMetadataService }); }
|
|
1937
|
+
}
|
|
1938
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TableMetadataService, decorators: [{
|
|
1939
|
+
type: Injectable
|
|
1940
|
+
}], ctorParameters: () => [] });
|
|
1941
|
+
|
|
1933
1942
|
class TableDataService extends ADataListService {
|
|
1934
1943
|
#injector;
|
|
1935
1944
|
#destroyRef;
|
|
@@ -2687,9 +2696,15 @@ class TableComponent {
|
|
|
2687
2696
|
this.loadTableWithDataProvider(paramsWithDefaults);
|
|
2688
2697
|
}
|
|
2689
2698
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2690
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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 }, featureConfig: { classPropertyName: "featureConfig", publicName: "featureConfig", 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, { provide: ADataListService, useExisting: 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.sortStates()\"\n [filters]=\"data.primeFilterStates()\"\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 ?? metadata.tableConfig().columnResize ?? false\"\n [columnResizeMode]=\"metadata.descriptor().columnResizeMode ?? metadata.tableConfig().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 [metadata]=\"tableHeaderFilters()\"\n [genericFilterDescriptor]=\"metadata.genericFilterDescriptor()\"\n [model]=\"metadata.descriptor().model\"\n [enableSearch]=\"metadata.descriptor().search\"\n [search]=\"data.searchState()\"\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.reorderable) {\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 size=\"small\"\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 (hasLastColumn()) {\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 @if (columnCustomLastTemplate()) {\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 }\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$1.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$1.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i1$1.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "directive", type: i1$1.RowToggler, selector: "[pRowToggler]", inputs: ["pRowToggler", "pRowTogglerDisabled"] }, { kind: "directive", type: i1$1.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "directive", type: i1$1.ReorderableColumn, selector: "[pReorderableColumn]", inputs: ["pReorderableColumnDisabled"] }, { kind: "component", type: i1$1.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i1$1.TableRadioButton, selector: "p-tableRadioButton", inputs: ["value", "disabled", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i1$1.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i1$1.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "directive", type: i1$1.ReorderableRowHandle, selector: "[pReorderableRowHandle]" }, { kind: "directive", type: i1$1.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: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { 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-C9kHux4U.mjs').then(m => m.TableColumnToggleComponent)], () => [Promise.resolve().then(function () { return filter_component; }).then(m => m.TableFilterComponent)]] }); }
|
|
2699
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", 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 }, featureConfig: { classPropertyName: "featureConfig", publicName: "featureConfig", 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: [
|
|
2700
|
+
TableMetadataService,
|
|
2701
|
+
TableDataService,
|
|
2702
|
+
{ provide: ADataListService, useExisting: TableDataService },
|
|
2703
|
+
{ provide: ADataListMetaService, useExisting: TableMetadataService },
|
|
2704
|
+
TablePreferencesService
|
|
2705
|
+
], 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.sortStates()\"\n [filters]=\"data.primeFilterStates()\"\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 ?? metadata.tableConfig().columnResize ?? false\"\n [columnResizeMode]=\"metadata.descriptor().columnResizeMode ?? metadata.tableConfig().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 [metadata]=\"tableHeaderFilters()\"\n [genericFilterDescriptor]=\"metadata.genericFilterDescriptor()\"\n [model]=\"metadata.descriptor().model\"\n [enableSearch]=\"metadata.descriptor().search\"\n [search]=\"data.searchState()\"\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.reorderable) {\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 size=\"small\"\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 (hasLastColumn()) {\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 @if (columnCustomLastTemplate()) {\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 }\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$1.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$1.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i1$1.FrozenColumn, selector: "[pFrozenColumn]", inputs: ["frozen", "alignFrozen"] }, { kind: "directive", type: i1$1.RowToggler, selector: "[pRowToggler]", inputs: ["pRowToggler", "pRowTogglerDisabled"] }, { kind: "directive", type: i1$1.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "directive", type: i1$1.ReorderableColumn, selector: "[pReorderableColumn]", inputs: ["pReorderableColumnDisabled"] }, { kind: "component", type: i1$1.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i1$1.TableRadioButton, selector: "p-tableRadioButton", inputs: ["value", "disabled", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i1$1.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i1$1.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "directive", type: i1$1.ReorderableRowHandle, selector: "[pReorderableRowHandle]" }, { kind: "directive", type: i1$1.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: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { 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-BZU9-ZJV.mjs').then(m => m.TableColumnToggleComponent)], () => [Promise.resolve().then(function () { return filter_component; }).then(m => m.TableFilterComponent)]] }); }
|
|
2691
2706
|
}
|
|
2692
|
-
i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "21.0.8", ngImport: i0, type: TableComponent, resolveDeferredDeps: () => [import('./mediusinc-mng-commons-table-column-toggle.component-
|
|
2707
|
+
i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "21.0.8", ngImport: i0, type: TableComponent, resolveDeferredDeps: () => [import('./mediusinc-mng-commons-table-column-toggle.component-BZU9-ZJV.mjs').then(m => m.TableColumnToggleComponent), Promise.resolve().then(function () { return filter_component; }).then(m => m.TableFilterComponent)], resolveMetadata: (TableColumnToggleComponent, TableFilterComponent) => ({ decorators: [{
|
|
2693
2708
|
type: Component,
|
|
2694
2709
|
args: [{ selector: 'mng-table', imports: [
|
|
2695
2710
|
ComponentDirective,
|
|
@@ -2710,7 +2725,13 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "21.0.8", ng
|
|
|
2710
2725
|
ButtonDirective,
|
|
2711
2726
|
TableRemovableSortDirective,
|
|
2712
2727
|
TableHeaderWithFiltersTemplateDirective
|
|
2713
|
-
], providers: [
|
|
2728
|
+
], providers: [
|
|
2729
|
+
TableMetadataService,
|
|
2730
|
+
TableDataService,
|
|
2731
|
+
{ provide: ADataListService, useExisting: TableDataService },
|
|
2732
|
+
{ provide: ADataListMetaService, useExisting: TableMetadataService },
|
|
2733
|
+
TablePreferencesService
|
|
2734
|
+
], host: {
|
|
2714
2735
|
'[class.mng-table-no-header]': '!isCaptionVisible()'
|
|
2715
2736
|
}, 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.sortStates()\"\n [filters]=\"data.primeFilterStates()\"\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 ?? metadata.tableConfig().columnResize ?? false\"\n [columnResizeMode]=\"metadata.descriptor().columnResizeMode ?? metadata.tableConfig().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 [metadata]=\"tableHeaderFilters()\"\n [genericFilterDescriptor]=\"metadata.genericFilterDescriptor()\"\n [model]=\"metadata.descriptor().model\"\n [enableSearch]=\"metadata.descriptor().search\"\n [search]=\"data.searchState()\"\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.reorderable) {\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 size=\"small\"\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 (hasLastColumn()) {\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 @if (columnCustomLastTemplate()) {\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 }\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"] }]
|
|
2716
2737
|
}], ctorParameters: () => [], propDecorators: { descriptorInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "descriptor", required: true }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], result: [{ type: i0.Input, args: [{ isSignal: true, alias: "result", required: false }] }], loadingInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], dataProvider: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataProvider", required: false }] }], useQueryParams: [{ type: i0.Input, args: [{ isSignal: true, alias: "useQueryParams", required: false }] }], cellClickEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellClickEnabled", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], selectionEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionEnabled", required: false }] }], rowReorderEnabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowReorderEnabled", required: false }] }], featureConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "featureConfig", required: false }] }], columnLastMinWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnLastMinWidth", required: false }] }], globalFilterFieldsInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "globalFilterFields", required: false }] }], tableLoad: [{ type: i0.Output, args: ["tableLoad"] }], cellClick: [{ type: i0.Output, args: ["cellClick"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], rowReorder: [{ type: i0.Output, args: ["rowReorder"] }], templates: [{ type: i0.Input, args: [{ isSignal: true, alias: "templates", required: false }] }], contentTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => TableTemplateDirective), { isSignal: true }] }], primeTable: [{ type: i0.ViewChild, args: [i0.forwardRef(() => Table), { isSignal: true }] }] } }) });
|
|
@@ -2751,5 +2772,5 @@ function provideTableChild(config) {
|
|
|
2751
2772
|
* Generated bundle index. Do not edit.
|
|
2752
2773
|
*/
|
|
2753
2774
|
|
|
2754
|
-
export { ADataListService as A,
|
|
2755
|
-
//# sourceMappingURL=mediusinc-mng-commons-table-mediusinc-mng-commons-table-
|
|
2775
|
+
export { ADataListService as A, ADataListMetaService as B, TableDataService as C, COMMONS_TABLE_FEATURE_CONFIG_IT as D, withTable as E, FilterService as F, provideTableChild as G, LocaleDefaultRowClassPipe as L, TableMetadataService as T, TablePreferencesService as a, TableFilterComponent as b, TableColumnValueComponent as c, TableFilterActiveTagComponent as d, TableFilterFormComponent as e, TableHeaderWithFiltersComponent as f, TableHeaderWithFiltersTemplateDirective as g, TableComponent as h, TableTemplateDirective as i, filterGenerateMatchModeOptions as j, filterGetDefaultMatchMode as k, filterSetStateOnChange as l, filterSetStateOnDisplayChange as m, filterAreDatesEqual as n, filterApplySerializationConfigToCmp as o, filterAdjustDisplayValueOnMatchModeChange as p, filterGetDateConfig as q, filterGetNumberConfig as r, createFilterDescriptorsFromGeneric as s, isFilterValueBlank as t, tableNotificationError as u, tableCreateFilterState as v, tableCreateSortState as w, generateTableLayoutPrefsKey as x, FilterValuePipe as y, TableFilterClassPipe as z };
|
|
2776
|
+
//# sourceMappingURL=mediusinc-mng-commons-table-mediusinc-mng-commons-table-D-cGtZ6e.mjs.map
|