tin-spa 20.14.17 → 20.14.20

package/fesm2022/tin-spa.mjs

@@ -13795,10 +13795,15 @@ class TilesComponent {
         // TS-5: cache chart data/options/plugins so template bindings return STABLE references; without this each
         // change-detection cycle produced new objects, forcing BaseChartDirective to call chart.update() continuously.
         this.chartCache = new WeakMap();
+        this.isAuto = true; // Changed: 'auto' is the DEFAULT again — the original stretch/shrink layout every existing page relies on
         this.isCarousel = false;
         this.tilesStyle = {};
         this.canScrollLeft = false;
         this.canScrollRight = false;
+        // Added: one CACHED outlet context per tile. Building `{ $implicit: tile }` in the template would hand
+        // NgTemplateOutlet a fresh object on every change-detection pass, re-creating every tile's view — the
+        // documented cause of a real livelock in this library (and of editors being destroyed mid-typing).
+        this.ctxCache = new WeakMap();
         this.tileBasis = ''; // Added: carousel-only fixed width, bound per card
         this.tileActionSelected = new EventEmitter();
         this.tileClick = new EventEmitter();
@@ -13822,6 +13827,14 @@ class TilesComponent {
     // ---------------------------------------------------------------------------
     static { this.DEFAULT_MIN_TILE_WIDTH = 200; } // px — below this a tile's label starts wrapping to three lines
     static { this.TILE_GAP = 10; } // px — must match the CSS gap or maxPerRow arithmetic drifts
+    ctx(tile) {
+        let c = this.ctxCache.get(tile);
+        if (!c) {
+            c = { $implicit: tile };
+            this.ctxCache.set(tile, c);
+        }
+        return c;
+    }
     // Added: derives the grid track / carousel basis from minTileWidth + maxPerRow.
     // wrap  -> repeat(auto-fit, minmax(<floor>, 1fr)). auto-fit collapses unused tracks, so a few tiles still
     //          spread across the full width, while many tiles wrap onto the next row all at the SAME width.
@@ -13830,9 +13843,20 @@ class TilesComponent {
     applyLayout() {
         const cfg = this.config;
         const min = cfg?.minTileWidth ?? TilesComponent.DEFAULT_MIN_TILE_WIDTH;
+        // Changed: absent or 'auto' => the ORIGINAL layout. Restored as the default on the owner's instruction
+        // 2026-08-08: making the grid the default regressed every existing page on a phone, where a 200px track
+        // floor does not fit twice in a ~380px viewport and every tile dropped onto its own row.
         this.isCarousel = cfg?.layout === 'carousel';
+        this.isAuto = !this.isCarousel && cfg?.layout !== 'wrap';
+        if (this.isAuto) {
+            this.tilesStyle = {};
+            this.tileBasis = '';
+            return;
+        }
         if (this.isCarousel) {
-            this.tilesStyle = { 'grid-template-columns': '' };
+            // Changed: the width goes on the CONTAINER as a custom property rather than inline on every card, so a
+            // media query can narrow it on a phone. An inline style on the card would have needed !important to beat.
+            this.tilesStyle = { '--tile-basis': min + 'px' };
             this.tileBasis = min + 'px';
             return;
         }
@@ -14235,11 +14259,11 @@ class TilesComponent {
         return [];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TilesComponent, deps: [{ token: DataServiceLib }, { token: MessageService }, { token: i0.ChangeDetectorRef }, { token: ApiErrorService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: TilesComponent, isStandalone: false, selector: "spa-tiles", inputs: { config: "config", lastSearch: "lastSearch", data: "data", reload: "reload" }, outputs: { tileActionSelected: "tileActionSelected", tileClick: "tileClick", tileUnClick: "tileUnClick" }, viewQueries: [{ propertyName: "tileScroller", first: true, predicate: ["tileScroller"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- Changed: the tile row is no longer a bootstrap .row/.col. Those made every tile `flex: 1` with a 150px\n     floor, so N tiles squeezed themselves onto ONE row down to their minimum and whatever spilled over\n     stretched to fill the next row \u2014 7 cramped tiles above 2 enormous ones. Now: 'wrap' (default) is a grid\n     whose tracks are all the same width, so tiles flow onto the next row at a readable size and the last row\n     keeps normal-sized tiles; 'carousel' keeps one row and scrolls. -->\n<div class=\"spa-tiles-outer\">\n\n  <!-- Carousel only: scroll affordances, shown solely when there is something to scroll to -->\n  <button type=\"button\" class=\"tiles-nav\" *ngIf=\"isCarousel && canScrollLeft\" (click)=\"scrollTiles(-1)\" aria-label=\"Scroll tiles left\">\n    <mat-icon>chevron_left</mat-icon>\n  </button>\n\n  <div #tileScroller class=\"spa-tiles\" [class.tiles-wrap]=\"!isCarousel\" [class.tiles-carousel]=\"isCarousel\" [ngStyle]=\"tilesStyle\" (scroll)=\"onTilesScroll()\">\n  <ng-container *ngFor=\"let tile of tiles\">\n    <!-- Changed: tile-clickable class gives pointer + hover lift only on tiles that actually respond to clicks -->\n    <mat-card *ngIf=\"!isHidden(tile)\" class=\"tile-card\" [class.tile-clickable]=\"isClickable(tile)\" [class.selected-tile]=\"tile.name === selectedTile\" [style.flex]=\"tileBasis ? '0 0 ' + tileBasis : null\" (click)=\"clicked(tile)\">\n\n      <!-- Changed: Chart-style tile \u2014 header, prominent chart, optional value, footer -->\n      <ng-container *ngIf=\"tile.chart; else standardTile\">\n        <!-- Changed: Header with tile name \u2014 left-aligned for better hierarchy -->\n        <div class=\"tile-chart-header\">\n          <span>{{tile.alias ?? tile.name | camelToWords}}</span>\n        </div>\n\n        <!-- Changed: Chart fills tile \u2014 uses helper method for reliable data detection -->\n        <div class=\"tile-chart\" *ngIf=\"hasTileChartData(tile)\" [style.height.px]=\"tile.chart.height ?? 120\">\n          <canvas baseChart\n            [type]=\"tile.chart.type\"\n            [data]=\"getTileMiniChartData(tile)\"\n            [options]=\"getMiniChartOptions(tile)\"\n            [plugins]=\"getTileChartPlugins(tile)\">\n          </canvas>\n        </div>\n\n        <!-- Changed: Optional value display below chart \u2014 only show primitive values, skip chart data objects -->\n        <div class=\"tile-chart-value\" *ngIf=\"tile.name && isTileValuePrimitive(tile)\">\n          <span class=\"tile-chart-value-text\" [style.color]=\"tile.color\">{{tile.prefix ?? ''}}{{data?.[tile.name]}}<span *ngIf=\"tile.suffix\"> {{tile.suffix}}</span></span>\n        </div>\n\n        <!-- Changed: Footer with divider for chart tiles -->\n        <div class=\"tile-footer\" *ngIf=\"tile.footer || tile.info\">\n          <mat-divider></mat-divider>\n          <div class=\"d-flex align-items-center\" style=\"gap: 4px; color: #9a9a9a; font-size: 12px; margin-top: 6px;\">\n            <mat-icon *ngIf=\"tile.footerIcon\" style=\"font-size: 16px; width: 16px; height: 16px;\">{{tile.footerIcon}}</mat-icon>\n            <mat-icon *ngIf=\"!tile.footerIcon && tile.info\" style=\"font-size: 16px; width: 16px; height: 16px; color: steelblue;\">info</mat-icon>\n            <span>{{tile.footer ?? tile.info}}</span>\n          </div>\n        </div>\n      </ng-container>\n\n      <!-- Changed: Standard tile \u2014 Paper Dashboard style: icon left, label+value right, optional footer -->\n      <ng-template #standardTile>\n        <!-- Changed: Icon-style tile \u2014 icon left, label top-right, large value below -->\n        <ng-container *ngIf=\"tile.icon; else basicTile\">\n          <div class=\"tile-icon-row\">\n            <div class=\"tile-icon-wrap\" [style.color]=\"tile.color ?? '#2196f3'\">\n              <mat-icon>{{tile.icon}}</mat-icon>\n            </div>\n            <div class=\"tile-icon-content\">\n              <div class=\"tile-icon-label\">{{tile.alias ?? tile.name | camelToWords}}</div>\n              <!-- Changed (Quiet Loading D5): while the value is genuinely unknown the slot shows a shimmer chip instead of the old lying `0`; icon, label and footer render normally so the card never resizes. On a reload the previous number stays put and simply updates. -->\n              <div class=\"tile-icon-value\" [style.color]=\"tile.color\" [attr.aria-busy]=\"showValueGhost(tile) ? 'true' : null\">\n                <span *ngIf=\"tile.prefix\">{{tile.prefix}}</span><span *ngIf=\"showValueGhost(tile); else iconTileValue\" class=\"tin-skel tin-skel-text tile-value-ghost\" aria-hidden=\"true\"></span><ng-template #iconTileValue><span [class.tile-value-in]=\"effQuietLoading\">{{data?.[tile.name] ?? 0}}</span></ng-template><span *ngIf=\"tile.suffix\"> {{tile.suffix}}</span>\n                <span *ngIf=\"tile.badge && data?.[tile.badge]\" class=\"tile-badge\" [style.backgroundColor]=\"tile.badgeColor ?? '#4caf50'\">{{data?.[tile.badge]}}</span>\n              </div>\n            </div>\n          </div>\n          <!-- Changed: Footer with divider \u2014 info tooltip or custom footer text -->\n          <div class=\"tile-icon-footer\" *ngIf=\"tile.info || tile.footer\">\n            <mat-divider></mat-divider>\n            <div class=\"tile-icon-footer-content\">\n              <mat-icon *ngIf=\"tile.footerIcon\" class=\"tile-icon-footer-icon\">{{tile.footerIcon}}</mat-icon>\n              <mat-icon *ngIf=\"!tile.footerIcon && tile.info\" class=\"tile-icon-footer-icon\" style=\"color: steelblue;\">info</mat-icon>\n              <span>{{tile.footer ?? tile.info}}</span>\n            </div>\n          </div>\n        </ng-container>\n\n        <!-- Basic tile fallback \u2014 centered number display (no icon) -->\n        <ng-template #basicTile>\n          <div class=\"row d-flex justify-content-center align-items-center\">\n            <div style=\"text-align: center;font-size: 30px;\">\n              <mat-label style=\"font-weight:bold;\" *ngIf=\"tile.prefix\" >{{tile.prefix}}</mat-label> &nbsp;\n              <!-- Changed (Quiet Loading D5): same value ghost as the icon tile \u2014 chip while unknown, real number otherwise -->\n              <mat-label style=\"font-weight:bold; text-align: center;\" [ngStyle]=\"{'color':tile.color }\" [attr.aria-busy]=\"showValueGhost(tile) ? 'true' : null\"><span *ngIf=\"showValueGhost(tile); else basicTileValue\" class=\"tin-skel tin-skel-text tile-value-ghost\" aria-hidden=\"true\"></span><ng-template #basicTileValue><span [class.tile-value-in]=\"effQuietLoading\">{{data?.[tile.name] ?? 0}}</span></ng-template></mat-label>&nbsp;\n              <mat-label style=\"font-weight:bold;\" *ngIf=\"tile.suffix\">{{tile.suffix}}</mat-label>\n              <span *ngIf=\"tile.badge && data?.[tile.badge]\" class=\"tile-badge\" [style.backgroundColor]=\"tile.badgeColor ?? '#4caf50'\">{{data?.[tile.badge]}}</span>\n            </div>\n          </div>\n          <div class=\"row d-flex justify-content-center align-items-center\">\n            <div class=\"d-flex justify-content-center align-items-center\" style=\"text-align: center;\">\n              <mat-label style=\"padding-left:5px;padding-right:5px; text-align: center;font-size: 14px;\">{{tile.alias ?? tile.name | camelToWords}}</mat-label>\n              <mat-icon *ngIf=\"tile.info\" [matTooltip]=\"tile.info\" matTooltipPosition=\"above\" style=\"font-size: 20px; color:steelblue;\">info</mat-icon>\n            </div>\n          </div>\n        </ng-template>\n      </ng-template>\n\n    </mat-card>\n  </ng-container>\n  </div>\n\n  <button type=\"button\" class=\"tiles-nav\" *ngIf=\"isCarousel && canScrollRight\" (click)=\"scrollTiles(1)\" aria-label=\"Scroll tiles right\">\n    <mat-icon>chevron_right</mat-icon>\n  </button>\n\n</div>\n", styles: [".card{min-width:180px;flex:1;display:flex;flex-direction:column;align-items:center;padding:5px 10px}.tiles{gap:1;row-gap:5px}.spa-tiles-outer{display:flex;align-items:center;gap:4px}.spa-tiles{flex:1;min-width:0}.tiles-wrap{display:grid;gap:10px;align-items:stretch}.tiles-carousel{display:flex;gap:10px;overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x proximity;padding-bottom:6px}.tiles-carousel>.tile-card{scroll-snap-align:start}.tile-card{padding:10px 16px;margin:0}.tiles-nav{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;border-radius:50%;background:#0000000a;color:#666;cursor:pointer;transition:background-color .2s ease,color .2s ease}.tiles-nav:hover{background:#2196f31f;color:#2196f3}.tiles-nav mat-icon{font-size:20px;width:20px;height:20px}.col{transition:all .2s ease}.tile-clickable{cursor:pointer}.tile-clickable:hover{transform:translateY(-2px);box-shadow:0 4px 10px #00000021;background-color:#2196f312}.selected-tile{background-color:#e0e0e0;box-shadow:0 4px 8px #0003;transform:translateY(-2px);border:2px solid #3f51b5}.selected-tile mat-label{font-weight:700}.selected-tile:hover{background-color:#e0e0e0}.tile-chart-header{display:flex;justify-content:flex-start;font-size:11px;font-weight:500;color:#999;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}.tile-chart{width:100%;position:relative;margin-top:4px;display:flex;align-items:center;justify-content:center}.tile-chart canvas{width:100%!important;height:100%!important;max-height:inherit}.tile-chart-value{text-align:center;margin-top:6px}.tile-chart-value-text{font-size:22px;font-weight:600;letter-spacing:-.5px}.tile-badge{display:inline-block;font-size:12px;font-weight:500;color:#fff;padding:2px 8px;border-radius:12px;vertical-align:middle;margin-left:4px}.tile-footer{margin-top:8px}.tile-icon-row{display:flex;align-items:flex-start;gap:12px;padding:4px 0}.tile-icon-wrap{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:48px;height:48px}.tile-icon-wrap mat-icon{font-size:36px;width:36px;height:36px;opacity:.85}.tile-icon-content{flex:1;text-align:right;min-width:0}.tile-icon-label{font-size:12px;color:#999;text-transform:uppercase;letter-spacing:.3px;line-height:1.4}.tile-icon-value{font-size:26px;font-weight:600;line-height:1.2;letter-spacing:-.5px}.tile-icon-footer{margin-top:8px}.tile-icon-footer mat-divider{margin-bottom:6px}.tile-icon-footer-content{display:flex;align-items:center;gap:4px;font-size:12px;color:#999}.tile-icon-footer-icon{font-size:16px;width:16px;height:16px;color:#bbb}.tile-value-ghost{width:2.5ch;height:.72em;vertical-align:middle}.tile-value-in{animation:tile-value-in .15s ease-out both}@keyframes tile-value-in{0%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion: reduce){.tile-value-in{animation:none}}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "component", type: i19.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i17.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i10.BaseChartDirective, selector: "canvas[baseChart]", inputs: ["type", "legend", "data", "options", "plugins", "labels", "datasets"], outputs: ["chartClick", "chartHover"], exportAs: ["base-chart"] }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: TilesComponent, isStandalone: false, selector: "spa-tiles", inputs: { config: "config", lastSearch: "lastSearch", data: "data", reload: "reload" }, outputs: { tileActionSelected: "tileActionSelected", tileClick: "tileClick", tileUnClick: "tileUnClick" }, viewQueries: [{ propertyName: "tileScroller", first: true, predicate: ["tileScroller"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- Tile row layout. THREE modes, and the DEFAULT is the original.\n     'auto' (default, and what every existing page gets): the original bootstrap .row/.col \u2014 tiles stretch to\n     fill and shrink to a 150px floor, wrapping when they run out of room. This is byte-for-byte the markup\n     that shipped before, restored on the owner's instruction 2026-08-08: the grid I briefly made the default\n     forced ONE tile per row on a phone, because a 200px track floor does not fit twice in a ~380px viewport.\n     'wrap': a grid of equal tracks \u2014 opt in where uniform tile widths matter more than filling the row.\n     'carousel': one row, horizontal scroll. The Day Book opts into this.\n     The tile body itself is ONE template shared by all three, so the modes can never drift apart. -->\n\n<!-- AUTO \u2014 the original layout, unchanged -->\n<div *ngIf=\"isAuto\" class=\"d-flex row align-items-center justify-content-between\">\n  <ng-container *ngFor=\"let tile of tiles\">\n    <!-- Changed: tile-clickable class gives pointer + hover lift only on tiles that actually respond to clicks -->\n    <mat-card *ngIf=\"!isHidden(tile)\" class=\"col\" [class.tile-clickable]=\"isClickable(tile)\" [class.selected-tile]=\"tile.name === selectedTile\" style=\"margin-left: 5px;margin-right: 5px; padding: 10px 16px ; min-width: 150px; margin-top: 5px;\" (click)=\"clicked(tile)\">\n      <ng-container *ngTemplateOutlet=\"tileBody; context: ctx(tile)\"></ng-container>\n    </mat-card>\n  </ng-container>\n</div>\n\n<!-- WRAP / CAROUSEL \u2014 opt-in only -->\n<div *ngIf=\"!isAuto\" class=\"spa-tiles-outer\">\n\n  <!-- Carousel only: scroll affordances, shown solely when there is something to scroll to -->\n  <button type=\"button\" class=\"tiles-nav\" *ngIf=\"isCarousel && canScrollLeft\" (click)=\"scrollTiles(-1)\" aria-label=\"Scroll tiles left\">\n    <mat-icon>chevron_left</mat-icon>\n  </button>\n\n  <div #tileScroller class=\"spa-tiles\" [class.tiles-wrap]=\"!isCarousel\" [class.tiles-carousel]=\"isCarousel\" [ngStyle]=\"tilesStyle\" (scroll)=\"onTilesScroll()\">\n    <ng-container *ngFor=\"let tile of tiles\">\n      <mat-card *ngIf=\"!isHidden(tile)\" class=\"tile-card\" [class.tile-clickable]=\"isClickable(tile)\" [class.selected-tile]=\"tile.name === selectedTile\" (click)=\"clicked(tile)\">\n        <ng-container *ngTemplateOutlet=\"tileBody; context: ctx(tile)\"></ng-container>\n      </mat-card>\n    </ng-container>\n  </div>\n\n  <button type=\"button\" class=\"tiles-nav\" *ngIf=\"isCarousel && canScrollRight\" (click)=\"scrollTiles(1)\" aria-label=\"Scroll tiles right\">\n    <mat-icon>chevron_right</mat-icon>\n  </button>\n\n</div>\n\n<!-- The tile body, shared by all three modes. ctx() returns a CACHED context object per tile \u2014 building\n     `{ $implicit: tile }` inline would hand NgTemplateOutlet a new object every change-detection pass and\n     re-create every tile's view, which is the documented cause of a real livelock in this library. -->\n<ng-template #tileBody let-tile>\n\n      <!-- Changed: Chart-style tile \u2014 header, prominent chart, optional value, footer -->\n      <ng-container *ngIf=\"tile.chart; else standardTile\">\n        <!-- Changed: Header with tile name \u2014 left-aligned for better hierarchy -->\n        <div class=\"tile-chart-header\">\n          <span>{{tile.alias ?? tile.name | camelToWords}}</span>\n        </div>\n\n        <!-- Changed: Chart fills tile \u2014 uses helper method for reliable data detection -->\n        <div class=\"tile-chart\" *ngIf=\"hasTileChartData(tile)\" [style.height.px]=\"tile.chart.height ?? 120\">\n          <canvas baseChart\n            [type]=\"tile.chart.type\"\n            [data]=\"getTileMiniChartData(tile)\"\n            [options]=\"getMiniChartOptions(tile)\"\n            [plugins]=\"getTileChartPlugins(tile)\">\n          </canvas>\n        </div>\n\n        <!-- Changed: Optional value display below chart \u2014 only show primitive values, skip chart data objects -->\n        <div class=\"tile-chart-value\" *ngIf=\"tile.name && isTileValuePrimitive(tile)\">\n          <span class=\"tile-chart-value-text\" [style.color]=\"tile.color\">{{tile.prefix ?? ''}}{{data?.[tile.name]}}<span *ngIf=\"tile.suffix\"> {{tile.suffix}}</span></span>\n        </div>\n\n        <!-- Changed: Footer with divider for chart tiles -->\n        <div class=\"tile-footer\" *ngIf=\"tile.footer || tile.info\">\n          <mat-divider></mat-divider>\n          <div class=\"d-flex align-items-center\" style=\"gap: 4px; color: #9a9a9a; font-size: 12px; margin-top: 6px;\">\n            <mat-icon *ngIf=\"tile.footerIcon\" style=\"font-size: 16px; width: 16px; height: 16px;\">{{tile.footerIcon}}</mat-icon>\n            <mat-icon *ngIf=\"!tile.footerIcon && tile.info\" style=\"font-size: 16px; width: 16px; height: 16px; color: steelblue;\">info</mat-icon>\n            <span>{{tile.footer ?? tile.info}}</span>\n          </div>\n        </div>\n      </ng-container>\n\n      <!-- Changed: Standard tile \u2014 Paper Dashboard style: icon left, label+value right, optional footer -->\n      <ng-template #standardTile>\n        <!-- Changed: Icon-style tile \u2014 icon left, label top-right, large value below -->\n        <ng-container *ngIf=\"tile.icon; else basicTile\">\n          <div class=\"tile-icon-row\">\n            <div class=\"tile-icon-wrap\" [style.color]=\"tile.color ?? '#2196f3'\">\n              <mat-icon>{{tile.icon}}</mat-icon>\n            </div>\n            <div class=\"tile-icon-content\">\n              <div class=\"tile-icon-label\">{{tile.alias ?? tile.name | camelToWords}}</div>\n              <!-- Changed (Quiet Loading D5): while the value is genuinely unknown the slot shows a shimmer chip instead of the old lying `0`; icon, label and footer render normally so the card never resizes. On a reload the previous number stays put and simply updates. -->\n              <div class=\"tile-icon-value\" [style.color]=\"tile.color\" [attr.aria-busy]=\"showValueGhost(tile) ? 'true' : null\">\n                <span *ngIf=\"tile.prefix\">{{tile.prefix}}</span><span *ngIf=\"showValueGhost(tile); else iconTileValue\" class=\"tin-skel tin-skel-text tile-value-ghost\" aria-hidden=\"true\"></span><ng-template #iconTileValue><span [class.tile-value-in]=\"effQuietLoading\">{{data?.[tile.name] ?? 0}}</span></ng-template><span *ngIf=\"tile.suffix\"> {{tile.suffix}}</span>\n                <span *ngIf=\"tile.badge && data?.[tile.badge]\" class=\"tile-badge\" [style.backgroundColor]=\"tile.badgeColor ?? '#4caf50'\">{{data?.[tile.badge]}}</span>\n              </div>\n            </div>\n          </div>\n          <!-- Changed: Footer with divider \u2014 info tooltip or custom footer text -->\n          <div class=\"tile-icon-footer\" *ngIf=\"tile.info || tile.footer\">\n            <mat-divider></mat-divider>\n            <div class=\"tile-icon-footer-content\">\n              <mat-icon *ngIf=\"tile.footerIcon\" class=\"tile-icon-footer-icon\">{{tile.footerIcon}}</mat-icon>\n              <mat-icon *ngIf=\"!tile.footerIcon && tile.info\" class=\"tile-icon-footer-icon\" style=\"color: steelblue;\">info</mat-icon>\n              <span>{{tile.footer ?? tile.info}}</span>\n            </div>\n          </div>\n        </ng-container>\n\n        <!-- Basic tile fallback \u2014 centered number display (no icon) -->\n        <ng-template #basicTile>\n          <div class=\"row d-flex justify-content-center align-items-center\">\n            <div style=\"text-align: center;font-size: 30px;\">\n              <mat-label style=\"font-weight:bold;\" *ngIf=\"tile.prefix\" >{{tile.prefix}}</mat-label> &nbsp;\n              <!-- Changed (Quiet Loading D5): same value ghost as the icon tile \u2014 chip while unknown, real number otherwise -->\n              <mat-label style=\"font-weight:bold; text-align: center;\" [ngStyle]=\"{'color':tile.color }\" [attr.aria-busy]=\"showValueGhost(tile) ? 'true' : null\"><span *ngIf=\"showValueGhost(tile); else basicTileValue\" class=\"tin-skel tin-skel-text tile-value-ghost\" aria-hidden=\"true\"></span><ng-template #basicTileValue><span [class.tile-value-in]=\"effQuietLoading\">{{data?.[tile.name] ?? 0}}</span></ng-template></mat-label>&nbsp;\n              <mat-label style=\"font-weight:bold;\" *ngIf=\"tile.suffix\">{{tile.suffix}}</mat-label>\n              <span *ngIf=\"tile.badge && data?.[tile.badge]\" class=\"tile-badge\" [style.backgroundColor]=\"tile.badgeColor ?? '#4caf50'\">{{data?.[tile.badge]}}</span>\n            </div>\n          </div>\n          <div class=\"row d-flex justify-content-center align-items-center\">\n            <div class=\"d-flex justify-content-center align-items-center\" style=\"text-align: center;\">\n              <mat-label style=\"padding-left:5px;padding-right:5px; text-align: center;font-size: 14px;\">{{tile.alias ?? tile.name | camelToWords}}</mat-label>\n              <mat-icon *ngIf=\"tile.info\" [matTooltip]=\"tile.info\" matTooltipPosition=\"above\" style=\"font-size: 20px; color:steelblue;\">info</mat-icon>\n            </div>\n          </div>\n        </ng-template>\n      </ng-template>\n\n</ng-template>\n", styles: [".card{min-width:180px;flex:1;display:flex;flex-direction:column;align-items:center;padding:5px 10px}.tiles{gap:1;row-gap:5px}.spa-tiles-outer{display:flex;align-items:center;gap:4px}.spa-tiles{flex:1;min-width:0}.tiles-wrap{display:grid;gap:10px;align-items:stretch}.tiles-carousel{display:flex;gap:10px;overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x proximity;padding-bottom:6px}.tiles-carousel>.tile-card{scroll-snap-align:start;flex:0 0 var(--tile-basis, 200px)}@media (max-width: 700px){.tiles-nav{display:none}.tiles-carousel{gap:8px}.tiles-carousel>.tile-card{flex:0 0 44%}}.tile-card{padding:10px 16px;margin:0}.tiles-nav{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;border-radius:50%;background:#0000000a;color:#666;cursor:pointer;transition:background-color .2s ease,color .2s ease}.tiles-nav:hover{background:#2196f31f;color:#2196f3}.tiles-nav mat-icon{font-size:20px;width:20px;height:20px}.col{transition:all .2s ease}.tile-clickable{cursor:pointer}.tile-clickable:hover{transform:translateY(-2px);box-shadow:0 4px 10px #00000021;background-color:#2196f312}.selected-tile{background-color:#e0e0e0;box-shadow:0 4px 8px #0003;transform:translateY(-2px);border:2px solid #3f51b5}.selected-tile mat-label{font-weight:700}.selected-tile:hover{background-color:#e0e0e0}.tile-chart-header{display:flex;justify-content:flex-start;font-size:11px;font-weight:500;color:#999;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}.tile-chart{width:100%;position:relative;margin-top:4px;display:flex;align-items:center;justify-content:center}.tile-chart canvas{width:100%!important;height:100%!important;max-height:inherit}.tile-chart-value{text-align:center;margin-top:6px}.tile-chart-value-text{font-size:22px;font-weight:600;letter-spacing:-.5px}.tile-badge{display:inline-block;font-size:12px;font-weight:500;color:#fff;padding:2px 8px;border-radius:12px;vertical-align:middle;margin-left:4px}.tile-footer{margin-top:8px}.tile-icon-row{display:flex;align-items:flex-start;gap:12px;padding:4px 0}.tile-icon-wrap{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:48px;height:48px}.tile-icon-wrap mat-icon{font-size:36px;width:36px;height:36px;opacity:.85}.tile-icon-content{flex:1;text-align:right;min-width:0}.tile-icon-label{font-size:12px;color:#999;text-transform:uppercase;letter-spacing:.3px;line-height:1.4}.tile-icon-value{font-size:26px;font-weight:600;line-height:1.2;letter-spacing:-.5px}.tile-icon-footer{margin-top:8px}.tile-icon-footer mat-divider{margin-bottom:6px}.tile-icon-footer-content{display:flex;align-items:center;gap:4px;font-size:12px;color:#999}.tile-icon-footer-icon{font-size:16px;width:16px;height:16px;color:#bbb}.tile-value-ghost{width:2.5ch;height:.72em;vertical-align:middle}.tile-value-in{animation:tile-value-in .15s ease-out both}@keyframes tile-value-in{0%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion: reduce){.tile-value-in{animation:none}}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "component", type: i19.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i17.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i10.BaseChartDirective, selector: "canvas[baseChart]", inputs: ["type", "legend", "data", "options", "plugins", "labels", "datasets"], outputs: ["chartClick", "chartHover"], exportAs: ["base-chart"] }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TilesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spa-tiles', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<!-- Changed: the tile row is no longer a bootstrap .row/.col. Those made every tile `flex: 1` with a 150px\n     floor, so N tiles squeezed themselves onto ONE row down to their minimum and whatever spilled over\n     stretched to fill the next row \u2014 7 cramped tiles above 2 enormous ones. Now: 'wrap' (default) is a grid\n     whose tracks are all the same width, so tiles flow onto the next row at a readable size and the last row\n     keeps normal-sized tiles; 'carousel' keeps one row and scrolls. -->\n<div class=\"spa-tiles-outer\">\n\n  <!-- Carousel only: scroll affordances, shown solely when there is something to scroll to -->\n  <button type=\"button\" class=\"tiles-nav\" *ngIf=\"isCarousel && canScrollLeft\" (click)=\"scrollTiles(-1)\" aria-label=\"Scroll tiles left\">\n    <mat-icon>chevron_left</mat-icon>\n  </button>\n\n  <div #tileScroller class=\"spa-tiles\" [class.tiles-wrap]=\"!isCarousel\" [class.tiles-carousel]=\"isCarousel\" [ngStyle]=\"tilesStyle\" (scroll)=\"onTilesScroll()\">\n  <ng-container *ngFor=\"let tile of tiles\">\n    <!-- Changed: tile-clickable class gives pointer + hover lift only on tiles that actually respond to clicks -->\n    <mat-card *ngIf=\"!isHidden(tile)\" class=\"tile-card\" [class.tile-clickable]=\"isClickable(tile)\" [class.selected-tile]=\"tile.name === selectedTile\" [style.flex]=\"tileBasis ? '0 0 ' + tileBasis : null\" (click)=\"clicked(tile)\">\n\n      <!-- Changed: Chart-style tile \u2014 header, prominent chart, optional value, footer -->\n      <ng-container *ngIf=\"tile.chart; else standardTile\">\n        <!-- Changed: Header with tile name \u2014 left-aligned for better hierarchy -->\n        <div class=\"tile-chart-header\">\n          <span>{{tile.alias ?? tile.name | camelToWords}}</span>\n        </div>\n\n        <!-- Changed: Chart fills tile \u2014 uses helper method for reliable data detection -->\n        <div class=\"tile-chart\" *ngIf=\"hasTileChartData(tile)\" [style.height.px]=\"tile.chart.height ?? 120\">\n          <canvas baseChart\n            [type]=\"tile.chart.type\"\n            [data]=\"getTileMiniChartData(tile)\"\n            [options]=\"getMiniChartOptions(tile)\"\n            [plugins]=\"getTileChartPlugins(tile)\">\n          </canvas>\n        </div>\n\n        <!-- Changed: Optional value display below chart \u2014 only show primitive values, skip chart data objects -->\n        <div class=\"tile-chart-value\" *ngIf=\"tile.name && isTileValuePrimitive(tile)\">\n          <span class=\"tile-chart-value-text\" [style.color]=\"tile.color\">{{tile.prefix ?? ''}}{{data?.[tile.name]}}<span *ngIf=\"tile.suffix\"> {{tile.suffix}}</span></span>\n        </div>\n\n        <!-- Changed: Footer with divider for chart tiles -->\n        <div class=\"tile-footer\" *ngIf=\"tile.footer || tile.info\">\n          <mat-divider></mat-divider>\n          <div class=\"d-flex align-items-center\" style=\"gap: 4px; color: #9a9a9a; font-size: 12px; margin-top: 6px;\">\n            <mat-icon *ngIf=\"tile.footerIcon\" style=\"font-size: 16px; width: 16px; height: 16px;\">{{tile.footerIcon}}</mat-icon>\n            <mat-icon *ngIf=\"!tile.footerIcon && tile.info\" style=\"font-size: 16px; width: 16px; height: 16px; color: steelblue;\">info</mat-icon>\n            <span>{{tile.footer ?? tile.info}}</span>\n          </div>\n        </div>\n      </ng-container>\n\n      <!-- Changed: Standard tile \u2014 Paper Dashboard style: icon left, label+value right, optional footer -->\n      <ng-template #standardTile>\n        <!-- Changed: Icon-style tile \u2014 icon left, label top-right, large value below -->\n        <ng-container *ngIf=\"tile.icon; else basicTile\">\n          <div class=\"tile-icon-row\">\n            <div class=\"tile-icon-wrap\" [style.color]=\"tile.color ?? '#2196f3'\">\n              <mat-icon>{{tile.icon}}</mat-icon>\n            </div>\n            <div class=\"tile-icon-content\">\n              <div class=\"tile-icon-label\">{{tile.alias ?? tile.name | camelToWords}}</div>\n              <!-- Changed (Quiet Loading D5): while the value is genuinely unknown the slot shows a shimmer chip instead of the old lying `0`; icon, label and footer render normally so the card never resizes. On a reload the previous number stays put and simply updates. -->\n              <div class=\"tile-icon-value\" [style.color]=\"tile.color\" [attr.aria-busy]=\"showValueGhost(tile) ? 'true' : null\">\n                <span *ngIf=\"tile.prefix\">{{tile.prefix}}</span><span *ngIf=\"showValueGhost(tile); else iconTileValue\" class=\"tin-skel tin-skel-text tile-value-ghost\" aria-hidden=\"true\"></span><ng-template #iconTileValue><span [class.tile-value-in]=\"effQuietLoading\">{{data?.[tile.name] ?? 0}}</span></ng-template><span *ngIf=\"tile.suffix\"> {{tile.suffix}}</span>\n                <span *ngIf=\"tile.badge && data?.[tile.badge]\" class=\"tile-badge\" [style.backgroundColor]=\"tile.badgeColor ?? '#4caf50'\">{{data?.[tile.badge]}}</span>\n              </div>\n            </div>\n          </div>\n          <!-- Changed: Footer with divider \u2014 info tooltip or custom footer text -->\n          <div class=\"tile-icon-footer\" *ngIf=\"tile.info || tile.footer\">\n            <mat-divider></mat-divider>\n            <div class=\"tile-icon-footer-content\">\n              <mat-icon *ngIf=\"tile.footerIcon\" class=\"tile-icon-footer-icon\">{{tile.footerIcon}}</mat-icon>\n              <mat-icon *ngIf=\"!tile.footerIcon && tile.info\" class=\"tile-icon-footer-icon\" style=\"color: steelblue;\">info</mat-icon>\n              <span>{{tile.footer ?? tile.info}}</span>\n            </div>\n          </div>\n        </ng-container>\n\n        <!-- Basic tile fallback \u2014 centered number display (no icon) -->\n        <ng-template #basicTile>\n          <div class=\"row d-flex justify-content-center align-items-center\">\n            <div style=\"text-align: center;font-size: 30px;\">\n              <mat-label style=\"font-weight:bold;\" *ngIf=\"tile.prefix\" >{{tile.prefix}}</mat-label> &nbsp;\n              <!-- Changed (Quiet Loading D5): same value ghost as the icon tile \u2014 chip while unknown, real number otherwise -->\n              <mat-label style=\"font-weight:bold; text-align: center;\" [ngStyle]=\"{'color':tile.color }\" [attr.aria-busy]=\"showValueGhost(tile) ? 'true' : null\"><span *ngIf=\"showValueGhost(tile); else basicTileValue\" class=\"tin-skel tin-skel-text tile-value-ghost\" aria-hidden=\"true\"></span><ng-template #basicTileValue><span [class.tile-value-in]=\"effQuietLoading\">{{data?.[tile.name] ?? 0}}</span></ng-template></mat-label>&nbsp;\n              <mat-label style=\"font-weight:bold;\" *ngIf=\"tile.suffix\">{{tile.suffix}}</mat-label>\n              <span *ngIf=\"tile.badge && data?.[tile.badge]\" class=\"tile-badge\" [style.backgroundColor]=\"tile.badgeColor ?? '#4caf50'\">{{data?.[tile.badge]}}</span>\n            </div>\n          </div>\n          <div class=\"row d-flex justify-content-center align-items-center\">\n            <div class=\"d-flex justify-content-center align-items-center\" style=\"text-align: center;\">\n              <mat-label style=\"padding-left:5px;padding-right:5px; text-align: center;font-size: 14px;\">{{tile.alias ?? tile.name | camelToWords}}</mat-label>\n              <mat-icon *ngIf=\"tile.info\" [matTooltip]=\"tile.info\" matTooltipPosition=\"above\" style=\"font-size: 20px; color:steelblue;\">info</mat-icon>\n            </div>\n          </div>\n        </ng-template>\n      </ng-template>\n\n    </mat-card>\n  </ng-container>\n  </div>\n\n  <button type=\"button\" class=\"tiles-nav\" *ngIf=\"isCarousel && canScrollRight\" (click)=\"scrollTiles(1)\" aria-label=\"Scroll tiles right\">\n    <mat-icon>chevron_right</mat-icon>\n  </button>\n\n</div>\n", styles: [".card{min-width:180px;flex:1;display:flex;flex-direction:column;align-items:center;padding:5px 10px}.tiles{gap:1;row-gap:5px}.spa-tiles-outer{display:flex;align-items:center;gap:4px}.spa-tiles{flex:1;min-width:0}.tiles-wrap{display:grid;gap:10px;align-items:stretch}.tiles-carousel{display:flex;gap:10px;overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x proximity;padding-bottom:6px}.tiles-carousel>.tile-card{scroll-snap-align:start}.tile-card{padding:10px 16px;margin:0}.tiles-nav{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;border-radius:50%;background:#0000000a;color:#666;cursor:pointer;transition:background-color .2s ease,color .2s ease}.tiles-nav:hover{background:#2196f31f;color:#2196f3}.tiles-nav mat-icon{font-size:20px;width:20px;height:20px}.col{transition:all .2s ease}.tile-clickable{cursor:pointer}.tile-clickable:hover{transform:translateY(-2px);box-shadow:0 4px 10px #00000021;background-color:#2196f312}.selected-tile{background-color:#e0e0e0;box-shadow:0 4px 8px #0003;transform:translateY(-2px);border:2px solid #3f51b5}.selected-tile mat-label{font-weight:700}.selected-tile:hover{background-color:#e0e0e0}.tile-chart-header{display:flex;justify-content:flex-start;font-size:11px;font-weight:500;color:#999;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}.tile-chart{width:100%;position:relative;margin-top:4px;display:flex;align-items:center;justify-content:center}.tile-chart canvas{width:100%!important;height:100%!important;max-height:inherit}.tile-chart-value{text-align:center;margin-top:6px}.tile-chart-value-text{font-size:22px;font-weight:600;letter-spacing:-.5px}.tile-badge{display:inline-block;font-size:12px;font-weight:500;color:#fff;padding:2px 8px;border-radius:12px;vertical-align:middle;margin-left:4px}.tile-footer{margin-top:8px}.tile-icon-row{display:flex;align-items:flex-start;gap:12px;padding:4px 0}.tile-icon-wrap{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:48px;height:48px}.tile-icon-wrap mat-icon{font-size:36px;width:36px;height:36px;opacity:.85}.tile-icon-content{flex:1;text-align:right;min-width:0}.tile-icon-label{font-size:12px;color:#999;text-transform:uppercase;letter-spacing:.3px;line-height:1.4}.tile-icon-value{font-size:26px;font-weight:600;line-height:1.2;letter-spacing:-.5px}.tile-icon-footer{margin-top:8px}.tile-icon-footer mat-divider{margin-bottom:6px}.tile-icon-footer-content{display:flex;align-items:center;gap:4px;font-size:12px;color:#999}.tile-icon-footer-icon{font-size:16px;width:16px;height:16px;color:#bbb}.tile-value-ghost{width:2.5ch;height:.72em;vertical-align:middle}.tile-value-in{animation:tile-value-in .15s ease-out both}@keyframes tile-value-in{0%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion: reduce){.tile-value-in{animation:none}}\n"] }]
+            args: [{ selector: 'spa-tiles', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<!-- Tile row layout. THREE modes, and the DEFAULT is the original.\n     'auto' (default, and what every existing page gets): the original bootstrap .row/.col \u2014 tiles stretch to\n     fill and shrink to a 150px floor, wrapping when they run out of room. This is byte-for-byte the markup\n     that shipped before, restored on the owner's instruction 2026-08-08: the grid I briefly made the default\n     forced ONE tile per row on a phone, because a 200px track floor does not fit twice in a ~380px viewport.\n     'wrap': a grid of equal tracks \u2014 opt in where uniform tile widths matter more than filling the row.\n     'carousel': one row, horizontal scroll. The Day Book opts into this.\n     The tile body itself is ONE template shared by all three, so the modes can never drift apart. -->\n\n<!-- AUTO \u2014 the original layout, unchanged -->\n<div *ngIf=\"isAuto\" class=\"d-flex row align-items-center justify-content-between\">\n  <ng-container *ngFor=\"let tile of tiles\">\n    <!-- Changed: tile-clickable class gives pointer + hover lift only on tiles that actually respond to clicks -->\n    <mat-card *ngIf=\"!isHidden(tile)\" class=\"col\" [class.tile-clickable]=\"isClickable(tile)\" [class.selected-tile]=\"tile.name === selectedTile\" style=\"margin-left: 5px;margin-right: 5px; padding: 10px 16px ; min-width: 150px; margin-top: 5px;\" (click)=\"clicked(tile)\">\n      <ng-container *ngTemplateOutlet=\"tileBody; context: ctx(tile)\"></ng-container>\n    </mat-card>\n  </ng-container>\n</div>\n\n<!-- WRAP / CAROUSEL \u2014 opt-in only -->\n<div *ngIf=\"!isAuto\" class=\"spa-tiles-outer\">\n\n  <!-- Carousel only: scroll affordances, shown solely when there is something to scroll to -->\n  <button type=\"button\" class=\"tiles-nav\" *ngIf=\"isCarousel && canScrollLeft\" (click)=\"scrollTiles(-1)\" aria-label=\"Scroll tiles left\">\n    <mat-icon>chevron_left</mat-icon>\n  </button>\n\n  <div #tileScroller class=\"spa-tiles\" [class.tiles-wrap]=\"!isCarousel\" [class.tiles-carousel]=\"isCarousel\" [ngStyle]=\"tilesStyle\" (scroll)=\"onTilesScroll()\">\n    <ng-container *ngFor=\"let tile of tiles\">\n      <mat-card *ngIf=\"!isHidden(tile)\" class=\"tile-card\" [class.tile-clickable]=\"isClickable(tile)\" [class.selected-tile]=\"tile.name === selectedTile\" (click)=\"clicked(tile)\">\n        <ng-container *ngTemplateOutlet=\"tileBody; context: ctx(tile)\"></ng-container>\n      </mat-card>\n    </ng-container>\n  </div>\n\n  <button type=\"button\" class=\"tiles-nav\" *ngIf=\"isCarousel && canScrollRight\" (click)=\"scrollTiles(1)\" aria-label=\"Scroll tiles right\">\n    <mat-icon>chevron_right</mat-icon>\n  </button>\n\n</div>\n\n<!-- The tile body, shared by all three modes. ctx() returns a CACHED context object per tile \u2014 building\n     `{ $implicit: tile }` inline would hand NgTemplateOutlet a new object every change-detection pass and\n     re-create every tile's view, which is the documented cause of a real livelock in this library. -->\n<ng-template #tileBody let-tile>\n\n      <!-- Changed: Chart-style tile \u2014 header, prominent chart, optional value, footer -->\n      <ng-container *ngIf=\"tile.chart; else standardTile\">\n        <!-- Changed: Header with tile name \u2014 left-aligned for better hierarchy -->\n        <div class=\"tile-chart-header\">\n          <span>{{tile.alias ?? tile.name | camelToWords}}</span>\n        </div>\n\n        <!-- Changed: Chart fills tile \u2014 uses helper method for reliable data detection -->\n        <div class=\"tile-chart\" *ngIf=\"hasTileChartData(tile)\" [style.height.px]=\"tile.chart.height ?? 120\">\n          <canvas baseChart\n            [type]=\"tile.chart.type\"\n            [data]=\"getTileMiniChartData(tile)\"\n            [options]=\"getMiniChartOptions(tile)\"\n            [plugins]=\"getTileChartPlugins(tile)\">\n          </canvas>\n        </div>\n\n        <!-- Changed: Optional value display below chart \u2014 only show primitive values, skip chart data objects -->\n        <div class=\"tile-chart-value\" *ngIf=\"tile.name && isTileValuePrimitive(tile)\">\n          <span class=\"tile-chart-value-text\" [style.color]=\"tile.color\">{{tile.prefix ?? ''}}{{data?.[tile.name]}}<span *ngIf=\"tile.suffix\"> {{tile.suffix}}</span></span>\n        </div>\n\n        <!-- Changed: Footer with divider for chart tiles -->\n        <div class=\"tile-footer\" *ngIf=\"tile.footer || tile.info\">\n          <mat-divider></mat-divider>\n          <div class=\"d-flex align-items-center\" style=\"gap: 4px; color: #9a9a9a; font-size: 12px; margin-top: 6px;\">\n            <mat-icon *ngIf=\"tile.footerIcon\" style=\"font-size: 16px; width: 16px; height: 16px;\">{{tile.footerIcon}}</mat-icon>\n            <mat-icon *ngIf=\"!tile.footerIcon && tile.info\" style=\"font-size: 16px; width: 16px; height: 16px; color: steelblue;\">info</mat-icon>\n            <span>{{tile.footer ?? tile.info}}</span>\n          </div>\n        </div>\n      </ng-container>\n\n      <!-- Changed: Standard tile \u2014 Paper Dashboard style: icon left, label+value right, optional footer -->\n      <ng-template #standardTile>\n        <!-- Changed: Icon-style tile \u2014 icon left, label top-right, large value below -->\n        <ng-container *ngIf=\"tile.icon; else basicTile\">\n          <div class=\"tile-icon-row\">\n            <div class=\"tile-icon-wrap\" [style.color]=\"tile.color ?? '#2196f3'\">\n              <mat-icon>{{tile.icon}}</mat-icon>\n            </div>\n            <div class=\"tile-icon-content\">\n              <div class=\"tile-icon-label\">{{tile.alias ?? tile.name | camelToWords}}</div>\n              <!-- Changed (Quiet Loading D5): while the value is genuinely unknown the slot shows a shimmer chip instead of the old lying `0`; icon, label and footer render normally so the card never resizes. On a reload the previous number stays put and simply updates. -->\n              <div class=\"tile-icon-value\" [style.color]=\"tile.color\" [attr.aria-busy]=\"showValueGhost(tile) ? 'true' : null\">\n                <span *ngIf=\"tile.prefix\">{{tile.prefix}}</span><span *ngIf=\"showValueGhost(tile); else iconTileValue\" class=\"tin-skel tin-skel-text tile-value-ghost\" aria-hidden=\"true\"></span><ng-template #iconTileValue><span [class.tile-value-in]=\"effQuietLoading\">{{data?.[tile.name] ?? 0}}</span></ng-template><span *ngIf=\"tile.suffix\"> {{tile.suffix}}</span>\n                <span *ngIf=\"tile.badge && data?.[tile.badge]\" class=\"tile-badge\" [style.backgroundColor]=\"tile.badgeColor ?? '#4caf50'\">{{data?.[tile.badge]}}</span>\n              </div>\n            </div>\n          </div>\n          <!-- Changed: Footer with divider \u2014 info tooltip or custom footer text -->\n          <div class=\"tile-icon-footer\" *ngIf=\"tile.info || tile.footer\">\n            <mat-divider></mat-divider>\n            <div class=\"tile-icon-footer-content\">\n              <mat-icon *ngIf=\"tile.footerIcon\" class=\"tile-icon-footer-icon\">{{tile.footerIcon}}</mat-icon>\n              <mat-icon *ngIf=\"!tile.footerIcon && tile.info\" class=\"tile-icon-footer-icon\" style=\"color: steelblue;\">info</mat-icon>\n              <span>{{tile.footer ?? tile.info}}</span>\n            </div>\n          </div>\n        </ng-container>\n\n        <!-- Basic tile fallback \u2014 centered number display (no icon) -->\n        <ng-template #basicTile>\n          <div class=\"row d-flex justify-content-center align-items-center\">\n            <div style=\"text-align: center;font-size: 30px;\">\n              <mat-label style=\"font-weight:bold;\" *ngIf=\"tile.prefix\" >{{tile.prefix}}</mat-label> &nbsp;\n              <!-- Changed (Quiet Loading D5): same value ghost as the icon tile \u2014 chip while unknown, real number otherwise -->\n              <mat-label style=\"font-weight:bold; text-align: center;\" [ngStyle]=\"{'color':tile.color }\" [attr.aria-busy]=\"showValueGhost(tile) ? 'true' : null\"><span *ngIf=\"showValueGhost(tile); else basicTileValue\" class=\"tin-skel tin-skel-text tile-value-ghost\" aria-hidden=\"true\"></span><ng-template #basicTileValue><span [class.tile-value-in]=\"effQuietLoading\">{{data?.[tile.name] ?? 0}}</span></ng-template></mat-label>&nbsp;\n              <mat-label style=\"font-weight:bold;\" *ngIf=\"tile.suffix\">{{tile.suffix}}</mat-label>\n              <span *ngIf=\"tile.badge && data?.[tile.badge]\" class=\"tile-badge\" [style.backgroundColor]=\"tile.badgeColor ?? '#4caf50'\">{{data?.[tile.badge]}}</span>\n            </div>\n          </div>\n          <div class=\"row d-flex justify-content-center align-items-center\">\n            <div class=\"d-flex justify-content-center align-items-center\" style=\"text-align: center;\">\n              <mat-label style=\"padding-left:5px;padding-right:5px; text-align: center;font-size: 14px;\">{{tile.alias ?? tile.name | camelToWords}}</mat-label>\n              <mat-icon *ngIf=\"tile.info\" [matTooltip]=\"tile.info\" matTooltipPosition=\"above\" style=\"font-size: 20px; color:steelblue;\">info</mat-icon>\n            </div>\n          </div>\n        </ng-template>\n      </ng-template>\n\n</ng-template>\n", styles: [".card{min-width:180px;flex:1;display:flex;flex-direction:column;align-items:center;padding:5px 10px}.tiles{gap:1;row-gap:5px}.spa-tiles-outer{display:flex;align-items:center;gap:4px}.spa-tiles{flex:1;min-width:0}.tiles-wrap{display:grid;gap:10px;align-items:stretch}.tiles-carousel{display:flex;gap:10px;overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x proximity;padding-bottom:6px}.tiles-carousel>.tile-card{scroll-snap-align:start;flex:0 0 var(--tile-basis, 200px)}@media (max-width: 700px){.tiles-nav{display:none}.tiles-carousel{gap:8px}.tiles-carousel>.tile-card{flex:0 0 44%}}.tile-card{padding:10px 16px;margin:0}.tiles-nav{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;border-radius:50%;background:#0000000a;color:#666;cursor:pointer;transition:background-color .2s ease,color .2s ease}.tiles-nav:hover{background:#2196f31f;color:#2196f3}.tiles-nav mat-icon{font-size:20px;width:20px;height:20px}.col{transition:all .2s ease}.tile-clickable{cursor:pointer}.tile-clickable:hover{transform:translateY(-2px);box-shadow:0 4px 10px #00000021;background-color:#2196f312}.selected-tile{background-color:#e0e0e0;box-shadow:0 4px 8px #0003;transform:translateY(-2px);border:2px solid #3f51b5}.selected-tile mat-label{font-weight:700}.selected-tile:hover{background-color:#e0e0e0}.tile-chart-header{display:flex;justify-content:flex-start;font-size:11px;font-weight:500;color:#999;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}.tile-chart{width:100%;position:relative;margin-top:4px;display:flex;align-items:center;justify-content:center}.tile-chart canvas{width:100%!important;height:100%!important;max-height:inherit}.tile-chart-value{text-align:center;margin-top:6px}.tile-chart-value-text{font-size:22px;font-weight:600;letter-spacing:-.5px}.tile-badge{display:inline-block;font-size:12px;font-weight:500;color:#fff;padding:2px 8px;border-radius:12px;vertical-align:middle;margin-left:4px}.tile-footer{margin-top:8px}.tile-icon-row{display:flex;align-items:flex-start;gap:12px;padding:4px 0}.tile-icon-wrap{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:48px;height:48px}.tile-icon-wrap mat-icon{font-size:36px;width:36px;height:36px;opacity:.85}.tile-icon-content{flex:1;text-align:right;min-width:0}.tile-icon-label{font-size:12px;color:#999;text-transform:uppercase;letter-spacing:.3px;line-height:1.4}.tile-icon-value{font-size:26px;font-weight:600;line-height:1.2;letter-spacing:-.5px}.tile-icon-footer{margin-top:8px}.tile-icon-footer mat-divider{margin-bottom:6px}.tile-icon-footer-content{display:flex;align-items:center;gap:4px;font-size:12px;color:#999}.tile-icon-footer-icon{font-size:16px;width:16px;height:16px;color:#bbb}.tile-value-ghost{width:2.5ch;height:.72em;vertical-align:middle}.tile-value-in{animation:tile-value-in .15s ease-out both}@keyframes tile-value-in{0%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion: reduce){.tile-value-in{animation:none}}\n"] }]
         }], ctorParameters: () => [{ type: DataServiceLib }, { type: MessageService }, { type: i0.ChangeDetectorRef }, { type: ApiErrorService }], propDecorators: { tileScroller: [{
                 type: ViewChild,
                 args: ['tileScroller']
@@ -17585,11 +17609,11 @@ class TableComponent {
         this.setPaginator();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TableComponent, deps: [{ token: DataServiceLib }, { token: MessageService }, { token: i1$4.BreakpointObserver }, { token: i4.MatDialog }, { token: ButtonService }, { token: DialogService }, { token: TableConfigService }, { token: ConditionService }, { token: AuthService }, { token: SignalRService }, { token: OfflineService }, { token: ApiErrorService }, { token: TIN_SPA_RUNTIME_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: TableComponent, isStandalone: false, selector: "spa-table", inputs: { data: "data", tileData: "tileData", config: "config", localMode: "localMode", parentDetails: "parentDetails", reload: "reload", activeTab: "activeTab", inTab: "inTab", nestingLevel: "nestingLevel" }, outputs: { dataLoad: "dataLoad", totalChange: "totalChange", actionSuccess: "actionSuccess", refreshClick: "refreshClick", searchClick: "searchClick", createClick: "createClick", actionClick: "actionClick", inputChange: "inputChange", actionResponse: "actionResponse" }, viewQueries: [{ propertyName: "tablePaginator", first: true, predicate: ["tablePaginator"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\n<ng-container *ngIf=\"hasFormAccess && !sectionHidden\"> <!-- Changed: sectionConfig.hideWhenEmpty hides the whole table -->\n\n  <!-- Added: collapsible flat section header (sectionConfig) \u2014 1px border, no elevation, whole row toggles -->\n  <div class=\"tbl-section-header\" *ngIf=\"config.sectionConfig\" (click)=\"toggleSection()\" [attr.aria-expanded]=\"!sectionCollapsed\" [class.tbl-section-static]=\"config.sectionConfig.collapsible === false\" role=\"button\" tabindex=\"0\" (keydown.enter)=\"toggleSection()\">\n    <mat-icon class=\"tbl-section-icon\" *ngIf=\"config.sectionConfig.icon\">{{ config.sectionConfig.icon }}</mat-icon>\n    <span class=\"tbl-section-title\">{{ config.sectionConfig.title }}</span>\n    <span class=\"tbl-section-count\" *ngIf=\"config.sectionConfig.showCount !== false\">{{ dataSource?.length || 0 }}</span>\n    <span class=\"tbl-section-chip\" *ngFor=\"let chip of sectionChips()\" [style.color]=\"chip.color\">{{ chip.text }}</span>\n    <span class=\"tbl-section-spacer\"></span>\n    <button mat-stroked-button color=\"primary\" *ngFor=\"let btn of sectionButtons()\" (click)=\"sectionButtonClicked(btn, $event)\"><mat-icon *ngIf=\"btn.icon?.name\">{{ btn.icon.name }}</mat-icon>{{ btn.display || btn.name }}</button>\n    <mat-icon class=\"tbl-section-chevron\" *ngIf=\"config.sectionConfig.collapsible !== false\">{{ sectionCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\n  </div>\n\n  <!-- Added: the section's \"why this list exists\" line. It sits UNDER the title (a reason only makes sense once\n       the list has been named) and only while the section is open \u2014 a shut section already has its own summary\n       line, and a paragraph over the top of that is noise. -->\n  <p class=\"tbl-section-caption\" *ngIf=\"config.sectionConfig?.caption && !sectionCollapsed\">{{ config.sectionConfig.caption }}</p>\n\n  <!-- Added: collapsed section affordance \u2014 mirrors the Day Book \"Show the N\" pattern -->\n  <div class=\"tbl-section-more\" *ngIf=\"config.sectionConfig && sectionCollapsed && (dataSource?.length || 0) > 0\">\n    <button type=\"button\" class=\"tbl-section-link\" (click)=\"toggleSection()\">Show the {{ dataSource.length }}</button>\n  </div>\n\n  <ng-container *ngIf=\"!config.sectionConfig || !sectionCollapsed\"> <!-- Added: section collapse hides the table body -->\n\n  <!-- Search -->\n  <spa-search\n    *ngIf=\"config.searchConfig\" [config]=\"config.searchConfig\" [smallScreen]=\"smallScreen\" [tableDataSource]=\"tableDataSource\" style=\"margin-bottom: 20px;\" (searchClick)=\"searchClicked($event)\">\n  </spa-search>\n\n  <!-- Header -->\n  <app-table-header\n    [config]=\"config\" [data]=\"dataSource\" [tableDataSource]=\"tableDataSource\" [tileConfig]=\"config.tileConfig\" [tileData]=\"tileData\" [tileReload]=\"tileReload\" [lastSearch]=\"lastSearch\" [smallScreen]=\"smallScreen\"\n    [showFilterButton]=\"showFilterButton\" [isRealTime]=\"config.realTime\" [isConnected]=\"isSignalRConnected\" [refreshing]=\"loadingStage === 'refresh'\"\n    (createClick)=\"newModel()\" (customClick)=\"customModel($event,null)\"\n    (refreshClick)=\"refreshClicked()\" (tileClick)=\"tileClicked($event)\" (tileUnClick)=\"tileUnClicked($event)\" (filterChange)=\"filterChanged($event)\">\n  </app-table-header>\n\n  <!-- Added (Quiet Loading D4): refresh with data already on screen \u2014 a 2px line flush under the header and the\n       spinning refresh icon are the ONLY signals. Rows stay live, clickable and un-dimmed while they swap. -->\n  <div *ngIf=\"loadingStage === 'refresh'\" class=\"tin-load-line\" aria-hidden=\"true\">\n    <span class=\"tin-load-line-fill\" [style.width.%]=\"progressPercent\"></span>\n  </div>\n\n  <!-- Added: paged-mode filter hint \u2014 the client filter only covers rows loaded so far -->\n  <div *ngIf=\"pagedMode && filterActive && loadedRows.length < serverTotal\" class=\"paged-filter-hint\">\n    <mat-icon>info</mat-icon>\n    <span>Filtering only the {{loadedRows.length}} loaded rows of {{serverTotal}}. {{ config.searchConfig ? 'Use Search for complete results.' : 'Refine with search for complete results.' }}</span>\n  </div>\n\n\n  <!-- Table -->\n  <div *ngIf=\"!config.viewType || config?.viewType === 'table'\">\n\n    <p *ngIf=\"!config\"><em>Configure Table</em></p>\n    <p *ngIf=\"!dataSource && !loadingStage\"><em>Loading...</em></p> <!-- Changed (Quiet Loading): the bare text is replaced by the stage below while a quiet load is on screen -->\n\n    <!-- Added (Quiet Loading D3): first load, nothing on screen yet. The progress module is the hero (eased bar +\n         counting percentage + caption) and the ghost rows hold the exact space the real rows will fill, so the\n         table does not jump when data lands. Only ever rendered when quiet loading is on. -->\n    <div *ngIf=\"loadingStage === 'initial'\" class=\"tin-load-stage\" role=\"status\" aria-busy=\"true\">\n\n      <div class=\"tin-load-progress\">\n        <div class=\"tin-load-bar\">\n          <span class=\"tin-load-bar-fill\" [style.width.%]=\"progressPercent\"></span>\n        </div>\n        <span class=\"tin-load-percent\" aria-hidden=\"true\">{{progressDisplay}}%</span>\n      </div>\n\n      <div class=\"tin-load-caption\">Loading {{stageEntityName}}\u2026</div>\n\n      <div class=\"tin-load-ghosts\">\n        <div class=\"tin-load-ghost-row\" *ngFor=\"let r of ghostRows\">\n          <div class=\"tin-load-ghost-cell\" *ngFor=\"let c of ghostColumns; let i = index\">\n            <span class=\"tin-skel\" [style.width.%]=\"ghostWidth(i, c)\" [style.animation-delay.ms]=\"r * 120\"></span> <!-- staggered sweep: each row starts 120ms after the one above -->\n          </div>\n        </div>\n      </div>\n\n    </div>\n\n    <div *ngIf=\"dataSource && loadingStage !== 'initial' && (!smallScreen || (smallScreen && dataSource?.length > 0))\" [class.tin-load-in]=\"effQuietLoading\"> <!-- Changed (Quiet Loading): the empty header-only table is suppressed while the initial stage stands in for it, and the real rows fade in where the ghosts were (D3) -->\n\n      <table mat-table [dataSource]=\"tableDataSource\" [trackBy]=\"trackByRow\" [ngClass]=\"elevation\" [class.tin-no-col-headers]=\"config.hideColumnHeaders\"> <!-- Changed: optional column-header suppression -->\n\n        <ng-container *ngFor=\"let column of config.columns\" [matColumnDef]=\"column.name\">\n          <th mat-header-cell *matHeaderCellDef >{{ column.alias ?? column.name | camelToWords }}</th>\n          <td mat-cell *matCellDef=\"let row;\" class=\"right-padding\" >\n\n            <!-- Added: inline edit \u2014 editable cells swap to their form-field editor while the row is in edit mode -->\n            <app-inline-cell *ngIf=\"isRowEditing(row) && getInlineField(column); else displayCell\" [field]=\"getInlineField(column)\" [data]=\"editingModel\"></app-inline-cell>\n\n            <!-- Rows -->\n            <ng-template #displayCell>\n              <app-table-row [column]=\"column\" [row]=\"row\" [config]=\"config\" [smallScreen]=\"smallScreen\"\n                (actionClick)=\"actionClicked(column.name, row)\" (columnClick)=\"columnClicked(column, row)\" (showBannerEvent)=\"showBanner($event)\">\n              </app-table-row>\n            </ng-template>\n\n          </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"action\">\n          <th mat-header-cell *matHeaderCellDef> Action </th>\n          <td mat-cell *matCellDef=\"let row\" [ngStyle]=\"{width:false ? '20px' : actionsWidth}\">\n            <div class=\"action-buttons-container\">\n\n              <!-- Added: inline edit \u2014 while a row edits in place, its actions collapse to submit/cancel -->\n              <ng-container *ngIf=\"isRowEditing(row); else rowActions\">\n                <button mat-icon-button matTooltip=\"Save\" matTooltipPosition=\"above\" (click)=\"submitInlineEdit()\"><mat-icon class=\"inline-save\">check</mat-icon></button> <!-- Changed: dropped color=\"primary\" \u2014 the icon now carries a green save cue -->\n                <button mat-icon-button matTooltip=\"Cancel\" matTooltipPosition=\"above\" (click)=\"cancelInlineEdit()\"><mat-icon class=\"inline-cancel\">close</mat-icon></button> <!-- Changed: red cancel cue -->\n              </ng-container>\n\n              <!-- Actions -->\n              <ng-template #rowActions>\n                <app-table-action\n                  [displayedButtons]=\"displayedButtons\" [config]=\"config\" [smallScreen]=\"smallScreen\" [row]=\"row\" (actionClick)=\"actionClicked($event.name, $event.row)\">\n                </app-table-action>\n              </ng-template>\n\n            </div>\n          </td>\n        </ng-container>\n\n\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n        <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" [ngClass]=\"{'make-gray': (config.greyOut && config.greyOut(row)) || row.pendingApproval, 'row-editing': isRowEditing(row)}\"></tr> <!-- Changed: row-editing flags the row that is open for inline edit -->\n      </table>\n\n    </div>\n\n    <!-- Changed: Removed *ngIf condition to keep paginator always in DOM and maintain ViewChild reference -->\n    <!-- Changed: Added CSS class binding to hide when no data instead of conditional rendering -->\n    <!-- Changed: Legacy paginator only renders in non-paged mode (pagedMode is constant per instance, set before first render) -->\n    <mat-paginator *ngIf=\"!pagedMode\"\n      #tablePaginator\n      [pageSizeOptions]=\"config.pageSizes ?? [10, 20, 50]\"\n      [ngClass]=\"{'paginator-hidden': !dataSource || (smallScreen && dataSource?.length === 0) || loadingStage === 'initial'}\"\n      showFirstLastButtons>\n    </mat-paginator>\n\n    <!-- Added: manual paginator for server-side paged mode \u2014 fully state-bound, never attached to MatTableDataSource. Always visible: when filtering it pages the in-memory filtered subset (length = filtered count); otherwise the server window (length = true total). No first/last jump (would force fetching the whole gap). -->\n    <mat-paginator *ngIf=\"pagedMode\"\n      [length]=\"filterActive ? filteredRows.length : serverTotal + overlayDelta\"\n      [pageIndex]=\"pageIndex\"\n      [pageSize]=\"pageSize\"\n      [pageSizeOptions]=\"config.pageSizes ?? [10, 20, 50]\"\n      [ngClass]=\"{'paginator-hidden': !dataSource || (smallScreen && dataSource?.length === 0) || loadingStage === 'initial'}\"\n      (page)=\"onServerPage($event)\">\n    </mat-paginator>\n\n  </div>\n  \n  <!-- Added (Quiet Loading): the initial-load stage for the NON-table views.\n       Without this, card/capsule/grouped showed literally nothing during a first load \u2014 the view component\n       renders an empty dataSource and the \"No Data\" line is suppressed while the stage owns the space.\n       The progress header is identical to the table's so the two feel like one feature; only the ghost\n       furniture differs, because column-shaped rows are wrong in a card grid. -->\n  <div *ngIf=\"loadingStage === 'initial' && config?.viewType && config?.viewType !== 'table'\" class=\"tin-load-stage\" role=\"status\" aria-busy=\"true\">\n    <div class=\"tin-load-progress\">\n      <div class=\"tin-load-bar\">\n        <span class=\"tin-load-bar-fill\" [style.width.%]=\"progressPercent\"></span>\n      </div>\n      <span class=\"tin-load-percent\" aria-hidden=\"true\">{{progressDisplay}}%</span>\n    </div>\n    <div class=\"tin-load-caption\">Loading {{stageEntityName}}\u2026</div>\n\n    <div *ngIf=\"config?.viewType === 'capsule'\" class=\"tin-load-ghost-capsules\" aria-hidden=\"true\">\n      <span class=\"tin-skel tin-load-ghost-capsule\" *ngFor=\"let c of ghostCapsules\"></span>\n    </div>\n\n    <div *ngIf=\"config?.viewType === 'card'\" class=\"tin-load-ghost-cards\" aria-hidden=\"true\">\n      <div class=\"tin-load-ghost-card\" *ngFor=\"let c of ghostCards\">\n        <span class=\"tin-skel tin-skel-text tin-load-ghost-card-title\"></span>\n        <span class=\"tin-skel tin-skel-text\"></span>\n        <span class=\"tin-skel tin-skel-text tin-load-ghost-card-short\"></span>\n      </div>\n    </div>\n\n    <div *ngIf=\"config?.viewType === 'grouped'\" class=\"tin-load-ghost-groups\" aria-hidden=\"true\">\n      <div class=\"tin-load-ghost-group\" *ngFor=\"let g of ghostGroups\">\n        <span class=\"tin-skel tin-load-ghost-group-head\"></span>\n        <!-- Pills, not rows: a group card's body is a wrap of chips, so full-width bars promised a table\n             and the stage did not resemble what replaced it. -->\n        <div class=\"tin-load-ghost-group-items\">\n          <span class=\"tin-skel tin-load-ghost-capsule\" *ngFor=\"let r of ghostCards\"></span>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Capsules -->\n  <spa-capsules *ngIf=\"config?.viewType === 'capsule' && loadingStage !== 'initial'\"\n    [config]=\"config\"\n    [dataSource]=\"dataSource\"\n    [displayedButtons]=\"displayedButtons\"\n    (actionClick)=\"actionClicked($event.name, $event.row)\">\n  </spa-capsules>\n\n\n  <!-- Cards -->\n  <spa-cards *ngIf=\"config?.viewType === 'card' && loadingStage !== 'initial'\"\n    [config]=\"config\"\n    [dataSource]=\"dataSource\"\n    [displayedButtons]=\"displayedButtons\"\n    [smallScreen]=\"smallScreen\"\n    (actionClick)=\"actionClicked($event.name, $event.row)\"\n    (columnClick)=\"columnClicked($event.column, $event.row)\"\n    (showBannerEvent)=\"showBanner($event)\">\n  </spa-cards>\n\n  <!-- Groups - Added: New grouped view type -->\n  <!-- Changed: the grouped view no longer renders its own filter field. It used to sit on a row of its own\n       beneath the buttons row, which left both rows half empty and, more importantly, was a SECOND filter with\n       no refresh button. The standard header filter (which has refresh, like every other table) now drives it,\n       with its text relayed in through filterText. -->\n  <spa-groups *ngIf=\"config?.viewType === 'grouped' && loadingStage !== 'initial'\"\n    [config]=\"config\"\n    [dataSource]=\"dataSource\"\n    [displayedButtons]=\"displayedButtons\"\n    [showOwnFilter]=\"false\"\n    [filterText]=\"groupFilterText\"\n    (actionClick)=\"actionClicked($event.name, $event.row, $event.group, $event.button)\">\n  </spa-groups>\n\n\n  <div class=\"tin-center\">\n    <p *ngIf=\"dataSource?.length == 0 && loadingStage !== 'initial'\"><em>{{config.noDataMessage ?? 'No Data'}}</em></p> <!-- Changed (Quiet Loading): the stage owns the space until it completes, then hands straight over to this message \u2014 no \"No Data\" flashing underneath the ghost rows -->\n  </div>\n\n  </ng-container> <!-- Added: end section-collapse wrapper -->\n\n</ng-container>\n\n\n<ng-container *ngIf=\"!hasFormAccess\">\n  <div class=\"tin-center\">\n    <p><em>Access Restricted</em></p>\n  </div>\n</ng-container>\n\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#f5f5f5}tr.mat-mdc-row{transition:background-color .15s ease}tr.mat-mdc-row:hover{background-color:#2196f305}tr.mat-mdc-row.row-editing,tr.mat-mdc-row.row-editing:hover{background-color:#ffa00014}.inline-save{color:#2e7d32!important}.inline-cancel{color:#c62828!important}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.dialog-container{display:flex;flex-direction:column;height:100%;max-height:100%;min-height:0}.dialog-content{flex:1;overflow:hidden;display:flex;flex-direction:column;min-height:0}.dialog-scroll-content{flex:1;overflow-y:auto;max-height:none!important;display:flex;flex-direction:column;min-height:0}.dialog-container:not(.dialog-has-tables){height:auto}.dialog-container:not(.dialog-has-tables) .dialog-scroll-content{flex:1 1 auto}.dialog-scroll-content>.tin-input{flex:1;display:flex;flex-direction:column}.dialog-scroll-content>.tin-input>spa-tabs{flex:1;display:flex;flex-direction:column}mat-dialog-actions{flex-shrink:0;justify-content:flex-start}.paginator-hidden{display:none!important}.paged-filter-hint{display:flex;align-items:center;gap:8px;margin:4px 0 8px;padding:6px 12px;border-radius:4px;background-color:#fff8e1;color:#795548;font-size:13px}.paged-filter-hint mat-icon{font-size:18px;width:18px;height:18px;color:#ffa000}.dlg-header-classic{padding-left:24px;padding-right:24px}.dlg-title-classic{font-size:20px;font-weight:500;margin-top:10px;margin-bottom:5px}.dialog-header-titles{display:flex;flex-direction:column;justify-content:center;min-width:0}.tin-dlg-head .dialog-header-titles label{margin:0}.tbl-section-header{display:flex;align-items:center;gap:10px;padding:10px 12px;margin-bottom:8px;border:1px solid rgba(0,0,0,.08);border-radius:10px;background:transparent;cursor:pointer;transition:border-color .15s}.tbl-section-header:hover{border-color:#90a4ae}.tbl-section-header.tbl-section-static{cursor:default}.tbl-section-icon{color:#546e7a}.tbl-section-title{font-size:14px;font-weight:600;color:#000000d1}.tbl-section-count{background:#e3f2fd;color:#1565c0;border-radius:12px;padding:2px 10px;font-size:12px}.tbl-section-chip{font-size:12px;font-weight:500;color:#0009}.tbl-section-spacer{margin-left:auto}.tbl-section-chevron{color:#90a4ae}.tbl-section-caption{margin:-4px 12px 10px;font-size:12.5px;line-height:1.45;color:#0000008c;max-width:82ch}.tbl-section-more{padding:0 12px 8px}.tbl-section-link{background:none;border:none;color:#1565c0;cursor:pointer;font-size:13px;padding:0}.tbl-section-link:hover{text-decoration:underline}table.tin-no-col-headers tr.mat-mdc-header-row{display:none}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i14.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i14.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i14.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i14.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i14.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i14.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i14.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i14.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i14.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i14.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i15$1.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: SearchComponent, selector: "spa-search", inputs: ["config", "smallScreen", "tableDataSource"], outputs: ["searchClick"] }, { kind: "component", type: TableHeaderComponent, selector: "app-table-header", inputs: ["lastSearch", "config", "hideTitle", "tableDataSource", "tileConfig", "smallScreen", "tileReload", "showFilterButton", "data", "tileData", "isRealTime", "isConnected", "refreshing"], outputs: ["createClick", "customClick", "refreshClick", "tileClick", "tileUnClick", "filterChange"] }, { kind: "component", type: TableRowComponent, selector: "app-table-row", inputs: ["column", "row", "config", "smallScreen"], outputs: ["actionClick", "columnClick", "showBannerEvent"] }, { kind: "component", type: TableActionComponent, selector: "app-table-action", inputs: ["displayedButtons", "config", "row", "smallScreen"], outputs: ["actionClick"] }, { kind: "component", type: InlineCellComponent, selector: "app-inline-cell", inputs: ["field", "data"], outputs: ["valueChange"] }, { kind: "component", type: CapsulesComponent, selector: "spa-capsules", inputs: ["config", "dataSource", "displayedButtons"], outputs: ["actionClick"] }, { kind: "component", type: CardsComponent, selector: "spa-cards", inputs: ["config", "dataSource", "displayedButtons", "smallScreen"], outputs: ["actionClick", "columnClick", "showBannerEvent"] }, { kind: "component", type: GroupsComponent, selector: "spa-groups", inputs: ["config", "dataSource", "displayedButtons", "showOwnFilter", "filterText"], outputs: ["actionClick"] }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: TableComponent, isStandalone: false, selector: "spa-table", inputs: { data: "data", tileData: "tileData", config: "config", localMode: "localMode", parentDetails: "parentDetails", reload: "reload", activeTab: "activeTab", inTab: "inTab", nestingLevel: "nestingLevel" }, outputs: { dataLoad: "dataLoad", totalChange: "totalChange", actionSuccess: "actionSuccess", refreshClick: "refreshClick", searchClick: "searchClick", createClick: "createClick", actionClick: "actionClick", inputChange: "inputChange", actionResponse: "actionResponse" }, viewQueries: [{ propertyName: "tablePaginator", first: true, predicate: ["tablePaginator"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\n<ng-container *ngIf=\"hasFormAccess && !sectionHidden\"> <!-- Changed: sectionConfig.hideWhenEmpty hides the whole table -->\n\n  <!-- Added: collapsible flat section header (sectionConfig) \u2014 1px border, no elevation, whole row toggles -->\n  <div class=\"tbl-section-header\" *ngIf=\"config.sectionConfig\" (click)=\"toggleSection()\" [attr.aria-expanded]=\"!sectionCollapsed\" [class.tbl-section-static]=\"config.sectionConfig.collapsible === false\" role=\"button\" tabindex=\"0\" (keydown.enter)=\"toggleSection()\">\n    <mat-icon class=\"tbl-section-icon\" *ngIf=\"config.sectionConfig.icon\">{{ config.sectionConfig.icon }}</mat-icon>\n    <span class=\"tbl-section-title\">{{ config.sectionConfig.title }}</span>\n    <span class=\"tbl-section-count\" *ngIf=\"config.sectionConfig.showCount !== false\">{{ dataSource?.length || 0 }}</span>\n    <span class=\"tbl-section-chip\" *ngFor=\"let chip of sectionChips()\" [style.color]=\"chip.color\">{{ chip.text }}</span>\n    <span class=\"tbl-section-spacer\"></span>\n    <!-- Changed: the label is wrapped so a NARROW screen can drop it and leave an icon-only button. Only a\n         button that HAS an icon loses its text \u2014 otherwise it would collapse to a blank square. -->\n    <button mat-stroked-button color=\"primary\" *ngFor=\"let btn of sectionButtons()\" (click)=\"sectionButtonClicked(btn, $event)\" [matTooltip]=\"btn.display || btn.name\"><mat-icon *ngIf=\"btn.icon?.name\">{{ btn.icon.name }}</mat-icon><span class=\"tbl-section-btn-text\" [class.has-icon]=\"!!btn.icon?.name\">{{ btn.display || btn.name }}</span></button>\n    <mat-icon class=\"tbl-section-chevron\" *ngIf=\"config.sectionConfig.collapsible !== false\">{{ sectionCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\n  </div>\n\n  <!-- Added: the section's \"why this list exists\" line. It sits UNDER the title (a reason only makes sense once\n       the list has been named) and only while the section is open \u2014 a shut section already has its own summary\n       line, and a paragraph over the top of that is noise. -->\n  <p class=\"tbl-section-caption\" *ngIf=\"config.sectionConfig?.caption && !sectionCollapsed\">{{ config.sectionConfig.caption }}</p>\n\n  <!-- Added: collapsed section affordance \u2014 mirrors the Day Book \"Show the N\" pattern -->\n  <div class=\"tbl-section-more\" *ngIf=\"config.sectionConfig && sectionCollapsed && (dataSource?.length || 0) > 0\">\n    <button type=\"button\" class=\"tbl-section-link\" (click)=\"toggleSection()\">Show the {{ dataSource.length }}</button>\n  </div>\n\n  <ng-container *ngIf=\"!config.sectionConfig || !sectionCollapsed\"> <!-- Added: section collapse hides the table body -->\n\n  <!-- Search -->\n  <spa-search\n    *ngIf=\"config.searchConfig\" [config]=\"config.searchConfig\" [smallScreen]=\"smallScreen\" [tableDataSource]=\"tableDataSource\" style=\"margin-bottom: 20px;\" (searchClick)=\"searchClicked($event)\">\n  </spa-search>\n\n  <!-- Header -->\n  <app-table-header\n    [config]=\"config\" [data]=\"dataSource\" [tableDataSource]=\"tableDataSource\" [tileConfig]=\"config.tileConfig\" [tileData]=\"tileData\" [tileReload]=\"tileReload\" [lastSearch]=\"lastSearch\" [smallScreen]=\"smallScreen\"\n    [showFilterButton]=\"showFilterButton\" [isRealTime]=\"config.realTime\" [isConnected]=\"isSignalRConnected\" [refreshing]=\"loadingStage === 'refresh'\"\n    (createClick)=\"newModel()\" (customClick)=\"customModel($event,null)\"\n    (refreshClick)=\"refreshClicked()\" (tileClick)=\"tileClicked($event)\" (tileUnClick)=\"tileUnClicked($event)\" (filterChange)=\"filterChanged($event)\">\n  </app-table-header>\n\n  <!-- Added (Quiet Loading D4): refresh with data already on screen \u2014 a 2px line flush under the header and the\n       spinning refresh icon are the ONLY signals. Rows stay live, clickable and un-dimmed while they swap. -->\n  <div *ngIf=\"loadingStage === 'refresh'\" class=\"tin-load-line\" aria-hidden=\"true\">\n    <span class=\"tin-load-line-fill\" [style.width.%]=\"progressPercent\"></span>\n  </div>\n\n  <!-- Added: paged-mode filter hint \u2014 the client filter only covers rows loaded so far -->\n  <div *ngIf=\"pagedMode && filterActive && loadedRows.length < serverTotal\" class=\"paged-filter-hint\">\n    <mat-icon>info</mat-icon>\n    <span>Filtering only the {{loadedRows.length}} loaded rows of {{serverTotal}}. {{ config.searchConfig ? 'Use Search for complete results.' : 'Refine with search for complete results.' }}</span>\n  </div>\n\n\n  <!-- Table -->\n  <div *ngIf=\"!config.viewType || config?.viewType === 'table'\">\n\n    <p *ngIf=\"!config\"><em>Configure Table</em></p>\n    <p *ngIf=\"!dataSource && !loadingStage\"><em>Loading...</em></p> <!-- Changed (Quiet Loading): the bare text is replaced by the stage below while a quiet load is on screen -->\n\n    <!-- Added (Quiet Loading D3): first load, nothing on screen yet. The progress module is the hero (eased bar +\n         counting percentage + caption) and the ghost rows hold the exact space the real rows will fill, so the\n         table does not jump when data lands. Only ever rendered when quiet loading is on. -->\n    <div *ngIf=\"loadingStage === 'initial'\" class=\"tin-load-stage\" role=\"status\" aria-busy=\"true\">\n\n      <div class=\"tin-load-progress\">\n        <div class=\"tin-load-bar\">\n          <span class=\"tin-load-bar-fill\" [style.width.%]=\"progressPercent\"></span>\n        </div>\n        <span class=\"tin-load-percent\" aria-hidden=\"true\">{{progressDisplay}}%</span>\n      </div>\n\n      <div class=\"tin-load-caption\">Loading {{stageEntityName}}\u2026</div>\n\n      <div class=\"tin-load-ghosts\">\n        <div class=\"tin-load-ghost-row\" *ngFor=\"let r of ghostRows\">\n          <div class=\"tin-load-ghost-cell\" *ngFor=\"let c of ghostColumns; let i = index\">\n            <span class=\"tin-skel\" [style.width.%]=\"ghostWidth(i, c)\" [style.animation-delay.ms]=\"r * 120\"></span> <!-- staggered sweep: each row starts 120ms after the one above -->\n          </div>\n        </div>\n      </div>\n\n    </div>\n\n    <div *ngIf=\"dataSource && loadingStage !== 'initial' && (!smallScreen || (smallScreen && dataSource?.length > 0))\" [class.tin-load-in]=\"effQuietLoading\"> <!-- Changed (Quiet Loading): the empty header-only table is suppressed while the initial stage stands in for it, and the real rows fade in where the ghosts were (D3) -->\n\n      <table mat-table [dataSource]=\"tableDataSource\" [trackBy]=\"trackByRow\" [ngClass]=\"elevation\" [class.tin-no-col-headers]=\"config.hideColumnHeaders\"> <!-- Changed: optional column-header suppression -->\n\n        <ng-container *ngFor=\"let column of config.columns\" [matColumnDef]=\"column.name\">\n          <th mat-header-cell *matHeaderCellDef >{{ column.alias ?? column.name | camelToWords }}</th>\n          <td mat-cell *matCellDef=\"let row;\" class=\"right-padding\" >\n\n            <!-- Added: inline edit \u2014 editable cells swap to their form-field editor while the row is in edit mode -->\n            <app-inline-cell *ngIf=\"isRowEditing(row) && getInlineField(column); else displayCell\" [field]=\"getInlineField(column)\" [data]=\"editingModel\"></app-inline-cell>\n\n            <!-- Rows -->\n            <ng-template #displayCell>\n              <app-table-row [column]=\"column\" [row]=\"row\" [config]=\"config\" [smallScreen]=\"smallScreen\"\n                (actionClick)=\"actionClicked(column.name, row)\" (columnClick)=\"columnClicked(column, row)\" (showBannerEvent)=\"showBanner($event)\">\n              </app-table-row>\n            </ng-template>\n\n          </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"action\">\n          <th mat-header-cell *matHeaderCellDef> Action </th>\n          <td mat-cell *matCellDef=\"let row\" [ngStyle]=\"{width:false ? '20px' : actionsWidth}\">\n            <div class=\"action-buttons-container\">\n\n              <!-- Added: inline edit \u2014 while a row edits in place, its actions collapse to submit/cancel -->\n              <ng-container *ngIf=\"isRowEditing(row); else rowActions\">\n                <button mat-icon-button matTooltip=\"Save\" matTooltipPosition=\"above\" (click)=\"submitInlineEdit()\"><mat-icon class=\"inline-save\">check</mat-icon></button> <!-- Changed: dropped color=\"primary\" \u2014 the icon now carries a green save cue -->\n                <button mat-icon-button matTooltip=\"Cancel\" matTooltipPosition=\"above\" (click)=\"cancelInlineEdit()\"><mat-icon class=\"inline-cancel\">close</mat-icon></button> <!-- Changed: red cancel cue -->\n              </ng-container>\n\n              <!-- Actions -->\n              <ng-template #rowActions>\n                <app-table-action\n                  [displayedButtons]=\"displayedButtons\" [config]=\"config\" [smallScreen]=\"smallScreen\" [row]=\"row\" (actionClick)=\"actionClicked($event.name, $event.row)\">\n                </app-table-action>\n              </ng-template>\n\n            </div>\n          </td>\n        </ng-container>\n\n\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n        <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" [ngClass]=\"{'make-gray': (config.greyOut && config.greyOut(row)) || row.pendingApproval, 'row-editing': isRowEditing(row)}\"></tr> <!-- Changed: row-editing flags the row that is open for inline edit -->\n      </table>\n\n    </div>\n\n    <!-- Changed: Removed *ngIf condition to keep paginator always in DOM and maintain ViewChild reference -->\n    <!-- Changed: Added CSS class binding to hide when no data instead of conditional rendering -->\n    <!-- Changed: Legacy paginator only renders in non-paged mode (pagedMode is constant per instance, set before first render) -->\n    <mat-paginator *ngIf=\"!pagedMode\"\n      #tablePaginator\n      [pageSizeOptions]=\"config.pageSizes ?? [10, 20, 50]\"\n      [ngClass]=\"{'paginator-hidden': !dataSource || (smallScreen && dataSource?.length === 0) || loadingStage === 'initial'}\"\n      showFirstLastButtons>\n    </mat-paginator>\n\n    <!-- Added: manual paginator for server-side paged mode \u2014 fully state-bound, never attached to MatTableDataSource. Always visible: when filtering it pages the in-memory filtered subset (length = filtered count); otherwise the server window (length = true total). No first/last jump (would force fetching the whole gap). -->\n    <mat-paginator *ngIf=\"pagedMode\"\n      [length]=\"filterActive ? filteredRows.length : serverTotal + overlayDelta\"\n      [pageIndex]=\"pageIndex\"\n      [pageSize]=\"pageSize\"\n      [pageSizeOptions]=\"config.pageSizes ?? [10, 20, 50]\"\n      [ngClass]=\"{'paginator-hidden': !dataSource || (smallScreen && dataSource?.length === 0) || loadingStage === 'initial'}\"\n      (page)=\"onServerPage($event)\">\n    </mat-paginator>\n\n  </div>\n  \n  <!-- Added (Quiet Loading): the initial-load stage for the NON-table views.\n       Without this, card/capsule/grouped showed literally nothing during a first load \u2014 the view component\n       renders an empty dataSource and the \"No Data\" line is suppressed while the stage owns the space.\n       The progress header is identical to the table's so the two feel like one feature; only the ghost\n       furniture differs, because column-shaped rows are wrong in a card grid. -->\n  <div *ngIf=\"loadingStage === 'initial' && config?.viewType && config?.viewType !== 'table'\" class=\"tin-load-stage\" role=\"status\" aria-busy=\"true\">\n    <div class=\"tin-load-progress\">\n      <div class=\"tin-load-bar\">\n        <span class=\"tin-load-bar-fill\" [style.width.%]=\"progressPercent\"></span>\n      </div>\n      <span class=\"tin-load-percent\" aria-hidden=\"true\">{{progressDisplay}}%</span>\n    </div>\n    <div class=\"tin-load-caption\">Loading {{stageEntityName}}\u2026</div>\n\n    <div *ngIf=\"config?.viewType === 'capsule'\" class=\"tin-load-ghost-capsules\" aria-hidden=\"true\">\n      <span class=\"tin-skel tin-load-ghost-capsule\" *ngFor=\"let c of ghostCapsules\"></span>\n    </div>\n\n    <div *ngIf=\"config?.viewType === 'card'\" class=\"tin-load-ghost-cards\" aria-hidden=\"true\">\n      <div class=\"tin-load-ghost-card\" *ngFor=\"let c of ghostCards\">\n        <span class=\"tin-skel tin-skel-text tin-load-ghost-card-title\"></span>\n        <span class=\"tin-skel tin-skel-text\"></span>\n        <span class=\"tin-skel tin-skel-text tin-load-ghost-card-short\"></span>\n      </div>\n    </div>\n\n    <div *ngIf=\"config?.viewType === 'grouped'\" class=\"tin-load-ghost-groups\" aria-hidden=\"true\">\n      <div class=\"tin-load-ghost-group\" *ngFor=\"let g of ghostGroups\">\n        <span class=\"tin-skel tin-load-ghost-group-head\"></span>\n        <!-- Pills, not rows: a group card's body is a wrap of chips, so full-width bars promised a table\n             and the stage did not resemble what replaced it. -->\n        <div class=\"tin-load-ghost-group-items\">\n          <span class=\"tin-skel tin-load-ghost-capsule\" *ngFor=\"let r of ghostCards\"></span>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Capsules -->\n  <spa-capsules *ngIf=\"config?.viewType === 'capsule' && loadingStage !== 'initial'\"\n    [config]=\"config\"\n    [dataSource]=\"dataSource\"\n    [displayedButtons]=\"displayedButtons\"\n    (actionClick)=\"actionClicked($event.name, $event.row)\">\n  </spa-capsules>\n\n\n  <!-- Cards -->\n  <spa-cards *ngIf=\"config?.viewType === 'card' && loadingStage !== 'initial'\"\n    [config]=\"config\"\n    [dataSource]=\"dataSource\"\n    [displayedButtons]=\"displayedButtons\"\n    [smallScreen]=\"smallScreen\"\n    (actionClick)=\"actionClicked($event.name, $event.row)\"\n    (columnClick)=\"columnClicked($event.column, $event.row)\"\n    (showBannerEvent)=\"showBanner($event)\">\n  </spa-cards>\n\n  <!-- Groups - Added: New grouped view type -->\n  <!-- Changed: the grouped view no longer renders its own filter field. It used to sit on a row of its own\n       beneath the buttons row, which left both rows half empty and, more importantly, was a SECOND filter with\n       no refresh button. The standard header filter (which has refresh, like every other table) now drives it,\n       with its text relayed in through filterText. -->\n  <spa-groups *ngIf=\"config?.viewType === 'grouped' && loadingStage !== 'initial'\"\n    [config]=\"config\"\n    [dataSource]=\"dataSource\"\n    [displayedButtons]=\"displayedButtons\"\n    [showOwnFilter]=\"false\"\n    [filterText]=\"groupFilterText\"\n    (actionClick)=\"actionClicked($event.name, $event.row, $event.group, $event.button)\">\n  </spa-groups>\n\n\n  <div class=\"tin-center\">\n    <p *ngIf=\"dataSource?.length == 0 && loadingStage !== 'initial'\"><em>{{config.noDataMessage ?? 'No Data'}}</em></p> <!-- Changed (Quiet Loading): the stage owns the space until it completes, then hands straight over to this message \u2014 no \"No Data\" flashing underneath the ghost rows -->\n  </div>\n\n  </ng-container> <!-- Added: end section-collapse wrapper -->\n\n</ng-container>\n\n\n<ng-container *ngIf=\"!hasFormAccess\">\n  <div class=\"tin-center\">\n    <p><em>Access Restricted</em></p>\n  </div>\n</ng-container>\n\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#f5f5f5}tr.mat-mdc-row{transition:background-color .15s ease}tr.mat-mdc-row:hover{background-color:#2196f305}tr.mat-mdc-row.row-editing,tr.mat-mdc-row.row-editing:hover{background-color:#ffa00014}.inline-save{color:#2e7d32!important}.inline-cancel{color:#c62828!important}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.dialog-container{display:flex;flex-direction:column;height:100%;max-height:100%;min-height:0}.dialog-content{flex:1;overflow:hidden;display:flex;flex-direction:column;min-height:0}.dialog-scroll-content{flex:1;overflow-y:auto;max-height:none!important;display:flex;flex-direction:column;min-height:0}.dialog-container:not(.dialog-has-tables){height:auto}.dialog-container:not(.dialog-has-tables) .dialog-scroll-content{flex:1 1 auto}.dialog-scroll-content>.tin-input{flex:1;display:flex;flex-direction:column}.dialog-scroll-content>.tin-input>spa-tabs{flex:1;display:flex;flex-direction:column}mat-dialog-actions{flex-shrink:0;justify-content:flex-start}.paginator-hidden{display:none!important}.paged-filter-hint{display:flex;align-items:center;gap:8px;margin:4px 0 8px;padding:6px 12px;border-radius:4px;background-color:#fff8e1;color:#795548;font-size:13px}.paged-filter-hint mat-icon{font-size:18px;width:18px;height:18px;color:#ffa000}.dlg-header-classic{padding-left:24px;padding-right:24px}.dlg-title-classic{font-size:20px;font-weight:500;margin-top:10px;margin-bottom:5px}.dialog-header-titles{display:flex;flex-direction:column;justify-content:center;min-width:0}.tin-dlg-head .dialog-header-titles label{margin:0}.tbl-section-header{display:flex;align-items:center;gap:10px;padding:10px 12px;margin-bottom:8px;border:1px solid rgba(0,0,0,.08);border-radius:10px;background:transparent;cursor:pointer;transition:border-color .15s}.tbl-section-header:hover{border-color:#90a4ae}.tbl-section-header.tbl-section-static{cursor:default}.tbl-section-icon{color:#546e7a}.tbl-section-title{font-size:14px;font-weight:600;color:#000000d1}.tbl-section-count{background:#e3f2fd;color:#1565c0;border-radius:12px;padding:2px 10px;font-size:12px}.tbl-section-chip{font-size:12px;font-weight:500;color:#0009}.tbl-section-spacer{margin-left:auto}.tbl-section-chevron{color:#90a4ae}.tbl-section-caption{margin:-4px 12px 10px;font-size:12.5px;line-height:1.45;color:#0000008c;max-width:82ch}.tbl-section-more{padding:0 12px 8px}.tbl-section-link{background:none;border:none;color:#1565c0;cursor:pointer;font-size:13px;padding:0}.tbl-section-link:hover{text-decoration:underline}.tbl-section-icon,.tbl-section-chevron,.tbl-section-count{flex:0 0 auto}.tbl-section-title{flex:1 1 auto;min-width:0}@media (max-width: 700px){.tbl-section-header{gap:8px;padding:10px}.tbl-section-chip,.tbl-section-btn-text.has-icon{display:none}.tbl-section-header button{min-width:0;padding:0 10px}}table.tin-no-col-headers tr.mat-mdc-header-row{display:none}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i14.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i14.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i14.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i14.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i14.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i14.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i14.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i14.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i14.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i14.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i15$1.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: SearchComponent, selector: "spa-search", inputs: ["config", "smallScreen", "tableDataSource"], outputs: ["searchClick"] }, { kind: "component", type: TableHeaderComponent, selector: "app-table-header", inputs: ["lastSearch", "config", "hideTitle", "tableDataSource", "tileConfig", "smallScreen", "tileReload", "showFilterButton", "data", "tileData", "isRealTime", "isConnected", "refreshing"], outputs: ["createClick", "customClick", "refreshClick", "tileClick", "tileUnClick", "filterChange"] }, { kind: "component", type: TableRowComponent, selector: "app-table-row", inputs: ["column", "row", "config", "smallScreen"], outputs: ["actionClick", "columnClick", "showBannerEvent"] }, { kind: "component", type: TableActionComponent, selector: "app-table-action", inputs: ["displayedButtons", "config", "row", "smallScreen"], outputs: ["actionClick"] }, { kind: "component", type: InlineCellComponent, selector: "app-inline-cell", inputs: ["field", "data"], outputs: ["valueChange"] }, { kind: "component", type: CapsulesComponent, selector: "spa-capsules", inputs: ["config", "dataSource", "displayedButtons"], outputs: ["actionClick"] }, { kind: "component", type: CardsComponent, selector: "spa-cards", inputs: ["config", "dataSource", "displayedButtons", "smallScreen"], outputs: ["actionClick", "columnClick", "showBannerEvent"] }, { kind: "component", type: GroupsComponent, selector: "spa-groups", inputs: ["config", "dataSource", "displayedButtons", "showOwnFilter", "filterText"], outputs: ["actionClick"] }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spa-table', standalone: false, template: "\n<ng-container *ngIf=\"hasFormAccess && !sectionHidden\"> <!-- Changed: sectionConfig.hideWhenEmpty hides the whole table -->\n\n  <!-- Added: collapsible flat section header (sectionConfig) \u2014 1px border, no elevation, whole row toggles -->\n  <div class=\"tbl-section-header\" *ngIf=\"config.sectionConfig\" (click)=\"toggleSection()\" [attr.aria-expanded]=\"!sectionCollapsed\" [class.tbl-section-static]=\"config.sectionConfig.collapsible === false\" role=\"button\" tabindex=\"0\" (keydown.enter)=\"toggleSection()\">\n    <mat-icon class=\"tbl-section-icon\" *ngIf=\"config.sectionConfig.icon\">{{ config.sectionConfig.icon }}</mat-icon>\n    <span class=\"tbl-section-title\">{{ config.sectionConfig.title }}</span>\n    <span class=\"tbl-section-count\" *ngIf=\"config.sectionConfig.showCount !== false\">{{ dataSource?.length || 0 }}</span>\n    <span class=\"tbl-section-chip\" *ngFor=\"let chip of sectionChips()\" [style.color]=\"chip.color\">{{ chip.text }}</span>\n    <span class=\"tbl-section-spacer\"></span>\n    <button mat-stroked-button color=\"primary\" *ngFor=\"let btn of sectionButtons()\" (click)=\"sectionButtonClicked(btn, $event)\"><mat-icon *ngIf=\"btn.icon?.name\">{{ btn.icon.name }}</mat-icon>{{ btn.display || btn.name }}</button>\n    <mat-icon class=\"tbl-section-chevron\" *ngIf=\"config.sectionConfig.collapsible !== false\">{{ sectionCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\n  </div>\n\n  <!-- Added: the section's \"why this list exists\" line. It sits UNDER the title (a reason only makes sense once\n       the list has been named) and only while the section is open \u2014 a shut section already has its own summary\n       line, and a paragraph over the top of that is noise. -->\n  <p class=\"tbl-section-caption\" *ngIf=\"config.sectionConfig?.caption && !sectionCollapsed\">{{ config.sectionConfig.caption }}</p>\n\n  <!-- Added: collapsed section affordance \u2014 mirrors the Day Book \"Show the N\" pattern -->\n  <div class=\"tbl-section-more\" *ngIf=\"config.sectionConfig && sectionCollapsed && (dataSource?.length || 0) > 0\">\n    <button type=\"button\" class=\"tbl-section-link\" (click)=\"toggleSection()\">Show the {{ dataSource.length }}</button>\n  </div>\n\n  <ng-container *ngIf=\"!config.sectionConfig || !sectionCollapsed\"> <!-- Added: section collapse hides the table body -->\n\n  <!-- Search -->\n  <spa-search\n    *ngIf=\"config.searchConfig\" [config]=\"config.searchConfig\" [smallScreen]=\"smallScreen\" [tableDataSource]=\"tableDataSource\" style=\"margin-bottom: 20px;\" (searchClick)=\"searchClicked($event)\">\n  </spa-search>\n\n  <!-- Header -->\n  <app-table-header\n    [config]=\"config\" [data]=\"dataSource\" [tableDataSource]=\"tableDataSource\" [tileConfig]=\"config.tileConfig\" [tileData]=\"tileData\" [tileReload]=\"tileReload\" [lastSearch]=\"lastSearch\" [smallScreen]=\"smallScreen\"\n    [showFilterButton]=\"showFilterButton\" [isRealTime]=\"config.realTime\" [isConnected]=\"isSignalRConnected\" [refreshing]=\"loadingStage === 'refresh'\"\n    (createClick)=\"newModel()\" (customClick)=\"customModel($event,null)\"\n    (refreshClick)=\"refreshClicked()\" (tileClick)=\"tileClicked($event)\" (tileUnClick)=\"tileUnClicked($event)\" (filterChange)=\"filterChanged($event)\">\n  </app-table-header>\n\n  <!-- Added (Quiet Loading D4): refresh with data already on screen \u2014 a 2px line flush under the header and the\n       spinning refresh icon are the ONLY signals. Rows stay live, clickable and un-dimmed while they swap. -->\n  <div *ngIf=\"loadingStage === 'refresh'\" class=\"tin-load-line\" aria-hidden=\"true\">\n    <span class=\"tin-load-line-fill\" [style.width.%]=\"progressPercent\"></span>\n  </div>\n\n  <!-- Added: paged-mode filter hint \u2014 the client filter only covers rows loaded so far -->\n  <div *ngIf=\"pagedMode && filterActive && loadedRows.length < serverTotal\" class=\"paged-filter-hint\">\n    <mat-icon>info</mat-icon>\n    <span>Filtering only the {{loadedRows.length}} loaded rows of {{serverTotal}}. {{ config.searchConfig ? 'Use Search for complete results.' : 'Refine with search for complete results.' }}</span>\n  </div>\n\n\n  <!-- Table -->\n  <div *ngIf=\"!config.viewType || config?.viewType === 'table'\">\n\n    <p *ngIf=\"!config\"><em>Configure Table</em></p>\n    <p *ngIf=\"!dataSource && !loadingStage\"><em>Loading...</em></p> <!-- Changed (Quiet Loading): the bare text is replaced by the stage below while a quiet load is on screen -->\n\n    <!-- Added (Quiet Loading D3): first load, nothing on screen yet. The progress module is the hero (eased bar +\n         counting percentage + caption) and the ghost rows hold the exact space the real rows will fill, so the\n         table does not jump when data lands. Only ever rendered when quiet loading is on. -->\n    <div *ngIf=\"loadingStage === 'initial'\" class=\"tin-load-stage\" role=\"status\" aria-busy=\"true\">\n\n      <div class=\"tin-load-progress\">\n        <div class=\"tin-load-bar\">\n          <span class=\"tin-load-bar-fill\" [style.width.%]=\"progressPercent\"></span>\n        </div>\n        <span class=\"tin-load-percent\" aria-hidden=\"true\">{{progressDisplay}}%</span>\n      </div>\n\n      <div class=\"tin-load-caption\">Loading {{stageEntityName}}\u2026</div>\n\n      <div class=\"tin-load-ghosts\">\n        <div class=\"tin-load-ghost-row\" *ngFor=\"let r of ghostRows\">\n          <div class=\"tin-load-ghost-cell\" *ngFor=\"let c of ghostColumns; let i = index\">\n            <span class=\"tin-skel\" [style.width.%]=\"ghostWidth(i, c)\" [style.animation-delay.ms]=\"r * 120\"></span> <!-- staggered sweep: each row starts 120ms after the one above -->\n          </div>\n        </div>\n      </div>\n\n    </div>\n\n    <div *ngIf=\"dataSource && loadingStage !== 'initial' && (!smallScreen || (smallScreen && dataSource?.length > 0))\" [class.tin-load-in]=\"effQuietLoading\"> <!-- Changed (Quiet Loading): the empty header-only table is suppressed while the initial stage stands in for it, and the real rows fade in where the ghosts were (D3) -->\n\n      <table mat-table [dataSource]=\"tableDataSource\" [trackBy]=\"trackByRow\" [ngClass]=\"elevation\" [class.tin-no-col-headers]=\"config.hideColumnHeaders\"> <!-- Changed: optional column-header suppression -->\n\n        <ng-container *ngFor=\"let column of config.columns\" [matColumnDef]=\"column.name\">\n          <th mat-header-cell *matHeaderCellDef >{{ column.alias ?? column.name | camelToWords }}</th>\n          <td mat-cell *matCellDef=\"let row;\" class=\"right-padding\" >\n\n            <!-- Added: inline edit \u2014 editable cells swap to their form-field editor while the row is in edit mode -->\n            <app-inline-cell *ngIf=\"isRowEditing(row) && getInlineField(column); else displayCell\" [field]=\"getInlineField(column)\" [data]=\"editingModel\"></app-inline-cell>\n\n            <!-- Rows -->\n            <ng-template #displayCell>\n              <app-table-row [column]=\"column\" [row]=\"row\" [config]=\"config\" [smallScreen]=\"smallScreen\"\n                (actionClick)=\"actionClicked(column.name, row)\" (columnClick)=\"columnClicked(column, row)\" (showBannerEvent)=\"showBanner($event)\">\n              </app-table-row>\n            </ng-template>\n\n          </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"action\">\n          <th mat-header-cell *matHeaderCellDef> Action </th>\n          <td mat-cell *matCellDef=\"let row\" [ngStyle]=\"{width:false ? '20px' : actionsWidth}\">\n            <div class=\"action-buttons-container\">\n\n              <!-- Added: inline edit \u2014 while a row edits in place, its actions collapse to submit/cancel -->\n              <ng-container *ngIf=\"isRowEditing(row); else rowActions\">\n                <button mat-icon-button matTooltip=\"Save\" matTooltipPosition=\"above\" (click)=\"submitInlineEdit()\"><mat-icon class=\"inline-save\">check</mat-icon></button> <!-- Changed: dropped color=\"primary\" \u2014 the icon now carries a green save cue -->\n                <button mat-icon-button matTooltip=\"Cancel\" matTooltipPosition=\"above\" (click)=\"cancelInlineEdit()\"><mat-icon class=\"inline-cancel\">close</mat-icon></button> <!-- Changed: red cancel cue -->\n              </ng-container>\n\n              <!-- Actions -->\n              <ng-template #rowActions>\n                <app-table-action\n                  [displayedButtons]=\"displayedButtons\" [config]=\"config\" [smallScreen]=\"smallScreen\" [row]=\"row\" (actionClick)=\"actionClicked($event.name, $event.row)\">\n                </app-table-action>\n              </ng-template>\n\n            </div>\n          </td>\n        </ng-container>\n\n\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n        <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" [ngClass]=\"{'make-gray': (config.greyOut && config.greyOut(row)) || row.pendingApproval, 'row-editing': isRowEditing(row)}\"></tr> <!-- Changed: row-editing flags the row that is open for inline edit -->\n      </table>\n\n    </div>\n\n    <!-- Changed: Removed *ngIf condition to keep paginator always in DOM and maintain ViewChild reference -->\n    <!-- Changed: Added CSS class binding to hide when no data instead of conditional rendering -->\n    <!-- Changed: Legacy paginator only renders in non-paged mode (pagedMode is constant per instance, set before first render) -->\n    <mat-paginator *ngIf=\"!pagedMode\"\n      #tablePaginator\n      [pageSizeOptions]=\"config.pageSizes ?? [10, 20, 50]\"\n      [ngClass]=\"{'paginator-hidden': !dataSource || (smallScreen && dataSource?.length === 0) || loadingStage === 'initial'}\"\n      showFirstLastButtons>\n    </mat-paginator>\n\n    <!-- Added: manual paginator for server-side paged mode \u2014 fully state-bound, never attached to MatTableDataSource. Always visible: when filtering it pages the in-memory filtered subset (length = filtered count); otherwise the server window (length = true total). No first/last jump (would force fetching the whole gap). -->\n    <mat-paginator *ngIf=\"pagedMode\"\n      [length]=\"filterActive ? filteredRows.length : serverTotal + overlayDelta\"\n      [pageIndex]=\"pageIndex\"\n      [pageSize]=\"pageSize\"\n      [pageSizeOptions]=\"config.pageSizes ?? [10, 20, 50]\"\n      [ngClass]=\"{'paginator-hidden': !dataSource || (smallScreen && dataSource?.length === 0) || loadingStage === 'initial'}\"\n      (page)=\"onServerPage($event)\">\n    </mat-paginator>\n\n  </div>\n  \n  <!-- Added (Quiet Loading): the initial-load stage for the NON-table views.\n       Without this, card/capsule/grouped showed literally nothing during a first load \u2014 the view component\n       renders an empty dataSource and the \"No Data\" line is suppressed while the stage owns the space.\n       The progress header is identical to the table's so the two feel like one feature; only the ghost\n       furniture differs, because column-shaped rows are wrong in a card grid. -->\n  <div *ngIf=\"loadingStage === 'initial' && config?.viewType && config?.viewType !== 'table'\" class=\"tin-load-stage\" role=\"status\" aria-busy=\"true\">\n    <div class=\"tin-load-progress\">\n      <div class=\"tin-load-bar\">\n        <span class=\"tin-load-bar-fill\" [style.width.%]=\"progressPercent\"></span>\n      </div>\n      <span class=\"tin-load-percent\" aria-hidden=\"true\">{{progressDisplay}}%</span>\n    </div>\n    <div class=\"tin-load-caption\">Loading {{stageEntityName}}\u2026</div>\n\n    <div *ngIf=\"config?.viewType === 'capsule'\" class=\"tin-load-ghost-capsules\" aria-hidden=\"true\">\n      <span class=\"tin-skel tin-load-ghost-capsule\" *ngFor=\"let c of ghostCapsules\"></span>\n    </div>\n\n    <div *ngIf=\"config?.viewType === 'card'\" class=\"tin-load-ghost-cards\" aria-hidden=\"true\">\n      <div class=\"tin-load-ghost-card\" *ngFor=\"let c of ghostCards\">\n        <span class=\"tin-skel tin-skel-text tin-load-ghost-card-title\"></span>\n        <span class=\"tin-skel tin-skel-text\"></span>\n        <span class=\"tin-skel tin-skel-text tin-load-ghost-card-short\"></span>\n      </div>\n    </div>\n\n    <div *ngIf=\"config?.viewType === 'grouped'\" class=\"tin-load-ghost-groups\" aria-hidden=\"true\">\n      <div class=\"tin-load-ghost-group\" *ngFor=\"let g of ghostGroups\">\n        <span class=\"tin-skel tin-load-ghost-group-head\"></span>\n        <!-- Pills, not rows: a group card's body is a wrap of chips, so full-width bars promised a table\n             and the stage did not resemble what replaced it. -->\n        <div class=\"tin-load-ghost-group-items\">\n          <span class=\"tin-skel tin-load-ghost-capsule\" *ngFor=\"let r of ghostCards\"></span>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Capsules -->\n  <spa-capsules *ngIf=\"config?.viewType === 'capsule' && loadingStage !== 'initial'\"\n    [config]=\"config\"\n    [dataSource]=\"dataSource\"\n    [displayedButtons]=\"displayedButtons\"\n    (actionClick)=\"actionClicked($event.name, $event.row)\">\n  </spa-capsules>\n\n\n  <!-- Cards -->\n  <spa-cards *ngIf=\"config?.viewType === 'card' && loadingStage !== 'initial'\"\n    [config]=\"config\"\n    [dataSource]=\"dataSource\"\n    [displayedButtons]=\"displayedButtons\"\n    [smallScreen]=\"smallScreen\"\n    (actionClick)=\"actionClicked($event.name, $event.row)\"\n    (columnClick)=\"columnClicked($event.column, $event.row)\"\n    (showBannerEvent)=\"showBanner($event)\">\n  </spa-cards>\n\n  <!-- Groups - Added: New grouped view type -->\n  <!-- Changed: the grouped view no longer renders its own filter field. It used to sit on a row of its own\n       beneath the buttons row, which left both rows half empty and, more importantly, was a SECOND filter with\n       no refresh button. The standard header filter (which has refresh, like every other table) now drives it,\n       with its text relayed in through filterText. -->\n  <spa-groups *ngIf=\"config?.viewType === 'grouped' && loadingStage !== 'initial'\"\n    [config]=\"config\"\n    [dataSource]=\"dataSource\"\n    [displayedButtons]=\"displayedButtons\"\n    [showOwnFilter]=\"false\"\n    [filterText]=\"groupFilterText\"\n    (actionClick)=\"actionClicked($event.name, $event.row, $event.group, $event.button)\">\n  </spa-groups>\n\n\n  <div class=\"tin-center\">\n    <p *ngIf=\"dataSource?.length == 0 && loadingStage !== 'initial'\"><em>{{config.noDataMessage ?? 'No Data'}}</em></p> <!-- Changed (Quiet Loading): the stage owns the space until it completes, then hands straight over to this message \u2014 no \"No Data\" flashing underneath the ghost rows -->\n  </div>\n\n  </ng-container> <!-- Added: end section-collapse wrapper -->\n\n</ng-container>\n\n\n<ng-container *ngIf=\"!hasFormAccess\">\n  <div class=\"tin-center\">\n    <p><em>Access Restricted</em></p>\n  </div>\n</ng-container>\n\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#f5f5f5}tr.mat-mdc-row{transition:background-color .15s ease}tr.mat-mdc-row:hover{background-color:#2196f305}tr.mat-mdc-row.row-editing,tr.mat-mdc-row.row-editing:hover{background-color:#ffa00014}.inline-save{color:#2e7d32!important}.inline-cancel{color:#c62828!important}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.dialog-container{display:flex;flex-direction:column;height:100%;max-height:100%;min-height:0}.dialog-content{flex:1;overflow:hidden;display:flex;flex-direction:column;min-height:0}.dialog-scroll-content{flex:1;overflow-y:auto;max-height:none!important;display:flex;flex-direction:column;min-height:0}.dialog-container:not(.dialog-has-tables){height:auto}.dialog-container:not(.dialog-has-tables) .dialog-scroll-content{flex:1 1 auto}.dialog-scroll-content>.tin-input{flex:1;display:flex;flex-direction:column}.dialog-scroll-content>.tin-input>spa-tabs{flex:1;display:flex;flex-direction:column}mat-dialog-actions{flex-shrink:0;justify-content:flex-start}.paginator-hidden{display:none!important}.paged-filter-hint{display:flex;align-items:center;gap:8px;margin:4px 0 8px;padding:6px 12px;border-radius:4px;background-color:#fff8e1;color:#795548;font-size:13px}.paged-filter-hint mat-icon{font-size:18px;width:18px;height:18px;color:#ffa000}.dlg-header-classic{padding-left:24px;padding-right:24px}.dlg-title-classic{font-size:20px;font-weight:500;margin-top:10px;margin-bottom:5px}.dialog-header-titles{display:flex;flex-direction:column;justify-content:center;min-width:0}.tin-dlg-head .dialog-header-titles label{margin:0}.tbl-section-header{display:flex;align-items:center;gap:10px;padding:10px 12px;margin-bottom:8px;border:1px solid rgba(0,0,0,.08);border-radius:10px;background:transparent;cursor:pointer;transition:border-color .15s}.tbl-section-header:hover{border-color:#90a4ae}.tbl-section-header.tbl-section-static{cursor:default}.tbl-section-icon{color:#546e7a}.tbl-section-title{font-size:14px;font-weight:600;color:#000000d1}.tbl-section-count{background:#e3f2fd;color:#1565c0;border-radius:12px;padding:2px 10px;font-size:12px}.tbl-section-chip{font-size:12px;font-weight:500;color:#0009}.tbl-section-spacer{margin-left:auto}.tbl-section-chevron{color:#90a4ae}.tbl-section-caption{margin:-4px 12px 10px;font-size:12.5px;line-height:1.45;color:#0000008c;max-width:82ch}.tbl-section-more{padding:0 12px 8px}.tbl-section-link{background:none;border:none;color:#1565c0;cursor:pointer;font-size:13px;padding:0}.tbl-section-link:hover{text-decoration:underline}table.tin-no-col-headers tr.mat-mdc-header-row{display:none}\n"] }]
+            args: [{ selector: 'spa-table', standalone: false, template: "\n<ng-container *ngIf=\"hasFormAccess && !sectionHidden\"> <!-- Changed: sectionConfig.hideWhenEmpty hides the whole table -->\n\n  <!-- Added: collapsible flat section header (sectionConfig) \u2014 1px border, no elevation, whole row toggles -->\n  <div class=\"tbl-section-header\" *ngIf=\"config.sectionConfig\" (click)=\"toggleSection()\" [attr.aria-expanded]=\"!sectionCollapsed\" [class.tbl-section-static]=\"config.sectionConfig.collapsible === false\" role=\"button\" tabindex=\"0\" (keydown.enter)=\"toggleSection()\">\n    <mat-icon class=\"tbl-section-icon\" *ngIf=\"config.sectionConfig.icon\">{{ config.sectionConfig.icon }}</mat-icon>\n    <span class=\"tbl-section-title\">{{ config.sectionConfig.title }}</span>\n    <span class=\"tbl-section-count\" *ngIf=\"config.sectionConfig.showCount !== false\">{{ dataSource?.length || 0 }}</span>\n    <span class=\"tbl-section-chip\" *ngFor=\"let chip of sectionChips()\" [style.color]=\"chip.color\">{{ chip.text }}</span>\n    <span class=\"tbl-section-spacer\"></span>\n    <!-- Changed: the label is wrapped so a NARROW screen can drop it and leave an icon-only button. Only a\n         button that HAS an icon loses its text \u2014 otherwise it would collapse to a blank square. -->\n    <button mat-stroked-button color=\"primary\" *ngFor=\"let btn of sectionButtons()\" (click)=\"sectionButtonClicked(btn, $event)\" [matTooltip]=\"btn.display || btn.name\"><mat-icon *ngIf=\"btn.icon?.name\">{{ btn.icon.name }}</mat-icon><span class=\"tbl-section-btn-text\" [class.has-icon]=\"!!btn.icon?.name\">{{ btn.display || btn.name }}</span></button>\n    <mat-icon class=\"tbl-section-chevron\" *ngIf=\"config.sectionConfig.collapsible !== false\">{{ sectionCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\n  </div>\n\n  <!-- Added: the section's \"why this list exists\" line. It sits UNDER the title (a reason only makes sense once\n       the list has been named) and only while the section is open \u2014 a shut section already has its own summary\n       line, and a paragraph over the top of that is noise. -->\n  <p class=\"tbl-section-caption\" *ngIf=\"config.sectionConfig?.caption && !sectionCollapsed\">{{ config.sectionConfig.caption }}</p>\n\n  <!-- Added: collapsed section affordance \u2014 mirrors the Day Book \"Show the N\" pattern -->\n  <div class=\"tbl-section-more\" *ngIf=\"config.sectionConfig && sectionCollapsed && (dataSource?.length || 0) > 0\">\n    <button type=\"button\" class=\"tbl-section-link\" (click)=\"toggleSection()\">Show the {{ dataSource.length }}</button>\n  </div>\n\n  <ng-container *ngIf=\"!config.sectionConfig || !sectionCollapsed\"> <!-- Added: section collapse hides the table body -->\n\n  <!-- Search -->\n  <spa-search\n    *ngIf=\"config.searchConfig\" [config]=\"config.searchConfig\" [smallScreen]=\"smallScreen\" [tableDataSource]=\"tableDataSource\" style=\"margin-bottom: 20px;\" (searchClick)=\"searchClicked($event)\">\n  </spa-search>\n\n  <!-- Header -->\n  <app-table-header\n    [config]=\"config\" [data]=\"dataSource\" [tableDataSource]=\"tableDataSource\" [tileConfig]=\"config.tileConfig\" [tileData]=\"tileData\" [tileReload]=\"tileReload\" [lastSearch]=\"lastSearch\" [smallScreen]=\"smallScreen\"\n    [showFilterButton]=\"showFilterButton\" [isRealTime]=\"config.realTime\" [isConnected]=\"isSignalRConnected\" [refreshing]=\"loadingStage === 'refresh'\"\n    (createClick)=\"newModel()\" (customClick)=\"customModel($event,null)\"\n    (refreshClick)=\"refreshClicked()\" (tileClick)=\"tileClicked($event)\" (tileUnClick)=\"tileUnClicked($event)\" (filterChange)=\"filterChanged($event)\">\n  </app-table-header>\n\n  <!-- Added (Quiet Loading D4): refresh with data already on screen \u2014 a 2px line flush under the header and the\n       spinning refresh icon are the ONLY signals. Rows stay live, clickable and un-dimmed while they swap. -->\n  <div *ngIf=\"loadingStage === 'refresh'\" class=\"tin-load-line\" aria-hidden=\"true\">\n    <span class=\"tin-load-line-fill\" [style.width.%]=\"progressPercent\"></span>\n  </div>\n\n  <!-- Added: paged-mode filter hint \u2014 the client filter only covers rows loaded so far -->\n  <div *ngIf=\"pagedMode && filterActive && loadedRows.length < serverTotal\" class=\"paged-filter-hint\">\n    <mat-icon>info</mat-icon>\n    <span>Filtering only the {{loadedRows.length}} loaded rows of {{serverTotal}}. {{ config.searchConfig ? 'Use Search for complete results.' : 'Refine with search for complete results.' }}</span>\n  </div>\n\n\n  <!-- Table -->\n  <div *ngIf=\"!config.viewType || config?.viewType === 'table'\">\n\n    <p *ngIf=\"!config\"><em>Configure Table</em></p>\n    <p *ngIf=\"!dataSource && !loadingStage\"><em>Loading...</em></p> <!-- Changed (Quiet Loading): the bare text is replaced by the stage below while a quiet load is on screen -->\n\n    <!-- Added (Quiet Loading D3): first load, nothing on screen yet. The progress module is the hero (eased bar +\n         counting percentage + caption) and the ghost rows hold the exact space the real rows will fill, so the\n         table does not jump when data lands. Only ever rendered when quiet loading is on. -->\n    <div *ngIf=\"loadingStage === 'initial'\" class=\"tin-load-stage\" role=\"status\" aria-busy=\"true\">\n\n      <div class=\"tin-load-progress\">\n        <div class=\"tin-load-bar\">\n          <span class=\"tin-load-bar-fill\" [style.width.%]=\"progressPercent\"></span>\n        </div>\n        <span class=\"tin-load-percent\" aria-hidden=\"true\">{{progressDisplay}}%</span>\n      </div>\n\n      <div class=\"tin-load-caption\">Loading {{stageEntityName}}\u2026</div>\n\n      <div class=\"tin-load-ghosts\">\n        <div class=\"tin-load-ghost-row\" *ngFor=\"let r of ghostRows\">\n          <div class=\"tin-load-ghost-cell\" *ngFor=\"let c of ghostColumns; let i = index\">\n            <span class=\"tin-skel\" [style.width.%]=\"ghostWidth(i, c)\" [style.animation-delay.ms]=\"r * 120\"></span> <!-- staggered sweep: each row starts 120ms after the one above -->\n          </div>\n        </div>\n      </div>\n\n    </div>\n\n    <div *ngIf=\"dataSource && loadingStage !== 'initial' && (!smallScreen || (smallScreen && dataSource?.length > 0))\" [class.tin-load-in]=\"effQuietLoading\"> <!-- Changed (Quiet Loading): the empty header-only table is suppressed while the initial stage stands in for it, and the real rows fade in where the ghosts were (D3) -->\n\n      <table mat-table [dataSource]=\"tableDataSource\" [trackBy]=\"trackByRow\" [ngClass]=\"elevation\" [class.tin-no-col-headers]=\"config.hideColumnHeaders\"> <!-- Changed: optional column-header suppression -->\n\n        <ng-container *ngFor=\"let column of config.columns\" [matColumnDef]=\"column.name\">\n          <th mat-header-cell *matHeaderCellDef >{{ column.alias ?? column.name | camelToWords }}</th>\n          <td mat-cell *matCellDef=\"let row;\" class=\"right-padding\" >\n\n            <!-- Added: inline edit \u2014 editable cells swap to their form-field editor while the row is in edit mode -->\n            <app-inline-cell *ngIf=\"isRowEditing(row) && getInlineField(column); else displayCell\" [field]=\"getInlineField(column)\" [data]=\"editingModel\"></app-inline-cell>\n\n            <!-- Rows -->\n            <ng-template #displayCell>\n              <app-table-row [column]=\"column\" [row]=\"row\" [config]=\"config\" [smallScreen]=\"smallScreen\"\n                (actionClick)=\"actionClicked(column.name, row)\" (columnClick)=\"columnClicked(column, row)\" (showBannerEvent)=\"showBanner($event)\">\n              </app-table-row>\n            </ng-template>\n\n          </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"action\">\n          <th mat-header-cell *matHeaderCellDef> Action </th>\n          <td mat-cell *matCellDef=\"let row\" [ngStyle]=\"{width:false ? '20px' : actionsWidth}\">\n            <div class=\"action-buttons-container\">\n\n              <!-- Added: inline edit \u2014 while a row edits in place, its actions collapse to submit/cancel -->\n              <ng-container *ngIf=\"isRowEditing(row); else rowActions\">\n                <button mat-icon-button matTooltip=\"Save\" matTooltipPosition=\"above\" (click)=\"submitInlineEdit()\"><mat-icon class=\"inline-save\">check</mat-icon></button> <!-- Changed: dropped color=\"primary\" \u2014 the icon now carries a green save cue -->\n                <button mat-icon-button matTooltip=\"Cancel\" matTooltipPosition=\"above\" (click)=\"cancelInlineEdit()\"><mat-icon class=\"inline-cancel\">close</mat-icon></button> <!-- Changed: red cancel cue -->\n              </ng-container>\n\n              <!-- Actions -->\n              <ng-template #rowActions>\n                <app-table-action\n                  [displayedButtons]=\"displayedButtons\" [config]=\"config\" [smallScreen]=\"smallScreen\" [row]=\"row\" (actionClick)=\"actionClicked($event.name, $event.row)\">\n                </app-table-action>\n              </ng-template>\n\n            </div>\n          </td>\n        </ng-container>\n\n\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n        <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" [ngClass]=\"{'make-gray': (config.greyOut && config.greyOut(row)) || row.pendingApproval, 'row-editing': isRowEditing(row)}\"></tr> <!-- Changed: row-editing flags the row that is open for inline edit -->\n      </table>\n\n    </div>\n\n    <!-- Changed: Removed *ngIf condition to keep paginator always in DOM and maintain ViewChild reference -->\n    <!-- Changed: Added CSS class binding to hide when no data instead of conditional rendering -->\n    <!-- Changed: Legacy paginator only renders in non-paged mode (pagedMode is constant per instance, set before first render) -->\n    <mat-paginator *ngIf=\"!pagedMode\"\n      #tablePaginator\n      [pageSizeOptions]=\"config.pageSizes ?? [10, 20, 50]\"\n      [ngClass]=\"{'paginator-hidden': !dataSource || (smallScreen && dataSource?.length === 0) || loadingStage === 'initial'}\"\n      showFirstLastButtons>\n    </mat-paginator>\n\n    <!-- Added: manual paginator for server-side paged mode \u2014 fully state-bound, never attached to MatTableDataSource. Always visible: when filtering it pages the in-memory filtered subset (length = filtered count); otherwise the server window (length = true total). No first/last jump (would force fetching the whole gap). -->\n    <mat-paginator *ngIf=\"pagedMode\"\n      [length]=\"filterActive ? filteredRows.length : serverTotal + overlayDelta\"\n      [pageIndex]=\"pageIndex\"\n      [pageSize]=\"pageSize\"\n      [pageSizeOptions]=\"config.pageSizes ?? [10, 20, 50]\"\n      [ngClass]=\"{'paginator-hidden': !dataSource || (smallScreen && dataSource?.length === 0) || loadingStage === 'initial'}\"\n      (page)=\"onServerPage($event)\">\n    </mat-paginator>\n\n  </div>\n  \n  <!-- Added (Quiet Loading): the initial-load stage for the NON-table views.\n       Without this, card/capsule/grouped showed literally nothing during a first load \u2014 the view component\n       renders an empty dataSource and the \"No Data\" line is suppressed while the stage owns the space.\n       The progress header is identical to the table's so the two feel like one feature; only the ghost\n       furniture differs, because column-shaped rows are wrong in a card grid. -->\n  <div *ngIf=\"loadingStage === 'initial' && config?.viewType && config?.viewType !== 'table'\" class=\"tin-load-stage\" role=\"status\" aria-busy=\"true\">\n    <div class=\"tin-load-progress\">\n      <div class=\"tin-load-bar\">\n        <span class=\"tin-load-bar-fill\" [style.width.%]=\"progressPercent\"></span>\n      </div>\n      <span class=\"tin-load-percent\" aria-hidden=\"true\">{{progressDisplay}}%</span>\n    </div>\n    <div class=\"tin-load-caption\">Loading {{stageEntityName}}\u2026</div>\n\n    <div *ngIf=\"config?.viewType === 'capsule'\" class=\"tin-load-ghost-capsules\" aria-hidden=\"true\">\n      <span class=\"tin-skel tin-load-ghost-capsule\" *ngFor=\"let c of ghostCapsules\"></span>\n    </div>\n\n    <div *ngIf=\"config?.viewType === 'card'\" class=\"tin-load-ghost-cards\" aria-hidden=\"true\">\n      <div class=\"tin-load-ghost-card\" *ngFor=\"let c of ghostCards\">\n        <span class=\"tin-skel tin-skel-text tin-load-ghost-card-title\"></span>\n        <span class=\"tin-skel tin-skel-text\"></span>\n        <span class=\"tin-skel tin-skel-text tin-load-ghost-card-short\"></span>\n      </div>\n    </div>\n\n    <div *ngIf=\"config?.viewType === 'grouped'\" class=\"tin-load-ghost-groups\" aria-hidden=\"true\">\n      <div class=\"tin-load-ghost-group\" *ngFor=\"let g of ghostGroups\">\n        <span class=\"tin-skel tin-load-ghost-group-head\"></span>\n        <!-- Pills, not rows: a group card's body is a wrap of chips, so full-width bars promised a table\n             and the stage did not resemble what replaced it. -->\n        <div class=\"tin-load-ghost-group-items\">\n          <span class=\"tin-skel tin-load-ghost-capsule\" *ngFor=\"let r of ghostCards\"></span>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Capsules -->\n  <spa-capsules *ngIf=\"config?.viewType === 'capsule' && loadingStage !== 'initial'\"\n    [config]=\"config\"\n    [dataSource]=\"dataSource\"\n    [displayedButtons]=\"displayedButtons\"\n    (actionClick)=\"actionClicked($event.name, $event.row)\">\n  </spa-capsules>\n\n\n  <!-- Cards -->\n  <spa-cards *ngIf=\"config?.viewType === 'card' && loadingStage !== 'initial'\"\n    [config]=\"config\"\n    [dataSource]=\"dataSource\"\n    [displayedButtons]=\"displayedButtons\"\n    [smallScreen]=\"smallScreen\"\n    (actionClick)=\"actionClicked($event.name, $event.row)\"\n    (columnClick)=\"columnClicked($event.column, $event.row)\"\n    (showBannerEvent)=\"showBanner($event)\">\n  </spa-cards>\n\n  <!-- Groups - Added: New grouped view type -->\n  <!-- Changed: the grouped view no longer renders its own filter field. It used to sit on a row of its own\n       beneath the buttons row, which left both rows half empty and, more importantly, was a SECOND filter with\n       no refresh button. The standard header filter (which has refresh, like every other table) now drives it,\n       with its text relayed in through filterText. -->\n  <spa-groups *ngIf=\"config?.viewType === 'grouped' && loadingStage !== 'initial'\"\n    [config]=\"config\"\n    [dataSource]=\"dataSource\"\n    [displayedButtons]=\"displayedButtons\"\n    [showOwnFilter]=\"false\"\n    [filterText]=\"groupFilterText\"\n    (actionClick)=\"actionClicked($event.name, $event.row, $event.group, $event.button)\">\n  </spa-groups>\n\n\n  <div class=\"tin-center\">\n    <p *ngIf=\"dataSource?.length == 0 && loadingStage !== 'initial'\"><em>{{config.noDataMessage ?? 'No Data'}}</em></p> <!-- Changed (Quiet Loading): the stage owns the space until it completes, then hands straight over to this message \u2014 no \"No Data\" flashing underneath the ghost rows -->\n  </div>\n\n  </ng-container> <!-- Added: end section-collapse wrapper -->\n\n</ng-container>\n\n\n<ng-container *ngIf=\"!hasFormAccess\">\n  <div class=\"tin-center\">\n    <p><em>Access Restricted</em></p>\n  </div>\n</ng-container>\n\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#f5f5f5}tr.mat-mdc-row{transition:background-color .15s ease}tr.mat-mdc-row:hover{background-color:#2196f305}tr.mat-mdc-row.row-editing,tr.mat-mdc-row.row-editing:hover{background-color:#ffa00014}.inline-save{color:#2e7d32!important}.inline-cancel{color:#c62828!important}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.dialog-container{display:flex;flex-direction:column;height:100%;max-height:100%;min-height:0}.dialog-content{flex:1;overflow:hidden;display:flex;flex-direction:column;min-height:0}.dialog-scroll-content{flex:1;overflow-y:auto;max-height:none!important;display:flex;flex-direction:column;min-height:0}.dialog-container:not(.dialog-has-tables){height:auto}.dialog-container:not(.dialog-has-tables) .dialog-scroll-content{flex:1 1 auto}.dialog-scroll-content>.tin-input{flex:1;display:flex;flex-direction:column}.dialog-scroll-content>.tin-input>spa-tabs{flex:1;display:flex;flex-direction:column}mat-dialog-actions{flex-shrink:0;justify-content:flex-start}.paginator-hidden{display:none!important}.paged-filter-hint{display:flex;align-items:center;gap:8px;margin:4px 0 8px;padding:6px 12px;border-radius:4px;background-color:#fff8e1;color:#795548;font-size:13px}.paged-filter-hint mat-icon{font-size:18px;width:18px;height:18px;color:#ffa000}.dlg-header-classic{padding-left:24px;padding-right:24px}.dlg-title-classic{font-size:20px;font-weight:500;margin-top:10px;margin-bottom:5px}.dialog-header-titles{display:flex;flex-direction:column;justify-content:center;min-width:0}.tin-dlg-head .dialog-header-titles label{margin:0}.tbl-section-header{display:flex;align-items:center;gap:10px;padding:10px 12px;margin-bottom:8px;border:1px solid rgba(0,0,0,.08);border-radius:10px;background:transparent;cursor:pointer;transition:border-color .15s}.tbl-section-header:hover{border-color:#90a4ae}.tbl-section-header.tbl-section-static{cursor:default}.tbl-section-icon{color:#546e7a}.tbl-section-title{font-size:14px;font-weight:600;color:#000000d1}.tbl-section-count{background:#e3f2fd;color:#1565c0;border-radius:12px;padding:2px 10px;font-size:12px}.tbl-section-chip{font-size:12px;font-weight:500;color:#0009}.tbl-section-spacer{margin-left:auto}.tbl-section-chevron{color:#90a4ae}.tbl-section-caption{margin:-4px 12px 10px;font-size:12.5px;line-height:1.45;color:#0000008c;max-width:82ch}.tbl-section-more{padding:0 12px 8px}.tbl-section-link{background:none;border:none;color:#1565c0;cursor:pointer;font-size:13px;padding:0}.tbl-section-link:hover{text-decoration:underline}.tbl-section-icon,.tbl-section-chevron,.tbl-section-count{flex:0 0 auto}.tbl-section-title{flex:1 1 auto;min-width:0}@media (max-width: 700px){.tbl-section-header{gap:8px;padding:10px}.tbl-section-chip,.tbl-section-btn-text.has-icon{display:none}.tbl-section-header button{min-width:0;padding:0 10px}}table.tin-no-col-headers tr.mat-mdc-header-row{display:none}\n"] }]
         }], ctorParameters: () => [{ type: DataServiceLib }, { type: MessageService }, { type: i1$4.BreakpointObserver }, { type: i4.MatDialog }, { type: ButtonService }, { type: DialogService }, { type: TableConfigService }, { type: ConditionService }, { type: AuthService }, { type: SignalRService }, { type: OfflineService }, { type: ApiErrorService }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -17819,10 +17843,11 @@ class DayBookComponent {
             hidden: (d) => !d?.[s.countField] || !this.inLane(s.lane), // Changed: lane filter lives in the predicate so pill clicks re-filter tiles live
             data: s.key // stage key travels on the tile so the click can find its section
         }));
-        // Changed: the stage row's layout is now config-driven like everything else on this page. A book with 9+
-        // stages needs to say how they should behave when they do not fit — wrap onto the next row (default) or
-        // stay on one row and scroll. Omitting stageTiles keeps the default wrap, so no existing config changes.
-        this.tileConfig = { tiles, clickable: true, ...(this.config?.stageTiles ?? {}) }; // a NEW object each build, so spa-tiles sees an input change
+        // Changed: the Day Book opts into the CAROUSEL (owner's instruction 2026-08-08). A book carries 9-16
+        // stages — more than any row can show — so one scrolling row beats either squeezing them or stacking
+        // them down the page above the lists. This is a Day Book decision made once in the library rather than
+        // repeated in five app configs; `stageTiles` still lets an app override it, including back to 'auto'.
+        this.tileConfig = { tiles, clickable: true, layout: 'carousel', ...(this.config?.stageTiles ?? {}) }; // a NEW object each build, so spa-tiles sees an input change
         // Added: counts resolved onto a copy of the book, so a countField naming a LIST still shows a number
         this.tileData = this.book ? { ...this.book, ...stages.reduce((a, s) => { a[s.countField] = this.stageCount(s); return a; }, {}) } : null;
     }
@@ -17951,11 +17976,11 @@ class DayBookComponent {
         return stages.length > 0 && stages.every(s => !this.stageCount(s));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: DayBookComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: DayBookComponent, isStandalone: false, selector: "spa-day-book", inputs: { dayBookConfig: "dayBookConfig" }, viewQueries: [{ propertyName: "tables", predicate: TableComponent, descendants: true }], ngImport: i0, template: "<div class=\"db-page\" *ngIf=\"config\">\n\n  <!-- Header: title, subtitle, books-from caption, owed total, app-supplied actions -->\n  <div class=\"db-head\">\n    <div class=\"db-head-text\">\n      <h1>{{ title }}</h1>\n      <p class=\"db-sub\" *ngIf=\"config.subtitle\">{{ config.subtitle }}</p>\n      <span class=\"db-caption\" *ngIf=\"booksFrom\">books from {{ booksFrom | date: 'mediumDate' }}</span>\n    </div>\n    <span class=\"db-owed\" *ngIf=\"owed !== null\">Owed to us: <b>{{ owed | currency }}</b></span>\n    <!-- The page's own actions (refresh, an escape hatch to a full screen). Changed: they now come from\n         config.actions, because an app with no component of its own has nothing to project with \u2014 the\n         ng-content slot stays beside them for anyone who does host the page themselves. -->\n    <div class=\"db-head-actions\">\n      <button mat-stroked-button color=\"primary\" type=\"button\" *ngFor=\"let a of pageActions\" (click)=\"pageActionClicked(a)\" [title]=\"a.tip || ''\">\n        <mat-icon *ngIf=\"a.icon?.name\">{{ a.icon.name }}</mat-icon>{{ a.display || a.name }}\n      </button>\n      <ng-content select=\"[dayBookActions]\"></ng-content>\n    </div>\n  </div>\n\n  <!-- Lane pills -->\n  <div class=\"db-lanes\" *ngIf=\"lanes.length\">\n    <button type=\"button\" class=\"db-lane\" *ngFor=\"let l of lanes\" [class.active]=\"lane === l.key\" (click)=\"setLane(l.key)\">\n      <mat-icon *ngIf=\"l.icon\">{{ l.icon }}</mat-icon>{{ l.label }}\n    </button>\n  </div>\n\n  <!-- Added: the library owns the loading state \u2014 first load only, a refresh keeps the page on screen.\n       Changed: binds showLoading, the copy that only ever moves between change-detection passes (NG0100) -->\n  <div class=\"db-loading\" *ngIf=\"showLoading && !book\">{{ config.loadingMessage || 'Loading\u2026' }}</div>\n\n  <ng-container *ngIf=\"book\">\n\n    <!-- The stage row. Changed: always spa-tiles \u2014 zero-count tiles hide -->\n    <spa-tiles *ngIf=\"tileConfig\" [config]=\"tileConfig\" [data]=\"tileData\" (tileClick)=\"onTileClick($event)\"></spa-tiles>\n\n    <!-- All clear -->\n    <div class=\"db-clear\" *ngIf=\"allClear\">\n      <mat-icon>task_alt</mat-icon>\n      <span>{{ config.allClearMessage || 'Nothing outstanding \u2014 all caught up.' }}</span>\n    </div>\n\n    <!-- Sections. A book carries 9-16 of these cards and, on 'Everything', all of them used to stack in one\n         column \u2014 so they are grouped into one collapsible lane group each, with the first open and the rest\n         showing only their identity: label, count, money and a chip per list. Sections that declare no lane\n         sit above the groups, and with grouping off (one lane, a picked lane, or groupLanes:false) the page\n         renders exactly as it did before. -->\n    <ng-container *ngFor=\"let s of ungroupedSections\">\n      <ng-container *ngTemplateOutlet=\"sectionCard; context: s.outletContext\"></ng-container>\n    </ng-container>\n\n    <section class=\"db-group\" *ngFor=\"let g of visibleGroups\" [class.closed]=\"g.collapsed\">\n      <button type=\"button\" class=\"db-ghead\" (click)=\"toggleGroup(g)\" [attr.aria-expanded]=\"!g.collapsed\">\n        <mat-icon *ngIf=\"g.lane.icon\">{{ g.lane.icon }}</mat-icon>\n        <span class=\"g-label\">{{ g.lane.label }}</span>\n        <span class=\"db-count\">{{ g.count }}</span>\n        <span class=\"g-value\" *ngIf=\"g.value\">{{ g.value | currency: undefined : 'symbol' : '1.0-0' }}</span>\n        <span class=\"g-lists\">{{ g.sections.length }} {{ g.sections.length === 1 ? 'list' : 'lists' }}</span>\n        <mat-icon class=\"g-chev\">{{ g.collapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\n      </button>\n      <!-- Collapsed, the group still says what it is about \u2014 one chip per non-empty list, and a chip is a way\n           in: it opens the group and scrolls to that section, the same path a stage click takes. -->\n      <div class=\"db-chips\" *ngIf=\"g.collapsed\">\n        <button type=\"button\" class=\"db-chip\" *ngFor=\"let c of g.chips\" (click)=\"goTo(c.key)\">{{ c.label }}<span>{{ c.count }}</span></button>\n        <span class=\"db-chip-none\" *ngIf=\"!g.chips.length\">Nothing outstanding here</span>\n      </div>\n      <div class=\"db-gbody\" *ngIf=\"!g.collapsed\">\n        <ng-container *ngFor=\"let s of g.sections\">\n          <ng-container *ngTemplateOutlet=\"sectionCard; context: s.outletContext\"></ng-container>\n        </ng-container>\n      </div>\n    </section>\n\n    <!-- One section card, drawn from two places (flat above, and inside a lane group). Changed: ONE rendering\n         path \u2014 a section is a spa-table fed local rows off the book object. The table draws its own section\n         header (icon, title, count, chips, buttons, caption, chevron); (actionSuccess) reloads the book so a\n         row that has just been actioned leaves the list instead of sitting there looking undone \u2014 the section\n         has no loadAction of its own to refresh from. -->\n    <ng-template #sectionCard let-s>\n      <mat-card class=\"db-section\" [id]=\"'sec-' + s.section.key\" [class.alert]=\"s.section.tone === 'alert'\" [class.quiet]=\"s.section.tone === 'quiet'\">\n        <!-- the \"why this list exists\" line rides inside the table's own header, under the title. With no\n             section header there is nothing to ride, so the card carries it instead. -->\n        <p class=\"db-why\" *ngIf=\"s.caption && !s.cfg?.sectionConfig\">{{ s.caption }}</p>\n        <spa-table [config]=\"s.cfg\" [data]=\"s.rows\" (actionSuccess)=\"load()\"></spa-table>\n      </mat-card>\n    </ng-template>\n\n  </ng-container>\n\n</div>\n\n<!-- Graceful empty state (feature not configured) -->\n<div class=\"db-empty\" *ngIf=\"!config\">\n  <mat-icon>checklist</mat-icon>\n  <p>The Day Book is not configured for this app.</p>\n</div>\n", styles: [":host{--db-accent: #1565c0;--db-accent-soft: #e3f2fd;--db-alert: #e53935;--db-alert-text: #c62828;--db-quiet: #b0bec5}.db-page{max-width:1200px;margin:0 auto;padding:16px;display:flex;flex-direction:column;gap:16px}.db-head{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}.db-head-text h1{margin:0;font-size:24px}.db-head-text .db-sub{margin:4px 0 0;font-size:14px;color:#0000008c}.db-caption{font-size:12px;color:#0000008c}.db-owed{font-size:13px;color:#000000b3;margin-left:auto}.db-head-actions{display:flex;gap:8px;margin-left:auto}.db-lanes{display:flex;gap:6px;flex-wrap:wrap;align-items:center}.db-lane{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(0,0,0,.12);border-radius:16px;background:transparent;padding:4px 14px;font:inherit;font-size:13px;cursor:pointer;transition:border-color .15s,background .15s}.db-lane:hover{border-color:#90a4ae}.db-lane.active{border-color:var(--db-accent);background:var(--db-accent-soft);color:var(--db-accent);font-weight:500}.db-lane mat-icon{font-size:17px;width:17px;height:17px}.db-loading{padding:40px;text-align:center;color:#00000080}.db-clear{display:flex;align-items:center;gap:10px;border:1px solid #c8e6c9;background:#f6fbf6;border-radius:10px;padding:14px 16px;color:#2e7d32}.db-section{padding:12px 16px;scroll-margin-top:12px;border-left:4px solid transparent}.db-section.alert{border-left-color:var(--db-alert)}.db-section.quiet{border-left-color:var(--db-quiet)}.db-count{background:#00000012;border-radius:11px;padding:1px 9px;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}.db-why{margin:0 0 10px;color:#0000008c;font-size:13px;max-width:82ch}.db-group{display:flex;flex-direction:column;gap:12px}.db-group.closed{gap:0}.db-ghead{display:flex;align-items:center;gap:10px;width:100%;border:1px solid #e0e0e0;border-radius:6px;background:#fafafa;padding:11px 14px;font:inherit;cursor:pointer;text-align:left;transition:background .15s,border-color .15s}.db-ghead:hover{background:#f2f5f7;border-color:#cfd8dc}.db-group.closed .db-ghead{border-bottom-left-radius:0;border-bottom-right-radius:0}.db-ghead>mat-icon{font-size:20px;width:20px;height:20px;color:var(--db-accent)}.db-ghead .g-label{font-size:15px;font-weight:600;letter-spacing:.2px}.db-ghead .g-value{font-size:13px;font-weight:600;color:#000000b3;font-variant-numeric:tabular-nums}.db-ghead .g-lists{font-size:12px;color:#00000073;margin-left:auto}.db-ghead .g-chev{font-size:22px;width:22px;height:22px;color:#00000073}.db-chips{display:flex;flex-wrap:wrap;gap:6px;border:1px solid #e0e0e0;border-top:0;border-radius:0 0 6px 6px;background:#fff;padding:9px 14px 11px}.db-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(0,0,0,.12);border-radius:14px;background:transparent;padding:2px 6px 2px 11px;font:inherit;font-size:12.5px;color:#000000b3;cursor:pointer}.db-chip:hover{border-color:var(--db-accent);color:var(--db-accent)}.db-chip span{background:#00000012;border-radius:10px;padding:0 7px;font-weight:600;font-variant-numeric:tabular-nums}.db-chip-none{font-size:12.5px;color:#00000073}.db-gbody{display:flex;flex-direction:column;gap:12px}.db-empty{padding:48px;text-align:center;color:#00000080}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i19.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: TilesComponent, selector: "spa-tiles", inputs: ["config", "lastSearch", "data", "reload"], outputs: ["tileActionSelected", "tileClick", "tileUnClick"] }, { kind: "component", type: TableComponent, selector: "spa-table", inputs: ["data", "tileData", "config", "localMode", "parentDetails", "reload", "activeTab", "inTab", "nestingLevel"], outputs: ["dataLoad", "totalChange", "actionSuccess", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange", "actionResponse"] }, { kind: "pipe", type: i1$2.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i1$2.DatePipe, name: "date" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: DayBookComponent, isStandalone: false, selector: "spa-day-book", inputs: { dayBookConfig: "dayBookConfig" }, viewQueries: [{ propertyName: "tables", predicate: TableComponent, descendants: true }], ngImport: i0, template: "<div class=\"db-page\" *ngIf=\"config\">\n\n  <!-- Header: title, subtitle, books-from caption, owed total, app-supplied actions -->\n  <div class=\"db-head\">\n    <div class=\"db-head-text\">\n      <h1>{{ title }}</h1>\n      <p class=\"db-sub\" *ngIf=\"config.subtitle\">{{ config.subtitle }}</p>\n      <span class=\"db-caption\" *ngIf=\"booksFrom\">books from {{ booksFrom | date: 'mediumDate' }}</span>\n    </div>\n    <span class=\"db-owed\" *ngIf=\"owed !== null\">Owed to us: <b>{{ owed | currency }}</b></span>\n    <!-- The page's own actions (refresh, an escape hatch to a full screen). Changed: they now come from\n         config.actions, because an app with no component of its own has nothing to project with \u2014 the\n         ng-content slot stays beside them for anyone who does host the page themselves. -->\n    <!-- Changed: an action WITH an icon renders icon-only (owner, 2026-08-08 \u2014 \"the refresh and all trips\n         buttons can just be icons with no text\"). The label is not lost, it moves to the tooltip and to\n         aria-label, so the control still announces itself to a screen reader and on hover. An action with\n         no icon keeps its text button, because an unlabelled blank button would be unusable. -->\n    <div class=\"db-head-actions\">\n      <ng-container *ngFor=\"let a of pageActions\">\n        <button mat-icon-button color=\"primary\" type=\"button\" *ngIf=\"a.icon?.name; else textAction\" (click)=\"pageActionClicked(a)\" [matTooltip]=\"a.tip || a.display || a.name\" [attr.aria-label]=\"a.display || a.name\">\n          <mat-icon>{{ a.icon.name }}</mat-icon>\n        </button>\n        <ng-template #textAction>\n          <button mat-stroked-button color=\"primary\" type=\"button\" (click)=\"pageActionClicked(a)\" [title]=\"a.tip || ''\">{{ a.display || a.name }}</button>\n        </ng-template>\n      </ng-container>\n      <ng-content select=\"[dayBookActions]\"></ng-content>\n    </div>\n  </div>\n\n  <!-- Lane pills -->\n  <div class=\"db-lanes\" *ngIf=\"lanes.length\">\n    <button type=\"button\" class=\"db-lane\" *ngFor=\"let l of lanes\" [class.active]=\"lane === l.key\" (click)=\"setLane(l.key)\">\n      <mat-icon *ngIf=\"l.icon\">{{ l.icon }}</mat-icon>{{ l.label }}\n    </button>\n  </div>\n\n  <!-- Added: the library owns the loading state \u2014 first load only, a refresh keeps the page on screen.\n       Changed: binds showLoading, the copy that only ever moves between change-detection passes (NG0100) -->\n  <div class=\"db-loading\" *ngIf=\"showLoading && !book\">{{ config.loadingMessage || 'Loading\u2026' }}</div>\n\n  <ng-container *ngIf=\"book\">\n\n    <!-- The stage row. Changed: always spa-tiles \u2014 zero-count tiles hide -->\n    <spa-tiles *ngIf=\"tileConfig\" [config]=\"tileConfig\" [data]=\"tileData\" (tileClick)=\"onTileClick($event)\"></spa-tiles>\n\n    <!-- All clear -->\n    <div class=\"db-clear\" *ngIf=\"allClear\">\n      <mat-icon>task_alt</mat-icon>\n      <span>{{ config.allClearMessage || 'Nothing outstanding \u2014 all caught up.' }}</span>\n    </div>\n\n    <!-- Sections. A book carries 9-16 of these cards and, on 'Everything', all of them used to stack in one\n         column \u2014 so they are grouped into one collapsible lane group each, with the first open and the rest\n         showing only their identity: label, count, money and a chip per list. Sections that declare no lane\n         sit above the groups, and with grouping off (one lane, a picked lane, or groupLanes:false) the page\n         renders exactly as it did before. -->\n    <ng-container *ngFor=\"let s of ungroupedSections\">\n      <ng-container *ngTemplateOutlet=\"sectionCard; context: s.outletContext\"></ng-container>\n    </ng-container>\n\n    <section class=\"db-group\" *ngFor=\"let g of visibleGroups\" [class.closed]=\"g.collapsed\">\n      <button type=\"button\" class=\"db-ghead\" (click)=\"toggleGroup(g)\" [attr.aria-expanded]=\"!g.collapsed\">\n        <mat-icon *ngIf=\"g.lane.icon\">{{ g.lane.icon }}</mat-icon>\n        <span class=\"g-label\">{{ g.lane.label }}</span>\n        <span class=\"db-count\">{{ g.count }}</span>\n        <span class=\"g-value\" *ngIf=\"g.value\">{{ g.value | currency: undefined : 'symbol' : '1.0-0' }}</span>\n        <span class=\"g-lists\">{{ g.sections.length }} {{ g.sections.length === 1 ? 'list' : 'lists' }}</span>\n        <mat-icon class=\"g-chev\">{{ g.collapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\n      </button>\n      <!-- Collapsed, the group still says what it is about \u2014 one chip per non-empty list, and a chip is a way\n           in: it opens the group and scrolls to that section, the same path a stage click takes. -->\n      <div class=\"db-chips\" *ngIf=\"g.collapsed\">\n        <button type=\"button\" class=\"db-chip\" *ngFor=\"let c of g.chips\" (click)=\"goTo(c.key)\">{{ c.label }}<span>{{ c.count }}</span></button>\n        <span class=\"db-chip-none\" *ngIf=\"!g.chips.length\">Nothing outstanding here</span>\n      </div>\n      <div class=\"db-gbody\" *ngIf=\"!g.collapsed\">\n        <ng-container *ngFor=\"let s of g.sections\">\n          <ng-container *ngTemplateOutlet=\"sectionCard; context: s.outletContext\"></ng-container>\n        </ng-container>\n      </div>\n    </section>\n\n    <!-- One section card, drawn from two places (flat above, and inside a lane group). Changed: ONE rendering\n         path \u2014 a section is a spa-table fed local rows off the book object. The table draws its own section\n         header (icon, title, count, chips, buttons, caption, chevron); (actionSuccess) reloads the book so a\n         row that has just been actioned leaves the list instead of sitting there looking undone \u2014 the section\n         has no loadAction of its own to refresh from. -->\n    <ng-template #sectionCard let-s>\n      <mat-card class=\"db-section\" [id]=\"'sec-' + s.section.key\" [class.alert]=\"s.section.tone === 'alert'\" [class.quiet]=\"s.section.tone === 'quiet'\">\n        <!-- the \"why this list exists\" line rides inside the table's own header, under the title. With no\n             section header there is nothing to ride, so the card carries it instead. -->\n        <p class=\"db-why\" *ngIf=\"s.caption && !s.cfg?.sectionConfig\">{{ s.caption }}</p>\n        <spa-table [config]=\"s.cfg\" [data]=\"s.rows\" (actionSuccess)=\"load()\"></spa-table>\n      </mat-card>\n    </ng-template>\n\n  </ng-container>\n\n</div>\n\n<!-- Graceful empty state (feature not configured) -->\n<div class=\"db-empty\" *ngIf=\"!config\">\n  <mat-icon>checklist</mat-icon>\n  <p>The Day Book is not configured for this app.</p>\n</div>\n", styles: [":host{--db-accent: #1565c0;--db-accent-soft: #e3f2fd;--db-alert: #e53935;--db-alert-text: #c62828;--db-quiet: #b0bec5}.db-page{max-width:1200px;margin:0 auto;padding:16px;display:flex;flex-direction:column;gap:16px}.db-head{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}.db-head-text h1{margin:0;font-size:24px}.db-head-text .db-sub{margin:4px 0 0;font-size:14px;color:#0000008c}.db-caption{font-size:12px;color:#0000008c}.db-owed{font-size:13px;color:#000000b3;margin-left:auto}.db-head-actions{display:flex;gap:8px;margin-left:auto}.db-lanes{display:flex;gap:6px;flex-wrap:wrap;align-items:center}.db-lane{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(0,0,0,.12);border-radius:16px;background:transparent;padding:4px 14px;font:inherit;font-size:13px;cursor:pointer;transition:border-color .15s,background .15s}.db-lane:hover{border-color:#90a4ae}.db-lane.active{border-color:var(--db-accent);background:var(--db-accent-soft);color:var(--db-accent);font-weight:500}.db-lane mat-icon{font-size:17px;width:17px;height:17px}@media (max-width: 700px){.db-head{gap:6px 10px;align-items:center}.db-head-text{flex:1 1 auto;min-width:0;order:1}.db-head-text h1{font-size:20px}.db-head-text .db-sub{display:none}.db-caption{font-size:11px}.db-head-actions{order:2;margin-left:auto;gap:2px}.db-owed{order:3;flex:1 0 100%;margin-left:0;font-size:13px}.db-lanes{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.db-lanes::-webkit-scrollbar{display:none}.db-lane{flex:0 0 auto}}.db-loading{padding:40px;text-align:center;color:#00000080}.db-clear{display:flex;align-items:center;gap:10px;border:1px solid #c8e6c9;background:#f6fbf6;border-radius:10px;padding:14px 16px;color:#2e7d32}.db-section{padding:12px 16px;scroll-margin-top:12px;border-left:4px solid transparent}.db-section.alert{border-left-color:var(--db-alert)}.db-section.quiet{border-left-color:var(--db-quiet)}.db-count{background:#00000012;border-radius:11px;padding:1px 9px;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}.db-why{margin:0 0 10px;color:#0000008c;font-size:13px;max-width:82ch}.db-group{display:flex;flex-direction:column;gap:12px}.db-group.closed{gap:0}.db-ghead{display:flex;align-items:center;gap:10px;width:100%;border:1px solid #e0e0e0;border-radius:6px;background:#fafafa;padding:11px 14px;font:inherit;cursor:pointer;text-align:left;transition:background .15s,border-color .15s}.db-ghead:hover{background:#f2f5f7;border-color:#cfd8dc}.db-group.closed .db-ghead{border-bottom-left-radius:0;border-bottom-right-radius:0}.db-ghead>mat-icon{font-size:20px;width:20px;height:20px;color:var(--db-accent)}.db-ghead .g-label{font-size:15px;font-weight:600;letter-spacing:.2px}.db-ghead .g-value{font-size:13px;font-weight:600;color:#000000b3;font-variant-numeric:tabular-nums}.db-ghead .g-lists{font-size:12px;color:#00000073;margin-left:auto}.db-ghead .g-chev{font-size:22px;width:22px;height:22px;color:#00000073}.db-chips{display:flex;flex-wrap:wrap;gap:6px;border:1px solid #e0e0e0;border-top:0;border-radius:0 0 6px 6px;background:#fff;padding:9px 14px 11px}.db-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(0,0,0,.12);border-radius:14px;background:transparent;padding:2px 6px 2px 11px;font:inherit;font-size:12.5px;color:#000000b3;cursor:pointer}.db-chip:hover{border-color:var(--db-accent);color:var(--db-accent)}.db-chip span{background:#00000012;border-radius:10px;padding:0 7px;font-weight:600;font-variant-numeric:tabular-nums}.db-chip-none{font-size:12.5px;color:#00000073}.db-gbody{display:flex;flex-direction:column;gap:12px}.db-empty{padding:48px;text-align:center;color:#00000080}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i19.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: TilesComponent, selector: "spa-tiles", inputs: ["config", "lastSearch", "data", "reload"], outputs: ["tileActionSelected", "tileClick", "tileUnClick"] }, { kind: "component", type: TableComponent, selector: "spa-table", inputs: ["data", "tileData", "config", "localMode", "parentDetails", "reload", "activeTab", "inTab", "nestingLevel"], outputs: ["dataLoad", "totalChange", "actionSuccess", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange", "actionResponse"] }, { kind: "pipe", type: i1$2.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i1$2.DatePipe, name: "date" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: DayBookComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spa-day-book', standalone: false, template: "<div class=\"db-page\" *ngIf=\"config\">\n\n  <!-- Header: title, subtitle, books-from caption, owed total, app-supplied actions -->\n  <div class=\"db-head\">\n    <div class=\"db-head-text\">\n      <h1>{{ title }}</h1>\n      <p class=\"db-sub\" *ngIf=\"config.subtitle\">{{ config.subtitle }}</p>\n      <span class=\"db-caption\" *ngIf=\"booksFrom\">books from {{ booksFrom | date: 'mediumDate' }}</span>\n    </div>\n    <span class=\"db-owed\" *ngIf=\"owed !== null\">Owed to us: <b>{{ owed | currency }}</b></span>\n    <!-- The page's own actions (refresh, an escape hatch to a full screen). Changed: they now come from\n         config.actions, because an app with no component of its own has nothing to project with \u2014 the\n         ng-content slot stays beside them for anyone who does host the page themselves. -->\n    <div class=\"db-head-actions\">\n      <button mat-stroked-button color=\"primary\" type=\"button\" *ngFor=\"let a of pageActions\" (click)=\"pageActionClicked(a)\" [title]=\"a.tip || ''\">\n        <mat-icon *ngIf=\"a.icon?.name\">{{ a.icon.name }}</mat-icon>{{ a.display || a.name }}\n      </button>\n      <ng-content select=\"[dayBookActions]\"></ng-content>\n    </div>\n  </div>\n\n  <!-- Lane pills -->\n  <div class=\"db-lanes\" *ngIf=\"lanes.length\">\n    <button type=\"button\" class=\"db-lane\" *ngFor=\"let l of lanes\" [class.active]=\"lane === l.key\" (click)=\"setLane(l.key)\">\n      <mat-icon *ngIf=\"l.icon\">{{ l.icon }}</mat-icon>{{ l.label }}\n    </button>\n  </div>\n\n  <!-- Added: the library owns the loading state \u2014 first load only, a refresh keeps the page on screen.\n       Changed: binds showLoading, the copy that only ever moves between change-detection passes (NG0100) -->\n  <div class=\"db-loading\" *ngIf=\"showLoading && !book\">{{ config.loadingMessage || 'Loading\u2026' }}</div>\n\n  <ng-container *ngIf=\"book\">\n\n    <!-- The stage row. Changed: always spa-tiles \u2014 zero-count tiles hide -->\n    <spa-tiles *ngIf=\"tileConfig\" [config]=\"tileConfig\" [data]=\"tileData\" (tileClick)=\"onTileClick($event)\"></spa-tiles>\n\n    <!-- All clear -->\n    <div class=\"db-clear\" *ngIf=\"allClear\">\n      <mat-icon>task_alt</mat-icon>\n      <span>{{ config.allClearMessage || 'Nothing outstanding \u2014 all caught up.' }}</span>\n    </div>\n\n    <!-- Sections. A book carries 9-16 of these cards and, on 'Everything', all of them used to stack in one\n         column \u2014 so they are grouped into one collapsible lane group each, with the first open and the rest\n         showing only their identity: label, count, money and a chip per list. Sections that declare no lane\n         sit above the groups, and with grouping off (one lane, a picked lane, or groupLanes:false) the page\n         renders exactly as it did before. -->\n    <ng-container *ngFor=\"let s of ungroupedSections\">\n      <ng-container *ngTemplateOutlet=\"sectionCard; context: s.outletContext\"></ng-container>\n    </ng-container>\n\n    <section class=\"db-group\" *ngFor=\"let g of visibleGroups\" [class.closed]=\"g.collapsed\">\n      <button type=\"button\" class=\"db-ghead\" (click)=\"toggleGroup(g)\" [attr.aria-expanded]=\"!g.collapsed\">\n        <mat-icon *ngIf=\"g.lane.icon\">{{ g.lane.icon }}</mat-icon>\n        <span class=\"g-label\">{{ g.lane.label }}</span>\n        <span class=\"db-count\">{{ g.count }}</span>\n        <span class=\"g-value\" *ngIf=\"g.value\">{{ g.value | currency: undefined : 'symbol' : '1.0-0' }}</span>\n        <span class=\"g-lists\">{{ g.sections.length }} {{ g.sections.length === 1 ? 'list' : 'lists' }}</span>\n        <mat-icon class=\"g-chev\">{{ g.collapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\n      </button>\n      <!-- Collapsed, the group still says what it is about \u2014 one chip per non-empty list, and a chip is a way\n           in: it opens the group and scrolls to that section, the same path a stage click takes. -->\n      <div class=\"db-chips\" *ngIf=\"g.collapsed\">\n        <button type=\"button\" class=\"db-chip\" *ngFor=\"let c of g.chips\" (click)=\"goTo(c.key)\">{{ c.label }}<span>{{ c.count }}</span></button>\n        <span class=\"db-chip-none\" *ngIf=\"!g.chips.length\">Nothing outstanding here</span>\n      </div>\n      <div class=\"db-gbody\" *ngIf=\"!g.collapsed\">\n        <ng-container *ngFor=\"let s of g.sections\">\n          <ng-container *ngTemplateOutlet=\"sectionCard; context: s.outletContext\"></ng-container>\n        </ng-container>\n      </div>\n    </section>\n\n    <!-- One section card, drawn from two places (flat above, and inside a lane group). Changed: ONE rendering\n         path \u2014 a section is a spa-table fed local rows off the book object. The table draws its own section\n         header (icon, title, count, chips, buttons, caption, chevron); (actionSuccess) reloads the book so a\n         row that has just been actioned leaves the list instead of sitting there looking undone \u2014 the section\n         has no loadAction of its own to refresh from. -->\n    <ng-template #sectionCard let-s>\n      <mat-card class=\"db-section\" [id]=\"'sec-' + s.section.key\" [class.alert]=\"s.section.tone === 'alert'\" [class.quiet]=\"s.section.tone === 'quiet'\">\n        <!-- the \"why this list exists\" line rides inside the table's own header, under the title. With no\n             section header there is nothing to ride, so the card carries it instead. -->\n        <p class=\"db-why\" *ngIf=\"s.caption && !s.cfg?.sectionConfig\">{{ s.caption }}</p>\n        <spa-table [config]=\"s.cfg\" [data]=\"s.rows\" (actionSuccess)=\"load()\"></spa-table>\n      </mat-card>\n    </ng-template>\n\n  </ng-container>\n\n</div>\n\n<!-- Graceful empty state (feature not configured) -->\n<div class=\"db-empty\" *ngIf=\"!config\">\n  <mat-icon>checklist</mat-icon>\n  <p>The Day Book is not configured for this app.</p>\n</div>\n", styles: [":host{--db-accent: #1565c0;--db-accent-soft: #e3f2fd;--db-alert: #e53935;--db-alert-text: #c62828;--db-quiet: #b0bec5}.db-page{max-width:1200px;margin:0 auto;padding:16px;display:flex;flex-direction:column;gap:16px}.db-head{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}.db-head-text h1{margin:0;font-size:24px}.db-head-text .db-sub{margin:4px 0 0;font-size:14px;color:#0000008c}.db-caption{font-size:12px;color:#0000008c}.db-owed{font-size:13px;color:#000000b3;margin-left:auto}.db-head-actions{display:flex;gap:8px;margin-left:auto}.db-lanes{display:flex;gap:6px;flex-wrap:wrap;align-items:center}.db-lane{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(0,0,0,.12);border-radius:16px;background:transparent;padding:4px 14px;font:inherit;font-size:13px;cursor:pointer;transition:border-color .15s,background .15s}.db-lane:hover{border-color:#90a4ae}.db-lane.active{border-color:var(--db-accent);background:var(--db-accent-soft);color:var(--db-accent);font-weight:500}.db-lane mat-icon{font-size:17px;width:17px;height:17px}.db-loading{padding:40px;text-align:center;color:#00000080}.db-clear{display:flex;align-items:center;gap:10px;border:1px solid #c8e6c9;background:#f6fbf6;border-radius:10px;padding:14px 16px;color:#2e7d32}.db-section{padding:12px 16px;scroll-margin-top:12px;border-left:4px solid transparent}.db-section.alert{border-left-color:var(--db-alert)}.db-section.quiet{border-left-color:var(--db-quiet)}.db-count{background:#00000012;border-radius:11px;padding:1px 9px;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}.db-why{margin:0 0 10px;color:#0000008c;font-size:13px;max-width:82ch}.db-group{display:flex;flex-direction:column;gap:12px}.db-group.closed{gap:0}.db-ghead{display:flex;align-items:center;gap:10px;width:100%;border:1px solid #e0e0e0;border-radius:6px;background:#fafafa;padding:11px 14px;font:inherit;cursor:pointer;text-align:left;transition:background .15s,border-color .15s}.db-ghead:hover{background:#f2f5f7;border-color:#cfd8dc}.db-group.closed .db-ghead{border-bottom-left-radius:0;border-bottom-right-radius:0}.db-ghead>mat-icon{font-size:20px;width:20px;height:20px;color:var(--db-accent)}.db-ghead .g-label{font-size:15px;font-weight:600;letter-spacing:.2px}.db-ghead .g-value{font-size:13px;font-weight:600;color:#000000b3;font-variant-numeric:tabular-nums}.db-ghead .g-lists{font-size:12px;color:#00000073;margin-left:auto}.db-ghead .g-chev{font-size:22px;width:22px;height:22px;color:#00000073}.db-chips{display:flex;flex-wrap:wrap;gap:6px;border:1px solid #e0e0e0;border-top:0;border-radius:0 0 6px 6px;background:#fff;padding:9px 14px 11px}.db-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(0,0,0,.12);border-radius:14px;background:transparent;padding:2px 6px 2px 11px;font:inherit;font-size:12.5px;color:#000000b3;cursor:pointer}.db-chip:hover{border-color:var(--db-accent);color:var(--db-accent)}.db-chip span{background:#00000012;border-radius:10px;padding:0 7px;font-weight:600;font-variant-numeric:tabular-nums}.db-chip-none{font-size:12.5px;color:#00000073}.db-gbody{display:flex;flex-direction:column;gap:12px}.db-empty{padding:48px;text-align:center;color:#00000080}\n"] }]
+            args: [{ selector: 'spa-day-book', standalone: false, template: "<div class=\"db-page\" *ngIf=\"config\">\n\n  <!-- Header: title, subtitle, books-from caption, owed total, app-supplied actions -->\n  <div class=\"db-head\">\n    <div class=\"db-head-text\">\n      <h1>{{ title }}</h1>\n      <p class=\"db-sub\" *ngIf=\"config.subtitle\">{{ config.subtitle }}</p>\n      <span class=\"db-caption\" *ngIf=\"booksFrom\">books from {{ booksFrom | date: 'mediumDate' }}</span>\n    </div>\n    <span class=\"db-owed\" *ngIf=\"owed !== null\">Owed to us: <b>{{ owed | currency }}</b></span>\n    <!-- The page's own actions (refresh, an escape hatch to a full screen). Changed: they now come from\n         config.actions, because an app with no component of its own has nothing to project with \u2014 the\n         ng-content slot stays beside them for anyone who does host the page themselves. -->\n    <!-- Changed: an action WITH an icon renders icon-only (owner, 2026-08-08 \u2014 \"the refresh and all trips\n         buttons can just be icons with no text\"). The label is not lost, it moves to the tooltip and to\n         aria-label, so the control still announces itself to a screen reader and on hover. An action with\n         no icon keeps its text button, because an unlabelled blank button would be unusable. -->\n    <div class=\"db-head-actions\">\n      <ng-container *ngFor=\"let a of pageActions\">\n        <button mat-icon-button color=\"primary\" type=\"button\" *ngIf=\"a.icon?.name; else textAction\" (click)=\"pageActionClicked(a)\" [matTooltip]=\"a.tip || a.display || a.name\" [attr.aria-label]=\"a.display || a.name\">\n          <mat-icon>{{ a.icon.name }}</mat-icon>\n        </button>\n        <ng-template #textAction>\n          <button mat-stroked-button color=\"primary\" type=\"button\" (click)=\"pageActionClicked(a)\" [title]=\"a.tip || ''\">{{ a.display || a.name }}</button>\n        </ng-template>\n      </ng-container>\n      <ng-content select=\"[dayBookActions]\"></ng-content>\n    </div>\n  </div>\n\n  <!-- Lane pills -->\n  <div class=\"db-lanes\" *ngIf=\"lanes.length\">\n    <button type=\"button\" class=\"db-lane\" *ngFor=\"let l of lanes\" [class.active]=\"lane === l.key\" (click)=\"setLane(l.key)\">\n      <mat-icon *ngIf=\"l.icon\">{{ l.icon }}</mat-icon>{{ l.label }}\n    </button>\n  </div>\n\n  <!-- Added: the library owns the loading state \u2014 first load only, a refresh keeps the page on screen.\n       Changed: binds showLoading, the copy that only ever moves between change-detection passes (NG0100) -->\n  <div class=\"db-loading\" *ngIf=\"showLoading && !book\">{{ config.loadingMessage || 'Loading\u2026' }}</div>\n\n  <ng-container *ngIf=\"book\">\n\n    <!-- The stage row. Changed: always spa-tiles \u2014 zero-count tiles hide -->\n    <spa-tiles *ngIf=\"tileConfig\" [config]=\"tileConfig\" [data]=\"tileData\" (tileClick)=\"onTileClick($event)\"></spa-tiles>\n\n    <!-- All clear -->\n    <div class=\"db-clear\" *ngIf=\"allClear\">\n      <mat-icon>task_alt</mat-icon>\n      <span>{{ config.allClearMessage || 'Nothing outstanding \u2014 all caught up.' }}</span>\n    </div>\n\n    <!-- Sections. A book carries 9-16 of these cards and, on 'Everything', all of them used to stack in one\n         column \u2014 so they are grouped into one collapsible lane group each, with the first open and the rest\n         showing only their identity: label, count, money and a chip per list. Sections that declare no lane\n         sit above the groups, and with grouping off (one lane, a picked lane, or groupLanes:false) the page\n         renders exactly as it did before. -->\n    <ng-container *ngFor=\"let s of ungroupedSections\">\n      <ng-container *ngTemplateOutlet=\"sectionCard; context: s.outletContext\"></ng-container>\n    </ng-container>\n\n    <section class=\"db-group\" *ngFor=\"let g of visibleGroups\" [class.closed]=\"g.collapsed\">\n      <button type=\"button\" class=\"db-ghead\" (click)=\"toggleGroup(g)\" [attr.aria-expanded]=\"!g.collapsed\">\n        <mat-icon *ngIf=\"g.lane.icon\">{{ g.lane.icon }}</mat-icon>\n        <span class=\"g-label\">{{ g.lane.label }}</span>\n        <span class=\"db-count\">{{ g.count }}</span>\n        <span class=\"g-value\" *ngIf=\"g.value\">{{ g.value | currency: undefined : 'symbol' : '1.0-0' }}</span>\n        <span class=\"g-lists\">{{ g.sections.length }} {{ g.sections.length === 1 ? 'list' : 'lists' }}</span>\n        <mat-icon class=\"g-chev\">{{ g.collapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\n      </button>\n      <!-- Collapsed, the group still says what it is about \u2014 one chip per non-empty list, and a chip is a way\n           in: it opens the group and scrolls to that section, the same path a stage click takes. -->\n      <div class=\"db-chips\" *ngIf=\"g.collapsed\">\n        <button type=\"button\" class=\"db-chip\" *ngFor=\"let c of g.chips\" (click)=\"goTo(c.key)\">{{ c.label }}<span>{{ c.count }}</span></button>\n        <span class=\"db-chip-none\" *ngIf=\"!g.chips.length\">Nothing outstanding here</span>\n      </div>\n      <div class=\"db-gbody\" *ngIf=\"!g.collapsed\">\n        <ng-container *ngFor=\"let s of g.sections\">\n          <ng-container *ngTemplateOutlet=\"sectionCard; context: s.outletContext\"></ng-container>\n        </ng-container>\n      </div>\n    </section>\n\n    <!-- One section card, drawn from two places (flat above, and inside a lane group). Changed: ONE rendering\n         path \u2014 a section is a spa-table fed local rows off the book object. The table draws its own section\n         header (icon, title, count, chips, buttons, caption, chevron); (actionSuccess) reloads the book so a\n         row that has just been actioned leaves the list instead of sitting there looking undone \u2014 the section\n         has no loadAction of its own to refresh from. -->\n    <ng-template #sectionCard let-s>\n      <mat-card class=\"db-section\" [id]=\"'sec-' + s.section.key\" [class.alert]=\"s.section.tone === 'alert'\" [class.quiet]=\"s.section.tone === 'quiet'\">\n        <!-- the \"why this list exists\" line rides inside the table's own header, under the title. With no\n             section header there is nothing to ride, so the card carries it instead. -->\n        <p class=\"db-why\" *ngIf=\"s.caption && !s.cfg?.sectionConfig\">{{ s.caption }}</p>\n        <spa-table [config]=\"s.cfg\" [data]=\"s.rows\" (actionSuccess)=\"load()\"></spa-table>\n      </mat-card>\n    </ng-template>\n\n  </ng-container>\n\n</div>\n\n<!-- Graceful empty state (feature not configured) -->\n<div class=\"db-empty\" *ngIf=\"!config\">\n  <mat-icon>checklist</mat-icon>\n  <p>The Day Book is not configured for this app.</p>\n</div>\n", styles: [":host{--db-accent: #1565c0;--db-accent-soft: #e3f2fd;--db-alert: #e53935;--db-alert-text: #c62828;--db-quiet: #b0bec5}.db-page{max-width:1200px;margin:0 auto;padding:16px;display:flex;flex-direction:column;gap:16px}.db-head{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}.db-head-text h1{margin:0;font-size:24px}.db-head-text .db-sub{margin:4px 0 0;font-size:14px;color:#0000008c}.db-caption{font-size:12px;color:#0000008c}.db-owed{font-size:13px;color:#000000b3;margin-left:auto}.db-head-actions{display:flex;gap:8px;margin-left:auto}.db-lanes{display:flex;gap:6px;flex-wrap:wrap;align-items:center}.db-lane{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(0,0,0,.12);border-radius:16px;background:transparent;padding:4px 14px;font:inherit;font-size:13px;cursor:pointer;transition:border-color .15s,background .15s}.db-lane:hover{border-color:#90a4ae}.db-lane.active{border-color:var(--db-accent);background:var(--db-accent-soft);color:var(--db-accent);font-weight:500}.db-lane mat-icon{font-size:17px;width:17px;height:17px}@media (max-width: 700px){.db-head{gap:6px 10px;align-items:center}.db-head-text{flex:1 1 auto;min-width:0;order:1}.db-head-text h1{font-size:20px}.db-head-text .db-sub{display:none}.db-caption{font-size:11px}.db-head-actions{order:2;margin-left:auto;gap:2px}.db-owed{order:3;flex:1 0 100%;margin-left:0;font-size:13px}.db-lanes{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.db-lanes::-webkit-scrollbar{display:none}.db-lane{flex:0 0 auto}}.db-loading{padding:40px;text-align:center;color:#00000080}.db-clear{display:flex;align-items:center;gap:10px;border:1px solid #c8e6c9;background:#f6fbf6;border-radius:10px;padding:14px 16px;color:#2e7d32}.db-section{padding:12px 16px;scroll-margin-top:12px;border-left:4px solid transparent}.db-section.alert{border-left-color:var(--db-alert)}.db-section.quiet{border-left-color:var(--db-quiet)}.db-count{background:#00000012;border-radius:11px;padding:1px 9px;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}.db-why{margin:0 0 10px;color:#0000008c;font-size:13px;max-width:82ch}.db-group{display:flex;flex-direction:column;gap:12px}.db-group.closed{gap:0}.db-ghead{display:flex;align-items:center;gap:10px;width:100%;border:1px solid #e0e0e0;border-radius:6px;background:#fafafa;padding:11px 14px;font:inherit;cursor:pointer;text-align:left;transition:background .15s,border-color .15s}.db-ghead:hover{background:#f2f5f7;border-color:#cfd8dc}.db-group.closed .db-ghead{border-bottom-left-radius:0;border-bottom-right-radius:0}.db-ghead>mat-icon{font-size:20px;width:20px;height:20px;color:var(--db-accent)}.db-ghead .g-label{font-size:15px;font-weight:600;letter-spacing:.2px}.db-ghead .g-value{font-size:13px;font-weight:600;color:#000000b3;font-variant-numeric:tabular-nums}.db-ghead .g-lists{font-size:12px;color:#00000073;margin-left:auto}.db-ghead .g-chev{font-size:22px;width:22px;height:22px;color:#00000073}.db-chips{display:flex;flex-wrap:wrap;gap:6px;border:1px solid #e0e0e0;border-top:0;border-radius:0 0 6px 6px;background:#fff;padding:9px 14px 11px}.db-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(0,0,0,.12);border-radius:14px;background:transparent;padding:2px 6px 2px 11px;font:inherit;font-size:12.5px;color:#000000b3;cursor:pointer}.db-chip:hover{border-color:var(--db-accent);color:var(--db-accent)}.db-chip span{background:#00000012;border-radius:10px;padding:0 7px;font-weight:600;font-variant-numeric:tabular-nums}.db-chip-none{font-size:12.5px;color:#00000073}.db-gbody{display:flex;flex-direction:column;gap:12px}.db-empty{padding:48px;text-align:center;color:#00000080}\n"] }]
         }], propDecorators: { tables: [{
                 type: ViewChildren,
                 args: [TableComponent]
@@ -22056,11 +22081,11 @@ class DetailsDialog {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: DetailsDialog, deps: [{ token: i1$4.BreakpointObserver }, { token: LoaderService }, { token: DataServiceLib }, { token: MessageService }, { token: i4.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: ButtonService }, { token: DialogService }, { token: AuthService }, { token: TableConfigService }, { token: i0.NgZone }, { token: ApiErrorService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: DetailsDialog, isStandalone: false, selector: "spa-detailsDialog", outputs: { inputChange: "inputChange" }, viewQueries: [{ propertyName: "formComponent", first: true, predicate: FormComponent, descendants: true }], ngImport: i0, template: "<!-- Changed: dialog-has-tables mirrors the service's hasTables (tableConfigs?.length)\n     which decides height '90%' vs 'auto' \u2014 used to scope scroll behaviour per case -->\n<div class=\"dialog-container\" [class.dialog-has-tables]=\"detailsConfig.tableConfigs?.length > 0\">\n\n  <div class=\"dialog-content\">\n\n    <!-- Changed: was <mat-progress-bar mode=\"indeterminate\">, which looped at a constant speed forever and so\n         only ever said \"busy\". This is the same markup and the same PerceivedProgress curve the table stage\n         uses, so a dialog and the table behind it move identically. It tracks the FORM's record load \u2014 nested\n         tab tables run their own stages. Controlled by appConfig.quietLoading. -->\n    <div *ngIf=\"showProgressLine\" class=\"tin-load-line\" aria-hidden=\"true\">\n      <span class=\"tin-load-line-fill\" [style.width.%]=\"progressPercent\"></span>\n    </div>\n\n    <!-- Changed: the header's padding and the title's type were inline styles, which always beat a class and so\n         made a second presentation impossible. Moved into dlg-header-classic / dlg-title-classic, which restate\n         those exact values, so the default look is unchanged while `modern` can swap in the banded header. -->\n    <div class=\"d-flex justify-content-between align-items-center dialog-header\"\n         [class.mt-2]=\"!modern\" [class.dlg-header-classic]=\"!modern\" [class.tin-dlg-head]=\"modern\">\n\n      <div class=\"dialog-header-titles\">\n        <label [class.dlg-title-classic]=\"!modern\" [class.tin-dlg-title]=\"modern\">{{titleAction | titlecase}} {{formConfig?.title}}</label>\n      </div>\n\n      <div class=\"d-flex align-items-center\" style=\"gap: 8px;\">\n\n        <!-- Changed: Auto Refresh icon button \u2014 grey when off, green when on, with dynamic tooltip -->\n        <button *ngIf=\"detailsConfig.autoRefreshConfig\" mat-icon-button\n          [matTooltip]=\"autoRefreshEnabled ? 'Click to disable auto refresh' : 'Click to enable auto refresh'\" matTooltipPosition=\"above\"\n          [style.color]=\"autoRefreshEnabled ? '#4caf50' : '#9e9e9e'\"\n          (click)=\"autoRefreshEnabled = !autoRefreshEnabled; toggleAutoRefresh()\">\n          <mat-icon>autorenew</mat-icon>\n        </button>\n        <!-- Changed: Keep Open icon button \u2014 grey when off, green when on, with dynamic tooltip -->\n        <button *ngIf=\"detailsConfig.allowUserKeepOpen\" mat-icon-button\n          [matTooltip]=\"userKeepOpen ? 'Click to disable keep open' : 'Click to enable keep open'\" matTooltipPosition=\"above\"\n          [style.color]=\"userKeepOpen ? '#4caf50' : '#9e9e9e'\"\n          (click)=\"userKeepOpen = !userKeepOpen\">\n          <mat-icon>push_pin</mat-icon>\n        </button>\n\n        <!-- TS-16: bind precomputed editButtonVM instead of testVisible/testDisabled (which cloned objects) per CD -->\n        <div *ngIf=\"formConfig.mode=='view' && editButton && editButtonVM.visible\">\n          <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Edit\" color=\"primary\" (click)=\"setMode('edit')\" [disabled]=\"editButtonVM.disabled\"><mat-icon>edit</mat-icon></button>\n        </div>\n\n        <!-- Changed (Quiet Loading): every [disabled] below now ORs in entityLoading. A quiet read is silent, so it\n             never flips LoaderService.isLoading and isProcessing alone would leave these buttons live during the\n             load \u2014 a user could submit an empty form. With the flag off entityLoading simply tracks the same\n             window isProcessing already covered, so nothing changes. -->\n        <!-- Changed: the icon now spins while the form's record reloads, matching the table's refresh button.\n             Same .tin-spin class, so the two surfaces use one idiom rather than each inventing its own. -->\n        <button [disabled]=\"isProcessing || entityLoading\" *ngIf=\"loadByAction\" mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Refresh\" color=\"primary\" (click)=\"loadData(formConfig.loadAction, detailsConfig.causeTableRefresh)\"><mat-icon class=\"refreshIcon\" [class.tin-spin]=\"entityLoading\">cached</mat-icon></button>\n        \n        <!-- Added: Top close button when position is 'top' -->\n        <button *ngIf=\"shouldShowTopClose()\" [disabled]=\"isProcessing || entityLoading\" mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Close\" (click)=\"close()\"><mat-icon>close</mat-icon></button>\n\n      </div>\n\n    </div>\n\n    <div style=\"padding-left: 24px; padding-right: 24px;\">\n      <spa-steps *ngIf=\"stepConfig && details && stepConfig.sticky\" [config]=\"stepConfig\" [data]=\"details\"></spa-steps>\n      <spa-statuses *ngIf=\"statusConfig && details && statusConfig?.sticky\" [config]=\"statusConfig\" [data]=\"details\"></spa-statuses>\n      <spa-alert *ngIf=\"formConfig.alertConfig && formConfig.alertConfig?.sticky\" [config]=\"formConfig.alertConfig\" [data]=\"details\"></spa-alert>\n    </div>\n\n    <mat-dialog-content class=\"mat-typography dialog-scroll-content\">\n\n      <spa-steps *ngIf=\"stepConfig && details && !stepConfig.sticky\" [config]=\"stepConfig\" [data]=\"details\"></spa-steps>\n      <spa-statuses *ngIf=\"statusConfig && details && !statusConfig?.sticky\" [config]=\"statusConfig\" [data]=\"details\"></spa-statuses>\n      <spa-alert *ngIf=\"formConfig.alertConfig && !formConfig.alertConfig?.sticky\" [config]=\"formConfig.alertConfig\" [data]=\"details\"></spa-alert>\n\n      <div class=\"tin-input\" style=\"font-size:14px\">\n\n        <!-- Changed (Quiet Loading, FSD D6): with the flag OFF this is the original bare \"Loading...\" line, unchanged.\n             With it ON the text is replaced by a skeleton of the real form \u2014 and only once showSkeleton has been\n             armed past the 150ms anti-flicker delay, so a cached record renders straight into the form with no flash. -->\n        <p *ngIf=\"formConfig && !details && !effQuietLoading\"><em>Loading...</em></p>\n\n        <spa-form-skeleton *ngIf=\"formConfig && !details && effQuietLoading && showSkeleton\" [config]=\"formConfig\"></spa-form-skeleton>\n\n        <spa-form *ngIf=\"formConfig && details\" [files]=\"files\" [data]=\"details\" [config]=\"formConfig\" (inputChange)=\"inputChanged($event)\">\n          <ng-template #dynamicSelect let-field=\"field\" let-data=\"data\" let-testReadOnly=\"testReadOnly\" let-testRequired=\"testRequired\" let-selectChanged=\"selectChanged\" let-resolveLoadAction=\"resolveLoadAction\">\n            <spa-select\n              [display]=\"field.alias ?? field.name | camelToWords\"\n              [width]=\"field.width\"\n              [nullable]=\"field.nullable\"\n              [options]=\"field.options\"\n              [masterOptions]=\"field.masterOptions\"\n              [masterField]=\"field.masterField\"\n              [optionDisplay]=\"field.optionDisplay ?? 'name'\"\n              [optionValue]=\"field.optionValue ?? 'value'\"\n              [(value)]=\"data[field.name]\"\n              [defaultFirstValue]=\"field.defaultFirstValue\"\n              [required]=\"testRequired(field)\"\n              [readonly]=\"testReadOnly(field)\"\n              [hint]=\"field.hint\"\n              [detailsConfig]=\"field.detailsConfig\"\n              [loadAction]=\"resolveLoadAction ? resolveLoadAction(field) : field.loadAction\"\n              [loadIDField]=\"field.loadIDField\"\n              [field]=\"field\"\n              [data]=\"data\"\n              [infoMessage]=\"field.infoMessage\"\n              [copyContent]=\"field.copyContent\"\n              (valueChange)=\"selectChanged(field)\"\n            ></spa-select>\n          </ng-template>\n        </spa-form>\n\n        <!-- Changed: Use unified spa-tabs with nestingLevel control \u2014 tabs hidden when nestingLevel >= 2 -->\n        <spa-tabs\n          *ngIf=\"showTabs && tableConfigs && !(detailsConfig.hideTablesInCreateMode && formConfig?.mode === 'create')\"\n          [tableConfigs]=\"tableConfigs\"\n          [reload]=\"tableReload\"\n          [parentDetails]=\"details\"\n          [localMode]=\"formConfig?.mode === 'create'\"\n          [nestingLevel]=\"nestingLevel + 1\"\n          (formRefresh)=\"loadData(formConfig.loadAction, false)\"\n          (actionSuccess)=\"actionPerformed = true\">\n        </spa-tabs><!-- Changed: nested-tab table actions flag actionPerformed so refreshOnCloseIfActioned refreshes the parent on close -->\n\n      </div>\n\n    </mat-dialog-content>\n\n\n  </div>\n\n  <mat-dialog-actions >\n\n    <div>\n\n      <button mat-raised-button [disabled]=\"isProcessing || entityLoading\" *ngIf=\"formConfig.mode=='create' && createButton\" color=\"primary\"\n        (click)=\"create()\" cdkFocusInitial>{{createButton.display ?? 'Submit'}}\n      </button>\n\n      <button mat-raised-button [disabled]=\"isProcessing || entityLoading\" *ngIf=\"formConfig.mode=='edit' && editButton\" color=\"primary\"\n        (click)=\"edit()\" cdkFocusInitial>{{editButton.display ?? 'Submit'}}\n      </button>\n\n      <!-- TS-16: bind precomputed extraButtonVMs instead of testVisible/testDisabled/getButtonColor (each cloning objects) per CD -->\n      <ng-container *ngFor=\"let vm of extraButtonVMs\">\n        <button *ngIf=\"formConfig.mode !== 'create' && vm.visible\" mat-stroked-button [disabled]=\"isProcessing || entityLoading || vm.disabled\" [ngStyle]=\"{'color': vm.color}\" (click)=\"custom(vm.button)\" cdkFocusInitial>\n          <mat-icon *ngIf=\"vm.button.icon\" [ngStyle]=\"{'color': vm.color}\">{{vm.button.icon.name}}</mat-icon>\n          {{vm.button.display ?? vm.button.name | titlecase}}\n        </button>\n      </ng-container>\n\n      <!-- Changed: Bottom close button now uses conditional display and custom text -->\n      <button *ngIf=\"shouldShowBottomClose()\" mat-stroked-button color=\"primary\" (click)=\"close()\">{{getCloseText()}}</button>\n\n    </div>\n\n    <div class=\"col d-flex justify-content-end\" *ngIf=\"smallScreen\">\n      <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Delete\" [disabled]=\"isProcessing || entityLoading\" style=\"color: red;\" (click)=\"delete()\" *ngIf=\"formConfig.mode!='create'  && deleteButton\"><mat-icon>delete</mat-icon></button>\n    </div>\n\n\n  </mat-dialog-actions>\n\n\n</div>\n\n\n\n\n\n\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#f5f5f5}tr.mat-mdc-row{transition:background-color .15s ease}tr.mat-mdc-row:hover{background-color:#2196f305}tr.mat-mdc-row.row-editing,tr.mat-mdc-row.row-editing:hover{background-color:#ffa00014}.inline-save{color:#2e7d32!important}.inline-cancel{color:#c62828!important}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.dialog-container{display:flex;flex-direction:column;height:100%;max-height:100%;min-height:0}.dialog-content{flex:1;overflow:hidden;display:flex;flex-direction:column;min-height:0}.dialog-scroll-content{flex:1;overflow-y:auto;max-height:none!important;display:flex;flex-direction:column;min-height:0}.dialog-container:not(.dialog-has-tables){height:auto}.dialog-container:not(.dialog-has-tables) .dialog-scroll-content{flex:1 1 auto}.dialog-scroll-content>.tin-input{flex:1;display:flex;flex-direction:column}.dialog-scroll-content>.tin-input>spa-tabs{flex:1;display:flex;flex-direction:column}mat-dialog-actions{flex-shrink:0;justify-content:flex-start}.paginator-hidden{display:none!important}.paged-filter-hint{display:flex;align-items:center;gap:8px;margin:4px 0 8px;padding:6px 12px;border-radius:4px;background-color:#fff8e1;color:#795548;font-size:13px}.paged-filter-hint mat-icon{font-size:18px;width:18px;height:18px;color:#ffa000}.dlg-header-classic{padding-left:24px;padding-right:24px}.dlg-title-classic{font-size:20px;font-weight:500;margin-top:10px;margin-bottom:5px}.dialog-header-titles{display:flex;flex-direction:column;justify-content:center;min-width:0}.tin-dlg-head .dialog-header-titles label{margin:0}.tbl-section-header{display:flex;align-items:center;gap:10px;padding:10px 12px;margin-bottom:8px;border:1px solid rgba(0,0,0,.08);border-radius:10px;background:transparent;cursor:pointer;transition:border-color .15s}.tbl-section-header:hover{border-color:#90a4ae}.tbl-section-header.tbl-section-static{cursor:default}.tbl-section-icon{color:#546e7a}.tbl-section-title{font-size:14px;font-weight:600;color:#000000d1}.tbl-section-count{background:#e3f2fd;color:#1565c0;border-radius:12px;padding:2px 10px;font-size:12px}.tbl-section-chip{font-size:12px;font-weight:500;color:#0009}.tbl-section-spacer{margin-left:auto}.tbl-section-chevron{color:#90a4ae}.tbl-section-caption{margin:-4px 12px 10px;font-size:12.5px;line-height:1.45;color:#0000008c;max-width:82ch}.tbl-section-more{padding:0 12px 8px}.tbl-section-link{background:none;border:none;color:#1565c0;cursor:pointer;font-size:13px;padding:0}.tbl-section-link:hover{text-decoration:underline}table.tin-no-col-headers tr.mat-mdc-header-row{display:none}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: SelectComponent, selector: "spa-select", inputs: ["detailsConfig"] }, { kind: "component", type: StepsComponent, selector: "spa-steps", inputs: ["value", "config", "data", "activeIndex"] }, { kind: "component", type: FormComponent, selector: "spa-form", inputs: ["files", "data", "config"], outputs: ["buttonClick", "inputChange"] }, { kind: "component", type: FormSkeletonComponent, selector: "spa-form-skeleton", inputs: ["config"] }, { kind: "component", type: AlertComponent, selector: "spa-alert", inputs: ["config", "data"] }, { kind: "component", type: TabsComponent, selector: "spa-tabs", inputs: ["tableConfigs", "reload", "reloadTab", "parentDetails", "localMode", "nestingLevel"], outputs: ["formRefresh", "actionSuccess"] }, { kind: "component", type: StatusesComponent, selector: "spa-statuses", inputs: ["config", "data"] }, { kind: "pipe", type: i1$2.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: DetailsDialog, isStandalone: false, selector: "spa-detailsDialog", outputs: { inputChange: "inputChange" }, viewQueries: [{ propertyName: "formComponent", first: true, predicate: FormComponent, descendants: true }], ngImport: i0, template: "<!-- Changed: dialog-has-tables mirrors the service's hasTables (tableConfigs?.length)\n     which decides height '90%' vs 'auto' \u2014 used to scope scroll behaviour per case -->\n<div class=\"dialog-container\" [class.dialog-has-tables]=\"detailsConfig.tableConfigs?.length > 0\">\n\n  <div class=\"dialog-content\">\n\n    <!-- Changed: was <mat-progress-bar mode=\"indeterminate\">, which looped at a constant speed forever and so\n         only ever said \"busy\". This is the same markup and the same PerceivedProgress curve the table stage\n         uses, so a dialog and the table behind it move identically. It tracks the FORM's record load \u2014 nested\n         tab tables run their own stages. Controlled by appConfig.quietLoading. -->\n    <div *ngIf=\"showProgressLine\" class=\"tin-load-line\" aria-hidden=\"true\">\n      <span class=\"tin-load-line-fill\" [style.width.%]=\"progressPercent\"></span>\n    </div>\n\n    <!-- Changed: the header's padding and the title's type were inline styles, which always beat a class and so\n         made a second presentation impossible. Moved into dlg-header-classic / dlg-title-classic, which restate\n         those exact values, so the default look is unchanged while `modern` can swap in the banded header. -->\n    <div class=\"d-flex justify-content-between align-items-center dialog-header\"\n         [class.mt-2]=\"!modern\" [class.dlg-header-classic]=\"!modern\" [class.tin-dlg-head]=\"modern\">\n\n      <div class=\"dialog-header-titles\">\n        <label [class.dlg-title-classic]=\"!modern\" [class.tin-dlg-title]=\"modern\">{{titleAction | titlecase}} {{formConfig?.title}}</label>\n      </div>\n\n      <div class=\"d-flex align-items-center\" style=\"gap: 8px;\">\n\n        <!-- Changed: Auto Refresh icon button \u2014 grey when off, green when on, with dynamic tooltip -->\n        <button *ngIf=\"detailsConfig.autoRefreshConfig\" mat-icon-button\n          [matTooltip]=\"autoRefreshEnabled ? 'Click to disable auto refresh' : 'Click to enable auto refresh'\" matTooltipPosition=\"above\"\n          [style.color]=\"autoRefreshEnabled ? '#4caf50' : '#9e9e9e'\"\n          (click)=\"autoRefreshEnabled = !autoRefreshEnabled; toggleAutoRefresh()\">\n          <mat-icon>autorenew</mat-icon>\n        </button>\n        <!-- Changed: Keep Open icon button \u2014 grey when off, green when on, with dynamic tooltip -->\n        <button *ngIf=\"detailsConfig.allowUserKeepOpen\" mat-icon-button\n          [matTooltip]=\"userKeepOpen ? 'Click to disable keep open' : 'Click to enable keep open'\" matTooltipPosition=\"above\"\n          [style.color]=\"userKeepOpen ? '#4caf50' : '#9e9e9e'\"\n          (click)=\"userKeepOpen = !userKeepOpen\">\n          <mat-icon>push_pin</mat-icon>\n        </button>\n\n        <!-- TS-16: bind precomputed editButtonVM instead of testVisible/testDisabled (which cloned objects) per CD -->\n        <div *ngIf=\"formConfig.mode=='view' && editButton && editButtonVM.visible\">\n          <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Edit\" color=\"primary\" (click)=\"setMode('edit')\" [disabled]=\"editButtonVM.disabled\"><mat-icon>edit</mat-icon></button>\n        </div>\n\n        <!-- Changed (Quiet Loading): every [disabled] below now ORs in entityLoading. A quiet read is silent, so it\n             never flips LoaderService.isLoading and isProcessing alone would leave these buttons live during the\n             load \u2014 a user could submit an empty form. With the flag off entityLoading simply tracks the same\n             window isProcessing already covered, so nothing changes. -->\n        <!-- Changed: the icon now spins while the form's record reloads, matching the table's refresh button.\n             Same .tin-spin class, so the two surfaces use one idiom rather than each inventing its own. -->\n        <button [disabled]=\"isProcessing || entityLoading\" *ngIf=\"loadByAction\" mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Refresh\" color=\"primary\" (click)=\"loadData(formConfig.loadAction, detailsConfig.causeTableRefresh)\"><mat-icon class=\"refreshIcon\" [class.tin-spin]=\"entityLoading\">cached</mat-icon></button>\n        \n        <!-- Added: Top close button when position is 'top' -->\n        <button *ngIf=\"shouldShowTopClose()\" [disabled]=\"isProcessing || entityLoading\" mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Close\" (click)=\"close()\"><mat-icon>close</mat-icon></button>\n\n      </div>\n\n    </div>\n\n    <div style=\"padding-left: 24px; padding-right: 24px;\">\n      <spa-steps *ngIf=\"stepConfig && details && stepConfig.sticky\" [config]=\"stepConfig\" [data]=\"details\"></spa-steps>\n      <spa-statuses *ngIf=\"statusConfig && details && statusConfig?.sticky\" [config]=\"statusConfig\" [data]=\"details\"></spa-statuses>\n      <spa-alert *ngIf=\"formConfig.alertConfig && formConfig.alertConfig?.sticky\" [config]=\"formConfig.alertConfig\" [data]=\"details\"></spa-alert>\n    </div>\n\n    <mat-dialog-content class=\"mat-typography dialog-scroll-content\">\n\n      <spa-steps *ngIf=\"stepConfig && details && !stepConfig.sticky\" [config]=\"stepConfig\" [data]=\"details\"></spa-steps>\n      <spa-statuses *ngIf=\"statusConfig && details && !statusConfig?.sticky\" [config]=\"statusConfig\" [data]=\"details\"></spa-statuses>\n      <spa-alert *ngIf=\"formConfig.alertConfig && !formConfig.alertConfig?.sticky\" [config]=\"formConfig.alertConfig\" [data]=\"details\"></spa-alert>\n\n      <div class=\"tin-input\" style=\"font-size:14px\">\n\n        <!-- Changed (Quiet Loading, FSD D6): with the flag OFF this is the original bare \"Loading...\" line, unchanged.\n             With it ON the text is replaced by a skeleton of the real form \u2014 and only once showSkeleton has been\n             armed past the 150ms anti-flicker delay, so a cached record renders straight into the form with no flash. -->\n        <p *ngIf=\"formConfig && !details && !effQuietLoading\"><em>Loading...</em></p>\n\n        <spa-form-skeleton *ngIf=\"formConfig && !details && effQuietLoading && showSkeleton\" [config]=\"formConfig\"></spa-form-skeleton>\n\n        <spa-form *ngIf=\"formConfig && details\" [files]=\"files\" [data]=\"details\" [config]=\"formConfig\" (inputChange)=\"inputChanged($event)\">\n          <ng-template #dynamicSelect let-field=\"field\" let-data=\"data\" let-testReadOnly=\"testReadOnly\" let-testRequired=\"testRequired\" let-selectChanged=\"selectChanged\" let-resolveLoadAction=\"resolveLoadAction\">\n            <spa-select\n              [display]=\"field.alias ?? field.name | camelToWords\"\n              [width]=\"field.width\"\n              [nullable]=\"field.nullable\"\n              [options]=\"field.options\"\n              [masterOptions]=\"field.masterOptions\"\n              [masterField]=\"field.masterField\"\n              [optionDisplay]=\"field.optionDisplay ?? 'name'\"\n              [optionValue]=\"field.optionValue ?? 'value'\"\n              [(value)]=\"data[field.name]\"\n              [defaultFirstValue]=\"field.defaultFirstValue\"\n              [required]=\"testRequired(field)\"\n              [readonly]=\"testReadOnly(field)\"\n              [hint]=\"field.hint\"\n              [detailsConfig]=\"field.detailsConfig\"\n              [loadAction]=\"resolveLoadAction ? resolveLoadAction(field) : field.loadAction\"\n              [loadIDField]=\"field.loadIDField\"\n              [field]=\"field\"\n              [data]=\"data\"\n              [infoMessage]=\"field.infoMessage\"\n              [copyContent]=\"field.copyContent\"\n              (valueChange)=\"selectChanged(field)\"\n            ></spa-select>\n          </ng-template>\n        </spa-form>\n\n        <!-- Changed: Use unified spa-tabs with nestingLevel control \u2014 tabs hidden when nestingLevel >= 2 -->\n        <spa-tabs\n          *ngIf=\"showTabs && tableConfigs && !(detailsConfig.hideTablesInCreateMode && formConfig?.mode === 'create')\"\n          [tableConfigs]=\"tableConfigs\"\n          [reload]=\"tableReload\"\n          [parentDetails]=\"details\"\n          [localMode]=\"formConfig?.mode === 'create'\"\n          [nestingLevel]=\"nestingLevel + 1\"\n          (formRefresh)=\"loadData(formConfig.loadAction, false)\"\n          (actionSuccess)=\"actionPerformed = true\">\n        </spa-tabs><!-- Changed: nested-tab table actions flag actionPerformed so refreshOnCloseIfActioned refreshes the parent on close -->\n\n      </div>\n\n    </mat-dialog-content>\n\n\n  </div>\n\n  <mat-dialog-actions >\n\n    <div>\n\n      <button mat-raised-button [disabled]=\"isProcessing || entityLoading\" *ngIf=\"formConfig.mode=='create' && createButton\" color=\"primary\"\n        (click)=\"create()\" cdkFocusInitial>{{createButton.display ?? 'Submit'}}\n      </button>\n\n      <button mat-raised-button [disabled]=\"isProcessing || entityLoading\" *ngIf=\"formConfig.mode=='edit' && editButton\" color=\"primary\"\n        (click)=\"edit()\" cdkFocusInitial>{{editButton.display ?? 'Submit'}}\n      </button>\n\n      <!-- TS-16: bind precomputed extraButtonVMs instead of testVisible/testDisabled/getButtonColor (each cloning objects) per CD -->\n      <ng-container *ngFor=\"let vm of extraButtonVMs\">\n        <button *ngIf=\"formConfig.mode !== 'create' && vm.visible\" mat-stroked-button [disabled]=\"isProcessing || entityLoading || vm.disabled\" [ngStyle]=\"{'color': vm.color}\" (click)=\"custom(vm.button)\" cdkFocusInitial>\n          <mat-icon *ngIf=\"vm.button.icon\" [ngStyle]=\"{'color': vm.color}\">{{vm.button.icon.name}}</mat-icon>\n          {{vm.button.display ?? vm.button.name | titlecase}}\n        </button>\n      </ng-container>\n\n      <!-- Changed: Bottom close button now uses conditional display and custom text -->\n      <button *ngIf=\"shouldShowBottomClose()\" mat-stroked-button color=\"primary\" (click)=\"close()\">{{getCloseText()}}</button>\n\n    </div>\n\n    <div class=\"col d-flex justify-content-end\" *ngIf=\"smallScreen\">\n      <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Delete\" [disabled]=\"isProcessing || entityLoading\" style=\"color: red;\" (click)=\"delete()\" *ngIf=\"formConfig.mode!='create'  && deleteButton\"><mat-icon>delete</mat-icon></button>\n    </div>\n\n\n  </mat-dialog-actions>\n\n\n</div>\n\n\n\n\n\n\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#f5f5f5}tr.mat-mdc-row{transition:background-color .15s ease}tr.mat-mdc-row:hover{background-color:#2196f305}tr.mat-mdc-row.row-editing,tr.mat-mdc-row.row-editing:hover{background-color:#ffa00014}.inline-save{color:#2e7d32!important}.inline-cancel{color:#c62828!important}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.dialog-container{display:flex;flex-direction:column;height:100%;max-height:100%;min-height:0}.dialog-content{flex:1;overflow:hidden;display:flex;flex-direction:column;min-height:0}.dialog-scroll-content{flex:1;overflow-y:auto;max-height:none!important;display:flex;flex-direction:column;min-height:0}.dialog-container:not(.dialog-has-tables){height:auto}.dialog-container:not(.dialog-has-tables) .dialog-scroll-content{flex:1 1 auto}.dialog-scroll-content>.tin-input{flex:1;display:flex;flex-direction:column}.dialog-scroll-content>.tin-input>spa-tabs{flex:1;display:flex;flex-direction:column}mat-dialog-actions{flex-shrink:0;justify-content:flex-start}.paginator-hidden{display:none!important}.paged-filter-hint{display:flex;align-items:center;gap:8px;margin:4px 0 8px;padding:6px 12px;border-radius:4px;background-color:#fff8e1;color:#795548;font-size:13px}.paged-filter-hint mat-icon{font-size:18px;width:18px;height:18px;color:#ffa000}.dlg-header-classic{padding-left:24px;padding-right:24px}.dlg-title-classic{font-size:20px;font-weight:500;margin-top:10px;margin-bottom:5px}.dialog-header-titles{display:flex;flex-direction:column;justify-content:center;min-width:0}.tin-dlg-head .dialog-header-titles label{margin:0}.tbl-section-header{display:flex;align-items:center;gap:10px;padding:10px 12px;margin-bottom:8px;border:1px solid rgba(0,0,0,.08);border-radius:10px;background:transparent;cursor:pointer;transition:border-color .15s}.tbl-section-header:hover{border-color:#90a4ae}.tbl-section-header.tbl-section-static{cursor:default}.tbl-section-icon{color:#546e7a}.tbl-section-title{font-size:14px;font-weight:600;color:#000000d1}.tbl-section-count{background:#e3f2fd;color:#1565c0;border-radius:12px;padding:2px 10px;font-size:12px}.tbl-section-chip{font-size:12px;font-weight:500;color:#0009}.tbl-section-spacer{margin-left:auto}.tbl-section-chevron{color:#90a4ae}.tbl-section-caption{margin:-4px 12px 10px;font-size:12.5px;line-height:1.45;color:#0000008c;max-width:82ch}.tbl-section-more{padding:0 12px 8px}.tbl-section-link{background:none;border:none;color:#1565c0;cursor:pointer;font-size:13px;padding:0}.tbl-section-link:hover{text-decoration:underline}.tbl-section-icon,.tbl-section-chevron,.tbl-section-count{flex:0 0 auto}.tbl-section-title{flex:1 1 auto;min-width:0}@media (max-width: 700px){.tbl-section-header{gap:8px;padding:10px}.tbl-section-chip,.tbl-section-btn-text.has-icon{display:none}.tbl-section-header button{min-width:0;padding:0 10px}}table.tin-no-col-headers tr.mat-mdc-header-row{display:none}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: SelectComponent, selector: "spa-select", inputs: ["detailsConfig"] }, { kind: "component", type: StepsComponent, selector: "spa-steps", inputs: ["value", "config", "data", "activeIndex"] }, { kind: "component", type: FormComponent, selector: "spa-form", inputs: ["files", "data", "config"], outputs: ["buttonClick", "inputChange"] }, { kind: "component", type: FormSkeletonComponent, selector: "spa-form-skeleton", inputs: ["config"] }, { kind: "component", type: AlertComponent, selector: "spa-alert", inputs: ["config", "data"] }, { kind: "component", type: TabsComponent, selector: "spa-tabs", inputs: ["tableConfigs", "reload", "reloadTab", "parentDetails", "localMode", "nestingLevel"], outputs: ["formRefresh", "actionSuccess"] }, { kind: "component", type: StatusesComponent, selector: "spa-statuses", inputs: ["config", "data"] }, { kind: "pipe", type: i1$2.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: DetailsDialog, decorators: [{
             type: Component,
-            args: [{ selector: 'spa-detailsDialog', standalone: false, template: "<!-- Changed: dialog-has-tables mirrors the service's hasTables (tableConfigs?.length)\n     which decides height '90%' vs 'auto' \u2014 used to scope scroll behaviour per case -->\n<div class=\"dialog-container\" [class.dialog-has-tables]=\"detailsConfig.tableConfigs?.length > 0\">\n\n  <div class=\"dialog-content\">\n\n    <!-- Changed: was <mat-progress-bar mode=\"indeterminate\">, which looped at a constant speed forever and so\n         only ever said \"busy\". This is the same markup and the same PerceivedProgress curve the table stage\n         uses, so a dialog and the table behind it move identically. It tracks the FORM's record load \u2014 nested\n         tab tables run their own stages. Controlled by appConfig.quietLoading. -->\n    <div *ngIf=\"showProgressLine\" class=\"tin-load-line\" aria-hidden=\"true\">\n      <span class=\"tin-load-line-fill\" [style.width.%]=\"progressPercent\"></span>\n    </div>\n\n    <!-- Changed: the header's padding and the title's type were inline styles, which always beat a class and so\n         made a second presentation impossible. Moved into dlg-header-classic / dlg-title-classic, which restate\n         those exact values, so the default look is unchanged while `modern` can swap in the banded header. -->\n    <div class=\"d-flex justify-content-between align-items-center dialog-header\"\n         [class.mt-2]=\"!modern\" [class.dlg-header-classic]=\"!modern\" [class.tin-dlg-head]=\"modern\">\n\n      <div class=\"dialog-header-titles\">\n        <label [class.dlg-title-classic]=\"!modern\" [class.tin-dlg-title]=\"modern\">{{titleAction | titlecase}} {{formConfig?.title}}</label>\n      </div>\n\n      <div class=\"d-flex align-items-center\" style=\"gap: 8px;\">\n\n        <!-- Changed: Auto Refresh icon button \u2014 grey when off, green when on, with dynamic tooltip -->\n        <button *ngIf=\"detailsConfig.autoRefreshConfig\" mat-icon-button\n          [matTooltip]=\"autoRefreshEnabled ? 'Click to disable auto refresh' : 'Click to enable auto refresh'\" matTooltipPosition=\"above\"\n          [style.color]=\"autoRefreshEnabled ? '#4caf50' : '#9e9e9e'\"\n          (click)=\"autoRefreshEnabled = !autoRefreshEnabled; toggleAutoRefresh()\">\n          <mat-icon>autorenew</mat-icon>\n        </button>\n        <!-- Changed: Keep Open icon button \u2014 grey when off, green when on, with dynamic tooltip -->\n        <button *ngIf=\"detailsConfig.allowUserKeepOpen\" mat-icon-button\n          [matTooltip]=\"userKeepOpen ? 'Click to disable keep open' : 'Click to enable keep open'\" matTooltipPosition=\"above\"\n          [style.color]=\"userKeepOpen ? '#4caf50' : '#9e9e9e'\"\n          (click)=\"userKeepOpen = !userKeepOpen\">\n          <mat-icon>push_pin</mat-icon>\n        </button>\n\n        <!-- TS-16: bind precomputed editButtonVM instead of testVisible/testDisabled (which cloned objects) per CD -->\n        <div *ngIf=\"formConfig.mode=='view' && editButton && editButtonVM.visible\">\n          <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Edit\" color=\"primary\" (click)=\"setMode('edit')\" [disabled]=\"editButtonVM.disabled\"><mat-icon>edit</mat-icon></button>\n        </div>\n\n        <!-- Changed (Quiet Loading): every [disabled] below now ORs in entityLoading. A quiet read is silent, so it\n             never flips LoaderService.isLoading and isProcessing alone would leave these buttons live during the\n             load \u2014 a user could submit an empty form. With the flag off entityLoading simply tracks the same\n             window isProcessing already covered, so nothing changes. -->\n        <!-- Changed: the icon now spins while the form's record reloads, matching the table's refresh button.\n             Same .tin-spin class, so the two surfaces use one idiom rather than each inventing its own. -->\n        <button [disabled]=\"isProcessing || entityLoading\" *ngIf=\"loadByAction\" mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Refresh\" color=\"primary\" (click)=\"loadData(formConfig.loadAction, detailsConfig.causeTableRefresh)\"><mat-icon class=\"refreshIcon\" [class.tin-spin]=\"entityLoading\">cached</mat-icon></button>\n        \n        <!-- Added: Top close button when position is 'top' -->\n        <button *ngIf=\"shouldShowTopClose()\" [disabled]=\"isProcessing || entityLoading\" mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Close\" (click)=\"close()\"><mat-icon>close</mat-icon></button>\n\n      </div>\n\n    </div>\n\n    <div style=\"padding-left: 24px; padding-right: 24px;\">\n      <spa-steps *ngIf=\"stepConfig && details && stepConfig.sticky\" [config]=\"stepConfig\" [data]=\"details\"></spa-steps>\n      <spa-statuses *ngIf=\"statusConfig && details && statusConfig?.sticky\" [config]=\"statusConfig\" [data]=\"details\"></spa-statuses>\n      <spa-alert *ngIf=\"formConfig.alertConfig && formConfig.alertConfig?.sticky\" [config]=\"formConfig.alertConfig\" [data]=\"details\"></spa-alert>\n    </div>\n\n    <mat-dialog-content class=\"mat-typography dialog-scroll-content\">\n\n      <spa-steps *ngIf=\"stepConfig && details && !stepConfig.sticky\" [config]=\"stepConfig\" [data]=\"details\"></spa-steps>\n      <spa-statuses *ngIf=\"statusConfig && details && !statusConfig?.sticky\" [config]=\"statusConfig\" [data]=\"details\"></spa-statuses>\n      <spa-alert *ngIf=\"formConfig.alertConfig && !formConfig.alertConfig?.sticky\" [config]=\"formConfig.alertConfig\" [data]=\"details\"></spa-alert>\n\n      <div class=\"tin-input\" style=\"font-size:14px\">\n\n        <!-- Changed (Quiet Loading, FSD D6): with the flag OFF this is the original bare \"Loading...\" line, unchanged.\n             With it ON the text is replaced by a skeleton of the real form \u2014 and only once showSkeleton has been\n             armed past the 150ms anti-flicker delay, so a cached record renders straight into the form with no flash. -->\n        <p *ngIf=\"formConfig && !details && !effQuietLoading\"><em>Loading...</em></p>\n\n        <spa-form-skeleton *ngIf=\"formConfig && !details && effQuietLoading && showSkeleton\" [config]=\"formConfig\"></spa-form-skeleton>\n\n        <spa-form *ngIf=\"formConfig && details\" [files]=\"files\" [data]=\"details\" [config]=\"formConfig\" (inputChange)=\"inputChanged($event)\">\n          <ng-template #dynamicSelect let-field=\"field\" let-data=\"data\" let-testReadOnly=\"testReadOnly\" let-testRequired=\"testRequired\" let-selectChanged=\"selectChanged\" let-resolveLoadAction=\"resolveLoadAction\">\n            <spa-select\n              [display]=\"field.alias ?? field.name | camelToWords\"\n              [width]=\"field.width\"\n              [nullable]=\"field.nullable\"\n              [options]=\"field.options\"\n              [masterOptions]=\"field.masterOptions\"\n              [masterField]=\"field.masterField\"\n              [optionDisplay]=\"field.optionDisplay ?? 'name'\"\n              [optionValue]=\"field.optionValue ?? 'value'\"\n              [(value)]=\"data[field.name]\"\n              [defaultFirstValue]=\"field.defaultFirstValue\"\n              [required]=\"testRequired(field)\"\n              [readonly]=\"testReadOnly(field)\"\n              [hint]=\"field.hint\"\n              [detailsConfig]=\"field.detailsConfig\"\n              [loadAction]=\"resolveLoadAction ? resolveLoadAction(field) : field.loadAction\"\n              [loadIDField]=\"field.loadIDField\"\n              [field]=\"field\"\n              [data]=\"data\"\n              [infoMessage]=\"field.infoMessage\"\n              [copyContent]=\"field.copyContent\"\n              (valueChange)=\"selectChanged(field)\"\n            ></spa-select>\n          </ng-template>\n        </spa-form>\n\n        <!-- Changed: Use unified spa-tabs with nestingLevel control \u2014 tabs hidden when nestingLevel >= 2 -->\n        <spa-tabs\n          *ngIf=\"showTabs && tableConfigs && !(detailsConfig.hideTablesInCreateMode && formConfig?.mode === 'create')\"\n          [tableConfigs]=\"tableConfigs\"\n          [reload]=\"tableReload\"\n          [parentDetails]=\"details\"\n          [localMode]=\"formConfig?.mode === 'create'\"\n          [nestingLevel]=\"nestingLevel + 1\"\n          (formRefresh)=\"loadData(formConfig.loadAction, false)\"\n          (actionSuccess)=\"actionPerformed = true\">\n        </spa-tabs><!-- Changed: nested-tab table actions flag actionPerformed so refreshOnCloseIfActioned refreshes the parent on close -->\n\n      </div>\n\n    </mat-dialog-content>\n\n\n  </div>\n\n  <mat-dialog-actions >\n\n    <div>\n\n      <button mat-raised-button [disabled]=\"isProcessing || entityLoading\" *ngIf=\"formConfig.mode=='create' && createButton\" color=\"primary\"\n        (click)=\"create()\" cdkFocusInitial>{{createButton.display ?? 'Submit'}}\n      </button>\n\n      <button mat-raised-button [disabled]=\"isProcessing || entityLoading\" *ngIf=\"formConfig.mode=='edit' && editButton\" color=\"primary\"\n        (click)=\"edit()\" cdkFocusInitial>{{editButton.display ?? 'Submit'}}\n      </button>\n\n      <!-- TS-16: bind precomputed extraButtonVMs instead of testVisible/testDisabled/getButtonColor (each cloning objects) per CD -->\n      <ng-container *ngFor=\"let vm of extraButtonVMs\">\n        <button *ngIf=\"formConfig.mode !== 'create' && vm.visible\" mat-stroked-button [disabled]=\"isProcessing || entityLoading || vm.disabled\" [ngStyle]=\"{'color': vm.color}\" (click)=\"custom(vm.button)\" cdkFocusInitial>\n          <mat-icon *ngIf=\"vm.button.icon\" [ngStyle]=\"{'color': vm.color}\">{{vm.button.icon.name}}</mat-icon>\n          {{vm.button.display ?? vm.button.name | titlecase}}\n        </button>\n      </ng-container>\n\n      <!-- Changed: Bottom close button now uses conditional display and custom text -->\n      <button *ngIf=\"shouldShowBottomClose()\" mat-stroked-button color=\"primary\" (click)=\"close()\">{{getCloseText()}}</button>\n\n    </div>\n\n    <div class=\"col d-flex justify-content-end\" *ngIf=\"smallScreen\">\n      <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Delete\" [disabled]=\"isProcessing || entityLoading\" style=\"color: red;\" (click)=\"delete()\" *ngIf=\"formConfig.mode!='create'  && deleteButton\"><mat-icon>delete</mat-icon></button>\n    </div>\n\n\n  </mat-dialog-actions>\n\n\n</div>\n\n\n\n\n\n\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#f5f5f5}tr.mat-mdc-row{transition:background-color .15s ease}tr.mat-mdc-row:hover{background-color:#2196f305}tr.mat-mdc-row.row-editing,tr.mat-mdc-row.row-editing:hover{background-color:#ffa00014}.inline-save{color:#2e7d32!important}.inline-cancel{color:#c62828!important}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.dialog-container{display:flex;flex-direction:column;height:100%;max-height:100%;min-height:0}.dialog-content{flex:1;overflow:hidden;display:flex;flex-direction:column;min-height:0}.dialog-scroll-content{flex:1;overflow-y:auto;max-height:none!important;display:flex;flex-direction:column;min-height:0}.dialog-container:not(.dialog-has-tables){height:auto}.dialog-container:not(.dialog-has-tables) .dialog-scroll-content{flex:1 1 auto}.dialog-scroll-content>.tin-input{flex:1;display:flex;flex-direction:column}.dialog-scroll-content>.tin-input>spa-tabs{flex:1;display:flex;flex-direction:column}mat-dialog-actions{flex-shrink:0;justify-content:flex-start}.paginator-hidden{display:none!important}.paged-filter-hint{display:flex;align-items:center;gap:8px;margin:4px 0 8px;padding:6px 12px;border-radius:4px;background-color:#fff8e1;color:#795548;font-size:13px}.paged-filter-hint mat-icon{font-size:18px;width:18px;height:18px;color:#ffa000}.dlg-header-classic{padding-left:24px;padding-right:24px}.dlg-title-classic{font-size:20px;font-weight:500;margin-top:10px;margin-bottom:5px}.dialog-header-titles{display:flex;flex-direction:column;justify-content:center;min-width:0}.tin-dlg-head .dialog-header-titles label{margin:0}.tbl-section-header{display:flex;align-items:center;gap:10px;padding:10px 12px;margin-bottom:8px;border:1px solid rgba(0,0,0,.08);border-radius:10px;background:transparent;cursor:pointer;transition:border-color .15s}.tbl-section-header:hover{border-color:#90a4ae}.tbl-section-header.tbl-section-static{cursor:default}.tbl-section-icon{color:#546e7a}.tbl-section-title{font-size:14px;font-weight:600;color:#000000d1}.tbl-section-count{background:#e3f2fd;color:#1565c0;border-radius:12px;padding:2px 10px;font-size:12px}.tbl-section-chip{font-size:12px;font-weight:500;color:#0009}.tbl-section-spacer{margin-left:auto}.tbl-section-chevron{color:#90a4ae}.tbl-section-caption{margin:-4px 12px 10px;font-size:12.5px;line-height:1.45;color:#0000008c;max-width:82ch}.tbl-section-more{padding:0 12px 8px}.tbl-section-link{background:none;border:none;color:#1565c0;cursor:pointer;font-size:13px;padding:0}.tbl-section-link:hover{text-decoration:underline}table.tin-no-col-headers tr.mat-mdc-header-row{display:none}\n"] }]
+            args: [{ selector: 'spa-detailsDialog', standalone: false, template: "<!-- Changed: dialog-has-tables mirrors the service's hasTables (tableConfigs?.length)\n     which decides height '90%' vs 'auto' \u2014 used to scope scroll behaviour per case -->\n<div class=\"dialog-container\" [class.dialog-has-tables]=\"detailsConfig.tableConfigs?.length > 0\">\n\n  <div class=\"dialog-content\">\n\n    <!-- Changed: was <mat-progress-bar mode=\"indeterminate\">, which looped at a constant speed forever and so\n         only ever said \"busy\". This is the same markup and the same PerceivedProgress curve the table stage\n         uses, so a dialog and the table behind it move identically. It tracks the FORM's record load \u2014 nested\n         tab tables run their own stages. Controlled by appConfig.quietLoading. -->\n    <div *ngIf=\"showProgressLine\" class=\"tin-load-line\" aria-hidden=\"true\">\n      <span class=\"tin-load-line-fill\" [style.width.%]=\"progressPercent\"></span>\n    </div>\n\n    <!-- Changed: the header's padding and the title's type were inline styles, which always beat a class and so\n         made a second presentation impossible. Moved into dlg-header-classic / dlg-title-classic, which restate\n         those exact values, so the default look is unchanged while `modern` can swap in the banded header. -->\n    <div class=\"d-flex justify-content-between align-items-center dialog-header\"\n         [class.mt-2]=\"!modern\" [class.dlg-header-classic]=\"!modern\" [class.tin-dlg-head]=\"modern\">\n\n      <div class=\"dialog-header-titles\">\n        <label [class.dlg-title-classic]=\"!modern\" [class.tin-dlg-title]=\"modern\">{{titleAction | titlecase}} {{formConfig?.title}}</label>\n      </div>\n\n      <div class=\"d-flex align-items-center\" style=\"gap: 8px;\">\n\n        <!-- Changed: Auto Refresh icon button \u2014 grey when off, green when on, with dynamic tooltip -->\n        <button *ngIf=\"detailsConfig.autoRefreshConfig\" mat-icon-button\n          [matTooltip]=\"autoRefreshEnabled ? 'Click to disable auto refresh' : 'Click to enable auto refresh'\" matTooltipPosition=\"above\"\n          [style.color]=\"autoRefreshEnabled ? '#4caf50' : '#9e9e9e'\"\n          (click)=\"autoRefreshEnabled = !autoRefreshEnabled; toggleAutoRefresh()\">\n          <mat-icon>autorenew</mat-icon>\n        </button>\n        <!-- Changed: Keep Open icon button \u2014 grey when off, green when on, with dynamic tooltip -->\n        <button *ngIf=\"detailsConfig.allowUserKeepOpen\" mat-icon-button\n          [matTooltip]=\"userKeepOpen ? 'Click to disable keep open' : 'Click to enable keep open'\" matTooltipPosition=\"above\"\n          [style.color]=\"userKeepOpen ? '#4caf50' : '#9e9e9e'\"\n          (click)=\"userKeepOpen = !userKeepOpen\">\n          <mat-icon>push_pin</mat-icon>\n        </button>\n\n        <!-- TS-16: bind precomputed editButtonVM instead of testVisible/testDisabled (which cloned objects) per CD -->\n        <div *ngIf=\"formConfig.mode=='view' && editButton && editButtonVM.visible\">\n          <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Edit\" color=\"primary\" (click)=\"setMode('edit')\" [disabled]=\"editButtonVM.disabled\"><mat-icon>edit</mat-icon></button>\n        </div>\n\n        <!-- Changed (Quiet Loading): every [disabled] below now ORs in entityLoading. A quiet read is silent, so it\n             never flips LoaderService.isLoading and isProcessing alone would leave these buttons live during the\n             load \u2014 a user could submit an empty form. With the flag off entityLoading simply tracks the same\n             window isProcessing already covered, so nothing changes. -->\n        <!-- Changed: the icon now spins while the form's record reloads, matching the table's refresh button.\n             Same .tin-spin class, so the two surfaces use one idiom rather than each inventing its own. -->\n        <button [disabled]=\"isProcessing || entityLoading\" *ngIf=\"loadByAction\" mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Refresh\" color=\"primary\" (click)=\"loadData(formConfig.loadAction, detailsConfig.causeTableRefresh)\"><mat-icon class=\"refreshIcon\" [class.tin-spin]=\"entityLoading\">cached</mat-icon></button>\n        \n        <!-- Added: Top close button when position is 'top' -->\n        <button *ngIf=\"shouldShowTopClose()\" [disabled]=\"isProcessing || entityLoading\" mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Close\" (click)=\"close()\"><mat-icon>close</mat-icon></button>\n\n      </div>\n\n    </div>\n\n    <div style=\"padding-left: 24px; padding-right: 24px;\">\n      <spa-steps *ngIf=\"stepConfig && details && stepConfig.sticky\" [config]=\"stepConfig\" [data]=\"details\"></spa-steps>\n      <spa-statuses *ngIf=\"statusConfig && details && statusConfig?.sticky\" [config]=\"statusConfig\" [data]=\"details\"></spa-statuses>\n      <spa-alert *ngIf=\"formConfig.alertConfig && formConfig.alertConfig?.sticky\" [config]=\"formConfig.alertConfig\" [data]=\"details\"></spa-alert>\n    </div>\n\n    <mat-dialog-content class=\"mat-typography dialog-scroll-content\">\n\n      <spa-steps *ngIf=\"stepConfig && details && !stepConfig.sticky\" [config]=\"stepConfig\" [data]=\"details\"></spa-steps>\n      <spa-statuses *ngIf=\"statusConfig && details && !statusConfig?.sticky\" [config]=\"statusConfig\" [data]=\"details\"></spa-statuses>\n      <spa-alert *ngIf=\"formConfig.alertConfig && !formConfig.alertConfig?.sticky\" [config]=\"formConfig.alertConfig\" [data]=\"details\"></spa-alert>\n\n      <div class=\"tin-input\" style=\"font-size:14px\">\n\n        <!-- Changed (Quiet Loading, FSD D6): with the flag OFF this is the original bare \"Loading...\" line, unchanged.\n             With it ON the text is replaced by a skeleton of the real form \u2014 and only once showSkeleton has been\n             armed past the 150ms anti-flicker delay, so a cached record renders straight into the form with no flash. -->\n        <p *ngIf=\"formConfig && !details && !effQuietLoading\"><em>Loading...</em></p>\n\n        <spa-form-skeleton *ngIf=\"formConfig && !details && effQuietLoading && showSkeleton\" [config]=\"formConfig\"></spa-form-skeleton>\n\n        <spa-form *ngIf=\"formConfig && details\" [files]=\"files\" [data]=\"details\" [config]=\"formConfig\" (inputChange)=\"inputChanged($event)\">\n          <ng-template #dynamicSelect let-field=\"field\" let-data=\"data\" let-testReadOnly=\"testReadOnly\" let-testRequired=\"testRequired\" let-selectChanged=\"selectChanged\" let-resolveLoadAction=\"resolveLoadAction\">\n            <spa-select\n              [display]=\"field.alias ?? field.name | camelToWords\"\n              [width]=\"field.width\"\n              [nullable]=\"field.nullable\"\n              [options]=\"field.options\"\n              [masterOptions]=\"field.masterOptions\"\n              [masterField]=\"field.masterField\"\n              [optionDisplay]=\"field.optionDisplay ?? 'name'\"\n              [optionValue]=\"field.optionValue ?? 'value'\"\n              [(value)]=\"data[field.name]\"\n              [defaultFirstValue]=\"field.defaultFirstValue\"\n              [required]=\"testRequired(field)\"\n              [readonly]=\"testReadOnly(field)\"\n              [hint]=\"field.hint\"\n              [detailsConfig]=\"field.detailsConfig\"\n              [loadAction]=\"resolveLoadAction ? resolveLoadAction(field) : field.loadAction\"\n              [loadIDField]=\"field.loadIDField\"\n              [field]=\"field\"\n              [data]=\"data\"\n              [infoMessage]=\"field.infoMessage\"\n              [copyContent]=\"field.copyContent\"\n              (valueChange)=\"selectChanged(field)\"\n            ></spa-select>\n          </ng-template>\n        </spa-form>\n\n        <!-- Changed: Use unified spa-tabs with nestingLevel control \u2014 tabs hidden when nestingLevel >= 2 -->\n        <spa-tabs\n          *ngIf=\"showTabs && tableConfigs && !(detailsConfig.hideTablesInCreateMode && formConfig?.mode === 'create')\"\n          [tableConfigs]=\"tableConfigs\"\n          [reload]=\"tableReload\"\n          [parentDetails]=\"details\"\n          [localMode]=\"formConfig?.mode === 'create'\"\n          [nestingLevel]=\"nestingLevel + 1\"\n          (formRefresh)=\"loadData(formConfig.loadAction, false)\"\n          (actionSuccess)=\"actionPerformed = true\">\n        </spa-tabs><!-- Changed: nested-tab table actions flag actionPerformed so refreshOnCloseIfActioned refreshes the parent on close -->\n\n      </div>\n\n    </mat-dialog-content>\n\n\n  </div>\n\n  <mat-dialog-actions >\n\n    <div>\n\n      <button mat-raised-button [disabled]=\"isProcessing || entityLoading\" *ngIf=\"formConfig.mode=='create' && createButton\" color=\"primary\"\n        (click)=\"create()\" cdkFocusInitial>{{createButton.display ?? 'Submit'}}\n      </button>\n\n      <button mat-raised-button [disabled]=\"isProcessing || entityLoading\" *ngIf=\"formConfig.mode=='edit' && editButton\" color=\"primary\"\n        (click)=\"edit()\" cdkFocusInitial>{{editButton.display ?? 'Submit'}}\n      </button>\n\n      <!-- TS-16: bind precomputed extraButtonVMs instead of testVisible/testDisabled/getButtonColor (each cloning objects) per CD -->\n      <ng-container *ngFor=\"let vm of extraButtonVMs\">\n        <button *ngIf=\"formConfig.mode !== 'create' && vm.visible\" mat-stroked-button [disabled]=\"isProcessing || entityLoading || vm.disabled\" [ngStyle]=\"{'color': vm.color}\" (click)=\"custom(vm.button)\" cdkFocusInitial>\n          <mat-icon *ngIf=\"vm.button.icon\" [ngStyle]=\"{'color': vm.color}\">{{vm.button.icon.name}}</mat-icon>\n          {{vm.button.display ?? vm.button.name | titlecase}}\n        </button>\n      </ng-container>\n\n      <!-- Changed: Bottom close button now uses conditional display and custom text -->\n      <button *ngIf=\"shouldShowBottomClose()\" mat-stroked-button color=\"primary\" (click)=\"close()\">{{getCloseText()}}</button>\n\n    </div>\n\n    <div class=\"col d-flex justify-content-end\" *ngIf=\"smallScreen\">\n      <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Delete\" [disabled]=\"isProcessing || entityLoading\" style=\"color: red;\" (click)=\"delete()\" *ngIf=\"formConfig.mode!='create'  && deleteButton\"><mat-icon>delete</mat-icon></button>\n    </div>\n\n\n  </mat-dialog-actions>\n\n\n</div>\n\n\n\n\n\n\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#f5f5f5}tr.mat-mdc-row{transition:background-color .15s ease}tr.mat-mdc-row:hover{background-color:#2196f305}tr.mat-mdc-row.row-editing,tr.mat-mdc-row.row-editing:hover{background-color:#ffa00014}.inline-save{color:#2e7d32!important}.inline-cancel{color:#c62828!important}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.dialog-container{display:flex;flex-direction:column;height:100%;max-height:100%;min-height:0}.dialog-content{flex:1;overflow:hidden;display:flex;flex-direction:column;min-height:0}.dialog-scroll-content{flex:1;overflow-y:auto;max-height:none!important;display:flex;flex-direction:column;min-height:0}.dialog-container:not(.dialog-has-tables){height:auto}.dialog-container:not(.dialog-has-tables) .dialog-scroll-content{flex:1 1 auto}.dialog-scroll-content>.tin-input{flex:1;display:flex;flex-direction:column}.dialog-scroll-content>.tin-input>spa-tabs{flex:1;display:flex;flex-direction:column}mat-dialog-actions{flex-shrink:0;justify-content:flex-start}.paginator-hidden{display:none!important}.paged-filter-hint{display:flex;align-items:center;gap:8px;margin:4px 0 8px;padding:6px 12px;border-radius:4px;background-color:#fff8e1;color:#795548;font-size:13px}.paged-filter-hint mat-icon{font-size:18px;width:18px;height:18px;color:#ffa000}.dlg-header-classic{padding-left:24px;padding-right:24px}.dlg-title-classic{font-size:20px;font-weight:500;margin-top:10px;margin-bottom:5px}.dialog-header-titles{display:flex;flex-direction:column;justify-content:center;min-width:0}.tin-dlg-head .dialog-header-titles label{margin:0}.tbl-section-header{display:flex;align-items:center;gap:10px;padding:10px 12px;margin-bottom:8px;border:1px solid rgba(0,0,0,.08);border-radius:10px;background:transparent;cursor:pointer;transition:border-color .15s}.tbl-section-header:hover{border-color:#90a4ae}.tbl-section-header.tbl-section-static{cursor:default}.tbl-section-icon{color:#546e7a}.tbl-section-title{font-size:14px;font-weight:600;color:#000000d1}.tbl-section-count{background:#e3f2fd;color:#1565c0;border-radius:12px;padding:2px 10px;font-size:12px}.tbl-section-chip{font-size:12px;font-weight:500;color:#0009}.tbl-section-spacer{margin-left:auto}.tbl-section-chevron{color:#90a4ae}.tbl-section-caption{margin:-4px 12px 10px;font-size:12.5px;line-height:1.45;color:#0000008c;max-width:82ch}.tbl-section-more{padding:0 12px 8px}.tbl-section-link{background:none;border:none;color:#1565c0;cursor:pointer;font-size:13px;padding:0}.tbl-section-link:hover{text-decoration:underline}.tbl-section-icon,.tbl-section-chevron,.tbl-section-count{flex:0 0 auto}.tbl-section-title{flex:1 1 auto;min-width:0}@media (max-width: 700px){.tbl-section-header{gap:8px;padding:10px}.tbl-section-chip,.tbl-section-btn-text.has-icon{display:none}.tbl-section-header button{min-width:0;padding:0 10px}}table.tin-no-col-headers tr.mat-mdc-header-row{display:none}\n"] }]
         }], ctorParameters: () => [{ type: i1$4.BreakpointObserver }, { type: LoaderService }, { type: DataServiceLib }, { type: MessageService }, { type: i4.MatDialogRef }, { type: DetailsDialogConfig, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]