@masterteam/components 0.0.175 → 0.0.177

package/fesm2022/masterteam-components-table.mjs

@@ -19,6 +19,7 @@ import { DateField } from '@masterteam/components/date-field';
 import { NumberField } from '@masterteam/components/number-field';
 import { MultiSelectField } from '@masterteam/components/multi-select-field';
 import { SelectField } from '@masterteam/components/select-field';
+import { TreeSelectField } from '@masterteam/components/treeselect-field';
 import { UserSearchField } from '@masterteam/components/user-search-field';
 import * as XLSX from 'xlsx';
 import { ToggleField } from '@masterteam/components/toggle-field';
@@ -365,6 +366,17 @@ class TableValueResolver {
                     normalizedItemUser['userName'] === objectFilter.userName ||
                     normalizedItemUser['displayName'] === objectFilter.displayName);
             }
+            if (filterType === 'treeSelect') {
+                const filterLabel = TableValueResolver.resolveTreeFilterLabel(filterValue);
+                if (!filterLabel) {
+                    return true;
+                }
+                const itemLabel = normalizedFilterValue ??
+                    TableValueResolver.resolveTreeFilterLabel(itemValue);
+                return itemLabel === null || itemLabel === undefined
+                    ? false
+                    : String(itemLabel).toLowerCase().includes(filterLabel.toLowerCase());
+            }
         }
         if (typeof filterValue === 'boolean') {
             return normalizedFilterValue === filterValue;
@@ -414,7 +426,10 @@ class TableValueResolver {
                 filterValue.to != null ||
                 filterValue.value != null ||
                 filterValue.userName != null ||
-                filterValue.id != null);
+                filterValue.id != null ||
+                filterValue.key != null ||
+                filterValue.label != null ||
+                filterValue.data != null);
         }
         return true;
     }
@@ -483,6 +498,8 @@ class TableValueResolver {
             const right = b;
             if (left['id'] != null && left['id'] === right['id'])
                 return true;
+            if (left['key'] != null && left['key'] === right['key'])
+                return true;
             if (left['userName'] != null && left['userName'] === right['userName']) {
                 return true;
             }
@@ -614,8 +631,10 @@ class TableValueResolver {
             const displayCandidate = objectValue['display'] ??
                 objectValue['displayValue'] ??
                 objectValue['displayName'] ??
+                objectValue['pathLabel'] ??
                 objectValue['name'] ??
                 objectValue['label'] ??
+                objectValue['code'] ??
                 objectValue['value'];
             return TableValueResolver.resolveDisplayValue(displayCandidate);
         }
@@ -685,12 +704,35 @@ class TableValueResolver {
         return (typeof value === 'string' &&
             TableValueResolver.ALL_ENTITY_VIEW_TYPES.includes(value));
     }
+    static resolveTreeFilterLabel(value) {
+        if (!value || typeof value !== 'object') {
+            return null;
+        }
+        const record = value;
+        const data = record['data'];
+        if (data && typeof data === 'object') {
+            const pathLabel = data['pathLabel'];
+            if (typeof pathLabel === 'string' && pathLabel.trim().length > 0) {
+                return pathLabel.trim();
+            }
+        }
+        const pathLabel = record['pathLabel'];
+        if (typeof pathLabel === 'string' && pathLabel.trim().length > 0) {
+            return pathLabel.trim();
+        }
+        const label = record['label'];
+        if (typeof label === 'string' && label.trim().length > 0) {
+            return label.trim();
+        }
+        const key = record['key'];
+        return typeof key === 'string' && key.trim().length > 0 ? key.trim() : null;
+    }
 }
 
 /**
  * Renders a single filter control for one `ColumnDef`, dispatching on
- * `column.filterConfig.type` (`text` | `select` | `date` | `boolean` | `user`
- * | `numberRange`).
+ * `column.filterConfig.type` (`text` | `select` | `treeSelect` | `date`
+ * | `boolean` | `user` | `numberRange`).
  *
  * Two-way binds the filter value via `value` / `valueChange`. Shared by both
  * filter UX modes (popover + per-column) so field rendering lives in one place.
@@ -716,6 +758,7 @@ class TableFilterField {
         return [current];
     }, ...(ngDevMode ? [{ debugName: "multiValue" }] : /* istanbul ignore next */ []));
     filterOptions = computed(() => this.column().filterConfig?.options ?? EMPTY_MULTI_VALUE, ...(ngDevMode ? [{ debugName: "filterOptions" }] : /* istanbul ignore next */ []));
+    treeOptions = computed(() => this.column().filterConfig?.treeOptions ?? [], ...(ngDevMode ? [{ debugName: "treeOptions" }] : /* istanbul ignore next */ []));
     getFilterType() {
         return this.column().filterConfig?.type ?? 'text';
     }
@@ -749,6 +792,37 @@ class TableFilterField {
     updateScalar(next) {
         this.value.set(next);
     }
+    getTreePlaceholder() {
+        const configured = this.column().filterConfig?.['placeholder'];
+        if (typeof configured === 'string' && configured.trim().length > 0) {
+            return configured;
+        }
+        return `${this.transloco.translate('components.table.select')} ${this.column().filterConfig?.label || this.column().label}`;
+    }
+    getTreeFilterBy() {
+        const configured = this.column().filterConfig?.['filterBy'];
+        return typeof configured === 'string' && configured.trim().length > 0
+            ? configured
+            : 'label,data.pathLabel';
+    }
+    getTreeFilterPlaceholder() {
+        const configured = this.column().filterConfig?.['filterPlaceholder'];
+        return typeof configured === 'string' && configured.trim().length > 0
+            ? configured
+            : this.transloco.translate('components.table.search');
+    }
+    getTreeScrollHeight() {
+        const configured = this.column().filterConfig?.['scrollHeight'];
+        return typeof configured === 'string' && configured.trim().length > 0
+            ? configured
+            : '20rem';
+    }
+    getTreePanelStyleClass() {
+        const configured = this.column().filterConfig?.['panelStyleClass'];
+        return typeof configured === 'string' && configured.trim().length > 0
+            ? configured
+            : undefined;
+    }
     updateDate(part, next) {
         const current = this.value() ?? {};
         this.value.set({ ...current, [part]: next });
@@ -758,7 +832,7 @@ class TableFilterField {
         this.value.set({ ...current, [part]: next });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TableFilterField, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: TableFilterField, isStandalone: true, selector: "mt-table-filter-field", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: "@switch (getFilterType()) {\r\n  @case (\"text\") {\r\n    <mt-text-field\r\n      [ngModel]=\"getScalarValue()\"\r\n      (ngModelChange)=\"updateScalar($event)\"\r\n      [placeholder]=\"\r\n        ('components.table.select' | transloco) +\r\n        ' ' +\r\n        (column().filterConfig?.label || column().label)\r\n      \"\r\n    />\r\n  }\r\n  @case (\"select\") {\r\n    @if (isMultiple()) {\r\n      <mt-multi-select-field\r\n        [ngModel]=\"multiValue()\"\r\n        (ngModelChange)=\"updateScalar($event)\"\r\n        [options]=\"filterOptions()\"\r\n        [placeholder]=\"\r\n          ('components.table.select' | transloco) +\r\n          ' ' +\r\n          (column().filterConfig?.label || column().label)\r\n        \"\r\n        [showClear]=\"true\"\r\n        [filter]=\"true\"\r\n        filterBy=\"label\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n    } @else {\r\n      <mt-select-field\r\n        [ngModel]=\"getScalarValue()\"\r\n        (ngModelChange)=\"updateScalar($event)\"\r\n        [options]=\"filterOptions()\"\r\n        [placeholder]=\"\r\n          ('components.table.select' | transloco) +\r\n          ' ' +\r\n          (column().filterConfig?.label || column().label)\r\n        \"\r\n        [hasPlaceholderPrefix]=\"false\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n        showClear\r\n      />\r\n    }\r\n  }\r\n  @case (\"userSelect\") {\r\n    @if (isMultiple()) {\r\n      <mt-multi-select-field\r\n        [ngModel]=\"multiValue()\"\r\n        (ngModelChange)=\"updateScalar($event)\"\r\n        [options]=\"filterOptions()\"\r\n        [placeholder]=\"\r\n          ('components.table.select' | transloco) +\r\n          ' ' +\r\n          (column().filterConfig?.label || column().label)\r\n        \"\r\n        [showClear]=\"true\"\r\n        [filter]=\"true\"\r\n        filterBy=\"label\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n    } @else {\r\n      <mt-select-field\r\n        [ngModel]=\"getScalarValue()\"\r\n        (ngModelChange)=\"updateScalar($event)\"\r\n        [options]=\"filterOptions()\"\r\n        [placeholder]=\"\r\n          ('components.table.select' | transloco) +\r\n          ' ' +\r\n          (column().filterConfig?.label || column().label)\r\n        \"\r\n        [hasPlaceholderPrefix]=\"false\"\r\n        [markCurrentUser]=\"true\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n        showClear\r\n      />\r\n    }\r\n  }\r\n  @case (\"date\") {\r\n    <div class=\"space-y-3\">\r\n      <div class=\"space-y-1\">\r\n        <label\r\n          class=\"block text-sm font-medium text-gray-700 dark:text-gray-300\"\r\n        >\r\n          {{ \"components.table.from\" | transloco }}\r\n        </label>\r\n        <mt-date-field\r\n          [ngModel]=\"getDateRangeValue('from')\"\r\n          (ngModelChange)=\"updateDate('from', $event)\"\r\n          [placeholder]=\"'components.table.from' | transloco\"\r\n        />\r\n      </div>\r\n      <div class=\"space-y-1\">\r\n        <label\r\n          class=\"block text-sm font-medium text-gray-700 dark:text-gray-300\"\r\n        >\r\n          {{ \"components.table.to\" | transloco }}\r\n        </label>\r\n        <mt-date-field\r\n          [ngModel]=\"getDateRangeValue('to')\"\r\n          (ngModelChange)=\"updateDate('to', $event)\"\r\n          [placeholder]=\"'components.table.to' | transloco\"\r\n        />\r\n      </div>\r\n    </div>\r\n  }\r\n  @case (\"boolean\") {\r\n    <mt-select-field\r\n      [ngModel]=\"getScalarValue()\"\r\n      (ngModelChange)=\"updateScalar($event)\"\r\n      [options]=\"booleanOptions()\"\r\n      [placeholder]=\"'components.table.select' | transloco\"\r\n      [hasPlaceholderPrefix]=\"false\"\r\n      optionLabel=\"label\"\r\n      optionValue=\"value\"\r\n      showClear\r\n    />\r\n  }\r\n  @case (\"user\") {\r\n    <mt-user-search-field\r\n      [ngModel]=\"getScalarValue()\"\r\n      (ngModelChange)=\"updateScalar($event)\"\r\n      [placeholder]=\"column().filterConfig?.label || column().label\"\r\n      [apiUrl]=\"column().filterConfig?.apiUrl ?? ''\"\r\n      [context]=\"column().filterConfig?.context\"\r\n    />\r\n  }\r\n  @case (\"numberRange\") {\r\n    <div class=\"space-y-3\">\r\n      <div class=\"space-y-1\">\r\n        <label\r\n          class=\"block text-sm font-medium text-gray-700 dark:text-gray-300\"\r\n        >\r\n          {{ \"components.table.from\" | transloco }}\r\n        </label>\r\n        <mt-number-field\r\n          [ngModel]=\"getNumberRangeValue('from')\"\r\n          (ngModelChange)=\"updateNumber('from', $event)\"\r\n          [placeholder]=\"'components.table.from' | transloco\"\r\n        />\r\n      </div>\r\n      <div class=\"space-y-1\">\r\n        <label\r\n          class=\"block text-sm font-medium text-gray-700 dark:text-gray-300\"\r\n        >\r\n          {{ \"components.table.to\" | transloco }}\r\n        </label>\r\n        <mt-number-field\r\n          [ngModel]=\"getNumberRangeValue('to')\"\r\n          (ngModelChange)=\"updateNumber('to', $event)\"\r\n          [placeholder]=\"'components.table.to' | transloco\"\r\n        />\r\n      </div>\r\n    </div>\r\n  }\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "icon", "iconPosition"] }, { kind: "component", type: NumberField, selector: "mt-number-field", inputs: ["field", "hint", "label", "placeholder", "class", "readonly", "pInputs", "format", "useGrouping", "maxFractionDigits", "min", "max", "required"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "hint", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape", "markCurrentUser"], outputs: ["onChange"] }, { kind: "component", type: MultiSelectField, selector: "mt-multi-select-field", inputs: ["field", "label", "placeholder", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "display", "required", "maxSelectedLabels", "group", "optionGroupLabel", "optionGroupChildren", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "component", type: DateField, selector: "mt-date-field", inputs: ["field", "hint", "label", "placeholder", "class", "readonly", "showIcon", "showClear", "showTime", "pInputs", "required"] }, { kind: "component", type: UserSearchField, selector: "mt-user-search-field", inputs: ["hint", "label", "placeholder", "class", "readonly", "required", "isMultiple", "apiUrl", "dataKey", "paramName", "context", "size"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: TableFilterField, isStandalone: true, selector: "mt-table-filter-field", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, ngImport: i0, template: "@switch (getFilterType()) {\r\n  @case (\"text\") {\r\n    <mt-text-field\r\n      [ngModel]=\"getScalarValue()\"\r\n      (ngModelChange)=\"updateScalar($event)\"\r\n      [placeholder]=\"\r\n        ('components.table.select' | transloco) +\r\n        ' ' +\r\n        (column().filterConfig?.label || column().label)\r\n      \"\r\n    />\r\n  }\r\n  @case (\"select\") {\r\n    @if (isMultiple()) {\r\n      <mt-multi-select-field\r\n        [ngModel]=\"multiValue()\"\r\n        (ngModelChange)=\"updateScalar($event)\"\r\n        [options]=\"filterOptions()\"\r\n        [placeholder]=\"\r\n          ('components.table.select' | transloco) +\r\n          ' ' +\r\n          (column().filterConfig?.label || column().label)\r\n        \"\r\n        [showClear]=\"true\"\r\n        [filter]=\"true\"\r\n        filterBy=\"label\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n    } @else {\r\n      <mt-select-field\r\n        [ngModel]=\"getScalarValue()\"\r\n        (ngModelChange)=\"updateScalar($event)\"\r\n        [options]=\"filterOptions()\"\r\n        [placeholder]=\"\r\n          ('components.table.select' | transloco) +\r\n          ' ' +\r\n          (column().filterConfig?.label || column().label)\r\n        \"\r\n        [hasPlaceholderPrefix]=\"false\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n        showClear\r\n      />\r\n    }\r\n  }\r\n  @case (\"userSelect\") {\r\n    @if (isMultiple()) {\r\n      <mt-multi-select-field\r\n        [ngModel]=\"multiValue()\"\r\n        (ngModelChange)=\"updateScalar($event)\"\r\n        [options]=\"filterOptions()\"\r\n        [placeholder]=\"\r\n          ('components.table.select' | transloco) +\r\n          ' ' +\r\n          (column().filterConfig?.label || column().label)\r\n        \"\r\n        [showClear]=\"true\"\r\n        [filter]=\"true\"\r\n        filterBy=\"label\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n    } @else {\r\n      <mt-select-field\r\n        [ngModel]=\"getScalarValue()\"\r\n        (ngModelChange)=\"updateScalar($event)\"\r\n        [options]=\"filterOptions()\"\r\n        [placeholder]=\"\r\n          ('components.table.select' | transloco) +\r\n          ' ' +\r\n          (column().filterConfig?.label || column().label)\r\n        \"\r\n        [hasPlaceholderPrefix]=\"false\"\r\n        [markCurrentUser]=\"true\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n        showClear\r\n      />\r\n    }\r\n  }\r\n  @case (\"treeSelect\") {\r\n    <mt-treeselect-field\r\n      [ngModel]=\"value()\"\r\n      (ngModelChange)=\"updateScalar($event)\"\r\n      [options]=\"treeOptions()\"\r\n      [placeholder]=\"getTreePlaceholder()\"\r\n      [selectionMode]=\"$any(column().filterConfig)?.selectionMode || 'single'\"\r\n      [scrollHeight]=\"getTreeScrollHeight()\"\r\n      [panelStyleClass]=\"getTreePanelStyleClass()\"\r\n      [filter]=\"column().filterConfig?.['filter'] !== false\"\r\n      [filterBy]=\"getTreeFilterBy()\"\r\n      [filterPlaceholder]=\"getTreeFilterPlaceholder()\"\r\n      [showClear]=\"column().filterConfig?.['showClear'] !== false\"\r\n      [resetFilterOnHide]=\"\r\n        column().filterConfig?.['resetFilterOnHide'] !== false\r\n      \"\r\n      [overlayOptions]=\"$any(column().filterConfig)?.overlayOptions\"\r\n    />\r\n  }\r\n  @case (\"date\") {\r\n    <div class=\"space-y-3\">\r\n      <div class=\"space-y-1\">\r\n        <label\r\n          class=\"block text-sm font-medium text-gray-700 dark:text-gray-300\"\r\n        >\r\n          {{ \"components.table.from\" | transloco }}\r\n        </label>\r\n        <mt-date-field\r\n          [ngModel]=\"getDateRangeValue('from')\"\r\n          (ngModelChange)=\"updateDate('from', $event)\"\r\n          [placeholder]=\"'components.table.from' | transloco\"\r\n        />\r\n      </div>\r\n      <div class=\"space-y-1\">\r\n        <label\r\n          class=\"block text-sm font-medium text-gray-700 dark:text-gray-300\"\r\n        >\r\n          {{ \"components.table.to\" | transloco }}\r\n        </label>\r\n        <mt-date-field\r\n          [ngModel]=\"getDateRangeValue('to')\"\r\n          (ngModelChange)=\"updateDate('to', $event)\"\r\n          [placeholder]=\"'components.table.to' | transloco\"\r\n        />\r\n      </div>\r\n    </div>\r\n  }\r\n  @case (\"boolean\") {\r\n    <mt-select-field\r\n      [ngModel]=\"getScalarValue()\"\r\n      (ngModelChange)=\"updateScalar($event)\"\r\n      [options]=\"booleanOptions()\"\r\n      [placeholder]=\"'components.table.select' | transloco\"\r\n      [hasPlaceholderPrefix]=\"false\"\r\n      optionLabel=\"label\"\r\n      optionValue=\"value\"\r\n      showClear\r\n    />\r\n  }\r\n  @case (\"user\") {\r\n    <mt-user-search-field\r\n      [ngModel]=\"getScalarValue()\"\r\n      (ngModelChange)=\"updateScalar($event)\"\r\n      [placeholder]=\"column().filterConfig?.label || column().label\"\r\n      [apiUrl]=\"column().filterConfig?.apiUrl ?? ''\"\r\n      [context]=\"column().filterConfig?.context\"\r\n    />\r\n  }\r\n  @case (\"numberRange\") {\r\n    <div class=\"space-y-3\">\r\n      <div class=\"space-y-1\">\r\n        <label\r\n          class=\"block text-sm font-medium text-gray-700 dark:text-gray-300\"\r\n        >\r\n          {{ \"components.table.from\" | transloco }}\r\n        </label>\r\n        <mt-number-field\r\n          [ngModel]=\"getNumberRangeValue('from')\"\r\n          (ngModelChange)=\"updateNumber('from', $event)\"\r\n          [placeholder]=\"'components.table.from' | transloco\"\r\n        />\r\n      </div>\r\n      <div class=\"space-y-1\">\r\n        <label\r\n          class=\"block text-sm font-medium text-gray-700 dark:text-gray-300\"\r\n        >\r\n          {{ \"components.table.to\" | transloco }}\r\n        </label>\r\n        <mt-number-field\r\n          [ngModel]=\"getNumberRangeValue('to')\"\r\n          (ngModelChange)=\"updateNumber('to', $event)\"\r\n          [placeholder]=\"'components.table.to' | transloco\"\r\n        />\r\n      </div>\r\n    </div>\r\n  }\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "maxLength", "icon", "iconPosition"] }, { kind: "component", type: NumberField, selector: "mt-number-field", inputs: ["field", "hint", "label", "placeholder", "class", "readonly", "pInputs", "format", "useGrouping", "maxFractionDigits", "min", "max", "required"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "hint", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape", "markCurrentUser"], outputs: ["onChange"] }, { kind: "component", type: MultiSelectField, selector: "mt-multi-select-field", inputs: ["field", "label", "placeholder", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "display", "required", "maxSelectedLabels", "group", "optionGroupLabel", "optionGroupChildren", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape"], outputs: ["onChange"] }, { kind: "component", type: DateField, selector: "mt-date-field", inputs: ["field", "hint", "label", "placeholder", "class", "readonly", "showIcon", "showClear", "showTime", "pInputs", "required"] }, { kind: "component", type: UserSearchField, selector: "mt-user-search-field", inputs: ["hint", "label", "placeholder", "class", "readonly", "required", "isMultiple", "apiUrl", "dataKey", "paramName", "context", "size"] }, { kind: "component", type: TreeSelectField, selector: "mt-treeselect-field", inputs: ["field", "hint", "label", "placeholder", "class", "readonly", "required", "pInputs", "options", "selectionMode", "display", "scrollHeight", "panelStyleClass", "containerStyleClass", "overlayOptions", "filter", "filterBy", "filterMode", "filterPlaceholder", "filterLocale", "filterInputAutoFocus", "showClear", "resetFilterOnHide", "propagateSelectionDown", "propagateSelectionUp", "virtualScroll", "virtualScrollItemSize", "loading", "loadingMode", "size", "variant", "fluid", "appendTo", "selectedLabelPath"], outputs: ["onChange"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TableFilterField, decorators: [{
             type: Component,
@@ -770,11 +844,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         MultiSelectField,
                         DateField,
                         UserSearchField,
+                        TreeSelectField,
                         TranslocoModule,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@switch (getFilterType()) {\r\n  @case (\"text\") {\r\n    <mt-text-field\r\n      [ngModel]=\"getScalarValue()\"\r\n      (ngModelChange)=\"updateScalar($event)\"\r\n      [placeholder]=\"\r\n        ('components.table.select' | transloco) +\r\n        ' ' +\r\n        (column().filterConfig?.label || column().label)\r\n      \"\r\n    />\r\n  }\r\n  @case (\"select\") {\r\n    @if (isMultiple()) {\r\n      <mt-multi-select-field\r\n        [ngModel]=\"multiValue()\"\r\n        (ngModelChange)=\"updateScalar($event)\"\r\n        [options]=\"filterOptions()\"\r\n        [placeholder]=\"\r\n          ('components.table.select' | transloco) +\r\n          ' ' +\r\n          (column().filterConfig?.label || column().label)\r\n        \"\r\n        [showClear]=\"true\"\r\n        [filter]=\"true\"\r\n        filterBy=\"label\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n    } @else {\r\n      <mt-select-field\r\n        [ngModel]=\"getScalarValue()\"\r\n        (ngModelChange)=\"updateScalar($event)\"\r\n        [options]=\"filterOptions()\"\r\n        [placeholder]=\"\r\n          ('components.table.select' | transloco) +\r\n          ' ' +\r\n          (column().filterConfig?.label || column().label)\r\n        \"\r\n        [hasPlaceholderPrefix]=\"false\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n        showClear\r\n      />\r\n    }\r\n  }\r\n  @case (\"userSelect\") {\r\n    @if (isMultiple()) {\r\n      <mt-multi-select-field\r\n        [ngModel]=\"multiValue()\"\r\n        (ngModelChange)=\"updateScalar($event)\"\r\n        [options]=\"filterOptions()\"\r\n        [placeholder]=\"\r\n          ('components.table.select' | transloco) +\r\n          ' ' +\r\n          (column().filterConfig?.label || column().label)\r\n        \"\r\n        [showClear]=\"true\"\r\n        [filter]=\"true\"\r\n        filterBy=\"label\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n    } @else {\r\n      <mt-select-field\r\n        [ngModel]=\"getScalarValue()\"\r\n        (ngModelChange)=\"updateScalar($event)\"\r\n        [options]=\"filterOptions()\"\r\n        [placeholder]=\"\r\n          ('components.table.select' | transloco) +\r\n          ' ' +\r\n          (column().filterConfig?.label || column().label)\r\n        \"\r\n        [hasPlaceholderPrefix]=\"false\"\r\n        [markCurrentUser]=\"true\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n        showClear\r\n      />\r\n    }\r\n  }\r\n  @case (\"date\") {\r\n    <div class=\"space-y-3\">\r\n      <div class=\"space-y-1\">\r\n        <label\r\n          class=\"block text-sm font-medium text-gray-700 dark:text-gray-300\"\r\n        >\r\n          {{ \"components.table.from\" | transloco }}\r\n        </label>\r\n        <mt-date-field\r\n          [ngModel]=\"getDateRangeValue('from')\"\r\n          (ngModelChange)=\"updateDate('from', $event)\"\r\n          [placeholder]=\"'components.table.from' | transloco\"\r\n        />\r\n      </div>\r\n      <div class=\"space-y-1\">\r\n        <label\r\n          class=\"block text-sm font-medium text-gray-700 dark:text-gray-300\"\r\n        >\r\n          {{ \"components.table.to\" | transloco }}\r\n        </label>\r\n        <mt-date-field\r\n          [ngModel]=\"getDateRangeValue('to')\"\r\n          (ngModelChange)=\"updateDate('to', $event)\"\r\n          [placeholder]=\"'components.table.to' | transloco\"\r\n        />\r\n      </div>\r\n    </div>\r\n  }\r\n  @case (\"boolean\") {\r\n    <mt-select-field\r\n      [ngModel]=\"getScalarValue()\"\r\n      (ngModelChange)=\"updateScalar($event)\"\r\n      [options]=\"booleanOptions()\"\r\n      [placeholder]=\"'components.table.select' | transloco\"\r\n      [hasPlaceholderPrefix]=\"false\"\r\n      optionLabel=\"label\"\r\n      optionValue=\"value\"\r\n      showClear\r\n    />\r\n  }\r\n  @case (\"user\") {\r\n    <mt-user-search-field\r\n      [ngModel]=\"getScalarValue()\"\r\n      (ngModelChange)=\"updateScalar($event)\"\r\n      [placeholder]=\"column().filterConfig?.label || column().label\"\r\n      [apiUrl]=\"column().filterConfig?.apiUrl ?? ''\"\r\n      [context]=\"column().filterConfig?.context\"\r\n    />\r\n  }\r\n  @case (\"numberRange\") {\r\n    <div class=\"space-y-3\">\r\n      <div class=\"space-y-1\">\r\n        <label\r\n          class=\"block text-sm font-medium text-gray-700 dark:text-gray-300\"\r\n        >\r\n          {{ \"components.table.from\" | transloco }}\r\n        </label>\r\n        <mt-number-field\r\n          [ngModel]=\"getNumberRangeValue('from')\"\r\n          (ngModelChange)=\"updateNumber('from', $event)\"\r\n          [placeholder]=\"'components.table.from' | transloco\"\r\n        />\r\n      </div>\r\n      <div class=\"space-y-1\">\r\n        <label\r\n          class=\"block text-sm font-medium text-gray-700 dark:text-gray-300\"\r\n        >\r\n          {{ \"components.table.to\" | transloco }}\r\n        </label>\r\n        <mt-number-field\r\n          [ngModel]=\"getNumberRangeValue('to')\"\r\n          (ngModelChange)=\"updateNumber('to', $event)\"\r\n          [placeholder]=\"'components.table.to' | transloco\"\r\n        />\r\n      </div>\r\n    </div>\r\n  }\r\n}\r\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@switch (getFilterType()) {\r\n  @case (\"text\") {\r\n    <mt-text-field\r\n      [ngModel]=\"getScalarValue()\"\r\n      (ngModelChange)=\"updateScalar($event)\"\r\n      [placeholder]=\"\r\n        ('components.table.select' | transloco) +\r\n        ' ' +\r\n        (column().filterConfig?.label || column().label)\r\n      \"\r\n    />\r\n  }\r\n  @case (\"select\") {\r\n    @if (isMultiple()) {\r\n      <mt-multi-select-field\r\n        [ngModel]=\"multiValue()\"\r\n        (ngModelChange)=\"updateScalar($event)\"\r\n        [options]=\"filterOptions()\"\r\n        [placeholder]=\"\r\n          ('components.table.select' | transloco) +\r\n          ' ' +\r\n          (column().filterConfig?.label || column().label)\r\n        \"\r\n        [showClear]=\"true\"\r\n        [filter]=\"true\"\r\n        filterBy=\"label\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n    } @else {\r\n      <mt-select-field\r\n        [ngModel]=\"getScalarValue()\"\r\n        (ngModelChange)=\"updateScalar($event)\"\r\n        [options]=\"filterOptions()\"\r\n        [placeholder]=\"\r\n          ('components.table.select' | transloco) +\r\n          ' ' +\r\n          (column().filterConfig?.label || column().label)\r\n        \"\r\n        [hasPlaceholderPrefix]=\"false\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n        showClear\r\n      />\r\n    }\r\n  }\r\n  @case (\"userSelect\") {\r\n    @if (isMultiple()) {\r\n      <mt-multi-select-field\r\n        [ngModel]=\"multiValue()\"\r\n        (ngModelChange)=\"updateScalar($event)\"\r\n        [options]=\"filterOptions()\"\r\n        [placeholder]=\"\r\n          ('components.table.select' | transloco) +\r\n          ' ' +\r\n          (column().filterConfig?.label || column().label)\r\n        \"\r\n        [showClear]=\"true\"\r\n        [filter]=\"true\"\r\n        filterBy=\"label\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n    } @else {\r\n      <mt-select-field\r\n        [ngModel]=\"getScalarValue()\"\r\n        (ngModelChange)=\"updateScalar($event)\"\r\n        [options]=\"filterOptions()\"\r\n        [placeholder]=\"\r\n          ('components.table.select' | transloco) +\r\n          ' ' +\r\n          (column().filterConfig?.label || column().label)\r\n        \"\r\n        [hasPlaceholderPrefix]=\"false\"\r\n        [markCurrentUser]=\"true\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n        showClear\r\n      />\r\n    }\r\n  }\r\n  @case (\"treeSelect\") {\r\n    <mt-treeselect-field\r\n      [ngModel]=\"value()\"\r\n      (ngModelChange)=\"updateScalar($event)\"\r\n      [options]=\"treeOptions()\"\r\n      [placeholder]=\"getTreePlaceholder()\"\r\n      [selectionMode]=\"$any(column().filterConfig)?.selectionMode || 'single'\"\r\n      [scrollHeight]=\"getTreeScrollHeight()\"\r\n      [panelStyleClass]=\"getTreePanelStyleClass()\"\r\n      [filter]=\"column().filterConfig?.['filter'] !== false\"\r\n      [filterBy]=\"getTreeFilterBy()\"\r\n      [filterPlaceholder]=\"getTreeFilterPlaceholder()\"\r\n      [showClear]=\"column().filterConfig?.['showClear'] !== false\"\r\n      [resetFilterOnHide]=\"\r\n        column().filterConfig?.['resetFilterOnHide'] !== false\r\n      \"\r\n      [overlayOptions]=\"$any(column().filterConfig)?.overlayOptions\"\r\n    />\r\n  }\r\n  @case (\"date\") {\r\n    <div class=\"space-y-3\">\r\n      <div class=\"space-y-1\">\r\n        <label\r\n          class=\"block text-sm font-medium text-gray-700 dark:text-gray-300\"\r\n        >\r\n          {{ \"components.table.from\" | transloco }}\r\n        </label>\r\n        <mt-date-field\r\n          [ngModel]=\"getDateRangeValue('from')\"\r\n          (ngModelChange)=\"updateDate('from', $event)\"\r\n          [placeholder]=\"'components.table.from' | transloco\"\r\n        />\r\n      </div>\r\n      <div class=\"space-y-1\">\r\n        <label\r\n          class=\"block text-sm font-medium text-gray-700 dark:text-gray-300\"\r\n        >\r\n          {{ \"components.table.to\" | transloco }}\r\n        </label>\r\n        <mt-date-field\r\n          [ngModel]=\"getDateRangeValue('to')\"\r\n          (ngModelChange)=\"updateDate('to', $event)\"\r\n          [placeholder]=\"'components.table.to' | transloco\"\r\n        />\r\n      </div>\r\n    </div>\r\n  }\r\n  @case (\"boolean\") {\r\n    <mt-select-field\r\n      [ngModel]=\"getScalarValue()\"\r\n      (ngModelChange)=\"updateScalar($event)\"\r\n      [options]=\"booleanOptions()\"\r\n      [placeholder]=\"'components.table.select' | transloco\"\r\n      [hasPlaceholderPrefix]=\"false\"\r\n      optionLabel=\"label\"\r\n      optionValue=\"value\"\r\n      showClear\r\n    />\r\n  }\r\n  @case (\"user\") {\r\n    <mt-user-search-field\r\n      [ngModel]=\"getScalarValue()\"\r\n      (ngModelChange)=\"updateScalar($event)\"\r\n      [placeholder]=\"column().filterConfig?.label || column().label\"\r\n      [apiUrl]=\"column().filterConfig?.apiUrl ?? ''\"\r\n      [context]=\"column().filterConfig?.context\"\r\n    />\r\n  }\r\n  @case (\"numberRange\") {\r\n    <div class=\"space-y-3\">\r\n      <div class=\"space-y-1\">\r\n        <label\r\n          class=\"block text-sm font-medium text-gray-700 dark:text-gray-300\"\r\n        >\r\n          {{ \"components.table.from\" | transloco }}\r\n        </label>\r\n        <mt-number-field\r\n          [ngModel]=\"getNumberRangeValue('from')\"\r\n          (ngModelChange)=\"updateNumber('from', $event)\"\r\n          [placeholder]=\"'components.table.from' | transloco\"\r\n        />\r\n      </div>\r\n      <div class=\"space-y-1\">\r\n        <label\r\n          class=\"block text-sm font-medium text-gray-700 dark:text-gray-300\"\r\n        >\r\n          {{ \"components.table.to\" | transloco }}\r\n        </label>\r\n        <mt-number-field\r\n          [ngModel]=\"getNumberRangeValue('to')\"\r\n          (ngModelChange)=\"updateNumber('to', $event)\"\r\n          [placeholder]=\"'components.table.to' | transloco\"\r\n        />\r\n      </div>\r\n    </div>\r\n  }\r\n}\r\n" }]
         }], propDecorators: { column: [{ type: i0.Input, args: [{ isSignal: true, alias: "column", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
-const OVERLAY_SELECTOR$1 = '.p-popover, .p-select-overlay, .p-multiselect-overlay, .p-datepicker-panel, .p-autocomplete-panel';
+const OVERLAY_SELECTOR$1 = '.p-popover, .p-select-overlay, .p-multiselect-overlay, .p-treeselect-overlay, .p-datepicker-panel, .p-autocomplete-overlay';
+// Field overlays only (no popover). A select/multiselect/autocomplete/datepicker
+// opened inside the popover anchors its own scroll-to-close listener to the
+// popover's inner scroll container, so a page-level scroll never reaches it.
+const FIELD_OVERLAY_SELECTOR = '.p-select-overlay, .p-multiselect-overlay, .p-treeselect-overlay, .p-datepicker-panel, .p-autocomplete-overlay';
 class TableFilter {
     columns = input.required(...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
     data = input([], ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
@@ -799,6 +878,13 @@ class TableFilter {
             if (target instanceof Element && target.closest(OVERLAY_SELECTOR$1)) {
                 return;
             }
+            // An open field dropdown is body-appended and would be left orphaned when
+            // we hide the popover below (its scroll listener is bound to the popover's
+            // inner scroll container, not the window). A window resize makes PrimeNG
+            // self-close those overlays before the popover goes away.
+            if (document.querySelector(FIELD_OVERLAY_SELECTOR)) {
+                window.dispatchEvent(new Event('resize'));
+            }
             popover.hide();
         };
         window.addEventListener('scroll', onScroll, true);
@@ -948,7 +1034,7 @@ class TableCaption {
         this.onTabChange.emit(tab);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TableCaption, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: TableCaption, isStandalone: true, selector: "mt-table-caption", inputs: { generalSearch: { classPropertyName: "generalSearch", publicName: "generalSearch", isSignal: true, isRequired: false, transformFunction: null }, showFilters: { classPropertyName: "showFilters", publicName: "showFilters", isSignal: true, isRequired: false, transformFunction: null }, filterMode: { classPropertyName: "filterMode", publicName: "filterMode", isSignal: true, isRequired: false, transformFunction: null }, exportable: { classPropertyName: "exportable", publicName: "exportable", isSignal: true, isRequired: false, transformFunction: null }, printable: { classPropertyName: "printable", publicName: "printable", isSignal: true, isRequired: false, transformFunction: null }, groupable: { classPropertyName: "groupable", publicName: "groupable", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, groupColumns: { classPropertyName: "groupColumns", publicName: "groupColumns", isSignal: true, isRequired: false, transformFunction: null }, tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null }, tabsOptionLabel: { classPropertyName: "tabsOptionLabel", publicName: "tabsOptionLabel", isSignal: true, isRequired: false, transformFunction: null }, tabsOptionValue: { classPropertyName: "tabsOptionValue", publicName: "tabsOptionValue", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, captionStart: { classPropertyName: "captionStart", publicName: "captionStart", isSignal: true, isRequired: false, transformFunction: null }, captionEnd: { classPropertyName: "captionEnd", publicName: "captionEnd", isSignal: true, isRequired: false, transformFunction: null }, activeTab: { classPropertyName: "activeTab", publicName: "activeTab", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, filterTerm: { classPropertyName: "filterTerm", publicName: "filterTerm", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeTab: "activeTabChange", filters: "filtersChange", filterTerm: "filterTermChange", groupBy: "groupByChange", exportRequested: "exportRequested", printRequested: "printRequested", onTabChange: "onTabChange", searchChange: "searchChange", filterApplied: "filterApplied", filterReset: "filterReset" }, ngImport: i0, template: "@if (showsAnything()) {\r\n  <div class=\"mt-table-caption\">\r\n    <div\r\n      class=\"flex relative items-center gap-2 pb-4\"\r\n      [class]=\"!generalSearch() ? 'justify-end' : 'justify-between'\"\r\n    >\r\n      <div class=\"flex items-center gap-2\">\r\n        @if (captionStart(); as tpl) {\r\n          <ng-container *ngTemplateOutlet=\"tpl\"></ng-container>\r\n        }\r\n        @if (tabs()) {\r\n          <mt-tabs\r\n            [(active)]=\"activeTab\"\r\n            [options]=\"tabs()\"\r\n            [optionLabel]=\"tabsOptionLabel()\"\r\n            [optionValue]=\"tabsOptionValue()\"\r\n            (onChange)=\"tabChanged($event)\"\r\n            size=\"large\"\r\n          ></mt-tabs>\r\n        }\r\n        @if (generalSearch()) {\r\n          <mt-text-field\r\n            [ngModel]=\"filterTerm()\"\r\n            (ngModelChange)=\"onSearch($event)\"\r\n            icon=\"general.search-lg\"\r\n            [placeholder]=\"'components.table.search' | transloco\"\r\n          ></mt-text-field>\r\n        }\r\n      </div>\r\n      <div class=\"flex items-center gap-2\">\r\n        @if (showFilters() && filterMode() === \"popover\") {\r\n          <mt-table-filter\r\n            [columns]=\"columns()\"\r\n            [data]=\"data()\"\r\n            [ngModel]=\"filters()\"\r\n            (filterApplied)=\"onFilterApplied($event)\"\r\n            (filterReset)=\"onFilterReset()\"\r\n          />\r\n        }\r\n        @if (exportable() || printable() || groupable()) {\r\n          <mt-table-actions-menu\r\n            [exportable]=\"exportable()\"\r\n            [printable]=\"printable()\"\r\n            [groupable]=\"groupable()\"\r\n            [groupColumns]=\"groupColumns()\"\r\n            [activeGroup]=\"groupBy()\"\r\n            (exportRequested)=\"exportRequested.emit()\"\r\n            (printRequested)=\"printRequested.emit()\"\r\n            (groupChange)=\"onGroupChange($event)\"\r\n          />\r\n        }\r\n        @if (actions().length > 0) {\r\n          <div class=\"flex items-center space-x-2\">\r\n            @for (action of actions(); track action.label) {\r\n              <mt-button\r\n                [icon]=\"action.icon\"\r\n                [severity]=\"action.color\"\r\n                [variant]=\"action.variant\"\r\n                [size]=\"$any(action).size || 'small'\"\r\n                (click)=\"action.action(null)\"\r\n                [label]=\"action.label\"\r\n                [tooltip]=\"action.tooltip\"\r\n              ></mt-button>\r\n            }\r\n          </div>\r\n        }\r\n        @if (captionEnd(); as tpl) {\r\n          <ng-container *ngTemplateOutlet=\"tpl\"></ng-container>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "mode", "moreLabel", "defaultIcon", "size", "fluid", "disabled", "searchThreshold"], outputs: ["activeChange", "onChange"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "icon", "iconPosition"] }, { kind: "component", type: TableFilter, selector: "mt-table-filter", inputs: ["columns", "data"], outputs: ["filterApplied", "filterReset"] }, { kind: "component", type: TableActionsMenu, selector: "mt-table-actions-menu", inputs: ["exportable", "printable", "groupable", "groupColumns", "activeGroup"], outputs: ["exportRequested", "printRequested", "groupChange"] }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: TableCaption, isStandalone: true, selector: "mt-table-caption", inputs: { generalSearch: { classPropertyName: "generalSearch", publicName: "generalSearch", isSignal: true, isRequired: false, transformFunction: null }, showFilters: { classPropertyName: "showFilters", publicName: "showFilters", isSignal: true, isRequired: false, transformFunction: null }, filterMode: { classPropertyName: "filterMode", publicName: "filterMode", isSignal: true, isRequired: false, transformFunction: null }, exportable: { classPropertyName: "exportable", publicName: "exportable", isSignal: true, isRequired: false, transformFunction: null }, printable: { classPropertyName: "printable", publicName: "printable", isSignal: true, isRequired: false, transformFunction: null }, groupable: { classPropertyName: "groupable", publicName: "groupable", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, groupColumns: { classPropertyName: "groupColumns", publicName: "groupColumns", isSignal: true, isRequired: false, transformFunction: null }, tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null }, tabsOptionLabel: { classPropertyName: "tabsOptionLabel", publicName: "tabsOptionLabel", isSignal: true, isRequired: false, transformFunction: null }, tabsOptionValue: { classPropertyName: "tabsOptionValue", publicName: "tabsOptionValue", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, captionStart: { classPropertyName: "captionStart", publicName: "captionStart", isSignal: true, isRequired: false, transformFunction: null }, captionEnd: { classPropertyName: "captionEnd", publicName: "captionEnd", isSignal: true, isRequired: false, transformFunction: null }, activeTab: { classPropertyName: "activeTab", publicName: "activeTab", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, filterTerm: { classPropertyName: "filterTerm", publicName: "filterTerm", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeTab: "activeTabChange", filters: "filtersChange", filterTerm: "filterTermChange", groupBy: "groupByChange", exportRequested: "exportRequested", printRequested: "printRequested", onTabChange: "onTabChange", searchChange: "searchChange", filterApplied: "filterApplied", filterReset: "filterReset" }, ngImport: i0, template: "@if (showsAnything()) {\r\n  <div class=\"mt-table-caption\">\r\n    <div\r\n      class=\"flex relative items-center gap-2 pb-4\"\r\n      [class]=\"!generalSearch() ? 'justify-end' : 'justify-between'\"\r\n    >\r\n      <div class=\"flex items-center gap-2\">\r\n        @if (captionStart(); as tpl) {\r\n          <ng-container *ngTemplateOutlet=\"tpl\"></ng-container>\r\n        }\r\n        @if (tabs()) {\r\n          <mt-tabs\r\n            [(active)]=\"activeTab\"\r\n            [options]=\"tabs()\"\r\n            [optionLabel]=\"tabsOptionLabel()\"\r\n            [optionValue]=\"tabsOptionValue()\"\r\n            (onChange)=\"tabChanged($event)\"\r\n            size=\"large\"\r\n          ></mt-tabs>\r\n        }\r\n        @if (generalSearch()) {\r\n          <mt-text-field\r\n            [ngModel]=\"filterTerm()\"\r\n            (ngModelChange)=\"onSearch($event)\"\r\n            icon=\"general.search-lg\"\r\n            [placeholder]=\"'components.table.search' | transloco\"\r\n          ></mt-text-field>\r\n        }\r\n      </div>\r\n      <div class=\"flex items-center gap-2\">\r\n        @if (showFilters() && filterMode() === \"popover\") {\r\n          <mt-table-filter\r\n            [columns]=\"columns()\"\r\n            [data]=\"data()\"\r\n            [ngModel]=\"filters()\"\r\n            (filterApplied)=\"onFilterApplied($event)\"\r\n            (filterReset)=\"onFilterReset()\"\r\n          />\r\n        }\r\n        @if (exportable() || printable() || groupable()) {\r\n          <mt-table-actions-menu\r\n            [exportable]=\"exportable()\"\r\n            [printable]=\"printable()\"\r\n            [groupable]=\"groupable()\"\r\n            [groupColumns]=\"groupColumns()\"\r\n            [activeGroup]=\"groupBy()\"\r\n            (exportRequested)=\"exportRequested.emit()\"\r\n            (printRequested)=\"printRequested.emit()\"\r\n            (groupChange)=\"onGroupChange($event)\"\r\n          />\r\n        }\r\n        @if (actions().length > 0) {\r\n          <div class=\"flex items-center space-x-2\">\r\n            @for (action of actions(); track action.label) {\r\n              <mt-button\r\n                [icon]=\"action.icon\"\r\n                [severity]=\"action.color\"\r\n                [variant]=\"action.variant\"\r\n                [size]=\"$any(action).size || 'small'\"\r\n                (click)=\"action.action(null)\"\r\n                [label]=\"action.label\"\r\n                [tooltip]=\"action.tooltip\"\r\n              ></mt-button>\r\n            }\r\n          </div>\r\n        }\r\n        @if (captionEnd(); as tpl) {\r\n          <ng-container *ngTemplateOutlet=\"tpl\"></ng-container>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "mode", "moreLabel", "defaultIcon", "size", "fluid", "disabled", "searchThreshold"], outputs: ["activeChange", "onChange"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "maxLength", "icon", "iconPosition"] }, { kind: "component", type: TableFilter, selector: "mt-table-filter", inputs: ["columns", "data"], outputs: ["filterApplied", "filterReset"] }, { kind: "component", type: TableActionsMenu, selector: "mt-table-actions-menu", inputs: ["exportable", "printable", "groupable", "groupColumns", "activeGroup"], outputs: ["exportRequested", "printRequested", "groupChange"] }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TableCaption, decorators: [{
             type: Component,
@@ -964,7 +1050,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                     ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (showsAnything()) {\r\n  <div class=\"mt-table-caption\">\r\n    <div\r\n      class=\"flex relative items-center gap-2 pb-4\"\r\n      [class]=\"!generalSearch() ? 'justify-end' : 'justify-between'\"\r\n    >\r\n      <div class=\"flex items-center gap-2\">\r\n        @if (captionStart(); as tpl) {\r\n          <ng-container *ngTemplateOutlet=\"tpl\"></ng-container>\r\n        }\r\n        @if (tabs()) {\r\n          <mt-tabs\r\n            [(active)]=\"activeTab\"\r\n            [options]=\"tabs()\"\r\n            [optionLabel]=\"tabsOptionLabel()\"\r\n            [optionValue]=\"tabsOptionValue()\"\r\n            (onChange)=\"tabChanged($event)\"\r\n            size=\"large\"\r\n          ></mt-tabs>\r\n        }\r\n        @if (generalSearch()) {\r\n          <mt-text-field\r\n            [ngModel]=\"filterTerm()\"\r\n            (ngModelChange)=\"onSearch($event)\"\r\n            icon=\"general.search-lg\"\r\n            [placeholder]=\"'components.table.search' | transloco\"\r\n          ></mt-text-field>\r\n        }\r\n      </div>\r\n      <div class=\"flex items-center gap-2\">\r\n        @if (showFilters() && filterMode() === \"popover\") {\r\n          <mt-table-filter\r\n            [columns]=\"columns()\"\r\n            [data]=\"data()\"\r\n            [ngModel]=\"filters()\"\r\n            (filterApplied)=\"onFilterApplied($event)\"\r\n            (filterReset)=\"onFilterReset()\"\r\n          />\r\n        }\r\n        @if (exportable() || printable() || groupable()) {\r\n          <mt-table-actions-menu\r\n            [exportable]=\"exportable()\"\r\n            [printable]=\"printable()\"\r\n            [groupable]=\"groupable()\"\r\n            [groupColumns]=\"groupColumns()\"\r\n            [activeGroup]=\"groupBy()\"\r\n            (exportRequested)=\"exportRequested.emit()\"\r\n            (printRequested)=\"printRequested.emit()\"\r\n            (groupChange)=\"onGroupChange($event)\"\r\n          />\r\n        }\r\n        @if (actions().length > 0) {\r\n          <div class=\"flex items-center space-x-2\">\r\n            @for (action of actions(); track action.label) {\r\n              <mt-button\r\n                [icon]=\"action.icon\"\r\n                [severity]=\"action.color\"\r\n                [variant]=\"action.variant\"\r\n                [size]=\"$any(action).size || 'small'\"\r\n                (click)=\"action.action(null)\"\r\n                [label]=\"action.label\"\r\n                [tooltip]=\"action.tooltip\"\r\n              ></mt-button>\r\n            }\r\n          </div>\r\n        }\r\n        @if (captionEnd(); as tpl) {\r\n          <ng-container *ngTemplateOutlet=\"tpl\"></ng-container>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n" }]
         }], propDecorators: { generalSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "generalSearch", required: false }] }], showFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFilters", required: false }] }], filterMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterMode", required: false }] }], exportable: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportable", required: false }] }], printable: [{ type: i0.Input, args: [{ isSignal: true, alias: "printable", required: false }] }], groupable: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupable", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], groupColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupColumns", required: false }] }], tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: false }] }], tabsOptionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabsOptionLabel", required: false }] }], tabsOptionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabsOptionValue", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], captionStart: [{ type: i0.Input, args: [{ isSignal: true, alias: "captionStart", required: false }] }], captionEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "captionEnd", required: false }] }], activeTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTab", required: false }] }, { type: i0.Output, args: ["activeTabChange"] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }, { type: i0.Output, args: ["filtersChange"] }], filterTerm: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterTerm", required: false }] }, { type: i0.Output, args: ["filterTermChange"] }], groupBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupBy", required: false }] }, { type: i0.Output, args: ["groupByChange"] }], exportRequested: [{ type: i0.Output, args: ["exportRequested"] }], printRequested: [{ type: i0.Output, args: ["printRequested"] }], onTabChange: [{ type: i0.Output, args: ["onTabChange"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], filterApplied: [{ type: i0.Output, args: ["filterApplied"] }], filterReset: [{ type: i0.Output, args: ["filterReset"] }] } });
 
-const OVERLAY_SELECTOR = '.p-popover, .p-select-overlay, .p-multiselect-overlay, .p-datepicker-panel, .p-autocomplete-panel';
+const OVERLAY_SELECTOR = '.p-popover, .p-select-overlay, .p-multiselect-overlay, .p-treeselect-overlay, .p-datepicker-panel, .p-autocomplete-panel, .p-autocomplete-overlay';
 /**
  * Per-column filter affordance: a small funnel icon in the column header that
  * opens a popover with a single `TableFilterField`.
@@ -1049,20 +1135,20 @@ class TableExportService {
     static PRINT_ROOT_CLASS = 'mt-printing';
     static PRINT_REGION_CLASS = 'mt-print-region';
     static PRINT_STYLE_ID = 'mt-table-print-style';
-    static PRINT_CSS = `
-    @media print {
-      html.mt-printing body > *:not(.mt-print-region) { display: none !important; }
-      html.mt-printing, html.mt-printing body { background: #ffffff !important; }
-      .mt-print-region { display: block !important; padding: 16px; color: #111827;
-        font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
-      .mt-print-region h1 { font-size: 18px; font-weight: 600; margin: 0 0 12px; }
-      .mt-print-region table { width: 100%; border-collapse: collapse; font-size: 12px; }
-      .mt-print-region th, .mt-print-region td { text-align: start; padding: 6px 8px;
-        border: 1px solid #e5e7eb; vertical-align: top; }
-      .mt-print-region thead th { background: #f3f4f6; font-weight: 600; }
-      .mt-print-region tbody tr { break-inside: avoid; page-break-inside: avoid; }
-    }
-    .mt-print-region { display: none; }
+    static PRINT_CSS = `
+    @media print {
+      html.mt-printing body > *:not(.mt-print-region) { display: none !important; }
+      html.mt-printing, html.mt-printing body { background: #ffffff !important; }
+      .mt-print-region { display: block !important; padding: 16px; color: #111827;
+        font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
+      .mt-print-region h1 { font-size: 18px; font-weight: 600; margin: 0 0 12px; }
+      .mt-print-region table { width: 100%; border-collapse: collapse; font-size: 12px; }
+      .mt-print-region th, .mt-print-region td { text-align: start; padding: 6px 8px;
+        border: 1px solid #e5e7eb; vertical-align: top; }
+      .mt-print-region thead th { background: #f3f4f6; font-weight: 600; }
+      .mt-print-region tbody tr { break-inside: avoid; page-break-inside: avoid; }
+    }
+    .mt-print-region { display: none; }
   `;
     exportToExcel(config) {
         const columns = this.getExportableColumns(config.columns);
@@ -1098,7 +1184,7 @@ class TableExportService {
         document.head.appendChild(style);
     }
     getExportableColumns(columns) {
-        return columns.filter((column) => column.type !== 'custom');
+        return columns.filter((column) => !column.filterOnly && column.type !== 'custom');
     }
     /**
      * Produces rows keyed by column label (Excel header row).
@@ -1202,6 +1288,8 @@ class TableGroupingController {
     groupableColumns = computed(() => {
         const sampleRow = this.rows()[0];
         return this.columns().filter((col) => {
+            if (col.filterOnly)
+                return false;
             if (col.type === 'custom')
                 return false;
             const filterType = TableValueResolver.getColumnFilterType(col, sampleRow);
@@ -1463,7 +1551,7 @@ class Table {
         return applyLocalSort ? this.sortData(result) : result;
     }, ...(ngDevMode ? [{ debugName: "filteredData" }] : /* istanbul ignore next */ []));
     renderedColumns = computed(() => {
-        const columns = this.columns();
+        const columns = this.columns().filter((column) => !column.filterOnly);
         if (columns.length > 0 || !this.loading()) {
             return columns;
         }