spiderly 19.12.0 → 19.12.2

package/fesm2022/spiderly.mjs

@@ -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 {
@@ -4754,6 +4925,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
 function rootFontSizePx() {
     return parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
 }
+/** Order matters: `[a, b]` and `[b, a]` ask the server for different orderings. */
+function sortMetaEquals(a, b) {
+    return (a.length === b.length &&
+        a.every((m, i) => m.field === b[i].field && m.order === b[i].order));
+}
 const DEFAULT_COLUMN_WIDTH_REM = {
     text: 12,
     date: 10,
@@ -4852,7 +5028,8 @@ class SpiderlyDataTableComponent {
         /** Paginator page-size choices; merge rules and persistence: CLAUDE.md → "Rows-per-page". */
         this.rowsPerPageOptions = [10, 25, 50, 100];
         /**
-         * The view currently selected. Seeded from the first view in `ngOnInit`, never left null on a
+         * The view currently selected. Seeded from the first view in `ngOnInit` — then overridden by
+         * `restoreActiveView`, so a reload lands where the operator was — and never left null on a
          * table that has views: `viewScope` keys the layout off it, so an unseeded table writes its
          * width and order to the SAME key an unmigrated table uses — orphaned the moment the operator
          * clicks the first tab — and no tab reads as selected until they do.
@@ -4971,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();
@@ -5000,29 +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;
-                return;
             }
-            originalSort(event);
+            else {
+                originalSort(event);
+                // PrimeNG's sort() pages/saves itself; the override slot is ours to record.
+                this.persistActiveViewSort();
+            }
         };
     }
     /**
@@ -5048,12 +5239,21 @@ class SpiderlyDataTableComponent {
             }
         }
     }
-    ngOnChanges() {
+    ngOnChanges(changes) {
         // Only meaningful once ngOnInit has resolved the defaults; before that it is a no-op re-run.
         if (this.rows != null)
             this.mergeActivePageSizesIntoOptions();
+        if (changes['views'])
+            this.adoptStoredView();
     }
     ngOnInit() {
+        // Fail loud, not half-broken: the store commits through the paginated request, and a
+        // client-side (form-array) table has none — armed anyway, the first commit would call the
+        // absent getPaginatedListObservableMethod inside the requery effect and strand the pending
+        // overlay forever. Client-side store predicates are unbuilt (spiderly#407 territory).
+        if (this.filters && !this.hasLazyLoad) {
+            throw new Error('spiderly-data-table: [filters] requires a lazy table — client-side filtering through a store is not implemented. Remove [filters] or make the table lazy.');
+        }
         if (this.rows == null)
             this.rows = this.configService.defaultPageSize;
         this.activeViewId ??= this.views?.[0]?.id ?? null;
@@ -5071,23 +5271,38 @@ class SpiderlyDataTableComponent {
             this.clientLoad();
         }
         this.mergeActivePageSizesIntoOptions();
+        // AFTER `resolvedStateKey` is derived, which is what every restore below keys off — placed
+        // above it they read a null key and silently restore nothing. The view restore runs FIRST,
+        // because the other three read the `viewScope` it decides. And all of it before the effect
+        // is armed, so the first request already carries the filters and the effect's skipped first
+        // run sees the state it will be watching.
+        const restoredView = this.restoreActiveView();
         this.restoreColumnVisibility();
         this.restoreColumnLayout();
-        // AFTER `resolvedStateKey` is derived, which is what both of these key off — placed above it
-        // first, they read a null key and silently restored nothing. And before the effect is armed,
-        // so the first request already carries the filters and the effect's skipped first run sees
-        // the state it will be watching.
-        this.restoreAppliedFilters();
+        this.enterViewFilters(restoredView, 'refresh');
         if (this.filters)
             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. Persisted user sort wins over the declared default; we read it ourselves
-        // because PrimeNG's restoreState() runs on the first [value] change — after the
-        // initial lazy emit has already left.
-        this.initialMultiSortMeta =
-            this.persistedMultiSortMeta() ?? this.defaultMultiSortMeta();
+        // 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.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. */
     static isDataColumn(col) {
@@ -5225,24 +5440,48 @@ class SpiderlyDataTableComponent {
         }
         this.persistColumnVisibility();
         this.refreshVisibleCols();
+        if (!visible)
+            this.dropHiddenColumnSort([col]);
     }
     /**
      * Restores every column to its declared default and forgets the stored overrides — visibility,
      * wrap, order and width alike. It undid visibility only until the header menu shipped three
      * more gestures beside it, and a layout with no way back is worse than one with no knobs.
      *
-     * Hiding — here or from the menu — never touches filters or sort: the chip bar names every
-     * applied filter and the sort chip names the sort, hidden column or not (decision 2b). The
-     * legacy "hidden contributes nothing" apparatus died with the header-filter path.
+     * On a STORE table, hiding — here or from the menu — never touches filters or sort: the chip
+     * bar names every applied filter and the sort chip names the sort, hidden column or not
+     * (decision 2b). A storeless table keeps the sort half of the legacy invariant instead — see
+     * `dropHiddenColumnSort`.
      */
     resetColumnLayout() {
         this.columnWrap = {};
         this.columnOrder = [];
         this.columnWidths = {};
         this.persistColumnLayout();
+        const wasVisible = this.visibleCols.filter(SpiderlyDataTableComponent.isDataColumn);
         this.columnVisibilityOverrides = {};
         this.persistColumnVisibility();
         this.refreshVisibleCols();
+        // Columns the reset just hid follow the same rule as a manual hide.
+        this.dropHiddenColumnSort(wasVisible.filter((col) => !this.isColumnVisible(col)));
+    }
+    /**
+     * The sort half of the legacy "hidden contributes nothing" invariant, kept ONLY for storeless
+     * tables (the generated M2M details grids, until spiderly#407 scaffolds their stores): they
+     * have no sort chip, so a hidden column's sort would order the grid with nothing on screen
+     * naming it and no control left to clear it. The filter half needs no heir — `lazyLoad`
+     * overwrites the outgoing filters unconditionally. On a store table this is a no-op:
+     * decision 2b's chips are the visible surface, hidden column or not.
+     */
+    dropHiddenColumnSort(cols) {
+        if (!this.table || this.filters)
+            return;
+        const sorted = cols.filter((col) => this.table._multiSortMeta?.some((m) => m.field === col.field));
+        if (!sorted.length)
+            return;
+        this.table._multiSortMeta = this.table._multiSortMeta.filter((m) => !sorted.some((col) => col.field === m.field));
+        this.table.tableService.onSort(this.table._multiSortMeta);
+        this.table._filter(); // re-emits the lazy load and saves the cleaned state
     }
     /**
      * Layout keys carry the ACTIVE VIEW, which is what makes a view more than a saved filter: a
@@ -5271,6 +5510,65 @@ class SpiderlyDataTableComponent {
     get filterStorage() {
         return this.stateStorage === 'local' ? localStorage : sessionStorage;
     }
+    /**
+     * Where the active view id lives. Deliberately NOT view-scoped — it is the input `viewScope`
+     * derives from — and it follows `stateStorage` like the filters rather than the layout's
+     * always-local rule, because the id and the filters it scopes are one question: a durable id
+     * over session-scoped filters would restore a tab with nothing under it.
+     */
+    get viewStateKey() {
+        return this.resolvedStateKey ? `${this.resolvedStateKey}:view` : null;
+    }
+    /** Only `selectView` writes; the `ngOnInit` seed does not — absence means "the default". */
+    persistActiveView() {
+        if (!this.viewStateKey || !this.activeViewId)
+            return;
+        writeStoredJson(this.filterStorage, this.viewStateKey, this.activeViewId);
+    }
+    /**
+     * Puts a reload back on the view the operator was using. Every persisted key carries the view
+     * segment, so before this existed the seed decided what got restored: F5 landed on the first
+     * view and read `…:all:filters` — the tab snapped to "Sve" and the bar came back empty while
+     * the operator's filters sat intact under the old view's segment (Filip, on /porudzbine).
+     *
+     * An id naming no current view keeps the seed AND the stored key: "vanished by deploy" and
+     * "not yet arrived" are indistinguishable here (order-list's catalog-licensed "Za pakovanje"
+     * is literally both), so `adoptStoredView` re-reads the key on every `[views]` change and the
+     * key self-heals on the next explicit click.
+     */
+    restoreActiveView() {
+        if (!this.viewStateKey || !this.views?.length)
+            return null;
+        const storedId = readStoredJson(this.filterStorage, this.viewStateKey);
+        if (typeof storedId !== 'string')
+            return null;
+        const view = this.viewById(storedId) ?? null;
+        if (view)
+            this.activeViewId = view.id;
+        return view;
+    }
+    /**
+     * The second half of `restoreActiveView`: a stored view that did not exist at init is adopted
+     * when a later `[views]` change brings it — through `selectView`, so it gets the same
+     * stored-wins/transient/layout/requery semantics a click would have had. There is no parked
+     * copy of the stored id — the key itself is re-read, and because every explicit pick
+     * overwrites it, the operator's own choice wins by construction. Accepted cost of adopting
+     * late instead of holding the first request: a brief flash of the seeded view's rows and a
+     * second request when the late view lands.
+     */
+    adoptStoredView() {
+        if (!this.viewStateKey)
+            return;
+        const storedId = readStoredJson(this.filterStorage, this.viewStateKey);
+        if (typeof storedId !== 'string' || storedId === this.activeViewId)
+            return;
+        const view = this.viewById(storedId);
+        if (view)
+            this.selectView(view);
+    }
+    viewById(id) {
+        return this.views?.find((candidate) => candidate.id === id);
+    }
     persistAppliedFilters() {
         if (!this.filtersStateKey || !this.filters)
             return;
@@ -5282,12 +5580,27 @@ class SpiderlyDataTableComponent {
             writeStoredJson(this.filterStorage, this.filtersStateKey, snapshot);
         }
     }
-    restoreAppliedFilters() {
-        if (!this.filtersStateKey || !this.filters)
+    /**
+     * Applies the right filters for entering `view` — the transient rule's one home. A TRANSIENT
+     * view's `apply` is a function of NOW, so it always re-derives; restoring would put
+     * yesterday's date under a tab claiming "today" (`persistAppliedFilters` has no transient
+     * guard, so storage holds the LAST answer). A non-transient view's own stored answer wins
+     * over its `apply`. The semantics argument is the one deliberate difference between the
+     * callers: a 'click' re-asks the view's question when nothing is stored, a 'refresh' returns
+     * the empty state the operator left — they cleared it, and F5 must give the cleared state
+     * back. On a table with no views, `view` is null and this is a plain restore of the
+     * `persistAppliedFilters` snapshot.
+     */
+    enterViewFilters(view, semantics) {
+        if (!this.filters)
             return;
-        const snapshot = readStoredJson(this.filterStorage, this.filtersStateKey);
-        if (snapshot)
-            this.filters.restore(snapshot);
+        const stored = !view?.transient && this.filtersStateKey
+            ? readStoredJson(this.filterStorage, this.filtersStateKey)
+            : null;
+        if (stored)
+            this.filters.restore(stored);
+        else if (view?.transient || semantics === 'click')
+            view?.apply?.(this.filters);
     }
     get layoutStateKey() {
         return this.resolvedStateKey
@@ -5344,25 +5657,142 @@ class SpiderlyDataTableComponent {
             return null;
         return readStoredJson(this.stateStorage === 'local' ? localStorage : sessionStorage, this.resolvedStateKey);
     }
+    activeView() {
+        return this.activeViewId ? this.viewById(this.activeViewId) : undefined;
+    }
+    /**
+     * Where the operator's per-view sort override lives. Null on a table without views — those
+     * keep the pure PrimeNG sort persistence they always had — and null on a STORELESS table:
+     * there "hidden contributes nothing" retires a hidden column's sort (`dropHiddenColumnSort`)
+     * with no persist call at the hide site, so an override restored blind at the next init
+     * would re-impose a sort no chip can name. Store tables — where every viewed consumer
+     * lives — have the chip. Follows `stateStorage` like the filters and the view id: the sort
+     * is part of the same question they scope.
+     */
+    get viewSortStateKey() {
+        if (!this.views?.length || !this.filters)
+            return null;
+        return this.resolvedStateKey
+            ? `${this.resolvedStateKey}${this.viewScope}:sort`
+            : null;
+    }
+    /** The operator's stored sort for the active view, sanitized like any persisted sort. */
+    persistedViewSort() {
+        if (!this.viewSortStateKey)
+            return null;
+        const stored = readStoredJson(this.filterStorage, this.viewSortStateKey);
+        return Array.isArray(stored) ? this.sanitizedSortMeta(stored) : null;
+    }
+    /**
+     * 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, `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;
+        if (!key)
+            return;
+        const current = this.table._multiSortMeta ?? [];
+        if (sortMetaEquals(current, this.defaultMultiSortMeta() ?? [])) {
+            this.filterStorage.removeItem(key);
+        }
+        else {
+            writeStoredJson(this.filterStorage, key, current);
+        }
+    }
+    /**
+     * 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.resolvedViewSort() ?? [];
+        if (sortMetaEquals(target, this.table._multiSortMeta ?? []))
+            return false;
+        this.broadcastSort(target);
+        return true;
+    }
+    /**
+     * Rewrites the sort inside PrimeNG's persisted state to the one `ngOnInit` resolved. The two
+     * can disagree only on a viewed table — PrimeNG's state is table-global while the resolved
+     * sort is the view's — and PrimeNG's restoreState() applies its copy on the first [value]
+     * change, AFTER the initial request already left with ours: without this line the grid's
+     * arrows and every later request silently fall back to the other view's sort. Handed the
+     * already-parsed state: `ngOnInit` reads the blob once for the whole init pass.
+     */
+    alignPersistedTableStateSort(state) {
+        if (!this.views?.length || !this.resolvedStateKey || !state)
+            return;
+        const resolved = this.initialMultiSortMeta ?? [];
+        if (sortMetaEquals(state.multiSortMeta ?? [], resolved))
+            return;
+        state.multiSortMeta = resolved.length ? resolved : undefined;
+        writeStoredJson(this.filterStorage, this.resolvedStateKey, state);
+    }
     //#endregion
     /**
-     * The declared default as PrimeNG sort meta, or null when none is declared. Applies even
-     * while its column is hidden: the sort chip names the ordering whether or not the column
-     * is on screen (decision 2b).
+     * The DECLARED default in the current context: the active view's own sort when it declares
+     * one, else the table-level `defaultSortField`. Every "fall back to the declared default"
+     * site — tri-state un-sort, Clear filters, the unsorted-load safety net — reads this, so
+     * un-sorting inside a view lands on the view's ordering, not the table's.
      */
     defaultMultiSortMeta() {
+        return this.viewDeclaredMultiSortMeta() ?? this.tableDefaultMultiSortMeta();
+    }
+    /**
+     * The active view's declared sort, sanitized: a non-sortable field would answer every load
+     * with a 400 (`keepSortableMeta`'s rationale), so it is dropped rather than sent; a view
+     * whose declaration sanitizes to nothing falls through to the table default.
+     */
+    viewDeclaredMultiSortMeta() {
+        return this.sanitizedSortMeta(this.activeView()?.sort);
+    }
+    /**
+     * The table-level declared default as PrimeNG sort meta, or null when none is declared. On a
+     * store table it applies even while its column is hidden — the sort chip names the ordering
+     * whether or not the column is on screen (decision 2b). A STORELESS table has no chip, so a
+     * hidden default would order the grid with nothing on screen naming it; there the default
+     * dies with the column, exactly as the legacy invariant had it (see `dropHiddenColumnSort`).
+     */
+    tableDefaultMultiSortMeta() {
         if (!this.defaultSortField)
             return null;
         const defaultSortCol = this.cols?.find((col) => col.field === this.defaultSortField);
+        if (defaultSortCol &&
+            !this.filters &&
+            !this.isColumnVisible(defaultSortCol))
+            return null;
         // A declared default on a non-sortable column is a consumer mistake the backend answers
         // with a 400 on every load; fall back to its implicit Id DESC instead (see keepSortableMeta).
         if (defaultSortCol && !this.isColumnSortable(defaultSortCol))
             return null;
         return [{ field: this.defaultSortField, order: this.defaultSortOrder }];
     }
-    persistedMultiSortMeta() {
-        const state = this.persistedTableState();
-        const sortable = this.keepSortableMeta(state?.multiSortMeta);
+    /**
+     * `keepSortableMeta` with "sanitized to nothing" surfaced as null — the rule every sort
+     * SOURCE shares ("a sort that sanitizes to nothing is no sort"), so the resolution chains
+     * can `??` past an empty answer instead of stopping on an empty array.
+     */
+    sanitizedSortMeta(multiSortMeta) {
+        const sortable = this.keepSortableMeta(multiSortMeta);
         return sortable.length ? sortable : null;
     }
     /**
@@ -5380,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;
@@ -5393,10 +5822,13 @@ class SpiderlyDataTableComponent {
         if (defaultSort == null)
             return;
         event.multiSortMeta = defaultSort;
-        if (this.table) {
-            this.table._multiSortMeta = defaultSort;
-            this.table.tableService.onSort(defaultSort);
-        }
+        if (this.table)
+            this.broadcastSort(defaultSort);
+    }
+    /** Puts `meta` on the grid and tells the header icons — no fetch; the caller owns that. */
+    broadcastSort(meta) {
+        this.table._multiSortMeta = meta;
+        this.table.tableService.onSort(meta);
     }
     onPageChange(container) {
         scrollElementIntoViewIfAboveViewport(container);
@@ -5553,30 +5985,40 @@ 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;
+        // Always writes — including the first view, so a deliberate "Sve" during a deploy race
+        // sticks, and so an explicit pick beats a stored id whose view has not arrived yet
+        // (`adoptStoredView` compares against this key).
+        this.persistActiveView();
         // The keys just changed under us, so the layout has to be re-read for the view being entered
         // — otherwise the one being left keeps rendering until something else forces a reload.
         this.restoreColumnVisibility();
         this.restoreColumnLayout();
         this.refreshVisibleCols();
-        if (!this.filters)
+        // Sort is view state too (decision 10's sort half). Swapped BEFORE the filter transition so
+        // the one request the requery effect sends carries both.
+        const sortChanged = this.applyViewSort();
+        if (!this.filters) {
+            if (sortChanged)
+                this.table.sortMultiple();
             return;
-        // The filter key moved with the view too, so this view's own stored answer wins over whatever
-        // the last one left applied; `apply` runs only when the view has nothing stored yet. A
-        // TRANSIENT view inverts that: its apply is a function of now, so it always re-derives —
-        // restoring would put yesterday's date under a tab claiming "today".
+        }
+        const appliedBefore = this.filters.applied();
+        // The filter key moved with the view too; `enterViewFilters` holds the stored-wins and
+        // transient rules.
         this.filters.clear();
-        const stored = !view.transient && this.filtersStateKey
-            ? readStoredJson(this.filterStorage, this.filtersStateKey)
-            : null;
-        if (stored)
-            this.filters.restore(stored);
-        else
-            view.apply?.(this.filters);
+        this.enterViewFilters(view, 'click');
+        // The requery effect runs only when the applied set actually changed — `clear()` on an
+        // already-empty store writes nothing (two views sharing one filter answer are exactly that)
+        // — so a sort-only switch fetches here. `applied` is a computed: reference equality across
+        // the transition means none of its sources moved.
+        if (sortChanged && this.filters.applied() === appliedBefore) {
+            this.refetchFromFirstPage();
+        }
     }
     /**
      * The filter this column stands for. Defaults to the column's own `field`, because a store id
@@ -5625,8 +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.applySort([{ field: col.field, order }]);
     }
     /**
      * Sizes the column to the widest thing in it. The cheaper escape from a cramped column: no
@@ -5736,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) {
@@ -6003,11 +6484,24 @@ class SpiderlyDataTableComponent {
                 return;
             }
             this.persistAppliedFilters();
-            this.table.first = 0;
-            this.table.firstChange.emit(0);
-            this.lazyLoad(this.table.createLazyLoadMetadata());
+            this.refetchFromFirstPage();
         }, { injector: this.injector });
     }
+    /**
+     * Back to page one, state saved, one fetch off FRESH metadata — the shared tail of the
+     * requery effect and `selectView`'s sort-only switch. The save is load-bearing: PrimeNG
+     * saves state only from its own interactions, so without it the pre-change page offset
+     * survives in storage and the NEXT visit replays it against a narrowed result set — the
+     * backend answers data=[] for an offset the filtered total no longer reaches, and the grid
+     * renders empty under chips claiming matches.
+     */
+    refetchFromFirstPage() {
+        this.table.first = 0;
+        this.table.firstChange.emit(0);
+        if (this.table.isStateful())
+            this.table.saveState();
+        this.lazyLoad(this.table.createLazyLoadMetadata());
+    }
     reload() {
         // Nothing to replay before the table's own initial load, which is already on its way.
         if (this.lastLazyLoadEvent == null)
@@ -6108,14 +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();
     }
     //#region Selection
     setFakeIsAllSelected() {
@@ -6289,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,
@@ -6305,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]
@@ -6415,12 +6912,13 @@ class Action {
     }
 }
 class Column {
-    constructor({ name, field, filterType, filterId, showMatchModes, dropdownOrMultiselectValues, actions, editable, showTime, decimalPlaces, sortable, visible, lockVisible, width, onCellClick, } = {}) {
+    constructor({ name, field, filterType, filterId, showMatchModes, filterField, dropdownOrMultiselectValues, actions, editable, showTime, decimalPlaces, sortable, visible, lockVisible, width, onCellClick, } = {}) {
         this.name = name;
         this.field = field;
         this.filterType = filterType;
         this.filterId = filterId;
         this.showMatchModes = showMatchModes;
+        this.filterField = filterField;
         this.dropdownOrMultiselectValues = dropdownOrMultiselectValues;
         this.actions = actions;
         this.editable = editable;
@@ -6462,10 +6960,11 @@ var MatchModeCodes;
  * paginator implements per type (`PaginatedResultGenerator`): `In` on a string column answers
  * with InvalidMatchMode, PrimeNG's own text list adds three modes the backend 400s, and so on.
  *
- * Deliberately a LEAF module (imports nothing but the codes) so both consumers can derive from
- * it without a cycle: the store's runtime validation and offered lists (`filter-store.ts`), and
- * the compile-time `FilterRule.matchMode` union (`entities/filter-rule.ts`). These used to be
- * hand-kept copies; edit the table here and every surface follows.
+ * Deliberately a LEAF module (imports nothing but the codes) so every consumer can derive from
+ * it without a cycle: the store's runtime validation and offered lists (`filter-store.ts`), the
+ * compile-time `FilterRule.matchMode` union (`entities/filter-rule.ts`), and the data view's
+ * kind-level lists (via `operatorOptionsForKind`). These used to be hand-kept copies; edit the
+ * table here and every surface follows.
  *
  * Tuple order is DISPLAY order for every operator picker (Equals, then "less/before", then
  * "more/after" — the order the header dropdowns always shipped).
@@ -6563,6 +7062,17 @@ function toOperatorOptions(kind, operators) {
         labelKey: OPERATOR_WORDS[kind][value]?.pickerKey ?? value,
     }));
 }
+/**
+ * A KIND's operator picker options, for callers with no filter behind them — today that is
+ * `spiderly-data-view`, whose own filter config derives its operator lists here instead of
+ * hand-keeping copies (the drift `allowed-operators.ts` exists to end). Per-FILTER narrowing
+ * lives in the store (`createFilterStore` resolves it once per declaration), so this cannot be
+ * handed a fake definition to satisfy — that shape shipped once and interpolated an empty
+ * filter name into its own error message.
+ */
+function operatorOptionsForKind(kind, hasOptions = false) {
+    return toOperatorOptions(kind, baseOperators(kind, hasOptions));
+}
 /**
  * The operator applied when nobody picked one, which has to be what a person MEANS by filling in
  * the control. `Contains` for a fragment typed into a box; `GreaterThan` for a date, never
@@ -6916,34 +7426,15 @@ class SpiderlyDataViewComponent {
         };
     }
     ngOnInit() {
-        this.matchModeDateOptions = [
-            {
-                label: this.translocoService.translate('OnDate'),
-                value: MatchModeCodes.Equals,
-            },
-            {
-                label: this.translocoService.translate('DatesBefore'),
-                value: MatchModeCodes.LessThan,
-            },
-            {
-                label: this.translocoService.translate('DatesAfter'),
-                value: MatchModeCodes.GreaterThan,
-            },
-        ];
-        this.matchModeNumberOptions = [
-            {
-                label: this.translocoService.translate('Equals'),
-                value: MatchModeCodes.Equals,
-            },
-            {
-                label: this.translocoService.translate('LessThan'),
-                value: MatchModeCodes.LessThan,
-            },
-            {
-                label: this.translocoService.translate('MoreThan'),
-                value: MatchModeCodes.GreaterThan,
-            },
-        ];
+        // Derived from the ONE operator table (`filters/allowed-operators.ts`) rather than
+        // hand-kept: these were the last hand-written copies of the per-kind lists, and a backend
+        // operator change edited in the shared table would silently never have reached them.
+        const matchModeOptionsFor = (kind) => operatorOptionsForKind(kind).map((option) => ({
+            label: this.translocoService.translate(option.labelKey),
+            value: option.value,
+        }));
+        this.matchModeDateOptions = matchModeOptionsFor('date');
+        this.matchModeNumberOptions = matchModeOptionsFor('number');
     }
     // Paging semantics and the scroll-margin contract are documented once, on the data table:
     // spiderly-data-table/CLAUDE.md → "Scroll back to the table on page change".
@@ -7584,5 +8075,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ALLOWED_OPERATORS, Action, AllClickEvent, ApiErrorCodes, ApiSecurityService, AppSidebarComponent, AuthCardComponent, AuthGuard, AuthResult, AuthResultWithCookies, AuthServiceBase, BaseAutocompleteControl, BaseControl, BaseDropdownControl, BaseEntity, BaseFormComponent, BaseFormService, CardSkeletonComponent, Codebook, Column, ConfigServiceBase, DEFAULT_EXTERNAL_PROVIDER_ICONS, DEFAULT_OPERATOR, ExternalLoginComponent, ExternalProvider, ExternalProviderPublic, Filter, FilterRule, FilterSortMeta, IndexCardComponent, InfoCardComponent, InitCompanyAuthDialogDetails, InitTopBarData, IsAuthorizedForSaveEvent, LastMenuIconIndexClicked, LayoutServiceBase, LazyLoadSelectedIdsResult, Login, LoginVerificationComponent, LoginVerificationToken, MatchModeCodes, MenuChangeEvent, MenuitemComponent, Namebook, NotAuthGuard, NotFoundComponent, PROPS_KEY, PaginatedResult, PanelBodyComponent, PanelFooterComponent, PanelHeaderComponent, PrimengOption, ProfileAvatarComponent, ReflectProp, RefreshTokenRequest, RequiredComponent, RowClickEvent, SecurityPermissionCodes, SendLoginVerificationEmailResult, SideMenuTopBarComponent, SidebarMenuComponent, SimpleSaveResult, SpiderlyAutocompleteComponent, SpiderlyButtonBaseComponent, SpiderlyButtonComponent, SpiderlyCalendarComponent, SpiderlyCardComponent, SpiderlyCellTemplateDirective, SpiderlyCheckboxComponent, SpiderlyColorPickerComponent, SpiderlyControlsModule, SpiderlyDataTableActionsDirective, SpiderlyDataTableComponent, SpiderlyDataViewComponent, SpiderlyDeleteConfirmationComponent, SpiderlyDropdownComponent, SpiderlyEditorComponent, SpiderlyErrorHandler, SpiderlyFileComponent, SpiderlyFileSelectEvent, SpiderlyFilterBarComponent, SpiderlyFilterTemplateDirective, SpiderlyFormArray, SpiderlyFormControl, SpiderlyFormGroup, SpiderlyLayoutComponent, SpiderlyLoginComponent, SpiderlyMarkdownComponent, SpiderlyMessageService, SpiderlyMultiAutocompleteComponent, SpiderlyMultiSelectComponent, SpiderlyNumberComponent, SpiderlyOverflowTitleDirective, SpiderlyPanelComponent, SpiderlyPanelsModule, SpiderlyPasswordComponent, SpiderlyReturnButtonComponent, SpiderlySplitButtonComponent, SpiderlyTab, SpiderlyTemplateTypeDirective, SpiderlyTextareaComponent, SpiderlyTextboxComponent, SpiderlyTranslocoLoader, TopBarComponent, UserBase, UserRole, ValidatorAbstractService, VerificationTokenRequest, VerificationTypeCodes, VerificationWrapperComponent, adjustColor, authInitializer, booleanFilter, capitalizeFirstChar, createFilterStore, dateFilter, deleteAction, exportListToExcel, firstCharToUpper, foldForSearch, getFileNameFromContentDisposition, getFilterOptions, getHtmlImgDisplayString64, getImageDimensions, getMimeTypeForFileName, getMonth, getParentUrl, getPrimengAutocompleteCodebookOptions, getPrimengAutocompleteNamebookOptions, getPrimengDropdownCodebookOptions, getPrimengDropdownNamebookOptions, getPrimengNamebookOptions, httpLoadingInterceptor, isExcelFileType, isFileImageType, isNullOrEmpty, jsonHttpInterceptor, jwtInterceptor, kebabToTitleCase, nameOf, nameof, numberFilter, parseDateOnlyLocal, pushAction, saveResponseAsFile, scrollElementIntoViewIfAboveViewport, selectedTab, singleOrDefault, splitPascalCase, textFilter, toCommaSeparatedString, unauthorizedInterceptor, validatePrecisionScale };
+export { ALLOWED_OPERATORS, Action, AllClickEvent, ApiErrorCodes, ApiSecurityService, AppSidebarComponent, AuthCardComponent, AuthGuard, AuthResult, AuthResultWithCookies, AuthServiceBase, BaseAutocompleteControl, BaseControl, BaseDropdownControl, BaseEntity, BaseFormComponent, BaseFormService, CardSkeletonComponent, Codebook, Column, ConfigServiceBase, DEFAULT_EXTERNAL_PROVIDER_ICONS, DEFAULT_OPERATOR, ExternalLoginComponent, ExternalProvider, ExternalProviderPublic, Filter, FilterRule, FilterSortMeta, IndexCardComponent, InfoCardComponent, InitCompanyAuthDialogDetails, InitTopBarData, IsAuthorizedForSaveEvent, LastMenuIconIndexClicked, LayoutServiceBase, LazyLoadSelectedIdsResult, Login, LoginVerificationComponent, LoginVerificationToken, MatchModeCodes, MenuChangeEvent, MenuitemComponent, Namebook, NotAuthGuard, NotFoundComponent, PROPS_KEY, PaginatedResult, PanelBodyComponent, PanelFooterComponent, PanelHeaderComponent, PrimengOption, ProfileAvatarComponent, ReflectProp, RefreshTokenRequest, RequiredComponent, RowClickEvent, SecurityPermissionCodes, SendLoginVerificationEmailResult, SideMenuTopBarComponent, SidebarMenuComponent, SimpleSaveResult, SpiderlyAutocompleteComponent, SpiderlyButtonBaseComponent, SpiderlyButtonComponent, SpiderlyCalendarComponent, SpiderlyCardComponent, SpiderlyCellTemplateDirective, SpiderlyCheckboxComponent, SpiderlyColorPickerComponent, SpiderlyControlsModule, SpiderlyDataTableActionsDirective, SpiderlyDataTableComponent, SpiderlyDataViewComponent, SpiderlyDeleteConfirmationComponent, SpiderlyDropdownComponent, SpiderlyEditorComponent, SpiderlyErrorHandler, SpiderlyFileComponent, SpiderlyFileSelectEvent, SpiderlyFilterBarComponent, SpiderlyFilterTemplateDirective, SpiderlyFormArray, SpiderlyFormControl, SpiderlyFormGroup, SpiderlyLayoutComponent, SpiderlyLoginComponent, SpiderlyMarkdownComponent, SpiderlyMessageService, SpiderlyMultiAutocompleteComponent, SpiderlyMultiSelectComponent, SpiderlyNumberComponent, SpiderlyOverflowTitleDirective, SpiderlyPanelComponent, SpiderlyPanelsModule, SpiderlyPasswordComponent, SpiderlyReturnButtonComponent, SpiderlySplitButtonComponent, SpiderlyTab, SpiderlyTemplateTypeDirective, SpiderlyTextareaComponent, SpiderlyTextboxComponent, SpiderlyTranslocoLoader, TopBarComponent, UserBase, UserRole, ValidatorAbstractService, VerificationTokenRequest, VerificationTypeCodes, VerificationWrapperComponent, adjustColor, authInitializer, booleanFilter, capitalizeFirstChar, createFilterStore, dateFilter, deleteAction, exportListToExcel, firstCharToUpper, foldForSearch, getFileNameFromContentDisposition, getFilterOptions, getHtmlImgDisplayString64, getImageDimensions, getMimeTypeForFileName, getMonth, getParentUrl, getPrimengAutocompleteCodebookOptions, getPrimengAutocompleteNamebookOptions, getPrimengDropdownCodebookOptions, getPrimengDropdownNamebookOptions, getPrimengNamebookOptions, httpLoadingInterceptor, isExcelFileType, isFileImageType, isNullOrEmpty, jsonHttpInterceptor, jwtInterceptor, kebabToTitleCase, nameOf, nameof, numberFilter, operatorOptionsForKind, parseDateOnlyLocal, pushAction, saveResponseAsFile, scrollElementIntoViewIfAboveViewport, selectedTab, singleOrDefault, splitPascalCase, textFilter, toCommaSeparatedString, unauthorizedInterceptor, validatePrecisionScale };
 //# sourceMappingURL=spiderly.mjs.map