spiderly 19.12.1 → 19.12.3

package/fesm2022/spiderly.mjs

@@ -17,7 +17,7 @@ import { TooltipModule } from 'primeng/tooltip';
 import * as FileSaver from 'file-saver';
 import mime from 'mime';
 import 'reflect-metadata';
-import { map, Subject, throttleTime, BehaviorSubject, of, filter as filter$1, firstValueFrom, take, finalize as finalize$1, tap as tap$1, throwError } from 'rxjs';
+import { map, Subject, throttleTime, BehaviorSubject, of, filter as filter$1, firstValueFrom, take, finalize as finalize$1, tap as tap$1, throwError, from } from 'rxjs';
 import * as i4$2 from 'primeng/checkbox';
 import { CheckboxModule } from 'primeng/checkbox';
 import * as i4$3 from 'primeng/colorpicker';
@@ -49,7 +49,7 @@ import * as i3$2 from '@angular/router';
 import { NavigationEnd, RouterModule } from '@angular/router';
 import * as i1$1 from 'primeng/api';
 import { ConfirmationService } from 'primeng/api';
-import { filter, map as map$1, finalize, catchError, delay, tap, takeUntil } from 'rxjs/operators';
+import { filter, map as map$1, finalize, catchError, delay, tap, takeUntil, switchMap } from 'rxjs/operators';
 import * as i1$2 from '@angular/common/http';
 import { HttpParams, HttpHeaders, HttpErrorResponse, HttpResponse } from '@angular/common/http';
 import { InputOtp } from 'primeng/inputotp';
@@ -4101,8 +4101,20 @@ class SpiderlyFilterBarComponent {
          * about columns, so whoever owns the sort resolves the names.
          */
         this.sort = input([]);
+        /**
+         * What the picker offers, labelled by the owner — every sortable column, HIDDEN ones
+         * included (their ordering is otherwise unreachable, which is the trap the picker closes).
+         * Empty keeps the chip read-only and the picker off.
+         */
+        this.sortOptions = input([]);
+        /** Whether the grid already sits on its default ordering — gates the reset row, nothing else. */
+        this.sortIsDefault = input(true);
         /** Asked for, never done here — see the button's comment. */
         this.clearAll = output();
+        /** A single-sort ask. Multi-sort stays a header gesture (ctrl-click); the picker replaces. */
+        this.sortPick = output();
+        /** Back to the owner's default ordering — the owner knows what that resolves to, not the bar. */
+        this.sortReset = output();
         this.transloco = inject(TranslocoService);
         /** For the chip's date wording — the same locale mechanism the table's cells format with. */
         this.locale = inject(LOCALE_ID);
@@ -4113,6 +4125,7 @@ class SpiderlyFilterBarComponent {
          */
         this.controlTemplates = input(undefined);
         this.isAddOpen = signal(false);
+        this.isSortOpen = signal(false);
         /** Cleared when the popover closes, so reopening never starts inside someone's old query. */
         this.addSearch = signal('');
         /** The filter whose control is open. One at a time: the bar edits, it is not a form. */
@@ -4143,6 +4156,22 @@ class SpiderlyFilterBarComponent {
                 .filter(([id, definition]) => !onBar.has(id) && definition.offered !== false)
                 .map(([id, definition]) => ({ id, ...definition }));
         });
+        /**
+         * The menu's rows: each option decorated with its ACTIVE direction's arrow (any key, not
+         * just the primary), or null. A `computed`, not a per-row method call in the binding — the
+         * popover's content is projected, so it change-detects even while closed, and a `find` per
+         * option per pass is exactly what `operatorChoices` documents against.
+         */
+        this.sortRows = computed(() => {
+            const active = new Map(this.sort().map((key) => [key.field, key.descending]));
+            return this.sortOptions().map((option) => {
+                const descending = active.get(option.field);
+                return {
+                    ...option,
+                    arrow: descending == null ? null : descending ? '↓' : '↑',
+                };
+            });
+        });
         /**
          * The open editor's operator options, already translated — p-select takes labels, not keys.
          *
@@ -4166,6 +4195,16 @@ class SpiderlyFilterBarComponent {
         this.isAddOpen.set(false);
         this.editing.set(this.filters().get(id));
     }
+    /**
+     * Ascending first; picking the already-ascending primary flips it. The direction is decided
+     * HERE so the owner applies exactly what the menu showed — an owner guessing "toggle" from its
+     * own state could disagree with a stale menu after a concurrent header click.
+     */
+    pickSort(option) {
+        const primary = this.sort()[0];
+        const order = primary?.field === option.field && !primary.descending ? -1 : 1;
+        this.sortPick.emit({ field: option.field, order });
+    }
     /** The raw-string controls only. Nothing reaches the bar or the query until `apply`. */
     draft(handle, event) {
         this.draftValue(handle, this.coerce(handle.kind, event.target.value));
@@ -4234,7 +4273,7 @@ class SpiderlyFilterBarComponent {
             : spellOptionValue(options, chip.value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyFilterBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: SpiderlyFilterBarComponent, isStandalone: true, selector: "spiderly-filter-bar", inputs: { filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: true, transformFunction: null }, totalRecords: { classPropertyName: "totalRecords", publicName: "totalRecords", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, controlTemplates: { classPropertyName: "controlTemplates", publicName: "controlTemplates", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clearAll: "clearAll" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: SpiderlyFilterBarComponent, isStandalone: true, selector: "spiderly-filter-bar", inputs: { filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: true, transformFunction: null }, totalRecords: { classPropertyName: "totalRecords", publicName: "totalRecords", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, sortOptions: { classPropertyName: "sortOptions", publicName: "sortOptions", isSignal: true, isRequired: false, transformFunction: null }, sortIsDefault: { classPropertyName: "sortIsDefault", publicName: "sortIsDefault", isSignal: true, isRequired: false, transformFunction: null }, controlTemplates: { classPropertyName: "controlTemplates", publicName: "controlTemplates", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clearAll: "clearAll", sortPick: "sortPick", sortReset: "sortReset" }, ngImport: i0, template: `
     <ng-container *transloco="let t">
       <div class="filter-bar" data-testid="filter-bar">
         @for (chip of filters().applied(); track chip.id) {
@@ -4277,23 +4316,49 @@ class SpiderlyFilterBarComponent {
           </span>
         }
 
-        @if (sort().length) {
-          <!-- Read-only, and that is the scope on purpose. Multi-sort is invisible today (sort
-               icons scattered over headers, nothing saying which is primary), so saying it in one
-               place is the whole gain. An x here would have to mean "back to the DEFAULT sort"
-               rather than "no sort", because applyDefaultSortIfUnsorted puts the default straight
-               back — an affordance that lies is worse than none. -->
+        @if (sortOptions().length) {
+          <!-- The chip is the PICKER's trigger (2026-09-06, grilled) — Polaris's always-present
+               SortButton, in the slot the read-only chip held. Always rendered, sorted or not:
+               with the trigger only on an active sort, an unsorted grid would have no way to
+               sort by a hidden column, which is the capability the picker exists for. It
+               replaced a read-only chip whose stated rationale ("an x would lie — the default
+               snaps back") inverted the day a viewed table had no default: the operator was
+               left with an inherited sort, no chip x, no clear button, and the one header that
+               could un-sort it hidden. -->
+          <button
+            type="button"
+            class="sort-chip"
+            data-testid="sort-chip"
+            [attr.aria-expanded]="isSortOpen()"
+            (click)="sortMenu.toggle($event); isSortOpen.set(!isSortOpen())"
+          >
+            <ng-container *ngTemplateOutlet="sortChipBody"></ng-container>
+            <i class="pi pi-chevron-down sort-chip-caret" aria-hidden="true"></i>
+          </button>
+        } @else if (sort().length) {
+          <!-- No options handed over — the chip stays what it was: one read-only place naming
+               the ordering and which key is primary. -->
           <span class="sort-chip" data-testid="sort-chip">
+            <ng-container *ngTemplateOutlet="sortChipBody"></ng-container>
+          </span>
+        }
+
+        <!-- One home for the chip's sentence, whichever element renders it — the read-only
+             branch never reaches the @else (it is gated on sort().length). -->
+        <ng-template #sortChipBody>
+          @if (sort().length) {
             <span class="sort-chip-label">{{ t('SortedBy') }}</span>
-            @for (key of sort(); track key.label; let last = $last) {
+            @for (key of sort(); track key.field; let last = $last) {
               <span class="sort-chip-key"
                 >{{ key.label }} {{ key.descending ? '↓' : '↑' }}{{
                   last ? '' : ','
                 }}</span
               >
             }
-          </span>
-        }
+          } @else {
+            <span class="sort-chip-label">{{ t('Sort') }}</span>
+          }
+        </ng-template>
 
         @if (totalRecords() !== null) {
           <!-- What came back, next to the chips that say what was asked. An empty grid under a
@@ -4325,8 +4390,8 @@ class SpiderlyFilterBarComponent {
         @if (filters().applied().length) {
           <!-- The bar owns clearing now: the toolbar's button sat a row away from the chips it
                cleared, which is two affordances for one job. Emits rather than clearing the store
-               itself, because whoever owns the query also owns the persisted state and the sort
-               that a full clear has to reach. -->
+               itself, because whoever owns the query owns the requery and the persisted snapshot
+               that follow a clear. Filters only — sort is its own channel (the picker above). -->
           <button
             pButton
             type="button"
@@ -4338,6 +4403,46 @@ class SpiderlyFilterBarComponent {
           ></button>
         }
 
+        <p-popover #sortMenu (onHide)="isSortOpen.set(false)">
+          <div class="filter-add-menu" role="menu">
+            @for (option of sortRows(); track option.field) {
+              <!-- Click sorts ascending; clicking the already-ascending option flips it. One
+                   gesture, look, one gesture back — the header's cycle without needing the
+                   header, so a hidden column's ordering is reachable too. -->
+              <button
+                type="button"
+                role="menuitem"
+                class="filter-add-option sort-menu-option"
+                data-testid="sort-menu-option"
+                (click)="pickSort(option); sortMenu.hide()"
+              >
+                <!-- &ngsp; keeps a real space between label and arrow — same collapse the
+                     filter chip documents: without it the copied/read text is "Naziv↓". -->
+                <span>{{ option.label }}</span>&ngsp;
+                @if (option.arrow) {
+                  <span class="sort-menu-direction" aria-hidden="true">{{
+                    option.arrow
+                  }}</span>
+                }
+              </button>
+            }
+
+            @if (!sortIsDefault()) {
+              <!-- Only while there is an override to undo: at the default there is nothing to
+                   reset, and a row that does nothing teaches people to stop reading the menu. -->
+              <button
+                type="button"
+                role="menuitem"
+                class="filter-add-option sort-menu-reset"
+                data-testid="sort-menu-reset"
+                (click)="sortReset.emit(); sortMenu.hide()"
+              >
+                {{ t('ResetSort') }}
+              </button>
+            }
+          </div>
+        </p-popover>
+
         <p-popover #addMenu (onHide)="isAddOpen.set(false); addSearch.set('')">
           <div class="filter-add-menu" role="menu">
             <input
@@ -4464,7 +4569,7 @@ class SpiderlyFilterBarComponent {
         </div>
       }
     </ng-container>
-  `, isInline: true, styles: [":host{display:block}.filter-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 0 0}.filter-chip{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--p-content-border-color);border-radius:999px;background:var(--p-content-background);padding:0;font-size:.875rem;line-height:1.4}.filter-chip-edit{border:none;background:none;color:inherit;font:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:4px;padding:4px 4px 4px 10px;border-radius:999px 0 0 999px}.filter-chip-edit:hover .filter-chip-value{text-decoration:underline}.filter-chip-label{color:var(--p-text-muted-color)}.filter-chip-value{font-weight:600}.filter-chip-remove{border:none;background:none;color:inherit;font:inherit;cursor:pointer;color:var(--p-text-muted-color);font-size:1.05rem;line-height:1;padding:4px 9px 5px 4px;border-radius:0 999px 999px 0}.filter-chip-remove:hover{color:var(--p-primary-color)}.filter-add{flex:none}.filter-add-menu{display:flex;flex-direction:column;align-items:stretch;gap:2px;min-width:14rem;max-height:20rem;overflow-y:auto}.filter-add-search{margin-bottom:4px;position:sticky;top:0}.filter-add-option{border:none;background:none;color:inherit;font:inherit;cursor:pointer;text-align:left;padding:6px 10px;border-radius:var(--p-content-border-radius)}.filter-add-option:hover{background:var(--p-content-hover-background)}.filter-editor{display:flex;margin-top:8px;flex-wrap:wrap;align-items:center;gap:8px;border:1px solid var(--p-content-border-color);border-radius:var(--p-content-border-radius);background:var(--p-content-background);padding:8px}.filter-editor-label{font-weight:600}.filter-editor-tick{display:inline-flex;align-items:center;gap:4px;cursor:pointer}.filter-bar-count{color:var(--p-text-muted-color);font-size:.875rem;margin-left:4px}.sort-chip{display:inline-flex;align-items:center;gap:4px;color:var(--p-text-muted-color);font-size:.875rem}.sort-chip-key{color:var(--p-text-color)}.filter-bar-clear{margin-left:auto;flex:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3$3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$2.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i4$1.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "fluid", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "size", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i5$1.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i7.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "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", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i8.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3$1.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }] }); }
+  `, isInline: true, styles: [":host{display:block}.filter-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 0 0}.filter-chip{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--p-content-border-color);border-radius:999px;background:var(--p-content-background);padding:0;font-size:.875rem;line-height:1.4}.filter-chip-edit{border:none;background:none;color:inherit;font:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:4px;padding:4px 4px 4px 10px;border-radius:999px 0 0 999px}.filter-chip-edit:hover .filter-chip-value{text-decoration:underline}.filter-chip-label{color:var(--p-text-muted-color)}.filter-chip-value{font-weight:600}.filter-chip-remove{border:none;background:none;color:inherit;font:inherit;cursor:pointer;color:var(--p-text-muted-color);font-size:1.05rem;line-height:1;padding:4px 9px 5px 4px;border-radius:0 999px 999px 0}.filter-chip-remove:hover{color:var(--p-primary-color)}.filter-add{flex:none}.filter-add-menu{display:flex;flex-direction:column;align-items:stretch;gap:2px;min-width:14rem;max-height:20rem;overflow-y:auto}.filter-add-search{margin-bottom:4px;position:sticky;top:0}.filter-add-option{border:none;background:none;color:inherit;font:inherit;cursor:pointer;text-align:left;padding:6px 10px;border-radius:var(--p-content-border-radius)}.filter-add-option:hover{background:var(--p-content-hover-background)}.filter-editor{display:flex;margin-top:8px;flex-wrap:wrap;align-items:center;gap:8px;border:1px solid var(--p-content-border-color);border-radius:var(--p-content-border-radius);background:var(--p-content-background);padding:8px}.filter-editor-label{font-weight:600}.filter-editor-tick{display:inline-flex;align-items:center;gap:4px;cursor:pointer}.filter-bar-count{color:var(--p-text-muted-color);font-size:.875rem;margin-left:4px}.sort-chip{display:inline-flex;align-items:center;gap:4px;color:var(--p-text-muted-color);font-size:.875rem}button.sort-chip{border:none;background:none;color:inherit;font:inherit;padding:0;cursor:pointer}button.sort-chip:hover .sort-chip-key,button.sort-chip:hover .sort-chip-label{text-decoration:underline}.sort-chip-caret{font-size:.65rem}.sort-chip-key{color:var(--p-text-color)}.sort-menu-option{display:flex;justify-content:space-between;align-items:center;gap:12px}.sort-menu-direction{color:var(--p-primary-color)}.sort-menu-reset{border-top:1px solid var(--p-content-border-color);border-radius:0;color:var(--p-text-muted-color)}.filter-bar-clear{margin-left:auto;flex:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3$3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$2.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: DatePickerModule }, { kind: "component", type: i4$1.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "fluid", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "size", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i5$1.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i7.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "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", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i8.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i3$1.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyFilterBarComponent, decorators: [{
             type: Component,
@@ -4522,23 +4627,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
           </span>
         }
 
-        @if (sort().length) {
-          <!-- Read-only, and that is the scope on purpose. Multi-sort is invisible today (sort
-               icons scattered over headers, nothing saying which is primary), so saying it in one
-               place is the whole gain. An x here would have to mean "back to the DEFAULT sort"
-               rather than "no sort", because applyDefaultSortIfUnsorted puts the default straight
-               back — an affordance that lies is worse than none. -->
+        @if (sortOptions().length) {
+          <!-- The chip is the PICKER's trigger (2026-09-06, grilled) — Polaris's always-present
+               SortButton, in the slot the read-only chip held. Always rendered, sorted or not:
+               with the trigger only on an active sort, an unsorted grid would have no way to
+               sort by a hidden column, which is the capability the picker exists for. It
+               replaced a read-only chip whose stated rationale ("an x would lie — the default
+               snaps back") inverted the day a viewed table had no default: the operator was
+               left with an inherited sort, no chip x, no clear button, and the one header that
+               could un-sort it hidden. -->
+          <button
+            type="button"
+            class="sort-chip"
+            data-testid="sort-chip"
+            [attr.aria-expanded]="isSortOpen()"
+            (click)="sortMenu.toggle($event); isSortOpen.set(!isSortOpen())"
+          >
+            <ng-container *ngTemplateOutlet="sortChipBody"></ng-container>
+            <i class="pi pi-chevron-down sort-chip-caret" aria-hidden="true"></i>
+          </button>
+        } @else if (sort().length) {
+          <!-- No options handed over — the chip stays what it was: one read-only place naming
+               the ordering and which key is primary. -->
           <span class="sort-chip" data-testid="sort-chip">
+            <ng-container *ngTemplateOutlet="sortChipBody"></ng-container>
+          </span>
+        }
+
+        <!-- One home for the chip's sentence, whichever element renders it — the read-only
+             branch never reaches the @else (it is gated on sort().length). -->
+        <ng-template #sortChipBody>
+          @if (sort().length) {
             <span class="sort-chip-label">{{ t('SortedBy') }}</span>
-            @for (key of sort(); track key.label; let last = $last) {
+            @for (key of sort(); track key.field; let last = $last) {
               <span class="sort-chip-key"
                 >{{ key.label }} {{ key.descending ? '↓' : '↑' }}{{
                   last ? '' : ','
                 }}</span
               >
             }
-          </span>
-        }
+          } @else {
+            <span class="sort-chip-label">{{ t('Sort') }}</span>
+          }
+        </ng-template>
 
         @if (totalRecords() !== null) {
           <!-- What came back, next to the chips that say what was asked. An empty grid under a
@@ -4570,8 +4701,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
         @if (filters().applied().length) {
           <!-- The bar owns clearing now: the toolbar's button sat a row away from the chips it
                cleared, which is two affordances for one job. Emits rather than clearing the store
-               itself, because whoever owns the query also owns the persisted state and the sort
-               that a full clear has to reach. -->
+               itself, because whoever owns the query owns the requery and the persisted snapshot
+               that follow a clear. Filters only — sort is its own channel (the picker above). -->
           <button
             pButton
             type="button"
@@ -4583,6 +4714,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
           ></button>
         }
 
+        <p-popover #sortMenu (onHide)="isSortOpen.set(false)">
+          <div class="filter-add-menu" role="menu">
+            @for (option of sortRows(); track option.field) {
+              <!-- Click sorts ascending; clicking the already-ascending option flips it. One
+                   gesture, look, one gesture back — the header's cycle without needing the
+                   header, so a hidden column's ordering is reachable too. -->
+              <button
+                type="button"
+                role="menuitem"
+                class="filter-add-option sort-menu-option"
+                data-testid="sort-menu-option"
+                (click)="pickSort(option); sortMenu.hide()"
+              >
+                <!-- &ngsp; keeps a real space between label and arrow — same collapse the
+                     filter chip documents: without it the copied/read text is "Naziv↓". -->
+                <span>{{ option.label }}</span>&ngsp;
+                @if (option.arrow) {
+                  <span class="sort-menu-direction" aria-hidden="true">{{
+                    option.arrow
+                  }}</span>
+                }
+              </button>
+            }
+
+            @if (!sortIsDefault()) {
+              <!-- Only while there is an override to undo: at the default there is nothing to
+                   reset, and a row that does nothing teaches people to stop reading the menu. -->
+              <button
+                type="button"
+                role="menuitem"
+                class="filter-add-option sort-menu-reset"
+                data-testid="sort-menu-reset"
+                (click)="sortReset.emit(); sortMenu.hide()"
+              >
+                {{ t('ResetSort') }}
+              </button>
+            }
+          </div>
+        </p-popover>
+
         <p-popover #addMenu (onHide)="isAddOpen.set(false); addSearch.set('')">
           <div class="filter-add-menu" role="menu">
             <input
@@ -4709,7 +4880,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
         </div>
       }
     </ng-container>
-  `, styles: [":host{display:block}.filter-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 0 0}.filter-chip{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--p-content-border-color);border-radius:999px;background:var(--p-content-background);padding:0;font-size:.875rem;line-height:1.4}.filter-chip-edit{border:none;background:none;color:inherit;font:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:4px;padding:4px 4px 4px 10px;border-radius:999px 0 0 999px}.filter-chip-edit:hover .filter-chip-value{text-decoration:underline}.filter-chip-label{color:var(--p-text-muted-color)}.filter-chip-value{font-weight:600}.filter-chip-remove{border:none;background:none;color:inherit;font:inherit;cursor:pointer;color:var(--p-text-muted-color);font-size:1.05rem;line-height:1;padding:4px 9px 5px 4px;border-radius:0 999px 999px 0}.filter-chip-remove:hover{color:var(--p-primary-color)}.filter-add{flex:none}.filter-add-menu{display:flex;flex-direction:column;align-items:stretch;gap:2px;min-width:14rem;max-height:20rem;overflow-y:auto}.filter-add-search{margin-bottom:4px;position:sticky;top:0}.filter-add-option{border:none;background:none;color:inherit;font:inherit;cursor:pointer;text-align:left;padding:6px 10px;border-radius:var(--p-content-border-radius)}.filter-add-option:hover{background:var(--p-content-hover-background)}.filter-editor{display:flex;margin-top:8px;flex-wrap:wrap;align-items:center;gap:8px;border:1px solid var(--p-content-border-color);border-radius:var(--p-content-border-radius);background:var(--p-content-background);padding:8px}.filter-editor-label{font-weight:600}.filter-editor-tick{display:inline-flex;align-items:center;gap:4px;cursor:pointer}.filter-bar-count{color:var(--p-text-muted-color);font-size:.875rem;margin-left:4px}.sort-chip{display:inline-flex;align-items:center;gap:4px;color:var(--p-text-muted-color);font-size:.875rem}.sort-chip-key{color:var(--p-text-color)}.filter-bar-clear{margin-left:auto;flex:none}\n"] }]
+  `, styles: [":host{display:block}.filter-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 0 0}.filter-chip{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--p-content-border-color);border-radius:999px;background:var(--p-content-background);padding:0;font-size:.875rem;line-height:1.4}.filter-chip-edit{border:none;background:none;color:inherit;font:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:4px;padding:4px 4px 4px 10px;border-radius:999px 0 0 999px}.filter-chip-edit:hover .filter-chip-value{text-decoration:underline}.filter-chip-label{color:var(--p-text-muted-color)}.filter-chip-value{font-weight:600}.filter-chip-remove{border:none;background:none;color:inherit;font:inherit;cursor:pointer;color:var(--p-text-muted-color);font-size:1.05rem;line-height:1;padding:4px 9px 5px 4px;border-radius:0 999px 999px 0}.filter-chip-remove:hover{color:var(--p-primary-color)}.filter-add{flex:none}.filter-add-menu{display:flex;flex-direction:column;align-items:stretch;gap:2px;min-width:14rem;max-height:20rem;overflow-y:auto}.filter-add-search{margin-bottom:4px;position:sticky;top:0}.filter-add-option{border:none;background:none;color:inherit;font:inherit;cursor:pointer;text-align:left;padding:6px 10px;border-radius:var(--p-content-border-radius)}.filter-add-option:hover{background:var(--p-content-hover-background)}.filter-editor{display:flex;margin-top:8px;flex-wrap:wrap;align-items:center;gap:8px;border:1px solid var(--p-content-border-color);border-radius:var(--p-content-border-radius);background:var(--p-content-background);padding:8px}.filter-editor-label{font-weight:600}.filter-editor-tick{display:inline-flex;align-items:center;gap:4px;cursor:pointer}.filter-bar-count{color:var(--p-text-muted-color);font-size:.875rem;margin-left:4px}.sort-chip{display:inline-flex;align-items:center;gap:4px;color:var(--p-text-muted-color);font-size:.875rem}button.sort-chip{border:none;background:none;color:inherit;font:inherit;padding:0;cursor:pointer}button.sort-chip:hover .sort-chip-key,button.sort-chip:hover .sort-chip-label{text-decoration:underline}.sort-chip-caret{font-size:.65rem}.sort-chip-key{color:var(--p-text-color)}.sort-menu-option{display:flex;justify-content:space-between;align-items:center;gap:12px}.sort-menu-direction{color:var(--p-primary-color)}.sort-menu-reset{border-top:1px solid var(--p-content-border-color);border-radius:0;color:var(--p-text-muted-color)}.filter-bar-clear{margin-left:auto;flex:none}\n"] }]
         }] });
 
 class SpiderlyDeleteConfirmationComponent {
@@ -4977,6 +5148,18 @@ class SpiderlyDataTableComponent {
          * `tableStyle` is a field.
          */
         this.sortKeys = [];
+        /**
+         * Gates the picker's reset row. Refreshed with `sortKeys` — same request, same reason it is a
+         * field rather than a getter. "Default" is view-aware (`defaultMultiSortMeta`), so inside a
+         * view the row offers the view's ordering back, not the table's.
+         */
+        this.sortIsDefault = true;
+        /**
+         * What the bar's picker offers: every sortable data column, hidden ones INCLUDED — the picker
+         * exists so an ordering does not need its column on screen. Built once in `ngOnInit` (columns
+         * are a declaration, not state) and labelled here because the bar knows nothing about columns.
+         */
+        this.sortPickOptions = [];
     }
     ngAfterViewInit() {
         this.setupRemovableSort();
@@ -5006,32 +5189,31 @@ class SpiderlyDataTableComponent {
             if (sortMeta && sortMeta.order === -1) {
                 const mouseEvent = event.originalEvent;
                 const isMultiSortClick = mouseEvent.metaKey || mouseEvent.ctrlKey;
-                // Un-sorting substitutes the declared default (when there is one) right here,
-                // so sortMultiple() broadcasts and emits the final meta in one shot.
                 if (isMultiSortClick) {
+                    // Removing ONE level of a multi-sort keeps the reader's place (PrimeNG's metaKey
+                    // path never pages either), so this cannot ride applySort, whose page reset is
+                    // half the point. The substituted default keeps sortMultiple() to one emission.
                     const remaining = this.table._multiSortMeta.filter((m) => m.field !== event.field);
                     this.table._multiSortMeta = remaining.length
                         ? remaining
                         : (this.defaultMultiSortMeta() ?? remaining);
+                    this.table.sortMultiple();
+                    if (this.table.isStateful())
+                        this.table.saveState();
+                    this.table.anchorRowIndex = null;
+                    this.persistActiveViewSort();
                 }
                 else {
-                    this.table._multiSortMeta = this.defaultMultiSortMeta() ?? [];
-                    if (this.table.resetPageOnSort) {
-                        this.table._first = 0;
-                        this.table.firstChange.emit(0);
-                    }
-                }
-                this.table.sortMultiple();
-                if (this.table.isStateful()) {
-                    this.table.saveState();
+                    // A single-click un-sort IS "back to the default" — the exact gesture the bar's
+                    // reset row asks for, so it uses the same body.
+                    this.resetSortFromBar();
                 }
-                this.table.anchorRowIndex = null;
             }
             else {
                 originalSort(event);
+                // PrimeNG's sort() pages/saves itself; the override slot is ours to record.
+                this.persistActiveViewSort();
             }
-            // Every explicit header-sort gesture, un-sort included, records the view's override.
-            this.persistActiveViewSort();
         };
     }
     /**
@@ -5102,17 +5284,24 @@ class SpiderlyDataTableComponent {
             this.requeryOnAppliedFilters();
         this.chooserCols = this.cols.filter(SpiderlyDataTableComponent.isDataColumn);
         this.refreshVisibleCols();
+        // From chooserCols, not cols: same "every data column, hidden included" set the chooser
+        // offers — one derivation of that list, so the picker cannot drift from it.
+        this.sortPickOptions = this.chooserCols
+            .filter((col) => this.isColumnSortable(col))
+            .map((col) => ({ field: col.field, label: col.name }));
         // Bound to p-table's [multiSortMeta] so the FIRST request already carries the right
-        // sort. The view's own sort wins; the persisted table-global sort sits deliberately
-        // BETWEEN it and the table default, so a view declaring nothing keeps the ordering the
-        // operator last chose. We read it all ourselves because PrimeNG's restoreState() runs on
-        // the first [value] change — after the initial lazy emit has already left — and is then
-        // told to agree (see `alignPersistedTableStateSort`).
+        // sort. On a viewed table the persisted table-global sort is a NON-SOURCE (2026-09-06):
+        // sort is per-view state (override ?? declared ?? table default), and the blob — which
+        // holds the last ordering ANY view used — would re-impose across views the exact
+        // carry-over the per-view model removes, on every F5. It still carries rows/first there,
+        // and stays the one sort memory of a view-less table. We read it all ourselves because
+        // PrimeNG's restoreState() runs on the first [value] change — after the initial lazy emit
+        // has already left — and is then told to agree (see `alignPersistedTableStateSort`).
         const tableState = this.persistedTableState();
-        this.initialMultiSortMeta =
-            this.viewSort() ??
-                this.sanitizedSortMeta(tableState?.multiSortMeta) ??
-                this.tableDefaultMultiSortMeta();
+        this.initialMultiSortMeta = this.views?.length
+            ? this.resolvedViewSort()
+            : (this.sanitizedSortMeta(tableState?.multiSortMeta) ??
+                this.tableDefaultMultiSortMeta());
         this.alignPersistedTableStateSort(tableState);
     }
     /** A data column shows values for a `field`; anything else (the actions column) always renders. */
@@ -5494,17 +5683,23 @@ class SpiderlyDataTableComponent {
         const stored = readStoredJson(this.filterStorage, this.viewSortStateKey);
         return Array.isArray(stored) ? this.sanitizedSortMeta(stored) : null;
     }
-    /** The sort this view asks for: the operator's stored override, else its declared sort. */
-    viewSort() {
-        return this.persistedViewSort() ?? this.viewDeclaredMultiSortMeta();
+    /**
+     * THE resolution ladder, named once: the operator's stored override, else the declared
+     * default (`defaultMultiSortMeta` = view's declared sort ?? table default). Null means
+     * "unsorted" — callers append their own `?? []` / blob terms rather than re-spelling the
+     * ladder, so a future term (a per-view default refinement, decision 10's columns half)
+     * lands everywhere at once.
+     */
+    resolvedViewSort() {
+        return this.persistedViewSort() ?? this.defaultMultiSortMeta();
     }
     /**
      * Records the current sort as the active view's override — called from the EXPLICIT sort
-     * gestures only (header click, menu sort, Clear filters), never from a load: a sort merely
-     * inherited at init must not crystallize into an override, or a later change to the view's
-     * declared sort would stop flowing to operators who never touched sort — the same
-     * flows-through rule `columnVisibilityOverrides` documents. A sort equal to the declared
-     * default is stored as ABSENCE for the same reason.
+     * gestures only (header click, `applySort` — the menu and both bar entry points), never
+     * from a load: a sort merely inherited at init must not crystallize into an override, or a
+     * later change to the view's declared sort would stop flowing to operators who never
+     * touched sort — the same flows-through rule `columnVisibilityOverrides` documents. A sort
+     * equal to the declared default is stored as ABSENCE for the same reason.
      */
     persistActiveViewSort() {
         const key = this.viewSortStateKey;
@@ -5519,16 +5714,17 @@ class SpiderlyDataTableComponent {
         }
     }
     /**
-     * Puts the entering view's sort on the grid — stored override first, then the declared sort;
-     * a view stating no preference keeps the ordering already there (the pre-decision-10-sort
-     * behavior, and the least surprising for the tab an operator never sorted). Broadcast only —
-     * the caller owns the refetch, because which request carries the new sort differs between the
-     * store and storeless paths.
+     * Puts the entering view's sort on the grid — stored override, else declared sort, else the
+     * table default, else UNSORTED. A view is a COMPLETE state, sort included (2026-09-06,
+     * grilled — supersedes the "a view stating no preference keeps the ordering already there"
+     * this first shipped with): the carried-over ordering read as a bug in its first live week,
+     * when "Poslate"'s statusChangedAt rode onto "Sve", whose sorted column ships hidden —
+     * read-only chip, no header to tri-state, no way out. Polaris IndexFilters is the model:
+     * sort is part of a view's saved definition. Broadcast only — the caller owns the refetch,
+     * because which request carries the new sort differs between the store and storeless paths.
      */
     applyViewSort() {
-        const target = this.viewSort();
-        if (!target)
-            return false;
+        const target = this.resolvedViewSort() ?? [];
         if (sortMetaEquals(target, this.table._multiSortMeta ?? []))
             return false;
         this.broadcastSort(target);
@@ -5614,12 +5810,11 @@ class SpiderlyDataTableComponent {
             return col == null || this.isColumnSortable(col);
         });
     }
-    // Safety net: any lazy load still leaving unsorted (Clear filters — PrimeNG's clear()
-    // nulls the sort and emits in one call — or stale persisted state) falls back to the
-    // declared default. Patching the event before it becomes the backend Filter avoids a
-    // second fetch; clear() broadcasts sort state to the header icons before emitting,
-    // hence the explicit re-broadcast. The tri-state un-sort path never gets here — it
-    // substitutes the default at its source in setupRemovableSort().
+    // Safety net: any lazy load still leaving unsorted (stale persisted state; a viewless
+    // table with no sort memory yet) falls back to the declared default. Patching the event
+    // before it becomes the backend Filter avoids a second fetch; the re-broadcast keeps the
+    // header icons agreeing with what was actually sent. The tri-state un-sort path never
+    // gets here — it substitutes the default at its source in setupRemovableSort().
     applyDefaultSortIfUnsorted(event) {
         if (event.multiSortMeta?.length)
             return;
@@ -5790,8 +5985,8 @@ class SpiderlyDataTableComponent {
     /**
      * Switches to a view. Clears first, always: a view is a STATE rather than an addition, and two
      * of them composed produce a question nobody asked. The clear runs through the store directly
-     * rather than through `clear(table)`, which would also wipe the sort and the persisted state a
-     * view is entitled to keep.
+     * rather than through `clear()`, whose requery effect would spend a fetch before the entering
+     * view's filters are in place.
      */
     selectView(view) {
         this.activeViewId = view.id;
@@ -5872,9 +6067,7 @@ class SpiderlyDataTableComponent {
         this.columnMenu().hide();
         if (!col?.field || !this.isColumnSortable(col))
             return;
-        this.table._multiSortMeta = [{ field: col.field, order }];
-        this.table.sortMultiple();
-        this.persistActiveViewSort();
+        this.applySort([{ field: col.field, order }]);
     }
     /**
      * Sizes the column to the widest thing in it. The cheaper escape from a cramped column: no
@@ -5984,10 +6177,50 @@ class SpiderlyDataTableComponent {
      * left falls back to its own name rather than vanishing.
      */
     refreshSortKeys() {
-        this.sortKeys = (this.lastLazyLoadEvent?.multiSortMeta ?? []).map((key) => ({
-            label: this.cols.find((col) => col.field === key.field)?.name ?? key.field,
+        const meta = this.lastLazyLoadEvent?.multiSortMeta ?? [];
+        this.sortKeys = meta.map((key) => ({
+            field: key.field,
+            // A sort may name a field no column declares (keepSortableMeta allows it), and its chip
+            // must still speak the operator's language: the same PascalCase-key convention the
+            // scaffold seeds resolves it (Transloco falls back to the key, so worst case reads
+            // "CreatedAt", never the raw camelCase identifier).
+            label: this.cols.find((col) => col.field === key.field)?.name ??
+                this.translocoService.translate(firstCharToUpper(key.field)),
             descending: key.order === -1,
         }));
+        this.sortIsDefault = sortMetaEquals(meta, this.defaultMultiSortMeta() ?? []);
+    }
+    /**
+     * The one body of an explicit sort GESTURE — the thing `persistActiveViewSort`'s doc calls
+     * "explicit gestures only": page one, meta on the grid, fetch, save, selection anchor
+     * invalidated, override recorded. Shared by the header's single-click un-sort, the header
+     * menu and both bar entry points; `broadcastSort` is its deliberate no-fetch sibling. The
+     * page reset, `saveState` and anchor line mirror PrimeNG's own `sort()` (`sortMultiple()`
+     * does none of the three); the "lands on page one" / "survives a reload" specs pin why.
+     */
+    applySort(meta) {
+        if (this.table.resetPageOnSort) {
+            this.table._first = 0;
+            this.table.firstChange.emit(0);
+        }
+        this.table._multiSortMeta = meta;
+        this.table.sortMultiple();
+        if (this.table.isStateful())
+            this.table.saveState();
+        this.table.anchorRowIndex = null;
+        this.persistActiveViewSort();
+    }
+    /** The picker's ask: one sort, replacing the whole meta — the same contract as the header menu. */
+    sortFromBar(pick) {
+        this.applySort([pick]);
+    }
+    /**
+     * Back to the resolved default — the view's declared sort, else the table default, else
+     * unsorted. Persisting right after is what empties the override slot: a sort equal to the
+     * default is stored as absence, so the declared ordering flows through again.
+     */
+    resetSortFromBar() {
+        this.applySort(this.defaultMultiSortMeta() ?? []);
     }
     /** This column's share, override first, then its declared width, then the per-type default. */
     columnShare(col) {
@@ -6369,18 +6602,17 @@ class SpiderlyDataTableComponent {
         exportListToExcel(this.exportListToExcelObservableMethod, filter);
     }
     /**
-     * Clears everything that narrows the grid. With a store supplied it has to reach BOTH — the
-     * store holds the constraints and PrimeNG holds the persisted state and sort — or the bar goes
-     * empty while a reload brings the old filters back.
+     * Clears the FILTERS — and nothing else (2026-09-06, grilled). It used to also reach the
+     * sort and PrimeNG's persisted state, which made "Clear filters" a reset the label never
+     * claimed: sort is its own channel with its own affordances (the bar's picker, the header's
+     * tri-state), mirroring Polaris, where onClearAll is wired to the Filters while
+     * sortSelected never passes through it. The store's requery effect owns the refetch and the
+     * persisted-snapshot update — the button only renders with chips on the bar, so the applied
+     * set always changes — and dropping table.clear() also drops the second, unsequenced
+     * request the 2026-09-05 review flagged on every Clear.
      */
-    clear(table) {
+    clear() {
         this.filters?.clear();
-        table.clear();
-        table.clearState();
-        // `table.clear()` landed the grid on the declared default (`applyDefaultSortIfUnsorted`),
-        // so the view's sort override must go with it — or F5 would bring back the sort Clear
-        // visibly removed.
-        this.persistActiveViewSort();
     }
     //#region Selection
     setFakeIsAllSelected() {
@@ -6554,7 +6786,7 @@ class SpiderlyDataTableComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyDataTableComponent, deps: [{ token: i3$2.Router }, { token: i1$5.DialogService }, { token: i3$2.ActivatedRoute }, { token: SpiderlyMessageService }, { token: i1.TranslocoService }, { token: ConfigServiceBase }, { token: i0.ErrorHandler }, { token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.13", type: SpiderlyDataTableComponent, isStandalone: true, selector: "spiderly-data-table", inputs: { tableTitle: "tableTitle", tableIcon: "tableIcon", items: "items", rows: "rows", rowsPerPageOptions: "rowsPerPageOptions", cols: "cols", filters: "filters", views: "views", showPaginator: "showPaginator", showCardWrapper: "showCardWrapper", readonly: "readonly", idField: "idField", getPaginatedListObservableMethod: "getPaginatedListObservableMethod", exportListToExcelObservableMethod: "exportListToExcelObservableMethod", deleteItemFromTableObservableMethod: "deleteItemFromTableObservableMethod", deleteListFromTableObservableMethod: "deleteListFromTableObservableMethod", newlySelectedItems: "newlySelectedItems", unselectedItems: "unselectedItems", selectionMode: "selectionMode", selectedLazyLoadObservableMethod: "selectedLazyLoadObservableMethod", additionalFilterIdLong: "additionalFilterIdLong", showAddButton: "showAddButton", showExportToExcelButton: "showExportToExcelButton", showReloadTableButton: "showReloadTableButton", getFormArrayItems: "getFormArrayItems", hasLazyLoad: "hasLazyLoad", stateKey: "stateKey", stateStorage: "stateStorage", defaultSortField: "defaultSortField", defaultSortOrder: "defaultSortOrder", getAlreadySelectedItemIds: "getAlreadySelectedItemIds", getAlreadySelectedItems: "getAlreadySelectedItems", getFormControl: "getFormControl", additionalIndexes: "additionalIndexes", navigateOnRowClick: "navigateOnRowClick", rowNavigationPath: "rowNavigationPath" }, outputs: { onTotalRecordsChange: "onTotalRecordsChange", onLazyLoad: "onLazyLoad", onIsAllSelectedChange: "onIsAllSelectedChange", onRowSelect: "onRowSelect", onRowUnselect: "onRowUnselect" }, queries: [{ propertyName: "actionsTemplate", first: true, predicate: SpiderlyDataTableActionsDirective, descendants: true, read: TemplateRef }, { propertyName: "cellTemplates", predicate: SpiderlyCellTemplateDirective }, { propertyName: "filterTemplates", predicate: SpiderlyFilterTemplateDirective }], viewQueries: [{ propertyName: "columnMenu", first: true, predicate: ["columnMenu"], descendants: true, isSignal: true }, { propertyName: "filterBar", first: true, predicate: SpiderlyFilterBarComponent, descendants: true, isSignal: true }, { propertyName: "selectionHeader", first: true, predicate: ["selectionHeader"], descendants: true, isSignal: true }, { propertyName: "table", first: true, predicate: ["dt"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  <div\n    #tableContainer\n    class=\"spiderly-table-container\"\n    [attr.aria-busy]=\"isPending\"\n    [ngClass]=\"{\n      'card responsive-card-padding overflow-auto': showCardWrapper\n    }\"\n  >\n    <p-table\n      #dt\n      [value]=\"items\"\n      [rows]=\"rows\"\n      [rowsPerPageOptions]=\"rowsPerPageOptions\"\n      [rowHover]=\"true\"\n      [paginator]=\"showPaginator\"\n      responsiveLayout=\"scroll\"\n      [lazy]=\"hasLazyLoad\"\n      (onLazyLoad)=\"lazyLoad($event)\"\n      (onPage)=\"onPageChange(tableContainer)\"\n      [totalRecords]=\"totalRecords\"\n      class=\"spiderly-table\"\n      [loading]=\"isPending\"\n      [selectionMode]=\"selectionMode\"\n      dataKey=\"id\"\n      sortMode=\"multiple\"\n      [multiSortMeta]=\"initialMultiSortMeta\"\n      [stateKey]=\"resolvedStateKey\"\n      [stateStorage]=\"stateStorage\"\n      [tableStyle]=\"tableStyle\"\n    >\n      <ng-template pTemplate=\"caption\">\n        <div class=\"table-header overflow-auto\">\n          <div style=\"display: flex; align-items: center; gap: 8px\">\n            <i class=\"{{ tableIcon }}\" style=\"font-size: 20px\"></i>\n            <div style=\"margin: 0px; font-size: 17.5px\">{{ tableTitle }}</div>\n          </div>\n          <div style=\"display: flex; gap: 8px\">\n            <ng-container\n              *ngIf=\"actionsTemplate\"\n              [ngTemplateOutlet]=\"actionsTemplate\"\n            ></ng-container>\n            <button\n              pButton\n              *ngIf=\"hasLazyLoad\"\n              data-testid=\"column-chooser-button\"\n              [label]=\"t('Columns')\"\n              class=\"p-button-outlined\"\n              style=\"flex: none\"\n              icon=\"pi pi-sliders-h\"\n              (click)=\"columnChooser.toggle($event)\"\n            ></button>\n            <button\n              pButton\n              *ngIf=\"showExportToExcelButton\"\n              [label]=\"t('ExportToExcel')\"\n              class=\"p-button-outlined\"\n              style=\"flex: none\"\n              icon=\"pi pi-download\"\n              (click)=\"exportListToExcel()\"\n            ></button>\n            <button\n              pButton\n              *ngIf=\"showReloadTableButton\"\n              [label]=\"t('Reload')\"\n              class=\"p-button-outlined\"\n              style=\"flex: none\"\n              icon=\"pi pi-refresh\"\n              (click)=\"reload()\"\n            ></button>\n            <button\n              pButton\n              *ngIf=\"deleteListFromTableObservableMethod && rowsSelectedNumber > 0\"\n              [label]=\"t('DeleteSelected') + ' (' + rowsSelectedNumber + ')'\"\n              class=\"p-button-danger\"\n              style=\"flex: none\"\n              icon=\"pi pi-trash\"\n              (click)=\"deleteSelectedObjects()\"\n            ></button>\n          </div>\n        </div>\n        <!-- ONE menu for every column, with the target held in `menuColumn`. Rendering its items\n             inside an @if keyed on the column would put them inside the popover's projected\n             content, and PrimeNG does not re-project content an @if has destroyed \u2014 the filter\n             bar's editor lost a whole afternoon to exactly that. -->\n        <p-popover #columnMenu>\n          <div class=\"column-menu\" role=\"menu\">\n            <button\n              type=\"button\"\n              role=\"menuitem\"\n              class=\"column-menu-item\"\n              data-testid=\"column-menu-hide\"\n              [disabled]=\"!menuColumn || !canToggleColumn(menuColumn)\"\n              (click)=\"hideMenuColumn()\"\n            >\n              <i class=\"pi pi-eye-slash\"></i>\n              <span class=\"column-menu-item-label\">{{ t('HideColumn') }}</span>\n            </button>\n            <button\n              type=\"button\"\n              role=\"menuitem\"\n              class=\"column-menu-item\"\n              data-testid=\"column-menu-filter\"\n              [disabled]=\"!menuColumn || !canFilterColumn(menuColumn)\"\n              (click)=\"filterMenuColumn()\"\n            >\n              <i class=\"pi pi-filter\"></i>\n              <span class=\"column-menu-item-label\">{{ t('Filter') }}\u2026</span>\n            </button>\n            <button\n              type=\"button\"\n              role=\"menuitem\"\n              class=\"column-menu-item\"\n              data-testid=\"column-menu-sort-asc\"\n              [disabled]=\"!menuColumn || !isColumnSortable(menuColumn)\"\n              (click)=\"sortMenuColumn(1)\"\n            >\n              <i class=\"pi pi-sort-amount-up-alt\"></i>\n              <span class=\"column-menu-item-label\">{{ t('SortAscending') }}</span>\n            </button>\n            <button\n              type=\"button\"\n              role=\"menuitem\"\n              class=\"column-menu-item\"\n              data-testid=\"column-menu-sort-desc\"\n              [disabled]=\"!menuColumn || !isColumnSortable(menuColumn)\"\n              (click)=\"sortMenuColumn(-1)\"\n            >\n              <i class=\"pi pi-sort-amount-down\"></i>\n              <span class=\"column-menu-item-label\">{{ t('SortDescending') }}</span>\n            </button>\n            <button\n              type=\"button\"\n              role=\"menuitem\"\n              class=\"column-menu-item\"\n              data-testid=\"column-menu-left\"\n              [disabled]=\"!menuColumn || !canMoveColumn(menuColumn, -1)\"\n              (click)=\"moveMenuColumn(-1)\"\n            >\n              <i class=\"pi pi-arrow-left\"></i>\n              <span class=\"column-menu-item-label\">{{ t('MoveLeft') }}</span>\n            </button>\n            <button\n              type=\"button\"\n              role=\"menuitem\"\n              class=\"column-menu-item\"\n              data-testid=\"column-menu-right\"\n              [disabled]=\"!menuColumn || !canMoveColumn(menuColumn, 1)\"\n              (click)=\"moveMenuColumn(1)\"\n            >\n              <i class=\"pi pi-arrow-right\"></i>\n              <span class=\"column-menu-item-label\">{{ t('MoveRight') }}</span>\n            </button>\n            <button\n              type=\"button\"\n              role=\"menuitem\"\n              class=\"column-menu-item\"\n              data-testid=\"column-menu-fit\"\n              (click)=\"fitMenuColumn()\"\n            >\n              <i class=\"pi pi-arrows-h\"></i>\n              <span class=\"column-menu-item-label\">{{ t('FitWidth') }}</span>\n            </button>\n            <!-- menuitemcheckbox, not menuitem: this one TOGGLES, and a label reading the same\n                 in both states leaves the operator to find out by clicking \u2014 which on a wide\n                 column means re-laying the grid out to learn what it was already set to. The\n                 check is the state; the label stays put, which is what the role is for.\n                 Disabled for an editable column: its cell holds an input, not clamped text, so\n                 the toggle could only persist a preference that changes nothing. -->\n            <button\n              type=\"button\"\n              role=\"menuitemcheckbox\"\n              class=\"column-menu-item\"\n              data-testid=\"column-menu-wrap\"\n              [disabled]=\"!menuColumn || menuColumn.editable === true\"\n              [attr.aria-checked]=\"isMenuColumnWrapped\"\n              (click)=\"toggleWrapForMenuColumn()\"\n            >\n              <i class=\"pi pi-align-left\"></i>\n              <span class=\"column-menu-item-label\">{{ t('WrapText') }}</span>\n              <i *ngIf=\"isMenuColumnWrapped\" class=\"pi pi-check\"></i>\n            </button>\n          </div>\n        </p-popover>\n\n        <div class=\"table-views\" *ngIf=\"views?.length\" role=\"tablist\">\n          <button\n            *ngFor=\"let view of views\"\n            type=\"button\"\n            role=\"tab\"\n            class=\"table-view\"\n            data-testid=\"table-view\"\n            [class.table-view-active]=\"activeViewId === view.id\"\n            [attr.aria-selected]=\"activeViewId === view.id\"\n            (click)=\"selectView(view)\"\n          >\n            {{ view.label }}\n          </button>\n        </div>\n\n        <spiderly-filter-bar\n          *ngIf=\"filters\"\n          [filters]=\"filters\"\n          [totalRecords]=\"totalRecords\"\n          [sort]=\"sortKeys\"\n          [controlTemplates]=\"filterTemplates\"\n          (clearAll)=\"clear(dt)\"\n        ></spiderly-filter-bar>\n      </ng-template>\n      <ng-template pTemplate=\"header\">\n        <tr>\n          <!-- Sized for the checkbox plus the counter beside it, which shows `totalRecords` on a\n               select-all and so reaches five digits on a large table. Not `0rem` (see CLAUDE.md \u2192\n               Column widths), and not routed through getColWidth: this column has no `Column`. -->\n          <th\n            #selectionHeader\n            class=\"frozen-column\"\n            [class.frozen-column-last]=\"isSelectionColumnLastFrozen\"\n            [style.width]=\"selectionColumnWidth\"\n            [style.left]=\"'0'\"\n            *ngIf=\"selectionMode == 'multiple'\"\n          >\n            <div style=\"display: flex; gap: 8px\">\n              <p-checkbox\n                *ngIf=\"showSelectAllCheckbox\"\n                [disabled]=\"readonly\"\n                (onChange)=\"selectAll($event.checked)\"\n                [(ngModel)]=\"fakeIsAllSelected\"\n                [binary]=\"true\"\n              ></p-checkbox>\n              <span class=\"selection-count\">({{ rowsSelectedNumber }})</span>\n            </div>\n          </th>\n          <ng-container *ngFor=\"let col of visibleCols; trackBy: colTrackByFn\">\n            <th\n              #headerCell\n              [pSortableColumn]=\"col.field\"\n              [pSortableColumnDisabled]=\"!isColumnSortable(col)\"\n              [style.width]=\"getColWidth(col)\"\n              [class.frozen-column]=\"isColumnFrozen(col)\"\n              [class.frozen-column-last]=\"isLastFrozenColumn(col)\"\n              [style.left]=\"isColumnFrozen(col) ? frozenColumnOffset() : null\"\n              [attr.draggable]=\"hasLazyLoad && !col.lockVisible ? true : null\"\n              (mousedown)=\"onHeaderMouseDown($event)\"\n              (dragstart)=\"onHeaderDragStart(col, $event)\"\n              (dragover)=\"onHeaderDragOver(col, $event)\"\n              (drop)=\"onHeaderDrop(col, $event)\"\n            >\n              <!-- Ours, not PrimeNG's: enabling [resizableColumns] makes it persist widths by\n                   th:nth-child INDEX into our own stateKey, which slides every stored width onto\n                   the wrong column the first time the chooser hides one (CLAUDE.md -> decision\n                   5). We take the gesture and keep the state. -->\n              <span\n                *ngIf=\"hasLazyLoad && isDataColumn(col)\"\n                class=\"column-resizer\"\n                data-testid=\"column-resizer\"\n                (mousedown)=\"startColumnResize(col, $event, headerCell)\"\n              ></span>\n              <div\n                style=\"\n                  display: flex;\n                  justify-content: space-between;\n                  align-items: center;\n                \"\n              >\n                <span style=\"display: flex; align-items: center; gap: 4px\">\n                  {{ col.name }}\n                  <p-sortIcon\n                    *ngIf=\"isColumnSortable(col)\"\n                    [field]=\"col.field!\"\n                  ></p-sortIcon>\n                  <!-- stopPropagation is load-bearing: the th carries pSortableColumn, so a click\n                       that reaches it sorts the grid. Opening a menu must not reorder the table on\n                       the way. -->\n                  <button\n                    *ngIf=\"hasLazyLoad && isDataColumn(col)\"\n                    type=\"button\"\n                    class=\"column-menu-button\"\n                    data-testid=\"column-menu\"\n                    [attr.aria-label]=\"t('Columns')\"\n                    (click)=\"$event.stopPropagation(); openColumnMenu(col, $event)\"\n                  >\n                    <i class=\"pi pi-chevron-down\"></i>\n                  </button>\n                </span>\n              </div>\n            </th>\n          </ng-container>\n        </tr>\n      </ng-template>\n      <ng-template\n        pTemplate=\"body\"\n        let-rowData\n        let-index=\"rowIndex\"\n        let-editing=\"editing\"\n      >\n        <!-- The cell rendering every column gets unless it projects a spiderlyCellTemplate. Declared\n             once here rather than inside the column loop, and fed the same context the projected\n             template gets, so getRowData is evaluated exactly once per cell either way. -->\n        <ng-template #defaultCell let-col=\"col\" let-displayValue=\"displayValue\">\n          <ng-container *ngIf=\"col.filterType === 'blob'\">\n            <img width=\"45\" [src]=\"displayValue\" alt=\"\" />\n          </ng-container>\n          <ng-container *ngIf=\"col.filterType !== 'blob'\">\n            <span spiderlyOverflowTitle class=\"cell-text\">{{\n              displayValue\n            }}</span>\n          </ng-container>\n        </ng-template>\n        <tr\n          [class.clickable]=\"navigateOnRowClick\"\n          (click)=\"onRowClick(rowData, $event)\"\n        >\n          <!-- row-interactive: a selection gesture must never double as row navigation (onRowClick). -->\n          <td\n            *ngIf=\"selectionMode == 'multiple'\"\n            class=\"selection-cell row-interactive frozen-column\"\n            [class.frozen-column-last]=\"isSelectionColumnLastFrozen\"\n            [style.left]=\"'0'\"\n            (mousedown)=\"onSelectionCellMouseDown($event, rowData[idField])\"\n          >\n            <p-checkbox\n              [disabled]=\"readonly\"\n              (onChange)=\"selectRow(rowData[idField], rowData.index)\"\n              [ngModel]=\"isRowSelected(rowData[idField])\"\n              [binary]=\"true\"\n            ></p-checkbox>\n          </td>\n          <ng-container *ngFor=\"let col of visibleCols; trackBy: colTrackByFn\">\n            <td\n              [style]=\"getStyleForBodyColumn(col)\"\n              [class.clickable]=\"col.onCellClick\"\n              [class.row-interactive]=\"col.onCellClick\"\n              [class.frozen-column]=\"isColumnFrozen(col)\"\n              [class.frozen-column-last]=\"isLastFrozenColumn(col)\"\n              [class.cell-wrap]=\"isColumnWrapped(col)\"\n              [style.left]=\"isColumnFrozen(col) ? frozenColumnOffset() : null\"\n              (click)=\"onCellClick(col, rowData, $event)\"\n              *ngIf=\"!col.editable\"\n            >\n              <!-- getColWidth reserves this column's width from `actions.length`; this gap is\n                   the geometry it reserves for, so changing it belongs in the same edit. -->\n              <div\n                style=\"\n                  display: flex;\n                  align-items: center;\n                  justify-content: center;\n                  gap: 18px;\n                \"\n              >\n                <ng-container\n                  *ngFor=\"let action of col.actions; trackBy: actionTrackByFn\"\n                >\n                  <span\n                    [pTooltip]=\"action.name\"\n                    [class]=\"getClassForAction(action) + ' row-interactive'\"\n                    [style]=\"getStyleForAction(action)\"\n                    (click)=\"getMethodForAction(action, rowData, $event)\"\n                  ></span>\n                </ng-container>\n              </div>\n              <ng-container\n                [ngTemplateOutlet]=\"getCellTemplate(col) ?? defaultCell\"\n                [ngTemplateOutletContext]=\"{\n                  $implicit: rowData,\n                  value: rowData[col.field],\n                  displayValue: getRowData(rowData, col),\n                  col: col\n                }\"\n              ></ng-container>\n            </td>\n            <td\n              *ngIf=\"col.editable\"\n              class=\"row-interactive\"\n              [class.frozen-column]=\"isColumnFrozen(col)\"\n              [class.frozen-column-last]=\"isLastFrozenColumn(col)\"\n              [style.left]=\"isColumnFrozen(col) ? frozenColumnOffset() : null\"\n            >\n              <spiderly-number\n                [control]=\"getFormArrayControlByIndex(col.field, rowData.index)\"\n                [showLabel]=\"false\"\n              ></spiderly-number>\n            </td>\n          </ng-container>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"emptymessage\">\n        <tr>\n          <td\n            [attr.colspan]=\"\n              visibleCols.length + (selectionMode === 'multiple' ? 1 : 0)\n            \"\n          >\n            {{ t(\"NoRecordsFound\") }}\n          </td>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"paginatorleft\">\n        {{ t(\"TotalRecords\") }}: {{ totalRecords }}\n      </ng-template>\n      <ng-template pTemplate=\"paginatorright\">\n        <div style=\"display: flex; justify-content: end; gap: 10px\">\n          <spiderly-button\n            *ngIf=\"showAddButton\"\n            [label]=\"t('AddNew')\"\n            icon=\"pi pi-plus\"\n            (onClick)=\"navigateToDetails(0)\"\n          ></spiderly-button>\n        </div>\n      </ng-template>\n    </p-table>\n    <p-popover #columnChooser>\n      <div class=\"column-chooser\">\n        <label\n          *ngFor=\"let col of chooserCols; trackBy: colTrackByFn\"\n          data-testid=\"column-chooser-option\"\n          class=\"column-chooser-option\"\n        >\n          <p-checkbox\n            [binary]=\"true\"\n            [ngModel]=\"isColumnVisible(col)\"\n            [disabled]=\"!canToggleColumn(col)\"\n            (onChange)=\"toggleColumn(col, $event.checked)\"\n          ></p-checkbox>\n          <span>{{ col.name }}</span>\n        </label>\n        <button\n          type=\"button\"\n          data-testid=\"column-chooser-reset\"\n          class=\"column-chooser-reset\"\n          (click)=\"resetColumnLayout()\"\n        >\n          {{ t('ResetToDefault') }}\n        </button>\n      </div>\n    </p-popover>\n  </div>\n</ng-container>\n", styles: [".table-header{display:flex;justify-content:space-between;align-items:center}@media (max-width: 640px){.table-header{display:flex;flex-direction:column;align-items:start;gap:14px}}.spiderly-table .p-paginator{padding:1rem}@media (min-width: 1400px){.spiderly-table .p-paginator-left-content{position:absolute;padding:14px;left:0}}@media (min-width: 1400px){.spiderly-table .p-paginator-right-content{position:absolute;padding:14px;right:0}}.column-chooser{display:flex;flex-direction:column;gap:8px}.column-chooser-option{display:flex;align-items:center;gap:8px;cursor:pointer}.column-chooser-reset{border:none;background:none;color:inherit;font:inherit;cursor:pointer;padding:0;margin-top:4px;color:var(--p-primary-color);align-self:flex-start;font-size:.875rem}.column-chooser-reset:hover{text-decoration:underline}.column-menu{display:flex;flex-direction:column;min-width:11rem}.column-menu-item{display:flex;align-items:center;gap:8px;border:none;background:none;color:inherit;font:inherit;cursor:pointer;text-align:left;padding:6px 10px;border-radius:var(--p-content-border-radius)}.column-menu-item .column-menu-item-label{flex:1}.column-menu-item:hover:not(:disabled){background:var(--p-content-hover-background)}.column-menu-item:disabled{color:var(--p-text-muted-color);cursor:default}:host .spiderly-table-container{scroll-margin-top:calc(var(--spiderly-viewport-top-inset, 0px) + 1rem)}:host ::ng-deep .clickable{cursor:pointer}:host ::ng-deep td.clickable:hover{text-decoration:underline}:host .column-menu-button{border:none;background:none;color:inherit;font:inherit;cursor:pointer;color:var(--p-text-muted-color);padding:0 2px;opacity:0;font-size:.75rem}:host th:hover .column-menu-button,:host .column-menu-button:focus-visible{opacity:1}:host .table-views{display:flex;flex-wrap:wrap;gap:4px;padding-top:8px}:host .table-view{border:none;background:none;color:inherit;font:inherit;cursor:pointer;color:var(--p-text-muted-color);padding:4px 10px;border-radius:var(--p-content-border-radius)}:host .table-view:hover{background:var(--p-content-hover-background)}:host .table-view-active{color:var(--p-primary-color);font-weight:600;background:var(--p-content-hover-background)}:host .frozen-column{position:sticky;z-index:1}:host td.frozen-column{background:var(--p-datatable-row-background, var(--p-content-background));transition:background-color var(--p-transition-duration, .2s)}:host tr:hover>td.frozen-column{background:var(--p-datatable-row-hover-background, inherit)}:host .frozen-column-last{box-shadow:2px 0 4px -2px #00000026}:host th{position:relative}:host .column-resizer{position:absolute;top:0;right:0;width:8px;height:100%;cursor:col-resize;-webkit-user-select:none;user-select:none}:host .selection-count{font-size:.75rem;color:var(--p-text-muted-color)}:host td.selection-cell{-webkit-user-select:none;user-select:none}:host td.cell-wrap{--spiderly-cell-overflow: visible;--spiderly-cell-white-space: normal}:host .cell-text{display:block;overflow:var(--spiderly-cell-overflow, hidden);text-overflow:ellipsis;white-space:var(--spiderly-cell-white-space, nowrap)}:host ::ng-deep .p-datatable-mask{background:color-mix(in srgb,var(--p-content-background, #ffffff) 65%,transparent);color:var(--p-primary-color, #334155);align-items:flex-start;padding-top:6rem}:host ::ng-deep .p-datatable-thead{position:unset!important}:host ::ng-deep .p-datatable-header{border-radius:6px 6px 0 0}:host ::ng-deep .p-datatable{border-radius:var(--p-content-border-radius);border:1px solid var(--p-datatable-border-color)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: SpiderlyControlsModule }, { kind: "component", type: SpiderlyButtonComponent, selector: "spiderly-button", inputs: ["type"] }, { kind: "component", type: SpiderlyNumberComponent, selector: "spiderly-number", inputs: ["prefix", "showButtons", "decimal", "maxFractionDigits"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i10.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3$3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i8.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$2.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "component", type: SpiderlyFilterBarComponent, selector: "spiderly-filter-bar", inputs: ["filters", "totalRecords", "sort", "controlTemplates"], outputs: ["clearAll"] }, { kind: "directive", type: SpiderlyOverflowTitleDirective, selector: "[spiderlyOverflowTitle]" }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.13", type: SpiderlyDataTableComponent, isStandalone: true, selector: "spiderly-data-table", inputs: { tableTitle: "tableTitle", tableIcon: "tableIcon", items: "items", rows: "rows", rowsPerPageOptions: "rowsPerPageOptions", cols: "cols", filters: "filters", views: "views", showPaginator: "showPaginator", showCardWrapper: "showCardWrapper", readonly: "readonly", idField: "idField", getPaginatedListObservableMethod: "getPaginatedListObservableMethod", exportListToExcelObservableMethod: "exportListToExcelObservableMethod", deleteItemFromTableObservableMethod: "deleteItemFromTableObservableMethod", deleteListFromTableObservableMethod: "deleteListFromTableObservableMethod", newlySelectedItems: "newlySelectedItems", unselectedItems: "unselectedItems", selectionMode: "selectionMode", selectedLazyLoadObservableMethod: "selectedLazyLoadObservableMethod", additionalFilterIdLong: "additionalFilterIdLong", showAddButton: "showAddButton", showExportToExcelButton: "showExportToExcelButton", showReloadTableButton: "showReloadTableButton", getFormArrayItems: "getFormArrayItems", hasLazyLoad: "hasLazyLoad", stateKey: "stateKey", stateStorage: "stateStorage", defaultSortField: "defaultSortField", defaultSortOrder: "defaultSortOrder", getAlreadySelectedItemIds: "getAlreadySelectedItemIds", getAlreadySelectedItems: "getAlreadySelectedItems", getFormControl: "getFormControl", additionalIndexes: "additionalIndexes", navigateOnRowClick: "navigateOnRowClick", rowNavigationPath: "rowNavigationPath" }, outputs: { onTotalRecordsChange: "onTotalRecordsChange", onLazyLoad: "onLazyLoad", onIsAllSelectedChange: "onIsAllSelectedChange", onRowSelect: "onRowSelect", onRowUnselect: "onRowUnselect" }, queries: [{ propertyName: "actionsTemplate", first: true, predicate: SpiderlyDataTableActionsDirective, descendants: true, read: TemplateRef }, { propertyName: "cellTemplates", predicate: SpiderlyCellTemplateDirective }, { propertyName: "filterTemplates", predicate: SpiderlyFilterTemplateDirective }], viewQueries: [{ propertyName: "columnMenu", first: true, predicate: ["columnMenu"], descendants: true, isSignal: true }, { propertyName: "filterBar", first: true, predicate: SpiderlyFilterBarComponent, descendants: true, isSignal: true }, { propertyName: "selectionHeader", first: true, predicate: ["selectionHeader"], descendants: true, isSignal: true }, { propertyName: "table", first: true, predicate: ["dt"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  <div\n    #tableContainer\n    class=\"spiderly-table-container\"\n    [attr.aria-busy]=\"isPending\"\n    [ngClass]=\"{\n      'card responsive-card-padding overflow-auto': showCardWrapper\n    }\"\n  >\n    <p-table\n      #dt\n      [value]=\"items\"\n      [rows]=\"rows\"\n      [rowsPerPageOptions]=\"rowsPerPageOptions\"\n      [rowHover]=\"true\"\n      [paginator]=\"showPaginator\"\n      responsiveLayout=\"scroll\"\n      [lazy]=\"hasLazyLoad\"\n      (onLazyLoad)=\"lazyLoad($event)\"\n      (onPage)=\"onPageChange(tableContainer)\"\n      [totalRecords]=\"totalRecords\"\n      class=\"spiderly-table\"\n      [loading]=\"isPending\"\n      [selectionMode]=\"selectionMode\"\n      dataKey=\"id\"\n      sortMode=\"multiple\"\n      [multiSortMeta]=\"initialMultiSortMeta\"\n      [stateKey]=\"resolvedStateKey\"\n      [stateStorage]=\"stateStorage\"\n      [tableStyle]=\"tableStyle\"\n    >\n      <ng-template pTemplate=\"caption\">\n        <div class=\"table-header overflow-auto\">\n          <div style=\"display: flex; align-items: center; gap: 8px\">\n            <i class=\"{{ tableIcon }}\" style=\"font-size: 20px\"></i>\n            <div style=\"margin: 0px; font-size: 17.5px\">{{ tableTitle }}</div>\n          </div>\n          <div style=\"display: flex; gap: 8px\">\n            <ng-container\n              *ngIf=\"actionsTemplate\"\n              [ngTemplateOutlet]=\"actionsTemplate\"\n            ></ng-container>\n            <button\n              pButton\n              *ngIf=\"hasLazyLoad\"\n              data-testid=\"column-chooser-button\"\n              [label]=\"t('Columns')\"\n              class=\"p-button-outlined\"\n              style=\"flex: none\"\n              icon=\"pi pi-sliders-h\"\n              (click)=\"columnChooser.toggle($event)\"\n            ></button>\n            <button\n              pButton\n              *ngIf=\"showExportToExcelButton\"\n              [label]=\"t('ExportToExcel')\"\n              class=\"p-button-outlined\"\n              style=\"flex: none\"\n              icon=\"pi pi-download\"\n              (click)=\"exportListToExcel()\"\n            ></button>\n            <button\n              pButton\n              *ngIf=\"showReloadTableButton\"\n              [label]=\"t('Reload')\"\n              class=\"p-button-outlined\"\n              style=\"flex: none\"\n              icon=\"pi pi-refresh\"\n              (click)=\"reload()\"\n            ></button>\n            <button\n              pButton\n              *ngIf=\"deleteListFromTableObservableMethod && rowsSelectedNumber > 0\"\n              [label]=\"t('DeleteSelected') + ' (' + rowsSelectedNumber + ')'\"\n              class=\"p-button-danger\"\n              style=\"flex: none\"\n              icon=\"pi pi-trash\"\n              (click)=\"deleteSelectedObjects()\"\n            ></button>\n          </div>\n        </div>\n        <!-- ONE menu for every column, with the target held in `menuColumn`. Rendering its items\n             inside an @if keyed on the column would put them inside the popover's projected\n             content, and PrimeNG does not re-project content an @if has destroyed \u2014 the filter\n             bar's editor lost a whole afternoon to exactly that. -->\n        <p-popover #columnMenu>\n          <div class=\"column-menu\" role=\"menu\">\n            <button\n              type=\"button\"\n              role=\"menuitem\"\n              class=\"column-menu-item\"\n              data-testid=\"column-menu-hide\"\n              [disabled]=\"!menuColumn || !canToggleColumn(menuColumn)\"\n              (click)=\"hideMenuColumn()\"\n            >\n              <i class=\"pi pi-eye-slash\"></i>\n              <span class=\"column-menu-item-label\">{{ t('HideColumn') }}</span>\n            </button>\n            <button\n              type=\"button\"\n              role=\"menuitem\"\n              class=\"column-menu-item\"\n              data-testid=\"column-menu-filter\"\n              [disabled]=\"!menuColumn || !canFilterColumn(menuColumn)\"\n              (click)=\"filterMenuColumn()\"\n            >\n              <i class=\"pi pi-filter\"></i>\n              <span class=\"column-menu-item-label\">{{ t('Filter') }}\u2026</span>\n            </button>\n            <button\n              type=\"button\"\n              role=\"menuitem\"\n              class=\"column-menu-item\"\n              data-testid=\"column-menu-sort-asc\"\n              [disabled]=\"!menuColumn || !isColumnSortable(menuColumn)\"\n              (click)=\"sortMenuColumn(1)\"\n            >\n              <i class=\"pi pi-sort-amount-up-alt\"></i>\n              <span class=\"column-menu-item-label\">{{ t('SortAscending') }}</span>\n            </button>\n            <button\n              type=\"button\"\n              role=\"menuitem\"\n              class=\"column-menu-item\"\n              data-testid=\"column-menu-sort-desc\"\n              [disabled]=\"!menuColumn || !isColumnSortable(menuColumn)\"\n              (click)=\"sortMenuColumn(-1)\"\n            >\n              <i class=\"pi pi-sort-amount-down\"></i>\n              <span class=\"column-menu-item-label\">{{ t('SortDescending') }}</span>\n            </button>\n            <button\n              type=\"button\"\n              role=\"menuitem\"\n              class=\"column-menu-item\"\n              data-testid=\"column-menu-left\"\n              [disabled]=\"!menuColumn || !canMoveColumn(menuColumn, -1)\"\n              (click)=\"moveMenuColumn(-1)\"\n            >\n              <i class=\"pi pi-arrow-left\"></i>\n              <span class=\"column-menu-item-label\">{{ t('MoveLeft') }}</span>\n            </button>\n            <button\n              type=\"button\"\n              role=\"menuitem\"\n              class=\"column-menu-item\"\n              data-testid=\"column-menu-right\"\n              [disabled]=\"!menuColumn || !canMoveColumn(menuColumn, 1)\"\n              (click)=\"moveMenuColumn(1)\"\n            >\n              <i class=\"pi pi-arrow-right\"></i>\n              <span class=\"column-menu-item-label\">{{ t('MoveRight') }}</span>\n            </button>\n            <button\n              type=\"button\"\n              role=\"menuitem\"\n              class=\"column-menu-item\"\n              data-testid=\"column-menu-fit\"\n              (click)=\"fitMenuColumn()\"\n            >\n              <i class=\"pi pi-arrows-h\"></i>\n              <span class=\"column-menu-item-label\">{{ t('FitWidth') }}</span>\n            </button>\n            <!-- menuitemcheckbox, not menuitem: this one TOGGLES, and a label reading the same\n                 in both states leaves the operator to find out by clicking \u2014 which on a wide\n                 column means re-laying the grid out to learn what it was already set to. The\n                 check is the state; the label stays put, which is what the role is for.\n                 Disabled for an editable column: its cell holds an input, not clamped text, so\n                 the toggle could only persist a preference that changes nothing. -->\n            <button\n              type=\"button\"\n              role=\"menuitemcheckbox\"\n              class=\"column-menu-item\"\n              data-testid=\"column-menu-wrap\"\n              [disabled]=\"!menuColumn || menuColumn.editable === true\"\n              [attr.aria-checked]=\"isMenuColumnWrapped\"\n              (click)=\"toggleWrapForMenuColumn()\"\n            >\n              <i class=\"pi pi-align-left\"></i>\n              <span class=\"column-menu-item-label\">{{ t('WrapText') }}</span>\n              <i *ngIf=\"isMenuColumnWrapped\" class=\"pi pi-check\"></i>\n            </button>\n          </div>\n        </p-popover>\n\n        <div class=\"table-views\" *ngIf=\"views?.length\" role=\"tablist\">\n          <button\n            *ngFor=\"let view of views\"\n            type=\"button\"\n            role=\"tab\"\n            class=\"table-view\"\n            data-testid=\"table-view\"\n            [class.table-view-active]=\"activeViewId === view.id\"\n            [attr.aria-selected]=\"activeViewId === view.id\"\n            (click)=\"selectView(view)\"\n          >\n            {{ view.label }}\n          </button>\n        </div>\n\n        <spiderly-filter-bar\n          *ngIf=\"filters\"\n          [filters]=\"filters\"\n          [totalRecords]=\"totalRecords\"\n          [sort]=\"sortKeys\"\n          [sortOptions]=\"sortPickOptions\"\n          [sortIsDefault]=\"sortIsDefault\"\n          [controlTemplates]=\"filterTemplates\"\n          (clearAll)=\"clear()\"\n          (sortPick)=\"sortFromBar($event)\"\n          (sortReset)=\"resetSortFromBar()\"\n        ></spiderly-filter-bar>\n      </ng-template>\n      <ng-template pTemplate=\"header\">\n        <tr>\n          <!-- Sized for the checkbox plus the counter beside it, which shows `totalRecords` on a\n               select-all and so reaches five digits on a large table. Not `0rem` (see CLAUDE.md \u2192\n               Column widths), and not routed through getColWidth: this column has no `Column`. -->\n          <th\n            #selectionHeader\n            class=\"frozen-column\"\n            [class.frozen-column-last]=\"isSelectionColumnLastFrozen\"\n            [style.width]=\"selectionColumnWidth\"\n            [style.left]=\"'0'\"\n            *ngIf=\"selectionMode == 'multiple'\"\n          >\n            <div style=\"display: flex; gap: 8px\">\n              <p-checkbox\n                *ngIf=\"showSelectAllCheckbox\"\n                [disabled]=\"readonly\"\n                (onChange)=\"selectAll($event.checked)\"\n                [(ngModel)]=\"fakeIsAllSelected\"\n                [binary]=\"true\"\n              ></p-checkbox>\n              <span class=\"selection-count\">({{ rowsSelectedNumber }})</span>\n            </div>\n          </th>\n          <ng-container *ngFor=\"let col of visibleCols; trackBy: colTrackByFn\">\n            <th\n              #headerCell\n              [pSortableColumn]=\"col.field\"\n              [pSortableColumnDisabled]=\"!isColumnSortable(col)\"\n              [style.width]=\"getColWidth(col)\"\n              [class.frozen-column]=\"isColumnFrozen(col)\"\n              [class.frozen-column-last]=\"isLastFrozenColumn(col)\"\n              [style.left]=\"isColumnFrozen(col) ? frozenColumnOffset() : null\"\n              [attr.draggable]=\"hasLazyLoad && !col.lockVisible ? true : null\"\n              (mousedown)=\"onHeaderMouseDown($event)\"\n              (dragstart)=\"onHeaderDragStart(col, $event)\"\n              (dragover)=\"onHeaderDragOver(col, $event)\"\n              (drop)=\"onHeaderDrop(col, $event)\"\n            >\n              <!-- Ours, not PrimeNG's: enabling [resizableColumns] makes it persist widths by\n                   th:nth-child INDEX into our own stateKey, which slides every stored width onto\n                   the wrong column the first time the chooser hides one (CLAUDE.md -> decision\n                   5). We take the gesture and keep the state. -->\n              <span\n                *ngIf=\"hasLazyLoad && isDataColumn(col)\"\n                class=\"column-resizer\"\n                data-testid=\"column-resizer\"\n                (mousedown)=\"startColumnResize(col, $event, headerCell)\"\n              ></span>\n              <div\n                style=\"\n                  display: flex;\n                  justify-content: space-between;\n                  align-items: center;\n                \"\n              >\n                <span style=\"display: flex; align-items: center; gap: 4px\">\n                  {{ col.name }}\n                  <p-sortIcon\n                    *ngIf=\"isColumnSortable(col)\"\n                    [field]=\"col.field!\"\n                  ></p-sortIcon>\n                  <!-- stopPropagation is load-bearing: the th carries pSortableColumn, so a click\n                       that reaches it sorts the grid. Opening a menu must not reorder the table on\n                       the way. -->\n                  <button\n                    *ngIf=\"hasLazyLoad && isDataColumn(col)\"\n                    type=\"button\"\n                    class=\"column-menu-button\"\n                    data-testid=\"column-menu\"\n                    [attr.aria-label]=\"t('Columns')\"\n                    (click)=\"$event.stopPropagation(); openColumnMenu(col, $event)\"\n                  >\n                    <i class=\"pi pi-chevron-down\"></i>\n                  </button>\n                </span>\n              </div>\n            </th>\n          </ng-container>\n        </tr>\n      </ng-template>\n      <ng-template\n        pTemplate=\"body\"\n        let-rowData\n        let-index=\"rowIndex\"\n        let-editing=\"editing\"\n      >\n        <!-- The cell rendering every column gets unless it projects a spiderlyCellTemplate. Declared\n             once here rather than inside the column loop, and fed the same context the projected\n             template gets, so getRowData is evaluated exactly once per cell either way. -->\n        <ng-template #defaultCell let-col=\"col\" let-displayValue=\"displayValue\">\n          <ng-container *ngIf=\"col.filterType === 'blob'\">\n            <img width=\"45\" [src]=\"displayValue\" alt=\"\" />\n          </ng-container>\n          <ng-container *ngIf=\"col.filterType !== 'blob'\">\n            <span spiderlyOverflowTitle class=\"cell-text\">{{\n              displayValue\n            }}</span>\n          </ng-container>\n        </ng-template>\n        <tr\n          [class.clickable]=\"navigateOnRowClick\"\n          (click)=\"onRowClick(rowData, $event)\"\n        >\n          <!-- row-interactive: a selection gesture must never double as row navigation (onRowClick). -->\n          <td\n            *ngIf=\"selectionMode == 'multiple'\"\n            class=\"selection-cell row-interactive frozen-column\"\n            [class.frozen-column-last]=\"isSelectionColumnLastFrozen\"\n            [style.left]=\"'0'\"\n            (mousedown)=\"onSelectionCellMouseDown($event, rowData[idField])\"\n          >\n            <p-checkbox\n              [disabled]=\"readonly\"\n              (onChange)=\"selectRow(rowData[idField], rowData.index)\"\n              [ngModel]=\"isRowSelected(rowData[idField])\"\n              [binary]=\"true\"\n            ></p-checkbox>\n          </td>\n          <ng-container *ngFor=\"let col of visibleCols; trackBy: colTrackByFn\">\n            <td\n              [style]=\"getStyleForBodyColumn(col)\"\n              [class.clickable]=\"col.onCellClick\"\n              [class.row-interactive]=\"col.onCellClick\"\n              [class.frozen-column]=\"isColumnFrozen(col)\"\n              [class.frozen-column-last]=\"isLastFrozenColumn(col)\"\n              [class.cell-wrap]=\"isColumnWrapped(col)\"\n              [style.left]=\"isColumnFrozen(col) ? frozenColumnOffset() : null\"\n              (click)=\"onCellClick(col, rowData, $event)\"\n              *ngIf=\"!col.editable\"\n            >\n              <!-- getColWidth reserves this column's width from `actions.length`; this gap is\n                   the geometry it reserves for, so changing it belongs in the same edit. -->\n              <div\n                style=\"\n                  display: flex;\n                  align-items: center;\n                  justify-content: center;\n                  gap: 18px;\n                \"\n              >\n                <ng-container\n                  *ngFor=\"let action of col.actions; trackBy: actionTrackByFn\"\n                >\n                  <span\n                    [pTooltip]=\"action.name\"\n                    [class]=\"getClassForAction(action) + ' row-interactive'\"\n                    [style]=\"getStyleForAction(action)\"\n                    (click)=\"getMethodForAction(action, rowData, $event)\"\n                  ></span>\n                </ng-container>\n              </div>\n              <ng-container\n                [ngTemplateOutlet]=\"getCellTemplate(col) ?? defaultCell\"\n                [ngTemplateOutletContext]=\"{\n                  $implicit: rowData,\n                  value: rowData[col.field],\n                  displayValue: getRowData(rowData, col),\n                  col: col\n                }\"\n              ></ng-container>\n            </td>\n            <td\n              *ngIf=\"col.editable\"\n              class=\"row-interactive\"\n              [class.frozen-column]=\"isColumnFrozen(col)\"\n              [class.frozen-column-last]=\"isLastFrozenColumn(col)\"\n              [style.left]=\"isColumnFrozen(col) ? frozenColumnOffset() : null\"\n            >\n              <spiderly-number\n                [control]=\"getFormArrayControlByIndex(col.field, rowData.index)\"\n                [showLabel]=\"false\"\n              ></spiderly-number>\n            </td>\n          </ng-container>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"emptymessage\">\n        <tr>\n          <td\n            [attr.colspan]=\"\n              visibleCols.length + (selectionMode === 'multiple' ? 1 : 0)\n            \"\n          >\n            {{ t(\"NoRecordsFound\") }}\n          </td>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"paginatorleft\">\n        {{ t(\"TotalRecords\") }}: {{ totalRecords }}\n      </ng-template>\n      <ng-template pTemplate=\"paginatorright\">\n        <div style=\"display: flex; justify-content: end; gap: 10px\">\n          <spiderly-button\n            *ngIf=\"showAddButton\"\n            [label]=\"t('AddNew')\"\n            icon=\"pi pi-plus\"\n            (onClick)=\"navigateToDetails(0)\"\n          ></spiderly-button>\n        </div>\n      </ng-template>\n    </p-table>\n    <p-popover #columnChooser>\n      <div class=\"column-chooser\">\n        <label\n          *ngFor=\"let col of chooserCols; trackBy: colTrackByFn\"\n          data-testid=\"column-chooser-option\"\n          class=\"column-chooser-option\"\n        >\n          <p-checkbox\n            [binary]=\"true\"\n            [ngModel]=\"isColumnVisible(col)\"\n            [disabled]=\"!canToggleColumn(col)\"\n            (onChange)=\"toggleColumn(col, $event.checked)\"\n          ></p-checkbox>\n          <span>{{ col.name }}</span>\n        </label>\n        <button\n          type=\"button\"\n          data-testid=\"column-chooser-reset\"\n          class=\"column-chooser-reset\"\n          (click)=\"resetColumnLayout()\"\n        >\n          {{ t('ResetToDefault') }}\n        </button>\n      </div>\n    </p-popover>\n  </div>\n</ng-container>\n", styles: [".table-header{display:flex;justify-content:space-between;align-items:center}@media (max-width: 640px){.table-header{display:flex;flex-direction:column;align-items:start;gap:14px}}.spiderly-table .p-paginator{padding:1rem}@media (min-width: 1400px){.spiderly-table .p-paginator-left-content{position:absolute;padding:14px;left:0}}@media (min-width: 1400px){.spiderly-table .p-paginator-right-content{position:absolute;padding:14px;right:0}}.column-chooser{display:flex;flex-direction:column;gap:8px}.column-chooser-option{display:flex;align-items:center;gap:8px;cursor:pointer}.column-chooser-reset{border:none;background:none;color:inherit;font:inherit;cursor:pointer;padding:0;margin-top:4px;color:var(--p-primary-color);align-self:flex-start;font-size:.875rem}.column-chooser-reset:hover{text-decoration:underline}.column-menu{display:flex;flex-direction:column;min-width:11rem}.column-menu-item{display:flex;align-items:center;gap:8px;border:none;background:none;color:inherit;font:inherit;cursor:pointer;text-align:left;padding:6px 10px;border-radius:var(--p-content-border-radius)}.column-menu-item .column-menu-item-label{flex:1}.column-menu-item:hover:not(:disabled){background:var(--p-content-hover-background)}.column-menu-item:disabled{color:var(--p-text-muted-color);cursor:default}:host .spiderly-table-container{scroll-margin-top:calc(var(--spiderly-viewport-top-inset, 0px) + 1rem)}:host ::ng-deep .clickable{cursor:pointer}:host ::ng-deep td.clickable:hover{text-decoration:underline}:host .column-menu-button{border:none;background:none;color:inherit;font:inherit;cursor:pointer;color:var(--p-text-muted-color);padding:0 2px;opacity:0;font-size:.75rem}:host th:hover .column-menu-button,:host .column-menu-button:focus-visible{opacity:1}:host .table-views{display:flex;flex-wrap:wrap;gap:4px;padding-top:8px}:host .table-view{border:none;background:none;color:inherit;font:inherit;cursor:pointer;color:var(--p-text-muted-color);padding:4px 10px;border-radius:var(--p-content-border-radius)}:host .table-view:hover{background:var(--p-content-hover-background)}:host .table-view-active{color:var(--p-primary-color);font-weight:600;background:var(--p-content-hover-background)}:host .frozen-column{position:sticky;z-index:1}:host td.frozen-column{background:var(--p-datatable-row-background, var(--p-content-background));transition:background-color var(--p-transition-duration, .2s)}:host tr:hover>td.frozen-column{background:var(--p-datatable-row-hover-background, inherit)}:host .frozen-column-last{box-shadow:2px 0 4px -2px #00000026}:host th{position:relative}:host .column-resizer{position:absolute;top:0;right:0;width:8px;height:100%;cursor:col-resize;-webkit-user-select:none;user-select:none}:host .selection-count{font-size:.75rem;color:var(--p-text-muted-color)}:host td.selection-cell{-webkit-user-select:none;user-select:none}:host td.cell-wrap{--spiderly-cell-overflow: visible;--spiderly-cell-white-space: normal}:host .cell-text{display:block;overflow:var(--spiderly-cell-overflow, hidden);text-overflow:ellipsis;white-space:var(--spiderly-cell-white-space, nowrap)}:host ::ng-deep .p-datatable-mask{background:color-mix(in srgb,var(--p-content-background, #ffffff) 65%,transparent);color:var(--p-primary-color, #334155);align-items:flex-start;padding-top:6rem}:host ::ng-deep .p-datatable-thead{position:unset!important}:host ::ng-deep .p-datatable-header{border-radius:6px 6px 0 0}:host ::ng-deep .p-datatable{border-radius:var(--p-content-border-radius);border:1px solid var(--p-datatable-border-color)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: SpiderlyControlsModule }, { kind: "component", type: SpiderlyButtonComponent, selector: "spiderly-button", inputs: ["type"] }, { kind: "component", type: SpiderlyNumberComponent, selector: "spiderly-number", inputs: ["prefix", "showButtons", "decimal", "maxFractionDigits"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i10.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i10.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i10.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i3$3.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i8.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: CheckboxModule }, { kind: "component", type: i4$2.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "size", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "component", type: SpiderlyFilterBarComponent, selector: "spiderly-filter-bar", inputs: ["filters", "totalRecords", "sort", "sortOptions", "sortIsDefault", "controlTemplates"], outputs: ["clearAll", "sortPick", "sortReset"] }, { kind: "directive", type: SpiderlyOverflowTitleDirective, selector: "[spiderlyOverflowTitle]" }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyDataTableComponent, decorators: [{
             type: Component,
@@ -6570,7 +6802,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
                         SpiderlyFilterBarComponent,
                         SpiderlyOverflowTitleDirective,
                         TooltipModule,
-                    ], template: "<ng-container *transloco=\"let t\">\n  <div\n    #tableContainer\n    class=\"spiderly-table-container\"\n    [attr.aria-busy]=\"isPending\"\n    [ngClass]=\"{\n      'card responsive-card-padding overflow-auto': showCardWrapper\n    }\"\n  >\n    <p-table\n      #dt\n      [value]=\"items\"\n      [rows]=\"rows\"\n      [rowsPerPageOptions]=\"rowsPerPageOptions\"\n      [rowHover]=\"true\"\n      [paginator]=\"showPaginator\"\n      responsiveLayout=\"scroll\"\n      [lazy]=\"hasLazyLoad\"\n      (onLazyLoad)=\"lazyLoad($event)\"\n      (onPage)=\"onPageChange(tableContainer)\"\n      [totalRecords]=\"totalRecords\"\n      class=\"spiderly-table\"\n      [loading]=\"isPending\"\n      [selectionMode]=\"selectionMode\"\n      dataKey=\"id\"\n      sortMode=\"multiple\"\n      [multiSortMeta]=\"initialMultiSortMeta\"\n      [stateKey]=\"resolvedStateKey\"\n      [stateStorage]=\"stateStorage\"\n      [tableStyle]=\"tableStyle\"\n    >\n      <ng-template pTemplate=\"caption\">\n        <div class=\"table-header overflow-auto\">\n          <div style=\"display: flex; align-items: center; gap: 8px\">\n            <i class=\"{{ tableIcon }}\" style=\"font-size: 20px\"></i>\n            <div style=\"margin: 0px; font-size: 17.5px\">{{ tableTitle }}</div>\n          </div>\n          <div style=\"display: flex; gap: 8px\">\n            <ng-container\n              *ngIf=\"actionsTemplate\"\n              [ngTemplateOutlet]=\"actionsTemplate\"\n            ></ng-container>\n            <button\n              pButton\n              *ngIf=\"hasLazyLoad\"\n              data-testid=\"column-chooser-button\"\n              [label]=\"t('Columns')\"\n              class=\"p-button-outlined\"\n              style=\"flex: none\"\n              icon=\"pi pi-sliders-h\"\n              (click)=\"columnChooser.toggle($event)\"\n            ></button>\n            <button\n              pButton\n              *ngIf=\"showExportToExcelButton\"\n              [label]=\"t('ExportToExcel')\"\n              class=\"p-button-outlined\"\n              style=\"flex: none\"\n              icon=\"pi pi-download\"\n              (click)=\"exportListToExcel()\"\n            ></button>\n            <button\n              pButton\n              *ngIf=\"showReloadTableButton\"\n              [label]=\"t('Reload')\"\n              class=\"p-button-outlined\"\n              style=\"flex: none\"\n              icon=\"pi pi-refresh\"\n              (click)=\"reload()\"\n            ></button>\n            <button\n              pButton\n              *ngIf=\"deleteListFromTableObservableMethod && rowsSelectedNumber > 0\"\n              [label]=\"t('DeleteSelected') + ' (' + rowsSelectedNumber + ')'\"\n              class=\"p-button-danger\"\n              style=\"flex: none\"\n              icon=\"pi pi-trash\"\n              (click)=\"deleteSelectedObjects()\"\n            ></button>\n          </div>\n        </div>\n        <!-- ONE menu for every column, with the target held in `menuColumn`. Rendering its items\n             inside an @if keyed on the column would put them inside the popover's projected\n             content, and PrimeNG does not re-project content an @if has destroyed \u2014 the filter\n             bar's editor lost a whole afternoon to exactly that. -->\n        <p-popover #columnMenu>\n          <div class=\"column-menu\" role=\"menu\">\n            <button\n              type=\"button\"\n              role=\"menuitem\"\n              class=\"column-menu-item\"\n              data-testid=\"column-menu-hide\"\n              [disabled]=\"!menuColumn || !canToggleColumn(menuColumn)\"\n              (click)=\"hideMenuColumn()\"\n            >\n              <i class=\"pi pi-eye-slash\"></i>\n              <span class=\"column-menu-item-label\">{{ t('HideColumn') }}</span>\n            </button>\n            <button\n              type=\"button\"\n              role=\"menuitem\"\n              class=\"column-menu-item\"\n              data-testid=\"column-menu-filter\"\n              [disabled]=\"!menuColumn || !canFilterColumn(menuColumn)\"\n              (click)=\"filterMenuColumn()\"\n            >\n              <i class=\"pi pi-filter\"></i>\n              <span class=\"column-menu-item-label\">{{ t('Filter') }}\u2026</span>\n            </button>\n            <button\n              type=\"button\"\n              role=\"menuitem\"\n              class=\"column-menu-item\"\n              data-testid=\"column-menu-sort-asc\"\n              [disabled]=\"!menuColumn || !isColumnSortable(menuColumn)\"\n              (click)=\"sortMenuColumn(1)\"\n            >\n              <i class=\"pi pi-sort-amount-up-alt\"></i>\n              <span class=\"column-menu-item-label\">{{ t('SortAscending') }}</span>\n            </button>\n            <button\n              type=\"button\"\n              role=\"menuitem\"\n              class=\"column-menu-item\"\n              data-testid=\"column-menu-sort-desc\"\n              [disabled]=\"!menuColumn || !isColumnSortable(menuColumn)\"\n              (click)=\"sortMenuColumn(-1)\"\n            >\n              <i class=\"pi pi-sort-amount-down\"></i>\n              <span class=\"column-menu-item-label\">{{ t('SortDescending') }}</span>\n            </button>\n            <button\n              type=\"button\"\n              role=\"menuitem\"\n              class=\"column-menu-item\"\n              data-testid=\"column-menu-left\"\n              [disabled]=\"!menuColumn || !canMoveColumn(menuColumn, -1)\"\n              (click)=\"moveMenuColumn(-1)\"\n            >\n              <i class=\"pi pi-arrow-left\"></i>\n              <span class=\"column-menu-item-label\">{{ t('MoveLeft') }}</span>\n            </button>\n            <button\n              type=\"button\"\n              role=\"menuitem\"\n              class=\"column-menu-item\"\n              data-testid=\"column-menu-right\"\n              [disabled]=\"!menuColumn || !canMoveColumn(menuColumn, 1)\"\n              (click)=\"moveMenuColumn(1)\"\n            >\n              <i class=\"pi pi-arrow-right\"></i>\n              <span class=\"column-menu-item-label\">{{ t('MoveRight') }}</span>\n            </button>\n            <button\n              type=\"button\"\n              role=\"menuitem\"\n              class=\"column-menu-item\"\n              data-testid=\"column-menu-fit\"\n              (click)=\"fitMenuColumn()\"\n            >\n              <i class=\"pi pi-arrows-h\"></i>\n              <span class=\"column-menu-item-label\">{{ t('FitWidth') }}</span>\n            </button>\n            <!-- menuitemcheckbox, not menuitem: this one TOGGLES, and a label reading the same\n                 in both states leaves the operator to find out by clicking \u2014 which on a wide\n                 column means re-laying the grid out to learn what it was already set to. The\n                 check is the state; the label stays put, which is what the role is for.\n                 Disabled for an editable column: its cell holds an input, not clamped text, so\n                 the toggle could only persist a preference that changes nothing. -->\n            <button\n              type=\"button\"\n              role=\"menuitemcheckbox\"\n              class=\"column-menu-item\"\n              data-testid=\"column-menu-wrap\"\n              [disabled]=\"!menuColumn || menuColumn.editable === true\"\n              [attr.aria-checked]=\"isMenuColumnWrapped\"\n              (click)=\"toggleWrapForMenuColumn()\"\n            >\n              <i class=\"pi pi-align-left\"></i>\n              <span class=\"column-menu-item-label\">{{ t('WrapText') }}</span>\n              <i *ngIf=\"isMenuColumnWrapped\" class=\"pi pi-check\"></i>\n            </button>\n          </div>\n        </p-popover>\n\n        <div class=\"table-views\" *ngIf=\"views?.length\" role=\"tablist\">\n          <button\n            *ngFor=\"let view of views\"\n            type=\"button\"\n            role=\"tab\"\n            class=\"table-view\"\n            data-testid=\"table-view\"\n            [class.table-view-active]=\"activeViewId === view.id\"\n            [attr.aria-selected]=\"activeViewId === view.id\"\n            (click)=\"selectView(view)\"\n          >\n            {{ view.label }}\n          </button>\n        </div>\n\n        <spiderly-filter-bar\n          *ngIf=\"filters\"\n          [filters]=\"filters\"\n          [totalRecords]=\"totalRecords\"\n          [sort]=\"sortKeys\"\n          [controlTemplates]=\"filterTemplates\"\n          (clearAll)=\"clear(dt)\"\n        ></spiderly-filter-bar>\n      </ng-template>\n      <ng-template pTemplate=\"header\">\n        <tr>\n          <!-- Sized for the checkbox plus the counter beside it, which shows `totalRecords` on a\n               select-all and so reaches five digits on a large table. Not `0rem` (see CLAUDE.md \u2192\n               Column widths), and not routed through getColWidth: this column has no `Column`. -->\n          <th\n            #selectionHeader\n            class=\"frozen-column\"\n            [class.frozen-column-last]=\"isSelectionColumnLastFrozen\"\n            [style.width]=\"selectionColumnWidth\"\n            [style.left]=\"'0'\"\n            *ngIf=\"selectionMode == 'multiple'\"\n          >\n            <div style=\"display: flex; gap: 8px\">\n              <p-checkbox\n                *ngIf=\"showSelectAllCheckbox\"\n                [disabled]=\"readonly\"\n                (onChange)=\"selectAll($event.checked)\"\n                [(ngModel)]=\"fakeIsAllSelected\"\n                [binary]=\"true\"\n              ></p-checkbox>\n              <span class=\"selection-count\">({{ rowsSelectedNumber }})</span>\n            </div>\n          </th>\n          <ng-container *ngFor=\"let col of visibleCols; trackBy: colTrackByFn\">\n            <th\n              #headerCell\n              [pSortableColumn]=\"col.field\"\n              [pSortableColumnDisabled]=\"!isColumnSortable(col)\"\n              [style.width]=\"getColWidth(col)\"\n              [class.frozen-column]=\"isColumnFrozen(col)\"\n              [class.frozen-column-last]=\"isLastFrozenColumn(col)\"\n              [style.left]=\"isColumnFrozen(col) ? frozenColumnOffset() : null\"\n              [attr.draggable]=\"hasLazyLoad && !col.lockVisible ? true : null\"\n              (mousedown)=\"onHeaderMouseDown($event)\"\n              (dragstart)=\"onHeaderDragStart(col, $event)\"\n              (dragover)=\"onHeaderDragOver(col, $event)\"\n              (drop)=\"onHeaderDrop(col, $event)\"\n            >\n              <!-- Ours, not PrimeNG's: enabling [resizableColumns] makes it persist widths by\n                   th:nth-child INDEX into our own stateKey, which slides every stored width onto\n                   the wrong column the first time the chooser hides one (CLAUDE.md -> decision\n                   5). We take the gesture and keep the state. -->\n              <span\n                *ngIf=\"hasLazyLoad && isDataColumn(col)\"\n                class=\"column-resizer\"\n                data-testid=\"column-resizer\"\n                (mousedown)=\"startColumnResize(col, $event, headerCell)\"\n              ></span>\n              <div\n                style=\"\n                  display: flex;\n                  justify-content: space-between;\n                  align-items: center;\n                \"\n              >\n                <span style=\"display: flex; align-items: center; gap: 4px\">\n                  {{ col.name }}\n                  <p-sortIcon\n                    *ngIf=\"isColumnSortable(col)\"\n                    [field]=\"col.field!\"\n                  ></p-sortIcon>\n                  <!-- stopPropagation is load-bearing: the th carries pSortableColumn, so a click\n                       that reaches it sorts the grid. Opening a menu must not reorder the table on\n                       the way. -->\n                  <button\n                    *ngIf=\"hasLazyLoad && isDataColumn(col)\"\n                    type=\"button\"\n                    class=\"column-menu-button\"\n                    data-testid=\"column-menu\"\n                    [attr.aria-label]=\"t('Columns')\"\n                    (click)=\"$event.stopPropagation(); openColumnMenu(col, $event)\"\n                  >\n                    <i class=\"pi pi-chevron-down\"></i>\n                  </button>\n                </span>\n              </div>\n            </th>\n          </ng-container>\n        </tr>\n      </ng-template>\n      <ng-template\n        pTemplate=\"body\"\n        let-rowData\n        let-index=\"rowIndex\"\n        let-editing=\"editing\"\n      >\n        <!-- The cell rendering every column gets unless it projects a spiderlyCellTemplate. Declared\n             once here rather than inside the column loop, and fed the same context the projected\n             template gets, so getRowData is evaluated exactly once per cell either way. -->\n        <ng-template #defaultCell let-col=\"col\" let-displayValue=\"displayValue\">\n          <ng-container *ngIf=\"col.filterType === 'blob'\">\n            <img width=\"45\" [src]=\"displayValue\" alt=\"\" />\n          </ng-container>\n          <ng-container *ngIf=\"col.filterType !== 'blob'\">\n            <span spiderlyOverflowTitle class=\"cell-text\">{{\n              displayValue\n            }}</span>\n          </ng-container>\n        </ng-template>\n        <tr\n          [class.clickable]=\"navigateOnRowClick\"\n          (click)=\"onRowClick(rowData, $event)\"\n        >\n          <!-- row-interactive: a selection gesture must never double as row navigation (onRowClick). -->\n          <td\n            *ngIf=\"selectionMode == 'multiple'\"\n            class=\"selection-cell row-interactive frozen-column\"\n            [class.frozen-column-last]=\"isSelectionColumnLastFrozen\"\n            [style.left]=\"'0'\"\n            (mousedown)=\"onSelectionCellMouseDown($event, rowData[idField])\"\n          >\n            <p-checkbox\n              [disabled]=\"readonly\"\n              (onChange)=\"selectRow(rowData[idField], rowData.index)\"\n              [ngModel]=\"isRowSelected(rowData[idField])\"\n              [binary]=\"true\"\n            ></p-checkbox>\n          </td>\n          <ng-container *ngFor=\"let col of visibleCols; trackBy: colTrackByFn\">\n            <td\n              [style]=\"getStyleForBodyColumn(col)\"\n              [class.clickable]=\"col.onCellClick\"\n              [class.row-interactive]=\"col.onCellClick\"\n              [class.frozen-column]=\"isColumnFrozen(col)\"\n              [class.frozen-column-last]=\"isLastFrozenColumn(col)\"\n              [class.cell-wrap]=\"isColumnWrapped(col)\"\n              [style.left]=\"isColumnFrozen(col) ? frozenColumnOffset() : null\"\n              (click)=\"onCellClick(col, rowData, $event)\"\n              *ngIf=\"!col.editable\"\n            >\n              <!-- getColWidth reserves this column's width from `actions.length`; this gap is\n                   the geometry it reserves for, so changing it belongs in the same edit. -->\n              <div\n                style=\"\n                  display: flex;\n                  align-items: center;\n                  justify-content: center;\n                  gap: 18px;\n                \"\n              >\n                <ng-container\n                  *ngFor=\"let action of col.actions; trackBy: actionTrackByFn\"\n                >\n                  <span\n                    [pTooltip]=\"action.name\"\n                    [class]=\"getClassForAction(action) + ' row-interactive'\"\n                    [style]=\"getStyleForAction(action)\"\n                    (click)=\"getMethodForAction(action, rowData, $event)\"\n                  ></span>\n                </ng-container>\n              </div>\n              <ng-container\n                [ngTemplateOutlet]=\"getCellTemplate(col) ?? defaultCell\"\n                [ngTemplateOutletContext]=\"{\n                  $implicit: rowData,\n                  value: rowData[col.field],\n                  displayValue: getRowData(rowData, col),\n                  col: col\n                }\"\n              ></ng-container>\n            </td>\n            <td\n              *ngIf=\"col.editable\"\n              class=\"row-interactive\"\n              [class.frozen-column]=\"isColumnFrozen(col)\"\n              [class.frozen-column-last]=\"isLastFrozenColumn(col)\"\n              [style.left]=\"isColumnFrozen(col) ? frozenColumnOffset() : null\"\n            >\n              <spiderly-number\n                [control]=\"getFormArrayControlByIndex(col.field, rowData.index)\"\n                [showLabel]=\"false\"\n              ></spiderly-number>\n            </td>\n          </ng-container>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"emptymessage\">\n        <tr>\n          <td\n            [attr.colspan]=\"\n              visibleCols.length + (selectionMode === 'multiple' ? 1 : 0)\n            \"\n          >\n            {{ t(\"NoRecordsFound\") }}\n          </td>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"paginatorleft\">\n        {{ t(\"TotalRecords\") }}: {{ totalRecords }}\n      </ng-template>\n      <ng-template pTemplate=\"paginatorright\">\n        <div style=\"display: flex; justify-content: end; gap: 10px\">\n          <spiderly-button\n            *ngIf=\"showAddButton\"\n            [label]=\"t('AddNew')\"\n            icon=\"pi pi-plus\"\n            (onClick)=\"navigateToDetails(0)\"\n          ></spiderly-button>\n        </div>\n      </ng-template>\n    </p-table>\n    <p-popover #columnChooser>\n      <div class=\"column-chooser\">\n        <label\n          *ngFor=\"let col of chooserCols; trackBy: colTrackByFn\"\n          data-testid=\"column-chooser-option\"\n          class=\"column-chooser-option\"\n        >\n          <p-checkbox\n            [binary]=\"true\"\n            [ngModel]=\"isColumnVisible(col)\"\n            [disabled]=\"!canToggleColumn(col)\"\n            (onChange)=\"toggleColumn(col, $event.checked)\"\n          ></p-checkbox>\n          <span>{{ col.name }}</span>\n        </label>\n        <button\n          type=\"button\"\n          data-testid=\"column-chooser-reset\"\n          class=\"column-chooser-reset\"\n          (click)=\"resetColumnLayout()\"\n        >\n          {{ t('ResetToDefault') }}\n        </button>\n      </div>\n    </p-popover>\n  </div>\n</ng-container>\n", styles: [".table-header{display:flex;justify-content:space-between;align-items:center}@media (max-width: 640px){.table-header{display:flex;flex-direction:column;align-items:start;gap:14px}}.spiderly-table .p-paginator{padding:1rem}@media (min-width: 1400px){.spiderly-table .p-paginator-left-content{position:absolute;padding:14px;left:0}}@media (min-width: 1400px){.spiderly-table .p-paginator-right-content{position:absolute;padding:14px;right:0}}.column-chooser{display:flex;flex-direction:column;gap:8px}.column-chooser-option{display:flex;align-items:center;gap:8px;cursor:pointer}.column-chooser-reset{border:none;background:none;color:inherit;font:inherit;cursor:pointer;padding:0;margin-top:4px;color:var(--p-primary-color);align-self:flex-start;font-size:.875rem}.column-chooser-reset:hover{text-decoration:underline}.column-menu{display:flex;flex-direction:column;min-width:11rem}.column-menu-item{display:flex;align-items:center;gap:8px;border:none;background:none;color:inherit;font:inherit;cursor:pointer;text-align:left;padding:6px 10px;border-radius:var(--p-content-border-radius)}.column-menu-item .column-menu-item-label{flex:1}.column-menu-item:hover:not(:disabled){background:var(--p-content-hover-background)}.column-menu-item:disabled{color:var(--p-text-muted-color);cursor:default}:host .spiderly-table-container{scroll-margin-top:calc(var(--spiderly-viewport-top-inset, 0px) + 1rem)}:host ::ng-deep .clickable{cursor:pointer}:host ::ng-deep td.clickable:hover{text-decoration:underline}:host .column-menu-button{border:none;background:none;color:inherit;font:inherit;cursor:pointer;color:var(--p-text-muted-color);padding:0 2px;opacity:0;font-size:.75rem}:host th:hover .column-menu-button,:host .column-menu-button:focus-visible{opacity:1}:host .table-views{display:flex;flex-wrap:wrap;gap:4px;padding-top:8px}:host .table-view{border:none;background:none;color:inherit;font:inherit;cursor:pointer;color:var(--p-text-muted-color);padding:4px 10px;border-radius:var(--p-content-border-radius)}:host .table-view:hover{background:var(--p-content-hover-background)}:host .table-view-active{color:var(--p-primary-color);font-weight:600;background:var(--p-content-hover-background)}:host .frozen-column{position:sticky;z-index:1}:host td.frozen-column{background:var(--p-datatable-row-background, var(--p-content-background));transition:background-color var(--p-transition-duration, .2s)}:host tr:hover>td.frozen-column{background:var(--p-datatable-row-hover-background, inherit)}:host .frozen-column-last{box-shadow:2px 0 4px -2px #00000026}:host th{position:relative}:host .column-resizer{position:absolute;top:0;right:0;width:8px;height:100%;cursor:col-resize;-webkit-user-select:none;user-select:none}:host .selection-count{font-size:.75rem;color:var(--p-text-muted-color)}:host td.selection-cell{-webkit-user-select:none;user-select:none}:host td.cell-wrap{--spiderly-cell-overflow: visible;--spiderly-cell-white-space: normal}:host .cell-text{display:block;overflow:var(--spiderly-cell-overflow, hidden);text-overflow:ellipsis;white-space:var(--spiderly-cell-white-space, nowrap)}:host ::ng-deep .p-datatable-mask{background:color-mix(in srgb,var(--p-content-background, #ffffff) 65%,transparent);color:var(--p-primary-color, #334155);align-items:flex-start;padding-top:6rem}:host ::ng-deep .p-datatable-thead{position:unset!important}:host ::ng-deep .p-datatable-header{border-radius:6px 6px 0 0}:host ::ng-deep .p-datatable{border-radius:var(--p-content-border-radius);border:1px solid var(--p-datatable-border-color)}\n"] }]
+                    ], template: "<ng-container *transloco=\"let t\">\n  <div\n    #tableContainer\n    class=\"spiderly-table-container\"\n    [attr.aria-busy]=\"isPending\"\n    [ngClass]=\"{\n      'card responsive-card-padding overflow-auto': showCardWrapper\n    }\"\n  >\n    <p-table\n      #dt\n      [value]=\"items\"\n      [rows]=\"rows\"\n      [rowsPerPageOptions]=\"rowsPerPageOptions\"\n      [rowHover]=\"true\"\n      [paginator]=\"showPaginator\"\n      responsiveLayout=\"scroll\"\n      [lazy]=\"hasLazyLoad\"\n      (onLazyLoad)=\"lazyLoad($event)\"\n      (onPage)=\"onPageChange(tableContainer)\"\n      [totalRecords]=\"totalRecords\"\n      class=\"spiderly-table\"\n      [loading]=\"isPending\"\n      [selectionMode]=\"selectionMode\"\n      dataKey=\"id\"\n      sortMode=\"multiple\"\n      [multiSortMeta]=\"initialMultiSortMeta\"\n      [stateKey]=\"resolvedStateKey\"\n      [stateStorage]=\"stateStorage\"\n      [tableStyle]=\"tableStyle\"\n    >\n      <ng-template pTemplate=\"caption\">\n        <div class=\"table-header overflow-auto\">\n          <div style=\"display: flex; align-items: center; gap: 8px\">\n            <i class=\"{{ tableIcon }}\" style=\"font-size: 20px\"></i>\n            <div style=\"margin: 0px; font-size: 17.5px\">{{ tableTitle }}</div>\n          </div>\n          <div style=\"display: flex; gap: 8px\">\n            <ng-container\n              *ngIf=\"actionsTemplate\"\n              [ngTemplateOutlet]=\"actionsTemplate\"\n            ></ng-container>\n            <button\n              pButton\n              *ngIf=\"hasLazyLoad\"\n              data-testid=\"column-chooser-button\"\n              [label]=\"t('Columns')\"\n              class=\"p-button-outlined\"\n              style=\"flex: none\"\n              icon=\"pi pi-sliders-h\"\n              (click)=\"columnChooser.toggle($event)\"\n            ></button>\n            <button\n              pButton\n              *ngIf=\"showExportToExcelButton\"\n              [label]=\"t('ExportToExcel')\"\n              class=\"p-button-outlined\"\n              style=\"flex: none\"\n              icon=\"pi pi-download\"\n              (click)=\"exportListToExcel()\"\n            ></button>\n            <button\n              pButton\n              *ngIf=\"showReloadTableButton\"\n              [label]=\"t('Reload')\"\n              class=\"p-button-outlined\"\n              style=\"flex: none\"\n              icon=\"pi pi-refresh\"\n              (click)=\"reload()\"\n            ></button>\n            <button\n              pButton\n              *ngIf=\"deleteListFromTableObservableMethod && rowsSelectedNumber > 0\"\n              [label]=\"t('DeleteSelected') + ' (' + rowsSelectedNumber + ')'\"\n              class=\"p-button-danger\"\n              style=\"flex: none\"\n              icon=\"pi pi-trash\"\n              (click)=\"deleteSelectedObjects()\"\n            ></button>\n          </div>\n        </div>\n        <!-- ONE menu for every column, with the target held in `menuColumn`. Rendering its items\n             inside an @if keyed on the column would put them inside the popover's projected\n             content, and PrimeNG does not re-project content an @if has destroyed \u2014 the filter\n             bar's editor lost a whole afternoon to exactly that. -->\n        <p-popover #columnMenu>\n          <div class=\"column-menu\" role=\"menu\">\n            <button\n              type=\"button\"\n              role=\"menuitem\"\n              class=\"column-menu-item\"\n              data-testid=\"column-menu-hide\"\n              [disabled]=\"!menuColumn || !canToggleColumn(menuColumn)\"\n              (click)=\"hideMenuColumn()\"\n            >\n              <i class=\"pi pi-eye-slash\"></i>\n              <span class=\"column-menu-item-label\">{{ t('HideColumn') }}</span>\n            </button>\n            <button\n              type=\"button\"\n              role=\"menuitem\"\n              class=\"column-menu-item\"\n              data-testid=\"column-menu-filter\"\n              [disabled]=\"!menuColumn || !canFilterColumn(menuColumn)\"\n              (click)=\"filterMenuColumn()\"\n            >\n              <i class=\"pi pi-filter\"></i>\n              <span class=\"column-menu-item-label\">{{ t('Filter') }}\u2026</span>\n            </button>\n            <button\n              type=\"button\"\n              role=\"menuitem\"\n              class=\"column-menu-item\"\n              data-testid=\"column-menu-sort-asc\"\n              [disabled]=\"!menuColumn || !isColumnSortable(menuColumn)\"\n              (click)=\"sortMenuColumn(1)\"\n            >\n              <i class=\"pi pi-sort-amount-up-alt\"></i>\n              <span class=\"column-menu-item-label\">{{ t('SortAscending') }}</span>\n            </button>\n            <button\n              type=\"button\"\n              role=\"menuitem\"\n              class=\"column-menu-item\"\n              data-testid=\"column-menu-sort-desc\"\n              [disabled]=\"!menuColumn || !isColumnSortable(menuColumn)\"\n              (click)=\"sortMenuColumn(-1)\"\n            >\n              <i class=\"pi pi-sort-amount-down\"></i>\n              <span class=\"column-menu-item-label\">{{ t('SortDescending') }}</span>\n            </button>\n            <button\n              type=\"button\"\n              role=\"menuitem\"\n              class=\"column-menu-item\"\n              data-testid=\"column-menu-left\"\n              [disabled]=\"!menuColumn || !canMoveColumn(menuColumn, -1)\"\n              (click)=\"moveMenuColumn(-1)\"\n            >\n              <i class=\"pi pi-arrow-left\"></i>\n              <span class=\"column-menu-item-label\">{{ t('MoveLeft') }}</span>\n            </button>\n            <button\n              type=\"button\"\n              role=\"menuitem\"\n              class=\"column-menu-item\"\n              data-testid=\"column-menu-right\"\n              [disabled]=\"!menuColumn || !canMoveColumn(menuColumn, 1)\"\n              (click)=\"moveMenuColumn(1)\"\n            >\n              <i class=\"pi pi-arrow-right\"></i>\n              <span class=\"column-menu-item-label\">{{ t('MoveRight') }}</span>\n            </button>\n            <button\n              type=\"button\"\n              role=\"menuitem\"\n              class=\"column-menu-item\"\n              data-testid=\"column-menu-fit\"\n              (click)=\"fitMenuColumn()\"\n            >\n              <i class=\"pi pi-arrows-h\"></i>\n              <span class=\"column-menu-item-label\">{{ t('FitWidth') }}</span>\n            </button>\n            <!-- menuitemcheckbox, not menuitem: this one TOGGLES, and a label reading the same\n                 in both states leaves the operator to find out by clicking \u2014 which on a wide\n                 column means re-laying the grid out to learn what it was already set to. The\n                 check is the state; the label stays put, which is what the role is for.\n                 Disabled for an editable column: its cell holds an input, not clamped text, so\n                 the toggle could only persist a preference that changes nothing. -->\n            <button\n              type=\"button\"\n              role=\"menuitemcheckbox\"\n              class=\"column-menu-item\"\n              data-testid=\"column-menu-wrap\"\n              [disabled]=\"!menuColumn || menuColumn.editable === true\"\n              [attr.aria-checked]=\"isMenuColumnWrapped\"\n              (click)=\"toggleWrapForMenuColumn()\"\n            >\n              <i class=\"pi pi-align-left\"></i>\n              <span class=\"column-menu-item-label\">{{ t('WrapText') }}</span>\n              <i *ngIf=\"isMenuColumnWrapped\" class=\"pi pi-check\"></i>\n            </button>\n          </div>\n        </p-popover>\n\n        <div class=\"table-views\" *ngIf=\"views?.length\" role=\"tablist\">\n          <button\n            *ngFor=\"let view of views\"\n            type=\"button\"\n            role=\"tab\"\n            class=\"table-view\"\n            data-testid=\"table-view\"\n            [class.table-view-active]=\"activeViewId === view.id\"\n            [attr.aria-selected]=\"activeViewId === view.id\"\n            (click)=\"selectView(view)\"\n          >\n            {{ view.label }}\n          </button>\n        </div>\n\n        <spiderly-filter-bar\n          *ngIf=\"filters\"\n          [filters]=\"filters\"\n          [totalRecords]=\"totalRecords\"\n          [sort]=\"sortKeys\"\n          [sortOptions]=\"sortPickOptions\"\n          [sortIsDefault]=\"sortIsDefault\"\n          [controlTemplates]=\"filterTemplates\"\n          (clearAll)=\"clear()\"\n          (sortPick)=\"sortFromBar($event)\"\n          (sortReset)=\"resetSortFromBar()\"\n        ></spiderly-filter-bar>\n      </ng-template>\n      <ng-template pTemplate=\"header\">\n        <tr>\n          <!-- Sized for the checkbox plus the counter beside it, which shows `totalRecords` on a\n               select-all and so reaches five digits on a large table. Not `0rem` (see CLAUDE.md \u2192\n               Column widths), and not routed through getColWidth: this column has no `Column`. -->\n          <th\n            #selectionHeader\n            class=\"frozen-column\"\n            [class.frozen-column-last]=\"isSelectionColumnLastFrozen\"\n            [style.width]=\"selectionColumnWidth\"\n            [style.left]=\"'0'\"\n            *ngIf=\"selectionMode == 'multiple'\"\n          >\n            <div style=\"display: flex; gap: 8px\">\n              <p-checkbox\n                *ngIf=\"showSelectAllCheckbox\"\n                [disabled]=\"readonly\"\n                (onChange)=\"selectAll($event.checked)\"\n                [(ngModel)]=\"fakeIsAllSelected\"\n                [binary]=\"true\"\n              ></p-checkbox>\n              <span class=\"selection-count\">({{ rowsSelectedNumber }})</span>\n            </div>\n          </th>\n          <ng-container *ngFor=\"let col of visibleCols; trackBy: colTrackByFn\">\n            <th\n              #headerCell\n              [pSortableColumn]=\"col.field\"\n              [pSortableColumnDisabled]=\"!isColumnSortable(col)\"\n              [style.width]=\"getColWidth(col)\"\n              [class.frozen-column]=\"isColumnFrozen(col)\"\n              [class.frozen-column-last]=\"isLastFrozenColumn(col)\"\n              [style.left]=\"isColumnFrozen(col) ? frozenColumnOffset() : null\"\n              [attr.draggable]=\"hasLazyLoad && !col.lockVisible ? true : null\"\n              (mousedown)=\"onHeaderMouseDown($event)\"\n              (dragstart)=\"onHeaderDragStart(col, $event)\"\n              (dragover)=\"onHeaderDragOver(col, $event)\"\n              (drop)=\"onHeaderDrop(col, $event)\"\n            >\n              <!-- Ours, not PrimeNG's: enabling [resizableColumns] makes it persist widths by\n                   th:nth-child INDEX into our own stateKey, which slides every stored width onto\n                   the wrong column the first time the chooser hides one (CLAUDE.md -> decision\n                   5). We take the gesture and keep the state. -->\n              <span\n                *ngIf=\"hasLazyLoad && isDataColumn(col)\"\n                class=\"column-resizer\"\n                data-testid=\"column-resizer\"\n                (mousedown)=\"startColumnResize(col, $event, headerCell)\"\n              ></span>\n              <div\n                style=\"\n                  display: flex;\n                  justify-content: space-between;\n                  align-items: center;\n                \"\n              >\n                <span style=\"display: flex; align-items: center; gap: 4px\">\n                  {{ col.name }}\n                  <p-sortIcon\n                    *ngIf=\"isColumnSortable(col)\"\n                    [field]=\"col.field!\"\n                  ></p-sortIcon>\n                  <!-- stopPropagation is load-bearing: the th carries pSortableColumn, so a click\n                       that reaches it sorts the grid. Opening a menu must not reorder the table on\n                       the way. -->\n                  <button\n                    *ngIf=\"hasLazyLoad && isDataColumn(col)\"\n                    type=\"button\"\n                    class=\"column-menu-button\"\n                    data-testid=\"column-menu\"\n                    [attr.aria-label]=\"t('Columns')\"\n                    (click)=\"$event.stopPropagation(); openColumnMenu(col, $event)\"\n                  >\n                    <i class=\"pi pi-chevron-down\"></i>\n                  </button>\n                </span>\n              </div>\n            </th>\n          </ng-container>\n        </tr>\n      </ng-template>\n      <ng-template\n        pTemplate=\"body\"\n        let-rowData\n        let-index=\"rowIndex\"\n        let-editing=\"editing\"\n      >\n        <!-- The cell rendering every column gets unless it projects a spiderlyCellTemplate. Declared\n             once here rather than inside the column loop, and fed the same context the projected\n             template gets, so getRowData is evaluated exactly once per cell either way. -->\n        <ng-template #defaultCell let-col=\"col\" let-displayValue=\"displayValue\">\n          <ng-container *ngIf=\"col.filterType === 'blob'\">\n            <img width=\"45\" [src]=\"displayValue\" alt=\"\" />\n          </ng-container>\n          <ng-container *ngIf=\"col.filterType !== 'blob'\">\n            <span spiderlyOverflowTitle class=\"cell-text\">{{\n              displayValue\n            }}</span>\n          </ng-container>\n        </ng-template>\n        <tr\n          [class.clickable]=\"navigateOnRowClick\"\n          (click)=\"onRowClick(rowData, $event)\"\n        >\n          <!-- row-interactive: a selection gesture must never double as row navigation (onRowClick). -->\n          <td\n            *ngIf=\"selectionMode == 'multiple'\"\n            class=\"selection-cell row-interactive frozen-column\"\n            [class.frozen-column-last]=\"isSelectionColumnLastFrozen\"\n            [style.left]=\"'0'\"\n            (mousedown)=\"onSelectionCellMouseDown($event, rowData[idField])\"\n          >\n            <p-checkbox\n              [disabled]=\"readonly\"\n              (onChange)=\"selectRow(rowData[idField], rowData.index)\"\n              [ngModel]=\"isRowSelected(rowData[idField])\"\n              [binary]=\"true\"\n            ></p-checkbox>\n          </td>\n          <ng-container *ngFor=\"let col of visibleCols; trackBy: colTrackByFn\">\n            <td\n              [style]=\"getStyleForBodyColumn(col)\"\n              [class.clickable]=\"col.onCellClick\"\n              [class.row-interactive]=\"col.onCellClick\"\n              [class.frozen-column]=\"isColumnFrozen(col)\"\n              [class.frozen-column-last]=\"isLastFrozenColumn(col)\"\n              [class.cell-wrap]=\"isColumnWrapped(col)\"\n              [style.left]=\"isColumnFrozen(col) ? frozenColumnOffset() : null\"\n              (click)=\"onCellClick(col, rowData, $event)\"\n              *ngIf=\"!col.editable\"\n            >\n              <!-- getColWidth reserves this column's width from `actions.length`; this gap is\n                   the geometry it reserves for, so changing it belongs in the same edit. -->\n              <div\n                style=\"\n                  display: flex;\n                  align-items: center;\n                  justify-content: center;\n                  gap: 18px;\n                \"\n              >\n                <ng-container\n                  *ngFor=\"let action of col.actions; trackBy: actionTrackByFn\"\n                >\n                  <span\n                    [pTooltip]=\"action.name\"\n                    [class]=\"getClassForAction(action) + ' row-interactive'\"\n                    [style]=\"getStyleForAction(action)\"\n                    (click)=\"getMethodForAction(action, rowData, $event)\"\n                  ></span>\n                </ng-container>\n              </div>\n              <ng-container\n                [ngTemplateOutlet]=\"getCellTemplate(col) ?? defaultCell\"\n                [ngTemplateOutletContext]=\"{\n                  $implicit: rowData,\n                  value: rowData[col.field],\n                  displayValue: getRowData(rowData, col),\n                  col: col\n                }\"\n              ></ng-container>\n            </td>\n            <td\n              *ngIf=\"col.editable\"\n              class=\"row-interactive\"\n              [class.frozen-column]=\"isColumnFrozen(col)\"\n              [class.frozen-column-last]=\"isLastFrozenColumn(col)\"\n              [style.left]=\"isColumnFrozen(col) ? frozenColumnOffset() : null\"\n            >\n              <spiderly-number\n                [control]=\"getFormArrayControlByIndex(col.field, rowData.index)\"\n                [showLabel]=\"false\"\n              ></spiderly-number>\n            </td>\n          </ng-container>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"emptymessage\">\n        <tr>\n          <td\n            [attr.colspan]=\"\n              visibleCols.length + (selectionMode === 'multiple' ? 1 : 0)\n            \"\n          >\n            {{ t(\"NoRecordsFound\") }}\n          </td>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"paginatorleft\">\n        {{ t(\"TotalRecords\") }}: {{ totalRecords }}\n      </ng-template>\n      <ng-template pTemplate=\"paginatorright\">\n        <div style=\"display: flex; justify-content: end; gap: 10px\">\n          <spiderly-button\n            *ngIf=\"showAddButton\"\n            [label]=\"t('AddNew')\"\n            icon=\"pi pi-plus\"\n            (onClick)=\"navigateToDetails(0)\"\n          ></spiderly-button>\n        </div>\n      </ng-template>\n    </p-table>\n    <p-popover #columnChooser>\n      <div class=\"column-chooser\">\n        <label\n          *ngFor=\"let col of chooserCols; trackBy: colTrackByFn\"\n          data-testid=\"column-chooser-option\"\n          class=\"column-chooser-option\"\n        >\n          <p-checkbox\n            [binary]=\"true\"\n            [ngModel]=\"isColumnVisible(col)\"\n            [disabled]=\"!canToggleColumn(col)\"\n            (onChange)=\"toggleColumn(col, $event.checked)\"\n          ></p-checkbox>\n          <span>{{ col.name }}</span>\n        </label>\n        <button\n          type=\"button\"\n          data-testid=\"column-chooser-reset\"\n          class=\"column-chooser-reset\"\n          (click)=\"resetColumnLayout()\"\n        >\n          {{ t('ResetToDefault') }}\n        </button>\n      </div>\n    </p-popover>\n  </div>\n</ng-container>\n", styles: [".table-header{display:flex;justify-content:space-between;align-items:center}@media (max-width: 640px){.table-header{display:flex;flex-direction:column;align-items:start;gap:14px}}.spiderly-table .p-paginator{padding:1rem}@media (min-width: 1400px){.spiderly-table .p-paginator-left-content{position:absolute;padding:14px;left:0}}@media (min-width: 1400px){.spiderly-table .p-paginator-right-content{position:absolute;padding:14px;right:0}}.column-chooser{display:flex;flex-direction:column;gap:8px}.column-chooser-option{display:flex;align-items:center;gap:8px;cursor:pointer}.column-chooser-reset{border:none;background:none;color:inherit;font:inherit;cursor:pointer;padding:0;margin-top:4px;color:var(--p-primary-color);align-self:flex-start;font-size:.875rem}.column-chooser-reset:hover{text-decoration:underline}.column-menu{display:flex;flex-direction:column;min-width:11rem}.column-menu-item{display:flex;align-items:center;gap:8px;border:none;background:none;color:inherit;font:inherit;cursor:pointer;text-align:left;padding:6px 10px;border-radius:var(--p-content-border-radius)}.column-menu-item .column-menu-item-label{flex:1}.column-menu-item:hover:not(:disabled){background:var(--p-content-hover-background)}.column-menu-item:disabled{color:var(--p-text-muted-color);cursor:default}:host .spiderly-table-container{scroll-margin-top:calc(var(--spiderly-viewport-top-inset, 0px) + 1rem)}:host ::ng-deep .clickable{cursor:pointer}:host ::ng-deep td.clickable:hover{text-decoration:underline}:host .column-menu-button{border:none;background:none;color:inherit;font:inherit;cursor:pointer;color:var(--p-text-muted-color);padding:0 2px;opacity:0;font-size:.75rem}:host th:hover .column-menu-button,:host .column-menu-button:focus-visible{opacity:1}:host .table-views{display:flex;flex-wrap:wrap;gap:4px;padding-top:8px}:host .table-view{border:none;background:none;color:inherit;font:inherit;cursor:pointer;color:var(--p-text-muted-color);padding:4px 10px;border-radius:var(--p-content-border-radius)}:host .table-view:hover{background:var(--p-content-hover-background)}:host .table-view-active{color:var(--p-primary-color);font-weight:600;background:var(--p-content-hover-background)}:host .frozen-column{position:sticky;z-index:1}:host td.frozen-column{background:var(--p-datatable-row-background, var(--p-content-background));transition:background-color var(--p-transition-duration, .2s)}:host tr:hover>td.frozen-column{background:var(--p-datatable-row-hover-background, inherit)}:host .frozen-column-last{box-shadow:2px 0 4px -2px #00000026}:host th{position:relative}:host .column-resizer{position:absolute;top:0;right:0;width:8px;height:100%;cursor:col-resize;-webkit-user-select:none;user-select:none}:host .selection-count{font-size:.75rem;color:var(--p-text-muted-color)}:host td.selection-cell{-webkit-user-select:none;user-select:none}:host td.cell-wrap{--spiderly-cell-overflow: visible;--spiderly-cell-white-space: normal}:host .cell-text{display:block;overflow:var(--spiderly-cell-overflow, hidden);text-overflow:ellipsis;white-space:var(--spiderly-cell-white-space, nowrap)}:host ::ng-deep .p-datatable-mask{background:color-mix(in srgb,var(--p-content-background, #ffffff) 65%,transparent);color:var(--p-primary-color, #334155);align-items:flex-start;padding-top:6rem}:host ::ng-deep .p-datatable-thead{position:unset!important}:host ::ng-deep .p-datatable-header{border-radius:6px 6px 0 0}:host ::ng-deep .p-datatable{border-radius:var(--p-content-border-radius);border:1px solid var(--p-datatable-border-color)}\n"] }]
         }], ctorParameters: () => [{ type: i3$2.Router }, { type: i1$5.DialogService }, { type: i3$2.ActivatedRoute }, { type: SpiderlyMessageService }, { type: i1.TranslocoService }, { type: ConfigServiceBase }, { type: i0.ErrorHandler }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [LOCALE_ID]
@@ -7732,7 +7964,7 @@ const unauthorizedInterceptor = (req, next) => {
     const messageService = inject(SpiderlyMessageService);
     const translocoService = inject(TranslocoService);
     const authService = inject(AuthServiceBase);
-    const reactToError = (err, request) => {
+    const reactToError = (err, request, errorResponse) => {
         // Unconditional, production included, and the only log for a failed request (the global
         // ErrorHandler skips HTTP errors): the toast the user gets is deliberately vague, so this is
         // where a developer reads which request failed and how. See SpiderlyErrorHandler for why
@@ -7740,17 +7972,9 @@ const unauthorizedInterceptor = (req, next) => {
         // HttpErrorResponse on its own stringifies to "[object HttpErrorResponse]" in an error
         // tracker's console breadcrumb; the object still follows, to expand in devtools.
         console.error(`HTTP ${err.status} ${request.method} ${request.url}`, err);
-        // TODO: type this as an ApiError interface (TS mirror of ApiErrorDTO, next to errors/api-error-codes.ts)
-        // so message/errorCode/traceId reads of the cross-language contract are compile-checked, not conventional.
-        let errorResponse = err.error;
-        if (request.responseType !== 'json' && typeof err.error === 'string') {
-            try {
-                errorResponse = JSON.parse(err.error);
-            }
-            catch {
-                errorResponse = null;
-            }
-        }
+        // TODO: type errorResponse as an ApiError interface (TS mirror of ApiErrorDTO, next to
+        // errors/api-error-codes.ts) so message/errorCode/traceId reads of the cross-language contract
+        // are compile-checked, not conventional.
         // ApiErrorDTO.traceId is present only on reportable errors, so this is a no-op everywhere else —
         // the server decides which responses carry a support reference, never this status-code chain.
         const withReference = (detail) => errorResponse?.traceId
@@ -7783,10 +8007,36 @@ const unauthorizedInterceptor = (req, next) => {
             messageService.errorMessage(withReference(translocoService.translate('UnexpectedErrorDetails')), translocoService.translate('UnexpectedErrorTitle'));
         }
     };
-    return next(req).pipe(catchError((err) => {
-        reactToError(err, req);
+    return next(req).pipe(catchError((err) => readErrorBody(err, req).pipe(switchMap((errorResponse) => {
+        reactToError(err, req, errorResponse);
         return throwError(() => err);
-    }));
+    }))));
+};
+/**
+ * The server's ApiErrorDTO, whatever body type the request asked for. Angular hands the ERROR body
+ * back in the requested `responseType` too: a `'text'` request gets the JSON as a string, and a
+ * `'blob'` request (every PDF / Excel download) gets it as a Blob, whose text is only readable
+ * asynchronously — which is why this is an Observable and the toast waits for it. Before the Blob
+ * branch existed, a BusinessException on a download endpoint reached the operator as the generic
+ * "bad request" toast: the sentence the server had spelled out was sitting unread in the Blob.
+ * A body that is not JSON resolves to null, so the status-code fallbacks below still apply.
+ */
+const readErrorBody = (err, request) => {
+    if (err.error instanceof Blob) {
+        return from(err.error.text()).pipe(map$1(parseJsonOrNull), catchError(() => of(null)));
+    }
+    if (request.responseType !== 'json' && typeof err.error === 'string') {
+        return of(parseJsonOrNull(err.error));
+    }
+    return of(err.error);
+};
+const parseJsonOrNull = (text) => {
+    try {
+        return JSON.parse(text);
+    }
+    catch {
+        return null;
+    }
 };
 
 function authInitializer(authService, platformId) {