tin-spa 20.6.0 → 20.6.2

package/fesm2022/tin-spa.mjs

@@ -57,7 +57,7 @@ import * as i12$1 from '@angular/material/table';
 import { MatTableModule, MatTableDataSource } from '@angular/material/table';
 import * as i4$5 from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
-import * as i14$1 from '@angular/material/progress-bar';
+import * as i14$2 from '@angular/material/progress-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import * as i7 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
@@ -74,7 +74,7 @@ import { BaseChartDirective, provideCharts, withDefaultRegisterables } from 'ng2
 import { STEPPER_GLOBAL_OPTIONS } from '@angular/cdk/stepper';
 import imageCompression from 'browser-image-compression';
 import { trigger, transition, style, animate } from '@angular/animations';
-import * as i11$1 from '@angular/cdk/drag-drop';
+import * as i14$1 from '@angular/cdk/drag-drop';
 import { moveItemInArray, transferArrayItem, DragDropModule } from '@angular/cdk/drag-drop';
 import * as i6$2 from 'ngx-doc-viewer';
 import { NgxDocViewerModule } from 'ngx-doc-viewer';
@@ -2262,7 +2262,7 @@ class DataServiceLib {
             ],
             loadAction: { url: 'employees/all/x' },
             formConfig: this.employeeFormConfig,
-            // realTime: true, // Disabled: testing realtime on transactions table only
+            realTime: true,
             entityName: 'Employee' // Changed: Match backend entity name for SignalR broadcasts
         };
         //--------------------------Positions-------------------------
@@ -2299,7 +2299,7 @@ class DataServiceLib {
             ],
             loadAction: { url: 'positions/all/x' },
             formConfig: this.positionFormConfig,
-            // realTime: true, // Disabled: testing realtime on transactions table only
+            realTime: true,
             entityName: 'Position' // Changed: Match backend entity name for SignalR broadcasts
         };
         //--------------------------Departments-------------------------
@@ -2342,7 +2342,7 @@ class DataServiceLib {
             ],
             loadAction: { url: 'departments/all/x' },
             formConfig: this.departmentFormConfig,
-            // realTime: true, // Disabled: testing realtime on transactions table only
+            realTime: true,
             entityName: 'Department' // Changed: Match backend entity name for SignalR broadcasts
         };
         //--------------------------Contact Persons-------------------------
@@ -2444,7 +2444,7 @@ class DataServiceLib {
             ],
             loadAction: { url: 'customers/all/x' },
             formConfig: this.customerFormConfig,
-            // realTime: true, // Disabled: testing realtime on transactions table only — no re-fetch after CUD
+            realTime: true,
             entityName: 'Customer' // Changed: Match backend typeof(Customer).Name for SignalR broadcasts
         };
         //--------------------------Suppliers-------------------------
@@ -3960,7 +3960,7 @@ class AccountingService {
             ],
             loadAction: { url: 'taxrates/all/x' },
             formConfig: this.taxRateFormConfig,
-            // realTime: true, // Disabled: testing realtime on transactions table only
+            realTime: true,
             entityName: 'TaxRate'
         };
         //--------------------------Currencies-------------------------
@@ -4007,7 +4007,7 @@ class AccountingService {
             ],
             loadAction: { url: 'currencies/all/x' },
             formConfig: this.currencyFormConfig,
-            // realTime: true, // Disabled: testing realtime on transactions table only
+            realTime: true,
             entityName: 'Currency'
         };
         //--------------------------Transaction Types-------------------------
@@ -4480,7 +4480,7 @@ class AccountingService {
             ],
             loadAction: { url: 'accounts/all/x' },
             formConfig: this.accountFormConfig,
-            // realTime: true, // Disabled: testing realtime on transactions table only
+            realTime: true,
             entityName: 'Account'
         };
         //--------------------------Financial Reports-------------------------
@@ -4952,7 +4952,9 @@ class LoansService {
             ],
             loadAction: { url: 'loanproducts/all' },
             formConfig: this.loanProductFormConfig,
-            buttons: [this.loanProductCreateButton, this.loanProductEditButton, this.loanProductDeleteButton]
+            buttons: [this.loanProductCreateButton, this.loanProductEditButton, this.loanProductDeleteButton],
+            realTime: true,
+            entityName: 'LoanProduct'
         };
         // ========== LOANS BUTTONS ==========
         this.loanCreateButton = { name: 'create', display: 'New Loan', dialog: true, action: { url: 'loans?action=create', method: 'post' } };
@@ -5161,7 +5163,7 @@ class GeneralService {
             ],
             loadAction: { url: 'categories/all/x' },
             formConfig: this.categoryFormConfig,
-            // realTime: true, // Disabled: testing realtime on transactions table only
+            realTime: true,
             entityName: 'Category'
         };
         //--------------------------SubCategories-------------------------
@@ -5202,7 +5204,7 @@ class GeneralService {
             ],
             loadAction: { url: 'subcategories/all/x' },
             formConfig: this.subCategoryFormConfig,
-            // realTime: true, // Disabled: testing realtime on transactions table only
+            realTime: true,
             entityName: 'SubCategory'
         };
         //--------------------------Brands-------------------------
@@ -5240,7 +5242,7 @@ class GeneralService {
             ],
             loadAction: { url: 'brands/all/x' },
             formConfig: this.brandFormConfig,
-            // realTime: true, // Disabled: testing realtime on transactions table only
+            realTime: true,
             entityName: 'Brand'
         };
         //--------------------------ListItems-------------------------
@@ -5278,7 +5280,7 @@ class GeneralService {
             ],
             loadAction: { url: 'listitems/all/x' },
             formConfig: this.listItemFormConfig,
-            // realTime: true, // Disabled: testing realtime on transactions table only
+            realTime: true,
             entityName: 'ListItem'
         };
     }
@@ -5354,7 +5356,7 @@ class InventoryService {
             ],
             loadAction: { url: 'products/all/x' },
             formConfig: this.productFormConfig,
-            // realTime: true, // Disabled: testing realtime on transactions table only
+            realTime: true,
             entityName: 'Product'
         };
         //--------------------------Product Components (Bundle Configuration)-------------------------
@@ -5451,7 +5453,9 @@ class InventoryService {
                 { name: 'delete', dialog: true, action: { url: 'products?action=delete', method: 'post' } }
             ],
             loadAction: { url: 'products/bundles/x' },
-            formConfig: this.bundleProductFormConfig
+            formConfig: this.bundleProductFormConfig,
+            realTime: true,
+            entityName: 'Product'
         };
         //--------------------------ServiceItems-------------------------
         // ServiceItem form configuration - follows Product pattern
@@ -5498,7 +5502,7 @@ class InventoryService {
             ],
             loadAction: { url: 'serviceitems/all/x' },
             formConfig: this.serviceItemFormConfig,
-            // realTime: true, // Disabled: testing realtime on transactions table only
+            realTime: true,
             entityName: 'ServiceItem'
         };
         //--------------------------Requisitions-------------------------
@@ -5635,7 +5639,7 @@ class InventoryService {
             ],
             loadAction: { url: 'inventoryitems/all/x' },
             formConfig: this.inventoryItemFormConfig,
-            // realTime: true, // Disabled: testing realtime on transactions table only
+            realTime: true,
             entityName: 'InventoryItem'
         };
         //--------------------------Inventory Adjustments-------------------------
@@ -5690,7 +5694,7 @@ class InventoryService {
             ],
             loadAction: { url: 'inventoryadjustments/all/x' },
             formConfig: this.inventoryAdjustmentFormConfig,
-            // realTime: true, // Disabled: testing realtime on transactions table only
+            realTime: true,
             entityName: 'InventoryAdjustment'
         };
         //--------------------------Inventory Returns-------------------------
@@ -10568,6 +10572,8 @@ class GroupsComponent {
         this.snackBar = snackBar;
         this.actionClick = new EventEmitter();
         this.groupedData = [];
+        this.allGroupedData = []; // Changed: Unfiltered groups for search
+        this.filterText = ''; // Changed: Search/filter text for groups and items
         this.highlightedGroup = null; // Changed: Track which group is being hovered during drag
     }
     ngOnInit() {
@@ -10601,9 +10607,31 @@ class GroupsComponent {
         }));
         allGroups.sort((a, b) => a.order - b.order);
         // Apply frontend showEmptyGroups filter
-        this.groupedData = gc.showEmptyGroups !== false
+        this.allGroupedData = gc.showEmptyGroups !== false
             ? allGroups
             : allGroups.filter(g => g.items.length > 0);
+        this.applyFilter(); // Changed: Apply current filter to new data
+    }
+    // Changed: Filter groups by group name or item text
+    applyFilter() {
+        if (!this.filterText.trim()) {
+            this.groupedData = this.allGroupedData;
+            return;
+        }
+        const term = this.filterText.toLowerCase().trim();
+        const textField = this.config.groupConfig?.itemTextField ?? 'name';
+        this.groupedData = this.allGroupedData
+            .map(group => {
+            const groupNameMatch = group.displayName.toLowerCase().includes(term);
+            const matchingItems = group.items.filter(item => (item[textField] ?? '').toString().toLowerCase().includes(term));
+            // Show group if name matches (with all items) or if any items match
+            if (groupNameMatch)
+                return group;
+            if (matchingItems.length > 0)
+                return { ...group, items: matchingItems };
+            return null;
+        })
+            .filter(g => g !== null);
     }
     // Fallback: evaluate groupIcons conditions against group data when backend doesn't provide icon
     getGroupIconFromConfig(group) {
@@ -10680,6 +10708,17 @@ class GroupsComponent {
         }
         return null;
     }
+    // Changed: Get tooltip for primary item icon from matched itemIcons config
+    getItemIconTip(item) {
+        const groupConfig = this.config.groupConfig;
+        if (groupConfig.itemIcons?.length > 0) {
+            const matchedIcon = groupConfig.itemIcons.find(icon => this.conditionService.testIconCondition(icon, item));
+            return matchedIcon ? this.getIconTooltip(matchedIcon, item) : '';
+        }
+        if (groupConfig.itemIcon)
+            return this.getIconTooltip(groupConfig.itemIcon, item);
+        return '';
+    }
     getItemIconColor(item) {
         const groupConfig = this.config.groupConfig;
         if (groupConfig.itemIcons && groupConfig.itemIcons.length > 0) {
@@ -10763,11 +10802,11 @@ class GroupsComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: GroupsComponent, deps: [{ token: ConditionService }, { token: ButtonService }, { token: DataServiceLib }, { token: i2$1.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: GroupsComponent, isStandalone: false, selector: "spa-groups", inputs: { config: "config", dataSource: "dataSource", displayedButtons: "displayedButtons" }, outputs: { actionClick: "actionClick" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"groups-container\" cdkDropListGroup>\r\n\r\n  <mat-card *ngFor=\"let group of groupedData\" class=\"group-card\">\r\n\r\n    <div class=\"group-header\">\r\n      <div class=\"header-left\">\r\n        <mat-icon *ngIf=\"group.icon\" [style.color]=\"group.color\" class=\"group-icon\">{{group.icon}}</mat-icon>\r\n        <label class=\"group-title\">{{group.displayName}}</label>\r\n        <label *ngIf=\"config.groupConfig.showGroupCount !== false\" class=\"group-count\">({{group.items.length}})</label>\r\n      </div>\r\n\r\n      <div class=\"header-right\">\r\n        <button\r\n          *ngFor=\"let button of getVisibleHeaderButtons(group)\"\r\n          mat-icon-button\r\n          [matTooltip]=\"getHeaderButtonTooltip(button)\"\r\n          matTooltipPosition=\"above\"\r\n          [style.color]=\"getHeaderButtonColor(button, group)\"\r\n          [disabled]=\"isHeaderButtonDisabled(button, group)\"\r\n          (click)=\"headerButtonClicked(button, group)\">\r\n          <mat-icon>{{getHeaderButtonIcon(button)}}</mat-icon>\r\n        </button>\r\n      </div>\r\n    </div>\r\n\r\n    <hr class=\"group-divider\" />\r\n\r\n    <!-- Empty state: show when no items and drag is disabled -->\r\n    <div *ngIf=\"group.items.length === 0 && !config.groupConfig.dragEnabled\" class=\"empty-state\">\r\n      <label>{{config.groupConfig.emptyGroupMessage ?? 'Empty'}}</label>\r\n    </div>\r\n\r\n    <!-- Changed: Replaced mat-chip-set with flex container of mat-stroked-button for cleaner button style -->\r\n    <div\r\n      *ngIf=\"group.items.length > 0 || config.groupConfig.dragEnabled\"\r\n      cdkDropList\r\n      [cdkDropListData]=\"group.items\"\r\n      [cdkDropListDisabled]=\"!config.groupConfig.dragEnabled\"\r\n      (cdkDropListDropped)=\"onDrop($event)\"\r\n      (cdkDropListEntered)=\"onDropListEntered($event)\"\r\n      (cdkDropListExited)=\"onDropListExited($event)\"\r\n      [class.drop-highlight]=\"group === highlightedGroup\"\r\n      class=\"drop-list items-container\">\r\n\r\n      <!-- Empty state inside drop list when drag is enabled -->\r\n      <div *ngIf=\"group.items.length === 0\" class=\"empty-state drop-empty\">\r\n        <label>{{config.groupConfig.emptyGroupMessage ?? 'Empty'}}</label>\r\n      </div>\r\n\r\n      <button\r\n        mat-stroked-button\r\n        *ngFor=\"let item of group.items\"\r\n        cdkDrag [cdkDragData]=\"item\"\r\n        [cdkDragDisabled]=\"!config.groupConfig.dragEnabled\"\r\n        [matMenuTriggerFor]=\"config.groupConfig.contextMenuEnabled !== false ? itemMenu : null\"\r\n        [matMenuTriggerData]=\"{item: item, group: group}\"\r\n        class=\"item-button\">\r\n\r\n        <mat-icon\r\n          *ngIf=\"getItemIcon(item)\"\r\n          [style.color]=\"getItemIconColor(item)\"\r\n          class=\"item-icon\">\r\n          {{getItemIcon(item)}}\r\n        </mat-icon>\r\n\r\n        {{getItemText(item)}}\r\n\r\n        <ng-container *ngFor=\"let additionalIcon of getVisibleAdditionalIcons(item)\">\r\n          <mat-icon\r\n            [style.color]=\"additionalIcon.color\"\r\n            [matTooltip]=\"getIconTooltip(additionalIcon, item)\"\r\n            matTooltipPosition=\"above\"\r\n            class=\"item-additional-icon\">\r\n            {{additionalIcon.name}}\r\n          </mat-icon>\r\n        </ng-container>\r\n\r\n      </button>\r\n    </div>\r\n\r\n  </mat-card>\r\n\r\n</div>\r\n\r\n<mat-menu #itemMenu=\"matMenu\">\r\n  <ng-template matMenuContent let-item=\"item\" let-group=\"group\">\r\n    <button\r\n      *ngFor=\"let button of getVisibleButtons(item)\"\r\n      mat-menu-item\r\n      [disabled]=\"isButtonDisabled(button, item)\"\r\n      (click)=\"itemActionClicked(button.name, item, group)\">\r\n      <mat-icon [style.color]=\"getButtonIconColor(button, item)\">{{getButtonIcon(button)}}</mat-icon>\r\n      <span>{{button.display ?? button.tip ?? (button.name | titlecase)}}</span>\r\n    </button>\r\n  </ng-template>\r\n</mat-menu>\r\n", styles: [".groups-container{display:flex;flex-direction:column;gap:20px;padding-right:10px;margin-left:0}.group-card{width:100%;margin-bottom:0;padding:16px}.group-header{display:flex;justify-content:space-between;align-items:center;padding:5px 0}.header-left{display:flex;align-items:center;gap:5px}.header-right{display:flex;align-items:center;gap:4px}.group-icon{padding-top:5px;margin-right:5px;font-size:24px;width:24px;height:24px}.group-title{font-size:24px;font-weight:300}.group-count{font-size:12px;font-weight:300;margin-left:5px}.group-divider{margin-top:5px;margin-bottom:10px}.empty-state{display:flex;justify-content:center;align-items:center;padding:10px}.empty-state label{color:#757575;font-style:italic}.items-container{display:flex;flex-wrap:wrap;gap:10px;padding:8px 0;align-items:center}.item-button{cursor:pointer;font-weight:400;letter-spacing:.01em;transition:box-shadow .2s ease,background-color .2s ease}.item-button:hover{box-shadow:0 1px 4px #00000026;background-color:#00000005}.item-icon{font-size:18px;width:18px;height:18px;margin-right:4px;vertical-align:middle}.item-additional-icon{font-size:16px;width:16px;height:16px;margin-left:6px;vertical-align:middle;opacity:.85}button[mat-icon-button]{width:32px;height:32px}button[mat-icon-button] mat-icon{font-size:18px;margin-top:-3px}.drop-list{min-height:40px}.drop-empty{padding:5px 10px}.cdk-drag-preview{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;opacity:.9;border-radius:4px}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.drop-highlight{border:2px dashed #90caf9;border-radius:8px;background:#90caf90d}.cdk-drop-list-dragging .item-button:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$4.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i4$4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i4.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.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i11$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i11$1.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i11$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: GroupsComponent, isStandalone: false, selector: "spa-groups", inputs: { config: "config", dataSource: "dataSource", displayedButtons: "displayedButtons" }, outputs: { actionClick: "actionClick" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"groups-filter\" *ngIf=\"config?.groupConfig?.filterEnabled !== false\">\r\n  <mat-form-field appearance=\"outline\" class=\"filter-field\">\r\n    <mat-icon matPrefix>search</mat-icon>\r\n    <input matInput placeholder=\"Filter\" [(ngModel)]=\"filterText\" (ngModelChange)=\"applyFilter()\">\r\n    <button *ngIf=\"filterText\" mat-icon-button matSuffix (click)=\"filterText = ''; applyFilter()\">\r\n      <mat-icon>close</mat-icon>\r\n    </button>\r\n  </mat-form-field>\r\n</div>\r\n\r\n<div class=\"groups-container\" cdkDropListGroup>\r\n\r\n  <mat-card *ngFor=\"let group of groupedData\" class=\"group-card\">\r\n\r\n    <div class=\"group-header\">\r\n      <div class=\"header-left\">\r\n        <mat-icon *ngIf=\"group.icon\" [style.color]=\"group.color\" class=\"group-icon\">{{group.icon}}</mat-icon>\r\n        <label class=\"group-title\">{{group.displayName}}</label>\r\n        <label *ngIf=\"config.groupConfig.showGroupCount !== false\" class=\"group-count\">({{group.items.length}})</label>\r\n      </div>\r\n\r\n      <div class=\"header-right\">\r\n        <button\r\n          *ngFor=\"let button of getVisibleHeaderButtons(group)\"\r\n          mat-icon-button\r\n          [matTooltip]=\"getHeaderButtonTooltip(button)\"\r\n          matTooltipPosition=\"above\"\r\n          [style.color]=\"getHeaderButtonColor(button, group)\"\r\n          [disabled]=\"isHeaderButtonDisabled(button, group)\"\r\n          (click)=\"headerButtonClicked(button, group)\">\r\n          <mat-icon>{{getHeaderButtonIcon(button)}}</mat-icon>\r\n        </button>\r\n      </div>\r\n    </div>\r\n\r\n    <hr class=\"group-divider\" />\r\n\r\n    <!-- Empty state: show when no items and drag is disabled -->\r\n    <div *ngIf=\"group.items.length === 0 && !config.groupConfig.dragEnabled\" class=\"empty-state\">\r\n      <label>{{config.groupConfig.emptyGroupMessage ?? 'Empty'}}</label>\r\n    </div>\r\n\r\n    <!-- Changed: Replaced mat-chip-set with flex container of mat-stroked-button for cleaner button style -->\r\n    <div\r\n      *ngIf=\"group.items.length > 0 || config.groupConfig.dragEnabled\"\r\n      cdkDropList\r\n      [cdkDropListData]=\"group.items\"\r\n      [cdkDropListDisabled]=\"!config.groupConfig.dragEnabled\"\r\n      (cdkDropListDropped)=\"onDrop($event)\"\r\n      (cdkDropListEntered)=\"onDropListEntered($event)\"\r\n      (cdkDropListExited)=\"onDropListExited($event)\"\r\n      [class.drop-highlight]=\"group === highlightedGroup\"\r\n      class=\"drop-list items-container\">\r\n\r\n      <!-- Empty state inside drop list when drag is enabled -->\r\n      <div *ngIf=\"group.items.length === 0\" class=\"empty-state drop-empty\">\r\n        <label>{{config.groupConfig.emptyGroupMessage ?? 'Empty'}}</label>\r\n      </div>\r\n\r\n      <button\r\n        mat-stroked-button\r\n        *ngFor=\"let item of group.items\"\r\n        cdkDrag [cdkDragData]=\"item\"\r\n        [cdkDragDisabled]=\"!config.groupConfig.dragEnabled\"\r\n        [matMenuTriggerFor]=\"config.groupConfig.contextMenuEnabled !== false ? itemMenu : null\"\r\n        [matMenuTriggerData]=\"{item: item, group: group}\"\r\n        class=\"item-button\">\r\n\r\n        <mat-icon\r\n          *ngIf=\"getItemIcon(item)\"\r\n          [style.color]=\"getItemIconColor(item)\"\r\n          [matTooltip]=\"getItemIconTip(item)\"\r\n          matTooltipPosition=\"above\"\r\n          class=\"item-icon\">\r\n          {{getItemIcon(item)}}\r\n        </mat-icon>\r\n\r\n        {{getItemText(item)}}\r\n\r\n        <ng-container *ngFor=\"let additionalIcon of getVisibleAdditionalIcons(item)\">\r\n          <mat-icon\r\n            [style.color]=\"additionalIcon.color\"\r\n            [matTooltip]=\"getIconTooltip(additionalIcon, item)\"\r\n            matTooltipPosition=\"above\"\r\n            class=\"item-additional-icon\">\r\n            {{additionalIcon.name}}\r\n          </mat-icon>\r\n        </ng-container>\r\n\r\n      </button>\r\n    </div>\r\n\r\n  </mat-card>\r\n\r\n</div>\r\n\r\n<mat-menu #itemMenu=\"matMenu\">\r\n  <ng-template matMenuContent let-item=\"item\" let-group=\"group\">\r\n    <button\r\n      *ngFor=\"let button of getVisibleButtons(item)\"\r\n      mat-menu-item\r\n      [disabled]=\"isButtonDisabled(button, item)\"\r\n      (click)=\"itemActionClicked(button.name, item, group)\">\r\n      <mat-icon [style.color]=\"getButtonIconColor(button, item)\">{{getButtonIcon(button)}}</mat-icon>\r\n      <span>{{button.display ?? button.tip ?? (button.name | titlecase)}}</span>\r\n    </button>\r\n  </ng-template>\r\n</mat-menu>\r\n", styles: [".groups-filter{display:flex;justify-content:flex-end;margin-bottom:8px;padding-right:10px}.filter-field{width:300px;font-size:13px}.filter-field ::ng-deep .mat-mdc-form-field-infix{padding-top:8px!important;padding-bottom:8px!important;min-height:36px}.groups-container{display:flex;flex-direction:column;gap:20px;padding-right:10px;margin-left:0}.group-card{width:100%;margin-bottom:0;padding:16px}.group-header{display:flex;justify-content:space-between;align-items:center;padding:5px 0}.header-left{display:flex;align-items:center;gap:5px}.header-right{display:flex;align-items:center;gap:4px}.group-icon{padding-top:5px;margin-right:5px;font-size:24px;width:24px;height:24px}.group-title{font-size:24px;font-weight:300}.group-count{font-size:12px;font-weight:300;margin-left:5px}.group-divider{margin-top:5px;margin-bottom:10px}.empty-state{display:flex;justify-content:center;align-items:center;padding:10px}.empty-state label{color:#757575;font-style:italic}.items-container{display:flex;flex-wrap:wrap;gap:10px;padding:8px 0;align-items:center}.item-button{cursor:pointer;font-weight:400;letter-spacing:.01em;transition:box-shadow .2s ease,background-color .2s ease}.item-button:hover{box-shadow:0 1px 4px #00000026;background-color:#00000005}.item-icon{font-size:18px;width:18px;height:18px;margin-right:4px;vertical-align:middle}.item-additional-icon{font-size:16px;width:16px;height:16px;margin-left:6px;vertical-align:middle;opacity:.85}button[mat-icon-button]{width:32px;height:32px}button[mat-icon-button] mat-icon{font-size:18px;margin-top:-3px}.drop-list{min-height:40px}.drop-empty{padding:5px 10px}.cdk-drag-preview{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;opacity:.9;border-radius:4px}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.drop-highlight{border:2px dashed #90caf9;border-radius:8px;background:#90caf90d}.cdk-drop-list-dragging .item-button:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$4.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i4$4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i4.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.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i6$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i14$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i14$1.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i14$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: GroupsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spa-groups', standalone: false, template: "<div class=\"groups-container\" cdkDropListGroup>\r\n\r\n  <mat-card *ngFor=\"let group of groupedData\" class=\"group-card\">\r\n\r\n    <div class=\"group-header\">\r\n      <div class=\"header-left\">\r\n        <mat-icon *ngIf=\"group.icon\" [style.color]=\"group.color\" class=\"group-icon\">{{group.icon}}</mat-icon>\r\n        <label class=\"group-title\">{{group.displayName}}</label>\r\n        <label *ngIf=\"config.groupConfig.showGroupCount !== false\" class=\"group-count\">({{group.items.length}})</label>\r\n      </div>\r\n\r\n      <div class=\"header-right\">\r\n        <button\r\n          *ngFor=\"let button of getVisibleHeaderButtons(group)\"\r\n          mat-icon-button\r\n          [matTooltip]=\"getHeaderButtonTooltip(button)\"\r\n          matTooltipPosition=\"above\"\r\n          [style.color]=\"getHeaderButtonColor(button, group)\"\r\n          [disabled]=\"isHeaderButtonDisabled(button, group)\"\r\n          (click)=\"headerButtonClicked(button, group)\">\r\n          <mat-icon>{{getHeaderButtonIcon(button)}}</mat-icon>\r\n        </button>\r\n      </div>\r\n    </div>\r\n\r\n    <hr class=\"group-divider\" />\r\n\r\n    <!-- Empty state: show when no items and drag is disabled -->\r\n    <div *ngIf=\"group.items.length === 0 && !config.groupConfig.dragEnabled\" class=\"empty-state\">\r\n      <label>{{config.groupConfig.emptyGroupMessage ?? 'Empty'}}</label>\r\n    </div>\r\n\r\n    <!-- Changed: Replaced mat-chip-set with flex container of mat-stroked-button for cleaner button style -->\r\n    <div\r\n      *ngIf=\"group.items.length > 0 || config.groupConfig.dragEnabled\"\r\n      cdkDropList\r\n      [cdkDropListData]=\"group.items\"\r\n      [cdkDropListDisabled]=\"!config.groupConfig.dragEnabled\"\r\n      (cdkDropListDropped)=\"onDrop($event)\"\r\n      (cdkDropListEntered)=\"onDropListEntered($event)\"\r\n      (cdkDropListExited)=\"onDropListExited($event)\"\r\n      [class.drop-highlight]=\"group === highlightedGroup\"\r\n      class=\"drop-list items-container\">\r\n\r\n      <!-- Empty state inside drop list when drag is enabled -->\r\n      <div *ngIf=\"group.items.length === 0\" class=\"empty-state drop-empty\">\r\n        <label>{{config.groupConfig.emptyGroupMessage ?? 'Empty'}}</label>\r\n      </div>\r\n\r\n      <button\r\n        mat-stroked-button\r\n        *ngFor=\"let item of group.items\"\r\n        cdkDrag [cdkDragData]=\"item\"\r\n        [cdkDragDisabled]=\"!config.groupConfig.dragEnabled\"\r\n        [matMenuTriggerFor]=\"config.groupConfig.contextMenuEnabled !== false ? itemMenu : null\"\r\n        [matMenuTriggerData]=\"{item: item, group: group}\"\r\n        class=\"item-button\">\r\n\r\n        <mat-icon\r\n          *ngIf=\"getItemIcon(item)\"\r\n          [style.color]=\"getItemIconColor(item)\"\r\n          class=\"item-icon\">\r\n          {{getItemIcon(item)}}\r\n        </mat-icon>\r\n\r\n        {{getItemText(item)}}\r\n\r\n        <ng-container *ngFor=\"let additionalIcon of getVisibleAdditionalIcons(item)\">\r\n          <mat-icon\r\n            [style.color]=\"additionalIcon.color\"\r\n            [matTooltip]=\"getIconTooltip(additionalIcon, item)\"\r\n            matTooltipPosition=\"above\"\r\n            class=\"item-additional-icon\">\r\n            {{additionalIcon.name}}\r\n          </mat-icon>\r\n        </ng-container>\r\n\r\n      </button>\r\n    </div>\r\n\r\n  </mat-card>\r\n\r\n</div>\r\n\r\n<mat-menu #itemMenu=\"matMenu\">\r\n  <ng-template matMenuContent let-item=\"item\" let-group=\"group\">\r\n    <button\r\n      *ngFor=\"let button of getVisibleButtons(item)\"\r\n      mat-menu-item\r\n      [disabled]=\"isButtonDisabled(button, item)\"\r\n      (click)=\"itemActionClicked(button.name, item, group)\">\r\n      <mat-icon [style.color]=\"getButtonIconColor(button, item)\">{{getButtonIcon(button)}}</mat-icon>\r\n      <span>{{button.display ?? button.tip ?? (button.name | titlecase)}}</span>\r\n    </button>\r\n  </ng-template>\r\n</mat-menu>\r\n", styles: [".groups-container{display:flex;flex-direction:column;gap:20px;padding-right:10px;margin-left:0}.group-card{width:100%;margin-bottom:0;padding:16px}.group-header{display:flex;justify-content:space-between;align-items:center;padding:5px 0}.header-left{display:flex;align-items:center;gap:5px}.header-right{display:flex;align-items:center;gap:4px}.group-icon{padding-top:5px;margin-right:5px;font-size:24px;width:24px;height:24px}.group-title{font-size:24px;font-weight:300}.group-count{font-size:12px;font-weight:300;margin-left:5px}.group-divider{margin-top:5px;margin-bottom:10px}.empty-state{display:flex;justify-content:center;align-items:center;padding:10px}.empty-state label{color:#757575;font-style:italic}.items-container{display:flex;flex-wrap:wrap;gap:10px;padding:8px 0;align-items:center}.item-button{cursor:pointer;font-weight:400;letter-spacing:.01em;transition:box-shadow .2s ease,background-color .2s ease}.item-button:hover{box-shadow:0 1px 4px #00000026;background-color:#00000005}.item-icon{font-size:18px;width:18px;height:18px;margin-right:4px;vertical-align:middle}.item-additional-icon{font-size:16px;width:16px;height:16px;margin-left:6px;vertical-align:middle;opacity:.85}button[mat-icon-button]{width:32px;height:32px}button[mat-icon-button] mat-icon{font-size:18px;margin-top:-3px}.drop-list{min-height:40px}.drop-empty{padding:5px 10px}.cdk-drag-preview{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;opacity:.9;border-radius:4px}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.drop-highlight{border:2px dashed #90caf9;border-radius:8px;background:#90caf90d}.cdk-drop-list-dragging .item-button:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
+            args: [{ selector: 'spa-groups', standalone: false, template: "<div class=\"groups-filter\" *ngIf=\"config?.groupConfig?.filterEnabled !== false\">\r\n  <mat-form-field appearance=\"outline\" class=\"filter-field\">\r\n    <mat-icon matPrefix>search</mat-icon>\r\n    <input matInput placeholder=\"Filter\" [(ngModel)]=\"filterText\" (ngModelChange)=\"applyFilter()\">\r\n    <button *ngIf=\"filterText\" mat-icon-button matSuffix (click)=\"filterText = ''; applyFilter()\">\r\n      <mat-icon>close</mat-icon>\r\n    </button>\r\n  </mat-form-field>\r\n</div>\r\n\r\n<div class=\"groups-container\" cdkDropListGroup>\r\n\r\n  <mat-card *ngFor=\"let group of groupedData\" class=\"group-card\">\r\n\r\n    <div class=\"group-header\">\r\n      <div class=\"header-left\">\r\n        <mat-icon *ngIf=\"group.icon\" [style.color]=\"group.color\" class=\"group-icon\">{{group.icon}}</mat-icon>\r\n        <label class=\"group-title\">{{group.displayName}}</label>\r\n        <label *ngIf=\"config.groupConfig.showGroupCount !== false\" class=\"group-count\">({{group.items.length}})</label>\r\n      </div>\r\n\r\n      <div class=\"header-right\">\r\n        <button\r\n          *ngFor=\"let button of getVisibleHeaderButtons(group)\"\r\n          mat-icon-button\r\n          [matTooltip]=\"getHeaderButtonTooltip(button)\"\r\n          matTooltipPosition=\"above\"\r\n          [style.color]=\"getHeaderButtonColor(button, group)\"\r\n          [disabled]=\"isHeaderButtonDisabled(button, group)\"\r\n          (click)=\"headerButtonClicked(button, group)\">\r\n          <mat-icon>{{getHeaderButtonIcon(button)}}</mat-icon>\r\n        </button>\r\n      </div>\r\n    </div>\r\n\r\n    <hr class=\"group-divider\" />\r\n\r\n    <!-- Empty state: show when no items and drag is disabled -->\r\n    <div *ngIf=\"group.items.length === 0 && !config.groupConfig.dragEnabled\" class=\"empty-state\">\r\n      <label>{{config.groupConfig.emptyGroupMessage ?? 'Empty'}}</label>\r\n    </div>\r\n\r\n    <!-- Changed: Replaced mat-chip-set with flex container of mat-stroked-button for cleaner button style -->\r\n    <div\r\n      *ngIf=\"group.items.length > 0 || config.groupConfig.dragEnabled\"\r\n      cdkDropList\r\n      [cdkDropListData]=\"group.items\"\r\n      [cdkDropListDisabled]=\"!config.groupConfig.dragEnabled\"\r\n      (cdkDropListDropped)=\"onDrop($event)\"\r\n      (cdkDropListEntered)=\"onDropListEntered($event)\"\r\n      (cdkDropListExited)=\"onDropListExited($event)\"\r\n      [class.drop-highlight]=\"group === highlightedGroup\"\r\n      class=\"drop-list items-container\">\r\n\r\n      <!-- Empty state inside drop list when drag is enabled -->\r\n      <div *ngIf=\"group.items.length === 0\" class=\"empty-state drop-empty\">\r\n        <label>{{config.groupConfig.emptyGroupMessage ?? 'Empty'}}</label>\r\n      </div>\r\n\r\n      <button\r\n        mat-stroked-button\r\n        *ngFor=\"let item of group.items\"\r\n        cdkDrag [cdkDragData]=\"item\"\r\n        [cdkDragDisabled]=\"!config.groupConfig.dragEnabled\"\r\n        [matMenuTriggerFor]=\"config.groupConfig.contextMenuEnabled !== false ? itemMenu : null\"\r\n        [matMenuTriggerData]=\"{item: item, group: group}\"\r\n        class=\"item-button\">\r\n\r\n        <mat-icon\r\n          *ngIf=\"getItemIcon(item)\"\r\n          [style.color]=\"getItemIconColor(item)\"\r\n          [matTooltip]=\"getItemIconTip(item)\"\r\n          matTooltipPosition=\"above\"\r\n          class=\"item-icon\">\r\n          {{getItemIcon(item)}}\r\n        </mat-icon>\r\n\r\n        {{getItemText(item)}}\r\n\r\n        <ng-container *ngFor=\"let additionalIcon of getVisibleAdditionalIcons(item)\">\r\n          <mat-icon\r\n            [style.color]=\"additionalIcon.color\"\r\n            [matTooltip]=\"getIconTooltip(additionalIcon, item)\"\r\n            matTooltipPosition=\"above\"\r\n            class=\"item-additional-icon\">\r\n            {{additionalIcon.name}}\r\n          </mat-icon>\r\n        </ng-container>\r\n\r\n      </button>\r\n    </div>\r\n\r\n  </mat-card>\r\n\r\n</div>\r\n\r\n<mat-menu #itemMenu=\"matMenu\">\r\n  <ng-template matMenuContent let-item=\"item\" let-group=\"group\">\r\n    <button\r\n      *ngFor=\"let button of getVisibleButtons(item)\"\r\n      mat-menu-item\r\n      [disabled]=\"isButtonDisabled(button, item)\"\r\n      (click)=\"itemActionClicked(button.name, item, group)\">\r\n      <mat-icon [style.color]=\"getButtonIconColor(button, item)\">{{getButtonIcon(button)}}</mat-icon>\r\n      <span>{{button.display ?? button.tip ?? (button.name | titlecase)}}</span>\r\n    </button>\r\n  </ng-template>\r\n</mat-menu>\r\n", styles: [".groups-filter{display:flex;justify-content:flex-end;margin-bottom:8px;padding-right:10px}.filter-field{width:300px;font-size:13px}.filter-field ::ng-deep .mat-mdc-form-field-infix{padding-top:8px!important;padding-bottom:8px!important;min-height:36px}.groups-container{display:flex;flex-direction:column;gap:20px;padding-right:10px;margin-left:0}.group-card{width:100%;margin-bottom:0;padding:16px}.group-header{display:flex;justify-content:space-between;align-items:center;padding:5px 0}.header-left{display:flex;align-items:center;gap:5px}.header-right{display:flex;align-items:center;gap:4px}.group-icon{padding-top:5px;margin-right:5px;font-size:24px;width:24px;height:24px}.group-title{font-size:24px;font-weight:300}.group-count{font-size:12px;font-weight:300;margin-left:5px}.group-divider{margin-top:5px;margin-bottom:10px}.empty-state{display:flex;justify-content:center;align-items:center;padding:10px}.empty-state label{color:#757575;font-style:italic}.items-container{display:flex;flex-wrap:wrap;gap:10px;padding:8px 0;align-items:center}.item-button{cursor:pointer;font-weight:400;letter-spacing:.01em;transition:box-shadow .2s ease,background-color .2s ease}.item-button:hover{box-shadow:0 1px 4px #00000026;background-color:#00000005}.item-icon{font-size:18px;width:18px;height:18px;margin-right:4px;vertical-align:middle}.item-additional-icon{font-size:16px;width:16px;height:16px;margin-left:6px;vertical-align:middle;opacity:.85}button[mat-icon-button]{width:32px;height:32px}button[mat-icon-button] mat-icon{font-size:18px;margin-top:-3px}.drop-list{min-height:40px}.drop-empty{padding:5px 10px}.cdk-drag-preview{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;opacity:.9;border-radius:4px}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.drop-highlight{border:2px dashed #90caf9;border-radius:8px;background:#90caf90d}.cdk-drop-list-dragging .item-button:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
         }], ctorParameters: () => [{ type: ConditionService }, { type: ButtonService }, { type: DataServiceLib }, { type: i2$1.MatSnackBar }], propDecorators: { config: [{
                 type: Input
             }], dataSource: [{
@@ -11033,11 +11072,11 @@ class TableComponent {
                 };
             }
         }
-        // Changed: Apply rowDataMap if defined on the button — maps fields before passing to dialog
+        // Changed: Apply rowDataMap — string for simple field mapping, function for computed values
         if (actionButton?.rowDataMap) {
             const mapped = { ...actionData };
-            for (const [targetField, sourceField] of Object.entries(actionButton.rowDataMap)) {
-                mapped[targetField] = actionData[sourceField];
+            for (const [targetField, sourceOrFn] of Object.entries(actionButton.rowDataMap)) {
+                mapped[targetField] = typeof sourceOrFn === 'function' ? sourceOrFn(actionData) : actionData[sourceOrFn];
             }
             actionData = mapped;
         }
@@ -11210,9 +11249,9 @@ class TableComponent {
             return "mat-elevation-z5";
         }
     }
-    // Changed: Real-time tables rely entirely on SignalR — no fallback full refresh
+    // Changed: Real-time tables fall back to full refresh when SignalR is disconnected
     realTimeRefreshOrFallback() {
-        if (!this.config.realTime) {
+        if (!this.config.realTime || !this.isSignalRConnected) {
             this.refreshClicked();
         }
     }
@@ -11923,6 +11962,13 @@ class FormComponent {
         this.initializeSectionStates();
         this.applyValueCalculations();
     }
+    // Changed: Resolve {placeholder} in loadAction URLs from form data — e.g. 'pigs/list/bypen-{fromPenID}' → 'pigs/list/bypen-5'
+    resolveLoadAction(field) {
+        if (!field.loadAction?.url || !field.loadAction.url.includes('{'))
+            return field.loadAction;
+        const resolvedUrl = field.loadAction.url.replace(/\{(\w+)\}/g, (_, key) => this.data?.[key] ?? '');
+        return { ...field.loadAction, url: resolvedUrl };
+    }
     initializeCompositeFields() {
         this.fields.forEach(field => {
             if (field.type === 'composite' && field.subfields) {
@@ -12126,11 +12172,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 }], ngImport: i0, template: "\r\n\r\n\r\n<div class=\"tin-form-container\" >\r\n  <div [ngClass]=\"[multiColumn ? 'tin-grid' : 'tin-col', config.notesConfig ? 'width-75' : 'width-100']\" class=\"form-main-content\">\r\n\r\n    <div *ngIf=\"!hasAccess\" class=\"tin-center\">\r\n      <p><em>Access Restricted</em></p>\r\n    </div>\r\n  \r\n    <div [ngClass]=\"field.span || field.type =='section' || field.type =='file' || field.type =='file-view'  ? 'span-col' : ''\" *ngFor=\"let field of getVisibleFields()\">\r\n  \r\n      <ng-container>\r\n  \r\n        <ng-container [ngSwitch]=\"field.type\" class=\"highlight\">\r\n  \r\n          <div *ngSwitchCase=\"'section'\" class=\"title d-flex align-items-center\" (click)=\"toggleSection(field)\" style=\"cursor: pointer;\">\r\n            <label style=\"font-size: larger;margin-right: 10px;\">{{field.alias ?? field.name | camelToWords}}</label>\r\n            <mat-icon *ngIf=\"field.infoMessage\" (click)=\"onInfoClick($event, field.infoMessage)\" style=\"color: steelblue; font-size: 14px;\">info</mat-icon>\r\n            <!-- <button  mat-icon-button class=\"info-icon-button\"  matTooltip=\"Info\" matTooltipPosition=\"above\">\r\n  \r\n            </button> -->\r\n            <mat-icon *ngIf=\"hasSectionFields(field.name)\">{{shouldSectionCollapse(field) ? 'expand_more' : 'expand_less'}}</mat-icon>\r\n          </div>\r\n  \r\n          <ng-container *ngSwitchCase=\"'file'\">\r\n            <div class=\"mt-1 mb-2\" *ngIf=\"config.mode !='view'\">\r\n              <spa-attach [message]=\"field.alias ?? 'Drag and Drop files here'\" [(files)]=\"files\" [fileOptions]=\"field.fileOptions\"></spa-attach>\r\n            </div>\r\n          </ng-container>\r\n  \r\n          <ng-container *ngSwitchCase=\"'file-view'\">\r\n            <div class=\"mt-1 mb-2\" *ngIf=\"config.mode && config.mode !='create'\">\r\n              <spa-viewer [fileAction]=\"field.loadAction\" [path]=\"field.path\" [folderName]=\"data[field.keyField]\" ></spa-viewer>\r\n            </div>\r\n          </ng-container>\r\n  \r\n          <spa-html *ngSwitchCase=\"'html'\" [display]=\"field.alias | camelToWords\" [value]=\"data[field.name]\" [maxHeight]=\"field.maxHeight\"></spa-html>\r\n  \r\n          <label *ngSwitchCase=\"'blank'\"></label>\r\n  \r\n          <label *ngSwitchCase=\"'string'\" [ngStyle]=\"{'font-size':field.size ?? '14px'}\" >{{data[field.name] ?? field.alias ?? field.name}} {{field.suffix ?? ''}}</label>\r\n  \r\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>\r\n  \r\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>\r\n  \r\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>\r\n  \r\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>\r\n  \r\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>\r\n  \r\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>\r\n  \r\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>\r\n  \r\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>\r\n  \r\n  \r\n          <ng-container *ngSwitchCase=\"'select'\">\r\n            <ng-container *ngTemplateOutlet=\"dynamicSelectTemplate; context: {\r\n                    $implicit: field,\r\n                    field: field,\r\n                    data: data,\r\n                    testReadOnly: testReadOnly.bind(this),\r\n                    testRequired: testRequired.bind(this),\r\n                    selectChanged: selectChanged.bind(this)\r\n                  }\">\r\n            </ng-container>\r\n          </ng-container>\r\n  \r\n  \r\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]=\"field.loadAction\" [selectAll]=\"field.selectAll\">\r\n          </spa-select-multi>\r\n  \r\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]=\"field.loadAction\"></spa-text-multi>\r\n  \r\n  \r\n  \r\n          <ng-container *ngSwitchCase=\"'composite'\">\r\n            <div class=\"composite-field-container\">\r\n              <div class=\"composite-field-group\">\r\n                <ng-container *ngFor=\"let subfield of getVisibleSubfields(field)\">\r\n                  <ng-container [ngSwitch]=\"subfield.type\">\r\n  \r\n                    <label *ngSwitchCase=\"'string'\" [ngStyle]=\"{'font-size':field.size ?? '14px'}\" >{{data[field.name] ?? field.alias ?? field.name}} {{field.suffix ?? ''}}</label>\r\n                    \r\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>\r\n  \r\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>\r\n  \r\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>\r\n  \r\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>\r\n  \r\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>\r\n  \r\n                    <ng-container *ngSwitchCase=\"'select'\">\r\n                      <ng-container *ngTemplateOutlet=\"dynamicSelectTemplate; context: {\r\n                                      $implicit: field,\r\n                                      field: field,\r\n                                      data: data,\r\n                                      testReadOnly: testReadOnly.bind(this),\r\n                                      selectChanged: selectChanged.bind(this)\r\n                                    }\">\r\n                      </ng-container>\r\n                    </ng-container>\r\n  \r\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]=\"subfield.loadAction\" [regex]=\"subfield.regex\" [field]=\"subfield\" [data]=\"data\" [detailsConfig]=\"subfield.detailsConfig\" [masterField]=\"subfield.masterField\"></spa-text-single>\r\n\r\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>\r\n\r\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>\r\n  \r\n  \r\n                  </ng-container>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n  \r\n  \r\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]=\"field.loadAction\" [regex]=\"field.regex\" [field]=\"field\" [data]=\"data\" [detailsConfig]=\"field.detailsConfig\" [masterField]=\"field.masterField\"></spa-text-single>\r\n\r\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>\r\n\r\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>\r\n  \r\n        </ng-container>\r\n  \r\n      </ng-container>\r\n  \r\n    </div>\r\n  \r\n  \r\n    <div class=\"span-col-center\" *ngIf=\"config.button\">\r\n      <button mat-raised-button color=\"primary\"  (click)=\"buttonClicked()\"  cdkFocusInitial>{{buttonDisplay}}</button>\r\n    </div>\r\n  \r\n  \r\n  </div>\r\n  <div class=\"notes-section\" *ngIf=\"config.notesConfig\">\r\n    <spa-notes\r\n      [title]=\"config.notesConfig.title || 'Notes'\"\r\n      [notes]=\"config.notesConfig.notes || []\"\r\n      [loadAction]=\"config.notesConfig.loadAction\"\r\n      [loadIDField]=\"config.notesConfig.loadIDField\"\r\n      [data]=\"data\"\r\n      [nameField]=\"config.notesConfig.nameField || 'createdByName'\"\r\n      [dateField]=\"config.notesConfig.dateField || 'createdDate'\"\r\n      [commentField]=\"config.notesConfig.commentField || 'details'\">\r\n    </spa-notes>\r\n  </div>\r\n</div>\r\n\r\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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i4.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: 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: 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 }], ngImport: i0, template: "\r\n\r\n\r\n<div class=\"tin-form-container\" >\r\n  <div [ngClass]=\"[multiColumn ? 'tin-grid' : 'tin-col', config.notesConfig ? 'width-75' : 'width-100']\" class=\"form-main-content\">\r\n\r\n    <div *ngIf=\"!hasAccess\" class=\"tin-center\">\r\n      <p><em>Access Restricted</em></p>\r\n    </div>\r\n  \r\n    <div [ngClass]=\"field.span || field.type =='section' || field.type =='file' || field.type =='file-view'  ? 'span-col' : ''\" *ngFor=\"let field of getVisibleFields()\">\r\n  \r\n      <ng-container>\r\n  \r\n        <ng-container [ngSwitch]=\"field.type\" class=\"highlight\">\r\n  \r\n          <div *ngSwitchCase=\"'section'\" class=\"title d-flex align-items-center\" (click)=\"toggleSection(field)\" style=\"cursor: pointer;\">\r\n            <label style=\"font-size: larger;margin-right: 10px;\">{{field.alias ?? field.name | camelToWords}}</label>\r\n            <mat-icon *ngIf=\"field.infoMessage\" (click)=\"onInfoClick($event, field.infoMessage)\" style=\"color: steelblue; font-size: 14px;\">info</mat-icon>\r\n            <!-- <button  mat-icon-button class=\"info-icon-button\"  matTooltip=\"Info\" matTooltipPosition=\"above\">\r\n  \r\n            </button> -->\r\n            <mat-icon *ngIf=\"hasSectionFields(field.name)\">{{shouldSectionCollapse(field) ? 'expand_more' : 'expand_less'}}</mat-icon>\r\n          </div>\r\n  \r\n          <ng-container *ngSwitchCase=\"'file'\">\r\n            <div class=\"mt-1 mb-2\" *ngIf=\"config.mode !='view'\">\r\n              <spa-attach [message]=\"field.alias ?? 'Drag and Drop files here'\" [(files)]=\"files\" [fileOptions]=\"field.fileOptions\"></spa-attach>\r\n            </div>\r\n          </ng-container>\r\n  \r\n          <ng-container *ngSwitchCase=\"'file-view'\">\r\n            <div class=\"mt-1 mb-2\" *ngIf=\"config.mode && config.mode !='create'\">\r\n              <spa-viewer [fileAction]=\"field.loadAction\" [path]=\"field.path\" [folderName]=\"data[field.keyField]\" ></spa-viewer>\r\n            </div>\r\n          </ng-container>\r\n  \r\n          <spa-html *ngSwitchCase=\"'html'\" [display]=\"field.alias | camelToWords\" [value]=\"data[field.name]\" [maxHeight]=\"field.maxHeight\"></spa-html>\r\n  \r\n          <label *ngSwitchCase=\"'blank'\"></label>\r\n  \r\n          <label *ngSwitchCase=\"'string'\" [ngStyle]=\"{'font-size':field.size ?? '14px'}\" >{{data[field.name] ?? field.alias ?? field.name}} {{field.suffix ?? ''}}</label>\r\n  \r\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>\r\n  \r\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>\r\n  \r\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>\r\n  \r\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>\r\n  \r\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>\r\n  \r\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>\r\n  \r\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>\r\n  \r\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>\r\n  \r\n  \r\n          <ng-container *ngSwitchCase=\"'select'\">\r\n            <ng-container *ngTemplateOutlet=\"dynamicSelectTemplate; context: {\r\n                    $implicit: field,\r\n                    field: field,\r\n                    data: data,\r\n                    testReadOnly: testReadOnly.bind(this),\r\n                    testRequired: testRequired.bind(this),\r\n                    selectChanged: selectChanged.bind(this)\r\n                  }\">\r\n            </ng-container>\r\n          </ng-container>\r\n  \r\n  \r\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\">\r\n          </spa-select-multi>\r\n  \r\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>\r\n  \r\n  \r\n  \r\n          <ng-container *ngSwitchCase=\"'composite'\">\r\n            <div class=\"composite-field-container\">\r\n              <div class=\"composite-field-group\">\r\n                <ng-container *ngFor=\"let subfield of getVisibleSubfields(field)\">\r\n                  <ng-container [ngSwitch]=\"subfield.type\">\r\n  \r\n                    <label *ngSwitchCase=\"'string'\" [ngStyle]=\"{'font-size':field.size ?? '14px'}\" >{{data[field.name] ?? field.alias ?? field.name}} {{field.suffix ?? ''}}</label>\r\n                    \r\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>\r\n  \r\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>\r\n  \r\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>\r\n  \r\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>\r\n  \r\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>\r\n  \r\n                    <ng-container *ngSwitchCase=\"'select'\">\r\n                      <ng-container *ngTemplateOutlet=\"dynamicSelectTemplate; context: {\r\n                                      $implicit: field,\r\n                                      field: field,\r\n                                      data: data,\r\n                                      testReadOnly: testReadOnly.bind(this),\r\n                                      selectChanged: selectChanged.bind(this)\r\n                                    }\">\r\n                      </ng-container>\r\n                    </ng-container>\r\n  \r\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>\r\n\r\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>\r\n\r\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>\r\n  \r\n  \r\n                  </ng-container>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n  \r\n  \r\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>\r\n\r\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>\r\n\r\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>\r\n  \r\n        </ng-container>\r\n  \r\n      </ng-container>\r\n  \r\n    </div>\r\n  \r\n  \r\n    <div class=\"span-col-center\" *ngIf=\"config.button\">\r\n      <button mat-raised-button color=\"primary\"  (click)=\"buttonClicked()\"  cdkFocusInitial>{{buttonDisplay}}</button>\r\n    </div>\r\n  \r\n  \r\n  </div>\r\n  <div class=\"notes-section\" *ngIf=\"config.notesConfig\">\r\n    <spa-notes\r\n      [title]=\"config.notesConfig.title || 'Notes'\"\r\n      [notes]=\"config.notesConfig.notes || []\"\r\n      [loadAction]=\"config.notesConfig.loadAction\"\r\n      [loadIDField]=\"config.notesConfig.loadIDField\"\r\n      [data]=\"data\"\r\n      [nameField]=\"config.notesConfig.nameField || 'createdByName'\"\r\n      [dateField]=\"config.notesConfig.dateField || 'createdDate'\"\r\n      [commentField]=\"config.notesConfig.commentField || 'details'\">\r\n    </spa-notes>\r\n  </div>\r\n</div>\r\n\r\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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i4.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: 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: 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: "\r\n\r\n\r\n<div class=\"tin-form-container\" >\r\n  <div [ngClass]=\"[multiColumn ? 'tin-grid' : 'tin-col', config.notesConfig ? 'width-75' : 'width-100']\" class=\"form-main-content\">\r\n\r\n    <div *ngIf=\"!hasAccess\" class=\"tin-center\">\r\n      <p><em>Access Restricted</em></p>\r\n    </div>\r\n  \r\n    <div [ngClass]=\"field.span || field.type =='section' || field.type =='file' || field.type =='file-view'  ? 'span-col' : ''\" *ngFor=\"let field of getVisibleFields()\">\r\n  \r\n      <ng-container>\r\n  \r\n        <ng-container [ngSwitch]=\"field.type\" class=\"highlight\">\r\n  \r\n          <div *ngSwitchCase=\"'section'\" class=\"title d-flex align-items-center\" (click)=\"toggleSection(field)\" style=\"cursor: pointer;\">\r\n            <label style=\"font-size: larger;margin-right: 10px;\">{{field.alias ?? field.name | camelToWords}}</label>\r\n            <mat-icon *ngIf=\"field.infoMessage\" (click)=\"onInfoClick($event, field.infoMessage)\" style=\"color: steelblue; font-size: 14px;\">info</mat-icon>\r\n            <!-- <button  mat-icon-button class=\"info-icon-button\"  matTooltip=\"Info\" matTooltipPosition=\"above\">\r\n  \r\n            </button> -->\r\n            <mat-icon *ngIf=\"hasSectionFields(field.name)\">{{shouldSectionCollapse(field) ? 'expand_more' : 'expand_less'}}</mat-icon>\r\n          </div>\r\n  \r\n          <ng-container *ngSwitchCase=\"'file'\">\r\n            <div class=\"mt-1 mb-2\" *ngIf=\"config.mode !='view'\">\r\n              <spa-attach [message]=\"field.alias ?? 'Drag and Drop files here'\" [(files)]=\"files\" [fileOptions]=\"field.fileOptions\"></spa-attach>\r\n            </div>\r\n          </ng-container>\r\n  \r\n          <ng-container *ngSwitchCase=\"'file-view'\">\r\n            <div class=\"mt-1 mb-2\" *ngIf=\"config.mode && config.mode !='create'\">\r\n              <spa-viewer [fileAction]=\"field.loadAction\" [path]=\"field.path\" [folderName]=\"data[field.keyField]\" ></spa-viewer>\r\n            </div>\r\n          </ng-container>\r\n  \r\n          <spa-html *ngSwitchCase=\"'html'\" [display]=\"field.alias | camelToWords\" [value]=\"data[field.name]\" [maxHeight]=\"field.maxHeight\"></spa-html>\r\n  \r\n          <label *ngSwitchCase=\"'blank'\"></label>\r\n  \r\n          <label *ngSwitchCase=\"'string'\" [ngStyle]=\"{'font-size':field.size ?? '14px'}\" >{{data[field.name] ?? field.alias ?? field.name}} {{field.suffix ?? ''}}</label>\r\n  \r\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>\r\n  \r\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>\r\n  \r\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>\r\n  \r\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>\r\n  \r\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>\r\n  \r\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>\r\n  \r\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>\r\n  \r\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>\r\n  \r\n  \r\n          <ng-container *ngSwitchCase=\"'select'\">\r\n            <ng-container *ngTemplateOutlet=\"dynamicSelectTemplate; context: {\r\n                    $implicit: field,\r\n                    field: field,\r\n                    data: data,\r\n                    testReadOnly: testReadOnly.bind(this),\r\n                    testRequired: testRequired.bind(this),\r\n                    selectChanged: selectChanged.bind(this)\r\n                  }\">\r\n            </ng-container>\r\n          </ng-container>\r\n  \r\n  \r\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]=\"field.loadAction\" [selectAll]=\"field.selectAll\">\r\n          </spa-select-multi>\r\n  \r\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]=\"field.loadAction\"></spa-text-multi>\r\n  \r\n  \r\n  \r\n          <ng-container *ngSwitchCase=\"'composite'\">\r\n            <div class=\"composite-field-container\">\r\n              <div class=\"composite-field-group\">\r\n                <ng-container *ngFor=\"let subfield of getVisibleSubfields(field)\">\r\n                  <ng-container [ngSwitch]=\"subfield.type\">\r\n  \r\n                    <label *ngSwitchCase=\"'string'\" [ngStyle]=\"{'font-size':field.size ?? '14px'}\" >{{data[field.name] ?? field.alias ?? field.name}} {{field.suffix ?? ''}}</label>\r\n                    \r\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>\r\n  \r\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>\r\n  \r\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>\r\n  \r\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>\r\n  \r\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>\r\n  \r\n                    <ng-container *ngSwitchCase=\"'select'\">\r\n                      <ng-container *ngTemplateOutlet=\"dynamicSelectTemplate; context: {\r\n                                      $implicit: field,\r\n                                      field: field,\r\n                                      data: data,\r\n                                      testReadOnly: testReadOnly.bind(this),\r\n                                      selectChanged: selectChanged.bind(this)\r\n                                    }\">\r\n                      </ng-container>\r\n                    </ng-container>\r\n  \r\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]=\"subfield.loadAction\" [regex]=\"subfield.regex\" [field]=\"subfield\" [data]=\"data\" [detailsConfig]=\"subfield.detailsConfig\" [masterField]=\"subfield.masterField\"></spa-text-single>\r\n\r\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>\r\n\r\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>\r\n  \r\n  \r\n                  </ng-container>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n  \r\n  \r\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]=\"field.loadAction\" [regex]=\"field.regex\" [field]=\"field\" [data]=\"data\" [detailsConfig]=\"field.detailsConfig\" [masterField]=\"field.masterField\"></spa-text-single>\r\n\r\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>\r\n\r\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>\r\n  \r\n        </ng-container>\r\n  \r\n      </ng-container>\r\n  \r\n    </div>\r\n  \r\n  \r\n    <div class=\"span-col-center\" *ngIf=\"config.button\">\r\n      <button mat-raised-button color=\"primary\"  (click)=\"buttonClicked()\"  cdkFocusInitial>{{buttonDisplay}}</button>\r\n    </div>\r\n  \r\n  \r\n  </div>\r\n  <div class=\"notes-section\" *ngIf=\"config.notesConfig\">\r\n    <spa-notes\r\n      [title]=\"config.notesConfig.title || 'Notes'\"\r\n      [notes]=\"config.notesConfig.notes || []\"\r\n      [loadAction]=\"config.notesConfig.loadAction\"\r\n      [loadIDField]=\"config.notesConfig.loadIDField\"\r\n      [data]=\"data\"\r\n      [nameField]=\"config.notesConfig.nameField || 'createdByName'\"\r\n      [dateField]=\"config.notesConfig.dateField || 'createdDate'\"\r\n      [commentField]=\"config.notesConfig.commentField || 'details'\">\r\n    </spa-notes>\r\n  </div>\r\n</div>\r\n\r\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: "\r\n\r\n\r\n<div class=\"tin-form-container\" >\r\n  <div [ngClass]=\"[multiColumn ? 'tin-grid' : 'tin-col', config.notesConfig ? 'width-75' : 'width-100']\" class=\"form-main-content\">\r\n\r\n    <div *ngIf=\"!hasAccess\" class=\"tin-center\">\r\n      <p><em>Access Restricted</em></p>\r\n    </div>\r\n  \r\n    <div [ngClass]=\"field.span || field.type =='section' || field.type =='file' || field.type =='file-view'  ? 'span-col' : ''\" *ngFor=\"let field of getVisibleFields()\">\r\n  \r\n      <ng-container>\r\n  \r\n        <ng-container [ngSwitch]=\"field.type\" class=\"highlight\">\r\n  \r\n          <div *ngSwitchCase=\"'section'\" class=\"title d-flex align-items-center\" (click)=\"toggleSection(field)\" style=\"cursor: pointer;\">\r\n            <label style=\"font-size: larger;margin-right: 10px;\">{{field.alias ?? field.name | camelToWords}}</label>\r\n            <mat-icon *ngIf=\"field.infoMessage\" (click)=\"onInfoClick($event, field.infoMessage)\" style=\"color: steelblue; font-size: 14px;\">info</mat-icon>\r\n            <!-- <button  mat-icon-button class=\"info-icon-button\"  matTooltip=\"Info\" matTooltipPosition=\"above\">\r\n  \r\n            </button> -->\r\n            <mat-icon *ngIf=\"hasSectionFields(field.name)\">{{shouldSectionCollapse(field) ? 'expand_more' : 'expand_less'}}</mat-icon>\r\n          </div>\r\n  \r\n          <ng-container *ngSwitchCase=\"'file'\">\r\n            <div class=\"mt-1 mb-2\" *ngIf=\"config.mode !='view'\">\r\n              <spa-attach [message]=\"field.alias ?? 'Drag and Drop files here'\" [(files)]=\"files\" [fileOptions]=\"field.fileOptions\"></spa-attach>\r\n            </div>\r\n          </ng-container>\r\n  \r\n          <ng-container *ngSwitchCase=\"'file-view'\">\r\n            <div class=\"mt-1 mb-2\" *ngIf=\"config.mode && config.mode !='create'\">\r\n              <spa-viewer [fileAction]=\"field.loadAction\" [path]=\"field.path\" [folderName]=\"data[field.keyField]\" ></spa-viewer>\r\n            </div>\r\n          </ng-container>\r\n  \r\n          <spa-html *ngSwitchCase=\"'html'\" [display]=\"field.alias | camelToWords\" [value]=\"data[field.name]\" [maxHeight]=\"field.maxHeight\"></spa-html>\r\n  \r\n          <label *ngSwitchCase=\"'blank'\"></label>\r\n  \r\n          <label *ngSwitchCase=\"'string'\" [ngStyle]=\"{'font-size':field.size ?? '14px'}\" >{{data[field.name] ?? field.alias ?? field.name}} {{field.suffix ?? ''}}</label>\r\n  \r\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>\r\n  \r\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>\r\n  \r\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>\r\n  \r\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>\r\n  \r\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>\r\n  \r\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>\r\n  \r\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>\r\n  \r\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>\r\n  \r\n  \r\n          <ng-container *ngSwitchCase=\"'select'\">\r\n            <ng-container *ngTemplateOutlet=\"dynamicSelectTemplate; context: {\r\n                    $implicit: field,\r\n                    field: field,\r\n                    data: data,\r\n                    testReadOnly: testReadOnly.bind(this),\r\n                    testRequired: testRequired.bind(this),\r\n                    selectChanged: selectChanged.bind(this)\r\n                  }\">\r\n            </ng-container>\r\n          </ng-container>\r\n  \r\n  \r\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\">\r\n          </spa-select-multi>\r\n  \r\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>\r\n  \r\n  \r\n  \r\n          <ng-container *ngSwitchCase=\"'composite'\">\r\n            <div class=\"composite-field-container\">\r\n              <div class=\"composite-field-group\">\r\n                <ng-container *ngFor=\"let subfield of getVisibleSubfields(field)\">\r\n                  <ng-container [ngSwitch]=\"subfield.type\">\r\n  \r\n                    <label *ngSwitchCase=\"'string'\" [ngStyle]=\"{'font-size':field.size ?? '14px'}\" >{{data[field.name] ?? field.alias ?? field.name}} {{field.suffix ?? ''}}</label>\r\n                    \r\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>\r\n  \r\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>\r\n  \r\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>\r\n  \r\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>\r\n  \r\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>\r\n  \r\n                    <ng-container *ngSwitchCase=\"'select'\">\r\n                      <ng-container *ngTemplateOutlet=\"dynamicSelectTemplate; context: {\r\n                                      $implicit: field,\r\n                                      field: field,\r\n                                      data: data,\r\n                                      testReadOnly: testReadOnly.bind(this),\r\n                                      selectChanged: selectChanged.bind(this)\r\n                                    }\">\r\n                      </ng-container>\r\n                    </ng-container>\r\n  \r\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>\r\n\r\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>\r\n\r\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>\r\n  \r\n  \r\n                  </ng-container>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n  \r\n  \r\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>\r\n\r\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>\r\n\r\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>\r\n  \r\n        </ng-container>\r\n  \r\n      </ng-container>\r\n  \r\n    </div>\r\n  \r\n  \r\n    <div class=\"span-col-center\" *ngIf=\"config.button\">\r\n      <button mat-raised-button color=\"primary\"  (click)=\"buttonClicked()\"  cdkFocusInitial>{{buttonDisplay}}</button>\r\n    </div>\r\n  \r\n  \r\n  </div>\r\n  <div class=\"notes-section\" *ngIf=\"config.notesConfig\">\r\n    <spa-notes\r\n      [title]=\"config.notesConfig.title || 'Notes'\"\r\n      [notes]=\"config.notesConfig.notes || []\"\r\n      [loadAction]=\"config.notesConfig.loadAction\"\r\n      [loadIDField]=\"config.notesConfig.loadIDField\"\r\n      [data]=\"data\"\r\n      [nameField]=\"config.notesConfig.nameField || 'createdByName'\"\r\n      [dateField]=\"config.notesConfig.dateField || 'createdDate'\"\r\n      [commentField]=\"config.notesConfig.commentField || 'details'\">\r\n    </spa-notes>\r\n  </div>\r\n</div>\r\n\r\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']
@@ -12740,7 +12786,7 @@ 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: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: ButtonService }, { token: DialogService }, { token: AuthService }, { token: TableConfigService }], 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: "<div class=\"dialog-container\">\r\n\r\n  <div class=\"dialog-content\">\r\n\r\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isProcessing && dataService.appConfig.progressLine\"></mat-progress-bar>\r\n\r\n    <div class=\"d-flex justify-content-between align-items-center mt-2\" style=\"padding-left: 24px; padding-right: 24px;\">\r\n\r\n      <div>\r\n        <label style=\"font-size: 20px; font-weight:500;margin-top: 10px;margin-bottom: 5px;\" >{{titleAction | titlecase}} {{formConfig?.title}}</label>\r\n      </div>\r\n\r\n      <div class=\"d-flex align-items-center\" style=\"gap: 8px;\">\r\n\r\n        <!-- Changed: Auto Refresh icon button \u2014 grey when off, green when on, with dynamic tooltip -->\r\n        <button *ngIf=\"detailsConfig.autoRefreshConfig\" mat-icon-button\r\n          [matTooltip]=\"autoRefreshEnabled ? 'Click to disable auto refresh' : 'Click to enable auto refresh'\" matTooltipPosition=\"above\"\r\n          [style.color]=\"autoRefreshEnabled ? '#4caf50' : '#9e9e9e'\"\r\n          (click)=\"autoRefreshEnabled = !autoRefreshEnabled; toggleAutoRefresh()\">\r\n          <mat-icon>autorenew</mat-icon>\r\n        </button>\r\n        <!-- Changed: Keep Open icon button \u2014 grey when off, green when on, with dynamic tooltip -->\r\n        <button *ngIf=\"detailsConfig.allowUserKeepOpen\" mat-icon-button\r\n          [matTooltip]=\"userKeepOpen ? 'Click to disable keep open' : 'Click to enable keep open'\" matTooltipPosition=\"above\"\r\n          [style.color]=\"userKeepOpen ? '#4caf50' : '#9e9e9e'\"\r\n          (click)=\"userKeepOpen = !userKeepOpen\">\r\n          <mat-icon>push_pin</mat-icon>\r\n        </button>\r\n\r\n        <div *ngIf=\"formConfig.mode=='view' && editButton && testVisible(details,editButton.name)\">\r\n          <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Edit\" color=\"primary\" (click)=\"setMode('edit')\" [disabled]=\"testDisabled(details,editButton.name)\"><mat-icon>edit</mat-icon></button>\r\n        </div>\r\n\r\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>\r\n        \r\n        <!-- Added: Top close button when position is 'top' -->\r\n        <button *ngIf=\"shouldShowTopClose()\" [disabled]=\"isProcessing\" mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Close\" (click)=\"close()\"><mat-icon>close</mat-icon></button>\r\n\r\n      </div>\r\n\r\n    </div>\r\n\r\n    <div style=\"padding-left: 24px; padding-right: 24px;\">\r\n      <spa-steps *ngIf=\"stepConfig && details && stepConfig.sticky\" [config]=\"stepConfig\" [data]=\"details\"></spa-steps>\r\n      <spa-statuses *ngIf=\"statusConfig && details && statusConfig?.sticky\" [config]=\"statusConfig\" [data]=\"details\"></spa-statuses>\r\n      <spa-alert *ngIf=\"formConfig.alertConfig && formConfig.alertConfig?.sticky\" [config]=\"formConfig.alertConfig\" [data]=\"details\"></spa-alert>\r\n    </div>\r\n\r\n    <mat-dialog-content class=\"mat-typography dialog-scroll-content\">\r\n\r\n      <spa-steps *ngIf=\"stepConfig && details && !stepConfig.sticky\" [config]=\"stepConfig\" [data]=\"details\"></spa-steps>\r\n      <spa-statuses *ngIf=\"statusConfig && details && !statusConfig?.sticky\" [config]=\"statusConfig\" [data]=\"details\"></spa-statuses>\r\n      <spa-alert *ngIf=\"formConfig.alertConfig && !formConfig.alertConfig?.sticky\" [config]=\"formConfig.alertConfig\" [data]=\"details\"></spa-alert>\r\n\r\n      <div class=\"tin-input\" style=\"font-size:14px\">\r\n\r\n        <p *ngIf=\"formConfig && !details\"><em>Loading...</em></p>\r\n\r\n        <spa-form *ngIf=\"formConfig && details\" [files]=\"files\" [data]=\"details\" [config]=\"formConfig\" (inputChange)=\"inputChanged($event)\">\r\n          <ng-template #dynamicSelect let-field=\"field\" let-data=\"data\" let-testReadOnly=\"testReadOnly\" let-testRequired=\"testRequired\" let-selectChanged=\"selectChanged\">\r\n            <spa-select\r\n              [display]=\"field.alias ?? field.name | camelToWords\"\r\n              [width]=\"field.width\"\r\n              [nullable]=\"field.nullable\"\r\n              [options]=\"field.options\"\r\n              [masterOptions]=\"field.masterOptions\"\r\n              [masterField]=\"field.masterField\"\r\n              [optionDisplay]=\"field.optionDisplay ?? 'name'\"\r\n              [optionValue]=\"field.optionValue ?? 'value'\"\r\n              [(value)]=\"data[field.name]\"\r\n              [defaultFirstValue]=\"field.defaultFirstValue\"\r\n              [required]=\"testRequired(field)\"\r\n              [readonly]=\"testReadOnly(field)\"\r\n              [hint]=\"field.hint\"\r\n              [detailsConfig]=\"field.detailsConfig\"\r\n              [loadAction]=\"field.loadAction\"\r\n              [loadIDField]=\"field.loadIDField\"\r\n              [field]=\"field\"\r\n              [data]=\"data\"\r\n              [infoMessage]=\"field.infoMessage\"\r\n              [copyContent]=\"field.copyContent\"\r\n              (valueChange)=\"selectChanged(field)\"\r\n            ></spa-select>\r\n          </ng-template>\r\n        </spa-form>\r\n\r\n        <!-- Changed: Use unified spa-tabs with nestingLevel control \u2014 tabs hidden when nestingLevel >= 2 -->\r\n        <spa-tabs\r\n          *ngIf=\"showTabs && tableConfigs && !(detailsConfig.hideTablesInCreateMode && formConfig?.mode === 'create')\"\r\n          [tableConfigs]=\"tableConfigs\"\r\n          [reload]=\"tableReload\"\r\n          [parentDetails]=\"details\"\r\n          [nestingLevel]=\"nestingLevel + 1\"\r\n          (formRefresh)=\"loadData(formConfig.loadAction, false)\">\r\n        </spa-tabs>\r\n\r\n      </div>\r\n\r\n    </mat-dialog-content>\r\n\r\n\r\n  </div>\r\n\r\n  <mat-dialog-actions >\r\n\r\n    <div>\r\n\r\n      <button mat-raised-button [disabled]=\"isProcessing\" *ngIf=\"formConfig.mode=='create' && createButton\" color=\"primary\"\r\n        (click)=\"create()\" cdkFocusInitial>{{createButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <button mat-raised-button [disabled]=\"isProcessing\" *ngIf=\"formConfig.mode=='edit' && editButton\" color=\"primary\"\r\n        (click)=\"edit()\" cdkFocusInitial>{{editButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <ng-container *ngFor=\"let btn of extraButtons\">\r\n        <button *ngIf=\"formConfig.mode !== 'create' && testVisible(details,btn.name)\" mat-stroked-button [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\" (click)=\"custom(btn)\" cdkFocusInitial>\r\n          <mat-icon *ngIf=\"btn.icon\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\">{{btn.icon.name}}</mat-icon>\r\n          {{btn.display ?? btn.name | titlecase}}\r\n        </button>\r\n      </ng-container>\r\n\r\n      <!-- Changed: Bottom close button now uses conditional display and custom text -->\r\n      <button *ngIf=\"shouldShowBottomClose()\" mat-stroked-button color=\"primary\" (click)=\"close()\">{{getCloseText()}}</button>\r\n\r\n    </div>\r\n\r\n    <div class=\"col d-flex justify-content-end\" *ngIf=\"smallScreen\">\r\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>\r\n    </div>\r\n\r\n\r\n  </mat-dialog-actions>\r\n\r\n\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\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}.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%}.dialog-content{flex:1;overflow:hidden;display:flex;flex-direction:column}.dialog-scroll-content{flex:1;overflow-y:auto;max-height:none!important;display:flex;flex-direction:column}.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}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4.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.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: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i14$1.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", "parentDetails", "nestingLevel"], outputs: ["formRefresh"] }, { kind: "component", type: StatusesComponent, selector: "spa-statuses", inputs: ["config", "data"] }, { kind: "pipe", type: i2.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: "<div class=\"dialog-container\">\r\n\r\n  <div class=\"dialog-content\">\r\n\r\n    <mat-progress-bar mode=\"indeterminate\" *ngIf=\"isProcessing && dataService.appConfig.progressLine\"></mat-progress-bar>\r\n\r\n    <div class=\"d-flex justify-content-between align-items-center mt-2\" style=\"padding-left: 24px; padding-right: 24px;\">\r\n\r\n      <div>\r\n        <label style=\"font-size: 20px; font-weight:500;margin-top: 10px;margin-bottom: 5px;\" >{{titleAction | titlecase}} {{formConfig?.title}}</label>\r\n      </div>\r\n\r\n      <div class=\"d-flex align-items-center\" style=\"gap: 8px;\">\r\n\r\n        <!-- Changed: Auto Refresh icon button \u2014 grey when off, green when on, with dynamic tooltip -->\r\n        <button *ngIf=\"detailsConfig.autoRefreshConfig\" mat-icon-button\r\n          [matTooltip]=\"autoRefreshEnabled ? 'Click to disable auto refresh' : 'Click to enable auto refresh'\" matTooltipPosition=\"above\"\r\n          [style.color]=\"autoRefreshEnabled ? '#4caf50' : '#9e9e9e'\"\r\n          (click)=\"autoRefreshEnabled = !autoRefreshEnabled; toggleAutoRefresh()\">\r\n          <mat-icon>autorenew</mat-icon>\r\n        </button>\r\n        <!-- Changed: Keep Open icon button \u2014 grey when off, green when on, with dynamic tooltip -->\r\n        <button *ngIf=\"detailsConfig.allowUserKeepOpen\" mat-icon-button\r\n          [matTooltip]=\"userKeepOpen ? 'Click to disable keep open' : 'Click to enable keep open'\" matTooltipPosition=\"above\"\r\n          [style.color]=\"userKeepOpen ? '#4caf50' : '#9e9e9e'\"\r\n          (click)=\"userKeepOpen = !userKeepOpen\">\r\n          <mat-icon>push_pin</mat-icon>\r\n        </button>\r\n\r\n        <div *ngIf=\"formConfig.mode=='view' && editButton && testVisible(details,editButton.name)\">\r\n          <button mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Edit\" color=\"primary\" (click)=\"setMode('edit')\" [disabled]=\"testDisabled(details,editButton.name)\"><mat-icon>edit</mat-icon></button>\r\n        </div>\r\n\r\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>\r\n        \r\n        <!-- Added: Top close button when position is 'top' -->\r\n        <button *ngIf=\"shouldShowTopClose()\" [disabled]=\"isProcessing\" mat-icon-button matTooltipPosition=\"above\" matTooltip=\"Close\" (click)=\"close()\"><mat-icon>close</mat-icon></button>\r\n\r\n      </div>\r\n\r\n    </div>\r\n\r\n    <div style=\"padding-left: 24px; padding-right: 24px;\">\r\n      <spa-steps *ngIf=\"stepConfig && details && stepConfig.sticky\" [config]=\"stepConfig\" [data]=\"details\"></spa-steps>\r\n      <spa-statuses *ngIf=\"statusConfig && details && statusConfig?.sticky\" [config]=\"statusConfig\" [data]=\"details\"></spa-statuses>\r\n      <spa-alert *ngIf=\"formConfig.alertConfig && formConfig.alertConfig?.sticky\" [config]=\"formConfig.alertConfig\" [data]=\"details\"></spa-alert>\r\n    </div>\r\n\r\n    <mat-dialog-content class=\"mat-typography dialog-scroll-content\">\r\n\r\n      <spa-steps *ngIf=\"stepConfig && details && !stepConfig.sticky\" [config]=\"stepConfig\" [data]=\"details\"></spa-steps>\r\n      <spa-statuses *ngIf=\"statusConfig && details && !statusConfig?.sticky\" [config]=\"statusConfig\" [data]=\"details\"></spa-statuses>\r\n      <spa-alert *ngIf=\"formConfig.alertConfig && !formConfig.alertConfig?.sticky\" [config]=\"formConfig.alertConfig\" [data]=\"details\"></spa-alert>\r\n\r\n      <div class=\"tin-input\" style=\"font-size:14px\">\r\n\r\n        <p *ngIf=\"formConfig && !details\"><em>Loading...</em></p>\r\n\r\n        <spa-form *ngIf=\"formConfig && details\" [files]=\"files\" [data]=\"details\" [config]=\"formConfig\" (inputChange)=\"inputChanged($event)\">\r\n          <ng-template #dynamicSelect let-field=\"field\" let-data=\"data\" let-testReadOnly=\"testReadOnly\" let-testRequired=\"testRequired\" let-selectChanged=\"selectChanged\">\r\n            <spa-select\r\n              [display]=\"field.alias ?? field.name | camelToWords\"\r\n              [width]=\"field.width\"\r\n              [nullable]=\"field.nullable\"\r\n              [options]=\"field.options\"\r\n              [masterOptions]=\"field.masterOptions\"\r\n              [masterField]=\"field.masterField\"\r\n              [optionDisplay]=\"field.optionDisplay ?? 'name'\"\r\n              [optionValue]=\"field.optionValue ?? 'value'\"\r\n              [(value)]=\"data[field.name]\"\r\n              [defaultFirstValue]=\"field.defaultFirstValue\"\r\n              [required]=\"testRequired(field)\"\r\n              [readonly]=\"testReadOnly(field)\"\r\n              [hint]=\"field.hint\"\r\n              [detailsConfig]=\"field.detailsConfig\"\r\n              [loadAction]=\"field.loadAction\"\r\n              [loadIDField]=\"field.loadIDField\"\r\n              [field]=\"field\"\r\n              [data]=\"data\"\r\n              [infoMessage]=\"field.infoMessage\"\r\n              [copyContent]=\"field.copyContent\"\r\n              (valueChange)=\"selectChanged(field)\"\r\n            ></spa-select>\r\n          </ng-template>\r\n        </spa-form>\r\n\r\n        <!-- Changed: Use unified spa-tabs with nestingLevel control \u2014 tabs hidden when nestingLevel >= 2 -->\r\n        <spa-tabs\r\n          *ngIf=\"showTabs && tableConfigs && !(detailsConfig.hideTablesInCreateMode && formConfig?.mode === 'create')\"\r\n          [tableConfigs]=\"tableConfigs\"\r\n          [reload]=\"tableReload\"\r\n          [parentDetails]=\"details\"\r\n          [nestingLevel]=\"nestingLevel + 1\"\r\n          (formRefresh)=\"loadData(formConfig.loadAction, false)\">\r\n        </spa-tabs>\r\n\r\n      </div>\r\n\r\n    </mat-dialog-content>\r\n\r\n\r\n  </div>\r\n\r\n  <mat-dialog-actions >\r\n\r\n    <div>\r\n\r\n      <button mat-raised-button [disabled]=\"isProcessing\" *ngIf=\"formConfig.mode=='create' && createButton\" color=\"primary\"\r\n        (click)=\"create()\" cdkFocusInitial>{{createButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <button mat-raised-button [disabled]=\"isProcessing\" *ngIf=\"formConfig.mode=='edit' && editButton\" color=\"primary\"\r\n        (click)=\"edit()\" cdkFocusInitial>{{editButton.display ?? 'Submit'}}\r\n      </button>\r\n\r\n      <ng-container *ngFor=\"let btn of extraButtons\">\r\n        <button *ngIf=\"formConfig.mode !== 'create' && testVisible(details,btn.name)\" mat-stroked-button [disabled]=\"isProcessing || testDisabled(details,btn.name)\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\" (click)=\"custom(btn)\" cdkFocusInitial>\r\n          <mat-icon *ngIf=\"btn.icon\" [ngStyle]=\"{'color': getButtonColor(btn, details)}\">{{btn.icon.name}}</mat-icon>\r\n          {{btn.display ?? btn.name | titlecase}}\r\n        </button>\r\n      </ng-container>\r\n\r\n      <!-- Changed: Bottom close button now uses conditional display and custom text -->\r\n      <button *ngIf=\"shouldShowBottomClose()\" mat-stroked-button color=\"primary\" (click)=\"close()\">{{getCloseText()}}</button>\r\n\r\n    </div>\r\n\r\n    <div class=\"col d-flex justify-content-end\" *ngIf=\"smallScreen\">\r\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>\r\n    </div>\r\n\r\n\r\n  </mat-dialog-actions>\r\n\r\n\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\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}.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%}.dialog-content{flex:1;overflow:hidden;display:flex;flex-direction:column}.dialog-scroll-content{flex:1;overflow-y:auto;max-height:none!important;display:flex;flex-direction:column}.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}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4.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.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: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i14$2.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", "parentDetails", "nestingLevel"], outputs: ["formRefresh"] }, { kind: "component", type: StatusesComponent, selector: "spa-statuses", inputs: ["config", "data"] }, { kind: "pipe", type: i2.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,
@@ -17788,7 +17834,7 @@ class PayrollService {
             ],
             loadAction: { url: 'salarystructures/all/x' },
             formConfig: this.salaryStructureFormConfig,
-            // realTime: true, // Disabled: testing realtime on transactions table only
+            realTime: true,
             entityName: 'SalaryStructure'
         };
         //--------------------------Statutory Deduction Bands (child of StatutoryDeductionType)-------------------------
@@ -17867,7 +17913,7 @@ class PayrollService {
             ],
             loadAction: { url: 'statutorydeductiontypes/all/x' },
             formConfig: this.statutoryDeductionTypeFormConfig,
-            // realTime: true, // Disabled: testing realtime on transactions table only
+            realTime: true,
             entityName: 'StatutoryDeductionType'
         };
         //--------------------------Payslip Lines (child of Payslip)-------------------------
@@ -18034,7 +18080,7 @@ class PayrollService {
             ],
             loadAction: { url: 'commissionconfigs/all/x' },
             formConfig: this.commissionConfigFormConfig,
-            // realTime: true, // Disabled: testing realtime on transactions table only
+            realTime: true,
             entityName: 'CommissionConfig'
         };
         // Employee commission configs child table
@@ -18095,7 +18141,7 @@ class PayrollService {
             ],
             loadAction: { url: 'commissionentries/all/x' },
             formConfig: this.commissionEntryFormConfig,
-            // realTime: true, // Disabled: testing realtime on transactions table only
+            realTime: true,
             entityName: 'CommissionEntry'
         };
         // Employee commission entries child table
@@ -18151,7 +18197,7 @@ class PayrollService {
             ],
             loadAction: { url: 'salaryadvances/all/x' },
             formConfig: this.salaryAdvanceFormConfig,
-            // realTime: true, // Disabled: testing realtime on transactions table only
+            realTime: true,
             entityName: 'SalaryAdvance'
         };
         // Employee salary advances child table
@@ -18208,7 +18254,7 @@ class PayrollService {
             ],
             loadAction: { url: 'overtimeentries/all/x' },
             formConfig: this.overtimeEntryFormConfig,
-            // realTime: true, // Disabled: testing realtime on transactions table only
+            realTime: true,
             entityName: 'OvertimeEntry'
         };
         // Employee overtime entries child table
@@ -18686,7 +18732,7 @@ class ProductionService {
             ],
             loadAction: { url: 'productionrecipes/all/x' },
             formConfig: this.recipeFormConfig,
-            // realTime: true, // Disabled: testing realtime on transactions table only
+            realTime: true,
             entityName: 'ProductionRecipe'
         };
         // ==================== PRODUCTION ORDERS ====================