tin-spa 20.12.1 → 20.13.0

package/fesm2022/tin-spa.mjs

@@ -3105,7 +3105,7 @@ class DataServiceLib {
         this.capServiceItems = new CapItem; // Added: Capability for service items
         this.capBundleProducts = new CapItem; // Added: Capability for bundle products
         this.capInventoryItems = new CapItem;
-        this.capPurchaseOrders = new CapItem;
+        this.capSupplierPurchaseOrders = new CapItem;
         this.capInventoryReceipts = new CapItem;
         this.capSalesOrders = new CapItem;
         this.capSales = new CapItem;
@@ -3510,8 +3510,13 @@ class DataServiceLib {
                 { name: 'email', type: 'text' },
                 { name: 'address', type: 'text-area', rows: 2, span: true },
                 { name: 'customerTenantID', alias: 'Customer Tenant', type: 'text-single', loadAction: { url: 'tenants/list/x' }, strict: true, nullable: true }, // Changed: no longer required — CustomerTenantID is nullable on the model (IsLinked is the optional B2B link), and a required server-loaded lookup made offline create impossible
-                { name: 'vatNumber', type: 'text', alias: 'VAT Number' }, // Added: Phase 2 compliance — customer VAT registration number
-                { name: 'tin', type: 'text', alias: 'TIN' }, // Added: Phase 2 compliance — taxpayer identification number
+                // Added: statutory and trading terms — the details that are agreed once with the customer and
+                // then govern how every document to them must be raised. Grouped away from contact details
+                // because nobody edits these day to day, but getting them wrong invalidates an invoice.
+                { name: 'tradingTerms', type: 'section', alias: 'Statutory & Trading Terms' },
+                { name: 'vatNumber', type: 'text', alias: 'VAT Number', hint: 'ZIMRA VAT registration — required on a tax invoice' }, // Added: Phase 2 compliance — customer VAT registration number
+                { name: 'tin', type: 'text', alias: 'TIN', hint: 'Taxpayer Identification Number' }, // Added: Phase 2 compliance — taxpayer identification number
+                { name: 'requirePONumber', type: 'checkbox', alias: 'Requires a PO number', hint: 'This customer rejects an invoice that does not quote their own order number' }, // Added: moved off the tenant-wide AppConfiguration — PO discipline is a term of the trading relationship
             ],
             loadAction: { url: 'customers/id' },
             heroField: 'customerID',
@@ -3564,6 +3569,63 @@ class DataServiceLib {
             offline: { enabled: true, queue: { create: true, edit: true, delete: true } }, // Added: reads served from cache offline, writes queued and drained on reconnect; RowVersion catches conflicting edits
             entityName: 'Customer' // Changed: Match backend typeof(Customer).Name for SignalR broadcasts
         };
+        //--------------------------Customer Purchase Orders-------------------------
+        // Orders the CUSTOMER issues to us, against which we bill. Distinct from the supplier purchase
+        // order (Purchasing), which is one WE issue when buying — hence the fully-qualified names on both
+        // sides, so "purchase order" is never ambiguous in code or on screen.
+        // Entirely optional: a cash-based customer is invoiced with no order at all. Recording one simply
+        // makes "how much of this order is still unbilled" answerable, and lets over-billing be spotted.
+        this.customerPurchaseOrderFormConfig = {
+            security: { allow: [this.capCustomers] },
+            includeAudit: true,
+            title: 'Customer Purchase Order',
+            fields: [
+                { name: 'customerID', alias: 'Customer', type: 'text-single', loadAction: { url: 'customers/list/x' }, required: true, strict: true },
+                { name: 'poNumber', type: 'text', alias: 'Order Number', required: true, hint: 'Exactly as the customer wrote it — this is the field they reconcile on' },
+                { name: 'poDate', type: 'date', alias: 'Order Date', required: true },
+                { name: 'amount', type: 'number', alias: 'Order Value (excl tax)', hint: 'Leave 0 if the order arrived without a total — billing is never blocked, it just cannot be checked against a value' },
+                { name: 'expiryDate', type: 'date', alias: 'Expires', nullable: true },
+                { name: 'status', type: 'select', options: [{ id: 0, name: 'Open' }, { id: 1, name: 'Closed' }, { id: 2, name: 'Cancelled' }] },
+                { name: 'reference', type: 'text', alias: 'Their Reference', hint: 'Requisition, contract or job-card number. Two orders can share one — it is not unique' },
+                { name: 'notes', type: 'text-area', rows: 2, span: true },
+            ],
+            loadAction: { url: 'customerpurchaseorders/id' },
+            heroField: 'customerPurchaseOrderID',
+            reset: true,
+        };
+        this.customerPurchaseOrdersTableConfig = {
+            showFilter: true,
+            minColumns: ['poNumber', 'customerName', 'amountRemaining'],
+            flatButtons: true,
+            maxButtonsCount: 3,
+            collapseButtons: true,
+            columns: [
+                { name: 'poNumber', type: 'text', alias: 'Order' },
+                { name: 'customerName', type: 'text', alias: 'Customer' },
+                { name: 'poDate', type: 'date', alias: 'Dated' },
+                { name: 'amount', type: 'number', alias: 'Value' },
+                { name: 'amountBilled', type: 'number', alias: 'Billed' },
+                { name: 'lineCount', type: 'number', alias: 'Lines' },
+                {
+                    name: 'amountRemaining', type: 'chip', alias: 'Left to bill',
+                    colors: [
+                        { name: '#EF9A9A', condition: x => x.isOverBilled }, // billed past what the customer authorised
+                        { name: '#A5D6A7', condition: x => !x.isOverBilled && x.amountRemaining > 0 },
+                        { name: '#E0E0E0', condition: x => !x.isOverBilled && x.amountRemaining <= 0 } // fully consumed, nothing left to bill
+                    ]
+                },
+                { name: 'status', type: 'text' },
+            ],
+            buttons: [
+                { name: 'create', display: 'Record Order', dialog: true, action: { url: 'customerpurchaseorders?action=create', method: 'post' } },
+                { name: 'view', dialog: true },
+                { name: 'edit', dialog: true, action: { url: 'customerpurchaseorders?action=edit', method: 'post' } },
+                { name: 'delete', dialog: true, action: { url: 'customerpurchaseorders?action=delete', method: 'post' } },
+            ],
+            loadAction: { url: 'customerpurchaseorders/all/x' },
+            formConfig: this.customerPurchaseOrderFormConfig,
+            entityName: 'CustomerPurchaseOrder'
+        };
         //--------------------------Suppliers-------------------------
         this.supplierFormConfig = {
             security: { allow: [this.capSuppliers] },
@@ -4204,7 +4266,7 @@ class DataServiceLib {
         this.capPurchasingModule.name = "cap62";
         this.capPurchasingModule.display = "Purchasing";
         this.capPurchasingModule.icon = "shopping_cart";
-        this.capPurchasingModule.capSubItems = [this.capPurchasingDashboard, this.capInventoryReceipts, this.capPurchaseOrders, this.capSupplierAging]; // Changed: Added Dashboard to Purchasing submenu
+        this.capPurchasingModule.capSubItems = [this.capPurchasingDashboard, this.capInventoryReceipts, this.capSupplierPurchaseOrders, this.capSupplierAging]; // Changed: Added Dashboard to Purchasing submenu
         this.capPurchasingDashboard.name = "cap62"; // Changed: Reuses module cap number for dashboard visibility
         this.capPurchasingDashboard.display = "Dashboard";
         this.capPurchasingDashboard.link = "home/purchasing/dashboard";
@@ -4246,10 +4308,10 @@ class DataServiceLib {
         this.capInventoryItems.display = "Inventory Items";
         this.capInventoryItems.link = "home/inventory/items";
         this.capInventoryItems.icon = "inventory_2";
-        this.capPurchaseOrders.name = "cap47";
-        this.capPurchaseOrders.display = "Purchase Orders";
-        this.capPurchaseOrders.link = "home/purchasing/orders";
-        this.capPurchaseOrders.icon = "shopping_bag";
+        this.capSupplierPurchaseOrders.name = "cap47";
+        this.capSupplierPurchaseOrders.display = "Purchase Orders";
+        this.capSupplierPurchaseOrders.link = "home/purchasing/orders";
+        this.capSupplierPurchaseOrders.icon = "shopping_bag";
         this.capInventoryReceipts.name = "cap38";
         this.capInventoryReceipts.display = "Purchases"; // Changed: "Receipts" → "Purchases"
         this.capInventoryReceipts.link = "home/purchasing/purchases"; // Changed: inventory-receipts → purchases
@@ -6556,12 +6618,16 @@ class AccountingService {
             heroField: 'creditNoteID'
         };
         // Credit note action buttons
-        this.creditNoteSubmitButton = { name: 'submit', inDialog: true, display: 'Submit', icon: { name: 'send' },
-            action: { url: 'creditnotes?action=submit', method: 'post', successMessage: 'Credit note submitted' },
-            confirm: { message: 'Submit credit note? This reverses revenue and VAT in the ledger.' },
+        // Changed: issuing now also settles the linked invoice in the same step, so the message says so —
+        // it used to leave the ledger crediting AR while the invoice still showed the full balance.
+        this.creditNoteSubmitButton = { name: 'submit', inDialog: true, display: 'Issue', icon: { name: 'send' },
+            action: { url: 'creditnotes?action=submit', method: 'post', successMessage: 'Credit note issued' },
+            confirm: { message: 'Issue this credit note? It reverses revenue and VAT in the ledger and credits the linked invoice.' },
             visible: x => x.status == CreditNoteStatus.Draft,
             disabled: x => x.totalAmount == 0
         };
+        // Changed: only needed now for a credit raised against an invoice that had no balance left at the
+        // time (a return after payment) and is later netted off. The normal path applies on issue.
         this.creditNoteApplyButton = { name: 'apply', inDialog: true, display: 'Apply to Invoice', icon: { name: 'link', color: 'blue' },
             action: { url: 'creditnotes?action=apply', method: 'post', successMessage: 'Credit applied to invoice' },
             confirm: { message: 'Apply this credit against the linked invoice balance?' },
@@ -8367,6 +8433,10 @@ class TabService {
             return value !== undefined && value !== null ? String(value) : match;
         });
     }
+    // Added: resolved count URL for a tab — public so hosts can tell when the parent record finally supplies the id
+    resolveCountUrl(config, parentData) {
+        return config?.countAction?.url ? this.transformCountUrl(config.countAction.url, parentData) : '';
+    }
     // Initialize tab counts and reload subjects for all tabs
     initializeTabs(tableConfigs, parentData) {
         const tabCounts = {};
@@ -8384,6 +8454,8 @@ class TabService {
     ) {
         // Changed: Transform URL by replacing {propertyName} placeholders with parentData values
         const transformedUrl = this.transformCountUrl(countAction.url, parentData);
+        if (transformedUrl?.includes('{'))
+            return; // Added: parent record not loaded yet — firing with the raw {id} placeholder makes the API drop the parent filter and answer with a GLOBAL count (the stale badge bug)
         const transformedAction = { ...countAction, url: transformedUrl };
         this.dataService.CallApi(transformedAction).subscribe((apiResponse) => {
             if (apiResponse.success) {
@@ -8738,6 +8810,81 @@ class AgentService {
             error: () => this.typing.next(false)
         });
     }
+    // Transcribe a recording WITHOUT invoking the agent — backs the composer's Stop button, so the user can
+    // review and edit what was heard before deciding to send.
+    transcribeOnly(audio, fileName) {
+        const form = new FormData();
+        form.append('audio', audio, fileName);
+        return this.dataService.CallApi({ url: 'agent/transcribe', method: 'post', isFormData: true }, form);
+    }
+    // Send a composed message — any combination of a staged photo, a voice clip and typed text, in one go.
+    // A placeholder user bubble goes up immediately and is swapped for the derived text when the backend
+    // replies, which also keeps it above the assistant's answer (that arrives over SignalR mid-request).
+    sendComposed(photo, photoName, audio, audioName, caption = '') {
+        const hasPhoto = !!(photo && photo.size);
+        const hasAudio = !!(audio && audio.size);
+        if (!hasPhoto && !hasAudio && !caption.trim())
+            return;
+        const placeholder = {
+            role: 'user',
+            content: caption.trim() || (hasAudio ? 'Voice note…' : 'Photo…'),
+            createdDate: new Date(),
+            pending: true
+        };
+        this.messages.next([...this.messages.value, placeholder]);
+        this.typing.next(true);
+        const form = new FormData();
+        if (hasPhoto)
+            form.append('photo', photo, photoName);
+        if (hasAudio)
+            form.append('audio', audio, audioName);
+        form.append('text', caption.trim());
+        form.append('appName', this.appName);
+        this.dataService.CallApi({ url: 'agent/media', method: 'post', isFormData: true }, form).subscribe({
+            next: (res) => {
+                this.typing.next(false);
+                if (res?.success && res.data?.inputText) {
+                    this.replaceMessage(placeholder, { ...placeholder, content: res.data.inputText, pending: false });
+                    return;
+                }
+                // Nothing usable came back — drop the placeholder and say why
+                this.removeMessage(placeholder);
+                this.messages.next([...this.messages.value, {
+                        role: 'assistant',
+                        content: res?.message || 'Sorry, I could not process that. Please try again.',
+                        createdDate: new Date()
+                    }]);
+            },
+            error: () => {
+                this.typing.next(false);
+                this.removeMessage(placeholder);
+                this.messages.next([...this.messages.value, {
+                        role: 'assistant',
+                        content: 'Sorry, that could not be sent. Please check your connection and try again.',
+                        createdDate: new Date()
+                    }]);
+            }
+        });
+    }
+    // Changed: kept so existing callers of the single-attachment API keep working
+    sendMedia(file, fileName, kind, caption = '') {
+        if (kind === 'voice')
+            this.sendComposed(null, '', file, fileName, caption);
+        else
+            this.sendComposed(file, fileName, null, '', caption);
+    }
+    // Swap a message in place so its position in the thread is preserved
+    replaceMessage(target, updated) {
+        const msgs = this.messages.value.slice();
+        const index = msgs.indexOf(target);
+        if (index < 0)
+            return;
+        msgs[index] = updated;
+        this.messages.next(msgs);
+    }
+    removeMessage(target) {
+        this.messages.next(this.messages.value.filter(m => m !== target));
+    }
     // Start a new conversation — only when user explicitly clicks "New conversation"
     newConversation() {
         this.messages.next([]);
@@ -8979,7 +9126,30 @@ class LastRouteService {
             return null;
         const map = this.storage.getPersistent(Constants.LAST_ROUTE) || {};
         const route = map[user];
-        return this.isResumable(route) ? route : null;
+        if (!this.isResumable(route))
+            return null;
+        // Changed: a page the role can no longer open (capability revoked, menu item retired) must not be resumed —
+        // drop it so the next visit goes straight to the default page instead of re-testing a dead entry
+        if (!(await this.allowed(route))) {
+            await this.clear();
+            return null;
+        }
+        return route;
+    }
+    // Added: single navigation entry point for callers resuming a session. Falls back to the app's default page
+    // when the saved route no longer exists — without this a removed route falls through the app's wildcard
+    // route (which redirects back to the landing page) and the user bounces instead of landing anywhere.
+    async navigateTo(target, fallback = 'home') {
+        if (!target || target === fallback) {
+            this.router.navigate([fallback]);
+            return;
+        }
+        const ok = await this.router.navigate([target]).catch(() => false);
+        const landed = this.strip(this.router.url);
+        if (ok && (landed === target || landed.startsWith(target + '/')))
+            return;
+        await this.clear(); // stale entry — never send anyone here again
+        this.router.navigate([fallback]);
     }
     // Explicit logoff drops only this user's entry — other users on the device keep theirs
     async clear() {
@@ -8997,15 +9167,47 @@ class LastRouteService {
     }
     // Strip the leading slash and any query/fragment so what we store matches what router.navigate expects
     normalize(url) {
-        const route = (url || '').split('?')[0].split('#')[0].replace(/^\//, '');
+        const route = this.strip(url); // Changed: share the stripping with navigateTo's landed-URL check
         return this.isResumable(route) ? route : null;
     }
+    // Added: url → bare route (no leading slash, no query, no fragment)
+    strip(url) {
+        return (url || '').split('?')[0].split('#')[0].replace(/^\//, '');
+    }
     // Only real, landable pages under home — never the bare shell, never a one-shot detour
     isResumable(route) {
         if (!route || !route.startsWith('home/'))
             return false;
         return !this.excluded.some(x => route.startsWith(x));
     }
+    // Added: the signed-in user's capability map, read from storage for the same reason as user() —
+    // AuthService.myRole is still empty this early in a session resume (the landing page has no auth guard)
+    async role() {
+        try {
+            return JSON.parse(await this.storage.get(Constants.AUTH_ROLES));
+        }
+        catch {
+            return null;
+        }
+    }
+    // Added: a route is resumable only while it still maps to a menu page this role can open. Retired pages lose
+    // their cap item, revoked pages lose their role flag — both land the user on the default page instead.
+    async allowed(route) {
+        const items = this.flatten(this.dataService.appConfig?.capItems);
+        if (!items.length)
+            return true; // no menu configured — nothing to validate against, stay permissive
+        const match = items
+            .filter(x => x.link && x.link.length > 'home'.length && (route === x.link || route.startsWith(x.link + '/')))
+            .sort((a, b) => b.link.length - a.link.length)[0]; // longest link wins: 'home/trips' beats the bare 'home'
+        if (!match)
+            return false; // not a menu destination (removed page, or a transient detour) — do not resume
+        const role = await this.role();
+        return role ? !!role[match.name] : true; // unreadable role must not disable the feature — the page still guards itself
+    }
+    // Added: cap items nest (group → sub items), so flatten the whole tree before matching a link
+    flatten(items) {
+        return (items || []).reduce((all, x) => all.concat(x, this.flatten(x.capSubItems)), []);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LastRouteService, deps: [{ token: i1$2.Router }, { token: StorageService }, { token: DataServiceLib }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LastRouteService, providedIn: 'root' }); }
 }
@@ -10077,6 +10279,12 @@ class SelectCommonComponent {
         if (this.masterField)
             return;
         const transformedAction = this.transformLoadUrl(loadAction);
+        // Changed: a URL still holding an unresolved {placeholder} has no id to fetch against. Sending it asks
+        // the server for the literal string, which 400s and pops an error dialog over the form the operator is
+        // filling in. Wait for the parent field to be set - ngOnChanges re-fetches once the URL resolves.
+        // Same rule the tab-count badges already follow, and for the same reason.
+        if (transformedAction?.url?.includes('{'))
+            return;
         this.dataService.CallApi(transformedAction, "").subscribe((apiResponse) => {
             if (apiResponse.success) {
                 // Always update options when new data arrives
@@ -12047,6 +12255,20 @@ class SelectComponent extends SelectCommonComponent {
             this.getData(action);
         }
     }
+    // Changed: re-fetch when a {placeholder} loadAction URL resolves to a different value (e.g. the customer changed on the load form).
+    // resolveLoadAction memoizes on the resolved URL, so fields without a placeholder keep the same object and never reach the re-fetch.
+    ngOnChanges(changes) {
+        super.ngOnChanges();
+        const change = changes?.['loadAction'];
+        if (!change || change.firstChange || change.previousValue?.url === change.currentValue?.url)
+            return;
+        // Changed: the previous selection belonged to the previous parent, so it cannot stand once the parent changes
+        if (this.value != null) {
+            this.value = null;
+            this.changed();
+        }
+        this.getData(change.currentValue);
+    }
     onHoverChange(isHovered) {
         this.isHovered = isHovered;
     }
@@ -12086,7 +12308,7 @@ class SelectComponent extends SelectCommonComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SelectComponent, deps: [{ token: MessageService }, { token: DataServiceLib }, { token: DialogService }, { token: ButtonService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: SelectComponent, isStandalone: false, selector: "spa-select", inputs: { detailsConfig: "detailsConfig" }, usesInheritance: true, ngImport: i0, template: "<spa-select-common [width]=\"width\" [readonly]=\"readonly\" [required]=\"required\" [defaultFirstValue]=\"defaultFirstValue\"\n                   [readonlyMode]=\"readonlyMode\" [hint]=\"hint\" [placeholder]=\"placeholder\"\n                   [display]=\"display\" [(value)]=\"value\" [options]=\"options\" [masterOptions]=\"masterOptions\" [masterField]=\"masterField\"\n                   [optionValue]=\"optionValue\" [optionDisplay]=\"optionDisplay\" [optionDisplayExtra]=\"optionDisplayExtra\"\n                   [nullable]=\"nullable\" [infoMessage]=\"infoMessage\" [copyContent]=\"copyContent\" [loadAction]=\"loadAction\" [loadIDField]=\"loadIDField\" [field]=\"field\" [data]=\"data\"\n                   (valueChange)=\"valueChange.emit($event)\"\n                   (hoverChange)=\"onHoverChange($event)\">\n  <ng-container additionalButtons>\n    <button mat-icon-button *ngIf=\"detailsConfig && canCreate() && isHovered\" (click)=\"onPeekClick($event, 'create')\" matTooltip=\"Add\" matTooltipPosition=\"above\">\n      <mat-icon class=\"tinyIcon\" style=\"color: green;\">add</mat-icon>\n    </button>\n    <button mat-icon-button *ngIf=\"detailsConfig && canView() && isHovered && value\" (click)=\"onPeekClick($event, 'view')\" matTooltip=\"View\" matTooltipPosition=\"above\">\n      <mat-icon class=\"tinyIcon\" color=\"primary\">launch</mat-icon>\n    </button>\n\n  </ng-container>\n</spa-select-common>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: SelectCommonComponent, selector: "spa-select-common", inputs: ["width", "readonly", "required", "defaultFirstValue", "readonlyMode", "hint", "placeholder", "display", "value", "options", "masterOptions", "masterField", "optionValue", "optionDisplay", "optionDisplayExtra", "nullable", "infoMessage", "copyContent", "loadAction", "loadIDField", "field", "data"], outputs: ["valueChange", "hoverChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: SelectComponent, isStandalone: false, selector: "spa-select", inputs: { detailsConfig: "detailsConfig" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<spa-select-common [width]=\"width\" [readonly]=\"readonly\" [required]=\"required\" [defaultFirstValue]=\"defaultFirstValue\"\n                   [readonlyMode]=\"readonlyMode\" [hint]=\"hint\" [placeholder]=\"placeholder\"\n                   [display]=\"display\" [(value)]=\"value\" [options]=\"options\" [masterOptions]=\"masterOptions\" [masterField]=\"masterField\"\n                   [optionValue]=\"optionValue\" [optionDisplay]=\"optionDisplay\" [optionDisplayExtra]=\"optionDisplayExtra\"\n                   [nullable]=\"nullable\" [infoMessage]=\"infoMessage\" [copyContent]=\"copyContent\" [loadAction]=\"loadAction\" [loadIDField]=\"loadIDField\" [field]=\"field\" [data]=\"data\"\n                   (valueChange)=\"valueChange.emit($event)\"\n                   (hoverChange)=\"onHoverChange($event)\">\n  <ng-container additionalButtons>\n    <button mat-icon-button *ngIf=\"detailsConfig && canCreate() && isHovered\" (click)=\"onPeekClick($event, 'create')\" matTooltip=\"Add\" matTooltipPosition=\"above\">\n      <mat-icon class=\"tinyIcon\" style=\"color: green;\">add</mat-icon>\n    </button>\n    <button mat-icon-button *ngIf=\"detailsConfig && canView() && isHovered && value\" (click)=\"onPeekClick($event, 'view')\" matTooltip=\"View\" matTooltipPosition=\"above\">\n      <mat-icon class=\"tinyIcon\" color=\"primary\">launch</mat-icon>\n    </button>\n\n  </ng-container>\n</spa-select-common>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: SelectCommonComponent, selector: "spa-select-common", inputs: ["width", "readonly", "required", "defaultFirstValue", "readonlyMode", "hint", "placeholder", "display", "value", "options", "masterOptions", "masterField", "optionValue", "optionDisplay", "optionDisplayExtra", "nullable", "infoMessage", "copyContent", "loadAction", "loadIDField", "field", "data"], outputs: ["valueChange", "hoverChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
@@ -13190,6 +13412,7 @@ class TableComponent {
         this.inTab = false;
         this.nestingLevel = 0; // Changed: Track nesting depth for dialog recursion control
         this.dataLoad = new EventEmitter();
+        this.totalChange = new EventEmitter(); // Added: row total for the set this grid actually loaded — lets hosts (tab count badges) reuse the filtered result instead of firing a second, unfiltered count call
         this.actionSuccess = new EventEmitter();
         this.refreshClick = new EventEmitter();
         this.searchClick = new EventEmitter();
@@ -13674,6 +13897,7 @@ class TableComponent {
     }
     dataLoaded(x) {
         this.dataLoad.emit(x);
+        this.totalChange.emit(this.pagedMode ? this.serverTotal : (Array.isArray(x) ? x.length : 0)); // Added: paged mode already knows the true server total; legacy mode loads the whole filtered set, so its length IS the total
         if (this.config.tileConfig?.loadAction) {
             this.tileReload.next(true);
         }
@@ -14138,7 +14362,7 @@ class TableComponent {
         this.setPaginator();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TableComponent, deps: [{ token: DataServiceLib }, { token: MessageService }, { token: i1$3.BreakpointObserver }, { token: i4.MatDialog }, { token: ButtonService }, { token: DialogService }, { token: TableConfigService }, { token: ConditionService }, { token: AuthService }, { token: SignalRService }, { token: OfflineService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: TableComponent, isStandalone: false, selector: "spa-table", inputs: { data: "data", tileData: "tileData", config: "config", localMode: "localMode", parentDetails: "parentDetails", reload: "reload", activeTab: "activeTab", inTab: "inTab", nestingLevel: "nestingLevel" }, outputs: { dataLoad: "dataLoad", actionSuccess: "actionSuccess", refreshClick: "refreshClick", searchClick: "searchClick", createClick: "createClick", actionClick: "actionClick", inputChange: "inputChange", actionResponse: "actionResponse" }, viewQueries: [{ propertyName: "tablePaginator", first: true, predicate: ["tablePaginator"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\n<ng-container *ngIf=\"hasFormAccess\">\n\n  <!-- Search -->\n  <spa-search\n    *ngIf=\"config.searchConfig\" [config]=\"config.searchConfig\" [smallScreen]=\"smallScreen\" [tableDataSource]=\"tableDataSource\" style=\"margin-bottom: 20px;\" (searchClick)=\"searchClicked($event)\">\n  </spa-search>\n\n  <!-- Header -->\n  <app-table-header\n    [config]=\"config\" [data]=\"dataSource\" [tableDataSource]=\"tableDataSource\" [tileConfig]=\"config.tileConfig\" [tileData]=\"tileData\" [tileReload]=\"tileReload\" [lastSearch]=\"lastSearch\" [smallScreen]=\"smallScreen\"\n    [showFilterButton]=\"showFilterButton\" [isRealTime]=\"config.realTime\" [isConnected]=\"isSignalRConnected\"\n    (createClick)=\"newModel()\" (customClick)=\"customModel($event,null)\"\n    (refreshClick)=\"refreshClicked()\" (tileClick)=\"tileClicked($event)\" (tileUnClick)=\"tileUnClicked($event)\" (filterChange)=\"filterChanged($event)\">\n  </app-table-header>\n\n  <!-- Added: paged-mode filter hint \u2014 the client filter only covers rows loaded so far -->\n  <div *ngIf=\"pagedMode && filterActive && loadedRows.length < serverTotal\" class=\"paged-filter-hint\">\n    <mat-icon>info</mat-icon>\n    <span>Filtering only the {{loadedRows.length}} loaded rows of {{serverTotal}}. {{ config.searchConfig ? 'Use Search for complete results.' : 'Refine with search for complete results.' }}</span>\n  </div>\n\n\n  <!-- Table -->\n  <div *ngIf=\"!config.viewType || config?.viewType === 'table'\">\n\n    <p *ngIf=\"!config\"><em>Configure Table</em></p>\n    <p *ngIf=\"!dataSource\"><em>Loading...</em></p>\n\n    <div *ngIf=\"dataSource && (!smallScreen || (smallScreen && dataSource?.length > 0))\">\n\n      <table mat-table [dataSource]=\"tableDataSource\" [trackBy]=\"trackByRow\" [ngClass]=\"elevation\">\n\n        <ng-container *ngFor=\"let column of config.columns\" [matColumnDef]=\"column.name\">\n          <th mat-header-cell *matHeaderCellDef >{{ column.alias ?? column.name | camelToWords }}</th>\n          <td mat-cell *matCellDef=\"let row;\" class=\"right-padding\" >\n\n            <!-- Added: inline edit \u2014 editable cells swap to their form-field editor while the row is in edit mode -->\n            <app-inline-cell *ngIf=\"isRowEditing(row) && getInlineField(column); else displayCell\" [field]=\"getInlineField(column)\" [data]=\"editingModel\"></app-inline-cell>\n\n            <!-- Rows -->\n            <ng-template #displayCell>\n              <app-table-row [column]=\"column\" [row]=\"row\" [config]=\"config\" [smallScreen]=\"smallScreen\"\n                (actionClick)=\"actionClicked(column.name, row)\" (columnClick)=\"columnClicked(column, row)\" (showBannerEvent)=\"showBanner($event)\">\n              </app-table-row>\n            </ng-template>\n\n          </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"action\">\n          <th mat-header-cell *matHeaderCellDef> Action </th>\n          <td mat-cell *matCellDef=\"let row\" [ngStyle]=\"{width:false ? '20px' : actionsWidth}\">\n            <div class=\"action-buttons-container\">\n\n              <!-- Added: inline edit \u2014 while a row edits in place, its actions collapse to submit/cancel -->\n              <ng-container *ngIf=\"isRowEditing(row); else rowActions\">\n                <button mat-icon-button matTooltip=\"Save\" matTooltipPosition=\"above\" (click)=\"submitInlineEdit()\"><mat-icon class=\"inline-save\">check</mat-icon></button> <!-- Changed: dropped color=\"primary\" \u2014 the icon now carries a green save cue -->\n                <button mat-icon-button matTooltip=\"Cancel\" matTooltipPosition=\"above\" (click)=\"cancelInlineEdit()\"><mat-icon class=\"inline-cancel\">close</mat-icon></button> <!-- Changed: red cancel cue -->\n              </ng-container>\n\n              <!-- Actions -->\n              <ng-template #rowActions>\n                <app-table-action\n                  [displayedButtons]=\"displayedButtons\" [config]=\"config\" [smallScreen]=\"smallScreen\" [row]=\"row\" (actionClick)=\"actionClicked($event.name, $event.row)\">\n                </app-table-action>\n              </ng-template>\n\n            </div>\n          </td>\n        </ng-container>\n\n\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n        <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" [ngClass]=\"{'make-gray': (config.greyOut && config.greyOut(row)) || row.pendingApproval, 'row-editing': isRowEditing(row)}\"></tr> <!-- Changed: row-editing flags the row that is open for inline edit -->\n      </table>\n\n    </div>\n\n    <!-- Changed: Removed *ngIf condition to keep paginator always in DOM and maintain ViewChild reference -->\n    <!-- Changed: Added CSS class binding to hide when no data instead of conditional rendering -->\n    <!-- Changed: Legacy paginator only renders in non-paged mode (pagedMode is constant per instance, set before first render) -->\n    <mat-paginator *ngIf=\"!pagedMode\"\n      #tablePaginator\n      [pageSizeOptions]=\"config.pageSizes ?? [10, 20, 50]\"\n      [ngClass]=\"{'paginator-hidden': !dataSource || (smallScreen && dataSource?.length === 0)}\"\n      showFirstLastButtons>\n    </mat-paginator>\n\n    <!-- Added: manual paginator for server-side paged mode \u2014 fully state-bound, never attached to MatTableDataSource. Always visible: when filtering it pages the in-memory filtered subset (length = filtered count); otherwise the server window (length = true total). No first/last jump (would force fetching the whole gap). -->\n    <mat-paginator *ngIf=\"pagedMode\"\n      [length]=\"filterActive ? filteredRows.length : serverTotal\"\n      [pageIndex]=\"pageIndex\"\n      [pageSize]=\"pageSize\"\n      [pageSizeOptions]=\"config.pageSizes ?? [10, 20, 50]\"\n      [ngClass]=\"{'paginator-hidden': !dataSource || (smallScreen && dataSource?.length === 0)}\"\n      (page)=\"onServerPage($event)\">\n    </mat-paginator>\n\n  </div>\n  \n  <!-- Capsules -->\n  <spa-capsules *ngIf=\"config?.viewType === 'capsule'\"\n    [config]=\"config\"\n    [dataSource]=\"dataSource\"\n    [displayedButtons]=\"displayedButtons\"\n    (actionClick)=\"actionClicked($event.name, $event.row)\">\n  </spa-capsules>\n\n\n  <!-- Cards -->\n  <spa-cards *ngIf=\"config?.viewType === 'card'\"\n    [config]=\"config\"\n    [dataSource]=\"dataSource\"\n    [displayedButtons]=\"displayedButtons\"\n    [smallScreen]=\"smallScreen\"\n    (actionClick)=\"actionClicked($event.name, $event.row)\"\n    (columnClick)=\"columnClicked($event.column, $event.row)\"\n    (showBannerEvent)=\"showBanner($event)\">\n  </spa-cards>\n\n  <!-- Groups - Added: New grouped view type -->\n  <spa-groups *ngIf=\"config?.viewType === 'grouped'\"\n    [config]=\"config\"\n    [dataSource]=\"dataSource\"\n    [displayedButtons]=\"displayedButtons\"\n    (actionClick)=\"actionClicked($event.name, $event.row, $event.group, $event.button)\">\n  </spa-groups>\n\n\n  <div class=\"tin-center\">\n    <p *ngIf=\"dataSource?.length == 0\"><em>{{config.noDataMessage ?? 'No Data'}}</em></p>\n  </div>\n\n</ng-container>\n\n\n<ng-container *ngIf=\"!hasFormAccess\">\n  <div class=\"tin-center\">\n    <p><em>Access Restricted</em></p>\n  </div>\n</ng-container>\n\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#f5f5f5}tr.mat-mdc-row{transition:background-color .15s ease}tr.mat-mdc-row:hover{background-color:#2196f305}tr.mat-mdc-row.row-editing,tr.mat-mdc-row.row-editing:hover{background-color:#ffa00014}.inline-save{color:#2e7d32!important}.inline-cancel{color:#c62828!important}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.dialog-container{display:flex;flex-direction:column;height:100%;max-height:100%;min-height:0}.dialog-content{flex:1;overflow:hidden;display:flex;flex-direction:column;min-height:0}.dialog-scroll-content{flex:1;overflow-y:auto;max-height:none!important;display:flex;flex-direction:column;min-height:0}.dialog-container:not(.dialog-has-tables){height:auto}.dialog-container:not(.dialog-has-tables) .dialog-scroll-content{flex:1 1 auto}.dialog-scroll-content>.tin-input{flex:1;display:flex;flex-direction:column}.dialog-scroll-content>.tin-input>spa-tabs{flex:1;display:flex;flex-direction:column}mat-dialog-actions{flex-shrink:0;justify-content:flex-start}.paginator-hidden{display:none!important}.paged-filter-hint{display:flex;align-items:center;gap:8px;margin:4px 0 8px;padding:6px 12px;border-radius:4px;background-color:#fff8e1;color:#795548;font-size:13px}.paged-filter-hint mat-icon{font-size:18px;width:18px;height:18px;color:#ffa000}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i7.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i7.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i7.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i7.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i7.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i7.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i7.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i7.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i7.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i7.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i14$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: SearchComponent, selector: "spa-search", inputs: ["config", "smallScreen", "tableDataSource"], outputs: ["searchClick"] }, { kind: "component", type: TableHeaderComponent, selector: "app-table-header", inputs: ["lastSearch", "config", "hideTitle", "tableDataSource", "tileConfig", "smallScreen", "tileReload", "showFilterButton", "data", "tileData", "isRealTime", "isConnected"], outputs: ["createClick", "customClick", "refreshClick", "tileClick", "tileUnClick", "filterChange"] }, { kind: "component", type: TableRowComponent, selector: "app-table-row", inputs: ["column", "row", "config", "smallScreen"], outputs: ["actionClick", "columnClick", "showBannerEvent"] }, { kind: "component", type: TableActionComponent, selector: "app-table-action", inputs: ["displayedButtons", "config", "row", "smallScreen"], outputs: ["actionClick"] }, { kind: "component", type: InlineCellComponent, selector: "app-inline-cell", inputs: ["field", "data"], outputs: ["valueChange"] }, { kind: "component", type: CapsulesComponent, selector: "spa-capsules", inputs: ["config", "dataSource", "displayedButtons"], outputs: ["actionClick"] }, { kind: "component", type: CardsComponent, selector: "spa-cards", inputs: ["config", "dataSource", "displayedButtons", "smallScreen"], outputs: ["actionClick", "columnClick", "showBannerEvent"] }, { kind: "component", type: GroupsComponent, selector: "spa-groups", inputs: ["config", "dataSource", "displayedButtons"], outputs: ["actionClick"] }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: TableComponent, isStandalone: false, selector: "spa-table", inputs: { data: "data", tileData: "tileData", config: "config", localMode: "localMode", parentDetails: "parentDetails", reload: "reload", activeTab: "activeTab", inTab: "inTab", nestingLevel: "nestingLevel" }, outputs: { dataLoad: "dataLoad", totalChange: "totalChange", actionSuccess: "actionSuccess", refreshClick: "refreshClick", searchClick: "searchClick", createClick: "createClick", actionClick: "actionClick", inputChange: "inputChange", actionResponse: "actionResponse" }, viewQueries: [{ propertyName: "tablePaginator", first: true, predicate: ["tablePaginator"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "\n<ng-container *ngIf=\"hasFormAccess\">\n\n  <!-- Search -->\n  <spa-search\n    *ngIf=\"config.searchConfig\" [config]=\"config.searchConfig\" [smallScreen]=\"smallScreen\" [tableDataSource]=\"tableDataSource\" style=\"margin-bottom: 20px;\" (searchClick)=\"searchClicked($event)\">\n  </spa-search>\n\n  <!-- Header -->\n  <app-table-header\n    [config]=\"config\" [data]=\"dataSource\" [tableDataSource]=\"tableDataSource\" [tileConfig]=\"config.tileConfig\" [tileData]=\"tileData\" [tileReload]=\"tileReload\" [lastSearch]=\"lastSearch\" [smallScreen]=\"smallScreen\"\n    [showFilterButton]=\"showFilterButton\" [isRealTime]=\"config.realTime\" [isConnected]=\"isSignalRConnected\"\n    (createClick)=\"newModel()\" (customClick)=\"customModel($event,null)\"\n    (refreshClick)=\"refreshClicked()\" (tileClick)=\"tileClicked($event)\" (tileUnClick)=\"tileUnClicked($event)\" (filterChange)=\"filterChanged($event)\">\n  </app-table-header>\n\n  <!-- Added: paged-mode filter hint \u2014 the client filter only covers rows loaded so far -->\n  <div *ngIf=\"pagedMode && filterActive && loadedRows.length < serverTotal\" class=\"paged-filter-hint\">\n    <mat-icon>info</mat-icon>\n    <span>Filtering only the {{loadedRows.length}} loaded rows of {{serverTotal}}. {{ config.searchConfig ? 'Use Search for complete results.' : 'Refine with search for complete results.' }}</span>\n  </div>\n\n\n  <!-- Table -->\n  <div *ngIf=\"!config.viewType || config?.viewType === 'table'\">\n\n    <p *ngIf=\"!config\"><em>Configure Table</em></p>\n    <p *ngIf=\"!dataSource\"><em>Loading...</em></p>\n\n    <div *ngIf=\"dataSource && (!smallScreen || (smallScreen && dataSource?.length > 0))\">\n\n      <table mat-table [dataSource]=\"tableDataSource\" [trackBy]=\"trackByRow\" [ngClass]=\"elevation\">\n\n        <ng-container *ngFor=\"let column of config.columns\" [matColumnDef]=\"column.name\">\n          <th mat-header-cell *matHeaderCellDef >{{ column.alias ?? column.name | camelToWords }}</th>\n          <td mat-cell *matCellDef=\"let row;\" class=\"right-padding\" >\n\n            <!-- Added: inline edit \u2014 editable cells swap to their form-field editor while the row is in edit mode -->\n            <app-inline-cell *ngIf=\"isRowEditing(row) && getInlineField(column); else displayCell\" [field]=\"getInlineField(column)\" [data]=\"editingModel\"></app-inline-cell>\n\n            <!-- Rows -->\n            <ng-template #displayCell>\n              <app-table-row [column]=\"column\" [row]=\"row\" [config]=\"config\" [smallScreen]=\"smallScreen\"\n                (actionClick)=\"actionClicked(column.name, row)\" (columnClick)=\"columnClicked(column, row)\" (showBannerEvent)=\"showBanner($event)\">\n              </app-table-row>\n            </ng-template>\n\n          </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"action\">\n          <th mat-header-cell *matHeaderCellDef> Action </th>\n          <td mat-cell *matCellDef=\"let row\" [ngStyle]=\"{width:false ? '20px' : actionsWidth}\">\n            <div class=\"action-buttons-container\">\n\n              <!-- Added: inline edit \u2014 while a row edits in place, its actions collapse to submit/cancel -->\n              <ng-container *ngIf=\"isRowEditing(row); else rowActions\">\n                <button mat-icon-button matTooltip=\"Save\" matTooltipPosition=\"above\" (click)=\"submitInlineEdit()\"><mat-icon class=\"inline-save\">check</mat-icon></button> <!-- Changed: dropped color=\"primary\" \u2014 the icon now carries a green save cue -->\n                <button mat-icon-button matTooltip=\"Cancel\" matTooltipPosition=\"above\" (click)=\"cancelInlineEdit()\"><mat-icon class=\"inline-cancel\">close</mat-icon></button> <!-- Changed: red cancel cue -->\n              </ng-container>\n\n              <!-- Actions -->\n              <ng-template #rowActions>\n                <app-table-action\n                  [displayedButtons]=\"displayedButtons\" [config]=\"config\" [smallScreen]=\"smallScreen\" [row]=\"row\" (actionClick)=\"actionClicked($event.name, $event.row)\">\n                </app-table-action>\n              </ng-template>\n\n            </div>\n          </td>\n        </ng-container>\n\n\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n        <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\" [ngClass]=\"{'make-gray': (config.greyOut && config.greyOut(row)) || row.pendingApproval, 'row-editing': isRowEditing(row)}\"></tr> <!-- Changed: row-editing flags the row that is open for inline edit -->\n      </table>\n\n    </div>\n\n    <!-- Changed: Removed *ngIf condition to keep paginator always in DOM and maintain ViewChild reference -->\n    <!-- Changed: Added CSS class binding to hide when no data instead of conditional rendering -->\n    <!-- Changed: Legacy paginator only renders in non-paged mode (pagedMode is constant per instance, set before first render) -->\n    <mat-paginator *ngIf=\"!pagedMode\"\n      #tablePaginator\n      [pageSizeOptions]=\"config.pageSizes ?? [10, 20, 50]\"\n      [ngClass]=\"{'paginator-hidden': !dataSource || (smallScreen && dataSource?.length === 0)}\"\n      showFirstLastButtons>\n    </mat-paginator>\n\n    <!-- Added: manual paginator for server-side paged mode \u2014 fully state-bound, never attached to MatTableDataSource. Always visible: when filtering it pages the in-memory filtered subset (length = filtered count); otherwise the server window (length = true total). No first/last jump (would force fetching the whole gap). -->\n    <mat-paginator *ngIf=\"pagedMode\"\n      [length]=\"filterActive ? filteredRows.length : serverTotal\"\n      [pageIndex]=\"pageIndex\"\n      [pageSize]=\"pageSize\"\n      [pageSizeOptions]=\"config.pageSizes ?? [10, 20, 50]\"\n      [ngClass]=\"{'paginator-hidden': !dataSource || (smallScreen && dataSource?.length === 0)}\"\n      (page)=\"onServerPage($event)\">\n    </mat-paginator>\n\n  </div>\n  \n  <!-- Capsules -->\n  <spa-capsules *ngIf=\"config?.viewType === 'capsule'\"\n    [config]=\"config\"\n    [dataSource]=\"dataSource\"\n    [displayedButtons]=\"displayedButtons\"\n    (actionClick)=\"actionClicked($event.name, $event.row)\">\n  </spa-capsules>\n\n\n  <!-- Cards -->\n  <spa-cards *ngIf=\"config?.viewType === 'card'\"\n    [config]=\"config\"\n    [dataSource]=\"dataSource\"\n    [displayedButtons]=\"displayedButtons\"\n    [smallScreen]=\"smallScreen\"\n    (actionClick)=\"actionClicked($event.name, $event.row)\"\n    (columnClick)=\"columnClicked($event.column, $event.row)\"\n    (showBannerEvent)=\"showBanner($event)\">\n  </spa-cards>\n\n  <!-- Groups - Added: New grouped view type -->\n  <spa-groups *ngIf=\"config?.viewType === 'grouped'\"\n    [config]=\"config\"\n    [dataSource]=\"dataSource\"\n    [displayedButtons]=\"displayedButtons\"\n    (actionClick)=\"actionClicked($event.name, $event.row, $event.group, $event.button)\">\n  </spa-groups>\n\n\n  <div class=\"tin-center\">\n    <p *ngIf=\"dataSource?.length == 0\"><em>{{config.noDataMessage ?? 'No Data'}}</em></p>\n  </div>\n\n</ng-container>\n\n\n<ng-container *ngIf=\"!hasFormAccess\">\n  <div class=\"tin-center\">\n    <p><em>Access Restricted</em></p>\n  </div>\n</ng-container>\n\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#f5f5f5}tr.mat-mdc-row{transition:background-color .15s ease}tr.mat-mdc-row:hover{background-color:#2196f305}tr.mat-mdc-row.row-editing,tr.mat-mdc-row.row-editing:hover{background-color:#ffa00014}.inline-save{color:#2e7d32!important}.inline-cancel{color:#c62828!important}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.dialog-container{display:flex;flex-direction:column;height:100%;max-height:100%;min-height:0}.dialog-content{flex:1;overflow:hidden;display:flex;flex-direction:column;min-height:0}.dialog-scroll-content{flex:1;overflow-y:auto;max-height:none!important;display:flex;flex-direction:column;min-height:0}.dialog-container:not(.dialog-has-tables){height:auto}.dialog-container:not(.dialog-has-tables) .dialog-scroll-content{flex:1 1 auto}.dialog-scroll-content>.tin-input{flex:1;display:flex;flex-direction:column}.dialog-scroll-content>.tin-input>spa-tabs{flex:1;display:flex;flex-direction:column}mat-dialog-actions{flex-shrink:0;justify-content:flex-start}.paginator-hidden{display:none!important}.paged-filter-hint{display:flex;align-items:center;gap:8px;margin:4px 0 8px;padding:6px 12px;border-radius:4px;background-color:#fff8e1;color:#795548;font-size:13px}.paged-filter-hint mat-icon{font-size:18px;width:18px;height:18px;color:#ffa000}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i7.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i7.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i7.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i7.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i7.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i7.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i7.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i7.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i7.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i7.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i14$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: SearchComponent, selector: "spa-search", inputs: ["config", "smallScreen", "tableDataSource"], outputs: ["searchClick"] }, { kind: "component", type: TableHeaderComponent, selector: "app-table-header", inputs: ["lastSearch", "config", "hideTitle", "tableDataSource", "tileConfig", "smallScreen", "tileReload", "showFilterButton", "data", "tileData", "isRealTime", "isConnected"], outputs: ["createClick", "customClick", "refreshClick", "tileClick", "tileUnClick", "filterChange"] }, { kind: "component", type: TableRowComponent, selector: "app-table-row", inputs: ["column", "row", "config", "smallScreen"], outputs: ["actionClick", "columnClick", "showBannerEvent"] }, { kind: "component", type: TableActionComponent, selector: "app-table-action", inputs: ["displayedButtons", "config", "row", "smallScreen"], outputs: ["actionClick"] }, { kind: "component", type: InlineCellComponent, selector: "app-inline-cell", inputs: ["field", "data"], outputs: ["valueChange"] }, { kind: "component", type: CapsulesComponent, selector: "spa-capsules", inputs: ["config", "dataSource", "displayedButtons"], outputs: ["actionClick"] }, { kind: "component", type: CardsComponent, selector: "spa-cards", inputs: ["config", "dataSource", "displayedButtons", "smallScreen"], outputs: ["actionClick", "columnClick", "showBannerEvent"] }, { kind: "component", type: GroupsComponent, selector: "spa-groups", inputs: ["config", "dataSource", "displayedButtons"], outputs: ["actionClick"] }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
@@ -14166,6 +14390,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                 type: Input
             }], dataLoad: [{
                 type: Output
+            }], totalChange: [{
+                type: Output
             }], actionSuccess: [{
                 type: Output
             }], refreshClick: [{
@@ -14237,7 +14463,7 @@ class SyncComponent {
         this.alertConfig = messages.length ? { messages } : null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SyncComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: SyncComponent, isStandalone: false, selector: "spa-sync", ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-auto\">\n    <h4>Pending Changes</h4>\n  </div>\n</div>\n\n<hr style=\"margin-top: 0px;\" />\n\n<div style=\"font-size: 14px;\">\n  <spa-alert *ngIf=\"alertConfig\" [config]=\"alertConfig\"></spa-alert>\n  <spa-table [config]=\"tableConfig\" [data]=\"ops\"></spa-table>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AlertComponent, selector: "spa-alert", inputs: ["config", "data"] }, { kind: "component", type: TableComponent, selector: "spa-table", inputs: ["data", "tileData", "config", "localMode", "parentDetails", "reload", "activeTab", "inTab", "nestingLevel"], outputs: ["dataLoad", "actionSuccess", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange", "actionResponse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: SyncComponent, isStandalone: false, selector: "spa-sync", ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-auto\">\n    <h4>Pending Changes</h4>\n  </div>\n</div>\n\n<hr style=\"margin-top: 0px;\" />\n\n<div style=\"font-size: 14px;\">\n  <spa-alert *ngIf=\"alertConfig\" [config]=\"alertConfig\"></spa-alert>\n  <spa-table [config]=\"tableConfig\" [data]=\"ops\"></spa-table>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AlertComponent, selector: "spa-alert", inputs: ["config", "data"] }, { kind: "component", type: TableComponent, selector: "spa-table", inputs: ["data", "tileData", "config", "localMode", "parentDetails", "reload", "activeTab", "inTab", "nestingLevel"], outputs: ["dataLoad", "totalChange", "actionSuccess", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange", "actionResponse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SyncComponent, decorators: [{
             type: Component,
@@ -14906,6 +15132,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
 
 // Floating chat widget component for in-app Agent (renamed from AssistantComponent)
 class AgentComponent {
+    static { this.MAX_RECORD_SECONDS = 120; } // Auto-stop so a forgotten recording can't run away
     constructor(agentService, signalRService) {
         this.agentService = agentService;
         this.signalRService = signalRService;
@@ -14916,9 +15143,20 @@ class AgentComponent {
         this.greeting = '';
         this.suggestedQuestions = [];
         this.isOnline = false;
+        this.isRecording = false; // Changed: voice note capture state
+        this.recordSeconds = 0;
+        this.mediaError = ''; // Changed: shown inline when the mic is blocked or unavailable
+        this.pendingPhoto = null; // Changed: photo is staged, not sent — the user adds a caption first
+        this.isTranscribing = false; // Changed: Stop pressed, waiting for the transcript to land in the text box
         this.subs = [];
         this.shouldScroll = false;
         this.viewportHandler = null; // Changed: visualViewport resize handler reference
+        // Changed: voice note recording internals
+        this.recorder = null;
+        this.mediaStream = null;
+        this.chunks = [];
+        this.recordTimer = null;
+        this.stopMode = 'send'; // Changed: what to do with the clip once stopped
     } // Changed: was assistantService
     get agentName() {
         return this.agentService.agentName;
@@ -14951,17 +15189,55 @@ class AgentComponent {
     onDocumentClick(event) {
         if (!this.isOpen)
             return;
+        // Changed: match on composedPath() instead of closest(). A control that re-renders the widget removes
+        // itself from the DOM before this handler runs — the mic button lives inside *ngIf="!isRecording", so
+        // starting a recording detaches it. closest() on a detached node finds nothing, and the widget used to
+        // close itself the instant recording began, leaving the mic live behind a hidden window.
+        //
+        // cdk-overlay-container is checked for the same reason: Material renders menus, tooltips and dialogs in
+        // an overlay attached to <body>, OUTSIDE .agent-window. Without this, picking an item from the attach
+        // menu closed the whole chat. Any overlay open on top of the widget counts as being inside it.
+        const path = (event.composedPath ? event.composedPath() : []);
+        if (path.some(el => el?.classList?.contains('agent-window')
+            || el?.classList?.contains('agent-fab')
+            || el?.classList?.contains('cdk-overlay-container')))
+            return;
+        // Fallback for browsers without composedPath, and for targets still attached
         const target = event.target;
-        if (target.closest('.agent-window') || target.closest('.agent-fab'))
-            return; // Click inside chat or FAB
+        if (target?.isConnected && (target.closest('.agent-window') || target.closest('.agent-fab')))
+            return;
+        // A detached target means the click came from a control that just re-rendered — i.e. inside the widget
+        if (target && !target.isConnected)
+            return;
         this.agentService.close();
     }
+    // Changed: sends whatever is staged — typed text, an attached photo, or both. A recording in progress is
+    // stopped and folded into the same send rather than being lost.
     sendMessage() {
-        if (!this.inputText.trim())
+        if (this.isRecording) {
+            this.stopMode = 'send';
+            this.recorder?.stop();
+            return;
+        }
+        const caption = this.inputText.trim();
+        if (!caption && !this.pendingPhoto)
             return;
-        this.agentService.sendMessage(this.inputText.trim());
+        if (this.pendingPhoto) {
+            this.agentService.sendComposed(this.pendingPhoto, this.pendingPhoto.name || 'photo.jpg', null, '', caption);
+            this.pendingPhoto = null;
+        }
+        else {
+            this.agentService.sendMessage(caption);
+        }
         this.inputText = '';
     }
+    // Changed: true when there is anything worth sending
+    get canSend() {
+        return !!this.inputText.trim() || !!this.pendingPhoto;
+    }
+    clearPhoto() {
+        this.pendingPhoto = null;
+    }
     sendSuggested(question) {
         this.agentService.sendMessage(question);
     }
@@ -14974,6 +15250,152 @@ class AgentComponent {
     newConversation() {
         this.agentService.newConversation();
     }
+    // Changed: mm:ss shown while recording
+    get recordDisplay() {
+        const mins = Math.floor(this.recordSeconds / 60);
+        const secs = this.recordSeconds % 60;
+        return `${mins}:${secs < 10 ? '0' : ''}${secs}`;
+    }
+    // Changed: voice note capture — the clip goes straight to the backend, which transcribes it and feeds the
+    // text into the agent exactly as Telegram and WhatsApp voice notes are handled
+    async startRecording() {
+        if (this.isRecording)
+            return;
+        this.mediaError = '';
+        if (!navigator.mediaDevices?.getUserMedia || typeof MediaRecorder === 'undefined') {
+            this.mediaError = 'Voice notes are not supported in this browser.';
+            return;
+        }
+        try {
+            this.mediaStream = await navigator.mediaDevices.getUserMedia({ audio: true });
+        }
+        catch {
+            this.mediaError = 'Microphone access was blocked. Allow it in your browser settings to send voice notes.';
+            return;
+        }
+        this.chunks = [];
+        this.stopMode = 'send';
+        const mimeType = this.pickAudioMimeType();
+        this.recorder = mimeType ? new MediaRecorder(this.mediaStream, { mimeType }) : new MediaRecorder(this.mediaStream);
+        this.recorder.ondataavailable = e => { if (e.data && e.data.size > 0)
+            this.chunks.push(e.data); };
+        this.recorder.onstop = () => this.finishRecording();
+        this.recorder.start();
+        this.isRecording = true;
+        this.recordSeconds = 0;
+        this.recordTimer = setInterval(() => {
+            this.recordSeconds++;
+            if (this.recordSeconds >= AgentComponent.MAX_RECORD_SECONDS)
+                this.stopRecording();
+        }, 1000);
+    }
+    // Changed: send immediately — the clip goes with whatever else is staged, no review step
+    stopRecording() {
+        if (!this.isRecording || !this.recorder)
+            return;
+        this.stopMode = 'send';
+        this.recorder.stop(); // finishRecording() runs from onstop
+    }
+    // Changed: stop and transcribe INTO the text box so the user can read it back, edit it, and send when ready
+    stopAndTranscribe() {
+        if (!this.isRecording || !this.recorder)
+            return;
+        this.stopMode = 'transcribe';
+        this.recorder.stop();
+    }
+    cancelRecording() {
+        if (!this.isRecording || !this.recorder)
+            return;
+        this.stopMode = 'cancel';
+        this.recorder.stop();
+    }
+    // Changed: "Take photo" — hands off to the device camera. On a phone this opens the camera app on the rear
+    // lens and returns the shot; no in-page camera permission is involved because the OS handles it. Desktop
+    // browsers ignore `capture` and fall back to the file picker.
+    takePhoto() {
+        this.cameraInput?.nativeElement.click();
+    }
+    // Changed: "Choose photo" — same input minus `capture`, so it opens the gallery / file picker
+    choosePhoto() {
+        this.galleryInput?.nativeElement.click();
+    }
+    // Changed: photo capture now STAGES the file instead of sending it. Nothing leaves until the user presses
+    // send, so they can add a typed or spoken caption first — that caption is the actual command, the photo is
+    // the evidence it refers to. `capture` opens the camera directly on mobile, the file picker on desktop.
+    onPhotoSelected(event) {
+        const input = event.target;
+        const file = input.files && input.files.length ? input.files[0] : null;
+        input.value = ''; // Reset so picking the same file twice still fires a change event
+        if (!file)
+            return;
+        this.pendingPhoto = file;
+        this.focusInput();
+    }
+    // Picks a container the browser can record AND the transcription endpoint accepts. Chrome/Edge/Firefox give
+    // webm/opus, Safari gives mp4 — both are supported server-side, so no transcoding is needed anywhere.
+    pickAudioMimeType() {
+        const candidates = ['audio/webm;codecs=opus', 'audio/webm', 'audio/mp4', 'audio/ogg;codecs=opus', 'audio/ogg'];
+        return candidates.find(t => MediaRecorder.isTypeSupported(t)) || '';
+    }
+    finishRecording() {
+        const mode = this.stopMode;
+        this.clearRecording();
+        if (mode === 'cancel' || !this.chunks.length) {
+            this.chunks = [];
+            return;
+        }
+        const type = this.recorder?.mimeType || 'audio/webm';
+        const blob = new Blob(this.chunks, { type });
+        const fileName = `voice-note.${this.extensionFor(type)}`;
+        this.chunks = [];
+        // Stop → transcribe into the text box for review; the photo (if any) stays staged
+        if (mode === 'transcribe') {
+            this.isTranscribing = true;
+            this.agentService.transcribeOnly(blob, fileName).subscribe({
+                next: (res) => {
+                    this.isTranscribing = false;
+                    if (res?.success && res.data?.text) {
+                        const existing = this.inputText.trim();
+                        this.inputText = existing ? `${existing} ${res.data.text}` : res.data.text;
+                        this.focusInput();
+                    }
+                    else {
+                        this.mediaError = res?.message || 'Sorry, that recording could not be transcribed.';
+                    }
+                },
+                error: () => {
+                    this.isTranscribing = false;
+                    this.mediaError = 'Sorry, that recording could not be transcribed.';
+                }
+            });
+            return;
+        }
+        // Send → the clip goes with the staged photo and whatever is typed, all in one message
+        this.agentService.sendComposed(this.pendingPhoto, this.pendingPhoto?.name || 'photo.jpg', blob, fileName, this.inputText.trim());
+        this.pendingPhoto = null;
+        this.inputText = '';
+    }
+    extensionFor(mimeType) {
+        const type = (mimeType || '').toLowerCase();
+        if (type.indexOf('mp4') >= 0)
+            return 'mp4';
+        if (type.indexOf('ogg') >= 0)
+            return 'ogg';
+        return 'webm';
+    }
+    // Releases the mic — without this the browser keeps showing the recording indicator
+    clearRecording() {
+        this.isRecording = false;
+        this.recordSeconds = 0;
+        if (this.recordTimer) {
+            clearInterval(this.recordTimer);
+            this.recordTimer = null;
+        }
+        if (this.mediaStream) {
+            this.mediaStream.getTracks().forEach(t => t.stop());
+            this.mediaStream = null;
+        }
+    }
     scrollToBottom() {
         try {
             if (this.messageContainer) {
@@ -15005,12 +15427,15 @@ class AgentComponent {
     }
     ngOnDestroy() {
         this.subs.forEach(s => s.unsubscribe());
+        if (this.isRecording)
+            this.cancelRecording(); // Changed: never leave the mic open behind a destroyed widget
+        this.clearRecording();
         if (this.viewportHandler && window.visualViewport) {
             window.visualViewport.removeEventListener('resize', this.viewportHandler);
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AgentComponent, deps: [{ token: AgentService }, { token: SignalRService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: AgentComponent, isStandalone: false, selector: "spa-agent", host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "messageContainer", first: true, predicate: ["messageContainer"], descendants: true }, { propertyName: "messageInput", first: true, predicate: ["messageInput"], descendants: true }], ngImport: i0, template: "<!-- Floating chat widget for in-app Agent (renamed from Assistant) -->\n\n<!-- FAB toggle button -->\n<button mat-fab class=\"agent-fab\" (click)=\"toggleChat()\" [matTooltip]=\"agentName\">\n  <mat-icon>{{ isOpen ? 'close' : 'chat_bubble' }}</mat-icon>\n</button>\n\n<!-- Chat window -->\n<div class=\"agent-window\" *ngIf=\"isOpen\" @slideUp>\n\n  <!-- Header with online status -->\n  <div class=\"agent-header\">\n    <div class=\"header-info\">\n      <mat-icon class=\"header-icon\">smart_toy</mat-icon>\n      <div class=\"header-text\">\n        <span class=\"header-title\">{{ agentName }}</span>\n        <span class=\"status-badge\" [class.online]=\"isOnline\" [class.offline]=\"!isOnline\">\n          <span class=\"status-dot\"></span>\n          {{ isOnline ? 'Online' : 'Offline' }}\n        </span>\n      </div>\n    </div>\n    <div class=\"header-actions\">\n      <button mat-icon-button matTooltip=\"New conversation\" (click)=\"newConversation()\">\n        <mat-icon>add_comment</mat-icon>\n      </button>\n      <button mat-icon-button matTooltip=\"Close\" (click)=\"toggleChat()\">\n        <mat-icon>remove</mat-icon>\n      </button>\n    </div>\n  </div>\n\n  <!-- Messages area -->\n  <div class=\"agent-messages\" #messageContainer>\n\n    <!-- Welcome experience (show when no messages) -->\n    <div class=\"agent-greeting\" *ngIf=\"messages.length === 0\">\n      <mat-icon class=\"greeting-icon\">smart_toy</mat-icon>\n      <p class=\"greeting-text\">{{ greeting }}</p>\n\n      <!-- Three capability pillars -->\n      <div class=\"capability-pillars\">\n\n        <!-- Pillar 1: Navigate & Inquire -->\n        <div class=\"pillar\" (click)=\"sendSuggested('How do I post a transaction?')\">\n          <div class=\"pillar-header\">\n            <mat-icon class=\"pillar-icon\">explore</mat-icon>\n            <span class=\"pillar-title\">Ask & Navigate</span>\n          </div>\n          <p class=\"pillar-desc\">Ask how to do things or find features in the app</p>\n          <span class=\"pillar-example\">\"How do I post a transaction?\"</span>\n        </div>\n\n        <!-- Pillar 2: Create & Modify -->\n        <div class=\"pillar\" (click)=\"sendSuggested('Create a new customer')\">\n          <div class=\"pillar-header\">\n            <mat-icon class=\"pillar-icon\">edit_note</mat-icon>\n            <span class=\"pillar-title\">Create & Modify</span>\n          </div>\n          <p class=\"pillar-desc\">Add, edit, or delete records using natural language</p>\n          <span class=\"pillar-example\">\"Create a new customer called Acme Ltd\"</span>\n        </div>\n\n        <!-- Pillar 3: Get Information -->\n        <div class=\"pillar\" (click)=\"sendSuggested('List all accounts')\">\n          <div class=\"pillar-header\">\n            <mat-icon class=\"pillar-icon\">search</mat-icon>\n            <span class=\"pillar-title\">Get Information</span>\n          </div>\n          <p class=\"pillar-desc\">Retrieve details, list records, or get summaries</p>\n          <span class=\"pillar-example\">\"Show me the details of Customer A\"</span>\n        </div>\n\n      </div>\n    </div>\n\n    <!-- Message bubbles -->\n    <div *ngFor=\"let msg of messages; trackBy: trackMessage\" class=\"message-row\" [class.user-row]=\"msg.role === 'user'\" [class.agent-row]=\"msg.role === 'assistant'\">\n      <div class=\"message-bubble\" [class.user-bubble]=\"msg.role === 'user'\" [class.agent-bubble]=\"msg.role === 'assistant'\">\n        {{ msg.content }}\n      </div>\n    </div>\n\n    <!-- Typing indicator -->\n    <div class=\"message-row agent-row\" *ngIf=\"isTyping\">\n      <div class=\"message-bubble agent-bubble typing-bubble\">\n        <span class=\"typing-dot\"></span>\n        <span class=\"typing-dot\"></span>\n        <span class=\"typing-dot\"></span>\n      </div>\n    </div>\n\n  </div>\n\n  <!-- Input area -->\n  <div class=\"agent-input\">\n    <mat-form-field appearance=\"outline\" class=\"input-field\">\n      <input matInput #messageInput placeholder=\"Type a message...\" [(ngModel)]=\"inputText\" (keydown)=\"onKeydown($event)\" autocomplete=\"off\" />\n    </mat-form-field>\n    <button mat-icon-button color=\"primary\" class=\"send-btn\" (click)=\"sendMessage()\" [disabled]=\"!inputText.trim()\">\n      <mat-icon>send</mat-icon>\n    </button>\n  </div>\n\n</div>\n", styles: [".agent-fab{position:fixed;bottom:24px;right:24px;z-index:1001;background:#1976d2;color:#fff}.agent-window{position:fixed;bottom:96px;right:24px;width:400px;height:580px;background:#fff;border-radius:16px;box-shadow:0 8px 32px #00000026;display:flex;flex-direction:column;z-index:1000;overflow:hidden}.agent-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#1976d2;color:#fff;min-height:56px}.header-info{display:flex;align-items:center;gap:10px}.header-icon{font-size:24px;width:24px;height:24px}.header-text{display:flex;flex-direction:column;gap:1px}.header-title{font-size:16px;font-weight:500;line-height:1.2}.status-badge{display:flex;align-items:center;gap:4px;font-size:11px;font-weight:400;opacity:.9;line-height:1}.status-dot{width:7px;height:7px;border-radius:50%;display:inline-block}.status-badge.online .status-dot{background:#4caf50;box-shadow:0 0 4px #4caf5099}.status-badge.offline .status-dot{background:#9e9e9e}.header-actions{display:flex;gap:0}.header-actions button{color:#fff}.agent-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:8px}.agent-greeting{display:flex;flex-direction:column;align-items:center;text-align:center;padding:20px 8px 8px;gap:10px}.greeting-icon{font-size:48px;width:48px;height:48px;color:#1976d2;opacity:.8}.greeting-text{font-size:15px;color:#424242;line-height:1.5;margin:0}.capability-pillars{display:flex;flex-direction:column;gap:10px;margin-top:8px;width:100%}.pillar{border:1px solid #e0e0e0;border-radius:12px;padding:12px 14px;text-align:left;cursor:pointer;transition:all .2s ease;background:#fafafa}.pillar:hover{border-color:#1976d2;background:#1976d20a;box-shadow:0 2px 8px #1976d21a}.pillar-header{display:flex;align-items:center;gap:8px;margin-bottom:4px}.pillar-icon{font-size:20px;width:20px;height:20px;color:#1976d2}.pillar-title{font-size:13px;font-weight:600;color:#212121}.pillar-desc{font-size:12px;color:#616161;margin:0 0 6px;line-height:1.4}.pillar-example{font-size:12px;color:#1976d2;font-style:italic;opacity:.85}.message-row{display:flex;max-width:85%}.user-row{align-self:flex-end}.agent-row{align-self:flex-start}.message-bubble{padding:10px 14px;border-radius:16px;font-size:14px;line-height:1.5;word-break:break-word;white-space:pre-wrap}.user-bubble{background:#1976d2;color:#fff;border-bottom-right-radius:4px}.agent-bubble{background:#f0f0f0;color:#212121;border-bottom-left-radius:4px}.typing-bubble{display:flex;align-items:center;gap:4px;padding:12px 18px}.typing-dot{width:8px;height:8px;border-radius:50%;background:#9e9e9e;animation:typingBounce 1.4s infinite ease-in-out}.typing-dot:nth-child(2){animation-delay:.2s}.typing-dot:nth-child(3){animation-delay:.4s}@keyframes typingBounce{0%,60%,to{transform:translateY(0);opacity:.4}30%{transform:translateY(-6px);opacity:1}}.agent-input{display:flex;align-items:center;padding:8px 12px;border-top:1px solid #e0e0e0;gap:4px}.input-field{flex:1}.input-field ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.input-field ::ng-deep .mat-mdc-text-field-wrapper{padding:0 12px}.send-btn{margin-bottom:4px}@media (max-width: 600px){.agent-window{inset:0 0 auto;width:100%;height:100%;height:100dvh;height:var(--agent-vh, 100dvh);border-radius:0}.agent-fab{bottom:72px;right:16px}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.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: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], 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: i4$3.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: "directive", type: i7$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: AgentComponent, isStandalone: false, selector: "spa-agent", host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "messageContainer", first: true, predicate: ["messageContainer"], descendants: true }, { propertyName: "messageInput", first: true, predicate: ["messageInput"], descendants: true }, { propertyName: "cameraInput", first: true, predicate: ["cameraInput"], descendants: true }, { propertyName: "galleryInput", first: true, predicate: ["galleryInput"], descendants: true }], ngImport: i0, template: "<!-- Floating chat widget for in-app Agent (renamed from Assistant) -->\n\n<!-- FAB toggle button -->\n<button mat-fab class=\"agent-fab\" (click)=\"toggleChat()\" [matTooltip]=\"agentName\">\n  <mat-icon>{{ isOpen ? 'close' : 'chat_bubble' }}</mat-icon>\n</button>\n\n<!-- Chat window -->\n<div class=\"agent-window\" *ngIf=\"isOpen\" @slideUp>\n\n  <!-- Header with online status -->\n  <div class=\"agent-header\">\n    <div class=\"header-info\">\n      <mat-icon class=\"header-icon\">smart_toy</mat-icon>\n      <div class=\"header-text\">\n        <span class=\"header-title\">{{ agentName }}</span>\n        <span class=\"status-badge\" [class.online]=\"isOnline\" [class.offline]=\"!isOnline\">\n          <span class=\"status-dot\"></span>\n          {{ isOnline ? 'Online' : 'Offline' }}\n        </span>\n      </div>\n    </div>\n    <div class=\"header-actions\">\n      <button mat-icon-button matTooltip=\"New conversation\" (click)=\"newConversation()\">\n        <mat-icon>add_comment</mat-icon>\n      </button>\n      <button mat-icon-button matTooltip=\"Close\" (click)=\"toggleChat()\">\n        <mat-icon>remove</mat-icon>\n      </button>\n    </div>\n  </div>\n\n  <!-- Messages area -->\n  <div class=\"agent-messages\" #messageContainer>\n\n    <!-- Welcome experience (show when no messages) -->\n    <div class=\"agent-greeting\" *ngIf=\"messages.length === 0\">\n      <mat-icon class=\"greeting-icon\">smart_toy</mat-icon>\n      <p class=\"greeting-text\">{{ greeting }}</p>\n\n      <!-- Three capability pillars -->\n      <div class=\"capability-pillars\">\n\n        <!-- Pillar 1: Navigate & Inquire -->\n        <div class=\"pillar\" (click)=\"sendSuggested('How do I post a transaction?')\">\n          <div class=\"pillar-header\">\n            <mat-icon class=\"pillar-icon\">explore</mat-icon>\n            <span class=\"pillar-title\">Ask & Navigate</span>\n          </div>\n          <p class=\"pillar-desc\">Ask how to do things or find features in the app</p>\n          <span class=\"pillar-example\">\"How do I post a transaction?\"</span>\n        </div>\n\n        <!-- Pillar 2: Create & Modify -->\n        <div class=\"pillar\" (click)=\"sendSuggested('Create a new customer')\">\n          <div class=\"pillar-header\">\n            <mat-icon class=\"pillar-icon\">edit_note</mat-icon>\n            <span class=\"pillar-title\">Create & Modify</span>\n          </div>\n          <p class=\"pillar-desc\">Add, edit, or delete records using natural language</p>\n          <span class=\"pillar-example\">\"Create a new customer called Acme Ltd\"</span>\n        </div>\n\n        <!-- Pillar 3: Get Information -->\n        <div class=\"pillar\" (click)=\"sendSuggested('List all accounts')\">\n          <div class=\"pillar-header\">\n            <mat-icon class=\"pillar-icon\">search</mat-icon>\n            <span class=\"pillar-title\">Get Information</span>\n          </div>\n          <p class=\"pillar-desc\">Retrieve details, list records, or get summaries</p>\n          <span class=\"pillar-example\">\"Show me the details of Customer A\"</span>\n        </div>\n\n      </div>\n    </div>\n\n    <!-- Message bubbles -->\n    <div *ngFor=\"let msg of messages; trackBy: trackMessage\" class=\"message-row\" [class.user-row]=\"msg.role === 'user'\" [class.agent-row]=\"msg.role === 'assistant'\">\n      <div class=\"message-bubble\" [class.user-bubble]=\"msg.role === 'user'\" [class.agent-bubble]=\"msg.role === 'assistant'\" [class.pending-bubble]=\"msg.pending\">\n        {{ msg.content }}\n      </div>\n    </div>\n\n    <!-- Typing indicator -->\n    <div class=\"message-row agent-row\" *ngIf=\"isTyping\">\n      <div class=\"message-bubble agent-bubble typing-bubble\">\n        <span class=\"typing-dot\"></span>\n        <span class=\"typing-dot\"></span>\n        <span class=\"typing-dot\"></span>\n      </div>\n    </div>\n\n  </div>\n\n  <!-- Media error (mic blocked / unsupported browser) -->\n  <div class=\"agent-media-error\" *ngIf=\"mediaError\">\n    <mat-icon class=\"media-error-icon\">error_outline</mat-icon>\n    <span>{{ mediaError }}</span>\n  </div>\n\n  <!-- Staged attachment: a photo waits here until the user adds a caption and presses send -->\n  <div class=\"agent-attachment\" *ngIf=\"pendingPhoto\">\n    <mat-icon class=\"attach-icon\">image</mat-icon>\n    <span class=\"attach-label\">Photo attached</span>\n    <button mat-icon-button class=\"attach-remove\" matTooltip=\"Remove photo\" (click)=\"clearPhoto()\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </div>\n\n  <!-- Transcribing indicator for the Stop button -->\n  <div class=\"agent-transcribing\" *ngIf=\"isTranscribing\">\n    <mat-icon class=\"transcribing-icon\">graphic_eq</mat-icon>\n    <span>Transcribing\u2026</span>\n  </div>\n\n  <!-- Input area -->\n  <div class=\"agent-input\" [class.recording]=\"isRecording\">\n\n    <!-- Normal input: attach, text, voice note, send -->\n    <ng-container *ngIf=\"!isRecording\">\n      <button mat-icon-button class=\"media-btn\" matTooltip=\"Attach\" [matMenuTriggerFor]=\"attachMenu\">\n        <mat-icon>add</mat-icon>\n      </button>\n      <mat-form-field appearance=\"outline\" class=\"input-field\">\n        <input matInput #messageInput placeholder=\"Type, speak or snap...\" [(ngModel)]=\"inputText\" (keydown)=\"onKeydown($event)\" autocomplete=\"off\" />\n      </mat-form-field>\n      <button mat-icon-button class=\"media-btn\" matTooltip=\"Record a voice note\" (click)=\"startRecording()\">\n        <mat-icon>mic</mat-icon>\n      </button>\n      <button mat-icon-button color=\"primary\" class=\"send-btn\" (click)=\"sendMessage()\" [disabled]=\"!canSend\">\n        <mat-icon>send</mat-icon>\n      </button>\n    </ng-container>\n\n    <!-- Recording bar: replaces the input while a voice note is being captured.\n         Three exits \u2014 discard it, stop and read it back as text, or send it straight away. -->\n    <ng-container *ngIf=\"isRecording\">\n      <button mat-icon-button class=\"media-btn cancel-btn\" matTooltip=\"Discard\" (click)=\"cancelRecording()\">\n        <mat-icon>delete</mat-icon>\n      </button>\n      <div class=\"recording-status\">\n        <span class=\"rec-dot\"></span>\n        <span class=\"rec-label\">Recording</span>\n        <span class=\"rec-time\">{{ recordDisplay }}</span>\n      </div>\n      <button mat-icon-button class=\"media-btn stop-btn\" matTooltip=\"Stop and add as text\" (click)=\"stopAndTranscribe()\">\n        <mat-icon>stop_circle</mat-icon>\n      </button>\n      <button mat-icon-button color=\"primary\" class=\"send-btn\" matTooltip=\"Send now\" (click)=\"stopRecording()\">\n        <mat-icon>send</mat-icon>\n      </button>\n    </ng-container>\n\n    <!-- Attach menu \u2014 keeps the row compact: one \"+\" instead of a button per source -->\n    <mat-menu #attachMenu=\"matMenu\">\n      <button mat-menu-item (click)=\"takePhoto()\">\n        <mat-icon>photo_camera</mat-icon>\n        <span>Take photo</span>\n      </button>\n      <button mat-menu-item (click)=\"choosePhoto()\">\n        <mat-icon>photo_library</mat-icon>\n        <span>Choose photo</span>\n      </button>\n    </mat-menu>\n\n    <!-- Two separate pickers on purpose. `capture=\"environment\"` hands off to the phone's camera app and\n         opens the rear lens; WITHOUT it the same input opens the gallery/file picker. One input cannot do\n         both, which is why the old single button always went to the camera on mobile. -->\n    <input type=\"file\" #cameraInput accept=\"image/*\" capture=\"environment\" hidden (change)=\"onPhotoSelected($event)\" />\n    <input type=\"file\" #galleryInput accept=\"image/*\" hidden (change)=\"onPhotoSelected($event)\" />\n  </div>\n\n</div>\n", styles: [".agent-fab{position:fixed;bottom:24px;right:24px;z-index:1001;background:#1976d2;color:#fff}.agent-window{position:fixed;bottom:96px;right:24px;width:400px;height:580px;background:#fff;border-radius:16px;box-shadow:0 8px 32px #00000026;display:flex;flex-direction:column;z-index:1000;overflow:hidden}.agent-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#1976d2;color:#fff;min-height:56px}.header-info{display:flex;align-items:center;gap:10px}.header-icon{font-size:24px;width:24px;height:24px}.header-text{display:flex;flex-direction:column;gap:1px}.header-title{font-size:16px;font-weight:500;line-height:1.2}.status-badge{display:flex;align-items:center;gap:4px;font-size:11px;font-weight:400;opacity:.9;line-height:1}.status-dot{width:7px;height:7px;border-radius:50%;display:inline-block}.status-badge.online .status-dot{background:#4caf50;box-shadow:0 0 4px #4caf5099}.status-badge.offline .status-dot{background:#9e9e9e}.header-actions{display:flex;gap:0}.header-actions button{color:#fff}.agent-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:8px}.agent-greeting{display:flex;flex-direction:column;align-items:center;text-align:center;padding:20px 8px 8px;gap:10px}.greeting-icon{font-size:48px;width:48px;height:48px;color:#1976d2;opacity:.8}.greeting-text{font-size:15px;color:#424242;line-height:1.5;margin:0}.capability-pillars{display:flex;flex-direction:column;gap:10px;margin-top:8px;width:100%}.pillar{border:1px solid #e0e0e0;border-radius:12px;padding:12px 14px;text-align:left;cursor:pointer;transition:all .2s ease;background:#fafafa}.pillar:hover{border-color:#1976d2;background:#1976d20a;box-shadow:0 2px 8px #1976d21a}.pillar-header{display:flex;align-items:center;gap:8px;margin-bottom:4px}.pillar-icon{font-size:20px;width:20px;height:20px;color:#1976d2}.pillar-title{font-size:13px;font-weight:600;color:#212121}.pillar-desc{font-size:12px;color:#616161;margin:0 0 6px;line-height:1.4}.pillar-example{font-size:12px;color:#1976d2;font-style:italic;opacity:.85}.message-row{display:flex;max-width:85%}.user-row{align-self:flex-end}.agent-row{align-self:flex-start}.message-bubble{padding:10px 14px;border-radius:16px;font-size:14px;line-height:1.5;word-break:break-word;white-space:pre-wrap}.user-bubble{background:#1976d2;color:#fff;border-bottom-right-radius:4px}.agent-bubble{background:#f0f0f0;color:#212121;border-bottom-left-radius:4px}.typing-bubble{display:flex;align-items:center;gap:4px;padding:12px 18px}.typing-dot{width:8px;height:8px;border-radius:50%;background:#9e9e9e;animation:typingBounce 1.4s infinite ease-in-out}.typing-dot:nth-child(2){animation-delay:.2s}.typing-dot:nth-child(3){animation-delay:.4s}@keyframes typingBounce{0%,60%,to{transform:translateY(0);opacity:.4}30%{transform:translateY(-6px);opacity:1}}.agent-input{display:flex;align-items:center;padding:8px 12px;border-top:1px solid #e0e0e0;gap:4px}.input-field{flex:1}.input-field ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.input-field ::ng-deep .mat-mdc-text-field-wrapper{padding:0 12px}.send-btn,.media-btn{margin-bottom:0;display:inline-flex;align-items:center;justify-content:center}.media-btn{color:#757575}.media-btn:hover{color:#424242}.cancel-btn:hover{color:#d32f2f}.agent-input.recording{background:#fff5f5}.recording-status{flex:1;display:flex;align-items:center;gap:8px;padding:0 4px;font-size:13px;color:#616161}.rec-label{flex:1}.rec-time{font-variant-numeric:tabular-nums;color:#424242}.rec-dot{width:10px;height:10px;border-radius:50%;background:#e53935;animation:rec-pulse 1.2s ease-in-out infinite}@keyframes rec-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.85)}}.pending-bubble{opacity:.6;font-style:italic}.agent-attachment{display:flex;align-items:center;gap:8px;padding:6px 12px;font-size:12px;color:#1565c0;background:#e8f1fb;border-top:1px solid #cfe0f3}.attach-icon{font-size:18px;width:18px;height:18px}.attach-label{flex:1}.attach-remove{width:24px;height:24px;min-width:0;padding:0;flex:0 0 auto;line-height:24px;display:inline-flex;align-items:center;justify-content:center;color:#1565c0}.attach-remove .mat-icon{font-size:16px;width:16px;height:16px;line-height:16px}.agent-transcribing{display:flex;align-items:center;gap:8px;padding:6px 12px;font-size:12px;color:#616161;background:#f5f5f5;border-top:1px solid #e0e0e0}.transcribing-icon{font-size:18px;width:18px;height:18px;animation:rec-pulse 1.2s ease-in-out infinite}.stop-btn{color:#e53935}.agent-media-error{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:12px;color:#c62828;background:#fdecea;border-top:1px solid #f5c6c2}.media-error-icon{font-size:18px;width:18px;height:18px}@media (max-width: 600px){.agent-window{inset:0 0 auto;width:100%;height:100%;height:100dvh;height:var(--agent-vh, 100dvh);border-radius:0}.agent-fab{bottom:72px;right:16px}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.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.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.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], 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: i4$3.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: "directive", type: i7$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], animations: [
             trigger('slideUp', [
                 transition(':enter', [
                     style({ opacity: 0, transform: 'translateY(20px) scale(0.95)' }),
@@ -15034,13 +15459,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                                 animate('200ms cubic-bezier(0.4, 0, 0.2, 1)', style({ opacity: 0, transform: 'translateY(20px) scale(0.95)' }))
                             ])
                         ])
-                    ], template: "<!-- Floating chat widget for in-app Agent (renamed from Assistant) -->\n\n<!-- FAB toggle button -->\n<button mat-fab class=\"agent-fab\" (click)=\"toggleChat()\" [matTooltip]=\"agentName\">\n  <mat-icon>{{ isOpen ? 'close' : 'chat_bubble' }}</mat-icon>\n</button>\n\n<!-- Chat window -->\n<div class=\"agent-window\" *ngIf=\"isOpen\" @slideUp>\n\n  <!-- Header with online status -->\n  <div class=\"agent-header\">\n    <div class=\"header-info\">\n      <mat-icon class=\"header-icon\">smart_toy</mat-icon>\n      <div class=\"header-text\">\n        <span class=\"header-title\">{{ agentName }}</span>\n        <span class=\"status-badge\" [class.online]=\"isOnline\" [class.offline]=\"!isOnline\">\n          <span class=\"status-dot\"></span>\n          {{ isOnline ? 'Online' : 'Offline' }}\n        </span>\n      </div>\n    </div>\n    <div class=\"header-actions\">\n      <button mat-icon-button matTooltip=\"New conversation\" (click)=\"newConversation()\">\n        <mat-icon>add_comment</mat-icon>\n      </button>\n      <button mat-icon-button matTooltip=\"Close\" (click)=\"toggleChat()\">\n        <mat-icon>remove</mat-icon>\n      </button>\n    </div>\n  </div>\n\n  <!-- Messages area -->\n  <div class=\"agent-messages\" #messageContainer>\n\n    <!-- Welcome experience (show when no messages) -->\n    <div class=\"agent-greeting\" *ngIf=\"messages.length === 0\">\n      <mat-icon class=\"greeting-icon\">smart_toy</mat-icon>\n      <p class=\"greeting-text\">{{ greeting }}</p>\n\n      <!-- Three capability pillars -->\n      <div class=\"capability-pillars\">\n\n        <!-- Pillar 1: Navigate & Inquire -->\n        <div class=\"pillar\" (click)=\"sendSuggested('How do I post a transaction?')\">\n          <div class=\"pillar-header\">\n            <mat-icon class=\"pillar-icon\">explore</mat-icon>\n            <span class=\"pillar-title\">Ask & Navigate</span>\n          </div>\n          <p class=\"pillar-desc\">Ask how to do things or find features in the app</p>\n          <span class=\"pillar-example\">\"How do I post a transaction?\"</span>\n        </div>\n\n        <!-- Pillar 2: Create & Modify -->\n        <div class=\"pillar\" (click)=\"sendSuggested('Create a new customer')\">\n          <div class=\"pillar-header\">\n            <mat-icon class=\"pillar-icon\">edit_note</mat-icon>\n            <span class=\"pillar-title\">Create & Modify</span>\n          </div>\n          <p class=\"pillar-desc\">Add, edit, or delete records using natural language</p>\n          <span class=\"pillar-example\">\"Create a new customer called Acme Ltd\"</span>\n        </div>\n\n        <!-- Pillar 3: Get Information -->\n        <div class=\"pillar\" (click)=\"sendSuggested('List all accounts')\">\n          <div class=\"pillar-header\">\n            <mat-icon class=\"pillar-icon\">search</mat-icon>\n            <span class=\"pillar-title\">Get Information</span>\n          </div>\n          <p class=\"pillar-desc\">Retrieve details, list records, or get summaries</p>\n          <span class=\"pillar-example\">\"Show me the details of Customer A\"</span>\n        </div>\n\n      </div>\n    </div>\n\n    <!-- Message bubbles -->\n    <div *ngFor=\"let msg of messages; trackBy: trackMessage\" class=\"message-row\" [class.user-row]=\"msg.role === 'user'\" [class.agent-row]=\"msg.role === 'assistant'\">\n      <div class=\"message-bubble\" [class.user-bubble]=\"msg.role === 'user'\" [class.agent-bubble]=\"msg.role === 'assistant'\">\n        {{ msg.content }}\n      </div>\n    </div>\n\n    <!-- Typing indicator -->\n    <div class=\"message-row agent-row\" *ngIf=\"isTyping\">\n      <div class=\"message-bubble agent-bubble typing-bubble\">\n        <span class=\"typing-dot\"></span>\n        <span class=\"typing-dot\"></span>\n        <span class=\"typing-dot\"></span>\n      </div>\n    </div>\n\n  </div>\n\n  <!-- Input area -->\n  <div class=\"agent-input\">\n    <mat-form-field appearance=\"outline\" class=\"input-field\">\n      <input matInput #messageInput placeholder=\"Type a message...\" [(ngModel)]=\"inputText\" (keydown)=\"onKeydown($event)\" autocomplete=\"off\" />\n    </mat-form-field>\n    <button mat-icon-button color=\"primary\" class=\"send-btn\" (click)=\"sendMessage()\" [disabled]=\"!inputText.trim()\">\n      <mat-icon>send</mat-icon>\n    </button>\n  </div>\n\n</div>\n", styles: [".agent-fab{position:fixed;bottom:24px;right:24px;z-index:1001;background:#1976d2;color:#fff}.agent-window{position:fixed;bottom:96px;right:24px;width:400px;height:580px;background:#fff;border-radius:16px;box-shadow:0 8px 32px #00000026;display:flex;flex-direction:column;z-index:1000;overflow:hidden}.agent-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#1976d2;color:#fff;min-height:56px}.header-info{display:flex;align-items:center;gap:10px}.header-icon{font-size:24px;width:24px;height:24px}.header-text{display:flex;flex-direction:column;gap:1px}.header-title{font-size:16px;font-weight:500;line-height:1.2}.status-badge{display:flex;align-items:center;gap:4px;font-size:11px;font-weight:400;opacity:.9;line-height:1}.status-dot{width:7px;height:7px;border-radius:50%;display:inline-block}.status-badge.online .status-dot{background:#4caf50;box-shadow:0 0 4px #4caf5099}.status-badge.offline .status-dot{background:#9e9e9e}.header-actions{display:flex;gap:0}.header-actions button{color:#fff}.agent-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:8px}.agent-greeting{display:flex;flex-direction:column;align-items:center;text-align:center;padding:20px 8px 8px;gap:10px}.greeting-icon{font-size:48px;width:48px;height:48px;color:#1976d2;opacity:.8}.greeting-text{font-size:15px;color:#424242;line-height:1.5;margin:0}.capability-pillars{display:flex;flex-direction:column;gap:10px;margin-top:8px;width:100%}.pillar{border:1px solid #e0e0e0;border-radius:12px;padding:12px 14px;text-align:left;cursor:pointer;transition:all .2s ease;background:#fafafa}.pillar:hover{border-color:#1976d2;background:#1976d20a;box-shadow:0 2px 8px #1976d21a}.pillar-header{display:flex;align-items:center;gap:8px;margin-bottom:4px}.pillar-icon{font-size:20px;width:20px;height:20px;color:#1976d2}.pillar-title{font-size:13px;font-weight:600;color:#212121}.pillar-desc{font-size:12px;color:#616161;margin:0 0 6px;line-height:1.4}.pillar-example{font-size:12px;color:#1976d2;font-style:italic;opacity:.85}.message-row{display:flex;max-width:85%}.user-row{align-self:flex-end}.agent-row{align-self:flex-start}.message-bubble{padding:10px 14px;border-radius:16px;font-size:14px;line-height:1.5;word-break:break-word;white-space:pre-wrap}.user-bubble{background:#1976d2;color:#fff;border-bottom-right-radius:4px}.agent-bubble{background:#f0f0f0;color:#212121;border-bottom-left-radius:4px}.typing-bubble{display:flex;align-items:center;gap:4px;padding:12px 18px}.typing-dot{width:8px;height:8px;border-radius:50%;background:#9e9e9e;animation:typingBounce 1.4s infinite ease-in-out}.typing-dot:nth-child(2){animation-delay:.2s}.typing-dot:nth-child(3){animation-delay:.4s}@keyframes typingBounce{0%,60%,to{transform:translateY(0);opacity:.4}30%{transform:translateY(-6px);opacity:1}}.agent-input{display:flex;align-items:center;padding:8px 12px;border-top:1px solid #e0e0e0;gap:4px}.input-field{flex:1}.input-field ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.input-field ::ng-deep .mat-mdc-text-field-wrapper{padding:0 12px}.send-btn{margin-bottom:4px}@media (max-width: 600px){.agent-window{inset:0 0 auto;width:100%;height:100%;height:100dvh;height:var(--agent-vh, 100dvh);border-radius:0}.agent-fab{bottom:72px;right:16px}}\n"] }]
+                    ], template: "<!-- Floating chat widget for in-app Agent (renamed from Assistant) -->\n\n<!-- FAB toggle button -->\n<button mat-fab class=\"agent-fab\" (click)=\"toggleChat()\" [matTooltip]=\"agentName\">\n  <mat-icon>{{ isOpen ? 'close' : 'chat_bubble' }}</mat-icon>\n</button>\n\n<!-- Chat window -->\n<div class=\"agent-window\" *ngIf=\"isOpen\" @slideUp>\n\n  <!-- Header with online status -->\n  <div class=\"agent-header\">\n    <div class=\"header-info\">\n      <mat-icon class=\"header-icon\">smart_toy</mat-icon>\n      <div class=\"header-text\">\n        <span class=\"header-title\">{{ agentName }}</span>\n        <span class=\"status-badge\" [class.online]=\"isOnline\" [class.offline]=\"!isOnline\">\n          <span class=\"status-dot\"></span>\n          {{ isOnline ? 'Online' : 'Offline' }}\n        </span>\n      </div>\n    </div>\n    <div class=\"header-actions\">\n      <button mat-icon-button matTooltip=\"New conversation\" (click)=\"newConversation()\">\n        <mat-icon>add_comment</mat-icon>\n      </button>\n      <button mat-icon-button matTooltip=\"Close\" (click)=\"toggleChat()\">\n        <mat-icon>remove</mat-icon>\n      </button>\n    </div>\n  </div>\n\n  <!-- Messages area -->\n  <div class=\"agent-messages\" #messageContainer>\n\n    <!-- Welcome experience (show when no messages) -->\n    <div class=\"agent-greeting\" *ngIf=\"messages.length === 0\">\n      <mat-icon class=\"greeting-icon\">smart_toy</mat-icon>\n      <p class=\"greeting-text\">{{ greeting }}</p>\n\n      <!-- Three capability pillars -->\n      <div class=\"capability-pillars\">\n\n        <!-- Pillar 1: Navigate & Inquire -->\n        <div class=\"pillar\" (click)=\"sendSuggested('How do I post a transaction?')\">\n          <div class=\"pillar-header\">\n            <mat-icon class=\"pillar-icon\">explore</mat-icon>\n            <span class=\"pillar-title\">Ask & Navigate</span>\n          </div>\n          <p class=\"pillar-desc\">Ask how to do things or find features in the app</p>\n          <span class=\"pillar-example\">\"How do I post a transaction?\"</span>\n        </div>\n\n        <!-- Pillar 2: Create & Modify -->\n        <div class=\"pillar\" (click)=\"sendSuggested('Create a new customer')\">\n          <div class=\"pillar-header\">\n            <mat-icon class=\"pillar-icon\">edit_note</mat-icon>\n            <span class=\"pillar-title\">Create & Modify</span>\n          </div>\n          <p class=\"pillar-desc\">Add, edit, or delete records using natural language</p>\n          <span class=\"pillar-example\">\"Create a new customer called Acme Ltd\"</span>\n        </div>\n\n        <!-- Pillar 3: Get Information -->\n        <div class=\"pillar\" (click)=\"sendSuggested('List all accounts')\">\n          <div class=\"pillar-header\">\n            <mat-icon class=\"pillar-icon\">search</mat-icon>\n            <span class=\"pillar-title\">Get Information</span>\n          </div>\n          <p class=\"pillar-desc\">Retrieve details, list records, or get summaries</p>\n          <span class=\"pillar-example\">\"Show me the details of Customer A\"</span>\n        </div>\n\n      </div>\n    </div>\n\n    <!-- Message bubbles -->\n    <div *ngFor=\"let msg of messages; trackBy: trackMessage\" class=\"message-row\" [class.user-row]=\"msg.role === 'user'\" [class.agent-row]=\"msg.role === 'assistant'\">\n      <div class=\"message-bubble\" [class.user-bubble]=\"msg.role === 'user'\" [class.agent-bubble]=\"msg.role === 'assistant'\" [class.pending-bubble]=\"msg.pending\">\n        {{ msg.content }}\n      </div>\n    </div>\n\n    <!-- Typing indicator -->\n    <div class=\"message-row agent-row\" *ngIf=\"isTyping\">\n      <div class=\"message-bubble agent-bubble typing-bubble\">\n        <span class=\"typing-dot\"></span>\n        <span class=\"typing-dot\"></span>\n        <span class=\"typing-dot\"></span>\n      </div>\n    </div>\n\n  </div>\n\n  <!-- Media error (mic blocked / unsupported browser) -->\n  <div class=\"agent-media-error\" *ngIf=\"mediaError\">\n    <mat-icon class=\"media-error-icon\">error_outline</mat-icon>\n    <span>{{ mediaError }}</span>\n  </div>\n\n  <!-- Staged attachment: a photo waits here until the user adds a caption and presses send -->\n  <div class=\"agent-attachment\" *ngIf=\"pendingPhoto\">\n    <mat-icon class=\"attach-icon\">image</mat-icon>\n    <span class=\"attach-label\">Photo attached</span>\n    <button mat-icon-button class=\"attach-remove\" matTooltip=\"Remove photo\" (click)=\"clearPhoto()\">\n      <mat-icon>close</mat-icon>\n    </button>\n  </div>\n\n  <!-- Transcribing indicator for the Stop button -->\n  <div class=\"agent-transcribing\" *ngIf=\"isTranscribing\">\n    <mat-icon class=\"transcribing-icon\">graphic_eq</mat-icon>\n    <span>Transcribing\u2026</span>\n  </div>\n\n  <!-- Input area -->\n  <div class=\"agent-input\" [class.recording]=\"isRecording\">\n\n    <!-- Normal input: attach, text, voice note, send -->\n    <ng-container *ngIf=\"!isRecording\">\n      <button mat-icon-button class=\"media-btn\" matTooltip=\"Attach\" [matMenuTriggerFor]=\"attachMenu\">\n        <mat-icon>add</mat-icon>\n      </button>\n      <mat-form-field appearance=\"outline\" class=\"input-field\">\n        <input matInput #messageInput placeholder=\"Type, speak or snap...\" [(ngModel)]=\"inputText\" (keydown)=\"onKeydown($event)\" autocomplete=\"off\" />\n      </mat-form-field>\n      <button mat-icon-button class=\"media-btn\" matTooltip=\"Record a voice note\" (click)=\"startRecording()\">\n        <mat-icon>mic</mat-icon>\n      </button>\n      <button mat-icon-button color=\"primary\" class=\"send-btn\" (click)=\"sendMessage()\" [disabled]=\"!canSend\">\n        <mat-icon>send</mat-icon>\n      </button>\n    </ng-container>\n\n    <!-- Recording bar: replaces the input while a voice note is being captured.\n         Three exits \u2014 discard it, stop and read it back as text, or send it straight away. -->\n    <ng-container *ngIf=\"isRecording\">\n      <button mat-icon-button class=\"media-btn cancel-btn\" matTooltip=\"Discard\" (click)=\"cancelRecording()\">\n        <mat-icon>delete</mat-icon>\n      </button>\n      <div class=\"recording-status\">\n        <span class=\"rec-dot\"></span>\n        <span class=\"rec-label\">Recording</span>\n        <span class=\"rec-time\">{{ recordDisplay }}</span>\n      </div>\n      <button mat-icon-button class=\"media-btn stop-btn\" matTooltip=\"Stop and add as text\" (click)=\"stopAndTranscribe()\">\n        <mat-icon>stop_circle</mat-icon>\n      </button>\n      <button mat-icon-button color=\"primary\" class=\"send-btn\" matTooltip=\"Send now\" (click)=\"stopRecording()\">\n        <mat-icon>send</mat-icon>\n      </button>\n    </ng-container>\n\n    <!-- Attach menu \u2014 keeps the row compact: one \"+\" instead of a button per source -->\n    <mat-menu #attachMenu=\"matMenu\">\n      <button mat-menu-item (click)=\"takePhoto()\">\n        <mat-icon>photo_camera</mat-icon>\n        <span>Take photo</span>\n      </button>\n      <button mat-menu-item (click)=\"choosePhoto()\">\n        <mat-icon>photo_library</mat-icon>\n        <span>Choose photo</span>\n      </button>\n    </mat-menu>\n\n    <!-- Two separate pickers on purpose. `capture=\"environment\"` hands off to the phone's camera app and\n         opens the rear lens; WITHOUT it the same input opens the gallery/file picker. One input cannot do\n         both, which is why the old single button always went to the camera on mobile. -->\n    <input type=\"file\" #cameraInput accept=\"image/*\" capture=\"environment\" hidden (change)=\"onPhotoSelected($event)\" />\n    <input type=\"file\" #galleryInput accept=\"image/*\" hidden (change)=\"onPhotoSelected($event)\" />\n  </div>\n\n</div>\n", styles: [".agent-fab{position:fixed;bottom:24px;right:24px;z-index:1001;background:#1976d2;color:#fff}.agent-window{position:fixed;bottom:96px;right:24px;width:400px;height:580px;background:#fff;border-radius:16px;box-shadow:0 8px 32px #00000026;display:flex;flex-direction:column;z-index:1000;overflow:hidden}.agent-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#1976d2;color:#fff;min-height:56px}.header-info{display:flex;align-items:center;gap:10px}.header-icon{font-size:24px;width:24px;height:24px}.header-text{display:flex;flex-direction:column;gap:1px}.header-title{font-size:16px;font-weight:500;line-height:1.2}.status-badge{display:flex;align-items:center;gap:4px;font-size:11px;font-weight:400;opacity:.9;line-height:1}.status-dot{width:7px;height:7px;border-radius:50%;display:inline-block}.status-badge.online .status-dot{background:#4caf50;box-shadow:0 0 4px #4caf5099}.status-badge.offline .status-dot{background:#9e9e9e}.header-actions{display:flex;gap:0}.header-actions button{color:#fff}.agent-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:8px}.agent-greeting{display:flex;flex-direction:column;align-items:center;text-align:center;padding:20px 8px 8px;gap:10px}.greeting-icon{font-size:48px;width:48px;height:48px;color:#1976d2;opacity:.8}.greeting-text{font-size:15px;color:#424242;line-height:1.5;margin:0}.capability-pillars{display:flex;flex-direction:column;gap:10px;margin-top:8px;width:100%}.pillar{border:1px solid #e0e0e0;border-radius:12px;padding:12px 14px;text-align:left;cursor:pointer;transition:all .2s ease;background:#fafafa}.pillar:hover{border-color:#1976d2;background:#1976d20a;box-shadow:0 2px 8px #1976d21a}.pillar-header{display:flex;align-items:center;gap:8px;margin-bottom:4px}.pillar-icon{font-size:20px;width:20px;height:20px;color:#1976d2}.pillar-title{font-size:13px;font-weight:600;color:#212121}.pillar-desc{font-size:12px;color:#616161;margin:0 0 6px;line-height:1.4}.pillar-example{font-size:12px;color:#1976d2;font-style:italic;opacity:.85}.message-row{display:flex;max-width:85%}.user-row{align-self:flex-end}.agent-row{align-self:flex-start}.message-bubble{padding:10px 14px;border-radius:16px;font-size:14px;line-height:1.5;word-break:break-word;white-space:pre-wrap}.user-bubble{background:#1976d2;color:#fff;border-bottom-right-radius:4px}.agent-bubble{background:#f0f0f0;color:#212121;border-bottom-left-radius:4px}.typing-bubble{display:flex;align-items:center;gap:4px;padding:12px 18px}.typing-dot{width:8px;height:8px;border-radius:50%;background:#9e9e9e;animation:typingBounce 1.4s infinite ease-in-out}.typing-dot:nth-child(2){animation-delay:.2s}.typing-dot:nth-child(3){animation-delay:.4s}@keyframes typingBounce{0%,60%,to{transform:translateY(0);opacity:.4}30%{transform:translateY(-6px);opacity:1}}.agent-input{display:flex;align-items:center;padding:8px 12px;border-top:1px solid #e0e0e0;gap:4px}.input-field{flex:1}.input-field ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.input-field ::ng-deep .mat-mdc-text-field-wrapper{padding:0 12px}.send-btn,.media-btn{margin-bottom:0;display:inline-flex;align-items:center;justify-content:center}.media-btn{color:#757575}.media-btn:hover{color:#424242}.cancel-btn:hover{color:#d32f2f}.agent-input.recording{background:#fff5f5}.recording-status{flex:1;display:flex;align-items:center;gap:8px;padding:0 4px;font-size:13px;color:#616161}.rec-label{flex:1}.rec-time{font-variant-numeric:tabular-nums;color:#424242}.rec-dot{width:10px;height:10px;border-radius:50%;background:#e53935;animation:rec-pulse 1.2s ease-in-out infinite}@keyframes rec-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.85)}}.pending-bubble{opacity:.6;font-style:italic}.agent-attachment{display:flex;align-items:center;gap:8px;padding:6px 12px;font-size:12px;color:#1565c0;background:#e8f1fb;border-top:1px solid #cfe0f3}.attach-icon{font-size:18px;width:18px;height:18px}.attach-label{flex:1}.attach-remove{width:24px;height:24px;min-width:0;padding:0;flex:0 0 auto;line-height:24px;display:inline-flex;align-items:center;justify-content:center;color:#1565c0}.attach-remove .mat-icon{font-size:16px;width:16px;height:16px;line-height:16px}.agent-transcribing{display:flex;align-items:center;gap:8px;padding:6px 12px;font-size:12px;color:#616161;background:#f5f5f5;border-top:1px solid #e0e0e0}.transcribing-icon{font-size:18px;width:18px;height:18px;animation:rec-pulse 1.2s ease-in-out infinite}.stop-btn{color:#e53935}.agent-media-error{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:12px;color:#c62828;background:#fdecea;border-top:1px solid #f5c6c2}.media-error-icon{font-size:18px;width:18px;height:18px}@media (max-width: 600px){.agent-window{inset:0 0 auto;width:100%;height:100%;height:100dvh;height:var(--agent-vh, 100dvh);border-radius:0}.agent-fab{bottom:72px;right:16px}}\n"] }]
         }], ctorParameters: () => [{ type: AgentService }, { type: SignalRService }], propDecorators: { messageContainer: [{
                 type: ViewChild,
                 args: ['messageContainer']
             }], messageInput: [{
                 type: ViewChild,
                 args: ['messageInput']
+            }], cameraInput: [{
+                type: ViewChild,
+                args: ['cameraInput']
+            }], galleryInput: [{
+                type: ViewChild,
+                args: ['galleryInput']
             }], onDocumentClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
@@ -15844,6 +16275,14 @@ class FormComponent {
     loadChildMasterOptions(child) {
         if (!child.loadAction)
             return;
+        // Changed: skip a URL that still holds an unresolved {placeholder}. ngOnInit calls this for EVERY field
+        // carrying a loadAction, so a dependent field like the load form's Customer PO picker
+        // ('customerpurchaseorders/open/{customerID}') was requested with the literal placeholder before any
+        // customer had been chosen - a 400 that popped an error dialog over the form as it opened.
+        // NOTE worth revisiting separately: this runs for every field, not only master/child ones, so every
+        // select is fetched twice on open - once here and once by the select itself.
+        if (child.loadAction.url?.includes('{'))
+            return;
         this.dataService.CallApi(child.loadAction).subscribe((apiResponse) => {
             if (apiResponse.success) {
                 child.masterOptions = apiResponse.data;
@@ -15930,11 +16369,11 @@ class FormComponent {
     processForm() {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: FormComponent, deps: [{ token: MessageService }, { token: DataServiceLib }, { token: AuthService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: FormComponent, isStandalone: false, selector: "spa-form", inputs: { files: "files", data: "data", config: "config" }, outputs: { buttonClick: "buttonClick", inputChange: "inputChange" }, queries: [{ propertyName: "dynamicSelectTemplate", first: true, predicate: ["dynamicSelect"], descendants: true }], viewQueries: [{ propertyName: "defaultDynamicSelectTemplate", first: true, predicate: ["defaultDynamicSelect"], descendants: true, static: true }], ngImport: i0, template: "\n\n\n<div class=\"tin-form-container\" >\n  <div [ngClass]=\"[multiColumn ? 'tin-grid' : 'tin-col', config.notesConfig ? 'width-75' : 'width-100']\" class=\"form-main-content\">\n\n    <div *ngIf=\"!hasAccess\" class=\"tin-center\">\n      <p><em>Access Restricted</em></p>\n    </div>\n  \n    <div [ngClass]=\"field.span || field.type =='section' || field.type =='file' || field.type =='file-view' || field.type =='editor'  ? 'span-col' : ''\" *ngFor=\"let field of visibleFields\"><!-- TS-11: bind cached visibleFields instead of getVisibleFields() per CD -->\n  \n      <ng-container>\n  \n        <ng-container [ngSwitch]=\"field.type\" class=\"highlight\">\n  \n          <div *ngSwitchCase=\"'section'\" class=\"title d-flex align-items-center\" (click)=\"toggleSection(field)\" style=\"cursor: pointer;\">\n            <label style=\"font-size: larger;margin-right: 10px;\">{{field.alias ?? field.name | camelToWords}}</label>\n            <mat-icon *ngIf=\"field.infoMessage\" (click)=\"onInfoClick($event, field.infoMessage)\" style=\"color: steelblue; font-size: 14px;\">info</mat-icon>\n            <!-- <button  mat-icon-button class=\"info-icon-button\"  matTooltip=\"Info\" matTooltipPosition=\"above\">\n  \n            </button> -->\n            <mat-icon *ngIf=\"hasSectionFields(field.name)\">{{shouldSectionCollapse(field) ? 'expand_more' : 'expand_less'}}</mat-icon>\n          </div>\n  \n          <ng-container *ngSwitchCase=\"'file'\">\n            <div class=\"mt-1 mb-2\" *ngIf=\"config.mode !='view'\">\n              <spa-attach [message]=\"field.alias ?? 'Drag and Drop files here'\" [(files)]=\"files\" [fileOptions]=\"field.fileOptions\"></spa-attach>\n            </div>\n          </ng-container>\n  \n          <ng-container *ngSwitchCase=\"'file-view'\">\n            <div class=\"mt-1 mb-2\" *ngIf=\"config.mode && config.mode !='create'\">\n              <spa-viewer [fileAction]=\"field.loadAction\" [path]=\"field.path\" [folderName]=\"data[field.keyField]\" ></spa-viewer>\n            </div>\n          </ng-container>\n  \n          <spa-html *ngSwitchCase=\"'html'\" [display]=\"field.alias | camelToWords\" [value]=\"data[field.name]\" [maxHeight]=\"field.maxHeight\"></spa-html>\n  \n          <label *ngSwitchCase=\"'blank'\"></label>\n  \n          <label *ngSwitchCase=\"'string'\" [ngStyle]=\"{'font-size':field.size ?? '14px'}\" >{{data[field.name] ?? field.alias ?? field.name}} {{field.suffix ?? ''}}</label>\n  \n          <spa-label *ngSwitchCase=\"'label'\" [display]=\"field.alias ?? field.name | camelToWords\" [value]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [format]=\"field.format ?? 'text'\" [suffix]=\"field.suffix\" [size]=\"field.size\"></spa-label>\n  \n          <spa-number *ngSwitchCase=\"'number'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [required]=\"testRequired(field)\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\"></spa-number>\n  \n          <spa-money *ngSwitchCase=\"'money'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [required]=\"testRequired(field)\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\"></spa-money>\n  \n          <spa-check *ngSwitchCase=\"'checkbox'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [readonly]=\"testReadOnly(field)\" [infoMessage]=\"field.infoMessage\" ></spa-check>\n  \n          <spa-date *ngSwitchCase=\"'date'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [min]=\"field?.min\" [max]=\"field?.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" ></spa-date>\n  \n          <spa-datetime *ngSwitchCase=\"'datetime'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [readonly]=\"testReadOnly(field)\" [min]=\"field.min\" [max]=\"field.max\" [infoMessage]=\"field.infoMessage\" ></spa-datetime>\n  \n          <spa-email *ngSwitchCase=\"'email'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field,data[field.name])\" [required]=\"testRequired(field)\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\"  [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\"></spa-email>\n  \n          <spa-text-mask *ngSwitchCase=\"'text-mask'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field,data[field.name])\" [required]=\"testRequired(field)\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\"></spa-text-mask>\n  \n  \n          <ng-container *ngSwitchCase=\"'select'\">\n            <ng-container *ngTemplateOutlet=\"selectTemplate; context: {\n                    $implicit: field,\n                    field: field,\n                    data: data,\n                    testReadOnly: testReadOnly.bind(this),\n                    testRequired: testRequired.bind(this),\n                    selectChanged: selectChanged.bind(this)\n                  }\">\n            </ng-container>\n          </ng-container>\n  \n  \n          <spa-select-multi *ngSwitchCase=\"'select-multi'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay ?? 'name'\" [optionValue]=\"field.optionValue ?? 'value'\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [required]=\"testRequired(field)\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\" [loadAction]=\"resolveLoadAction(field)\" [selectAll]=\"field.selectAll\">\n          </spa-select-multi>\n  \n          <spa-text-multi *ngSwitchCase=\"'text-multi'\" [strict]=\"field.strict\" [display]=\"field.alias ?? field.name | camelToWords\" [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay ?? 'name'\" [optionValue]=\"field.optionValue ?? 'value'\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field,data[field.name])\" [required]=\"testRequired(field)\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\" [loadAction]=\"resolveLoadAction(field)\"></spa-text-multi>\n  \n  \n  \n          <ng-container *ngSwitchCase=\"'composite'\">\n            <div class=\"composite-field-container\">\n              <div class=\"composite-field-group\">\n                <ng-container *ngFor=\"let subfield of getVisibleSubfields(field)\">\n                  <ng-container [ngSwitch]=\"subfield.type\">\n  \n                    <label *ngSwitchCase=\"'string'\" [ngStyle]=\"{'font-size':field.size ?? '14px'}\" >{{data[field.name] ?? field.alias ?? field.name}} {{field.suffix ?? ''}}</label>\n                    \n                    <spa-number *ngSwitchCase=\"'number'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [width]=\"subfield.width\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [required]=\"testRequired(subfield)\" [min]=\"subfield.min\" [max]=\"subfield.max\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [hint]=\"subfield.hint\" [infoMessage]=\"subfield.infoMessage\"  [suffix]=\"subfield.suffix\" [copyContent]=\"subfield.copyContent\" [clearContent]=\"subfield.clearContent\"></spa-number>\n  \n                    <spa-money *ngSwitchCase=\"'money'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [width]=\"subfield.width\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [required]=\"testRequired(subfield)\" [min]=\"subfield.min\" [max]=\"subfield.max\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [hint]=\"subfield.hint\" [infoMessage]=\"subfield.infoMessage\" [suffix]=\"subfield.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\"></spa-money>\n  \n                    <spa-check *ngSwitchCase=\"'checkbox'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [infoMessage]=\"subfield.infoMessage\" ></spa-check>\n  \n                    <spa-date *ngSwitchCase=\"'date'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [width]=\"subfield.width\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [min]=\"subfield.min\" [max]=\"subfield.max\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [hint]=\"subfield.hint\" [infoMessage]=\"subfield.infoMessage\" ></spa-date>\n  \n                    <spa-datetime *ngSwitchCase=\"'datetime'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [min]=\"subfield.min\" [max]=\"subfield.max\" [infoMessage]=\"subfield.infoMessage\" ></spa-datetime>\n  \n                    <!-- Fixed: composite select subfields projected the PARENT composite field into the\n                         dynamic select template (wrong options/value binding) and omitted testRequired,\n                         so the template's testRequired(field) call threw and killed the whole dialog.\n                         Context now mirrors the top-level select outlet, with the SUBFIELD, and readonly\n                         cascades composite parent || subfield like every other subfield type. -->\n                    <ng-container *ngSwitchCase=\"'select'\">\n                      <ng-container *ngTemplateOutlet=\"selectTemplate; context: {\n                                      $implicit: subfield,\n                                      field: subfield,\n                                      data: data,\n                                      testReadOnly: compositeReadOnly(field),\n                                      testRequired: testRequired.bind(this),\n                                      selectChanged: selectChanged.bind(this)\n                                    }\">\n                      </ng-container>\n                    </ng-container>\n  \n                    <spa-text-single *ngSwitchCase=\"'text-single'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [width]=\"subfield.width\" [options]=\"subfield.options\" [optionDisplay]=\"subfield.optionDisplay ?? 'name'\" [optionValue]=\"subfield.optionValue ?? 'value'\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [required]=\"testRequired(subfield)\" [min]=\"subfield.min\" [max]=\"subfield.max\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [hint]=\"subfield.hint\" [infoMessage]=\"subfield.infoMessage\" [suffix]=\"subfield.suffix\" [copyContent]=\"subfield.copyContent\" [clearContent]=\"subfield.clearContent\" [loadAction]=\"resolveLoadAction(subfield)\" [regex]=\"subfield.regex\" [field]=\"subfield\" [data]=\"data\" [detailsConfig]=\"subfield.detailsConfig\" [masterField]=\"subfield.masterField\"></spa-text-single>\n\n                    <spa-text-area *ngSwitchCase=\"'text-area'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [width]=\"subfield.width\" [rows]=\"subfield.rows\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [required]=\"testRequired(subfield)\" [min]=\"subfield.min\" [max]=\"subfield.max\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [hint]=\"subfield.hint\" [infoMessage]=\"subfield.infoMessage\" [suffix]=\"subfield.suffix\" [copyContent]=\"subfield.copyContent\" [clearContent]=\"subfield.clearContent\" [regex]=\"subfield.regex\"></spa-text-area>\n\n                    <spa-editor *ngSwitchCase=\"'editor'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [width]=\"subfield.width\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [required]=\"testRequired(subfield)\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [hint]=\"subfield.hint\" [infoMessage]=\"subfield.infoMessage\" [editorConfig]=\"subfield.editorConfig\"></spa-editor>\n\n                    <spa-text *ngSwitchDefault [display]=\"subfield.alias ?? subfield.name | camelToWords\" [width]=\"subfield.width\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [required]=\"testRequired(subfield)\" [min]=\"subfield.min\" [max]=\"subfield.max\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [hint]=\"subfield.hint\" [infoMessage]=\"subfield.infoMessage\" [suffix]=\"subfield.suffix\" [copyContent]=\"subfield.copyContent\" [clearContent]=\"subfield.clearContent\" [regex]=\"subfield.regex\"></spa-text>\n  \n  \n                  </ng-container>\n                </ng-container>\n              </div>\n            </div>\n          </ng-container>\n  \n  \n          <spa-text-single *ngSwitchCase=\"'text-single'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay ?? 'name'\" [optionValue]=\"field.optionValue ?? 'value'\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field,data[field.name])\" [required]=\"testRequired(field)\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\" [loadAction]=\"resolveLoadAction(field)\" [regex]=\"field.regex\" [field]=\"field\" [data]=\"data\" [detailsConfig]=\"field.detailsConfig\" [masterField]=\"field.masterField\"></spa-text-single>\n\n          <spa-text-area *ngSwitchCase=\"'text-area'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [rows]=\"field.rows\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field,data[field.name])\" [required]=\"testRequired(field)\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\" [regex]=\"field.regex\"></spa-text-area>\n\n          <spa-editor *ngSwitchCase=\"'editor'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field,data[field.name])\" [required]=\"testRequired(field)\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" [editorConfig]=\"field.editorConfig\"></spa-editor>\n\n          <spa-text *ngSwitchDefault [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field,data[field.name])\" [required]=\"testRequired(field)\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\" [regex]=\"field.regex\"></spa-text>\n  \n        </ng-container>\n  \n      </ng-container>\n  \n    </div>\n  \n  \n    <div class=\"span-col-center\" *ngIf=\"config.button\">\n      <button mat-raised-button color=\"primary\"  (click)=\"buttonClicked()\"  cdkFocusInitial>{{buttonDisplay}}</button>\n    </div>\n  \n  \n  </div>\n  <!-- Fixed: built-in fallback select template \u2014 spa-form used consumers' projected #dynamicSelect\n       (only detailsDialog provides one), so selects silently rendered NOTHING when spa-form was used\n       directly. The projected template (if any) still wins; this default carries the same bindings. -->\n  <ng-template #defaultDynamicSelect let-field=\"field\" let-data=\"data\" let-testReadOnly=\"testReadOnly\" let-testRequired=\"testRequired\" let-selectChanged=\"selectChanged\">\n    <spa-select\n      [display]=\"field.alias ?? field.name | camelToWords\"\n      [width]=\"field.width\"\n      [nullable]=\"field.nullable\"\n      [options]=\"field.options\"\n      [masterOptions]=\"field.masterOptions\"\n      [masterField]=\"field.masterField\"\n      [optionDisplay]=\"field.optionDisplay ?? 'name'\"\n      [optionValue]=\"field.optionValue ?? 'value'\"\n      [(value)]=\"data[field.name]\"\n      [defaultFirstValue]=\"field.defaultFirstValue\"\n      [required]=\"testRequired(field)\"\n      [readonly]=\"testReadOnly(field)\"\n      [hint]=\"field.hint\"\n      [detailsConfig]=\"field.detailsConfig\"\n      [loadAction]=\"field.loadAction\"\n      [loadIDField]=\"field.loadIDField\"\n      [field]=\"field\"\n      [data]=\"data\"\n      [infoMessage]=\"field.infoMessage\"\n      [copyContent]=\"field.copyContent\"\n      (valueChange)=\"selectChanged(field)\"\n    ></spa-select>\n  </ng-template>\n\n  <div class=\"notes-section\" *ngIf=\"config.notesConfig\">\n    <spa-notes\n      [title]=\"config.notesConfig.title || 'Notes'\"\n      [notes]=\"config.notesConfig.notes || []\"\n      [loadAction]=\"config.notesConfig.loadAction\"\n      [loadIDField]=\"config.notesConfig.loadIDField\"\n      [data]=\"data\"\n      [nameField]=\"config.notesConfig.nameField || 'createdByName'\"\n      [dateField]=\"config.notesConfig.dateField || 'createdDate'\"\n      [commentField]=\"config.notesConfig.commentField || 'details'\">\n    </spa-notes>\n  </div>\n</div>\n\n", styles: [".title{margin-top:.5em;margin-bottom:.5em;font-size:larger;font-weight:300;color:#0b447e}.composite-field-group{display:flex;flex-direction:row;flex-wrap:wrap;gap:12px}.tin-form-container{display:flex;flex-direction:row;width:100%;gap:16px}.width-100{width:100%!important}.width-75{width:70%!important}.notes-section{width:400px;border-left:1px solid #e0e0e0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: TextComponent, selector: "spa-text", inputs: ["appearance", "readonly", "hint", "display", "placeholder", "value", "format", "type", "width", "copyContent", "clearContent", "required", "min", "max", "regex", "suffix", "infoMessage"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "component", type: TextMaskComponent, selector: "spa-text-mask", inputs: ["appearance", "readonly", "hint", "display", "placeholder", "value", "width", "required", "min", "max", "regex", "infoMessage"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "component", type: TextAreaComponent, selector: "spa-text-area", inputs: ["appearance", "readonly", "hint", "display", "placeholder", "value", "rows", "width", "copyContent", "clearContent", "required", "min", "max", "regex", "suffix", "infoMessage"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "component", type: TextSingleComponent, selector: "spa-text-single", inputs: ["appearance", "readonly", "hint", "display", "placeholder", "value", "width", "copyContent", "clearContent", "options", "optionDisplay", "optionValue", "loadAction", "required", "min", "max", "regex", "suffix", "infoMessage", "field", "data", "detailsConfig", "masterField"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "component", type: CheckComponent, selector: "spa-check", inputs: ["readonly", "display", "value", "infoMessage"], outputs: ["valueChange", "click", "check", "uncheck", "infoClick"] }, { kind: "component", type: DateComponent, selector: "spa-date", inputs: ["required", "min", "max", "readonly", "hint", "value", "display", "placeholder", "width", "suffix", "infoMessage", "copyContent", "clearContent"], outputs: ["valueChange"] }, { kind: "component", type: DatetimeComponent, selector: "spa-datetime", inputs: ["display", "value", "readonly", "width", "min", "max", "suffix", "infoMessage", "copyContent", "clearContent"], outputs: ["valueChange"] }, { kind: "component", type: LabelComponent, selector: "spa-label", inputs: ["display", "value", "format", "suffix", "size"] }, { kind: "component", type: SelectComponent, selector: "spa-select", inputs: ["detailsConfig"] }, { kind: "component", type: MoneyComponent, selector: "spa-money", inputs: ["readonly", "hint", "display", "placeholder", "value", "width", "currency", "required", "min", "max", "infoMessage", "copyContent", "clearContent", "suffix"], outputs: ["valueChange", "leave", "enterPress", "infoClick"] }, { kind: "component", type: AttachComponent, selector: "spa-attach", inputs: ["fileOptions", "message", "files", "enableUpload"], outputs: ["filesChange", "upload"] }, { kind: "component", type: NumberComponent, selector: "spa-number", inputs: ["readonly", "hint", "display", "placeholder", "value", "width", "required", "min", "max", "step", "suffix", "infoMessage", "copyContent", "clearContent"], outputs: ["valueChange", "leave", "enterPress", "infoClick"] }, { kind: "component", type: ViewerComponent, selector: "spa-viewer", inputs: ["fileAction", "path", "folderName", "fileNames", "removable", "display", "title"], outputs: ["remove"] }, { kind: "component", type: EmailComponent, selector: "spa-email", inputs: ["display", "value", "readonly", "required", "hint", "suffix", "infoMessage", "copyContent", "clearContent", "options", "optionValue"], outputs: ["valueChange"] }, { kind: "component", type: TextMultiComponent, selector: "spa-text-multi", inputs: ["display", "value", "readonly", "required", "hint", "strict", "suffix", "infoMessage", "copyContent", "clearContent", "options", "optionDisplay", "optionValue", "loadAction"], outputs: ["valueChange", "hoverChange"] }, { kind: "component", type: SelectMultiComponent, selector: "spa-select-multi", inputs: ["display", "value", "readonly", "required", "hint", "options", "optionDisplay", "optionValue", "infoMessage", "copyContent", "clearContent", "nullable", "placeholder", "width", "suffix", "loadAction", "selectAll"], outputs: ["valueChange", "hoverChange"] }, { kind: "component", type: HtmlComponent, selector: "spa-html", inputs: ["value", "maxHeight", "display"] }, { kind: "component", type: EditorComponent, selector: "spa-editor", inputs: ["display", "value", "readonly", "required", "hint", "infoMessage", "placeholder", "width", "height", "minHeight", "defaultFontName", "editorConfig"], outputs: ["valueChange"] }, { kind: "component", type: NotesComponent, selector: "spa-notes", inputs: ["title", "notes", "loadAction", "loadIDField", "data", "nameField", "dateField", "commentField"] }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: FormComponent, isStandalone: false, selector: "spa-form", inputs: { files: "files", data: "data", config: "config" }, outputs: { buttonClick: "buttonClick", inputChange: "inputChange" }, queries: [{ propertyName: "dynamicSelectTemplate", first: true, predicate: ["dynamicSelect"], descendants: true }], viewQueries: [{ propertyName: "defaultDynamicSelectTemplate", first: true, predicate: ["defaultDynamicSelect"], descendants: true, static: true }], ngImport: i0, template: "\n\n\n<div class=\"tin-form-container\" >\n  <div [ngClass]=\"[multiColumn ? 'tin-grid' : 'tin-col', config.notesConfig ? 'width-75' : 'width-100']\" class=\"form-main-content\">\n\n    <div *ngIf=\"!hasAccess\" class=\"tin-center\">\n      <p><em>Access Restricted</em></p>\n    </div>\n  \n    <div [ngClass]=\"field.span || field.type =='section' || field.type =='file' || field.type =='file-view' || field.type =='editor'  ? 'span-col' : ''\" *ngFor=\"let field of visibleFields\"><!-- TS-11: bind cached visibleFields instead of getVisibleFields() per CD -->\n  \n      <ng-container>\n  \n        <ng-container [ngSwitch]=\"field.type\" class=\"highlight\">\n  \n          <div *ngSwitchCase=\"'section'\" class=\"title d-flex align-items-center\" (click)=\"toggleSection(field)\" style=\"cursor: pointer;\">\n            <label style=\"font-size: larger;margin-right: 10px;\">{{field.alias ?? field.name | camelToWords}}</label>\n            <mat-icon *ngIf=\"field.infoMessage\" (click)=\"onInfoClick($event, field.infoMessage)\" style=\"color: steelblue; font-size: 14px;\">info</mat-icon>\n            <!-- <button  mat-icon-button class=\"info-icon-button\"  matTooltip=\"Info\" matTooltipPosition=\"above\">\n  \n            </button> -->\n            <mat-icon *ngIf=\"hasSectionFields(field.name)\">{{shouldSectionCollapse(field) ? 'expand_more' : 'expand_less'}}</mat-icon>\n          </div>\n  \n          <ng-container *ngSwitchCase=\"'file'\">\n            <div class=\"mt-1 mb-2\" *ngIf=\"config.mode !='view'\">\n              <spa-attach [message]=\"field.alias ?? 'Drag and Drop files here'\" [(files)]=\"files\" [fileOptions]=\"field.fileOptions\"></spa-attach>\n            </div>\n          </ng-container>\n  \n          <ng-container *ngSwitchCase=\"'file-view'\">\n            <div class=\"mt-1 mb-2\" *ngIf=\"config.mode && config.mode !='create'\">\n              <spa-viewer [fileAction]=\"field.loadAction\" [path]=\"field.path\" [folderName]=\"data[field.keyField]\" ></spa-viewer>\n            </div>\n          </ng-container>\n  \n          <spa-html *ngSwitchCase=\"'html'\" [display]=\"field.alias | camelToWords\" [value]=\"data[field.name]\" [maxHeight]=\"field.maxHeight\"></spa-html>\n  \n          <label *ngSwitchCase=\"'blank'\"></label>\n  \n          <label *ngSwitchCase=\"'string'\" [ngStyle]=\"{'font-size':field.size ?? '14px'}\" >{{data[field.name] ?? field.alias ?? field.name}} {{field.suffix ?? ''}}</label>\n  \n          <spa-label *ngSwitchCase=\"'label'\" [display]=\"field.alias ?? field.name | camelToWords\" [value]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [format]=\"field.format ?? 'text'\" [suffix]=\"field.suffix\" [size]=\"field.size\"></spa-label>\n  \n          <spa-number *ngSwitchCase=\"'number'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [required]=\"testRequired(field)\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\"></spa-number>\n  \n          <spa-money *ngSwitchCase=\"'money'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [required]=\"testRequired(field)\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\"></spa-money>\n  \n          <spa-check *ngSwitchCase=\"'checkbox'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [readonly]=\"testReadOnly(field)\" [infoMessage]=\"field.infoMessage\" ></spa-check>\n  \n          <spa-date *ngSwitchCase=\"'date'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [min]=\"field?.min\" [max]=\"field?.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" ></spa-date>\n  \n          <spa-datetime *ngSwitchCase=\"'datetime'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [readonly]=\"testReadOnly(field)\" [min]=\"field.min\" [max]=\"field.max\" [infoMessage]=\"field.infoMessage\" ></spa-datetime>\n  \n          <spa-email *ngSwitchCase=\"'email'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field,data[field.name])\" [required]=\"testRequired(field)\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\"  [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\"></spa-email>\n  \n          <spa-text-mask *ngSwitchCase=\"'text-mask'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field,data[field.name])\" [required]=\"testRequired(field)\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\"></spa-text-mask>\n  \n  \n          <ng-container *ngSwitchCase=\"'select'\">\n            <ng-container *ngTemplateOutlet=\"selectTemplate; context: {\n                    $implicit: field,\n                    field: field,\n                    data: data,\n                    testReadOnly: testReadOnly.bind(this),\n                    testRequired: testRequired.bind(this),\n                    selectChanged: selectChanged.bind(this),\n                    resolveLoadAction: resolveLoadAction.bind(this)\n                  }\">\n            </ng-container>\n          </ng-container>\n  \n  \n          <spa-select-multi *ngSwitchCase=\"'select-multi'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay ?? 'name'\" [optionValue]=\"field.optionValue ?? 'value'\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [required]=\"testRequired(field)\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\" [loadAction]=\"resolveLoadAction(field)\" [selectAll]=\"field.selectAll\">\n          </spa-select-multi>\n  \n          <spa-text-multi *ngSwitchCase=\"'text-multi'\" [strict]=\"field.strict\" [display]=\"field.alias ?? field.name | camelToWords\" [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay ?? 'name'\" [optionValue]=\"field.optionValue ?? 'value'\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field,data[field.name])\" [required]=\"testRequired(field)\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\" [loadAction]=\"resolveLoadAction(field)\"></spa-text-multi>\n  \n  \n  \n          <ng-container *ngSwitchCase=\"'composite'\">\n            <div class=\"composite-field-container\">\n              <div class=\"composite-field-group\">\n                <ng-container *ngFor=\"let subfield of getVisibleSubfields(field)\">\n                  <ng-container [ngSwitch]=\"subfield.type\">\n  \n                    <label *ngSwitchCase=\"'string'\" [ngStyle]=\"{'font-size':field.size ?? '14px'}\" >{{data[field.name] ?? field.alias ?? field.name}} {{field.suffix ?? ''}}</label>\n                    \n                    <spa-number *ngSwitchCase=\"'number'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [width]=\"subfield.width\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [required]=\"testRequired(subfield)\" [min]=\"subfield.min\" [max]=\"subfield.max\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [hint]=\"subfield.hint\" [infoMessage]=\"subfield.infoMessage\"  [suffix]=\"subfield.suffix\" [copyContent]=\"subfield.copyContent\" [clearContent]=\"subfield.clearContent\"></spa-number>\n  \n                    <spa-money *ngSwitchCase=\"'money'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [width]=\"subfield.width\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [required]=\"testRequired(subfield)\" [min]=\"subfield.min\" [max]=\"subfield.max\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [hint]=\"subfield.hint\" [infoMessage]=\"subfield.infoMessage\" [suffix]=\"subfield.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\"></spa-money>\n  \n                    <spa-check *ngSwitchCase=\"'checkbox'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [infoMessage]=\"subfield.infoMessage\" ></spa-check>\n  \n                    <spa-date *ngSwitchCase=\"'date'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [width]=\"subfield.width\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [min]=\"subfield.min\" [max]=\"subfield.max\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [hint]=\"subfield.hint\" [infoMessage]=\"subfield.infoMessage\" ></spa-date>\n  \n                    <spa-datetime *ngSwitchCase=\"'datetime'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [min]=\"subfield.min\" [max]=\"subfield.max\" [infoMessage]=\"subfield.infoMessage\" ></spa-datetime>\n  \n                    <!-- Fixed: composite select subfields projected the PARENT composite field into the\n                         dynamic select template (wrong options/value binding) and omitted testRequired,\n                         so the template's testRequired(field) call threw and killed the whole dialog.\n                         Context now mirrors the top-level select outlet, with the SUBFIELD, and readonly\n                         cascades composite parent || subfield like every other subfield type. -->\n                    <ng-container *ngSwitchCase=\"'select'\">\n                      <ng-container *ngTemplateOutlet=\"selectTemplate; context: {\n                                      $implicit: subfield,\n                                      field: subfield,\n                                      data: data,\n                                      testReadOnly: compositeReadOnly(field),\n                                      testRequired: testRequired.bind(this),\n                                      selectChanged: selectChanged.bind(this),\n                                      resolveLoadAction: resolveLoadAction.bind(this)\n                                    }\">\n                      </ng-container>\n                    </ng-container>\n  \n                    <spa-text-single *ngSwitchCase=\"'text-single'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [width]=\"subfield.width\" [options]=\"subfield.options\" [optionDisplay]=\"subfield.optionDisplay ?? 'name'\" [optionValue]=\"subfield.optionValue ?? 'value'\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [required]=\"testRequired(subfield)\" [min]=\"subfield.min\" [max]=\"subfield.max\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [hint]=\"subfield.hint\" [infoMessage]=\"subfield.infoMessage\" [suffix]=\"subfield.suffix\" [copyContent]=\"subfield.copyContent\" [clearContent]=\"subfield.clearContent\" [loadAction]=\"resolveLoadAction(subfield)\" [regex]=\"subfield.regex\" [field]=\"subfield\" [data]=\"data\" [detailsConfig]=\"subfield.detailsConfig\" [masterField]=\"subfield.masterField\"></spa-text-single>\n\n                    <spa-text-area *ngSwitchCase=\"'text-area'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [width]=\"subfield.width\" [rows]=\"subfield.rows\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [required]=\"testRequired(subfield)\" [min]=\"subfield.min\" [max]=\"subfield.max\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [hint]=\"subfield.hint\" [infoMessage]=\"subfield.infoMessage\" [suffix]=\"subfield.suffix\" [copyContent]=\"subfield.copyContent\" [clearContent]=\"subfield.clearContent\" [regex]=\"subfield.regex\"></spa-text-area>\n\n                    <spa-editor *ngSwitchCase=\"'editor'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [width]=\"subfield.width\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [required]=\"testRequired(subfield)\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [hint]=\"subfield.hint\" [infoMessage]=\"subfield.infoMessage\" [editorConfig]=\"subfield.editorConfig\"></spa-editor>\n\n                    <spa-text *ngSwitchDefault [display]=\"subfield.alias ?? subfield.name | camelToWords\" [width]=\"subfield.width\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [required]=\"testRequired(subfield)\" [min]=\"subfield.min\" [max]=\"subfield.max\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [hint]=\"subfield.hint\" [infoMessage]=\"subfield.infoMessage\" [suffix]=\"subfield.suffix\" [copyContent]=\"subfield.copyContent\" [clearContent]=\"subfield.clearContent\" [regex]=\"subfield.regex\"></spa-text>\n  \n  \n                  </ng-container>\n                </ng-container>\n              </div>\n            </div>\n          </ng-container>\n  \n  \n          <spa-text-single *ngSwitchCase=\"'text-single'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay ?? 'name'\" [optionValue]=\"field.optionValue ?? 'value'\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field,data[field.name])\" [required]=\"testRequired(field)\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\" [loadAction]=\"resolveLoadAction(field)\" [regex]=\"field.regex\" [field]=\"field\" [data]=\"data\" [detailsConfig]=\"field.detailsConfig\" [masterField]=\"field.masterField\"></spa-text-single>\n\n          <spa-text-area *ngSwitchCase=\"'text-area'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [rows]=\"field.rows\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field,data[field.name])\" [required]=\"testRequired(field)\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\" [regex]=\"field.regex\"></spa-text-area>\n\n          <spa-editor *ngSwitchCase=\"'editor'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field,data[field.name])\" [required]=\"testRequired(field)\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" [editorConfig]=\"field.editorConfig\"></spa-editor>\n\n          <spa-text *ngSwitchDefault [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field,data[field.name])\" [required]=\"testRequired(field)\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\" [regex]=\"field.regex\"></spa-text>\n  \n        </ng-container>\n  \n      </ng-container>\n  \n    </div>\n  \n  \n    <div class=\"span-col-center\" *ngIf=\"config.button\">\n      <button mat-raised-button color=\"primary\"  (click)=\"buttonClicked()\"  cdkFocusInitial>{{buttonDisplay}}</button>\n    </div>\n  \n  \n  </div>\n  <!-- Fixed: built-in fallback select template \u2014 spa-form used consumers' projected #dynamicSelect\n       (only detailsDialog provides one), so selects silently rendered NOTHING when spa-form was used\n       directly. The projected template (if any) still wins; this default carries the same bindings. -->\n  <ng-template #defaultDynamicSelect let-field=\"field\" let-data=\"data\" let-testReadOnly=\"testReadOnly\" let-testRequired=\"testRequired\" let-selectChanged=\"selectChanged\" let-resolveLoadAction=\"resolveLoadAction\">\n    <spa-select\n      [display]=\"field.alias ?? field.name | camelToWords\"\n      [width]=\"field.width\"\n      [nullable]=\"field.nullable\"\n      [options]=\"field.options\"\n      [masterOptions]=\"field.masterOptions\"\n      [masterField]=\"field.masterField\"\n      [optionDisplay]=\"field.optionDisplay ?? 'name'\"\n      [optionValue]=\"field.optionValue ?? 'value'\"\n      [(value)]=\"data[field.name]\"\n      [defaultFirstValue]=\"field.defaultFirstValue\"\n      [required]=\"testRequired(field)\"\n      [readonly]=\"testReadOnly(field)\"\n      [hint]=\"field.hint\"\n      [detailsConfig]=\"field.detailsConfig\"\n      [loadAction]=\"resolveLoadAction(field)\"\n      [loadIDField]=\"field.loadIDField\"\n      [field]=\"field\"\n      [data]=\"data\"\n      [infoMessage]=\"field.infoMessage\"\n      [copyContent]=\"field.copyContent\"\n      (valueChange)=\"selectChanged(field)\"\n    ></spa-select>\n  </ng-template>\n\n  <div class=\"notes-section\" *ngIf=\"config.notesConfig\">\n    <spa-notes\n      [title]=\"config.notesConfig.title || 'Notes'\"\n      [notes]=\"config.notesConfig.notes || []\"\n      [loadAction]=\"config.notesConfig.loadAction\"\n      [loadIDField]=\"config.notesConfig.loadIDField\"\n      [data]=\"data\"\n      [nameField]=\"config.notesConfig.nameField || 'createdByName'\"\n      [dateField]=\"config.notesConfig.dateField || 'createdDate'\"\n      [commentField]=\"config.notesConfig.commentField || 'details'\">\n    </spa-notes>\n  </div>\n</div>\n\n", styles: [".title{margin-top:.5em;margin-bottom:.5em;font-size:larger;font-weight:300;color:#0b447e}.composite-field-group{display:flex;flex-direction:row;flex-wrap:wrap;gap:12px}.tin-form-container{display:flex;flex-direction:row;width:100%;gap:16px}.width-100{width:100%!important}.width-75{width:70%!important}.notes-section{width:400px;border-left:1px solid #e0e0e0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: TextComponent, selector: "spa-text", inputs: ["appearance", "readonly", "hint", "display", "placeholder", "value", "format", "type", "width", "copyContent", "clearContent", "required", "min", "max", "regex", "suffix", "infoMessage"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "component", type: TextMaskComponent, selector: "spa-text-mask", inputs: ["appearance", "readonly", "hint", "display", "placeholder", "value", "width", "required", "min", "max", "regex", "infoMessage"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "component", type: TextAreaComponent, selector: "spa-text-area", inputs: ["appearance", "readonly", "hint", "display", "placeholder", "value", "rows", "width", "copyContent", "clearContent", "required", "min", "max", "regex", "suffix", "infoMessage"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "component", type: TextSingleComponent, selector: "spa-text-single", inputs: ["appearance", "readonly", "hint", "display", "placeholder", "value", "width", "copyContent", "clearContent", "options", "optionDisplay", "optionValue", "loadAction", "required", "min", "max", "regex", "suffix", "infoMessage", "field", "data", "detailsConfig", "masterField"], outputs: ["valueChange", "leave", "enterPress"] }, { kind: "component", type: CheckComponent, selector: "spa-check", inputs: ["readonly", "display", "value", "infoMessage"], outputs: ["valueChange", "click", "check", "uncheck", "infoClick"] }, { kind: "component", type: DateComponent, selector: "spa-date", inputs: ["required", "min", "max", "readonly", "hint", "value", "display", "placeholder", "width", "suffix", "infoMessage", "copyContent", "clearContent"], outputs: ["valueChange"] }, { kind: "component", type: DatetimeComponent, selector: "spa-datetime", inputs: ["display", "value", "readonly", "width", "min", "max", "suffix", "infoMessage", "copyContent", "clearContent"], outputs: ["valueChange"] }, { kind: "component", type: LabelComponent, selector: "spa-label", inputs: ["display", "value", "format", "suffix", "size"] }, { kind: "component", type: SelectComponent, selector: "spa-select", inputs: ["detailsConfig"] }, { kind: "component", type: MoneyComponent, selector: "spa-money", inputs: ["readonly", "hint", "display", "placeholder", "value", "width", "currency", "required", "min", "max", "infoMessage", "copyContent", "clearContent", "suffix"], outputs: ["valueChange", "leave", "enterPress", "infoClick"] }, { kind: "component", type: AttachComponent, selector: "spa-attach", inputs: ["fileOptions", "message", "files", "enableUpload"], outputs: ["filesChange", "upload"] }, { kind: "component", type: NumberComponent, selector: "spa-number", inputs: ["readonly", "hint", "display", "placeholder", "value", "width", "required", "min", "max", "step", "suffix", "infoMessage", "copyContent", "clearContent"], outputs: ["valueChange", "leave", "enterPress", "infoClick"] }, { kind: "component", type: ViewerComponent, selector: "spa-viewer", inputs: ["fileAction", "path", "folderName", "fileNames", "removable", "display", "title"], outputs: ["remove"] }, { kind: "component", type: EmailComponent, selector: "spa-email", inputs: ["display", "value", "readonly", "required", "hint", "suffix", "infoMessage", "copyContent", "clearContent", "options", "optionValue"], outputs: ["valueChange"] }, { kind: "component", type: TextMultiComponent, selector: "spa-text-multi", inputs: ["display", "value", "readonly", "required", "hint", "strict", "suffix", "infoMessage", "copyContent", "clearContent", "options", "optionDisplay", "optionValue", "loadAction"], outputs: ["valueChange", "hoverChange"] }, { kind: "component", type: SelectMultiComponent, selector: "spa-select-multi", inputs: ["display", "value", "readonly", "required", "hint", "options", "optionDisplay", "optionValue", "infoMessage", "copyContent", "clearContent", "nullable", "placeholder", "width", "suffix", "loadAction", "selectAll"], outputs: ["valueChange", "hoverChange"] }, { kind: "component", type: HtmlComponent, selector: "spa-html", inputs: ["value", "maxHeight", "display"] }, { kind: "component", type: EditorComponent, selector: "spa-editor", inputs: ["display", "value", "readonly", "required", "hint", "infoMessage", "placeholder", "width", "height", "minHeight", "defaultFontName", "editorConfig"], outputs: ["valueChange"] }, { kind: "component", type: NotesComponent, selector: "spa-notes", inputs: ["title", "notes", "loadAction", "loadIDField", "data", "nameField", "dateField", "commentField"] }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: FormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spa-form', standalone: false, template: "\n\n\n<div class=\"tin-form-container\" >\n  <div [ngClass]=\"[multiColumn ? 'tin-grid' : 'tin-col', config.notesConfig ? 'width-75' : 'width-100']\" class=\"form-main-content\">\n\n    <div *ngIf=\"!hasAccess\" class=\"tin-center\">\n      <p><em>Access Restricted</em></p>\n    </div>\n  \n    <div [ngClass]=\"field.span || field.type =='section' || field.type =='file' || field.type =='file-view' || field.type =='editor'  ? 'span-col' : ''\" *ngFor=\"let field of visibleFields\"><!-- TS-11: bind cached visibleFields instead of getVisibleFields() per CD -->\n  \n      <ng-container>\n  \n        <ng-container [ngSwitch]=\"field.type\" class=\"highlight\">\n  \n          <div *ngSwitchCase=\"'section'\" class=\"title d-flex align-items-center\" (click)=\"toggleSection(field)\" style=\"cursor: pointer;\">\n            <label style=\"font-size: larger;margin-right: 10px;\">{{field.alias ?? field.name | camelToWords}}</label>\n            <mat-icon *ngIf=\"field.infoMessage\" (click)=\"onInfoClick($event, field.infoMessage)\" style=\"color: steelblue; font-size: 14px;\">info</mat-icon>\n            <!-- <button  mat-icon-button class=\"info-icon-button\"  matTooltip=\"Info\" matTooltipPosition=\"above\">\n  \n            </button> -->\n            <mat-icon *ngIf=\"hasSectionFields(field.name)\">{{shouldSectionCollapse(field) ? 'expand_more' : 'expand_less'}}</mat-icon>\n          </div>\n  \n          <ng-container *ngSwitchCase=\"'file'\">\n            <div class=\"mt-1 mb-2\" *ngIf=\"config.mode !='view'\">\n              <spa-attach [message]=\"field.alias ?? 'Drag and Drop files here'\" [(files)]=\"files\" [fileOptions]=\"field.fileOptions\"></spa-attach>\n            </div>\n          </ng-container>\n  \n          <ng-container *ngSwitchCase=\"'file-view'\">\n            <div class=\"mt-1 mb-2\" *ngIf=\"config.mode && config.mode !='create'\">\n              <spa-viewer [fileAction]=\"field.loadAction\" [path]=\"field.path\" [folderName]=\"data[field.keyField]\" ></spa-viewer>\n            </div>\n          </ng-container>\n  \n          <spa-html *ngSwitchCase=\"'html'\" [display]=\"field.alias | camelToWords\" [value]=\"data[field.name]\" [maxHeight]=\"field.maxHeight\"></spa-html>\n  \n          <label *ngSwitchCase=\"'blank'\"></label>\n  \n          <label *ngSwitchCase=\"'string'\" [ngStyle]=\"{'font-size':field.size ?? '14px'}\" >{{data[field.name] ?? field.alias ?? field.name}} {{field.suffix ?? ''}}</label>\n  \n          <spa-label *ngSwitchCase=\"'label'\" [display]=\"field.alias ?? field.name | camelToWords\" [value]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [format]=\"field.format ?? 'text'\" [suffix]=\"field.suffix\" [size]=\"field.size\"></spa-label>\n  \n          <spa-number *ngSwitchCase=\"'number'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [required]=\"testRequired(field)\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\"></spa-number>\n  \n          <spa-money *ngSwitchCase=\"'money'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [required]=\"testRequired(field)\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\"></spa-money>\n  \n          <spa-check *ngSwitchCase=\"'checkbox'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [readonly]=\"testReadOnly(field)\" [infoMessage]=\"field.infoMessage\" ></spa-check>\n  \n          <spa-date *ngSwitchCase=\"'date'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [min]=\"field?.min\" [max]=\"field?.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" ></spa-date>\n  \n          <spa-datetime *ngSwitchCase=\"'datetime'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [readonly]=\"testReadOnly(field)\" [min]=\"field.min\" [max]=\"field.max\" [infoMessage]=\"field.infoMessage\" ></spa-datetime>\n  \n          <spa-email *ngSwitchCase=\"'email'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field,data[field.name])\" [required]=\"testRequired(field)\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\"  [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\"></spa-email>\n  \n          <spa-text-mask *ngSwitchCase=\"'text-mask'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field,data[field.name])\" [required]=\"testRequired(field)\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\"></spa-text-mask>\n  \n  \n          <ng-container *ngSwitchCase=\"'select'\">\n            <ng-container *ngTemplateOutlet=\"selectTemplate; context: {\n                    $implicit: field,\n                    field: field,\n                    data: data,\n                    testReadOnly: testReadOnly.bind(this),\n                    testRequired: testRequired.bind(this),\n                    selectChanged: selectChanged.bind(this)\n                  }\">\n            </ng-container>\n          </ng-container>\n  \n  \n          <spa-select-multi *ngSwitchCase=\"'select-multi'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay ?? 'name'\" [optionValue]=\"field.optionValue ?? 'value'\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [required]=\"testRequired(field)\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\" [loadAction]=\"resolveLoadAction(field)\" [selectAll]=\"field.selectAll\">\n          </spa-select-multi>\n  \n          <spa-text-multi *ngSwitchCase=\"'text-multi'\" [strict]=\"field.strict\" [display]=\"field.alias ?? field.name | camelToWords\" [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay ?? 'name'\" [optionValue]=\"field.optionValue ?? 'value'\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field,data[field.name])\" [required]=\"testRequired(field)\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\" [loadAction]=\"resolveLoadAction(field)\"></spa-text-multi>\n  \n  \n  \n          <ng-container *ngSwitchCase=\"'composite'\">\n            <div class=\"composite-field-container\">\n              <div class=\"composite-field-group\">\n                <ng-container *ngFor=\"let subfield of getVisibleSubfields(field)\">\n                  <ng-container [ngSwitch]=\"subfield.type\">\n  \n                    <label *ngSwitchCase=\"'string'\" [ngStyle]=\"{'font-size':field.size ?? '14px'}\" >{{data[field.name] ?? field.alias ?? field.name}} {{field.suffix ?? ''}}</label>\n                    \n                    <spa-number *ngSwitchCase=\"'number'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [width]=\"subfield.width\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [required]=\"testRequired(subfield)\" [min]=\"subfield.min\" [max]=\"subfield.max\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [hint]=\"subfield.hint\" [infoMessage]=\"subfield.infoMessage\"  [suffix]=\"subfield.suffix\" [copyContent]=\"subfield.copyContent\" [clearContent]=\"subfield.clearContent\"></spa-number>\n  \n                    <spa-money *ngSwitchCase=\"'money'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [width]=\"subfield.width\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [required]=\"testRequired(subfield)\" [min]=\"subfield.min\" [max]=\"subfield.max\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [hint]=\"subfield.hint\" [infoMessage]=\"subfield.infoMessage\" [suffix]=\"subfield.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\"></spa-money>\n  \n                    <spa-check *ngSwitchCase=\"'checkbox'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [infoMessage]=\"subfield.infoMessage\" ></spa-check>\n  \n                    <spa-date *ngSwitchCase=\"'date'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [width]=\"subfield.width\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [min]=\"subfield.min\" [max]=\"subfield.max\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [hint]=\"subfield.hint\" [infoMessage]=\"subfield.infoMessage\" ></spa-date>\n  \n                    <spa-datetime *ngSwitchCase=\"'datetime'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [min]=\"subfield.min\" [max]=\"subfield.max\" [infoMessage]=\"subfield.infoMessage\" ></spa-datetime>\n  \n                    <!-- Fixed: composite select subfields projected the PARENT composite field into the\n                         dynamic select template (wrong options/value binding) and omitted testRequired,\n                         so the template's testRequired(field) call threw and killed the whole dialog.\n                         Context now mirrors the top-level select outlet, with the SUBFIELD, and readonly\n                         cascades composite parent || subfield like every other subfield type. -->\n                    <ng-container *ngSwitchCase=\"'select'\">\n                      <ng-container *ngTemplateOutlet=\"selectTemplate; context: {\n                                      $implicit: subfield,\n                                      field: subfield,\n                                      data: data,\n                                      testReadOnly: compositeReadOnly(field),\n                                      testRequired: testRequired.bind(this),\n                                      selectChanged: selectChanged.bind(this)\n                                    }\">\n                      </ng-container>\n                    </ng-container>\n  \n                    <spa-text-single *ngSwitchCase=\"'text-single'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [width]=\"subfield.width\" [options]=\"subfield.options\" [optionDisplay]=\"subfield.optionDisplay ?? 'name'\" [optionValue]=\"subfield.optionValue ?? 'value'\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [required]=\"testRequired(subfield)\" [min]=\"subfield.min\" [max]=\"subfield.max\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [hint]=\"subfield.hint\" [infoMessage]=\"subfield.infoMessage\" [suffix]=\"subfield.suffix\" [copyContent]=\"subfield.copyContent\" [clearContent]=\"subfield.clearContent\" [loadAction]=\"resolveLoadAction(subfield)\" [regex]=\"subfield.regex\" [field]=\"subfield\" [data]=\"data\" [detailsConfig]=\"subfield.detailsConfig\" [masterField]=\"subfield.masterField\"></spa-text-single>\n\n                    <spa-text-area *ngSwitchCase=\"'text-area'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [width]=\"subfield.width\" [rows]=\"subfield.rows\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [required]=\"testRequired(subfield)\" [min]=\"subfield.min\" [max]=\"subfield.max\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [hint]=\"subfield.hint\" [infoMessage]=\"subfield.infoMessage\" [suffix]=\"subfield.suffix\" [copyContent]=\"subfield.copyContent\" [clearContent]=\"subfield.clearContent\" [regex]=\"subfield.regex\"></spa-text-area>\n\n                    <spa-editor *ngSwitchCase=\"'editor'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [width]=\"subfield.width\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [required]=\"testRequired(subfield)\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [hint]=\"subfield.hint\" [infoMessage]=\"subfield.infoMessage\" [editorConfig]=\"subfield.editorConfig\"></spa-editor>\n\n                    <spa-text *ngSwitchDefault [display]=\"subfield.alias ?? subfield.name | camelToWords\" [width]=\"subfield.width\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [required]=\"testRequired(subfield)\" [min]=\"subfield.min\" [max]=\"subfield.max\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [hint]=\"subfield.hint\" [infoMessage]=\"subfield.infoMessage\" [suffix]=\"subfield.suffix\" [copyContent]=\"subfield.copyContent\" [clearContent]=\"subfield.clearContent\" [regex]=\"subfield.regex\"></spa-text>\n  \n  \n                  </ng-container>\n                </ng-container>\n              </div>\n            </div>\n          </ng-container>\n  \n  \n          <spa-text-single *ngSwitchCase=\"'text-single'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay ?? 'name'\" [optionValue]=\"field.optionValue ?? 'value'\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field,data[field.name])\" [required]=\"testRequired(field)\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\" [loadAction]=\"resolveLoadAction(field)\" [regex]=\"field.regex\" [field]=\"field\" [data]=\"data\" [detailsConfig]=\"field.detailsConfig\" [masterField]=\"field.masterField\"></spa-text-single>\n\n          <spa-text-area *ngSwitchCase=\"'text-area'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [rows]=\"field.rows\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field,data[field.name])\" [required]=\"testRequired(field)\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\" [regex]=\"field.regex\"></spa-text-area>\n\n          <spa-editor *ngSwitchCase=\"'editor'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field,data[field.name])\" [required]=\"testRequired(field)\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" [editorConfig]=\"field.editorConfig\"></spa-editor>\n\n          <spa-text *ngSwitchDefault [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field,data[field.name])\" [required]=\"testRequired(field)\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\" [regex]=\"field.regex\"></spa-text>\n  \n        </ng-container>\n  \n      </ng-container>\n  \n    </div>\n  \n  \n    <div class=\"span-col-center\" *ngIf=\"config.button\">\n      <button mat-raised-button color=\"primary\"  (click)=\"buttonClicked()\"  cdkFocusInitial>{{buttonDisplay}}</button>\n    </div>\n  \n  \n  </div>\n  <!-- Fixed: built-in fallback select template \u2014 spa-form used consumers' projected #dynamicSelect\n       (only detailsDialog provides one), so selects silently rendered NOTHING when spa-form was used\n       directly. The projected template (if any) still wins; this default carries the same bindings. -->\n  <ng-template #defaultDynamicSelect let-field=\"field\" let-data=\"data\" let-testReadOnly=\"testReadOnly\" let-testRequired=\"testRequired\" let-selectChanged=\"selectChanged\">\n    <spa-select\n      [display]=\"field.alias ?? field.name | camelToWords\"\n      [width]=\"field.width\"\n      [nullable]=\"field.nullable\"\n      [options]=\"field.options\"\n      [masterOptions]=\"field.masterOptions\"\n      [masterField]=\"field.masterField\"\n      [optionDisplay]=\"field.optionDisplay ?? 'name'\"\n      [optionValue]=\"field.optionValue ?? 'value'\"\n      [(value)]=\"data[field.name]\"\n      [defaultFirstValue]=\"field.defaultFirstValue\"\n      [required]=\"testRequired(field)\"\n      [readonly]=\"testReadOnly(field)\"\n      [hint]=\"field.hint\"\n      [detailsConfig]=\"field.detailsConfig\"\n      [loadAction]=\"field.loadAction\"\n      [loadIDField]=\"field.loadIDField\"\n      [field]=\"field\"\n      [data]=\"data\"\n      [infoMessage]=\"field.infoMessage\"\n      [copyContent]=\"field.copyContent\"\n      (valueChange)=\"selectChanged(field)\"\n    ></spa-select>\n  </ng-template>\n\n  <div class=\"notes-section\" *ngIf=\"config.notesConfig\">\n    <spa-notes\n      [title]=\"config.notesConfig.title || 'Notes'\"\n      [notes]=\"config.notesConfig.notes || []\"\n      [loadAction]=\"config.notesConfig.loadAction\"\n      [loadIDField]=\"config.notesConfig.loadIDField\"\n      [data]=\"data\"\n      [nameField]=\"config.notesConfig.nameField || 'createdByName'\"\n      [dateField]=\"config.notesConfig.dateField || 'createdDate'\"\n      [commentField]=\"config.notesConfig.commentField || 'details'\">\n    </spa-notes>\n  </div>\n</div>\n\n", styles: [".title{margin-top:.5em;margin-bottom:.5em;font-size:larger;font-weight:300;color:#0b447e}.composite-field-group{display:flex;flex-direction:row;flex-wrap:wrap;gap:12px}.tin-form-container{display:flex;flex-direction:row;width:100%;gap:16px}.width-100{width:100%!important}.width-75{width:70%!important}.notes-section{width:400px;border-left:1px solid #e0e0e0}\n"] }]
+            args: [{ selector: 'spa-form', standalone: false, template: "\n\n\n<div class=\"tin-form-container\" >\n  <div [ngClass]=\"[multiColumn ? 'tin-grid' : 'tin-col', config.notesConfig ? 'width-75' : 'width-100']\" class=\"form-main-content\">\n\n    <div *ngIf=\"!hasAccess\" class=\"tin-center\">\n      <p><em>Access Restricted</em></p>\n    </div>\n  \n    <div [ngClass]=\"field.span || field.type =='section' || field.type =='file' || field.type =='file-view' || field.type =='editor'  ? 'span-col' : ''\" *ngFor=\"let field of visibleFields\"><!-- TS-11: bind cached visibleFields instead of getVisibleFields() per CD -->\n  \n      <ng-container>\n  \n        <ng-container [ngSwitch]=\"field.type\" class=\"highlight\">\n  \n          <div *ngSwitchCase=\"'section'\" class=\"title d-flex align-items-center\" (click)=\"toggleSection(field)\" style=\"cursor: pointer;\">\n            <label style=\"font-size: larger;margin-right: 10px;\">{{field.alias ?? field.name | camelToWords}}</label>\n            <mat-icon *ngIf=\"field.infoMessage\" (click)=\"onInfoClick($event, field.infoMessage)\" style=\"color: steelblue; font-size: 14px;\">info</mat-icon>\n            <!-- <button  mat-icon-button class=\"info-icon-button\"  matTooltip=\"Info\" matTooltipPosition=\"above\">\n  \n            </button> -->\n            <mat-icon *ngIf=\"hasSectionFields(field.name)\">{{shouldSectionCollapse(field) ? 'expand_more' : 'expand_less'}}</mat-icon>\n          </div>\n  \n          <ng-container *ngSwitchCase=\"'file'\">\n            <div class=\"mt-1 mb-2\" *ngIf=\"config.mode !='view'\">\n              <spa-attach [message]=\"field.alias ?? 'Drag and Drop files here'\" [(files)]=\"files\" [fileOptions]=\"field.fileOptions\"></spa-attach>\n            </div>\n          </ng-container>\n  \n          <ng-container *ngSwitchCase=\"'file-view'\">\n            <div class=\"mt-1 mb-2\" *ngIf=\"config.mode && config.mode !='create'\">\n              <spa-viewer [fileAction]=\"field.loadAction\" [path]=\"field.path\" [folderName]=\"data[field.keyField]\" ></spa-viewer>\n            </div>\n          </ng-container>\n  \n          <spa-html *ngSwitchCase=\"'html'\" [display]=\"field.alias | camelToWords\" [value]=\"data[field.name]\" [maxHeight]=\"field.maxHeight\"></spa-html>\n  \n          <label *ngSwitchCase=\"'blank'\"></label>\n  \n          <label *ngSwitchCase=\"'string'\" [ngStyle]=\"{'font-size':field.size ?? '14px'}\" >{{data[field.name] ?? field.alias ?? field.name}} {{field.suffix ?? ''}}</label>\n  \n          <spa-label *ngSwitchCase=\"'label'\" [display]=\"field.alias ?? field.name | camelToWords\" [value]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [format]=\"field.format ?? 'text'\" [suffix]=\"field.suffix\" [size]=\"field.size\"></spa-label>\n  \n          <spa-number *ngSwitchCase=\"'number'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [required]=\"testRequired(field)\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\"></spa-number>\n  \n          <spa-money *ngSwitchCase=\"'money'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [required]=\"testRequired(field)\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\"></spa-money>\n  \n          <spa-check *ngSwitchCase=\"'checkbox'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [readonly]=\"testReadOnly(field)\" [infoMessage]=\"field.infoMessage\" ></spa-check>\n  \n          <spa-date *ngSwitchCase=\"'date'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [min]=\"field?.min\" [max]=\"field?.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" ></spa-date>\n  \n          <spa-datetime *ngSwitchCase=\"'datetime'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [readonly]=\"testReadOnly(field)\" [min]=\"field.min\" [max]=\"field.max\" [infoMessage]=\"field.infoMessage\" ></spa-datetime>\n  \n          <spa-email *ngSwitchCase=\"'email'\" [display]=\"field.alias ?? field.name | camelToWords\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field,data[field.name])\" [required]=\"testRequired(field)\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\"  [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\"></spa-email>\n  \n          <spa-text-mask *ngSwitchCase=\"'text-mask'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field,data[field.name])\" [required]=\"testRequired(field)\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\"></spa-text-mask>\n  \n  \n          <ng-container *ngSwitchCase=\"'select'\">\n            <ng-container *ngTemplateOutlet=\"selectTemplate; context: {\n                    $implicit: field,\n                    field: field,\n                    data: data,\n                    testReadOnly: testReadOnly.bind(this),\n                    testRequired: testRequired.bind(this),\n                    selectChanged: selectChanged.bind(this),\n                    resolveLoadAction: resolveLoadAction.bind(this)\n                  }\">\n            </ng-container>\n          </ng-container>\n  \n  \n          <spa-select-multi *ngSwitchCase=\"'select-multi'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay ?? 'name'\" [optionValue]=\"field.optionValue ?? 'value'\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field, data[field.name])\" [required]=\"testRequired(field)\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\" [loadAction]=\"resolveLoadAction(field)\" [selectAll]=\"field.selectAll\">\n          </spa-select-multi>\n  \n          <spa-text-multi *ngSwitchCase=\"'text-multi'\" [strict]=\"field.strict\" [display]=\"field.alias ?? field.name | camelToWords\" [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay ?? 'name'\" [optionValue]=\"field.optionValue ?? 'value'\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field,data[field.name])\" [required]=\"testRequired(field)\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\" [loadAction]=\"resolveLoadAction(field)\"></spa-text-multi>\n  \n  \n  \n          <ng-container *ngSwitchCase=\"'composite'\">\n            <div class=\"composite-field-container\">\n              <div class=\"composite-field-group\">\n                <ng-container *ngFor=\"let subfield of getVisibleSubfields(field)\">\n                  <ng-container [ngSwitch]=\"subfield.type\">\n  \n                    <label *ngSwitchCase=\"'string'\" [ngStyle]=\"{'font-size':field.size ?? '14px'}\" >{{data[field.name] ?? field.alias ?? field.name}} {{field.suffix ?? ''}}</label>\n                    \n                    <spa-number *ngSwitchCase=\"'number'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [width]=\"subfield.width\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [required]=\"testRequired(subfield)\" [min]=\"subfield.min\" [max]=\"subfield.max\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [hint]=\"subfield.hint\" [infoMessage]=\"subfield.infoMessage\"  [suffix]=\"subfield.suffix\" [copyContent]=\"subfield.copyContent\" [clearContent]=\"subfield.clearContent\"></spa-number>\n  \n                    <spa-money *ngSwitchCase=\"'money'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [width]=\"subfield.width\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [required]=\"testRequired(subfield)\" [min]=\"subfield.min\" [max]=\"subfield.max\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [hint]=\"subfield.hint\" [infoMessage]=\"subfield.infoMessage\" [suffix]=\"subfield.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\"></spa-money>\n  \n                    <spa-check *ngSwitchCase=\"'checkbox'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [infoMessage]=\"subfield.infoMessage\" ></spa-check>\n  \n                    <spa-date *ngSwitchCase=\"'date'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [width]=\"subfield.width\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [min]=\"subfield.min\" [max]=\"subfield.max\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [hint]=\"subfield.hint\" [infoMessage]=\"subfield.infoMessage\" ></spa-date>\n  \n                    <spa-datetime *ngSwitchCase=\"'datetime'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [min]=\"subfield.min\" [max]=\"subfield.max\" [infoMessage]=\"subfield.infoMessage\" ></spa-datetime>\n  \n                    <!-- Fixed: composite select subfields projected the PARENT composite field into the\n                         dynamic select template (wrong options/value binding) and omitted testRequired,\n                         so the template's testRequired(field) call threw and killed the whole dialog.\n                         Context now mirrors the top-level select outlet, with the SUBFIELD, and readonly\n                         cascades composite parent || subfield like every other subfield type. -->\n                    <ng-container *ngSwitchCase=\"'select'\">\n                      <ng-container *ngTemplateOutlet=\"selectTemplate; context: {\n                                      $implicit: subfield,\n                                      field: subfield,\n                                      data: data,\n                                      testReadOnly: compositeReadOnly(field),\n                                      testRequired: testRequired.bind(this),\n                                      selectChanged: selectChanged.bind(this),\n                                      resolveLoadAction: resolveLoadAction.bind(this)\n                                    }\">\n                      </ng-container>\n                    </ng-container>\n  \n                    <spa-text-single *ngSwitchCase=\"'text-single'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [width]=\"subfield.width\" [options]=\"subfield.options\" [optionDisplay]=\"subfield.optionDisplay ?? 'name'\" [optionValue]=\"subfield.optionValue ?? 'value'\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [required]=\"testRequired(subfield)\" [min]=\"subfield.min\" [max]=\"subfield.max\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [hint]=\"subfield.hint\" [infoMessage]=\"subfield.infoMessage\" [suffix]=\"subfield.suffix\" [copyContent]=\"subfield.copyContent\" [clearContent]=\"subfield.clearContent\" [loadAction]=\"resolveLoadAction(subfield)\" [regex]=\"subfield.regex\" [field]=\"subfield\" [data]=\"data\" [detailsConfig]=\"subfield.detailsConfig\" [masterField]=\"subfield.masterField\"></spa-text-single>\n\n                    <spa-text-area *ngSwitchCase=\"'text-area'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [width]=\"subfield.width\" [rows]=\"subfield.rows\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [required]=\"testRequired(subfield)\" [min]=\"subfield.min\" [max]=\"subfield.max\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [hint]=\"subfield.hint\" [infoMessage]=\"subfield.infoMessage\" [suffix]=\"subfield.suffix\" [copyContent]=\"subfield.copyContent\" [clearContent]=\"subfield.clearContent\" [regex]=\"subfield.regex\"></spa-text-area>\n\n                    <spa-editor *ngSwitchCase=\"'editor'\" [display]=\"subfield.alias ?? subfield.name | camelToWords\" [width]=\"subfield.width\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [required]=\"testRequired(subfield)\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [hint]=\"subfield.hint\" [infoMessage]=\"subfield.infoMessage\" [editorConfig]=\"subfield.editorConfig\"></spa-editor>\n\n                    <spa-text *ngSwitchDefault [display]=\"subfield.alias ?? subfield.name | camelToWords\" [width]=\"subfield.width\" [(value)]=\"data[subfield.name]\" (valueChange)=\"inputChanged(subfield, $event)\" [required]=\"testRequired(subfield)\" [min]=\"subfield.min\" [max]=\"subfield.max\" [readonly]=\"testReadOnly(field) || testReadOnly(subfield)\" [hint]=\"subfield.hint\" [infoMessage]=\"subfield.infoMessage\" [suffix]=\"subfield.suffix\" [copyContent]=\"subfield.copyContent\" [clearContent]=\"subfield.clearContent\" [regex]=\"subfield.regex\"></spa-text>\n  \n  \n                  </ng-container>\n                </ng-container>\n              </div>\n            </div>\n          </ng-container>\n  \n  \n          <spa-text-single *ngSwitchCase=\"'text-single'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [options]=\"field.options\" [optionDisplay]=\"field.optionDisplay ?? 'name'\" [optionValue]=\"field.optionValue ?? 'value'\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field,data[field.name])\" [required]=\"testRequired(field)\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\" [loadAction]=\"resolveLoadAction(field)\" [regex]=\"field.regex\" [field]=\"field\" [data]=\"data\" [detailsConfig]=\"field.detailsConfig\" [masterField]=\"field.masterField\"></spa-text-single>\n\n          <spa-text-area *ngSwitchCase=\"'text-area'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [rows]=\"field.rows\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field,data[field.name])\" [required]=\"testRequired(field)\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\" [regex]=\"field.regex\"></spa-text-area>\n\n          <spa-editor *ngSwitchCase=\"'editor'\" [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field,data[field.name])\" [required]=\"testRequired(field)\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" [editorConfig]=\"field.editorConfig\"></spa-editor>\n\n          <spa-text *ngSwitchDefault [display]=\"field.alias ?? field.name | camelToWords\" [width]=\"field.width\" [(value)]=\"data[field.name]\" (valueChange)=\"inputChanged(field,data[field.name])\" [required]=\"testRequired(field)\" [min]=\"field.min\" [max]=\"field.max\" [readonly]=\"testReadOnly(field)\" [hint]=\"field.hint\" [infoMessage]=\"field.infoMessage\" [suffix]=\"field.suffix\" [copyContent]=\"field.copyContent\" [clearContent]=\"field.clearContent\" [regex]=\"field.regex\"></spa-text>\n  \n        </ng-container>\n  \n      </ng-container>\n  \n    </div>\n  \n  \n    <div class=\"span-col-center\" *ngIf=\"config.button\">\n      <button mat-raised-button color=\"primary\"  (click)=\"buttonClicked()\"  cdkFocusInitial>{{buttonDisplay}}</button>\n    </div>\n  \n  \n  </div>\n  <!-- Fixed: built-in fallback select template \u2014 spa-form used consumers' projected #dynamicSelect\n       (only detailsDialog provides one), so selects silently rendered NOTHING when spa-form was used\n       directly. The projected template (if any) still wins; this default carries the same bindings. -->\n  <ng-template #defaultDynamicSelect let-field=\"field\" let-data=\"data\" let-testReadOnly=\"testReadOnly\" let-testRequired=\"testRequired\" let-selectChanged=\"selectChanged\" let-resolveLoadAction=\"resolveLoadAction\">\n    <spa-select\n      [display]=\"field.alias ?? field.name | camelToWords\"\n      [width]=\"field.width\"\n      [nullable]=\"field.nullable\"\n      [options]=\"field.options\"\n      [masterOptions]=\"field.masterOptions\"\n      [masterField]=\"field.masterField\"\n      [optionDisplay]=\"field.optionDisplay ?? 'name'\"\n      [optionValue]=\"field.optionValue ?? 'value'\"\n      [(value)]=\"data[field.name]\"\n      [defaultFirstValue]=\"field.defaultFirstValue\"\n      [required]=\"testRequired(field)\"\n      [readonly]=\"testReadOnly(field)\"\n      [hint]=\"field.hint\"\n      [detailsConfig]=\"field.detailsConfig\"\n      [loadAction]=\"resolveLoadAction(field)\"\n      [loadIDField]=\"field.loadIDField\"\n      [field]=\"field\"\n      [data]=\"data\"\n      [infoMessage]=\"field.infoMessage\"\n      [copyContent]=\"field.copyContent\"\n      (valueChange)=\"selectChanged(field)\"\n    ></spa-select>\n  </ng-template>\n\n  <div class=\"notes-section\" *ngIf=\"config.notesConfig\">\n    <spa-notes\n      [title]=\"config.notesConfig.title || 'Notes'\"\n      [notes]=\"config.notesConfig.notes || []\"\n      [loadAction]=\"config.notesConfig.loadAction\"\n      [loadIDField]=\"config.notesConfig.loadIDField\"\n      [data]=\"data\"\n      [nameField]=\"config.notesConfig.nameField || 'createdByName'\"\n      [dateField]=\"config.notesConfig.dateField || 'createdDate'\"\n      [commentField]=\"config.notesConfig.commentField || 'details'\">\n    </spa-notes>\n  </div>\n</div>\n\n", styles: [".title{margin-top:.5em;margin-bottom:.5em;font-size:larger;font-weight:300;color:#0b447e}.composite-field-group{display:flex;flex-direction:row;flex-wrap:wrap;gap:12px}.tin-form-container{display:flex;flex-direction:row;width:100%;gap:16px}.width-100{width:100%!important}.width-75{width:70%!important}.notes-section{width:400px;border-left:1px solid #e0e0e0}\n"] }]
         }], ctorParameters: () => [{ type: MessageService }, { type: DataServiceLib }, { type: AuthService }], propDecorators: { dynamicSelectTemplate: [{
                 type: ContentChild,
                 args: ['dynamicSelect']
@@ -15957,6 +16396,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
 class TabsComponent {
     constructor(tabService) {
         this.tabService = tabService;
+        this.countsInitialized = false; // Added: guards refreshResolvedCounts until ngOnInit has seeded tabCounts/countUrls
+        this.countUrls = {}; // Added: last resolved countAction URL per tab
         this.tableConfigs = [];
         this.localMode = false; // Added: one-step create — tables run against in-memory rows on parentDetails
         this.nestingLevel = 0; // Changed: Track nesting depth for dialog recursion control
@@ -15973,6 +16414,8 @@ class TabsComponent {
         const initialized = this.tabService.initializeTabs(this.tableConfigs, this.parentDetails);
         this.tabCounts = initialized.tabCounts;
         this.tableReloads = initialized.tableReloads;
+        this.seedCountUrls(); // Added: snapshot the URL each badge was fetched with so we only re-fetch when the parent id actually changes
+        this.countsInitialized = true; // Added: ngOnChanges runs BEFORE ngOnInit on the first bind — counts are seeded here, never there
         this.updateVisibleTabs(); // Changed: Cache visible tabs on init
         // Added: targeted sibling refresh — the host pushes a tab index (into tableConfigs) to reload that tab's
         // table and count badge (e.g. a custom catalog tab submitting a request refreshes the My Requests tab).
@@ -15985,7 +16428,33 @@ class TabsComponent {
     ngOnChanges(changes) {
         if (changes['tableConfigs'] || changes['parentDetails']) {
             this.updateVisibleTabs();
-        }
+            // Added: details dialogs load the parent record asynchronously, so the counts fired at init had an unresolved
+            // {id} placeholder — re-fire them now that the id is known, otherwise the badge keeps the global count forever
+            if (this.countsInitialized)
+                this.refreshResolvedCounts();
+        }
+    }
+    // Added: record the resolved count URL per tab (still holds {id} when the parent record has not loaded yet)
+    seedCountUrls() {
+        this.countUrls = {};
+        (this.tableConfigs ?? []).forEach((config, index) => { this.countUrls[index] = this.tabService.resolveCountUrl(config, this.parentDetails); });
+    }
+    // Added: re-fetch only badges whose resolved URL changed — keeps auto-refresh ticks from re-firing every count
+    refreshResolvedCounts() {
+        (this.tableConfigs ?? []).forEach((config, index) => {
+            const url = this.tabService.resolveCountUrl(config, this.parentDetails);
+            if (!url || url === this.countUrls[index])
+                return;
+            this.countUrls[index] = url;
+            this.refreshTabCount(index);
+        });
+    }
+    // Added: the tab's own grid is the authority on how many rows belong to this parent, so adopt its total —
+    // the badge then always matches the "1 – 1 of 1" shown under the tabs and cannot drift from a separate count call
+    onTabTotal(index, total) {
+        if (total === null || total === undefined)
+            return;
+        this.tabCounts[index] = total;
     }
     // Changed: Use service for tab change handling
     onTabChange(event) {
@@ -16036,11 +16505,11 @@ class TabsComponent {
         return this.reload || this.tableReloads[index];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TabsComponent, deps: [{ token: TabService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: TabsComponent, isStandalone: false, selector: "spa-tabs", inputs: { tableConfigs: "tableConfigs", reload: "reload", reloadTab: "reloadTab", parentDetails: "parentDetails", localMode: "localMode", nestingLevel: "nestingLevel" }, outputs: { formRefresh: "formRefresh", actionSuccess: "actionSuccess" }, usesOnChanges: true, ngImport: i0, template: "<mat-tab-group (selectedTabChange)=\"onTabChange($event)\" [selectedIndex]=\"selectedTabIndex\">\n\n  <!-- Changed: Use cached visibleTabs property to prevent infinite change detection loop -->\n  <ng-container *ngFor=\"let tab of visibleTabs; let i = index\">\n    <mat-tab><!-- TS-11: visibleTabs is already filtered via getVisibleTabs; dropped per-tab isTabVisible() call per CD -->\n\n      <!-- Tab label with optional count badge -->\n      <ng-template matTabLabel>\n        <span\n          [matBadge]=\"shouldShowBadge(tab.originalIndex) ? getTabCount(tab.originalIndex) : null\"\n          [matBadgeHidden]=\"!shouldShowBadge(tab.originalIndex)\"\n          matBadgeOverlap=\"false\">\n          {{getTabTitle(tab.config)}}\n        </span>\n      </ng-template>\n\n      <!-- Tab content: custom template when provided (tabTemplate), otherwise the lazy-loaded table.\n           Templates keep the same lazy semantics \u2014 rendered only once the tab has been activated. -->\n      <div *ngIf=\"shouldLoadTabData(i) && tab.config.tabTemplate\" class=\"tab-content\">\n        <ng-container [ngTemplateOutlet]=\"tab.config.tabTemplate\"></ng-container>\n      </div>\n\n      <div *ngIf=\"shouldLoadTabData(i) && !tab.config.tabTemplate\" class=\"tab-content\">\n        <spa-table\n          [config]=\"tab.config\"\n          [reload]=\"getReloadSubject(tab.originalIndex)\"\n          [inTab]=\"true\"\n          [activeTab]=\"selectedTabIndex === i\"\n          [nestingLevel]=\"nestingLevel\"\n          [localMode]=\"localMode\"\n          [parentDetails]=\"parentDetails\"\n          (actionSuccess)=\"onTableActionSuccess(tab.originalIndex, $event)\">\n        </spa-table><!-- Changed: localMode + parentDetails passed through for one-step create local tables -->\n      </div>\n\n      <!-- Placeholder for non-loaded tabs -->\n      <div *ngIf=\"!shouldLoadTabData(i)\" class=\"tab-placeholder\">\n        <!-- Empty placeholder - content will load when tab is activated -->\n      </div>\n\n    </mat-tab>\n  </ng-container>\n\n</mat-tab-group>", styles: [":host{flex:1;display:flex;flex-direction:column}:host ::ng-deep .mat-mdc-tab-group{flex:1;display:flex;flex-direction:column}:host ::ng-deep .mat-mdc-tab-body-wrapper{flex:1}.tab-content{padding-top:16px;overflow-x:auto}.tab-placeholder{min-height:100px;display:flex;align-items:center;justify-content:center}.badge{background-color:#2196f3;color:#fff;border-radius:12px;padding:2px 8px;margin-left:8px;font-size:12px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4$2.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i5$2.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i5$2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i5$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: TableComponent, selector: "spa-table", inputs: ["data", "tileData", "config", "localMode", "parentDetails", "reload", "activeTab", "inTab", "nestingLevel"], outputs: ["dataLoad", "actionSuccess", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange", "actionResponse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: TabsComponent, isStandalone: false, selector: "spa-tabs", inputs: { tableConfigs: "tableConfigs", reload: "reload", reloadTab: "reloadTab", parentDetails: "parentDetails", localMode: "localMode", nestingLevel: "nestingLevel" }, outputs: { formRefresh: "formRefresh", actionSuccess: "actionSuccess" }, usesOnChanges: true, ngImport: i0, template: "<mat-tab-group (selectedTabChange)=\"onTabChange($event)\" [selectedIndex]=\"selectedTabIndex\">\n\n  <!-- Changed: Use cached visibleTabs property to prevent infinite change detection loop -->\n  <ng-container *ngFor=\"let tab of visibleTabs; let i = index\">\n    <mat-tab><!-- TS-11: visibleTabs is already filtered via getVisibleTabs; dropped per-tab isTabVisible() call per CD -->\n\n      <!-- Tab label with optional count badge -->\n      <ng-template matTabLabel>\n        <span\n          [matBadge]=\"shouldShowBadge(tab.originalIndex) ? getTabCount(tab.originalIndex) : null\"\n          [matBadgeHidden]=\"!shouldShowBadge(tab.originalIndex)\"\n          matBadgeOverlap=\"false\">\n          {{getTabTitle(tab.config)}}\n        </span>\n      </ng-template>\n\n      <!-- Tab content: custom template when provided (tabTemplate), otherwise the lazy-loaded table.\n           Templates keep the same lazy semantics \u2014 rendered only once the tab has been activated. -->\n      <div *ngIf=\"shouldLoadTabData(i) && tab.config.tabTemplate\" class=\"tab-content\">\n        <ng-container [ngTemplateOutlet]=\"tab.config.tabTemplate\"></ng-container>\n      </div>\n\n      <div *ngIf=\"shouldLoadTabData(i) && !tab.config.tabTemplate\" class=\"tab-content\">\n        <spa-table\n          [config]=\"tab.config\"\n          [reload]=\"getReloadSubject(tab.originalIndex)\"\n          [inTab]=\"true\"\n          [activeTab]=\"selectedTabIndex === i\"\n          [nestingLevel]=\"nestingLevel\"\n          [localMode]=\"localMode\"\n          [parentDetails]=\"parentDetails\"\n          (totalChange)=\"onTabTotal(tab.originalIndex, $event)\"\n          (actionSuccess)=\"onTableActionSuccess(tab.originalIndex, $event)\">\n        </spa-table><!-- Changed: badge adopts the grid's filtered total so it can never show a global/unfiltered count --><!-- Changed: localMode + parentDetails passed through for one-step create local tables -->\n      </div>\n\n      <!-- Placeholder for non-loaded tabs -->\n      <div *ngIf=\"!shouldLoadTabData(i)\" class=\"tab-placeholder\">\n        <!-- Empty placeholder - content will load when tab is activated -->\n      </div>\n\n    </mat-tab>\n  </ng-container>\n\n</mat-tab-group>", styles: [":host{flex:1;display:flex;flex-direction:column}:host ::ng-deep .mat-mdc-tab-group{flex:1;display:flex;flex-direction:column}:host ::ng-deep .mat-mdc-tab-body-wrapper{flex:1}.tab-content{padding-top:16px;overflow-x:auto}.tab-placeholder{min-height:100px;display:flex;align-items:center;justify-content:center}.badge{background-color:#2196f3;color:#fff;border-radius:12px;padding:2px 8px;margin-left:8px;font-size:12px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4$2.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i5$2.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i5$2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i5$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: TableComponent, selector: "spa-table", inputs: ["data", "tileData", "config", "localMode", "parentDetails", "reload", "activeTab", "inTab", "nestingLevel"], outputs: ["dataLoad", "totalChange", "actionSuccess", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange", "actionResponse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TabsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spa-tabs', standalone: false, template: "<mat-tab-group (selectedTabChange)=\"onTabChange($event)\" [selectedIndex]=\"selectedTabIndex\">\n\n  <!-- Changed: Use cached visibleTabs property to prevent infinite change detection loop -->\n  <ng-container *ngFor=\"let tab of visibleTabs; let i = index\">\n    <mat-tab><!-- TS-11: visibleTabs is already filtered via getVisibleTabs; dropped per-tab isTabVisible() call per CD -->\n\n      <!-- Tab label with optional count badge -->\n      <ng-template matTabLabel>\n        <span\n          [matBadge]=\"shouldShowBadge(tab.originalIndex) ? getTabCount(tab.originalIndex) : null\"\n          [matBadgeHidden]=\"!shouldShowBadge(tab.originalIndex)\"\n          matBadgeOverlap=\"false\">\n          {{getTabTitle(tab.config)}}\n        </span>\n      </ng-template>\n\n      <!-- Tab content: custom template when provided (tabTemplate), otherwise the lazy-loaded table.\n           Templates keep the same lazy semantics \u2014 rendered only once the tab has been activated. -->\n      <div *ngIf=\"shouldLoadTabData(i) && tab.config.tabTemplate\" class=\"tab-content\">\n        <ng-container [ngTemplateOutlet]=\"tab.config.tabTemplate\"></ng-container>\n      </div>\n\n      <div *ngIf=\"shouldLoadTabData(i) && !tab.config.tabTemplate\" class=\"tab-content\">\n        <spa-table\n          [config]=\"tab.config\"\n          [reload]=\"getReloadSubject(tab.originalIndex)\"\n          [inTab]=\"true\"\n          [activeTab]=\"selectedTabIndex === i\"\n          [nestingLevel]=\"nestingLevel\"\n          [localMode]=\"localMode\"\n          [parentDetails]=\"parentDetails\"\n          (actionSuccess)=\"onTableActionSuccess(tab.originalIndex, $event)\">\n        </spa-table><!-- Changed: localMode + parentDetails passed through for one-step create local tables -->\n      </div>\n\n      <!-- Placeholder for non-loaded tabs -->\n      <div *ngIf=\"!shouldLoadTabData(i)\" class=\"tab-placeholder\">\n        <!-- Empty placeholder - content will load when tab is activated -->\n      </div>\n\n    </mat-tab>\n  </ng-container>\n\n</mat-tab-group>", styles: [":host{flex:1;display:flex;flex-direction:column}:host ::ng-deep .mat-mdc-tab-group{flex:1;display:flex;flex-direction:column}:host ::ng-deep .mat-mdc-tab-body-wrapper{flex:1}.tab-content{padding-top:16px;overflow-x:auto}.tab-placeholder{min-height:100px;display:flex;align-items:center;justify-content:center}.badge{background-color:#2196f3;color:#fff;border-radius:12px;padding:2px 8px;margin-left:8px;font-size:12px}\n"] }]
+            args: [{ selector: 'spa-tabs', standalone: false, template: "<mat-tab-group (selectedTabChange)=\"onTabChange($event)\" [selectedIndex]=\"selectedTabIndex\">\n\n  <!-- Changed: Use cached visibleTabs property to prevent infinite change detection loop -->\n  <ng-container *ngFor=\"let tab of visibleTabs; let i = index\">\n    <mat-tab><!-- TS-11: visibleTabs is already filtered via getVisibleTabs; dropped per-tab isTabVisible() call per CD -->\n\n      <!-- Tab label with optional count badge -->\n      <ng-template matTabLabel>\n        <span\n          [matBadge]=\"shouldShowBadge(tab.originalIndex) ? getTabCount(tab.originalIndex) : null\"\n          [matBadgeHidden]=\"!shouldShowBadge(tab.originalIndex)\"\n          matBadgeOverlap=\"false\">\n          {{getTabTitle(tab.config)}}\n        </span>\n      </ng-template>\n\n      <!-- Tab content: custom template when provided (tabTemplate), otherwise the lazy-loaded table.\n           Templates keep the same lazy semantics \u2014 rendered only once the tab has been activated. -->\n      <div *ngIf=\"shouldLoadTabData(i) && tab.config.tabTemplate\" class=\"tab-content\">\n        <ng-container [ngTemplateOutlet]=\"tab.config.tabTemplate\"></ng-container>\n      </div>\n\n      <div *ngIf=\"shouldLoadTabData(i) && !tab.config.tabTemplate\" class=\"tab-content\">\n        <spa-table\n          [config]=\"tab.config\"\n          [reload]=\"getReloadSubject(tab.originalIndex)\"\n          [inTab]=\"true\"\n          [activeTab]=\"selectedTabIndex === i\"\n          [nestingLevel]=\"nestingLevel\"\n          [localMode]=\"localMode\"\n          [parentDetails]=\"parentDetails\"\n          (totalChange)=\"onTabTotal(tab.originalIndex, $event)\"\n          (actionSuccess)=\"onTableActionSuccess(tab.originalIndex, $event)\">\n        </spa-table><!-- Changed: badge adopts the grid's filtered total so it can never show a global/unfiltered count --><!-- Changed: localMode + parentDetails passed through for one-step create local tables -->\n      </div>\n\n      <!-- Placeholder for non-loaded tabs -->\n      <div *ngIf=\"!shouldLoadTabData(i)\" class=\"tab-placeholder\">\n        <!-- Empty placeholder - content will load when tab is activated -->\n      </div>\n\n    </mat-tab>\n  </ng-container>\n\n</mat-tab-group>", styles: [":host{flex:1;display:flex;flex-direction:column}:host ::ng-deep .mat-mdc-tab-group{flex:1;display:flex;flex-direction:column}:host ::ng-deep .mat-mdc-tab-body-wrapper{flex:1}.tab-content{padding-top:16px;overflow-x:auto}.tab-placeholder{min-height:100px;display:flex;align-items:center;justify-content:center}.badge{background-color:#2196f3;color:#fff;border-radius:12px;padding:2px 8px;margin-left:8px;font-size:12px}\n"] }]
         }], ctorParameters: () => [{ type: TabService }], propDecorators: { tableConfigs: [{
                 type: Input
             }], reload: [{
@@ -16591,11 +17060,11 @@ class DetailsDialog {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: DetailsDialog, deps: [{ token: i1$3.BreakpointObserver }, { token: LoaderService }, { token: DataServiceLib }, { token: MessageService }, { token: i4.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: ButtonService }, { token: DialogService }, { token: AuthService }, { token: TableConfigService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: DetailsDialog, isStandalone: false, selector: "spa-detailsDialog", outputs: { inputChange: "inputChange" }, ngImport: i0, template: "<!-- Changed: dialog-has-tables mirrors the service's hasTables (tableConfigs?.length)\n     which decides height '90%' vs 'auto' \u2014 used to scope scroll behaviour per case -->\n<div class=\"dialog-container\" [class.dialog-has-tables]=\"detailsConfig.tableConfigs?.length > 0\">\n\n  <div class=\"dialog-content\">\n\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isProcessing && dataService.appConfig.progressLine\"></mat-progress-bar>\n\n    <div class=\"d-flex justify-content-between align-items-center mt-2\" style=\"padding-left: 24px; padding-right: 24px;\">\n\n      <div>\n        <label style=\"font-size: 20px; font-weight:500;margin-top: 10px;margin-bottom: 5px;\" >{{titleAction | titlecase}} {{formConfig?.title}}</label>\n      </div>\n\n      <div class=\"d-flex align-items-center\" style=\"gap: 8px;\">\n\n        <!-- Changed: Auto Refresh icon button \u2014 grey when off, green when on, with dynamic tooltip -->\n        <button *ngIf=\"detailsConfig.autoRefreshConfig\" mat-icon-button\n          [matTooltip]=\"autoRefreshEnabled ? 'Click to disable auto refresh' : 'Click to enable auto refresh'\" matTooltipPosition=\"above\"\n          [style.color]=\"autoRefreshEnabled ? '#4caf50' : '#9e9e9e'\"\n          (click)=\"autoRefreshEnabled = !autoRefreshEnabled; toggleAutoRefresh()\">\n          <mat-icon>autorenew</mat-icon>\n        </button>\n        <!-- Changed: Keep Open icon button \u2014 grey when off, green when on, with dynamic tooltip -->\n        <button *ngIf=\"detailsConfig.allowUserKeepOpen\" mat-icon-button\n          [matTooltip]=\"userKeepOpen ? 'Click to disable keep open' : 'Click to enable keep open'\" matTooltipPosition=\"above\"\n          [style.color]=\"userKeepOpen ? '#4caf50' : '#9e9e9e'\"\n          (click)=\"userKeepOpen = !userKeepOpen\">\n          <mat-icon>push_pin</mat-icon>\n        </button>\n\n        <!-- TS-16: bind precomputed editButtonVM instead of testVisible/testDisabled (which cloned objects) per CD -->\n        <div *ngIf=\"formConfig.mode=='view' && editButton && editButtonVM.visible\">\n          <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Edit\" color=\"primary\" (click)=\"setMode('edit')\" [disabled]=\"editButtonVM.disabled\"><mat-icon>edit</mat-icon></button>\n        </div>\n\n        <button [disabled]=\"isProcessing\" *ngIf=\"loadByAction\" mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Refresh\" color=\"primary\" (click)=\"loadData(formConfig.loadAction, detailsConfig.causeTableRefresh)\"><mat-icon class=\"refreshIcon\">cached</mat-icon></button>\n        \n        <!-- Added: Top close button when position is 'top' -->\n        <button *ngIf=\"shouldShowTopClose()\" [disabled]=\"isProcessing\" mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Close\" (click)=\"close()\"><mat-icon>close</mat-icon></button>\n\n      </div>\n\n    </div>\n\n    <div style=\"padding-left: 24px; padding-right: 24px;\">\n      <spa-steps *ngIf=\"stepConfig && details && stepConfig.sticky\" [config]=\"stepConfig\" [data]=\"details\"></spa-steps>\n      <spa-statuses *ngIf=\"statusConfig && details && statusConfig?.sticky\" [config]=\"statusConfig\" [data]=\"details\"></spa-statuses>\n      <spa-alert *ngIf=\"formConfig.alertConfig && formConfig.alertConfig?.sticky\" [config]=\"formConfig.alertConfig\" [data]=\"details\"></spa-alert>\n    </div>\n\n    <mat-dialog-content class=\"mat-typography dialog-scroll-content\">\n\n      <spa-steps *ngIf=\"stepConfig && details && !stepConfig.sticky\" [config]=\"stepConfig\" [data]=\"details\"></spa-steps>\n      <spa-statuses *ngIf=\"statusConfig && details && !statusConfig?.sticky\" [config]=\"statusConfig\" [data]=\"details\"></spa-statuses>\n      <spa-alert *ngIf=\"formConfig.alertConfig && !formConfig.alertConfig?.sticky\" [config]=\"formConfig.alertConfig\" [data]=\"details\"></spa-alert>\n\n      <div class=\"tin-input\" style=\"font-size:14px\">\n\n        <p *ngIf=\"formConfig && !details\"><em>Loading...</em></p>\n\n        <spa-form *ngIf=\"formConfig && details\" [files]=\"files\" [data]=\"details\" [config]=\"formConfig\" (inputChange)=\"inputChanged($event)\">\n          <ng-template #dynamicSelect let-field=\"field\" let-data=\"data\" let-testReadOnly=\"testReadOnly\" let-testRequired=\"testRequired\" let-selectChanged=\"selectChanged\">\n            <spa-select\n              [display]=\"field.alias ?? field.name | camelToWords\"\n              [width]=\"field.width\"\n              [nullable]=\"field.nullable\"\n              [options]=\"field.options\"\n              [masterOptions]=\"field.masterOptions\"\n              [masterField]=\"field.masterField\"\n              [optionDisplay]=\"field.optionDisplay ?? 'name'\"\n              [optionValue]=\"field.optionValue ?? 'value'\"\n              [(value)]=\"data[field.name]\"\n              [defaultFirstValue]=\"field.defaultFirstValue\"\n              [required]=\"testRequired(field)\"\n              [readonly]=\"testReadOnly(field)\"\n              [hint]=\"field.hint\"\n              [detailsConfig]=\"field.detailsConfig\"\n              [loadAction]=\"field.loadAction\"\n              [loadIDField]=\"field.loadIDField\"\n              [field]=\"field\"\n              [data]=\"data\"\n              [infoMessage]=\"field.infoMessage\"\n              [copyContent]=\"field.copyContent\"\n              (valueChange)=\"selectChanged(field)\"\n            ></spa-select>\n          </ng-template>\n        </spa-form>\n\n        <!-- Changed: Use unified spa-tabs with nestingLevel control \u2014 tabs hidden when nestingLevel >= 2 -->\n        <spa-tabs\n          *ngIf=\"showTabs && tableConfigs && !(detailsConfig.hideTablesInCreateMode && formConfig?.mode === 'create')\"\n          [tableConfigs]=\"tableConfigs\"\n          [reload]=\"tableReload\"\n          [parentDetails]=\"details\"\n          [localMode]=\"formConfig?.mode === 'create'\"\n          [nestingLevel]=\"nestingLevel + 1\"\n          (formRefresh)=\"loadData(formConfig.loadAction, false)\"\n          (actionSuccess)=\"actionPerformed = true\">\n        </spa-tabs><!-- Changed: nested-tab table actions flag actionPerformed so refreshOnCloseIfActioned refreshes the parent on close -->\n\n      </div>\n\n    </mat-dialog-content>\n\n\n  </div>\n\n  <mat-dialog-actions >\n\n    <div>\n\n      <button mat-raised-button [disabled]=\"isProcessing\" *ngIf=\"formConfig.mode=='create' && createButton\" color=\"primary\"\n        (click)=\"create()\" cdkFocusInitial>{{createButton.display ?? 'Submit'}}\n      </button>\n\n      <button mat-raised-button [disabled]=\"isProcessing\" *ngIf=\"formConfig.mode=='edit' && editButton\" color=\"primary\"\n        (click)=\"edit()\" cdkFocusInitial>{{editButton.display ?? 'Submit'}}\n      </button>\n\n      <!-- TS-16: bind precomputed extraButtonVMs instead of testVisible/testDisabled/getButtonColor (each cloning objects) per CD -->\n      <ng-container *ngFor=\"let vm of extraButtonVMs\">\n        <button *ngIf=\"formConfig.mode !== 'create' && vm.visible\" mat-stroked-button [disabled]=\"isProcessing || vm.disabled\" [ngStyle]=\"{'color': vm.color}\" (click)=\"custom(vm.button)\" cdkFocusInitial>\n          <mat-icon *ngIf=\"vm.button.icon\" [ngStyle]=\"{'color': vm.color}\">{{vm.button.icon.name}}</mat-icon>\n          {{vm.button.display ?? vm.button.name | titlecase}}\n        </button>\n      </ng-container>\n\n      <!-- Changed: Bottom close button now uses conditional display and custom text -->\n      <button *ngIf=\"shouldShowBottomClose()\" mat-stroked-button color=\"primary\" (click)=\"close()\">{{getCloseText()}}</button>\n\n    </div>\n\n    <div class=\"col d-flex justify-content-end\" *ngIf=\"smallScreen\">\n      <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Delete\" [disabled]=\"isProcessing\" style=\"color: red;\" (click)=\"delete()\" *ngIf=\"formConfig.mode!='create'  && deleteButton\"><mat-icon>delete</mat-icon></button>\n    </div>\n\n\n  </mat-dialog-actions>\n\n\n</div>\n\n\n\n\n\n\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#f5f5f5}tr.mat-mdc-row{transition:background-color .15s ease}tr.mat-mdc-row:hover{background-color:#2196f305}tr.mat-mdc-row.row-editing,tr.mat-mdc-row.row-editing:hover{background-color:#ffa00014}.inline-save{color:#2e7d32!important}.inline-cancel{color:#c62828!important}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.dialog-container{display:flex;flex-direction:column;height:100%;max-height:100%;min-height:0}.dialog-content{flex:1;overflow:hidden;display:flex;flex-direction:column;min-height:0}.dialog-scroll-content{flex:1;overflow-y:auto;max-height:none!important;display:flex;flex-direction:column;min-height:0}.dialog-container:not(.dialog-has-tables){height:auto}.dialog-container:not(.dialog-has-tables) .dialog-scroll-content{flex:1 1 auto}.dialog-scroll-content>.tin-input{flex:1;display:flex;flex-direction:column}.dialog-scroll-content>.tin-input>spa-tabs{flex:1;display:flex;flex-direction:column}mat-dialog-actions{flex-shrink:0;justify-content:flex-start}.paginator-hidden{display:none!important}.paged-filter-hint{display:flex;align-items:center;gap:8px;margin:4px 0 8px;padding:6px 12px;border-radius:4px;background-color:#fff8e1;color:#795548;font-size:13px}.paged-filter-hint mat-icon{font-size:18px;width:18px;height:18px;color:#ffa000}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i7$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i14.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: SelectComponent, selector: "spa-select", inputs: ["detailsConfig"] }, { kind: "component", type: StepsComponent, selector: "spa-steps", inputs: ["value", "config", "data"] }, { kind: "component", type: FormComponent, selector: "spa-form", inputs: ["files", "data", "config"], outputs: ["buttonClick", "inputChange"] }, { kind: "component", type: AlertComponent, selector: "spa-alert", inputs: ["config", "data"] }, { kind: "component", type: TabsComponent, selector: "spa-tabs", inputs: ["tableConfigs", "reload", "reloadTab", "parentDetails", "localMode", "nestingLevel"], outputs: ["formRefresh", "actionSuccess"] }, { kind: "component", type: StatusesComponent, selector: "spa-statuses", inputs: ["config", "data"] }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: DetailsDialog, isStandalone: false, selector: "spa-detailsDialog", outputs: { inputChange: "inputChange" }, ngImport: i0, template: "<!-- Changed: dialog-has-tables mirrors the service's hasTables (tableConfigs?.length)\n     which decides height '90%' vs 'auto' \u2014 used to scope scroll behaviour per case -->\n<div class=\"dialog-container\" [class.dialog-has-tables]=\"detailsConfig.tableConfigs?.length > 0\">\n\n  <div class=\"dialog-content\">\n\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isProcessing && dataService.appConfig.progressLine\"></mat-progress-bar>\n\n    <div class=\"d-flex justify-content-between align-items-center mt-2\" style=\"padding-left: 24px; padding-right: 24px;\">\n\n      <div>\n        <label style=\"font-size: 20px; font-weight:500;margin-top: 10px;margin-bottom: 5px;\" >{{titleAction | titlecase}} {{formConfig?.title}}</label>\n      </div>\n\n      <div class=\"d-flex align-items-center\" style=\"gap: 8px;\">\n\n        <!-- Changed: Auto Refresh icon button \u2014 grey when off, green when on, with dynamic tooltip -->\n        <button *ngIf=\"detailsConfig.autoRefreshConfig\" mat-icon-button\n          [matTooltip]=\"autoRefreshEnabled ? 'Click to disable auto refresh' : 'Click to enable auto refresh'\" matTooltipPosition=\"above\"\n          [style.color]=\"autoRefreshEnabled ? '#4caf50' : '#9e9e9e'\"\n          (click)=\"autoRefreshEnabled = !autoRefreshEnabled; toggleAutoRefresh()\">\n          <mat-icon>autorenew</mat-icon>\n        </button>\n        <!-- Changed: Keep Open icon button \u2014 grey when off, green when on, with dynamic tooltip -->\n        <button *ngIf=\"detailsConfig.allowUserKeepOpen\" mat-icon-button\n          [matTooltip]=\"userKeepOpen ? 'Click to disable keep open' : 'Click to enable keep open'\" matTooltipPosition=\"above\"\n          [style.color]=\"userKeepOpen ? '#4caf50' : '#9e9e9e'\"\n          (click)=\"userKeepOpen = !userKeepOpen\">\n          <mat-icon>push_pin</mat-icon>\n        </button>\n\n        <!-- TS-16: bind precomputed editButtonVM instead of testVisible/testDisabled (which cloned objects) per CD -->\n        <div *ngIf=\"formConfig.mode=='view' && editButton && editButtonVM.visible\">\n          <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Edit\" color=\"primary\" (click)=\"setMode('edit')\" [disabled]=\"editButtonVM.disabled\"><mat-icon>edit</mat-icon></button>\n        </div>\n\n        <button [disabled]=\"isProcessing\" *ngIf=\"loadByAction\" mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Refresh\" color=\"primary\" (click)=\"loadData(formConfig.loadAction, detailsConfig.causeTableRefresh)\"><mat-icon class=\"refreshIcon\">cached</mat-icon></button>\n        \n        <!-- Added: Top close button when position is 'top' -->\n        <button *ngIf=\"shouldShowTopClose()\" [disabled]=\"isProcessing\" mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Close\" (click)=\"close()\"><mat-icon>close</mat-icon></button>\n\n      </div>\n\n    </div>\n\n    <div style=\"padding-left: 24px; padding-right: 24px;\">\n      <spa-steps *ngIf=\"stepConfig && details && stepConfig.sticky\" [config]=\"stepConfig\" [data]=\"details\"></spa-steps>\n      <spa-statuses *ngIf=\"statusConfig && details && statusConfig?.sticky\" [config]=\"statusConfig\" [data]=\"details\"></spa-statuses>\n      <spa-alert *ngIf=\"formConfig.alertConfig && formConfig.alertConfig?.sticky\" [config]=\"formConfig.alertConfig\" [data]=\"details\"></spa-alert>\n    </div>\n\n    <mat-dialog-content class=\"mat-typography dialog-scroll-content\">\n\n      <spa-steps *ngIf=\"stepConfig && details && !stepConfig.sticky\" [config]=\"stepConfig\" [data]=\"details\"></spa-steps>\n      <spa-statuses *ngIf=\"statusConfig && details && !statusConfig?.sticky\" [config]=\"statusConfig\" [data]=\"details\"></spa-statuses>\n      <spa-alert *ngIf=\"formConfig.alertConfig && !formConfig.alertConfig?.sticky\" [config]=\"formConfig.alertConfig\" [data]=\"details\"></spa-alert>\n\n      <div class=\"tin-input\" style=\"font-size:14px\">\n\n        <p *ngIf=\"formConfig && !details\"><em>Loading...</em></p>\n\n        <spa-form *ngIf=\"formConfig && details\" [files]=\"files\" [data]=\"details\" [config]=\"formConfig\" (inputChange)=\"inputChanged($event)\">\n          <ng-template #dynamicSelect let-field=\"field\" let-data=\"data\" let-testReadOnly=\"testReadOnly\" let-testRequired=\"testRequired\" let-selectChanged=\"selectChanged\" let-resolveLoadAction=\"resolveLoadAction\">\n            <spa-select\n              [display]=\"field.alias ?? field.name | camelToWords\"\n              [width]=\"field.width\"\n              [nullable]=\"field.nullable\"\n              [options]=\"field.options\"\n              [masterOptions]=\"field.masterOptions\"\n              [masterField]=\"field.masterField\"\n              [optionDisplay]=\"field.optionDisplay ?? 'name'\"\n              [optionValue]=\"field.optionValue ?? 'value'\"\n              [(value)]=\"data[field.name]\"\n              [defaultFirstValue]=\"field.defaultFirstValue\"\n              [required]=\"testRequired(field)\"\n              [readonly]=\"testReadOnly(field)\"\n              [hint]=\"field.hint\"\n              [detailsConfig]=\"field.detailsConfig\"\n              [loadAction]=\"resolveLoadAction ? resolveLoadAction(field) : field.loadAction\"\n              [loadIDField]=\"field.loadIDField\"\n              [field]=\"field\"\n              [data]=\"data\"\n              [infoMessage]=\"field.infoMessage\"\n              [copyContent]=\"field.copyContent\"\n              (valueChange)=\"selectChanged(field)\"\n            ></spa-select>\n          </ng-template>\n        </spa-form>\n\n        <!-- Changed: Use unified spa-tabs with nestingLevel control \u2014 tabs hidden when nestingLevel >= 2 -->\n        <spa-tabs\n          *ngIf=\"showTabs && tableConfigs && !(detailsConfig.hideTablesInCreateMode && formConfig?.mode === 'create')\"\n          [tableConfigs]=\"tableConfigs\"\n          [reload]=\"tableReload\"\n          [parentDetails]=\"details\"\n          [localMode]=\"formConfig?.mode === 'create'\"\n          [nestingLevel]=\"nestingLevel + 1\"\n          (formRefresh)=\"loadData(formConfig.loadAction, false)\"\n          (actionSuccess)=\"actionPerformed = true\">\n        </spa-tabs><!-- Changed: nested-tab table actions flag actionPerformed so refreshOnCloseIfActioned refreshes the parent on close -->\n\n      </div>\n\n    </mat-dialog-content>\n\n\n  </div>\n\n  <mat-dialog-actions >\n\n    <div>\n\n      <button mat-raised-button [disabled]=\"isProcessing\" *ngIf=\"formConfig.mode=='create' && createButton\" color=\"primary\"\n        (click)=\"create()\" cdkFocusInitial>{{createButton.display ?? 'Submit'}}\n      </button>\n\n      <button mat-raised-button [disabled]=\"isProcessing\" *ngIf=\"formConfig.mode=='edit' && editButton\" color=\"primary\"\n        (click)=\"edit()\" cdkFocusInitial>{{editButton.display ?? 'Submit'}}\n      </button>\n\n      <!-- TS-16: bind precomputed extraButtonVMs instead of testVisible/testDisabled/getButtonColor (each cloning objects) per CD -->\n      <ng-container *ngFor=\"let vm of extraButtonVMs\">\n        <button *ngIf=\"formConfig.mode !== 'create' && vm.visible\" mat-stroked-button [disabled]=\"isProcessing || vm.disabled\" [ngStyle]=\"{'color': vm.color}\" (click)=\"custom(vm.button)\" cdkFocusInitial>\n          <mat-icon *ngIf=\"vm.button.icon\" [ngStyle]=\"{'color': vm.color}\">{{vm.button.icon.name}}</mat-icon>\n          {{vm.button.display ?? vm.button.name | titlecase}}\n        </button>\n      </ng-container>\n\n      <!-- Changed: Bottom close button now uses conditional display and custom text -->\n      <button *ngIf=\"shouldShowBottomClose()\" mat-stroked-button color=\"primary\" (click)=\"close()\">{{getCloseText()}}</button>\n\n    </div>\n\n    <div class=\"col d-flex justify-content-end\" *ngIf=\"smallScreen\">\n      <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Delete\" [disabled]=\"isProcessing\" style=\"color: red;\" (click)=\"delete()\" *ngIf=\"formConfig.mode!='create'  && deleteButton\"><mat-icon>delete</mat-icon></button>\n    </div>\n\n\n  </mat-dialog-actions>\n\n\n</div>\n\n\n\n\n\n\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#f5f5f5}tr.mat-mdc-row{transition:background-color .15s ease}tr.mat-mdc-row:hover{background-color:#2196f305}tr.mat-mdc-row.row-editing,tr.mat-mdc-row.row-editing:hover{background-color:#ffa00014}.inline-save{color:#2e7d32!important}.inline-cancel{color:#c62828!important}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.dialog-container{display:flex;flex-direction:column;height:100%;max-height:100%;min-height:0}.dialog-content{flex:1;overflow:hidden;display:flex;flex-direction:column;min-height:0}.dialog-scroll-content{flex:1;overflow-y:auto;max-height:none!important;display:flex;flex-direction:column;min-height:0}.dialog-container:not(.dialog-has-tables){height:auto}.dialog-container:not(.dialog-has-tables) .dialog-scroll-content{flex:1 1 auto}.dialog-scroll-content>.tin-input{flex:1;display:flex;flex-direction:column}.dialog-scroll-content>.tin-input>spa-tabs{flex:1;display:flex;flex-direction:column}mat-dialog-actions{flex-shrink:0;justify-content:flex-start}.paginator-hidden{display:none!important}.paged-filter-hint{display:flex;align-items:center;gap:8px;margin:4px 0 8px;padding:6px 12px;border-radius:4px;background-color:#fff8e1;color:#795548;font-size:13px}.paged-filter-hint mat-icon{font-size:18px;width:18px;height:18px;color:#ffa000}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i7$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i14.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: SelectComponent, selector: "spa-select", inputs: ["detailsConfig"] }, { kind: "component", type: StepsComponent, selector: "spa-steps", inputs: ["value", "config", "data"] }, { kind: "component", type: FormComponent, selector: "spa-form", inputs: ["files", "data", "config"], outputs: ["buttonClick", "inputChange"] }, { kind: "component", type: AlertComponent, selector: "spa-alert", inputs: ["config", "data"] }, { kind: "component", type: TabsComponent, selector: "spa-tabs", inputs: ["tableConfigs", "reload", "reloadTab", "parentDetails", "localMode", "nestingLevel"], outputs: ["formRefresh", "actionSuccess"] }, { kind: "component", type: StatusesComponent, selector: "spa-statuses", inputs: ["config", "data"] }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: CamelToWordsPipe, name: "camelToWords" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: DetailsDialog, decorators: [{
             type: Component,
-            args: [{ selector: 'spa-detailsDialog', standalone: false, template: "<!-- Changed: dialog-has-tables mirrors the service's hasTables (tableConfigs?.length)\n     which decides height '90%' vs 'auto' \u2014 used to scope scroll behaviour per case -->\n<div class=\"dialog-container\" [class.dialog-has-tables]=\"detailsConfig.tableConfigs?.length > 0\">\n\n  <div class=\"dialog-content\">\n\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isProcessing && dataService.appConfig.progressLine\"></mat-progress-bar>\n\n    <div class=\"d-flex justify-content-between align-items-center mt-2\" style=\"padding-left: 24px; padding-right: 24px;\">\n\n      <div>\n        <label style=\"font-size: 20px; font-weight:500;margin-top: 10px;margin-bottom: 5px;\" >{{titleAction | titlecase}} {{formConfig?.title}}</label>\n      </div>\n\n      <div class=\"d-flex align-items-center\" style=\"gap: 8px;\">\n\n        <!-- Changed: Auto Refresh icon button \u2014 grey when off, green when on, with dynamic tooltip -->\n        <button *ngIf=\"detailsConfig.autoRefreshConfig\" mat-icon-button\n          [matTooltip]=\"autoRefreshEnabled ? 'Click to disable auto refresh' : 'Click to enable auto refresh'\" matTooltipPosition=\"above\"\n          [style.color]=\"autoRefreshEnabled ? '#4caf50' : '#9e9e9e'\"\n          (click)=\"autoRefreshEnabled = !autoRefreshEnabled; toggleAutoRefresh()\">\n          <mat-icon>autorenew</mat-icon>\n        </button>\n        <!-- Changed: Keep Open icon button \u2014 grey when off, green when on, with dynamic tooltip -->\n        <button *ngIf=\"detailsConfig.allowUserKeepOpen\" mat-icon-button\n          [matTooltip]=\"userKeepOpen ? 'Click to disable keep open' : 'Click to enable keep open'\" matTooltipPosition=\"above\"\n          [style.color]=\"userKeepOpen ? '#4caf50' : '#9e9e9e'\"\n          (click)=\"userKeepOpen = !userKeepOpen\">\n          <mat-icon>push_pin</mat-icon>\n        </button>\n\n        <!-- TS-16: bind precomputed editButtonVM instead of testVisible/testDisabled (which cloned objects) per CD -->\n        <div *ngIf=\"formConfig.mode=='view' && editButton && editButtonVM.visible\">\n          <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Edit\" color=\"primary\" (click)=\"setMode('edit')\" [disabled]=\"editButtonVM.disabled\"><mat-icon>edit</mat-icon></button>\n        </div>\n\n        <button [disabled]=\"isProcessing\" *ngIf=\"loadByAction\" mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Refresh\" color=\"primary\" (click)=\"loadData(formConfig.loadAction, detailsConfig.causeTableRefresh)\"><mat-icon class=\"refreshIcon\">cached</mat-icon></button>\n        \n        <!-- Added: Top close button when position is 'top' -->\n        <button *ngIf=\"shouldShowTopClose()\" [disabled]=\"isProcessing\" mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Close\" (click)=\"close()\"><mat-icon>close</mat-icon></button>\n\n      </div>\n\n    </div>\n\n    <div style=\"padding-left: 24px; padding-right: 24px;\">\n      <spa-steps *ngIf=\"stepConfig && details && stepConfig.sticky\" [config]=\"stepConfig\" [data]=\"details\"></spa-steps>\n      <spa-statuses *ngIf=\"statusConfig && details && statusConfig?.sticky\" [config]=\"statusConfig\" [data]=\"details\"></spa-statuses>\n      <spa-alert *ngIf=\"formConfig.alertConfig && formConfig.alertConfig?.sticky\" [config]=\"formConfig.alertConfig\" [data]=\"details\"></spa-alert>\n    </div>\n\n    <mat-dialog-content class=\"mat-typography dialog-scroll-content\">\n\n      <spa-steps *ngIf=\"stepConfig && details && !stepConfig.sticky\" [config]=\"stepConfig\" [data]=\"details\"></spa-steps>\n      <spa-statuses *ngIf=\"statusConfig && details && !statusConfig?.sticky\" [config]=\"statusConfig\" [data]=\"details\"></spa-statuses>\n      <spa-alert *ngIf=\"formConfig.alertConfig && !formConfig.alertConfig?.sticky\" [config]=\"formConfig.alertConfig\" [data]=\"details\"></spa-alert>\n\n      <div class=\"tin-input\" style=\"font-size:14px\">\n\n        <p *ngIf=\"formConfig && !details\"><em>Loading...</em></p>\n\n        <spa-form *ngIf=\"formConfig && details\" [files]=\"files\" [data]=\"details\" [config]=\"formConfig\" (inputChange)=\"inputChanged($event)\">\n          <ng-template #dynamicSelect let-field=\"field\" let-data=\"data\" let-testReadOnly=\"testReadOnly\" let-testRequired=\"testRequired\" let-selectChanged=\"selectChanged\">\n            <spa-select\n              [display]=\"field.alias ?? field.name | camelToWords\"\n              [width]=\"field.width\"\n              [nullable]=\"field.nullable\"\n              [options]=\"field.options\"\n              [masterOptions]=\"field.masterOptions\"\n              [masterField]=\"field.masterField\"\n              [optionDisplay]=\"field.optionDisplay ?? 'name'\"\n              [optionValue]=\"field.optionValue ?? 'value'\"\n              [(value)]=\"data[field.name]\"\n              [defaultFirstValue]=\"field.defaultFirstValue\"\n              [required]=\"testRequired(field)\"\n              [readonly]=\"testReadOnly(field)\"\n              [hint]=\"field.hint\"\n              [detailsConfig]=\"field.detailsConfig\"\n              [loadAction]=\"field.loadAction\"\n              [loadIDField]=\"field.loadIDField\"\n              [field]=\"field\"\n              [data]=\"data\"\n              [infoMessage]=\"field.infoMessage\"\n              [copyContent]=\"field.copyContent\"\n              (valueChange)=\"selectChanged(field)\"\n            ></spa-select>\n          </ng-template>\n        </spa-form>\n\n        <!-- Changed: Use unified spa-tabs with nestingLevel control \u2014 tabs hidden when nestingLevel >= 2 -->\n        <spa-tabs\n          *ngIf=\"showTabs && tableConfigs && !(detailsConfig.hideTablesInCreateMode && formConfig?.mode === 'create')\"\n          [tableConfigs]=\"tableConfigs\"\n          [reload]=\"tableReload\"\n          [parentDetails]=\"details\"\n          [localMode]=\"formConfig?.mode === 'create'\"\n          [nestingLevel]=\"nestingLevel + 1\"\n          (formRefresh)=\"loadData(formConfig.loadAction, false)\"\n          (actionSuccess)=\"actionPerformed = true\">\n        </spa-tabs><!-- Changed: nested-tab table actions flag actionPerformed so refreshOnCloseIfActioned refreshes the parent on close -->\n\n      </div>\n\n    </mat-dialog-content>\n\n\n  </div>\n\n  <mat-dialog-actions >\n\n    <div>\n\n      <button mat-raised-button [disabled]=\"isProcessing\" *ngIf=\"formConfig.mode=='create' && createButton\" color=\"primary\"\n        (click)=\"create()\" cdkFocusInitial>{{createButton.display ?? 'Submit'}}\n      </button>\n\n      <button mat-raised-button [disabled]=\"isProcessing\" *ngIf=\"formConfig.mode=='edit' && editButton\" color=\"primary\"\n        (click)=\"edit()\" cdkFocusInitial>{{editButton.display ?? 'Submit'}}\n      </button>\n\n      <!-- TS-16: bind precomputed extraButtonVMs instead of testVisible/testDisabled/getButtonColor (each cloning objects) per CD -->\n      <ng-container *ngFor=\"let vm of extraButtonVMs\">\n        <button *ngIf=\"formConfig.mode !== 'create' && vm.visible\" mat-stroked-button [disabled]=\"isProcessing || vm.disabled\" [ngStyle]=\"{'color': vm.color}\" (click)=\"custom(vm.button)\" cdkFocusInitial>\n          <mat-icon *ngIf=\"vm.button.icon\" [ngStyle]=\"{'color': vm.color}\">{{vm.button.icon.name}}</mat-icon>\n          {{vm.button.display ?? vm.button.name | titlecase}}\n        </button>\n      </ng-container>\n\n      <!-- Changed: Bottom close button now uses conditional display and custom text -->\n      <button *ngIf=\"shouldShowBottomClose()\" mat-stroked-button color=\"primary\" (click)=\"close()\">{{getCloseText()}}</button>\n\n    </div>\n\n    <div class=\"col d-flex justify-content-end\" *ngIf=\"smallScreen\">\n      <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Delete\" [disabled]=\"isProcessing\" style=\"color: red;\" (click)=\"delete()\" *ngIf=\"formConfig.mode!='create'  && deleteButton\"><mat-icon>delete</mat-icon></button>\n    </div>\n\n\n  </mat-dialog-actions>\n\n\n</div>\n\n\n\n\n\n\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#f5f5f5}tr.mat-mdc-row{transition:background-color .15s ease}tr.mat-mdc-row:hover{background-color:#2196f305}tr.mat-mdc-row.row-editing,tr.mat-mdc-row.row-editing:hover{background-color:#ffa00014}.inline-save{color:#2e7d32!important}.inline-cancel{color:#c62828!important}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.dialog-container{display:flex;flex-direction:column;height:100%;max-height:100%;min-height:0}.dialog-content{flex:1;overflow:hidden;display:flex;flex-direction:column;min-height:0}.dialog-scroll-content{flex:1;overflow-y:auto;max-height:none!important;display:flex;flex-direction:column;min-height:0}.dialog-container:not(.dialog-has-tables){height:auto}.dialog-container:not(.dialog-has-tables) .dialog-scroll-content{flex:1 1 auto}.dialog-scroll-content>.tin-input{flex:1;display:flex;flex-direction:column}.dialog-scroll-content>.tin-input>spa-tabs{flex:1;display:flex;flex-direction:column}mat-dialog-actions{flex-shrink:0;justify-content:flex-start}.paginator-hidden{display:none!important}.paged-filter-hint{display:flex;align-items:center;gap:8px;margin:4px 0 8px;padding:6px 12px;border-radius:4px;background-color:#fff8e1;color:#795548;font-size:13px}.paged-filter-hint mat-icon{font-size:18px;width:18px;height:18px;color:#ffa000}\n"] }]
+            args: [{ selector: 'spa-detailsDialog', standalone: false, template: "<!-- Changed: dialog-has-tables mirrors the service's hasTables (tableConfigs?.length)\n     which decides height '90%' vs 'auto' \u2014 used to scope scroll behaviour per case -->\n<div class=\"dialog-container\" [class.dialog-has-tables]=\"detailsConfig.tableConfigs?.length > 0\">\n\n  <div class=\"dialog-content\">\n\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isProcessing && dataService.appConfig.progressLine\"></mat-progress-bar>\n\n    <div class=\"d-flex justify-content-between align-items-center mt-2\" style=\"padding-left: 24px; padding-right: 24px;\">\n\n      <div>\n        <label style=\"font-size: 20px; font-weight:500;margin-top: 10px;margin-bottom: 5px;\" >{{titleAction | titlecase}} {{formConfig?.title}}</label>\n      </div>\n\n      <div class=\"d-flex align-items-center\" style=\"gap: 8px;\">\n\n        <!-- Changed: Auto Refresh icon button \u2014 grey when off, green when on, with dynamic tooltip -->\n        <button *ngIf=\"detailsConfig.autoRefreshConfig\" mat-icon-button\n          [matTooltip]=\"autoRefreshEnabled ? 'Click to disable auto refresh' : 'Click to enable auto refresh'\" matTooltipPosition=\"above\"\n          [style.color]=\"autoRefreshEnabled ? '#4caf50' : '#9e9e9e'\"\n          (click)=\"autoRefreshEnabled = !autoRefreshEnabled; toggleAutoRefresh()\">\n          <mat-icon>autorenew</mat-icon>\n        </button>\n        <!-- Changed: Keep Open icon button \u2014 grey when off, green when on, with dynamic tooltip -->\n        <button *ngIf=\"detailsConfig.allowUserKeepOpen\" mat-icon-button\n          [matTooltip]=\"userKeepOpen ? 'Click to disable keep open' : 'Click to enable keep open'\" matTooltipPosition=\"above\"\n          [style.color]=\"userKeepOpen ? '#4caf50' : '#9e9e9e'\"\n          (click)=\"userKeepOpen = !userKeepOpen\">\n          <mat-icon>push_pin</mat-icon>\n        </button>\n\n        <!-- TS-16: bind precomputed editButtonVM instead of testVisible/testDisabled (which cloned objects) per CD -->\n        <div *ngIf=\"formConfig.mode=='view' && editButton && editButtonVM.visible\">\n          <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Edit\" color=\"primary\" (click)=\"setMode('edit')\" [disabled]=\"editButtonVM.disabled\"><mat-icon>edit</mat-icon></button>\n        </div>\n\n        <button [disabled]=\"isProcessing\" *ngIf=\"loadByAction\" mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Refresh\" color=\"primary\" (click)=\"loadData(formConfig.loadAction, detailsConfig.causeTableRefresh)\"><mat-icon class=\"refreshIcon\">cached</mat-icon></button>\n        \n        <!-- Added: Top close button when position is 'top' -->\n        <button *ngIf=\"shouldShowTopClose()\" [disabled]=\"isProcessing\" mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Close\" (click)=\"close()\"><mat-icon>close</mat-icon></button>\n\n      </div>\n\n    </div>\n\n    <div style=\"padding-left: 24px; padding-right: 24px;\">\n      <spa-steps *ngIf=\"stepConfig && details && stepConfig.sticky\" [config]=\"stepConfig\" [data]=\"details\"></spa-steps>\n      <spa-statuses *ngIf=\"statusConfig && details && statusConfig?.sticky\" [config]=\"statusConfig\" [data]=\"details\"></spa-statuses>\n      <spa-alert *ngIf=\"formConfig.alertConfig && formConfig.alertConfig?.sticky\" [config]=\"formConfig.alertConfig\" [data]=\"details\"></spa-alert>\n    </div>\n\n    <mat-dialog-content class=\"mat-typography dialog-scroll-content\">\n\n      <spa-steps *ngIf=\"stepConfig && details && !stepConfig.sticky\" [config]=\"stepConfig\" [data]=\"details\"></spa-steps>\n      <spa-statuses *ngIf=\"statusConfig && details && !statusConfig?.sticky\" [config]=\"statusConfig\" [data]=\"details\"></spa-statuses>\n      <spa-alert *ngIf=\"formConfig.alertConfig && !formConfig.alertConfig?.sticky\" [config]=\"formConfig.alertConfig\" [data]=\"details\"></spa-alert>\n\n      <div class=\"tin-input\" style=\"font-size:14px\">\n\n        <p *ngIf=\"formConfig && !details\"><em>Loading...</em></p>\n\n        <spa-form *ngIf=\"formConfig && details\" [files]=\"files\" [data]=\"details\" [config]=\"formConfig\" (inputChange)=\"inputChanged($event)\">\n          <ng-template #dynamicSelect let-field=\"field\" let-data=\"data\" let-testReadOnly=\"testReadOnly\" let-testRequired=\"testRequired\" let-selectChanged=\"selectChanged\" let-resolveLoadAction=\"resolveLoadAction\">\n            <spa-select\n              [display]=\"field.alias ?? field.name | camelToWords\"\n              [width]=\"field.width\"\n              [nullable]=\"field.nullable\"\n              [options]=\"field.options\"\n              [masterOptions]=\"field.masterOptions\"\n              [masterField]=\"field.masterField\"\n              [optionDisplay]=\"field.optionDisplay ?? 'name'\"\n              [optionValue]=\"field.optionValue ?? 'value'\"\n              [(value)]=\"data[field.name]\"\n              [defaultFirstValue]=\"field.defaultFirstValue\"\n              [required]=\"testRequired(field)\"\n              [readonly]=\"testReadOnly(field)\"\n              [hint]=\"field.hint\"\n              [detailsConfig]=\"field.detailsConfig\"\n              [loadAction]=\"resolveLoadAction ? resolveLoadAction(field) : field.loadAction\"\n              [loadIDField]=\"field.loadIDField\"\n              [field]=\"field\"\n              [data]=\"data\"\n              [infoMessage]=\"field.infoMessage\"\n              [copyContent]=\"field.copyContent\"\n              (valueChange)=\"selectChanged(field)\"\n            ></spa-select>\n          </ng-template>\n        </spa-form>\n\n        <!-- Changed: Use unified spa-tabs with nestingLevel control \u2014 tabs hidden when nestingLevel >= 2 -->\n        <spa-tabs\n          *ngIf=\"showTabs && tableConfigs && !(detailsConfig.hideTablesInCreateMode && formConfig?.mode === 'create')\"\n          [tableConfigs]=\"tableConfigs\"\n          [reload]=\"tableReload\"\n          [parentDetails]=\"details\"\n          [localMode]=\"formConfig?.mode === 'create'\"\n          [nestingLevel]=\"nestingLevel + 1\"\n          (formRefresh)=\"loadData(formConfig.loadAction, false)\"\n          (actionSuccess)=\"actionPerformed = true\">\n        </spa-tabs><!-- Changed: nested-tab table actions flag actionPerformed so refreshOnCloseIfActioned refreshes the parent on close -->\n\n      </div>\n\n    </mat-dialog-content>\n\n\n  </div>\n\n  <mat-dialog-actions >\n\n    <div>\n\n      <button mat-raised-button [disabled]=\"isProcessing\" *ngIf=\"formConfig.mode=='create' && createButton\" color=\"primary\"\n        (click)=\"create()\" cdkFocusInitial>{{createButton.display ?? 'Submit'}}\n      </button>\n\n      <button mat-raised-button [disabled]=\"isProcessing\" *ngIf=\"formConfig.mode=='edit' && editButton\" color=\"primary\"\n        (click)=\"edit()\" cdkFocusInitial>{{editButton.display ?? 'Submit'}}\n      </button>\n\n      <!-- TS-16: bind precomputed extraButtonVMs instead of testVisible/testDisabled/getButtonColor (each cloning objects) per CD -->\n      <ng-container *ngFor=\"let vm of extraButtonVMs\">\n        <button *ngIf=\"formConfig.mode !== 'create' && vm.visible\" mat-stroked-button [disabled]=\"isProcessing || vm.disabled\" [ngStyle]=\"{'color': vm.color}\" (click)=\"custom(vm.button)\" cdkFocusInitial>\n          <mat-icon *ngIf=\"vm.button.icon\" [ngStyle]=\"{'color': vm.color}\">{{vm.button.icon.name}}</mat-icon>\n          {{vm.button.display ?? vm.button.name | titlecase}}\n        </button>\n      </ng-container>\n\n      <!-- Changed: Bottom close button now uses conditional display and custom text -->\n      <button *ngIf=\"shouldShowBottomClose()\" mat-stroked-button color=\"primary\" (click)=\"close()\">{{getCloseText()}}</button>\n\n    </div>\n\n    <div class=\"col d-flex justify-content-end\" *ngIf=\"smallScreen\">\n      <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Delete\" [disabled]=\"isProcessing\" style=\"color: red;\" (click)=\"delete()\" *ngIf=\"formConfig.mode!='create'  && deleteButton\"><mat-icon>delete</mat-icon></button>\n    </div>\n\n\n  </mat-dialog-actions>\n\n\n</div>\n\n\n\n\n\n\n", styles: [".top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;margin-top:10px}.mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}.mat-icon-button{width:32px;height:32px}.mat-icon-button mat-icon{font-size:20px;margin-top:-7px}.col-icon{margin-left:10px}.title{margin-top:10px;font-size:larger;font-weight:300}.make-gray{background-color:#f5f5f5}tr.mat-mdc-row{transition:background-color .15s ease}tr.mat-mdc-row:hover{background-color:#2196f305}tr.mat-mdc-row.row-editing,tr.mat-mdc-row.row-editing:hover{background-color:#ffa00014}.inline-save{color:#2e7d32!important}.inline-cancel{color:#c62828!important}.right-padding{padding-right:10px}.action-buttons-container{display:flex;justify-content:flex-end;align-items:center}.refreshIcon{font-size:22px!important;margin-top:-7px!important}.dialog-container{display:flex;flex-direction:column;height:100%;max-height:100%;min-height:0}.dialog-content{flex:1;overflow:hidden;display:flex;flex-direction:column;min-height:0}.dialog-scroll-content{flex:1;overflow-y:auto;max-height:none!important;display:flex;flex-direction:column;min-height:0}.dialog-container:not(.dialog-has-tables){height:auto}.dialog-container:not(.dialog-has-tables) .dialog-scroll-content{flex:1 1 auto}.dialog-scroll-content>.tin-input{flex:1;display:flex;flex-direction:column}.dialog-scroll-content>.tin-input>spa-tabs{flex:1;display:flex;flex-direction:column}mat-dialog-actions{flex-shrink:0;justify-content:flex-start}.paginator-hidden{display:none!important}.paged-filter-hint{display:flex;align-items:center;gap:8px;margin:4px 0 8px;padding:6px 12px;border-radius:4px;background-color:#fff8e1;color:#795548;font-size:13px}.paged-filter-hint mat-icon{font-size:18px;width:18px;height:18px;color:#ffa000}\n"] }]
         }], ctorParameters: () => [{ type: i1$3.BreakpointObserver }, { type: LoaderService }, { type: DataServiceLib }, { type: MessageService }, { type: i4.MatDialogRef }, { type: DetailsDialogConfig, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -16653,7 +17122,7 @@ class ListDialogComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ListDialogComponent, deps: [{ token: DataServiceLib }, { token: i4.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: ListDialogComponent, isStandalone: false, selector: "spa-list-dialog", ngImport: i0, template: "<div>\n\n  <label style=\"font-size: 24px;\">{{listConfig?.title ?? 'List'}}</label>\n\n</div>\n\n<mat-dialog-content class=\"mat-typography\">\n\n  <div style=\" font-size: 14px;\">\n    <spa-table [config]=\"config\" [reload]=\"tableReload\" (actionClick)=\"actionClicked()\"></spa-table>\n  </div>\n\n\n</mat-dialog-content>\n\n<mat-dialog-actions>\n  <button mat-button (click)=\"close()\" >Ok</button>\n</mat-dialog-actions>\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}\n"], dependencies: [{ 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: "directive", type: i4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: TableComponent, selector: "spa-table", inputs: ["data", "tileData", "config", "localMode", "parentDetails", "reload", "activeTab", "inTab", "nestingLevel"], outputs: ["dataLoad", "actionSuccess", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange", "actionResponse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: ListDialogComponent, isStandalone: false, selector: "spa-list-dialog", ngImport: i0, template: "<div>\n\n  <label style=\"font-size: 24px;\">{{listConfig?.title ?? 'List'}}</label>\n\n</div>\n\n<mat-dialog-content class=\"mat-typography\">\n\n  <div style=\" font-size: 14px;\">\n    <spa-table [config]=\"config\" [reload]=\"tableReload\" (actionClick)=\"actionClicked()\"></spa-table>\n  </div>\n\n\n</mat-dialog-content>\n\n<mat-dialog-actions>\n  <button mat-button (click)=\"close()\" >Ok</button>\n</mat-dialog-actions>\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}\n"], dependencies: [{ 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: "directive", type: i4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: TableComponent, selector: "spa-table", inputs: ["data", "tileData", "config", "localMode", "parentDetails", "reload", "activeTab", "inTab", "nestingLevel"], outputs: ["dataLoad", "totalChange", "actionSuccess", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange", "actionResponse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ListDialogComponent, decorators: [{
             type: Component,
@@ -16720,7 +17189,7 @@ class InvitationsTableComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: InvitationsTableComponent, deps: [{ token: DataServiceLib }, { token: MessageService }, { token: AuthService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: InvitationsTableComponent, isStandalone: false, selector: "spa-invitations-table", ngImport: i0, template: "<spa-table [config]=\"invitationsTableConfig\" (actionClick)=\"invActionClicked($event)\" [reload]=\"tableReload\"></spa-table>\n", styles: [""], dependencies: [{ kind: "component", type: TableComponent, selector: "spa-table", inputs: ["data", "tileData", "config", "localMode", "parentDetails", "reload", "activeTab", "inTab", "nestingLevel"], outputs: ["dataLoad", "actionSuccess", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange", "actionResponse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: InvitationsTableComponent, isStandalone: false, selector: "spa-invitations-table", ngImport: i0, template: "<spa-table [config]=\"invitationsTableConfig\" (actionClick)=\"invActionClicked($event)\" [reload]=\"tableReload\"></spa-table>\n", styles: [""], dependencies: [{ kind: "component", type: TableComponent, selector: "spa-table", inputs: ["data", "tileData", "config", "localMode", "parentDetails", "reload", "activeTab", "inTab", "nestingLevel"], outputs: ["dataLoad", "totalChange", "actionSuccess", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange", "actionResponse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: InvitationsTableComponent, decorators: [{
             type: Component,
@@ -16898,7 +17367,7 @@ class PageComponent {
         this.dataLoad.emit(x);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: PageComponent, deps: [{ token: DataServiceLib }, { token: MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: PageComponent, isStandalone: false, selector: "spa-page", inputs: { config: "config" }, outputs: { searchModeActivated: "searchModeActivated", searchModeDeactivated: "searchModeDeactivated", refreshClick: "refreshClick", actionClick: "actionClick", actionResponse: "actionResponse", inputChange: "inputChange", createClick: "createClick", searchClick: "searchClick", dataLoad: "dataLoad", titleActionChange: "titleActionChange" }, ngImport: i0, template: "<div class=\"row\">\n\n  <div class=\"col-auto\">\n    <h4>{{config.title ?? 'Untitled'}} </h4>\n  </div>\n\n  <div class=\"col d-flex justify-content-end align-items-center\" style=\"font-size: 14px; gap: 15px;\">\n    <!-- Added: Title actions component -->\n    <spa-title-actions \n      *ngIf=\"config.titleActions\" \n      [titleActions]=\"config.titleActions\"\n      (actionChange)=\"titleActionChanged($event)\">\n    </spa-title-actions>\n    \n    <spa-check *ngIf=\"config.searchTableConfig\" [(value)]=\"searchMode\" display=\"Search Mode\" (valueChange)=\"toggleSearch()\" style=\"margin-right: 10px;\"></spa-check>\n  </div>\n\n</div>\n\n<hr style=\"margin-top: 0px;\" />\n\n\n<div style=\" font-size: 14px;\">\n  <!-- Normal -->\n  <spa-table *ngIf=\"!searchMode\"  [config]=\"normalTableConfig\" [reload]=\"tableReload\"\n    (refreshClick)=\"refreshClicked()\" (actionClick)=\"actionClicked($event)\" (actionResponse)=\"actionResponded($event)\"\n    (inputChange)=\"inputChanged($event)\" (createClick)=\"createClicked($event)\" (searchClick)=\"searchClicked($event)\" (dataLoad)=\"dataLoaded($event)\">\n  </spa-table>\n\n  <!-- Search -->\n  <spa-table *ngIf=\"searchMode\" [config]=\"searchTableConfig\" [reload]=\"tableReload\"\n    (refreshClick)=\"refreshClicked()\" (actionClick)=\"actionClicked($event)\" (actionResponse)=\"actionResponded($event)\"\n    (inputChange)=\"inputChanged($event)\" (createClick)=\"createClicked($event)\" (searchClick)=\"searchClicked($event)\" (dataLoad)=\"dataLoaded($event)\">\n  </spa-table>\n</div>\n\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CheckComponent, selector: "spa-check", inputs: ["readonly", "display", "value", "infoMessage"], outputs: ["valueChange", "click", "check", "uncheck", "infoClick"] }, { kind: "component", type: TableComponent, selector: "spa-table", inputs: ["data", "tileData", "config", "localMode", "parentDetails", "reload", "activeTab", "inTab", "nestingLevel"], outputs: ["dataLoad", "actionSuccess", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange", "actionResponse"] }, { kind: "component", type: TitleActionsComponent, selector: "spa-title-actions", inputs: ["titleActions"], outputs: ["actionChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: PageComponent, isStandalone: false, selector: "spa-page", inputs: { config: "config" }, outputs: { searchModeActivated: "searchModeActivated", searchModeDeactivated: "searchModeDeactivated", refreshClick: "refreshClick", actionClick: "actionClick", actionResponse: "actionResponse", inputChange: "inputChange", createClick: "createClick", searchClick: "searchClick", dataLoad: "dataLoad", titleActionChange: "titleActionChange" }, ngImport: i0, template: "<div class=\"row\">\n\n  <div class=\"col-auto\">\n    <h4>{{config.title ?? 'Untitled'}} </h4>\n  </div>\n\n  <div class=\"col d-flex justify-content-end align-items-center\" style=\"font-size: 14px; gap: 15px;\">\n    <!-- Added: Title actions component -->\n    <spa-title-actions \n      *ngIf=\"config.titleActions\" \n      [titleActions]=\"config.titleActions\"\n      (actionChange)=\"titleActionChanged($event)\">\n    </spa-title-actions>\n    \n    <spa-check *ngIf=\"config.searchTableConfig\" [(value)]=\"searchMode\" display=\"Search Mode\" (valueChange)=\"toggleSearch()\" style=\"margin-right: 10px;\"></spa-check>\n  </div>\n\n</div>\n\n<hr style=\"margin-top: 0px;\" />\n\n\n<div style=\" font-size: 14px;\">\n  <!-- Normal -->\n  <spa-table *ngIf=\"!searchMode\"  [config]=\"normalTableConfig\" [reload]=\"tableReload\"\n    (refreshClick)=\"refreshClicked()\" (actionClick)=\"actionClicked($event)\" (actionResponse)=\"actionResponded($event)\"\n    (inputChange)=\"inputChanged($event)\" (createClick)=\"createClicked($event)\" (searchClick)=\"searchClicked($event)\" (dataLoad)=\"dataLoaded($event)\">\n  </spa-table>\n\n  <!-- Search -->\n  <spa-table *ngIf=\"searchMode\" [config]=\"searchTableConfig\" [reload]=\"tableReload\"\n    (refreshClick)=\"refreshClicked()\" (actionClick)=\"actionClicked($event)\" (actionResponse)=\"actionResponded($event)\"\n    (inputChange)=\"inputChanged($event)\" (createClick)=\"createClicked($event)\" (searchClick)=\"searchClicked($event)\" (dataLoad)=\"dataLoaded($event)\">\n  </spa-table>\n</div>\n\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CheckComponent, selector: "spa-check", inputs: ["readonly", "display", "value", "infoMessage"], outputs: ["valueChange", "click", "check", "uncheck", "infoClick"] }, { kind: "component", type: TableComponent, selector: "spa-table", inputs: ["data", "tileData", "config", "localMode", "parentDetails", "reload", "activeTab", "inTab", "nestingLevel"], outputs: ["dataLoad", "totalChange", "actionSuccess", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange", "actionResponse"] }, { kind: "component", type: TitleActionsComponent, selector: "spa-title-actions", inputs: ["titleActions"], outputs: ["actionChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: PageComponent, decorators: [{
             type: Component,
@@ -17499,7 +17968,7 @@ class SpaLandingComponent {
             if (!success)
                 return;
             const last = await this.lastRouteService.resolve();
-            this.router.navigate([last ?? 'home']);
+            this.lastRouteService.navigateTo(last ?? 'home'); // Changed: navigateTo falls back to home if the saved page no longer exists
         });
     }
     ngAfterViewInit() {
@@ -17808,9 +18277,9 @@ class LoginComponent {
             this.isProcessing = false;
             if (success) {
                 this.notifications();
-                this.router.navigate([await this.resumeTarget()]);
+                this.lastRouteService.navigateTo(await this.resumeTarget(), this.redirectPath);
                 return;
-            }
+            } // Changed: navigateTo falls back to the redirect path if the saved page no longer exists
             this.setupForm(); // Changed: Only set up login form if no session could be restored
         });
     }
@@ -17917,7 +18386,7 @@ class LoginComponent {
                     });
                     return;
                 }
-                this.resumeTarget().then(target => this.router.navigate([target])); // Changed: land on the user's last page when resumeLastRoute is on
+                this.resumeTarget().then(target => this.lastRouteService.navigateTo(target, this.redirectPath)); // Changed: land on the user's last page when resumeLastRoute is on, falling back to the redirect path if that page is gone
             }
             else if (apiResponse.message == "signup_required" && apiResponse.data) {
                 // Changed: Detect signup_required response and redirect to signup page
@@ -19515,7 +19984,7 @@ class PurchasingService {
             { value: 0, name: 'Cash' },
             { value: 1, name: 'Bank' }
         ];
-        this.purchaseOrderItemFormConfig = {
+        this.supplierPurchaseOrderItemFormConfig = {
             security: { allow: [this.dataService.capInventoryReceipts] }, // Added: gate PO item form by purchasing cap (matches parent PO config)
             title: 'PO Item',
             fixedTitle: true,
@@ -19525,9 +19994,9 @@ class PurchasingService {
                 { name: 'estimatedUnitCost', type: 'money', alias: 'Est. Unit Cost', required: true },
                 { name: 'lineTotal', type: 'money', alias: 'Line Total', readonly: true, hideOnCreate: true }
             ],
-            loadAction: { url: 'purchaseorderitems/id' }
+            loadAction: { url: 'supplierpurchaseorderitems/id' }
         };
-        this.purchaseOrderItemsTableConfig = {
+        this.supplierPurchaseOrderItemsTableConfig = {
             tabTitle: 'Items',
             showFilter: false,
             elevation: 'none',
@@ -19542,16 +20011,16 @@ class PurchasingService {
                 { name: 'isFullyReceived', type: 'checkbox', alias: 'Complete', icon: { name: 'check_circle', color: 'green' } }
             ],
             buttons: [
-                { name: 'create', display: 'Add Item', dialog: true, action: { url: 'purchaseorderitems?action=create', method: 'post' } },
-                { name: 'edit', dialog: true, action: { url: 'purchaseorderitems?action=edit', method: 'post' } },
-                { name: 'delete', dialog: true, action: { url: 'purchaseorderitems?action=delete', method: 'post' } }
+                { name: 'create', display: 'Add Item', dialog: true, action: { url: 'supplierpurchaseorderitems?action=create', method: 'post' } },
+                { name: 'edit', dialog: true, action: { url: 'supplierpurchaseorderitems?action=edit', method: 'post' } },
+                { name: 'delete', dialog: true, action: { url: 'supplierpurchaseorderitems?action=delete', method: 'post' } }
             ],
-            loadAction: { url: 'purchaseorderitems/x/x' },
+            loadAction: { url: 'supplierpurchaseorderitems/x/x' },
             loadCriteria: 'po',
-            loadIDField: 'purchaseOrderID',
-            formConfig: this.purchaseOrderItemFormConfig
+            loadIDField: 'supplierPurchaseOrderID',
+            formConfig: this.supplierPurchaseOrderItemFormConfig
         };
-        this.purchaseOrderFormConfig = {
+        this.supplierPurchaseOrderFormConfig = {
             security: { allow: [this.dataService.capInventoryReceipts] },
             title: 'Purchase Order',
             fixedTitle: true,
@@ -19570,15 +20039,15 @@ class PurchasingService {
                 { name: 'additionalInfo', type: 'section', alias: 'Additional Information', collapsed: true },
                 { name: 'notes', type: 'text', alias: 'Notes', span: true, section: 'additionalInfo' }
             ],
-            loadAction: { url: 'purchaseorders/id' },
-            heroField: 'purchaseOrderID'
+            loadAction: { url: 'supplierpurchaseorders/id' },
+            heroField: 'supplierPurchaseOrderID'
         };
         this.receiveGoodsFormConfig = {
             security: { allow: [this.dataService.capInventoryReceipts] }, // Added: gate receive goods form by purchasing cap
             title: 'Receive Goods',
             multiColumn: true,
             fields: [
-                { name: 'purchaseOrderID', type: 'number', alias: 'PO ID', readonly: true, hidden: true },
+                { name: 'supplierPurchaseOrderID', type: 'number', alias: 'PO ID', readonly: true, hidden: true },
                 { name: 'poNumber', type: 'text', alias: 'PO Number', readonly: true },
                 { name: 'supplierID', type: 'number', alias: 'Supplier ID', readonly: true, hidden: true },
                 { name: 'supplierName', type: 'text', alias: 'Supplier', readonly: true },
@@ -19592,10 +20061,10 @@ class PurchasingService {
             formConfig: this.receiveGoodsFormConfig,
             buttons: []
         };
-        this.purchaseOrderEditButton = { name: 'edit', dialog: true, action: { url: 'purchaseorders?action=edit', method: 'post' } };
-        this.purchaseOrderConfirmButton = { name: 'confirm', display: 'Confirm PO', inDialog: true, icon: { name: 'check_circle', color: 'blue' }, action: { url: 'purchaseorders?action=confirm', method: 'post', successMessage: 'PO Confirmed' }, confirm: { message: 'Confirm this purchase order? Items will be locked.' }, visible: (po) => po.statusName === 'Draft' };
-        this.purchaseOrderCancelButton = { name: 'cancel', display: 'Cancel PO', inDialog: true, icon: { name: 'cancel', color: 'red' }, action: { url: 'purchaseorders?action=cancel', method: 'post', successMessage: 'PO Cancelled' }, confirm: { message: 'Cancel this purchase order?' }, visible: (po) => po.statusName !== 'FullyReceived' && po.statusName !== 'PartiallyReceived' };
-        this.purchaseOrderReceiveButton = {
+        this.supplierPurchaseOrderEditButton = { name: 'edit', dialog: true, action: { url: 'supplierpurchaseorders?action=edit', method: 'post' } };
+        this.supplierPurchaseOrderConfirmButton = { name: 'confirm', display: 'Confirm PO', inDialog: true, icon: { name: 'check_circle', color: 'blue' }, action: { url: 'supplierpurchaseorders?action=confirm', method: 'post', successMessage: 'PO Confirmed' }, confirm: { message: 'Confirm this purchase order? Items will be locked.' }, visible: (po) => po.statusName === 'Draft' };
+        this.supplierPurchaseOrderCancelButton = { name: 'cancel', display: 'Cancel PO', inDialog: true, icon: { name: 'cancel', color: 'red' }, action: { url: 'supplierpurchaseorders?action=cancel', method: 'post', successMessage: 'PO Cancelled' }, confirm: { message: 'Cancel this purchase order?' }, visible: (po) => po.statusName !== 'FullyReceived' && po.statusName !== 'PartiallyReceived' };
+        this.supplierPurchaseOrderReceiveButton = {
             name: 'receive',
             display: 'Receive Goods',
             inDialog: true,
@@ -19605,14 +20074,14 @@ class PurchasingService {
             action: { url: 'purchases?action=create', method: 'post' }, // Changed: inventoryreceipts → purchases
             visible: (po) => po.statusName === 'Confirmed' || po.statusName === 'PartiallyReceived'
         };
-        this.purchaseOrderDetailsConfig = {
-            formConfig: this.purchaseOrderFormConfig,
-            tableConfigs: [this.purchaseOrderItemsTableConfig],
-            heroField: 'purchaseOrderID',
-            buttons: [this.purchaseOrderEditButton, this.purchaseOrderConfirmButton, this.purchaseOrderReceiveButton, this.purchaseOrderCancelButton]
+        this.supplierPurchaseOrderDetailsConfig = {
+            formConfig: this.supplierPurchaseOrderFormConfig,
+            tableConfigs: [this.supplierPurchaseOrderItemsTableConfig],
+            heroField: 'supplierPurchaseOrderID',
+            buttons: [this.supplierPurchaseOrderEditButton, this.supplierPurchaseOrderConfirmButton, this.supplierPurchaseOrderReceiveButton, this.supplierPurchaseOrderCancelButton]
         };
-        this.purchaseOrderViewButton = { name: 'view', dialog: true, detailsConfig: this.purchaseOrderDetailsConfig };
-        this.purchaseOrdersTableConfig = {
+        this.supplierPurchaseOrderViewButton = { name: 'view', dialog: true, detailsConfig: this.supplierPurchaseOrderDetailsConfig };
+        this.supplierPurchaseOrdersTableConfig = {
             showFilter: true,
             flatButtons: true,
             minColumns: ['poNumber', 'supplierName', 'orderDate'],
@@ -19627,13 +20096,13 @@ class PurchasingService {
                 { name: 'statusName', type: 'chip', alias: 'Status', colors: [{ name: '#E0E0E0', condition: x => x.statusName == 'Draft' }, { name: '#BBDEFB', condition: x => x.statusName == 'Confirmed' }, { name: '#FFE0B2', condition: x => x.statusName == 'PartiallyReceived' }, { name: '#C8E6C9', condition: x => x.statusName == 'FullyReceived' }, { name: '#FFCDD2', condition: x => x.statusName == 'Cancelled' }] }
             ],
             buttons: [
-                { name: 'create', display: 'New Purchase Order', dialog: true, action: { url: 'purchaseorders?action=create', method: 'post' }, onSuccessButton: this.purchaseOrderViewButton },
-                { name: 'view', dialog: true, detailsConfig: this.purchaseOrderDetailsConfig },
-                { name: 'delete', dialog: true, action: { url: 'purchaseorders?action=delete', method: 'post' } }
+                { name: 'create', display: 'New Purchase Order', dialog: true, action: { url: 'supplierpurchaseorders?action=create', method: 'post' }, onSuccessButton: this.supplierPurchaseOrderViewButton },
+                { name: 'view', dialog: true, detailsConfig: this.supplierPurchaseOrderDetailsConfig },
+                { name: 'delete', dialog: true, action: { url: 'supplierpurchaseorders?action=delete', method: 'post' } }
             ],
-            loadAction: { url: 'purchaseorders/all/x' },
-            formConfig: this.purchaseOrderFormConfig,
-            entityName: 'PurchaseOrder'
+            loadAction: { url: 'supplierpurchaseorders/all/x' },
+            formConfig: this.supplierPurchaseOrderFormConfig,
+            entityName: 'SupplierPurchaseOrder'
         };
         //--------------------------Purchases (renamed from Inventory Receipts)-------------------------
         // Changed: Renamed from inventoryReceiptItemFormConfig to purchaseItemFormConfig
@@ -19709,7 +20178,7 @@ class PurchasingService {
                 },
                 { name: 'purchaseNumber', type: 'text', alias: 'Purchase Number', readonly: true, hideOnCreate: true, section: 'purchaseInfo', infoMessage: 'Auto-generated unique purchase identifier' }, // Changed: receiptNumber → purchaseNumber
                 { name: 'poNumber', type: 'text', alias: 'PO Number', hideOnCreate: true, section: 'purchaseInfo', infoMessage: 'Linked purchase order if receiving against a PO', // Changed: receiptInfo → purchaseInfo
-                    hidden: (row) => !row.purchaseOrderID,
+                    hidden: (row) => !row.supplierPurchaseOrderID,
                 },
                 { name: 'multipleProducts', type: 'checkbox', alias: 'Multiple Products', defaultValue: false, hideOnExists: true, infoMessage: 'Check this box if you want to add multiple products to this purchase' }, // Changed: receipt → purchase
                 { name: 'quickPurchaseItem', type: 'section', alias: 'Quick Purchase Item',
@@ -22985,22 +23454,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                 }]
         }] });
 
-class PurchaseOrdersComponent {
+class SupplierPurchaseOrdersComponent {
     constructor() {
         this.purchasingService = inject(PurchasingService); // Changed: Inject PurchasingService
         this.pageConfig = {
             title: 'Purchase Orders',
-            tableConfig: this.purchasingService.purchaseOrdersTableConfig // Changed: Use PurchasingService config
+            tableConfig: this.purchasingService.supplierPurchaseOrdersTableConfig // Changed: Use PurchasingService config
         };
     }
     ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: PurchaseOrdersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: PurchaseOrdersComponent, isStandalone: false, selector: "spa-purchase-orders", ngImport: i0, template: '<spa-page [config]="pageConfig"></spa-page>', isInline: true, dependencies: [{ kind: "component", type: PageComponent, selector: "spa-page", inputs: ["config"], outputs: ["searchModeActivated", "searchModeDeactivated", "refreshClick", "actionClick", "actionResponse", "inputChange", "createClick", "searchClick", "dataLoad", "titleActionChange"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SupplierPurchaseOrdersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: SupplierPurchaseOrdersComponent, isStandalone: false, selector: "spa-supplier-purchase-orders", ngImport: i0, template: '<spa-page [config]="pageConfig"></spa-page>', isInline: true, dependencies: [{ kind: "component", type: PageComponent, selector: "spa-page", inputs: ["config"], outputs: ["searchModeActivated", "searchModeDeactivated", "refreshClick", "actionClick", "actionResponse", "inputChange", "createClick", "searchClick", "dataLoad", "titleActionChange"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: PurchaseOrdersComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SupplierPurchaseOrdersComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'spa-purchase-orders',
+                    selector: 'spa-supplier-purchase-orders',
                     template: '<spa-page [config]="pageConfig"></spa-page>',
                     standalone: false
                 }]
@@ -23091,7 +23560,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
         }] });
 
 const PURCHASING_ROUTES = [
-    { path: "orders", component: PurchaseOrdersComponent },
+    { path: "orders", component: SupplierPurchaseOrdersComponent },
     { path: "purchases", component: InventoryReceiptsComponent },
     { path: "dashboard", component: PurchasingDashboardComponent }
 ];
@@ -24655,7 +25124,7 @@ class TasksComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TasksComponent, deps: [{ token: DataServiceLib }, { token: MessageService }, { token: AuthService }, { token: i4.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: TasksComponent, isStandalone: false, selector: "spa-tasks", ngImport: i0, template: "<div class=\"d-flex align-items-center justify-content-between mt-0\" style=\"margin-left: 10px\">\n\n  <label style=\"font-size: 16px;\">Tasks</label>\n\n  <div>\n    <button mat-mini-fab color=\"primary\" style=\"margin-right:1em;\" (click)=\"cats()\" matTooltip=\"Categories\" matTooltipPosition=\"above\"><mat-icon>category</mat-icon></button>\n  </div>\n\n</div>\n<hr>\n\n<div class=\"mt-3\" style=\" font-size: 14px;\">\n  <spa-table [config]=\"tasksTableConfig\" [reload]=\"reload\"></spa-table>\n</div>\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}\n"], dependencies: [{ kind: "component", type: i3.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: TableComponent, selector: "spa-table", inputs: ["data", "tileData", "config", "localMode", "parentDetails", "reload", "activeTab", "inTab", "nestingLevel"], outputs: ["dataLoad", "actionSuccess", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange", "actionResponse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: TasksComponent, isStandalone: false, selector: "spa-tasks", ngImport: i0, template: "<div class=\"d-flex align-items-center justify-content-between mt-0\" style=\"margin-left: 10px\">\n\n  <label style=\"font-size: 16px;\">Tasks</label>\n\n  <div>\n    <button mat-mini-fab color=\"primary\" style=\"margin-right:1em;\" (click)=\"cats()\" matTooltip=\"Categories\" matTooltipPosition=\"above\"><mat-icon>category</mat-icon></button>\n  </div>\n\n</div>\n<hr>\n\n<div class=\"mt-3\" style=\" font-size: 14px;\">\n  <spa-table [config]=\"tasksTableConfig\" [reload]=\"reload\"></spa-table>\n</div>\n", styles: [".mat-mini-fab{width:32px;height:32px}.mat-mini-fab mat-icon{font-size:16px;margin-top:-3px}\n"], dependencies: [{ kind: "component", type: i3.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: TableComponent, selector: "spa-table", inputs: ["data", "tileData", "config", "localMode", "parentDetails", "reload", "activeTab", "inTab", "nestingLevel"], outputs: ["dataLoad", "totalChange", "actionSuccess", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange", "actionResponse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TasksComponent, decorators: [{
             type: Component,
@@ -24896,7 +25365,7 @@ class TenantSettingsComponent {
         this.authService.logoff();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TenantSettingsComponent, deps: [{ token: DataServiceLib }, { token: MessageService }, { token: AuthService }, { token: i4.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: TenantSettingsComponent, isStandalone: false, selector: "spa-tenant-settings", ngImport: i0, template: "<div class=\"container\">\n\n  <div>\n\n    <label class=\"title\" >Organisation Details</label>\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\n\n    <div *ngIf=\"currTenant && plan\" class=\"mb-2 mt-3 tin-grid\" style=\" font-size: 14px;\">\n\n      <div class=\"tin-col mb-3\" style=\"max-width: 500px;\">\n        <spa-select display=\"Current Organisation\" [options]=\"tenants\" optionDisplay=\"name\" optionValue=\"tenantID\" [(value)]=\"currentTenantID\"\n          hint=\"You are required to login again after switching organisations.\" style=\"min-width: 300px;margin-bottom: 10px;\"></spa-select>\n        <button mat-stroked-button color=\"primary\" [disabled]=\"currentTenantID == currTenant.tenantID\" (click)=\"switchTenant()\">Switch</button>\n      </div>\n\n    </div>\n\n  </div>\n\n\n  <ng-container *ngIf=\"ownTenant\" >\n <!-- Members -->\n  <div class=\"mt-3\" >\n\n    <label class=\"title\" >Members</label>\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\n    <label class=\"subtitle text-muted\">Invite other users to join your organisation as partners or employees to form a partnership or company.</label>\n\n    <spa-table [config]=\"membersTableConfig\" [reload]=\"tableReload\" ></spa-table>\n\n  </div>\n\n\n<!-- My Organisations -->\n  <div class=\"mt-3\" *ngIf=\"ownTenant\">\n\n    <label class=\"title\" >My Organisations</label>\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\n    <label class=\"subtitle text-muted\">Organisations that you are a member of.</label>\n\n    <spa-table [config]=\"orgsTableConfig\" [reload]=\"orgsReload\" (actionResponse)=\"updateTenant($event)\"></spa-table>\n\n  </div>\n\n\n  <!-- My Invitations -->\n  <div class=\"mt-3\" *ngIf=\"ownTenant\">\n\n    <label class=\"title\">My Invitations</label>\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\n    <label class=\"subtitle text-muted\">Requests for you to join other organisations.</label>\n\n\n    <spa-invitations-table></spa-invitations-table>\n\n  </div>\n\n  <!-- Billing -->\n  <div class=\"mt-3\" *ngIf=\"ownTenant\">\n\n    <label class=\"title\" >Billing and Subscription</label>\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\n\n      <div *ngIf=\"currTenant && plan\" class=\"mb-1 mt-3\" style=\"max-width: 300px; font-size: 14px;\">\n        <spa-label display=\"Plan\" [value]=\"plan.name\"></spa-label>\n        <spa-label display=\"Next Payment\" format=\"money\" [value]=\"plan.price\"></spa-label>\n        <spa-label display=\"Due Date\" format=\"date\" value=\"2024-01-01\"></spa-label>\n      </div>\n\n  </div>\n\n    <!-- Email -->\n  <div class=\"mt-3 mb-5\" *ngIf=\"ownTenant\">\n\n  <label class=\"title\">Email Configuration</label>\n  <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\n  <label class=\"subtitle text-muted\">Configure email settings for sending notifications.</label>\n\n  <spa-table [config]=\"mailerTableConfig\"></spa-table>\n\n  </div>\n\n\n  </ng-container>\n\n\n\n</div>\n\n\n", styles: [".title{margin-top:1em;font-size:28px;font-weight:300}.subtitle{font-size:smaller}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: SelectComponent, selector: "spa-select", inputs: ["detailsConfig"] }, { kind: "component", type: LabelComponent, selector: "spa-label", inputs: ["display", "value", "format", "suffix", "size"] }, { kind: "component", type: TableComponent, selector: "spa-table", inputs: ["data", "tileData", "config", "localMode", "parentDetails", "reload", "activeTab", "inTab", "nestingLevel"], outputs: ["dataLoad", "actionSuccess", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange", "actionResponse"] }, { kind: "component", type: InvitationsTableComponent, selector: "spa-invitations-table" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: TenantSettingsComponent, isStandalone: false, selector: "spa-tenant-settings", ngImport: i0, template: "<div class=\"container\">\n\n  <div>\n\n    <label class=\"title\" >Organisation Details</label>\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\n\n    <div *ngIf=\"currTenant && plan\" class=\"mb-2 mt-3 tin-grid\" style=\" font-size: 14px;\">\n\n      <div class=\"tin-col mb-3\" style=\"max-width: 500px;\">\n        <spa-select display=\"Current Organisation\" [options]=\"tenants\" optionDisplay=\"name\" optionValue=\"tenantID\" [(value)]=\"currentTenantID\"\n          hint=\"You are required to login again after switching organisations.\" style=\"min-width: 300px;margin-bottom: 10px;\"></spa-select>\n        <button mat-stroked-button color=\"primary\" [disabled]=\"currentTenantID == currTenant.tenantID\" (click)=\"switchTenant()\">Switch</button>\n      </div>\n\n    </div>\n\n  </div>\n\n\n  <ng-container *ngIf=\"ownTenant\" >\n <!-- Members -->\n  <div class=\"mt-3\" >\n\n    <label class=\"title\" >Members</label>\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\n    <label class=\"subtitle text-muted\">Invite other users to join your organisation as partners or employees to form a partnership or company.</label>\n\n    <spa-table [config]=\"membersTableConfig\" [reload]=\"tableReload\" ></spa-table>\n\n  </div>\n\n\n<!-- My Organisations -->\n  <div class=\"mt-3\" *ngIf=\"ownTenant\">\n\n    <label class=\"title\" >My Organisations</label>\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\n    <label class=\"subtitle text-muted\">Organisations that you are a member of.</label>\n\n    <spa-table [config]=\"orgsTableConfig\" [reload]=\"orgsReload\" (actionResponse)=\"updateTenant($event)\"></spa-table>\n\n  </div>\n\n\n  <!-- My Invitations -->\n  <div class=\"mt-3\" *ngIf=\"ownTenant\">\n\n    <label class=\"title\">My Invitations</label>\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\n    <label class=\"subtitle text-muted\">Requests for you to join other organisations.</label>\n\n\n    <spa-invitations-table></spa-invitations-table>\n\n  </div>\n\n  <!-- Billing -->\n  <div class=\"mt-3\" *ngIf=\"ownTenant\">\n\n    <label class=\"title\" >Billing and Subscription</label>\n    <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\n\n      <div *ngIf=\"currTenant && plan\" class=\"mb-1 mt-3\" style=\"max-width: 300px; font-size: 14px;\">\n        <spa-label display=\"Plan\" [value]=\"plan.name\"></spa-label>\n        <spa-label display=\"Next Payment\" format=\"money\" [value]=\"plan.price\"></spa-label>\n        <spa-label display=\"Due Date\" format=\"date\" value=\"2024-01-01\"></spa-label>\n      </div>\n\n  </div>\n\n    <!-- Email -->\n  <div class=\"mt-3 mb-5\" *ngIf=\"ownTenant\">\n\n  <label class=\"title\">Email Configuration</label>\n  <hr style=\"margin-top: 0px; margin-bottom: 0px;\">\n  <label class=\"subtitle text-muted\">Configure email settings for sending notifications.</label>\n\n  <spa-table [config]=\"mailerTableConfig\"></spa-table>\n\n  </div>\n\n\n  </ng-container>\n\n\n\n</div>\n\n\n", styles: [".title{margin-top:1em;font-size:28px;font-weight:300}.subtitle{font-size:smaller}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: SelectComponent, selector: "spa-select", inputs: ["detailsConfig"] }, { kind: "component", type: LabelComponent, selector: "spa-label", inputs: ["display", "value", "format", "suffix", "size"] }, { kind: "component", type: TableComponent, selector: "spa-table", inputs: ["data", "tileData", "config", "localMode", "parentDetails", "reload", "activeTab", "inTab", "nestingLevel"], outputs: ["dataLoad", "totalChange", "actionSuccess", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange", "actionResponse"] }, { kind: "component", type: InvitationsTableComponent, selector: "spa-invitations-table" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TenantSettingsComponent, decorators: [{
             type: Component,
@@ -26068,7 +26537,7 @@ class ApprovalsComponent {
     ngOnInit() {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ApprovalsComponent, deps: [{ token: DataServiceLib }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: ApprovalsComponent, isStandalone: false, selector: "spa-approvals", ngImport: i0, template: "<h4>Approvals</h4>\n<hr>\n\n<mat-tab-group>\n  <mat-tab label=\"Received\">\n    <div class=\"mt-3\">\n      <spa-table [config]=\"dataService.receivedApprovalsTableConfig\"></spa-table>\n    </div>\n  </mat-tab>\n  <mat-tab label=\"Sent\">\n    <div class=\"mt-3\">\n      <spa-table [config]=\"dataService.sentApprovalsTableConfig\"></spa-table>\n    </div>\n  </mat-tab>\n</mat-tab-group>\n", styles: [""], dependencies: [{ kind: "component", type: i5$2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i5$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: TableComponent, selector: "spa-table", inputs: ["data", "tileData", "config", "localMode", "parentDetails", "reload", "activeTab", "inTab", "nestingLevel"], outputs: ["dataLoad", "actionSuccess", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange", "actionResponse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: ApprovalsComponent, isStandalone: false, selector: "spa-approvals", ngImport: i0, template: "<h4>Approvals</h4>\n<hr>\n\n<mat-tab-group>\n  <mat-tab label=\"Received\">\n    <div class=\"mt-3\">\n      <spa-table [config]=\"dataService.receivedApprovalsTableConfig\"></spa-table>\n    </div>\n  </mat-tab>\n  <mat-tab label=\"Sent\">\n    <div class=\"mt-3\">\n      <spa-table [config]=\"dataService.sentApprovalsTableConfig\"></spa-table>\n    </div>\n  </mat-tab>\n</mat-tab-group>\n", styles: [""], dependencies: [{ kind: "component", type: i5$2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i5$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: TableComponent, selector: "spa-table", inputs: ["data", "tileData", "config", "localMode", "parentDetails", "reload", "activeTab", "inTab", "nestingLevel"], outputs: ["dataLoad", "totalChange", "actionSuccess", "refreshClick", "searchClick", "createClick", "actionClick", "inputChange", "actionResponse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ApprovalsComponent, decorators: [{
             type: Component,
@@ -26914,7 +27383,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
 
 class PurchasingModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: PurchasingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.14", ngImport: i0, type: PurchasingModule, declarations: [PurchaseOrdersComponent,
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.14", ngImport: i0, type: PurchasingModule, declarations: [SupplierPurchaseOrdersComponent,
             InventoryReceiptsComponent,
             PurchasingDashboardComponent], imports: [CommonModule,
             SpaAdminModule] }); }
@@ -26925,7 +27394,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
             type: NgModule,
             args: [{
                     declarations: [
-                        PurchaseOrdersComponent,
+                        SupplierPurchaseOrdersComponent,
                         InventoryReceiptsComponent,
                         PurchasingDashboardComponent
                     ],