spiderly 19.11.8 → 19.12.0

package/fesm2022/spiderly.mjs

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { Input, Component, EventEmitter, Output, Injectable, ViewChild, NgModule, PLATFORM_ID, Inject, HostBinding, Directive, LOCALE_ID, TemplateRef, ContentChildren, ContentChild, inject } from '@angular/core';
+import { Input, Component, EventEmitter, Output, Injectable, ViewChild, NgModule, PLATFORM_ID, Inject, HostBinding, Directive, inject, ElementRef, NgZone, input, output, LOCALE_ID, signal, computed, Injector, viewChild, effect, TemplateRef, ContentChildren, ContentChild } from '@angular/core';
 import * as i1 from '@jsverse/transloco';
 import { TranslocoDirective, TranslocoService } from '@jsverse/transloco';
 import * as i2 from '@angular/common';
-import { CommonModule, isPlatformBrowser, formatNumber, formatDate } from '@angular/common';
+import { CommonModule, isPlatformBrowser, formatDate, formatNumber } from '@angular/common';
 import * as i3 from '@angular/forms';
 import { FormControl, FormGroup, FormArray, ReactiveFormsModule, FormsModule } from '@angular/forms';
 import * as i4 from 'primeng/autocomplete';
@@ -26,22 +26,22 @@ import * as i5$1 from 'primeng/inputtext';
 import { InputTextModule } from 'primeng/inputtext';
 import * as i4$4 from 'primeng/password';
 import { PasswordModule } from 'primeng/password';
-import * as i4$5 from 'primeng/multiselect';
+import * as i7 from 'primeng/multiselect';
 import { MultiSelectModule } from 'primeng/multiselect';
-import * as i4$6 from 'primeng/textarea';
+import * as i4$5 from 'primeng/textarea';
 import { TextareaModule } from 'primeng/textarea';
-import * as i4$7 from 'primeng/inputnumber';
+import * as i4$6 from 'primeng/inputnumber';
 import { InputNumberModule } from 'primeng/inputnumber';
 import * as i3$1 from 'primeng/select';
 import { SelectModule } from 'primeng/select';
-import * as i4$8 from 'primeng/editor';
+import * as i4$7 from 'primeng/editor';
 import { EditorModule, Editor } from 'primeng/editor';
 import * as i5$2 from 'primeng/tabs';
 import { TabsModule } from 'primeng/tabs';
 import { MarkdownComponent } from 'ngx-markdown';
 import * as i5$3 from 'primeng/fileupload';
 import { FileUploadModule } from 'primeng/fileupload';
-import * as i12 from 'primeng/button';
+import * as i3$3 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
 import * as i1$4 from 'primeng/splitbutton';
 import { SplitButtonModule } from 'primeng/splitbutton';
@@ -55,17 +55,17 @@ import { HttpParams, HttpHeaders, HttpErrorResponse, HttpResponse } from '@angul
 import { InputOtp } from 'primeng/inputotp';
 import * as i2$1 from 'primeng/menu';
 import { MenuModule } from 'primeng/menu';
-import * as i4$9 from 'primeng/panel';
+import * as i4$8 from 'primeng/panel';
 import { PanelModule } from 'primeng/panel';
 import * as i1$3 from 'primeng/skeleton';
 import { SkeletonModule } from 'primeng/skeleton';
 import { trigger, state, transition, style, animate } from '@angular/animations';
-import * as i7 from 'primeng/avatar';
+import * as i7$1 from 'primeng/avatar';
 import { AvatarModule } from 'primeng/avatar';
 import { BadgeModule } from 'primeng/badge';
-import * as i4$a from 'primeng/menubar';
+import * as i4$9 from 'primeng/menubar';
 import { MenubarModule } from 'primeng/menubar';
-import * as i14 from 'primeng/popover';
+import * as i8 from 'primeng/popover';
 import { PopoverModule } from 'primeng/popover';
 import * as i10 from 'primeng/table';
 import { TableModule } from 'primeng/table';
@@ -657,6 +657,15 @@ function exportListToExcel(exportListToExcelObservableMethod, filter) {
 function getPrimengNamebookOptions(namebookList) {
     return namebookList.map((x) => ({ label: x.displayName, code: x.id }));
 }
+/**
+ * The filter store's twin of `getPrimengNamebookOptions` — same namebook in, the store's
+ * `{ value, label }` shape out (a `FilterOption` is not a `PrimengOption`: that one's `code` is
+ * deliberate, see `primeng-option.ts`). Every consumer filling a pick-list filter from a lookup
+ * needs this map; without it each page re-derives the three lines.
+ */
+function getFilterOptions(namebookList) {
+    return namebookList.map((x) => ({ value: x.id, label: x.displayName }));
+}
 function getPrimengDropdownNamebookOptions(getDropdownListObservable, parentEntityId) {
     return getDropdownListObservable(parentEntityId ?? 0).pipe(map((res) => getPrimengNamebookOptions(res)));
 }
@@ -723,6 +732,31 @@ function getImageDimensions(file) {
         img.src = URL.createObjectURL(file);
     });
 }
+/**
+ * Scrolls `element` back under the top of the viewport, but only when it has already scrolled
+ * above it. Set the element's `scroll-margin-top` to whatever fixed chrome must stay clear.
+ * Assumes the element's nearest scroll container is the viewport itself.
+ */
+// This is the one full telling of the three decisions below; paging is the caller (see
+// spiderly-data-table/CLAUDE.md → "Scroll back to the table on page change").
+// - The offset is READ from CSS rather than passed in, so the amount of fixed chrome to clear
+//   stays declared in one place per component and no TypeScript knows the shell's dimensions.
+//   That read is also why the viewport assumption above matters: getBoundingClientRect is
+//   viewport-relative, so inside a consumer's own overflow container it measures the wrong box.
+// - The early return is what stops a list sitting BELOW other page content (a table inside a
+//   details form) from shoving that content off-screen when it was already visible.
+// - `behavior: 'instant'` overrides the element's CSS `scroll-behavior`; `'auto'` defers to it,
+//   so an app setting `html { scroll-behavior: smooth }` would animate every call.
+function scrollElementIntoViewIfAboveViewport(element) {
+    const offset = parseFloat(getComputedStyle(element).scrollMarginTop) || 0;
+    if (element.getBoundingClientRect().top >= offset)
+        return;
+    element.scrollIntoView({
+        block: 'start',
+        inline: 'nearest',
+        behavior: 'instant',
+    });
+}
 
 class SpiderlyCalendarComponent extends BaseControl {
     constructor(translocoService) {
@@ -1012,7 +1046,7 @@ class SpiderlyMultiSelectComponent extends BaseDropdownControl {
         super.ngOnInit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyMultiSelectComponent, deps: [{ token: i1.TranslocoService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyMultiSelectComponent, isStandalone: true, selector: "spiderly-multiselect", usesInheritance: true, ngImport: i0, template: "<div style=\"display: flex; flex-direction: column; gap: 0.5rem\">\n  <div>\n    <label>{{ getTranslatedLabel() }}</label>\n    <required *ngIf=\"control?.required && showRequired\"></required>\n  </div>\n  <p-multiSelect\n    *ngIf=\"control\"\n    [id]=\"label\"\n    [formControl]=\"control\"\n    [options]=\"options\"\n    optionLabel=\"displayName\"\n    optionValue=\"id\"\n    display=\"chip\"\n    [maxSelectedLabels]=\"20\"\n    [placeholder]=\"placeholder\"\n    [fluid]=\"true\"\n    appendTo=\"body\"\n  />\n  <!-- [virtualScroll]=\"true\" FT: I think that this is not doing anything, check -->\n  <!-- (onFilter)=\"search($event)\" FT: While they don't implement lazy load like here: https://github.com/yelhouti/primeng/blob/8.0.0-rc2/src/app/components/multiselect/multiselect.ts\n    we need to use this and dropdown control only on the client -->\n  <small *ngIf=\"control?.errors && control?.dirty\" class=\"spiderly-error-message\">\n    {{ getValidationErrrorMessages() }}\n  </small>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i4$5.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: "component", type: RequiredComponent, selector: "required" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyMultiSelectComponent, isStandalone: true, selector: "spiderly-multiselect", usesInheritance: true, ngImport: i0, template: "<div style=\"display: flex; flex-direction: column; gap: 0.5rem\">\n  <div>\n    <label>{{ getTranslatedLabel() }}</label>\n    <required *ngIf=\"control?.required && showRequired\"></required>\n  </div>\n  <p-multiSelect\n    *ngIf=\"control\"\n    [id]=\"label\"\n    [formControl]=\"control\"\n    [options]=\"options\"\n    optionLabel=\"displayName\"\n    optionValue=\"id\"\n    display=\"chip\"\n    [maxSelectedLabels]=\"20\"\n    [placeholder]=\"placeholder\"\n    [fluid]=\"true\"\n    appendTo=\"body\"\n  />\n  <!-- [virtualScroll]=\"true\" FT: I think that this is not doing anything, check -->\n  <!-- (onFilter)=\"search($event)\" FT: While they don't implement lazy load like here: https://github.com/yelhouti/primeng/blob/8.0.0-rc2/src/app/components/multiselect/multiselect.ts\n    we need to use this and dropdown control only on the client -->\n  <small *ngIf=\"control?.errors && control?.dirty\" class=\"spiderly-error-message\">\n    {{ getValidationErrrorMessages() }}\n  </small>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { 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: "component", type: RequiredComponent, selector: "required" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyMultiSelectComponent, decorators: [{
             type: Component,
@@ -1034,7 +1068,7 @@ class SpiderlyTextareaComponent extends BaseControl {
         super.ngOnInit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyTextareaComponent, deps: [{ token: i1.TranslocoService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyTextareaComponent, isStandalone: true, selector: "spiderly-textarea", usesInheritance: true, ngImport: i0, template: "<!-- Can't put (onBlur) in this control -->\n\n<div style=\"display: flex; flex-direction: column; gap: 0.5rem\">\n  <div>\n    <label>{{ getTranslatedLabel() }}</label>\n    <required *ngIf=\"control?.required && showRequired\"></required>\n  </div>\n  <textarea\n    *ngIf=\"control\"\n    pTextarea\n    [formControl]=\"control\"\n    [id]=\"control.label\"\n    (blur)=\"control.markAsDirty()\"\n    [autoResize]=\"true\"\n    [class]=\"control.disabled ? 'disabled' : ''\"\n  ></textarea>\n  <small *ngIf=\"control?.errors && control?.dirty\" class=\"spiderly-error-message\">\n    {{ getValidationErrrorMessages() }}\n  </small>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i4$6.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "variant", "fluid", "pSize"], outputs: ["onResize"] }, { kind: "component", type: RequiredComponent, selector: "required" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyTextareaComponent, isStandalone: true, selector: "spiderly-textarea", usesInheritance: true, ngImport: i0, template: "<!-- Can't put (onBlur) in this control -->\n\n<div style=\"display: flex; flex-direction: column; gap: 0.5rem\">\n  <div>\n    <label>{{ getTranslatedLabel() }}</label>\n    <required *ngIf=\"control?.required && showRequired\"></required>\n  </div>\n  <textarea\n    *ngIf=\"control\"\n    pTextarea\n    [formControl]=\"control\"\n    [id]=\"control.label\"\n    (blur)=\"control.markAsDirty()\"\n    [autoResize]=\"true\"\n    [class]=\"control.disabled ? 'disabled' : ''\"\n  ></textarea>\n  <small *ngIf=\"control?.errors && control?.dirty\" class=\"spiderly-error-message\">\n    {{ getValidationErrrorMessages() }}\n  </small>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i4$5.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "variant", "fluid", "pSize"], outputs: ["onResize"] }, { kind: "component", type: RequiredComponent, selector: "required" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyTextareaComponent, decorators: [{
             type: Component,
@@ -1059,7 +1093,7 @@ class SpiderlyNumberComponent extends BaseControl {
         super.ngOnInit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyNumberComponent, deps: [{ token: i1.TranslocoService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyNumberComponent, isStandalone: true, selector: "spiderly-number", inputs: { prefix: "prefix", showButtons: "showButtons", decimal: "decimal", maxFractionDigits: "maxFractionDigits" }, usesInheritance: true, ngImport: i0, template: "<div style=\"display: flex; flex-direction: column; gap: 0.5rem\">\n  <div *ngIf=\"showLabel\">\n    <label>{{ getTranslatedLabel() }}</label>\n    <required *ngIf=\"control?.required && showRequired\"></required>\n  </div>\n  <p-inputNumber\n    *ngIf=\"control\"\n    [formControl]=\"control\"\n    [id]=\"control.label\"\n    (onBlur)=\"control.markAsDirty()\"\n    [prefix]=\"prefix\"\n    [style]=\"{ width: '100%' }\"\n    [inputStyle]=\"{ width: '100%' }\"\n    [showButtons]=\"showButtons\"\n    buttonLayout=\"horizontal\"\n    [maxFractionDigits]=\"maxFractionDigits\"\n  />\n  <small *ngIf=\"control?.errors && control?.dirty\" class=\"spiderly-error-message\">\n    {{ getValidationErrrorMessages() }}\n  </small>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i4$7.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "variant", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus", "disabled", "fluid"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "component", type: RequiredComponent, selector: "required" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyNumberComponent, isStandalone: true, selector: "spiderly-number", inputs: { prefix: "prefix", showButtons: "showButtons", decimal: "decimal", maxFractionDigits: "maxFractionDigits" }, usesInheritance: true, ngImport: i0, template: "<div style=\"display: flex; flex-direction: column; gap: 0.5rem\">\n  <div *ngIf=\"showLabel\">\n    <label>{{ getTranslatedLabel() }}</label>\n    <required *ngIf=\"control?.required && showRequired\"></required>\n  </div>\n  <p-inputNumber\n    *ngIf=\"control\"\n    [formControl]=\"control\"\n    [id]=\"control.label\"\n    (onBlur)=\"control.markAsDirty()\"\n    [prefix]=\"prefix\"\n    [style]=\"{ width: '100%' }\"\n    [inputStyle]=\"{ width: '100%' }\"\n    [showButtons]=\"showButtons\"\n    buttonLayout=\"horizontal\"\n    [maxFractionDigits]=\"maxFractionDigits\"\n  />\n  <small *ngIf=\"control?.errors && control?.dirty\" class=\"spiderly-error-message\">\n    {{ getValidationErrrorMessages() }}\n  </small>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: InputNumberModule }, { kind: "component", type: i4$6.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "variant", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus", "disabled", "fluid"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "component", type: RequiredComponent, selector: "required" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyNumberComponent, decorators: [{
             type: Component,
@@ -1168,7 +1202,7 @@ class SpiderlyEditorComponent extends BaseControl {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyEditorComponent, deps: [{ token: i1.TranslocoService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyEditorComponent, isStandalone: true, selector: "spiderly-editor", inputs: { uploadImageMethod: "uploadImageMethod", objectId: "objectId", acceptedFileTypes: "acceptedFileTypes" }, viewQueries: [{ propertyName: "editor", first: true, predicate: Editor, descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- Can't put (onBlur) in this control -->\n\n<div style=\"display: flex; flex-direction: column; gap: 0.5rem; padding: 0 1px\">\n  <div *ngIf=\"getTranslatedLabel() != '' && getTranslatedLabel() != null\">\n    <label>{{ getTranslatedLabel() }}</label>\n    <required *ngIf=\"control?.required && showRequired\"></required>\n  </div>\n\n  <!-- Disable doesn't work on this control -->\n  <p-editor\n    *ngIf=\"control\"\n    [formControl]=\"control\"\n    [readonly]=\"control.disabled\"\n    [class]=\"control.invalid && control.dirty ? 'control-error-border' : ''\"\n    [id]=\"control.label\"\n    [placeholder]=\"placeholder\"\n    (click)=\"onClick()\"\n    (onInit)=\"onEditorInit($event)\"\n    [style]=\"{ height: '320px' }\"\n  ></p-editor>\n  <small *ngIf=\"control?.errors && control?.dirty\" class=\"spiderly-error-message\">\n    {{ getValidationErrrorMessages() }}\n  </small>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: EditorModule }, { kind: "component", type: i4$8.Editor, selector: "p-editor", inputs: ["style", "styleClass", "placeholder", "formats", "modules", "bounds", "scrollingContainer", "debug", "readonly"], outputs: ["onInit", "onTextChange", "onSelectionChange"] }, { kind: "component", type: RequiredComponent, selector: "required" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyEditorComponent, isStandalone: true, selector: "spiderly-editor", inputs: { uploadImageMethod: "uploadImageMethod", objectId: "objectId", acceptedFileTypes: "acceptedFileTypes" }, viewQueries: [{ propertyName: "editor", first: true, predicate: Editor, descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- Can't put (onBlur) in this control -->\n\n<div style=\"display: flex; flex-direction: column; gap: 0.5rem; padding: 0 1px\">\n  <div *ngIf=\"getTranslatedLabel() != '' && getTranslatedLabel() != null\">\n    <label>{{ getTranslatedLabel() }}</label>\n    <required *ngIf=\"control?.required && showRequired\"></required>\n  </div>\n\n  <!-- Disable doesn't work on this control -->\n  <p-editor\n    *ngIf=\"control\"\n    [formControl]=\"control\"\n    [readonly]=\"control.disabled\"\n    [class]=\"control.invalid && control.dirty ? 'control-error-border' : ''\"\n    [id]=\"control.label\"\n    [placeholder]=\"placeholder\"\n    (click)=\"onClick()\"\n    (onInit)=\"onEditorInit($event)\"\n    [style]=\"{ height: '320px' }\"\n  ></p-editor>\n  <small *ngIf=\"control?.errors && control?.dirty\" class=\"spiderly-error-message\">\n    {{ getValidationErrrorMessages() }}\n  </small>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: EditorModule }, { kind: "component", type: i4$7.Editor, selector: "p-editor", inputs: ["style", "styleClass", "placeholder", "formats", "modules", "bounds", "scrollingContainer", "debug", "readonly"], outputs: ["onInit", "onTextChange", "onSelectionChange"] }, { kind: "component", type: RequiredComponent, selector: "required" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyEditorComponent, decorators: [{
             type: Component,
@@ -1275,7 +1309,7 @@ class SpiderlyMarkdownComponent extends BaseControl {
         this.control.markAsDirty();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyMarkdownComponent, deps: [{ token: i1.TranslocoService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyMarkdownComponent, isStandalone: true, selector: "spiderly-markdown", inputs: { uploadImageMethod: "uploadImageMethod", objectId: "objectId" }, viewQueries: [{ propertyName: "textareaRef", first: true, predicate: ["textarea"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div style=\"display: flex; flex-direction: column; gap: 0.5rem\">\n  <div *ngIf=\"getTranslatedLabel() != '' && getTranslatedLabel() != null\">\n    <label>{{ getTranslatedLabel() }}</label>\n    <required *ngIf=\"control?.required && showRequired\"></required>\n  </div>\n\n  <ng-container *transloco=\"let t\">\n    <p-tabs *ngIf=\"control\" value=\"write\">\n      <p-tablist>\n        <p-tab value=\"write\">{{ t('Write') }}</p-tab>\n        <p-tab value=\"preview\">{{ t('Preview') }}</p-tab>\n      </p-tablist>\n      <p-tabpanels>\n        <p-tabpanel value=\"write\">\n          <textarea\n            #textarea\n            pTextarea\n            [formControl]=\"control\"\n            [id]=\"control.label\"\n            (blur)=\"control.markAsDirty()\"\n            (paste)=\"onPaste($event)\"\n            [autoResize]=\"true\"\n            [class]=\"control.disabled ? 'disabled' : ''\"\n            [style]=\"{ width: '100%', minHeight: '320px' }\"\n          ></textarea>\n          <small *ngIf=\"pendingImageUploads > 0\">{{ t('UploadingImage') }}</small>\n          <small *ngIf=\"imageUploadFailed\" class=\"spiderly-error-message\">{{ t('ImageUploadFailed') }}</small>\n        </p-tabpanel>\n        <p-tabpanel value=\"preview\">\n          <div class=\"spiderly-markdown-preview\" style=\"min-height: 320px\">\n            <markdown [data]=\"control.value\"></markdown>\n          </div>\n        </p-tabpanel>\n      </p-tabpanels>\n    </p-tabs>\n  </ng-container>\n\n  <small *ngIf=\"control?.errors && control?.dirty\" class=\"spiderly-error-message\">\n    {{ getValidationErrrorMessages() }}\n  </small>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i4$6.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "variant", "fluid", "pSize"], outputs: ["onResize"] }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i5$2.Tabs, selector: "p-tabs", inputs: ["value", "scrollable", "lazy", "selectOnFocus", "showNavigators", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: i5$2.TabPanels, selector: "p-tabpanels" }, { kind: "component", type: i5$2.TabPanel, selector: "p-tabpanel", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: i5$2.TabList, selector: "p-tablist" }, { kind: "component", type: i5$2.Tab, selector: "p-tab", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: MarkdownComponent, selector: "markdown, [markdown]", inputs: ["data", "src", "disableSanitizer", "inline", "clipboard", "clipboardButtonComponent", "clipboardButtonTemplate", "emoji", "katex", "katexOptions", "mermaid", "mermaidOptions", "lineHighlight", "line", "lineOffset", "lineNumbers", "start", "commandLine", "filterOutput", "host", "prompt", "output", "user"], outputs: ["error", "load", "ready"] }, { kind: "component", type: RequiredComponent, selector: "required" }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyMarkdownComponent, isStandalone: true, selector: "spiderly-markdown", inputs: { uploadImageMethod: "uploadImageMethod", objectId: "objectId" }, viewQueries: [{ propertyName: "textareaRef", first: true, predicate: ["textarea"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div style=\"display: flex; flex-direction: column; gap: 0.5rem\">\n  <div *ngIf=\"getTranslatedLabel() != '' && getTranslatedLabel() != null\">\n    <label>{{ getTranslatedLabel() }}</label>\n    <required *ngIf=\"control?.required && showRequired\"></required>\n  </div>\n\n  <ng-container *transloco=\"let t\">\n    <p-tabs *ngIf=\"control\" value=\"write\">\n      <p-tablist>\n        <p-tab value=\"write\">{{ t('Write') }}</p-tab>\n        <p-tab value=\"preview\">{{ t('Preview') }}</p-tab>\n      </p-tablist>\n      <p-tabpanels>\n        <p-tabpanel value=\"write\">\n          <textarea\n            #textarea\n            pTextarea\n            [formControl]=\"control\"\n            [id]=\"control.label\"\n            (blur)=\"control.markAsDirty()\"\n            (paste)=\"onPaste($event)\"\n            [autoResize]=\"true\"\n            [class]=\"control.disabled ? 'disabled' : ''\"\n            [style]=\"{ width: '100%', minHeight: '320px' }\"\n          ></textarea>\n          <small *ngIf=\"pendingImageUploads > 0\">{{ t('UploadingImage') }}</small>\n          <small *ngIf=\"imageUploadFailed\" class=\"spiderly-error-message\">{{ t('ImageUploadFailed') }}</small>\n        </p-tabpanel>\n        <p-tabpanel value=\"preview\">\n          <div class=\"spiderly-markdown-preview\" style=\"min-height: 320px\">\n            <markdown [data]=\"control.value\"></markdown>\n          </div>\n        </p-tabpanel>\n      </p-tabpanels>\n    </p-tabs>\n  </ng-container>\n\n  <small *ngIf=\"control?.errors && control?.dirty\" class=\"spiderly-error-message\">\n    {{ getValidationErrrorMessages() }}\n  </small>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i4$5.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "variant", "fluid", "pSize"], outputs: ["onResize"] }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i5$2.Tabs, selector: "p-tabs", inputs: ["value", "scrollable", "lazy", "selectOnFocus", "showNavigators", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: i5$2.TabPanels, selector: "p-tabpanels" }, { kind: "component", type: i5$2.TabPanel, selector: "p-tabpanel", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: i5$2.TabList, selector: "p-tablist" }, { kind: "component", type: i5$2.Tab, selector: "p-tab", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: MarkdownComponent, selector: "markdown, [markdown]", inputs: ["data", "src", "disableSanitizer", "inline", "clipboard", "clipboardButtonComponent", "clipboardButtonTemplate", "emoji", "katex", "katexOptions", "mermaid", "mermaidOptions", "lineHighlight", "line", "lineOffset", "lineNumbers", "start", "commandLine", "filterOutput", "host", "prompt", "output", "user"], outputs: ["error", "load", "ready"] }, { kind: "component", type: RequiredComponent, selector: "required" }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyMarkdownComponent, decorators: [{
             type: Component,
@@ -1368,7 +1402,7 @@ class SpiderlyButtonComponent extends SpiderlyButtonBaseComponent {
         this.type = 'button';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyButtonComponent, isStandalone: true, selector: "spiderly-button", inputs: { type: "type" }, usesInheritance: true, ngImport: i0, template: "<p-button\n  (onClick)=\"handleClick($event)\"\n  [label]=\"iconUrl ? undefined : label\"\n  [icon]=\"icon\"\n  [outlined]=\"outlined\"\n  [styleClass]=\"styleClass\"\n  [severity]=\"severity\"\n  [rounded]=\"rounded\"\n  [style]=\"style\"\n  [class]=\"class\"\n  [disabled]=\"disabled\"\n  [size]=\"size\"\n  [type]=\"type\"\n>\n  <ng-container *ngIf=\"iconUrl\">\n    <img [src]=\"iconUrl\" [alt]=\"label\" style=\"height: 16px; width: 16px; margin-right: 8px\" />\n    <span>{{ label }}</span>\n  </ng-container>\n  <ng-content></ng-content>\n</p-button>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i12.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SplitButtonModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyButtonComponent, isStandalone: true, selector: "spiderly-button", inputs: { type: "type" }, usesInheritance: true, ngImport: i0, template: "<p-button\n  (onClick)=\"handleClick($event)\"\n  [label]=\"iconUrl ? undefined : label\"\n  [icon]=\"icon\"\n  [outlined]=\"outlined\"\n  [styleClass]=\"styleClass\"\n  [severity]=\"severity\"\n  [rounded]=\"rounded\"\n  [style]=\"style\"\n  [class]=\"class\"\n  [disabled]=\"disabled\"\n  [size]=\"size\"\n  [type]=\"type\"\n>\n  <ng-container *ngIf=\"iconUrl\">\n    <img [src]=\"iconUrl\" [alt]=\"label\" style=\"height: 16px; width: 16px; margin-right: 8px\" />\n    <span>{{ label }}</span>\n  </ng-container>\n  <ng-content></ng-content>\n</p-button>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3$3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SplitButtonModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyButtonComponent, decorators: [{
             type: Component,
@@ -2830,7 +2864,7 @@ class SpiderlyPanelComponent {
         this.onRemoveIconClick.next(null);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyPanelComponent, isStandalone: false, selector: "spiderly-panel", inputs: { isFirstMultiplePanel: "isFirstMultiplePanel", isMiddleMultiplePanel: "isMiddleMultiplePanel", isLastMultiplePanel: "isLastMultiplePanel", toggleable: "toggleable", toggler: "toggler", collapsed: "collapsed", crudMenu: "crudMenu", showCrudMenu: "showCrudMenu", showRemoveIcon: "showRemoveIcon", index: "index", showPanelHeader: "showPanelHeader" }, outputs: { onMenuIconClick: "onMenuIconClick", onRemoveIconClick: "onRemoveIconClick" }, viewQueries: [{ propertyName: "menu", first: true, predicate: ["menu"], descendants: true }], ngImport: i0, template: "<p-panel\n  [showHeader]=\"showPanelHeader\"\n  [ngClass]=\"{\n    'multiple-panel-first-without-header':\n      isFirstMultiplePanel && !showPanelHeader,\n    'multiple-panel-first': isFirstMultiplePanel,\n    'multiple-panel-middle-without-header':\n      isMiddleMultiplePanel && !showPanelHeader,\n    'multiple-panel-middle': isMiddleMultiplePanel,\n    'multiple-panel-last-without-header':\n      isLastMultiplePanel && !showPanelHeader,\n    'multiple-panel-last': isLastMultiplePanel,\n    'panel-border': !isFirstMultiplePanel,\n    'spiderly-panel': true,\n    'panel-header-cursor-pointer': toggler === 'header' && toggleable,\n  }\"\n  [toggleable]=\"toggleable\"\n  [toggler]=\"toggler\"\n  [collapsed]=\"toggleable && collapsed\"\n  expandIcon=\"pi pi-chevron-up\"\n  collapseIcon=\"pi pi-chevron-down\"\n>\n  <ng-template pTemplate=\"header\">\n    <div>\n      <ng-content select=\"panel-header\"></ng-content>\n      <ng-content select=\"[panelHeader]\"></ng-content>\n    </div>\n  </ng-template>\n\n  <ng-template pTemplate=\"icons\">\n    <div *ngIf=\"showCrudMenu && crudMenu\" class=\"mr-2\">\n      <i\n        class=\"pi pi-ellipsis-h icon-hover\"\n        (click)=\"menuItemClick(index, $event)\"\n      ></i>\n      <!-- https://github.com/primefaces/primeng/issues/13934 -->\n      <p-menu\n        #menu\n        [model]=\"crudMenu\"\n        [popup]=\"true\"\n        appendTo=\"body\"\n        [tabindex]=\"undefined\"\n      ></p-menu>\n    </div>\n    <div *ngIf=\"showRemoveIcon\" class=\"mr-2\">\n      <i\n        class=\"pi pi-minus icon-hover error-color-light\"\n        (click)=\"removeItemClick()\"\n      ></i>\n    </div>\n  </ng-template>\n\n  <div class=\"panel-body-wrapper\">\n    <ng-content select=\"panel-body\"></ng-content>\n  </div>\n\n  <ng-content select=\"panel-footer\"></ng-content>\n</p-panel>\n", styles: [":host ::ng-deep .spiderly-panel .p-panel-content{padding:0}:host ::ng-deep .p-panel{overflow:hidden}:host ::ng-deep .p-panel-icons{display:flex;align-items:center}:host ::ng-deep .panel-header-cursor-pointer .p-panel-header{cursor:pointer!important}.multiple-panel-first-without-header .p-panel{border-bottom-left-radius:0;border-bottom-right-radius:0;border-top:1px solid var(--surface-border);border-top-left-radius:var(--p-content-border-radius);border-top-right-radius:var(--p-content-border-radius);border-bottom:none}.multiple-panel-middle-without-header .p-panel{border-radius:0/0px;border-top:1px solid var(--surface-border);border-bottom:none}.multiple-panel-last-without-header .p-panel{border-bottom-left-radius:var(--p-content-border-radius);border-bottom-right-radius:var(--p-content-border-radius);border-top:1px solid var(--surface-border);border-top-left-radius:0;border-top-right-radius:0}.multiple-panel-first .p-panel{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:none}.panel-border .p-panel{border-bottom-left-radius:var(--p-content-border-radius);border-bottom-right-radius:var(--p-content-border-radius);border-bottom:1px solid var(--surface-border)}.multiple-panel-middle .p-panel{border-radius:0;border-bottom:none}.multiple-panel-last .p-panel{border-top-left-radius:0;border-top-right-radius:0}.panel-body-wrapper{padding:18px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i4$9.Panel, selector: "p-panel", inputs: ["toggleable", "header", "collapsed", "style", "styleClass", "iconPos", "expandIcon", "collapseIcon", "showHeader", "toggler", "transitionOptions", "toggleButtonProps"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyPanelComponent, isStandalone: false, selector: "spiderly-panel", inputs: { isFirstMultiplePanel: "isFirstMultiplePanel", isMiddleMultiplePanel: "isMiddleMultiplePanel", isLastMultiplePanel: "isLastMultiplePanel", toggleable: "toggleable", toggler: "toggler", collapsed: "collapsed", crudMenu: "crudMenu", showCrudMenu: "showCrudMenu", showRemoveIcon: "showRemoveIcon", index: "index", showPanelHeader: "showPanelHeader" }, outputs: { onMenuIconClick: "onMenuIconClick", onRemoveIconClick: "onRemoveIconClick" }, viewQueries: [{ propertyName: "menu", first: true, predicate: ["menu"], descendants: true }], ngImport: i0, template: "<p-panel\n  [showHeader]=\"showPanelHeader\"\n  [ngClass]=\"{\n    'multiple-panel-first-without-header':\n      isFirstMultiplePanel && !showPanelHeader,\n    'multiple-panel-first': isFirstMultiplePanel,\n    'multiple-panel-middle-without-header':\n      isMiddleMultiplePanel && !showPanelHeader,\n    'multiple-panel-middle': isMiddleMultiplePanel,\n    'multiple-panel-last-without-header':\n      isLastMultiplePanel && !showPanelHeader,\n    'multiple-panel-last': isLastMultiplePanel,\n    'panel-border': !isFirstMultiplePanel,\n    'spiderly-panel': true,\n    'panel-header-cursor-pointer': toggler === 'header' && toggleable,\n  }\"\n  [toggleable]=\"toggleable\"\n  [toggler]=\"toggler\"\n  [collapsed]=\"toggleable && collapsed\"\n  expandIcon=\"pi pi-chevron-up\"\n  collapseIcon=\"pi pi-chevron-down\"\n>\n  <ng-template pTemplate=\"header\">\n    <div>\n      <ng-content select=\"panel-header\"></ng-content>\n      <ng-content select=\"[panelHeader]\"></ng-content>\n    </div>\n  </ng-template>\n\n  <ng-template pTemplate=\"icons\">\n    <div *ngIf=\"showCrudMenu && crudMenu\" class=\"mr-2\">\n      <i\n        class=\"pi pi-ellipsis-h icon-hover\"\n        (click)=\"menuItemClick(index, $event)\"\n      ></i>\n      <!-- https://github.com/primefaces/primeng/issues/13934 -->\n      <p-menu\n        #menu\n        [model]=\"crudMenu\"\n        [popup]=\"true\"\n        appendTo=\"body\"\n        [tabindex]=\"undefined\"\n      ></p-menu>\n    </div>\n    <div *ngIf=\"showRemoveIcon\" class=\"mr-2\">\n      <i\n        class=\"pi pi-minus icon-hover error-color-light\"\n        (click)=\"removeItemClick()\"\n      ></i>\n    </div>\n  </ng-template>\n\n  <div class=\"panel-body-wrapper\">\n    <ng-content select=\"panel-body\"></ng-content>\n  </div>\n\n  <ng-content select=\"panel-footer\"></ng-content>\n</p-panel>\n", styles: [":host ::ng-deep .spiderly-panel .p-panel-content{padding:0}:host ::ng-deep .p-panel{overflow:hidden}:host ::ng-deep .p-panel-icons{display:flex;align-items:center}:host ::ng-deep .panel-header-cursor-pointer .p-panel-header{cursor:pointer!important}.multiple-panel-first-without-header .p-panel{border-bottom-left-radius:0;border-bottom-right-radius:0;border-top:1px solid var(--surface-border);border-top-left-radius:var(--p-content-border-radius);border-top-right-radius:var(--p-content-border-radius);border-bottom:none}.multiple-panel-middle-without-header .p-panel{border-radius:0/0px;border-top:1px solid var(--surface-border);border-bottom:none}.multiple-panel-last-without-header .p-panel{border-bottom-left-radius:var(--p-content-border-radius);border-bottom-right-radius:var(--p-content-border-radius);border-top:1px solid var(--surface-border);border-top-left-radius:0;border-top-right-radius:0}.multiple-panel-first .p-panel{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:none}.panel-border .p-panel{border-bottom-left-radius:var(--p-content-border-radius);border-bottom-right-radius:var(--p-content-border-radius);border-bottom:1px solid var(--surface-border)}.multiple-panel-middle .p-panel{border-radius:0;border-bottom:none}.multiple-panel-last .p-panel{border-top-left-radius:0;border-top-right-radius:0}.panel-body-wrapper{padding:18px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i4$8.Panel, selector: "p-panel", inputs: ["toggleable", "header", "collapsed", "style", "styleClass", "iconPos", "expandIcon", "collapseIcon", "showHeader", "toggler", "transitionOptions", "toggleButtonProps"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyPanelComponent, decorators: [{
             type: Component,
@@ -2928,7 +2962,7 @@ class VerificationWrapperComponent extends BaseFormComponent {
         this.onResendVerificationToken.next(null);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: VerificationWrapperComponent, deps: [{ token: i0.KeyValueDiffers }, { token: i1$2.HttpClient }, { token: SpiderlyMessageService }, { token: i0.ChangeDetectorRef }, { token: i3$2.Router }, { token: i3$2.ActivatedRoute }, { token: i1.TranslocoService }, { token: BaseFormService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: VerificationWrapperComponent, isStandalone: true, selector: "verification-wrapper", inputs: { email: "email" }, outputs: { onResendVerificationToken: "onResendVerificationToken", onCodeSubmit: "onCodeSubmit" }, usesInheritance: true, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  <div\n    class=\"min-h-screen\"\n    style=\"display: flex; justify-content: center; align-items: center\"\n  >\n    <div class=\"dialog\" style=\"padding: 0px\">\n      @if (verificationTokenRequestFormGroup != null) {\n        <spiderly-panel>\n          <panel-header\n            [title]=\"t('AccountVerificationHeader')\"\n            [showBigTitle]=\"true\"\n            icon=\"pi pi-envelope\"\n          ></panel-header>\n\n          <panel-body>\n            <form class=\"spiderly-grid\">\n              <div class=\"col-8\">\n                <div style=\"font-size: 17.5px\">\n                  {{ t(\"AccountVerificationTitle\") }}\n                </div>\n              </div>\n              <div class=\"col-8\">\n                {{ t(\"AccountVerificationDescription\", { email: email }) }}\n              </div>\n              <div class=\"col-8\">\n                <!--\n                  PrimeNG's InputOtp calls event.preventDefault() on the Enter keydown\n                  (Enter is a non-digit while integerOnly is on, and once all tokens are\n                  filled it blocks every key but Delete), which kills the browser's\n                  implicit submit via the type=\"submit\" button. Wire Enter straight to\n                  codeSubmit() so \"paste the code + Enter\" still submits. preventDefault\n                  doesn't stop propagation, so this bubbled keydown listener still fires.\n                -->\n                <p-inputOtp\n                  [formControl]=\"verificationTokenRequestFormGroup.getControl('verificationCode')\"\n                  [length]=\"6\"\n                  [integerOnly]=\"true\"\n                  [autofocus]=\"true\"\n                  (keydown.enter)=\"codeSubmit()\"\n                ></p-inputOtp>\n              </div>\n              <div class=\"col-8\">\n                <spiderly-button\n                  (onClick)=\"codeSubmit()\"\n                  [label]=\"t('Submit')\"\n                  icon=\"pi pi-verified\"\n                  type=\"submit\"\n                ></spiderly-button>\n              </div>\n            </form>\n          </panel-body>\n\n          <panel-footer>\n            <a\n              pButton\n              class=\"p-button-link\"\n              [label]=\"t('GoToGmail')\"\n              icon=\"pi pi-external-link\"\n              href=\"https://mail.google.com/mail/u/\"\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n            ></a>\n            <a\n              pButton\n              class=\"p-button-link\"\n              [label]=\"t('GoToYahoo')\"\n              icon=\"pi pi-external-link\"\n              href=\"https://mail.yahoo.com/d/folders/1/\"\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n            ></a>\n          </panel-footer>\n          <panel-footer>\n            <div>\n              {{ t(\"ResendVerificationCodeFirstPart\") }}\n              <a class=\"link\" (click)=\"resendVerificationToken()\">{{\n                t(\"ResendVerificationCodeLinkSecondPart\")\n              }}</a>\n            </div>\n          </panel-footer>\n        </spiderly-panel>\n      } @else {\n        <!-- TODO FT: Add skeleton -->\n      }\n    </div>\n  </div>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: SpiderlyControlsModule }, { kind: "component", type: SpiderlyButtonComponent, selector: "spiderly-button", inputs: ["type"] }, { kind: "ngmodule", type: SpiderlyPanelsModule }, { kind: "component", type: PanelHeaderComponent, selector: "panel-header", inputs: ["title", "showBigTitle", "showIcon", "icon", "index", "tabs"] }, { kind: "component", type: PanelBodyComponent, selector: "panel-body", inputs: ["normalBottomPadding"] }, { kind: "component", type: PanelFooterComponent, selector: "panel-footer" }, { kind: "component", type: SpiderlyPanelComponent, selector: "spiderly-panel", inputs: ["isFirstMultiplePanel", "isMiddleMultiplePanel", "isLastMultiplePanel", "toggleable", "toggler", "collapsed", "crudMenu", "showCrudMenu", "showRemoveIcon", "index", "showPanelHeader"], outputs: ["onMenuIconClick", "onRemoveIconClick"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i12.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: InputOtp, selector: "p-inputOtp, p-inputotp, p-input-otp", inputs: ["invalid", "disabled", "readonly", "variant", "tabindex", "length", "styleClass", "mask", "integerOnly", "autofocus", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: VerificationWrapperComponent, isStandalone: true, selector: "verification-wrapper", inputs: { email: "email" }, outputs: { onResendVerificationToken: "onResendVerificationToken", onCodeSubmit: "onCodeSubmit" }, usesInheritance: true, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  <div\n    class=\"min-h-screen\"\n    style=\"display: flex; justify-content: center; align-items: center\"\n  >\n    <div class=\"dialog\" style=\"padding: 0px\">\n      @if (verificationTokenRequestFormGroup != null) {\n        <spiderly-panel>\n          <panel-header\n            [title]=\"t('AccountVerificationHeader')\"\n            [showBigTitle]=\"true\"\n            icon=\"pi pi-envelope\"\n          ></panel-header>\n\n          <panel-body>\n            <form class=\"spiderly-grid\">\n              <div class=\"col-8\">\n                <div style=\"font-size: 17.5px\">\n                  {{ t(\"AccountVerificationTitle\") }}\n                </div>\n              </div>\n              <div class=\"col-8\">\n                {{ t(\"AccountVerificationDescription\", { email: email }) }}\n              </div>\n              <div class=\"col-8\">\n                <!--\n                  PrimeNG's InputOtp calls event.preventDefault() on the Enter keydown\n                  (Enter is a non-digit while integerOnly is on, and once all tokens are\n                  filled it blocks every key but Delete), which kills the browser's\n                  implicit submit via the type=\"submit\" button. Wire Enter straight to\n                  codeSubmit() so \"paste the code + Enter\" still submits. preventDefault\n                  doesn't stop propagation, so this bubbled keydown listener still fires.\n                -->\n                <p-inputOtp\n                  [formControl]=\"verificationTokenRequestFormGroup.getControl('verificationCode')\"\n                  [length]=\"6\"\n                  [integerOnly]=\"true\"\n                  [autofocus]=\"true\"\n                  (keydown.enter)=\"codeSubmit()\"\n                ></p-inputOtp>\n              </div>\n              <div class=\"col-8\">\n                <spiderly-button\n                  (onClick)=\"codeSubmit()\"\n                  [label]=\"t('Submit')\"\n                  icon=\"pi pi-verified\"\n                  type=\"submit\"\n                ></spiderly-button>\n              </div>\n            </form>\n          </panel-body>\n\n          <panel-footer>\n            <a\n              pButton\n              class=\"p-button-link\"\n              [label]=\"t('GoToGmail')\"\n              icon=\"pi pi-external-link\"\n              href=\"https://mail.google.com/mail/u/\"\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n            ></a>\n            <a\n              pButton\n              class=\"p-button-link\"\n              [label]=\"t('GoToYahoo')\"\n              icon=\"pi pi-external-link\"\n              href=\"https://mail.yahoo.com/d/folders/1/\"\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n            ></a>\n          </panel-footer>\n          <panel-footer>\n            <div>\n              {{ t(\"ResendVerificationCodeFirstPart\") }}\n              <a class=\"link\" (click)=\"resendVerificationToken()\">{{\n                t(\"ResendVerificationCodeLinkSecondPart\")\n              }}</a>\n            </div>\n          </panel-footer>\n        </spiderly-panel>\n      } @else {\n        <!-- TODO FT: Add skeleton -->\n      }\n    </div>\n  </div>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: SpiderlyControlsModule }, { kind: "component", type: SpiderlyButtonComponent, selector: "spiderly-button", inputs: ["type"] }, { kind: "ngmodule", type: SpiderlyPanelsModule }, { kind: "component", type: PanelHeaderComponent, selector: "panel-header", inputs: ["title", "showBigTitle", "showIcon", "icon", "index", "tabs"] }, { kind: "component", type: PanelBodyComponent, selector: "panel-body", inputs: ["normalBottomPadding"] }, { kind: "component", type: PanelFooterComponent, selector: "panel-footer" }, { kind: "component", type: SpiderlyPanelComponent, selector: "spiderly-panel", inputs: ["isFirstMultiplePanel", "isMiddleMultiplePanel", "isLastMultiplePanel", "toggleable", "toggler", "collapsed", "crudMenu", "showCrudMenu", "showRemoveIcon", "index", "showPanelHeader"], outputs: ["onMenuIconClick", "onRemoveIconClick"] }, { 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: "component", type: InputOtp, selector: "p-inputOtp, p-inputotp, p-input-otp", inputs: ["invalid", "disabled", "readonly", "variant", "tabindex", "length", "styleClass", "mask", "integerOnly", "autofocus", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: VerificationWrapperComponent, decorators: [{
             type: Component,
@@ -3574,7 +3608,7 @@ class ProfileAvatarComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: ProfileAvatarComponent, deps: [{ token: LayoutServiceBase }, { token: AuthServiceBase }, { token: i3$2.Router }, { token: i1.TranslocoService }, { token: ConfigServiceBase }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: ProfileAvatarComponent, isStandalone: true, selector: "spiderly-profile-avatar", inputs: { isSideMenuLayout: "isSideMenuLayout", routeOnLargeProfileAvatarClick: "routeOnLargeProfileAvatarClick", showLoginButton: "showLoginButton", routeToLoginPage: "routeToLoginPage", loginButtonOutlined: "loginButtonOutlined", loginButtonSeverity: "loginButtonSeverity", loginButtonSize: "loginButtonSize", menuItems: "menuItems" }, outputs: { onLoginButtonClick: "onLoginButtonClick" }, viewQueries: [{ propertyName: "menu", first: true, predicate: ["topbarmenu"], descendants: true }, { propertyName: "topbarProfileDropdownMenuButton", first: true, predicate: ["topbarprofiledropdownmenubutton"], descendants: true }], ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  <div *ngIf=\"this.currentUser != null\" #topbarmenu>\n    <div\n      #topbarprofiledropdownmenubutton\n      (click)=\"layoutService.showProfileDropdownSidebar()\"\n    >\n      <p-avatar\n        *ngIf=\"showProfileIcon\"\n        [label]=\"avatarLabel\"\n        [style]=\"{\n          'background-color': 'var(--p-primary-color)',\n          color: '#fff',\n          cursor: 'pointer',\n          width: '34px',\n          height: '34px',\n          'font-size': '21px',\n        }\"\n      />\n    </div>\n    <div #topbarprofiledropdownmenu (document:click)=\"onDocumentClick($event)\">\n      <div\n        *ngIf=\"layoutService.state.profileDropdownSidebarVisible\"\n        style=\"\n          width: 280px;\n          position: absolute;\n          padding: 15px;\n          background: var(--p-content-background);\n        \"\n        class=\"card\"\n        [ngClass]=\"{\n          'side-menu-profile-dialog': isSideMenuLayout,\n          'top-menu-profile-dialog': !isSideMenuLayout,\n        }\"\n      >\n        <div\n          style=\"\n            display: flex;\n            flex-direction: column;\n            justify-content: center;\n            text-align: center;\n            gap: 10px;\n          \"\n        >\n          <p-avatar\n            [label]=\"avatarLabel\"\n            size=\"xlarge\"\n            [style]=\"{\n              'background-color': 'var(--p-primary-color)',\n              color: '#fff',\n              margin: 'auto',\n              cursor: routeOnLargeProfileAvatarClick ? 'pointer' : '',\n            }\"\n            (click)=\"routeToUserPage()\"\n          />\n          <div style=\"font-size: 15px\">{{ currentUser?.email }}</div>\n        </div>\n        <div style=\"margin-top: 15px\">\n          <div\n            *ngFor=\"let item of menuItems\"\n            [style]=\"item.showSeparator ? 'margin-top: 5px;' : ''\"\n          >\n            <div *ngIf=\"item.showSeparator\" class=\"gray-separator\"></div>\n            <div\n              (click)=\"item.onClick()\"\n              class=\"hover-card\"\n              style=\"\n                display: flex;\n                align-items: center;\n                gap: 8px;\n                margin-top: 5px;\n              \"\n            >\n              <i\n                class=\"pi pi-fw {{ item.icon }}\"\n                style=\"font-size: 16px; position: relative\"\n              ></i>\n              <div style=\"font-size: 15px\">{{ item.label }}</div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div *ngIf=\"this.currentUser == null && this.showLoginButton\">\n    <spiderly-button\n      [label]=\"t('Login')\"\n      (onClick)=\"loginButtonClick()\"\n      icon=\"pi pi-sign-in\"\n      [outlined]=\"loginButtonOutlined\"\n      [severity]=\"loginButtonSeverity\"\n      [size]=\"loginButtonSize\"\n    ></spiderly-button>\n  </div>\n</ng-container>\n", styles: [".side-menu-profile-dialog{right:26px;top:60px}.top-menu-profile-dialog{right:0;top:40px}\n"], dependencies: [{ 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: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i7.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "component", type: SpiderlyButtonComponent, selector: "spiderly-button", inputs: ["type"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: ProfileAvatarComponent, isStandalone: true, selector: "spiderly-profile-avatar", inputs: { isSideMenuLayout: "isSideMenuLayout", routeOnLargeProfileAvatarClick: "routeOnLargeProfileAvatarClick", showLoginButton: "showLoginButton", routeToLoginPage: "routeToLoginPage", loginButtonOutlined: "loginButtonOutlined", loginButtonSeverity: "loginButtonSeverity", loginButtonSize: "loginButtonSize", menuItems: "menuItems" }, outputs: { onLoginButtonClick: "onLoginButtonClick" }, viewQueries: [{ propertyName: "menu", first: true, predicate: ["topbarmenu"], descendants: true }, { propertyName: "topbarProfileDropdownMenuButton", first: true, predicate: ["topbarprofiledropdownmenubutton"], descendants: true }], ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  <div *ngIf=\"this.currentUser != null\" #topbarmenu>\n    <div\n      #topbarprofiledropdownmenubutton\n      (click)=\"layoutService.showProfileDropdownSidebar()\"\n    >\n      <p-avatar\n        *ngIf=\"showProfileIcon\"\n        [label]=\"avatarLabel\"\n        [style]=\"{\n          'background-color': 'var(--p-primary-color)',\n          color: '#fff',\n          cursor: 'pointer',\n          width: '34px',\n          height: '34px',\n          'font-size': '21px',\n        }\"\n      />\n    </div>\n    <div #topbarprofiledropdownmenu (document:click)=\"onDocumentClick($event)\">\n      <div\n        *ngIf=\"layoutService.state.profileDropdownSidebarVisible\"\n        style=\"\n          width: 280px;\n          position: absolute;\n          padding: 15px;\n          background: var(--p-content-background);\n        \"\n        class=\"card\"\n        [ngClass]=\"{\n          'side-menu-profile-dialog': isSideMenuLayout,\n          'top-menu-profile-dialog': !isSideMenuLayout,\n        }\"\n      >\n        <div\n          style=\"\n            display: flex;\n            flex-direction: column;\n            justify-content: center;\n            text-align: center;\n            gap: 10px;\n          \"\n        >\n          <p-avatar\n            [label]=\"avatarLabel\"\n            size=\"xlarge\"\n            [style]=\"{\n              'background-color': 'var(--p-primary-color)',\n              color: '#fff',\n              margin: 'auto',\n              cursor: routeOnLargeProfileAvatarClick ? 'pointer' : '',\n            }\"\n            (click)=\"routeToUserPage()\"\n          />\n          <div style=\"font-size: 15px\">{{ currentUser?.email }}</div>\n        </div>\n        <div style=\"margin-top: 15px\">\n          <div\n            *ngFor=\"let item of menuItems\"\n            [style]=\"item.showSeparator ? 'margin-top: 5px;' : ''\"\n          >\n            <div *ngIf=\"item.showSeparator\" class=\"gray-separator\"></div>\n            <div\n              (click)=\"item.onClick()\"\n              class=\"hover-card\"\n              style=\"\n                display: flex;\n                align-items: center;\n                gap: 8px;\n                margin-top: 5px;\n              \"\n            >\n              <i\n                class=\"pi pi-fw {{ item.icon }}\"\n                style=\"font-size: 16px; position: relative\"\n              ></i>\n              <div style=\"font-size: 15px\">{{ item.label }}</div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div *ngIf=\"this.currentUser == null && this.showLoginButton\">\n    <spiderly-button\n      [label]=\"t('Login')\"\n      (onClick)=\"loginButtonClick()\"\n      icon=\"pi pi-sign-in\"\n      [outlined]=\"loginButtonOutlined\"\n      [severity]=\"loginButtonSeverity\"\n      [size]=\"loginButtonSize\"\n    ></spiderly-button>\n  </div>\n</ng-container>\n", styles: [".side-menu-profile-dialog{right:26px;top:60px}.top-menu-profile-dialog{right:0;top:40px}\n"], dependencies: [{ 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: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i7$1.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "component", type: SpiderlyButtonComponent, selector: "spiderly-button", inputs: ["type"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: ProfileAvatarComponent, decorators: [{
             type: Component,
@@ -3680,7 +3714,7 @@ class TopBarComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: TopBarComponent, deps: [{ token: AuthServiceBase }, { token: ConfigServiceBase }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: TopBarComponent, isStandalone: true, selector: "spiderly-topbar", inputs: { menu: "menu", showHoverBgOnRootItems: "showHoverBgOnRootItems" }, ngImport: i0, template: "<div class=\"topbar-wrapper\">\n  <nav\n    class=\"topbar {{\n      showHoverBgOnRootItems ? '' : 'show-hover-bg-on-root-items'\n    }}\"\n  >\n    <p-menubar [model]=\"menu\" [style]=\"{ border: '0' }\">\n      <ng-template #start>\n        <img\n          style=\"margin-left: 11px; cursor: pointer\"\n          width=\"45\"\n          height=\"45\"\n          routerLink=\"/\"\n          [src]=\"logoPath\"\n          alt=\"Logo\"\n        />\n      </ng-template>\n      <ng-template #end>\n        <div\n          style=\"\n            margin-right: 11px;\n            display: flex;\n            gap: 10px;\n            align-items: center;\n            position: relative;\n          \"\n        >\n          <div>\n            <ng-content select=\"[ACTIONS]\"></ng-content>\n          </div>\n          <spiderly-profile-avatar\n            [isSideMenuLayout]=\"false\"\n          ></spiderly-profile-avatar>\n        </div>\n      </ng-template>\n    </p-menubar>\n  </nav>\n</div>\n", styles: [".topbar-wrapper{background-color:var(--p-content-background);width:100%;border-bottom:1px solid var(--p-content-border-color);box-shadow:0 4px 6px #0000001a;position:sticky;top:0;left:0;z-index:1000}.topbar{max-width:1100px;margin:auto}::ng-deep .show-hover-bg-on-root-items .p-menubar-root-list>.p-menubar-item>.p-menubar-item-content{background-color:transparent!important}::ng-deep .p-menubar-item-link{background-color:transparent!important;padding:10px!important;font-size:15px!important}::ng-deep .p-menubar-item-link .pi{font-size:15px}::ng-deep .p-menubar-button{width:35px!important;height:35px!important}::ng-deep .p-menubar-button .p-icon{width:16px;height:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i3$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MenubarModule }, { kind: "component", type: i4$a.Menubar, selector: "p-menubar", inputs: ["model", "style", "styleClass", "autoZIndex", "baseZIndex", "autoDisplay", "autoHide", "breakpoint", "autoHideDelay", "id", "ariaLabel", "ariaLabelledBy"], outputs: ["onFocus", "onBlur"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: ProfileAvatarComponent, selector: "spiderly-profile-avatar", inputs: ["isSideMenuLayout", "routeOnLargeProfileAvatarClick", "showLoginButton", "routeToLoginPage", "loginButtonOutlined", "loginButtonSeverity", "loginButtonSize", "menuItems"], outputs: ["onLoginButtonClick"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: TopBarComponent, isStandalone: true, selector: "spiderly-topbar", inputs: { menu: "menu", showHoverBgOnRootItems: "showHoverBgOnRootItems" }, ngImport: i0, template: "<div class=\"topbar-wrapper\">\n  <nav\n    class=\"topbar {{\n      showHoverBgOnRootItems ? '' : 'show-hover-bg-on-root-items'\n    }}\"\n  >\n    <p-menubar [model]=\"menu\" [style]=\"{ border: '0' }\">\n      <ng-template #start>\n        <img\n          style=\"margin-left: 11px; cursor: pointer\"\n          width=\"45\"\n          height=\"45\"\n          routerLink=\"/\"\n          [src]=\"logoPath\"\n          alt=\"Logo\"\n        />\n      </ng-template>\n      <ng-template #end>\n        <div\n          style=\"\n            margin-right: 11px;\n            display: flex;\n            gap: 10px;\n            align-items: center;\n            position: relative;\n          \"\n        >\n          <div>\n            <ng-content select=\"[ACTIONS]\"></ng-content>\n          </div>\n          <spiderly-profile-avatar\n            [isSideMenuLayout]=\"false\"\n          ></spiderly-profile-avatar>\n        </div>\n      </ng-template>\n    </p-menubar>\n  </nav>\n</div>\n", styles: [".topbar-wrapper{background-color:var(--p-content-background);width:100%;border-bottom:1px solid var(--p-content-border-color);box-shadow:0 4px 6px #0000001a;position:sticky;top:0;left:0;z-index:1000}.topbar{max-width:1100px;margin:auto}::ng-deep .show-hover-bg-on-root-items .p-menubar-root-list>.p-menubar-item>.p-menubar-item-content{background-color:transparent!important}::ng-deep .p-menubar-item-link{background-color:transparent!important;padding:10px!important;font-size:15px!important}::ng-deep .p-menubar-item-link .pi{font-size:15px}::ng-deep .p-menubar-button{width:35px!important;height:35px!important}::ng-deep .p-menubar-button .p-icon{width:16px;height:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i3$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MenubarModule }, { kind: "component", type: i4$9.Menubar, selector: "p-menubar", inputs: ["model", "style", "styleClass", "autoZIndex", "baseZIndex", "autoDisplay", "autoHide", "breakpoint", "autoHideDelay", "id", "ariaLabel", "ariaLabelledBy"], outputs: ["onFocus", "onBlur"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: ProfileAvatarComponent, selector: "spiderly-profile-avatar", inputs: ["isSideMenuLayout", "routeOnLargeProfileAvatarClick", "showLoginButton", "routeToLoginPage", "loginButtonOutlined", "loginButtonSeverity", "loginButtonSize", "menuItems"], outputs: ["onLoginButtonClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: TopBarComponent, decorators: [{
             type: Component,
@@ -3853,7 +3887,7 @@ class NotFoundComponent {
         this.logoPath = this.config.logoPath;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NotFoundComponent, deps: [{ token: ConfigServiceBase }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: NotFoundComponent, isStandalone: true, selector: "not-found", ngImport: i0, template: "<div class=\"flex min-h-screen overflow-hidden\" style=\"padding: 20px\">\n  <div class=\"flex flex-col w-full\">\n    <div\n      class=\"w-full sm:w-[30rem]\"\n      style=\"\n        margin: auto;\n        border-radius: 50px;\n        padding: 0.3rem;\n        background: linear-gradient(\n          180deg,\n          var(--p-primary-color) 10%,\n          rgba(33, 150, 243, 0) 30%\n        );\n      \"\n    >\n      <div class=\"surface-card py-12 px-8 sm:px-12\" style=\"border-radius: 45px\">\n        <div class=\"text-center\">\n          <img\n            [src]=\"logoPath\"\n            alt=\"{{ companyName }} Logo\"\n            title=\"{{ companyName }} Logo\"\n            height=\"60\"\n            class=\"mb-6\"\n          />\n        </div>\n        <h1 class=\"mb-6\">\n          <div class=\"font-bold text-5xl lg:text-6xl spiderly-gradient-title\">\n            404\n          </div>\n          <div class=\"font-bold text-5xl lg:text-6xl\">Page Not Found</div>\n        </h1>\n        <div class=\"text-gray-600 text-lg mb-8\">\n          The page you're looking for doesn't exist or has been moved. Let's get\n          you back on track.\n        </div>\n        <div>\n          <p-button [routerLink]=\"['/']\" label=\"Go to Homepage\"></p-button>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i3$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i12.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: NotFoundComponent, isStandalone: true, selector: "not-found", ngImport: i0, template: "<div class=\"flex min-h-screen overflow-hidden\" style=\"padding: 20px\">\n  <div class=\"flex flex-col w-full\">\n    <div\n      class=\"w-full sm:w-[30rem]\"\n      style=\"\n        margin: auto;\n        border-radius: 50px;\n        padding: 0.3rem;\n        background: linear-gradient(\n          180deg,\n          var(--p-primary-color) 10%,\n          rgba(33, 150, 243, 0) 30%\n        );\n      \"\n    >\n      <div class=\"surface-card py-12 px-8 sm:px-12\" style=\"border-radius: 45px\">\n        <div class=\"text-center\">\n          <img\n            [src]=\"logoPath\"\n            alt=\"{{ companyName }} Logo\"\n            title=\"{{ companyName }} Logo\"\n            height=\"60\"\n            class=\"mb-6\"\n          />\n        </div>\n        <h1 class=\"mb-6\">\n          <div class=\"font-bold text-5xl lg:text-6xl spiderly-gradient-title\">\n            404\n          </div>\n          <div class=\"font-bold text-5xl lg:text-6xl\">Page Not Found</div>\n        </h1>\n        <div class=\"text-gray-600 text-lg mb-8\">\n          The page you're looking for doesn't exist or has been moved. Let's get\n          you back on track.\n        </div>\n        <div>\n          <p-button [routerLink]=\"['/']\" label=\"Go to Homepage\"></p-button>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i3$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i3$3.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NotFoundComponent, decorators: [{
             type: Component,
@@ -3936,15 +3970,747 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
                 }]
         }] });
 
-var MatchModeCodes;
-(function (MatchModeCodes) {
-    MatchModeCodes["StartsWith"] = "startsWith";
-    MatchModeCodes["Contains"] = "contains";
-    MatchModeCodes["Equals"] = "equals";
-    MatchModeCodes["LessThan"] = "lessThan";
-    MatchModeCodes["GreaterThan"] = "greaterThan";
-    MatchModeCodes["In"] = "in";
-})(MatchModeCodes || (MatchModeCodes = {}));
+/**
+ * Puts a native `title` on an element while its text is clipped — measured when the pointer
+ * arrives, which is the only moment a native title can surface.
+ *
+ * The data table clamps a default cell to one line (see the `.cell-text` rule), which hides the
+ * value and, before this, offered nothing to read it with — the reason PACMS hand-added `[title]`
+ * on four cells of one grid. Wrapping the column is a choice someone makes; this covers the
+ * default nobody touched.
+ *
+ * Native `title`, never `pTooltip`: it needs a deliberate hover rather than firing as the cursor
+ * crosses a dense list, which is what got the SKU tooltip removed.
+ *
+ * **Measured on hover, not watched.** The first shape ran `ngAfterViewChecked` on every instance
+ * every change-detection cycle (reading `textContent`, which allocates a fresh string each call)
+ * and gave each instance its OWN `ResizeObserver`. On a 100-row grid nineteen columns wide that is
+ * ~1900 hooks per cycle and ~1900 observers in Chrome's per-frame loop — all to decide something
+ * that can only ever be seen one cell at a time. Hover is exactly-in-time, costs nothing until it
+ * happens, and needs no separate handling for a column drag or a resized window: the next hover
+ * re-measures. Nothing is lost for a screen reader either — CSS clipping never hid the text from
+ * the accessibility tree, so the title was only ever a sighted-hover affordance.
+ */
+class SpiderlyOverflowTitleDirective {
+    constructor() {
+        this.el = inject(ElementRef);
+        this.zone = inject(NgZone);
+        this.onPointerEnter = () => this.sync();
+        // Outside the zone: it sets an attribute and touches no bound state, so waking change
+        // detection on every cell the cursor crosses would be pure cost.
+        this.zone.runOutsideAngular(() => this.el.nativeElement.addEventListener('pointerenter', this.onPointerEnter));
+    }
+    ngOnDestroy() {
+        this.el.nativeElement.removeEventListener('pointerenter', this.onPointerEnter);
+    }
+    sync() {
+        const el = this.el.nativeElement;
+        // A one-pixel slack: sub-pixel text metrics make scrollWidth exceed clientWidth by fractions
+        // on text that visibly fits, which would title half the grid.
+        if (el.scrollWidth - el.clientWidth > 1) {
+            el.setAttribute('title', el.textContent ?? '');
+        }
+        else {
+            el.removeAttribute('title');
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyOverflowTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyOverflowTitleDirective, isStandalone: true, selector: "[spiderlyOverflowTitle]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyOverflowTitleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[spiderlyOverflowTitle]',
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Renders the editor for ONE filter of a `spiderly-data-table`'s bar, replacing the control the
+ * bar would have drawn for that filter's kind. Bind it to the filter's id; filters with no
+ * matching template keep the built-in control, so a table opts in one filter at a time.
+ *
+ * This is the narrow job the directive has. Placing a filter ANYWHERE else — a drawer, a modal,
+ * a header cell — needs no directive at all: `store.get(id)` returns the same handle and depends
+ * on nothing in the component tree, which is why the store is the consumer's to own.
+ */
+class SpiderlyFilterTemplateDirective {
+    constructor(template) {
+        this.template = template;
+    }
+    /**
+     * Without this the `let-` variable is `any` at every consumer, however well the context is
+     * declared — a directive's injected `TemplateRef<C>` never reaches the template that declares
+     * it. Same mechanism as `SpiderlyCellTemplateDirective`.
+     */
+    static ngTemplateContextGuard(dir, ctx) {
+        return true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyFilterTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyFilterTemplateDirective, isStandalone: true, selector: "ng-template[spiderlyFilterTemplate]", inputs: { filterId: ["spiderlyFilterTemplate", "filterId"] }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyFilterTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[spiderlyFilterTemplate]',
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }], propDecorators: { filterId: [{
+                type: Input,
+                args: ['spiderlyFilterTemplate']
+            }] } });
+
+/** One option's word for one value — the honest raw value when no option matches (failed lookup). */
+function spellOptionValue(options, value) {
+    return String(options?.find((option) => option.value === value)?.label ?? value);
+}
+/**
+ * Lowercased and stripped of diacritics for matching. NFD decomposition handles č/ć/š/ž, but NOT
+ * đ — it is its own letter (U+0111), not a d carrying a mark, so it decomposes to nothing and has
+ * to be mapped by hand.
+ *
+ * It maps to "dj", which is what the rest of this workspace already does (pa-cms's
+ * `normalizePlaceQuery` and `toAscii`, the backend's `PlaceNameNormalizer`) and what someone
+ * without a Serbian layout actually types. Mapping it to "d" — as this first shipped — folds
+ * "Đorđe" to "dorde", so typing "djordje" finds nothing: the exact case the comment claimed to
+ * fix, and one no spec covered because the test used "drzava", which has no đ in it.
+ */
+function foldForSearch(value) {
+    return value
+        .normalize('NFD')
+        .replace(/[\u0300-\u036f]/g, '')
+        .replace(/\u0111/g, 'dj')
+        .replace(/\u0110/g, 'Dj')
+        .toLowerCase()
+        .trim();
+}
+/**
+ * The visible home of every applied constraint. This is what licenses a hidden column keeping its
+ * filter: the header is no longer the only place a filter can be seen, so hiding a column stops
+ * meaning "silently drop what it was filtering by".
+ *
+ * Everything drawn here comes from `applied()`, never from a draft — a chip over a half-typed
+ * value would repeat the mistake the header's filter icon shipped, claiming the grid is narrowed
+ * while it still shows every row.
+ */
+class SpiderlyFilterBarComponent {
+    constructor() {
+        this.filters = input.required();
+        /** The current query's row count, supplied by whoever owns the query. Null hides the counter. */
+        this.totalRecords = input(null);
+        /**
+         * What the grid is ordered by, in priority order and already LABELLED — the bar knows nothing
+         * about columns, so whoever owns the sort resolves the names.
+         */
+        this.sort = input([]);
+        /** Asked for, never done here — see the button's comment. */
+        this.clearAll = 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);
+        /**
+         * Controls a consumer projected for specific filters, collected by whoever hosts this bar. A
+         * filter with no template keeps the control the bar draws for its kind, so a table opts in one
+         * filter at a time.
+         */
+        this.controlTemplates = input(undefined);
+        this.isAddOpen = 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. */
+        this.editing = signal(null);
+        /**
+         * `addable` narrowed by the search box. Matching is unaccented and case-folded because that is
+         * how the label gets typed: "drzava" for "Država" on any keyboard without a Serbian layout. The
+         * backend's own product search is unaccented for the same reason.
+         */
+        this.offered = computed(() => {
+            const needle = foldForSearch(this.addSearch());
+            if (!needle)
+                return this.addable();
+            return this.addable().filter((option) => foldForSearch(option.label).includes(needle));
+        });
+        /**
+         * What "+ Filter" offers: every declared filter that is not already on the bar. Sourced from the
+         * DEFINITIONS, so a filter reaches this list whether or not it has a column, and whether or not
+         * that column is visible. That is the whole reason the bar exists.
+         *
+         * `offered: false` filters stay out — they have a dedicated control of their own on the page
+         * (PACMS's order search box), so the generic entry point would give one question two homes.
+         * Their chips still render: the applied list above reads no such flag.
+         */
+        this.addable = computed(() => {
+            const onBar = new Set(this.filters().applied().map((chip) => chip.id));
+            return Object.entries(this.filters().definitions)
+                .filter(([id, definition]) => !onBar.has(id) && definition.offered !== false)
+                .map(([id, definition]) => ({ id, ...definition }));
+        });
+        /**
+         * The open editor's operator options, already translated — p-select takes labels, not keys.
+         *
+         * A `computed`, not a method in the binding: both inputs are fixed for the life of an open
+         * editor, and PrimeNG's `Select.options` setter deep-compares whatever it is handed — so a
+         * freshly mapped array per change-detection pass paid for a recursive structural compare to
+         * conclude nothing had changed.
+         */
+        this.operatorChoices = computed(() => {
+            const handle = this.editing();
+            if (!handle)
+                return [];
+            return handle.operators.map((option) => ({
+                label: this.transloco.translate(option.labelKey),
+                value: option.value,
+            }));
+        });
+    }
+    /** Opens a filter's control. Where it renders, and why not a popover: the template comment. */
+    startEditing(id) {
+        this.isAddOpen.set(false);
+        this.editing.set(this.filters().get(id));
+    }
+    /** 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));
+    }
+    controlTemplateFor(handle) {
+        const match = this.controlTemplates()?.find((candidate) => candidate.filterId === handle.id);
+        return match?.template ?? null;
+    }
+    /**
+     * The ONE write path, whatever the control. Every PrimeNG control here hands back a value of
+     * the right type already — a Date from the datepicker, a boolean from the checkbox, the whole
+     * array from the multiselect — so only the raw string ones need coercing, and only they go
+     * through `draft`.
+     */
+    draftValue(handle, value) {
+        handle.set({
+            operator: handle.operator() ?? handle.defaultOperator,
+            value,
+        });
+    }
+    /**
+     * Changing the direction re-commits nothing on its own — it rewrites the draft, so the operator
+     * survives until Apply like the value does.
+     */
+    pickOperator(handle, operator) {
+        handle.set({ operator, value: handle.value() });
+    }
+    /**
+     * A DOM control hands back a string; the store holds the value type the filter declared.
+     *
+     * The empty case is the trap and it is not symmetric: `Number('')` is 0, so an emptied number
+     * box would apply a filter for zero and draw a chip over a control the operator had just
+     * cleared. `NaN` is folded in for the same reason — the store's `isBlank` cannot recognise
+     * either of them as "nothing was entered", because by then they are perfectly good numbers.
+     */
+    coerce(kind, raw) {
+        if (kind !== 'number')
+            return raw;
+        if (raw.trim() === '')
+            return null;
+        const parsed = Number(raw);
+        return Number.isNaN(parsed) ? null : parsed;
+    }
+    apply(handle) {
+        handle.commit();
+        this.editing.set(null);
+    }
+    /**
+     * `In` is the multi-valued operator, so its chip reads as a list — in the OPTIONS' words, not
+     * the wire's: "Status is one of 2, 3" narrates ids nobody chose by number. The lookup is live
+     * off the definition rather than snapshotted at commit, because option lists can be filled
+     * asynchronously (PACMS's admin/backend deploy race): a chip restored before the lookup answers
+     * upgrades from ids to labels the moment the options land, and a failed lookup degrades to the
+     * honest raw value.
+     */
+    chipValue(chip) {
+        // `String(date)` is the full JS toString — a GMT offset and a timezone name on a chip an
+        // operator scans. Same formatDate + LOCALE_ID mechanism the table's cells use; mediumDate,
+        // because shortDate's two-digit year reads badly on a chip claiming a boundary.
+        if (chip.value instanceof Date) {
+            return formatDate(chip.value, 'mediumDate', this.locale);
+        }
+        const options = this.filters().definitions[chip.id]?.options;
+        return Array.isArray(chip.value)
+            ? chip.value.map((value) => spellOptionValue(options, value)).join(', ')
+            : 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: `
+    <ng-container *transloco="let t">
+      <div class="filter-bar" data-testid="filter-bar">
+        @for (chip of filters().applied(); track chip.id) {
+          <span class="filter-chip" data-testid="filter-chip">
+            <!-- The chip body reopens the filter. Once applied it is no longer offered under
+                 "+ Filter", so without this the only way to narrow Elektromont to Elektro is to
+                 delete the filter and rebuild it. -->
+            <button
+              type="button"
+              class="filter-chip-edit"
+              data-testid="filter-chip-edit"
+              (click)="startEditing(chip.id)"
+            >
+              <!-- &ngsp; is a space the template parser keeps. Angular collapses whitespace
+                   between elements by default, which glued these three into
+                   "FirmacontainsElektromont" — how a screen reader reads the chip and how it
+                   lands when copied, not merely how the spec saw it. The flex gap only spaced
+                   them visually. -->
+              <span class="filter-chip-label">{{ chip.label }}</span>&ngsp;
+              <span class="filter-chip-operator">{{
+                t(chip.operatorPhraseKey)
+              }}</span>&ngsp;
+              <span class="filter-chip-value">{{
+                chip.kind === 'boolean'
+                  ? chip.value
+                    ? t('Yes')
+                    : t('No')
+                  : chipValue(chip)
+              }}</span>
+            </button>
+            <button
+              type="button"
+              class="filter-chip-remove"
+              data-testid="filter-chip-remove"
+              [attr.aria-label]="t('RemoveFilter')"
+              (click)="filters().reset(chip.id)"
+            >
+              &times;
+            </button>
+          </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. -->
+          <span class="sort-chip" data-testid="sort-chip">
+            <span class="sort-chip-label">{{ t('SortedBy') }}</span>
+            @for (key of sort(); track key.label; let last = $last) {
+              <span class="sort-chip-key"
+                >{{ key.label }} {{ key.descending ? '↓' : '↑' }}{{
+                  last ? '' : ','
+                }}</span
+              >
+            }
+          </span>
+        }
+
+        @if (totalRecords() !== null) {
+          <!-- What came back, next to the chips that say what was asked. An empty grid under a
+               filter is otherwise a mystery. The CURRENT query's count only: the unfiltered total
+               would cost a second request the paginator does not offer. -->
+          <span class="filter-bar-count" data-testid="filter-bar-count">{{
+            t('ResultCount', { count: totalRecords() })
+          }}</span>
+        }
+
+        @if (addable().length) {
+          <!-- A popover, not an inline list. Seven filters already fill the toolbar row inline,
+               and the orders grid declares nineteen — they would wrap into three lines and shove
+               the table down the page. Shopify's Filters component opens its "more filters" the
+               same way. The teleport into document.body costs the specs a container lookup; that
+               cost belongs to the tests, not to the operator. -->
+          <button
+            pButton
+            type="button"
+            class="p-button-text p-button-sm filter-add"
+            icon="pi pi-plus"
+            [label]="t('AddFilter')"
+            data-testid="add-filter"
+            [attr.aria-expanded]="isAddOpen()"
+            (click)="addMenu.toggle($event); isAddOpen.set(!isAddOpen())"
+          ></button>
+        }
+
+        @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. -->
+          <button
+            pButton
+            type="button"
+            class="p-button-text p-button-sm filter-bar-clear"
+            icon="pi pi-filter-slash"
+            [label]="t('ClearFilters')"
+            data-testid="filter-bar-clear"
+            (click)="clearAll.emit()"
+          ></button>
+        }
+
+        <p-popover #addMenu (onHide)="isAddOpen.set(false); addSearch.set('')">
+          <div class="filter-add-menu" role="menu">
+            <input
+              pInputText
+              pSize="small"
+              type="search"
+              class="filter-add-search"
+              data-testid="add-filter-search"
+              [value]="addSearch()"
+              [attr.aria-label]="t('AddFilter')"
+              [placeholder]="t('Search')"
+              (input)="addSearch.set($any($event.target).value)"
+            />
+
+            @for (option of offered(); track option.id) {
+              <button
+                type="button"
+                role="menuitem"
+                class="filter-add-option"
+                data-testid="add-filter-option"
+                (click)="startEditing(option.id); addMenu.hide()"
+              >
+                {{ option.label }}
+              </button>
+            }
+          </div>
+        </p-popover>
+
+      </div>
+
+      <!-- Its OWN ROW, directly under the chips. It used to render at the end of the bar, where
+           the clear button's auto left margin pushed everything after it to the far right, so the
+           control for the second filter opened across the screen from the click (Filip, on
+           /tags). A popover anchored to the click was tried first and abandoned: PrimeNG's
+           ng-content slot does not re-project content once the editor's @if has destroyed it, so
+           reopening gave an empty container with overlayVisible true. A fixed row is predictable,
+           which is the property the complaint was actually about.
+           NO BACKTICKS IN THIS TEMPLATE: it is a JS template literal and one terminates it, with
+           the error landing lines away. This is the second time. -->
+      @if (editing(); as handle) {
+        <div class="filter-editor" data-testid="filter-editor">
+            <span class="filter-editor-label">{{ handle.label }}</span>
+
+            @if (handle.operators.length > 1) {
+              <p-select
+                size="small"
+                styleClass="filter-editor-operator"
+                data-testid="filter-editor-operator"
+                [options]="operatorChoices()"
+                optionLabel="label"
+                optionValue="value"
+                [ngModel]="handle.operator() ?? handle.defaultOperator"
+                (onChange)="pickOperator(handle, $event.value)"
+              ></p-select>
+            }
+
+            @if (controlTemplateFor(handle); as projected) {
+              <!-- The consumer's own control for this filter. Read the QueryList live rather than
+                   indexing it into a Map: a QueryList already updates itself, and a template
+                   declared inside a @for or an @if would go stale in a cached index. Same
+                   reasoning as getCellTemplate. -->
+              <ng-container
+                *ngTemplateOutlet="projected; context: { $implicit: handle }"
+              ></ng-container>
+            } @else if (handle.options) {
+              <p-multiSelect
+                size="small"
+                styleClass="filter-editor-value"
+                data-testid="filter-editor-value"
+                [options]="handle.options"
+                optionLabel="label"
+                optionValue="value"
+                [placeholder]="t('All')"
+                [ngModel]="handle.value()"
+                (onChange)="draftValue(handle, $event.value)"
+              ></p-multiSelect>
+            } @else if (handle.kind === 'boolean') {
+              <p-checkbox
+                styleClass="filter-editor-value"
+                data-testid="filter-editor-value"
+                [binary]="true"
+                [ngModel]="handle.value() === true"
+                (onChange)="draftValue(handle, $event.checked)"
+              ></p-checkbox>
+            } @else if (handle.kind === 'date') {
+              <p-datepicker
+                size="small"
+                styleClass="filter-editor-value"
+                data-testid="filter-editor-value"
+                [ngModel]="handle.value()"
+                (onSelect)="draftValue(handle, $event)"
+              ></p-datepicker>
+            } @else if (handle.kind === 'text' || handle.kind === 'number') {
+              <!-- A DOM control's raw value is always a string. It is coerced on the way into
+                   the store (see coerce), which is the one place the value type can be got
+                   right. Backticks are forbidden in this template: it is a JS template literal
+                   and one terminates it, with the error landing lines away. -->
+              <input
+                pInputText
+                pSize="small"
+                [type]="handle.kind === 'number' ? 'number' : 'text'"
+                class="filter-editor-value"
+                data-testid="filter-editor-value"
+                [value]="handle.value() ?? ''"
+                (input)="draft(handle, $event)"
+              />
+            } @else {
+              <!-- No control for this kind yet. A text box would write the wrong VALUE TYPE into
+                   the store, which nothing checks at runtime — the operator is checked, the value
+                   is not. Visibly missing beats silently wrong. -->
+              <span data-testid="filter-editor-unsupported">{{
+                t('FilterControlNotAvailable')
+              }}</span>
+            }
+
+          <button
+            pButton
+            type="button"
+            class="p-button-sm filter-editor-apply"
+            [label]="t('Apply')"
+            data-testid="filter-editor-apply"
+            (click)="apply(handle)"
+          ></button>
+        </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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyFilterBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spiderly-filter-bar', imports: [
+                        CommonModule,
+                        FormsModule,
+                        TranslocoDirective,
+                        ButtonModule,
+                        CheckboxModule,
+                        DatePickerModule,
+                        InputTextModule,
+                        MultiSelectModule,
+                        PopoverModule,
+                        SelectModule,
+                    ], template: `
+    <ng-container *transloco="let t">
+      <div class="filter-bar" data-testid="filter-bar">
+        @for (chip of filters().applied(); track chip.id) {
+          <span class="filter-chip" data-testid="filter-chip">
+            <!-- The chip body reopens the filter. Once applied it is no longer offered under
+                 "+ Filter", so without this the only way to narrow Elektromont to Elektro is to
+                 delete the filter and rebuild it. -->
+            <button
+              type="button"
+              class="filter-chip-edit"
+              data-testid="filter-chip-edit"
+              (click)="startEditing(chip.id)"
+            >
+              <!-- &ngsp; is a space the template parser keeps. Angular collapses whitespace
+                   between elements by default, which glued these three into
+                   "FirmacontainsElektromont" — how a screen reader reads the chip and how it
+                   lands when copied, not merely how the spec saw it. The flex gap only spaced
+                   them visually. -->
+              <span class="filter-chip-label">{{ chip.label }}</span>&ngsp;
+              <span class="filter-chip-operator">{{
+                t(chip.operatorPhraseKey)
+              }}</span>&ngsp;
+              <span class="filter-chip-value">{{
+                chip.kind === 'boolean'
+                  ? chip.value
+                    ? t('Yes')
+                    : t('No')
+                  : chipValue(chip)
+              }}</span>
+            </button>
+            <button
+              type="button"
+              class="filter-chip-remove"
+              data-testid="filter-chip-remove"
+              [attr.aria-label]="t('RemoveFilter')"
+              (click)="filters().reset(chip.id)"
+            >
+              &times;
+            </button>
+          </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. -->
+          <span class="sort-chip" data-testid="sort-chip">
+            <span class="sort-chip-label">{{ t('SortedBy') }}</span>
+            @for (key of sort(); track key.label; let last = $last) {
+              <span class="sort-chip-key"
+                >{{ key.label }} {{ key.descending ? '↓' : '↑' }}{{
+                  last ? '' : ','
+                }}</span
+              >
+            }
+          </span>
+        }
+
+        @if (totalRecords() !== null) {
+          <!-- What came back, next to the chips that say what was asked. An empty grid under a
+               filter is otherwise a mystery. The CURRENT query's count only: the unfiltered total
+               would cost a second request the paginator does not offer. -->
+          <span class="filter-bar-count" data-testid="filter-bar-count">{{
+            t('ResultCount', { count: totalRecords() })
+          }}</span>
+        }
+
+        @if (addable().length) {
+          <!-- A popover, not an inline list. Seven filters already fill the toolbar row inline,
+               and the orders grid declares nineteen — they would wrap into three lines and shove
+               the table down the page. Shopify's Filters component opens its "more filters" the
+               same way. The teleport into document.body costs the specs a container lookup; that
+               cost belongs to the tests, not to the operator. -->
+          <button
+            pButton
+            type="button"
+            class="p-button-text p-button-sm filter-add"
+            icon="pi pi-plus"
+            [label]="t('AddFilter')"
+            data-testid="add-filter"
+            [attr.aria-expanded]="isAddOpen()"
+            (click)="addMenu.toggle($event); isAddOpen.set(!isAddOpen())"
+          ></button>
+        }
+
+        @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. -->
+          <button
+            pButton
+            type="button"
+            class="p-button-text p-button-sm filter-bar-clear"
+            icon="pi pi-filter-slash"
+            [label]="t('ClearFilters')"
+            data-testid="filter-bar-clear"
+            (click)="clearAll.emit()"
+          ></button>
+        }
+
+        <p-popover #addMenu (onHide)="isAddOpen.set(false); addSearch.set('')">
+          <div class="filter-add-menu" role="menu">
+            <input
+              pInputText
+              pSize="small"
+              type="search"
+              class="filter-add-search"
+              data-testid="add-filter-search"
+              [value]="addSearch()"
+              [attr.aria-label]="t('AddFilter')"
+              [placeholder]="t('Search')"
+              (input)="addSearch.set($any($event.target).value)"
+            />
+
+            @for (option of offered(); track option.id) {
+              <button
+                type="button"
+                role="menuitem"
+                class="filter-add-option"
+                data-testid="add-filter-option"
+                (click)="startEditing(option.id); addMenu.hide()"
+              >
+                {{ option.label }}
+              </button>
+            }
+          </div>
+        </p-popover>
+
+      </div>
+
+      <!-- Its OWN ROW, directly under the chips. It used to render at the end of the bar, where
+           the clear button's auto left margin pushed everything after it to the far right, so the
+           control for the second filter opened across the screen from the click (Filip, on
+           /tags). A popover anchored to the click was tried first and abandoned: PrimeNG's
+           ng-content slot does not re-project content once the editor's @if has destroyed it, so
+           reopening gave an empty container with overlayVisible true. A fixed row is predictable,
+           which is the property the complaint was actually about.
+           NO BACKTICKS IN THIS TEMPLATE: it is a JS template literal and one terminates it, with
+           the error landing lines away. This is the second time. -->
+      @if (editing(); as handle) {
+        <div class="filter-editor" data-testid="filter-editor">
+            <span class="filter-editor-label">{{ handle.label }}</span>
+
+            @if (handle.operators.length > 1) {
+              <p-select
+                size="small"
+                styleClass="filter-editor-operator"
+                data-testid="filter-editor-operator"
+                [options]="operatorChoices()"
+                optionLabel="label"
+                optionValue="value"
+                [ngModel]="handle.operator() ?? handle.defaultOperator"
+                (onChange)="pickOperator(handle, $event.value)"
+              ></p-select>
+            }
+
+            @if (controlTemplateFor(handle); as projected) {
+              <!-- The consumer's own control for this filter. Read the QueryList live rather than
+                   indexing it into a Map: a QueryList already updates itself, and a template
+                   declared inside a @for or an @if would go stale in a cached index. Same
+                   reasoning as getCellTemplate. -->
+              <ng-container
+                *ngTemplateOutlet="projected; context: { $implicit: handle }"
+              ></ng-container>
+            } @else if (handle.options) {
+              <p-multiSelect
+                size="small"
+                styleClass="filter-editor-value"
+                data-testid="filter-editor-value"
+                [options]="handle.options"
+                optionLabel="label"
+                optionValue="value"
+                [placeholder]="t('All')"
+                [ngModel]="handle.value()"
+                (onChange)="draftValue(handle, $event.value)"
+              ></p-multiSelect>
+            } @else if (handle.kind === 'boolean') {
+              <p-checkbox
+                styleClass="filter-editor-value"
+                data-testid="filter-editor-value"
+                [binary]="true"
+                [ngModel]="handle.value() === true"
+                (onChange)="draftValue(handle, $event.checked)"
+              ></p-checkbox>
+            } @else if (handle.kind === 'date') {
+              <p-datepicker
+                size="small"
+                styleClass="filter-editor-value"
+                data-testid="filter-editor-value"
+                [ngModel]="handle.value()"
+                (onSelect)="draftValue(handle, $event)"
+              ></p-datepicker>
+            } @else if (handle.kind === 'text' || handle.kind === 'number') {
+              <!-- A DOM control's raw value is always a string. It is coerced on the way into
+                   the store (see coerce), which is the one place the value type can be got
+                   right. Backticks are forbidden in this template: it is a JS template literal
+                   and one terminates it, with the error landing lines away. -->
+              <input
+                pInputText
+                pSize="small"
+                [type]="handle.kind === 'number' ? 'number' : 'text'"
+                class="filter-editor-value"
+                data-testid="filter-editor-value"
+                [value]="handle.value() ?? ''"
+                (input)="draft(handle, $event)"
+              />
+            } @else {
+              <!-- No control for this kind yet. A text box would write the wrong VALUE TYPE into
+                   the store, which nothing checks at runtime — the operator is checked, the value
+                   is not. Visibly missing beats silently wrong. -->
+              <span data-testid="filter-editor-unsupported">{{
+                t('FilterControlNotAvailable')
+              }}</span>
+            }
+
+          <button
+            pButton
+            type="button"
+            class="p-button-sm filter-editor-apply"
+            [label]="t('Apply')"
+            data-testid="filter-editor-apply"
+            (click)="apply(handle)"
+          ></button>
+        </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"] }]
+        }] });
 
 class SpiderlyDeleteConfirmationComponent {
     constructor(ref, config) {
@@ -3976,25 +4742,139 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
             args: [{ selector: 'spiderly-delete-confirmation', imports: [SpiderlyButtonComponent, TranslocoDirective, ConfirmDialogModule], providers: [ConfirmationService], template: "<ng-container *transloco=\"let t\">\n  <p-confirmDialog #cd></p-confirmDialog>\n  <div\n    class=\"border-b surface-border text-lg\"\n    style=\"\n      display: flex;\n      align-items: center;\n      padding-bottom: 10px;\n      width: 100%;\n      gap: 10px;\n    \"\n  >\n    <i class=\"pi pi-exclamation-circle text-4xl\"></i>\n    <p>{{ config.data.message }}</p>\n  </div>\n\n  <div\n    style=\"display: flex; gap: 12px; justify-content: right; margin-top: 28px\"\n  >\n    <spiderly-button\n      (onClick)=\"reject()\"\n      icon=\"pi pi-times\"\n      [label]=\"t('Cancel')\"\n      severity=\"secondary\"\n    ></spiderly-button>\n    <spiderly-button\n      (onClick)=\"accept()\"\n      icon=\"pi pi-check\"\n      [label]=\"t('Confirm')\"\n      styleClass=\"p-button-danger\"\n    ></spiderly-button>\n  </div>\n</ng-container>\n" }]
         }], ctorParameters: () => [{ type: i1$5.DynamicDialogRef }, { type: i1$5.DynamicDialogConfig }] });
 
+/**
+ * Default column width per value type, in rem — generous on purpose (these numbers date from when
+ * the header carried a filter input, and nobody has re-derived them from values yet), and
+ * {@link Column.width} is the per-column override.
+ *
+ * A table, not a switch, so the mapping is exhaustive: a new `filterType` fails the build here
+ * instead of silently inheriting the actions-column reservation below.
+ */
+/** One rem in pixels. Both the share arithmetic and the px-to-share conversion need it. */
+function rootFontSizePx() {
+    return parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+}
+const DEFAULT_COLUMN_WIDTH_REM = {
+    text: 12,
+    date: 10,
+    multiselect: 12,
+    boolean: 8,
+    numeric: 12,
+    // Fits the 45px thumbnail `#defaultCell` renders for a blob.
+    blob: 5,
+};
 class SpiderlyDataTableComponent {
-    constructor(router, dialogService, route, messageService, translocoService, configService, locale) {
+    /**
+     * Whether this column is pinned against the left edge. Only the FIRST column, and only when it
+     * is `lockVisible`: a sticky column in the middle of the grid pins the wrong thing and leaves a
+     * hole where it used to be. Once the grid scrolls sideways a row otherwise loses its identity
+     * — "Intesa, plaćeno, 12.400" with no idea whose order it is — and NN/g's Data Tables is
+     * explicit that the leftmost header column must lock in place. `lockVisible` already names
+     * exactly that column in every table, so this needs no new API (CLAUDE.md -> decision 8).
+     */
+    isColumnFrozen(col) {
+        return col.lockVisible === true && this.visibleCols[0] === col;
+    }
+    /**
+     * The rightmost pinned cell, which carries the seam's shadow. It is the identity column when
+     * there is one and the checkbox column otherwise — a fact only this side knows, which is why
+     * the SCSS asking for it as `:last-of-type` drew nothing at all.
+     */
+    isLastFrozenColumn(col) {
+        return this.isColumnFrozen(col);
+    }
+    get isSelectionColumnLastFrozen() {
+        return !this.visibleCols.some((col) => this.isColumnFrozen(col));
+    }
+    /** A frozen column starts after the checkbox column, when there is one. */
+    frozenColumnOffset() {
+        return this.selectionMode === 'multiple' ? `${this.frozenOffsetPx}px` : '0';
+    }
+    /**
+     * Tracks the selection column's rendered width. A ResizeObserver rather than a one-off read:
+     * every column drag and every window resize re-splits the shares, so the offset moves without
+     * anything about the selection column itself changing.
+     */
+    observeSelectionWidth() {
+        const cell = this.selectionHeader()?.nativeElement;
+        if (!cell || this.selectionWidthObserver)
+            return;
+        const measure = () => {
+            const width = cell.offsetWidth;
+            if (width === this.frozenOffsetPx)
+                return;
+            this.zone.run(() => (this.frozenOffsetPx = width));
+        };
+        if (typeof ResizeObserver !== 'undefined') {
+            this.zone.runOutsideAngular(() => {
+                this.selectionWidthObserver = new ResizeObserver(measure);
+                this.selectionWidthObserver.observe(cell);
+            });
+        }
+        // Measured once immediately as well, on a microtask. The observer's first callback arrives an
+        // animation frame later, and until it does the identity column sits at left:0 — on top of the
+        // checkbox column it is supposed to start after. The microtask keeps the write out of the CD
+        // pass that just finished, which doing it inline here would break with an NG0100.
+        queueMicrotask(measure);
+    }
+    constructor(router, dialogService, route, messageService, translocoService, configService, errorHandler, locale) {
         this.router = router;
         this.dialogService = dialogService;
         this.route = route;
         this.messageService = messageService;
         this.translocoService = translocoService;
         this.configService = configService;
+        this.errorHandler = errorHandler;
         this.locale = locale;
         this.destroy$ = new Subject();
+        this.injector = inject(Injector);
+        this.zone = inject(NgZone);
+        /**
+         * The selection column's declared share. Under the fixed layout this is a RATIO, not a width.
+         *
+         * 4rem, down from 6: the original reserved room for a five-digit select-all counter sitting at
+         * body text size beside the box, which is the widest thing it can ever hold and not what it
+         * holds on any ordinary screen. The counter is a smaller step now (see the SCSS), so the same
+         * five digits fit in two thirds of the space.
+         */
+        this.selectionColumnWidth = '4rem';
+        /**
+         * The selection column's MEASURED width, which is what the frozen identity column offsets
+         * itself by. Declaring `6rem` on both looked like the one-telling answer and is wrong: widths
+         * are shares, so that column renders at whatever proportion of the table it gets — 148px for a
+         * declared 6rem in one spec — and the identity column would sit 52px inside it, overlapping the
+         * checkboxes the moment anyone scrolled. The spec caught it; nothing about the page would have.
+         */
+        this.frozenOffsetPx = 0;
+        /** Aborts an in-flight column resize's document listeners, from `onUp` or from teardown. */
+        this.resizeAbort = null;
         this.tableIcon = 'pi pi-list';
         /** 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
+         * 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.
+         */
+        this.activeViewId = null;
         /** Whether the paginator is shown. Pass only when `hasLazyLoad === false`. Defaults to `true`. */
         this.showPaginator = true;
         /** Whether the table is wrapped in a card container. Defaults to `false`. */
         this.showCardWrapper = false;
         this.readonly = false;
         this.idField = 'id';
+        /**
+         * Sizes the columns from their declared widths instead of from the rendered rows.
+         *
+         * The browser default is `table-layout: auto`, which computes every column from the content
+         * of the rows currently on screen — so a column is one width on this page and another on the
+         * next, and a filter (which narrows the variety of values in the column it filters) moves the
+         * whole grid. PrimeNG sets no `table-layout` of its own, so without this the table inherits
+         * that default. Bound to a field, never an object literal in the template: a literal is a new
+         * reference on every change-detection pass.
+         */
+        this.tableStyle = { 'table-layout': 'fixed' };
         this.onTotalRecordsChange = new EventEmitter();
         this.loading = true;
         this.newlySelectedItems = [];
@@ -4010,8 +4890,6 @@ class SpiderlyDataTableComponent {
         this.rangeAnchorId = null;
         this.pendingShift = null;
         this.onIsAllSelectedChange = new EventEmitter();
-        this.matchModeDateOptions = [];
-        this.matchModeNumberOptions = [];
         /** Whether the "Add" button is shown. Defaults to `true`. */
         this.showAddButton = true;
         /** Whether the "Export to Excel" button is shown. Defaults to `true`. */
@@ -4049,15 +4927,54 @@ class SpiderlyDataTableComponent {
          */
         this.columnVisibilityOverrides = {};
         /**
-         * Columns revealed by the load-time reconciliation. Kept apart from
-         * `columnVisibilityOverrides` so persisting a later unrelated toggle can't promote a
-         * transient safety reveal into a durable choice.
+         * Per-column wrap, by `field`. A SEPARATE key from the visibility overrides on purpose: folding
+         * both into one object would invalidate every layout already in an operator's localStorage, and
+         * this is the key the width and order overrides will join (decision 5).
+         */
+        this.columnWrap = {};
+        /** Data-column fields in the operator's order. Empty means "as declared". */
+        this.columnOrder = [];
+        /**
+         * Per-column width overrides, as SHARES in the same unit `getColWidth` emits — never pixels.
+         * Under the fixed layout the browser splits surplus in proportion to these, so a pixel would
+         * pin the column and stop it answering the window: the operator on a 1280 laptop and the one
+         * on a 2560 monitor would get the same frozen column (decision 4).
+         */
+        this.columnWidths = {};
+        /** The column the header menu is currently open for, and its header cell. */
+        this.menuColumn = null;
+        this.menuHeaderCell = null;
+        this.draggedColumn = null;
+        /** False while a gesture that began on the menu chevron or the resize grip is in flight. */
+        this.headerDragArmed = true;
+        /**
+         * A ViewChild rather than a template reference passed in from the header. The popover lives in
+         * the CAPTION template and the button that opens it in the HEADER one, and a reference variable
+         * does not cross an ng-template boundary — it arrived as undefined, and the click did nothing
+         * at all.
+         */
+        this.columnMenu = viewChild.required('columnMenu');
+        this.filterBar = viewChild(SpiderlyFilterBarComponent);
+        this.selectionHeader = viewChild('selectionHeader');
+        /**
+         * What the grid is ordered by, resolved to COLUMN NAMES for the bar. Read off PrimeNG's live
+         * meta rather than mirrored into a field, so it cannot fall out of step with the sort the table
+         * is actually applying. A field with no column left (hidden, or removed in a later release)
+         * falls back to its own name rather than vanishing from the list.
+         */
+        /**
+         * What the grid is ordered by, resolved to COLUMN NAMES for the bar.
+         *
+         * A field refreshed per fetch, not a getter: it is bound to the bar's `sort`, which is a SIGNAL
+         * input, so a freshly mapped array failed `Object.is` on every change-detection pass and marked
+         * the bar's consumers dirty forever — for a value that changes once per request. Same reason
+         * `tableStyle` is a field.
          */
-        this.revealedByConstraint = new Set();
-        this.clientFilterCount = 0;
+        this.sortKeys = [];
     }
     ngAfterViewInit() {
         this.setupRemovableSort();
+        this.observeSelectionWidth();
     }
     /**
      * The template that renders this column's cells, or null to use the built-in rendering.
@@ -4139,37 +5056,10 @@ class SpiderlyDataTableComponent {
     ngOnInit() {
         if (this.rows == null)
             this.rows = this.configService.defaultPageSize;
+        this.activeViewId ??= this.views?.[0]?.id ?? null;
         if (this.deleteListFromTableObservableMethod && !this.selectionMode) {
             this.selectionMode = 'multiple';
         }
-        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,
-            },
-        ];
         if (this.hasLazyLoad) {
             const baseKey = this.stateKey ?? `spiderly-table:${this.router.url}`;
             this.resolvedStateKey =
@@ -4182,7 +5072,14 @@ class SpiderlyDataTableComponent {
         }
         this.mergeActivePageSizesIntoOptions();
         this.restoreColumnVisibility();
-        this.reconcileVisibilityWithPersistedConstraints();
+        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();
+        if (this.filters)
+            this.requeryOnAppliedFilters();
         this.chooserCols = this.cols.filter(SpiderlyDataTableComponent.isDataColumn);
         this.refreshVisibleCols();
         // Bound to p-table's [multiSortMeta] so the FIRST request already carries the right
@@ -4202,20 +5099,110 @@ class SpiderlyDataTableComponent {
      * are a transient working set — different natural lifetimes.
      */
     get columnsStateKey() {
-        return this.resolvedStateKey ? `${this.resolvedStateKey}:columns` : null;
+        return this.resolvedStateKey
+            ? `${this.resolvedStateKey}${this.viewScope}:columns`
+            : null;
     }
-    /** Actions columns always render; data columns follow reveal/override, then declared default. */
+    /** Actions columns always render; data columns follow the override, then declared default. */
     isColumnVisible(col) {
         if (!SpiderlyDataTableComponent.isDataColumn(col))
             return true;
         if (col.lockVisible)
             return true; // pinned — wins over any (possibly stale) override
-        if (this.revealedByConstraint.has(col.field))
-            return true;
         return this.columnVisibilityOverrides[col.field] ?? col.visible !== false;
     }
+    /**
+     * `cols` in the operator's order. A field the stored order has never seen — a column added in a
+     * later release — sorts to the END rather than displacing a layout someone built by hand
+     * (CLAUDE.md -> "Operator-owned view", decision 7); the sort is stable, so those keep their
+     * declared order among themselves. Actions columns carry no field and are always last, which is
+     * where every consumer already declares them.
+     */
+    orderedCols() {
+        if (this.columnOrder.length === 0)
+            return this.cols;
+        const rank = new Map(this.columnOrder.map((field, index) => [field, index]));
+        return [...this.cols].sort((a, b) => (rank.get(a.field) ?? Number.MAX_SAFE_INTEGER) -
+            (rank.get(b.field) ?? Number.MAX_SAFE_INTEGER));
+    }
+    /**
+     * Whether this column can move one place in `direction` (-1 left, 1 right). A locked column is
+     * the row's anchor — and, once the left edge freezes, the thing a horizontal scroll keeps in
+     * view — so it does not move and nothing moves in front of it.
+     */
+    canMoveColumn(col, direction) {
+        if (col.lockVisible || !col.field)
+            return false;
+        const order = this.dataColumnsInOrder();
+        const from = order.indexOf(col);
+        const to = from + direction;
+        if (from < 0 || to < 0 || to >= order.length)
+            return false;
+        return !order[to].lockVisible;
+    }
+    moveMenuColumn(direction) {
+        const col = this.menuColumn;
+        this.columnMenu().hide();
+        if (!col || !this.canMoveColumn(col, direction))
+            return;
+        const order = this.dataColumnsInOrder();
+        this.placeColumn(order, col, order.indexOf(col) + direction);
+    }
+    /** The move itself, shared by the menu and the drag — two entry points, one rule. */
+    placeColumn(order, col, to) {
+        order.splice(to, 0, ...order.splice(order.indexOf(col), 1));
+        this.columnOrder = order.map((entry) => entry.field);
+        this.persistColumnLayout();
+        this.refreshVisibleCols();
+    }
+    dataColumnsInOrder() {
+        return this.orderedCols().filter(SpiderlyDataTableComponent.isDataColumn);
+    }
+    /**
+     * Header drag, ours rather than PrimeNG's `pReorderableColumn`, for two reasons: its
+     * `onMouseDown` arms the th for anything that is not an INPUT, a TEXTAREA or its OWN resizer —
+     * so our menu chevron and our resize grip would each start a column drag, and reaching for a
+     * width would silently reorder the grid — and its `onColumnDrop` reorders blind, with no notion
+     * of a locked column (CLAUDE.md -> decision 6).
+     *
+     * A shortcut for neighbours, never the mechanism: HTML5 dnd has no edge auto-scroll, so a column
+     * scrolled off the right is unreachable this way, and there is no keyboard path at all. The menu
+     * carries both.
+     *
+     * This half is the arming rule; the drop rule is `canDropOn` below.
+     */
+    onHeaderMouseDown(event) {
+        const target = event.target;
+        this.headerDragArmed = !target.closest('.column-menu-button, .column-resizer');
+    }
+    onHeaderDragStart(col, event) {
+        if (col.lockVisible || !this.headerDragArmed) {
+            event.preventDefault();
+            return;
+        }
+        this.draggedColumn = col;
+        event.dataTransfer?.setData('text/plain', col.field ?? '');
+    }
+    onHeaderDragOver(col, event) {
+        if (this.canDropOn(col))
+            event.preventDefault();
+    }
+    onHeaderDrop(col, event) {
+        event.preventDefault();
+        const dragged = this.draggedColumn;
+        this.draggedColumn = null;
+        if (!dragged || dragged === col || !this.canDropOn(col))
+            return;
+        const order = this.dataColumnsInOrder();
+        this.placeColumn(order, dragged, order.indexOf(col));
+    }
+    /** Nothing lands on, or in front of, the locked column. Enforced here as well as in the menu:
+     * a drop is a separate entry point, and the rule is about the grid rather than about a button. */
+    canDropOn(col) {
+        return !col.lockVisible && SpiderlyDataTableComponent.isDataColumn(col);
+    }
     refreshVisibleCols() {
-        this.visibleCols = this.cols.filter((col) => this.isColumnVisible(col));
+        this.visibleCols = this.orderedCols().filter((col) => this.isColumnVisible(col));
         this.visibleDataColsCount = this.visibleCols.filter(SpiderlyDataTableComponent.isDataColumn).length;
     }
     /**
@@ -4230,7 +5217,6 @@ class SpiderlyDataTableComponent {
         return this.visibleDataColsCount > 1;
     }
     toggleColumn(col, visible) {
-        this.revealedByConstraint.delete(col.field); // an explicit choice supersedes a safety reveal
         if (visible === (col.visible !== false)) {
             delete this.columnVisibilityOverrides[col.field]; // back at the declared default
         }
@@ -4239,48 +5225,99 @@ class SpiderlyDataTableComponent {
         }
         this.persistColumnVisibility();
         this.refreshVisibleCols();
-        if (!visible)
-            this.clearHiddenColumnConstraints([col]);
     }
-    /** Restores every column to its declared default and forgets the stored override. */
-    resetColumnVisibility() {
-        const wasVisible = this.visibleCols.filter(SpiderlyDataTableComponent.isDataColumn);
-        this.revealedByConstraint.clear();
+    /**
+     * 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.
+     */
+    resetColumnLayout() {
+        this.columnWrap = {};
+        this.columnOrder = [];
+        this.columnWidths = {};
+        this.persistColumnLayout();
         this.columnVisibilityOverrides = {};
         this.persistColumnVisibility();
         this.refreshVisibleCols();
-        // Columns the reset just hid follow the same rule as a manual hide.
-        this.clearHiddenColumnConstraints(wasVisible.filter((col) => !this.isColumnVisible(col)));
     }
     /**
-     * A hidden column contributes nothing to filtering or sorting: the header is the only
-     * filter surface, so a kept constraint would restrict the data invisibly. Reloads (once)
-     * only when a constraint was actually cleared — plain hides don't need a server round-trip.
+     * Layout keys carry the ACTIVE VIEW, which is what makes a view more than a saved filter: a
+     * picking view and a payments view want different COLUMNS, not just different rows. Global
+     * layout would re-create the original complaint one level up — the operator still re-picking
+     * columns every time the job changes.
+     *
+     * A table with no views has no segment, so the twenty-six tables that have not migrated keep
+     * reading exactly the keys they already wrote.
      */
-    clearHiddenColumnConstraints(cols) {
-        if (!this.table)
-            return;
-        let cleared = false;
-        for (const col of cols) {
-            const filterKey = col.filterField ?? col.field;
-            if (SpiderlyDataTableComponent.isActiveFilterMeta(this.table.filters?.[filterKey])) {
-                delete this.table.filters[filterKey];
-                cleared = true;
-            }
-            if (this.table._multiSortMeta?.some((m) => m.field === col.field)) {
-                this.table._multiSortMeta = this.table._multiSortMeta.filter((m) => m.field !== col.field);
-                this.table.tableService.onSort(this.table._multiSortMeta);
-                cleared = true;
-            }
-        }
-        if (cleared)
-            this.table._filter(); // re-emits the lazy load and saves the cleaned state
+    get viewScope() {
+        return this.activeViewId ? `:${this.activeViewId}` : '';
     }
-    /** Whether filter metadata (single or array) carries a real constraint, not just an empty slot. */
-    static isActiveFilterMeta(meta) {
-        return (Array.isArray(meta) ? meta : [meta]).some((m) => m?.value != null &&
-            m.value !== '' &&
-            (!Array.isArray(m.value) || m.value.length > 0));
+    /**
+     * Where the applied filters live. Follows `stateStorage` rather than the layout's always-local
+     * rule, because that is where they lived before the bar took them off the header: PrimeNG's
+     * stateful table persisted them for free, and nothing replaced it — a refresh dropped every
+     * filter (Filip, on /tags). A filter is a question you are in the middle of asking, not a
+     * durable preference like a column's width.
+     */
+    get filtersStateKey() {
+        return this.resolvedStateKey
+            ? `${this.resolvedStateKey}${this.viewScope}:filters`
+            : null;
+    }
+    get filterStorage() {
+        return this.stateStorage === 'local' ? localStorage : sessionStorage;
+    }
+    persistAppliedFilters() {
+        if (!this.filtersStateKey || !this.filters)
+            return;
+        const snapshot = this.filters.snapshot();
+        if (Object.keys(snapshot).length === 0) {
+            this.filterStorage.removeItem(this.filtersStateKey);
+        }
+        else {
+            writeStoredJson(this.filterStorage, this.filtersStateKey, snapshot);
+        }
+    }
+    restoreAppliedFilters() {
+        if (!this.filtersStateKey || !this.filters)
+            return;
+        const snapshot = readStoredJson(this.filterStorage, this.filtersStateKey);
+        if (snapshot)
+            this.filters.restore(snapshot);
+    }
+    get layoutStateKey() {
+        return this.resolvedStateKey
+            ? `${this.resolvedStateKey}${this.viewScope}:layout`
+            : null;
+    }
+    /** One key for the whole layout — wrap now, widths next (decision 5). */
+    persistColumnLayout() {
+        if (!this.layoutStateKey)
+            return;
+        const layout = {
+            wrap: this.columnWrap,
+            order: this.columnOrder,
+            widths: this.columnWidths,
+        };
+        const isDefault = Object.keys(this.columnWrap).length === 0 &&
+            this.columnOrder.length === 0 &&
+            Object.keys(this.columnWidths).length === 0;
+        if (isDefault)
+            localStorage.removeItem(this.layoutStateKey);
+        else
+            writeStoredJson(localStorage, this.layoutStateKey, layout);
+    }
+    restoreColumnLayout() {
+        if (!this.layoutStateKey)
+            return;
+        const layout = readStoredJson(localStorage, this.layoutStateKey);
+        this.columnWrap = layout?.wrap ?? {};
+        this.columnOrder = layout?.order ?? [];
+        this.columnWidths = layout?.widths ?? {};
     }
     persistColumnVisibility() {
         if (!this.columnsStateKey)
@@ -4307,47 +5344,16 @@ class SpiderlyDataTableComponent {
             return null;
         return readStoredJson(this.stateStorage === 'local' ? localStorage : sessionStorage, this.resolvedStateKey);
     }
-    /**
-     * Guards the "hidden contributes nothing" invariant against state this component didn't
-     * write (older blobs, hand-edited storage): a hidden column the persisted table state
-     * still filters or sorts by is revealed rather than constraining the data invisibly.
-     * In-memory only — once the constraint is gone, the user's stored choice reapplies.
-     */
-    reconcileVisibilityWithPersistedConstraints() {
-        const state = this.persistedTableState();
-        if (!state)
-            return;
-        const constrained = new Set();
-        for (const [field, meta] of Object.entries(state.filters ?? {})) {
-            if (SpiderlyDataTableComponent.isActiveFilterMeta(meta))
-                constrained.add(field);
-        }
-        for (const sortMeta of state.multiSortMeta ?? []) {
-            if (sortMeta?.field)
-                constrained.add(sortMeta.field);
-        }
-        for (const col of this.cols) {
-            if (!SpiderlyDataTableComponent.isDataColumn(col))
-                continue;
-            if (this.isColumnVisible(col))
-                continue;
-            if (constrained.has(col.field) || constrained.has(col.filterField)) {
-                this.revealedByConstraint.add(col.field);
-            }
-        }
-    }
     //#endregion
     /**
-     * The declared default as PrimeNG sort meta, or null when none is declared — or when its
-     * column is hidden ("hidden contributes nothing"): the table then falls back to the
-     * backend's implicit Id DESC, exactly as if no default were declared.
+     * 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).
      */
     defaultMultiSortMeta() {
         if (!this.defaultSortField)
             return null;
         const defaultSortCol = this.cols?.find((col) => col.field === this.defaultSortField);
-        if (defaultSortCol && !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))
@@ -4392,58 +5398,118 @@ class SpiderlyDataTableComponent {
             this.table.tableService.onSort(defaultSort);
         }
     }
+    onPageChange(container) {
+        scrollElementIntoViewIfAboveViewport(container);
+    }
+    /**
+     * The one pending predicate: PrimeNG's overlay and the container's `aria-busy` must never
+     * disagree about whether a fetch is in flight.
+     *
+     * It used to also test `items === undefined`, for the first load. That clause is dead now
+     * that `loading` initialises true and every lazyLoad raises it — except in the one state
+     * where it was actively wrong: a FAILED first load lowers the flag with `items` still
+     * undefined, which pinned the overlay up forever. Same stranded overlay this component was
+     * fixed for once already, through the other door.
+     */
+    get isPending() {
+        return this.loading;
+    }
     lazyLoad(event) {
+        // Every refetch is pending, not just the first load and reload(). `items` is deliberately
+        // left alone: the previous page stays on screen under the overlay (stale-while-revalidate)
+        // rather than blanking. Raising the flag is also what stops PrimeNG's empty message, gated
+        // on `isEmpty() && !loading`, from claiming "no records" for the length of the request.
+        this.loading = true;
         this.applyDefaultSortIfUnsorted(event);
         this.lastLazyLoadEvent = event;
+        this.refreshSortKeys();
         this.rangeAnchorId = null;
         let tableFilter = event;
         tableFilter.additionalFilterIdLong = this.additionalFilterIdLong;
+        // The store is the ONLY source of what narrows the grid, on every table. Unconditional on
+        // purpose: with the header filters gone, the one remaining writer of PrimeNG's own
+        // `event.filters` is a stale persisted blob from the header-filter era replayed by
+        // `restoreState` — and letting that through would narrow a storeless table invisibly, with
+        // no chip and no button left to clear it.
+        tableFilter.filters = this.filters?.toFilterPayload() ?? {};
         this.onLazyLoad.next(tableFilter);
+        // Issued NOW rather than after the list lands: it needs only `tableFilter`, so serialising
+        // it behind the list response cost a second round trip on every page of every
+        // selection-enabled table — and the overlay is held up for both. The `.catch` at creation
+        // is mandatory, not defensive: when the list request errors, `next` never runs, and a
+        // rejected promise nobody awaits is exactly the unowned rejection this handler exists to
+        // prevent. The rejection is re-thrown out of `awaitSelectedIds` instead, where it has one.
+        const selectedIds = this.selectedLazyLoadObservableMethod != null
+            ? firstValueFrom(this.selectedLazyLoadObservableMethod(tableFilter)).catch((error) => error)
+            : null;
         this.getPaginatedListObservableMethod(tableFilter).subscribe({
             next: async (res) => {
-                this.items = res.data;
-                this.totalRecords = res.totalRecords;
-                this.onTotalRecordsChange.next(res.totalRecords);
-                if (this.selectedLazyLoadObservableMethod != null) {
-                    let selectedRowsMethodResult = await firstValueFrom(this.selectedLazyLoadObservableMethod(tableFilter));
-                    this.currentPageSelectedItemsFromDb = [
-                        ...selectedRowsMethodResult.selectedIds,
-                    ];
-                    if (this.isFirstTimeLazyLoad == true) {
-                        this.rowsSelectedNumber =
-                            selectedRowsMethodResult.totalRecordsSelected;
-                        this.setFakeIsAllSelected();
-                        this.isFirstTimeLazyLoad = false;
-                    }
-                    if (this.isAllSelected == true) {
-                        let idsToInsert = [...this.items.map((x) => x[this.idField])];
-                        idsToInsert = idsToInsert.filter((x) => this.unselectedItems.includes(x) == false);
-                        this.fakeSelectedItems = [...idsToInsert]; // Only for showing checkboxes, we will not send this to the backend
-                    }
-                    else if (this.isAllSelected == false) {
-                        this.fakeSelectedItems = [...this.newlySelectedItems]; // Only for showing checkboxes, we will not send this to the backend
-                    }
-                    else if (this.isAllSelected == null) {
-                        let idsToInsert = [
-                            ...selectedRowsMethodResult.selectedIds,
-                            ...this.newlySelectedItems,
-                        ];
-                        idsToInsert = idsToInsert.filter((x) => this.unselectedItems.includes(x) == false);
-                        this.fakeSelectedItems = [...idsToInsert];
-                    }
+                // The await below is INSIDE an async subscriber, so a rejection there settles nothing:
+                // `error:` belongs to the paginated-list observable and never runs. That used to strand
+                // the overlay forever, hence the finally.
+                try {
+                    this.items = res.data;
+                    this.totalRecords = res.totalRecords;
+                    this.onTotalRecordsChange.next(res.totalRecords);
+                    await this.reconcileSelectionForLoadedPage(selectedIds);
                 }
-                if (this.selectedLazyLoadObservableMethod == null && this.deleteListFromTableObservableMethod) {
-                    this.fakeSelectedItems = this.items
-                        .map((x) => x[this.idField])
-                        .filter((id) => this.newlySelectedItems.includes(id));
+                catch (error) {
+                    // The library's own owner: it toasts, it skips HttpErrorResponse (the interceptor
+                    // already reported those), and a consumer's ErrorHandler wrapper forwards to their
+                    // tracker. console.error here would have dropped both.
+                    this.errorHandler.handleError(error);
+                }
+                finally {
+                    this.loading = false;
                 }
-                this.loading = false;
             },
             error: () => {
                 this.loading = false;
             },
         });
     }
+    /**
+     * Repaints the checkbox column for the page that just landed. Split out of the subscriber so
+     * the try/finally that guarantees the pending flag wraps an await, not fifty lines of
+     * selection algebra.
+     */
+    async reconcileSelectionForLoadedPage(selectedIds) {
+        if (selectedIds == null) {
+            if (this.deleteListFromTableObservableMethod) {
+                this.fakeSelectedItems = this.items
+                    .map((x) => x[this.idField])
+                    .filter((id) => this.newlySelectedItems.includes(id));
+            }
+            return;
+        }
+        const selectedRowsMethodResult = await selectedIds;
+        if (selectedRowsMethodResult instanceof Error)
+            throw selectedRowsMethodResult;
+        this.currentPageSelectedItemsFromDb = [
+            ...selectedRowsMethodResult.selectedIds,
+        ];
+        if (this.isFirstTimeLazyLoad == true) {
+            this.rowsSelectedNumber = selectedRowsMethodResult.totalRecordsSelected;
+            this.setFakeIsAllSelected();
+            this.isFirstTimeLazyLoad = false;
+        }
+        if (this.isAllSelected == true) {
+            let idsToInsert = [...this.items.map((x) => x[this.idField])];
+            idsToInsert = idsToInsert.filter((x) => this.unselectedItems.includes(x) == false);
+            this.fakeSelectedItems = [...idsToInsert]; // Only for showing checkboxes, we will not send this to the backend
+        }
+        else if (this.isAllSelected == false) {
+            this.fakeSelectedItems = [...this.newlySelectedItems]; // Only for showing checkboxes, we will not send this to the backend
+        }
+        else if (this.isAllSelected == null) {
+            let idsToInsert = [
+                ...selectedRowsMethodResult.selectedIds,
+                ...this.newlySelectedItems,
+            ];
+            idsToInsert = idsToInsert.filter((x) => this.unselectedItems.includes(x) == false);
+            this.fakeSelectedItems = [...idsToInsert];
+        }
+    }
     clientLoad() {
         this.loading = false;
         this.loadFormArrayItems();
@@ -4458,19 +5524,6 @@ class SpiderlyDataTableComponent {
         this.rowsSelectedNumber = this.selectedItemIds.length;
         this.setFakeIsAllSelected();
     }
-    filter(event) {
-        if (this.hasLazyLoad && this.selectionMode === 'multiple')
-            this.selectAll(false); // We need to do it like this because: totalRecords: 1 -> selectedRecords from earlyer selection 2 -> unselect current -> all checkbox is set to true
-        if (this.hasLazyLoad === false && this.selectionMode === 'multiple') {
-            if (this.clientFilterCount === 0) {
-                this.loadFormArrayItems();
-                this.clientFilterCount++;
-            }
-            else {
-                this.clientFilterCount--;
-            }
-        }
-    }
     loadFormArrayItems() {
         this.items = this.getFormArrayItems(this.additionalIndexes);
         this.rangeAnchorId = null;
@@ -4490,64 +5543,331 @@ class SpiderlyDataTableComponent {
             !!col.field &&
             !col.field.endsWith('CommaSeparated'));
     }
-    /** The column's declared {@link Column.minWidth}, or the default for its filter type. */
-    getColHeaderWidth(col) {
-        if (col.minWidth != null)
-            return `min-width: ${col.minWidth};`;
-        switch (col.filterType) {
-            case 'text':
-                return 'min-width: 12rem;';
-            case 'date':
-                return 'min-width: 10rem;';
-            case 'multiselect':
-                return 'min-width: 12rem;';
-            case 'boolean':
-                return 'min-width: 8rem;';
-            case 'numeric':
-                return 'min-width: 12rem;';
-            default:
-                return 'width: 0rem;'; // fitting content of the row like this
-        }
+    openColumnMenu(col, event) {
+        this.menuColumn = col;
+        // Kept so `fitMenuColumn` can find the column's cells: it needs the header's position among
+        // its siblings, which is the only thing that ties a Column to a table column in the DOM.
+        this.menuHeaderCell = event.target.closest('th');
+        this.columnMenu().toggle(event);
     }
-    getColMatchModeOptions(filterType) {
-        switch (filterType) {
-            case 'text':
-                return null;
-            case 'date':
-                return this.matchModeDateOptions;
-            case 'multiselect':
-                return null;
-            case 'boolean':
-                return null;
-            case 'numeric':
-                return this.matchModeNumberOptions;
-            default:
-                return null;
-        }
+    /**
+     * 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.
+     */
+    selectView(view) {
+        this.activeViewId = view.id;
+        // 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)
+            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".
+        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);
     }
-    getColMatchMode(filterType) {
-        switch (filterType) {
-            case 'text':
-                return MatchModeCodes.Contains;
-            case 'date':
-                return MatchModeCodes.Equals;
-            case 'multiselect':
-                return MatchModeCodes.In;
-            case 'boolean':
-                return MatchModeCodes.Equals;
-            case 'numeric':
-                return MatchModeCodes.Equals;
-            default:
-                return null;
-        }
+    /**
+     * The filter this column stands for. Defaults to the column's own `field`, because a store id
+     * IS a backend property name — `toFilterPayload` emits it straight into `Filter.filters`. So
+     * `filterId` is an escape hatch for the rare mismatch, not something every column restates:
+     * all eight of the first migrated table's declarations were the field name written a second
+     * time.
+     */
+    filterIdFor(col) {
+        return col.filterId ?? col.field;
     }
-    isDropOrMulti(filterType) {
-        if (filterType == 'dropdown' || filterType == 'multiselect') {
-            return true;
+    /**
+     * Asks the STORE, not the column. Checking only that an id was declared let a typo through to
+     * `store.get(id)`, which reads `definitions[id].label` — so a mistyped id threw on click rather
+     * than greying the item out. With 195 declarations to migrate, that is the failure mode worth
+     * closing here rather than in each consumer.
+     */
+    canFilterColumn(col) {
+        const id = this.filterIdFor(col);
+        return id != null && this.filters?.definitions[id] != null;
+    }
+    /**
+     * Opens the bar's editor for this column's filter. The bar took the filter off the header and
+     * the header is still where an operator reaches for it, which is twenty-seven tables' worth of
+     * habit; this is the shortcut back rather than a second filter surface — it drives the same
+     * editor, on the same bar, that `+ Filter` opens.
+     */
+    filterMenuColumn() {
+        const col = this.menuColumn;
+        this.columnMenu().hide();
+        if (!col || !this.canFilterColumn(col))
+            return;
+        this.filterBar()?.startEditing(this.filterIdFor(col));
+    }
+    /**
+     * Sorts by this column in the NAMED direction. Clicking a header cycles asc, desc and off,
+     * which is fine for one column and a guess for a direction someone wants now — you click, look,
+     * and click again if it went the other way. This is also the only sort path that works from a
+     * keyboard.
+     *
+     * A column the generated paginator has no sort case for answers every load with a 400, so the
+     * items are disabled by the same predicate that keeps its header from being clickable.
+     */
+    sortMenuColumn(order) {
+        const col = this.menuColumn;
+        this.columnMenu().hide();
+        if (!col?.field || !this.isColumnSortable(col))
+            return;
+        this.table._multiSortMeta = [{ field: col.field, order }];
+        this.table.sortMultiple();
+    }
+    /**
+     * Sizes the column to the widest thing in it. The cheaper escape from a cramped column: no
+     * drag, no aim. Unlike a drag it does NOT trade with the neighbour — a minimum that grew is
+     * exactly the case decision 4 lets push the table past its container and start scrolling.
+     *
+     * Measures the CELL CONTENT, not the cell: the clamp lives on the inner span, so a `td` reports
+     * a scrollWidth that fits while the text inside it does not.
+     */
+    fitMenuColumn() {
+        const col = this.menuColumn;
+        const th = this.menuHeaderCell;
+        this.columnMenu().hide();
+        if (!col?.field || !th?.parentElement)
+            return;
+        // Walked up from the header rather than reached through PrimeNG's own ElementRef: the th is
+        // the only thing that ties a Column to a table column in the DOM, and it already knows which
+        // table it is in.
+        const index = Array.from(th.parentElement.children).indexOf(th) + 1;
+        const cells = th
+            .closest('table')
+            ?.querySelectorAll(`tbody tr > td:nth-child(${index})`);
+        if (!cells?.length)
+            return;
+        // Padding comes from one CSS rule for every cell in the column, so it is read once off the
+        // first — a getComputedStyle per cell was a hundred style flushes for one number.
+        const styles = getComputedStyle(cells[0]);
+        const padding = (parseFloat(styles.paddingLeft) || 0) +
+            (parseFloat(styles.paddingRight) || 0);
+        // Cells AND their descendants in one query rather than one per cell: the clamp lives on an
+        // inner span, so a td reports a scrollWidth that fits while the text inside it does not, and
+        // a consumer's cell template can nest the overflowing element arbitrarily deep.
+        const content = th
+            .closest('table')
+            .querySelectorAll(`tbody tr > td:nth-child(${index}), tbody tr > td:nth-child(${index}) *`);
+        let widest = th.scrollWidth;
+        for (const node of Array.from(content)) {
+            widest = Math.max(widest, node.scrollWidth + padding);
+        }
+        this.columnWidths[col.field] = this.shareThatFits(col, th, widest);
+        this.persistColumnLayout();
+    }
+    /**
+     * The share that actually yields `needed` pixels — not `needed` scaled by the column's current
+     * px-per-share, which is the obvious answer and the wrong one. Shares are a PROPORTION of
+     * whatever width the table has, so growing this column's share also shrinks the realized width
+     * of every other column, and the naive figure lands short. The spec caught it as a cell that
+     * was still clipped after being told to fit.
+     *
+     * While the columns fit, the table keeps the container's width and the proportion has to solve
+     *   needed / tableWidth = newShare / (otherShares + newShare)
+     * with `otherShares` recovered from what this column currently renders at. Once `needed` is the
+     * whole container the proportional regime has no answer: the table is about to overrun its
+     * container and scroll (decision 4), and there a share IS its own length, so the pixels convert
+     * straight through the root font size.
+     */
+    shareThatFits(col, th, needed) {
+        const share = this.columnShare(col);
+        const thPx = Math.max(th.offsetWidth, 1);
+        const tableWidth = th.closest('table')?.offsetWidth ?? 0;
+        if (needed < tableWidth) {
+            const otherShares = (share * (tableWidth - thPx)) / thPx;
+            return (needed * otherShares) / (tableWidth - needed);
         }
-        else {
-            return false;
+        return needed / rootFontSizePx();
+    }
+    hideMenuColumn() {
+        if (this.menuColumn)
+            this.toggleColumn(this.menuColumn, false);
+        this.columnMenu().hide();
+    }
+    /**
+     * Whether this column's cells give up the one-line clamp. The DEFAULT stays clamped
+     * (CLAUDE.md -> "Operator-owned view", decision 9); what changes is that the operator picks
+     * which column pays the row height, not whoever wrote `cols`.
+     *
+     * Lands on the td as `.cell-wrap`, whose inherited `--spiderly-cell-*` properties are how the
+     * toggle crosses into a projected `spiderlyCellTemplate` too — the contract's one telling is
+     * on that SCSS rule; a consumer clamp that hard-codes its values opts out.
+     */
+    isColumnWrapped(col) {
+        return col.field != null && this.columnWrap[col.field] === true;
+    }
+    get isMenuColumnWrapped() {
+        return this.menuColumn != null && this.isColumnWrapped(this.menuColumn);
+    }
+    toggleWrapForMenuColumn() {
+        const col = this.menuColumn;
+        this.columnMenu().hide();
+        if (!col?.field)
+            return;
+        if (this.columnWrap[col.field])
+            delete this.columnWrap[col.field];
+        else
+            this.columnWrap[col.field] = true;
+        this.persistColumnLayout();
+    }
+    /** Exposed for the template: actions columns carry no field and get no menu. */
+    isDataColumn(col) {
+        return SpiderlyDataTableComponent.isDataColumn(col);
+    }
+    /**
+     * Read off the last REQUEST's sort, not `table._multiSortMeta`. On a first load with a declared
+     * default that field is still null: `applyDefaultSortIfUnsorted` writes the default onto the
+     * lazy-load event, and PrimeNG fills its own meta only once someone clicks a header. Reading the
+     * table there showed no sort on exactly the tables that always have one. A field with no column
+     * 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,
+            descending: key.order === -1,
+        }));
+    }
+    /** This column's share, override first, then its declared width, then the per-type default. */
+    columnShare(col) {
+        if (col.field && this.columnWidths[col.field] != null) {
+            return this.columnWidths[col.field];
         }
+        if (col.width != null)
+            return this.shareOfDeclaredWidth(col);
+        return this.defaultShare(col);
+    }
+    /**
+     * A declared width expressed in SHARE units. rem IS the share unit and px converts; any other
+     * unit falls back to the per-type default rather than being read as a bare number.
+     *
+     * `parseFloat` alone shipped here first, so `width: '150px'` resolved to share 150 against
+     * neighbours at 12 — one column eating the grid on the first drag or fit. Every declared width
+     * in the consumer happens to be rem today, which is exactly why nothing would have caught it.
+     */
+    shareOfDeclaredWidth(col) {
+        const declared = col.width.trim();
+        const value = parseFloat(declared);
+        if (Number.isNaN(value))
+            return this.defaultShare(col);
+        if (declared.endsWith('rem'))
+            return value;
+        if (declared.endsWith('px'))
+            return value / rootFontSizePx();
+        return this.defaultShare(col);
+    }
+    defaultShare(col) {
+        if (col.filterType)
+            return DEFAULT_COLUMN_WIDTH_REM[col.filterType];
+        // What is left declares no filterType: an actions column. It cannot shrink to fit any more,
+        // so the icons need a reservation — each sits in a flex row whose gap is set beside them in
+        // the template, inside the cell's own padding. 2.5, not 2.2, so the arithmetic stays exact in
+        // binary and the string never reads `8.6000000001rem`.
+        return 2 + (col.actions?.length ?? 0) * 2.5;
+    }
+    /**
+     * Trades share between the column being dragged and the one on its right, so the table keeps
+     * its total: widening a column never starts a horizontal scroll by itself, which only happens
+     * once the SUM of the minimums stops fitting. The px delta is converted through the column's
+     * own rendered width, which is the only place the share-to-pixel scale is actually known.
+     */
+    startColumnResize(col, event, th) {
+        event.preventDefault();
+        event.stopPropagation();
+        const neighbour = this.visibleCols[this.visibleCols.indexOf(col) + 1];
+        if (!col.field || !neighbour?.field)
+            return;
+        const controller = new AbortController();
+        this.resizeAbort?.abort();
+        this.resizeAbort = controller;
+        const startX = event.clientX;
+        const startShare = this.columnShare(col);
+        const neighbourShare = this.columnShare(neighbour);
+        const sharePerPx = startShare / Math.max(th.offsetWidth, 1);
+        // A column that reaches zero share disappears with no way back from the header it lost.
+        const floor = 2;
+        const neighbourCell = th.nextElementSibling;
+        let applied = 0;
+        const onMove = (move) => {
+            const delta = (move.clientX - startX) * sharePerPx;
+            applied = Math.max(Math.min(delta, neighbourShare - floor), floor - startShare);
+            // The preview is written straight to the two header cells. Under the fixed layout their
+            // widths are what lay the grid out, so this IS the live drag — and it costs no change
+            // detection, where routing it through `columnWidths` ran a full-grid pass per mouse move
+            // (~60/sec) to move two cells. The bindings overwrite these on the next pass anyway.
+            th.style.width = `${startShare + applied}rem`;
+            if (neighbourCell) {
+                neighbourCell.style.width = `${neighbourShare - applied}rem`;
+            }
+        };
+        const onUp = () => {
+            controller.abort();
+            this.resizeAbort = null;
+            this.zone.run(() => {
+                this.columnWidths[col.field] = startShare + applied;
+                this.columnWidths[neighbour.field] = neighbourShare - applied;
+                this.persistColumnLayout();
+            });
+            // Sorting hangs off CLICK, which stopPropagation on mousedown never touched — so every
+            // resize also reordered the grid. Swallowing the click on the grip is not enough either:
+            // on a drag that ends away from it, the click fires on their common ancestor, the th.
+            // One capturing listener, once, on the document.
+            const swallow = (click) => {
+                click.stopPropagation();
+                click.preventDefault();
+            };
+            document.addEventListener('click', swallow, {
+                capture: true,
+                once: true,
+            });
+            // Removed on the next tick rather than left to `once`. The click that follows a mouseup
+            // fires synchronously, so this always catches it — while a drag that ends with no click at
+            // all (the pointer leaves the window, the operator navigates away) would otherwise leave a
+            // listener sitting on the document to eat someone's next click entirely.
+            setTimeout(() => document.removeEventListener('click', swallow, { capture: true }));
+        };
+        // One controller for the pair, aborted by `onUp` AND by ngOnDestroy. Left to `removeEventListener`
+        // inside `onUp` alone, navigating away mid-drag stranded `mousemove` on the document — patched
+        // by zone.js, so it ticked the app on every mouse move for the rest of the session, with its
+        // closure pinning the dead component and the page of rows it captured.
+        this.zone.runOutsideAngular(() => {
+            document.addEventListener('mousemove', onMove, {
+                signal: controller.signal,
+            });
+            document.addEventListener('mouseup', onUp, { signal: controller.signal });
+        });
+    }
+    /**
+     * The column's declared {@link Column.width}, or the default for its filter type.
+     *
+     * A width, not a minimum: under the fixed layout {@link tableStyle} establishes, this is what
+     * the column is sized from, and the table shares its surplus in PROPORTION to these numbers.
+     * Columns declaring none would otherwise take an equal share, which throws away what the
+     * per-type defaults say — a boolean holds "Da"/"Ne", a text column holds a name.
+     */
+    getColWidth(col) {
+        const override = col.field ? this.columnWidths[col.field] : undefined;
+        if (override != null)
+            return `${override}rem`;
+        // A declared width passes through VERBATIM so a consumer keeps % and px; every other branch is
+        // a share and renders in rem. Both halves resolve through `columnShare` otherwise, because
+        // this chain and that one were written twice and had already drifted apart on the px case.
+        if (col.width != null)
+            return col.width;
+        return `${this.defaultShare(col)}rem`;
     }
     /*
      * Navigate to details page based on rowId and rowNavigationPath.
@@ -4647,6 +5967,8 @@ class SpiderlyDataTableComponent {
     ngOnDestroy() {
         this.destroy$.next();
         this.destroy$.complete();
+        this.selectionWidthObserver?.disconnect();
+        this.resizeAbort?.abort();
     }
     get showSelectAllCheckbox() {
         return (this.selectionMode === 'multiple' &&
@@ -4660,9 +5982,37 @@ class SpiderlyDataTableComponent {
         this.isAllSelected = null;
         this.fakeIsAllSelected = false;
     }
+    /**
+     * A COMMITTED filter re-queries; a draft does not. Re-fetching per keystroke would be the same
+     * lie the chip bar exists to prevent, only paid for in requests rather than in credibility.
+     *
+     * Back to page one first, and off FRESH metadata rather than `reload()`: that one replays the
+     * cached lazy-load event, whose `first` was copied when the event was built, so a filter applied
+     * from page 3 would keep asking the server to skip 50 rows a narrower result set does not have.
+     * The grid comes back empty for a value that is definitely in it.
+     *
+     * The first run is PrimeNG's: it fires the initial lazy load itself, and re-querying here would
+     * make every table load twice.
+     */
+    requeryOnAppliedFilters() {
+        let isFirstRun = true;
+        effect(() => {
+            this.filters.applied();
+            if (isFirstRun) {
+                isFirstRun = false;
+                return;
+            }
+            this.persistAppliedFilters();
+            this.table.first = 0;
+            this.table.firstChange.emit(0);
+            this.lazyLoad(this.table.createLazyLoadMetadata());
+        }, { injector: this.injector });
+    }
     reload() {
-        this.loading = true;
-        this.items = null;
+        // Nothing to replay before the table's own initial load, which is already on its way.
+        if (this.lastLazyLoadEvent == null)
+            return;
+        // Not special: same refetch as a page flip, so lazyLoad owns both the flag and `items`.
         this.lazyLoad(this.lastLazyLoadEvent);
     }
     showActions() {
@@ -4717,9 +6067,8 @@ class SpiderlyDataTableComponent {
                 const local = typeof raw === 'string' ? parseDateOnlyLocal(raw) : null;
                 return formatDate(local ?? raw, 'shortDate', this.locale);
             case 'multiselect': {
-                // Translate through the column's own option list — the same list its filter dropdown
-                // already renders labels from. Without this the cell shows the stored value, so an enum
-                // column reads `1` while its filter offers "Info", and an FK column reads the id.
+                // Translate through the column's own option list. Without this the cell shows the stored
+                // value, so an enum column reads `1` instead of "Info", and an FK column reads the id.
                 //
                 // Match on `code`, not `value`: that is the property PrimengOption carries (see the note
                 // on the class). The raw value is the fallback rather than an empty cell, because the
@@ -4758,7 +6107,13 @@ class SpiderlyDataTableComponent {
         filter.additionalFilterIdLong = this.additionalFilterIdLong;
         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.
+     */
     clear(table) {
+        this.filters?.clear();
         table.clear();
         table.clearState();
     }
@@ -4933,8 +6288,8 @@ class SpiderlyDataTableComponent {
             return null;
         }
     }
-    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: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.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", 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 }], viewQueries: [{ propertyName: "table", first: true, predicate: ["dt"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  <div\n    [class]=\"\n      showCardWrapper ? 'card responsive-card-padding overflow-auto' : ''\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      [totalRecords]=\"totalRecords\"\n      class=\"spiderly-table\"\n      [loading]=\"items === undefined || loading === true\"\n      [selectionMode]=\"selectionMode\"\n      dataKey=\"id\"\n      (onFilter)=\"filter($event)\"\n      sortMode=\"multiple\"\n      [multiSortMeta]=\"initialMultiSortMeta\"\n      [stateKey]=\"resolvedStateKey\"\n      [stateStorage]=\"stateStorage\"\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              [label]=\"t('ClearFilters')\"\n              class=\"p-button-outlined\"\n              style=\"flex: none\"\n              icon=\"pi pi-filter-slash\"\n              (click)=\"clear(dt)\"\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      </ng-template>\n      <ng-template pTemplate=\"header\">\n        <tr>\n          <th style=\"width: 0rem\" *ngIf=\"selectionMode == 'multiple'\">\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              ({{ rowsSelectedNumber }})\n            </div>\n          </th>\n          <ng-container *ngFor=\"let col of visibleCols; trackBy: colTrackByFn\">\n            <th\n              [pSortableColumn]=\"col.field\"\n              [pSortableColumnDisabled]=\"!isColumnSortable(col)\"\n              [style]=\"getColHeaderWidth(col)\"\n            >\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                </span>\n                <p-columnFilter\n                  *ngIf=\"col.filterType != null && col.filterType !== 'blob'\"\n                  [type]=\"col.filterType\"\n                  [field]=\"col.filterField ?? col.field\"\n                  display=\"menu\"\n                  [placeholder]=\"col.filterPlaceholder\"\n                  [showOperator]=\"false\"\n                  [showMatchModes]=\"col.showMatchModes\"\n                  [showAddButton]=\"col.showAddButton\"\n                  [matchModeOptions]=\"getColMatchModeOptions(col.filterType)\"\n                  [matchMode]=\"getColMatchMode(col.filterType)\"\n                >\n                  <ng-template\n                    *ngIf=\"isDropOrMulti(col.filterType)\"\n                    pTemplate=\"filter\"\n                    let-value\n                    let-filter=\"filterCallback\"\n                  >\n                    <p-multiSelect\n                      [ngModel]=\"value\"\n                      [options]=\"col.dropdownOrMultiselectValues\"\n                      [placeholder]=\"t('All')\"\n                      (onChange)=\"filter($event.value)\"\n                      optionLabel=\"label\"\n                      optionValue=\"code\"\n                      [style]=\"{ width: '240px' }\"\n                    >\n                      <ng-template let-item pTemplate=\"item\">\n                        <div class=\"p-multiselect-representative-option\">\n                          <span class=\"ml-2\">{{ item.label }}</span>\n                        </div>\n                      </ng-template>\n                    </p-multiSelect>\n                  </ng-template>\n                  <ng-template\n                    *ngIf=\"col.filterType == 'date'\"\n                    pTemplate=\"filter\"\n                    let-value\n                    let-filter=\"filterCallback\"\n                  >\n                    <p-datepicker\n                      [ngModel]=\"value\"\n                      [showTime]=\"col.showTime\"\n                      (onSelect)=\"filter($event)\"\n                    ></p-datepicker>\n                  </ng-template>\n                </p-columnFilter>\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            {{ displayValue }}\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\"\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              (click)=\"onCellClick(col, rowData, $event)\"\n              *ngIf=\"!col.editable\"\n            >\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 *ngIf=\"col.editable\" class=\"row-interactive\">\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=\"loadingbody\">\n        <tr>\n          <td\n            [attr.colspan]=\"\n              visibleCols.length + (selectionMode === 'multiple' ? 1 : 0)\n            \"\n          >\n            {{ t(\"Loading\") }}...\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)=\"resetColumnVisibility()\"\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{margin-top:4px;padding:0;border:none;background:none;color:var(--p-primary-color);cursor:pointer;align-self:flex-start;font-size:.875rem}.column-chooser-reset:hover{text-decoration:underline}:host ::ng-deep .clickable{cursor:pointer}:host ::ng-deep td.clickable:hover{text-decoration:underline}:host td.selection-cell{-webkit-user-select:none;user-select:none}: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.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: "component", type: i10.ColumnFilter, selector: "p-columnFilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "showButtons", "ariaLabel", "filterButtonProps"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i12.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i4$5.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: i14.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { 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: 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: 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.ɵ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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyDataTableComponent, decorators: [{
             type: Component,
@@ -4945,13 +6300,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
                         SpiderlyControlsModule,
                         TableModule,
                         ButtonModule,
-                        MultiSelectModule,
                         PopoverModule,
-                        DatePickerModule,
                         CheckboxModule,
+                        SpiderlyFilterBarComponent,
+                        SpiderlyOverflowTitleDirective,
                         TooltipModule,
-                    ], template: "<ng-container *transloco=\"let t\">\n  <div\n    [class]=\"\n      showCardWrapper ? 'card responsive-card-padding overflow-auto' : ''\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      [totalRecords]=\"totalRecords\"\n      class=\"spiderly-table\"\n      [loading]=\"items === undefined || loading === true\"\n      [selectionMode]=\"selectionMode\"\n      dataKey=\"id\"\n      (onFilter)=\"filter($event)\"\n      sortMode=\"multiple\"\n      [multiSortMeta]=\"initialMultiSortMeta\"\n      [stateKey]=\"resolvedStateKey\"\n      [stateStorage]=\"stateStorage\"\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              [label]=\"t('ClearFilters')\"\n              class=\"p-button-outlined\"\n              style=\"flex: none\"\n              icon=\"pi pi-filter-slash\"\n              (click)=\"clear(dt)\"\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      </ng-template>\n      <ng-template pTemplate=\"header\">\n        <tr>\n          <th style=\"width: 0rem\" *ngIf=\"selectionMode == 'multiple'\">\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              ({{ rowsSelectedNumber }})\n            </div>\n          </th>\n          <ng-container *ngFor=\"let col of visibleCols; trackBy: colTrackByFn\">\n            <th\n              [pSortableColumn]=\"col.field\"\n              [pSortableColumnDisabled]=\"!isColumnSortable(col)\"\n              [style]=\"getColHeaderWidth(col)\"\n            >\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                </span>\n                <p-columnFilter\n                  *ngIf=\"col.filterType != null && col.filterType !== 'blob'\"\n                  [type]=\"col.filterType\"\n                  [field]=\"col.filterField ?? col.field\"\n                  display=\"menu\"\n                  [placeholder]=\"col.filterPlaceholder\"\n                  [showOperator]=\"false\"\n                  [showMatchModes]=\"col.showMatchModes\"\n                  [showAddButton]=\"col.showAddButton\"\n                  [matchModeOptions]=\"getColMatchModeOptions(col.filterType)\"\n                  [matchMode]=\"getColMatchMode(col.filterType)\"\n                >\n                  <ng-template\n                    *ngIf=\"isDropOrMulti(col.filterType)\"\n                    pTemplate=\"filter\"\n                    let-value\n                    let-filter=\"filterCallback\"\n                  >\n                    <p-multiSelect\n                      [ngModel]=\"value\"\n                      [options]=\"col.dropdownOrMultiselectValues\"\n                      [placeholder]=\"t('All')\"\n                      (onChange)=\"filter($event.value)\"\n                      optionLabel=\"label\"\n                      optionValue=\"code\"\n                      [style]=\"{ width: '240px' }\"\n                    >\n                      <ng-template let-item pTemplate=\"item\">\n                        <div class=\"p-multiselect-representative-option\">\n                          <span class=\"ml-2\">{{ item.label }}</span>\n                        </div>\n                      </ng-template>\n                    </p-multiSelect>\n                  </ng-template>\n                  <ng-template\n                    *ngIf=\"col.filterType == 'date'\"\n                    pTemplate=\"filter\"\n                    let-value\n                    let-filter=\"filterCallback\"\n                  >\n                    <p-datepicker\n                      [ngModel]=\"value\"\n                      [showTime]=\"col.showTime\"\n                      (onSelect)=\"filter($event)\"\n                    ></p-datepicker>\n                  </ng-template>\n                </p-columnFilter>\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            {{ displayValue }}\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\"\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              (click)=\"onCellClick(col, rowData, $event)\"\n              *ngIf=\"!col.editable\"\n            >\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 *ngIf=\"col.editable\" class=\"row-interactive\">\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=\"loadingbody\">\n        <tr>\n          <td\n            [attr.colspan]=\"\n              visibleCols.length + (selectionMode === 'multiple' ? 1 : 0)\n            \"\n          >\n            {{ t(\"Loading\") }}...\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)=\"resetColumnVisibility()\"\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{margin-top:4px;padding:0;border:none;background:none;color:var(--p-primary-color);cursor:pointer;align-self:flex-start;font-size:.875rem}.column-chooser-reset:hover{text-decoration:underline}:host ::ng-deep .clickable{cursor:pointer}:host ::ng-deep td.clickable:hover{text-decoration:underline}:host td.selection-cell{-webkit-user-select:none;user-select:none}: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: undefined, decorators: [{
+                    ], 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"] }]
+        }], 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]
                 }] }], propDecorators: { table: [{
@@ -4975,6 +6330,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
                 type: Input
             }], cols: [{
                 type: Input
+            }], filters: [{
+                type: Input
+            }], views: [{
+                type: Input
             }], showPaginator: [{
                 type: Input
             }], showCardWrapper: [{
@@ -5041,6 +6400,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
                 type: Input
             }], rowNavigationPath: [{
                 type: Input
+            }], filterTemplates: [{
+                type: ContentChildren,
+                args: [SpiderlyFilterTemplateDirective]
             }] } });
 class Action {
     constructor({ name, field, icon, style, styleClass, onClick, } = {}) {
@@ -5053,14 +6415,12 @@ class Action {
     }
 }
 class Column {
-    constructor({ name, field, filterField, filterType, filterPlaceholder, showMatchModes, showAddButton, dropdownOrMultiselectValues, actions, editable, showTime, decimalPlaces, sortable, visible, lockVisible, minWidth, onCellClick, } = {}) {
+    constructor({ name, field, filterType, filterId, showMatchModes, dropdownOrMultiselectValues, actions, editable, showTime, decimalPlaces, sortable, visible, lockVisible, width, onCellClick, } = {}) {
         this.name = name;
         this.field = field;
-        this.filterField = filterField;
         this.filterType = filterType;
-        this.filterPlaceholder = filterPlaceholder;
+        this.filterId = filterId;
         this.showMatchModes = showMatchModes;
-        this.showAddButton = showAddButton;
         this.dropdownOrMultiselectValues = dropdownOrMultiselectValues;
         this.actions = actions;
         this.editable = editable;
@@ -5069,7 +6429,7 @@ class Column {
         this.sortable = sortable;
         this.visible = visible;
         this.lockVisible = lockVisible;
-        this.minWidth = minWidth;
+        this.width = width;
         this.onCellClick = onCellClick;
     }
 }
@@ -5087,6 +6447,449 @@ class AllClickEvent {
     }
 }
 
+var MatchModeCodes;
+(function (MatchModeCodes) {
+    MatchModeCodes["StartsWith"] = "startsWith";
+    MatchModeCodes["Contains"] = "contains";
+    MatchModeCodes["Equals"] = "equals";
+    MatchModeCodes["LessThan"] = "lessThan";
+    MatchModeCodes["GreaterThan"] = "greaterThan";
+    MatchModeCodes["In"] = "in";
+})(MatchModeCodes || (MatchModeCodes = {}));
+
+/**
+ * What each value type may be asked — the ONE operator table, mirroring what the generated
+ * 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.
+ *
+ * Tuple order is DISPLAY order for every operator picker (Equals, then "less/before", then
+ * "more/after" — the order the header dropdowns always shipped).
+ */
+const ALLOWED_OPERATORS = {
+    text: [
+        MatchModeCodes.StartsWith,
+        MatchModeCodes.Contains,
+        MatchModeCodes.Equals,
+    ],
+    number: [
+        MatchModeCodes.Equals,
+        MatchModeCodes.LessThan,
+        MatchModeCodes.GreaterThan,
+        MatchModeCodes.In,
+    ],
+    boolean: [MatchModeCodes.Equals],
+    date: [
+        MatchModeCodes.Equals,
+        MatchModeCodes.LessThan,
+        MatchModeCodes.GreaterThan,
+    ],
+};
+
+const OPERATOR_WORDS = {
+    text: {
+        [MatchModeCodes.StartsWith]: {
+            pickerKey: 'StartsWith',
+            phraseKey: 'FilterChipStartsWith',
+        },
+        [MatchModeCodes.Contains]: {
+            pickerKey: 'Contains',
+            phraseKey: 'FilterChipContains',
+        },
+        [MatchModeCodes.Equals]: {
+            pickerKey: 'Equals',
+            phraseKey: 'FilterChipEquals',
+        },
+        // No `In` for text: ALLOWED_OPERATORS.text does not carry it, so the entry was unreachable —
+        // and it made `textFilter({ options })` look supported when the store throws on it.
+    },
+    number: {
+        [MatchModeCodes.Equals]: {
+            pickerKey: 'Equals',
+            phraseKey: 'FilterChipEquals',
+        },
+        [MatchModeCodes.GreaterThan]: {
+            pickerKey: 'MoreThan',
+            phraseKey: 'FilterChipGreaterThan',
+        },
+        [MatchModeCodes.LessThan]: {
+            pickerKey: 'LessThan',
+            phraseKey: 'FilterChipLessThan',
+        },
+        // The picker never renders for a pick-list (one operator), but the CHIP always does.
+        [MatchModeCodes.In]: { pickerKey: 'In', phraseKey: 'FilterChipIn' },
+    },
+    boolean: {
+        [MatchModeCodes.Equals]: {
+            pickerKey: 'Equals',
+            phraseKey: 'FilterChipEquals',
+        },
+    },
+    date: {
+        [MatchModeCodes.Equals]: {
+            pickerKey: 'OnDate',
+            phraseKey: 'FilterChipEquals',
+        },
+        [MatchModeCodes.LessThan]: {
+            pickerKey: 'DatesBefore',
+            phraseKey: 'FilterChipBefore',
+        },
+        [MatchModeCodes.GreaterThan]: {
+            pickerKey: 'DatesAfter',
+            phraseKey: 'FilterChipAfter',
+        },
+    },
+};
+/**
+ * `In` and options are the same fact seen from two sides: `In` needs a list of values, and the
+ * editor only draws one when the filter declares options. So options mean `In` and nothing else,
+ * and their absence rules `In` out — offering it on a plain number filter would hand the
+ * operator a mode with no control behind it.
+ *
+ * Widened first: the per-kind tuples are literal, so `boolean`'s `[Equals]` makes the `In`
+ * comparison a "no overlap" error rather than an empty result.
+ */
+function baseOperators(kind, hasOptions) {
+    const accepted = ALLOWED_OPERATORS[kind];
+    return accepted.filter((value) => hasOptions ? value === MatchModeCodes.In : value !== MatchModeCodes.In);
+}
+function toOperatorOptions(kind, operators) {
+    return operators.map((value) => ({
+        value,
+        labelKey: OPERATOR_WORDS[kind][value]?.pickerKey ?? value,
+    }));
+}
+/**
+ * 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
+ * `Equals` — a date equality against a TIMESTAMP matches only the row written in that exact
+ * second, and answers with an empty grid rather than an error (PACMS ran into this on all three
+ * of its date columns, Filip 2026-08-28).
+ */
+const DEFAULT_OPERATOR = {
+    text: MatchModeCodes.Contains,
+    number: MatchModeCodes.Equals,
+    boolean: MatchModeCodes.Equals,
+    date: MatchModeCodes.GreaterThan,
+};
+function textFilter(config) {
+    return {
+        kind: 'text',
+        label: config.label,
+        operators: config.operators,
+        offered: config.offered,
+    };
+}
+/**
+ * Only a NUMBER filter accepts options, and the asymmetry is forced rather than chosen: options
+ * mean `In`, and `In` is the one operator ALLOWED_OPERATORS grants to numbers alone — because the
+ * generated paginator answers it with InvalidMatchMode on a string column. A text pick-list used
+ * to type-check and then throw at the first `set`.
+ */
+function numberFilter(config) {
+    return {
+        kind: 'number',
+        label: config.label,
+        options: config.options,
+        operators: config.operators,
+        offered: config.offered,
+    };
+}
+function booleanFilter(config) {
+    return {
+        kind: 'boolean',
+        label: config.label,
+        operators: config.operators,
+        offered: config.offered,
+    };
+}
+function dateFilter(config) {
+    return {
+        kind: 'date',
+        label: config.label,
+        operators: config.operators,
+        offered: config.offered,
+    };
+}
+/** The shape `Date.toJSON` writes, which is the only value here JSON cannot round-trip itself. */
+const ISO_DATE = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z$/;
+function reviveValue(value) {
+    if (typeof value === 'string' && ISO_DATE.test(value))
+        return new Date(value);
+    if (Array.isArray(value))
+        return value.map(reviveValue);
+    return value;
+}
+/**
+ * A blanked value is NOT a constraint. `contains ''` matches every row, so emitting one would
+ * narrow nothing while the bar claims the grid is filtered.
+ */
+function isBlank(value) {
+    if (value === null || value === undefined)
+        return true;
+    if (typeof value === 'string')
+        return value.trim() === '';
+    if (Array.isArray(value))
+        return value.length === 0;
+    // A half-typed datepicker yields an Invalid Date, which JSON.stringify writes as `null`.
+    if (value instanceof Date)
+        return Number.isNaN(value.getTime());
+    return false;
+}
+/**
+ * Whether two constraint values are the same QUESTION. Identity is not it: every `set` builds a
+ * fresh draft, a multiselect hands back a fresh array per change, and two Dates at one instant
+ * are one constraint. This is what `commit` bails on, so a paste-over-itself or a double Apply
+ * cannot spend a request — the rule PACMS's order list used to hand-roll as `lastCommittedTerm`.
+ */
+function valueEquals(a, b) {
+    if (a === b)
+        return true;
+    if (a instanceof Date && b instanceof Date)
+        return a.getTime() === b.getTime();
+    if (Array.isArray(a) && Array.isArray(b)) {
+        return a.length === b.length && a.every((item, i) => valueEquals(item, b[i]));
+    }
+    return false;
+}
+function constraintEquals(a, b) {
+    return a != null && a.operator === b.operator && valueEquals(a.value, b.value);
+}
+/**
+ * The filter engine. It knows nothing about columns: a filter has an id, a value type and a
+ * constraint, and that is the entire vocabulary.
+ */
+function createFilterStore(definitions) {
+    // Per-filter offered operators, resolved ONCE per declaration — so an invalid narrowing is
+    // said once, not on every editor open — and re-resolved only where the inputs can actually
+    // change: `setOptions`, because options' PRESENCE flips a filter between pick-list (`In`) and
+    // plain operators. A per-store Map rather than the module-level WeakMap this first shipped
+    // as: that memo was keyed on a definition object consumers mutate, so late-filled options
+    // could freeze a filter's operators at the wrong answer.
+    const resolveOffered = (id) => {
+        const definition = definitions[id];
+        const base = baseOperators(definition.kind, definition.options != null);
+        let codes = base;
+        if (definition.operators?.length) {
+            const survivors = definition.operators.filter((operator) => base.includes(operator));
+            // Same polarity as the column path's computeMatchModes: a bad entry is dropped and said
+            // out loud, and a narrowing that leaves nothing falls back to the full list — an editor
+            // with no operators would be unusable, which is worse than an unwanted one. Mostly
+            // unreachable now that FilterConfig types `operators` per kind; kept for dynamically
+            // built arrays.
+            if (survivors.length < definition.operators.length) {
+                console.error(`Filter '${definition.label}' narrows to operators its ${definition.kind} kind does not ` +
+                    `offer (${definition.operators.join(', ')}; offered: ${base.join(', ')}). ` +
+                    `Unsupported entries are ignored${survivors.length ? '' : '; falling back to the full list'}.`);
+            }
+            codes = survivors.length ? survivors : base;
+        }
+        return { codes, options: toOperatorOptions(definition.kind, codes) };
+    };
+    const offered = new Map();
+    for (const id of Object.keys(definitions)) {
+        offered.set(id, resolveOffered(id));
+    }
+    /**
+     * The operator applied when nobody picked one. Options mean `In`, whatever the kind's default;
+     * a narrowed filter defaults to its FIRST declared operator.
+     */
+    const defaultOperatorFor = (id) => {
+        const definition = definitions[id];
+        if (definition.options != null)
+            return MatchModeCodes.In;
+        return definition.operators?.length
+            ? offered.get(id).codes[0]
+            : DEFAULT_OPERATOR[definition.kind];
+    };
+    // Two stores, and the split is the whole point: `set` writes a DRAFT, `commit` publishes it.
+    // A chip drawn off a draft would repeat the mistake the header's filter icon already shipped —
+    // claiming the grid is narrowed on the first keystroke. Controls that apply on change
+    // (multiselect, boolean, date) call both at once; a text box commits on Enter or blur.
+    const drafts = signal(new Map());
+    const writeDraft = (id, constraint) => {
+        const next = new Map(drafts());
+        if (constraint === null)
+            next.delete(id);
+        else
+            next.set(id, constraint);
+        drafts.set(next);
+    };
+    const committed = signal(new Map());
+    const applied = computed(() => [...committed()].map(([id, constraint]) => ({
+        id: id,
+        label: definitions[id].label,
+        kind: definitions[id].kind,
+        operator: constraint.operator,
+        operatorPhraseKey: OPERATOR_WORDS[definitions[id].kind][constraint.operator]?.phraseKey ??
+            constraint.operator,
+        value: constraint.value,
+    })));
+    const store = {
+        definitions,
+        applied,
+        /**
+         * A handle bound to one filter. This is the PLACEMENT api: it needs nothing from the component
+         * tree, so the same filter can be driven from the bar, from a header cell, or from a drawer
+         * rendered at app root. `value` is the DRAFT — a control shows what was typed, not what was
+         * applied; `applied()` is the other question and the bar asks that one.
+         */
+        get(id) {
+            return {
+                id: id,
+                label: definitions[id].label,
+                kind: definitions[id].kind,
+                value: computed(() => drafts().get(id)?.value),
+                operator: computed(() => drafts().get(id)?.operator),
+                // Getters, not snapshots: options can land AFTER a handle is taken — the bar's editor
+                // holds one for the life of the popover, and PACMS fills its lookups asynchronously —
+                // and a snapshot left an already-open pick-list empty until it was reopened. The
+                // operator list rides along, since setOptions can flip it to `In`.
+                get operators() {
+                    return offered.get(id).options;
+                },
+                get defaultOperator() {
+                    return defaultOperatorFor(id);
+                },
+                get options() {
+                    return definitions[id].options;
+                },
+                set: (constraint) => store.set(id, constraint),
+                commit: () => store.commit(id),
+                reset: () => store.reset(id),
+            };
+        },
+        /**
+         * The ONE seam for choices that arrive after the store is built (PACMS fills its pick-lists
+         * from lookups that race a deploy). Never write `definitions[id].options` by hand: options'
+         * PRESENCE is what makes a filter a pick-list, so the setter also re-resolves the offered
+         * operators — a hand write would leave a late-filled filter offering `Equals` on a control
+         * that emits a list.
+         */
+        setOptions(id, options) {
+            definitions[id].options = options;
+            offered.set(id, resolveOffered(id));
+        },
+        set(id, constraint) {
+            const kind = definitions[id].kind;
+            // Throws rather than logging and ignoring, which is what `computeMatchModes` does for a
+            // column's OFFERED match modes. Different stakes: that one narrows a dropdown, so a bad
+            // entry merely fails to show, while this one assembles a QUERY — dropping it silently would
+            // leave the operator looking at unfiltered rows believing they are filtered.
+            if (!ALLOWED_OPERATORS[kind].includes(constraint.operator)) {
+                throw new Error(`Filter '${String(id)}' is ${kind}, which does not accept the '${constraint.operator}' ` +
+                    `operator (allowed: ${ALLOWED_OPERATORS[kind].join(', ')}). The generated paginator ` +
+                    `answers an unsupported match mode with InvalidMatchMode.`);
+            }
+            writeDraft(id, constraint);
+        },
+        /**
+         * `set` + `commit` in one breath — the shape every PROGRAMMATIC write takes (a view's
+         * `apply`, the sheet flow). The split API stays for controls, where draft-on-type /
+         * publish-on-Apply is the point; but a bare `set` whose `commit` is forgotten (or written
+         * with the wrong id — the pair repeats the string twice) fails silently: the draft is
+         * written, nothing is published, and a view narrows by nothing under a labelled tab.
+         */
+        setAndCommit(id, constraint) {
+            store.set(id, constraint);
+            store.commit(id);
+        },
+        /**
+         * Publishes the draft. A blanked draft REMOVES the constraint rather than committing an empty
+         * one, so `applied()` and the payload agree: no chip, no key, no `contains ''`.
+         */
+        commit(id) {
+            const draft = drafts().get(id);
+            const current = committed();
+            const shouldRemove = draft === undefined || isBlank(draft.value);
+            // A new Map is a new identity even with identical contents, and everything downstream
+            // reacts to identity — so a no-op commit would spend a request. The bail compares the
+            // CONSTRAINT, not the draft object: every set() builds a fresh draft, and the case that
+            // matters is an identical value re-committed (see valueEquals).
+            if (shouldRemove ? !current.has(id) : constraintEquals(current.get(id), draft))
+                return;
+            const next = new Map(current);
+            if (shouldRemove)
+                next.delete(id);
+            else
+                next.set(id, draft);
+            committed.set(next);
+        },
+        /**
+         * The chip's `x`. Drops the DRAFT as well as the committed constraint: a surviving draft
+         * leaves the control still showing the cleared text, and the next commit would restore a
+         * filter nobody re-typed.
+         */
+        reset(id) {
+            if (drafts().has(id))
+                writeDraft(id, null);
+            if (!committed().has(id))
+                return;
+            const next = new Map(committed());
+            next.delete(id);
+            committed.set(next);
+        },
+        /**
+         * The applied set, plain enough to store. Drafts are deliberately NOT included: a half-typed
+         * value is not a state anyone should come back to, and the bar's whole claim is that what it
+         * shows is what narrows the grid.
+         */
+        snapshot() {
+            const snapshot = {};
+            for (const [id, constraint] of committed()) {
+                snapshot[id] = {
+                    operator: constraint.operator,
+                    value: constraint.value,
+                };
+            }
+            return snapshot;
+        },
+        /**
+         * Replaces the applied set. The drafts are written too, so reopening a restored chip shows
+         * the value it is filtering by rather than an empty control.
+         *
+         * Ids the store no longer declares are dropped rather than carried: a filter removed from the
+         * declaration in a later release would otherwise ride every request from anyone whose storage
+         * still held it, with no chip able to name it and no way to clear it from the UI.
+         */
+        restore(snapshot) {
+            const next = new Map();
+            for (const [id, constraint] of Object.entries(snapshot ?? {})) {
+                if (!(id in definitions))
+                    continue;
+                next.set(id, {
+                    operator: constraint.operator,
+                    value: reviveValue(constraint.value),
+                });
+            }
+            drafts.set(new Map(next));
+            committed.set(next);
+        },
+        /** The bar's "Clear all". `reset` for every filter, drafts included. */
+        clear() {
+            if (drafts().size > 0)
+                drafts.set(new Map());
+            if (committed().size > 0)
+                committed.set(new Map());
+        },
+        /** The `filters` half of `Filter` — what the generated paginator reads. */
+        toFilterPayload() {
+            const payload = {};
+            for (const [id, constraint] of committed()) {
+                payload[id] = [
+                    { matchMode: constraint.operator, value: constraint.value },
+                ];
+            }
+            return payload;
+        },
+    };
+    return store;
+}
+
 class SpiderlyDataViewComponent {
     constructor(translocoService, locale) {
         this.translocoService = translocoService;
@@ -5142,7 +6945,24 @@ class SpiderlyDataViewComponent {
             },
         ];
     }
+    // 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".
+    onPageChange(container) {
+        scrollElementIntoViewIfAboveViewport(container);
+    }
+    /**
+     * The one pending predicate: PrimeNG's overlay and the container's `aria-busy` must never
+     * disagree. Mirrors the data table's, including why it is not also testing `items`; the
+     * rationale lives there.
+     */
+    get isPending() {
+        return this.loading;
+    }
     lazyLoad(event) {
+        // Every refetch is pending, not just the first load. `items` is deliberately left alone so
+        // the previous page stays readable under the overlay. Full reasoning: the data table's
+        // CLAUDE.md → "Pending state".
+        this.loading = true;
         this.lastLazyLoadEvent = event;
         const transformedFilter = {};
         for (const key in event.filters) {
@@ -5163,7 +6983,7 @@ class SpiderlyDataViewComponent {
         tableFilter.filters = transformedFilter;
         this.onLazyLoad.next(tableFilter);
         this.getPaginatedListObservableMethod(tableFilter).subscribe({
-            next: async (res) => {
+            next: (res) => {
                 this.items = res.data;
                 this.totalRecords = res.totalRecords;
                 this.loading = false;
@@ -5207,8 +7027,10 @@ class SpiderlyDataViewComponent {
         }
     }
     reload() {
-        this.loading = true;
-        this.items = null;
+        // Nothing to replay before the initial load, which is already on its way.
+        if (this.lastLazyLoadEvent == null)
+            return;
+        // Not special: same refetch as a page flip, so lazyLoad owns both the flag and `items`.
         this.lazyLoad(this.lastLazyLoadEvent);
     }
     colTrackByFn(index, item) {
@@ -5221,7 +7043,7 @@ class SpiderlyDataViewComponent {
         this.table.clear();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyDataViewComponent, deps: [{ token: i1.TranslocoService }, { token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: SpiderlyDataViewComponent, isStandalone: true, selector: "spiderly-data-view", inputs: { items: "items", rows: "rows", filters: "filters", showCardWrapper: "showCardWrapper", showPaginatorRightData: "showPaginatorRightData", showTotalRecordsNumber: "showTotalRecordsNumber", applyFiltersIcon: "applyFiltersIcon", clearFiltersIcon: "clearFiltersIcon", getPaginatedListObservableMethod: "getPaginatedListObservableMethod" }, outputs: { onLazyLoad: "onLazyLoad" }, queries: [{ propertyName: "cardBody", first: true, predicate: ["cardBody"], descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "table", first: true, predicate: ["dt"], descendants: true }], ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  <div\n    [class]=\"\n      showCardWrapper ? 'card responsive-card-padding overflow-auto' : ''\n    \"\n  >\n    <p-table\n      #dt\n      [value]=\"items\"\n      [rows]=\"rows\"\n      [rowHover]=\"false\"\n      responsiveLayout=\"scroll\"\n      [lazy]=\"true\"\n      (onLazyLoad)=\"lazyLoad($event)\"\n      [totalRecords]=\"totalRecords\"\n      class=\"spiderly-table\"\n      [loading]=\"items === undefined || loading === true\"\n      dataKey=\"id\"\n      (onFilter)=\"filter($event)\"\n      [filterDelay]=\"500\"\n      [paginator]=\"true\"\n    >\n      <ng-template #caption>\n        <div *ngIf=\"filters.length !== 0\">\n          <div class=\"data-view-grid\">\n            @for (filter of filters; track $index) {\n              <div>\n                <div\n                  style=\"\n                    display: flex;\n                    flex-direction: column;\n                    gap: 0.5rem;\n                    position: relative;\n                  \"\n                >\n                  <div>\n                    <label>\n                      {{ filter.label }}\n                    </label>\n                  </div>\n\n                  <p-columnFilter\n                    *ngIf=\"filter.type != null\"\n                    [type]=\"filter.type\"\n                    [field]=\"filter.filterField ?? filter.field\"\n                    display=\"row\"\n                    [placeholder]=\"filter.placeholder\"\n                    [showOperator]=\"false\"\n                    [showMenu]=\"filter.showMatchModes\"\n                    [showMatchModes]=\"true\"\n                    [showClearButton]=\"false\"\n                    [matchMode]=\"getDefaultMatchMode(filter.type)\"\n                    [matchModeOptions]=\"getMatchModeOptions(filter.type)\"\n                  >\n                    <ng-container *ngIf=\"filter.type == 'multiselect'\">\n                      <ng-template\n                        pTemplate=\"filter\"\n                        let-value\n                        let-filter=\"filterCallback\"\n                      >\n                        <p-multiSelect\n                          [ngModel]=\"value\"\n                          [options]=\"filter.dropdownOrMultiselectValues\"\n                          [placeholder]=\"t('All')\"\n                          (onChange)=\"filter($event.value)\"\n                          optionLabel=\"label\"\n                          optionValue=\"code\"\n                          [style]=\"{ width: '100%' }\"\n                        >\n                          <ng-template let-item pTemplate=\"item\">\n                            <div class=\"p-multiselect-representative-option\">\n                              <span class=\"ml-2\">{{ item.label }}</span>\n                            </div>\n                          </ng-template>\n                        </p-multiSelect>\n                      </ng-template>\n                    </ng-container>\n                  </p-columnFilter>\n                </div>\n              </div>\n            }\n          </div>\n          <div style=\"display: flex; gap: 12px\">\n            <spiderly-button\n              [label]=\"t('ApplyFilters')\"\n              (onClick)=\"applyFilters()\"\n              [icon]=\"applyFiltersIcon\"\n            ></spiderly-button>\n            <spiderly-button\n              [label]=\"t('ClearFilters')\"\n              (onClick)=\"clearFilters()\"\n              [icon]=\"clearFiltersIcon\"\n            ></spiderly-button>\n          </div>\n        </div>\n      </ng-template>\n      <ng-template #body let-rowData let-index=\"rowIndex\">\n        <tr style=\"padding: 0; margin-bottom: 0\">\n          <td style=\"display: block; border: 0; padding: 0\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                cardBody;\n                context: { $implicit: rowData, item: rowData, index: index }\n              \"\n            >\n            </ng-container>\n          </td>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"emptymessage\">\n        {{ t(\"NoRecordsFound\") }}\n      </ng-template>\n      <ng-template *ngIf=\"showTotalRecordsNumber\" pTemplate=\"paginatorleft\">\n        {{ t(\"TotalRecords\") }}: {{ totalRecords }}\n      </ng-template>\n      <ng-template *ngIf=\"showPaginatorRightData\" pTemplate=\"paginatorright\">\n        <ng-content select=\"[PAGINATORRIGHT]\"></ng-content>\n      </ng-template>\n    </p-table>\n  </div>\n</ng-container>\n", styles: ["::ng-deep .p-datatable-tbody{display:flex;flex-direction:column;gap:18px}::ng-deep .p-datatable-header{margin-bottom:36px;border:0!important;padding:0!important;background-color:transparent!important}::ng-deep .p-paginator{padding:18px 9px 0!important}::ng-deep .p-fluid{width:100%!important}::ng-deep .p-inputtext{width:100%!important}::ng-deep .p-inputnumber{width:100%!important}::ng-deep .p-datepicker{width:100%!important}.data-view-grid{display:grid;gap:18px;grid-template-columns:1fr 1fr 1fr;margin-bottom:18px}@media (max-width: 1080px){.data-view-grid{gap:12px;grid-template-columns:1fr 1fr}}@media (max-width: 500px){.data-view-grid{grid-template-columns:1fr}}\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.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: "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: "component", type: i10.ColumnFilter, selector: "p-columnFilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "showButtons", "ariaLabel", "filterButtonProps"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i4$5.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: CheckboxModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: DatePickerModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: InputNumberModule }, { kind: "ngmodule", type: SelectModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: SpiderlyDataViewComponent, isStandalone: true, selector: "spiderly-data-view", inputs: { items: "items", rows: "rows", filters: "filters", showCardWrapper: "showCardWrapper", showPaginatorRightData: "showPaginatorRightData", showTotalRecordsNumber: "showTotalRecordsNumber", applyFiltersIcon: "applyFiltersIcon", clearFiltersIcon: "clearFiltersIcon", getPaginatedListObservableMethod: "getPaginatedListObservableMethod" }, outputs: { onLazyLoad: "onLazyLoad" }, queries: [{ propertyName: "cardBody", first: true, predicate: ["cardBody"], descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "table", first: true, predicate: ["dt"], descendants: 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      [rowHover]=\"false\"\n      responsiveLayout=\"scroll\"\n      [lazy]=\"true\"\n      (onLazyLoad)=\"lazyLoad($event)\"\n      (onPage)=\"onPageChange(tableContainer)\"\n      [totalRecords]=\"totalRecords\"\n      class=\"spiderly-table\"\n      [loading]=\"isPending\"\n      dataKey=\"id\"\n      (onFilter)=\"filter($event)\"\n      [filterDelay]=\"500\"\n      [paginator]=\"true\"\n    >\n      <ng-template #caption>\n        <div *ngIf=\"filters.length !== 0\">\n          <div class=\"data-view-grid\">\n            @for (filter of filters; track $index) {\n              <div>\n                <div\n                  style=\"\n                    display: flex;\n                    flex-direction: column;\n                    gap: 0.5rem;\n                    position: relative;\n                  \"\n                >\n                  <div>\n                    <label>\n                      {{ filter.label }}\n                    </label>\n                  </div>\n\n                  <p-columnFilter\n                    *ngIf=\"filter.type != null\"\n                    [type]=\"filter.type\"\n                    [field]=\"filter.filterField ?? filter.field\"\n                    display=\"row\"\n                    [placeholder]=\"filter.placeholder\"\n                    [showOperator]=\"false\"\n                    [showMenu]=\"filter.showMatchModes\"\n                    [showMatchModes]=\"true\"\n                    [showClearButton]=\"false\"\n                    [matchMode]=\"getDefaultMatchMode(filter.type)\"\n                    [matchModeOptions]=\"getMatchModeOptions(filter.type)\"\n                  >\n                    <ng-container *ngIf=\"filter.type == 'multiselect'\">\n                      <ng-template\n                        pTemplate=\"filter\"\n                        let-value\n                        let-filter=\"filterCallback\"\n                      >\n                        <p-multiSelect\n                          [ngModel]=\"value\"\n                          [options]=\"filter.dropdownOrMultiselectValues\"\n                          [placeholder]=\"t('All')\"\n                          (onChange)=\"filter($event.value)\"\n                          optionLabel=\"label\"\n                          optionValue=\"code\"\n                          [style]=\"{ width: '100%' }\"\n                        >\n                          <ng-template let-item pTemplate=\"item\">\n                            <div class=\"p-multiselect-representative-option\">\n                              <span class=\"ml-2\">{{ item.label }}</span>\n                            </div>\n                          </ng-template>\n                        </p-multiSelect>\n                      </ng-template>\n                    </ng-container>\n                  </p-columnFilter>\n                </div>\n              </div>\n            }\n          </div>\n          <div style=\"display: flex; gap: 12px\">\n            <spiderly-button\n              [label]=\"t('ApplyFilters')\"\n              (onClick)=\"applyFilters()\"\n              [icon]=\"applyFiltersIcon\"\n            ></spiderly-button>\n            <spiderly-button\n              [label]=\"t('ClearFilters')\"\n              (onClick)=\"clearFilters()\"\n              [icon]=\"clearFiltersIcon\"\n            ></spiderly-button>\n          </div>\n        </div>\n      </ng-template>\n      <ng-template #body let-rowData let-index=\"rowIndex\">\n        <tr style=\"padding: 0; margin-bottom: 0\">\n          <td style=\"display: block; border: 0; padding: 0\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                cardBody;\n                context: { $implicit: rowData, item: rowData, index: index }\n              \"\n            >\n            </ng-container>\n          </td>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"emptymessage\">\n        {{ t(\"NoRecordsFound\") }}\n      </ng-template>\n      <ng-template *ngIf=\"showTotalRecordsNumber\" pTemplate=\"paginatorleft\">\n        {{ t(\"TotalRecords\") }}: {{ totalRecords }}\n      </ng-template>\n      <ng-template *ngIf=\"showPaginatorRightData\" pTemplate=\"paginatorright\">\n        <ng-content select=\"[PAGINATORRIGHT]\"></ng-content>\n      </ng-template>\n    </p-table>\n  </div>\n</ng-container>\n", styles: [":host .spiderly-table-container{scroll-margin-top:calc(var(--spiderly-viewport-top-inset, 0px) + 1rem)}: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}::ng-deep .p-datatable-tbody{display:flex;flex-direction:column;gap:18px}::ng-deep .p-datatable-header{margin-bottom:36px;border:0!important;padding:0!important;background-color:transparent!important}::ng-deep .p-paginator{padding:18px 9px 0!important}::ng-deep .p-fluid{width:100%!important}::ng-deep .p-inputtext{width:100%!important}::ng-deep .p-inputnumber{width:100%!important}::ng-deep .p-datepicker{width:100%!important}.data-view-grid{display:grid;gap:18px;grid-template-columns:1fr 1fr 1fr;margin-bottom:18px}@media (max-width: 1080px){.data-view-grid{gap:12px;grid-template-columns:1fr 1fr}}@media (max-width: 500px){.data-view-grid{grid-template-columns:1fr}}\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.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: "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: "component", type: i10.ColumnFilter, selector: "p-columnFilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "useGrouping", "showButtons", "ariaLabel", "filterButtonProps"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ButtonModule }, { 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: CheckboxModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: DatePickerModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: InputNumberModule }, { kind: "ngmodule", type: SelectModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyDataViewComponent, decorators: [{
             type: Component,
@@ -5239,7 +7061,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
                         InputTextModule,
                         InputNumberModule,
                         SelectModule,
-                    ], template: "<ng-container *transloco=\"let t\">\n  <div\n    [class]=\"\n      showCardWrapper ? 'card responsive-card-padding overflow-auto' : ''\n    \"\n  >\n    <p-table\n      #dt\n      [value]=\"items\"\n      [rows]=\"rows\"\n      [rowHover]=\"false\"\n      responsiveLayout=\"scroll\"\n      [lazy]=\"true\"\n      (onLazyLoad)=\"lazyLoad($event)\"\n      [totalRecords]=\"totalRecords\"\n      class=\"spiderly-table\"\n      [loading]=\"items === undefined || loading === true\"\n      dataKey=\"id\"\n      (onFilter)=\"filter($event)\"\n      [filterDelay]=\"500\"\n      [paginator]=\"true\"\n    >\n      <ng-template #caption>\n        <div *ngIf=\"filters.length !== 0\">\n          <div class=\"data-view-grid\">\n            @for (filter of filters; track $index) {\n              <div>\n                <div\n                  style=\"\n                    display: flex;\n                    flex-direction: column;\n                    gap: 0.5rem;\n                    position: relative;\n                  \"\n                >\n                  <div>\n                    <label>\n                      {{ filter.label }}\n                    </label>\n                  </div>\n\n                  <p-columnFilter\n                    *ngIf=\"filter.type != null\"\n                    [type]=\"filter.type\"\n                    [field]=\"filter.filterField ?? filter.field\"\n                    display=\"row\"\n                    [placeholder]=\"filter.placeholder\"\n                    [showOperator]=\"false\"\n                    [showMenu]=\"filter.showMatchModes\"\n                    [showMatchModes]=\"true\"\n                    [showClearButton]=\"false\"\n                    [matchMode]=\"getDefaultMatchMode(filter.type)\"\n                    [matchModeOptions]=\"getMatchModeOptions(filter.type)\"\n                  >\n                    <ng-container *ngIf=\"filter.type == 'multiselect'\">\n                      <ng-template\n                        pTemplate=\"filter\"\n                        let-value\n                        let-filter=\"filterCallback\"\n                      >\n                        <p-multiSelect\n                          [ngModel]=\"value\"\n                          [options]=\"filter.dropdownOrMultiselectValues\"\n                          [placeholder]=\"t('All')\"\n                          (onChange)=\"filter($event.value)\"\n                          optionLabel=\"label\"\n                          optionValue=\"code\"\n                          [style]=\"{ width: '100%' }\"\n                        >\n                          <ng-template let-item pTemplate=\"item\">\n                            <div class=\"p-multiselect-representative-option\">\n                              <span class=\"ml-2\">{{ item.label }}</span>\n                            </div>\n                          </ng-template>\n                        </p-multiSelect>\n                      </ng-template>\n                    </ng-container>\n                  </p-columnFilter>\n                </div>\n              </div>\n            }\n          </div>\n          <div style=\"display: flex; gap: 12px\">\n            <spiderly-button\n              [label]=\"t('ApplyFilters')\"\n              (onClick)=\"applyFilters()\"\n              [icon]=\"applyFiltersIcon\"\n            ></spiderly-button>\n            <spiderly-button\n              [label]=\"t('ClearFilters')\"\n              (onClick)=\"clearFilters()\"\n              [icon]=\"clearFiltersIcon\"\n            ></spiderly-button>\n          </div>\n        </div>\n      </ng-template>\n      <ng-template #body let-rowData let-index=\"rowIndex\">\n        <tr style=\"padding: 0; margin-bottom: 0\">\n          <td style=\"display: block; border: 0; padding: 0\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                cardBody;\n                context: { $implicit: rowData, item: rowData, index: index }\n              \"\n            >\n            </ng-container>\n          </td>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"emptymessage\">\n        {{ t(\"NoRecordsFound\") }}\n      </ng-template>\n      <ng-template *ngIf=\"showTotalRecordsNumber\" pTemplate=\"paginatorleft\">\n        {{ t(\"TotalRecords\") }}: {{ totalRecords }}\n      </ng-template>\n      <ng-template *ngIf=\"showPaginatorRightData\" pTemplate=\"paginatorright\">\n        <ng-content select=\"[PAGINATORRIGHT]\"></ng-content>\n      </ng-template>\n    </p-table>\n  </div>\n</ng-container>\n", styles: ["::ng-deep .p-datatable-tbody{display:flex;flex-direction:column;gap:18px}::ng-deep .p-datatable-header{margin-bottom:36px;border:0!important;padding:0!important;background-color:transparent!important}::ng-deep .p-paginator{padding:18px 9px 0!important}::ng-deep .p-fluid{width:100%!important}::ng-deep .p-inputtext{width:100%!important}::ng-deep .p-inputnumber{width:100%!important}::ng-deep .p-datepicker{width:100%!important}.data-view-grid{display:grid;gap:18px;grid-template-columns:1fr 1fr 1fr;margin-bottom:18px}@media (max-width: 1080px){.data-view-grid{gap:12px;grid-template-columns:1fr 1fr}}@media (max-width: 500px){.data-view-grid{grid-template-columns:1fr}}\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      [rowHover]=\"false\"\n      responsiveLayout=\"scroll\"\n      [lazy]=\"true\"\n      (onLazyLoad)=\"lazyLoad($event)\"\n      (onPage)=\"onPageChange(tableContainer)\"\n      [totalRecords]=\"totalRecords\"\n      class=\"spiderly-table\"\n      [loading]=\"isPending\"\n      dataKey=\"id\"\n      (onFilter)=\"filter($event)\"\n      [filterDelay]=\"500\"\n      [paginator]=\"true\"\n    >\n      <ng-template #caption>\n        <div *ngIf=\"filters.length !== 0\">\n          <div class=\"data-view-grid\">\n            @for (filter of filters; track $index) {\n              <div>\n                <div\n                  style=\"\n                    display: flex;\n                    flex-direction: column;\n                    gap: 0.5rem;\n                    position: relative;\n                  \"\n                >\n                  <div>\n                    <label>\n                      {{ filter.label }}\n                    </label>\n                  </div>\n\n                  <p-columnFilter\n                    *ngIf=\"filter.type != null\"\n                    [type]=\"filter.type\"\n                    [field]=\"filter.filterField ?? filter.field\"\n                    display=\"row\"\n                    [placeholder]=\"filter.placeholder\"\n                    [showOperator]=\"false\"\n                    [showMenu]=\"filter.showMatchModes\"\n                    [showMatchModes]=\"true\"\n                    [showClearButton]=\"false\"\n                    [matchMode]=\"getDefaultMatchMode(filter.type)\"\n                    [matchModeOptions]=\"getMatchModeOptions(filter.type)\"\n                  >\n                    <ng-container *ngIf=\"filter.type == 'multiselect'\">\n                      <ng-template\n                        pTemplate=\"filter\"\n                        let-value\n                        let-filter=\"filterCallback\"\n                      >\n                        <p-multiSelect\n                          [ngModel]=\"value\"\n                          [options]=\"filter.dropdownOrMultiselectValues\"\n                          [placeholder]=\"t('All')\"\n                          (onChange)=\"filter($event.value)\"\n                          optionLabel=\"label\"\n                          optionValue=\"code\"\n                          [style]=\"{ width: '100%' }\"\n                        >\n                          <ng-template let-item pTemplate=\"item\">\n                            <div class=\"p-multiselect-representative-option\">\n                              <span class=\"ml-2\">{{ item.label }}</span>\n                            </div>\n                          </ng-template>\n                        </p-multiSelect>\n                      </ng-template>\n                    </ng-container>\n                  </p-columnFilter>\n                </div>\n              </div>\n            }\n          </div>\n          <div style=\"display: flex; gap: 12px\">\n            <spiderly-button\n              [label]=\"t('ApplyFilters')\"\n              (onClick)=\"applyFilters()\"\n              [icon]=\"applyFiltersIcon\"\n            ></spiderly-button>\n            <spiderly-button\n              [label]=\"t('ClearFilters')\"\n              (onClick)=\"clearFilters()\"\n              [icon]=\"clearFiltersIcon\"\n            ></spiderly-button>\n          </div>\n        </div>\n      </ng-template>\n      <ng-template #body let-rowData let-index=\"rowIndex\">\n        <tr style=\"padding: 0; margin-bottom: 0\">\n          <td style=\"display: block; border: 0; padding: 0\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                cardBody;\n                context: { $implicit: rowData, item: rowData, index: index }\n              \"\n            >\n            </ng-container>\n          </td>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"emptymessage\">\n        {{ t(\"NoRecordsFound\") }}\n      </ng-template>\n      <ng-template *ngIf=\"showTotalRecordsNumber\" pTemplate=\"paginatorleft\">\n        {{ t(\"TotalRecords\") }}: {{ totalRecords }}\n      </ng-template>\n      <ng-template *ngIf=\"showPaginatorRightData\" pTemplate=\"paginatorright\">\n        <ng-content select=\"[PAGINATORRIGHT]\"></ng-content>\n      </ng-template>\n    </p-table>\n  </div>\n</ng-container>\n", styles: [":host .spiderly-table-container{scroll-margin-top:calc(var(--spiderly-viewport-top-inset, 0px) + 1rem)}: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}::ng-deep .p-datatable-tbody{display:flex;flex-direction:column;gap:18px}::ng-deep .p-datatable-header{margin-bottom:36px;border:0!important;padding:0!important;background-color:transparent!important}::ng-deep .p-paginator{padding:18px 9px 0!important}::ng-deep .p-fluid{width:100%!important}::ng-deep .p-inputtext{width:100%!important}::ng-deep .p-inputnumber{width:100%!important}::ng-deep .p-datepicker{width:100%!important}.data-view-grid{display:grid;gap:18px;grid-template-columns:1fr 1fr 1fr;margin-bottom:18px}@media (max-width: 1080px){.data-view-grid{gap:12px;grid-template-columns:1fr 1fr}}@media (max-width: 500px){.data-view-grid{grid-template-columns:1fr}}\n"] }]
         }], ctorParameters: () => [{ type: i1.TranslocoService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [LOCALE_ID]
@@ -5358,12 +7180,9 @@ class Filter extends BaseEntity {
  * The `FilterRule` class is a generic structure that defines a single filtering condition,
  * including the match mode (comparison operator), the value to compare, and an optional logical operator.
  *
- * The allowed match modes are determined by the type parameter `T`:
- * - For `string`: supports `Contains`, `StartsWith`, and `Equals`.
- * - For `boolean`: supports `Equals`.
- * - For `Date`: supports `Equals`, `GreaterThan`, and `LessThan`.
- * - For `number`: supports `Equals`, `GreaterThan`, `LessThan`, and `In`.
- * - For other types: allows any value from `MatchModeCodes`.
+ * The allowed match modes are determined by the type parameter `T`, each union derived from the
+ * one operator table in `filters/allowed-operators.ts` (for other types, any `MatchModeCodes`
+ * value is allowed).
  *
  * @template T The type of the value to filter by.
  */
@@ -5765,5 +7584,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { Action, AllClickEvent, ApiErrorCodes, ApiSecurityService, AppSidebarComponent, AuthCardComponent, AuthGuard, AuthResult, AuthResultWithCookies, AuthServiceBase, BaseAutocompleteControl, BaseControl, BaseDropdownControl, BaseEntity, BaseFormComponent, BaseFormService, CardSkeletonComponent, Codebook, Column, ConfigServiceBase, DEFAULT_EXTERNAL_PROVIDER_ICONS, 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, SpiderlyFormArray, SpiderlyFormControl, SpiderlyFormGroup, SpiderlyLayoutComponent, SpiderlyLoginComponent, SpiderlyMarkdownComponent, SpiderlyMessageService, SpiderlyMultiAutocompleteComponent, SpiderlyMultiSelectComponent, SpiderlyNumberComponent, SpiderlyPanelComponent, SpiderlyPanelsModule, SpiderlyPasswordComponent, SpiderlyReturnButtonComponent, SpiderlySplitButtonComponent, SpiderlyTab, SpiderlyTemplateTypeDirective, SpiderlyTextareaComponent, SpiderlyTextboxComponent, SpiderlyTranslocoLoader, TopBarComponent, UserBase, UserRole, ValidatorAbstractService, VerificationTokenRequest, VerificationTypeCodes, VerificationWrapperComponent, adjustColor, authInitializer, capitalizeFirstChar, deleteAction, exportListToExcel, firstCharToUpper, getFileNameFromContentDisposition, getHtmlImgDisplayString64, getImageDimensions, getMimeTypeForFileName, getMonth, getParentUrl, getPrimengAutocompleteCodebookOptions, getPrimengAutocompleteNamebookOptions, getPrimengDropdownCodebookOptions, getPrimengDropdownNamebookOptions, getPrimengNamebookOptions, httpLoadingInterceptor, isExcelFileType, isFileImageType, isNullOrEmpty, jsonHttpInterceptor, jwtInterceptor, kebabToTitleCase, nameOf, nameof, parseDateOnlyLocal, pushAction, saveResponseAsFile, selectedTab, singleOrDefault, splitPascalCase, 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, parseDateOnlyLocal, pushAction, saveResponseAsFile, scrollElementIntoViewIfAboveViewport, selectedTab, singleOrDefault, splitPascalCase, textFilter, toCommaSeparatedString, unauthorizedInterceptor, validatePrecisionScale };
 //# sourceMappingURL=spiderly.mjs.map