tin-spa 20.5.2 → 20.5.6

package/fesm2022/tin-spa.mjs

@@ -1484,6 +1484,9 @@ class SignalRService {
         this.onDataReconnected = null;
     }
     startConnection(hubUrl, token) {
+        // Changed: Skip if already connected, connecting, or reconnecting to avoid aborting in-progress negotiation
+        if (this.hubConnection && this.hubConnection.state !== signalR.HubConnectionState.Disconnected)
+            return;
         if (this.hubConnection)
             this.stopConnection();
         this.hubConnection = new signalR.HubConnectionBuilder()
@@ -1503,8 +1506,9 @@ class SignalRService {
     }
     // Changed: Start data hub connection for real-time entity change broadcasts
     startDataConnection(hubUrl, token) {
-        if (this.dataHubConnection?.state === signalR.HubConnectionState.Connected)
-            return; // Changed: Skip if already connected
+        // Changed: Skip if already connected, connecting, or reconnecting to avoid aborting in-progress negotiation
+        if (this.dataHubConnection && this.dataHubConnection.state !== signalR.HubConnectionState.Disconnected)
+            return;
         if (this.dataHubConnection)
             this.stopDataConnection();
         this.dataHubConnection = new signalR.HubConnectionBuilder()
@@ -1616,10 +1620,10 @@ class AuthService {
     // Changed: Enhanced clearSession with optional server-side revocation
     clearSession(revokeOnServer = false) {
         if (revokeOnServer) {
-            // Changed: Revoke refresh tokens on server before clearing local state
-            const token = this.tokenSource.value;
-            if (token) {
-                this.httpService.Post('User/revoke', {}).subscribe({
+            // Changed: Revoke only this device's refresh token — other devices keep their sessions
+            const refreshToken = this.storage.getPersistent(Constants.AUTH_REFRESH_TOKEN);
+            if (refreshToken) {
+                this.httpService.Post('User/revoke', { refreshToken }).subscribe({
                     error: () => { } // Silently ignore errors during logout
                 });
             }
@@ -1763,6 +1767,15 @@ class AuthService {
         const refreshToken = this.storage.getPersistent(Constants.AUTH_REFRESH_TOKEN);
         return refreshToken !== null;
     }
+    // Shared entry point for any page that needs to auto-redirect authenticated users
+    // Returns true if session is active or was successfully restored via silent refresh
+    async tryRestoreSession() {
+        if (this.hasValidSession())
+            return true;
+        if (this.hasRefreshToken())
+            return await this.silentRefresh();
+        return false;
+    }
     // Changed: Silently refresh the JWT using the stored refresh token
     silentRefresh() {
         if (this.isRefreshing)
@@ -1783,18 +1796,25 @@ class AuthService {
                         resolve(true);
                     }
                     else {
-                        // Refresh token invalid — clear persistent data
-                        this.storage.removePersistent(Constants.AUTH_REFRESH_TOKEN);
-                        this.storage.removePersistent(Constants.AUTH_REFRESH_TOKEN_EXPIRE);
-                        this.storage.removePersistent(Constants.AUTH_REMEMBER_ME);
+                        // Changed: Only clear token if it still matches — another tab may have already rotated it
+                        const currentToken = this.storage.getPersistent(Constants.AUTH_REFRESH_TOKEN);
+                        if (currentToken === refreshToken) {
+                            this.storage.removePersistent(Constants.AUTH_REFRESH_TOKEN);
+                            this.storage.removePersistent(Constants.AUTH_REFRESH_TOKEN_EXPIRE);
+                            this.storage.removePersistent(Constants.AUTH_REMEMBER_ME);
+                        }
                         resolve(false);
                     }
                 },
                 error: () => {
                     this.isRefreshing = false;
-                    this.storage.removePersistent(Constants.AUTH_REFRESH_TOKEN);
-                    this.storage.removePersistent(Constants.AUTH_REFRESH_TOKEN_EXPIRE);
-                    this.storage.removePersistent(Constants.AUTH_REMEMBER_ME);
+                    // Changed: Only clear token if it still matches — another tab may have already rotated it
+                    const currentToken = this.storage.getPersistent(Constants.AUTH_REFRESH_TOKEN);
+                    if (currentToken === refreshToken) {
+                        this.storage.removePersistent(Constants.AUTH_REFRESH_TOKEN);
+                        this.storage.removePersistent(Constants.AUTH_REFRESH_TOKEN_EXPIRE);
+                        this.storage.removePersistent(Constants.AUTH_REMEMBER_ME);
+                    }
                     resolve(false);
                 }
             });
@@ -2451,7 +2471,9 @@ class DataServiceLib {
             ],
             loadAction: { url: 'suppliers/all/x' },
             formConfig: this.supplierFormConfig,
-            // realTime: true, // Disabled: testing realtime on transactions table only
+            allowUserKeepOpen: true, // Added: for testing — propagates to Create dialog (which has no detailsConfig of its own)
+            keepOpenBehavior: 'reset', // Added: for testing — reset form after create so user can capture next supplier
+            realTime: true, // Changed: Enabled for SignalR testing
             entityName: 'Supplier' // Changed: Match backend entity name for SignalR broadcasts
         };
         //--------------------------GPT Caches-------------------------
@@ -4047,7 +4069,9 @@ class AccountingService {
                     ]
                 },
                 { name: 'errorMessage', type: 'text', alias: 'Error',
-                    colors: [{ name: 'red', condition: (x) => !!x.errorMessage }] // Changed: Show error details in red
+                    colors: [
+                        { name: 'red', condition: (x) => !!x.errorMessage }
+                    ]
                 }
             ],
             buttons: [
@@ -4110,7 +4134,7 @@ class AccountingService {
             title: 'Financial Transaction',
             fixedTitle: true,
             fields: [
-                { name: 'transactionTypeID', type: 'select', alias: 'Transaction Type', required: true, detailsConfig: this.transactionTypeDetailsConfig,
+                { name: 'transactionTypeID', type: 'text-single', alias: 'Transaction Type', required: true, detailsConfig: this.transactionTypeDetailsConfig,
                     loadAction: { url: 'transactionTypes/list/x' },
                 },
                 { name: 'date', type: 'date', required: true },
@@ -4175,7 +4199,9 @@ class AccountingService {
             loadAction: { url: 'transactions/all/x' },
             formConfig: this.transactionFormConfig,
             realTime: true,
-            entityName: 'Transaction'
+            entityName: 'Transaction',
+            allowUserKeepOpen: true, // Added: shows Keep Open checkbox on transaction dialogs
+            keepOpenBehavior: 'reset', // Added: reset form after create so user can capture next transaction
         };
         // Changed: Search mode config for transactions — date range, description contains, account filter
         this.transactionSearchTableConfig = {
@@ -4186,7 +4212,7 @@ class AccountingService {
                     { name: 'dateTo', type: 'date', alias: 'To Date', show: true },
                     { name: 'description', type: 'text', alias: 'Description', show: true },
                     { name: 'accountID', type: 'select', alias: 'Account', show: true, loadAction: { url: 'accounts/list/x' } },
-                    { name: 'typeName', type: 'select', alias: 'Transaction Type', show: true, loadAction: { url: 'transactiontypes/list/x' } },
+                    { name: 'typeName', type: 'text-single', alias: 'Transaction Type', show: true, loadAction: { url: 'transactiontypes/list/x' } }, // Changed: text-single for type-to-search autocomplete
                 ],
                 searchAction: { url: 'transactions/search', method: 'post' }
             }
@@ -10760,6 +10786,7 @@ class DetailsDialogLite {
         this.authService = authService;
         this.tableConfigService = tableConfigService;
         this.autoRefreshEnabled = false;
+        this.userKeepOpen = false; // Added: runtime state for the user-controlled Keep Open checkbox
         this.titleAction = "View";
         this.loadByAction = false;
         this.files = [];
@@ -10983,9 +11010,15 @@ class DetailsDialogLite {
         }
         this.processButtonAction(button);
     }
+    // Added: returns the effective keepOpen value — user checkbox takes precedence when allowUserKeepOpen is enabled
+    effectiveKeepOpen(button) {
+        if (this.detailsConfig.allowUserKeepOpen)
+            return this.userKeepOpen;
+        return button.keepOpen ?? false;
+    }
     processButtonAction(button) {
         if (!button.action) {
-            if (!button.keepOpen) {
+            if (!this.effectiveKeepOpen(button)) { // Changed: use effectiveKeepOpen to respect user checkbox
                 this.dialogRef.close({ message: 'emit', data: this.details });
             }
             return;
@@ -11065,8 +11098,12 @@ class DetailsDialogLite {
                 if (button.onSuccess) {
                     button.onSuccess(apiResponse.data, this.details);
                 }
-                if (button.keepOpen) {
-                    if (button.name === 'create' && apiResponse.data) {
+                if (this.effectiveKeepOpen(button)) { // Changed: use effectiveKeepOpen to respect user checkbox
+                    if (button.name === 'create' && this.detailsConfig.allowUserKeepOpen && this.userKeepOpen && this.detailsConfig.keepOpenBehavior === 'reset') {
+                        // Changed: User checkbox keep-open on create with 'reset' behavior — clear form for next capture, stay in create mode
+                        this.details = Core.generateObject(this.formConfig.fields);
+                    }
+                    else if (button.name === 'create' && apiResponse.data) {
                         this.details = apiResponse.data;
                         if (this.detailsConfig.heroField && apiResponse.data[this.detailsConfig.heroField]) {
                             this.detailsConfig.heroValue = apiResponse.data[this.detailsConfig.heroField];
@@ -11111,11 +11148,11 @@ class DetailsDialogLite {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: DetailsDialogLite, 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: DetailsDialogLite, isStandalone: false, selector: "spa-detailsDialog-lite", 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        <spa-check *ngIf=\"detailsConfig.autoRefreshConfig\" display=\"Auto Refresh\" [(value)]=\"autoRefreshEnabled\" (valueChange)=\"toggleAutoRefresh()\"></spa-check>\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-lite\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              \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-lite>\r\n          </ng-template>\r\n        </spa-form>\r\n\r\n        <!-- \r\n        Lite Dialog should not implement tabs \r\n        PlaceHolder\r\n        \r\n        \r\n        \r\n        \r\n        \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", 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}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: i8.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: CheckComponent, selector: "spa-check", inputs: ["readonly", "display", "value", "infoMessage"], outputs: ["valueChange", "click", "check", "uncheck", "infoClick"] }, { 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: SelectLiteComponent, selector: "spa-select-lite" }, { 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: DetailsDialogLite, isStandalone: false, selector: "spa-detailsDialog-lite", 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        <spa-check *ngIf=\"detailsConfig.autoRefreshConfig\" display=\"Auto Refresh\" [(value)]=\"autoRefreshEnabled\" (valueChange)=\"toggleAutoRefresh()\"></spa-check>\r\n        <!-- Added: Keep Open checkbox \u2014 visible when developer enables allowUserKeepOpen -->\r\n        <spa-check *ngIf=\"detailsConfig.allowUserKeepOpen\" display=\"Keep Open\" [(value)]=\"userKeepOpen\"></spa-check>\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-lite\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              \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-lite>\r\n          </ng-template>\r\n        </spa-form>\r\n\r\n        <!-- \r\n        Lite Dialog should not implement tabs \r\n        PlaceHolder\r\n        \r\n        \r\n        \r\n        \r\n        \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", 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}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: i8.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: CheckComponent, selector: "spa-check", inputs: ["readonly", "display", "value", "infoMessage"], outputs: ["valueChange", "click", "check", "uncheck", "infoClick"] }, { 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: SelectLiteComponent, selector: "spa-select-lite" }, { 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: DetailsDialogLite, decorators: [{
             type: Component,
-            args: [{ selector: 'spa-detailsDialog-lite', standalone: false, 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        <spa-check *ngIf=\"detailsConfig.autoRefreshConfig\" display=\"Auto Refresh\" [(value)]=\"autoRefreshEnabled\" (valueChange)=\"toggleAutoRefresh()\"></spa-check>\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-lite\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              \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-lite>\r\n          </ng-template>\r\n        </spa-form>\r\n\r\n        <!-- \r\n        Lite Dialog should not implement tabs \r\n        PlaceHolder\r\n        \r\n        \r\n        \r\n        \r\n        \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", 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}mat-dialog-actions{flex-shrink:0;justify-content:flex-start}.paginator-hidden{display:none!important}\n"] }]
+            args: [{ selector: 'spa-detailsDialog-lite', standalone: false, 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        <spa-check *ngIf=\"detailsConfig.autoRefreshConfig\" display=\"Auto Refresh\" [(value)]=\"autoRefreshEnabled\" (valueChange)=\"toggleAutoRefresh()\"></spa-check>\r\n        <!-- Added: Keep Open checkbox \u2014 visible when developer enables allowUserKeepOpen -->\r\n        <spa-check *ngIf=\"detailsConfig.allowUserKeepOpen\" display=\"Keep Open\" [(value)]=\"userKeepOpen\"></spa-check>\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-lite\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              \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-lite>\r\n          </ng-template>\r\n        </spa-form>\r\n\r\n        <!-- \r\n        Lite Dialog should not implement tabs \r\n        PlaceHolder\r\n        \r\n        \r\n        \r\n        \r\n        \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", 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}mat-dialog-actions{flex-shrink:0;justify-content:flex-start}.paginator-hidden{display:none!important}\n"] }]
         }], ctorParameters: () => [{ type: i1$3.BreakpointObserver }, { type: LoaderService }, { type: DataServiceLib }, { type: MessageService }, { type: i1.MatDialogRef }, { type: DetailsDialogConfig, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -12257,12 +12294,16 @@ class TableLiteComponent {
         const buttonName = button.name;
         let btn = {
             ...button,
-            detailsConfig: button.detailsConfig ? button.detailsConfig : {
-                formConfig: this.config.formConfig,
-                stepConfig: this.config.stepConfig,
-                buttons: this.config.buttons,
-                heroField: this.config.heroField,
-                heroValue: this.config.heroValue,
+            detailsConfig: {
+                ...(button.detailsConfig ?? {
+                    formConfig: this.config.formConfig,
+                    stepConfig: this.config.stepConfig,
+                    buttons: this.config.buttons,
+                    heroField: this.config.heroField,
+                    heroValue: this.config.heroValue,
+                }),
+                allowUserKeepOpen: this.config.allowUserKeepOpen, // Changed: table config is the single source of truth for this setting
+                keepOpenBehavior: this.config.keepOpenBehavior, // Changed: propagate create behavior preference from table config
             }
         };
         this.dialogService.openConfiguredDetailsDialog(btn, row, DetailsDialogLite).subscribe(result => {
@@ -12512,6 +12553,7 @@ class DetailsDialogInternal {
         this.authService = authService;
         this.tableConfigService = tableConfigService;
         this.autoRefreshEnabled = false;
+        this.userKeepOpen = false; // Added: runtime state for the user-controlled Keep Open checkbox
         this.titleAction = "View";
         this.loadByAction = false;
         this.files = [];
@@ -12727,9 +12769,15 @@ class DetailsDialogInternal {
         }
         this.processButtonAction(button);
     }
+    // Added: returns the effective keepOpen value — user checkbox takes precedence when allowUserKeepOpen is enabled
+    effectiveKeepOpen(button) {
+        if (this.detailsConfig.allowUserKeepOpen)
+            return this.userKeepOpen;
+        return button.keepOpen ?? false;
+    }
     processButtonAction(button) {
         if (!button.action) {
-            if (!button.keepOpen) {
+            if (!this.effectiveKeepOpen(button)) { // Changed: use effectiveKeepOpen to respect user checkbox
                 this.dialogRef.close({ message: 'emit', data: this.details });
             }
             return;
@@ -12809,8 +12857,12 @@ class DetailsDialogInternal {
                 if (button.onSuccess) {
                     button.onSuccess(apiResponse.data, this.details);
                 }
-                if (button.keepOpen) {
-                    if (button.name === 'create' && apiResponse.data) {
+                if (this.effectiveKeepOpen(button)) { // Changed: use effectiveKeepOpen to respect user checkbox
+                    if (button.name === 'create' && this.detailsConfig.allowUserKeepOpen && this.userKeepOpen && this.detailsConfig.keepOpenBehavior === 'reset') {
+                        // Changed: User checkbox keep-open on create with 'reset' behavior — clear form for next capture, stay in create mode
+                        this.details = Core.generateObject(this.formConfig.fields);
+                    }
+                    else if (button.name === 'create' && apiResponse.data) {
                         this.details = apiResponse.data;
                         if (this.detailsConfig.heroField && apiResponse.data[this.detailsConfig.heroField]) {
                             this.detailsConfig.heroValue = apiResponse.data[this.detailsConfig.heroField];
@@ -12855,11 +12907,11 @@ class DetailsDialogInternal {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: DetailsDialogInternal, 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: DetailsDialogInternal, isStandalone: false, selector: "spa-detailsDialog-internal", 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        <spa-check *ngIf=\"detailsConfig.autoRefreshConfig\" display=\"Auto Refresh\" [(value)]=\"autoRefreshEnabled\" (valueChange)=\"toggleAutoRefresh()\"></spa-check>\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-internal\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-internal>\r\n          </ng-template>\r\n        </spa-form>\r\n\r\n        <!-- Changed: Replace mat-tab-group with spa-tabs-lite component -->\r\n        <spa-tabs-lite \r\n          *ngIf=\"tableConfigs\"\r\n          [tableConfigs]=\"tableConfigs\"\r\n          [reload]=\"tableReload\"\r\n          [parentDetails]=\"details\"\r\n          (formRefresh)=\"loadData(formConfig.loadAction, false)\">\r\n        </spa-tabs-lite>\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}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: i8.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: CheckComponent, selector: "spa-check", inputs: ["readonly", "display", "value", "infoMessage"], outputs: ["valueChange", "click", "check", "uncheck", "infoClick"] }, { 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: SelectInternalComponent, selector: "spa-select-internal", inputs: ["detailsConfig"] }, { kind: "component", type: TabsLiteComponent, selector: "spa-tabs-lite", inputs: ["tableConfigs", "reload", "parentDetails"], 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: DetailsDialogInternal, isStandalone: false, selector: "spa-detailsDialog-internal", 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        <spa-check *ngIf=\"detailsConfig.autoRefreshConfig\" display=\"Auto Refresh\" [(value)]=\"autoRefreshEnabled\" (valueChange)=\"toggleAutoRefresh()\"></spa-check>\r\n        <!-- Added: Keep Open checkbox \u2014 visible when developer enables allowUserKeepOpen -->\r\n        <spa-check *ngIf=\"detailsConfig.allowUserKeepOpen\" display=\"Keep Open\" [(value)]=\"userKeepOpen\"></spa-check>\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-internal\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-internal>\r\n          </ng-template>\r\n        </spa-form>\r\n\r\n        <!-- Changed: Replace mat-tab-group with spa-tabs-lite component -->\r\n        <spa-tabs-lite \r\n          *ngIf=\"tableConfigs\"\r\n          [tableConfigs]=\"tableConfigs\"\r\n          [reload]=\"tableReload\"\r\n          [parentDetails]=\"details\"\r\n          (formRefresh)=\"loadData(formConfig.loadAction, false)\">\r\n        </spa-tabs-lite>\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}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: i8.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: CheckComponent, selector: "spa-check", inputs: ["readonly", "display", "value", "infoMessage"], outputs: ["valueChange", "click", "check", "uncheck", "infoClick"] }, { 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: SelectInternalComponent, selector: "spa-select-internal", inputs: ["detailsConfig"] }, { kind: "component", type: TabsLiteComponent, selector: "spa-tabs-lite", inputs: ["tableConfigs", "reload", "parentDetails"], 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: DetailsDialogInternal, decorators: [{
             type: Component,
-            args: [{ selector: 'spa-detailsDialog-internal', standalone: false, 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        <spa-check *ngIf=\"detailsConfig.autoRefreshConfig\" display=\"Auto Refresh\" [(value)]=\"autoRefreshEnabled\" (valueChange)=\"toggleAutoRefresh()\"></spa-check>\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-internal\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-internal>\r\n          </ng-template>\r\n        </spa-form>\r\n\r\n        <!-- Changed: Replace mat-tab-group with spa-tabs-lite component -->\r\n        <spa-tabs-lite \r\n          *ngIf=\"tableConfigs\"\r\n          [tableConfigs]=\"tableConfigs\"\r\n          [reload]=\"tableReload\"\r\n          [parentDetails]=\"details\"\r\n          (formRefresh)=\"loadData(formConfig.loadAction, false)\">\r\n        </spa-tabs-lite>\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}mat-dialog-actions{flex-shrink:0;justify-content:flex-start}.paginator-hidden{display:none!important}\n"] }]
+            args: [{ selector: 'spa-detailsDialog-internal', standalone: false, 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        <spa-check *ngIf=\"detailsConfig.autoRefreshConfig\" display=\"Auto Refresh\" [(value)]=\"autoRefreshEnabled\" (valueChange)=\"toggleAutoRefresh()\"></spa-check>\r\n        <!-- Added: Keep Open checkbox \u2014 visible when developer enables allowUserKeepOpen -->\r\n        <spa-check *ngIf=\"detailsConfig.allowUserKeepOpen\" display=\"Keep Open\" [(value)]=\"userKeepOpen\"></spa-check>\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-internal\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-internal>\r\n          </ng-template>\r\n        </spa-form>\r\n\r\n        <!-- Changed: Replace mat-tab-group with spa-tabs-lite component -->\r\n        <spa-tabs-lite \r\n          *ngIf=\"tableConfigs\"\r\n          [tableConfigs]=\"tableConfigs\"\r\n          [reload]=\"tableReload\"\r\n          [parentDetails]=\"details\"\r\n          (formRefresh)=\"loadData(formConfig.loadAction, false)\">\r\n        </spa-tabs-lite>\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}mat-dialog-actions{flex-shrink:0;justify-content:flex-start}.paginator-hidden{display:none!important}\n"] }]
         }], ctorParameters: () => [{ type: i1$3.BreakpointObserver }, { type: LoaderService }, { type: DataServiceLib }, { type: MessageService }, { type: i1.MatDialogRef }, { type: DetailsDialogConfig, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -13172,12 +13224,16 @@ class TableInternalComponent {
         const buttonName = button.name;
         let btn = {
             ...button,
-            detailsConfig: button.detailsConfig ? button.detailsConfig : {
-                formConfig: this.config.formConfig,
-                stepConfig: this.config.stepConfig,
-                buttons: this.config.buttons,
-                heroField: this.config.heroField,
-                heroValue: this.config.heroValue,
+            detailsConfig: {
+                ...(button.detailsConfig ?? {
+                    formConfig: this.config.formConfig,
+                    stepConfig: this.config.stepConfig,
+                    buttons: this.config.buttons,
+                    heroField: this.config.heroField,
+                    heroValue: this.config.heroValue,
+                }),
+                allowUserKeepOpen: this.config.allowUserKeepOpen, // Changed: table config is the single source of truth for this setting
+                keepOpenBehavior: this.config.keepOpenBehavior, // Changed: propagate create behavior preference from table config
             }
         };
         this.dialogService.openConfiguredDetailsDialog(btn, row, DetailsDialogInternal).subscribe(result => {
@@ -13501,6 +13557,7 @@ class DetailsDialog {
         this.authService = authService;
         this.tableConfigService = tableConfigService;
         this.autoRefreshEnabled = false;
+        this.userKeepOpen = false; // Added: runtime state for the user-controlled Keep Open checkbox
         this.titleAction = "View";
         this.loadByAction = false;
         this.files = [];
@@ -13733,9 +13790,15 @@ class DetailsDialog {
         }
         this.processButtonAction(button);
     }
+    // Added: returns the effective keepOpen value — user checkbox takes precedence when allowUserKeepOpen is enabled
+    effectiveKeepOpen(button) {
+        if (this.detailsConfig.allowUserKeepOpen)
+            return this.userKeepOpen;
+        return button.keepOpen ?? false;
+    }
     processButtonAction(button) {
         if (!button.action) {
-            if (!button.keepOpen) {
+            if (!this.effectiveKeepOpen(button)) { // Changed: use effectiveKeepOpen to respect user checkbox
                 this.dialogRef.close({ message: 'emit', data: this.details });
             }
             return;
@@ -13815,7 +13878,7 @@ class DetailsDialog {
                 if (button.onSuccess) {
                     button.onSuccess(apiResponse.data, this.details);
                 }
-                if (button.keepOpen) {
+                if (this.effectiveKeepOpen(button)) { // Changed: use effectiveKeepOpen to respect user checkbox
                     if (button.resetMode) {
                         // Changed: Reset dialog to specified mode (e.g., Clear → create)
                         this.details = Core.generateObject(this.formConfig.fields);
@@ -13824,6 +13887,10 @@ class DetailsDialog {
                         this.isLoadComplete = true;
                         this.setTitleAction();
                     }
+                    else if (button.name === 'create' && this.detailsConfig.allowUserKeepOpen && this.userKeepOpen && this.detailsConfig.keepOpenBehavior === 'reset') {
+                        // Changed: User checkbox keep-open on create with 'reset' behavior — clear form for next capture, stay in create mode
+                        this.details = Core.generateObject(this.formConfig.fields);
+                    }
                     else if (button.name === 'create' && apiResponse.data) {
                         this.details = apiResponse.data;
                         if (this.detailsConfig.heroField && apiResponse.data[this.detailsConfig.heroField]) {
@@ -13884,11 +13951,11 @@ class DetailsDialog {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: DetailsDialog, deps: [{ token: i1$3.BreakpointObserver }, { token: LoaderService }, { token: DataServiceLib }, { token: MessageService }, { token: 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        <spa-check *ngIf=\"detailsConfig.autoRefreshConfig\" display=\"Auto Refresh\" [(value)]=\"autoRefreshEnabled\" (valueChange)=\"toggleAutoRefresh()\"></spa-check>\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: Replace mat-tab-group with spa-tabs-internal component -->\r\n        <spa-tabs-internal\r\n          *ngIf=\"tableConfigs && !(detailsConfig.hideTablesInCreateMode && formConfig?.mode === 'create')\"\r\n          [tableConfigs]=\"tableConfigs\"\r\n          [reload]=\"tableReload\"\r\n          [parentDetails]=\"details\"\r\n          (formRefresh)=\"loadData(formConfig.loadAction, false)\">\r\n        </spa-tabs-internal>\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-internal{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: i8.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: CheckComponent, selector: "spa-check", inputs: ["readonly", "display", "value", "infoMessage"], outputs: ["valueChange", "click", "check", "uncheck", "infoClick"] }, { 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: TabsInternalComponent, selector: "spa-tabs-internal", inputs: ["tableConfigs", "reload", "parentDetails"], 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        <spa-check *ngIf=\"detailsConfig.autoRefreshConfig\" display=\"Auto Refresh\" [(value)]=\"autoRefreshEnabled\" (valueChange)=\"toggleAutoRefresh()\"></spa-check>\r\n        <!-- Added: Keep Open checkbox \u2014 visible when developer enables allowUserKeepOpen; user controls whether dialog closes after action -->\r\n        <spa-check *ngIf=\"detailsConfig.allowUserKeepOpen\" display=\"Keep Open\" [(value)]=\"userKeepOpen\"></spa-check>\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: Replace mat-tab-group with spa-tabs-internal component -->\r\n        <spa-tabs-internal\r\n          *ngIf=\"tableConfigs && !(detailsConfig.hideTablesInCreateMode && formConfig?.mode === 'create')\"\r\n          [tableConfigs]=\"tableConfigs\"\r\n          [reload]=\"tableReload\"\r\n          [parentDetails]=\"details\"\r\n          (formRefresh)=\"loadData(formConfig.loadAction, false)\">\r\n        </spa-tabs-internal>\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-internal{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: i8.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: CheckComponent, selector: "spa-check", inputs: ["readonly", "display", "value", "infoMessage"], outputs: ["valueChange", "click", "check", "uncheck", "infoClick"] }, { 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: TabsInternalComponent, selector: "spa-tabs-internal", inputs: ["tableConfigs", "reload", "parentDetails"], 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,
-            args: [{ selector: 'spa-detailsDialog', standalone: false, 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        <spa-check *ngIf=\"detailsConfig.autoRefreshConfig\" display=\"Auto Refresh\" [(value)]=\"autoRefreshEnabled\" (valueChange)=\"toggleAutoRefresh()\"></spa-check>\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: Replace mat-tab-group with spa-tabs-internal component -->\r\n        <spa-tabs-internal\r\n          *ngIf=\"tableConfigs && !(detailsConfig.hideTablesInCreateMode && formConfig?.mode === 'create')\"\r\n          [tableConfigs]=\"tableConfigs\"\r\n          [reload]=\"tableReload\"\r\n          [parentDetails]=\"details\"\r\n          (formRefresh)=\"loadData(formConfig.loadAction, false)\">\r\n        </spa-tabs-internal>\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-internal{flex:1;display:flex;flex-direction:column}mat-dialog-actions{flex-shrink:0;justify-content:flex-start}.paginator-hidden{display:none!important}\n"] }]
+            args: [{ selector: 'spa-detailsDialog', standalone: false, 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        <spa-check *ngIf=\"detailsConfig.autoRefreshConfig\" display=\"Auto Refresh\" [(value)]=\"autoRefreshEnabled\" (valueChange)=\"toggleAutoRefresh()\"></spa-check>\r\n        <!-- Added: Keep Open checkbox \u2014 visible when developer enables allowUserKeepOpen; user controls whether dialog closes after action -->\r\n        <spa-check *ngIf=\"detailsConfig.allowUserKeepOpen\" display=\"Keep Open\" [(value)]=\"userKeepOpen\"></spa-check>\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: Replace mat-tab-group with spa-tabs-internal component -->\r\n        <spa-tabs-internal\r\n          *ngIf=\"tableConfigs && !(detailsConfig.hideTablesInCreateMode && formConfig?.mode === 'create')\"\r\n          [tableConfigs]=\"tableConfigs\"\r\n          [reload]=\"tableReload\"\r\n          [parentDetails]=\"details\"\r\n          (formRefresh)=\"loadData(formConfig.loadAction, false)\">\r\n        </spa-tabs-internal>\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-internal{flex:1;display:flex;flex-direction:column}mat-dialog-actions{flex-shrink:0;justify-content:flex-start}.paginator-hidden{display:none!important}\n"] }]
         }], ctorParameters: () => [{ type: i1$3.BreakpointObserver }, { type: LoaderService }, { type: DataServiceLib }, { type: MessageService }, { type: i1.MatDialogRef }, { type: DetailsDialogConfig, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -14201,12 +14268,16 @@ class TableComponent {
         const buttonName = button.name;
         let btn = {
             ...button,
-            detailsConfig: button.detailsConfig ? button.detailsConfig : {
-                formConfig: this.config.formConfig,
-                stepConfig: this.config.stepConfig,
-                buttons: this.config.buttons,
-                heroField: this.config.heroField,
-                heroValue: this.config.heroValue,
+            detailsConfig: {
+                ...(button.detailsConfig ?? {
+                    formConfig: this.config.formConfig,
+                    stepConfig: this.config.stepConfig,
+                    buttons: this.config.buttons,
+                    heroField: this.config.heroField,
+                    heroValue: this.config.heroValue,
+                }),
+                allowUserKeepOpen: this.config.allowUserKeepOpen, // Changed: table config is the single source of truth for this setting
+                keepOpenBehavior: this.config.keepOpenBehavior, // Changed: propagate create behavior preference from table config
             }
         };
         this.dialogService.openConfiguredDetailsDialog(btn, row, DetailsDialog).subscribe(result => {
@@ -16510,6 +16581,108 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                 type: Input
             }] } });
 
+class SpaLandingComponent {
+    constructor(router, authService, el, sanitizer // Changed: inject sanitizer for safe SVG rendering
+    ) {
+        this.router = router;
+        this.authService = authService;
+        this.el = el;
+        this.sanitizer = sanitizer;
+        this.mobileMenuOpen = false;
+        this.navScrolled = false;
+        this.currentYear = new Date().getFullYear(); // Used in footer copyright
+        this.observer = null;
+    }
+    // Sanitizes the navBrand SVG string so Angular allows [innerHTML] binding (developer config, not user input)
+    // Changed: inject width/height before sanitising — CSS ::ng-deep cannot reach innerHTML content in library builds
+    get safeNavBrandSvg() {
+        if (!this.config.navBrand?.svgMarkup)
+            return null;
+        const sized = this.config.navBrand.svgMarkup.replace(/^<svg/, '<svg width="36" height="36"');
+        return this.sanitizer.bypassSecurityTrustHtml(sized);
+    }
+    // Sanitizes the hero watermark SVG string
+    get safeHeroWatermarkSvg() {
+        return this.config.hero.watermarkSvg
+            ? this.sanitizer.bypassSecurityTrustHtml(this.config.hero.watermarkSvg)
+            : null;
+    }
+    // Sanitizes the footer brand SVG string
+    // Changed: inject width/height before sanitising — same encapsulation fix as navBrand
+    get safeFooterBrandSvg() {
+        if (!this.config.footerBrand?.svgMarkup)
+            return null;
+        const sized = this.config.footerBrand.svgMarkup.replace(/^<svg/, '<svg width="36" height="36"');
+        return this.sanitizer.bypassSecurityTrustHtml(sized);
+    }
+    ngOnInit() {
+        // Apply brand colors as CSS variables on the host element so all child rules inherit them
+        this.applyColors();
+        // Restore session if possible and redirect to home
+        this.authService.tryRestoreSession().then(success => {
+            if (success)
+                this.router.navigate(['home']);
+        });
+    }
+    ngAfterViewInit() {
+        // Scroll-triggered fade-in for sections with lp-animate class
+        this.observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting)
+                    entry.target.classList.add('lp-visible');
+            });
+        }, { threshold: 0.1 });
+        // Observe only within this component's DOM to avoid affecting other pages
+        this.el.nativeElement.querySelectorAll('.lp-animate').forEach((el) => {
+            this.observer?.observe(el);
+        });
+    }
+    ngOnDestroy() {
+        this.observer?.disconnect();
+    }
+    onWindowScroll() {
+        // Add frosted-glass background to navbar after scrolling past hero
+        this.navScrolled = window.scrollY > 50;
+    }
+    scrollToSection(target) {
+        this.mobileMenuOpen = false; // Close mobile menu on nav click
+        const element = document.getElementById(target);
+        element?.scrollIntoView({ behavior: 'smooth' });
+    }
+    toggleMobileMenu() {
+        this.mobileMenuOpen = !this.mobileMenuOpen;
+    }
+    navigateTo(path) {
+        this.router.navigate([path]);
+        this.mobileMenuOpen = false;
+    }
+    // Returns light tinted background for feature icon (hex + '20' = ~12% opacity)
+    iconBg(hex) {
+        return hex + '20';
+    }
+    // Sets CSS custom properties on host element so child rules use app-specific brand colors
+    applyColors() {
+        const s = this.el.nativeElement.style;
+        const c = this.config.colors;
+        s.setProperty('--lp-primary', c.primary);
+        s.setProperty('--lp-primary-dark', c.primaryDark);
+        s.setProperty('--lp-primary-light', c.primaryLight);
+        s.setProperty('--lp-secondary', c.secondary);
+        s.setProperty('--lp-secondary-light', c.secondaryLight);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SpaLandingComponent, deps: [{ token: i1$2.Router }, { token: AuthService }, { token: i0.ElementRef }, { token: i1$5.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: SpaLandingComponent, isStandalone: false, selector: "spa-landing", inputs: { config: "config" }, host: { listeners: { "window:scroll": "onWindowScroll()" } }, ngImport: i0, template: "<!-- ===== NAVBAR ===== -->\n<nav class=\"lp-navbar\" [class.lp-navbar-scrolled]=\"navScrolled\">\n  <div class=\"lp-container lp-nav-inner\">\n    <!-- Brand: custom SVG override OR default img+name -->\n    <div class=\"lp-nav-brand\" (click)=\"scrollToSection('lp-hero')\">\n      <ng-container *ngIf=\"config.navBrand; else defaultNavBrand\">\n        <span class=\"lp-nav-brand-svg\" [innerHTML]=\"safeNavBrandSvg\"></span>\n        <div *ngIf=\"config.navBrand.wordmarkLine1\" class=\"lp-nav-brand-wordmark\">\n          <span class=\"lp-nav-wordmark-line1\">{{ config.navBrand.wordmarkLine1 }}</span>\n          <span *ngIf=\"config.navBrand.wordmarkLine2\" class=\"lp-nav-wordmark-line2\">{{ config.navBrand.wordmarkLine2 }}</span>\n        </div>\n      </ng-container>\n      <ng-template #defaultNavBrand>\n        <img [src]=\"config.logoSrc\" [alt]=\"config.appName\" class=\"lp-nav-logo\">\n        <span class=\"lp-nav-brand-text\">{{ config.appName }}</span>\n      </ng-template>\n    </div>\n    <!-- Desktop nav links -->\n    <div class=\"lp-nav-links\">\n      <a *ngFor=\"let link of config.navLinks\" (click)=\"scrollToSection(link.target)\">{{ link.label }}</a>\n    </div>\n    <!-- Mobile menu overlay -->\n    <div class=\"lp-mobile-menu\" [class.lp-mobile-menu-open]=\"mobileMenuOpen\">\n      <a *ngFor=\"let link of config.navLinks\" (click)=\"scrollToSection(link.target)\">{{ link.label }}</a>\n      <div class=\"lp-mobile-auth\">\n        <a class=\"lp-nav-login\" (click)=\"navigateTo('login')\">Log in</a>\n        <button class=\"lp-btn lp-btn-primary\" (click)=\"navigateTo(config.hero.primaryCTARoute || 'signup')\">Get Started</button>\n      </div>\n    </div>\n    <!-- Desktop auth -->\n    <div class=\"lp-nav-auth\">\n      <a class=\"lp-nav-login\" (click)=\"navigateTo('login')\">Log in</a>\n      <button class=\"lp-btn lp-btn-primary lp-btn-sm\" (click)=\"navigateTo(config.hero.primaryCTARoute || 'signup')\">Get Started</button>\n    </div>\n    <!-- Hamburger for mobile -->\n    <button class=\"lp-hamburger\" (click)=\"toggleMobileMenu()\" [class.lp-hamburger-open]=\"mobileMenuOpen\">\n      <span></span><span></span><span></span>\n    </button>\n  </div>\n</nav>\n\n<!-- ===== HERO ===== -->\n<section id=\"lp-hero\" class=\"lp-hero-bg\" [class.lp-hero-split]=\"config.hero.layout === 'split'\">\n  <!-- Optional faded watermark SVG (e.g. company logo) -->\n  <!-- Changed: wrapper div gets Angular scoping attribute; inner div holds innerHTML so svg size CSS applies to scoped .lp-hero-watermark-inner -->\n  <div *ngIf=\"config.hero.watermarkSvg\" class=\"lp-hero-watermark\" aria-hidden=\"true\">\n    <div class=\"lp-hero-watermark-inner\" [innerHTML]=\"safeHeroWatermarkSvg\"></div>\n  </div>\n\n  <div class=\"lp-container lp-hero-content\">\n    <!-- Left / centered column: brand, headline, CTAs -->\n    <div class=\"lp-hero-main\">\n      <!-- App brand: logo + name + decorative divider -->\n      <div class=\"lp-hero-brand\">\n        <div class=\"lp-hero-brand-logo\">\n          <img [src]=\"config.logoSrc\" [alt]=\"config.appName\" class=\"lp-hero-brand-icon\">\n          <span class=\"lp-hero-brand-name\">{{ config.appName }}</span>\n        </div>\n        <div class=\"lp-hero-divider\" aria-hidden=\"true\">\n          <span class=\"lp-hero-divider-line\"></span>\n          <span class=\"lp-hero-divider-dot\"></span>\n          <span class=\"lp-hero-divider-line\"></span>\n        </div>\n      </div>\n      <!-- Hero text: headline, subtitle, CTAs, trust signals -->\n      <div class=\"lp-hero-text\">\n        <div *ngIf=\"config.hero.badge\" class=\"lp-hero-badge\">{{ config.hero.badge }}</div>\n        <h1>{{ config.hero.headline }} <span class=\"lp-gradient-text\">{{ config.hero.gradientText }}</span></h1>\n        <p class=\"lp-hero-subtitle\">{{ config.hero.subtitle }}</p>\n        <div class=\"lp-hero-ctas\">\n          <button class=\"lp-btn lp-btn-primary lp-btn-lg\" (click)=\"navigateTo(config.hero.primaryCTARoute || 'signup')\">\n            {{ config.hero.primaryCTA }}\n          </button>\n          <button class=\"lp-btn lp-btn-outline lp-btn-lg\" (click)=\"scrollToSection(config.hero.secondaryCTASection)\">\n            {{ config.hero.secondaryCTA }}\n          </button>\n        </div>\n        <!-- Trust signals with checkmark SVG icons -->\n        <div class=\"lp-trust-signals\">\n          <div *ngFor=\"let signal of config.hero.trustSignals\" class=\"lp-trust-item\">\n            <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\">\n              <path d=\"M20 6L9 17l-5-5\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n            <span>{{ signal }}</span>\n          </div>\n        </div>\n      </div>\n    </div>\n    <!-- App visual: always rendered when projected content exists (stacked below hero text) -->\n    <!-- Changed: removed *ngIf so visual always renders below text; layout is always stacked/column -->\n    <div class=\"lp-hero-visual\">\n      <ng-content select=\"[lpHeroVisual]\"></ng-content>\n    </div>\n  </div>\n</section>\n\n<!-- ===== METRICS (optional) ===== -->\n<section *ngIf=\"config.metrics\" class=\"lp-section lp-animate\">\n  <div class=\"lp-container\">\n    <div class=\"lp-metrics-grid\">\n      <div *ngFor=\"let metric of config.metrics\" class=\"lp-metric-card\">\n        <div class=\"lp-metric-value\">{{ metric.value }}</div>\n        <div class=\"lp-metric-label\">{{ metric.label }}</div>\n      </div>\n    </div>\n  </div>\n</section>\n\n<!-- ===== FEATURES ===== -->\n<section id=\"lp-features\" class=\"lp-section lp-animate\">\n  <div class=\"lp-container\">\n    <div class=\"lp-section-header\">\n      <h2>{{ config.features.title }}</h2>\n      <p>{{ config.features.subtitle }}</p>\n    </div>\n    <div class=\"lp-features-grid\">\n      <div *ngFor=\"let feature of config.features.items\" class=\"lp-feature-card\">\n        <!-- Icon tint: hex + '20' = ~12% opacity background -->\n        <div class=\"lp-feature-icon\"\n             [style.background]=\"iconBg(feature.color)\"\n             [style.color]=\"feature.color\">\n          <span class=\"material-icons\">{{ feature.icon }}</span>\n        </div>\n        <h3 class=\"lp-feature-title\">{{ feature.title }}</h3>\n        <p class=\"lp-feature-desc\">{{ feature.description }}</p>\n      </div>\n    </div>\n  </div>\n</section>\n\n<!-- ===== WORKFLOW (optional) ===== -->\n<section *ngIf=\"config.workflow\" id=\"lp-workflow\" class=\"lp-section lp-section-alt lp-animate\">\n  <div class=\"lp-container\">\n    <div class=\"lp-section-header\">\n      <h2>{{ config.workflow!.title }}</h2>\n      <p *ngIf=\"config.workflow!.subtitle\">{{ config.workflow!.subtitle }}</p>\n    </div>\n\n    <!-- Road metaphor layout: horizontal road line with waypoints -->\n    <div *ngIf=\"config.workflow!.style === 'road'\" class=\"lp-workflow-road\">\n      <div class=\"lp-road-line\"></div>\n      <div *ngFor=\"let step of config.workflow!.steps\" class=\"lp-waypoint\">\n        <div class=\"lp-waypoint-marker\">\n          <span class=\"material-icons\">{{ step.icon }}</span>\n        </div>\n        <div class=\"lp-waypoint-number\">Step {{ step.number }}</div>\n        <div class=\"lp-waypoint-title\">{{ step.title }}</div>\n        <div class=\"lp-waypoint-desc\">{{ step.description }}</div>\n      </div>\n    </div>\n\n    <!-- Default steps grid layout -->\n    <div *ngIf=\"!config.workflow!.style || config.workflow!.style === 'steps'\" class=\"lp-steps-grid\">\n      <div *ngFor=\"let step of config.workflow!.steps; let i = index\" class=\"lp-step-card\">\n        <div class=\"lp-step-number\">{{ step.number }}</div>\n        <div class=\"lp-step-icon\">\n          <span class=\"material-icons\">{{ step.icon }}</span>\n        </div>\n        <h3 class=\"lp-step-title\">{{ step.title }}</h3>\n        <p class=\"lp-step-desc\">{{ step.description }}</p>\n        <!-- Connector line between steps, not after last -->\n        <div *ngIf=\"i < config.workflow!.steps.length - 1\" class=\"lp-step-connector\"></div>\n      </div>\n    </div>\n  </div>\n</section>\n\n<!-- ===== CUSTOM SECTION SLOT ===== -->\n<!-- Consumer projects app-specific sections here (fleet board, benefits rows, etc.)\n     using [lpCustomSection] attribute on a wrapper element -->\n<ng-content select=\"[lpCustomSection]\"></ng-content>\n\n<!-- ===== MODULES (optional) ===== -->\n<section *ngIf=\"config.modules\" id=\"lp-modules\" class=\"lp-section lp-section-alt lp-animate\">\n  <div class=\"lp-container\">\n    <div class=\"lp-section-header\">\n      <h2>{{ config.modules!.title }}</h2>\n      <p>{{ config.modules!.subtitle }}</p>\n    </div>\n    <div class=\"lp-modules-grid\">\n      <div *ngFor=\"let group of config.modules!.groups\" class=\"lp-module-group\">\n        <div class=\"lp-module-group-label\">{{ group.category }}</div>\n        <div class=\"lp-module-tiles\">\n          <div *ngFor=\"let tile of group.tiles\" class=\"lp-module-tile\">\n            <span class=\"material-icons\">{{ tile.icon }}</span>\n            <span>{{ tile.name }}</span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n\n<!-- ===== SECURITY (optional \u2014 dark background) ===== -->\n<section *ngIf=\"config.security\" class=\"lp-section lp-section-dark lp-animate\">\n  <div class=\"lp-container\">\n    <div class=\"lp-section-header lp-header-light\">\n      <h2>{{ config.security!.title }}</h2>\n      <p>{{ config.security!.subtitle }}</p>\n    </div>\n    <div class=\"lp-security-grid\">\n      <div *ngFor=\"let item of config.security!.items\" class=\"lp-security-card\">\n        <div class=\"lp-security-icon\">\n          <span class=\"material-icons\">{{ item.icon }}</span>\n        </div>\n        <h3>{{ item.title }}</h3>\n        <p>{{ item.description }}</p>\n      </div>\n    </div>\n  </div>\n</section>\n\n<!-- ===== TESTIMONIALS (optional) ===== -->\n<section *ngIf=\"config.testimonials\" class=\"lp-section lp-animate\">\n  <div class=\"lp-container\">\n    <div class=\"lp-section-header\">\n      <h2>{{ config.testimonials!.title }}</h2>\n      <p *ngIf=\"config.testimonials!.subtitle\">{{ config.testimonials!.subtitle }}</p>\n    </div>\n    <div class=\"lp-testimonials-grid\">\n      <div *ngFor=\"let item of config.testimonials!.items\" class=\"lp-testimonial-card\">\n        <div class=\"lp-stars\">\n          <span class=\"material-icons\">star</span>\n          <span class=\"material-icons\">star</span>\n          <span class=\"material-icons\">star</span>\n          <span class=\"material-icons\">star</span>\n          <span class=\"material-icons\">star</span>\n        </div>\n        <p class=\"lp-testimonial-quote\">\"{{ item.quote }}\"</p>\n        <div class=\"lp-testimonial-author\">\n          <div class=\"lp-author-avatar\">{{ item.authorInitials }}</div>\n          <div>\n            <div class=\"lp-author-name\">{{ item.authorName }}</div>\n            <div class=\"lp-author-role\">{{ item.authorRole }}</div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n\n<!-- ===== PRICING (optional) ===== -->\n<section *ngIf=\"config.pricing\" id=\"lp-pricing\" class=\"lp-section lp-animate\">\n  <div class=\"lp-container\">\n    <div class=\"lp-section-header\">\n      <h2>{{ config.pricing!.title }}</h2>\n      <p *ngIf=\"config.pricing!.subtitle\">{{ config.pricing!.subtitle }}</p>\n    </div>\n    <div class=\"lp-pricing-grid\">\n      <div *ngFor=\"let plan of config.pricing!.plans\"\n           class=\"lp-pricing-card\"\n           [class.lp-pricing-popular]=\"plan.popular\">\n        <div *ngIf=\"plan.popular\" class=\"lp-popular-badge\">Most Popular</div>\n        <div class=\"lp-pricing-header\">\n          <h3>{{ plan.name }}</h3>\n          <div class=\"lp-pricing-price\">\n            <span class=\"lp-price-amount\">{{ plan.price }}</span>\n            <span *ngIf=\"plan.period\" class=\"lp-price-period\">{{ plan.period }}</span>\n          </div>\n          <p class=\"lp-pricing-desc\">{{ plan.description }}</p>\n        </div>\n        <ul class=\"lp-pricing-features\">\n          <li *ngFor=\"let feature of plan.features\">{{ feature }}</li>\n        </ul>\n        <!-- Popular plans get primary button, others get outline -->\n        <button *ngIf=\"plan.popular\"\n                class=\"lp-btn lp-btn-primary lp-btn-block\"\n                (click)=\"plan.ctaRoute ? navigateTo(plan.ctaRoute) : scrollToSection(plan.ctaSection || '')\">\n          {{ plan.ctaLabel }}\n        </button>\n        <button *ngIf=\"!plan.popular\"\n                class=\"lp-btn lp-btn-outline lp-btn-block\"\n                (click)=\"plan.ctaRoute ? navigateTo(plan.ctaRoute) : scrollToSection(plan.ctaSection || '')\">\n          {{ plan.ctaLabel }}\n        </button>\n      </div>\n    </div>\n  </div>\n</section>\n\n<!-- ===== FINAL CTA BANNER (optional) ===== -->\n<section *ngIf=\"config.finalCta\" class=\"lp-final-cta lp-animate\">\n  <div class=\"lp-container lp-cta-content\">\n    <h2>{{ config.finalCta!.headline }}</h2>\n    <p>{{ config.finalCta!.subtitle }}</p>\n    <div class=\"lp-cta-buttons\">\n      <button class=\"lp-btn lp-btn-white lp-btn-lg\"\n              (click)=\"navigateTo(config.finalCta!.primaryCTARoute || 'signup')\">\n        {{ config.finalCta!.primaryCTA }}\n      </button>\n      <button *ngIf=\"config.finalCta!.secondaryCTA\"\n              class=\"lp-btn lp-btn-outline-white lp-btn-lg\"\n              (click)=\"scrollToSection(config.finalCta!.secondaryCTASection || '')\">\n        {{ config.finalCta!.secondaryCTA }}\n      </button>\n    </div>\n  </div>\n</section>\n\n<!-- ===== FOOTER ===== -->\n<footer class=\"lp-footer\" id=\"lp-footer\">\n  <div class=\"lp-container\">\n\n    <!-- Rich multi-column footer when footerColumns provided -->\n    <div *ngIf=\"config.footerColumns && config.footerColumns.length; else simpleFooter\" class=\"lp-footer-grid\">\n      <!-- Brand column -->\n      <div class=\"lp-footer-brand-col\">\n        <!-- Custom SVG footer brand OR default img+name -->\n        <ng-container *ngIf=\"config.footerBrand; else defaultFooterBrand\">\n          <div class=\"lp-footer-brand-custom\">\n            <span class=\"lp-footer-brand-svg\" [innerHTML]=\"safeFooterBrandSvg\"></span>\n            <div *ngIf=\"config.footerBrand.wordmarkLine1\" class=\"lp-footer-brand-wordmark\">\n              <span class=\"lp-footer-wordmark-line1\">{{ config.footerBrand.wordmarkLine1 }}</span>\n              <span *ngIf=\"config.footerBrand.wordmarkLine2\" class=\"lp-footer-wordmark-line2\">{{ config.footerBrand.wordmarkLine2 }}</span>\n            </div>\n          </div>\n        </ng-container>\n        <ng-template #defaultFooterBrand>\n          <div class=\"lp-footer-brand-default\">\n            <img [src]=\"config.logoSrc\" [alt]=\"config.appName\" class=\"lp-footer-logo\">\n            <span class=\"lp-footer-name\">{{ config.appName }}</span>\n          </div>\n        </ng-template>\n        <p *ngIf=\"config.footerTagline\" class=\"lp-footer-tagline\">{{ config.footerTagline }}</p>\n      </div>\n      <!-- Link columns -->\n      <div *ngFor=\"let col of config.footerColumns\" class=\"lp-footer-col\">\n        <h4>{{ col.title }}</h4>\n        <a *ngFor=\"let link of col.links\"\n           (click)=\"link.section ? scrollToSection(link.section) : (link.route ? navigateTo(link.route) : null)\">\n          {{ link.label }}\n        </a>\n      </div>\n    </div>\n\n    <!-- Simple single-row footer (default) -->\n    <ng-template #simpleFooter>\n      <div class=\"lp-footer-inner\">\n        <div class=\"lp-footer-brand\">\n          <img [src]=\"config.logoSrc\" [alt]=\"config.appName\" class=\"lp-footer-logo\">\n          <span class=\"lp-footer-name\">{{ config.appName }}</span>\n        </div>\n        <div class=\"lp-footer-links\">\n          <a (click)=\"navigateTo('login')\">Log in</a>\n          <a (click)=\"navigateTo(config.hero.primaryCTARoute || 'signup')\">Sign up</a>\n        </div>\n        <div class=\"lp-footer-copy\">\n          &copy; {{ currentYear }} {{ config.footerCompany || 'alsquare technologies' }}. All rights reserved.\n        </div>\n      </div>\n    </ng-template>\n\n    <!-- Footer bottom bar (shown for both layouts) -->\n    <div *ngIf=\"config.footerColumns && config.footerColumns.length\" class=\"lp-footer-bottom\">\n      <span>&copy; {{ currentYear }} {{ config.footerCompany || 'alsquare technologies' }}. All rights reserved.</span>\n    </div>\n  </div>\n</footer>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&display=swap\";:host{--lp-primary: #1E3A5F;--lp-primary-dark: #152C4A;--lp-primary-light: #EBF0F7;--lp-secondary: #F59E0B;--lp-secondary-light:#FEF3C7;--lp-dark: #0D1117;--lp-gray-800: #1F2937;--lp-gray-700: #374151;--lp-gray-600: #4B5563;--lp-gray-400: #9CA3AF;--lp-gray-200: #E5E7EB;--lp-gray-100: #F3F4F6;--lp-gray-50: #F9FAFB;--lp-white: #FFFFFF;--lp-radius: 12px;--lp-radius-sm: 8px;--lp-radius-lg: 20px;--lp-radius-xl: 28px;--lp-shadow-xs: 0 1px 2px rgba(0,0,0,.05);--lp-shadow: 0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05);--lp-shadow-md: 0 4px 8px rgba(0,0,0,.06), 0 2px 4px rgba(0,0,0,.04);--lp-shadow-lg: 0 12px 28px rgba(0,0,0,.1), 0 4px 8px rgba(0,0,0,.06);--lp-shadow-xl: 0 20px 40px rgba(0,0,0,.12), 0 8px 16px rgba(0,0,0,.07);--lp-ease: cubic-bezier(.4, 0, .2, 1);--lp-spring: cubic-bezier(.34, 1.56, .64, 1);display:block;font-family:Outfit,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:var(--lp-gray-700);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}.lp-container{max-width:1200px;margin:0 auto;padding:0 32px}.lp-navbar{position:fixed;top:0;left:0;right:0;z-index:1000;padding:18px 0;transition:background .3s var(--lp-ease),padding .3s var(--lp-ease),box-shadow .3s var(--lp-ease)}.lp-navbar-scrolled{background:#ffffffeb;backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);box-shadow:0 1px #0000000f,0 2px 8px #0000000a;padding:12px 0}.lp-nav-inner{display:flex;align-items:center;justify-content:space-between}.lp-nav-brand{display:flex;align-items:center;gap:10px;cursor:pointer;text-decoration:none}.lp-nav-logo{width:30px;height:30px;border-radius:7px;object-fit:contain}.lp-nav-brand-text{font-size:18px;font-weight:700;color:var(--lp-primary);letter-spacing:-.01em}.lp-nav-links{display:flex;align-items:center;gap:36px}.lp-nav-links a{font-size:14px;font-weight:500;color:var(--lp-gray-600);cursor:pointer;transition:color .2s;text-decoration:none;letter-spacing:.01em}.lp-nav-links a:hover{color:var(--lp-primary)}.lp-nav-auth{display:flex;align-items:center;gap:12px}.lp-nav-login{font-size:14px;font-weight:500;color:var(--lp-gray-600);cursor:pointer;transition:color .2s;text-decoration:none}.lp-nav-login:hover{color:var(--lp-primary)}.lp-hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px;z-index:1001}.lp-hamburger span{display:block;width:22px;height:2px;background:var(--lp-gray-700);border-radius:2px;transition:transform .3s var(--lp-ease),opacity .3s}.lp-hamburger-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}.lp-hamburger-open span:nth-child(2){opacity:0}.lp-hamburger-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}.lp-mobile-menu{display:none}.lp-mobile-auth{display:flex;flex-direction:column;gap:12px;margin-top:24px;padding-top:24px;border-top:1px solid var(--lp-gray-200)}.lp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:Outfit,sans-serif;font-size:14px;font-weight:600;padding:10px 22px;border-radius:var(--lp-radius-sm);border:none;cursor:pointer;transition:all .25s var(--lp-ease);text-decoration:none;white-space:nowrap;letter-spacing:.01em}.lp-btn-primary{background:var(--lp-primary);color:var(--lp-white);box-shadow:0 1px 3px #00000026,inset 0 1px #ffffff1f}.lp-btn-primary:hover{background:var(--lp-primary-dark);transform:translateY(-1px);box-shadow:0 6px 16px #0003,inset 0 1px #ffffff1f}.lp-btn-primary:active{transform:translateY(0)}.lp-btn-outline{background:transparent;color:var(--lp-primary);border:1.5px solid var(--lp-primary)}.lp-btn-outline:hover{background:var(--lp-primary);color:var(--lp-white);transform:translateY(-1px);box-shadow:0 4px 12px #00000026}.lp-btn-sm{padding:7px 16px;font-size:13px}.lp-btn-lg{padding:14px 32px;font-size:15px;border-radius:var(--lp-radius)}.lp-btn-block{width:100%}.lp-hero-bg{position:relative;overflow:hidden;padding:140px 0 100px;background:radial-gradient(ellipse 80% 60% at 60% -10%,color-mix(in srgb,var(--lp-primary) 8%,transparent) 0%,transparent 70%),radial-gradient(ellipse 60% 50% at -10% 80%,color-mix(in srgb,var(--lp-secondary) 6%,transparent) 0%,transparent 70%),linear-gradient(160deg,var(--lp-primary-light) 0%,#FAFBFF 45%,var(--lp-secondary-light) 100%);min-height:100vh;display:flex;align-items:center}.lp-hero-bg:before{content:\"\";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(0,0,0,.04) 1px,transparent 1px);background-size:32px 32px;pointer-events:none;-webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 40%,transparent 100%);mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 40%,transparent 100%)}.lp-hero-bg:after{content:\"\";position:absolute;width:700px;height:700px;border-radius:50%;background:color-mix(in srgb,var(--lp-primary) 5%,transparent);top:-200px;right:-150px;filter:blur(100px);pointer-events:none}.lp-hero-content{position:relative;z-index:1;text-align:center;width:100%}.lp-hero-badge{display:inline-flex;align-items:center;gap:6px;background:color-mix(in srgb,var(--lp-primary) 10%,transparent);color:var(--lp-primary);border:1px solid color-mix(in srgb,var(--lp-primary) 20%,transparent);border-radius:100px;padding:6px 16px;font-size:13px;font-weight:600;margin-bottom:20px;letter-spacing:.02em}.lp-hero-brand{margin-bottom:20px;text-align:center}.lp-hero-brand-logo{display:inline-flex;align-items:center;gap:14px;margin-bottom:12px}.lp-hero-brand-icon{height:52px;width:52px;border-radius:14px;object-fit:contain;box-shadow:0 4px 12px #0000001f}.lp-hero-brand-name{font-size:38px;font-weight:800;color:var(--lp-primary);letter-spacing:-.03em;font-family:Outfit,sans-serif}.lp-hero-divider{display:flex;align-items:center;justify-content:center;gap:10px}.lp-hero-divider-line{display:block;height:1px;width:40px;background:linear-gradient(90deg,transparent,var(--lp-primary),transparent);opacity:.3}.lp-hero-divider-dot{display:block;height:5px;width:5px;border-radius:50%;background:var(--lp-secondary);opacity:.8}.lp-hero-text{max-width:760px;margin:0 auto 64px}.lp-hero-text h1{font-family:Outfit,sans-serif;font-size:68px;font-weight:900;line-height:1.05;color:var(--lp-dark);margin:0 0 24px;letter-spacing:-.03em}.lp-gradient-text{background:linear-gradient(135deg,var(--lp-primary) 0%,var(--lp-secondary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.lp-hero-subtitle{font-size:19px;color:var(--lp-gray-600);line-height:1.65;font-weight:400;max-width:560px;margin:0 auto 36px}.lp-hero-ctas{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:32px;flex-wrap:wrap}.lp-trust-signals{display:flex;align-items:center;justify-content:center;gap:28px;flex-wrap:wrap}.lp-trust-item{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:500;color:var(--lp-gray-500, #6B7280)}.lp-trust-item svg{color:var(--lp-primary);flex-shrink:0}.lp-section{padding:100px 0;background:var(--lp-white)}.lp-section-alt{background:var(--lp-gray-50)}.lp-section-header{text-align:center;margin-bottom:64px}.lp-section-header h2{font-family:Outfit,sans-serif;font-size:42px;font-weight:800;color:var(--lp-dark);margin:0 0 14px;letter-spacing:-.025em;line-height:1.15}.lp-section-header p{font-size:17px;color:var(--lp-gray-600);max-width:540px;margin:0 auto;line-height:1.65}.lp-features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.lp-feature-card{background:var(--lp-white);border-radius:var(--lp-radius-lg);padding:36px 28px;transition:transform .25s var(--lp-ease),box-shadow .25s var(--lp-ease);border:1px solid var(--lp-gray-200);box-shadow:var(--lp-shadow-xs);position:relative;overflow:hidden}.lp-feature-card:before{content:\"\";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--lp-primary),var(--lp-secondary));transform:scaleX(0);transform-origin:left;transition:transform .3s var(--lp-ease);border-radius:3px 3px 0 0}.lp-feature-card:hover{transform:translateY(-5px);box-shadow:var(--lp-shadow-xl);border-color:transparent}.lp-feature-card:hover:before{transform:scaleX(1)}.lp-feature-icon{width:52px;height:52px;border-radius:var(--lp-radius-sm);display:flex;align-items:center;justify-content:center;margin-bottom:20px}.lp-feature-icon .material-icons{font-size:26px}.lp-feature-title{font-family:Outfit,sans-serif;font-size:17px;font-weight:700;color:var(--lp-dark);margin:0 0 10px;letter-spacing:-.01em}.lp-feature-desc{font-size:14px;color:var(--lp-gray-600);line-height:1.65;margin:0}.lp-steps-grid{display:flex;align-items:flex-start;justify-content:space-between;position:relative;gap:16px}.lp-step-card{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;padding:0 8px}.lp-step-number{font-size:11px;font-weight:700;color:var(--lp-secondary);text-transform:uppercase;letter-spacing:2px;margin-bottom:10px}.lp-step-icon{width:56px;height:56px;border-radius:50%;background:var(--lp-primary);display:flex;align-items:center;justify-content:center;margin-bottom:18px;box-shadow:0 4px 14px color-mix(in srgb,var(--lp-primary) 30%,transparent);border:3px solid var(--lp-white);position:relative;z-index:1}.lp-step-icon .material-icons{font-size:24px;color:var(--lp-white)}.lp-step-title{font-family:Outfit,sans-serif;font-size:15px;font-weight:700;color:var(--lp-dark);margin:0 0 8px;letter-spacing:-.01em}.lp-step-desc{font-size:13px;color:var(--lp-gray-600);line-height:1.55;margin:0}.lp-step-connector{position:absolute;top:40px;left:60%;width:80%;height:2px;background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--lp-secondary) 50%,transparent) 0px,color-mix(in srgb,var(--lp-secondary) 50%,transparent) 10px,transparent 10px,transparent 18px);pointer-events:none;z-index:0}.lp-metrics-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--lp-gray-200);border-radius:var(--lp-radius-lg);overflow:hidden;background:var(--lp-white);box-shadow:var(--lp-shadow)}.lp-metric-card{text-align:center;padding:40px 24px;border-right:1px solid var(--lp-gray-200);transition:background .2s}.lp-metric-card:last-child{border-right:none}.lp-metric-card:hover{background:var(--lp-gray-50)}.lp-metric-value{font-family:Outfit,sans-serif;font-size:48px;font-weight:900;color:var(--lp-primary);line-height:1;letter-spacing:-.03em;margin-bottom:8px}.lp-metric-label{font-size:14px;font-weight:500;color:var(--lp-gray-600)}.lp-modules-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.lp-module-group{background:var(--lp-white);border-radius:var(--lp-radius-lg);padding:28px 28px 24px;border:1px solid var(--lp-gray-200);box-shadow:var(--lp-shadow-xs);transition:box-shadow .2s}.lp-module-group:hover{box-shadow:var(--lp-shadow-md)}.lp-module-group-label{font-family:Outfit,sans-serif;font-size:11px;font-weight:700;color:var(--lp-primary);margin-bottom:16px;text-transform:uppercase;letter-spacing:1px}.lp-module-tiles{display:flex;flex-wrap:wrap;gap:8px}.lp-module-tile{display:inline-flex;align-items:center;gap:6px;background:var(--lp-gray-50);border:1px solid var(--lp-gray-200);padding:7px 13px;border-radius:100px;font-size:12px;font-weight:600;color:var(--lp-gray-700);transition:all .2s var(--lp-ease);cursor:default}.lp-module-tile:hover{background:color-mix(in srgb,var(--lp-primary) 6%,transparent);border-color:color-mix(in srgb,var(--lp-primary) 25%,transparent);color:var(--lp-primary);transform:translateY(-1px)}.lp-module-tile .material-icons{font-size:15px;color:var(--lp-primary)}.lp-footer{background:var(--lp-dark);padding:44px 0 36px;border-top:1px solid rgba(255,255,255,.04)}.lp-footer-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px}.lp-footer-brand{display:flex;align-items:center;gap:10px}.lp-footer-logo{width:30px;height:30px;border-radius:7px;object-fit:contain;opacity:.9}.lp-footer-name{font-family:Outfit,sans-serif;font-size:17px;font-weight:700;color:var(--lp-white);letter-spacing:-.01em}.lp-footer-links{display:flex;gap:28px}.lp-footer-links a{font-size:14px;font-weight:500;color:#ffffff80;cursor:pointer;text-decoration:none;transition:color .2s}.lp-footer-links a:hover{color:var(--lp-white)}.lp-footer-copy{font-size:13px;color:#ffffff59;width:100%;text-align:center;padding-top:20px;margin-top:4px;border-top:1px solid rgba(255,255,255,.06)}.lp-animate{opacity:0;transform:translateY(28px);transition:opacity .65s var(--lp-ease),transform .65s var(--lp-ease)}.lp-visible{opacity:1;transform:translateY(0)}.lp-visible .lp-feature-card:nth-child(1){transition-delay:0ms}.lp-visible .lp-feature-card:nth-child(2){transition-delay:60ms}.lp-visible .lp-feature-card:nth-child(3){transition-delay:.12s}.lp-visible .lp-feature-card:nth-child(4){transition-delay:.18s}.lp-visible .lp-feature-card:nth-child(5){transition-delay:.24s}.lp-visible .lp-feature-card:nth-child(6){transition-delay:.3s}.lp-visible .lp-step-card:nth-child(1){transition-delay:0ms}.lp-visible .lp-step-card:nth-child(2){transition-delay:80ms}.lp-visible .lp-step-card:nth-child(3){transition-delay:.16s}.lp-visible .lp-step-card:nth-child(4){transition-delay:.24s}.lp-visible .lp-metric-card:nth-child(1){transition-delay:0ms}.lp-visible .lp-metric-card:nth-child(2){transition-delay:60ms}.lp-visible .lp-metric-card:nth-child(3){transition-delay:.12s}.lp-visible .lp-metric-card:nth-child(4){transition-delay:.18s}@media (max-width: 1024px){.lp-hero-text h1{font-size:52px}.lp-section-header h2{font-size:36px}.lp-features-grid,.lp-metrics-grid{grid-template-columns:repeat(2,1fr)}.lp-metrics-grid .lp-metric-card:nth-child(2){border-right:none}.lp-metrics-grid .lp-metric-card:nth-child(3){border-top:1px solid var(--lp-gray-200)}.lp-metrics-grid .lp-metric-card:nth-child(4){border-top:1px solid var(--lp-gray-200)}.lp-steps-grid{flex-wrap:wrap;justify-content:center;gap:40px}.lp-step-connector{display:none}}@media (max-width: 767px){.lp-container{padding:0 20px}.lp-nav-links{display:none}.lp-hamburger{display:flex}.lp-mobile-auth{display:none}.lp-mobile-menu{display:none;position:fixed;inset:0;background:#fffffff7;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);flex-direction:column;align-items:center;justify-content:center;gap:28px;z-index:999}.lp-mobile-menu-open{display:flex}.lp-mobile-menu a{font-size:22px;font-weight:700;color:var(--lp-dark);cursor:pointer;text-decoration:none;letter-spacing:-.01em}.lp-hero-bg{padding:100px 0 60px;min-height:auto}.lp-hero-text h1{font-size:38px}.lp-hero-brand-name{font-size:28px}.lp-hero-subtitle{font-size:16px}.lp-hero-ctas{flex-direction:column}.lp-hero-ctas .lp-btn{width:100%;justify-content:center}.lp-trust-signals{gap:16px}.lp-section{padding:72px 0}.lp-section-header{margin-bottom:40px}.lp-section-header h2{font-size:28px}.lp-features-grid{grid-template-columns:1fr}.lp-metrics-grid{grid-template-columns:repeat(2,1fr)}.lp-metrics-grid .lp-metric-card{border-right:none;border-bottom:1px solid var(--lp-gray-200)}.lp-metrics-grid .lp-metric-card:last-child{border-bottom:none}.lp-metric-value{font-size:36px}.lp-modules-grid{grid-template-columns:1fr}.lp-steps-grid{flex-direction:column;align-items:center;gap:32px}.lp-step-connector{display:none}.lp-footer-inner{flex-direction:column;align-items:center;text-align:center}}.lp-nav-brand-svg{display:flex;align-items:center;width:36px;height:36px;flex-shrink:0}.lp-nav-brand-svg ::ng-deep svg{width:36px;height:36px;display:block}.lp-nav-brand-wordmark{display:flex;flex-direction:column;line-height:1.1;margin-left:8px}.lp-nav-wordmark-line1{font-size:15px;font-weight:800;color:#1a3a7a;letter-spacing:-.01em;font-family:Outfit,sans-serif}.lp-nav-wordmark-line2{font-size:9px;font-weight:600;letter-spacing:.12em;color:#e8a020;text-transform:uppercase}.lp-hero-bg{position:relative}.lp-hero-watermark{position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:center;padding-top:40px;pointer-events:none;z-index:1}.lp-hero-watermark-inner{width:700px;height:700px;opacity:.04;overflow:hidden;flex-shrink:0}@media (min-width: 768px){.lp-hero-watermark-inner{width:800px;height:800px}}.lp-hero-content{display:flex;flex-direction:column;align-items:center}.lp-hero-main{z-index:1;width:100%}.lp-hero-visual{position:relative;z-index:1;width:100%;max-width:900px;margin:48px auto 0}.lp-workflow-road{position:relative;display:flex;justify-content:space-between;align-items:flex-start;padding:48px 0 24px;gap:16px}.lp-road-line{position:absolute;top:72px;left:6%;right:6%;height:3px;background:linear-gradient(90deg,var(--lp-primary-light),var(--lp-primary),var(--lp-primary-light));border-radius:2px;opacity:.4}.lp-waypoint{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;z-index:1}.lp-waypoint-marker{width:52px;height:52px;border-radius:50%;background:var(--lp-primary);color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:12px;box-shadow:0 4px 16px color-mix(in srgb,var(--lp-primary) 35%,transparent);transition:transform .25s cubic-bezier(.34,1.56,.64,1)}.lp-waypoint:hover .lp-waypoint-marker{transform:translateY(-4px) scale(1.08)}.lp-waypoint-marker .material-icons{font-size:22px}.lp-waypoint-number{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--lp-primary);margin-bottom:6px;opacity:.7}.lp-waypoint-title{font-size:14px;font-weight:700;color:var(--lp-dark);margin-bottom:6px;font-family:Outfit,sans-serif}.lp-waypoint-desc{font-size:12px;color:var(--lp-gray-600);line-height:1.5;max-width:140px}.lp-section-dark{background:var(--lp-dark);color:#fff}.lp-section-dark.lp-section{padding:96px 0}.lp-header-light h2{color:#fff}.lp-header-light p{color:#ffffffa6}.lp-security-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}.lp-security-card{background:#ffffff0d;border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:32px 28px;transition:background .25s ease}.lp-security-card:hover{background:#ffffff14}.lp-security-icon{width:52px;height:52px;border-radius:14px;background:#ffffff1a;display:flex;align-items:center;justify-content:center;margin-bottom:20px;color:#fff}.lp-security-icon .material-icons{font-size:24px}.lp-security-card h3{font-size:18px;font-weight:700;color:#fff;margin:0 0 12px;font-family:Outfit,sans-serif}.lp-security-card p{font-size:14px;color:#fff9;line-height:1.65;margin:0}.lp-testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}.lp-testimonial-card{background:#fff;border:1px solid var(--lp-gray-200);border-radius:20px;padding:32px 28px;display:flex;flex-direction:column;gap:16px;box-shadow:0 1px 3px #00000012,0 1px 2px #0000000d;transition:box-shadow .25s ease,transform .25s ease}.lp-testimonial-card:hover{box-shadow:0 4px 8px #0000000f;transform:translateY(-2px)}.lp-stars{display:flex;gap:2px;color:var(--lp-secondary)}.lp-stars .material-icons{font-size:18px}.lp-testimonial-quote{font-size:15px;color:var(--lp-gray-700);line-height:1.65;font-style:italic;margin:0;flex:1}.lp-testimonial-author{display:flex;align-items:center;gap:12px}.lp-author-avatar{width:44px;height:44px;border-radius:50%;background:var(--lp-primary);color:#fff;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:Outfit,sans-serif}.lp-author-name{font-size:14px;font-weight:700;color:var(--lp-dark)}.lp-author-role{font-size:12px;color:var(--lp-gray-400)}.lp-pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;align-items:start}.lp-pricing-card{background:#fff;border:1px solid var(--lp-gray-200);border-radius:20px;padding:36px 28px 28px;position:relative;display:flex;flex-direction:column;box-shadow:0 1px 3px #00000012,0 1px 2px #0000000d;transition:box-shadow .25s ease,transform .25s ease}.lp-pricing-card:hover{box-shadow:0 4px 8px #0000000f;transform:translateY(-3px)}.lp-pricing-popular{border-color:var(--lp-primary);box-shadow:0 0 0 2px var(--lp-primary);transform:scale(1.03)}.lp-pricing-popular:hover{transform:scale(1.03) translateY(-3px)}.lp-popular-badge{position:absolute;top:-12px;left:50%;transform:translate(-50%);background:var(--lp-primary);color:#fff;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 14px;border-radius:100px;white-space:nowrap;font-family:Outfit,sans-serif}.lp-pricing-header{margin-bottom:24px}.lp-pricing-header h3{font-size:20px;font-weight:800;color:var(--lp-dark);margin:0 0 12px;font-family:Outfit,sans-serif}.lp-pricing-price{display:flex;align-items:baseline;gap:4px;margin-bottom:8px}.lp-price-amount{font-size:40px;font-weight:900;color:var(--lp-primary);font-family:Outfit,sans-serif;line-height:1}.lp-price-period{font-size:16px;color:var(--lp-gray-600)}.lp-pricing-desc{font-size:13px;color:var(--lp-gray-600);margin:0}.lp-pricing-features{list-style:none;padding:0;margin:0 0 28px;display:flex;flex-direction:column;gap:10px;flex:1}.lp-pricing-features li{font-size:14px;color:var(--lp-gray-700);padding-left:20px;position:relative}.lp-pricing-features li:before{content:\"\\2713\";position:absolute;left:0;color:var(--lp-primary);font-weight:700}.lp-btn-block{width:100%;justify-content:center;text-align:center}.lp-final-cta{background:linear-gradient(135deg,var(--lp-primary-dark, #152C4A) 0%,var(--lp-primary) 100%);padding:96px 0}.lp-cta-content{text-align:center}.lp-cta-content h2{font-size:40px;font-weight:900;color:#fff;margin:0 0 16px;font-family:Outfit,sans-serif;letter-spacing:-.02em}.lp-cta-content p{font-size:18px;color:#ffffffbf;margin:0 auto 36px;max-width:560px}.lp-cta-buttons{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}.lp-btn-white{background:#fff;color:var(--lp-primary);border:2px solid white;font-weight:700}.lp-btn-white:hover{background:#ffffffe6;transform:translateY(-1px)}.lp-btn-outline-white{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.5);font-weight:700}.lp-btn-outline-white:hover{background:#ffffff1a;border-color:#fff;transform:translateY(-1px)}.lp-footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;padding:64px 0 48px}.lp-footer-brand-col{display:flex;flex-direction:column;gap:16px}.lp-footer-brand-custom{display:flex;align-items:center;gap:10px}.lp-footer-brand-svg{display:flex;align-items:center;width:36px;height:36px;flex-shrink:0}.lp-footer-brand-svg ::ng-deep svg{width:36px;height:36px;display:block}.lp-footer-brand-wordmark{display:flex;flex-direction:column;line-height:1.1}.lp-footer-wordmark-line1{font-size:15px;font-weight:800;color:#fff;font-family:Outfit,sans-serif}.lp-footer-wordmark-line2{font-size:9px;font-weight:600;letter-spacing:.12em;color:#e8a020;text-transform:uppercase}.lp-footer-brand-default{display:flex;align-items:center;gap:10px}.lp-footer-tagline{font-size:14px;color:#ffffff80;line-height:1.6;margin:0;max-width:280px}.lp-footer-col{display:flex;flex-direction:column;gap:12px}.lp-footer-col h4{font-size:13px;font-weight:700;color:#fff;margin:0 0 4px;letter-spacing:.04em;text-transform:uppercase;font-family:Outfit,sans-serif}.lp-footer-col a{font-size:14px;color:#ffffff80;cursor:pointer;text-decoration:none;transition:color .2s}.lp-footer-col a:hover{color:#fff}.lp-footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding:24px 0;font-size:13px;color:#ffffff59}@media (max-width: 768px){.lp-hero-visual{max-width:100%;margin-top:32px}.lp-workflow-road{flex-direction:column;align-items:center;gap:32px}.lp-road-line{display:none}.lp-waypoint-desc{max-width:260px}.lp-security-grid,.lp-testimonials-grid,.lp-pricing-grid{grid-template-columns:1fr}.lp-pricing-popular{transform:none}.lp-pricing-popular:hover{transform:translateY(-3px)}.lp-cta-content h2{font-size:28px}.lp-footer-grid{grid-template-columns:1fr 1fr;gap:32px;padding:48px 0 32px}}\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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SpaLandingComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spa-landing', standalone: false, template: "<!-- ===== NAVBAR ===== -->\n<nav class=\"lp-navbar\" [class.lp-navbar-scrolled]=\"navScrolled\">\n  <div class=\"lp-container lp-nav-inner\">\n    <!-- Brand: custom SVG override OR default img+name -->\n    <div class=\"lp-nav-brand\" (click)=\"scrollToSection('lp-hero')\">\n      <ng-container *ngIf=\"config.navBrand; else defaultNavBrand\">\n        <span class=\"lp-nav-brand-svg\" [innerHTML]=\"safeNavBrandSvg\"></span>\n        <div *ngIf=\"config.navBrand.wordmarkLine1\" class=\"lp-nav-brand-wordmark\">\n          <span class=\"lp-nav-wordmark-line1\">{{ config.navBrand.wordmarkLine1 }}</span>\n          <span *ngIf=\"config.navBrand.wordmarkLine2\" class=\"lp-nav-wordmark-line2\">{{ config.navBrand.wordmarkLine2 }}</span>\n        </div>\n      </ng-container>\n      <ng-template #defaultNavBrand>\n        <img [src]=\"config.logoSrc\" [alt]=\"config.appName\" class=\"lp-nav-logo\">\n        <span class=\"lp-nav-brand-text\">{{ config.appName }}</span>\n      </ng-template>\n    </div>\n    <!-- Desktop nav links -->\n    <div class=\"lp-nav-links\">\n      <a *ngFor=\"let link of config.navLinks\" (click)=\"scrollToSection(link.target)\">{{ link.label }}</a>\n    </div>\n    <!-- Mobile menu overlay -->\n    <div class=\"lp-mobile-menu\" [class.lp-mobile-menu-open]=\"mobileMenuOpen\">\n      <a *ngFor=\"let link of config.navLinks\" (click)=\"scrollToSection(link.target)\">{{ link.label }}</a>\n      <div class=\"lp-mobile-auth\">\n        <a class=\"lp-nav-login\" (click)=\"navigateTo('login')\">Log in</a>\n        <button class=\"lp-btn lp-btn-primary\" (click)=\"navigateTo(config.hero.primaryCTARoute || 'signup')\">Get Started</button>\n      </div>\n    </div>\n    <!-- Desktop auth -->\n    <div class=\"lp-nav-auth\">\n      <a class=\"lp-nav-login\" (click)=\"navigateTo('login')\">Log in</a>\n      <button class=\"lp-btn lp-btn-primary lp-btn-sm\" (click)=\"navigateTo(config.hero.primaryCTARoute || 'signup')\">Get Started</button>\n    </div>\n    <!-- Hamburger for mobile -->\n    <button class=\"lp-hamburger\" (click)=\"toggleMobileMenu()\" [class.lp-hamburger-open]=\"mobileMenuOpen\">\n      <span></span><span></span><span></span>\n    </button>\n  </div>\n</nav>\n\n<!-- ===== HERO ===== -->\n<section id=\"lp-hero\" class=\"lp-hero-bg\" [class.lp-hero-split]=\"config.hero.layout === 'split'\">\n  <!-- Optional faded watermark SVG (e.g. company logo) -->\n  <!-- Changed: wrapper div gets Angular scoping attribute; inner div holds innerHTML so svg size CSS applies to scoped .lp-hero-watermark-inner -->\n  <div *ngIf=\"config.hero.watermarkSvg\" class=\"lp-hero-watermark\" aria-hidden=\"true\">\n    <div class=\"lp-hero-watermark-inner\" [innerHTML]=\"safeHeroWatermarkSvg\"></div>\n  </div>\n\n  <div class=\"lp-container lp-hero-content\">\n    <!-- Left / centered column: brand, headline, CTAs -->\n    <div class=\"lp-hero-main\">\n      <!-- App brand: logo + name + decorative divider -->\n      <div class=\"lp-hero-brand\">\n        <div class=\"lp-hero-brand-logo\">\n          <img [src]=\"config.logoSrc\" [alt]=\"config.appName\" class=\"lp-hero-brand-icon\">\n          <span class=\"lp-hero-brand-name\">{{ config.appName }}</span>\n        </div>\n        <div class=\"lp-hero-divider\" aria-hidden=\"true\">\n          <span class=\"lp-hero-divider-line\"></span>\n          <span class=\"lp-hero-divider-dot\"></span>\n          <span class=\"lp-hero-divider-line\"></span>\n        </div>\n      </div>\n      <!-- Hero text: headline, subtitle, CTAs, trust signals -->\n      <div class=\"lp-hero-text\">\n        <div *ngIf=\"config.hero.badge\" class=\"lp-hero-badge\">{{ config.hero.badge }}</div>\n        <h1>{{ config.hero.headline }} <span class=\"lp-gradient-text\">{{ config.hero.gradientText }}</span></h1>\n        <p class=\"lp-hero-subtitle\">{{ config.hero.subtitle }}</p>\n        <div class=\"lp-hero-ctas\">\n          <button class=\"lp-btn lp-btn-primary lp-btn-lg\" (click)=\"navigateTo(config.hero.primaryCTARoute || 'signup')\">\n            {{ config.hero.primaryCTA }}\n          </button>\n          <button class=\"lp-btn lp-btn-outline lp-btn-lg\" (click)=\"scrollToSection(config.hero.secondaryCTASection)\">\n            {{ config.hero.secondaryCTA }}\n          </button>\n        </div>\n        <!-- Trust signals with checkmark SVG icons -->\n        <div class=\"lp-trust-signals\">\n          <div *ngFor=\"let signal of config.hero.trustSignals\" class=\"lp-trust-item\">\n            <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\">\n              <path d=\"M20 6L9 17l-5-5\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n            </svg>\n            <span>{{ signal }}</span>\n          </div>\n        </div>\n      </div>\n    </div>\n    <!-- App visual: always rendered when projected content exists (stacked below hero text) -->\n    <!-- Changed: removed *ngIf so visual always renders below text; layout is always stacked/column -->\n    <div class=\"lp-hero-visual\">\n      <ng-content select=\"[lpHeroVisual]\"></ng-content>\n    </div>\n  </div>\n</section>\n\n<!-- ===== METRICS (optional) ===== -->\n<section *ngIf=\"config.metrics\" class=\"lp-section lp-animate\">\n  <div class=\"lp-container\">\n    <div class=\"lp-metrics-grid\">\n      <div *ngFor=\"let metric of config.metrics\" class=\"lp-metric-card\">\n        <div class=\"lp-metric-value\">{{ metric.value }}</div>\n        <div class=\"lp-metric-label\">{{ metric.label }}</div>\n      </div>\n    </div>\n  </div>\n</section>\n\n<!-- ===== FEATURES ===== -->\n<section id=\"lp-features\" class=\"lp-section lp-animate\">\n  <div class=\"lp-container\">\n    <div class=\"lp-section-header\">\n      <h2>{{ config.features.title }}</h2>\n      <p>{{ config.features.subtitle }}</p>\n    </div>\n    <div class=\"lp-features-grid\">\n      <div *ngFor=\"let feature of config.features.items\" class=\"lp-feature-card\">\n        <!-- Icon tint: hex + '20' = ~12% opacity background -->\n        <div class=\"lp-feature-icon\"\n             [style.background]=\"iconBg(feature.color)\"\n             [style.color]=\"feature.color\">\n          <span class=\"material-icons\">{{ feature.icon }}</span>\n        </div>\n        <h3 class=\"lp-feature-title\">{{ feature.title }}</h3>\n        <p class=\"lp-feature-desc\">{{ feature.description }}</p>\n      </div>\n    </div>\n  </div>\n</section>\n\n<!-- ===== WORKFLOW (optional) ===== -->\n<section *ngIf=\"config.workflow\" id=\"lp-workflow\" class=\"lp-section lp-section-alt lp-animate\">\n  <div class=\"lp-container\">\n    <div class=\"lp-section-header\">\n      <h2>{{ config.workflow!.title }}</h2>\n      <p *ngIf=\"config.workflow!.subtitle\">{{ config.workflow!.subtitle }}</p>\n    </div>\n\n    <!-- Road metaphor layout: horizontal road line with waypoints -->\n    <div *ngIf=\"config.workflow!.style === 'road'\" class=\"lp-workflow-road\">\n      <div class=\"lp-road-line\"></div>\n      <div *ngFor=\"let step of config.workflow!.steps\" class=\"lp-waypoint\">\n        <div class=\"lp-waypoint-marker\">\n          <span class=\"material-icons\">{{ step.icon }}</span>\n        </div>\n        <div class=\"lp-waypoint-number\">Step {{ step.number }}</div>\n        <div class=\"lp-waypoint-title\">{{ step.title }}</div>\n        <div class=\"lp-waypoint-desc\">{{ step.description }}</div>\n      </div>\n    </div>\n\n    <!-- Default steps grid layout -->\n    <div *ngIf=\"!config.workflow!.style || config.workflow!.style === 'steps'\" class=\"lp-steps-grid\">\n      <div *ngFor=\"let step of config.workflow!.steps; let i = index\" class=\"lp-step-card\">\n        <div class=\"lp-step-number\">{{ step.number }}</div>\n        <div class=\"lp-step-icon\">\n          <span class=\"material-icons\">{{ step.icon }}</span>\n        </div>\n        <h3 class=\"lp-step-title\">{{ step.title }}</h3>\n        <p class=\"lp-step-desc\">{{ step.description }}</p>\n        <!-- Connector line between steps, not after last -->\n        <div *ngIf=\"i < config.workflow!.steps.length - 1\" class=\"lp-step-connector\"></div>\n      </div>\n    </div>\n  </div>\n</section>\n\n<!-- ===== CUSTOM SECTION SLOT ===== -->\n<!-- Consumer projects app-specific sections here (fleet board, benefits rows, etc.)\n     using [lpCustomSection] attribute on a wrapper element -->\n<ng-content select=\"[lpCustomSection]\"></ng-content>\n\n<!-- ===== MODULES (optional) ===== -->\n<section *ngIf=\"config.modules\" id=\"lp-modules\" class=\"lp-section lp-section-alt lp-animate\">\n  <div class=\"lp-container\">\n    <div class=\"lp-section-header\">\n      <h2>{{ config.modules!.title }}</h2>\n      <p>{{ config.modules!.subtitle }}</p>\n    </div>\n    <div class=\"lp-modules-grid\">\n      <div *ngFor=\"let group of config.modules!.groups\" class=\"lp-module-group\">\n        <div class=\"lp-module-group-label\">{{ group.category }}</div>\n        <div class=\"lp-module-tiles\">\n          <div *ngFor=\"let tile of group.tiles\" class=\"lp-module-tile\">\n            <span class=\"material-icons\">{{ tile.icon }}</span>\n            <span>{{ tile.name }}</span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n\n<!-- ===== SECURITY (optional \u2014 dark background) ===== -->\n<section *ngIf=\"config.security\" class=\"lp-section lp-section-dark lp-animate\">\n  <div class=\"lp-container\">\n    <div class=\"lp-section-header lp-header-light\">\n      <h2>{{ config.security!.title }}</h2>\n      <p>{{ config.security!.subtitle }}</p>\n    </div>\n    <div class=\"lp-security-grid\">\n      <div *ngFor=\"let item of config.security!.items\" class=\"lp-security-card\">\n        <div class=\"lp-security-icon\">\n          <span class=\"material-icons\">{{ item.icon }}</span>\n        </div>\n        <h3>{{ item.title }}</h3>\n        <p>{{ item.description }}</p>\n      </div>\n    </div>\n  </div>\n</section>\n\n<!-- ===== TESTIMONIALS (optional) ===== -->\n<section *ngIf=\"config.testimonials\" class=\"lp-section lp-animate\">\n  <div class=\"lp-container\">\n    <div class=\"lp-section-header\">\n      <h2>{{ config.testimonials!.title }}</h2>\n      <p *ngIf=\"config.testimonials!.subtitle\">{{ config.testimonials!.subtitle }}</p>\n    </div>\n    <div class=\"lp-testimonials-grid\">\n      <div *ngFor=\"let item of config.testimonials!.items\" class=\"lp-testimonial-card\">\n        <div class=\"lp-stars\">\n          <span class=\"material-icons\">star</span>\n          <span class=\"material-icons\">star</span>\n          <span class=\"material-icons\">star</span>\n          <span class=\"material-icons\">star</span>\n          <span class=\"material-icons\">star</span>\n        </div>\n        <p class=\"lp-testimonial-quote\">\"{{ item.quote }}\"</p>\n        <div class=\"lp-testimonial-author\">\n          <div class=\"lp-author-avatar\">{{ item.authorInitials }}</div>\n          <div>\n            <div class=\"lp-author-name\">{{ item.authorName }}</div>\n            <div class=\"lp-author-role\">{{ item.authorRole }}</div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n\n<!-- ===== PRICING (optional) ===== -->\n<section *ngIf=\"config.pricing\" id=\"lp-pricing\" class=\"lp-section lp-animate\">\n  <div class=\"lp-container\">\n    <div class=\"lp-section-header\">\n      <h2>{{ config.pricing!.title }}</h2>\n      <p *ngIf=\"config.pricing!.subtitle\">{{ config.pricing!.subtitle }}</p>\n    </div>\n    <div class=\"lp-pricing-grid\">\n      <div *ngFor=\"let plan of config.pricing!.plans\"\n           class=\"lp-pricing-card\"\n           [class.lp-pricing-popular]=\"plan.popular\">\n        <div *ngIf=\"plan.popular\" class=\"lp-popular-badge\">Most Popular</div>\n        <div class=\"lp-pricing-header\">\n          <h3>{{ plan.name }}</h3>\n          <div class=\"lp-pricing-price\">\n            <span class=\"lp-price-amount\">{{ plan.price }}</span>\n            <span *ngIf=\"plan.period\" class=\"lp-price-period\">{{ plan.period }}</span>\n          </div>\n          <p class=\"lp-pricing-desc\">{{ plan.description }}</p>\n        </div>\n        <ul class=\"lp-pricing-features\">\n          <li *ngFor=\"let feature of plan.features\">{{ feature }}</li>\n        </ul>\n        <!-- Popular plans get primary button, others get outline -->\n        <button *ngIf=\"plan.popular\"\n                class=\"lp-btn lp-btn-primary lp-btn-block\"\n                (click)=\"plan.ctaRoute ? navigateTo(plan.ctaRoute) : scrollToSection(plan.ctaSection || '')\">\n          {{ plan.ctaLabel }}\n        </button>\n        <button *ngIf=\"!plan.popular\"\n                class=\"lp-btn lp-btn-outline lp-btn-block\"\n                (click)=\"plan.ctaRoute ? navigateTo(plan.ctaRoute) : scrollToSection(plan.ctaSection || '')\">\n          {{ plan.ctaLabel }}\n        </button>\n      </div>\n    </div>\n  </div>\n</section>\n\n<!-- ===== FINAL CTA BANNER (optional) ===== -->\n<section *ngIf=\"config.finalCta\" class=\"lp-final-cta lp-animate\">\n  <div class=\"lp-container lp-cta-content\">\n    <h2>{{ config.finalCta!.headline }}</h2>\n    <p>{{ config.finalCta!.subtitle }}</p>\n    <div class=\"lp-cta-buttons\">\n      <button class=\"lp-btn lp-btn-white lp-btn-lg\"\n              (click)=\"navigateTo(config.finalCta!.primaryCTARoute || 'signup')\">\n        {{ config.finalCta!.primaryCTA }}\n      </button>\n      <button *ngIf=\"config.finalCta!.secondaryCTA\"\n              class=\"lp-btn lp-btn-outline-white lp-btn-lg\"\n              (click)=\"scrollToSection(config.finalCta!.secondaryCTASection || '')\">\n        {{ config.finalCta!.secondaryCTA }}\n      </button>\n    </div>\n  </div>\n</section>\n\n<!-- ===== FOOTER ===== -->\n<footer class=\"lp-footer\" id=\"lp-footer\">\n  <div class=\"lp-container\">\n\n    <!-- Rich multi-column footer when footerColumns provided -->\n    <div *ngIf=\"config.footerColumns && config.footerColumns.length; else simpleFooter\" class=\"lp-footer-grid\">\n      <!-- Brand column -->\n      <div class=\"lp-footer-brand-col\">\n        <!-- Custom SVG footer brand OR default img+name -->\n        <ng-container *ngIf=\"config.footerBrand; else defaultFooterBrand\">\n          <div class=\"lp-footer-brand-custom\">\n            <span class=\"lp-footer-brand-svg\" [innerHTML]=\"safeFooterBrandSvg\"></span>\n            <div *ngIf=\"config.footerBrand.wordmarkLine1\" class=\"lp-footer-brand-wordmark\">\n              <span class=\"lp-footer-wordmark-line1\">{{ config.footerBrand.wordmarkLine1 }}</span>\n              <span *ngIf=\"config.footerBrand.wordmarkLine2\" class=\"lp-footer-wordmark-line2\">{{ config.footerBrand.wordmarkLine2 }}</span>\n            </div>\n          </div>\n        </ng-container>\n        <ng-template #defaultFooterBrand>\n          <div class=\"lp-footer-brand-default\">\n            <img [src]=\"config.logoSrc\" [alt]=\"config.appName\" class=\"lp-footer-logo\">\n            <span class=\"lp-footer-name\">{{ config.appName }}</span>\n          </div>\n        </ng-template>\n        <p *ngIf=\"config.footerTagline\" class=\"lp-footer-tagline\">{{ config.footerTagline }}</p>\n      </div>\n      <!-- Link columns -->\n      <div *ngFor=\"let col of config.footerColumns\" class=\"lp-footer-col\">\n        <h4>{{ col.title }}</h4>\n        <a *ngFor=\"let link of col.links\"\n           (click)=\"link.section ? scrollToSection(link.section) : (link.route ? navigateTo(link.route) : null)\">\n          {{ link.label }}\n        </a>\n      </div>\n    </div>\n\n    <!-- Simple single-row footer (default) -->\n    <ng-template #simpleFooter>\n      <div class=\"lp-footer-inner\">\n        <div class=\"lp-footer-brand\">\n          <img [src]=\"config.logoSrc\" [alt]=\"config.appName\" class=\"lp-footer-logo\">\n          <span class=\"lp-footer-name\">{{ config.appName }}</span>\n        </div>\n        <div class=\"lp-footer-links\">\n          <a (click)=\"navigateTo('login')\">Log in</a>\n          <a (click)=\"navigateTo(config.hero.primaryCTARoute || 'signup')\">Sign up</a>\n        </div>\n        <div class=\"lp-footer-copy\">\n          &copy; {{ currentYear }} {{ config.footerCompany || 'alsquare technologies' }}. All rights reserved.\n        </div>\n      </div>\n    </ng-template>\n\n    <!-- Footer bottom bar (shown for both layouts) -->\n    <div *ngIf=\"config.footerColumns && config.footerColumns.length\" class=\"lp-footer-bottom\">\n      <span>&copy; {{ currentYear }} {{ config.footerCompany || 'alsquare technologies' }}. All rights reserved.</span>\n    </div>\n  </div>\n</footer>\n", styles: ["@import\"https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&display=swap\";:host{--lp-primary: #1E3A5F;--lp-primary-dark: #152C4A;--lp-primary-light: #EBF0F7;--lp-secondary: #F59E0B;--lp-secondary-light:#FEF3C7;--lp-dark: #0D1117;--lp-gray-800: #1F2937;--lp-gray-700: #374151;--lp-gray-600: #4B5563;--lp-gray-400: #9CA3AF;--lp-gray-200: #E5E7EB;--lp-gray-100: #F3F4F6;--lp-gray-50: #F9FAFB;--lp-white: #FFFFFF;--lp-radius: 12px;--lp-radius-sm: 8px;--lp-radius-lg: 20px;--lp-radius-xl: 28px;--lp-shadow-xs: 0 1px 2px rgba(0,0,0,.05);--lp-shadow: 0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05);--lp-shadow-md: 0 4px 8px rgba(0,0,0,.06), 0 2px 4px rgba(0,0,0,.04);--lp-shadow-lg: 0 12px 28px rgba(0,0,0,.1), 0 4px 8px rgba(0,0,0,.06);--lp-shadow-xl: 0 20px 40px rgba(0,0,0,.12), 0 8px 16px rgba(0,0,0,.07);--lp-ease: cubic-bezier(.4, 0, .2, 1);--lp-spring: cubic-bezier(.34, 1.56, .64, 1);display:block;font-family:Outfit,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:var(--lp-gray-700);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}.lp-container{max-width:1200px;margin:0 auto;padding:0 32px}.lp-navbar{position:fixed;top:0;left:0;right:0;z-index:1000;padding:18px 0;transition:background .3s var(--lp-ease),padding .3s var(--lp-ease),box-shadow .3s var(--lp-ease)}.lp-navbar-scrolled{background:#ffffffeb;backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);box-shadow:0 1px #0000000f,0 2px 8px #0000000a;padding:12px 0}.lp-nav-inner{display:flex;align-items:center;justify-content:space-between}.lp-nav-brand{display:flex;align-items:center;gap:10px;cursor:pointer;text-decoration:none}.lp-nav-logo{width:30px;height:30px;border-radius:7px;object-fit:contain}.lp-nav-brand-text{font-size:18px;font-weight:700;color:var(--lp-primary);letter-spacing:-.01em}.lp-nav-links{display:flex;align-items:center;gap:36px}.lp-nav-links a{font-size:14px;font-weight:500;color:var(--lp-gray-600);cursor:pointer;transition:color .2s;text-decoration:none;letter-spacing:.01em}.lp-nav-links a:hover{color:var(--lp-primary)}.lp-nav-auth{display:flex;align-items:center;gap:12px}.lp-nav-login{font-size:14px;font-weight:500;color:var(--lp-gray-600);cursor:pointer;transition:color .2s;text-decoration:none}.lp-nav-login:hover{color:var(--lp-primary)}.lp-hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px;z-index:1001}.lp-hamburger span{display:block;width:22px;height:2px;background:var(--lp-gray-700);border-radius:2px;transition:transform .3s var(--lp-ease),opacity .3s}.lp-hamburger-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}.lp-hamburger-open span:nth-child(2){opacity:0}.lp-hamburger-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}.lp-mobile-menu{display:none}.lp-mobile-auth{display:flex;flex-direction:column;gap:12px;margin-top:24px;padding-top:24px;border-top:1px solid var(--lp-gray-200)}.lp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:Outfit,sans-serif;font-size:14px;font-weight:600;padding:10px 22px;border-radius:var(--lp-radius-sm);border:none;cursor:pointer;transition:all .25s var(--lp-ease);text-decoration:none;white-space:nowrap;letter-spacing:.01em}.lp-btn-primary{background:var(--lp-primary);color:var(--lp-white);box-shadow:0 1px 3px #00000026,inset 0 1px #ffffff1f}.lp-btn-primary:hover{background:var(--lp-primary-dark);transform:translateY(-1px);box-shadow:0 6px 16px #0003,inset 0 1px #ffffff1f}.lp-btn-primary:active{transform:translateY(0)}.lp-btn-outline{background:transparent;color:var(--lp-primary);border:1.5px solid var(--lp-primary)}.lp-btn-outline:hover{background:var(--lp-primary);color:var(--lp-white);transform:translateY(-1px);box-shadow:0 4px 12px #00000026}.lp-btn-sm{padding:7px 16px;font-size:13px}.lp-btn-lg{padding:14px 32px;font-size:15px;border-radius:var(--lp-radius)}.lp-btn-block{width:100%}.lp-hero-bg{position:relative;overflow:hidden;padding:140px 0 100px;background:radial-gradient(ellipse 80% 60% at 60% -10%,color-mix(in srgb,var(--lp-primary) 8%,transparent) 0%,transparent 70%),radial-gradient(ellipse 60% 50% at -10% 80%,color-mix(in srgb,var(--lp-secondary) 6%,transparent) 0%,transparent 70%),linear-gradient(160deg,var(--lp-primary-light) 0%,#FAFBFF 45%,var(--lp-secondary-light) 100%);min-height:100vh;display:flex;align-items:center}.lp-hero-bg:before{content:\"\";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(0,0,0,.04) 1px,transparent 1px);background-size:32px 32px;pointer-events:none;-webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 40%,transparent 100%);mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 40%,transparent 100%)}.lp-hero-bg:after{content:\"\";position:absolute;width:700px;height:700px;border-radius:50%;background:color-mix(in srgb,var(--lp-primary) 5%,transparent);top:-200px;right:-150px;filter:blur(100px);pointer-events:none}.lp-hero-content{position:relative;z-index:1;text-align:center;width:100%}.lp-hero-badge{display:inline-flex;align-items:center;gap:6px;background:color-mix(in srgb,var(--lp-primary) 10%,transparent);color:var(--lp-primary);border:1px solid color-mix(in srgb,var(--lp-primary) 20%,transparent);border-radius:100px;padding:6px 16px;font-size:13px;font-weight:600;margin-bottom:20px;letter-spacing:.02em}.lp-hero-brand{margin-bottom:20px;text-align:center}.lp-hero-brand-logo{display:inline-flex;align-items:center;gap:14px;margin-bottom:12px}.lp-hero-brand-icon{height:52px;width:52px;border-radius:14px;object-fit:contain;box-shadow:0 4px 12px #0000001f}.lp-hero-brand-name{font-size:38px;font-weight:800;color:var(--lp-primary);letter-spacing:-.03em;font-family:Outfit,sans-serif}.lp-hero-divider{display:flex;align-items:center;justify-content:center;gap:10px}.lp-hero-divider-line{display:block;height:1px;width:40px;background:linear-gradient(90deg,transparent,var(--lp-primary),transparent);opacity:.3}.lp-hero-divider-dot{display:block;height:5px;width:5px;border-radius:50%;background:var(--lp-secondary);opacity:.8}.lp-hero-text{max-width:760px;margin:0 auto 64px}.lp-hero-text h1{font-family:Outfit,sans-serif;font-size:68px;font-weight:900;line-height:1.05;color:var(--lp-dark);margin:0 0 24px;letter-spacing:-.03em}.lp-gradient-text{background:linear-gradient(135deg,var(--lp-primary) 0%,var(--lp-secondary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.lp-hero-subtitle{font-size:19px;color:var(--lp-gray-600);line-height:1.65;font-weight:400;max-width:560px;margin:0 auto 36px}.lp-hero-ctas{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:32px;flex-wrap:wrap}.lp-trust-signals{display:flex;align-items:center;justify-content:center;gap:28px;flex-wrap:wrap}.lp-trust-item{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:500;color:var(--lp-gray-500, #6B7280)}.lp-trust-item svg{color:var(--lp-primary);flex-shrink:0}.lp-section{padding:100px 0;background:var(--lp-white)}.lp-section-alt{background:var(--lp-gray-50)}.lp-section-header{text-align:center;margin-bottom:64px}.lp-section-header h2{font-family:Outfit,sans-serif;font-size:42px;font-weight:800;color:var(--lp-dark);margin:0 0 14px;letter-spacing:-.025em;line-height:1.15}.lp-section-header p{font-size:17px;color:var(--lp-gray-600);max-width:540px;margin:0 auto;line-height:1.65}.lp-features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.lp-feature-card{background:var(--lp-white);border-radius:var(--lp-radius-lg);padding:36px 28px;transition:transform .25s var(--lp-ease),box-shadow .25s var(--lp-ease);border:1px solid var(--lp-gray-200);box-shadow:var(--lp-shadow-xs);position:relative;overflow:hidden}.lp-feature-card:before{content:\"\";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--lp-primary),var(--lp-secondary));transform:scaleX(0);transform-origin:left;transition:transform .3s var(--lp-ease);border-radius:3px 3px 0 0}.lp-feature-card:hover{transform:translateY(-5px);box-shadow:var(--lp-shadow-xl);border-color:transparent}.lp-feature-card:hover:before{transform:scaleX(1)}.lp-feature-icon{width:52px;height:52px;border-radius:var(--lp-radius-sm);display:flex;align-items:center;justify-content:center;margin-bottom:20px}.lp-feature-icon .material-icons{font-size:26px}.lp-feature-title{font-family:Outfit,sans-serif;font-size:17px;font-weight:700;color:var(--lp-dark);margin:0 0 10px;letter-spacing:-.01em}.lp-feature-desc{font-size:14px;color:var(--lp-gray-600);line-height:1.65;margin:0}.lp-steps-grid{display:flex;align-items:flex-start;justify-content:space-between;position:relative;gap:16px}.lp-step-card{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;padding:0 8px}.lp-step-number{font-size:11px;font-weight:700;color:var(--lp-secondary);text-transform:uppercase;letter-spacing:2px;margin-bottom:10px}.lp-step-icon{width:56px;height:56px;border-radius:50%;background:var(--lp-primary);display:flex;align-items:center;justify-content:center;margin-bottom:18px;box-shadow:0 4px 14px color-mix(in srgb,var(--lp-primary) 30%,transparent);border:3px solid var(--lp-white);position:relative;z-index:1}.lp-step-icon .material-icons{font-size:24px;color:var(--lp-white)}.lp-step-title{font-family:Outfit,sans-serif;font-size:15px;font-weight:700;color:var(--lp-dark);margin:0 0 8px;letter-spacing:-.01em}.lp-step-desc{font-size:13px;color:var(--lp-gray-600);line-height:1.55;margin:0}.lp-step-connector{position:absolute;top:40px;left:60%;width:80%;height:2px;background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--lp-secondary) 50%,transparent) 0px,color-mix(in srgb,var(--lp-secondary) 50%,transparent) 10px,transparent 10px,transparent 18px);pointer-events:none;z-index:0}.lp-metrics-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--lp-gray-200);border-radius:var(--lp-radius-lg);overflow:hidden;background:var(--lp-white);box-shadow:var(--lp-shadow)}.lp-metric-card{text-align:center;padding:40px 24px;border-right:1px solid var(--lp-gray-200);transition:background .2s}.lp-metric-card:last-child{border-right:none}.lp-metric-card:hover{background:var(--lp-gray-50)}.lp-metric-value{font-family:Outfit,sans-serif;font-size:48px;font-weight:900;color:var(--lp-primary);line-height:1;letter-spacing:-.03em;margin-bottom:8px}.lp-metric-label{font-size:14px;font-weight:500;color:var(--lp-gray-600)}.lp-modules-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.lp-module-group{background:var(--lp-white);border-radius:var(--lp-radius-lg);padding:28px 28px 24px;border:1px solid var(--lp-gray-200);box-shadow:var(--lp-shadow-xs);transition:box-shadow .2s}.lp-module-group:hover{box-shadow:var(--lp-shadow-md)}.lp-module-group-label{font-family:Outfit,sans-serif;font-size:11px;font-weight:700;color:var(--lp-primary);margin-bottom:16px;text-transform:uppercase;letter-spacing:1px}.lp-module-tiles{display:flex;flex-wrap:wrap;gap:8px}.lp-module-tile{display:inline-flex;align-items:center;gap:6px;background:var(--lp-gray-50);border:1px solid var(--lp-gray-200);padding:7px 13px;border-radius:100px;font-size:12px;font-weight:600;color:var(--lp-gray-700);transition:all .2s var(--lp-ease);cursor:default}.lp-module-tile:hover{background:color-mix(in srgb,var(--lp-primary) 6%,transparent);border-color:color-mix(in srgb,var(--lp-primary) 25%,transparent);color:var(--lp-primary);transform:translateY(-1px)}.lp-module-tile .material-icons{font-size:15px;color:var(--lp-primary)}.lp-footer{background:var(--lp-dark);padding:44px 0 36px;border-top:1px solid rgba(255,255,255,.04)}.lp-footer-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px}.lp-footer-brand{display:flex;align-items:center;gap:10px}.lp-footer-logo{width:30px;height:30px;border-radius:7px;object-fit:contain;opacity:.9}.lp-footer-name{font-family:Outfit,sans-serif;font-size:17px;font-weight:700;color:var(--lp-white);letter-spacing:-.01em}.lp-footer-links{display:flex;gap:28px}.lp-footer-links a{font-size:14px;font-weight:500;color:#ffffff80;cursor:pointer;text-decoration:none;transition:color .2s}.lp-footer-links a:hover{color:var(--lp-white)}.lp-footer-copy{font-size:13px;color:#ffffff59;width:100%;text-align:center;padding-top:20px;margin-top:4px;border-top:1px solid rgba(255,255,255,.06)}.lp-animate{opacity:0;transform:translateY(28px);transition:opacity .65s var(--lp-ease),transform .65s var(--lp-ease)}.lp-visible{opacity:1;transform:translateY(0)}.lp-visible .lp-feature-card:nth-child(1){transition-delay:0ms}.lp-visible .lp-feature-card:nth-child(2){transition-delay:60ms}.lp-visible .lp-feature-card:nth-child(3){transition-delay:.12s}.lp-visible .lp-feature-card:nth-child(4){transition-delay:.18s}.lp-visible .lp-feature-card:nth-child(5){transition-delay:.24s}.lp-visible .lp-feature-card:nth-child(6){transition-delay:.3s}.lp-visible .lp-step-card:nth-child(1){transition-delay:0ms}.lp-visible .lp-step-card:nth-child(2){transition-delay:80ms}.lp-visible .lp-step-card:nth-child(3){transition-delay:.16s}.lp-visible .lp-step-card:nth-child(4){transition-delay:.24s}.lp-visible .lp-metric-card:nth-child(1){transition-delay:0ms}.lp-visible .lp-metric-card:nth-child(2){transition-delay:60ms}.lp-visible .lp-metric-card:nth-child(3){transition-delay:.12s}.lp-visible .lp-metric-card:nth-child(4){transition-delay:.18s}@media (max-width: 1024px){.lp-hero-text h1{font-size:52px}.lp-section-header h2{font-size:36px}.lp-features-grid,.lp-metrics-grid{grid-template-columns:repeat(2,1fr)}.lp-metrics-grid .lp-metric-card:nth-child(2){border-right:none}.lp-metrics-grid .lp-metric-card:nth-child(3){border-top:1px solid var(--lp-gray-200)}.lp-metrics-grid .lp-metric-card:nth-child(4){border-top:1px solid var(--lp-gray-200)}.lp-steps-grid{flex-wrap:wrap;justify-content:center;gap:40px}.lp-step-connector{display:none}}@media (max-width: 767px){.lp-container{padding:0 20px}.lp-nav-links{display:none}.lp-hamburger{display:flex}.lp-mobile-auth{display:none}.lp-mobile-menu{display:none;position:fixed;inset:0;background:#fffffff7;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);flex-direction:column;align-items:center;justify-content:center;gap:28px;z-index:999}.lp-mobile-menu-open{display:flex}.lp-mobile-menu a{font-size:22px;font-weight:700;color:var(--lp-dark);cursor:pointer;text-decoration:none;letter-spacing:-.01em}.lp-hero-bg{padding:100px 0 60px;min-height:auto}.lp-hero-text h1{font-size:38px}.lp-hero-brand-name{font-size:28px}.lp-hero-subtitle{font-size:16px}.lp-hero-ctas{flex-direction:column}.lp-hero-ctas .lp-btn{width:100%;justify-content:center}.lp-trust-signals{gap:16px}.lp-section{padding:72px 0}.lp-section-header{margin-bottom:40px}.lp-section-header h2{font-size:28px}.lp-features-grid{grid-template-columns:1fr}.lp-metrics-grid{grid-template-columns:repeat(2,1fr)}.lp-metrics-grid .lp-metric-card{border-right:none;border-bottom:1px solid var(--lp-gray-200)}.lp-metrics-grid .lp-metric-card:last-child{border-bottom:none}.lp-metric-value{font-size:36px}.lp-modules-grid{grid-template-columns:1fr}.lp-steps-grid{flex-direction:column;align-items:center;gap:32px}.lp-step-connector{display:none}.lp-footer-inner{flex-direction:column;align-items:center;text-align:center}}.lp-nav-brand-svg{display:flex;align-items:center;width:36px;height:36px;flex-shrink:0}.lp-nav-brand-svg ::ng-deep svg{width:36px;height:36px;display:block}.lp-nav-brand-wordmark{display:flex;flex-direction:column;line-height:1.1;margin-left:8px}.lp-nav-wordmark-line1{font-size:15px;font-weight:800;color:#1a3a7a;letter-spacing:-.01em;font-family:Outfit,sans-serif}.lp-nav-wordmark-line2{font-size:9px;font-weight:600;letter-spacing:.12em;color:#e8a020;text-transform:uppercase}.lp-hero-bg{position:relative}.lp-hero-watermark{position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:center;padding-top:40px;pointer-events:none;z-index:1}.lp-hero-watermark-inner{width:700px;height:700px;opacity:.04;overflow:hidden;flex-shrink:0}@media (min-width: 768px){.lp-hero-watermark-inner{width:800px;height:800px}}.lp-hero-content{display:flex;flex-direction:column;align-items:center}.lp-hero-main{z-index:1;width:100%}.lp-hero-visual{position:relative;z-index:1;width:100%;max-width:900px;margin:48px auto 0}.lp-workflow-road{position:relative;display:flex;justify-content:space-between;align-items:flex-start;padding:48px 0 24px;gap:16px}.lp-road-line{position:absolute;top:72px;left:6%;right:6%;height:3px;background:linear-gradient(90deg,var(--lp-primary-light),var(--lp-primary),var(--lp-primary-light));border-radius:2px;opacity:.4}.lp-waypoint{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;z-index:1}.lp-waypoint-marker{width:52px;height:52px;border-radius:50%;background:var(--lp-primary);color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:12px;box-shadow:0 4px 16px color-mix(in srgb,var(--lp-primary) 35%,transparent);transition:transform .25s cubic-bezier(.34,1.56,.64,1)}.lp-waypoint:hover .lp-waypoint-marker{transform:translateY(-4px) scale(1.08)}.lp-waypoint-marker .material-icons{font-size:22px}.lp-waypoint-number{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--lp-primary);margin-bottom:6px;opacity:.7}.lp-waypoint-title{font-size:14px;font-weight:700;color:var(--lp-dark);margin-bottom:6px;font-family:Outfit,sans-serif}.lp-waypoint-desc{font-size:12px;color:var(--lp-gray-600);line-height:1.5;max-width:140px}.lp-section-dark{background:var(--lp-dark);color:#fff}.lp-section-dark.lp-section{padding:96px 0}.lp-header-light h2{color:#fff}.lp-header-light p{color:#ffffffa6}.lp-security-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}.lp-security-card{background:#ffffff0d;border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:32px 28px;transition:background .25s ease}.lp-security-card:hover{background:#ffffff14}.lp-security-icon{width:52px;height:52px;border-radius:14px;background:#ffffff1a;display:flex;align-items:center;justify-content:center;margin-bottom:20px;color:#fff}.lp-security-icon .material-icons{font-size:24px}.lp-security-card h3{font-size:18px;font-weight:700;color:#fff;margin:0 0 12px;font-family:Outfit,sans-serif}.lp-security-card p{font-size:14px;color:#fff9;line-height:1.65;margin:0}.lp-testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}.lp-testimonial-card{background:#fff;border:1px solid var(--lp-gray-200);border-radius:20px;padding:32px 28px;display:flex;flex-direction:column;gap:16px;box-shadow:0 1px 3px #00000012,0 1px 2px #0000000d;transition:box-shadow .25s ease,transform .25s ease}.lp-testimonial-card:hover{box-shadow:0 4px 8px #0000000f;transform:translateY(-2px)}.lp-stars{display:flex;gap:2px;color:var(--lp-secondary)}.lp-stars .material-icons{font-size:18px}.lp-testimonial-quote{font-size:15px;color:var(--lp-gray-700);line-height:1.65;font-style:italic;margin:0;flex:1}.lp-testimonial-author{display:flex;align-items:center;gap:12px}.lp-author-avatar{width:44px;height:44px;border-radius:50%;background:var(--lp-primary);color:#fff;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:Outfit,sans-serif}.lp-author-name{font-size:14px;font-weight:700;color:var(--lp-dark)}.lp-author-role{font-size:12px;color:var(--lp-gray-400)}.lp-pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;align-items:start}.lp-pricing-card{background:#fff;border:1px solid var(--lp-gray-200);border-radius:20px;padding:36px 28px 28px;position:relative;display:flex;flex-direction:column;box-shadow:0 1px 3px #00000012,0 1px 2px #0000000d;transition:box-shadow .25s ease,transform .25s ease}.lp-pricing-card:hover{box-shadow:0 4px 8px #0000000f;transform:translateY(-3px)}.lp-pricing-popular{border-color:var(--lp-primary);box-shadow:0 0 0 2px var(--lp-primary);transform:scale(1.03)}.lp-pricing-popular:hover{transform:scale(1.03) translateY(-3px)}.lp-popular-badge{position:absolute;top:-12px;left:50%;transform:translate(-50%);background:var(--lp-primary);color:#fff;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 14px;border-radius:100px;white-space:nowrap;font-family:Outfit,sans-serif}.lp-pricing-header{margin-bottom:24px}.lp-pricing-header h3{font-size:20px;font-weight:800;color:var(--lp-dark);margin:0 0 12px;font-family:Outfit,sans-serif}.lp-pricing-price{display:flex;align-items:baseline;gap:4px;margin-bottom:8px}.lp-price-amount{font-size:40px;font-weight:900;color:var(--lp-primary);font-family:Outfit,sans-serif;line-height:1}.lp-price-period{font-size:16px;color:var(--lp-gray-600)}.lp-pricing-desc{font-size:13px;color:var(--lp-gray-600);margin:0}.lp-pricing-features{list-style:none;padding:0;margin:0 0 28px;display:flex;flex-direction:column;gap:10px;flex:1}.lp-pricing-features li{font-size:14px;color:var(--lp-gray-700);padding-left:20px;position:relative}.lp-pricing-features li:before{content:\"\\2713\";position:absolute;left:0;color:var(--lp-primary);font-weight:700}.lp-btn-block{width:100%;justify-content:center;text-align:center}.lp-final-cta{background:linear-gradient(135deg,var(--lp-primary-dark, #152C4A) 0%,var(--lp-primary) 100%);padding:96px 0}.lp-cta-content{text-align:center}.lp-cta-content h2{font-size:40px;font-weight:900;color:#fff;margin:0 0 16px;font-family:Outfit,sans-serif;letter-spacing:-.02em}.lp-cta-content p{font-size:18px;color:#ffffffbf;margin:0 auto 36px;max-width:560px}.lp-cta-buttons{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}.lp-btn-white{background:#fff;color:var(--lp-primary);border:2px solid white;font-weight:700}.lp-btn-white:hover{background:#ffffffe6;transform:translateY(-1px)}.lp-btn-outline-white{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.5);font-weight:700}.lp-btn-outline-white:hover{background:#ffffff1a;border-color:#fff;transform:translateY(-1px)}.lp-footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;padding:64px 0 48px}.lp-footer-brand-col{display:flex;flex-direction:column;gap:16px}.lp-footer-brand-custom{display:flex;align-items:center;gap:10px}.lp-footer-brand-svg{display:flex;align-items:center;width:36px;height:36px;flex-shrink:0}.lp-footer-brand-svg ::ng-deep svg{width:36px;height:36px;display:block}.lp-footer-brand-wordmark{display:flex;flex-direction:column;line-height:1.1}.lp-footer-wordmark-line1{font-size:15px;font-weight:800;color:#fff;font-family:Outfit,sans-serif}.lp-footer-wordmark-line2{font-size:9px;font-weight:600;letter-spacing:.12em;color:#e8a020;text-transform:uppercase}.lp-footer-brand-default{display:flex;align-items:center;gap:10px}.lp-footer-tagline{font-size:14px;color:#ffffff80;line-height:1.6;margin:0;max-width:280px}.lp-footer-col{display:flex;flex-direction:column;gap:12px}.lp-footer-col h4{font-size:13px;font-weight:700;color:#fff;margin:0 0 4px;letter-spacing:.04em;text-transform:uppercase;font-family:Outfit,sans-serif}.lp-footer-col a{font-size:14px;color:#ffffff80;cursor:pointer;text-decoration:none;transition:color .2s}.lp-footer-col a:hover{color:#fff}.lp-footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding:24px 0;font-size:13px;color:#ffffff59}@media (max-width: 768px){.lp-hero-visual{max-width:100%;margin-top:32px}.lp-workflow-road{flex-direction:column;align-items:center;gap:32px}.lp-road-line{display:none}.lp-waypoint-desc{max-width:260px}.lp-security-grid,.lp-testimonials-grid,.lp-pricing-grid{grid-template-columns:1fr}.lp-pricing-popular{transform:none}.lp-pricing-popular:hover{transform:translateY(-3px)}.lp-cta-content h2{font-size:28px}.lp-footer-grid{grid-template-columns:1fr 1fr;gap:32px;padding:48px 0 32px}}\n"] }]
+        }], ctorParameters: () => [{ type: i1$2.Router }, { type: AuthService }, { type: i0.ElementRef }, { type: i1$5.DomSanitizer }], propDecorators: { config: [{
+                type: Input
+            }], onWindowScroll: [{
+                type: HostListener,
+                args: ['window:scroll']
+            }] } });
+
 class TinSpaModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TinSpaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.14", ngImport: i0, type: TinSpaModule, declarations: [TinSpaComponent, TextComponent, TextMaskComponent, TextAreaComponent, TextSingleComponent, CheckComponent, DateComponent, DatetimeComponent, LabelComponent, SelectComponent,
@@ -16528,7 +16701,8 @@ class TinSpaModule {
             AppModelsComponent, LoanProductsComponent, LoansComponent, LoanPaymentsComponent, WelcomeComponent, // Tin-SPA modules welcome
             TermsDialogComponent, PrivacyDialogComponent, // Changed: Added terms and privacy dialogs
             ChartsComponent, // Changed: Added ChartsComponent for config-driven chart rendering
-            FeatureDirective // Added: *spaFeature structural directive for plan-based feature gating
+            FeatureDirective, // Added: *spaFeature structural directive for plan-based feature gating
+            SpaLandingComponent // Added: Config-driven landing page component
         ], imports: [SpaMatModule,
             HttpClientModule,
             CurrencyInputModule,
@@ -16580,7 +16754,8 @@ class TinSpaModule {
             TermsDialogComponent, PrivacyDialogComponent, // Changed: Added terms and privacy dialogs to exports
             SelectLiteComponent, // Changed: Exported so pages outside TinSpaModule can use spa-select-lite
             ChartsComponent, // Changed: Exported ChartsComponent for consumer apps
-            FeatureDirective // Added: Exported *spaFeature directive for consumer apps
+            FeatureDirective, // Added: Exported *spaFeature directive for consumer apps
+            SpaLandingComponent // Added: Exported config-driven landing page component
         ] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TinSpaModule, providers: [
             { provide: HTTP_INTERCEPTORS, useClass: LoaderInterceptor, multi: true },
@@ -16620,7 +16795,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                         AppModelsComponent, LoanProductsComponent, LoansComponent, LoanPaymentsComponent, WelcomeComponent, // Tin-SPA modules welcome
                         TermsDialogComponent, PrivacyDialogComponent, // Changed: Added terms and privacy dialogs
                         ChartsComponent, // Changed: Added ChartsComponent for config-driven chart rendering
-                        FeatureDirective // Added: *spaFeature structural directive for plan-based feature gating
+                        FeatureDirective, // Added: *spaFeature structural directive for plan-based feature gating
+                        SpaLandingComponent // Added: Config-driven landing page component
                     ],
                     imports: [
                         SpaMatModule,
@@ -16676,7 +16852,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                         TermsDialogComponent, PrivacyDialogComponent, // Changed: Added terms and privacy dialogs to exports
                         SelectLiteComponent, // Changed: Exported so pages outside TinSpaModule can use spa-select-lite
                         ChartsComponent, // Changed: Exported ChartsComponent for consumer apps
-                        FeatureDirective // Added: Exported *spaFeature directive for consumer apps
+                        FeatureDirective, // Added: Exported *spaFeature directive for consumer apps
+                        SpaLandingComponent // Added: Exported config-driven landing page component
                     ],
                     providers: [
                         { provide: HTTP_INTERCEPTORS, useClass: LoaderInterceptor, multi: true },
@@ -16724,45 +16901,17 @@ class LoginComponent {
         else {
             this.redirectPath = "home";
         }
-        // Changed: Auto-redirect only if session is genuinely valid (non-expired token)
-        if (this.authService.hasValidSession()) {
-            this.notifications(); // Changed: Establish SignalR connections on session restore (not just fresh login)
-            this.router.navigate([this.redirectPath]);
-            return;
-        }
-        // Changed: If expired but refresh token exists, try silent refresh before showing login form
-        if (this.authService.hasRefreshToken()) {
-            this.isProcessing = true;
-            this.authService.silentRefresh().then((success) => {
-                this.isProcessing = false;
-                if (success) {
-                    this.notifications(); // Changed: Establish SignalR connections after silent refresh
-                    this.router.navigate([this.redirectPath]);
-                }
-                // If refresh fails, stay on login page — user must re-enter credentials
-            });
-            return;
-        }
-        if (this.route.snapshot.queryParams["sso"] == "msal" && this.appConfig.microsoftAuth) {
-            this.loginWithMS();
-        }
-        this.authService.autoLoginObserv.subscribe(x => {
-            this.autoLogin = x;
-            // console.log("AUTO LOGIN :" + this.autoLogin)
-        });
-        this.socialUser = null;
-        this.authService.socialUserObserv.subscribe((socialUser) => {
-            if (!socialUser)
+        // Changed: Use shared tryRestoreSession — handles valid-session check and silent refresh in one call
+        this.isProcessing = true;
+        this.authService.tryRestoreSession().then(success => {
+            this.isProcessing = false;
+            if (success) {
+                this.notifications();
+                this.router.navigate([this.redirectPath]);
                 return;
-            this.socialUser = socialUser;
-            this.user.userName = socialUser.id;
-            this.user.password = socialUser.id; //dummy data
-            this.user.token = socialUser.idToken;
-            this.user.authType = socialUser.provider;
-            this.login();
+            }
+            this.setupForm(); // Changed: Only set up login form if no session could be restored
         });
-        // this.authService.logoff();
-        this.style = this.dataService.appConfig.loginStyle ?? 'default';
     }
     loginWithMS() {
         this.msalService.loginPopup({
@@ -16792,6 +16941,25 @@ class LoginComponent {
     recoverAccount() {
         this.router.navigate(["recover-account"]);
     }
+    // Changed: Extracted from ngOnInit — runs only when no session could be restored
+    setupForm() {
+        if (this.route.snapshot.queryParams["sso"] == "msal" && this.appConfig.microsoftAuth) {
+            this.loginWithMS();
+        }
+        this.authService.autoLoginObserv.subscribe(x => { this.autoLogin = x; });
+        this.socialUser = null;
+        this.authService.socialUserObserv.subscribe((socialUser) => {
+            if (!socialUser)
+                return;
+            this.socialUser = socialUser;
+            this.user.userName = socialUser.id;
+            this.user.password = socialUser.id;
+            this.user.token = socialUser.idToken;
+            this.user.authType = socialUser.provider;
+            this.login();
+        });
+        this.style = this.dataService.appConfig.loginStyle ?? 'default';
+    }
     login() {
         if (this.user.userName == "" || this.user.password == "") {
             this.messageService.toast("Please enter your credentials");
@@ -22501,6 +22669,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                 }]
         }] });
 
+// Config interfaces for the spa-landing component
+// Consumer apps provide this config to drive the entire landing page
+// Alsquare brand SVG — dark variant (for navbar on light backgrounds)
+const ALSQUARE_SVG_DARK = `<svg viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M32 62C17.6 62 6 50.4 6 36S17.6 10 32 10c9.2 0 17.3 4.9 21.8 12.2" stroke="#1a3a7a" stroke-width="9" stroke-linecap="round" fill="none"/>
+  <circle cx="32" cy="36" r="10" fill="white" stroke="#1a3a7a" stroke-width="7"/>
+  <circle cx="32" cy="36" r="5.5" fill="#e8a020"/>
+  <line x1="48" y1="22" x2="48" y2="62" stroke="#1a3a7a" stroke-width="9" stroke-linecap="round"/>
+  <rect x="56" y="6" width="7" height="56" rx="3.5" fill="#e8a020"/>
+  <rect x="67" y="0" width="6" height="6" rx="1" fill="#1a3a7a"/>
+  <rect x="67" y="9" width="6" height="6" rx="1" fill="#1a3a7a"/>
+  <rect x="75" y="0" width="5" height="5" rx="1" fill="#1a3a7a" opacity="0.7"/>
+  <rect x="75" y="8" width="5" height="5" rx="1" fill="#1a3a7a" opacity="0.5"/>
+</svg>`;
+// Alsquare brand SVG — white variant (for footer on dark backgrounds)
+const ALSQUARE_SVG_WHITE = `<svg viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M32 62C17.6 62 6 50.4 6 36S17.6 10 32 10c9.2 0 17.3 4.9 21.8 12.2" stroke="#ffffff" stroke-width="9" stroke-linecap="round" fill="none"/>
+  <circle cx="32" cy="36" r="10" fill="#0f172a" stroke="#ffffff" stroke-width="7"/>
+  <circle cx="32" cy="36" r="5.5" fill="#e8a020"/>
+  <line x1="48" y1="22" x2="48" y2="62" stroke="#ffffff" stroke-width="9" stroke-linecap="round"/>
+  <rect x="56" y="6" width="7" height="56" rx="3.5" fill="#e8a020"/>
+  <rect x="67" y="0" width="6" height="6" rx="1" fill="#ffffff"/>
+  <rect x="67" y="9" width="6" height="6" rx="1" fill="#ffffff"/>
+  <rect x="75" y="0" width="5" height="5" rx="1" fill="#ffffff" opacity="0.7"/>
+  <rect x="75" y="8" width="5" height="5" rx="1" fill="#ffffff" opacity="0.5"/>
+</svg>`;
+
 /*
  * Public API Surface of tin-spa
  */
@@ -22510,5 +22705,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { Account, AccountsComponent as AccountingAccountsComponent, AggregatesComponent as AccountingAggregatesComponent, AgingComponent as AccountingAgingComponent, CurrenciesComponent as AccountingCurrenciesComponent, AccountingDashboardComponent, InvoicesComponent as AccountingInvoicesComponent, ReportsComponent as AccountingReportsComponent, AccountingService, StatementComponent as AccountingStatementComponent, TransactionTypesComponent as AccountingTransactionTypesComponent, TransactionsComponent as AccountingTransactionsComponent, Action, ActivityComponent, AdminModule, AlertComponent, AlertConfig, AlertMessage, ApiResponse, AppConfig, AppModelsComponent, AssetStatus, AttachComponent, AuthService, BillingPageComponent, BrandsComponent, CacheConfig, CapItem, CapsulesComponent, CategoriesComponent, ChangePasswordComponent, ChangeUserPassword, ChartConfig, ChartsComponent, CheckComponent, ChipsComponent, Constants, Core, CreateAccountComponent, CustomersComponent, DataServiceLib, DateComponent, DatetimeComponent, DepartmentsComponent, DetailsDialog, DetailsDialogConfig, DetailsDialogProcessor, DetailsSource, DialogService, EmailComponent, EmployeesComponent, ExportService, FeatureDirective, FilterComponent, FormComponent, FormConfig, GeneralService, GradesComponent, GroupsComponent, HtmlComponent, HttpService, IndexModule, InventoryDashboardComponent, InventoryReceiptStatus, InventoryService, InvoiceDashboardComponent, InvoiceItemType, InvoiceStatus, LabelComponent, ListDialogComponent, ListDialogConfig, LoaderComponent, LoaderService, LoanPaymentsComponent, LoanProductsComponent, LoansComponent, LoansService, LogLevel, LogService, LoginComponent, LogsComponent, MembershipComponent, MessageService, MoneyComponent, MovementType, NavMenuComponent, NotesComponent, NotesConfig, NotificationsService, NumberComponent, OnboardingComponent, OptionComponent, OverviewDashboardComponent, PageComponent, PageConfig, PayrollDashboardComponent, PlansComponent, PositionsComponent, PreferencesComponent, PrivacyDialogComponent, Profile, ProfileComponent, PurchasingDashboardComponent, PushNotificationService, RecoverAccountComponent, Register, Role, RoleAccess, RolesComponent, SalesDashboardComponent, SearchComponent, SearchConfig, SecurityConfig, SelectBitwiseComponent, SelectComponent, SelectLiteComponent, SelectMultiComponent, SettingsComponent, SignupComponent, SignupData, SpaAdminModule, SpaIndexModule, SpaMatModule, SpaUserModule, StatusesComponent, Step, StepConfig, StepsComponent, StorageService, SubCategoriesComponent, SubscriptionPageComponent, SubscriptionService, SuppliersComponent, TabService, TableComponent, TableConfig, TabsComponent, TabsInternalComponent, TabsLiteComponent, TasksComponent, TenantsComponent, TermsDialogComponent, TextAreaComponent, TextComponent, TextMaskComponent, TextMultiComponent, TextSingleComponent, TileConfig, TilesComponent, TinSpaComponent, TinSpaModule, TinSpaService, TitleActionsComponent, TransactionTiming, UnitOfMeasure, UpdateService, User, UserModule, UsersComponent, ViewerComponent, WelcomeComponent, authGuard, dialogOptions, featureGuard, loginConfig, messageDialog, viewerDialog };
+export { ALSQUARE_SVG_DARK, ALSQUARE_SVG_WHITE, Account, AccountsComponent as AccountingAccountsComponent, AggregatesComponent as AccountingAggregatesComponent, AgingComponent as AccountingAgingComponent, CurrenciesComponent as AccountingCurrenciesComponent, AccountingDashboardComponent, InvoicesComponent as AccountingInvoicesComponent, ReportsComponent as AccountingReportsComponent, AccountingService, StatementComponent as AccountingStatementComponent, TransactionTypesComponent as AccountingTransactionTypesComponent, TransactionsComponent as AccountingTransactionsComponent, Action, ActivityComponent, AdminModule, AlertComponent, AlertConfig, AlertMessage, ApiResponse, AppConfig, AppModelsComponent, AssetStatus, AttachComponent, AuthService, BillingPageComponent, BrandsComponent, CacheConfig, CapItem, CapsulesComponent, CategoriesComponent, ChangePasswordComponent, ChangeUserPassword, ChartConfig, ChartsComponent, CheckComponent, ChipsComponent, Constants, Core, CreateAccountComponent, CustomersComponent, DataServiceLib, DateComponent, DatetimeComponent, DepartmentsComponent, DetailsDialog, DetailsDialogConfig, DetailsDialogProcessor, DetailsSource, DialogService, EmailComponent, EmployeesComponent, ExportService, FeatureDirective, FilterComponent, FormComponent, FormConfig, GeneralService, GradesComponent, GroupsComponent, HtmlComponent, HttpService, IndexModule, InventoryDashboardComponent, InventoryReceiptStatus, InventoryService, InvoiceDashboardComponent, InvoiceItemType, InvoiceStatus, LabelComponent, ListDialogComponent, ListDialogConfig, LoaderComponent, LoaderService, LoanPaymentsComponent, LoanProductsComponent, LoansComponent, LoansService, LogLevel, LogService, LoginComponent, LogsComponent, MembershipComponent, MessageService, MoneyComponent, MovementType, NavMenuComponent, NotesComponent, NotesConfig, NotificationsService, NumberComponent, OnboardingComponent, OptionComponent, OverviewDashboardComponent, PageComponent, PageConfig, PayrollDashboardComponent, PlansComponent, PositionsComponent, PreferencesComponent, PrivacyDialogComponent, Profile, ProfileComponent, PurchasingDashboardComponent, PushNotificationService, RecoverAccountComponent, Register, Role, RoleAccess, RolesComponent, SalesDashboardComponent, SearchComponent, SearchConfig, SecurityConfig, SelectBitwiseComponent, SelectComponent, SelectLiteComponent, SelectMultiComponent, SettingsComponent, SignupComponent, SignupData, SpaAdminModule, SpaIndexModule, SpaLandingComponent, SpaMatModule, SpaUserModule, StatusesComponent, Step, StepConfig, StepsComponent, StorageService, SubCategoriesComponent, SubscriptionPageComponent, SubscriptionService, SuppliersComponent, TabService, TableComponent, TableConfig, TabsComponent, TabsInternalComponent, TabsLiteComponent, TasksComponent, TenantsComponent, TermsDialogComponent, TextAreaComponent, TextComponent, TextMaskComponent, TextMultiComponent, TextSingleComponent, TileConfig, TilesComponent, TinSpaComponent, TinSpaModule, TinSpaService, TitleActionsComponent, TransactionTiming, UnitOfMeasure, UpdateService, User, UserModule, UsersComponent, ViewerComponent, WelcomeComponent, authGuard, dialogOptions, featureGuard, loginConfig, messageDialog, viewerDialog };
 //# sourceMappingURL=tin-spa.mjs.map