tin-spa 20.14.19 → 20.14.21

package/fesm2022/tin-spa.mjs

@@ -11373,11 +11373,11 @@ class ChecklistComponent {
         return act.disabled ? act.disabled(item) : false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ChecklistComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: ChecklistComponent, isStandalone: false, selector: "spa-checklist", inputs: { config: "config", itemTemplate: "itemTemplate" }, usesOnChanges: true, ngImport: i0, template: "<!-- Added: flat bordered checklist items \u2014 lie directly on the host card, border-only highlighting -->\n<div class=\"cl-list\" *ngIf=\"config\">\n  <div class=\"cl-item\" *ngFor=\"let item of items\" [class.expanded]=\"isExpanded(item)\" [class.complete]=\"item.complete\">\n    <button type=\"button\" class=\"cl-head\" (click)=\"toggle(item)\" [attr.aria-expanded]=\"isExpanded(item)\">\n      <mat-icon class=\"cl-state\" [class.done]=\"item.complete\" [class.required]=\"!item.complete && !item.optional\">{{ item.complete ? 'check_circle' : 'radio_button_unchecked' }}</mat-icon>\n      <span class=\"cl-title\" [class.done]=\"item.complete\">{{ item.title }}</span>\n      <span class=\"cl-meta\">\n        <span class=\"cl-pill\" *ngIf=\"item.progressText\">{{ item.progressText }}</span>\n        <span class=\"cl-optional\" *ngIf=\"item.optional && !item.complete\">Optional</span>\n        <mat-icon class=\"cl-chevron\">expand_more</mat-icon>\n      </span>\n    </button>\n    <div class=\"cl-body\">\n      <div class=\"cl-body-inner\">\n        <p class=\"cl-description\" *ngIf=\"item.description\">{{ item.description }}</p>\n        <ng-container *ngIf=\"template\" [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n        <div class=\"cl-actions\" *ngIf=\"item.actions?.length\">\n          <ng-container *ngFor=\"let act of item.actions\">\n            <button mat-flat-button color=\"primary\" *ngIf=\"act.primary\" [disabled]=\"isDisabled(act, item)\" (click)=\"act.onClick(item)\"><mat-icon *ngIf=\"act.icon\">{{ act.icon }}</mat-icon>{{ act.display }}</button>\n            <button mat-stroked-button color=\"primary\" *ngIf=\"!act.primary && act.type === 'import'\" [disabled]=\"isDisabled(act, item)\" (click)=\"act.onClick(item)\"><mat-icon>{{ act.icon || 'upload_file' }}</mat-icon>{{ act.display || 'Import from Excel' }}</button>\n            <button mat-stroked-button color=\"primary\" *ngIf=\"!act.primary && act.type !== 'import'\" [disabled]=\"isDisabled(act, item)\" (click)=\"act.onClick(item)\">{{ act.display || 'Go to page' }}</button> <!-- Changed: outlined per user preference \u2014 consistent with the import button -->\n          </ng-container>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".cl-list{display:flex;flex-direction:column;gap:8px}.cl-item{border:1px solid rgba(0,0,0,.08);border-radius:10px;background:transparent;transition:border-color .15s}.cl-item:hover{border-color:#90a4ae}.cl-item.expanded{border-color:#00000029}.cl-item.complete{opacity:.72}.cl-head{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;background:none;border:none;cursor:pointer;text-align:left;font:inherit;border-radius:10px}.cl-state{color:#9e9e9e;flex-shrink:0}.cl-state.done{color:#4caf50}.cl-state.required{color:#ff9800}.cl-title{font-size:14px;font-weight:500;color:#000000d1}.cl-title.done{color:#00000073;text-decoration:line-through}.cl-meta{display:inline-flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0}.cl-pill{background:#e3f2fd;color:#1565c0;border-radius:12px;padding:2px 10px;font-size:12px}.cl-optional{font-size:12px;color:#00000073;font-style:italic}.cl-chevron{color:#90a4ae;transition:transform .15s ease}.cl-item.expanded .cl-chevron{transform:rotate(180deg)}.cl-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .15s ease}.cl-item.expanded .cl-body{grid-template-rows:1fr}.cl-body-inner{overflow:hidden;visibility:hidden;transition:visibility .15s;padding:0 12px 0 46px}.cl-item.expanded .cl-body-inner{visibility:visible;padding-bottom:12px}.cl-description{margin:0 0 10px;font-size:13px;line-height:1.5;color:#616161;max-width:65ch}.cl-actions{display:flex;flex-wrap:wrap;gap:8px}.cl-actions button mat-icon{margin-right:6px}@media (prefers-reduced-motion: reduce){.cl-body,.cl-body-inner,.cl-chevron{transition: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: "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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: ChecklistComponent, isStandalone: false, selector: "spa-checklist", inputs: { config: "config", itemTemplate: "itemTemplate" }, usesOnChanges: true, ngImport: i0, template: "<!-- Added: flat bordered checklist items \u2014 lie directly on the host card, border-only highlighting -->\n<div class=\"cl-list\" *ngIf=\"config\">\n  <div class=\"cl-item\" *ngFor=\"let item of items\" [class.expanded]=\"isExpanded(item)\" [class.complete]=\"item.complete\">\n    <button type=\"button\" class=\"cl-head\" (click)=\"toggle(item)\" [attr.aria-expanded]=\"isExpanded(item)\">\n      <mat-icon class=\"cl-state\" [class.done]=\"item.complete\" [class.required]=\"!item.complete && !item.optional\">{{ item.complete ? 'check_circle' : 'radio_button_unchecked' }}</mat-icon>\n      <span class=\"cl-title\" [class.done]=\"item.complete\">{{ item.title }}</span>\n      <span class=\"cl-meta\">\n        <span class=\"cl-pill\" *ngIf=\"item.progressText\">{{ item.progressText }}</span>\n        <span class=\"cl-optional\" *ngIf=\"item.optional && !item.complete\">Optional</span>\n        <mat-icon class=\"cl-chevron\">expand_more</mat-icon>\n      </span>\n    </button>\n    <div class=\"cl-body\">\n      <div class=\"cl-body-inner\">\n        <p class=\"cl-description\" *ngIf=\"item.description\">{{ item.description }}</p>\n        <ng-container *ngIf=\"template\" [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n        <div class=\"cl-actions\" *ngIf=\"item.actions?.length\">\n          <ng-container *ngFor=\"let act of item.actions\">\n            <button mat-flat-button color=\"primary\" *ngIf=\"act.primary\" [disabled]=\"isDisabled(act, item)\" (click)=\"act.onClick(item)\"><mat-icon *ngIf=\"act.icon\">{{ act.icon }}</mat-icon>{{ act.display }}</button>\n            <span class=\"cl-break\" *ngIf=\"act.primary && (item.actions?.length || 0) > 1\"></span> <!-- Added: zero-height flex break \u2014 on a phone the primary keeps its own line and the escapes sit under it (no-op above 700px) -->\n            <button mat-stroked-button color=\"primary\" class=\"cl-secondary\" *ngIf=\"!act.primary && act.type === 'import'\" [disabled]=\"isDisabled(act, item)\" (click)=\"act.onClick(item)\"><mat-icon>{{ act.icon || 'upload_file' }}</mat-icon>{{ act.display || 'Import from Excel' }}</button> <!-- Changed: cl-secondary \u2014 demoted to a quiet tonal chip on phones -->\n            <button mat-stroked-button color=\"primary\" class=\"cl-secondary\" *ngIf=\"!act.primary && act.type !== 'import'\" [disabled]=\"isDisabled(act, item)\" (click)=\"act.onClick(item)\">{{ act.display || 'Go to page' }}</button> <!-- Changed: outlined per user preference \u2014 consistent with the import button; cl-secondary demotes it on phones -->\n          </ng-container>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".cl-list{display:flex;flex-direction:column;gap:8px}.cl-item{border:1px solid rgba(0,0,0,.08);border-radius:10px;background:transparent;transition:border-color .15s}.cl-item:hover{border-color:#90a4ae}.cl-item.expanded{border-color:#00000029}.cl-item.complete{opacity:.72}.cl-head{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;background:none;border:none;cursor:pointer;text-align:left;font:inherit;border-radius:10px}.cl-state{color:#9e9e9e;flex-shrink:0}.cl-state.done{color:#4caf50}.cl-state.required{color:#ff9800}.cl-title{font-size:14px;font-weight:500;color:#000000d1}.cl-title.done{color:#00000073;text-decoration:line-through}.cl-meta{display:inline-flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0}.cl-pill{background:#e3f2fd;color:#1565c0;border-radius:12px;padding:2px 10px;font-size:12px}.cl-optional{font-size:12px;color:#00000073;font-style:italic}.cl-chevron{color:#90a4ae;transition:transform .15s ease}.cl-item.expanded .cl-chevron{transform:rotate(180deg)}.cl-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .15s ease}.cl-item.expanded .cl-body{grid-template-rows:1fr}.cl-body-inner{overflow:hidden;visibility:hidden;transition:visibility .15s;padding:0 12px 0 46px}.cl-item.expanded .cl-body-inner{visibility:visible;padding-bottom:12px}.cl-description{margin:0 0 10px;font-size:13px;line-height:1.5;color:#616161;max-width:65ch}.cl-actions{display:flex;flex-wrap:wrap;gap:8px}.cl-actions button mat-icon{margin-right:6px}.cl-break{display:none}@media (prefers-reduced-motion: reduce){.cl-body,.cl-body-inner,.cl-chevron{transition:none}}@media (max-width: 700px){.cl-body-inner{padding-left:16px}.cl-actions{gap:8px 6px;align-items:center}.cl-break{display:block;flex:0 0 100%;height:0}.cl-secondary{--mdc-outlined-button-outline-color: transparent;border-color:transparent;background:#0000000b;min-width:0;padding:0 12px;font-size:13px}.cl-secondary:hover,.cl-secondary:active{background:#00000014}.cl-actions .cl-secondary mat-icon{font-size:18px;width:18px;height:18px;margin-right:4px}}\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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ChecklistComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spa-checklist', standalone: false, template: "<!-- Added: flat bordered checklist items \u2014 lie directly on the host card, border-only highlighting -->\n<div class=\"cl-list\" *ngIf=\"config\">\n  <div class=\"cl-item\" *ngFor=\"let item of items\" [class.expanded]=\"isExpanded(item)\" [class.complete]=\"item.complete\">\n    <button type=\"button\" class=\"cl-head\" (click)=\"toggle(item)\" [attr.aria-expanded]=\"isExpanded(item)\">\n      <mat-icon class=\"cl-state\" [class.done]=\"item.complete\" [class.required]=\"!item.complete && !item.optional\">{{ item.complete ? 'check_circle' : 'radio_button_unchecked' }}</mat-icon>\n      <span class=\"cl-title\" [class.done]=\"item.complete\">{{ item.title }}</span>\n      <span class=\"cl-meta\">\n        <span class=\"cl-pill\" *ngIf=\"item.progressText\">{{ item.progressText }}</span>\n        <span class=\"cl-optional\" *ngIf=\"item.optional && !item.complete\">Optional</span>\n        <mat-icon class=\"cl-chevron\">expand_more</mat-icon>\n      </span>\n    </button>\n    <div class=\"cl-body\">\n      <div class=\"cl-body-inner\">\n        <p class=\"cl-description\" *ngIf=\"item.description\">{{ item.description }}</p>\n        <ng-container *ngIf=\"template\" [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n        <div class=\"cl-actions\" *ngIf=\"item.actions?.length\">\n          <ng-container *ngFor=\"let act of item.actions\">\n            <button mat-flat-button color=\"primary\" *ngIf=\"act.primary\" [disabled]=\"isDisabled(act, item)\" (click)=\"act.onClick(item)\"><mat-icon *ngIf=\"act.icon\">{{ act.icon }}</mat-icon>{{ act.display }}</button>\n            <button mat-stroked-button color=\"primary\" *ngIf=\"!act.primary && act.type === 'import'\" [disabled]=\"isDisabled(act, item)\" (click)=\"act.onClick(item)\"><mat-icon>{{ act.icon || 'upload_file' }}</mat-icon>{{ act.display || 'Import from Excel' }}</button>\n            <button mat-stroked-button color=\"primary\" *ngIf=\"!act.primary && act.type !== 'import'\" [disabled]=\"isDisabled(act, item)\" (click)=\"act.onClick(item)\">{{ act.display || 'Go to page' }}</button> <!-- Changed: outlined per user preference \u2014 consistent with the import button -->\n          </ng-container>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".cl-list{display:flex;flex-direction:column;gap:8px}.cl-item{border:1px solid rgba(0,0,0,.08);border-radius:10px;background:transparent;transition:border-color .15s}.cl-item:hover{border-color:#90a4ae}.cl-item.expanded{border-color:#00000029}.cl-item.complete{opacity:.72}.cl-head{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;background:none;border:none;cursor:pointer;text-align:left;font:inherit;border-radius:10px}.cl-state{color:#9e9e9e;flex-shrink:0}.cl-state.done{color:#4caf50}.cl-state.required{color:#ff9800}.cl-title{font-size:14px;font-weight:500;color:#000000d1}.cl-title.done{color:#00000073;text-decoration:line-through}.cl-meta{display:inline-flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0}.cl-pill{background:#e3f2fd;color:#1565c0;border-radius:12px;padding:2px 10px;font-size:12px}.cl-optional{font-size:12px;color:#00000073;font-style:italic}.cl-chevron{color:#90a4ae;transition:transform .15s ease}.cl-item.expanded .cl-chevron{transform:rotate(180deg)}.cl-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .15s ease}.cl-item.expanded .cl-body{grid-template-rows:1fr}.cl-body-inner{overflow:hidden;visibility:hidden;transition:visibility .15s;padding:0 12px 0 46px}.cl-item.expanded .cl-body-inner{visibility:visible;padding-bottom:12px}.cl-description{margin:0 0 10px;font-size:13px;line-height:1.5;color:#616161;max-width:65ch}.cl-actions{display:flex;flex-wrap:wrap;gap:8px}.cl-actions button mat-icon{margin-right:6px}@media (prefers-reduced-motion: reduce){.cl-body,.cl-body-inner,.cl-chevron{transition:none}}\n"] }]
+            args: [{ selector: 'spa-checklist', standalone: false, template: "<!-- Added: flat bordered checklist items \u2014 lie directly on the host card, border-only highlighting -->\n<div class=\"cl-list\" *ngIf=\"config\">\n  <div class=\"cl-item\" *ngFor=\"let item of items\" [class.expanded]=\"isExpanded(item)\" [class.complete]=\"item.complete\">\n    <button type=\"button\" class=\"cl-head\" (click)=\"toggle(item)\" [attr.aria-expanded]=\"isExpanded(item)\">\n      <mat-icon class=\"cl-state\" [class.done]=\"item.complete\" [class.required]=\"!item.complete && !item.optional\">{{ item.complete ? 'check_circle' : 'radio_button_unchecked' }}</mat-icon>\n      <span class=\"cl-title\" [class.done]=\"item.complete\">{{ item.title }}</span>\n      <span class=\"cl-meta\">\n        <span class=\"cl-pill\" *ngIf=\"item.progressText\">{{ item.progressText }}</span>\n        <span class=\"cl-optional\" *ngIf=\"item.optional && !item.complete\">Optional</span>\n        <mat-icon class=\"cl-chevron\">expand_more</mat-icon>\n      </span>\n    </button>\n    <div class=\"cl-body\">\n      <div class=\"cl-body-inner\">\n        <p class=\"cl-description\" *ngIf=\"item.description\">{{ item.description }}</p>\n        <ng-container *ngIf=\"template\" [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n        <div class=\"cl-actions\" *ngIf=\"item.actions?.length\">\n          <ng-container *ngFor=\"let act of item.actions\">\n            <button mat-flat-button color=\"primary\" *ngIf=\"act.primary\" [disabled]=\"isDisabled(act, item)\" (click)=\"act.onClick(item)\"><mat-icon *ngIf=\"act.icon\">{{ act.icon }}</mat-icon>{{ act.display }}</button>\n            <span class=\"cl-break\" *ngIf=\"act.primary && (item.actions?.length || 0) > 1\"></span> <!-- Added: zero-height flex break \u2014 on a phone the primary keeps its own line and the escapes sit under it (no-op above 700px) -->\n            <button mat-stroked-button color=\"primary\" class=\"cl-secondary\" *ngIf=\"!act.primary && act.type === 'import'\" [disabled]=\"isDisabled(act, item)\" (click)=\"act.onClick(item)\"><mat-icon>{{ act.icon || 'upload_file' }}</mat-icon>{{ act.display || 'Import from Excel' }}</button> <!-- Changed: cl-secondary \u2014 demoted to a quiet tonal chip on phones -->\n            <button mat-stroked-button color=\"primary\" class=\"cl-secondary\" *ngIf=\"!act.primary && act.type !== 'import'\" [disabled]=\"isDisabled(act, item)\" (click)=\"act.onClick(item)\">{{ act.display || 'Go to page' }}</button> <!-- Changed: outlined per user preference \u2014 consistent with the import button; cl-secondary demotes it on phones -->\n          </ng-container>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".cl-list{display:flex;flex-direction:column;gap:8px}.cl-item{border:1px solid rgba(0,0,0,.08);border-radius:10px;background:transparent;transition:border-color .15s}.cl-item:hover{border-color:#90a4ae}.cl-item.expanded{border-color:#00000029}.cl-item.complete{opacity:.72}.cl-head{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;background:none;border:none;cursor:pointer;text-align:left;font:inherit;border-radius:10px}.cl-state{color:#9e9e9e;flex-shrink:0}.cl-state.done{color:#4caf50}.cl-state.required{color:#ff9800}.cl-title{font-size:14px;font-weight:500;color:#000000d1}.cl-title.done{color:#00000073;text-decoration:line-through}.cl-meta{display:inline-flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0}.cl-pill{background:#e3f2fd;color:#1565c0;border-radius:12px;padding:2px 10px;font-size:12px}.cl-optional{font-size:12px;color:#00000073;font-style:italic}.cl-chevron{color:#90a4ae;transition:transform .15s ease}.cl-item.expanded .cl-chevron{transform:rotate(180deg)}.cl-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .15s ease}.cl-item.expanded .cl-body{grid-template-rows:1fr}.cl-body-inner{overflow:hidden;visibility:hidden;transition:visibility .15s;padding:0 12px 0 46px}.cl-item.expanded .cl-body-inner{visibility:visible;padding-bottom:12px}.cl-description{margin:0 0 10px;font-size:13px;line-height:1.5;color:#616161;max-width:65ch}.cl-actions{display:flex;flex-wrap:wrap;gap:8px}.cl-actions button mat-icon{margin-right:6px}.cl-break{display:none}@media (prefers-reduced-motion: reduce){.cl-body,.cl-body-inner,.cl-chevron{transition:none}}@media (max-width: 700px){.cl-body-inner{padding-left:16px}.cl-actions{gap:8px 6px;align-items:center}.cl-break{display:block;flex:0 0 100%;height:0}.cl-secondary{--mdc-outlined-button-outline-color: transparent;border-color:transparent;background:#0000000b;min-width:0;padding:0 12px;font-size:13px}.cl-secondary:hover,.cl-secondary:active{background:#00000014}.cl-actions .cl-secondary mat-icon{font-size:18px;width:18px;height:18px;margin-right:4px}}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
             }], itemTemplate: [{
@@ -13796,6 +13796,7 @@ class TilesComponent {
         // 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.hideValueMobile = false; // Added: opt-in — drop the money badge under 700px (the Day Book sets it)
         this.isCarousel = false;
         this.tilesStyle = {};
         this.canScrollLeft = false;
@@ -13848,13 +13849,16 @@ class TilesComponent {
         // 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';
+        this.hideValueMobile = cfg?.hideValueOnMobile === true;
         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;
         }
@@ -14257,11 +14261,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: "<!-- 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\" [style.flex]=\"tileBasis ? '0 0 ' + tileBasis : null\" (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}.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 }); }
+    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\" [class.hide-value-mobile]=\"hideValueMobile\">\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\" [class.hide-value-mobile]=\"hideValueMobile\" [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:8px 10px}.tile-icon-row{gap:8px;padding:2px 0}.tile-icon-wrap{width:30px;height:30px}.tile-icon-wrap mat-icon{font-size:26px;width:26px;height:26px}.tile-icon-label{font-size:10.5px;letter-spacing:.1px;line-height:1.25}.tile-icon-value{font-size:22px}.tile-icon-footer{margin-top:5px}.tile-icon-footer mat-divider{margin-bottom:4px}.tile-icon-footer-content{font-size:10.5px;gap:3px;line-height:1.25}.tile-icon-footer-icon{font-size:13px;width:13px;height:13px}.hide-value-mobile .tile-badge{display:none}}.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: "<!-- 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\" [style.flex]=\"tileBasis ? '0 0 ' + tileBasis : null\" (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}.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\" [class.hide-value-mobile]=\"hideValueMobile\">\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\" [class.hide-value-mobile]=\"hideValueMobile\" [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:8px 10px}.tile-icon-row{gap:8px;padding:2px 0}.tile-icon-wrap{width:30px;height:30px}.tile-icon-wrap mat-icon{font-size:26px;width:26px;height:26px}.tile-icon-label{font-size:10.5px;letter-spacing:.1px;line-height:1.25}.tile-icon-value{font-size:22px}.tile-icon-footer{margin-top:5px}.tile-icon-footer mat-divider{margin-bottom:4px}.tile-icon-footer-content{font-size:10.5px;gap:3px;line-height:1.25}.tile-icon-footer-icon{font-size:13px;width:13px;height:13px}.hide-value-mobile .tile-badge{display:none}}.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']
@@ -16280,11 +16284,11 @@ class GroupsComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: GroupsComponent, deps: [{ token: ConditionService }, { token: ButtonService }, { token: DataServiceLib }, { token: i2$1.MatSnackBar }, { token: ApiErrorService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: GroupsComponent, isStandalone: false, selector: "spa-groups", inputs: { config: "config", dataSource: "dataSource", displayedButtons: "displayedButtons", showOwnFilter: "showOwnFilter", filterText: "filterText" }, outputs: { actionClick: "actionClick" }, usesOnChanges: true, ngImport: i0, template: "<!-- Changed: this filter row was REMOVED from the grouped view's own markup and now lives in the table header,\n     beside the action buttons, where every other table config puts it. It used to sit on a row of its own\n     directly under the buttons row, leaving both rows half empty and visibly misaligned.\n     The filtering logic here is untouched \u2014 only the input that drives it moved, and its text arrives via the\n     filterText @Input relayed from the header. Kept as a fallback for a grouped view rendered WITHOUT the\n     standard header (spa-groups can be used directly), so filtering is never simply lost. -->\n<div class=\"groups-filter\" *ngIf=\"showOwnFilter\">\n  <mat-form-field appearance=\"outline\" class=\"filter-field\">\n    <mat-icon matPrefix>search</mat-icon>\n    <input matInput placeholder=\"Filter\" [(ngModel)]=\"filterText\" (ngModelChange)=\"applyFilter()\">\n    <button *ngIf=\"filterText\" mat-icon-button matSuffix (click)=\"filterText = ''; applyFilter()\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n</div>\n\n<div class=\"groups-container\" cdkDropListGroup>\n\n  <mat-card *ngFor=\"let group of groupedData\" class=\"group-card\">\n\n    <div class=\"group-header\">\n      <div class=\"header-left\">\n        <mat-icon *ngIf=\"group.icon\" [style.color]=\"group.color\" class=\"group-icon\">{{group.icon}}</mat-icon>\n        <label class=\"group-title\">{{group.displayName}}</label>\n        <label *ngIf=\"config.groupConfig.showGroupCount !== false\" class=\"group-count\">({{group.items.length}})</label>\n      </div>\n\n      <div class=\"header-right\">\n        <button\n          *ngFor=\"let button of getVisibleHeaderButtons(group)\"\n          mat-icon-button\n          [matTooltip]=\"getHeaderButtonTooltip(button)\"\n          matTooltipPosition=\"above\"\n          [style.color]=\"getHeaderButtonColor(button, group)\"\n          [disabled]=\"isHeaderButtonDisabled(button, group)\"\n          (click)=\"headerButtonClicked(button, group)\">\n          <mat-icon>{{getHeaderButtonIcon(button)}}</mat-icon>\n        </button>\n      </div>\n    </div>\n\n    <hr class=\"group-divider\" />\n\n    <!-- Empty state: show when no items and drag is disabled -->\n    <div *ngIf=\"group.items.length === 0 && !config.groupConfig.dragEnabled\" class=\"empty-state\">\n      <label>{{config.groupConfig.emptyGroupMessage ?? 'Empty'}}</label>\n    </div>\n\n    <!-- Changed: Replaced mat-chip-set with flex container of mat-stroked-button for cleaner button style -->\n    <div\n      *ngIf=\"group.items.length > 0 || config.groupConfig.dragEnabled\"\n      cdkDropList\n      [cdkDropListData]=\"group.items\"\n      [cdkDropListDisabled]=\"!config.groupConfig.dragEnabled\"\n      (cdkDropListDropped)=\"onDrop($event)\"\n      (cdkDropListEntered)=\"onDropListEntered($event)\"\n      (cdkDropListExited)=\"onDropListExited($event)\"\n      [class.drop-highlight]=\"group === highlightedGroup\"\n      class=\"drop-list items-container\">\n\n      <!-- Empty state inside drop list when drag is enabled -->\n      <div *ngIf=\"group.items.length === 0\" class=\"empty-state drop-empty\">\n        <label>{{config.groupConfig.emptyGroupMessage ?? 'Empty'}}</label>\n      </div>\n\n      <button\n        mat-stroked-button\n        *ngFor=\"let item of group.items\"\n        cdkDrag [cdkDragData]=\"item\"\n        [cdkDragDisabled]=\"!config.groupConfig.dragEnabled\"\n        [matMenuTriggerFor]=\"config.groupConfig.contextMenuEnabled !== false ? itemMenu : null\"\n        [matMenuTriggerData]=\"{item: item, group: group}\"\n        class=\"item-button\">\n\n        <mat-icon\n          *ngIf=\"getItemIcon(item)\"\n          [style.color]=\"getItemIconColor(item)\"\n          [matTooltip]=\"getItemIconTip(item)\"\n          matTooltipPosition=\"above\"\n          class=\"item-icon\">\n          {{getItemIcon(item)}}\n        </mat-icon>\n\n        {{getItemText(item)}}\n\n        <ng-container *ngFor=\"let additionalIcon of getVisibleAdditionalIcons(item)\">\n          <mat-icon\n            [style.color]=\"additionalIcon.color\"\n            [matTooltip]=\"getIconTooltip(additionalIcon, item)\"\n            matTooltipPosition=\"above\"\n            class=\"item-additional-icon\">\n            {{additionalIcon.name}}\n          </mat-icon>\n        </ng-container>\n\n      </button>\n    </div>\n\n  </mat-card>\n\n</div>\n\n<mat-menu #itemMenu=\"matMenu\">\n  <ng-template matMenuContent let-item=\"item\" let-group=\"group\">\n    <button\n      *ngFor=\"let button of getVisibleButtons(item)\"\n      mat-menu-item\n      [disabled]=\"isButtonDisabled(button, item)\"\n      (click)=\"itemActionClicked(button.name, item, group)\">\n      <mat-icon [style.color]=\"getButtonIconColor(button, item)\">{{getButtonIcon(button)}}</mat-icon>\n      <span>{{button.display ?? button.tip ?? (button.name | titlecase)}}</span>\n    </button>\n  </ng-template>\n</mat-menu>\n", styles: [".groups-filter{display:flex;justify-content:flex-end;margin-bottom:8px;padding-right:10px}.filter-field{width:300px;font-size:13px}.filter-field ::ng-deep .mat-mdc-form-field-infix{padding-top:8px!important;padding-bottom:8px!important;min-height:36px}.groups-container{display:flex;flex-direction:column;gap:20px;padding-right:10px;margin-left:0}.group-card{width:100%;margin-bottom:0;padding:8px 16px 16px}.group-header{display:flex;justify-content:space-between;align-items:center;padding:0;min-height:32px}.header-left{display:flex;align-items:center;gap:5px}.header-right{display:flex;align-items:center;gap:4px}.group-icon{margin-right:5px;font-size:24px;width:24px;height:24px;line-height:24px}.group-title{font-size:24px;font-weight:300;line-height:1.2}.group-count{font-size:12px;font-weight:300;margin-left:5px;line-height:1.2}.group-divider{margin-top:8px;margin-bottom:10px}.empty-state{display:flex;justify-content:center;align-items:center;padding:10px}.empty-state label{color:#757575;font-style:italic}.items-container{display:flex;flex-wrap:wrap;gap:10px;padding:8px 0;align-items:center}.item-button{cursor:pointer;font-weight:400;letter-spacing:.01em;transition:box-shadow .2s ease,background-color .2s ease}.item-button:hover{box-shadow:0 1px 4px #00000026;background-color:#00000005}.item-icon{font-size:18px;width:18px;height:18px;margin-right:4px;vertical-align:middle}.item-additional-icon{font-size:16px;width:16px;height:16px;margin-left:6px;vertical-align:middle;opacity:.85}button[mat-icon-button]{width:32px;height:32px}button[mat-icon-button] mat-icon{font-size:18px;margin-top:-3px}.header-right button[mat-icon-button]{display:inline-flex;align-items:center;justify-content:center;padding:0;line-height:normal}.header-right button[mat-icon-button] mat-icon{margin:0;font-size:20px;width:20px;height:20px;line-height:20px;display:block}.header-right button[mat-icon-button] .mat-mdc-button-touch-target{display:none}.drop-list{min-height:40px}.drop-empty{padding:5px 10px}.cdk-drag-preview{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;opacity:.9;border-radius:4px}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.drop-highlight{border:2px dashed #90caf9;border-radius:8px;background:#90caf90d}.cdk-drop-list-dragging .item-button:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\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: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$4.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i4$4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { 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: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { 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: "directive", type: i15.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i15.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i15.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "pipe", type: i1$2.TitleCasePipe, name: "titlecase" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: GroupsComponent, isStandalone: false, selector: "spa-groups", inputs: { config: "config", dataSource: "dataSource", displayedButtons: "displayedButtons", showOwnFilter: "showOwnFilter", filterText: "filterText" }, outputs: { actionClick: "actionClick" }, usesOnChanges: true, ngImport: i0, template: "<!-- Changed: this filter row was REMOVED from the grouped view's own markup and now lives in the table header,\n     beside the action buttons, where every other table config puts it. It used to sit on a row of its own\n     directly under the buttons row, leaving both rows half empty and visibly misaligned.\n     The filtering logic here is untouched \u2014 only the input that drives it moved, and its text arrives via the\n     filterText @Input relayed from the header. Kept as a fallback for a grouped view rendered WITHOUT the\n     standard header (spa-groups can be used directly), so filtering is never simply lost. -->\n<div class=\"groups-filter\" *ngIf=\"showOwnFilter\">\n  <mat-form-field appearance=\"outline\" class=\"filter-field\">\n    <mat-icon matPrefix>search</mat-icon>\n    <input matInput placeholder=\"Filter\" [(ngModel)]=\"filterText\" (ngModelChange)=\"applyFilter()\">\n    <button *ngIf=\"filterText\" mat-icon-button matSuffix (click)=\"filterText = ''; applyFilter()\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n</div>\n\n<div class=\"groups-container\" cdkDropListGroup>\n\n  <mat-card *ngFor=\"let group of groupedData\" class=\"group-card\">\n\n    <div class=\"group-header\">\n      <div class=\"header-left\">\n        <mat-icon *ngIf=\"group.icon\" [style.color]=\"group.color\" class=\"group-icon\">{{group.icon}}</mat-icon>\n        <!-- Changed: added the native title attribute. On a phone the title now truncates with an ellipsis rather\n             than wrapping to a second line, so the full name has to stay reachable somewhere \u2014 this is the\n             zero-cost way to keep it. No tooltip directive, so nothing changes on touch. -->\n        <label class=\"group-title\" [title]=\"group.displayName\">{{group.displayName}}</label>\n        <label *ngIf=\"config.groupConfig.showGroupCount !== false\" class=\"group-count\">({{group.items.length}})</label>\n      </div>\n\n      <div class=\"header-right\">\n        <button\n          *ngFor=\"let button of getVisibleHeaderButtons(group)\"\n          mat-icon-button\n          [matTooltip]=\"getHeaderButtonTooltip(button)\"\n          matTooltipPosition=\"above\"\n          [style.color]=\"getHeaderButtonColor(button, group)\"\n          [disabled]=\"isHeaderButtonDisabled(button, group)\"\n          (click)=\"headerButtonClicked(button, group)\">\n          <mat-icon>{{getHeaderButtonIcon(button)}}</mat-icon>\n        </button>\n      </div>\n    </div>\n\n    <hr class=\"group-divider\" />\n\n    <!-- Empty state: show when no items and drag is disabled -->\n    <div *ngIf=\"group.items.length === 0 && !config.groupConfig.dragEnabled\" class=\"empty-state\">\n      <label>{{config.groupConfig.emptyGroupMessage ?? 'Empty'}}</label>\n    </div>\n\n    <!-- Changed: Replaced mat-chip-set with flex container of mat-stroked-button for cleaner button style -->\n    <div\n      *ngIf=\"group.items.length > 0 || config.groupConfig.dragEnabled\"\n      cdkDropList\n      [cdkDropListData]=\"group.items\"\n      [cdkDropListDisabled]=\"!config.groupConfig.dragEnabled\"\n      (cdkDropListDropped)=\"onDrop($event)\"\n      (cdkDropListEntered)=\"onDropListEntered($event)\"\n      (cdkDropListExited)=\"onDropListExited($event)\"\n      [class.drop-highlight]=\"group === highlightedGroup\"\n      class=\"drop-list items-container\">\n\n      <!-- Empty state inside drop list when drag is enabled -->\n      <div *ngIf=\"group.items.length === 0\" class=\"empty-state drop-empty\">\n        <label>{{config.groupConfig.emptyGroupMessage ?? 'Empty'}}</label>\n      </div>\n\n      <button\n        mat-stroked-button\n        *ngFor=\"let item of group.items\"\n        cdkDrag [cdkDragData]=\"item\"\n        [cdkDragDisabled]=\"!config.groupConfig.dragEnabled\"\n        [matMenuTriggerFor]=\"config.groupConfig.contextMenuEnabled !== false ? itemMenu : null\"\n        [matMenuTriggerData]=\"{item: item, group: group}\"\n        class=\"item-button\">\n\n        <mat-icon\n          *ngIf=\"getItemIcon(item)\"\n          [style.color]=\"getItemIconColor(item)\"\n          [matTooltip]=\"getItemIconTip(item)\"\n          matTooltipPosition=\"above\"\n          class=\"item-icon\">\n          {{getItemIcon(item)}}\n        </mat-icon>\n\n        {{getItemText(item)}}\n\n        <ng-container *ngFor=\"let additionalIcon of getVisibleAdditionalIcons(item)\">\n          <mat-icon\n            [style.color]=\"additionalIcon.color\"\n            [matTooltip]=\"getIconTooltip(additionalIcon, item)\"\n            matTooltipPosition=\"above\"\n            class=\"item-additional-icon\">\n            {{additionalIcon.name}}\n          </mat-icon>\n        </ng-container>\n\n      </button>\n    </div>\n\n  </mat-card>\n\n</div>\n\n<mat-menu #itemMenu=\"matMenu\">\n  <ng-template matMenuContent let-item=\"item\" let-group=\"group\">\n    <button\n      *ngFor=\"let button of getVisibleButtons(item)\"\n      mat-menu-item\n      [disabled]=\"isButtonDisabled(button, item)\"\n      (click)=\"itemActionClicked(button.name, item, group)\">\n      <mat-icon [style.color]=\"getButtonIconColor(button, item)\">{{getButtonIcon(button)}}</mat-icon>\n      <span>{{button.display ?? button.tip ?? (button.name | titlecase)}}</span>\n    </button>\n  </ng-template>\n</mat-menu>\n", styles: [".groups-filter{display:flex;justify-content:flex-end;margin-bottom:8px;padding-right:10px}.filter-field{width:300px;font-size:13px}.filter-field ::ng-deep .mat-mdc-form-field-infix{padding-top:8px!important;padding-bottom:8px!important;min-height:36px}.groups-container{display:flex;flex-direction:column;gap:20px;padding-right:10px;margin-left:0}.group-card{width:100%;margin-bottom:0;padding:8px 16px 16px}.group-header{display:flex;justify-content:space-between;align-items:center;padding:0;min-height:32px}.header-left{display:flex;align-items:center;gap:5px}.header-right{display:flex;align-items:center;gap:4px}.group-icon{margin-right:5px;font-size:24px;width:24px;height:24px;line-height:24px}.group-title{font-size:24px;font-weight:300;line-height:1.2}.group-count{font-size:12px;font-weight:300;margin-left:5px;line-height:1.2}.group-divider{margin-top:8px;margin-bottom:10px}.empty-state{display:flex;justify-content:center;align-items:center;padding:10px}.empty-state label{color:#757575;font-style:italic}.items-container{display:flex;flex-wrap:wrap;gap:10px;padding:8px 0;align-items:center}.item-button{cursor:pointer;font-weight:400;letter-spacing:.01em;transition:box-shadow .2s ease,background-color .2s ease}.item-button:hover{box-shadow:0 1px 4px #00000026;background-color:#00000005}.item-icon{font-size:18px;width:18px;height:18px;margin-right:4px;vertical-align:middle}.item-additional-icon{font-size:16px;width:16px;height:16px;margin-left:6px;vertical-align:middle;opacity:.85}button[mat-icon-button]{width:32px;height:32px}button[mat-icon-button] mat-icon{font-size:18px;margin-top:-3px}.header-right button[mat-icon-button]{display:inline-flex;align-items:center;justify-content:center;padding:0;line-height:normal}.header-right button[mat-icon-button] mat-icon{margin:0;font-size:20px;width:20px;height:20px;line-height:20px;display:block}.header-right button[mat-icon-button] .mat-mdc-button-touch-target{display:none}@media (max-width: 700px){.groups-container{gap:12px;padding-right:0}.group-card{padding:8px 10px 10px}.header-left{flex:1 1 auto;min-width:0;gap:4px}.group-icon{flex:0 0 auto;margin-right:2px;font-size:20px;width:20px;height:20px;line-height:20px}.group-title{font-size:16px;font-weight:400;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.group-count{flex:0 0 auto;margin-left:2px;font-size:11px}.header-right{flex:0 0 auto;gap:0}.header-right button[mat-icon-button] mat-icon{font-size:18px;width:18px;height:18px;line-height:18px}.group-header{min-height:28px}.group-divider{margin-top:6px;margin-bottom:6px}.items-container{gap:6px;padding:4px 0}.item-button{min-width:0;height:32px;padding:0 9px;font-size:12.5px;letter-spacing:normal;border-radius:16px;border-color:#0000001f;--mdc-outlined-button-container-height: 32px;--mdc-outlined-button-container-shape: 16px;--mdc-outlined-button-label-text-size: 12.5px}.item-button ::ng-deep .mdc-button__label{letter-spacing:normal;display:inline-flex;align-items:center}.item-button ::ng-deep .mat-mdc-button-touch-target{height:100%}.item-icon{font-size:14px;width:14px;height:14px;margin-right:3px}.item-additional-icon{font-size:14px;width:14px;height:14px;margin-left:3px}.drop-list{min-height:32px}.empty-state{padding:4px 10px}}.drop-list{min-height:40px}.drop-empty{padding:5px 10px}.cdk-drag-preview{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;opacity:.9;border-radius:4px}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.drop-highlight{border:2px dashed #90caf9;border-radius:8px;background:#90caf90d}.cdk-drop-list-dragging .item-button:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\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: i2$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$4.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i4$4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { 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: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { 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: "directive", type: i15.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i15.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i15.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "pipe", type: i1$2.TitleCasePipe, name: "titlecase" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: GroupsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spa-groups', standalone: false, template: "<!-- Changed: this filter row was REMOVED from the grouped view's own markup and now lives in the table header,\n     beside the action buttons, where every other table config puts it. It used to sit on a row of its own\n     directly under the buttons row, leaving both rows half empty and visibly misaligned.\n     The filtering logic here is untouched \u2014 only the input that drives it moved, and its text arrives via the\n     filterText @Input relayed from the header. Kept as a fallback for a grouped view rendered WITHOUT the\n     standard header (spa-groups can be used directly), so filtering is never simply lost. -->\n<div class=\"groups-filter\" *ngIf=\"showOwnFilter\">\n  <mat-form-field appearance=\"outline\" class=\"filter-field\">\n    <mat-icon matPrefix>search</mat-icon>\n    <input matInput placeholder=\"Filter\" [(ngModel)]=\"filterText\" (ngModelChange)=\"applyFilter()\">\n    <button *ngIf=\"filterText\" mat-icon-button matSuffix (click)=\"filterText = ''; applyFilter()\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n</div>\n\n<div class=\"groups-container\" cdkDropListGroup>\n\n  <mat-card *ngFor=\"let group of groupedData\" class=\"group-card\">\n\n    <div class=\"group-header\">\n      <div class=\"header-left\">\n        <mat-icon *ngIf=\"group.icon\" [style.color]=\"group.color\" class=\"group-icon\">{{group.icon}}</mat-icon>\n        <label class=\"group-title\">{{group.displayName}}</label>\n        <label *ngIf=\"config.groupConfig.showGroupCount !== false\" class=\"group-count\">({{group.items.length}})</label>\n      </div>\n\n      <div class=\"header-right\">\n        <button\n          *ngFor=\"let button of getVisibleHeaderButtons(group)\"\n          mat-icon-button\n          [matTooltip]=\"getHeaderButtonTooltip(button)\"\n          matTooltipPosition=\"above\"\n          [style.color]=\"getHeaderButtonColor(button, group)\"\n          [disabled]=\"isHeaderButtonDisabled(button, group)\"\n          (click)=\"headerButtonClicked(button, group)\">\n          <mat-icon>{{getHeaderButtonIcon(button)}}</mat-icon>\n        </button>\n      </div>\n    </div>\n\n    <hr class=\"group-divider\" />\n\n    <!-- Empty state: show when no items and drag is disabled -->\n    <div *ngIf=\"group.items.length === 0 && !config.groupConfig.dragEnabled\" class=\"empty-state\">\n      <label>{{config.groupConfig.emptyGroupMessage ?? 'Empty'}}</label>\n    </div>\n\n    <!-- Changed: Replaced mat-chip-set with flex container of mat-stroked-button for cleaner button style -->\n    <div\n      *ngIf=\"group.items.length > 0 || config.groupConfig.dragEnabled\"\n      cdkDropList\n      [cdkDropListData]=\"group.items\"\n      [cdkDropListDisabled]=\"!config.groupConfig.dragEnabled\"\n      (cdkDropListDropped)=\"onDrop($event)\"\n      (cdkDropListEntered)=\"onDropListEntered($event)\"\n      (cdkDropListExited)=\"onDropListExited($event)\"\n      [class.drop-highlight]=\"group === highlightedGroup\"\n      class=\"drop-list items-container\">\n\n      <!-- Empty state inside drop list when drag is enabled -->\n      <div *ngIf=\"group.items.length === 0\" class=\"empty-state drop-empty\">\n        <label>{{config.groupConfig.emptyGroupMessage ?? 'Empty'}}</label>\n      </div>\n\n      <button\n        mat-stroked-button\n        *ngFor=\"let item of group.items\"\n        cdkDrag [cdkDragData]=\"item\"\n        [cdkDragDisabled]=\"!config.groupConfig.dragEnabled\"\n        [matMenuTriggerFor]=\"config.groupConfig.contextMenuEnabled !== false ? itemMenu : null\"\n        [matMenuTriggerData]=\"{item: item, group: group}\"\n        class=\"item-button\">\n\n        <mat-icon\n          *ngIf=\"getItemIcon(item)\"\n          [style.color]=\"getItemIconColor(item)\"\n          [matTooltip]=\"getItemIconTip(item)\"\n          matTooltipPosition=\"above\"\n          class=\"item-icon\">\n          {{getItemIcon(item)}}\n        </mat-icon>\n\n        {{getItemText(item)}}\n\n        <ng-container *ngFor=\"let additionalIcon of getVisibleAdditionalIcons(item)\">\n          <mat-icon\n            [style.color]=\"additionalIcon.color\"\n            [matTooltip]=\"getIconTooltip(additionalIcon, item)\"\n            matTooltipPosition=\"above\"\n            class=\"item-additional-icon\">\n            {{additionalIcon.name}}\n          </mat-icon>\n        </ng-container>\n\n      </button>\n    </div>\n\n  </mat-card>\n\n</div>\n\n<mat-menu #itemMenu=\"matMenu\">\n  <ng-template matMenuContent let-item=\"item\" let-group=\"group\">\n    <button\n      *ngFor=\"let button of getVisibleButtons(item)\"\n      mat-menu-item\n      [disabled]=\"isButtonDisabled(button, item)\"\n      (click)=\"itemActionClicked(button.name, item, group)\">\n      <mat-icon [style.color]=\"getButtonIconColor(button, item)\">{{getButtonIcon(button)}}</mat-icon>\n      <span>{{button.display ?? button.tip ?? (button.name | titlecase)}}</span>\n    </button>\n  </ng-template>\n</mat-menu>\n", styles: [".groups-filter{display:flex;justify-content:flex-end;margin-bottom:8px;padding-right:10px}.filter-field{width:300px;font-size:13px}.filter-field ::ng-deep .mat-mdc-form-field-infix{padding-top:8px!important;padding-bottom:8px!important;min-height:36px}.groups-container{display:flex;flex-direction:column;gap:20px;padding-right:10px;margin-left:0}.group-card{width:100%;margin-bottom:0;padding:8px 16px 16px}.group-header{display:flex;justify-content:space-between;align-items:center;padding:0;min-height:32px}.header-left{display:flex;align-items:center;gap:5px}.header-right{display:flex;align-items:center;gap:4px}.group-icon{margin-right:5px;font-size:24px;width:24px;height:24px;line-height:24px}.group-title{font-size:24px;font-weight:300;line-height:1.2}.group-count{font-size:12px;font-weight:300;margin-left:5px;line-height:1.2}.group-divider{margin-top:8px;margin-bottom:10px}.empty-state{display:flex;justify-content:center;align-items:center;padding:10px}.empty-state label{color:#757575;font-style:italic}.items-container{display:flex;flex-wrap:wrap;gap:10px;padding:8px 0;align-items:center}.item-button{cursor:pointer;font-weight:400;letter-spacing:.01em;transition:box-shadow .2s ease,background-color .2s ease}.item-button:hover{box-shadow:0 1px 4px #00000026;background-color:#00000005}.item-icon{font-size:18px;width:18px;height:18px;margin-right:4px;vertical-align:middle}.item-additional-icon{font-size:16px;width:16px;height:16px;margin-left:6px;vertical-align:middle;opacity:.85}button[mat-icon-button]{width:32px;height:32px}button[mat-icon-button] mat-icon{font-size:18px;margin-top:-3px}.header-right button[mat-icon-button]{display:inline-flex;align-items:center;justify-content:center;padding:0;line-height:normal}.header-right button[mat-icon-button] mat-icon{margin:0;font-size:20px;width:20px;height:20px;line-height:20px;display:block}.header-right button[mat-icon-button] .mat-mdc-button-touch-target{display:none}.drop-list{min-height:40px}.drop-empty{padding:5px 10px}.cdk-drag-preview{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;opacity:.9;border-radius:4px}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.drop-highlight{border:2px dashed #90caf9;border-radius:8px;background:#90caf90d}.cdk-drop-list-dragging .item-button:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
+            args: [{ selector: 'spa-groups', standalone: false, template: "<!-- Changed: this filter row was REMOVED from the grouped view's own markup and now lives in the table header,\n     beside the action buttons, where every other table config puts it. It used to sit on a row of its own\n     directly under the buttons row, leaving both rows half empty and visibly misaligned.\n     The filtering logic here is untouched \u2014 only the input that drives it moved, and its text arrives via the\n     filterText @Input relayed from the header. Kept as a fallback for a grouped view rendered WITHOUT the\n     standard header (spa-groups can be used directly), so filtering is never simply lost. -->\n<div class=\"groups-filter\" *ngIf=\"showOwnFilter\">\n  <mat-form-field appearance=\"outline\" class=\"filter-field\">\n    <mat-icon matPrefix>search</mat-icon>\n    <input matInput placeholder=\"Filter\" [(ngModel)]=\"filterText\" (ngModelChange)=\"applyFilter()\">\n    <button *ngIf=\"filterText\" mat-icon-button matSuffix (click)=\"filterText = ''; applyFilter()\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </mat-form-field>\n</div>\n\n<div class=\"groups-container\" cdkDropListGroup>\n\n  <mat-card *ngFor=\"let group of groupedData\" class=\"group-card\">\n\n    <div class=\"group-header\">\n      <div class=\"header-left\">\n        <mat-icon *ngIf=\"group.icon\" [style.color]=\"group.color\" class=\"group-icon\">{{group.icon}}</mat-icon>\n        <!-- Changed: added the native title attribute. On a phone the title now truncates with an ellipsis rather\n             than wrapping to a second line, so the full name has to stay reachable somewhere \u2014 this is the\n             zero-cost way to keep it. No tooltip directive, so nothing changes on touch. -->\n        <label class=\"group-title\" [title]=\"group.displayName\">{{group.displayName}}</label>\n        <label *ngIf=\"config.groupConfig.showGroupCount !== false\" class=\"group-count\">({{group.items.length}})</label>\n      </div>\n\n      <div class=\"header-right\">\n        <button\n          *ngFor=\"let button of getVisibleHeaderButtons(group)\"\n          mat-icon-button\n          [matTooltip]=\"getHeaderButtonTooltip(button)\"\n          matTooltipPosition=\"above\"\n          [style.color]=\"getHeaderButtonColor(button, group)\"\n          [disabled]=\"isHeaderButtonDisabled(button, group)\"\n          (click)=\"headerButtonClicked(button, group)\">\n          <mat-icon>{{getHeaderButtonIcon(button)}}</mat-icon>\n        </button>\n      </div>\n    </div>\n\n    <hr class=\"group-divider\" />\n\n    <!-- Empty state: show when no items and drag is disabled -->\n    <div *ngIf=\"group.items.length === 0 && !config.groupConfig.dragEnabled\" class=\"empty-state\">\n      <label>{{config.groupConfig.emptyGroupMessage ?? 'Empty'}}</label>\n    </div>\n\n    <!-- Changed: Replaced mat-chip-set with flex container of mat-stroked-button for cleaner button style -->\n    <div\n      *ngIf=\"group.items.length > 0 || config.groupConfig.dragEnabled\"\n      cdkDropList\n      [cdkDropListData]=\"group.items\"\n      [cdkDropListDisabled]=\"!config.groupConfig.dragEnabled\"\n      (cdkDropListDropped)=\"onDrop($event)\"\n      (cdkDropListEntered)=\"onDropListEntered($event)\"\n      (cdkDropListExited)=\"onDropListExited($event)\"\n      [class.drop-highlight]=\"group === highlightedGroup\"\n      class=\"drop-list items-container\">\n\n      <!-- Empty state inside drop list when drag is enabled -->\n      <div *ngIf=\"group.items.length === 0\" class=\"empty-state drop-empty\">\n        <label>{{config.groupConfig.emptyGroupMessage ?? 'Empty'}}</label>\n      </div>\n\n      <button\n        mat-stroked-button\n        *ngFor=\"let item of group.items\"\n        cdkDrag [cdkDragData]=\"item\"\n        [cdkDragDisabled]=\"!config.groupConfig.dragEnabled\"\n        [matMenuTriggerFor]=\"config.groupConfig.contextMenuEnabled !== false ? itemMenu : null\"\n        [matMenuTriggerData]=\"{item: item, group: group}\"\n        class=\"item-button\">\n\n        <mat-icon\n          *ngIf=\"getItemIcon(item)\"\n          [style.color]=\"getItemIconColor(item)\"\n          [matTooltip]=\"getItemIconTip(item)\"\n          matTooltipPosition=\"above\"\n          class=\"item-icon\">\n          {{getItemIcon(item)}}\n        </mat-icon>\n\n        {{getItemText(item)}}\n\n        <ng-container *ngFor=\"let additionalIcon of getVisibleAdditionalIcons(item)\">\n          <mat-icon\n            [style.color]=\"additionalIcon.color\"\n            [matTooltip]=\"getIconTooltip(additionalIcon, item)\"\n            matTooltipPosition=\"above\"\n            class=\"item-additional-icon\">\n            {{additionalIcon.name}}\n          </mat-icon>\n        </ng-container>\n\n      </button>\n    </div>\n\n  </mat-card>\n\n</div>\n\n<mat-menu #itemMenu=\"matMenu\">\n  <ng-template matMenuContent let-item=\"item\" let-group=\"group\">\n    <button\n      *ngFor=\"let button of getVisibleButtons(item)\"\n      mat-menu-item\n      [disabled]=\"isButtonDisabled(button, item)\"\n      (click)=\"itemActionClicked(button.name, item, group)\">\n      <mat-icon [style.color]=\"getButtonIconColor(button, item)\">{{getButtonIcon(button)}}</mat-icon>\n      <span>{{button.display ?? button.tip ?? (button.name | titlecase)}}</span>\n    </button>\n  </ng-template>\n</mat-menu>\n", styles: [".groups-filter{display:flex;justify-content:flex-end;margin-bottom:8px;padding-right:10px}.filter-field{width:300px;font-size:13px}.filter-field ::ng-deep .mat-mdc-form-field-infix{padding-top:8px!important;padding-bottom:8px!important;min-height:36px}.groups-container{display:flex;flex-direction:column;gap:20px;padding-right:10px;margin-left:0}.group-card{width:100%;margin-bottom:0;padding:8px 16px 16px}.group-header{display:flex;justify-content:space-between;align-items:center;padding:0;min-height:32px}.header-left{display:flex;align-items:center;gap:5px}.header-right{display:flex;align-items:center;gap:4px}.group-icon{margin-right:5px;font-size:24px;width:24px;height:24px;line-height:24px}.group-title{font-size:24px;font-weight:300;line-height:1.2}.group-count{font-size:12px;font-weight:300;margin-left:5px;line-height:1.2}.group-divider{margin-top:8px;margin-bottom:10px}.empty-state{display:flex;justify-content:center;align-items:center;padding:10px}.empty-state label{color:#757575;font-style:italic}.items-container{display:flex;flex-wrap:wrap;gap:10px;padding:8px 0;align-items:center}.item-button{cursor:pointer;font-weight:400;letter-spacing:.01em;transition:box-shadow .2s ease,background-color .2s ease}.item-button:hover{box-shadow:0 1px 4px #00000026;background-color:#00000005}.item-icon{font-size:18px;width:18px;height:18px;margin-right:4px;vertical-align:middle}.item-additional-icon{font-size:16px;width:16px;height:16px;margin-left:6px;vertical-align:middle;opacity:.85}button[mat-icon-button]{width:32px;height:32px}button[mat-icon-button] mat-icon{font-size:18px;margin-top:-3px}.header-right button[mat-icon-button]{display:inline-flex;align-items:center;justify-content:center;padding:0;line-height:normal}.header-right button[mat-icon-button] mat-icon{margin:0;font-size:20px;width:20px;height:20px;line-height:20px;display:block}.header-right button[mat-icon-button] .mat-mdc-button-touch-target{display:none}@media (max-width: 700px){.groups-container{gap:12px;padding-right:0}.group-card{padding:8px 10px 10px}.header-left{flex:1 1 auto;min-width:0;gap:4px}.group-icon{flex:0 0 auto;margin-right:2px;font-size:20px;width:20px;height:20px;line-height:20px}.group-title{font-size:16px;font-weight:400;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.group-count{flex:0 0 auto;margin-left:2px;font-size:11px}.header-right{flex:0 0 auto;gap:0}.header-right button[mat-icon-button] mat-icon{font-size:18px;width:18px;height:18px;line-height:18px}.group-header{min-height:28px}.group-divider{margin-top:6px;margin-bottom:6px}.items-container{gap:6px;padding:4px 0}.item-button{min-width:0;height:32px;padding:0 9px;font-size:12.5px;letter-spacing:normal;border-radius:16px;border-color:#0000001f;--mdc-outlined-button-container-height: 32px;--mdc-outlined-button-container-shape: 16px;--mdc-outlined-button-label-text-size: 12.5px}.item-button ::ng-deep .mdc-button__label{letter-spacing:normal;display:inline-flex;align-items:center}.item-button ::ng-deep .mat-mdc-button-touch-target{height:100%}.item-icon{font-size:14px;width:14px;height:14px;margin-right:3px}.item-additional-icon{font-size:14px;width:14px;height:14px;margin-left:3px}.drop-list{min-height:32px}.empty-state{padding:4px 10px}}.drop-list{min-height:40px}.drop-empty{padding:5px 10px}.cdk-drag-preview{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;opacity:.9;border-radius:4px}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.drop-highlight{border:2px dashed #90caf9;border-radius:8px;background:#90caf90d}.cdk-drop-list-dragging .item-button:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
         }], ctorParameters: () => [{ type: ConditionService }, { type: ButtonService }, { type: DataServiceLib }, { type: i2$1.MatSnackBar }, { type: ApiErrorService }], propDecorators: { config: [{
                 type: Input
             }], dataSource: [{
@@ -17811,6 +17815,12 @@ class DayBookComponent {
         const value = this.book?.[stage.countField];
         return Array.isArray(value) ? value.length : (value || 0);
     }
+    // Added: the one place a section's human name is resolved, so the chip, the card header and anything added
+    // later can never disagree. Explicit label → the table section's own title → the key humanised.
+    // Core.camelToWords is what the `camelToWords` pipe calls, so this matches the rest of the library exactly.
+    sectionLabel(section) {
+        return section.label || section.tableConfig?.sectionConfig?.title || Core.camelToWords(section.key);
+    }
     // Added: the strip's money figure. valueField may name the total the backend added (<key>Value) or compute it
     // off the book — Shift sums its own 'preparing'/'onTheRoad' rows and Grip its unallocated receipts, because
     // neither payload carries a total for those lists and inventing one server-side would break payload parity.
@@ -17845,7 +17855,10 @@ class DayBookComponent {
         // 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
+        // hideValueOnMobile: on a phone the stage tile is ~44% of the row and was wrapping its label to fit a
+        // money badge that the lane group header already shows. The count is what the tile is FOR; the money
+        // is a second opinion, and it is the one that goes when space is short.
+        this.tileConfig = { tiles, clickable: true, layout: 'carousel', hideValueOnMobile: true, ...(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;
     }
@@ -17865,11 +17878,13 @@ class DayBookComponent {
                 all, rows: all, outletContext: null, count: all.length,
                 caption: typeof section.caption === 'function' ? section.caption(this.book) : (section.caption || ''),
                 limit: section.pageSize || this.config?.pageSize || 10,
-                collapsed: !!section.collapsed
+                // Changed (owner, 2026-08-08): sections start COLLAPSED by default — he opens the list he wants
+                // rather than scrolling past several opened ones. `collapsed: false` on a section still forces it open.
+                collapsed: section.collapsed !== false
             };
             if (section.tableConfig) {
                 const cfg = { ...section.tableConfig };
-                cfg.sectionConfig = section.tableConfig.sectionConfig ? { ...section.tableConfig.sectionConfig, collapsed: section.collapsed } : undefined;
+                cfg.sectionConfig = section.tableConfig.sectionConfig ? { ...section.tableConfig.sectionConfig, collapsed: section.collapsed !== false } : undefined;
                 cfg.elevation = cfg.elevation ?? 'none'; // flat tables on the section cards — Day Book design language
                 if (cfg.sectionConfig) {
                     cfg.sectionConfig.hideWhenEmpty = cfg.sectionConfig.hideWhenEmpty !== false; // sections disappear when empty by default
@@ -17905,7 +17920,11 @@ class DayBookComponent {
     buildGroups() {
         const lanes = this.lanes.filter(l => l.key !== 'all'); // 'all' is the pill, never a group
         const groupable = this.config?.groupLanes !== false && this.lane === 'all' && lanes.length > 1;
-        const open = this.config?.expandedGroups ?? 1; // the user's rule: the first group(s) open, the rest closed
+        // Changed (owner, 2026-08-08): EVERY group now starts collapsed — he opens the area he cares about
+        // rather than scrolling past an opened one. Was `?? 1` (first group open). An app that wants the old
+        // behaviour still sets `expandedGroups: 1`; `groupState` and a caller's previous state still win below,
+        // so a group the operator opened during the session does not slam shut on the next refresh.
+        const open = this.config?.expandedGroups ?? 0;
         const groups = !groupable ? [] : lanes.map((lane, index) => {
             const sections = this.visibleSections.filter(x => x.section.lane === lane.key);
             const previous = this.visibleGroups.find(g => g.lane.key === lane.key);
@@ -17917,7 +17936,13 @@ class DayBookComponent {
                 value: lane.valueField ? this.resolveValue(lane.valueField) : this.laneStageValue(lane.key),
                 // The 'small details' a collapsed group keeps: one chip per non-empty list. A group that reads
                 // 'Getting paid — 3 to issue, 7 overdue' is identifiable without opening it; a bare title is not.
-                chips: sections.filter(x => x.count).map(x => ({ key: x.section.key, label: x.section.label || x.section.key, count: x.count })),
+                // Changed (owner, 2026-08-08): a chip was falling back to the RAW CONFIG KEY, so a collapsed group
+                // read "onTheRoad 3 · readyToInvoice 8" — camelCase leaking into the UI. It now walks the same
+                // cascade the rest of the library uses: an explicit label wins, then the section header's own title
+                // (which every converted app already writes), and only then the key humanised via Core.camelToWords —
+                // the identical helper behind the `camelToWords` pipe the tiles use. So it reads properly with no
+                // config change anywhere, and an app that wants different wording still just sets label/title.
+                chips: sections.filter(x => x.count).map(x => ({ key: x.section.key, label: this.sectionLabel(x.section), count: x.count })),
                 collapsed: previous?.collapsed ?? this.groupState[lane.key] ?? (index >= open)
             };
         }).filter(g => g.sections.length); // a lane with nothing in it today is not worth a header