@fuentis/phoenix-ui 0.0.9-alpha.627 → 0.0.9-alpha.628

package/fesm2022/fuentis-phoenix-ui.mjs

@@ -2006,6 +2006,12 @@ class TableCaptionComponent {
     /** Local storage keys */
     FILTER_KEY = '';
     COLUMN_KEY = '';
+    /**
+     * When table detects that selected filter values no longer exist in data,
+     * it passes the remaining valid values here so table-caption can prune its form.
+     * Key = filter key, value = array of still-valid filter values.
+     */
+    filterValidValues = null;
     /**
      * Internal signature to avoid rebuilding form on every ngOnChanges.
      * We rebuild only if:
@@ -2013,8 +2019,13 @@ class TableCaptionComponent {
      * - set/order of filter keys changes
      */
     lastSignature = '';
-    lastOptionsSignature = '';
     ngOnChanges(changes) {
+        if (changes['filterValidValues'] && !changes['filterValidValues'].firstChange) {
+            const validMap = changes['filterValidValues'].currentValue;
+            if (validMap)
+                this.applyValidValuesPatch(validMap);
+            return;
+        }
         if (!this.tableConfiguration)
             return;
         this.FILTER_KEY = `filters_${this.tableConfiguration.key ?? 'table'}`;
@@ -2031,16 +2042,10 @@ class TableCaptionComponent {
         // Normalize filters (backward compatible) before building form
         const normalizedFilters = this.normalizeFilters(this.filters);
         const signature = this.buildSignature(this.tableConfiguration.key, normalizedFilters);
-        const optionsSig = this.buildOptionsSignature(normalizedFilters);
         if (signature !== this.lastSignature) {
             this.lastSignature = signature;
-            this.lastOptionsSignature = optionsSig;
             this.buildFiltersForm(normalizedFilters);
         }
-        else if (changes['filters'] && optionsSig !== this.lastOptionsSignature) {
-            this.lastOptionsSignature = optionsSig;
-            this.pruneStaleSelections(normalizedFilters);
-        }
     }
     // ---------------------------------------------------------------------------
     // Filters form (performance-focused)
@@ -2112,55 +2117,30 @@ class TableCaptionComponent {
         const keys = (filtersCfg ?? []).map((f) => f.key).join('|');
         return `${tableKey ?? 'table'}::${keys}`;
     }
-    pruneStaleSelections(filtersCfg) {
+    applyValidValuesPatch(validMap) {
+        const cfg = this.normalizeFilters(this.filters);
         const patch = {};
-        for (const f of filtersCfg) {
-            const t = f.type ?? 'text';
-            if (t === 'text' || t === 'checkbox')
-                continue;
-            const control = this.filtersForm.get(f.key);
-            if (!control)
+        for (const [key, validValues] of Object.entries(validMap)) {
+            const f = cfg.find((c) => c.key === key);
+            if (!f)
                 continue;
-            const options = Array.isArray(f.options) ? f.options : [];
-            const ov = f.optionValue ?? 'key';
-            const validValues = new Set(options.map((o) => (o && typeof o === 'object' ? o[ov] : o)));
-            if (t === 'multiselect') {
-                const current = Array.isArray(control.value) ? control.value : [];
-                const pruned = current.filter((v) => validValues.has(v));
-                if (pruned.length !== current.length)
-                    patch[f.key] = pruned;
+            const t = f.type ?? 'text';
+            if (t === 'boolean-multiselect') {
+                patch[key] = this.normalizeBooleanMultiSelection(validValues, f);
             }
-            else if (t === 'boolean-multiselect') {
-                const current = Array.isArray(control.value) ? control.value : [];
-                const pruned = current.filter((o) => {
-                    const val = o && typeof o === 'object' ? o[ov] : o;
-                    return validValues.has(val);
-                });
-                if (pruned.length !== current.length)
-                    patch[f.key] = pruned;
+            else if (t === 'multiselect') {
+                patch[key] = validValues;
             }
-            else if (t === 'dropdown' || t === 'person-dropdown') {
-                const current = control.value;
-                if (current != null && current !== '' && !validValues.has(current)) {
-                    patch[f.key] = null;
-                }
+            else {
+                patch[key] = validValues[0] ?? null;
             }
         }
         if (Object.keys(patch).length > 0) {
             this.filtersForm.patchValue(patch, { emitEvent: true });
+            const payload = this.normalizeOutgoingPayload(this.filtersForm.getRawValue(), cfg);
+            this.persistState(payload, this.FILTER_KEY);
         }
     }
-    buildOptionsSignature(filtersCfg) {
-        return (filtersCfg ?? [])
-            .map((f) => {
-            const ov = f.optionValue ?? 'key';
-            const opts = (f.options ?? [])
-                .map((o) => (o && typeof o === 'object' ? (o[ov] ?? JSON.stringify(o)) : String(o)))
-                .join(',');
-            return `${f.key}:[${opts}]`;
-        })
-            .join('|');
-    }
     normalizeMultiInitial(selected) {
         if (selected == null)
             return [];
@@ -2410,7 +2390,7 @@ class TableCaptionComponent {
             .join(', ');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TableCaptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TableCaptionComponent, isStandalone: true, selector: "table-caption", inputs: { tableConfiguration: "tableConfiguration", columns: "columns", selectedItems: "selectedItems", filters: "filters" }, outputs: { applyFiltersEvent: "applyFiltersEvent", applyColumnsEvent: "applyColumnsEvent", searchChange: "searchChange", actionClick: "actionClick" }, viewQueries: [{ propertyName: "filtersPopover", first: true, predicate: ["filtersPopover"], descendants: true }, { propertyName: "columnsPopover", first: true, predicate: ["columnsPopover"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex justify-content-between border-bottom-1 border-300 p-2\">\n  <!-- Left: Tabs + Global actions -->\n  <div class=\"flex align-items-center gap-2\">\n    <phoenix-data-table-tabs\n      [attr.data-cy]=\"'table-select-button-' + (tableConfiguration?.tabs?.key ?? 'tabs')\"\n      [actions]=\"tableConfiguration?.tabs\"\n      (actionClick)=\"actionClick.emit($event)\"\n    />\n\n    @for (action of (tableConfiguration?.globalActions ?? []); track action?.key ?? $index) {\n      <phoenix-data-table-action\n        [actionConfig]=\"action\"\n        (actionClick)=\"actionClick.emit($event)\"\n      />\n    }\n  </div>\n\n  <!-- Right: caption filters + icons + search + more -->\n  <div class=\"flex align-items-center gap-2\">\n    <!-- Filters in caption row -->\n    @for (control of (filters ?? []); track control.key) {\n      @if (control.isInCaption) {\n        @switch (control.type ?? (control.options?.length ? 'dropdown' : 'text')) {\n          @case ('dropdown') {\n            <p-select\n              class=\"w-12rem\"\n              [options]=\"control.options ?? []\"\n              [optionLabel]=\"control.optionLabel ?? 'label'\"\n              [optionValue]=\"control.optionValue ?? 'key'\"\n              [formControl]=\"$any(filtersForm.get(control.key))\"\n              [showClear]=\"true\"\n              placeholder=\"{{ control.label | translate }}\"\n              (onClear)=\"filtersForm.get(control.key)?.setValue('')\"\n            />\n          }\n\n          @case ('multiselect') {\n            <p-multiselect\n              class=\"w-12rem\"\n              [options]=\"control.options ?? []\"\n              [optionLabel]=\"control.optionLabel ?? 'label'\"\n              [optionValue]=\"control.optionValue ?? 'key'\"\n              [formControl]=\"$any(filtersForm.get(control.key))\"\n              [showClear]=\"true\"\n              placeholder=\"{{ control.label | translate }}\"\n              (onClear)=\"clearSelectFilter(control.key)\"\n            />\n          }\n\n          @case ('boolean-multiselect') {\n            <p-multiselect\n              class=\"w-12rem\"\n              [options]=\"control.options ?? []\"\n              [optionLabel]=\"control.optionLabel ?? 'label'\"\n              [formControl]=\"$any(filtersForm.get(control.key))\"\n              [showClear]=\"true\"\n              placeholder=\"{{ control.label | translate }}\"\n              (onClear)=\"clearSelectFilter(control.key)\"\n            >\n              <ng-template pTemplate=\"selectedItems\" let-value>\n                @if ((value?.length ?? 0) === 0) {\n                  <span class=\"p-2 text-500\">{{ control.label | translate }}</span>\n                } @else {\n                  <span class=\"p-2\">{{ getSelectedLabels(value, control) }}</span>\n                }\n              </ng-template>\n\n              <ng-template pTemplate=\"item\" let-item>\n                <span>{{ item?.[control.optionLabel ?? 'label'] }}</span>\n              </ng-template>\n            </p-multiselect>\n          }\n\n          @case ('checkbox') {\n            <p-checkbox binary=\"true\" [formControl]=\"$any(filtersForm.get(control.key))\" />\n          }\n\n          @default {\n            <input\n              class=\"w-12rem\"\n              pInputText\n              [formControl]=\"$any(filtersForm.get(control.key))\"\n              placeholder=\"{{ control.label | translate }}\"\n            />\n          }\n        }\n      }\n    }\n\n    <!-- Filter icon -->\n    @if (tableConfiguration?.hasFilter) {\n      @if (hasFormValues()) {\n        <p-overlaybadge class=\"p-2\" severity=\"danger\">\n          <span pRipple class=\"cursor-pointer\" (click)=\"filtersPopover?.toggle($event)\">\n            <i class=\"pi pi-filter\"></i>\n          </span>\n        </p-overlaybadge>\n      } @else {\n        <span pRipple class=\"cursor-pointer p-2\" (click)=\"filtersPopover?.toggle($event)\">\n          <i class=\"pi pi-filter\"></i>\n        </span>\n      }\n    }\n\n    <!-- Columns icon -->\n    @if (tableConfiguration?.hasColumns) {\n      @if (columnsChanged) {\n        <p-overlaybadge class=\"p-2\" severity=\"danger\">\n          <span pRipple class=\"cursor-pointer\" (click)=\"columnsPopover?.toggle($event)\">\n            <i class=\"pi pi-sliders-v\"></i>\n          </span>\n        </p-overlaybadge>\n      } @else {\n        <span pRipple class=\"cursor-pointer p-2\" (click)=\"columnsPopover?.toggle($event)\">\n          <i class=\"pi pi-sliders-v\"></i>\n        </span>\n      }\n    }\n\n    <!-- Search + More -->\n    <div class=\"flex\">\n      @if (tableConfiguration?.hasSearch) {\n        <p-iconfield>\n          <p-inputicon styleClass=\"pi pi-search\" />\n          <input\n            type=\"text\"\n            pInputText\n            (input)=\"emitSearch($any($event.target).value)\"\n            placeholder=\"{{ 'SEARCH_KEYWORD' | translate }}\"\n          />\n        </p-iconfield>\n      }\n\n      @if (tableConfiguration?.hasMore && tableConfiguration?.moreActions) {\n        <phoenix-data-table-action\n          [actionConfig]=\"tableConfiguration.moreActions\"\n          (actionClick)=\"actionClick.emit($event)\"\n        />\n      }\n    </div>\n  </div>\n</div>\n\n<!-- Filters Popover -->\n<p-popover #filtersPopover>\n  <div class=\"flex flex-column gap-3 w-25rem\">\n    <div class=\"flex justify-content-between align-items-center\">\n      <div class=\"text-lg font-bold\">{{ 'LABELS.FILTERS' | translate }}</div>\n      <p-button\n        icon=\"pi pi-refresh\"\n        [text]=\"true\"\n        label=\"{{ 'ACTION.CLEAR' | translate }}\"\n        class=\"mr-2\"\n        (click)=\"resetFilters()\"\n      />\n    </div>\n\n    <form [formGroup]=\"filtersForm\">\n      @for (control of (filters ?? []); track control.key) {\n        @if (!control.isInCaption) {\n          @switch (control.type ?? (control.options?.length ? 'dropdown' : 'text')) {\n            @case ('checkbox') {\n              <div class=\"mb-2\">\n                <p-checkbox binary=\"true\" [formControlName]=\"control.key\" />\n                <label class=\"ml-2\">{{ control.label | translate }}</label>\n              </div>\n            }\n\n            @case ('dropdown') {\n              <div class=\"mb-2\">\n                <label class=\"mb-2 block\">{{ control.label | translate }}</label>\n                <p-select\n                  class=\"w-full\"\n                  [options]=\"control.options ?? []\"\n                  [optionLabel]=\"control.optionLabel ?? 'label'\"\n                  [optionValue]=\"control.optionValue ?? 'key'\"\n                  [showClear]=\"true\"\n                  [formControlName]=\"control.key\"\n                  (onClear)=\"filtersForm.get(control.key)?.setValue('')\"\n                />\n              </div>\n            }\n\n            @case ('multiselect') {\n              <div class=\"mb-2\">\n                <p-floatlabel variant=\"on\">\n                  <p-multiselect\n                    class=\"w-full\"\n                    [options]=\"control.options ?? []\"\n                    [optionLabel]=\"control.optionLabel ?? 'label'\"\n                    [optionValue]=\"control.optionValue ?? 'key'\"\n                    [showClear]=\"true\"\n                    [formControlName]=\"control.key\"\n                    (onClear)=\"clearSelectFilter(control.key)\"\n                  />\n                  <label>{{ control.label | translate }}</label>\n                </p-floatlabel>\n              </div>\n            }\n\n            @case ('boolean-multiselect') {\n              <div class=\"mb-2\">\n                <p-floatlabel variant=\"on\">\n                  <p-multiselect\n                    class=\"w-full\"\n                    [options]=\"control.options ?? []\"\n                    [optionLabel]=\"control.optionLabel ?? 'label'\"\n                    [showClear]=\"true\"\n                    [formControlName]=\"control.key\"\n                    (onClear)=\"clearSelectFilter(control.key)\"\n                  >\n                    <ng-template pTemplate=\"selectedItems\" let-value>\n                      @if ((value?.length ?? 0) === 0) {\n                        <span class=\"p-2 text-500\">{{ control.label | translate }}</span>\n                      } @else {\n                        <span class=\"p-2\">{{ getSelectedLabels(value, control) }}</span>\n                      }\n                    </ng-template>\n\n                    <ng-template pTemplate=\"item\" let-item>\n                      <span>{{ item?.[control.optionLabel ?? 'label'] }}</span>\n                    </ng-template>\n                  </p-multiselect>\n                  <label>{{ control.label | translate }}</label>\n                </p-floatlabel>\n              </div>\n            }\n\n            @default {\n              <div class=\"mb-2\">\n                <label class=\"mb-2 block\">{{ control.label | translate }}</label>\n                <input\n                  class=\"w-full\"\n                  pInputText\n                  [formControlName]=\"control.key\"\n                  placeholder=\"{{ control.label | translate }}\"\n                />\n              </div>\n            }\n          }\n        }\n      }\n    </form>\n  </div>\n</p-popover>\n\n<!-- Columns Popover -->\n<p-popover #columnsPopover>\n  <div class=\"flex flex-column gap-3 w-25rem\">\n    <div class=\"flex justify-content-between align-items-center\">\n      <div class=\"text-lg font-bold\">{{ 'LABELS.COLUMNS' | translate }}</div>\n      <p-button\n        icon=\"pi pi-eye\"\n        [text]=\"true\"\n        label=\"{{ 'ACTION.SHOW_ALL' | translate }}\"\n        class=\"mr-2\"\n        (click)=\"resetColumns()\"\n      />\n    </div>\n\n    <p-listbox\n      [options]=\"columns\"\n      [ngModel]=\"_selectedColumns\"\n      (ngModelChange)=\"onColumnSelectionChange($event)\"\n      [multiple]=\"true\"\n      [metaKeySelection]=\"false\"\n      [listStyle]=\"{ 'max-height': '420px' }\"\n      [attr.data-cy]=\"'table-list-box'\"\n    >\n      <ng-template pTemplate=\"item\" let-item>\n        @if (item | isSelected : selectedColumns) {\n          <i class=\"pi pi-eye\"></i>\n        } @else {\n          <i class=\"pi pi-eye-slash\"></i>\n        }\n        <span class=\"ml-2\">{{ item.header | translate }}</span>\n      </ng-template>\n    </p-listbox>\n  </div>\n</p-popover>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i3$2.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3$4.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i5$2.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$3.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i5.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i4$5.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "ngmodule", type: ListboxModule }, { kind: "component", type: i10.Listbox, selector: "p-listbox, p-listBox, p-list-box", inputs: ["hostName", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "ariaLabel", "selectOnFocus", "searchLocale", "focusOnHover", "filterMessage", "filterFields", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "scrollHeight", "tabindex", "multiple", "styleClass", "listStyle", "listStyleClass", "readonly", "checkbox", "filter", "filterBy", "filterMatchMode", "filterLocale", "metaKeySelection", "dataKey", "showToggleAll", "optionLabel", "optionValue", "optionGroupChildren", "optionGroupLabel", "optionDisabled", "ariaFilterLabel", "filterPlaceHolder", "emptyFilterMessage", "emptyMessage", "group", "options", "filterValue", "selectAll", "striped", "highlightOnSelect", "checkmark", "dragdrop", "dropListData", "fluid"], outputs: ["onChange", "onClick", "onDblClick", "onFilter", "onFocus", "onBlur", "onSelectAllChange", "onLazyLoad", "onDrop"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$4.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: OverlayBadgeModule }, { kind: "component", type: i12.OverlayBadge, selector: "p-overlayBadge, p-overlay-badge, p-overlaybadge", inputs: ["styleClass", "style", "badgeSize", "severity", "value", "badgeDisabled", "size"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i13.Ripple, selector: "[pRipple]" }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i14.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: PhoenixDataTableActionComponent, selector: "phoenix-data-table-action", inputs: ["actionConfig", "rowData"], outputs: ["actionClick"] }, { kind: "component", type: PhoenixDataTableTabsComponent, selector: "phoenix-data-table-tabs", inputs: ["actions"], outputs: ["actionClick"] }, { kind: "pipe", type: i4$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: IsSelectedPipe, name: "isSelected" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TableCaptionComponent, isStandalone: true, selector: "table-caption", inputs: { tableConfiguration: "tableConfiguration", columns: "columns", selectedItems: "selectedItems", filters: "filters", filterValidValues: "filterValidValues" }, outputs: { applyFiltersEvent: "applyFiltersEvent", applyColumnsEvent: "applyColumnsEvent", searchChange: "searchChange", actionClick: "actionClick" }, viewQueries: [{ propertyName: "filtersPopover", first: true, predicate: ["filtersPopover"], descendants: true }, { propertyName: "columnsPopover", first: true, predicate: ["columnsPopover"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex justify-content-between border-bottom-1 border-300 p-2\">\n  <!-- Left: Tabs + Global actions -->\n  <div class=\"flex align-items-center gap-2\">\n    <phoenix-data-table-tabs\n      [attr.data-cy]=\"'table-select-button-' + (tableConfiguration?.tabs?.key ?? 'tabs')\"\n      [actions]=\"tableConfiguration?.tabs\"\n      (actionClick)=\"actionClick.emit($event)\"\n    />\n\n    @for (action of (tableConfiguration?.globalActions ?? []); track action?.key ?? $index) {\n      <phoenix-data-table-action\n        [actionConfig]=\"action\"\n        (actionClick)=\"actionClick.emit($event)\"\n      />\n    }\n  </div>\n\n  <!-- Right: caption filters + icons + search + more -->\n  <div class=\"flex align-items-center gap-2\">\n    <!-- Filters in caption row -->\n    @for (control of (filters ?? []); track control.key) {\n      @if (control.isInCaption) {\n        @switch (control.type ?? (control.options?.length ? 'dropdown' : 'text')) {\n          @case ('dropdown') {\n            <p-select\n              class=\"w-12rem\"\n              [options]=\"control.options ?? []\"\n              [optionLabel]=\"control.optionLabel ?? 'label'\"\n              [optionValue]=\"control.optionValue ?? 'key'\"\n              [formControl]=\"$any(filtersForm.get(control.key))\"\n              [showClear]=\"true\"\n              placeholder=\"{{ control.label | translate }}\"\n              (onClear)=\"filtersForm.get(control.key)?.setValue('')\"\n            />\n          }\n\n          @case ('multiselect') {\n            <p-multiselect\n              class=\"w-12rem\"\n              [options]=\"control.options ?? []\"\n              [optionLabel]=\"control.optionLabel ?? 'label'\"\n              [optionValue]=\"control.optionValue ?? 'key'\"\n              [formControl]=\"$any(filtersForm.get(control.key))\"\n              [showClear]=\"true\"\n              placeholder=\"{{ control.label | translate }}\"\n              (onClear)=\"clearSelectFilter(control.key)\"\n            />\n          }\n\n          @case ('boolean-multiselect') {\n            <p-multiselect\n              class=\"w-12rem\"\n              [options]=\"control.options ?? []\"\n              [optionLabel]=\"control.optionLabel ?? 'label'\"\n              [formControl]=\"$any(filtersForm.get(control.key))\"\n              [showClear]=\"true\"\n              placeholder=\"{{ control.label | translate }}\"\n              (onClear)=\"clearSelectFilter(control.key)\"\n            >\n              <ng-template pTemplate=\"selectedItems\" let-value>\n                @if ((value?.length ?? 0) === 0) {\n                  <span class=\"p-2 text-500\">{{ control.label | translate }}</span>\n                } @else {\n                  <span class=\"p-2\">{{ getSelectedLabels(value, control) }}</span>\n                }\n              </ng-template>\n\n              <ng-template pTemplate=\"item\" let-item>\n                <span>{{ item?.[control.optionLabel ?? 'label'] }}</span>\n              </ng-template>\n            </p-multiselect>\n          }\n\n          @case ('checkbox') {\n            <p-checkbox binary=\"true\" [formControl]=\"$any(filtersForm.get(control.key))\" />\n          }\n\n          @default {\n            <input\n              class=\"w-12rem\"\n              pInputText\n              [formControl]=\"$any(filtersForm.get(control.key))\"\n              placeholder=\"{{ control.label | translate }}\"\n            />\n          }\n        }\n      }\n    }\n\n    <!-- Filter icon -->\n    @if (tableConfiguration?.hasFilter) {\n      @if (hasFormValues()) {\n        <p-overlaybadge class=\"p-2\" severity=\"danger\">\n          <span pRipple class=\"cursor-pointer\" (click)=\"filtersPopover?.toggle($event)\">\n            <i class=\"pi pi-filter\"></i>\n          </span>\n        </p-overlaybadge>\n      } @else {\n        <span pRipple class=\"cursor-pointer p-2\" (click)=\"filtersPopover?.toggle($event)\">\n          <i class=\"pi pi-filter\"></i>\n        </span>\n      }\n    }\n\n    <!-- Columns icon -->\n    @if (tableConfiguration?.hasColumns) {\n      @if (columnsChanged) {\n        <p-overlaybadge class=\"p-2\" severity=\"danger\">\n          <span pRipple class=\"cursor-pointer\" (click)=\"columnsPopover?.toggle($event)\">\n            <i class=\"pi pi-sliders-v\"></i>\n          </span>\n        </p-overlaybadge>\n      } @else {\n        <span pRipple class=\"cursor-pointer p-2\" (click)=\"columnsPopover?.toggle($event)\">\n          <i class=\"pi pi-sliders-v\"></i>\n        </span>\n      }\n    }\n\n    <!-- Search + More -->\n    <div class=\"flex\">\n      @if (tableConfiguration?.hasSearch) {\n        <p-iconfield>\n          <p-inputicon styleClass=\"pi pi-search\" />\n          <input\n            type=\"text\"\n            pInputText\n            (input)=\"emitSearch($any($event.target).value)\"\n            placeholder=\"{{ 'SEARCH_KEYWORD' | translate }}\"\n          />\n        </p-iconfield>\n      }\n\n      @if (tableConfiguration?.hasMore && tableConfiguration?.moreActions) {\n        <phoenix-data-table-action\n          [actionConfig]=\"tableConfiguration.moreActions\"\n          (actionClick)=\"actionClick.emit($event)\"\n        />\n      }\n    </div>\n  </div>\n</div>\n\n<!-- Filters Popover -->\n<p-popover #filtersPopover>\n  <div class=\"flex flex-column gap-3 w-25rem\">\n    <div class=\"flex justify-content-between align-items-center\">\n      <div class=\"text-lg font-bold\">{{ 'LABELS.FILTERS' | translate }}</div>\n      <p-button\n        icon=\"pi pi-refresh\"\n        [text]=\"true\"\n        label=\"{{ 'ACTION.CLEAR' | translate }}\"\n        class=\"mr-2\"\n        (click)=\"resetFilters()\"\n      />\n    </div>\n\n    <form [formGroup]=\"filtersForm\">\n      @for (control of (filters ?? []); track control.key) {\n        @if (!control.isInCaption) {\n          @switch (control.type ?? (control.options?.length ? 'dropdown' : 'text')) {\n            @case ('checkbox') {\n              <div class=\"mb-2\">\n                <p-checkbox binary=\"true\" [formControlName]=\"control.key\" />\n                <label class=\"ml-2\">{{ control.label | translate }}</label>\n              </div>\n            }\n\n            @case ('dropdown') {\n              <div class=\"mb-2\">\n                <label class=\"mb-2 block\">{{ control.label | translate }}</label>\n                <p-select\n                  class=\"w-full\"\n                  [options]=\"control.options ?? []\"\n                  [optionLabel]=\"control.optionLabel ?? 'label'\"\n                  [optionValue]=\"control.optionValue ?? 'key'\"\n                  [showClear]=\"true\"\n                  [formControlName]=\"control.key\"\n                  (onClear)=\"filtersForm.get(control.key)?.setValue('')\"\n                />\n              </div>\n            }\n\n            @case ('multiselect') {\n              <div class=\"mb-2\">\n                <p-floatlabel variant=\"on\">\n                  <p-multiselect\n                    class=\"w-full\"\n                    [options]=\"control.options ?? []\"\n                    [optionLabel]=\"control.optionLabel ?? 'label'\"\n                    [optionValue]=\"control.optionValue ?? 'key'\"\n                    [showClear]=\"true\"\n                    [formControlName]=\"control.key\"\n                    (onClear)=\"clearSelectFilter(control.key)\"\n                  />\n                  <label>{{ control.label | translate }}</label>\n                </p-floatlabel>\n              </div>\n            }\n\n            @case ('boolean-multiselect') {\n              <div class=\"mb-2\">\n                <p-floatlabel variant=\"on\">\n                  <p-multiselect\n                    class=\"w-full\"\n                    [options]=\"control.options ?? []\"\n                    [optionLabel]=\"control.optionLabel ?? 'label'\"\n                    [showClear]=\"true\"\n                    [formControlName]=\"control.key\"\n                    (onClear)=\"clearSelectFilter(control.key)\"\n                  >\n                    <ng-template pTemplate=\"selectedItems\" let-value>\n                      @if ((value?.length ?? 0) === 0) {\n                        <span class=\"p-2 text-500\">{{ control.label | translate }}</span>\n                      } @else {\n                        <span class=\"p-2\">{{ getSelectedLabels(value, control) }}</span>\n                      }\n                    </ng-template>\n\n                    <ng-template pTemplate=\"item\" let-item>\n                      <span>{{ item?.[control.optionLabel ?? 'label'] }}</span>\n                    </ng-template>\n                  </p-multiselect>\n                  <label>{{ control.label | translate }}</label>\n                </p-floatlabel>\n              </div>\n            }\n\n            @default {\n              <div class=\"mb-2\">\n                <label class=\"mb-2 block\">{{ control.label | translate }}</label>\n                <input\n                  class=\"w-full\"\n                  pInputText\n                  [formControlName]=\"control.key\"\n                  placeholder=\"{{ control.label | translate }}\"\n                />\n              </div>\n            }\n          }\n        }\n      }\n    </form>\n  </div>\n</p-popover>\n\n<!-- Columns Popover -->\n<p-popover #columnsPopover>\n  <div class=\"flex flex-column gap-3 w-25rem\">\n    <div class=\"flex justify-content-between align-items-center\">\n      <div class=\"text-lg font-bold\">{{ 'LABELS.COLUMNS' | translate }}</div>\n      <p-button\n        icon=\"pi pi-eye\"\n        [text]=\"true\"\n        label=\"{{ 'ACTION.SHOW_ALL' | translate }}\"\n        class=\"mr-2\"\n        (click)=\"resetColumns()\"\n      />\n    </div>\n\n    <p-listbox\n      [options]=\"columns\"\n      [ngModel]=\"_selectedColumns\"\n      (ngModelChange)=\"onColumnSelectionChange($event)\"\n      [multiple]=\"true\"\n      [metaKeySelection]=\"false\"\n      [listStyle]=\"{ 'max-height': '420px' }\"\n      [attr.data-cy]=\"'table-list-box'\"\n    >\n      <ng-template pTemplate=\"item\" let-item>\n        @if (item | isSelected : selectedColumns) {\n          <i class=\"pi pi-eye\"></i>\n        } @else {\n          <i class=\"pi pi-eye-slash\"></i>\n        }\n        <span class=\"ml-2\">{{ item.header | translate }}</span>\n      </ng-template>\n    </p-listbox>\n  </div>\n</p-popover>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i3$2.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3$4.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i5$2.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$3.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i5.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i4$5.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "ngmodule", type: ListboxModule }, { kind: "component", type: i10.Listbox, selector: "p-listbox, p-listBox, p-list-box", inputs: ["hostName", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "ariaLabel", "selectOnFocus", "searchLocale", "focusOnHover", "filterMessage", "filterFields", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "scrollHeight", "tabindex", "multiple", "styleClass", "listStyle", "listStyleClass", "readonly", "checkbox", "filter", "filterBy", "filterMatchMode", "filterLocale", "metaKeySelection", "dataKey", "showToggleAll", "optionLabel", "optionValue", "optionGroupChildren", "optionGroupLabel", "optionDisabled", "ariaFilterLabel", "filterPlaceHolder", "emptyFilterMessage", "emptyMessage", "group", "options", "filterValue", "selectAll", "striped", "highlightOnSelect", "checkmark", "dragdrop", "dropListData", "fluid"], outputs: ["onChange", "onClick", "onDblClick", "onFilter", "onFocus", "onBlur", "onSelectAllChange", "onLazyLoad", "onDrop"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$4.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: OverlayBadgeModule }, { kind: "component", type: i12.OverlayBadge, selector: "p-overlayBadge, p-overlay-badge, p-overlaybadge", inputs: ["styleClass", "style", "badgeSize", "severity", "value", "badgeDisabled", "size"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i13.Ripple, selector: "[pRipple]" }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i14.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: PhoenixDataTableActionComponent, selector: "phoenix-data-table-action", inputs: ["actionConfig", "rowData"], outputs: ["actionClick"] }, { kind: "component", type: PhoenixDataTableTabsComponent, selector: "phoenix-data-table-tabs", inputs: ["actions"], outputs: ["actionClick"] }, { kind: "pipe", type: i4$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: IsSelectedPipe, name: "isSelected" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TableCaptionComponent, decorators: [{
             type: Component,
@@ -2457,6 +2437,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Output
             }], actionClick: [{
                 type: Output
+            }], filterValidValues: [{
+                type: Input
             }] } });
 
 class IsBooleanPipe {
@@ -2983,6 +2965,8 @@ class TableComponent {
     columnTypeEnum = tableColumnType;
     /** Latest active filters coming from table-caption. */
     currentFilters = {};
+    /** When stale filter values are detected, holds the remaining valid values per key. */
+    filterValidValues = null;
     /**
      * columnTypeMap:
      * field -> columnType (DATE/BOOLEAN/TEXT/etc).
@@ -3167,6 +3151,18 @@ class TableComponent {
      */
     set data(value) {
         this.originalData = value ?? [];
+        if (Object.keys(this.currentFilters).length > 0) {
+            const validMap = this.getValidFilterValues();
+            if (validMap) {
+                this.filterValidValues = validMap;
+                for (const key of Object.keys(validMap)) {
+                    if (validMap[key].length === 0)
+                        delete this.currentFilters[key];
+                    else
+                        this.currentFilters[key] = validMap[key];
+                }
+            }
+        }
         this.allData = [...this.originalData];
         this.lastSortKey = '';
         // allow re-applying initial sort for new dataset
@@ -3415,6 +3411,27 @@ class TableComponent {
     // ============================================================
     // SEARCH HELPERS
     // ============================================================
+    getValidFilterValues() {
+        let hasStale = false;
+        const result = {};
+        for (const [key, filterValue] of Object.entries(this.currentFilters)) {
+            const values = Array.isArray(filterValue) ? filterValue : filterValue != null ? [filterValue] : [];
+            if (!values.length)
+                continue;
+            const valid = values.filter((val) => {
+                const optionKey = val && typeof val === 'object' ? (val.key ?? val) : val;
+                return this.originalData.some((item) => {
+                    const itemVal = this.getNestedValue(item, key);
+                    return itemVal?.toString().toLowerCase() === optionKey?.toString().toLowerCase();
+                });
+            });
+            if (valid.length !== values.length) {
+                result[key] = valid;
+                hasStale = true;
+            }
+        }
+        return hasStale ? result : null;
+    }
     getValueByPath(obj, path) {
         if (!obj || !path)
             return undefined;
@@ -3627,7 +3644,7 @@ class TableComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TableComponent, isStandalone: true, selector: "phoenix-table", inputs: { columns: "columns", selectedColumnsInput: "selectedColumnsInput", tableConfiguration: "tableConfiguration", filters: "filters", data: "data" }, outputs: { actionClick: "actionClick", rowSelection: "rowSelection", checkBoxSelection: "checkBoxSelection", saveColumns: "saveColumns" }, viewQueries: [{ propertyName: "dt", first: true, predicate: ["dt"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"border-1 border-round-sm border-300 border-round-md m-2\">\n  @if (selectedItems().length === 0) {\n    <table-caption\n      [columns]=\"columns\"\n      [tableConfiguration]=\"tableConfiguration\"\n      [filters]=\"filters\"\n      [selectedItems]=\"selectedItems()\"\n      (applyFiltersEvent)=\"applyFilters($event)\"\n      (applyColumnsEvent)=\"applyColumns($event)\"\n      (searchChange)=\"onSearch($event)\"\n      (actionClick)=\"handleActionClick($event)\"\n    ></table-caption>\n  } @else {\n    <div\n      style=\"min-height: 40px; padding: 8px\"\n      class=\"flex justify-content-between align-items-center border-bottom-1 border-300 pl-5 pr-5 text-sm text-500\"\n    >\n      <div>\n        @if (tableConfiguration.selectionType === selectionTypeEnum.CHECKBOX) {\n          <span>\n            {{ selectedItems().length }}\n            {{\n              selectedItems().length === 1\n                ? (\"LABELS.ITEM_SELECTED\" | translate)\n                : (\"LABELS.ITEMS_SELECTED\" | translate)\n            }}\n          </span>\n        }\n      </div>\n\n      <div>\n        @for (\n          action of tableConfiguration.bulkActions;\n          track action?.key ?? $index\n        ) {\n          <phoenix-data-table-action\n            [actionConfig]=\"action\"\n            (actionClick)=\"\n              handleActionClick({\n                action: action,\n                selectedItems: selectedItems(),\n              });\n              clearSelection()\n            \"\n          ></phoenix-data-table-action>\n        }\n\n        <button\n          [attr.data-cy]=\"'clear-selection-button'\"\n          class=\"p-button p-button-text p-button-plain\"\n          (click)=\"clearSelection()\"\n          aria-label=\"Clear Selection\"\n        >\n          <i class=\"pi pi-times\"></i>\n        </button>\n      </div>\n    </div>\n  }\n  <div\n    class=\"table-host\"\n    [style.height]=\"tableConfiguration.scrollHeight ?? null\"\n  >\n    <p-table\n      #dt\n      [columns]=\"selectedColumns\"\n      [value]=\"tableData\"\n      [size]=\"'small'\"\n      scrollable=\"true\"\n      scrollHeight=\"flex\"\n      [virtualScroll]=\"true\"\n      [virtualScrollItemSize]=\"40\"\n      [virtualScrollDelay]=\"80\"\n      [totalRecords]=\"totalRecords\"\n      [sortMode]=\"'multiple'\"\n      [customSort]=\"true\"\n      (sortFunction)=\"onCustomSort($event)\"\n      [selection]=\"selectedItems()\"\n      (selectionChange)=\"onSelectionChange($event)\"\n      [resizableColumns]=\"true\"\n      columnResizeMode=\"expand\"\n      [loading]=\"initialSortLoading\"\n    >\n      <ng-template #header let-columns>\n        <tr style=\"height: 40px\" class=\"dt-header\">\n          @switch (tableConfiguration.selectionType) {\n            @case (selectionTypeEnum.CHECKBOX) {\n              <th class=\"custom-th\">\n                <p-tableHeaderCheckbox\n                  [attr.data-cy]=\"'table-header-checkbox'\"\n                ></p-tableHeaderCheckbox>\n              </th>\n            }\n            @case (selectionTypeEnum.RADIO_BTN) {\n              <th class=\"custom-th\"></th>\n            }\n          }\n          @for (\n            col of columns;\n            track col.field ?? col.header ?? $index;\n            let colIdx = $index\n          ) {\n            <th\n              pResizableColumn\n              class=\"custom-th text-primary font-bold\"\n              [pSortableColumn]=\"col.field\"\n            >\n              {{ col.header | translate }}\n              <p-sortIcon\n                [field]=\"col.field\"\n                [attr.data-cy]=\"'sort-button-' + col.header\"\n              ></p-sortIcon>\n            </th>\n          }\n\n          <th class=\"custom-th\"></th>\n        </tr>\n      </ng-template>\n\n      <ng-template\n        #body\n        let-rowData\n        let-columns=\"columns\"\n        let-rowIndex=\"rowIndex\"\n      >\n        <tr>\n          @switch (tableConfiguration.selectionType) {\n            @case (selectionTypeEnum.CHECKBOX) {\n              <td class=\"w-2rem\">\n                <p-tableCheckbox\n                  [attr.data-cy]=\"\n                    'table-row-' + selectionTypeEnum.CHECKBOX + '-' + rowIndex\n                  \"\n                  [disabled]=\"\n                    rowData?.canSelect !== undefined\n                      ? !rowData.canSelect\n                      : false\n                  \"\n                  [value]=\"rowData\"\n                ></p-tableCheckbox>\n              </td>\n            }\n            @case (selectionTypeEnum.RADIO_BTN) {\n              <td>\n                <p-tableRadioButton\n                  [value]=\"rowData\"\n                  [attr.data-cy]=\"\n                    'table-row-' + selectionTypeEnum.RADIO_BTN + '-' + rowIndex\n                  \"\n                ></p-tableRadioButton>\n              </td>\n            }\n          }\n          @for (\n            col of columns;\n            track col.field ?? col.header ?? $index;\n            let i = $index\n          ) {\n            <td\n              (click)=\"\n                isColumnClickable(i) ? onRowClick($event, rowData) : null\n              \"\n              [ngClass]=\"{\n                'text-blue-500 underline cursor-pointer': isColumnClickable(i),\n              }\"\n            >\n              @switch (col.columnType) {\n                @case (columnTypeEnum.TAG) {\n                  @if (rowData[col.field]) {\n                    <div class=\"flex align-items-center gap-2\">\n                      <div\n                        class=\"border-round-md font-semibold\"\n                        [style]=\"{\n                          fontSize: '12px',\n                          padding: '3px 8px',\n                          width: 'fit-content',\n                          'background-color':\n                            (rowData[col.field + 'Color'] || '#ccc') + '56',\n                          color: rowData[col.field + 'Color'],\n                        }\"\n                      >\n                        {{\n                          rowData[col.field]?.name ||\n                            (rowData[col.field] | translate)\n                        }}\n                      </div>\n                      @if (rowData[col.field + \"Tooltip\"]) {\n                        <i\n                          [class]=\"\n                            rowData[col.field + 'Icon'].class +\n                            ' cursor-pointer'\n                          \"\n                          [style]=\"rowData[col.field + 'Icon'].style\"\n                          [pTooltip]=\"rowData[col.field + 'Tooltip']\"\n                          tooltipPosition=\"top\"\n                        ></i>\n                      }\n                    </div>\n                  } @else {\n                    <ng-container\n                      [ngTemplateOutlet]=\"emptyCell\"\n                      [ngTemplateOutletContext]=\"{\n                        dataCy:\n                          'table-row-' +\n                          col.columnType +\n                          '-row-index-' +\n                          rowIndex +\n                          '-col-index-' +\n                          i,\n                      }\"\n                    />\n                  }\n                }\n                @case (columnTypeEnum.LIST_TAG) {\n                  @if (rowData[col.field]) {\n                    @for (item of rowData[col.field]; track $index) {\n                      <p-badge severity=\"warn\" class=\"mr-1\" [value]=\"item\" />\n                    }\n                  } @else {\n                    <ng-container\n                      [ngTemplateOutlet]=\"emptyCell\"\n                      [ngTemplateOutletContext]=\"{\n                        dataCy:\n                          'table-row-' +\n                          col.columnType +\n                          '-row-index-' +\n                          rowIndex +\n                          '-col-index-' +\n                          i,\n                      }\"\n                    />\n                  }\n                }\n                @case (columnTypeEnum.OBJ_TAG) {\n                  @if (rowData[col.field]) {\n                    <p-tag\n                      [attr.data-cy]=\"\n                        'table-row-' +\n                        columnTypeEnum.OBJ_TAG +\n                        '-row-index-' +\n                        rowIndex +\n                        '-col-index-' +\n                        i\n                      \"\n                      [style]=\"{\n                        fontSize: '12px',\n                        padding: '3px 8px',\n                        width: 'fit-content',\n                        'background-color':\n                          (rowData[col.field].color || '#ccc') + '56',\n                        color: rowData[col.field].color,\n                      }\"\n                      [value]=\"rowData[col.field]?.value | translate\"\n                    ></p-tag>\n                  } @else {\n                    <ng-container\n                      [ngTemplateOutlet]=\"emptyCell\"\n                      [ngTemplateOutletContext]=\"{\n                        dataCy:\n                          'table-row-' +\n                          col.columnType +\n                          '-row-index-' +\n                          rowIndex +\n                          '-col-index-' +\n                          i,\n                      }\"\n                    />\n                  }\n                }\n                @case (columnTypeEnum.PERSON) {\n                  @if (rowData[col.field]) {\n                    <p-avatar\n                      [attr.data-cy]=\"\n                        'table-row-' +\n                        columnTypeEnum.PERSON +\n                        '-row-index-' +\n                        rowIndex +\n                        '-col-index-' +\n                        i\n                      \"\n                      [label]=\"rowData[col.field]?.name | initials\"\n                      class=\"cursor-pointer\"\n                      [style]=\"{\n                        'background-color': '#9c27b0',\n                        color: '#ffffff',\n                        'font-size': '0.8rem!important',\n                      }\"\n                      shape=\"circle\"\n                      (click)=\"personPop.toggle($event)\"\n                    ></p-avatar>\n\n                    <p-popover #personPop [dismissable]=\"true\">\n                      <div>\n                        <span class=\"text-lg\">{{\n                          rowData[col.field].name\n                        }}</span>\n                        <span class=\"block text-sm\">\n                          <i class=\"pi pi-envelope mr-1 text-500\"></i>\n                          {{ rowData[col.field].email ?? \" --\" }}\n                        </span>\n                        <span class=\"block text-sm\">\n                          <i class=\"pi pi-phone text-500\"></i>\n                          {{ rowData[col.field].phone ?? \" --\" }}\n                        </span>\n                      </div>\n                    </p-popover>\n                  } @else {\n                    <ng-container\n                      [ngTemplateOutlet]=\"emptyCell\"\n                      [ngTemplateOutletContext]=\"{\n                        dataCy:\n                          'table-row-' +\n                          col.columnType +\n                          '-row-index-' +\n                          rowIndex +\n                          '-col-index-' +\n                          i,\n                      }\"\n                    />\n                  }\n                }\n                @case (columnTypeEnum.LIST) {\n                  @if (rowData[col.field]?.length) {\n                    @if (rowData[col.field].length > 1) {\n                      <div\n                        class=\"cursor-pointer\"\n                        (click)=\"listPop.toggle($event)\"\n                        [attr.data-cy]=\"\n                          'table-row-' +\n                          columnTypeEnum.LIST +\n                          '-row-index-' +\n                          rowIndex +\n                          '-col-index-' +\n                          i\n                        \"\n                      >\n                        <span class=\"mr-1\">{{\n                          rowData[col.field][0].name\n                        }}</span>\n                        <p-chip\n                          class=\"text-sm font-semibold p-1 m-0\"\n                          [label]=\"'+' + (rowData[col.field].length - 1)\"\n                        />\n                      </div>\n                    } @else {\n                      <span>{{ rowData[col.field][0].name }}</span>\n                    }\n\n                    <p-popover #listPop [dismissable]=\"true\">\n                      @for (\n                        item of rowData[col.field];\n                        track item.name;\n                        let isFirst = $first\n                      ) {\n                        @if (!isFirst) {\n                          <ul class=\"list-none m-0 p-0\">\n                            <li>{{ item.name }}</li>\n                          </ul>\n                        }\n                      }\n                    </p-popover>\n                  } @else {\n                    <ng-container\n                      [ngTemplateOutlet]=\"emptyCell\"\n                      [ngTemplateOutletContext]=\"{\n                        dataCy:\n                          'table-row-' +\n                          col.columnType +\n                          '-row-index-' +\n                          rowIndex +\n                          '-col-index-' +\n                          i,\n                      }\"\n                    />\n                  }\n                }\n                @case (columnTypeEnum.BOOLEAN) {\n                  @if (rowData[col.field] | isBoolean) {\n                    <i\n                      [pTooltip]=\"rowData?.[col.field + 'Tooltip']\"\n                      [attr.data-cy]=\"\n                        'table-row-' +\n                        columnTypeEnum.BOOLEAN +\n                        '-row-index-' +\n                        rowIndex +\n                        '-col-index-' +\n                        i\n                      \"\n                      class=\"pi\"\n                      [ngClass]=\"\n                        rowData[col.field]\n                          ? 'text-green-500 pi-check-circle'\n                          : 'text-red-500 pi-times-circle'\n                      \"\n                    ></i>\n                  } @else {\n                    <ng-container\n                      [ngTemplateOutlet]=\"emptyCell\"\n                      [ngTemplateOutletContext]=\"{\n                        dataCy:\n                          'table-row-' +\n                          col.columnType +\n                          '-row-index-' +\n                          rowIndex +\n                          '-col-index-' +\n                          i,\n                      }\"\n                    />\n                  }\n                }\n                @case (columnTypeEnum.TEXT_AREA) {\n                  @if (rowData[col.field]) {\n                    <div\n                      [attr.data-cy]=\"\n                        'table-row-' +\n                        columnTypeEnum.TEXT_AREA +\n                        '-row-index-' +\n                        rowIndex +\n                        '-col-index-' +\n                        i\n                      \"\n                      [pTooltip]=\"rowData[col.field]\"\n                    >\n                      {{\n                        rowData[col.field].length > (col.maxLength ?? 50)\n                          ? (rowData[col.field]\n                              | slice: 0 : col.maxLength ?? 50) + \"...\"\n                          : rowData[col.field]\n                      }}\n                    </div>\n                  } @else {\n                    <ng-container\n                      [ngTemplateOutlet]=\"emptyCell\"\n                      [ngTemplateOutletContext]=\"{\n                        dataCy:\n                          'table-row-' +\n                          col.columnType +\n                          '-row-index-' +\n                          rowIndex +\n                          '-col-index-' +\n                          i,\n                      }\"\n                    />\n                  }\n                }\n                @case (columnTypeEnum.EMAIL) {\n                  @if (rowData[col.field]) {\n                    <div\n                      class=\"email-cell\"\n                      [attr.data-cy]=\"\n                        'table-row-' +\n                        columnTypeEnum.EMAIL +\n                        '-row-index-' +\n                        rowIndex +\n                        '-col-index-' +\n                        i\n                      \"\n                    >\n                      <span>{{ rowData[col.field] }}</span>\n                      <i\n                        class=\"pi pi-copy email-copy-icon\"\n                        (click)=\"copyToClipboard($event, rowData[col.field])\"\n                        [pTooltip]=\"'LABELS.COPY_EMAIL' | translate\"\n                      >\n                      </i>\n                    </div>\n                  } @else {\n                    <ng-container\n                      [ngTemplateOutlet]=\"emptyCell\"\n                      [ngTemplateOutletContext]=\"{\n                        dataCy:\n                          'table-row-' +\n                          col.columnType +\n                          '-row-index-' +\n                          rowIndex +\n                          '-col-index-' +\n                          i,\n                      }\"\n                    />\n                  }\n                }\n                @case (columnTypeEnum.TIMEPERIOD) {\n                  @if (rowData[col.field]) {\n                    <div\n                      [attr.data-cy]=\"\n                        'table-row-' +\n                        columnTypeEnum.TIMEPERIOD +\n                        '-row-index-' +\n                        rowIndex +\n                        '-col-index-' +\n                        i\n                      \"\n                      [pTooltip]=\"rowData[col.field] | timePeriod\"\n                      style=\"max-width: 200px\"\n                    >\n                      {{ rowData[col.field] | timePeriod }}\n                    </div>\n                  } @else {\n                    <ng-container\n                      [ngTemplateOutlet]=\"emptyCell\"\n                      [ngTemplateOutletContext]=\"{\n                        dataCy:\n                          'table-row-' +\n                          col.columnType +\n                          '-row-index-' +\n                          rowIndex +\n                          '-col-index-' +\n                          i,\n                      }\"\n                    />\n                  }\n                }\n                @default {\n                  @if (col.flag && getNested(rowData, col.flagCodeField)) {\n                    <div\n                      [attr.data-cy]=\"\n                        'table-row-' +\n                        columnTypeEnum.TEXT +\n                        '-row-index-' +\n                        rowIndex +\n                        '-col-index-' +\n                        i\n                      \"\n                      class=\"flex align-items-center gap-2\"\n                      style=\"max-width: 200px\"\n                      [pTooltip]=\"rowData | cell: col : dateFormat\"\n                    >\n                      <img\n                        src=\"https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png\"\n                        [class]=\"\n                          'flag flag-' +\n                          (getNested(rowData, col.flagCodeField) || '')\n                            .toString()\n                            .toLowerCase()\n                        \"\n                        style=\"width: 22px\"\n                        alt=\"\"\n                      />\n                      <span\n                        [innerHTML]=\"rowData | cell: col : dateFormat\"\n                      ></span>\n                    </div>\n                  } @else {\n                    @if (rowData | cell: col : dateFormat) {\n                      <div\n                        [attr.data-cy]=\"\n                          'table-row-' +\n                          columnTypeEnum.TEXT +\n                          '-row-index-' +\n                          rowIndex +\n                          '-col-index-' +\n                          i\n                        \"\n                        [pTooltip]=\"rowData | cell: col : dateFormat\"\n                        style=\"max-width: 200px\"\n                        [innerHTML]=\"rowData | cell: col : dateFormat\"\n                      ></div>\n                    } @else {\n                      <ng-container\n                        [ngTemplateOutlet]=\"emptyCell\"\n                        [ngTemplateOutletContext]=\"{\n                          dataCy:\n                            'table-row-' +\n                            col.columnType +\n                            '-row-index-' +\n                            rowIndex +\n                            '-col-index-' +\n                            i,\n                        }\"\n                      />\n                    }\n                  }\n                }\n              }\n            </td>\n          }\n\n          <td class=\"p-0\">\n            @for (\n              action of tableConfiguration.rowActions;\n              track action?.key ?? $index\n            ) {\n              <phoenix-data-table-action\n                [actionConfig]=\"action\"\n                [rowData]=\"rowData\"\n                (actionClick)=\"handleActionClick($event)\"\n              ></phoenix-data-table-action>\n            }\n          </td>\n        </tr>\n      </ng-template>\n\n      <!-- <ng-template pTemplate=\"loadingbody\" let-columns>\n        @for (_ of skeletonRows; track $index; let rowIdx = $index) {\n          <tr style=\"height: 40px\">\n            @switch (tableConfiguration.selectionType) {\n              @case (selectionTypeEnum.CHECKBOX) {\n                <td class=\"w-2rem\">\n                  <p-skeleton width=\"1.2rem\" height=\"1.2rem\"></p-skeleton>\n                </td>\n              }\n              @case (selectionTypeEnum.RADIO_BTN) {\n                <td class=\"w-2rem\">\n                  <p-skeleton width=\"1.2rem\" height=\"1.2rem\"></p-skeleton>\n                </td>\n              }\n            }\n\n            @for (col of columns; track col.field ?? col.header ?? $index) {\n              <td>\n                <p-skeleton\n                  [ngStyle]=\"{\n                    width: (60 + (rowIdx % 3) * 10) + '%',\n                    height: '1rem'\n                  }\"\n                ></p-skeleton>\n              </td>\n            }\n\n            <td>\n              <p-skeleton width=\"2rem\" height=\"1rem\"></p-skeleton>\n            </td>\n          </tr>\n        }\n      </ng-template> -->\n\n      <ng-template #emptyCell let-dataCy=\"dataCy\">\n        <span [attr.data-cy]=\"dataCy\">--</span>\n      </ng-template>\n\n      <ng-template pTemplate=\"emptymessage\">\n        <td class=\"p-2\" colspan=\"100\">\n          <div class=\"flex align-items-center\">\n            <i class=\"pi pi-info-circle mr-2\"></i>\n            {{ \"NO_RESULTS_FOUND\" | translate }}\n          </div>\n        </td>\n      </ng-template>\n    </p-table>\n\n    <div class=\"border-top-1 border-300 pl-2 p-1 text-sm text-500\">\n      {{ \"LABELS.TOTAL_RECORDS\" | translate }}: {{ totalRecords }}\n    </div>\n  </div>\n</div>\n", styles: [":is() .p-avatar{border-radius:50%!important}::ng-deep .p-paginator button{scale:.7}::ng-deep .p-paginator-rpp-options{scale:.7}::ng-deep .p-datatable .p-datatable-header{border-radius:10px 10px 0 0}:host::ng-deep .p-tag{font-weight:400!important;font-size:.875rem!important}.email-cell{position:relative;display:inline-block;padding-right:24px}.email-cell .email-copy-icon{position:absolute;top:0;right:0;opacity:0;cursor:pointer;transition:opacity .2s}.email-cell:hover .email-copy-icon{opacity:1}.table-host{display:flex;flex-direction:column;min-height:0;overflow:hidden}.table-host,.table-host>.p-datatable,.table-host>.p-datatable .p-datatable-wrapper{min-height:0}:host ::ng-deep .p-datatable-loading-overlay{display:none!important}:host ::ng-deep .p-datatable-mask{display:none!important}:host ::ng-deep .p-datatable.p-datatable-loading{opacity:1!important;pointer-events:auto!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$4.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$4.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i2$4.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "component", type: i2$4.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i2$4.TableRadioButton, selector: "p-tableRadioButton", inputs: ["value", "disabled", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$4.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$4.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "component", type: TableCaptionComponent, selector: "table-caption", inputs: ["tableConfiguration", "columns", "selectedItems", "filters"], outputs: ["applyFiltersEvent", "applyColumnsEvent", "searchChange", "actionClick"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: PhoenixDataTableActionComponent, selector: "phoenix-data-table-action", inputs: ["actionConfig", "rowData"], outputs: ["actionClick"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i4$1.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i5$3.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "ngmodule", type: PanelModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i3$2.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ChipModule }, { kind: "component", type: i8$2.Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i4$6.Badge, selector: "p-badge", inputs: ["styleClass", "badgeSize", "size", "severity", "value", "badgeDisabled"] }, { kind: "pipe", type: i1$2.SlicePipe, name: "slice" }, { kind: "pipe", type: i4$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: TableCellPipe, name: "cell" }, { kind: "pipe", type: InitialsPipe, name: "initials" }, { kind: "pipe", type: TimePeriodPipe, name: "timePeriod" }, { kind: "pipe", type: IsBooleanPipe, name: "isBoolean" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TableComponent, isStandalone: true, selector: "phoenix-table", inputs: { columns: "columns", selectedColumnsInput: "selectedColumnsInput", tableConfiguration: "tableConfiguration", filters: "filters", data: "data" }, outputs: { actionClick: "actionClick", rowSelection: "rowSelection", checkBoxSelection: "checkBoxSelection", saveColumns: "saveColumns" }, viewQueries: [{ propertyName: "dt", first: true, predicate: ["dt"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"border-1 border-round-sm border-300 border-round-md m-2\">\n  @if (selectedItems().length === 0) {\n    <table-caption\n      [columns]=\"columns\"\n      [tableConfiguration]=\"tableConfiguration\"\n      [filters]=\"filters\"\n      [selectedItems]=\"selectedItems()\"\n      [filterValidValues]=\"filterValidValues\"\n      (applyFiltersEvent)=\"applyFilters($event)\"\n      (applyColumnsEvent)=\"applyColumns($event)\"\n      (searchChange)=\"onSearch($event)\"\n      (actionClick)=\"handleActionClick($event)\"\n    ></table-caption>\n  } @else {\n    <div\n      style=\"min-height: 40px; padding: 8px\"\n      class=\"flex justify-content-between align-items-center border-bottom-1 border-300 pl-5 pr-5 text-sm text-500\"\n    >\n      <div>\n        @if (tableConfiguration.selectionType === selectionTypeEnum.CHECKBOX) {\n          <span>\n            {{ selectedItems().length }}\n            {{\n              selectedItems().length === 1\n                ? (\"LABELS.ITEM_SELECTED\" | translate)\n                : (\"LABELS.ITEMS_SELECTED\" | translate)\n            }}\n          </span>\n        }\n      </div>\n\n      <div>\n        @for (\n          action of tableConfiguration.bulkActions;\n          track action?.key ?? $index\n        ) {\n          <phoenix-data-table-action\n            [actionConfig]=\"action\"\n            (actionClick)=\"\n              handleActionClick({\n                action: action,\n                selectedItems: selectedItems(),\n              });\n              clearSelection()\n            \"\n          ></phoenix-data-table-action>\n        }\n\n        <button\n          [attr.data-cy]=\"'clear-selection-button'\"\n          class=\"p-button p-button-text p-button-plain\"\n          (click)=\"clearSelection()\"\n          aria-label=\"Clear Selection\"\n        >\n          <i class=\"pi pi-times\"></i>\n        </button>\n      </div>\n    </div>\n  }\n  <div\n    class=\"table-host\"\n    [style.height]=\"tableConfiguration.scrollHeight ?? null\"\n  >\n    <p-table\n      #dt\n      [columns]=\"selectedColumns\"\n      [value]=\"tableData\"\n      [size]=\"'small'\"\n      scrollable=\"true\"\n      scrollHeight=\"flex\"\n      [virtualScroll]=\"true\"\n      [virtualScrollItemSize]=\"40\"\n      [virtualScrollDelay]=\"80\"\n      [totalRecords]=\"totalRecords\"\n      [sortMode]=\"'multiple'\"\n      [customSort]=\"true\"\n      (sortFunction)=\"onCustomSort($event)\"\n      [selection]=\"selectedItems()\"\n      (selectionChange)=\"onSelectionChange($event)\"\n      [resizableColumns]=\"true\"\n      columnResizeMode=\"expand\"\n      [loading]=\"initialSortLoading\"\n    >\n      <ng-template #header let-columns>\n        <tr style=\"height: 40px\" class=\"dt-header\">\n          @switch (tableConfiguration.selectionType) {\n            @case (selectionTypeEnum.CHECKBOX) {\n              <th class=\"custom-th\">\n                <p-tableHeaderCheckbox\n                  [attr.data-cy]=\"'table-header-checkbox'\"\n                ></p-tableHeaderCheckbox>\n              </th>\n            }\n            @case (selectionTypeEnum.RADIO_BTN) {\n              <th class=\"custom-th\"></th>\n            }\n          }\n          @for (\n            col of columns;\n            track col.field ?? col.header ?? $index;\n            let colIdx = $index\n          ) {\n            <th\n              pResizableColumn\n              class=\"custom-th text-primary font-bold\"\n              [pSortableColumn]=\"col.field\"\n            >\n              {{ col.header | translate }}\n              <p-sortIcon\n                [field]=\"col.field\"\n                [attr.data-cy]=\"'sort-button-' + col.header\"\n              ></p-sortIcon>\n            </th>\n          }\n\n          <th class=\"custom-th\"></th>\n        </tr>\n      </ng-template>\n\n      <ng-template\n        #body\n        let-rowData\n        let-columns=\"columns\"\n        let-rowIndex=\"rowIndex\"\n      >\n        <tr>\n          @switch (tableConfiguration.selectionType) {\n            @case (selectionTypeEnum.CHECKBOX) {\n              <td class=\"w-2rem\">\n                <p-tableCheckbox\n                  [attr.data-cy]=\"\n                    'table-row-' + selectionTypeEnum.CHECKBOX + '-' + rowIndex\n                  \"\n                  [disabled]=\"\n                    rowData?.canSelect !== undefined\n                      ? !rowData.canSelect\n                      : false\n                  \"\n                  [value]=\"rowData\"\n                ></p-tableCheckbox>\n              </td>\n            }\n            @case (selectionTypeEnum.RADIO_BTN) {\n              <td>\n                <p-tableRadioButton\n                  [value]=\"rowData\"\n                  [attr.data-cy]=\"\n                    'table-row-' + selectionTypeEnum.RADIO_BTN + '-' + rowIndex\n                  \"\n                ></p-tableRadioButton>\n              </td>\n            }\n          }\n          @for (\n            col of columns;\n            track col.field ?? col.header ?? $index;\n            let i = $index\n          ) {\n            <td\n              (click)=\"\n                isColumnClickable(i) ? onRowClick($event, rowData) : null\n              \"\n              [ngClass]=\"{\n                'text-blue-500 underline cursor-pointer': isColumnClickable(i),\n              }\"\n            >\n              @switch (col.columnType) {\n                @case (columnTypeEnum.TAG) {\n                  @if (rowData[col.field]) {\n                    <div class=\"flex align-items-center gap-2\">\n                      <div\n                        class=\"border-round-md font-semibold\"\n                        [style]=\"{\n                          fontSize: '12px',\n                          padding: '3px 8px',\n                          width: 'fit-content',\n                          'background-color':\n                            (rowData[col.field + 'Color'] || '#ccc') + '56',\n                          color: rowData[col.field + 'Color'],\n                        }\"\n                      >\n                        {{\n                          rowData[col.field]?.name ||\n                            (rowData[col.field] | translate)\n                        }}\n                      </div>\n                      @if (rowData[col.field + \"Tooltip\"]) {\n                        <i\n                          [class]=\"\n                            rowData[col.field + 'Icon'].class +\n                            ' cursor-pointer'\n                          \"\n                          [style]=\"rowData[col.field + 'Icon'].style\"\n                          [pTooltip]=\"rowData[col.field + 'Tooltip']\"\n                          tooltipPosition=\"top\"\n                        ></i>\n                      }\n                    </div>\n                  } @else {\n                    <ng-container\n                      [ngTemplateOutlet]=\"emptyCell\"\n                      [ngTemplateOutletContext]=\"{\n                        dataCy:\n                          'table-row-' +\n                          col.columnType +\n                          '-row-index-' +\n                          rowIndex +\n                          '-col-index-' +\n                          i,\n                      }\"\n                    />\n                  }\n                }\n                @case (columnTypeEnum.LIST_TAG) {\n                  @if (rowData[col.field]) {\n                    @for (item of rowData[col.field]; track $index) {\n                      <p-badge severity=\"warn\" class=\"mr-1\" [value]=\"item\" />\n                    }\n                  } @else {\n                    <ng-container\n                      [ngTemplateOutlet]=\"emptyCell\"\n                      [ngTemplateOutletContext]=\"{\n                        dataCy:\n                          'table-row-' +\n                          col.columnType +\n                          '-row-index-' +\n                          rowIndex +\n                          '-col-index-' +\n                          i,\n                      }\"\n                    />\n                  }\n                }\n                @case (columnTypeEnum.OBJ_TAG) {\n                  @if (rowData[col.field]) {\n                    <p-tag\n                      [attr.data-cy]=\"\n                        'table-row-' +\n                        columnTypeEnum.OBJ_TAG +\n                        '-row-index-' +\n                        rowIndex +\n                        '-col-index-' +\n                        i\n                      \"\n                      [style]=\"{\n                        fontSize: '12px',\n                        padding: '3px 8px',\n                        width: 'fit-content',\n                        'background-color':\n                          (rowData[col.field].color || '#ccc') + '56',\n                        color: rowData[col.field].color,\n                      }\"\n                      [value]=\"rowData[col.field]?.value | translate\"\n                    ></p-tag>\n                  } @else {\n                    <ng-container\n                      [ngTemplateOutlet]=\"emptyCell\"\n                      [ngTemplateOutletContext]=\"{\n                        dataCy:\n                          'table-row-' +\n                          col.columnType +\n                          '-row-index-' +\n                          rowIndex +\n                          '-col-index-' +\n                          i,\n                      }\"\n                    />\n                  }\n                }\n                @case (columnTypeEnum.PERSON) {\n                  @if (rowData[col.field]) {\n                    <p-avatar\n                      [attr.data-cy]=\"\n                        'table-row-' +\n                        columnTypeEnum.PERSON +\n                        '-row-index-' +\n                        rowIndex +\n                        '-col-index-' +\n                        i\n                      \"\n                      [label]=\"rowData[col.field]?.name | initials\"\n                      class=\"cursor-pointer\"\n                      [style]=\"{\n                        'background-color': '#9c27b0',\n                        color: '#ffffff',\n                        'font-size': '0.8rem!important',\n                      }\"\n                      shape=\"circle\"\n                      (click)=\"personPop.toggle($event)\"\n                    ></p-avatar>\n\n                    <p-popover #personPop [dismissable]=\"true\">\n                      <div>\n                        <span class=\"text-lg\">{{\n                          rowData[col.field].name\n                        }}</span>\n                        <span class=\"block text-sm\">\n                          <i class=\"pi pi-envelope mr-1 text-500\"></i>\n                          {{ rowData[col.field].email ?? \" --\" }}\n                        </span>\n                        <span class=\"block text-sm\">\n                          <i class=\"pi pi-phone text-500\"></i>\n                          {{ rowData[col.field].phone ?? \" --\" }}\n                        </span>\n                      </div>\n                    </p-popover>\n                  } @else {\n                    <ng-container\n                      [ngTemplateOutlet]=\"emptyCell\"\n                      [ngTemplateOutletContext]=\"{\n                        dataCy:\n                          'table-row-' +\n                          col.columnType +\n                          '-row-index-' +\n                          rowIndex +\n                          '-col-index-' +\n                          i,\n                      }\"\n                    />\n                  }\n                }\n                @case (columnTypeEnum.LIST) {\n                  @if (rowData[col.field]?.length) {\n                    @if (rowData[col.field].length > 1) {\n                      <div\n                        class=\"cursor-pointer\"\n                        (click)=\"listPop.toggle($event)\"\n                        [attr.data-cy]=\"\n                          'table-row-' +\n                          columnTypeEnum.LIST +\n                          '-row-index-' +\n                          rowIndex +\n                          '-col-index-' +\n                          i\n                        \"\n                      >\n                        <span class=\"mr-1\">{{\n                          rowData[col.field][0].name\n                        }}</span>\n                        <p-chip\n                          class=\"text-sm font-semibold p-1 m-0\"\n                          [label]=\"'+' + (rowData[col.field].length - 1)\"\n                        />\n                      </div>\n                    } @else {\n                      <span>{{ rowData[col.field][0].name }}</span>\n                    }\n\n                    <p-popover #listPop [dismissable]=\"true\">\n                      @for (\n                        item of rowData[col.field];\n                        track item.name;\n                        let isFirst = $first\n                      ) {\n                        @if (!isFirst) {\n                          <ul class=\"list-none m-0 p-0\">\n                            <li>{{ item.name }}</li>\n                          </ul>\n                        }\n                      }\n                    </p-popover>\n                  } @else {\n                    <ng-container\n                      [ngTemplateOutlet]=\"emptyCell\"\n                      [ngTemplateOutletContext]=\"{\n                        dataCy:\n                          'table-row-' +\n                          col.columnType +\n                          '-row-index-' +\n                          rowIndex +\n                          '-col-index-' +\n                          i,\n                      }\"\n                    />\n                  }\n                }\n                @case (columnTypeEnum.BOOLEAN) {\n                  @if (rowData[col.field] | isBoolean) {\n                    <i\n                      [pTooltip]=\"rowData?.[col.field + 'Tooltip']\"\n                      [attr.data-cy]=\"\n                        'table-row-' +\n                        columnTypeEnum.BOOLEAN +\n                        '-row-index-' +\n                        rowIndex +\n                        '-col-index-' +\n                        i\n                      \"\n                      class=\"pi\"\n                      [ngClass]=\"\n                        rowData[col.field]\n                          ? 'text-green-500 pi-check-circle'\n                          : 'text-red-500 pi-times-circle'\n                      \"\n                    ></i>\n                  } @else {\n                    <ng-container\n                      [ngTemplateOutlet]=\"emptyCell\"\n                      [ngTemplateOutletContext]=\"{\n                        dataCy:\n                          'table-row-' +\n                          col.columnType +\n                          '-row-index-' +\n                          rowIndex +\n                          '-col-index-' +\n                          i,\n                      }\"\n                    />\n                  }\n                }\n                @case (columnTypeEnum.TEXT_AREA) {\n                  @if (rowData[col.field]) {\n                    <div\n                      [attr.data-cy]=\"\n                        'table-row-' +\n                        columnTypeEnum.TEXT_AREA +\n                        '-row-index-' +\n                        rowIndex +\n                        '-col-index-' +\n                        i\n                      \"\n                      [pTooltip]=\"rowData[col.field]\"\n                    >\n                      {{\n                        rowData[col.field].length > (col.maxLength ?? 50)\n                          ? (rowData[col.field]\n                              | slice: 0 : col.maxLength ?? 50) + \"...\"\n                          : rowData[col.field]\n                      }}\n                    </div>\n                  } @else {\n                    <ng-container\n                      [ngTemplateOutlet]=\"emptyCell\"\n                      [ngTemplateOutletContext]=\"{\n                        dataCy:\n                          'table-row-' +\n                          col.columnType +\n                          '-row-index-' +\n                          rowIndex +\n                          '-col-index-' +\n                          i,\n                      }\"\n                    />\n                  }\n                }\n                @case (columnTypeEnum.EMAIL) {\n                  @if (rowData[col.field]) {\n                    <div\n                      class=\"email-cell\"\n                      [attr.data-cy]=\"\n                        'table-row-' +\n                        columnTypeEnum.EMAIL +\n                        '-row-index-' +\n                        rowIndex +\n                        '-col-index-' +\n                        i\n                      \"\n                    >\n                      <span>{{ rowData[col.field] }}</span>\n                      <i\n                        class=\"pi pi-copy email-copy-icon\"\n                        (click)=\"copyToClipboard($event, rowData[col.field])\"\n                        [pTooltip]=\"'LABELS.COPY_EMAIL' | translate\"\n                      >\n                      </i>\n                    </div>\n                  } @else {\n                    <ng-container\n                      [ngTemplateOutlet]=\"emptyCell\"\n                      [ngTemplateOutletContext]=\"{\n                        dataCy:\n                          'table-row-' +\n                          col.columnType +\n                          '-row-index-' +\n                          rowIndex +\n                          '-col-index-' +\n                          i,\n                      }\"\n                    />\n                  }\n                }\n                @case (columnTypeEnum.TIMEPERIOD) {\n                  @if (rowData[col.field]) {\n                    <div\n                      [attr.data-cy]=\"\n                        'table-row-' +\n                        columnTypeEnum.TIMEPERIOD +\n                        '-row-index-' +\n                        rowIndex +\n                        '-col-index-' +\n                        i\n                      \"\n                      [pTooltip]=\"rowData[col.field] | timePeriod\"\n                      style=\"max-width: 200px\"\n                    >\n                      {{ rowData[col.field] | timePeriod }}\n                    </div>\n                  } @else {\n                    <ng-container\n                      [ngTemplateOutlet]=\"emptyCell\"\n                      [ngTemplateOutletContext]=\"{\n                        dataCy:\n                          'table-row-' +\n                          col.columnType +\n                          '-row-index-' +\n                          rowIndex +\n                          '-col-index-' +\n                          i,\n                      }\"\n                    />\n                  }\n                }\n                @default {\n                  @if (col.flag && getNested(rowData, col.flagCodeField)) {\n                    <div\n                      [attr.data-cy]=\"\n                        'table-row-' +\n                        columnTypeEnum.TEXT +\n                        '-row-index-' +\n                        rowIndex +\n                        '-col-index-' +\n                        i\n                      \"\n                      class=\"flex align-items-center gap-2\"\n                      style=\"max-width: 200px\"\n                      [pTooltip]=\"rowData | cell: col : dateFormat\"\n                    >\n                      <img\n                        src=\"https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png\"\n                        [class]=\"\n                          'flag flag-' +\n                          (getNested(rowData, col.flagCodeField) || '')\n                            .toString()\n                            .toLowerCase()\n                        \"\n                        style=\"width: 22px\"\n                        alt=\"\"\n                      />\n                      <span\n                        [innerHTML]=\"rowData | cell: col : dateFormat\"\n                      ></span>\n                    </div>\n                  } @else {\n                    @if (rowData | cell: col : dateFormat) {\n                      <div\n                        [attr.data-cy]=\"\n                          'table-row-' +\n                          columnTypeEnum.TEXT +\n                          '-row-index-' +\n                          rowIndex +\n                          '-col-index-' +\n                          i\n                        \"\n                        [pTooltip]=\"rowData | cell: col : dateFormat\"\n                        style=\"max-width: 200px\"\n                        [innerHTML]=\"rowData | cell: col : dateFormat\"\n                      ></div>\n                    } @else {\n                      <ng-container\n                        [ngTemplateOutlet]=\"emptyCell\"\n                        [ngTemplateOutletContext]=\"{\n                          dataCy:\n                            'table-row-' +\n                            col.columnType +\n                            '-row-index-' +\n                            rowIndex +\n                            '-col-index-' +\n                            i,\n                        }\"\n                      />\n                    }\n                  }\n                }\n              }\n            </td>\n          }\n\n          <td class=\"p-0\">\n            @for (\n              action of tableConfiguration.rowActions;\n              track action?.key ?? $index\n            ) {\n              <phoenix-data-table-action\n                [actionConfig]=\"action\"\n                [rowData]=\"rowData\"\n                (actionClick)=\"handleActionClick($event)\"\n              ></phoenix-data-table-action>\n            }\n          </td>\n        </tr>\n      </ng-template>\n\n      <!-- <ng-template pTemplate=\"loadingbody\" let-columns>\n        @for (_ of skeletonRows; track $index; let rowIdx = $index) {\n          <tr style=\"height: 40px\">\n            @switch (tableConfiguration.selectionType) {\n              @case (selectionTypeEnum.CHECKBOX) {\n                <td class=\"w-2rem\">\n                  <p-skeleton width=\"1.2rem\" height=\"1.2rem\"></p-skeleton>\n                </td>\n              }\n              @case (selectionTypeEnum.RADIO_BTN) {\n                <td class=\"w-2rem\">\n                  <p-skeleton width=\"1.2rem\" height=\"1.2rem\"></p-skeleton>\n                </td>\n              }\n            }\n\n            @for (col of columns; track col.field ?? col.header ?? $index) {\n              <td>\n                <p-skeleton\n                  [ngStyle]=\"{\n                    width: (60 + (rowIdx % 3) * 10) + '%',\n                    height: '1rem'\n                  }\"\n                ></p-skeleton>\n              </td>\n            }\n\n            <td>\n              <p-skeleton width=\"2rem\" height=\"1rem\"></p-skeleton>\n            </td>\n          </tr>\n        }\n      </ng-template> -->\n\n      <ng-template #emptyCell let-dataCy=\"dataCy\">\n        <span [attr.data-cy]=\"dataCy\">--</span>\n      </ng-template>\n\n      <ng-template pTemplate=\"emptymessage\">\n        <td class=\"p-2\" colspan=\"100\">\n          <div class=\"flex align-items-center\">\n            <i class=\"pi pi-info-circle mr-2\"></i>\n            {{ \"NO_RESULTS_FOUND\" | translate }}\n          </div>\n        </td>\n      </ng-template>\n    </p-table>\n\n    <div class=\"border-top-1 border-300 pl-2 p-1 text-sm text-500\">\n      {{ \"LABELS.TOTAL_RECORDS\" | translate }}: {{ totalRecords }}\n    </div>\n  </div>\n</div>\n", styles: [":is() .p-avatar{border-radius:50%!important}::ng-deep .p-paginator button{scale:.7}::ng-deep .p-paginator-rpp-options{scale:.7}::ng-deep .p-datatable .p-datatable-header{border-radius:10px 10px 0 0}:host::ng-deep .p-tag{font-weight:400!important;font-size:.875rem!important}.email-cell{position:relative;display:inline-block;padding-right:24px}.email-cell .email-copy-icon{position:absolute;top:0;right:0;opacity:0;cursor:pointer;transition:opacity .2s}.email-cell:hover .email-copy-icon{opacity:1}.table-host{display:flex;flex-direction:column;min-height:0;overflow:hidden}.table-host,.table-host>.p-datatable,.table-host>.p-datatable .p-datatable-wrapper{min-height:0}:host ::ng-deep .p-datatable-loading-overlay{display:none!important}:host ::ng-deep .p-datatable-mask{display:none!important}:host ::ng-deep .p-datatable.p-datatable-loading{opacity:1!important;pointer-events:auto!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$4.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$4.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i2$4.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "component", type: i2$4.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i2$4.TableRadioButton, selector: "p-tableRadioButton", inputs: ["value", "disabled", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$4.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$4.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "component", type: TableCaptionComponent, selector: "table-caption", inputs: ["tableConfiguration", "columns", "selectedItems", "filters", "filterValidValues"], outputs: ["applyFiltersEvent", "applyColumnsEvent", "searchChange", "actionClick"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: PhoenixDataTableActionComponent, selector: "phoenix-data-table-action", inputs: ["actionConfig", "rowData"], outputs: ["actionClick"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i4$1.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i5$3.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "ngmodule", type: PanelModule }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i3$2.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ChipModule }, { kind: "component", type: i8$2.Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "styleClass", "disabled", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i4$6.Badge, selector: "p-badge", inputs: ["styleClass", "badgeSize", "size", "severity", "value", "badgeDisabled"] }, { kind: "pipe", type: i1$2.SlicePipe, name: "slice" }, { kind: "pipe", type: i4$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: TableCellPipe, name: "cell" }, { kind: "pipe", type: InitialsPipe, name: "initials" }, { kind: "pipe", type: TimePeriodPipe, name: "timePeriod" }, { kind: "pipe", type: IsBooleanPipe, name: "isBoolean" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
@@ -3649,7 +3666,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         TimePeriodPipe,
                         IsBooleanPipe,
                         BadgeModule,
-                    ], template: "<div class=\"border-1 border-round-sm border-300 border-round-md m-2\">\n  @if (selectedItems().length === 0) {\n    <table-caption\n      [columns]=\"columns\"\n      [tableConfiguration]=\"tableConfiguration\"\n      [filters]=\"filters\"\n      [selectedItems]=\"selectedItems()\"\n      (applyFiltersEvent)=\"applyFilters($event)\"\n      (applyColumnsEvent)=\"applyColumns($event)\"\n      (searchChange)=\"onSearch($event)\"\n      (actionClick)=\"handleActionClick($event)\"\n    ></table-caption>\n  } @else {\n    <div\n      style=\"min-height: 40px; padding: 8px\"\n      class=\"flex justify-content-between align-items-center border-bottom-1 border-300 pl-5 pr-5 text-sm text-500\"\n    >\n      <div>\n        @if (tableConfiguration.selectionType === selectionTypeEnum.CHECKBOX) {\n          <span>\n            {{ selectedItems().length }}\n            {{\n              selectedItems().length === 1\n                ? (\"LABELS.ITEM_SELECTED\" | translate)\n                : (\"LABELS.ITEMS_SELECTED\" | translate)\n            }}\n          </span>\n        }\n      </div>\n\n      <div>\n        @for (\n          action of tableConfiguration.bulkActions;\n          track action?.key ?? $index\n        ) {\n          <phoenix-data-table-action\n            [actionConfig]=\"action\"\n            (actionClick)=\"\n              handleActionClick({\n                action: action,\n                selectedItems: selectedItems(),\n              });\n              clearSelection()\n            \"\n          ></phoenix-data-table-action>\n        }\n\n        <button\n          [attr.data-cy]=\"'clear-selection-button'\"\n          class=\"p-button p-button-text p-button-plain\"\n          (click)=\"clearSelection()\"\n          aria-label=\"Clear Selection\"\n        >\n          <i class=\"pi pi-times\"></i>\n        </button>\n      </div>\n    </div>\n  }\n  <div\n    class=\"table-host\"\n    [style.height]=\"tableConfiguration.scrollHeight ?? null\"\n  >\n    <p-table\n      #dt\n      [columns]=\"selectedColumns\"\n      [value]=\"tableData\"\n      [size]=\"'small'\"\n      scrollable=\"true\"\n      scrollHeight=\"flex\"\n      [virtualScroll]=\"true\"\n      [virtualScrollItemSize]=\"40\"\n      [virtualScrollDelay]=\"80\"\n      [totalRecords]=\"totalRecords\"\n      [sortMode]=\"'multiple'\"\n      [customSort]=\"true\"\n      (sortFunction)=\"onCustomSort($event)\"\n      [selection]=\"selectedItems()\"\n      (selectionChange)=\"onSelectionChange($event)\"\n      [resizableColumns]=\"true\"\n      columnResizeMode=\"expand\"\n      [loading]=\"initialSortLoading\"\n    >\n      <ng-template #header let-columns>\n        <tr style=\"height: 40px\" class=\"dt-header\">\n          @switch (tableConfiguration.selectionType) {\n            @case (selectionTypeEnum.CHECKBOX) {\n              <th class=\"custom-th\">\n                <p-tableHeaderCheckbox\n                  [attr.data-cy]=\"'table-header-checkbox'\"\n                ></p-tableHeaderCheckbox>\n              </th>\n            }\n            @case (selectionTypeEnum.RADIO_BTN) {\n              <th class=\"custom-th\"></th>\n            }\n          }\n          @for (\n            col of columns;\n            track col.field ?? col.header ?? $index;\n            let colIdx = $index\n          ) {\n            <th\n              pResizableColumn\n              class=\"custom-th text-primary font-bold\"\n              [pSortableColumn]=\"col.field\"\n            >\n              {{ col.header | translate }}\n              <p-sortIcon\n                [field]=\"col.field\"\n                [attr.data-cy]=\"'sort-button-' + col.header\"\n              ></p-sortIcon>\n            </th>\n          }\n\n          <th class=\"custom-th\"></th>\n        </tr>\n      </ng-template>\n\n      <ng-template\n        #body\n        let-rowData\n        let-columns=\"columns\"\n        let-rowIndex=\"rowIndex\"\n      >\n        <tr>\n          @switch (tableConfiguration.selectionType) {\n            @case (selectionTypeEnum.CHECKBOX) {\n              <td class=\"w-2rem\">\n                <p-tableCheckbox\n                  [attr.data-cy]=\"\n                    'table-row-' + selectionTypeEnum.CHECKBOX + '-' + rowIndex\n                  \"\n                  [disabled]=\"\n                    rowData?.canSelect !== undefined\n                      ? !rowData.canSelect\n                      : false\n                  \"\n                  [value]=\"rowData\"\n                ></p-tableCheckbox>\n              </td>\n            }\n            @case (selectionTypeEnum.RADIO_BTN) {\n              <td>\n                <p-tableRadioButton\n                  [value]=\"rowData\"\n                  [attr.data-cy]=\"\n                    'table-row-' + selectionTypeEnum.RADIO_BTN + '-' + rowIndex\n                  \"\n                ></p-tableRadioButton>\n              </td>\n            }\n          }\n          @for (\n            col of columns;\n            track col.field ?? col.header ?? $index;\n            let i = $index\n          ) {\n            <td\n              (click)=\"\n                isColumnClickable(i) ? onRowClick($event, rowData) : null\n              \"\n              [ngClass]=\"{\n                'text-blue-500 underline cursor-pointer': isColumnClickable(i),\n              }\"\n            >\n              @switch (col.columnType) {\n                @case (columnTypeEnum.TAG) {\n                  @if (rowData[col.field]) {\n                    <div class=\"flex align-items-center gap-2\">\n                      <div\n                        class=\"border-round-md font-semibold\"\n                        [style]=\"{\n                          fontSize: '12px',\n                          padding: '3px 8px',\n                          width: 'fit-content',\n                          'background-color':\n                            (rowData[col.field + 'Color'] || '#ccc') + '56',\n                          color: rowData[col.field + 'Color'],\n                        }\"\n                      >\n                        {{\n                          rowData[col.field]?.name ||\n                            (rowData[col.field] | translate)\n                        }}\n                      </div>\n                      @if (rowData[col.field + \"Tooltip\"]) {\n                        <i\n                          [class]=\"\n                            rowData[col.field + 'Icon'].class +\n                            ' cursor-pointer'\n                          \"\n                          [style]=\"rowData[col.field + 'Icon'].style\"\n                          [pTooltip]=\"rowData[col.field + 'Tooltip']\"\n                          tooltipPosition=\"top\"\n                        ></i>\n                      }\n                    </div>\n                  } @else {\n                    <ng-container\n                      [ngTemplateOutlet]=\"emptyCell\"\n                      [ngTemplateOutletContext]=\"{\n                        dataCy:\n                          'table-row-' +\n                          col.columnType +\n                          '-row-index-' +\n                          rowIndex +\n                          '-col-index-' +\n                          i,\n                      }\"\n                    />\n                  }\n                }\n                @case (columnTypeEnum.LIST_TAG) {\n                  @if (rowData[col.field]) {\n                    @for (item of rowData[col.field]; track $index) {\n                      <p-badge severity=\"warn\" class=\"mr-1\" [value]=\"item\" />\n                    }\n                  } @else {\n                    <ng-container\n                      [ngTemplateOutlet]=\"emptyCell\"\n                      [ngTemplateOutletContext]=\"{\n                        dataCy:\n                          'table-row-' +\n                          col.columnType +\n                          '-row-index-' +\n                          rowIndex +\n                          '-col-index-' +\n                          i,\n                      }\"\n                    />\n                  }\n                }\n                @case (columnTypeEnum.OBJ_TAG) {\n                  @if (rowData[col.field]) {\n                    <p-tag\n                      [attr.data-cy]=\"\n                        'table-row-' +\n                        columnTypeEnum.OBJ_TAG +\n                        '-row-index-' +\n                        rowIndex +\n                        '-col-index-' +\n                        i\n                      \"\n                      [style]=\"{\n                        fontSize: '12px',\n                        padding: '3px 8px',\n                        width: 'fit-content',\n                        'background-color':\n                          (rowData[col.field].color || '#ccc') + '56',\n                        color: rowData[col.field].color,\n                      }\"\n                      [value]=\"rowData[col.field]?.value | translate\"\n                    ></p-tag>\n                  } @else {\n                    <ng-container\n                      [ngTemplateOutlet]=\"emptyCell\"\n                      [ngTemplateOutletContext]=\"{\n                        dataCy:\n                          'table-row-' +\n                          col.columnType +\n                          '-row-index-' +\n                          rowIndex +\n                          '-col-index-' +\n                          i,\n                      }\"\n                    />\n                  }\n                }\n                @case (columnTypeEnum.PERSON) {\n                  @if (rowData[col.field]) {\n                    <p-avatar\n                      [attr.data-cy]=\"\n                        'table-row-' +\n                        columnTypeEnum.PERSON +\n                        '-row-index-' +\n                        rowIndex +\n                        '-col-index-' +\n                        i\n                      \"\n                      [label]=\"rowData[col.field]?.name | initials\"\n                      class=\"cursor-pointer\"\n                      [style]=\"{\n                        'background-color': '#9c27b0',\n                        color: '#ffffff',\n                        'font-size': '0.8rem!important',\n                      }\"\n                      shape=\"circle\"\n                      (click)=\"personPop.toggle($event)\"\n                    ></p-avatar>\n\n                    <p-popover #personPop [dismissable]=\"true\">\n                      <div>\n                        <span class=\"text-lg\">{{\n                          rowData[col.field].name\n                        }}</span>\n                        <span class=\"block text-sm\">\n                          <i class=\"pi pi-envelope mr-1 text-500\"></i>\n                          {{ rowData[col.field].email ?? \" --\" }}\n                        </span>\n                        <span class=\"block text-sm\">\n                          <i class=\"pi pi-phone text-500\"></i>\n                          {{ rowData[col.field].phone ?? \" --\" }}\n                        </span>\n                      </div>\n                    </p-popover>\n                  } @else {\n                    <ng-container\n                      [ngTemplateOutlet]=\"emptyCell\"\n                      [ngTemplateOutletContext]=\"{\n                        dataCy:\n                          'table-row-' +\n                          col.columnType +\n                          '-row-index-' +\n                          rowIndex +\n                          '-col-index-' +\n                          i,\n                      }\"\n                    />\n                  }\n                }\n                @case (columnTypeEnum.LIST) {\n                  @if (rowData[col.field]?.length) {\n                    @if (rowData[col.field].length > 1) {\n                      <div\n                        class=\"cursor-pointer\"\n                        (click)=\"listPop.toggle($event)\"\n                        [attr.data-cy]=\"\n                          'table-row-' +\n                          columnTypeEnum.LIST +\n                          '-row-index-' +\n                          rowIndex +\n                          '-col-index-' +\n                          i\n                        \"\n                      >\n                        <span class=\"mr-1\">{{\n                          rowData[col.field][0].name\n                        }}</span>\n                        <p-chip\n                          class=\"text-sm font-semibold p-1 m-0\"\n                          [label]=\"'+' + (rowData[col.field].length - 1)\"\n                        />\n                      </div>\n                    } @else {\n                      <span>{{ rowData[col.field][0].name }}</span>\n                    }\n\n                    <p-popover #listPop [dismissable]=\"true\">\n                      @for (\n                        item of rowData[col.field];\n                        track item.name;\n                        let isFirst = $first\n                      ) {\n                        @if (!isFirst) {\n                          <ul class=\"list-none m-0 p-0\">\n                            <li>{{ item.name }}</li>\n                          </ul>\n                        }\n                      }\n                    </p-popover>\n                  } @else {\n                    <ng-container\n                      [ngTemplateOutlet]=\"emptyCell\"\n                      [ngTemplateOutletContext]=\"{\n                        dataCy:\n                          'table-row-' +\n                          col.columnType +\n                          '-row-index-' +\n                          rowIndex +\n                          '-col-index-' +\n                          i,\n                      }\"\n                    />\n                  }\n                }\n                @case (columnTypeEnum.BOOLEAN) {\n                  @if (rowData[col.field] | isBoolean) {\n                    <i\n                      [pTooltip]=\"rowData?.[col.field + 'Tooltip']\"\n                      [attr.data-cy]=\"\n                        'table-row-' +\n                        columnTypeEnum.BOOLEAN +\n                        '-row-index-' +\n                        rowIndex +\n                        '-col-index-' +\n                        i\n                      \"\n                      class=\"pi\"\n                      [ngClass]=\"\n                        rowData[col.field]\n                          ? 'text-green-500 pi-check-circle'\n                          : 'text-red-500 pi-times-circle'\n                      \"\n                    ></i>\n                  } @else {\n                    <ng-container\n                      [ngTemplateOutlet]=\"emptyCell\"\n                      [ngTemplateOutletContext]=\"{\n                        dataCy:\n                          'table-row-' +\n                          col.columnType +\n                          '-row-index-' +\n                          rowIndex +\n                          '-col-index-' +\n                          i,\n                      }\"\n                    />\n                  }\n                }\n                @case (columnTypeEnum.TEXT_AREA) {\n                  @if (rowData[col.field]) {\n                    <div\n                      [attr.data-cy]=\"\n                        'table-row-' +\n                        columnTypeEnum.TEXT_AREA +\n                        '-row-index-' +\n                        rowIndex +\n                        '-col-index-' +\n                        i\n                      \"\n                      [pTooltip]=\"rowData[col.field]\"\n                    >\n                      {{\n                        rowData[col.field].length > (col.maxLength ?? 50)\n                          ? (rowData[col.field]\n                              | slice: 0 : col.maxLength ?? 50) + \"...\"\n                          : rowData[col.field]\n                      }}\n                    </div>\n                  } @else {\n                    <ng-container\n                      [ngTemplateOutlet]=\"emptyCell\"\n                      [ngTemplateOutletContext]=\"{\n                        dataCy:\n                          'table-row-' +\n                          col.columnType +\n                          '-row-index-' +\n                          rowIndex +\n                          '-col-index-' +\n                          i,\n                      }\"\n                    />\n                  }\n                }\n                @case (columnTypeEnum.EMAIL) {\n                  @if (rowData[col.field]) {\n                    <div\n                      class=\"email-cell\"\n                      [attr.data-cy]=\"\n                        'table-row-' +\n                        columnTypeEnum.EMAIL +\n                        '-row-index-' +\n                        rowIndex +\n                        '-col-index-' +\n                        i\n                      \"\n                    >\n                      <span>{{ rowData[col.field] }}</span>\n                      <i\n                        class=\"pi pi-copy email-copy-icon\"\n                        (click)=\"copyToClipboard($event, rowData[col.field])\"\n                        [pTooltip]=\"'LABELS.COPY_EMAIL' | translate\"\n                      >\n                      </i>\n                    </div>\n                  } @else {\n                    <ng-container\n                      [ngTemplateOutlet]=\"emptyCell\"\n                      [ngTemplateOutletContext]=\"{\n                        dataCy:\n                          'table-row-' +\n                          col.columnType +\n                          '-row-index-' +\n                          rowIndex +\n                          '-col-index-' +\n                          i,\n                      }\"\n                    />\n                  }\n                }\n                @case (columnTypeEnum.TIMEPERIOD) {\n                  @if (rowData[col.field]) {\n                    <div\n                      [attr.data-cy]=\"\n                        'table-row-' +\n                        columnTypeEnum.TIMEPERIOD +\n                        '-row-index-' +\n                        rowIndex +\n                        '-col-index-' +\n                        i\n                      \"\n                      [pTooltip]=\"rowData[col.field] | timePeriod\"\n                      style=\"max-width: 200px\"\n                    >\n                      {{ rowData[col.field] | timePeriod }}\n                    </div>\n                  } @else {\n                    <ng-container\n                      [ngTemplateOutlet]=\"emptyCell\"\n                      [ngTemplateOutletContext]=\"{\n                        dataCy:\n                          'table-row-' +\n                          col.columnType +\n                          '-row-index-' +\n                          rowIndex +\n                          '-col-index-' +\n                          i,\n                      }\"\n                    />\n                  }\n                }\n                @default {\n                  @if (col.flag && getNested(rowData, col.flagCodeField)) {\n                    <div\n                      [attr.data-cy]=\"\n                        'table-row-' +\n                        columnTypeEnum.TEXT +\n                        '-row-index-' +\n                        rowIndex +\n                        '-col-index-' +\n                        i\n                      \"\n                      class=\"flex align-items-center gap-2\"\n                      style=\"max-width: 200px\"\n                      [pTooltip]=\"rowData | cell: col : dateFormat\"\n                    >\n                      <img\n                        src=\"https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png\"\n                        [class]=\"\n                          'flag flag-' +\n                          (getNested(rowData, col.flagCodeField) || '')\n                            .toString()\n                            .toLowerCase()\n                        \"\n                        style=\"width: 22px\"\n                        alt=\"\"\n                      />\n                      <span\n                        [innerHTML]=\"rowData | cell: col : dateFormat\"\n                      ></span>\n                    </div>\n                  } @else {\n                    @if (rowData | cell: col : dateFormat) {\n                      <div\n                        [attr.data-cy]=\"\n                          'table-row-' +\n                          columnTypeEnum.TEXT +\n                          '-row-index-' +\n                          rowIndex +\n                          '-col-index-' +\n                          i\n                        \"\n                        [pTooltip]=\"rowData | cell: col : dateFormat\"\n                        style=\"max-width: 200px\"\n                        [innerHTML]=\"rowData | cell: col : dateFormat\"\n                      ></div>\n                    } @else {\n                      <ng-container\n                        [ngTemplateOutlet]=\"emptyCell\"\n                        [ngTemplateOutletContext]=\"{\n                          dataCy:\n                            'table-row-' +\n                            col.columnType +\n                            '-row-index-' +\n                            rowIndex +\n                            '-col-index-' +\n                            i,\n                        }\"\n                      />\n                    }\n                  }\n                }\n              }\n            </td>\n          }\n\n          <td class=\"p-0\">\n            @for (\n              action of tableConfiguration.rowActions;\n              track action?.key ?? $index\n            ) {\n              <phoenix-data-table-action\n                [actionConfig]=\"action\"\n                [rowData]=\"rowData\"\n                (actionClick)=\"handleActionClick($event)\"\n              ></phoenix-data-table-action>\n            }\n          </td>\n        </tr>\n      </ng-template>\n\n      <!-- <ng-template pTemplate=\"loadingbody\" let-columns>\n        @for (_ of skeletonRows; track $index; let rowIdx = $index) {\n          <tr style=\"height: 40px\">\n            @switch (tableConfiguration.selectionType) {\n              @case (selectionTypeEnum.CHECKBOX) {\n                <td class=\"w-2rem\">\n                  <p-skeleton width=\"1.2rem\" height=\"1.2rem\"></p-skeleton>\n                </td>\n              }\n              @case (selectionTypeEnum.RADIO_BTN) {\n                <td class=\"w-2rem\">\n                  <p-skeleton width=\"1.2rem\" height=\"1.2rem\"></p-skeleton>\n                </td>\n              }\n            }\n\n            @for (col of columns; track col.field ?? col.header ?? $index) {\n              <td>\n                <p-skeleton\n                  [ngStyle]=\"{\n                    width: (60 + (rowIdx % 3) * 10) + '%',\n                    height: '1rem'\n                  }\"\n                ></p-skeleton>\n              </td>\n            }\n\n            <td>\n              <p-skeleton width=\"2rem\" height=\"1rem\"></p-skeleton>\n            </td>\n          </tr>\n        }\n      </ng-template> -->\n\n      <ng-template #emptyCell let-dataCy=\"dataCy\">\n        <span [attr.data-cy]=\"dataCy\">--</span>\n      </ng-template>\n\n      <ng-template pTemplate=\"emptymessage\">\n        <td class=\"p-2\" colspan=\"100\">\n          <div class=\"flex align-items-center\">\n            <i class=\"pi pi-info-circle mr-2\"></i>\n            {{ \"NO_RESULTS_FOUND\" | translate }}\n          </div>\n        </td>\n      </ng-template>\n    </p-table>\n\n    <div class=\"border-top-1 border-300 pl-2 p-1 text-sm text-500\">\n      {{ \"LABELS.TOTAL_RECORDS\" | translate }}: {{ totalRecords }}\n    </div>\n  </div>\n</div>\n", styles: [":is() .p-avatar{border-radius:50%!important}::ng-deep .p-paginator button{scale:.7}::ng-deep .p-paginator-rpp-options{scale:.7}::ng-deep .p-datatable .p-datatable-header{border-radius:10px 10px 0 0}:host::ng-deep .p-tag{font-weight:400!important;font-size:.875rem!important}.email-cell{position:relative;display:inline-block;padding-right:24px}.email-cell .email-copy-icon{position:absolute;top:0;right:0;opacity:0;cursor:pointer;transition:opacity .2s}.email-cell:hover .email-copy-icon{opacity:1}.table-host{display:flex;flex-direction:column;min-height:0;overflow:hidden}.table-host,.table-host>.p-datatable,.table-host>.p-datatable .p-datatable-wrapper{min-height:0}:host ::ng-deep .p-datatable-loading-overlay{display:none!important}:host ::ng-deep .p-datatable-mask{display:none!important}:host ::ng-deep .p-datatable.p-datatable-loading{opacity:1!important;pointer-events:auto!important}\n"] }]
+                    ], template: "<div class=\"border-1 border-round-sm border-300 border-round-md m-2\">\n  @if (selectedItems().length === 0) {\n    <table-caption\n      [columns]=\"columns\"\n      [tableConfiguration]=\"tableConfiguration\"\n      [filters]=\"filters\"\n      [selectedItems]=\"selectedItems()\"\n      [filterValidValues]=\"filterValidValues\"\n      (applyFiltersEvent)=\"applyFilters($event)\"\n      (applyColumnsEvent)=\"applyColumns($event)\"\n      (searchChange)=\"onSearch($event)\"\n      (actionClick)=\"handleActionClick($event)\"\n    ></table-caption>\n  } @else {\n    <div\n      style=\"min-height: 40px; padding: 8px\"\n      class=\"flex justify-content-between align-items-center border-bottom-1 border-300 pl-5 pr-5 text-sm text-500\"\n    >\n      <div>\n        @if (tableConfiguration.selectionType === selectionTypeEnum.CHECKBOX) {\n          <span>\n            {{ selectedItems().length }}\n            {{\n              selectedItems().length === 1\n                ? (\"LABELS.ITEM_SELECTED\" | translate)\n                : (\"LABELS.ITEMS_SELECTED\" | translate)\n            }}\n          </span>\n        }\n      </div>\n\n      <div>\n        @for (\n          action of tableConfiguration.bulkActions;\n          track action?.key ?? $index\n        ) {\n          <phoenix-data-table-action\n            [actionConfig]=\"action\"\n            (actionClick)=\"\n              handleActionClick({\n                action: action,\n                selectedItems: selectedItems(),\n              });\n              clearSelection()\n            \"\n          ></phoenix-data-table-action>\n        }\n\n        <button\n          [attr.data-cy]=\"'clear-selection-button'\"\n          class=\"p-button p-button-text p-button-plain\"\n          (click)=\"clearSelection()\"\n          aria-label=\"Clear Selection\"\n        >\n          <i class=\"pi pi-times\"></i>\n        </button>\n      </div>\n    </div>\n  }\n  <div\n    class=\"table-host\"\n    [style.height]=\"tableConfiguration.scrollHeight ?? null\"\n  >\n    <p-table\n      #dt\n      [columns]=\"selectedColumns\"\n      [value]=\"tableData\"\n      [size]=\"'small'\"\n      scrollable=\"true\"\n      scrollHeight=\"flex\"\n      [virtualScroll]=\"true\"\n      [virtualScrollItemSize]=\"40\"\n      [virtualScrollDelay]=\"80\"\n      [totalRecords]=\"totalRecords\"\n      [sortMode]=\"'multiple'\"\n      [customSort]=\"true\"\n      (sortFunction)=\"onCustomSort($event)\"\n      [selection]=\"selectedItems()\"\n      (selectionChange)=\"onSelectionChange($event)\"\n      [resizableColumns]=\"true\"\n      columnResizeMode=\"expand\"\n      [loading]=\"initialSortLoading\"\n    >\n      <ng-template #header let-columns>\n        <tr style=\"height: 40px\" class=\"dt-header\">\n          @switch (tableConfiguration.selectionType) {\n            @case (selectionTypeEnum.CHECKBOX) {\n              <th class=\"custom-th\">\n                <p-tableHeaderCheckbox\n                  [attr.data-cy]=\"'table-header-checkbox'\"\n                ></p-tableHeaderCheckbox>\n              </th>\n            }\n            @case (selectionTypeEnum.RADIO_BTN) {\n              <th class=\"custom-th\"></th>\n            }\n          }\n          @for (\n            col of columns;\n            track col.field ?? col.header ?? $index;\n            let colIdx = $index\n          ) {\n            <th\n              pResizableColumn\n              class=\"custom-th text-primary font-bold\"\n              [pSortableColumn]=\"col.field\"\n            >\n              {{ col.header | translate }}\n              <p-sortIcon\n                [field]=\"col.field\"\n                [attr.data-cy]=\"'sort-button-' + col.header\"\n              ></p-sortIcon>\n            </th>\n          }\n\n          <th class=\"custom-th\"></th>\n        </tr>\n      </ng-template>\n\n      <ng-template\n        #body\n        let-rowData\n        let-columns=\"columns\"\n        let-rowIndex=\"rowIndex\"\n      >\n        <tr>\n          @switch (tableConfiguration.selectionType) {\n            @case (selectionTypeEnum.CHECKBOX) {\n              <td class=\"w-2rem\">\n                <p-tableCheckbox\n                  [attr.data-cy]=\"\n                    'table-row-' + selectionTypeEnum.CHECKBOX + '-' + rowIndex\n                  \"\n                  [disabled]=\"\n                    rowData?.canSelect !== undefined\n                      ? !rowData.canSelect\n                      : false\n                  \"\n                  [value]=\"rowData\"\n                ></p-tableCheckbox>\n              </td>\n            }\n            @case (selectionTypeEnum.RADIO_BTN) {\n              <td>\n                <p-tableRadioButton\n                  [value]=\"rowData\"\n                  [attr.data-cy]=\"\n                    'table-row-' + selectionTypeEnum.RADIO_BTN + '-' + rowIndex\n                  \"\n                ></p-tableRadioButton>\n              </td>\n            }\n          }\n          @for (\n            col of columns;\n            track col.field ?? col.header ?? $index;\n            let i = $index\n          ) {\n            <td\n              (click)=\"\n                isColumnClickable(i) ? onRowClick($event, rowData) : null\n              \"\n              [ngClass]=\"{\n                'text-blue-500 underline cursor-pointer': isColumnClickable(i),\n              }\"\n            >\n              @switch (col.columnType) {\n                @case (columnTypeEnum.TAG) {\n                  @if (rowData[col.field]) {\n                    <div class=\"flex align-items-center gap-2\">\n                      <div\n                        class=\"border-round-md font-semibold\"\n                        [style]=\"{\n                          fontSize: '12px',\n                          padding: '3px 8px',\n                          width: 'fit-content',\n                          'background-color':\n                            (rowData[col.field + 'Color'] || '#ccc') + '56',\n                          color: rowData[col.field + 'Color'],\n                        }\"\n                      >\n                        {{\n                          rowData[col.field]?.name ||\n                            (rowData[col.field] | translate)\n                        }}\n                      </div>\n                      @if (rowData[col.field + \"Tooltip\"]) {\n                        <i\n                          [class]=\"\n                            rowData[col.field + 'Icon'].class +\n                            ' cursor-pointer'\n                          \"\n                          [style]=\"rowData[col.field + 'Icon'].style\"\n                          [pTooltip]=\"rowData[col.field + 'Tooltip']\"\n                          tooltipPosition=\"top\"\n                        ></i>\n                      }\n                    </div>\n                  } @else {\n                    <ng-container\n                      [ngTemplateOutlet]=\"emptyCell\"\n                      [ngTemplateOutletContext]=\"{\n                        dataCy:\n                          'table-row-' +\n                          col.columnType +\n                          '-row-index-' +\n                          rowIndex +\n                          '-col-index-' +\n                          i,\n                      }\"\n                    />\n                  }\n                }\n                @case (columnTypeEnum.LIST_TAG) {\n                  @if (rowData[col.field]) {\n                    @for (item of rowData[col.field]; track $index) {\n                      <p-badge severity=\"warn\" class=\"mr-1\" [value]=\"item\" />\n                    }\n                  } @else {\n                    <ng-container\n                      [ngTemplateOutlet]=\"emptyCell\"\n                      [ngTemplateOutletContext]=\"{\n                        dataCy:\n                          'table-row-' +\n                          col.columnType +\n                          '-row-index-' +\n                          rowIndex +\n                          '-col-index-' +\n                          i,\n                      }\"\n                    />\n                  }\n                }\n                @case (columnTypeEnum.OBJ_TAG) {\n                  @if (rowData[col.field]) {\n                    <p-tag\n                      [attr.data-cy]=\"\n                        'table-row-' +\n                        columnTypeEnum.OBJ_TAG +\n                        '-row-index-' +\n                        rowIndex +\n                        '-col-index-' +\n                        i\n                      \"\n                      [style]=\"{\n                        fontSize: '12px',\n                        padding: '3px 8px',\n                        width: 'fit-content',\n                        'background-color':\n                          (rowData[col.field].color || '#ccc') + '56',\n                        color: rowData[col.field].color,\n                      }\"\n                      [value]=\"rowData[col.field]?.value | translate\"\n                    ></p-tag>\n                  } @else {\n                    <ng-container\n                      [ngTemplateOutlet]=\"emptyCell\"\n                      [ngTemplateOutletContext]=\"{\n                        dataCy:\n                          'table-row-' +\n                          col.columnType +\n                          '-row-index-' +\n                          rowIndex +\n                          '-col-index-' +\n                          i,\n                      }\"\n                    />\n                  }\n                }\n                @case (columnTypeEnum.PERSON) {\n                  @if (rowData[col.field]) {\n                    <p-avatar\n                      [attr.data-cy]=\"\n                        'table-row-' +\n                        columnTypeEnum.PERSON +\n                        '-row-index-' +\n                        rowIndex +\n                        '-col-index-' +\n                        i\n                      \"\n                      [label]=\"rowData[col.field]?.name | initials\"\n                      class=\"cursor-pointer\"\n                      [style]=\"{\n                        'background-color': '#9c27b0',\n                        color: '#ffffff',\n                        'font-size': '0.8rem!important',\n                      }\"\n                      shape=\"circle\"\n                      (click)=\"personPop.toggle($event)\"\n                    ></p-avatar>\n\n                    <p-popover #personPop [dismissable]=\"true\">\n                      <div>\n                        <span class=\"text-lg\">{{\n                          rowData[col.field].name\n                        }}</span>\n                        <span class=\"block text-sm\">\n                          <i class=\"pi pi-envelope mr-1 text-500\"></i>\n                          {{ rowData[col.field].email ?? \" --\" }}\n                        </span>\n                        <span class=\"block text-sm\">\n                          <i class=\"pi pi-phone text-500\"></i>\n                          {{ rowData[col.field].phone ?? \" --\" }}\n                        </span>\n                      </div>\n                    </p-popover>\n                  } @else {\n                    <ng-container\n                      [ngTemplateOutlet]=\"emptyCell\"\n                      [ngTemplateOutletContext]=\"{\n                        dataCy:\n                          'table-row-' +\n                          col.columnType +\n                          '-row-index-' +\n                          rowIndex +\n                          '-col-index-' +\n                          i,\n                      }\"\n                    />\n                  }\n                }\n                @case (columnTypeEnum.LIST) {\n                  @if (rowData[col.field]?.length) {\n                    @if (rowData[col.field].length > 1) {\n                      <div\n                        class=\"cursor-pointer\"\n                        (click)=\"listPop.toggle($event)\"\n                        [attr.data-cy]=\"\n                          'table-row-' +\n                          columnTypeEnum.LIST +\n                          '-row-index-' +\n                          rowIndex +\n                          '-col-index-' +\n                          i\n                        \"\n                      >\n                        <span class=\"mr-1\">{{\n                          rowData[col.field][0].name\n                        }}</span>\n                        <p-chip\n                          class=\"text-sm font-semibold p-1 m-0\"\n                          [label]=\"'+' + (rowData[col.field].length - 1)\"\n                        />\n                      </div>\n                    } @else {\n                      <span>{{ rowData[col.field][0].name }}</span>\n                    }\n\n                    <p-popover #listPop [dismissable]=\"true\">\n                      @for (\n                        item of rowData[col.field];\n                        track item.name;\n                        let isFirst = $first\n                      ) {\n                        @if (!isFirst) {\n                          <ul class=\"list-none m-0 p-0\">\n                            <li>{{ item.name }}</li>\n                          </ul>\n                        }\n                      }\n                    </p-popover>\n                  } @else {\n                    <ng-container\n                      [ngTemplateOutlet]=\"emptyCell\"\n                      [ngTemplateOutletContext]=\"{\n                        dataCy:\n                          'table-row-' +\n                          col.columnType +\n                          '-row-index-' +\n                          rowIndex +\n                          '-col-index-' +\n                          i,\n                      }\"\n                    />\n                  }\n                }\n                @case (columnTypeEnum.BOOLEAN) {\n                  @if (rowData[col.field] | isBoolean) {\n                    <i\n                      [pTooltip]=\"rowData?.[col.field + 'Tooltip']\"\n                      [attr.data-cy]=\"\n                        'table-row-' +\n                        columnTypeEnum.BOOLEAN +\n                        '-row-index-' +\n                        rowIndex +\n                        '-col-index-' +\n                        i\n                      \"\n                      class=\"pi\"\n                      [ngClass]=\"\n                        rowData[col.field]\n                          ? 'text-green-500 pi-check-circle'\n                          : 'text-red-500 pi-times-circle'\n                      \"\n                    ></i>\n                  } @else {\n                    <ng-container\n                      [ngTemplateOutlet]=\"emptyCell\"\n                      [ngTemplateOutletContext]=\"{\n                        dataCy:\n                          'table-row-' +\n                          col.columnType +\n                          '-row-index-' +\n                          rowIndex +\n                          '-col-index-' +\n                          i,\n                      }\"\n                    />\n                  }\n                }\n                @case (columnTypeEnum.TEXT_AREA) {\n                  @if (rowData[col.field]) {\n                    <div\n                      [attr.data-cy]=\"\n                        'table-row-' +\n                        columnTypeEnum.TEXT_AREA +\n                        '-row-index-' +\n                        rowIndex +\n                        '-col-index-' +\n                        i\n                      \"\n                      [pTooltip]=\"rowData[col.field]\"\n                    >\n                      {{\n                        rowData[col.field].length > (col.maxLength ?? 50)\n                          ? (rowData[col.field]\n                              | slice: 0 : col.maxLength ?? 50) + \"...\"\n                          : rowData[col.field]\n                      }}\n                    </div>\n                  } @else {\n                    <ng-container\n                      [ngTemplateOutlet]=\"emptyCell\"\n                      [ngTemplateOutletContext]=\"{\n                        dataCy:\n                          'table-row-' +\n                          col.columnType +\n                          '-row-index-' +\n                          rowIndex +\n                          '-col-index-' +\n                          i,\n                      }\"\n                    />\n                  }\n                }\n                @case (columnTypeEnum.EMAIL) {\n                  @if (rowData[col.field]) {\n                    <div\n                      class=\"email-cell\"\n                      [attr.data-cy]=\"\n                        'table-row-' +\n                        columnTypeEnum.EMAIL +\n                        '-row-index-' +\n                        rowIndex +\n                        '-col-index-' +\n                        i\n                      \"\n                    >\n                      <span>{{ rowData[col.field] }}</span>\n                      <i\n                        class=\"pi pi-copy email-copy-icon\"\n                        (click)=\"copyToClipboard($event, rowData[col.field])\"\n                        [pTooltip]=\"'LABELS.COPY_EMAIL' | translate\"\n                      >\n                      </i>\n                    </div>\n                  } @else {\n                    <ng-container\n                      [ngTemplateOutlet]=\"emptyCell\"\n                      [ngTemplateOutletContext]=\"{\n                        dataCy:\n                          'table-row-' +\n                          col.columnType +\n                          '-row-index-' +\n                          rowIndex +\n                          '-col-index-' +\n                          i,\n                      }\"\n                    />\n                  }\n                }\n                @case (columnTypeEnum.TIMEPERIOD) {\n                  @if (rowData[col.field]) {\n                    <div\n                      [attr.data-cy]=\"\n                        'table-row-' +\n                        columnTypeEnum.TIMEPERIOD +\n                        '-row-index-' +\n                        rowIndex +\n                        '-col-index-' +\n                        i\n                      \"\n                      [pTooltip]=\"rowData[col.field] | timePeriod\"\n                      style=\"max-width: 200px\"\n                    >\n                      {{ rowData[col.field] | timePeriod }}\n                    </div>\n                  } @else {\n                    <ng-container\n                      [ngTemplateOutlet]=\"emptyCell\"\n                      [ngTemplateOutletContext]=\"{\n                        dataCy:\n                          'table-row-' +\n                          col.columnType +\n                          '-row-index-' +\n                          rowIndex +\n                          '-col-index-' +\n                          i,\n                      }\"\n                    />\n                  }\n                }\n                @default {\n                  @if (col.flag && getNested(rowData, col.flagCodeField)) {\n                    <div\n                      [attr.data-cy]=\"\n                        'table-row-' +\n                        columnTypeEnum.TEXT +\n                        '-row-index-' +\n                        rowIndex +\n                        '-col-index-' +\n                        i\n                      \"\n                      class=\"flex align-items-center gap-2\"\n                      style=\"max-width: 200px\"\n                      [pTooltip]=\"rowData | cell: col : dateFormat\"\n                    >\n                      <img\n                        src=\"https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png\"\n                        [class]=\"\n                          'flag flag-' +\n                          (getNested(rowData, col.flagCodeField) || '')\n                            .toString()\n                            .toLowerCase()\n                        \"\n                        style=\"width: 22px\"\n                        alt=\"\"\n                      />\n                      <span\n                        [innerHTML]=\"rowData | cell: col : dateFormat\"\n                      ></span>\n                    </div>\n                  } @else {\n                    @if (rowData | cell: col : dateFormat) {\n                      <div\n                        [attr.data-cy]=\"\n                          'table-row-' +\n                          columnTypeEnum.TEXT +\n                          '-row-index-' +\n                          rowIndex +\n                          '-col-index-' +\n                          i\n                        \"\n                        [pTooltip]=\"rowData | cell: col : dateFormat\"\n                        style=\"max-width: 200px\"\n                        [innerHTML]=\"rowData | cell: col : dateFormat\"\n                      ></div>\n                    } @else {\n                      <ng-container\n                        [ngTemplateOutlet]=\"emptyCell\"\n                        [ngTemplateOutletContext]=\"{\n                          dataCy:\n                            'table-row-' +\n                            col.columnType +\n                            '-row-index-' +\n                            rowIndex +\n                            '-col-index-' +\n                            i,\n                        }\"\n                      />\n                    }\n                  }\n                }\n              }\n            </td>\n          }\n\n          <td class=\"p-0\">\n            @for (\n              action of tableConfiguration.rowActions;\n              track action?.key ?? $index\n            ) {\n              <phoenix-data-table-action\n                [actionConfig]=\"action\"\n                [rowData]=\"rowData\"\n                (actionClick)=\"handleActionClick($event)\"\n              ></phoenix-data-table-action>\n            }\n          </td>\n        </tr>\n      </ng-template>\n\n      <!-- <ng-template pTemplate=\"loadingbody\" let-columns>\n        @for (_ of skeletonRows; track $index; let rowIdx = $index) {\n          <tr style=\"height: 40px\">\n            @switch (tableConfiguration.selectionType) {\n              @case (selectionTypeEnum.CHECKBOX) {\n                <td class=\"w-2rem\">\n                  <p-skeleton width=\"1.2rem\" height=\"1.2rem\"></p-skeleton>\n                </td>\n              }\n              @case (selectionTypeEnum.RADIO_BTN) {\n                <td class=\"w-2rem\">\n                  <p-skeleton width=\"1.2rem\" height=\"1.2rem\"></p-skeleton>\n                </td>\n              }\n            }\n\n            @for (col of columns; track col.field ?? col.header ?? $index) {\n              <td>\n                <p-skeleton\n                  [ngStyle]=\"{\n                    width: (60 + (rowIdx % 3) * 10) + '%',\n                    height: '1rem'\n                  }\"\n                ></p-skeleton>\n              </td>\n            }\n\n            <td>\n              <p-skeleton width=\"2rem\" height=\"1rem\"></p-skeleton>\n            </td>\n          </tr>\n        }\n      </ng-template> -->\n\n      <ng-template #emptyCell let-dataCy=\"dataCy\">\n        <span [attr.data-cy]=\"dataCy\">--</span>\n      </ng-template>\n\n      <ng-template pTemplate=\"emptymessage\">\n        <td class=\"p-2\" colspan=\"100\">\n          <div class=\"flex align-items-center\">\n            <i class=\"pi pi-info-circle mr-2\"></i>\n            {{ \"NO_RESULTS_FOUND\" | translate }}\n          </div>\n        </td>\n      </ng-template>\n    </p-table>\n\n    <div class=\"border-top-1 border-300 pl-2 p-1 text-sm text-500\">\n      {{ \"LABELS.TOTAL_RECORDS\" | translate }}: {{ totalRecords }}\n    </div>\n  </div>\n</div>\n", styles: [":is() .p-avatar{border-radius:50%!important}::ng-deep .p-paginator button{scale:.7}::ng-deep .p-paginator-rpp-options{scale:.7}::ng-deep .p-datatable .p-datatable-header{border-radius:10px 10px 0 0}:host::ng-deep .p-tag{font-weight:400!important;font-size:.875rem!important}.email-cell{position:relative;display:inline-block;padding-right:24px}.email-cell .email-copy-icon{position:absolute;top:0;right:0;opacity:0;cursor:pointer;transition:opacity .2s}.email-cell:hover .email-copy-icon{opacity:1}.table-host{display:flex;flex-direction:column;min-height:0;overflow:hidden}.table-host,.table-host>.p-datatable,.table-host>.p-datatable .p-datatable-wrapper{min-height:0}:host ::ng-deep .p-datatable-loading-overlay{display:none!important}:host ::ng-deep .p-datatable-mask{display:none!important}:host ::ng-deep .p-datatable.p-datatable-loading{opacity:1!important;pointer-events:auto!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { dt: [{
                 type: ViewChild,
                 args: ['dt']