@mediusinc/mng-commons 5.0.0-rc.0-c31d5206 → 5.0.0-rc.1

package/fesm2022/mediusinc-mng-commons-table.mjs

@@ -0,0 +1,1376 @@
+import { trigger, transition, style, animate } from '@angular/animations';
+import { NgClass, DecimalPipe, CurrencyPipe, DatePipe, NgStyle, NgTemplateOutlet, AsyncPipe } from '@angular/common';
+import * as i0 from '@angular/core';
+import { signal, Injectable, inject, ElementRef, Renderer2, ChangeDetectorRef, computed, effect, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, ViewChild, HostBinding, Pipe, Injector, DestroyRef, EventEmitter, contentChildren, Output, ViewChildren } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i3 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import * as i2 from '@ngx-translate/core';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import * as i1 from 'primeng/api';
+import { PrimeNGConfig, OverlayService, TranslationKeys, MessageService } from 'primeng/api';
+import * as i2$1 from 'primeng/calendar';
+import { CalendarModule } from 'primeng/calendar';
+import { DomHandler, ConnectedOverlayScrollHandler } from 'primeng/dom';
+import { FilterIcon } from 'primeng/icons/filter';
+import { FilterSlashIcon } from 'primeng/icons/filterslash';
+import * as i5 from 'primeng/inputnumber';
+import { InputNumberModule } from 'primeng/inputnumber';
+import * as i6 from 'primeng/inputtext';
+import { InputTextModule } from 'primeng/inputtext';
+import * as i1$1 from 'primeng/table';
+import { Table, TableModule } from 'primeng/table';
+import * as i4 from 'primeng/tristatecheckbox';
+import { TriStateCheckboxModule } from 'primeng/tristatecheckbox';
+import { ZIndexUtils } from 'primeng/utils';
+import { Subject, debounceTime, distinctUntilChanged, isObservable, of } from 'rxjs';
+import { COMMONS_MODULE_CONFIG_IT, FilterMatchMode, dateToIsoString, GetterPipe, TemplatePipe, BooleanPipe, EnumPipe, ComponentDirective, toastMessage, CommonsService, LoggerService, LocalStorageService, TemplateDirective, findTemplateByName, mergeDataListParamsWithDefaults, fromTableLoadToDataListParams, dataListParamsToUrlQuery, toObservable, fromSubscribeError, getErrorLogLevel, fromUrlQueryToDataListParams, boolean$Attribute, I18nPropertyPipe, ClassMapPipe } from '@mediusinc/mng-commons/core';
+import { FilterLookupTypeEnum, FilterTypeEnum } from '@mediusinc/mng-commons/filter';
+import { DateRangeComponent, AutocompleteComponent, DropdownComponent, InputTrimDirective } from '@mediusinc/mng-commons/form';
+import * as i4$1 from 'primeng/button';
+import { ButtonModule } from 'primeng/button';
+import * as i5$1 from 'primeng/ripple';
+import { RippleModule } from 'primeng/ripple';
+import * as i3$1 from 'primeng/tooltip';
+import { TooltipModule } from 'primeng/tooltip';
+import { ColumnDisplayTypeEnum, TableDescriptor, TableSizeEnum, TablePaginationModeEnum, TableDynamicDescriptorInst } from '@mediusinc/mng-commons/table/api';
+import { Router, ActivatedRoute, NavigationStart, NavigationEnd, NavigationCancel, NavigationError } from '@angular/router';
+import * as i3$2 from 'primeng/multiselect';
+import { MultiSelectModule } from 'primeng/multiselect';
+import { filter } from 'rxjs/operators';
+import { getI18nForModel } from '@mediusinc/mng-commons/model';
+
+class DataListService {
+    constructor() {
+        // pagination
+        this.sortMeta = signal(null);
+        this.filterMeta = signal({});
+        this.rowsPerPageOptions = signal([25, 50, 100]);
+        this.rows = signal(this.rowsPerPageOptions()[0]);
+        this.offset = signal(0);
+        this.globalFilterFields = signal([]);
+        // data
+        this.data = signal([]);
+        this.count = signal(0);
+        this.loading = signal(true);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: DataListService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: DataListService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: DataListService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * Cannot be on push change detection strategy because of filter updates triggered from route which causes to force update values in force metadata
+ * and these must be propagated through to this component and beyond to primeNG.
+ */
+class TableColumnFilterFullComponent {
+    constructor() {
+        this.lookupTypeDropdown = FilterLookupTypeEnum.Dropdown;
+        this.lookupTypeAutocomplete = FilterLookupTypeEnum.Autocomplete;
+        this.el = inject(ElementRef);
+        this.primeTable = inject(Table);
+        this.dataListService = inject((DataListService));
+        this.moduleConfig = inject(COMMONS_MODULE_CONFIG_IT, { optional: true });
+        this.renderer = inject(Renderer2);
+        this.primeConfig = inject(PrimeNGConfig);
+        this.overlayService = inject(OverlayService);
+        this.cd = inject(ChangeDetectorRef);
+        this.document = window.document;
+        this.primeType = 'text';
+        // public matchModes: SelectItem[] = [];
+        this.matchModes = signal([]);
+        this.filterConstraint = signal(undefined);
+        this.isFilterSet = computed(() => this.filterConstraint()?.matchMode === FilterMatchMode.Exists ||
+            this.filterConstraint()?.matchMode === FilterMatchMode.DoesNotExist ||
+            !this.primeTable.isFilterBlank(this.filterConstraint()?.value));
+        this.isInputDisabled = computed(() => this.filterConstraint()?.matchMode === FilterMatchMode.Exists || this.filterConstraint()?.matchMode === FilterMatchMode.DoesNotExist);
+        this.overlayVisible = signal(false);
+        this.window = this.document.defaultView;
+        this.dateDebounceSubject = new Subject();
+        this.dateTimeInUtc = false;
+        this.dateTimeWithTimezone = true;
+        this.dateTimeWithMillis = true;
+        this.dateOnlyDisabled = false;
+        this.dateDebounceSubject.pipe(debounceTime(500), distinctUntilChanged(), takeUntilDestroyed()).subscribe(v => {
+            if (this.filterConstraint()?.displayMatchMode === FilterMatchMode.Equals && this.filterConstraint()?.matchMode === FilterMatchMode.Between && v !== null) {
+                const dateValue = Array.isArray(v) ? v[0] : v; // could have empty array
+                if (dateValue) {
+                    const fromDate = new Date(dateValue);
+                    const toDate = new Date(dateValue);
+                    if (this.descriptor.datePickerShowTime) {
+                        if (this.descriptor.datePickerShowSeconds) {
+                            fromDate.setMilliseconds(0);
+                            toDate.setMilliseconds(999);
+                        }
+                        else {
+                            fromDate.setSeconds(0, 0);
+                            toDate.setSeconds(59, 0);
+                        }
+                    }
+                    else {
+                        fromDate.setHours(0, 0, 0, 0);
+                        toDate.setHours(23, 59, 59, 999);
+                    }
+                    // adjust to settings
+                    v = [fromDate, toDate];
+                }
+                else {
+                    v = null;
+                }
+            }
+            const convertDateType = this.descriptor.datePickerValueNoTime || (!this.dateOnlyDisabled && !this.descriptor.datePickerShowTime) ? 'date' : 'date-time';
+            const convertDateTimeOpts = {
+                utc: this.descriptor.datePickerValueUtc ?? this.dateTimeInUtc,
+                noMillis: !this.dateTimeWithMillis,
+                noTimezone: this.descriptor.datePickerValueNoTimezone ?? !this.dateTimeWithTimezone
+            };
+            this.updateFilterValue(v == null
+                ? v
+                : Array.isArray(v)
+                    ? v.filter(i => i != null).map(i => dateToIsoString(i, convertDateType, convertDateTimeOpts))
+                    : dateToIsoString(v, convertDateType, convertDateTimeOpts));
+        });
+        effect(() => {
+            const fieldFilterMeta = this.dataListService.filterMeta()[this.primeField];
+            if (fieldFilterMeta &&
+                (!this.filterConstraint() || this.filterConstraint().value !== fieldFilterMeta.value || this.filterConstraint().matchMode !== fieldFilterMeta.matchMode)) {
+                this.setFilterConstraint(fieldFilterMeta);
+            }
+        }, { allowSignalWrites: true });
+    }
+    ngOnInit() {
+        if (this.moduleConfig?.serialization) {
+            if (this.moduleConfig.serialization.dateTimeInUtc !== undefined)
+                this.dateTimeInUtc = this.moduleConfig.serialization.dateTimeInUtc;
+            if (this.moduleConfig.serialization.dateTimeWithTimezone !== undefined)
+                this.dateTimeWithTimezone = this.moduleConfig.serialization.dateTimeWithTimezone;
+            if (this.moduleConfig.serialization.dateTimeWithMillis !== undefined)
+                this.dateTimeWithMillis = this.moduleConfig.serialization.dateTimeWithMillis;
+            if (this.moduleConfig.serialization.filtersDateOnlyDisabled !== undefined)
+                this.dateOnlyDisabled = this.moduleConfig.serialization.filtersDateOnlyDisabled;
+        }
+        this.primeField = this.descriptor.property;
+        switch (this.descriptor.filterType) {
+            case FilterTypeEnum.Boolean:
+                this.primeType = 'boolean';
+                break;
+            case FilterTypeEnum.Number:
+                this.primeType = 'numeric';
+                break;
+            case FilterTypeEnum.Date:
+                this.primeType = 'date';
+                break;
+            case FilterTypeEnum.Lookup:
+            case FilterTypeEnum.LookupEnum:
+                this.primeType = 'lookup';
+                this.lookupDescriptor = this.descriptor;
+                break;
+            case FilterTypeEnum.String:
+                this.primeType = 'text';
+                break;
+        }
+        // generate match mode options
+        this.translationSubscription = this.primeConfig.translationObserver.subscribe(() => {
+            this.generateMatchModeOptions();
+        });
+        this.generateMatchModeOptions();
+        this.initFilterConstraint();
+    }
+    ngOnDestroy() {
+        if (this.overlay) {
+            this.renderer.appendChild(this.el.nativeElement, this.overlay);
+            ZIndexUtils.clear(this.overlay);
+            this.onOverlayHide();
+        }
+        this.translationSubscription?.unsubscribe();
+        this.resetSubscription?.unsubscribe();
+        this.overlaySubscription?.unsubscribe();
+        this.tableFilterMetadataSubscription?.unsubscribe();
+    }
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    onTextModelChange(event) {
+        const value = event.target.value;
+        if (value === '') {
+            this.updateFilterValue(value);
+        }
+    }
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    onTextInputEnterKeyDown(event) {
+        const value = event.target.value;
+        this.updateFilterValue(value);
+        event.preventDefault();
+    }
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    onNumericModelChange(value) {
+        if (value === null) {
+            this.updateFilterValue(value);
+        }
+    }
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    onNumericInputKeyDown(event) {
+        if (event.key === 'Enter') {
+            const value = event?.target?.value ?? null;
+            this.updateFilterValue(value !== null ? +value : null);
+            event.preventDefault();
+        }
+    }
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    onTristateModelChange(value) {
+        this.updateFilterValue(value);
+    }
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    dateFilter(value) {
+        if (this.filterConstraint()?.displayMatchMode === FilterMatchMode.Between && Array.isArray(value)) {
+            const dateValues = value.filter(v => v instanceof Date);
+            if (dateValues.length !== 2) {
+                return;
+            }
+        }
+        this.dateDebounceSubject.next(value);
+    }
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    autocompleteFilter(value) {
+        this.updateFilterValue(value);
+    }
+    // eslint-disable-next-line @typescript-eslint/ban-types, @typescript-eslint/no-explicit-any
+    dropdownFilter(value) {
+        if (Array.isArray(value) && value.length === 0) {
+            value = undefined;
+        }
+        this.updateFilterValue(value);
+    }
+    onMatchModeChange(matchMode) {
+        this.setFilterConstraint({ ...this.filterConstraint(), matchMode: matchMode });
+        this.updateDtFilter();
+        this.hideOverlay();
+    }
+    onMatchModeKeyDown(event) {
+        const item = event.target;
+        switch (event.key) {
+            case 'ArrowDown':
+                // eslint-disable-next-line no-case-declarations
+                const nextItem = this.findNextMenuModeItem(item);
+                if (nextItem) {
+                    item.removeAttribute('tabindex');
+                    nextItem.tabIndex = '0';
+                    nextItem.focus();
+                }
+                event.preventDefault();
+                break;
+            case 'ArrowUp':
+                // eslint-disable-next-line no-case-declarations
+                const prevItem = this.findPrevMenuModeItem(item);
+                if (prevItem) {
+                    item.removeAttribute('tabindex');
+                    prevItem.tabIndex = '0';
+                    prevItem.focus();
+                }
+                event.preventDefault();
+                break;
+        }
+    }
+    onRowClearItemClick() {
+        this.clearFilter();
+        this.hideOverlay();
+    }
+    toggleMenu(event) {
+        this.overlayVisible.set(!this.overlayVisible());
+        event.stopPropagation();
+    }
+    onToggleButtonKeyDown(event) {
+        switch (event.key) {
+            case 'Escape':
+            case 'Tab':
+                this.overlayVisible.set(false);
+                break;
+            case 'ArrowDown':
+                if (this.overlayVisible()) {
+                    const focusable = DomHandler.getFocusableElements(this.overlay);
+                    if (focusable) {
+                        focusable[0].focus();
+                    }
+                    event.preventDefault();
+                }
+                else if (event.altKey) {
+                    this.overlayVisible.set(true);
+                    event.preventDefault();
+                }
+                break;
+        }
+    }
+    onEscape() {
+        this.overlayVisible.set(false);
+    }
+    onContentClick() {
+        this.selfClick = true;
+    }
+    // onOverlayAnimationStart(event: AnimationEvent) {
+    onOverlayAnimationStart(event) {
+        switch (event.toState) {
+            case 'visible':
+                this.overlay = event.element;
+                this.renderer.appendChild(this.document.body, this.overlay);
+                ZIndexUtils.set('overlay', this.overlay, this.primeConfig.zIndex.overlay);
+                DomHandler.absolutePosition(this.overlay, this.icon?.nativeElement);
+                this.bindDocumentClickListener();
+                this.bindDocumentResizeListener();
+                this.bindScrollListener();
+                this.overlayEventListener = (e) => {
+                    if (this.overlay && this.overlay.contains(e.target)) {
+                        this.selfClick = true;
+                    }
+                };
+                this.overlaySubscription = this.overlayService.clickObservable.subscribe(this.overlayEventListener);
+                break;
+            case 'void':
+                this.onOverlayHide();
+                if (this.overlaySubscription) {
+                    this.overlaySubscription.unsubscribe();
+                }
+                break;
+        }
+    }
+    // onOverlayAnimationEnd(event: AnimationEvent) {
+    onOverlayAnimationEnd(event) {
+        switch (event.toState) {
+            case 'void':
+                ZIndexUtils.clear(event.element);
+                break;
+        }
+    }
+    get noFilterLabel() {
+        return this.primeConfig.getTranslation(TranslationKeys.NO_FILTER);
+    }
+    clearFilter() {
+        this.initFilterConstraint(true);
+        this.primeTable._filter();
+        this.hideOverlay();
+    }
+    generateMatchModeOptions() {
+        let options = undefined;
+        if (this.descriptor.filterType === FilterTypeEnum.String) {
+            options = [
+                { value: FilterMatchMode.Contains, label: this.primeConfig.getTranslation(FilterMatchMode.Contains) },
+                { value: FilterMatchMode.NotContains, label: this.primeConfig.getTranslation(FilterMatchMode.NotContains) },
+                { value: FilterMatchMode.Equals, label: this.primeConfig.getTranslation(FilterMatchMode.Equals) },
+                { value: FilterMatchMode.NotEquals, label: this.primeConfig.getTranslation(FilterMatchMode.NotEquals) },
+                { value: FilterMatchMode.StartsWith, label: this.primeConfig.getTranslation(FilterMatchMode.StartsWith) },
+                { value: FilterMatchMode.EndsWith, label: this.primeConfig.getTranslation(FilterMatchMode.EndsWith) },
+                { value: FilterMatchMode.Exists, label: this.primeConfig.getTranslation(FilterMatchMode.Exists) },
+                { value: FilterMatchMode.DoesNotExist, label: this.primeConfig.getTranslation(FilterMatchMode.DoesNotExist) }
+            ];
+        }
+        else if (this.descriptor.filterType === FilterTypeEnum.Boolean) {
+            options = [{ value: FilterMatchMode.Equals, label: this.primeConfig.getTranslation(FilterMatchMode.Equals) }];
+        }
+        else if (this.descriptor.filterType === FilterTypeEnum.Number) {
+            options = [
+                { value: FilterMatchMode.Equals, label: this.primeConfig.getTranslation(FilterMatchMode.Equals) },
+                { value: FilterMatchMode.NotEquals, label: this.primeConfig.getTranslation(FilterMatchMode.NotEquals) },
+                { value: FilterMatchMode.LessThan, label: this.primeConfig.getTranslation(FilterMatchMode.LessThan) },
+                { value: FilterMatchMode.LessThanOrEqualTo, label: this.primeConfig.getTranslation(FilterMatchMode.LessThanOrEqualTo) },
+                { value: FilterMatchMode.GreaterThan, label: this.primeConfig.getTranslation(FilterMatchMode.GreaterThan) },
+                { value: FilterMatchMode.GreaterThanOrEqualTo, label: this.primeConfig.getTranslation(FilterMatchMode.GreaterThanOrEqualTo) },
+                { value: FilterMatchMode.Exists, label: this.primeConfig.getTranslation(FilterMatchMode.Exists) },
+                { value: FilterMatchMode.DoesNotExist, label: this.primeConfig.getTranslation(FilterMatchMode.DoesNotExist) }
+            ];
+        }
+        else if (this.descriptor.filterType === FilterTypeEnum.Lookup || this.descriptor.filterType === FilterTypeEnum.LookupEnum) {
+            options = [
+                { value: FilterMatchMode.Equals, label: this.primeConfig.getTranslation(FilterMatchMode.Equals) },
+                { value: FilterMatchMode.NotEquals, label: this.primeConfig.getTranslation(FilterMatchMode.NotEquals) },
+                { value: FilterMatchMode.Exists, label: this.primeConfig.getTranslation(FilterMatchMode.Exists) },
+                { value: FilterMatchMode.DoesNotExist, label: this.primeConfig.getTranslation(FilterMatchMode.DoesNotExist) }
+            ];
+            if (this.lookupDescriptor?.multiselect) {
+                options = [
+                    { value: FilterMatchMode.In, label: this.primeConfig.getTranslation(FilterMatchMode.In) },
+                    { value: FilterMatchMode.NotIn, label: this.primeConfig.getTranslation(FilterMatchMode.NotIn) }
+                ];
+            }
+        }
+        else if (this.descriptor.filterType === FilterTypeEnum.Date) {
+            if (!this.descriptor.datePickerShowTime && !this.descriptor.datePickerValueNoTime && !this.dateOnlyDisabled) {
+                options = [
+                    { value: FilterMatchMode.Equals, label: this.primeConfig.getTranslation(FilterMatchMode.Equals) },
+                    { value: FilterMatchMode.NotEquals, label: this.primeConfig.getTranslation(FilterMatchMode.NotEquals) },
+                    { value: FilterMatchMode.LessThanOrEqualTo, label: this.primeConfig.getTranslation(FilterMatchMode.LessThanOrEqualTo) },
+                    { value: FilterMatchMode.GreaterThanOrEqualTo, label: this.primeConfig.getTranslation(FilterMatchMode.GreaterThanOrEqualTo) },
+                    { value: FilterMatchMode.Between, label: this.primeConfig.getTranslation(FilterMatchMode.Between) },
+                    { value: FilterMatchMode.Exists, label: this.primeConfig.getTranslation(FilterMatchMode.Exists) },
+                    { value: FilterMatchMode.DoesNotExist, label: this.primeConfig.getTranslation(FilterMatchMode.DoesNotExist) }
+                ];
+            }
+            else {
+                options = [
+                    { value: FilterMatchMode.Equals, label: this.primeConfig.getTranslation(FilterMatchMode.Equals) },
+                    { value: FilterMatchMode.LessThanOrEqualTo, label: this.primeConfig.getTranslation(FilterMatchMode.LessThanOrEqualTo) },
+                    { value: FilterMatchMode.GreaterThanOrEqualTo, label: this.primeConfig.getTranslation(FilterMatchMode.GreaterThanOrEqualTo) },
+                    { value: FilterMatchMode.Between, label: this.primeConfig.getTranslation(FilterMatchMode.Between) },
+                    { value: FilterMatchMode.Exists, label: this.primeConfig.getTranslation(FilterMatchMode.Exists) },
+                    { value: FilterMatchMode.DoesNotExist, label: this.primeConfig.getTranslation(FilterMatchMode.DoesNotExist) }
+                ];
+            }
+        }
+        if (this.descriptor.matchModes) {
+            options = this.descriptor.matchModes.map(mm => ({ value: mm, label: this.primeConfig.getTranslation(mm) }));
+        }
+        if (!options) {
+            let primeMathcModeOptionByType = undefined;
+            if (this.primeType === 'text') {
+                primeMathcModeOptionByType = this.primeConfig.filterMatchModeOptions.text;
+            }
+            else if (this.primeType === 'numeric') {
+                primeMathcModeOptionByType = this.primeConfig.filterMatchModeOptions.numeric;
+            }
+            else if (this.primeType === 'date') {
+                primeMathcModeOptionByType = this.primeConfig.filterMatchModeOptions.date;
+            }
+            if (primeMathcModeOptionByType) {
+                options = primeMathcModeOptionByType.map(key => ({ label: this.primeConfig.getTranslation(key), value: key }));
+            }
+        }
+        this.matchModes.set(options || []);
+    }
+    getDefaultMatchMode() {
+        let defaultMatchMode = FilterMatchMode.Contains;
+        if (this.primeType === 'text')
+            defaultMatchMode = FilterMatchMode.StartsWith;
+        else if (this.primeType === 'numeric')
+            defaultMatchMode = FilterMatchMode.Equals;
+        else if (this.primeType === 'date')
+            defaultMatchMode = FilterMatchMode.Equals;
+        else if (this.primeType === 'lookup')
+            defaultMatchMode = this.lookupDescriptor?.multiselect ? FilterMatchMode.In : FilterMatchMode.Equals;
+        // overwrite type default set in descriptor
+        if (this.descriptor.defaultMatchMode) {
+            defaultMatchMode = this.descriptor.defaultMatchMode;
+        }
+        // check if default mode exists!
+        if (this.matchModes().length > 0 && !this.matchModes().some(m => m.value === defaultMatchMode)) {
+            defaultMatchMode = this.matchModes()[0].value;
+        }
+        return defaultMatchMode;
+    }
+    findNextMenuModeItem(item) {
+        const nextItem = item.nextElementSibling;
+        if (nextItem)
+            return DomHandler.hasClass(nextItem, 'p-column-filter-separator') ? this.findNextMenuModeItem(nextItem) : nextItem;
+        else
+            return item.parentElement?.firstElementChild;
+    }
+    findPrevMenuModeItem(item) {
+        const prevItem = item.previousElementSibling;
+        if (prevItem)
+            return DomHandler.hasClass(prevItem, 'p-column-filter-separator') ? this.findPrevMenuModeItem(prevItem) : prevItem;
+        else
+            return item.parentElement?.lastElementChild;
+    }
+    isOutsideClicked(event) {
+        return !(this.overlay?.isSameNode(event.target) ||
+            this.overlay?.contains(event.target) ||
+            this.icon?.nativeElement.isSameNode(event.target) ||
+            this.icon?.nativeElement.contains(event.target) ||
+            DomHandler.hasClass(event.target, 'p-column-filter-add-button') ||
+            DomHandler.hasClass(event.target.parentElement, 'p-column-filter-add-button') ||
+            DomHandler.hasClass(event.target, 'p-column-filter-remove-button') ||
+            DomHandler.hasClass(event.target.parentElement, 'p-column-filter-remove-button'));
+    }
+    bindDocumentClickListener() {
+        if (!this.documentClickListener) {
+            const documentTarget = this.el ? this.el.nativeElement.ownerDocument : 'document';
+            this.documentClickListener = this.renderer.listen(documentTarget, 'click', event => {
+                if (this.overlayVisible() && !this.selfClick && this.isOutsideClicked(event)) {
+                    this.hideOverlay();
+                }
+                this.selfClick = false;
+            });
+        }
+    }
+    unbindDocumentClickListener() {
+        if (this.documentClickListener) {
+            this.documentClickListener();
+            this.documentClickListener = null;
+            this.selfClick = false;
+        }
+    }
+    bindDocumentResizeListener() {
+        if (!this.documentResizeListener) {
+            this.documentResizeListener = this.renderer.listen(this.window, 'resize', () => {
+                if (this.overlayVisible() && !DomHandler.isTouchDevice()) {
+                    this.hideOverlay();
+                }
+            });
+        }
+    }
+    unbindDocumentResizeListener() {
+        if (this.documentResizeListener) {
+            this.documentResizeListener();
+            this.documentResizeListener = null;
+        }
+    }
+    bindScrollListener() {
+        if (!this.scrollHandler) {
+            this.scrollHandler = new ConnectedOverlayScrollHandler(this.icon?.nativeElement, () => {
+                if (this.overlayVisible()) {
+                    this.hideOverlay();
+                }
+            });
+        }
+        this.scrollHandler.bindScrollListener();
+    }
+    unbindScrollListener() {
+        if (this.scrollHandler) {
+            this.scrollHandler.unbindScrollListener();
+        }
+    }
+    hideOverlay() {
+        this.overlayVisible.set(false);
+        this.cd.markForCheck();
+    }
+    onOverlayHide() {
+        this.unbindDocumentClickListener();
+        this.unbindDocumentResizeListener();
+        this.unbindScrollListener();
+        this.overlay = null;
+    }
+    updateFilterValue(value) {
+        this.filterConstraint.set({ ...this.filterConstraint(), value: value });
+        this.updateDtFilter();
+    }
+    updateDtFilter() {
+        this.primeTable.filters[this.primeField] = this.filterConstraint();
+        this.primeTable._filter();
+    }
+    initFilterConstraint(reset = false) {
+        if (reset) {
+            const defaultMatchMode = this.getDefaultMatchMode();
+            this.primeTable.filters[this.primeField] = { value: null, matchMode: defaultMatchMode };
+        }
+        // set internal filter constraint
+        const metadata = this.primeTable.filters[this.primeField];
+        if (Array.isArray(metadata)) {
+            this.setFilterConstraint(metadata[0]);
+        }
+        else {
+            this.setFilterConstraint(metadata);
+        }
+    }
+    setFilterConstraint(metadata) {
+        let matchMode = metadata?.matchMode ?? this.getDefaultMatchMode();
+        let displayValue = metadata?.value;
+        let displayMatchMode = matchMode;
+        if (this.descriptor.filterType === FilterTypeEnum.Date && (this.descriptor.datePickerShowTime || this.descriptor.datePickerValueNoTime || this.dateOnlyDisabled)) {
+            if (matchMode === FilterMatchMode.Between &&
+                Array.isArray(metadata?.value) &&
+                metadata?.value.length === 2 &&
+                metadata?.value.every(v => v instanceof Date || typeof v === 'string' || typeof v === 'number')) {
+                const startDate = dateToIsoString(metadata.value[0]);
+                const endDate = dateToIsoString(metadata.value[1]);
+                // 2020-11-02T11:12:12.000
+                const cmpLength = this.descriptor.datePickerShowTime ? (this.descriptor.datePickerShowSeconds ? 19 : 16) : 10;
+                if (startDate.substring(0, cmpLength) === endDate.substring(0, cmpLength)) {
+                    displayMatchMode = FilterMatchMode.Equals;
+                    displayValue = new Date(metadata.value[0]);
+                }
+            }
+            else if (matchMode === FilterMatchMode.Equals && !metadata?.value) {
+                matchMode = FilterMatchMode.Between;
+            }
+        }
+        this.filterConstraint.set({
+            matchMode,
+            value: metadata?.value,
+            displayMatchMode,
+            displayValue: displayValue ?? null
+        });
+        this.primeTable.filters[this.primeField] = this.filterConstraint();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: TableColumnFilterFullComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: TableColumnFilterFullComponent, isStandalone: true, selector: "mng-table-column-filter-full", inputs: { descriptor: "descriptor" }, viewQueries: [{ propertyName: "icon", first: true, predicate: ["icon"], descendants: true }], ngImport: i0, template: "<div class=\"p-column-filter p-column-filter-row\">\n    @switch (primeType) {\n        @case ('text') {\n            <input\n                type=\"text\"\n                pInputText\n                class=\"mng-column-filter-string-input\"\n                [value]=\"filterConstraint()?.displayValue\"\n                [disabled]=\"isInputDisabled()\"\n                (input)=\"onTextModelChange($event)\"\n                (keydown.enter)=\"onTextInputEnterKeyDown($event)\"\n                [attr.placeholder]=\"descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n                [mngInputTrim]=\"descriptor.trimOption\" />\n        }\n        @case ('numeric') {\n            <p-inputNumber\n                inputStyleClass=\"mng-column-filter-number-input\"\n                [ngModel]=\"filterConstraint()?.displayValue\"\n                (ngModelChange)=\"onNumericModelChange($event)\"\n                (onKeyDown)=\"onNumericInputKeyDown($event)\"\n                [placeholder]=\"descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n                [useGrouping]=\"descriptor.numberUseGrouping\"\n                [minFractionDigits]=\"descriptor.numberMinFractionDigits\"\n                [maxFractionDigits]=\"descriptor.numberMaxFractionDigits\"\n                [disabled]=\"isInputDisabled()\"></p-inputNumber>\n        }\n\n        @case ('boolean') {\n            <p-triStateCheckbox [ngModel]=\"filterConstraint()?.displayValue\" (ngModelChange)=\"onTristateModelChange($event)\"></p-triStateCheckbox>\n        }\n        @case ('date') {\n            @if (filterConstraint()?.displayMatchMode === 'between') {\n                <mng-date-range\n                    [ngModel]=\"filterConstraint()?.displayValue\"\n                    (ngModelChange)=\"dateFilter($event)\"\n                    [showTime]=\"descriptor.datePickerShowTime\"\n                    [dateFormat]=\"descriptor.datePickerFormat\"\n                    [placeholder]=\"descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n                    [disabled]=\"isInputDisabled()\"></mng-date-range>\n            } @else {\n                <p-calendar\n                    appendTo=\"body\"\n                    [ngModel]=\"filterConstraint()?.displayValue\"\n                    (ngModelChange)=\"dateFilter($event)\"\n                    [placeholder]=\"descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n                    [showIcon]=\"true\"\n                    [dateFormat]=\"descriptor.datePickerFormat ?? 'dd.mm.yy'\"\n                    [showTime]=\"descriptor.datePickerShowTime\"\n                    [firstDayOfWeek]=\"1\">\n                </p-calendar>\n            }\n        }\n        @case ('lookup') {\n            @if (lookupDescriptor) {\n                @switch (lookupDescriptor.lookupType) {\n                    @case (lookupTypeAutocomplete) {\n                        <mng-autocomplete\n                            [ngModel]=\"filterConstraint()?.displayValue\"\n                            [dataProvider]=\"lookupDescriptor.dataProvider\"\n                            [optionsTrackProperty]=\"lookupDescriptor.optionsValueProperty\"\n                            [optionsValueProperty]=\"lookupDescriptor.optionsValueProperty\"\n                            [optionsLabelProperty]=\"lookupDescriptor.optionsLabelProperty\"\n                            [optionsLabelTranslate]=\"lookupDescriptor.optionsLabelTranslate\"\n                            [multiselect]=\"lookupDescriptor.multiselect\"\n                            [autoClear]=\"lookupDescriptor.autocompleteAutoClear ?? false\"\n                            [openOnFocus]=\"lookupDescriptor.autocompleteAutoClear ?? true\"\n                            [inlineSearch]=\"lookupDescriptor.autocompleteInlineSearch ?? false\"\n                            [placeholder]=\"descriptor.placeholder ?? 'mngTable.searchToFilter' | translate\"\n                            [className]=\"lookupDescriptor.className\"\n                            [dropdownClassName]=\"lookupDescriptor.dropdownClassName\"\n                            [disabled]=\"isInputDisabled()\"\n                            (valueChange)=\"autocompleteFilter($event)\"\n                            [searchTrim]=\"descriptor.trimOption\">\n                        </mng-autocomplete>\n                    }\n                    @case (lookupTypeDropdown) {\n                        <mng-dropdown\n                            [ngModel]=\"filterConstraint()?.displayValue\"\n                            [dataProvider]=\"lookupDescriptor.dataProvider\"\n                            [optionsValueProperty]=\"lookupDescriptor.optionsValueProperty\"\n                            [optionsLabelProperty]=\"lookupDescriptor.optionsLabelProperty\"\n                            [optionsLabelTranslate]=\"lookupDescriptor.optionsLabelTranslate\"\n                            [multiselect]=\"lookupDescriptor.multiselect\"\n                            [placeholder]=\"descriptor.placeholder ?? 'mngTable.selectToFilter' | translate\"\n                            [className]=\"lookupDescriptor.className\"\n                            [dropdownClassName]=\"lookupDescriptor.dropdownClassName\"\n                            [showClear]=\"false\"\n                            [changeValueOnBlur]=\"lookupDescriptor.multiselect\"\n                            [disabled]=\"isInputDisabled()\"\n                            (valueChange)=\"dropdownFilter($event)\">\n                        </mng-dropdown>\n                    }\n                }\n            }\n        }\n    }\n\n    @if (matchModes().length > 1) {\n        <button\n            #icon\n            type=\"button\"\n            class=\"p-column-filter-menu-button p-link\"\n            aria-haspopup=\"true\"\n            [attr.aria-expanded]=\"overlayVisible()\"\n            [ngClass]=\"{'p-column-filter-menu-button-open': overlayVisible(), 'p-column-filter-menu-button-active': isFilterSet()}\"\n            (click)=\"toggleMenu($event)\"\n            (keydown)=\"onToggleButtonKeyDown($event)\">\n            <FilterIcon [styleClass]=\"'pi-filter-icon'\" />\n        </button>\n    }\n    <button #icon [ngClass]=\"{'p-hidden-space': !isFilterSet()}\" type=\"button\" class=\"p-column-filter-clear-button p-link\" (click)=\"clearFilter()\">\n        <FilterSlashIcon />\n    </button>\n    @if (overlayVisible()) {\n        <div\n            class=\"p-column-filter-overlay p-component p-fluid\"\n            (click)=\"onContentClick()\"\n            [@overlayAnimation]=\"'visible'\"\n            (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\"\n            (@overlayAnimation.done)=\"onOverlayAnimationEnd($event)\"\n            (keydown.escape)=\"onEscape()\">\n            <ul class=\"p-column-filter-row-items\">\n                @for (matchMode of matchModes(); track matchMode; let i = $index) {\n                    <li\n                        class=\"p-column-filter-row-item\"\n                        (click)=\"onMatchModeChange(matchMode.value)\"\n                        (keydown)=\"onMatchModeKeyDown($event)\"\n                        (keydown.enter)=\"this.onMatchModeChange(matchMode.value)\"\n                        [ngClass]=\"{'p-highlight': matchMode.value === filterConstraint()?.displayMatchMode}\"\n                        [attr.tabindex]=\"i === 0 ? '0' : null\">\n                        {{ matchMode.label }}\n                    </li>\n                }\n                <li class=\"p-column-filter-separator\"></li>\n                <li class=\"p-column-filter-row-item\" (click)=\"onRowClearItemClick()\" (keydown)=\"onMatchModeKeyDown($event)\" (keydown.enter)=\"onRowClearItemClick()\">\n                    {{ noFilterLabel }}\n                </li>\n            </ul>\n        </div>\n    }\n</div>\n", dependencies: [{ kind: "ngmodule", type: TableModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: DateRangeComponent, selector: "mng-date-range", inputs: ["placeholder", "showTime", "showSeconds", "dateFormat", "disabled"] }, { kind: "ngmodule", type: CalendarModule }, { kind: "component", type: i2$1.Calendar, selector: "p-calendar", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AutocompleteComponent, selector: "mng-autocomplete", inputs: ["dataProvider", "optionsTrackProperty", "optionsValueProperty", "optionsLabelProperty", "optionsLabelTranslate", "inlineSearch", "openOnFocus", "multiselect", "placeholder", "className", "dropdownClassName", "showClear", "autoClear", "selectFirst", "searchTrim"], outputs: ["valueChange"] }, { kind: "component", type: DropdownComponent, selector: "mng-dropdown", inputs: ["dataProvider", "options", "optionsTrackProperty", "optionsLabelProperty", "optionsLabelTranslate", "optionsValueProperty", "optionsDisabledProperty", "multiselect", "placeholder", "showClear", "selectFirstItem", "className", "dropdownClassName", "changeValueOnBlur"], outputs: ["valueChange"] }, { kind: "ngmodule", type: TriStateCheckboxModule }, { kind: "component", type: i4.TriStateCheckbox, selector: "p-triStateCheckbox", inputs: ["disabled", "name", "ariaLabel", "ariaLabelledBy", "tabindex", "inputId", "style", "styleClass", "label", "readonly", "checkboxTrueIcon", "checkboxFalseIcon"], outputs: ["onChange"] }, { kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i5.InputNumber, selector: "p-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "disabled"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i6.InputText, selector: "[pInputText]" }, { kind: "component", type: FilterIcon, selector: "FilterIcon" }, { kind: "component", type: FilterSlashIcon, selector: "FilterSlashIcon" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: InputTrimDirective, selector: "[mngInputTrim]", inputs: ["mngInputTrim"] }], animations: [
+            trigger('overlayAnimation', [
+                transition(':enter', [style({ opacity: 0, transform: 'scaleY(0.8)' }), animate('.12s cubic-bezier(0, 0, 0.2, 1)')]),
+                transition(':leave', [animate('.1s linear', style({ opacity: 0 }))])
+            ])
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: TableColumnFilterFullComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'mng-table-column-filter-full', imports: [
+                        TableModule,
+                        TranslateModule,
+                        DateRangeComponent,
+                        CalendarModule,
+                        FormsModule,
+                        AutocompleteComponent,
+                        DropdownComponent,
+                        TriStateCheckboxModule,
+                        InputNumberModule,
+                        InputTextModule,
+                        FilterIcon,
+                        FilterSlashIcon,
+                        NgClass,
+                        InputTrimDirective
+                    ], animations: [
+                        trigger('overlayAnimation', [
+                            transition(':enter', [style({ opacity: 0, transform: 'scaleY(0.8)' }), animate('.12s cubic-bezier(0, 0, 0.2, 1)')]),
+                            transition(':leave', [animate('.1s linear', style({ opacity: 0 }))])
+                        ])
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"p-column-filter p-column-filter-row\">\n    @switch (primeType) {\n        @case ('text') {\n            <input\n                type=\"text\"\n                pInputText\n                class=\"mng-column-filter-string-input\"\n                [value]=\"filterConstraint()?.displayValue\"\n                [disabled]=\"isInputDisabled()\"\n                (input)=\"onTextModelChange($event)\"\n                (keydown.enter)=\"onTextInputEnterKeyDown($event)\"\n                [attr.placeholder]=\"descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n                [mngInputTrim]=\"descriptor.trimOption\" />\n        }\n        @case ('numeric') {\n            <p-inputNumber\n                inputStyleClass=\"mng-column-filter-number-input\"\n                [ngModel]=\"filterConstraint()?.displayValue\"\n                (ngModelChange)=\"onNumericModelChange($event)\"\n                (onKeyDown)=\"onNumericInputKeyDown($event)\"\n                [placeholder]=\"descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n                [useGrouping]=\"descriptor.numberUseGrouping\"\n                [minFractionDigits]=\"descriptor.numberMinFractionDigits\"\n                [maxFractionDigits]=\"descriptor.numberMaxFractionDigits\"\n                [disabled]=\"isInputDisabled()\"></p-inputNumber>\n        }\n\n        @case ('boolean') {\n            <p-triStateCheckbox [ngModel]=\"filterConstraint()?.displayValue\" (ngModelChange)=\"onTristateModelChange($event)\"></p-triStateCheckbox>\n        }\n        @case ('date') {\n            @if (filterConstraint()?.displayMatchMode === 'between') {\n                <mng-date-range\n                    [ngModel]=\"filterConstraint()?.displayValue\"\n                    (ngModelChange)=\"dateFilter($event)\"\n                    [showTime]=\"descriptor.datePickerShowTime\"\n                    [dateFormat]=\"descriptor.datePickerFormat\"\n                    [placeholder]=\"descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n                    [disabled]=\"isInputDisabled()\"></mng-date-range>\n            } @else {\n                <p-calendar\n                    appendTo=\"body\"\n                    [ngModel]=\"filterConstraint()?.displayValue\"\n                    (ngModelChange)=\"dateFilter($event)\"\n                    [placeholder]=\"descriptor.placeholder ?? 'mngTable.typeToFilter' | translate\"\n                    [showIcon]=\"true\"\n                    [dateFormat]=\"descriptor.datePickerFormat ?? 'dd.mm.yy'\"\n                    [showTime]=\"descriptor.datePickerShowTime\"\n                    [firstDayOfWeek]=\"1\">\n                </p-calendar>\n            }\n        }\n        @case ('lookup') {\n            @if (lookupDescriptor) {\n                @switch (lookupDescriptor.lookupType) {\n                    @case (lookupTypeAutocomplete) {\n                        <mng-autocomplete\n                            [ngModel]=\"filterConstraint()?.displayValue\"\n                            [dataProvider]=\"lookupDescriptor.dataProvider\"\n                            [optionsTrackProperty]=\"lookupDescriptor.optionsValueProperty\"\n                            [optionsValueProperty]=\"lookupDescriptor.optionsValueProperty\"\n                            [optionsLabelProperty]=\"lookupDescriptor.optionsLabelProperty\"\n                            [optionsLabelTranslate]=\"lookupDescriptor.optionsLabelTranslate\"\n                            [multiselect]=\"lookupDescriptor.multiselect\"\n                            [autoClear]=\"lookupDescriptor.autocompleteAutoClear ?? false\"\n                            [openOnFocus]=\"lookupDescriptor.autocompleteAutoClear ?? true\"\n                            [inlineSearch]=\"lookupDescriptor.autocompleteInlineSearch ?? false\"\n                            [placeholder]=\"descriptor.placeholder ?? 'mngTable.searchToFilter' | translate\"\n                            [className]=\"lookupDescriptor.className\"\n                            [dropdownClassName]=\"lookupDescriptor.dropdownClassName\"\n                            [disabled]=\"isInputDisabled()\"\n                            (valueChange)=\"autocompleteFilter($event)\"\n                            [searchTrim]=\"descriptor.trimOption\">\n                        </mng-autocomplete>\n                    }\n                    @case (lookupTypeDropdown) {\n                        <mng-dropdown\n                            [ngModel]=\"filterConstraint()?.displayValue\"\n                            [dataProvider]=\"lookupDescriptor.dataProvider\"\n                            [optionsValueProperty]=\"lookupDescriptor.optionsValueProperty\"\n                            [optionsLabelProperty]=\"lookupDescriptor.optionsLabelProperty\"\n                            [optionsLabelTranslate]=\"lookupDescriptor.optionsLabelTranslate\"\n                            [multiselect]=\"lookupDescriptor.multiselect\"\n                            [placeholder]=\"descriptor.placeholder ?? 'mngTable.selectToFilter' | translate\"\n                            [className]=\"lookupDescriptor.className\"\n                            [dropdownClassName]=\"lookupDescriptor.dropdownClassName\"\n                            [showClear]=\"false\"\n                            [changeValueOnBlur]=\"lookupDescriptor.multiselect\"\n                            [disabled]=\"isInputDisabled()\"\n                            (valueChange)=\"dropdownFilter($event)\">\n                        </mng-dropdown>\n                    }\n                }\n            }\n        }\n    }\n\n    @if (matchModes().length > 1) {\n        <button\n            #icon\n            type=\"button\"\n            class=\"p-column-filter-menu-button p-link\"\n            aria-haspopup=\"true\"\n            [attr.aria-expanded]=\"overlayVisible()\"\n            [ngClass]=\"{'p-column-filter-menu-button-open': overlayVisible(), 'p-column-filter-menu-button-active': isFilterSet()}\"\n            (click)=\"toggleMenu($event)\"\n            (keydown)=\"onToggleButtonKeyDown($event)\">\n            <FilterIcon [styleClass]=\"'pi-filter-icon'\" />\n        </button>\n    }\n    <button #icon [ngClass]=\"{'p-hidden-space': !isFilterSet()}\" type=\"button\" class=\"p-column-filter-clear-button p-link\" (click)=\"clearFilter()\">\n        <FilterSlashIcon />\n    </button>\n    @if (overlayVisible()) {\n        <div\n            class=\"p-column-filter-overlay p-component p-fluid\"\n            (click)=\"onContentClick()\"\n            [@overlayAnimation]=\"'visible'\"\n            (@overlayAnimation.start)=\"onOverlayAnimationStart($event)\"\n            (@overlayAnimation.done)=\"onOverlayAnimationEnd($event)\"\n            (keydown.escape)=\"onEscape()\">\n            <ul class=\"p-column-filter-row-items\">\n                @for (matchMode of matchModes(); track matchMode; let i = $index) {\n                    <li\n                        class=\"p-column-filter-row-item\"\n                        (click)=\"onMatchModeChange(matchMode.value)\"\n                        (keydown)=\"onMatchModeKeyDown($event)\"\n                        (keydown.enter)=\"this.onMatchModeChange(matchMode.value)\"\n                        [ngClass]=\"{'p-highlight': matchMode.value === filterConstraint()?.displayMatchMode}\"\n                        [attr.tabindex]=\"i === 0 ? '0' : null\">\n                        {{ matchMode.label }}\n                    </li>\n                }\n                <li class=\"p-column-filter-separator\"></li>\n                <li class=\"p-column-filter-row-item\" (click)=\"onRowClearItemClick()\" (keydown)=\"onMatchModeKeyDown($event)\" (keydown.enter)=\"onRowClearItemClick()\">\n                    {{ noFilterLabel }}\n                </li>\n            </ul>\n        </div>\n    }\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { descriptor: [{
+                type: Input,
+                args: [{ required: true }]
+            }], icon: [{
+                type: ViewChild,
+                args: ['icon']
+            }] } });
+
+class TableColumnValueComponent {
+    constructor(elementRef, messageService, translate) {
+        this.elementRef = elementRef;
+        this.messageService = messageService;
+        this.translate = translate;
+        this.columnDisplayTypeString = ColumnDisplayTypeEnum.String;
+        this.columnDisplayTypeNumber = ColumnDisplayTypeEnum.Number;
+        this.columnDisplayTypeCurrency = ColumnDisplayTypeEnum.Currency;
+        this.columnDisplayTypeBoolean = ColumnDisplayTypeEnum.Boolean;
+        this.columnDisplayTypeDate = ColumnDisplayTypeEnum.Date;
+        this.columnDisplayTypeEnum = ColumnDisplayTypeEnum.Enum;
+        this.columnDisplayTypeComponent = ColumnDisplayTypeEnum.Component;
+        this.columnDisplayTypeHtml = ColumnDisplayTypeEnum.Html;
+        this.getterPipe = new GetterPipe();
+        this.templatePipe = new TemplatePipe();
+        this.styleMaxWidth = null;
+        this.className = 'nowrap';
+        this.jsonPath = '$';
+    }
+    ngOnInit() {
+        if (this.descriptor.columnDisplayType === ColumnDisplayTypeEnum.Currency) {
+            this.currency = this.descriptor.currencyProperty ? this.item[this.descriptor.currencyProperty] : this.descriptor.currencyCode ?? 'EUR';
+        }
+        else if (this.descriptor.columnDisplayType === ColumnDisplayTypeEnum.String) {
+            if (this.descriptor.isMultiline) {
+                this.className += ' multiline';
+            }
+        }
+        if (this.descriptor.maxWidth) {
+            this.styleMaxWidth = this.descriptor.maxWidth;
+        }
+        let value = this.item?.[this.descriptor.property];
+        if (typeof this.descriptor.getter === 'function') {
+            value = this.getterPipe.transform(this.item, this.descriptor.getter, value);
+        }
+        if (this.descriptor.template) {
+            value = this.templatePipe.transform(value, this.descriptor.template);
+        }
+        this.value = value;
+    }
+    copyToClipboard(event) {
+        event.stopPropagation();
+        let value = this.elementRef.nativeElement.innerText.trim();
+        if (this.descriptor.clipboardValueGetter) {
+            value = this.descriptor.clipboardValueGetter(this.value, this.item);
+        }
+        navigator.clipboard.writeText(value);
+        const title = this.translate.instant('mngTable.copyNotificationTitle');
+        const message = this.translate.instant('mngTable.copyNotificationMessage', { value });
+        this.messageService.add({ severity: 'info', summary: title, detail: message });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: TableColumnValueComponent, deps: [{ token: i0.ElementRef }, { token: i1.MessageService }, { token: i2.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: TableColumnValueComponent, isStandalone: true, selector: "mng-table-column-value", inputs: { descriptor: "descriptor", item: "item" }, host: { properties: { "style.max-width.px": "this.styleMaxWidth", "class": "this.className" } }, ngImport: i0, template: "@if (descriptor.localizationExistsProperty && !item[descriptor.localizationExistsProperty]) {\n    <i class=\"pi pi-exclamation-circle\" [pTooltip]=\"'mngTable.translationMissing' | translate\"></i>\n}\n@switch (descriptor.columnDisplayType) {\n    @case (columnDisplayTypeString) {\n        @if (descriptor.hasValueAsTooltip) {\n            <span [pTooltip]=\"value\" tooltipPosition=\"left\">{{ value }}</span>\n        } @else {\n            {{ value }}\n        }\n    }\n    @case (columnDisplayTypeHtml) {\n        <span [innerHTML]=\"value\"></span>\n    }\n    @case (columnDisplayTypeNumber) {\n        {{ value | number: descriptor.displayFormat : descriptor.locale }}\n    }\n    @case (columnDisplayTypeCurrency) {\n        {{ value | currency: currency : descriptor.currencyDisplay : descriptor.displayFormat : descriptor.locale }}\n    }\n    @case (columnDisplayTypeDate) {\n        {{ value | date: descriptor.displayFormat }}\n    }\n    @case (columnDisplayTypeBoolean) {\n        @if (descriptor.booleanAsIcon) {\n            <i [class]=\"value | mngBoolean: descriptor.booleanYes : descriptor.booleanNo : true\"></i>\n        } @else {\n            {{ value | mngBoolean: descriptor.booleanYes : descriptor.booleanNo | translate }}\n        }\n    }\n    @case (columnDisplayTypeEnum) {\n        {{ value | mngEnum: descriptor.enum | translate }}\n    }\n    @case (columnDisplayTypeComponent) {\n        <ng-container\n            [mngComponent]=\"descriptor.customComponentType!\"\n            [inputs]=\"{\n                value: value,\n                item: item,\n                descriptor: descriptor\n            }\"></ng-container>\n    }\n}\n@if (descriptor.hasCopyToClipboard) {\n    <div class=\"help-buttons\">\n        <button pButton pRipple type=\"button\" icon=\"pi pi-copy\" class=\"p-button-rounded p-button-info p-button-sm\" (click)=\"copyToClipboard($event)\"></button>\n    </div>\n}\n", styles: [":host{display:inline-block;overflow:hidden}:host.nowrap{white-space:nowrap;text-overflow:ellipsis}:host.multiline{white-space:pre-wrap;word-wrap:break-word}.help-buttons{display:none;position:absolute;right:0;top:50%;transform:translateY(-50%)}.help-buttons .p-button{height:1.9rem;width:1.9rem;padding:0}\n"], dependencies: [{ kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "pipe", type: BooleanPipe, name: "mngBoolean" }, { kind: "pipe", type: EnumPipe, name: "mngEnum" }, { kind: "directive", type: ComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "injectionToken", "inputs", "attachToHost", "nodeInjector"], outputs: ["instanceCreated"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i4$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i5$1.Ripple, selector: "[pRipple]" }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: TableColumnValueComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'mng-table-column-value', imports: [TooltipModule, TranslateModule, BooleanPipe, EnumPipe, ComponentDirective, ButtonModule, RippleModule, DecimalPipe, CurrencyPipe, DatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (descriptor.localizationExistsProperty && !item[descriptor.localizationExistsProperty]) {\n    <i class=\"pi pi-exclamation-circle\" [pTooltip]=\"'mngTable.translationMissing' | translate\"></i>\n}\n@switch (descriptor.columnDisplayType) {\n    @case (columnDisplayTypeString) {\n        @if (descriptor.hasValueAsTooltip) {\n            <span [pTooltip]=\"value\" tooltipPosition=\"left\">{{ value }}</span>\n        } @else {\n            {{ value }}\n        }\n    }\n    @case (columnDisplayTypeHtml) {\n        <span [innerHTML]=\"value\"></span>\n    }\n    @case (columnDisplayTypeNumber) {\n        {{ value | number: descriptor.displayFormat : descriptor.locale }}\n    }\n    @case (columnDisplayTypeCurrency) {\n        {{ value | currency: currency : descriptor.currencyDisplay : descriptor.displayFormat : descriptor.locale }}\n    }\n    @case (columnDisplayTypeDate) {\n        {{ value | date: descriptor.displayFormat }}\n    }\n    @case (columnDisplayTypeBoolean) {\n        @if (descriptor.booleanAsIcon) {\n            <i [class]=\"value | mngBoolean: descriptor.booleanYes : descriptor.booleanNo : true\"></i>\n        } @else {\n            {{ value | mngBoolean: descriptor.booleanYes : descriptor.booleanNo | translate }}\n        }\n    }\n    @case (columnDisplayTypeEnum) {\n        {{ value | mngEnum: descriptor.enum | translate }}\n    }\n    @case (columnDisplayTypeComponent) {\n        <ng-container\n            [mngComponent]=\"descriptor.customComponentType!\"\n            [inputs]=\"{\n                value: value,\n                item: item,\n                descriptor: descriptor\n            }\"></ng-container>\n    }\n}\n@if (descriptor.hasCopyToClipboard) {\n    <div class=\"help-buttons\">\n        <button pButton pRipple type=\"button\" icon=\"pi pi-copy\" class=\"p-button-rounded p-button-info p-button-sm\" (click)=\"copyToClipboard($event)\"></button>\n    </div>\n}\n", styles: [":host{display:inline-block;overflow:hidden}:host.nowrap{white-space:nowrap;text-overflow:ellipsis}:host.multiline{white-space:pre-wrap;word-wrap:break-word}.help-buttons{display:none;position:absolute;right:0;top:50%;transform:translateY(-50%)}.help-buttons .p-button{height:1.9rem;width:1.9rem;padding:0}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.MessageService }, { type: i2.TranslateService }], propDecorators: { descriptor: [{
+                type: Input,
+                args: [{ required: true }]
+            }], item: [{
+                type: Input,
+                args: [{ required: true }]
+            }], styleMaxWidth: [{
+                type: HostBinding,
+                args: ['style.max-width.px']
+            }], className: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+function tableNotificationError(translate, table, error, messageService) {
+    const params = {};
+    if (error?.message) {
+        params.errorMessage = `: ${error.message}`;
+    }
+    else {
+        params.errorMessage = '.';
+    }
+    const tableErrorTitle = getI18nForModel(translate, table.model, 'table.error.title', undefined, undefined, 'general.error', params) ?? undefined;
+    const tableErrorMessage = getI18nForModel(translate, table.model, 'table.error.message', undefined, undefined, 'general.errorMessage', params) ?? undefined;
+    return toastMessage(messageService, tableErrorTitle, tableErrorMessage, 'error', 'pi-exclamation-triangle');
+}
+
+/**
+ * generates table layout preferences key used when saving preferences to localstorage
+ * @param typeName string, required
+ * @param url string, required
+ * @param trackProperty string, not required
+ */
+function generateTableLayoutPrefsKey(typeName, url, trackProperty) {
+    return `commonsTableLayoutPrefs~~${typeName}~~${trackProperty ?? url.split('?')[0].split('#')[0]}`;
+}
+
+class LocaleDefaultRowClassPipe {
+    constructor(injector) {
+        this.injector = injector;
+    }
+    transform(value, descriptor, item) {
+        if (descriptor?.isLocalized) {
+            if (item[descriptor.localizationLocaleProperty] === this.injector.get(CommonsService).defaultDataLanguage) {
+                return value + ' all-translations-default-value';
+            }
+        }
+        return value ?? '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: LocaleDefaultRowClassPipe, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.2", ngImport: i0, type: LocaleDefaultRowClassPipe, isStandalone: true, name: "mngLocaleDefaultRowClass" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: LocaleDefaultRowClassPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    standalone: true,
+                    name: 'mngLocaleDefaultRowClass',
+                    pure: true
+                }]
+        }], ctorParameters: () => [{ type: i0.Injector }] });
+
+class TableColumnFilterClassPipe {
+    transform(value, filter, isEnabled) {
+        const strValue = typeof value === 'string' ? value : '';
+        if (isEnabled && filter?.filterType !== undefined) {
+            return `${strValue} mng-column-filter-${FilterTypeEnum[filter.filterType].toLowerCase()}`;
+        }
+        else {
+            return strValue;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: TableColumnFilterClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.2", ngImport: i0, type: TableColumnFilterClassPipe, isStandalone: true, name: "mngTableColumnFilterClass" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: TableColumnFilterClassPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    standalone: true,
+                    pure: true,
+                    name: 'mngTableColumnFilterClass'
+                }]
+        }] });
+
+// Sorts and Filters must be string by default - Item could be anything
+class TableComponent {
+    constructor() {
+        this.cmpTypeName = 'TableComponent';
+        this.logger = inject(LoggerService).create(this.cmpTypeName);
+        this.injector = inject(Injector);
+        this.destroyRef = inject(DestroyRef);
+        this.router = inject(Router);
+        this.route = inject(ActivatedRoute);
+        this.translate = inject(TranslateService);
+        this.messageService = inject(MessageService);
+        this.commons = inject(CommonsService);
+        this.localStorageService = inject(LocalStorageService);
+        this.dataListService = inject((DataListService));
+        this.useQueryParams = false;
+        // extra features input
+        this.selectionMode = 'multiple';
+        this.selectionEnabled = false;
+        // event outputs
+        this.loadEventEmitter = new EventEmitter();
+        this.cellClickEventEmitter = new EventEmitter();
+        this.selectionChangeEventEmitter = new EventEmitter();
+        this.captionCmpInstEventEmitter = new EventEmitter();
+        this.columnCustomLastCmpInstEventEmitter = new EventEmitter();
+        // content and view queries
+        this.templates = contentChildren(TemplateDirective);
+        // templates
+        this.captionTemplate = computed(() => findTemplateByName([...this.templates()], 'caption'));
+        this.columnCustomLastTemplate = computed(() => findTemplateByName([...this.templates()], 'columnCustomLast'));
+        this.footerTemplate = computed(() => findTemplateByName([...this.templates()], 'footer'));
+        this.rowExpandTemplate = computed(() => findTemplateByName([...this.templates()], 'rowExpandContent'));
+        // data provider and items
+        this.useDataProvider = false;
+        this.isLazy = signal(false);
+        this.isPagination = signal(false);
+        this.useQueryParamsInitialized = signal(false);
+        // infinite scroll
+        this.infiniteScroll = signal(false);
+        // visual
+        this.className = signal('');
+        this.tableFullHeightOffset = signal(undefined);
+        this.rowHeight = signal(undefined);
+        // data provider
+        this.dataProviderService = null;
+        this.latestLazyLoadEventVersion = 0;
+        this.latestParamsWithDefaultsVersion = 0;
+        // descriptors
+        this.descriptor = signal(TableDescriptor.create());
+        this.columns = signal([]);
+        this.visibleColumns = computed(() => this.columns().filter(col => col.isVisible));
+        // filter, sort
+        this.hasColumnFilters = computed(() => this.filterDescriptors().length > 0);
+        this.filterDescriptors = computed(() => this.descriptor().filters);
+        this.defaultParams = computed(() => {
+            const params = {
+                offset: 0,
+                limit: this.dataListService.rowsPerPageOptions()[0],
+                sort: this.descriptor()
+                    .sorts.filter(s => s.defaultIsEnabled)
+                    .map(s => ({
+                    property: s.property,
+                    ascending: s.defaultIsAscending
+                })),
+                filters: {}
+            };
+            this.filterDescriptors()
+                .filter(d => d.hasDefaultValue)
+                .forEach(f => {
+                let matchMode = f.defaultMatchMode;
+                if (!matchMode) {
+                    switch (f.filterType) {
+                        case FilterTypeEnum.String:
+                            matchMode = FilterMatchMode.Contains;
+                            break;
+                        case FilterTypeEnum.Lookup:
+                        case FilterTypeEnum.LookupEnum: {
+                            const lookupFilter = f;
+                            if (lookupFilter.multiselect) {
+                                matchMode = FilterMatchMode.In;
+                            }
+                            break;
+                        }
+                        default:
+                            break;
+                    }
+                }
+                if (!matchMode) {
+                    matchMode = FilterMatchMode.Equals;
+                }
+                if (f.matchModes && !f.matchModes?.includes(matchMode)) {
+                    matchMode = f.matchModes[0];
+                }
+                let value = undefined;
+                if (Array.isArray(value)) {
+                    value = [...value];
+                }
+                else {
+                    value = f.defaultValue;
+                }
+                const property = f.property;
+                params.filters[property] = {
+                    value: value,
+                    matchMode: matchMode
+                };
+            });
+            return params;
+        });
+        this.isFilterChanged = false;
+        this.isSortChanged = false;
+        this.anyColumnVisible = computed(() => this.visibleColumns().length > 0);
+        this.hasCustomLastColumn = signal(false);
+        this.hasLastColumn = computed(() => this.hasCustomLastColumn() || this.areColumnsToggleable() || this.areColumnsReorderable());
+        // layout prefs
+        this.areColumnsReorderable = computed(() => this.descriptor().columns.some(value => value.isReorderable));
+        this.areColumnsToggleable = computed(() => this.descriptor().columns.some(value => value.isToggleable));
+        this.layoutPreferences = { columnWidths: {} };
+        this.localstorageKey = '';
+        // other
+        this.routerIsNavigationOutsideInProgress = false;
+    }
+    ngOnInit() {
+        this.setMainAndRelatedDescriptors(this.descriptorInput);
+        const descriptor = this.descriptor();
+        // map row settings
+        if (Array.isArray(descriptor.rowsPerPageOptions) && descriptor.rowsPerPageOptions.length > 0) {
+            this.dataListService.rowsPerPageOptions.set(descriptor.rowsPerPageOptions);
+        }
+        if (descriptor.defaultNumRows) {
+            this.dataListService.rows.set(this.dataListService.rowsPerPageOptions().includes(descriptor.defaultNumRows) ? descriptor.defaultNumRows : this.dataListService.rowsPerPageOptions()[0]);
+        }
+        // other
+        this.hasCustomLastColumn.set(this.columnCustomLastComponent !== undefined || this.columnCustomLastTemplate() !== undefined);
+        // define all styles
+        let className = descriptor.className ?? '';
+        switch (descriptor.size) {
+            case TableSizeEnum.Small:
+                className += ' p-datatable-sm';
+                break;
+            case TableSizeEnum.Large:
+                className += ' p-datatable-lg';
+                break;
+        }
+        if (descriptor.hasGridlines) {
+            className += ' p-datatable-gridlines';
+        }
+        this.className.set(className ?? '');
+        // check if infinite scroll
+        let paginationMode = TablePaginationModeEnum.None;
+        if (typeof descriptor.paginationMode !== 'undefined') {
+            // descriptor choice is the most strong - if defined, use this value
+            paginationMode = descriptor.paginationMode;
+        }
+        else if (typeof this.dataProvider !== 'undefined') {
+            // when data provider is used, use pagination
+            paginationMode = TablePaginationModeEnum.Pagination;
+        }
+        if (paginationMode === TablePaginationModeEnum.InfiniteScroll) {
+            this.infiniteScroll.set(true);
+            this.tableFullHeightOffset.set(descriptor?.tableFullHeightOffset ?? 315);
+            this.rowHeight.set(descriptor?.rowHeight ?? 45);
+            this.useQueryParams = false;
+        }
+        else if (paginationMode === TablePaginationModeEnum.Pagination) {
+            this.isPagination.set(true);
+        }
+        // check if data provider is supplied, if is, use it primarily
+        if (this.dataProvider) {
+            // map subjects to observables and initiate data
+            this.useDataProvider = true;
+            this.isLazy.set(this.dataProvider.isLazy);
+            // inject service
+            if (this.dataProvider.serviceType) {
+                this.dataProviderService = this.injector.get(this.dataProvider.serviceType);
+            }
+            this.dataProvider.getAllReload$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
+                next: () => {
+                    this.reload();
+                }
+            });
+        }
+        else {
+            // if query result is provided, use it as secondary source or else try to use items
+            if (this.result) {
+                this.subscribeToQueryInput();
+            }
+            else if (this.items) {
+                this.subscribeToItemsInput();
+            }
+            if (this.loadingInput) {
+                this.loadingInput.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(res => this.dataListService.loading.set(res));
+            }
+        }
+        this.initializeDataLoadingTriggers();
+    }
+    ngOnChanges(changes) {
+        if (changes['result'] && !changes['result'].firstChange) {
+            this.subscribeToQueryInput();
+        }
+        if (changes['items'] && !changes['items'].firstChange) {
+            this.subscribeToItemsInput();
+        }
+        if (changes['globalFilterFieldsInput'] && !changes['globalFilterFieldsInput'].firstChange) {
+            this.dataListService.globalFilterFields.set(changes['globalFilterFieldsInput'].currentValue ?? this.columns().map(c => c.descriptor.property));
+        }
+    }
+    ngOnDestroy() {
+        this.dataProviderSubscription?.unsubscribe();
+        this.resultSubscription?.unsubscribe();
+        this.itemsSubscription?.unsubscribe();
+    }
+    reload(emitEvent = false, resetParams = false) {
+        const paramsWithDefaults = resetParams || !this.latestParamsWithDefaults ? this.defaultParams() : mergeDataListParamsWithDefaults(this.latestParamsWithDefaults, this.defaultParams());
+        this.loadTableWithDataProvider(paramsWithDefaults, emitEvent);
+    }
+    onTableLazyLoad(event) {
+        this.dataProviderLatestLazyLoadEvent = event;
+        this.latestLazyLoadEventVersion++;
+        const params = fromTableLoadToDataListParams(event);
+        if (this.useQueryParams) {
+            if (!this.routerIsNavigationOutsideInProgress) {
+                // this check is necessary: from some reason, primeNG commits one last lazy load event whenever any angular router navigation occurs
+                this.router.navigate([], {
+                    relativeTo: this.route,
+                    replaceUrl: true,
+                    queryParams: dataListParamsToUrlQuery(params, this.defaultParams())
+                });
+            }
+        }
+        else {
+            this.loadTableWithDataProvider(mergeDataListParamsWithDefaults(params, this.defaultParams()));
+        }
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    onTableSort(event) {
+        this.isSortChanged = true;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    onTableFilter(event) {
+        this.isFilterChanged = true;
+    }
+    onCellClick(event, col, item, idx) {
+        const tableEvent = {
+            column: col,
+            rowItem: item,
+            rowIndex: idx,
+            event: event
+        };
+        this.cellClickEventEmitter.next(tableEvent);
+    }
+    onSelectionChange(event) {
+        this.selectionChangeEventEmitter.emit(event);
+    }
+    /**
+     * Method is called on column resize
+     * @param element event's element
+     */
+    onTableColumnResize({ element }) {
+        const fieldId = element.id;
+        const width = element.offsetWidth;
+        const col = this.columns().find(el => el.descriptor.property === fieldId);
+        if (col)
+            col.width = width;
+        if (!this.layoutPreferences.columnWidths)
+            this.layoutPreferences.columnWidths = {};
+        this.layoutPreferences.columnWidths[fieldId] = width;
+        this.saveLayoutPreferences();
+    }
+    loadTableWithDataProvider(paramsWithDefaults, emitEvent = true) {
+        if (!this.useDataProvider || !this.dataProvider) {
+            return;
+        }
+        this.dataProviderSubscription?.unsubscribe();
+        this.dataListService.loading.set(true);
+        this.latestParamsWithDefaults = paramsWithDefaults;
+        this.latestParamsWithDefaultsVersion++;
+        this.dataProviderSubscription = toObservable(this.dataProvider.getAll(paramsWithDefaults, this.dataProviderService, this.descriptor().isLocalized ? this.commons.appDataLanguage ?? undefined : undefined)).subscribe({
+            next: res => {
+                if (this.descriptorInput instanceof TableDynamicDescriptorInst) {
+                    this.setMainAndRelatedDescriptors(this.descriptorInput.toTableDescriptorFromData(res));
+                }
+                if (this.infiniteScroll()) {
+                    let items = this.dataListService.data();
+                    if (this.isFilterChanged || this.isSortChanged) {
+                        items = [];
+                    }
+                    items.splice(paramsWithDefaults.offset ?? 0, paramsWithDefaults.limit ?? this.dataListService.rows(), ...(res?.data ?? []));
+                    this.dataListService.data.set(items);
+                }
+                else {
+                    this.dataListService.data.set(res?.data ?? []);
+                }
+                this.dataListService.count.set(res?.totalCount ?? 0); // count is not really important here
+                this.isFilterChanged = false;
+                this.isSortChanged = false;
+                this.dataListService.loading.set(false);
+            },
+            error: err => {
+                tableNotificationError(this.translate, this.descriptor(), err, this.messageService);
+                this.dataListService.data.set([]);
+                this.dataListService.count.set(0);
+                this.dataListService.loading.set(false);
+                const error = fromSubscribeError(err, 'TableComponentError', {
+                    queryParam: paramsWithDefaults
+                });
+                this.logger.log(error, getErrorLogLevel(error));
+            }
+        });
+        if (emitEvent) {
+            const tableEvent = {
+                originalEvent: this.dataProviderLatestLazyLoadEvent,
+                params: paramsWithDefaults
+            };
+            this.loadEventEmitter.next(tableEvent);
+        }
+    }
+    loadTableFromRouteUpdate(urlParams) {
+        const paramsWithDefaults = mergeDataListParamsWithDefaults(fromUrlQueryToDataListParams(urlParams), this.defaultParams());
+        if (this.latestLazyLoadEventVersion < this.latestParamsWithDefaultsVersion + 1) {
+            // update only if new version from query params will be higher
+            this.updatePrimeSortAndFilter(paramsWithDefaults);
+        }
+        this.useQueryParamsInitialized.set(true);
+        this.loadTableWithDataProvider(paramsWithDefaults);
+    }
+    setMainAndRelatedDescriptors(descriptor) {
+        if (descriptor instanceof TableDynamicDescriptorInst) {
+            this.descriptor.set(descriptor);
+            this.columns.set([]);
+            return;
+        }
+        // get layout preferences if they exist
+        if (descriptor.model.typeName) {
+            this.localstorageKey = generateTableLayoutPrefsKey(descriptor.model.typeName, this.router.url, descriptor.identifier);
+            const preferences = this.localStorageService.getItem(this.cmpTypeName, this.localstorageKey);
+            if (preferences && typeof preferences === 'object') {
+                if (preferences.columnWidths) {
+                    this.layoutPreferences.columnWidths = preferences.columnWidths;
+                }
+                if (preferences.columnOrder && Array.isArray(preferences.columnOrder) && preferences.columnOrder.every((el) => typeof el === 'string')) {
+                    this.layoutPreferences.columnOrder = preferences.columnOrder;
+                }
+                if (preferences.columnVisibility && Array.isArray(preferences.columnVisibility) && preferences.columnVisibility.every((el) => typeof el === 'string')) {
+                    this.layoutPreferences.columnVisibility = preferences.columnVisibility;
+                }
+            }
+        }
+        else {
+            this.localstorageKey = '';
+            this.layoutPreferences = { columnWidths: {} };
+        }
+        // initialize columns with additional properties
+        const timestamp = new Date().getTime();
+        let columns = descriptor.columns.map(col => ({
+            id: `${col.property}-${timestamp}`,
+            descriptor: col,
+            filter: descriptor.filters.find(f => f.showOnColumn === col.property),
+            sort: descriptor.sorts.find(f => f.showOnColumn === col.property),
+            disabled: !col.isToggleable,
+            isVisible: this.layoutPreferences.columnVisibility ? this.layoutPreferences.columnVisibility.includes(col.property) : col.isVisible,
+            width: this.layoutPreferences.columnWidths?.[col.property]
+        }));
+        if (this.layoutPreferences.columnOrder) {
+            for (let i = 0; i < this.layoutPreferences.columnOrder.length; i++) {
+                const colName = this.layoutPreferences.columnOrder[i];
+                const colWithPrefs = columns.find(el => el.descriptor.property === colName);
+                if (colWithPrefs) {
+                    colWithPrefs.orderIdx = i;
+                }
+            }
+        }
+        columns = columns.sort((a, b) => (a.orderIdx !== undefined && b.orderIdx !== undefined ? a.orderIdx - b.orderIdx : 0));
+        this.descriptor.set(descriptor);
+        this.columns.set(columns);
+        this.dataListService.globalFilterFields.set(this.globalFilterFieldsInput ?? this.columns().map(c => c.descriptor.property));
+    }
+    updatePrimeSortAndFilter(paramsWithDefaults) {
+        this.dataListService.sortMeta.set(this.createSortMeta(paramsWithDefaults));
+        this.dataListService.filterMeta.set(this.createFilterMeta(paramsWithDefaults));
+        this.dataListService.rows.set(paramsWithDefaults?.limit ?? this.dataListService.rows());
+        this.dataListService.offset.set(paramsWithDefaults?.offset ?? 0);
+    }
+    createFilterMeta(paramsWithDefaults) {
+        const primeFilterMeta = {};
+        // if any filter is present, no default filters should be applied!
+        if (paramsWithDefaults?.filters) {
+            Object.entries(paramsWithDefaults.filters).forEach(([key, value]) => {
+                primeFilterMeta[key] = {
+                    value: value.value,
+                    matchMode: value.matchMode
+                };
+            });
+        }
+        return primeFilterMeta;
+    }
+    createSortMeta(paramsWithDefaults) {
+        if (paramsWithDefaults?.sort !== undefined && Array.isArray(paramsWithDefaults?.sort) && paramsWithDefaults?.sort.length > 0) {
+            return paramsWithDefaults?.sort.map(s => ({
+                field: s.property,
+                order: s.ascending ? 1 : -1
+            }));
+        }
+        return null;
+    }
+    initializeDataLoadingTriggers() {
+        if (this.useQueryParams) {
+            // trigger table loads from route updates
+            this.route.queryParams.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(qp => {
+                this.loadTableFromRouteUpdate(qp);
+            });
+            this.router.events
+                .pipe(takeUntilDestroyed(this.destroyRef), filter(e => (e instanceof NavigationStart && e.url.split('?')[0].split('#')[0] !== this.router.url.split('?')[0].split('#')[0]) ||
+                e instanceof NavigationEnd ||
+                e instanceof NavigationCancel ||
+                e instanceof NavigationError))
+                .subscribe(e => {
+                this.routerIsNavigationOutsideInProgress = e instanceof NavigationStart;
+            });
+        }
+        else {
+            // load data immediately by creating default sorts and filters (primeng will trigger onLazyLoad event on sort&filter metadata change)
+            const defaultSort = this.createSortMeta();
+            if (!defaultSort || defaultSort.length > 0) {
+                this.dataListService.sortMeta.set(defaultSort);
+            }
+            const defaultFilter = this.createFilterMeta();
+            if (defaultFilter) {
+                this.dataListService.filterMeta.set(defaultFilter);
+            }
+        }
+    }
+    onColumnToggle(event) {
+        const timestamp = new Date().getTime();
+        const columns = [...this.columns()];
+        for (const col of columns) {
+            const isVisible = event.value.includes(col);
+            if (isVisible !== col.isVisible) {
+                col.isVisible = isVisible;
+                col.id = `${col.descriptor.property}-${timestamp}`;
+            }
+        }
+        this.columns.set(columns);
+        this.layoutPreferences.columnVisibility = this.visibleColumns().map(el => el.descriptor.property);
+        this.saveLayoutPreferences();
+    }
+    onColumnToggleAll() {
+        const timestamp = new Date().getTime();
+        const columns = [...this.columns()];
+        const isVisible = !columns.some(c => c.isVisible);
+        for (const col of columns) {
+            if (isVisible !== col.isVisible) {
+                col.isVisible = isVisible;
+                col.id = `${col.descriptor.property}-${timestamp}`;
+            }
+        }
+        this.columns.set(columns);
+        this.layoutPreferences.columnVisibility = this.visibleColumns().map(el => el.descriptor.property);
+        this.saveLayoutPreferences();
+    }
+    onColumnReorder(event) {
+        if (event.dropIndex !== undefined && event.dropIndex >= 0 && event.dragIndex !== undefined && event.dragIndex >= 0 && event.dropIndex !== event.dragIndex) {
+            const eventDropIndex = event.dropIndex;
+            const eventDragIndex = event.dragIndex;
+            const prevVisibleColumns = this.columns().filter(el => el.isVisible);
+            const colAtDrop = prevVisibleColumns[eventDropIndex];
+            const colAtDrag = prevVisibleColumns[eventDragIndex];
+            const colAtDropIndex = this.columns().findIndex(el => el.id === colAtDrop.id);
+            const colAtDragIndex = this.columns().findIndex(el => el.id === colAtDrag.id);
+            if (colAtDropIndex > -1 && colAtDragIndex > -1) {
+                let columns = [...this.columns()];
+                columns.splice(colAtDragIndex, 1);
+                const dropIndex = columns.findIndex(el => el.id === colAtDrop.id) + (eventDropIndex > eventDragIndex ? 1 : 0);
+                columns = [...columns.slice(0, dropIndex), colAtDrag, ...columns.slice(dropIndex)];
+                const timestamp = new Date().getTime();
+                for (let i = Math.min(eventDropIndex, eventDragIndex); i < columns.length; i++) {
+                    columns[i].id = `${columns[i].descriptor.property}-${timestamp}`;
+                }
+                this.columns.set(columns);
+                this.layoutPreferences.columnOrder = columns.map(el => el.descriptor.property);
+                this.saveLayoutPreferences();
+            }
+        }
+    }
+    saveLayoutPreferences() {
+        if (this.descriptor().model.typeName) {
+            this.localStorageService.setItem(this.cmpTypeName, this.localstorageKey, this.layoutPreferences);
+        }
+    }
+    subscribeToQueryInput() {
+        this.resultSubscription?.unsubscribe();
+        if (!this.result) {
+            return;
+        }
+        this.resultSubscription = this.result.subscribe(res => {
+            this.dataListService.data.set(res?.data ?? []);
+            this.dataListService.count.set(res?.totalCount ?? 0);
+            this.dataListService.loading.set(false);
+        });
+    }
+    subscribeToItemsInput() {
+        this.itemsSubscription?.unsubscribe();
+        if (!this.items) {
+            return;
+        }
+        this.itemsSubscription = this.items.subscribe(qr => {
+            this.dataListService.data.set(qr);
+            this.dataListService.count.set(qr.length);
+            this.dataListService.loading.set(false);
+        });
+    }
+    /**
+     * Reset column order and column visibility to default settings
+     */
+    resetDefaultLayout() {
+        const timestamp = new Date().getTime();
+        const columns = this.descriptor().columns.map(col => ({ id: `${col.property}-${timestamp}`, descriptor: col, disabled: !col.isToggleable, isVisible: col.isVisible }));
+        this.columns.set(columns);
+        if (this.descriptor().model.typeName) {
+            this.localStorageService.removeItem(this.cmpTypeName, this.localstorageKey);
+        }
+        this.layoutPreferences = {};
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: TableComponent, isStandalone: true, selector: "mng-table", inputs: { descriptorInput: ["descriptor", "descriptorInput"], items: ["items", "items", (value) => (value == null ? undefined : isObservable(value) ? value : of(value))], result: ["result", "result", (value) => (value == null ? undefined : isObservable(value) ? value : of(value))], loadingInput: ["loading", "loadingInput", boolean$Attribute], dataProvider: "dataProvider", useQueryParams: "useQueryParams", selectionMode: "selectionMode", selectionEnabled: "selectionEnabled", columnLastMinWidth: "columnLastMinWidth", captionComponent: "captionComponent", columnCustomLastComponent: "columnCustomLastComponent", globalFilterFieldsInput: ["globalFilterFields", "globalFilterFieldsInput"] }, outputs: { loadEventEmitter: "tableLoad", cellClickEventEmitter: "cellClick", selectionChangeEventEmitter: "selectionChange", captionCmpInstEventEmitter: "captionComponentInstance", columnCustomLastCmpInstEventEmitter: "columnCustomLastComponentInstance" }, providers: [DataListService], queries: [{ propertyName: "templates", predicate: TemplateDirective, isSignal: true }], viewQueries: [{ propertyName: "primeTable", first: true, predicate: Table, descendants: true }, { propertyName: "components", predicate: ComponentDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [style.height]=\"tableFullHeightOffset() ? 'calc(100vh - ' + tableFullHeightOffset() + 'px)' : null\">\n    <!-- MUST NOT use observable for value when using virtual scroll - does not work for some reason -->\n    @if (!useQueryParams || useQueryParamsInitialized()) {\n        <p-table\n            [value]=\"dataListService.data()\"\n            [dataKey]=\"descriptor().trackProperty\"\n            [lazy]=\"isLazy()\"\n            [loading]=\"dataListService.loading()\"\n            [paginator]=\"isPagination() && !infiniteScroll()\"\n            [rows]=\"infiniteScroll() ? 20 : dataListService.rows()\"\n            [first]=\"infiniteScroll() ? 0 : dataListService.offset()\"\n            [totalRecords]=\"dataListService.count()\"\n            [rowsPerPageOptions]=\"infiniteScroll() ? undefined : dataListService.rowsPerPageOptions()\"\n            [showCurrentPageReport]=\"!infiniteScroll()\"\n            [currentPageReportTemplate]=\"'mngTable.paginationMsg' | translate\"\n            [multiSortMeta]=\"dataListService.sortMeta()\"\n            [filters]=\"dataListService.filterMeta()\"\n            [globalFilterFields]=\"dataListService.globalFilterFields()\"\n            sortMode=\"multiple\"\n            [selection]=\"[]\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            [selectionMode]=\"selectionEnabled ? selectionMode : null\"\n            [scrollable]=\"true\"\n            [virtualScroll]=\"infiniteScroll()\"\n            [virtualScrollItemSize]=\"rowHeight()\"\n            scrollHeight=\"flex\"\n            [rowHover]=\"descriptor().hasHover\"\n            [styleClass]=\"className()\"\n            [resizableColumns]=\"descriptor().hasResizableColumns\"\n            [columnResizeMode]=\"descriptor().columnResizeMode ?? 'expand'\"\n            [reorderableColumns]=\"areColumnsReorderable()\"\n            paginatorDropdownAppendTo=\"body\"\n            [columns]=\"visibleColumns()\"\n            (onColResize)=\"onTableColumnResize($event)\"\n            (onColReorder)=\"onColumnReorder($event)\"\n            (onLazyLoad)=\"onTableLazyLoad($event)\"\n            (onSort)=\"onTableSort($event)\"\n            (onFilter)=\"onTableFilter($event)\">\n            @if (captionTemplate() || captionComponent || descriptor().title) {\n                <ng-template pTemplate=\"caption\">\n                    @if (captionTemplate()) {\n                        <ng-container *ngTemplateOutlet=\"captionTemplate()\"></ng-container>\n                    } @else if (captionComponent) {\n                        <div [mngComponent]=\"captionComponent\" (instanceCreated)=\"captionCmpInstEventEmitter.next($event)\"></div>\n                    } @else {\n                        <h5 class=\"p-0 m-0\">{{ descriptor().title }}</h5>\n                    }\n                </ng-template>\n            }\n            <ng-template pTemplate=\"header\">\n                @if (!descriptor().hideHeader) {\n                    <tr class=\"mng-table-header\" [class]=\"descriptor().headerClassName\">\n                        @if (selectionEnabled) {\n                            @if (selectionMode === 'multiple') {\n                                <th style=\"min-width: 36px\" pFrozenColumn [frozen]=\"descriptor().selectionColumnFrozen ?? true\">\n                                    <p-tableHeaderCheckbox></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]=\"descriptor().selectionColumnFrozen ?? true\"></th>\n                            }\n                        }\n                        @if (descriptor().rowExpandable) {\n                            <th scope=\"col\" class=\"col-1\" pFrozenColumn [frozen]=\"true\"></th>\n                        }\n                        @for (col of visibleColumns(); track col.id) {\n                            <ng-template #sortableColumnTHTemplate>\n                                <div class=\"flex justify-content-between align-items-center\">\n                                    {{ col.descriptor.title ?? (col.descriptor.property | mngI18nProperty: descriptor().model) | translate }}\n                                    <p-sortIcon [field]=\"col.descriptor.property\"></p-sortIcon>\n                                </div>\n                            </ng-template>\n                            <ng-template #nonSortableColumnTHTemplate>\n                                {{ col.descriptor.title ?? (col.descriptor.property | mngI18nProperty: descriptor().model) | translate }}\n                            </ng-template>\n                            @if (col.descriptor.isReorderable) {\n                                <th\n                                    pResizableColumn\n                                    pReorderableColumn\n                                    [id]=\"col.descriptor.property\"\n                                    [pSortableColumn]=\"col.sort?.property\"\n                                    [pSortableColumnDisabled]=\"!col.sort\"\n                                    [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n                                    [style.min-width.px]=\"col.width ? null : col.descriptor.minWidth\"\n                                    [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\"\n                                    [class]=\"col.descriptor.headerClassName | mngTableColumnFilterClass: col.filter : 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 | mngTableColumnFilterClass: col.filter : 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]=\"descriptor().actionColumnFrozen ?? areColumnsToggleable()\"\n                                alignFrozen=\"right\"\n                                class=\"column-custom-last text-right\">\n                                @if (descriptor().hasResizableColumns) {\n                                    <p-multiSelect\n                                        #columnToggleMultiselect\n                                        styleClass=\"p-button-primary mng-table-columns-multiselect\"\n                                        appendTo=\"body\"\n                                        dataKey=\"id\"\n                                        tooltipPosition=\"left\"\n                                        placeholder=\"\"\n                                        dropdownIcon=\"pi pi-sliders-h\"\n                                        [filter]=\"false\"\n                                        [options]=\"columns()\"\n                                        [ngModel]=\"visibleColumns()\"\n                                        [pTooltip]=\"'mngTable.adjustTable' | translate\"\n                                        [displaySelectedLabel]=\"false\"\n                                        (onChange)=\"onColumnToggle($event)\">\n                                        <ng-template pTemplate=\"filter\">\n                                            <div class=\"p-checkbox p-component ml-1\" [ngClass]=\"{'p-checkbox-disabled': !areColumnsToggleable}\">\n                                                <div class=\"p-hidden-accessible\">\n                                                    <input\n                                                        type=\"checkbox\"\n                                                        readonly=\"readonly\"\n                                                        [checked]=\"columnToggleMultiselect.allSelected\"\n                                                        (focus)=\"columnToggleMultiselect.onHeaderCheckboxFocus()\"\n                                                        (blur)=\"columnToggleMultiselect.onHeaderCheckboxBlur()\"\n                                                        (keydown.space)=\"columnToggleMultiselect.onToggleAll($event)\"\n                                                        [disabled]=\"!areColumnsToggleable\" />\n                                                </div>\n                                                <div\n                                                    class=\"p-checkbox-box\"\n                                                    role=\"checkbox\"\n                                                    [attr.aria-checked]=\"columnToggleMultiselect.allSelected\"\n                                                    [ngClass]=\"{\n                                                        'p-highlight': anyColumnVisible()\n                                                    }\"\n                                                    (click)=\"onColumnToggleAll()\">\n                                                    <span class=\"p-checkbox-icon\" [ngClass]=\"{'pi pi-check': anyColumnVisible()}\"></span>\n                                                </div>\n                                            </div>\n                                            <p-button\n                                                icon=\"pi pi-replay\"\n                                                styleClass=\"p-button-secondary\"\n                                                [pTooltip]=\"'mngTable.resetLayout' | translate\"\n                                                tooltipPosition=\"left\"\n                                                (click)=\"resetDefaultLayout()\"></p-button>\n                                        </ng-template>\n                                        <ng-template let-item pTemplate=\"item\">\n                                            {{ item.descriptor.title ?? (item.descriptor.property | mngI18nProperty: descriptor().model) | translate }}\n                                        </ng-template>\n                                    </p-multiSelect>\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]=\"descriptor().selectionColumnFrozen ?? true\"></th>\n                        }\n                        @for (col of visibleColumns(); track col.id) {\n                            <th\n                                [class]=\"col.filter?.columnClassName | mngTableColumnFilterClass: col.filter : hasColumnFilters() && !col.width\"\n                                [style.width.px]=\"col.width\"\n                                [style.width.%]=\"col.width ? null : col.filter?.columnWidth ?? col.descriptor.width ?? null\"\n                                [style.min-width.px]=\"col.width ? null : col.filter?.columnMinWidth ?? col.descriptor.minWidth\"\n                                [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\">\n                                @if (col.filter) {\n                                    <mng-table-column-filter-full [descriptor]=\"col.filter\"></mng-table-column-filter-full>\n                                }\n                            </th>\n                        }\n                        @if (hasLastColumn()) {\n                            <th class=\"column-custom-last\" [style.min-width.px]=\"columnLastMinWidth\"></th>\n                        }\n                    </tr>\n                }\n            </ng-template>\n            <ng-template pTemplate=\"body\" let-item let-idx=\"rowIndex\" let-expanded=\"expanded\">\n                <tr\n                    [style.height.px]=\"rowHeight\"\n                    [ngClass]=\"descriptor().rowClassName | mngClassMap: descriptor().rowClassNameMapFn : item | mngLocaleDefaultRowClass: descriptor() : item\">\n                    @if (selectionEnabled) {\n                        @if (selectionMode === 'multiple') {\n                            <td style=\"min-width: 36px\" pFrozenColumn [frozen]=\"descriptor().selectionColumnFrozen ?? true\">\n                                <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n                            </td>\n                        } @else {\n                            <td style=\"min-width: 36px\" pFrozenColumn [frozen]=\"descriptor().selectionColumnFrozen ?? true\">\n                                <p-tableRadioButton [value]=\"item\"></p-tableRadioButton>\n                            </td>\n                        }\n                    }\n                    @if (descriptor().rowExpandable) {\n                        <td class=\"col-1\">\n                            @if (!descriptor().rowExpandableProperty || item[descriptor().rowExpandableProperty!]) {\n                                <button\n                                    pButton\n                                    type=\"button\"\n                                    [pRowToggler]=\"item\"\n                                    class=\"p-button-text p-button-rounded p-button-plain\"\n                                    [icon]=\"expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'\"></button>\n                            }\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                                    | mngTableColumnFilterClass: col.filter : hasColumnFilters() && !col.width\n                            \"\n                            [class.clickable]=\"cellClickEventEmitter.observed\"\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                            <span class=\"p-column-title\">{{ col.descriptor.title ?? (col.descriptor.property | mngI18nProperty: descriptor().model) | translate }}</span>\n                            <mng-table-column-value [descriptor]=\"col.descriptor\" [item]=\"item\"></mng-table-column-value>\n                        </td>\n                    }\n                    @if (hasLastColumn()) {\n                        <td\n                            class=\"column-custom-last justify-content-end text-right\"\n                            [style.min-width.px]=\"columnLastMinWidth\"\n                            pFrozenColumn\n                            [frozen]=\"descriptor().actionColumnFrozen ?? true\"\n                            alignFrozen=\"right\">\n                            @if (columnCustomLastTemplate()) {\n                                <ng-container *ngTemplateOutlet=\"columnCustomLastTemplate(); context: {rowItem: item, rowIndex: idx}\"></ng-container>\n                            } @else if (columnCustomLastComponent) {\n                                <div [mngComponent]=\"columnCustomLastComponent\" (instanceCreated)=\"columnCustomLastCmpInstEventEmitter.next($event)\"></div>\n                            }\n                        </td>\n                    }\n                </tr>\n            </ng-template>\n            @if (descriptor().rowExpandable) {\n                <ng-template pTemplate=\"rowexpansion\" let-item>\n                    <tr>\n                        <td class=\"col-1\"></td>\n                        <td [colSpan]=\"descriptor().rowExpandableColSpan\">\n                            <ng-container *ngTemplateOutlet=\"rowExpandTemplate(); context: {rowItem: item}\"></ng-container>\n                        </td>\n                    </tr>\n                </ng-template>\n            }\n            <ng-template pTemplate=\"loadingicon\">\n                <div class=\"flex flex-column align-items-center\">\n                    @if (descriptor().loadingIcon) {\n                        <i [class]=\"'text-white text-4xl pi-spin ' + descriptor().loadingIcon\"></i>\n                    }\n                    @if (descriptor().loadingText) {\n                        <div class=\"text text-white text-lg font-semibold\" [ngClass]=\"{'mt-3': descriptor().loadingIcon}\">\n                            {{ descriptor().loadingText ?? '' | translate }}\n                        </div>\n                    }\n                </div>\n            </ng-template>\n            <ng-template pTemplate=\"loadingbody\">\n                <tr [style.height.px]=\"rowHeight\">\n                    <td [attr.colspan]=\"visibleColumns().length + (hasLastColumn() ? 1 : 0) + (selectionEnabled ? 1 : 0)\">\n                        <div class=\"loading-text\"></div>\n                        <p-skeleton [ngStyle]=\"{width: '100%'}\"></p-skeleton>\n                    </td>\n                </tr>\n            </ng-template>\n            <ng-template pTemplate=\"emptymessage\">\n                <tr [style.height.px]=\"rowHeight\">\n                    <td [attr.colspan]=\"visibleColumns().length + (hasLastColumn() ? 1 : 0) + (selectionEnabled ? 1 : 0)\">\n                        {{ 'mngTable.noItems' | translate }}\n                    </td>\n                </tr>\n            </ng-template>\n            @if (footerTemplate()) {\n                <ng-template pTemplate=\"summary\">\n                    <ng-container *ngTemplateOutlet=\"footerTemplate(); context: {data: dataListService.data(), totalCount: dataListService.count()}\"></ng-container>\n                </ng-template>\n            }\n        </p-table>\n    }\n</div>\n", dependencies: [{ kind: "directive", type: ComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "injectionToken", "inputs", "attachToHost", "nodeInjector"], outputs: ["instanceCreated"] }, { kind: "pipe", type: I18nPropertyPipe, name: "mngI18nProperty" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TableColumnValueComponent, selector: "mng-table-column-value", inputs: ["descriptor", "item"] }, { kind: "pipe", type: ClassMapPipe, name: "mngClassMap" }, { kind: "pipe", type: LocaleDefaultRowClassPipe, name: "mngLocaleDefaultRowClass" }, { kind: "component", type: TableColumnFilterFullComponent, selector: "mng-table-column-filter-full", inputs: ["descriptor"] }, { kind: "pipe", type: TableColumnFilterClassPipe, name: "mngTableColumnFilterClass" }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i1$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "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", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], 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.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { 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: ["disabled", "value", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i1$1.TableCheckbox, selector: "p-tableCheckbox", inputs: ["disabled", "value", "index", "inputId", "name", "required", "ariaLabel"] }, { kind: "component", type: i1$1.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i3$2.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i4$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "component", type: i4$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "size", "style", "styleClass", "badgeClass", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: TableComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'mng-table', imports: [
+                        AsyncPipe,
+                        ComponentDirective,
+                        I18nPropertyPipe,
+                        NgClass,
+                        NgStyle,
+                        NgTemplateOutlet,
+                        TableColumnValueComponent,
+                        ClassMapPipe,
+                        LocaleDefaultRowClassPipe,
+                        TableColumnFilterFullComponent,
+                        TableColumnFilterClassPipe,
+                        TableModule,
+                        MultiSelectModule,
+                        ButtonModule,
+                        TooltipModule,
+                        TranslateModule,
+                        FormsModule
+                    ], providers: [DataListService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [style.height]=\"tableFullHeightOffset() ? 'calc(100vh - ' + tableFullHeightOffset() + 'px)' : null\">\n    <!-- MUST NOT use observable for value when using virtual scroll - does not work for some reason -->\n    @if (!useQueryParams || useQueryParamsInitialized()) {\n        <p-table\n            [value]=\"dataListService.data()\"\n            [dataKey]=\"descriptor().trackProperty\"\n            [lazy]=\"isLazy()\"\n            [loading]=\"dataListService.loading()\"\n            [paginator]=\"isPagination() && !infiniteScroll()\"\n            [rows]=\"infiniteScroll() ? 20 : dataListService.rows()\"\n            [first]=\"infiniteScroll() ? 0 : dataListService.offset()\"\n            [totalRecords]=\"dataListService.count()\"\n            [rowsPerPageOptions]=\"infiniteScroll() ? undefined : dataListService.rowsPerPageOptions()\"\n            [showCurrentPageReport]=\"!infiniteScroll()\"\n            [currentPageReportTemplate]=\"'mngTable.paginationMsg' | translate\"\n            [multiSortMeta]=\"dataListService.sortMeta()\"\n            [filters]=\"dataListService.filterMeta()\"\n            [globalFilterFields]=\"dataListService.globalFilterFields()\"\n            sortMode=\"multiple\"\n            [selection]=\"[]\"\n            (selectionChange)=\"onSelectionChange($event)\"\n            [selectionMode]=\"selectionEnabled ? selectionMode : null\"\n            [scrollable]=\"true\"\n            [virtualScroll]=\"infiniteScroll()\"\n            [virtualScrollItemSize]=\"rowHeight()\"\n            scrollHeight=\"flex\"\n            [rowHover]=\"descriptor().hasHover\"\n            [styleClass]=\"className()\"\n            [resizableColumns]=\"descriptor().hasResizableColumns\"\n            [columnResizeMode]=\"descriptor().columnResizeMode ?? 'expand'\"\n            [reorderableColumns]=\"areColumnsReorderable()\"\n            paginatorDropdownAppendTo=\"body\"\n            [columns]=\"visibleColumns()\"\n            (onColResize)=\"onTableColumnResize($event)\"\n            (onColReorder)=\"onColumnReorder($event)\"\n            (onLazyLoad)=\"onTableLazyLoad($event)\"\n            (onSort)=\"onTableSort($event)\"\n            (onFilter)=\"onTableFilter($event)\">\n            @if (captionTemplate() || captionComponent || descriptor().title) {\n                <ng-template pTemplate=\"caption\">\n                    @if (captionTemplate()) {\n                        <ng-container *ngTemplateOutlet=\"captionTemplate()\"></ng-container>\n                    } @else if (captionComponent) {\n                        <div [mngComponent]=\"captionComponent\" (instanceCreated)=\"captionCmpInstEventEmitter.next($event)\"></div>\n                    } @else {\n                        <h5 class=\"p-0 m-0\">{{ descriptor().title }}</h5>\n                    }\n                </ng-template>\n            }\n            <ng-template pTemplate=\"header\">\n                @if (!descriptor().hideHeader) {\n                    <tr class=\"mng-table-header\" [class]=\"descriptor().headerClassName\">\n                        @if (selectionEnabled) {\n                            @if (selectionMode === 'multiple') {\n                                <th style=\"min-width: 36px\" pFrozenColumn [frozen]=\"descriptor().selectionColumnFrozen ?? true\">\n                                    <p-tableHeaderCheckbox></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]=\"descriptor().selectionColumnFrozen ?? true\"></th>\n                            }\n                        }\n                        @if (descriptor().rowExpandable) {\n                            <th scope=\"col\" class=\"col-1\" pFrozenColumn [frozen]=\"true\"></th>\n                        }\n                        @for (col of visibleColumns(); track col.id) {\n                            <ng-template #sortableColumnTHTemplate>\n                                <div class=\"flex justify-content-between align-items-center\">\n                                    {{ col.descriptor.title ?? (col.descriptor.property | mngI18nProperty: descriptor().model) | translate }}\n                                    <p-sortIcon [field]=\"col.descriptor.property\"></p-sortIcon>\n                                </div>\n                            </ng-template>\n                            <ng-template #nonSortableColumnTHTemplate>\n                                {{ col.descriptor.title ?? (col.descriptor.property | mngI18nProperty: descriptor().model) | translate }}\n                            </ng-template>\n                            @if (col.descriptor.isReorderable) {\n                                <th\n                                    pResizableColumn\n                                    pReorderableColumn\n                                    [id]=\"col.descriptor.property\"\n                                    [pSortableColumn]=\"col.sort?.property\"\n                                    [pSortableColumnDisabled]=\"!col.sort\"\n                                    [style.width]=\"col.width ? col.width + 'px' : col.descriptor.width + '%'\"\n                                    [style.min-width.px]=\"col.width ? null : col.descriptor.minWidth\"\n                                    [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\"\n                                    [class]=\"col.descriptor.headerClassName | mngTableColumnFilterClass: col.filter : 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 | mngTableColumnFilterClass: col.filter : 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]=\"descriptor().actionColumnFrozen ?? areColumnsToggleable()\"\n                                alignFrozen=\"right\"\n                                class=\"column-custom-last text-right\">\n                                @if (descriptor().hasResizableColumns) {\n                                    <p-multiSelect\n                                        #columnToggleMultiselect\n                                        styleClass=\"p-button-primary mng-table-columns-multiselect\"\n                                        appendTo=\"body\"\n                                        dataKey=\"id\"\n                                        tooltipPosition=\"left\"\n                                        placeholder=\"\"\n                                        dropdownIcon=\"pi pi-sliders-h\"\n                                        [filter]=\"false\"\n                                        [options]=\"columns()\"\n                                        [ngModel]=\"visibleColumns()\"\n                                        [pTooltip]=\"'mngTable.adjustTable' | translate\"\n                                        [displaySelectedLabel]=\"false\"\n                                        (onChange)=\"onColumnToggle($event)\">\n                                        <ng-template pTemplate=\"filter\">\n                                            <div class=\"p-checkbox p-component ml-1\" [ngClass]=\"{'p-checkbox-disabled': !areColumnsToggleable}\">\n                                                <div class=\"p-hidden-accessible\">\n                                                    <input\n                                                        type=\"checkbox\"\n                                                        readonly=\"readonly\"\n                                                        [checked]=\"columnToggleMultiselect.allSelected\"\n                                                        (focus)=\"columnToggleMultiselect.onHeaderCheckboxFocus()\"\n                                                        (blur)=\"columnToggleMultiselect.onHeaderCheckboxBlur()\"\n                                                        (keydown.space)=\"columnToggleMultiselect.onToggleAll($event)\"\n                                                        [disabled]=\"!areColumnsToggleable\" />\n                                                </div>\n                                                <div\n                                                    class=\"p-checkbox-box\"\n                                                    role=\"checkbox\"\n                                                    [attr.aria-checked]=\"columnToggleMultiselect.allSelected\"\n                                                    [ngClass]=\"{\n                                                        'p-highlight': anyColumnVisible()\n                                                    }\"\n                                                    (click)=\"onColumnToggleAll()\">\n                                                    <span class=\"p-checkbox-icon\" [ngClass]=\"{'pi pi-check': anyColumnVisible()}\"></span>\n                                                </div>\n                                            </div>\n                                            <p-button\n                                                icon=\"pi pi-replay\"\n                                                styleClass=\"p-button-secondary\"\n                                                [pTooltip]=\"'mngTable.resetLayout' | translate\"\n                                                tooltipPosition=\"left\"\n                                                (click)=\"resetDefaultLayout()\"></p-button>\n                                        </ng-template>\n                                        <ng-template let-item pTemplate=\"item\">\n                                            {{ item.descriptor.title ?? (item.descriptor.property | mngI18nProperty: descriptor().model) | translate }}\n                                        </ng-template>\n                                    </p-multiSelect>\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]=\"descriptor().selectionColumnFrozen ?? true\"></th>\n                        }\n                        @for (col of visibleColumns(); track col.id) {\n                            <th\n                                [class]=\"col.filter?.columnClassName | mngTableColumnFilterClass: col.filter : hasColumnFilters() && !col.width\"\n                                [style.width.px]=\"col.width\"\n                                [style.width.%]=\"col.width ? null : col.filter?.columnWidth ?? col.descriptor.width ?? null\"\n                                [style.min-width.px]=\"col.width ? null : col.filter?.columnMinWidth ?? col.descriptor.minWidth\"\n                                [style.max-width.px]=\"col.width ?? col.descriptor.maxWidth\">\n                                @if (col.filter) {\n                                    <mng-table-column-filter-full [descriptor]=\"col.filter\"></mng-table-column-filter-full>\n                                }\n                            </th>\n                        }\n                        @if (hasLastColumn()) {\n                            <th class=\"column-custom-last\" [style.min-width.px]=\"columnLastMinWidth\"></th>\n                        }\n                    </tr>\n                }\n            </ng-template>\n            <ng-template pTemplate=\"body\" let-item let-idx=\"rowIndex\" let-expanded=\"expanded\">\n                <tr\n                    [style.height.px]=\"rowHeight\"\n                    [ngClass]=\"descriptor().rowClassName | mngClassMap: descriptor().rowClassNameMapFn : item | mngLocaleDefaultRowClass: descriptor() : item\">\n                    @if (selectionEnabled) {\n                        @if (selectionMode === 'multiple') {\n                            <td style=\"min-width: 36px\" pFrozenColumn [frozen]=\"descriptor().selectionColumnFrozen ?? true\">\n                                <p-tableCheckbox [value]=\"item\"></p-tableCheckbox>\n                            </td>\n                        } @else {\n                            <td style=\"min-width: 36px\" pFrozenColumn [frozen]=\"descriptor().selectionColumnFrozen ?? true\">\n                                <p-tableRadioButton [value]=\"item\"></p-tableRadioButton>\n                            </td>\n                        }\n                    }\n                    @if (descriptor().rowExpandable) {\n                        <td class=\"col-1\">\n                            @if (!descriptor().rowExpandableProperty || item[descriptor().rowExpandableProperty!]) {\n                                <button\n                                    pButton\n                                    type=\"button\"\n                                    [pRowToggler]=\"item\"\n                                    class=\"p-button-text p-button-rounded p-button-plain\"\n                                    [icon]=\"expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'\"></button>\n                            }\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                                    | mngTableColumnFilterClass: col.filter : hasColumnFilters() && !col.width\n                            \"\n                            [class.clickable]=\"cellClickEventEmitter.observed\"\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                            <span class=\"p-column-title\">{{ col.descriptor.title ?? (col.descriptor.property | mngI18nProperty: descriptor().model) | translate }}</span>\n                            <mng-table-column-value [descriptor]=\"col.descriptor\" [item]=\"item\"></mng-table-column-value>\n                        </td>\n                    }\n                    @if (hasLastColumn()) {\n                        <td\n                            class=\"column-custom-last justify-content-end text-right\"\n                            [style.min-width.px]=\"columnLastMinWidth\"\n                            pFrozenColumn\n                            [frozen]=\"descriptor().actionColumnFrozen ?? true\"\n                            alignFrozen=\"right\">\n                            @if (columnCustomLastTemplate()) {\n                                <ng-container *ngTemplateOutlet=\"columnCustomLastTemplate(); context: {rowItem: item, rowIndex: idx}\"></ng-container>\n                            } @else if (columnCustomLastComponent) {\n                                <div [mngComponent]=\"columnCustomLastComponent\" (instanceCreated)=\"columnCustomLastCmpInstEventEmitter.next($event)\"></div>\n                            }\n                        </td>\n                    }\n                </tr>\n            </ng-template>\n            @if (descriptor().rowExpandable) {\n                <ng-template pTemplate=\"rowexpansion\" let-item>\n                    <tr>\n                        <td class=\"col-1\"></td>\n                        <td [colSpan]=\"descriptor().rowExpandableColSpan\">\n                            <ng-container *ngTemplateOutlet=\"rowExpandTemplate(); context: {rowItem: item}\"></ng-container>\n                        </td>\n                    </tr>\n                </ng-template>\n            }\n            <ng-template pTemplate=\"loadingicon\">\n                <div class=\"flex flex-column align-items-center\">\n                    @if (descriptor().loadingIcon) {\n                        <i [class]=\"'text-white text-4xl pi-spin ' + descriptor().loadingIcon\"></i>\n                    }\n                    @if (descriptor().loadingText) {\n                        <div class=\"text text-white text-lg font-semibold\" [ngClass]=\"{'mt-3': descriptor().loadingIcon}\">\n                            {{ descriptor().loadingText ?? '' | translate }}\n                        </div>\n                    }\n                </div>\n            </ng-template>\n            <ng-template pTemplate=\"loadingbody\">\n                <tr [style.height.px]=\"rowHeight\">\n                    <td [attr.colspan]=\"visibleColumns().length + (hasLastColumn() ? 1 : 0) + (selectionEnabled ? 1 : 0)\">\n                        <div class=\"loading-text\"></div>\n                        <p-skeleton [ngStyle]=\"{width: '100%'}\"></p-skeleton>\n                    </td>\n                </tr>\n            </ng-template>\n            <ng-template pTemplate=\"emptymessage\">\n                <tr [style.height.px]=\"rowHeight\">\n                    <td [attr.colspan]=\"visibleColumns().length + (hasLastColumn() ? 1 : 0) + (selectionEnabled ? 1 : 0)\">\n                        {{ 'mngTable.noItems' | translate }}\n                    </td>\n                </tr>\n            </ng-template>\n            @if (footerTemplate()) {\n                <ng-template pTemplate=\"summary\">\n                    <ng-container *ngTemplateOutlet=\"footerTemplate(); context: {data: dataListService.data(), totalCount: dataListService.count()}\"></ng-container>\n                </ng-template>\n            }\n        </p-table>\n    }\n</div>\n" }]
+        }], propDecorators: { descriptorInput: [{
+                type: Input,
+                args: [{ required: true, alias: 'descriptor' }]
+            }], items: [{
+                type: Input,
+                args: [{ transform: (value) => (value == null ? undefined : isObservable(value) ? value : of(value)) }]
+            }], result: [{
+                type: Input,
+                args: [{
+                        transform: (value) => (value == null ? undefined : isObservable(value) ? value : of(value))
+                    }]
+            }], loadingInput: [{
+                type: Input,
+                args: [{ alias: 'loading', transform: boolean$Attribute }]
+            }], dataProvider: [{
+                type: Input
+            }], useQueryParams: [{
+                type: Input
+            }], selectionMode: [{
+                type: Input
+            }], selectionEnabled: [{
+                type: Input
+            }], columnLastMinWidth: [{
+                type: Input
+            }], captionComponent: [{
+                type: Input
+            }], columnCustomLastComponent: [{
+                type: Input
+            }], globalFilterFieldsInput: [{
+                type: Input,
+                args: ['globalFilterFields']
+            }], loadEventEmitter: [{
+                type: Output,
+                args: ['tableLoad']
+            }], cellClickEventEmitter: [{
+                type: Output,
+                args: ['cellClick']
+            }], selectionChangeEventEmitter: [{
+                type: Output,
+                args: ['selectionChange']
+            }], captionCmpInstEventEmitter: [{
+                type: Output,
+                args: ['captionComponentInstance']
+            }], columnCustomLastCmpInstEventEmitter: [{
+                type: Output,
+                args: ['columnCustomLastComponentInstance']
+            }], components: [{
+                type: ViewChildren,
+                args: [ComponentDirective]
+            }], primeTable: [{
+                type: ViewChild,
+                args: [Table]
+            }] } });
+
+// components
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DataListService, LocaleDefaultRowClassPipe, TableColumnFilterClassPipe, TableColumnFilterFullComponent, TableColumnValueComponent, TableComponent, generateTableLayoutPrefsKey, tableNotificationError };
+//# sourceMappingURL=mediusinc-mng-commons-table.mjs.map